:root{
 --bg:#0b0b0b;
 --bg2:#171717;
 --accent:#ff5a1f;
 --accent2:#ff8b2b;
 --text:#fff;
 --muted:#bdbdbd;
 --card:#1d1d1d;
 --radius:18px;
 --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 font-family:'Poppins',sans-serif;
 background:linear-gradient(#0b0b0b,#151515);
 color:var(--text);
 overflow-x:hidden;
}
body::before{
 content:"";
 position:fixed;inset:0;
 background:
 radial-gradient(circle at 20% 10%,rgba(255,90,31,.18),transparent 30%),
 radial-gradient(circle at 80% 40%,rgba(255,140,0,.12),transparent 35%);
 pointer-events:none;
 z-index:-1;
}
a{text-decoration:none;color:#fff}
img{display:block;max-width:100%}
#loader{
 position:fixed;inset:0;
 background:#000;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 gap:20px;
 z-index:9999;
 animation:fadeLoader .8s ease 1.5s forwards;
}
.lava-loader{
 width:70px;height:70px;border-radius:50%;
 border:6px solid #333;
 border-top-color:var(--accent);
 animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeLoader{to{opacity:0;visibility:hidden}}

.hero{
 min-height:100vh;
 background:
 linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.75)),
 url("../images/hero.webp") center/cover no-repeat;
 position:relative;
 display:flex;
 justify-content:center;
 align-items:center;
 text-align:center;
}
.navbar{
 position:fixed;
 top:0;left:0;width:100%;
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:18px 8%;
 backdrop-filter:blur(14px);
 background:rgba(0,0,0,.35);
 z-index:1000;
}
.logo{
 font-size:2rem;
 font-weight:800;
 letter-spacing:2px;
 color:var(--accent2);
}
.navbar ul{
 list-style:none;
 display:flex;
 gap:34px;
}
.navbar a{
 transition:.3s;
 font-weight:600;
}
.navbar a:hover,
.navbar .active{
 color:var(--accent2);
}
.hero-content{
 max-width:900px;
 padding:30px;
}
.hero-content h1{
 font-size:clamp(3rem,8vw,6rem);
 line-height:.95;
 margin-bottom:20px;
 text-shadow:0 0 25px rgba(255,90,31,.5);
}
.hero-content p{
 color:var(--muted);
 font-size:1.2rem;
 margin-bottom:35px;
}
.buttons{
 display:flex;
 gap:18px;
 justify-content:center;
 flex-wrap:wrap;
}
.btn{
 padding:15px 34px;
 border-radius:999px;
 font-weight:700;
 transition:.35s;
}
.btn-primary{
 background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.btn-secondary{
 border:2px solid var(--accent2);
}
.btn:hover{
 transform:translateY(-4px);
 box-shadow:0 15px 35px rgba(255,90,31,.35);
}
.scroll-indicator{
 position:absolute;
 bottom:25px;
 left:50%;
 transform:translateX(-50%);
}
.scroll-indicator span{
 display:block;
 width:18px;height:34px;
 border:2px solid #fff;
 border-radius:20px;
 position:relative;
}
.scroll-indicator span::before{
 content:"";
 width:4px;height:8px;
 background:#fff;
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 top:6px;
 border-radius:2px;
 animation:scroll 2s infinite;
}
@keyframes scroll{
 0%{opacity:0;transform:translate(-50%,0)}
 100%{opacity:1;transform:translate(-50%,14px)}
}

section{
 padding:90px 8%;
}
section h2{
 text-align:center;
 font-size:2.6rem;
 margin-bottom:50px;
}

.feature-grid,
.menu-grid,
.review-grid{
 display:grid;
 gap:28px;
}
.feature-grid{
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.menu-grid{
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.review-grid{
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.feature-card,
.menu-card,
.review{
 background:var(--card);
 border:1px solid rgba(255,255,255,.05);
 border-radius:var(--radius);
 overflow:hidden;
 box-shadow:var(--shadow);
 transition:.35s;
}
.feature-card,
.review{
 padding:30px;
 text-align:center;
}
.menu-card:hover,
.feature-card:hover,
.review:hover{
 transform:translateY(-8px);
 box-shadow:0 20px 45px rgba(255,90,31,.22);
}
.menu-card img{
 height:240px;
 width:100%;
 object-fit:cover;
 transition:.4s;
}
.menu-card:hover img{
 transform:scale(1.08);
}
.menu-info{
 padding:24px;
}
.menu-info h3{
 margin-bottom:8px;
}
.small-btn{
 display:inline-block;
 margin-top:18px;
 color:var(--accent2);
 font-weight:700;
}

.about-preview{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:50px;
 align-items:center;
}
.about-preview img{
 border-radius:var(--radius);
 box-shadow:var(--shadow);
}

.stats{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
 text-align:center;
 gap:30px;
 background:#111;
}
.stats h3{
 font-size:3rem;
 color:var(--accent2);
}

.cta{
 text-align:center;
 background:linear-gradient(135deg,#1c1c1c,#111);
}

footer{
 background:#090909;
 text-align:center;
 padding:50px 20px;
 color:#bfbfbf;
}
footer h3{
 color:#fff;
 margin-bottom:12px;
}

@media(max-width:900px){
 .about-preview{
  grid-template-columns:1fr;
 }
 .navbar{
  flex-direction:column;
  gap:16px;
 }
 .navbar ul{
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
 }
}
@media(max-width:600px){
 section{padding:70px 20px}
 .hero-content h1{font-size:3rem}
 .buttons{flex-direction:column}
 .btn{width:100%}
}


/* Future sections */
/* Mobile Menu */

.hamburger{

display:none;

flex-direction:column;

gap:6px;

cursor:pointer;

}

.hamburger span{

width:32px;

height:3px;

background:white;

transition:.3s;

}

@media(max-width:900px){

.hamburger{

display:flex;

}

.navbar ul{

position:fixed;

top:80px;

right:-100%;

width:280px;

height:100vh;

background:#111;

display:flex;

flex-direction:column;

padding:50px;

transition:.4s;

}

.navbar ul.mobile-open{

right:0;

}

}


/* Food Modal */

#foodModal{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:5000;

}

#foodModal.show{

opacity:1;

visibility:visible;

}

.food-content{

width:90%;

max-width:650px;

background:#191919;

padding:30px;

border-radius:20px;

text-align:center;

position:relative;

}

.food-content img{

width:100%;

border-radius:16px;

margin-bottom:20px;

}

#closeFood{

position:absolute;

right:20px;

top:15px;

font-size:34px;

cursor:pointer;

}


/* Progress Bar */

#progressBar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(90deg,#ff4d00,#ff9800);

z-index:99999;

}
.small-hero{

height:350px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

}

.menu-controls{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

flex-wrap:wrap;

margin-bottom:50px;

}

#searchMenu{

padding:15px;

width:320px;

background:#1c1c1c;

color:white;

border:none;

border-radius:12px;

font-size:16px;

}

