/*======================================
        HOTEL MAHANANDA
        RESPONSIVE DESIGN
        CLEAN SECTION-SAFE V3
=======================================*/

/*
    HERO RULES HAVE BEEN REMOVED FROM THIS FILE.

    The Hero is now controlled exclusively by:
        assets/css/hero.css

    This prevents responsive.css from overriding the Hero.

    IMPORTANT:
    All non-Hero responsive rules below are preserved.
    Do not add generic Hero selectors back into this file.
=======================================*/

/*======================================
        HOTEL MAHANANDA
        RESPONSIVE DESIGN
=======================================*/


/*======================================
        GLOBAL RESPONSIVE SAFETY
=======================================*/

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}

.container{
    width:92%;
    margin:0 auto;
}


/*======================================
        LARGE LAPTOP
=======================================*/

@media (max-width:1400px){

    .container{
        width:92%;
    }


    .section-title h2{
        font-size:42px;
    }

}


/*======================================
        LAPTOP
=======================================*/

@media (max-width:1200px){

    .container{
        width:90%;
    }



    /* ABOUT / RESTAURANT / CONTACT */

    .about-container,
    .restaurant-container,
    .contact-container{
        grid-template-columns:1fr;
        gap:50px;
    }


    /* ROOMS */

    .rooms-grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }


    /* GALLERY */

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }


    /* FACILITIES */

    .facilities-grid{
        grid-template-columns:repeat(2,320px);
        justify-content:center;
    }


    /* FOOTER */

    .footer-container{
        grid-template-columns:repeat(2,1fr);
        gap:40px;
    }

}


/*======================================
        TABLET
=======================================*/

@media (max-width:992px){

    /* HEADER */

    .header{
        height:80px;
    }

    .navbar{
        height:80px;
    }


    /* LOGO */

    .logo img{
        height:65px;
        width:auto;
    }


    /* DESKTOP BOOK BUTTON */

    .book-btn{
        display:none;
    }


    /* MENU BUTTON */

    .menu-toggle{
        display:flex;
        cursor:pointer;
        z-index:1001;
    }


    /* MOBILE NAVIGATION */

    .nav-menu{
        position:fixed;

        top:80px;
        left:0;

        width:100%;

        background:#111;

        display:flex;
        flex-direction:column;
        align-items:center;

        max-height:0;

        overflow:hidden;

        transition:max-height .4s ease;

        z-index:1000;
    }

    .nav-menu.active{
        max-height:500px;
    }

    .nav-menu a{
        width:100%;
        text-align:center;
        padding:18px 20px;
    }




    /* GRID SECTIONS */

    .rooms-grid,
    .gallery-grid{
        grid-template-columns:1fr;
    }


    /* FACILITIES */

    .facilities-grid{
        grid-template-columns:repeat(2,280px);
    }


    /* IMAGES */

    .about-image img,
    .restaurant-image img{
        width:100%;
        height:420px;
        object-fit:cover;
    }


    /* CONTACT */

    .contact-map iframe{
        width:100%;
    }

}


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

