*{

margin:0;

padding:0;

box-sizing:border-box;

font-family: 'Cormorant Garamond', serif;

}


.committee-hero{

height:450px;
 
background:url("../images/clubbbb.png")
               center center/cover no-repeat;

background-size:cover;

background-position:center;

position:relative;

}


.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.60);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
    color:#fff;
    padding:20px;
}

.overlay h4{
    color:#f4edd8;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.overlay h1{
    font-size:65px;
    font-weight:700;
    margin-bottom:15px;
}

.overlay h2{
    font-size:34px;
    color:#d4af37;
    margin-bottom:20px;
}

.overlay h5{
    font: size 15px;
    color:#d4af37;
    margin-bottom:20px;
}

.overlay p{
    width:70%;
    font-size:20px;
    line-height:32px;
}

.committee-intro{

width:70%;

margin:80px auto;

text-align:center;

}

.committee-intro h2{

font-size:40px;

margin-bottom:20px;

color:#16304d;

}

.committee-intro p{

font-size:18px;

line-height:32px;

color:#666;

}



.committee-section{

padding:60px 8%;

}


.committee-section h2{

text-align:center;

font-size:38px;

margin-bottom:50px;

color:#16304d;

position:relative;

}



.committee-section h2:after{

content:'';

width:90px;

height:4px;

background:#d6aa45;

display:block;

margin:15px auto;

}



.committee-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:35px;

}



.committee-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    text-align:center;

    transition:.4s;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

    border:1px solid rgba(212,175,55,.15);

}

.committee-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 50px rgba(0,0,0,.20);

}



.committee-card img{
width:100%;
    height:340px;
    object-fit:cover;
    object-position:center top;

}



.committee-card:hover img{

transform:scale(1);

}


.committee-card h3{

    margin-top:25px;

    color:#16304d;

    font-size:25px;

    font-weight:600;

}

.committee-card span{

    display:inline-block;

    margin:18px 0 35px;

    padding:10px 28px;

    border-radius:40px;

    background:#d4af37;

    color:#fff;

    font-weight:600;

}



.committee-footer{

background:#16304d;

color:white;

padding:70px;

text-align:center;

margin-top:80px;

}


.committee-footer h2{

font-size:38px;

margin-bottom:15px;

}


.committee-footer p{

font-size:20px;

color:#d6aa45;

}

body{

    background:linear-gradient(to bottom,#faf8f2,#ffffff);

}

.club-logo{
    width:70px;
    height:auto;
    margin-bottom:12px;
}

.club-logo:hover{

    transform:scale(1.08) rotate(5deg);

}

/*====================================================
TABLET RESPONSIVE
====================================================*/

@media (max-width: 991px){


.committee-hero{
    height:420px;
}

.overlay{
    padding:20px;
}

.overlay h1{
    font-size:48px;
    line-height:1.15;
}

.overlay h2{
    font-size:28px;
}

.overlay h4{
    font-size:15px;
    letter-spacing:3px;
}

.overlay p{
    width:85%;
    font-size:18px;
    line-height:28px;
}

.committee-section{
    padding:60px 6%;
}

.committee-grid{
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.committee-card img{
    height:300px;
}

.committee-card h3{
    font-size:23px;
}

.committee-footer{
    padding:60px 30px;
}

.committee-footer h2{
    font-size:32px;
}

}

/*====================================================
MOBILE RESPONSIVE
====================================================*/

@media (max-width: 768px){


.committee-hero{

    height:auto;

    min-height:480px;

    background-position:center;

}


.overlay{

    padding:40px 20px;

}


.overlay h4{

    font-size:13px;

    letter-spacing:2px;

    line-height:1.4;

    margin-bottom:12px;

}


.overlay h1{

    font-size:36px;

    line-height:1.2;

    margin-bottom:12px;

}


.overlay h2{

    font-size:24px;

    line-height:1.2;

    margin-bottom:15px;

}


.overlay p{

    width:100%;

    font-size:16px;

    line-height:25px;

}


.committee-section{

    padding:50px 20px;

}


.committee-grid{

    grid-template-columns:1fr;

    gap:25px;

}


.committee-card{

    width:100%;

    max-width:400px;

    margin:0 auto;

}


.committee-card img{

    width:100%;

    height:auto;

    max-height:420px;

    object-fit:cover;

    object-position:center top;

}


.committee-card h3{

    font-size:23px;

    margin-top:20px;

}


.committee-card span{

    margin:15px 0 25px;

    padding:8px 22px;

    font-size:15px;

}


.committee-footer{

    padding:50px 20px;

    margin-top:50px;

}


.committee-footer h2{

    font-size:28px;

    line-height:1.3;

}


.committee-footer p{

    font-size:17px;

}

}

/*====================================================
SMALL MOBILE
====================================================*/

@media (max-width: 480px){


.committee-hero{

    min-height:500px;

}


.overlay{

    padding:35px 15px;

}


.overlay h4{

    font-size:12px;

    letter-spacing:1.5px;

}


.overlay h1{

    font-size:29px;

    line-height:1.2;

}


.overlay h2{

    font-size:21px;

}


.overlay p{

    font-size:15px;

    line-height:23px;

}


.committee-section{

    padding:40px 15px;

}


.committee-grid{

    gap:20px;

}


.committee-card{

    border-radius:15px;

}


.committee-card img{

    max-height:380px;

}


.committee-card h3{

    font-size:21px;

}


.committee-card span{

    font-size:14px;

    padding:8px 20px;

}


.committee-footer{

    padding:45px 15px;

}


.committee-footer h2{

    font-size:25px;

}


.committee-footer p{

    font-size:16px;

}


}