/* ===================================================
   NENO FAST FOOD - ULTIMATE PREMIUM STYLE.CSS
   Part 1
=================================================== */

/* ---------- Google Style Reset ---------- */

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

html{
    scroll-behavior:smooth;
}

:root{

    --bg:#0b0b0b;
    --surface:#171717;
    --surface2:#202020;

    --primary:#ffb703;
    --secondary:#fb8500;

    --text:#ffffff;
    --muted:#cfcfcf;

    --radius:22px;

    --shadow:
    0 12px 35px rgba(0,0,0,.35);

    --goldShadow:
    0 10px 30px rgba(255,183,3,.22);

}

body{

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

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.6;

}

img{

    display:block;

    width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    cursor:pointer;

    font-family:inherit;

    transition:.35s;

}

section{

    padding:90px 8%;

}

.section-title{

    text-align:center;

    font-size:42px;

    font-weight:700;

    margin-bottom:60px;

}

/* ===================================================
   HEADER
=================================================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:16px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(15,15,15,.75);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

    z-index:9999;

}

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:58px;

    height:58px;

    border-radius:50%;

    object-fit:cover;

}

.logo h2{

    font-size:30px;

    color:var(--primary);

}

.navbar{

    display:flex;

    gap:32px;

}

.navbar a{

    position:relative;

    font-weight:600;

    transition:.3s;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.navbar a:hover{

    color:var(--primary);

}

.navbar a:hover::after{

    width:100%;

}

.header-buttons{

    display:flex;

    gap:15px;

}

.header-buttons button{

    padding:12px 22px;

    border-radius:40px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#111;

    font-weight:700;

    box-shadow:var(--goldShadow);

}

.header-buttons button:hover{

    transform:translateY(-3px) scale(1.03);

}

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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    background:url("images/banner.jpg")
    center center/cover no-repeat;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.65),
    rgba(0,0,0,.60));

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:850px;

    padding:20px;

}

.hero h1{

    font-size:68px;

    line-height:1.15;

    margin-bottom:25px;

}

.hero p{

    color:var(--muted);

    font-size:22px;

    margin-bottom:35px;

}

.search-box{

    display:flex;

    justify-content:center;

    margin-bottom:35px;

}

.search-box input{

    width:500px;

    max-width:80vw;

    padding:18px;

    border:none;

    outline:none;

    border-radius:50px 0 0 50px;

    font-size:17px;

}

.search-box button{

    width:75px;

    border-radius:0 50px 50px 0;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

}

.order-btn{

    display:inline-block;

    padding:18px 42px;

    border-radius:50px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#111;

    font-weight:700;

    box-shadow:var(--goldShadow);

}

.order-btn:hover{

    transform:translateY(-4px);

}
/* ===================================================
   CATEGORIES
=================================================== */

.categories{

    background:#111;

}

.category-container{

    display:grid;

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

    gap:30px;

}

.category-card{

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(14px);

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

    border-radius:var(--radius);

    padding:40px 20px;

    text-align:center;

    transition:.4s;

    box-shadow:var(--shadow);

}

.category-card:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

    box-shadow:var(--goldShadow);

}

.category-card i{

    font-size:60px;

    color:var(--primary);

    margin-bottom:18px;

}

.category-card h3{

    font-size:22px;

}

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

.menu{

    background:var(--bg);

}

.menu-container{

    display:grid;

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

    gap:35px;

}

.food-card{

    overflow:hidden;

    border-radius:26px;

    background:var(--surface);

    box-shadow:var(--shadow);

    transition:.45s;

}

.food-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--goldShadow);

}

.food-card img{

    height:240px;

    object-fit:cover;

    transition:.45s;

}

.food-card:hover img{

    transform:scale(1.08);

}

.food-card h3{

    font-size:26px;

    padding:22px 22px 10px;

}

.price{

    color:var(--primary);

    font-size:28px;

    font-weight:700;

    padding:0 22px 20px;

}

.add-cart{

    width:calc(100% - 44px);

    margin:0 22px 22px;

    padding:16px;

    border-radius:50px;

    font-size:17px;

    font-weight:700;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#111;

    box-shadow:var(--goldShadow);

}

.add-cart:hover{

    transform:translateY(-3px);

}

/* ===================================================
   FEATURED
=================================================== */

.featured{

    background:#101010;

}

.featured-container{

    display:grid;

    gap:40px;

}

