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

/* ===============================
   TABLET
================================ */
@media (max-width: 991px){

    .section{
        padding:70px 0;
    }

    /* Navbar */
    .custom-navbar{
        background:#fff;
    }

    .navbar-brand h5{
        color:var(--dark);
    }

    .navbar-brand small{
        color:var(--text);
    }

    .nav-link{
        color:var(--dark);
        padding:12px 0;
    }

    .navbar-collapse{
        background:#fff;
        padding:20px;
        border-radius:15px;
        margin-top:15px;
        box-shadow:var(--shadow);
    }

    /* Hero */
    .hero{
        min-height:auto;
        padding:120px 0 70px;
    }

    .hero-title{
        font-size:34px;
    }

    .hero-desc{
        font-size:15px;
    }

    .hero-button .btn{
        display:block;
        width:100%;
        margin:10px 0 !important;
    }

    #heroCarousel{
        border-radius:16px;
        box-shadow:0 10px 25px rgba(0,0,0,.2);
    }

    .hero-image{
        height:220px;
        margin-top:0;
        max-width:100%;
        border-radius:14px;
    }

    /* Quick Menu */
    .quick-menu{
        margin-top:-40px;
    }

    /* Sambutan */
    .about-image{
        max-width:500px;
        margin:auto;
    }

    /* CTA */
    .cta-box{
        padding:45px 35px;
        text-align:center;
    }

    .cta-box h2{
        font-size:32px;
    }

}

/* ===============================
   MOBILE
================================ */
@media (max-width: 576px){

    .section{
        padding:55px 0;
    }

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

    .section-subtitle{
        font-size:13px;
    }

    /* Hero */
    .hero{
        min-height:auto;
        padding:120px 0 70px;
    }

    .hero-title{
        font-size:34px;
    }

    .hero-desc{
        font-size:15px;
    }

    .hero-button .btn{
        display:block;
        width:100%;
        margin:10px 0 !important;
    }

    .hero-image{
        max-width:100%;
    }

    /* Quick Menu */
    .quick-menu{
        margin-top:20px;
    }

    .quick-card{
        padding:25px 20px;
    }

    /* Statistik */
    .stat-card h2{
        font-size:36px;
    }

    /* Berita */
    .news-image{
        height:220px;
    }

    /* Agenda */
    .agenda-card{
        gap:15px;
        padding:20px;
    }

    .agenda-date{
        min-width:65px;
        height:75px;
    }

    .agenda-date .day{
        font-size:26px;
    }

    /* Galeri */
    .gallery-card{
        height:230px;
    }

    /* CTA */
    .cta-section{
        padding:40px 0;
    }

    .cta-box{
        padding:35px 25px;
        border-radius:20px;
    }

    .cta-box h2{
        font-size:26px;
    }

    /* Footer */
    .footer{
        padding-top:50px;
    }
    .footer-bottom{
        text-align:center;
    }
}
@media (max-width: 991px){
    .topbar{
        padding:8px 0;
    }
    .topbar-left,
    .topbar-right{
        text-align:center;
    }
    .topbar-right{
        margin-top:4px;
    }
    .topbar span{
        display:inline-block;
        margin:2px 6px;
        font-size:12px;
    }
}