.cabang-section{

padding:100px 8%;
background:#f8fafc;

}


.section-label{

display:block;

color:#2563eb;

font-size:14px;

font-weight:700;

letter-spacing:3px;

margin-bottom:15px;

}


.cabang-section h2{

font-size:42px;

margin-bottom:15px;

color:#0f172a;

}


.section-desc{

max-width:700px;

line-height:1.8;

color:#64748b;

margin-bottom:60px;

}

.cabang-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.cabang-card{

background:white;

border-radius:25px;

overflow:hidden;

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

transition:.4s;

border:1px solid #edf2f7;

}


.cabang-card:hover{

transform:
translateY(-10px);

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

}



.cabang-img{

height:180px;
overflow:hidden;

}


.cabang-img img{

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

transition:.6s;

}


.cabang-card:hover img{

transform:scale(1.08);

}



.cabang-content{

padding:25px;
text-align:center;

}


.cabang-content h3{

font-size:28px;

color:#1e3a8a;

margin-bottom:10px;

}


.cabang-content h4{

color:#b45309;

font-size:18px;

margin-bottom:20px;

}



.social{

display:flex;

justify-content:center;

gap:10px;

}



.social a{

width:38px;
height:38px;

border-radius:50%;

display:flex;

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

border:1px solid #ddd;

color:#777;

transition:.3s;

text-decoration:none;

}


.social a:hover{

background:#2563eb;

color:white;

border-color:#2563eb;

}



.unggulan{

border:2px solid #2563eb;

}



@media(max-width:768px){

.cabang-section h2{
font-size:30px;
}

}

/* Tablet */

@media(max-width:1200px){

.cabang-grid{

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

}

}


/* Tablet kecil */

@media(max-width:900px){

.cabang-grid{

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

}

}


/* Mobile */

@media(max-width:600px){

.cabang-grid{

grid-template-columns:
1fr;

}

}

.social{

display:flex;

justify-content:center;

gap:12px;

margin-top:20px;

}



.social a{

width:42px;
height:42px;

display:flex;

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

border-radius:50%;

border:1px solid #dcdcdc;

color:#777;

text-decoration:none;

font-size:15px;

transition:.3s;

background:white;

}



.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;
}