* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;

    background: #f5eee2;

    font-family: "Poppins", sans-serif;

    color: #40291c;
}


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

.hero {
    width: 100%;

    margin: 0;
    padding: 0;

    line-height: 0;

    overflow: hidden;

    background: none;

    border: none;
    border-radius: 0;
    box-shadow: none;
}

.hero img {
    width: 100%;
    height: auto;

    display: block;

    margin: 0;
    padding: 0;

    border: none;
    border-radius: 0;

    box-shadow: none;

    object-fit: contain;
}


/* =========================================
   CHAT CORNER MENU TITLE
========================================= */

.menu-heading {
    width: 100%;

    padding: 28px 15px;

    text-align: center;

    background:
        linear-gradient(
            rgba(82, 53, 34, 0.97),
            rgba(82, 53, 34, 0.97)
        ),
        url("images/wood-texture.jpg");

    background-size: cover;
    background-position: center;

    color: #f5eadb;
}

.menu-heading h1 {
    margin: 12px 0;

    font-family: "Cinzel", serif;

    font-size: 29px;

    font-weight: 700;

    letter-spacing: 3px;
}

.heading-line {
    width: 80px;

    height: 1px;

    margin: auto;

    background: #c7a576;
}


/* =========================================
   NORMAL MENU CARDS
========================================= */

.menu-grid {
    width: 94%;
    max-width: 1250px;

    margin: 0 auto;

    padding: 35px 0 55px;

    display: grid;

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

    gap: 25px;
}


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

.dish-card {
    overflow: hidden;

    background: #fffaf2;

    border: 1px solid #ddc9ae;

    border-radius: 14px;

    box-shadow:
        0 7px 22px rgba(69, 43, 25, 0.10);

    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.dish-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 14px 30px rgba(69, 43, 25, 0.16);
}


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

.dish-card img {
    width: 100%;
    height: 230px;

    display: block;

    object-fit: cover;
}


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

.dish-info {
    min-height: 62px;

    padding: 15px 17px;

    display: flex;

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

    gap: 10px;
}

.dish-info h3 {
    font-family: "Cinzel", serif;

    font-size: 16px;

    font-weight: 600;

    color: #4a2d1c;
}

.dish-info span {
    flex-shrink: 0;

    font-size: 14px;

    font-weight: 600;

    color: #91643b;
}


/* =========================================
   SIGNATURE SECTION
========================================= */

.signature-section {
    width: 94%;
    max-width: 1250px;

    margin: 0 auto 55px;

    padding: 38px 25px 45px;

    background:
        linear-gradient(
            rgba(101, 68, 43, 0.08),
            rgba(101, 68, 43, 0.08)
        ),
        url("images/wood-texture.jpg");

    background-size: cover;
    background-position: center;

    border: 1px solid #c4a174;

    border-radius: 18px;

    box-shadow:
        0 10px 28px rgba(65, 41, 24, 0.12);
}


/* =========================================
   SIGNATURE TITLE
========================================= */

.signature-heading {
    display: flex;

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

    gap: 17px;

    margin-bottom: 30px;
}

.signature-heading h2 {
    font-family: "Cinzel", serif;

    font-size: 30px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #3c2518;
}

.signature-heading span {
    color: #9c7043;

    font-size: 19px;
}


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

.signature-grid {
    display: grid;

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

    gap: 24px;
}


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

.signature-card {
    position: relative;

    overflow: hidden;

    background: #fffaf2;

    border: 2px solid #b99568;

    border-radius: 15px;

    box-shadow:
        0 10px 27px rgba(60, 37, 21, 0.15);
}

.signature-card img {
    width: 100%;
    height: 245px;

    display: block;

    object-fit: cover;
}


/* =========================================
   SIGNATURE INFO
========================================= */

.signature-info {
    min-height: 64px;

    padding: 16px 18px;

    display: flex;

    justify-content: space-between;
    align-items: center;
}

.signature-info h3 {
    font-family: "Cinzel", serif;

    font-size: 17px;

    font-weight: 700;

    color: #40291c;
}

.signature-info span {
    font-size: 15px;

    font-weight: 600;

    color: #8c6037;
}


/* =========================================
   SIGNATURE BADGE
========================================= */

.signature-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 2;

    padding: 6px 10px;

    background: #4a2d1c;

    color: #f8ecdb;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    border-radius: 4px;
}


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

@media (max-width: 900px) {

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

        gap: 18px;
    }

    .signature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


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

@media (max-width: 600px) {

    .menu-heading {
        padding: 23px 12px;
    }

    .menu-heading h1 {
        font-size: 21px;

        letter-spacing: 1.7px;

        margin: 10px 0;
    }

    .heading-line {
        width: 55px;
    }


    /* 2 CARDS ON MOBILE */

    .menu-grid {
        width: 94%;

        padding: 20px 0 38px;

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

        gap: 12px;
    }


    .dish-card {
        border-radius: 10px;
    }

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


    .dish-info {
        display: block;

        min-height: 62px;

        padding: 10px;
    }

    .dish-info h3 {
        font-size: 12px;

        line-height: 1.4;

        margin-bottom: 6px;
    }

    .dish-info span {
        font-size: 11px;
    }


    /* SIGNATURE */

    .signature-section {
        width: 94%;

        padding: 28px 10px 30px;

        margin-bottom: 35px;

        border-radius: 14px;
    }

    .signature-heading {
        gap: 8px;

        margin-bottom: 22px;
    }

    .signature-heading h2 {
        font-size: 19px;

        letter-spacing: 1px;
    }

    .signature-heading span {
        font-size: 13px;
    }

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

        gap: 12px;
    }

    .signature-card {
        border-radius: 10px;
    }

    .signature-card img {
        height: 145px;
    }

    .signature-info {
        display: block;

        min-height: 62px;

        padding: 10px;
    }

    .signature-info h3 {
        font-size: 12px;

        margin-bottom: 5px;
    }

    .signature-info span {
        font-size: 11px;
    }

    .signature-badge {
        top: 7px;
        left: 7px;

        padding: 4px 6px;

        font-size: 7px;
    }
}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 360px) {

    .menu-grid {
        width: 95%;

        gap: 9px;
    }

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

    .signature-grid {
        gap: 9px;
    }
}