@media (max-width:768px){

    /* GLOBAL */

    .container{
        width:92%;
        max-width:100%;
    }


    /* SECTION SPACING */

    section{
        padding-left:0;
        padding-right:0;
    }


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

    .header,
    .navbar{
        height:72px;
    }

    .nav-menu{
        top:72px;
    }

    .logo img{
        height:58px;
        width:auto;
    }




    /* SCROLL */

    .scroll-indicator{
        bottom:20px;
        font-size:12px;
    }


    /*==================================
            SECTION TITLES
    ==================================*/

    .section-title{
        width:100%;
        padding-left:10px;
        padding-right:10px;
    }


    .section-title h2{
        font-size:32px;
        line-height:1.2;
    }


    .section-title p{
        font-size:14px;
        line-height:1.7;
    }


    /*==================================
            BOOKING
    ==================================*/

    .booking-box{
        width:100%;

        grid-template-columns:1fr;

        padding:25px;

        gap:18px;
    }


    .booking-box > *{
        width:100%;
        min-width:0;
    }


    .full-width{
        grid-column:auto;
    }


    .booking-btn{
        width:100%;
        min-height:50px;
    }


    /*==================================
            ABOUT
    ==================================*/

    .about-container{
        grid-template-columns:1fr;
        gap:35px;
    }


    .about-image{
        width:100%;
    }


    .about-image img{
        width:100%;
        height:320px;

        object-fit:cover;
    }


    /*==================================
            RESTAURANT
    ==================================*/

    .restaurant-container{
        grid-template-columns:1fr;
        gap:35px;
    }


    .restaurant-image{
        width:100%;
    }


    .restaurant-image img{
        width:100%;
        height:320px;

        object-fit:cover;
    }


    /*==================================
            FACILITIES
    ==================================*/

    .facilities-grid{
        width:100%;

        grid-template-columns:1fr;

        gap:20px;

        max-width:340px;

        margin-left:auto;
        margin-right:auto;
    }


    .facility-card{
        width:100%;
    }


    /*==================================
            ROOMS
    ==================================*/

    .rooms-grid{
        grid-template-columns:1fr;

        gap:25px;
    }


    .room-card{
        width:100%;
    }


    .room-card img{
        width:100%;
        height:auto;

        object-fit:cover;
    }


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

    .gallery-grid{
        width:100%;

        grid-template-columns:1fr;

        gap:18px;
    }


    .gallery-item{
        width:100%;
        height:240px;

        overflow:hidden;
    }


    .gallery-item img{
        width:100%;
        height:100%;

        object-fit:cover;
    }


    /*==================================
            GALLERY LIGHTBOX
    ==================================*/

    .lightbox{
        padding:20px;
    }


    .lightbox img{
        max-width:95vw;
        max-height:75vh;

        object-fit:contain;
    }


    .close-lightbox{
        top:20px;
        right:20px;

        font-size:34px;
    }


    .prev,
    .next{
        width:45px;
        height:45px;

        font-size:22px;
    }


    .prev{
        left:10px;
    }


    .next{
        right:10px;
    }


    /*==================================
            TESTIMONIALS
    ==================================*/

    .testimonial-card{
        width:100%;
        max-width:100%;
    }


    /*==================================
            CONTACT
    ==================================*/

    .contact-container{
        grid-template-columns:1fr;
        gap:35px;
    }


    .contact-map{
        width:100%;
    }


    .contact-map iframe{
        width:100%;
        height:320px;
    }


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

    .footer-container{
        grid-template-columns:1fr;

        gap:30px;

        text-align:center;
    }


    .footer-social{
        justify-content:center;
    }


    /*==================================
            WHATSAPP
    ==================================*/

    .whatsapp-float{
        width:58px;
        height:58px;

        right:18px;
        bottom:18px;

        font-size:28px;

        z-index:999;
    }


    /*==================================
            SCROLL TOP
    ==================================*/

    #scrollTopBtn{
        width:50px;
        height:50px;

        right:18px;
        bottom:88px;

        font-size:20px;

        z-index:999;
    }

}


/*======================================
        SMALL MOBILE
=======================================*/

@media (max-width:480px){

    .container{
        width:90%;
    }


    /* NAVBAR */

    .header,
    .navbar{
        height:68px;
    }

    .nav-menu{
        top:68px;
    }


    .logo img{
        height:52px;
    }




    /* SECTION TITLES */

    .section-title h2{
        font-size:26px;
    }


    .section-title p{
        font-size:13px;
    }


    /* BOOKING */

    .booking-box{
        padding:20px;

        gap:15px;
    }


    /* IMAGES */

    .about-image img,
    .restaurant-image img{
        height:280px;
    }


    /* FACILITIES */

    .facilities-grid{
        max-width:100%;
    }


    /* GALLERY */

    .gallery-item{
        height:210px;
    }


    /* LIGHTBOX */

    .lightbox{
        padding:10px;
    }


    .lightbox img{
        max-width:94vw;
        max-height:70vh;
    }


    .close-lightbox{
        top:12px;
        right:15px;

        font-size:30px;
    }


    .prev,
    .next{
        width:40px;
        height:40px;

        font-size:20px;
    }


    /* CONTACT */

    .contact-map iframe{
        height:280px;
    }


    /* WHATSAPP */

    .whatsapp-float{
        width:54px;
        height:54px;

        right:15px;
        bottom:15px;

        font-size:26px;
    }


    /* SCROLL TOP */

    #scrollTopBtn{
        width:46px;
        height:46px;

        right:15px;
        bottom:80px;

        font-size:18px;
    }

}


