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

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

    .navbar-container {
        position: relative;
    }

    /* Hamburger */

    .menu-toggle {
        display: flex;

        width: 48px;
        height: 48px;

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

        background: #5AA832;
        color: #ffffff;

        border: none;
        border-radius: 12px;

        font-size: 22px;

        cursor: pointer;

        z-index: 1001;

        transition: 0.3s ease;
    }

    .menu-toggle:hover {
        background: #F7A541;
    }


    /* Menu Mobile */

    .menu {

        position: absolute;

        top: calc(100% + 10px);

        left: 0;

        width: 100%;

        display: none;

        flex-direction: column;

        gap: 0;

        padding: 15px;

        background: #ffffff;

        border-radius: 20px;

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

        z-index: 1000;
    }


    /* Menu ketika aktif */

    .menu.active {
        display: flex;
    }


    /* Item Menu */

    .menu li {
        width: 100%;
    }


    .menu li a {

        display: block;

        width: 100%;

        padding: 15px 18px;

        border-radius: 12px;

        color: #2F7D32;

        font-size: 16px;

        transition: 0.3s ease;
    }


    .menu li a:hover {

        background: #FFF8EE;

        color: #F7A541;

        padding-left: 25px;
    }


    /* Tombol Daftar Desktop */

    .btn-daftar {
        display: none;
    }


    /* Logo */

    .logo img {
        height: 55px;
    }

}


/* =====================================================
   HP
===================================================== */

@media (max-width: 576px) {

    .navbar-container {

        width: 92%;

        padding: 10px 0;
    }


    .logo img {
        height: 50px;
    }


    .menu {

        top: calc(100% + 8px);

        border-radius: 16px;
    }


    .menu li a {

        padding: 14px 16px;

        font-size: 15px;
    }


    .menu-toggle {

        width: 44px;

        height: 44px;

        font-size: 20px;

    }

}





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

@media(max-width:991px){

    .schedule-header h1{

        font-size:45px;

    }


    .schedule-list::before{

        left:85px;

    }


    .schedule-item{

        grid-template-columns:70px 60px 1fr;

        gap:15px;

    }


    .schedule-time{

        text-align:center;

    }


    .schedule-time span{

        font-size:18px;

    }


    .schedule-icon{

        width:60px;

        height:60px;

        font-size:22px;

    }


    .schedule-cta-box{

        flex-direction:column;

        text-align:center;

    }

}


@media(max-width:576px){

    .schedule-header h1{

        font-size:36px;

    }


    .schedule-page{

        padding:80px 0;

    }


    .section-heading h2{

        font-size:32px;

    }


    .schedule-list::before{

        left:29px;

    }


    .schedule-item{

        display:grid;

        grid-template-columns:60px 1fr;

        gap:15px;

        margin-bottom:25px;

    }


    .schedule-time{

        grid-column:1;

        grid-row:1;

        text-align:center;

    }


    .schedule-time span{

        font-size:15px;

    }


    .schedule-time small{

        font-size:10px;

    }


    .schedule-icon{

        grid-column:1;

        grid-row:2;

        width:58px;

        height:58px;

    }


    .schedule-info{

        grid-column:2;

        grid-row:1 / span 2;

        padding:25px 20px;

    }


    .schedule-info h3{

        font-size:20px;

        padding-right:25px;

    }


    .schedule-info p{

        font-size:14px;

    }


    .schedule-number{

        font-size:25px;

        right:15px;

    }


    .schedule-cta-box{

        padding:35px 25px;

    }


    .schedule-cta-box h2{

        font-size:27px;

    }

}





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

@media(max-width:991px){

    .premium-gallery{

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

    }


    .gallery-item{

        height:260px;

    }

}


@media(max-width:576px){

    .gallery-page{

        padding:80px 0;

    }


    .gallery-filter{

        gap:8px;

    }


    .filter-btn{

        padding:10px 16px;

        font-size:13px;

    }


    .premium-gallery{

        grid-template-columns:1fr;

    }


    .gallery-item{

        height:280px;

    }


    .gallery-cta h2{

        font-size:30px;

    }


    .lightbox-prev,
    .lightbox-next{

        width:42px;

        height:42px;

    }


    .lightbox-prev{

        left:10px;

    }


    .lightbox-next{

        right:10px;

    }

}







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


@media (max-width: 991px) {

    .footer-grid {

        grid-template-columns:

            1.5fr

            1fr;

        gap: 50px;

    }


    .footer-brand {

        grid-column: 1 / -1;

    }


    .footer-cta h2 {

        font-size: 40px;

    }

}


@media (max-width: 576px) {

    .footer-cta {

        padding: 75px 20px;

    }


    .footer-cta h2 {

        font-size: 30px;

    }


    .footer-cta p {

        font-size: 15px;

    }


    .main-footer {

        padding: 60px 0 20px;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 40px;

        padding-bottom: 40px;

    }


    .footer-brand {

        grid-column: auto;

    }


    .footer-logo img {

        width: 125px;

    }


    .footer-bottom {

        flex-direction: column;

        text-align: center;

    }


    .floating-whatsapp {

        right: 18px;

        bottom: 18px;

        width: 55px;

        height: 55px;

        padding: 0;

        justify-content: center;

        border-radius: 50%;

    }


    .floating-whatsapp span {

        display: none;

    }


    .floating-whatsapp i {

        font-size: 26px;

    }


    .top-btn {

        right: 18px;

        bottom: 85px;

        width: 45px;

        height: 45px;

    }

}








@media (max-width: 768px) {

    .contact-map iframe {
        min-height: 350px;
    }

}

@media (max-width: 480px) {

    .contact-map {
        border-radius: 18px;
    }

    .contact-map iframe {
        min-height: 300px;
    }

}