/*=========================================
DETAIL CABANG
=========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.detail-cabang{

    background:#f7f9f8;

    padding:90px 0;

}




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

.hero-cabang{

    position:relative;

    height:520px;

    overflow:hidden;

}

.hero-bg{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(10,63,32,.65);

}

.hero-content{

    position:relative;

    z-index:2;

    height:100%;

    display:flex;

    align-items:center;

    gap:55px;

    color:#fff;

}

.hero-logo img{

    width:180px;

    height:180px;

    border-radius:50%;

    padding:10px;

    object-fit:contain;

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

}

.hero-text{

    flex:1;

}

.hero-text h1{

    font-size:64px;

    line-height:1.1;

    font-weight:800;

    margin-bottom:20px;

}

.hero-meta{

    display:flex;

    gap:35px;

    flex-wrap:wrap;

}

.hero-meta span{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:18px;

}

.hero-meta i{

    font-size:20px;

}


/*=========================================
CARD TENTANG
=========================================*/

.detail-card{

    margin-top:-110px;

    background:#fff;

    border-radius:28px;

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

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1.3fr .9fr;

    gap:70px;

    padding:55px;

}

.detail-left h2{

    color:#0f6a37;

    font-size:34px;

    margin-bottom:15px;

}

.title-line{

    width:70px;

    height:4px;

    background:#0f6a37;

    border-radius:10px;

    margin-bottom:30px;

}

.detail-left p{

    font-size:18px;

    line-height:2;

    color:#555;

    text-align:justify;

}


/*=========================================
INFORMASI CABANG
=========================================*/

.info-item{

    display:flex;

    gap:20px;

    align-items:flex-start;

    margin-bottom:35px;

}

.info-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#eef7f1;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.info-icon i{

    color:#0f6a37;

    font-size:28px;

}

.info-item h4{

    color:#0f6a37;

    margin-bottom:8px;

    font-size:20px;

}

.info-item p{

    color:#555;

    line-height:1.8;

}

.info-item a{

    color:#0f6a37;

    text-decoration:none;

    font-weight:600;

}

.info-item a:hover{

    text-decoration:underline;

}


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

@media(max-width:992px){

.hero-content{

    flex-direction:column;

    justify-content:center;

    text-align:center;

    gap:25px;

}

.hero-text h1{

    font-size:46px;

}

.detail-card{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.hero-cabang{

    height:430px;

}

.hero-logo img{

    width:130px;

    height:130px;

}

.hero-text h1{

    font-size:34px;

}

.hero-meta{

    justify-content:center;

}

.detail-card{

    padding:30px;

    gap:40px;

}

.detail-left h2{

    font-size:28px;

}

.detail-left p{

    font-size:16px;

}

}


/*=====================================
STATISTIK
=====================================*/

.statistik-cabang{

    padding:60px 0;

}

.statistik-grid{

    display:grid;

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

    gap:25px;

}

.stat-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-8px);

}

.stat-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    background:#eef7f1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.stat-icon i{

    color:#0f6a37;

    font-size:32px;

}

.stat-card h2{

    font-size:40px;

    color:#0f6a37;

    margin-bottom:5px;

}

.stat-card p{

    color:#666;

    font-size:18px;

}


/*=====================================
PENGURUS
=====================================*/

.pengurus-section{

    padding:80px 0;

}

.section-title{

    text-align:center;

    margin-bottom:50px;

}

.section-title h2{

    color:#0f6a37;

    font-size:38px;

    font-weight:700;

}

.pengurus-grid{

    display:grid;

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

    gap:30px;

}

.pengurus-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.pengurus-card:hover{

    transform:translateY(-10px);

}

.pengurus-foto{

    width:170px;

    height:170px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

    margin-bottom:20px;

}

.pengurus-foto img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.pengurus-card h4{

    color:#0f6a37;

    margin-bottom:8px;

    font-size:18px;

}

.pengurus-card h3{

    font-size:24px;

    margin-bottom:8px;

}

.pengurus-card p{

    color:#666;

}


/*==================================
KEGIATAN
==================================*/

.kegiatan-section{

    padding:90px 0;

}

.kegiatan-grid{

    display:grid;

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

    gap:30px;

}

.kegiatan-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.kegiatan-card:hover{

    transform:translateY(-8px);

}

.kegiatan-image{

    height:220px;

}

.kegiatan-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.kegiatan-body{

    padding:25px;

}

.tanggal{

    color:#0f6a37;

    margin-bottom:15px;

    font-size:14px;

}

.kegiatan-body h3{

    font-size:24px;

    margin-bottom:15px;

}

.lokasi{

    color:#666;

    margin-bottom:15px;

}

.kegiatan-body p{

    color:#666;

    line-height:1.8;

}

.btn-detail{

    margin-top:20px;

    display:inline-flex;

    gap:10px;

    color:#0f6a37;

    font-weight:600;

    text-decoration:none;

}

.lihat-semua{

    text-align:center;

    margin-top:50px;

}



/*==================================================
MENU CABANG
==================================================*/

.menu-cabang{

    padding:20px 0 70px;

}

.menu-grid{

    display:grid;

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

    gap:30px;

}

.menu-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

}

.menu-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.menu-card i{

    font-size:42px;

    color:#198754;

    margin-bottom:20px;

}

.menu-card h3{

    font-size:24px;

    color:#16324f;

    margin-bottom:10px;

}

.menu-card p{

    color:#666;

    line-height:1.8;

}


.btn-instagram{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:8px;

    background:#E1306C;

    color:#fff;

    padding:10px 18px;

    border-radius:8px;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}

.btn-instagram:hover{

    background:#c2255c;

    color:#fff;

}

@media(max-width:768px){

    .menu-grid{

        grid-template-columns:1fr;

    }

}


/*=========================================
MOBILE FINAL
=========================================*/

@media (max-width:768px){

.container{
    width:92%;
}

/* HERO */

.hero-cabang{
    height:auto;
    min-height:420px;
}

.hero-content{
    flex-direction:column;
    text-align:center;
    padding:60px 0;
}

.hero-logo img{
    width:110px;
    height:110px;
}

.hero-text h1{
    font-size:28px;
}

.hero-meta{
    justify-content:center;
    gap:15px;
}

.hero-meta span{
    font-size:15px;
}

/* TENTANG */

.detail-card{
    margin-top:-50px;
    padding:25px;
    border-radius:18px;
}

.detail-left h2{
    font-size:24px;
}

.detail-left p{
    font-size:15px;
    line-height:1.8;
}

/* INFORMASI */

.info-item{
    gap:15px;
    margin-bottom:20px;
}

.info-icon{
    width:55px;
    height:55px;
}

.info-icon i{
    font-size:22px;
}

/* STATISTIK */

.statistik-grid{
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.stat-card{
    padding:20px;
}

.stat-card h2{
    font-size:28px;
}

.stat-card p{
    font-size:14px;
}

.stat-icon{
    width:55px;
    height:55px;
}

.stat-icon i{
    font-size:24px;
}

/* MENU */

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

.menu-card{
    padding:25px;
}

/* PENGURUS */

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

.pengurus-card{
    padding:25px;
}

.pengurus-foto{
    width:120px;
    height:120px;
}

.pengurus-card h3{
    font-size:20px;
}

/* KEGIATAN */

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

.kegiatan-image{
    height:200px;
}

.kegiatan-body{
    padding:20px;
}

.kegiatan-body h3{
    font-size:20px;
}

}