/*======================================
        EXTRA SMALL DEVICES
=======================================*/

@media (max-width:360px){

    .container{
        width:92%;
    }


    .logo img{
        height:48px;
    }




    .section-title h2{
        font-size:24px;
    }


    .gallery-item{
        height:190px;
    }

}

/*======================================
        MOBILE CARD FIX
        Samsung S20 Ultra / Large Mobile
=======================================*/

@media (max-width:768px){

    /*----------------------------------
            RESTAURANT / DISH CARDS
    ----------------------------------*/

    .menu-grid,
    .dishes-grid,
    .restaurant-menu,
    .restaurant-grid{
        grid-template-columns:1fr;
        width:100%;
        gap:25px;
    }

    .menu-card,
    .dish-card,
    .signature-card{
        width:100%;
        max-width:100%;
        height:auto;
        min-height:0;
        overflow:hidden;
    }

    .menu-card img,
    .dish-card img,
    .signature-card img{
        width:100%;
        height:240px;
        object-fit:cover;
        display:block;
    }


    /*----------------------------------
                ROOM CARDS
    ----------------------------------*/

    .rooms-grid{
        grid-template-columns:1fr;
        width:100%;
        gap:25px;
    }

    .room-card{
        width:100%;
        max-width:100%;
        height:auto;
        min-height:0;
        overflow:hidden;
    }

    .room-card img{
        width:100%;
        height:250px;
        object-fit:cover;
        display:block;
    }

    .room-card-content{
        padding:22px 20px;
        height:auto;
    }

    .room-card h3{
        font-size:22px;
        line-height:1.3;
    }

    .room-card p{
        font-size:14px;
        line-height:1.7;
    }

}


/*======================================
        SMALL MOBILE
=======================================*/

@media (max-width:480px){

    .menu-card img,
    .dish-card img,
    .signature-card img{
        height:210px;
    }

    .room-card img{
        height:220px;
    }

    .room-card-content{
        padding:18px 16px;
    }

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

}

/*======================================
        MOBILE FINAL CARD FIX
        HOTEL MAHANANDA
        Samsung S20 Ultra & Mobile
=======================================*/

