.committee-page{
    background:#e6e8eb;
    padding:40px 0 80px;
}


/*================ HERO SECTION ================*/

.scientific-hero{

    position:relative;

    height:80px;

    overflow:hidden;
}


.hero-image{

    width:100%;

    height:100%;

    object-fit:cover;
}


.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(rgba(34,53,108,.80),
                    rgba(34,53,108,.65));
}


.hero-content{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;
}


.hero-badge{

    background:#22356c;

    border:3px solid #f8770e;

    padding:12px 30px;

    border-radius:50px;

    box-shadow:0 10px 25px rgba(0,0,0,.25);
}


.hero-badge h1{

    color:white;

    margin:0;

    font-size:30px;

    font-weight:500;
}


/* ================= TITLE ================= */

.committee-title,
.member-title{
    text-align:center;
    margin-bottom:50px;
}

.committee-title h2,
.member-title h3{

    display:inline-block;

    background:#22356c;

    color:white;

    padding:12px 35px;

    border-radius:40px;
}



/* ================= PROFILE GRID ================= */

.committee-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-bottom:80px;
}



/* CARD */

.profile-card{

    background:#fff;

    border-radius:20px;

    text-align:center;

    padding:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.1);

    transition:.3s;
}


.profile-card:hover{

    transform:translateY(-10px);
}


.profile-card img{

    width:140px;

    height:140px;

    object-fit:contain;

    border-radius:50%;

    border:4px solid #f8770e;

    background-color: rgba(222,222,222);

}


.profile-card h4{

    margin-top:20px;

    font-size:20px;

    color:#22356c;
}


.profile-card span{

    display:inline-block;

    margin-top:12px;

    padding:8px 18px;

    background:#f8770e;

    color:white;

    border-radius:30px;

    font-size:15px;
}



/* ================= MEMBERS ================= */

.member-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;
}


.member-card{

    background:#fff;

    padding:18px;

    border-left:4px solid #f8770e;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    color:#22356c;

    font-weight:500;

    transition:.3s;
}


.member-card:hover{

    background:#22356c;

    color:white;
}

@media(max-width:767px){

    .committee-grid{

        grid-template-columns:1fr;
    }


    .member-grid{

        grid-template-columns:1fr;
    }


    .profile-card img{

        width:120px;

        height:120px;
    }

}