.featured-card{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    overflow:hidden;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

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

    box-shadow:var(--
                   /* ===================================================
   SPECIAL OFFERS
=================================================== */

.offers{

    background:#111;

}

.offer-container{

    display:grid;

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

    gap:30px;

}

.offer-card{

    padding:40px 30px;

    text-align:center;

    border-radius:28px;

    background:linear-gradient(135deg,#ffb703,#fb8500);

    color:#111;

    box-shadow:var(--goldShadow);

    transition:.45s;

}

.offer-card:hover{

    transform:translateY(-12px) scale(1.03);

}

.offer-card h3{

    font-size:30px;

    margin-bottom:15px;

}

.offer-card p{

    font-size:18px;

    font-weight:500;

}

/* ===================================================
   WHY CHOOSE US
=================================================== */

.why-us{

    background:var(--bg);

}

.why-container{

    display:grid;

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

    gap:30px;

}

.why-box{

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(16px);

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

    border-radius:26px;

    padding:40px 25px;

    text-align:center;

    transition:.45s;

}

.why-box:hover{

    transform:translateY(-10px);

    box-shadow:var(--goldShadow);

}

.why-box i{

    font-size:58px;

    color:var(--primary);

    margin-bottom:20px;

}

.why-box h3{

    font-size:25px;

    margin-bottom:15px;

}

.why-box p{

    color:var(--muted);

    line-height:1.8;

}

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

.about{

    display:grid;

    grid
   /* ===================================================
   LOGIN MODAL
=================================================== */

.login-modal{

    position:fixed;
    inset:0;

    display:none;

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

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

    backdrop-filter:blur(10px);

    z-index:10000;

}

.login-box{

    width:430px;
    max-width:92%;

    background:var(--surface);

    border-radius:30px;

    padding:40px;

    position:relative;

    box-shadow:var(--shadow);

    animation:popup .35s ease;

}

@keyframes popup{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.close-login{

    position:absolute;

    right:20px;

    top:15px;

    font-size:34px;

    cursor:pointer;

    color:var(--primary);

}

.login-box h2{

    text-align:center;

    margin-bottom:10px;

}

.login-box p{

    text-align:center;

    color:var(--muted);

    margin-bottom:25px;

}

.login-box input{

    width:100%;

    padding:17px;

    margin-bottom:18px;

    border:none;

    border-radius:14px;

    background:#252525;

    color:#fff;

}

.login-box button{

    width:100%;

    padding:18px;

    border-radius:50px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#111;

    font-weight:700;

}

/* ===================================================
   CART SIDEBAR
=================================================== */

.cart-sidebar{

    position:fixed;

    top:0;

    right:-430px;

    width:420px;

    max-width:100%;

    height:100vh;

    background:#121212;

    z-index:9999;

    transition:.45s;

    overflow-y:auto;

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

}

.cart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

    border-bottom:1px solid #2d2d2d;

}

.cart-header h2{

    color:var(--primary);

}

#closeCart{

    font-size:32px;

    cursor:pointer;

}

#cartItems{

    padding:20px;

    min-height:250px;

}

.cart-footer{

    padding:25px;

    border-top:1px solid #2d2d2d;

}

.cart-footer h3{

    display:flex;

    justify-content:space-between;

}

.cart-footer button{

    width:100%;

    margin-top:18px;

    padding:18px;

    border-radius:50px;
   /* ===================================================
   FINAL PREMIUM EFFECTS
=================================================== */

/* Smooth Fade */
html{
    scroll-padding-top:90px;
}

/* Text Selection */
::selection{
    background:var(--primary);
    color:#111;
}

/* Visible Focus */
button:focus,
input:focus,
textarea:focus,
a:focus{
    outline:2px solid var(--primary);
    outline-offset:3px;
}

/* Loading Animation */
@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* Floating Cards */

.food-card:nth-child(odd),
.category-card:nth-child(even){

    animation:floatCard 5s ease-in-out infinite;

}

.food-card:nth-child(even),
.category-card:nth-child(odd){

    animation:floatCard 6s ease-in-out infinite;

}

/* Premium Glow */

.food-card:hover,
.category-card:hover,
.featured-card:hover,
.offer-card:hover,
.why-box:hover{

    box-shadow:
    0 15px 45px rgba(255,183,3,.35);

}

/* Image Zoom */

.food-card{

    overflow:hidden;

}

.food-card img{

    transition:.45s;

}

.food-card:hover img{

    transform:scale(1.08);

}

/* Button Animation */

.order-btn,
.add-cart,
.header-buttons button,
.contact-form button,
.checkout button,
.newsletter-form button,
.login-box button{

    transition:.35s;

}

.order-btn:hover,
.add-cart:hover,
.header-buttons button:hover,
.contact-form button:hover,
.checkout button:hover,
.newsletter-form button:hover,
.login-box button:hover{

    transform:translateY(-4px);

    filter:brightness(1.08);

}

/* Input Hover */

input,
textarea{

    transition:.3s;

}

input:hover,
textarea:hover{

    background:#303030;

}

/* Footer Animation */

.footer-box a{

    transition:.3s;

}

.footer-box a:hover{

    transform:translateX(6px);

}

/* Better Paragraphs */

p{

    line-height:1.8;

}

/* Premium Border */

.food-card,
.category-card,
.featured-card,
.offer-card,
.why-box,
.contact-info,
.contact-form,
.login-box,
.summary-box{

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

}

/* Performance */

img{