.filters{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.filter{

padding:12px 22px;

border:none;

background:#222;

color:white;

cursor:pointer;

border-radius:999px;

transition:.3s;

}

.filter:hover,

.filter.active{

background:var(--accent);

}

.description{

margin:15px 0;

color:#bbb;

min-height:70px;

}

.prices{

display:flex;

justify-content:space-between;

margin-top:15px;

margin-bottom:20px;

}

.prices.single{

justify-content:center;

font-size:1.4rem;

}

.featured-tag{

position:absolute;

top:15px;

left:15px;

background:#ff6a21;

padding:8px 14px;

border-radius:999px;

font-size:.8rem;

font-weight:bold;

}

.menu-card{

position:relative;

overflow:hidden;

}
.about-hero{

background:url("../images/about.webp") center center/cover;

height:70vh;

position:relative;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}

.hero-overlay{

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

padding:70px;

border-radius:25px;

max-width:850px;

}

.container{

width:min(1200px,92%);

margin:auto;

}

.two-column{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

padding:100px 0;

}

.two-column img{

width:100%;

border-radius:20px;

box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.values{

padding:100px 0;

background:#171717;

}

.value-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.value-card{

background:#222;

padding:40px;

border-radius:18px;

text-align:center;

transition:.35s;

font-size:1.1rem;

}

.value-card:hover{

transform:translateY(-10px);

background:#2a2a2a;

}

.value-card h3{

margin:18px 0;

}

.gallery{

padding:100px 0;

}

.gallery-grid{

display:grid;

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

gap:18px;

}

.gallery-grid img{

width:100%;

height:270px;

object-fit:cover;

border-radius:15px;

transition:.35s;

cursor:pointer;

}

.gallery-grid img:hover{

transform:scale(1.04);

}

.cta{

padding:120px 20px;

text-align:center;

}

.cta p{

max-width:700px;

margin:20px auto;

}

@media(max-width:900px){

.two-column{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.hero-overlay{

padding:35px;

}

}
/* ===============================
ORDER PAGE
================================ */

.order-hero{

height:60vh;

background:url("../images/order-hero.webp") center/cover;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.order-options{

padding:100px 0;

}

.section-subtitle{

color:#999;

margin-bottom:50px;

}

.order-grid{

display:grid;

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

gap:35px;

}

.order-card{

background:#1d1d1d;

padding:45px;

border-radius:22px;

text-align:center;

transition:.35s;

text-decoration:none;

color:white;

display:block;

}

.order-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 45px rgba(255,90,31,.25);

}

.order-card img{

height:75px;

margin-bottom:25px;

}

.phone-icon{

font-size:70px;

margin-bottom:20px;

}

.pickup-info{

padding:100px 0;

}

.pickup-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.pickup-grid iframe{

width:100%;

height:420px;

border:none;

border-radius:20px;

}

.popular-combos{

padding:100px 0;

background:#181818;

}

.combo-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.combo-card{

background:#242424;

border-radius:20px;

overflow:hidden;

text-align:center;

padding-bottom:25px;

transition:.3s;

}

.combo-card:hover{

transform:translateY(-10px);

}

.combo-card img{

width:100%;

height:230px;

object-fit:cover;

}

.combo-card h3{

margin-top:20px;

}

.combo-card p{

padding:0 20px;

color:#bbb;

min-height:70px;

}

.combo-card h4{

margin:20px 0;

font-size:1.5rem;

color:var(--accent);

}

.delivery-banner{

padding:120px 20px;

text-align:center;

}

.delivery-banner p{

max-width:700px;

margin:25px auto;

}

@media(max-width:900px){

.pickup-grid{

grid-template-columns:1fr;

}

}
/* ===========================
CONTACT PAGE
=========================== */

.contact-hero{

height:60vh;

background:url("../images/contact-hero.webp") center/cover;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.contact-section{

padding:100px 0;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

}

.contact-card{

background:#1f1f1f;

padding:25px;

border-radius:15px;

margin-bottom:20px;

}

.contact-card a{

color:white;

text-decoration:none;

}

.contact-form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,

.contact-form textarea{

padding:18px;

background:#1d1d1d;

border:none;

border-radius:12px;

color:white;

font-size:16px;

resize:vertical;

}

.contact-form input:focus,

.contact-form textarea:focus{

outline:2px solid var(--accent);

}

.map-section{

padding:80px 0;

}

.map-section iframe{

width:100%;

height:500px;

border:none;

border-radius:20px;

}

.faq{

padding:100px 0;

background:#181818;

}

.faq-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.faq-card{

background:#222;

padding:35px;

border-radius:18px;

transition:.3s;

}

.faq-card:hover{

transform:translateY(-8px);

}

.faq-card h3{

margin-bottom:15px;

color:var(--accent);

}

@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

}
/* =====================================
404 PAGE
===================================== */

.error404{

min-height:calc(100vh - 140px);

display:flex;

align-items:center;

justify-content:center;

text-align:center;

position:relative;

overflow:hidden;

padding:100px 20px;

}

.error404 h1{

font-size:9rem;

font-weight:800;

line-height:1;

margin-bottom:20px;

color:var(--accent);

text-shadow:

0 0 20px rgba(255,90,31,.6),

0 0 40px rgba(255,90,31,.4);

}

.error404 h2{

font-size:2.5rem;

margin-bottom:20px;

}

.error404 p{

max-width:650px;

margin:auto;

color:#bcbcbc;

font-size:1.1rem;

margin-bottom:40px;

}

.error-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.lava-bg{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

pointer-events:none;

opacity:.25;

background:

radial-gradient(circle at 15% 30%, rgba(255,80,20,.6), transparent 20%),

radial-gradient(circle at 80% 25%, rgba(255,120,0,.4), transparent 18%),

radial-gradient(circle at 40% 80%, rgba(255,70,10,.5), transparent 20%),

radial-gradient(circle at 70% 75%, rgba(255,110,40,.4), transparent 22%);

animation:lavaMove 18s linear infinite;

filter:blur(30px);

}

@keyframes lavaMove{

0%{

transform:translate(0,0) scale(1);

}

50%{

transform:translate(-50px,-20px) scale(1.15);

}

100%{

transform:translate(0,0) scale(1);

}

}
.logo img{
    height:70px;
    width:auto;
    display:block;
}

.navbar{
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
}
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    display: block;
    height: 70px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

/* ===== Navbar Logo ===== */
.logo{
    display:flex;
    align-items:center;
}

.logo img{
    display:block;
    height:70px;
    width:auto;
    max-width:240px;
    object-fit:contain;
}

@media (max-width:768px){
    .logo img{
        height:50px;
        max-width:180px;
    }
}

/* ===== Hero Center Fix ===== */
.hero{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
}

.hero-content{
    width:100% !important;
    max-width:900px !important;
    margin:0 auto !important;
    padding:30px 20px !important;
    text-align:center !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
}

.hero-content h1,
.hero-content p{
    width:100%;
    text-align:center !important;
}

.buttons{
    width:100%;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:18px;
}
.hero-bg-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:0;
}

.hero-content{
    position:relative;
    z-index:2;
}
.visit-us{
    padding:100px 0;
}

.visit-us img{
    width:100%;
    border-radius:18px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.visit-us h2{
    margin-bottom:20px;
}

.visit-us p{
    line-height:1.8;
    color:#cfcfcf;
    margin-bottom:25px;
}

/* ===== ABOUT PAGE OVERRIDES ===== */

.about-hero{
    background:url("../images/about.webp") center center/cover !important;
    min-height:420px !important;
    height:50vh !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
}

.about-hero .hero-overlay{
    max-width:900px !important;
    padding:50px !important;
    margin:0 auto !important;
}

.about-hero h1{
    font-size:clamp(2.5rem,6vw,4.5rem) !important;
}

.about-hero p{
    font-size:1.2rem !important;
    margin-bottom:30px !important;
}

@media(max-width:768px){

    .about-hero{
        min-height:340px !important;
        height:auto !important;
        padding:120px 20px 60px !important;
    }

    .about-hero .hero-overlay{
        padding:30px !important;
    }

}

.menu-pdf-section{
    padding:80px 20px;
    text-align:center;
}

.menu-pdf-section iframe{
    width:100%;
    max-width:1200px;
    height:1000px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.copyright{
    text-align:center;
    margin-top:30px;
    color:#ccc;
}

.copyright a{
    color:#fff;
    text-decoration:none;
    transition:.2s;
}

.copyright a:hover{
    color:#ff6b00;
}
.page{
    min-height:100vh;
    padding:170px 0 80px;
    overflow:auto;
}

.page .container{
    width:min(900px,92%);
    margin:0 auto;
}

.page h1{
    margin-top:0;
    padding-top:20px;
}
<style>

.page{
    min-height:100vh;
    padding:170px 0 80px;
}

.page .container{
    width:min(900px,92%);
    margin:auto;
}

.page h1{
    font-size:42px;
    margin:0 0 20px;
}

.page h2{
    margin:40px 0 15px;
}
/* ================================
   Privacy Notice
================================ */

.privacy-banner{

    position:fixed;

    bottom:25px;

    left:50%;

    transform:translateX(-50%) translateY(150%);

    width:min(900px,92%);

    background:rgba(18,18,18,.92);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:18px;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

    z-index:99999;

    transition:.45s ease;

    opacity:0;

    pointer-events:none;

}

.privacy-banner.show{

    transform:translateX(-50%) translateY(0);

    opacity:1;

    pointer-events:auto;

}

.privacy-content{

    padding:26px 30px;

}

.privacy-content h3{

    margin:0 0 12px;

    color:#fff;

    font-size:1.35rem;

}

.privacy-content p{

    color:#d8d8d8;

    line-height:1.8;

    margin-bottom:22px;

    font-size:.97rem;

}

.privacy-content a{

    color:#ff6b00;

    text-decoration:none;

    font-weight:600;

}

.privacy-content a:hover{

    text-decoration:underline;

}

.privacy-btn{

    background:#ff6b00;

    color:#fff;

    border:none;

    padding:13px 28px;

    border-radius:10px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}

.privacy-btn:hover{

    background:#ff8533;

    transform:translateY(-2px);

}

@media(max-width:768px){

    .privacy-content{

        padding:22px;

    }

    .privacy-btn{

        width:100%;

    }

}