:root{--red:#b31319;--orange:#ef721c;--gold:#f5b942;--dark:#170b09;--cream:#fff8ed;--green:#168b46}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Poppins,Arial,sans-serif;background:var(--cream);color:#25130e}a{text-decoration:none;color:inherit}
.topbar{background:linear-gradient(90deg,#8d0c12,#ed701c,#8d0c12);color:#fff;text-align:center;padding:9px;font-size:13px;font-weight:600}
.nav{max-width:1377px;margin:auto;min-height:78px;padding:10px 20px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;color:var(--red);font-weight:800;font-size:19px}.logo{width:52px;height:52px;border-radius:50%;background:#170e0b;border:3px solid var(--gold);display:grid;place-items:center;color:var(--gold)}
nav{display:flex;gap:20px;align-items:center;font-weight:600}nav a:hover{color:var(--red)}.mobile{display:none;background:var(--red);color:#fff;border:0;padding:10px;border-radius:7px;font-size:20px}
header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 4px 18px #0001}
.hero{min-height:640px;background:linear-gradient(90deg,#09050400,#09050445),url('../images/banner.png') center/cover;display:flex;align-items:center}.hero-in{margin-top: 70px; max-width:1200px;width:100%;color:#fff;padding:70px 25px}.pill{background:var(--gold);color:#261307;border-radius:30px;padding:8px 15px;font-weight:800}.hero h1{font-size:clamp(42px,6vw,72px);line-height:1.05;margin:20px 0}.hero h1 span{color:#ffd267}.hero p{max-width:650px;font-size:18px;line-height:1.8}.btn{display:inline-block;border:0;border-radius:8px;padding:12px 20px;font-weight:700;cursor:pointer}.red{background:var(--red);color:#fff}.gold{background:var(--gold);color:#271407}.green{background:var(--green);color:#fff}.container{max-width:1200px;margin:auto}section{padding:75px 5%}.heading{text-align:center;max-width:760px;margin:0 auto 40px}.heading span{color:var(--red);font-weight:800;font-size:13px;letter-spacing:1px}.heading h2{font-size:38px;margin:8px 0}.heading p{color:#756860;line-height:1.8}
.about{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.about img{width:100%;height:420px;object-fit:cover;border-radius:20px}.about p{color:#6f625c;line-height:1.9}.cards,.menu-grid,.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card,.dish,.contact-card,.panel{background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 30px #40130f12}.card b{display:block;color:var(--red);margin-bottom:6px}.menu{background:#fff}.dish{background:var(--cream);border:1px solid #eedcc3}.dish h3{margin:8px 0}.dish p{color:#71655f;line-height:1.6}.price{color:var(--red);font-weight:800}.booking{background:linear-gradient(135deg,#fff0d2,#ffe4c7)}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.panel{padding:28px}label{display:block;font-size:13px;font-weight:700;margin:0 0 6px}input,select,textarea{width:100%;padding:12px;border:1px solid #ddd0c2;border-radius:8px;font:inherit}textarea{min-height:130px;resize:vertical}.tables{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:25px}.table{padding:18px 8px;text-align:center;border:2px solid #67c984;background:#e9faee;color:#116c32;border-radius:13px;font-weight:700}.table.booked{border-color:#df8888;background:#ffe8e8;color:#9a1717}.table.selected{border-color:#dca318;background:#fff0b9;color:#654800}.notice{display:none;margin-top:18px;padding:15px;border-radius:10px;font-weight:600}.ok{display:block;background:#e8f9ed;color:#126c32}.bad{display:block;background:#ffe7e7;color:#971515}.cta{background:linear-gradient(120deg,#a50e14,#ef721c);color:#fff;text-align:center}.cta h2{font-size:40px}.contact-card{text-align:center}.icon{font-size:34px}footer{background:#120a08;color:#fff;text-align:center;padding:28px}.modal{position:fixed;inset:0;background:#0009;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}.modal.hide{display:none}.offer{background:#fff;border-radius:22px;max-width:520px;width:100%;overflow:hidden;text-align:center}.offer-top{padding:30px;background:linear-gradient(135deg,#b31319,#ef721c,#f5b942);color:#fff}.offer-top .big{font-size:50px}.offer-top h2{font-size:34px;margin:5px}.offer-body{padding:28px}.offer-code{display:inline-block;padding:10px 20px;border:2px dashed var(--gold);background:#fff4cf;border-radius:9px;font-weight:800}
.float{position:fixed;right:18px;bottom:18px;background:#19a655;color:#fff;padding:13px 18px;border-radius:50px;font-weight:800;z-index:60}
.admin-body{background:#f6f7fb}.admin-nav{background:#17100e;color:#fff;padding:15px 25px;display:flex;justify-content:space-between;align-items:center}.admin-wrap{max-width:1250px;margin:25px auto;padding:0 15px}.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat{background:#fff;padding:22px;border-radius:14px;box-shadow:0 5px 20px #0000000b}.stat strong{display:block;font-size:30px;color:var(--red)}.table-wrap{overflow:auto}.data{width:100%;border-collapse:collapse;background:#fff}.data th,.data td{padding:12px;border-bottom:1px solid #eee;text-align:left;white-space:nowrap}.data th{background:#faf1e6}.actions{display:flex;gap:7px;flex-wrap:wrap}.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#7e0b10,#ef721c)}.login-box{width:min(420px,92%);background:#fff;border-radius:18px;padding:32px;box-shadow:0 25px 70px #0004}.error{background:#ffe7e7;color:#a31313;padding:10px;border-radius:8px;margin-bottom:15px}
@media(max-width:850px){nav{display:none;position:absolute;top:102px;left:0;right:0;background:#fff;padding:18px;flex-direction:column;align-items:flex-start}.mobile{display:block}nav.open{display:flex}.about{grid-template-columns:1fr}.cards,.menu-grid,.contact-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr 1fr}.tables{grid-template-columns:repeat(3,1fr)}.admin-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){section{padding:55px 5%}.cards,.menu-grid,.contact-grid,.form-grid{grid-template-columns:1fr}.tables{grid-template-columns:repeat(2,1fr)}.admin-grid{grid-template-columns:1fr}.hero{min-height:600px}.hero-in{padding:60px 20px}.heading h2{font-size:30px}.about img{height:300px}}
.close {
    position: absolute;
    right: 448px;
    top: 50px;

    border: 0;
    background: #fff;
    color: #a00;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    font-size: 22px;
    line-height: 38px;

    cursor: pointer;

    z-index: 9999;
}


/* Tablet */
@media (max-width: 992px) {

    .close {
        right: 500px;
        top: 15px;
    }

}


/* Mobile */
@media (max-width: 576px) {

    .close {
        right: 20px;
        top: 180px;

        width: 34px;
        height: 34px;

        font-size: 20px;
        line-height: 34px;
    }

}

/* =========================================
   ANJANA SAWJI RESTAURANT
   PREMIUM HOMEPAGE DESIGN
========================================= */



/* =========================================
   BUTTONS
========================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 52px;
    padding: 0 28px;

    border-radius: 50px;
    text-decoration: none;

    font-weight: 800;
    font-size: 15px;

    transition: all .3s ease;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn.gold {
    color: #2b1808;
    background: linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );

    box-shadow: 0 12px 30px rgba(245, 182, 66, .30);
}

.btn.red {
    color: #fff;

    background: linear-gradient(
        135deg,
        var(--red),
        #e32a32
    );

    box-shadow: 0 12px 30px rgba(181, 18, 27, .25);
}

.btn.green {
    color: #fff;

    background: linear-gradient( 135deg, #5cb313, #ba1745a1 );
    );

    box-shadow: 0 12px 30px rgba(181, 18, 27, .25);
}

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

.hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(30, 10, 5, .92) 0%,
            rgba(30, 10, 5, .70) 45%,
            rgba(30, 10, 5, .20) 100%
        ),
        url("../images/banner.png") center/cover no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(245, 182, 66, .20),
            transparent 35%
        );
}

.hero-in {
    position: relative;
    z-index: 2;

    width: min(1180px, 92%);
    margin: auto;

    padding: 80px 0;

    color: #fff;
}

.pill {
    display: inline-flex;
    align-items: center;

    padding: 10px 18px;

    margin-bottom: 20px;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;

    background: rgba(255,255,255,.10);
    backdrop-filter: blur(8px);

    font-size: 14px;
    font-weight: 700;
}

.hero h1 {
    max-width: 720px;

    margin: 0 0 22px;

    font-size: clamp(46px, 6vw, 76px);
    line-height: 1.02;

    font-weight: 900;
    letter-spacing: -2px;
}

.hero h1 span {
    color: var(--gold);
}

.hero p {
    max-width: 620px;

    margin-bottom: 32px;

    color: rgba(255,255,255,.85);

    font-size: 18px;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


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

.about-section {
    padding: 100px 0;
    background: var(--cream);
}

.about {
    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;
}

.about-image {
    position: relative;
}

.about-image img {
    width: 100%;
    display: block;

    border-radius: 28px;

    box-shadow: var(--shadow);
}

.about-badge {
    position: absolute;

    right: -20px;
    bottom: 25px;

    display: flex;
    flex-direction: column;

    min-width: 145px;

    padding: 18px;

    text-align: center;

    color: #fff;

    border-radius: 18px;

    background: var(--red);

    box-shadow: 0 15px 35px rgba(181,18,27,.30);
}

.about-badge strong {
    font-size: 28px;
    color: var(--gold);
}

.about-badge span {
    font-size: 12px;
    font-weight: 700;
}

.about-content > p {
    color: var(--text);

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


/* =========================================
   HEADINGS
========================================= */

.heading {
    margin-bottom: 35px;
    text-align: center;
}

.heading > span {
    display: inline-block;

    margin-bottom: 10px;

    color: var(--red);

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 2px;
}

.heading h2 {
    margin: 0;

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.15;
    font-weight: 900;
}

.heading h2 strong {
    color: var(--red);
}

.heading p {
    max-width: 650px;

    margin: 15px auto 0;

    color: var(--text);

    line-height: 1.7;
}


/* =========================================
   FEATURE CARDS
========================================= */

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

    margin-top: 30px;
}

.card {
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: #fff;

    transition: .3s ease;
}

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

    box-shadow: var(--shadow);
}

.card-icon {
    margin-bottom: 10px;

    font-size: 30px;
}

.card b {
    display: block;

    margin-bottom: 5px;

    font-size: 15px;
}

.card span {
    color: #8a746a;
    font-size: 12px;
}


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

.menu-section {
    padding: 100px 0;

    background: #fff;
}

.menu-grid {
    display: grid;

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

    gap: 25px;
}

.dish {
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 22px;

    background: #fff;

    box-shadow: 0 8px 30px rgba(70,25,10,.06);

    transition: .3s ease;
}

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

    box-shadow: var(--shadow);
}

.dish-image {
    position: relative;

    min-height: 170px;

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

    background:
        radial-gradient(
            circle,
            #fff2cf,
            #fce6c4
        );
}

.dish-icon {
    font-size: 70px;

    filter: drop-shadow(
        0 10px 10px rgba(0,0,0,.12)
    );
}

.dish-category {
    position: absolute;

    top: 15px;
    left: 15px;

    padding: 7px 12px;

    border-radius: 30px;

    color: var(--red);

    background: #fff;

    font-size: 11px;
    font-weight: 800;

    box-shadow: 0 5px 15px rgba(0,0,0,.08);
}

.dish-content {
    padding: 22px;
}

.dish h3 {
    margin: 0 0 8px;

    font-size: 21px;
}

.dish p {
    min-height: 48px;

    margin: 0;

    color: var(--text);

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

.dish-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 20px;
}

.price {
    color: var(--red);

    font-size: 21px;
    font-weight: 900;
}

.dish-link {
    color: var(--red);

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}

.menu-button {
    margin-top: 45px;

    text-align: center;
}


/* =========================================
   CTA
========================================= */

.cta {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    color: #fff;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #7f090f,
            #c51b25
        );
}

.cta::before,
.cta::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background: rgba(255,255,255,.06);
}

.cta::before {
    top: -150px;
    left: -100px;
}

.cta::after {
    right: -100px;
    bottom: -180px;
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-tag {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--gold);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 2px;
}

.cta h2 {
    margin: 0 0 15px;

    font-size: clamp(34px, 5vw, 58px);

    line-height: 1.1;
}

.cta h2 span {
    color: var(--gold);
}

.cta p {
    max-width: 600px;

    margin: 0 auto 30px;

    color: rgba(255,255,255,.82);

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================
   OFFER MODAL
========================================= */

.modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

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

    padding: 20px;

    background: rgba(20,8,5,.78);

    backdrop-filter: blur(8px);
}

.offer {
    position: relative;

    width: min(500px, 100%);

    overflow: hidden;

    border-radius: 28px;

    background: #fff;

    box-shadow: 0 30px 80px rgba(0,0,0,.30);

    animation: offerIn .4s ease;
}

@keyframes offerIn {

    from {
        opacity: 0;
        transform: translateY(30px) scale(.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

.close {
    position: absolute;

    top: 15px;
    right: 15px;

    z-index: 5;

    width: 40px;
    height: 40px;

    border: 0;
    border-radius: 50%;

    color: #fff;

    background: rgba(0,0,0,.20);

    font-size: 26px;

    cursor: pointer;
}

.offer-top {
    padding: 35px 30px;

    text-align: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--red),
            #e63946
        );
}

.offer-top .big {
    margin-bottom: 10px;

    font-size: 55px;
}

.offer-top span {
    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;
}

.offer-top h2 {
    margin: 10px 0 0;

    color: var(--gold);

    font-size: 36px;
}

.offer-body {
    padding: 30px;

    text-align: center;
}

.offer-body h2 {
    margin-top: 0;

    font-size: 26px;
}

.offer-body p {
    color: var(--text);

    line-height: 1.7;
}

.offer-code {
    display: inline-flex;
    flex-direction: column;

    gap: 5px;

    margin: 15px 0 25px;
    padding: 12px 25px;

    border: 2px dashed var(--gold);

    border-radius: 12px;

    background: #fff8e7;
}

.offer-code span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.offer-code strong {
    color: var(--red);

    font-size: 20px;
    letter-spacing: 2px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .hero {
        min-height: 580px;
    }

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

        gap: 45px;
    }

    .about-image {
        max-width: 700px;
        margin: auto;
    }

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

}


@media (max-width: 767px) {

    .hero {
        min-height: 650px;

        background-position: center;
    }

    .hero-in {
        padding: 60px 0;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero p {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    .about-section,
    .menu-section {
        padding: 70px 0;
    }

    .cards {
        grid-template-columns: 1fr;
    }

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

    .about-badge {
        right: 15px;
    }

    .cta {
        padding: 70px 0;
    }

}


@media (max-width: 480px) {

    .container {
        width: 90%;
    }

    .hero {
        min-height: 600px;
    }

    .hero h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .hero p {
        font-size: 15px;
    }

    .heading h2 {
        font-size: 32px;
    }

    .about-badge {
        position: relative;

        right: auto;
        bottom: auto;

        width: max-content;

        margin: -25px auto 0;
    }

    .dish-content {
        padding: 18px;
    }

    .cta h2 {
        font-size: 36px;
    }

    .offer-body {
        padding: 25px 20px;
    }

}