#menu{position:relative;padding:140px 0;background:transparent;overflow:hidden}
.menu-wrapper{width:min(1450px,92%);margin:auto;position:relative;z-index:2}
.menu-heading{text-align:center;margin-bottom:60px}
.menu-heading .sub-title{color:#d4af37;letter-spacing:6px;text-transform:uppercase;font:600 15px Poppins,sans-serif}
.menu-heading h2{margin:18px 0;color:#f7df84;font:700 clamp(48px,6vw,84px) Cinzel,serif;text-shadow:0 0 25px rgba(212,175,55,.3)}
.menu-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin:50px 0}
.menu-tab{padding:14px 26px;border-radius:40px;border:1px solid rgba(212,175,55,.35);background:rgba(20,20,20,.75);color:#f7df84;cursor:pointer;transition:.35s;backdrop-filter:blur(14px)}
.menu-tab.active,.menu-tab:hover{background:linear-gradient(135deg,#d4af37,#f7df84);color:#111;box-shadow:0 0 25px rgba(212,175,55,.35)}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.menu-card{overflow:hidden;border-radius:24px;background:rgba(18,18,18,.75);border:1px solid rgba(212,175,55,.25);transition:.35s}
.menu-card:hover{transform:translateY(-8px);box-shadow:0 20px 45px rgba(212,175,55,.22)}
.menu-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:.6s}
.menu-card:hover img{transform:scale(1.08)}
.menu-info{padding:18px}.menu-info h3{color:#f7df84;font:700 26px Cinzel}.menu-info p{color:#ddd;font:15px/1.7 Poppins}
@media(max-width:1100px){.menu-grid{grid-template-columns:repeat(2,1fr)}}
/* =========================================================
   MENU — MOBILE PREMIUM OPTIMIZATION
   DESKTOP COMPLETELY UNCHANGED
========================================================= */

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

    /* ==============================================
       MENU SECTION
    ============================================== */

    #menu{

        padding:
            70px 0 !important;

        overflow:hidden !important;

    }


    /* ==============================================
       MENU WRAPPER
    ============================================== */

    .menu-wrapper{

        width:
            calc(100% - 24px) !important;

        max-width:none !important;

        margin:
            0 auto !important;

    }


    /* ==============================================
       MENU HEADING
    ============================================== */

    .menu-heading{

        margin-bottom:
            30px !important;

    }


    .menu-heading h2{

        font-size:
            34px !important;

        line-height:
            1.12 !important;

        margin:
            14px 0 !important;

    }


    .menu-heading p{

        font-size:
            12px !important;

        line-height:
            1.6 !important;

        margin:
            0 auto !important;

    }


    /* ==============================================
       CUISINE TABS
       2 - 2 LAYOUT ON MOBILE
    ============================================== */
/* =====================================================
   MOBILE CUISINE TABS
   HORIZONTAL SCROLL
   1 SINGLE ROW
===================================================== */

.menu-tabs{

    display:flex !important;

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    justify-content:flex-start !important;

    align-items:center !important;

    gap:10px !important;

    width:100% !important;

    margin:30px 0 !important;

    padding:
        4px 2px 12px !important;

    overflow-x:auto !important;

    overflow-y:hidden !important;

    scroll-behavior:smooth !important;

    -webkit-overflow-scrolling:touch !important;

    scrollbar-width:none !important;

    overscroll-behavior-x:contain !important;
}


/* Chrome / Edge / Safari */

.menu-tabs::-webkit-scrollbar{

    display:none !important;

}


/* =====================================================
   MOBILE TAB
   AUTO WIDTH — NOT 50%
===================================================== */

.menu-tab{

    flex:
        0 0 auto !important;

    width:
        auto !important;

    min-width:
        max-content !important;

    white-space:
        nowrap !important;

    padding:
        13px 24px !important;

    min-height:
        46px !important;

    border-radius:
        30px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    box-sizing:
        border-box !important;

    font-size:
        12px !important;

    font-weight:
        500 !important;

    margin:
        0 !important;

    flex-shrink:
        0 !important;
}


/* =====================================================
   ACTIVE TAB
===================================================== */

.menu-tab.active{

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f7df84
        ) !important;

    color:#111 !important;

    box-shadow:
        0 0 22px
        rgba(212,175,55,.32) !important;

}

    /* ==============================================
       KEEP ACTIVE GOLD STYLE
    ============================================== */

    .menu-tab.active{

        background:
            linear-gradient(
                135deg,
                #d4af37,
                #f7df84
            ) !important;

        color:
            #111 !important;

        box-shadow:
            0 0 22px
            rgba(212,175,55,.32) !important;

    }


    /* ==============================================
       MENU DISHES
       2 - 2 COLUMNS ON MOBILE
    ============================================== */

    .menu-grid{

        display:
            grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            12px !important;

        width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

    }


    /* ==============================================
       MENU CARD
    ============================================== */

    .menu-card{

        width:
            100% !important;

        min-width:
            0 !important;

        box-sizing:
            border-box !important;

        border-radius:
            16px !important;

        overflow:
            hidden !important;

    }


    /* ==============================================
       DISH IMAGE
    ============================================== */

    .menu-card img{

        width:
            100% !important;

        aspect-ratio:
            1 / 1 !important;

        object-fit:
            cover !important;

        display:
            block !important;

    }


    /* ==============================================
       DISH INFO
    ============================================== */

    .menu-info{

        padding:
            11px 9px !important;

    }


    .menu-info h3{

        font-size:
            15px !important;

        line-height:
            1.25 !important;

        margin:
            0 0 5px !important;

    }


    .menu-info p{

        font-size:
            10px !important;

        line-height:
            1.45 !important;

        margin:
            0 !important;

    }

}


/* =========================================================
   VERY SMALL PHONES
   360px / 375px
========================================================= */

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

    #menu{

        padding:
            60px 0 !important;

    }


    .menu-wrapper{

        width:
            calc(100% - 18px) !important;

    }


    .menu-heading h2{

        font-size:
            30px !important;

    }


    .menu-tabs{

        gap:
            8px !important;

        margin:
            25px auto !important;

    }


    .menu-tab{

        min-height:
            43px !important;

        padding:
            10px 5px !important;

        font-size:
            11px !important;

    }


    .menu-grid{

        gap:
            9px !important;

    }


    .menu-card{

        border-radius:
            14px !important;

    }


    .menu-info{

        padding:
            9px 8px !important;

    }


    .menu-info h3{

        font-size:
            13px !important;

    }


    .menu-info p{

        font-size:
            9.5px !important;

    }

}