.team-hero {
background: linear-gradient(135deg, rgba(26, 151, 205, .8), rgba(0, 0, 0, .8));
padding: 180px 0 100px;
color: #fff;
text-align: center
}

.team-hero h1 {
font-size: 3.0rem;
margin-bottom: 15px
}

.team-hero p {
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto 25px
}

.team-section {
padding: 80px 0
}

.team-header {
text-align: center;
margin-bottom: 40px
}

.team-header h2 {
font-size: 2.2rem;
color: var(--dark-color);
margin-bottom: 12px
}

.team-header p {
color: var(--text-light);
max-width: 700px;
margin: 0 auto;
line-height: 1.7
}

.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
margin-top: 30px
}

.team-member {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
transition: var(--transition);
text-align: center
}

.team-member:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, .1)
}

.member-image {
width: 100%;
height: 280px;
overflow: hidden
}

.member-image img {
width: 100%;
height: 100%;
object-fit: cover
}

.member-info {
padding: 20px
}

.member-info h3 {
font-size: 1.3rem;
margin-bottom: 6px;
color: var(--dark-color)
}

.member-role {
color: var(--secondary-color);
font-weight: 500;
margin-bottom: 12px;
display: block
}

.member-bio {
color: var(--text-light);
font-size: .95rem;
line-height: 1.6
}

.team-categories {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin: 20px 0 30px
}

.category-btn {
padding: 8px 18px;
background: #fff;
border: 1px solid #eee;
border-radius: 50px;
font-size: .95rem;
cursor: pointer;
transition: var(--transition)
}

.category-btn.active,
.category-btn:hover {
background: var(--secondary-color);
color: #fff;
border-color: var(--secondary-color)
}

.team-cta {
text-align: center;
margin-top: 50px
}