.team-header { text-align: center; margin-bottom: 20px; } .team-logo { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px auto; display: block; } .team-info { display: flex; justify-content: space-around; margin: 20px 0; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .team-info h4 { margin: 0; color: #555; } .team-info p { margin: 0; font-weight: bold; } .info-box { /* background-color: #fff; */ padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .spanme { font-size: 18px; color: #333; font-weight: bold; } .spanme-content { font-size: 16px; color: #555; } .toggle-buttons { display: flex; justify-content: center; margin-bottom: 20px; /* background: #3f88c5; */ border: 1px solid #3f88c5; padding: 5px; border-radius: 5px; } .toggle-button { padding: 10px 20px; margin: 0 10px; font-size: 16px; font-weight: bold; cursor: pointer; border: none; border-radius: 20px; background-color: #393e41; color: #fff; transition: all 0.3s ease; } .toggle-button.active { background-color: #44bba4; } .toggle-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; } .toggle-item { text-align: center; /* background-color: #fff; */ padding: 10px; border-radius: 10px; border: 1px solid #3f88c5; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .toggle-item:hover { transform: translateY(-5px); } .toggle-photo { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; margin-bottom: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }