/* =========================================================
   MASALA ZONE PRO
   MASTER RESPONSIVE CSS
   ========================================================= */

/* =========================================================
   GLOBAL MOBILE FIX
   ========================================================= */

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

*,
*::before,
*::after{
    box-sizing:border-box;
}

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


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

@media (max-width:1024px){

    .mz-container{
        width:100%;
        max-width:100%;
        padding-left:30px;
        padding-right:30px;
    }

}


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

@media (max-width:767px){

    /* -----------------------------------------
       GLOBAL
       ----------------------------------------- */

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

    .mz-container{
        width:100%;
        max-width:100%;
        margin:0;
        padding-left:20px;
        padding-right:20px;
    }


    /* -----------------------------------------
       ALL COMMON SECTIONS
       ----------------------------------------- */

    .mz-section,
    section{
        width:100%;
        max-width:100%;
    }


    /* -----------------------------------------
       HEADER
       ----------------------------------------- */

    .mz-header,
    .mz-navbar{
        width:100%;
        max-width:100%;
    }

    .mz-navbar{
        padding-left:20px;
        padding-right:20px;
    }

    .mz-nav,
    .mz-header-right{
        display:none !important;
    }

    .mz-mobile-toggle{
        display:flex !important;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:5px;
        width:44px;
        height:44px;
        padding:0;
        margin:0;
        border:0;
        background:transparent;
        cursor:pointer;
        flex-shrink:0;
    }

    .mz-mobile-toggle span{
        display:block;
        width:25px;
        height:2px;
        background:#D4AF37;
        border-radius:10px;
    }


    /* -----------------------------------------
       HERO
       ----------------------------------------- */

    .mz-hero,
    .mz-hero-section{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .mz-hero-container,
    .mz-hero-inner,
    .mz-hero-grid{
        width:100%;
        max-width:100%;
        display:grid;
        grid-template-columns:1fr !important;
    }

    .mz-hero-content,
    .mz-hero-text,
    .mz-hero-image{
        width:100%;
        max-width:100%;
    }

    .mz-hero h1{
        font-size:clamp(42px,12vw,64px);
        line-height:1.05;
    }

    .mz-hero p{
        font-size:17px;
        line-height:1.7;
    }

    .mz-hero-buttons{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:14px;
    }

    .mz-hero-buttons a{
        width:100%;
        max-width:100%;
    }

    .mz-hero-image img{
        width:100%;
        max-width:100%;
        display:block;
    }


    /* -----------------------------------------
       ABOUT
       ----------------------------------------- */

    .mz-about,
    .mz-about-section{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .mz-about-grid,
    .mz-about-inner{
        display:grid;
        grid-template-columns:1fr !important;
        width:100%;
        max-width:100%;
    }

    .mz-about-content,
    .mz-about-image{
        width:100%;
        max-width:100%;
    }

    .mz-about-image img{
        width:100%;
        max-width:100%;
        height:auto;
        display:block;
    }


    /* -----------------------------------------
       MENU
       ----------------------------------------- */

    .mz-menu,
    .mz-menu-section{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .mz-menu-grid{
        width:100%;
        max-width:100%;
        display:grid;
        grid-template-columns:1fr !important;
        gap:20px;
    }

    .mz-menu-card{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .mz-menu-card img{
        width:100%;
        max-width:100%;
        height:auto;
        display:block;
    }


    /* -----------------------------------------
       GALLERY
       ----------------------------------------- */

    .mz-gallery,
    .mz-gallery-section{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .mz-gallery-grid{
        width:100%;
        max-width:100%;
        display:grid;
        grid-template-columns:1fr !important;
    }

    .mz-gallery-item{
        width:100%;
        max-width:100%;
    }

    .mz-gallery-item img{
        width:100%;
        max-width:100%;
        height:auto;
        display:block;
    }


    /* -----------------------------------------
       TESTIMONIALS
       ----------------------------------------- */

    .mz-testimonials{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .mz-testimonials .mz-container{
        width:100%;
        max-width:100%;
        padding-left:20px;
        padding-right:20px;
    }

    .mz-testimonial-header{
        width:100%;
        max-width:100%;
        margin-bottom:40px;
    }

    .mz-testimonial-header h2{
        font-size:40px;
        line-height:1.1;
    }

    .mz-testimonial-header p{
        font-size:16px;
        line-height:1.7;
    }

    .mz-rating-summary{
        width:100%;
        max-width:100%;
        flex-direction:column;
        text-align:center;
        padding:28px 20px;
        gap:15px;
    }

    .mz-rating-details{
        text-align:center;
    }

    .mz-rating-details h3{
        font-size:48px;
    }

    .mz-testimonial-slider{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .mz-review-card{
        width:100%;
        max-width:100%;
        min-width:0;
        padding:24px;
    }

    .mz-review-top{
        width:100%;
    }

    .mz-review-user{
        min-width:0;
    }

    .mz-review-user h4{
        font-size:17px;
    }

    .mz-review-text p{
        font-size:15px;
        line-height:1.7;
        word-break:normal;
        overflow-wrap:break-word;
    }

    .mz-review-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }


    /* -----------------------------------------
       CONTACT
       ----------------------------------------- */

    .mz-contact,
    .mz-contact-section{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .mz-contact-grid{
        width:100%;
        max-width:100%;
        display:grid;
        grid-template-columns:1fr !important;
    }

    .mz-contact-info,
    .mz-contact-form{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .mz-contact-form input,
    .mz-contact-form textarea,
    .mz-contact-form select{
        width:100%;
        max-width:100%;
    }


    /* -----------------------------------------
       RESERVATION
       ----------------------------------------- */

    .mz-reservation,
    .mz-reservation-section{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .mz-reservation-grid{
        width:100%;
        max-width:100%;
        display:grid;
        grid-template-columns:1fr !important;
    }

    .mz-reservation-form{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .mz-reservation-form input,
    .mz-reservation-form select,
    .mz-reservation-form textarea{
        width:100%;
        max-width:100%;
    }


    /* -----------------------------------------
       FOOTER
       ----------------------------------------- */

    .mz-footer{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .mz-footer-grid{
        width:100%;
        max-width:100%;
        display:grid;
        grid-template-columns:1fr !important;
    }

    .mz-footer-column{
        width:100%;
        max-width:100%;
    }


    /* -----------------------------------------
       BUTTONS
       ----------------------------------------- */

    .mz-btn,
    .mz-button{
        max-width:100%;
    }


    /* -----------------------------------------
       PREVENT DESKTOP WIDTHS
       ----------------------------------------- */

    .mz-container,
    .mz-navbar,
    .mz-hero-container,
    .mz-about-grid,
    .mz-menu-grid,
    .mz-gallery-grid,
    .mz-contact-grid,
    .mz-reservation-grid,
    .mz-footer-grid{
        min-width:0;
    }

}
/* =========================================================
   MOBILE FINAL WIDTH + CARD FIX
   ========================================================= */

@media (max-width:767px){

    /* =========================================
       FORCE EVERY MAIN SECTION TO FULL WIDTH
       ========================================= */

    body{
        overflow-x:hidden !important;
    }

    main,
    #main,
    .site-main{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    section{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }


    /* =========================================
       ALL CONTAINERS
       ========================================= */

    .mz-container{
        width:100% !important;
        max-width:100% !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:20px !important;
        padding-right:20px !important;
    }


    /* =========================================
       COMMON GRID FIX
       ========================================= */

    .mz-grid,
    .mz-stats-grid,
    .mz-features-grid,
    .mz-info-grid,
    .mz-highlight-grid,
    .mz-feature-grid,
    .mz-cards-grid,
    .mz-contact-grid,
    .mz-about-grid,
    .mz-menu-grid,
    .mz-gallery-grid,
    .mz-footer-grid{

        width:100% !important;
        max-width:100% !important;

        grid-template-columns:1fr !important;

        display:grid !important;

        gap:20px !important;
    }


    /* =========================================
       STATS / INFO CARDS
       ========================================= */

    .mz-stat-card,
    .mz-stats-card,
    .mz-feature-card,
    .mz-info-card,
    .mz-highlight-card,
    .mz-card{

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin-left:0 !important;
        margin-right:0 !important;

        box-sizing:border-box !important;
    }


    /* =========================================
       CARD CONTENT
       ========================================= */

    .mz-stat-card *,
    .mz-stats-card *,
    .mz-feature-card *,
    .mz-info-card *,
    .mz-highlight-card *{

        max-width:100%;
        box-sizing:border-box;
    }


    /* =========================================
       FLEX ROWS THAT ARE CAUSING OVERFLOW
       ========================================= */

    .mz-stats,
    .mz-features,
    .mz-highlights,
    .mz-info{

        width:100% !important;
        max-width:100% !important;
    }


    /* =========================================
       IMAGES
       ========================================= */

    .mz-stats img,
    .mz-features img,
    .mz-info img,
    .mz-card img{

        max-width:100% !important;
        height:auto !important;
    }


    /* =========================================
       PREVENT FIXED WIDTH ELEMENTS
       ========================================= */

    .mz-stat-card,
    .mz-stats-card,
    .mz-feature-card,
    .mz-info-card,
    .mz-highlight-card,
    .mz-card{

        flex:1 1 100% !important;
    }


    /* =========================================
       HERO / IMAGE SECTIONS
       ========================================= */

    .mz-hero,
    .mz-about,
    .mz-menu,
    .mz-gallery,
    .mz-contact,
    .mz-reservation,
    .mz-testimonials,
    .mz-footer{

        width:100% !important;
        max-width:100% !important;
        overflow:hidden !important;
    }


    /* =========================================
       REMOVE HORIZONTAL TRANSFORM / POSITION
       ========================================= */

    .mz-card,
    .mz-stat-card,
    .mz-feature-card,
    .mz-info-card{

        transform:none;
    }


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

    .mz-stat-card h3,
    .mz-stats-card h3{

        font-size:30px;
        line-height:1.15;
    }

    .mz-stat-card p,
    .mz-stats-card p{

        font-size:16px;
        line-height:1.6;
    }


    /* =========================================
       SWIPER WIDTH
       ========================================= */

    .swiper,
    .swiper-container{

        width:100% !important;
        max-width:100% !important;
        overflow:hidden !important;
    }

    .swiper-wrapper{

        max-width:none !important;
    }

    .swiper-slide{

        box-sizing:border-box;
        max-width:100%;
    }


    /* =========================================
       NO WHITE SIDE SPACE
       ========================================= */

    html,
    body{

        margin:0 !important;
        padding:0 !important;
        width:100% !important;
        max-width:100% !important;
    }

}
/* =========================================================
   MASALA ZONE
   MOBILE HEADER + MENU FINAL FIX
   ========================================================= */

@media only screen and (max-width: 767px) {

    /* -----------------------------------------
       HEADER
       ----------------------------------------- */

    .mz-navbar {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        min-height: 70px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        flex-wrap: nowrap !important;

        z-index: 99999 !important;

        background: #292929 !important;
    }


    /* -----------------------------------------
       DESKTOP MENU HIDE
       ----------------------------------------- */

    .mz-nav {
        display: none !important;
    }

    .mz-header-right {
        display: none !important;
    }


    /* -----------------------------------------
       HAMBURGER SHOW
       ----------------------------------------- */

    .mz-mobile-toggle {
        display: flex !important;

        width: 46px !important;
        height: 46px !important;

        flex: 0 0 46px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

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

        flex-direction: column !important;
        gap: 5px !important;

        position: relative !important;

        z-index: 100001 !important;

        cursor: pointer !important;
    }


    .mz-mobile-toggle span {
        display: block !important;

        width: 25px !important;
        height: 3px !important;

        background: #D4AF37 !important;

        border-radius: 5px !important;

        transition: all .3s ease !important;
    }


    /* -----------------------------------------
       HAMBURGER → X
       ----------------------------------------- */

    .mz-mobile-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }

    .mz-mobile-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .mz-mobile-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }


    /* -----------------------------------------
       MOBILE MENU CLOSED
       ----------------------------------------- */

    .mz-mobile-menu {
        display: none !important;

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #292929 !important;

        z-index: 100000 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       MOBILE MENU OPEN
       ----------------------------------------- */

    .mz-mobile-menu.active {
        display: block !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* -----------------------------------------
       MENU INNER
       ----------------------------------------- */

    .mz-mobile-menu-inner {
        width: 100% !important;
        min-height: 100vh !important;

        padding: 100px 25px 40px !important;

        display: flex !important;
        flex-direction: column !important;

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

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       MENU LINKS
       ----------------------------------------- */

    .mz-mobile-menu nav {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .mz-mobile-menu nav a {
        display: block !important;

        width: 100% !important;

        padding: 15px 10px !important;

        text-align: center !important;

        color: #ffffff !important;

        font-size: 21px !important;

        line-height: 1.3 !important;

        text-decoration: none !important;
    }


    .mz-mobile-menu nav a:hover {
        color: #D4AF37 !important;
    }


    /* -----------------------------------------
       MOBILE CTA
       ----------------------------------------- */

    .mz-mobile-actions {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 12px !important;

        margin-top: 25px !important;
    }


    .mz-mobile-phone,
    .mz-mobile-book {
        display: flex !important;

        width: 100% !important;

        min-height: 52px !important;

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

        border-radius: 50px !important;

        text-decoration: none !important;

        font-size: 17px !important;
        font-weight: 600 !important;

        box-sizing: border-box !important;
    }


    .mz-mobile-phone {
        color: #ffffff !important;

        background: transparent !important;

        border: 1px solid #D4AF37 !important;
    }


    .mz-mobile-book {
        color: #111111 !important;

        background: #D4AF37 !important;

        border: 1px solid #D4AF37 !important;
    }


    /* -----------------------------------------
       BODY LOCK WHEN MENU OPEN
       ----------------------------------------- */

    body.mz-menu-open {
        overflow: hidden !important;
    }

}