.cabang{

padding:110px 8%;

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

}


.section-head{

text-align:center;

max-width:850px;

margin:auto;

margin-bottom:70px;

}

.label{

display:inline-block;

padding:10px 18px;

background:#eaf2ff;

color:#2563eb;

border-radius:100px;

font-size:13px;

font-weight:700;

letter-spacing:2px;

margin-bottom:20px;

}

.section-title{

font-size:48px;

font-weight:800;

color:#0f172a;

margin-bottom:20px;

}

.section-desc{

font-size:17px;

line-height:1.8;

color:#64748b;

}

.cabang-grid{

display:grid;

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

gap:30px;

}

.cabang-item{

background:white;

border-radius:28px;

overflow:hidden;

border:1px solid #edf2f7;

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

transition:.4s;

}

.cabang-item:hover{

transform:translateY(-10px);

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

}

.cabang-image{

height:190px;

overflow:hidden;

position:relative;

}

.cabang-image img{

width:100%;
height:100%;
object-fit:cover;

transition:.7s;

}

.cabang-item:hover img{

transform:scale(1.08);

}

.cabang-image:after{

content:"";

position:absolute;

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

height:80px;

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

}

.cabang-content{

padding:25px;

text-align:center;

}

.cabang-content h3{

font-size:28px;

margin-bottom:12px;

color:#0f172a;

}

.chairman{

display:inline-block;

padding:8px 16px;

background:#eaf2ff;

color:#2563eb;

border-radius:100px;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}

.social{

display:flex;

justify-content:center;

gap:12px;

margin-top:15px;

}

.social a{

width:42px;
height:42px;

border-radius:50%;

display:flex;

align-items:center;
justify-content:center;

border:1px solid #e5e7eb;

text-decoration:none;

color:#777;

transition:.3s;

}

.social a:hover{

transform:translateY(-5px);

color:white;

}

.facebook:hover{
background:#1877f2;
border-color:#1877f2;
}

.whatsapp:hover{
background:#25D366;
border-color:#25D366;
}

.youtube:hover{
background:#ff0000;
border-color:#ff0000;
}

.website:hover{
background:#2563eb;
border-color:#2563eb;
}

.center-btn{

text-align:center;

margin-top:70px;

}

.btn-cabang{

display:inline-flex;

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-cabang:hover{

background:#d60000;

transform:translateY(-5px);

}

@media(max-width:1200px){

.cabang-grid{

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

}

}

@media(max-width:900px){

.cabang-grid{

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

}

.section-title{
font-size:38px;
}

}

@media(max-width:600px){

.cabang-grid{
grid-template-columns:1fr;
}

.section-title{
font-size:30px;
}

}