@media (max-width: 768px){

    /*==================================
            ROOMS SECTION
    ==================================*/

    .rooms{
        padding:80px 20px;
    }

    .rooms-grid{
        display:flex;
        flex-direction:column;
        width:100%;
        gap:30px;
        margin-top:45px;
    }

    .room-card{
        width:100%;
        max-width:100%;
        display:flex;
        flex-direction:column;
        overflow:hidden;
        border-radius:20px;
    }

    .room-image{
        width:100%;
        height:260px;
        flex-shrink:0;
    }

    .room-image img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    .room-content{
        width:100%;
        box-sizing:border-box;
        padding:28px 22px;
    }

    .room-stars{
        font-size:17px;
        margin-bottom:12px;
    }

    .room-content h3{
        font-size:28px;
        line-height:1.25;
        margin-bottom:15px;
    }

    .room-content p{
        font-size:14px;
        line-height:1.7;
        margin-bottom:20px;
    }

    .room-specs{
        grid-template-columns:1fr 1fr;
        gap:12px;
        margin:22px 0;
    }

    .room-specs div{
        min-width:0;
        font-size:13px;
        line-height:1.4;
    }

    .room-features{
        margin-bottom:20px;
    }

    .room-features li{
        font-size:14px;
        line-height:1.5;
        margin-bottom:10px;
    }

    .room-bottom{
        display:flex;
        flex-wrap:wrap;
        gap:18px;
        margin-top:20px;
        padding-top:20px;
    }

    .room-price{
        font-size:30px;
    }

    .room-btn{
        padding:12px 20px;
        font-size:14px;
    }

    .room-ribbon{
        top:15px;
        left:15px;
        padding:8px 15px;
        font-size:12px;
    }


    /*==================================
            SIGNATURE DISHES
    ==================================*/

    .signature-dishes{
        padding:80px 20px;
    }

    .dish-grid{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
        gap:25px;
        margin-top:45px;
    }

    .dish-card{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        overflow:hidden;
        border-radius:20px;
    }

    .dish-card img{
        width:100%;
        height:230px;
        object-fit:cover;
        display:block;
    }

    .dish-content{
        width:100%;
        box-sizing:border-box;
        padding:24px 20px;
    }

    .dish-content h3{
        font-size:23px;
        line-height:1.3;
        margin-bottom:12px;
    }

    .dish-content p{
        font-size:14px;
        line-height:1.7;
        margin-bottom:20px;
    }

    .dish-content span{
        font-size:15px;
        padding:9px 18px;
    }


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

    .gallery{
        padding:80px 0;
    }

    .gallery-grid{
        width:calc(100% - 40px);
        max-width:100%;
        grid-template-columns:1fr;
        gap:20px;
    }

    .gallery-item{
        position:relative;
        width:100%;
        height:250px;
        overflow:hidden;
        cursor:pointer;
        touch-action:manipulation;
    }

    .gallery-item img{
        position:relative;
        z-index:1;
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        cursor:pointer;
        touch-action:manipulation;
    }

    /*
       IMPORTANT:
       Overlay must never receive the tap.
    */

    .gallery-overlay{
        pointer-events:none !important;
    }

    .gallery-item{
        -webkit-tap-highlight-color:transparent;
    }


    /*==================================
            MOBILE LIGHTBOX
    ==================================*/

    .lightbox{
        position:fixed;
        inset:0;
        z-index:99999;
        width:100vw;
        height:100vh;
        padding:15px;
        box-sizing:border-box;
        display:none;
        align-items:center;
        justify-content:center;
    }

    .lightbox.active{
        display:flex;
    }

    #lightboxImg{
        display:block;
        width:auto;
        height:auto;
        max-width:92vw;
        max-height:78vh;
        object-fit:contain;
        margin:auto;
    }

    .close-lightbox{
        top:15px;
        right:18px;
        z-index:100001;
        font-size:38px;
        padding:5px;
    }

    .prev,
    .next{
        z-index:100001;
        width:44px;
        height:44px;
        font-size:20px;
    }

    .prev{
        left:12px;
    }

    .next{
        right:12px;
    }

}


/*======================================
        SMALL MOBILE
=======================================*/

@media (max-width:480px){

    .rooms{
        padding:70px 15px;
    }

    .room-image{
        height:220px;
    }

    .room-content{
        padding:24px 18px;
    }

    .room-content h3{
        font-size:24px;
    }

    .room-content p{
        font-size:13px;
    }

    .room-specs{
        grid-template-columns:1fr;
        gap:10px;
    }

    .room-features li{
        font-size:13px;
    }

    .room-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .room-btn{
        width:100%;
        box-sizing:border-box;
    }


    /* SIGNATURE DISHES */

    .signature-dishes{
        padding:70px 15px;
    }

    .dish-grid{
        gap:20px;
    }

    .dish-card img{
        height:210px;
    }

    .dish-content{
        padding:22px 18px;
    }

    .dish-content h3{
        font-size:21px;
    }

    .dish-content p{
        font-size:13px;
    }


    /* GALLERY */

    .gallery-grid{
        width:calc(100% - 30px);
        gap:18px;
    }

    .gallery-item{
        height:220px;
    }

    #lightboxImg{
        max-width:90vw;
        max-height:72vh;
    }

    .close-lightbox{
        top:12px;
        right:14px;
        font-size:32px;
    }

    .prev,
    .next{
        width:40px;
        height:40px;
        font-size:18px;
    }

}