/* PENGURUS */

.pengurus{

padding:110px 8%;

background:
linear-gradient(
180deg,
#f8fafc,
#ffffff
);

}


/* HEADER */

.section-head{

text-align:center;

max-width:850px;

margin:auto;

margin-bottom:70px;

}


.label{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:#eaf2ff;

color:#2563eb;

font-size:13px;

font-weight:700;

letter-spacing:2px;

margin-bottom:20px;

}


.section-title{

font-size:48px;

line-height:1.25;

font-weight:800;

color:#0f172a;

margin-bottom:18px;

}


.section-desc{

font-size:17px;

line-height:1.8;

color:#64748b;

}



/* GRID */

.pengurus-wrap{

display:grid;

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

gap:30px;

}



/* CARD */

.card{

background:white;

border-radius:28px;

overflow:hidden;

border:1px solid #edf2f7;

box-shadow:
0 15px 40px rgba(0,0,0,.06);

transition:.4s;

}


.card:hover{

transform:
translateY(-12px);

box-shadow:
0 25px 60px rgba(0,0,0,.12);

}



/* IMAGE */

.card-image{

height:320px;

overflow:hidden;

position:relative;

}


.card-image img{

width:100%;
height:100%;

object-fit:cover;

transition:.7s;

}


.card:hover img{

transform:scale(1.08);

}


.card-image::after{

content:"";

position:absolute;

left:0;
right:0;
bottom:0;

height:120px;

background:
linear-gradient(
transparent,
rgba(0,0,0,.7)
);

}



/* CONTENT */

.card-content{

padding:25px;

text-align:center;

}


.badge{

display:inline-block;

padding:8px 15px;

border-radius:100px;

background:#eaf2ff;

color:#2563eb;

font-size:12px;

font-weight:700;

margin-bottom:15px;

}


.card h3{

font-size:24px;

margin-bottom:8px;

color:#0f172a;

}


.card span{

display:block;

font-size:15px;

color:#d60000;

font-weight:600;

line-height:1.6;

}



/* BUTTON */

.center-btn{

text-align:center;

margin-top:70px;

}


.btn-merah{

display:inline-flex;

align-items:center;

padding:16px 35px;

border-radius:100px;

background:#2563eb;

color:white;

font-weight:700;

text-decoration:none;

transition:.35s;

box-shadow:
0 10px 25px rgba(37,99,235,.25);

}


.btn-merah:hover{

background:#d60000;

transform:translateY(-5px);

}



/* RESPONSIVE */

@media(max-width:1200px){

.pengurus-wrap{

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

}

}


@media(max-width:900px){

.pengurus-wrap{

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

}

.section-title{

font-size:38px;

}

}


@media(max-width:600px){

.pengurus-wrap{

grid-template-columns:1fr;

}

.section-title{

font-size:30px;

}

}