*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#0b0b0b;
    color:white;
    overflow-x:hidden;
    padding-top:85px;
}

/* ================= MENU PAGE ================= */

.menu-page{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:clamp(50px,8vw,100px) clamp(18px,5vw,6%);
}

/* ================= HERO ================= */

.menu-header{
    text-align:center;
    margin-bottom:60px;
}

.menu-header p{
    color:#d4af37;
    letter-spacing:3px;
    font-size:clamp(0.9rem,2vw,1rem);
    margin-bottom:14px;
}

.menu-header h1{
    font-size:clamp(2.5rem,7vw,5rem);
    line-height:1.1;
    font-weight:800;
}

/* ================= TABS ================= */

.category-tabs{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:50px;
}

.tab{
    border:none;
    outline:none;
    cursor:pointer;

    padding:14px 28px;

    border-radius:999px;

    background:#1b1b1b;

    color:white;

    font-size:0.95rem;
    font-weight:500;

    transition:0.35s ease;
}

.tab:hover{
    background:#2a2a2a;
}

.tab.active{
    background:#d4af37;
    color:black;
}

/* ================= GRID ================= */

.menu-grid{
    display:none;

    width:100%;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    align-items:stretch;
}

.menu-grid.active{
    display:grid;
}

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

.card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:linear-gradient(
    145deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.03)
    );

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    transition:0.45s ease;

    display:flex;
    flex-direction:column;

    min-height:420px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.25);

}

.card:hover{

    transform:translateY(-10px);

    border-color:#d4af37;

    box-shadow:
    0 18px 40px rgba(212,175,55,0.18);
}

/* ================= CARD IMAGE ================= */

.card-image{

    width:100%;
    height:240px;

    overflow:hidden;
}

.card-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.5s ease;
}

.card:hover .card-image img{

    transform:scale(1.08);
}

/* ================= CARD INFO ================= */

.card-info{

    padding:28px;

    display:flex;
    flex-direction:column;

    flex:1;
}

.card-info span{

    color:#d4af37;

    font-size:0.82rem;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:14px;
}

.card-info h3{

    font-size:1.55rem;

    line-height:1.4;

    margin-bottom:16px;

    color:white;
}

.card-info p{

    color:#bdbdbd;

    line-height:1.8;

    font-size:0.96rem;
}

/* ================= SIDES IMAGE FIX ================= */

#sides .card-image{

    background:linear-gradient(
    145deg,
    #111,
    #1a1a1a
    );

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

    padding:20px;
}

#sides .card-image img{

    object-fit:contain;

    width:100%;
    height:100%;
}

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

@media(max-width:768px){

    .menu-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .card{
        min-height:auto;
    }

    .card-image{
        height:220px;
    }

    .card-info{
        padding:24px;
    }

    .card-info h3{
        font-size:1.35rem;
    }
}

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

@media(max-width:480px){

    .menu-page{
        padding:45px 4%;
    }

    .card{
        border-radius:24px;
    }

    .card-image{
        height:200px;
    }

    .card-info{
        padding:22px;
    }

    .card-info h3{
        font-size:1.25rem;
    }

    .card-info p{
        font-size:0.92rem;
    }

    .tab{
        padding:10px 20px;
        font-size:0.85rem;
    }
}