/* ==================================================
   Canalla Cafe - Persian Version
   Part 01
   Reset + Variables + Base Styles
================================================== */
/* ... (کدهای CSS قبلی شما) ... */



/* --------------------
   فونت فارسی
-------------------- */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700;800;900&display=swap');

/* --------------------
   ریست کلی
-------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(200, 168, 107, 0.06), transparent 35%),
    rgba(5, 5, 5, 0.98);
}

.loader-inner {
  width: min(360px, calc(100% - 48px));
  text-align: center;
}

.loader-logo {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--cream);
  margin-bottom: 18px;
  letter-spacing: 0.06em;
}

.loader-bar {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
}

.loader-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: loaderMove 1.4s infinite ease-in-out;
}

.loader-text {
  margin-top: 12px;
  color: var(--cream-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
}

@keyframes loaderMove {
  0% { transform: translateX(-140%); }
  100% { transform: translateX(340%); }
}
*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    font-size:16px;
}

body{
    direction:rtl;
    text-align:right;
    font-family:'Vazirmatn',sans-serif;
    background:#050505;
    color:#fff;
    overflow-x:hidden;
    line-height:1.8;
}

/* --------------------
   متغیرها
-------------------- */

:root{

    --primary:#c77d2a;
    --primary-light:#ffb347;
    --primary-dark:#8a4d0f;

    --black:#050505;
    --black-light:#0d0d0d;
    --black-card:#111111;
    --black-soft:#171717;

    --white:#ffffff;

    --gray-100:#f4f4f4;
    --gray-200:#d9d9d9;
    --gray-300:#b4b4b4;
    --gray-400:#8f8f8f;
    --gray-500:#666666;

    --border:rgba(255,255,255,.08);

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

    --shadow-gold:
    0 0 15px rgba(199,125,42,.3),
    0 0 40px rgba(199,125,42,.15);

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-xl:32px;

    --transition:.35s ease;

    --container:1320px;
}

/* --------------------
   اسکرول بار
-------------------- */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#080808;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--primary-light);
}

/* --------------------
   انتخاب متن
-------------------- */

::selection{
    background:var(--primary);
    color:#fff;
}

/* --------------------
   کانتینر
-------------------- */

.container{
    width:100%;
    max-width:var(--container);
    margin:auto;
    padding-inline:20px;
}

/* --------------------
   لینک ها
-------------------- */

a{
    text-decoration:none;
    color:inherit;
    transition:var(--transition);
}

ul{
    list-style:none;
}

img{
    width:100%;
    display:block;
}

button{
    font-family:'Vazirmatn',sans-serif;
    cursor:pointer;
    border:none;
}

input,
textarea{
    font-family:'Vazirmatn',sans-serif;
    outline:none;
}

/* --------------------
   افکت نور پس زمینه
-------------------- */

body::before{
    content:'';
    position:fixed;
    inset:0;

    background:
    radial-gradient(
    circle at top right,
    rgba(199,125,42,.15),
    transparent 30%
    ),

    radial-gradient(
    circle at bottom left,
    rgba(199,125,42,.08),
    transparent 40%
    );

    pointer-events:none;
    z-index:-1;
}
/* ==================================================
   HEADER
================================================== */

.site-header{
    position:fixed;
    top:0;
    right:0;
    width:100%;
    z-index:9999;

    backdrop-filter:blur(20px);

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

    border-bottom:
    1px solid rgba(199,125,42,.15);
}

.header-inner{

    min-height:90px;

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

.brand a{
    display:flex;
    flex-direction:column;
}

.brand-name{
    font-size:2rem;
    font-weight:800;
    letter-spacing:2px;
    color:#fff;
}

.brand-subtitle{
    font-size:.8rem;
    color:var(--primary);
}

.nav-list{
    display:flex;
    gap:35px;
}

.nav-list a{

    position:relative;

    font-size:.95rem;
    color:#ddd;
}

.nav-list a::after{

    content:'';

    position:absolute;

    bottom:-8px;
    right:0;

    width:0;
    height:2px;

    background:var(--primary);

    transition:.4s;
}

.nav-list a:hover{
    color:#fff;
}

.nav-list a:hover::after{
    width:100%;
}

.btn-book{

    background:
    linear-gradient(
    135deg,
    #d08b34,
    #9f5f1c
    );

    color:#fff;

    padding:14px 28px;

    border-radius:14px;

    font-weight:700;

    box-shadow:
    0 10px 30px
    rgba(199,125,42,.25);
}

.btn-book:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 40px
    rgba(199,125,42,.4);
}
/* ==================================================
   HERO SECTION
================================================== */

.hero-section{

    position:relative;

    padding-top:180px;
    padding-bottom:90px;
}

.hero-content{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    align-items:center;

    gap:60px;
}

.hero-tag{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    border:
    1px solid
    rgba(199,125,42,.3);

    border-radius:999px;

    background:
    rgba(199,125,42,.08);

    color:var(--primary);

    margin-bottom:30px;
}

.hero-title{

    font-size:5rem;

    font-weight:900;

    line-height:1.1;

    margin-bottom:25px;
}

.hero-description{

    color:#c7c7c7;

    max-width:500px;

    margin-bottom:40px;
}

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

.btn-primary{

    padding:16px 32px;

    border-radius:14px;

    background:
    linear-gradient(
    135deg,
    #d08b34,
    #8f5317
    );

    color:#fff;

    font-weight:700;
}

.btn-secondary{

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

    padding:16px 32px;

    border-radius:14px;

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

    color:#fff;
}

.hero-image{

    position:relative;

    max-width:650px;

    margin:auto;
}

.hero-image img{

    filter:
    drop-shadow(0 0 50px rgba(199,125,42,.4));

    animation:
    floating 5s ease-in-out infinite;
}

.hero-image::before{

    content:'';

    position:absolute;

    inset:10%;

    background:
    radial-gradient(
    circle,
    rgba(199,125,42,.3),
    transparent 70%
    );

    filter:blur(50px);

    z-index:-1;
}

@keyframes floating{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }
}
/* ==================================================
   FEATURES SECTION
================================================== */

.features-section{
    padding-bottom:90px;
}

.features-grid{

    display:grid;

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

    gap:20px;
}

.feature-card {
    position: relative;
    /* اطمینان از اینکه تمام محتوا در مرکز قرار می‌گیرند */
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, .03),
        rgba(255, 255, 255, .01)
    );
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 40px 25px; /* کمی پدینگ بیشتر برای شباهت به عکس جدید */
    overflow: hidden;
    transition: .4s;
}

/* افکت هاور */
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(199, 125, 42, .08), transparent);
    opacity: 0;
    transition: .4s;
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover {
    transform: translateY(-10px);
    border-color: rgba(199, 125, 42, .4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
}

/* استایل مربع آیکون - کاملاً وسط‌چین */
.feature-icon {
    width: 65px;
    height: 65px;
    border-radius: 18px;
    margin-bottom: 25px; /* فاصله مناسب تا تیتر */
    
    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        rgba(199, 125, 42, .25),
        rgba(199, 125, 42, .05)
    );
    border: 1px solid rgba(199, 125, 42, .2);
}

.feature-icon img {
    width: 30px; /* اندازه آیکون داخل مربع */
    height: 30px;
    object-fit: contain;
}

.feature-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
    letter-spacing: 0.5px; /* برای شباهت به تایپوگرافی عکس */
}

.feature-card p {
    color: #9c9c9c;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    max-width: 220px; /* برای اینکه متن مثل عکس در چند خط متوازن قرار بگیرد */
}

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

.featured-menu-section{
    padding-bottom:100px;
}

.section-header{

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

    margin-bottom:40px;
}

.section-header h2{

    font-size:2rem;
    font-weight:800;
}

.section-header a{

    color:var(--primary);
}

.menu-grid{

    display:grid;

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

    gap:25px;
}

.menu-card{

    background:
    #0d0d0d;

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

    border-radius:22px;

    overflow:hidden;

    transition:.4s;
}

.menu-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(199,125,42,.4);

    box-shadow:
    0 25px 50px rgba(0,0,0,.45);
}

.menu-image{
    height:220px;
    overflow:hidden;
}

.menu-image img{

    height:100%;
    object-fit:cover;

    transition:.7s;
}

.menu-card:hover img{

    transform:
    scale(1.1);
}

.menu-content{
    padding:20px;
}

.menu-content h3{

    margin-bottom:10px;

    font-size:1.15rem;
}

.menu-content p{

    color:#999;

    min-height:50px;

    font-size:.92rem;
}

.menu-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;
}

.price{

    color:var(--primary);

    font-size:1.1rem;

    font-weight:800;
}

.menu-footer button{

    width:42px;
    height:42px;

    border-radius:50%;

    color:#fff;

    font-size:1.2rem;

    background:
    linear-gradient(
    135deg,
    #c77d2a,
    #8d5418
    );
}
/* ==================================================
   SPECIAL OFFER
================================================== */

.morning-ritual-banner {
    position: relative;
    width: 100%;
    /* ارتفاع را طوری تنظیم کنید که با جدول سمت چپ هم‌تراز شود */
    height: 480px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* محتوا را به سمت راست می‌برد */
    padding: 60px;
    border-radius: 40px;
    overflow: hidden;
    background-color: #120d0b;
}

/* افکت گرادینت تیره روی عکس برای خوانایی متن */
/* این کلاس والد اصلی هر دو باکس است */
.banner-layout {
    display: flex;
    flex-direction: row-reverse; /* برای اینکه بنر سمت راست و جدول سمت چپ باشد */
    gap: 24px; /* فاصله بین بنر و جدول */
    align-items: stretch; /* هم‌قد کردن بنر و جدول */
    width: 100%;
    max-width: 1200px; /* یا هر عرضی که برای کل سایت در نظر دارید */
    margin: 0 auto;
}

/* تنظیم عرض بنر */
.morning-ritual-banner {
    flex: 1.5; /* سهم بیشتر برای بنر */
    position: relative;
    height: 450px; /* ارتفاع کنترل شده */
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}

/* تنظیم عرض جدول */
.custom-order-card { /* نام کلاس جدولتان را اینجا بگذارید */
    flex: 1; /* سهم کمتر برای جدول */
    height: 450px; /* هم‌قد با بنر */
    background: #0c0a09;
    border-radius: 30px;
}


.banner-content {
    position: relative;
    z-index: 2;
    text-align: right;
    color: #fff;
}

.banner-label {
    color: #c77d2a;
    font-size: 1rem;
    opacity: 0.8;
}

.banner-content h2 {
    font-size: 3.5rem;
    margin: 10px 0;
    font-weight: bold;
}

.banner-content p {
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 20px;
}

.offer-price {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 30px;
}

/* اصلاح بخش تصویر برای پر کردن کل پس‌زمینه */
.banner-image {
    position: absolute;
    inset: 0; /* تمام فضای بنر را می‌گیرد */
    z-index: 0;
}

.banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* تصویر بدون دفرمه شدن کل فضا را پر می‌کند */
    object-position: center; /* مرکز تصویر را نشان می‌دهد */
    filter: brightness(0.2); /* کمی تیره کردن خودِ عکس */
}

/* استایل دکمه سفارش دهید */
.btn-primary {
    background: #c77d2a;
    color: #fff;
    padding: 15px 45px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 10px 20px rgba(199, 125, 42, 0.2);
    transition: 0.3s;
}

.btn-primary:hover {
    transform: translateY(-3px);
    background: #e08e33;
}

/* سفارشی سازی */

.customize-drink-card{

    background:#0f0f0f;

    border-radius:28px;

    padding:35px;

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

.customize-drink-card h3{

    margin-bottom:25px;

    font-size:1.3rem;
}

.custom-option{

    display:flex;

    justify-content:space-between;

    padding:16px 0;

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

.custom-option span:last-child{

    color:var(--primary);
}

.custom-actions{

    display:flex;

    gap:12px;

    margin-top:25px;
}

.custom-actions button:first-child{

    flex:1;

    background:
    linear-gradient(
    135deg,
    #c77d2a,
    #93581c
    );

    color:#fff;

    height:50px;

    border-radius:12px;
}

.custom-actions button:last-child{

    width:100px;

    background:#1d1d1d;

    color:#fff;

    border-radius:12px;
}
.banner-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* پر کردن کادر بدون دفرمه شدن */
    object-position: center;
}
.banner-text {
    direction: rtl;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}



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

.about-section{

    padding-bottom:120px;
}

.about-layout{

    display:grid;

    grid-template-columns:
    1.1fr 1fr;

    gap:70px;

    align-items:center;
}

.about-image{

    overflow:hidden;

    border-radius:30px;

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

.about-image img{

    transition:.8s;
}

.about-image:hover img{

    transform:scale(1.08);
}

.section-label{

    color:var(--primary);

    letter-spacing:1px;

    margin-bottom:15px;

    display:inline-block;
}

.about-content h2{

    font-size:3rem;

    margin-bottom:20px;
}

.about-content p{

    color:#b6b6b6;

    margin-bottom:30px;
}

.about-highlights{

    display:grid;

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

    gap:18px;
}

.about-highlights li{

    position:relative;

    padding-right:25px;
}

.about-highlights li::before{

    content:'';

    position:absolute;

    right:0;
    top:12px;

    width:10px;
    height:10px;

    border-radius:50%;

    background:var(--primary);
}
/* ==================================================
   STATISTICS SECTION
================================================== */

.statistics-section{
    padding-bottom:120px;
}

.stats-grid{

    display:grid;

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

    gap:25px;
}

.stat-card{

    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.03),
    rgba(255,255,255,.01)
    );

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

    border-radius:24px;

    padding:40px 20px;

    text-align:center;

    transition:.4s;
}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:
    rgba(199,125,42,.35);

    box-shadow:
    0 20px 40px rgba(0,0,0,.4);
}

.stat-card strong{

    display:block;

    font-size:2.5rem;

    font-weight:900;

    color:var(--primary);

    margin-bottom:10px;
}

.stat-card span{

    color:#b9b9b9;
}
/* ==================================================
   TESTIMONIALS
================================================== */

.testimonials-section{

    padding-bottom:120px;
}

.centered{
    justify-content:center;
    text-align:center;
}

.testimonials-grid{

    display:grid;

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

    gap:30px;
}

.testimonial-card{

    position:relative;

    background:#101010;

    border-radius:28px;

    padding:35px;

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

    transition:.4s;
}

.testimonial-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(199,125,42,.25);
}

.rating{

    color:#ffb347;

    font-size:1.2rem;

    margin-bottom:20px;
}

.testimonial-card blockquote{

    color:#d4d4d4;

    font-size:1rem;

    line-height:2;

    margin-bottom:25px;
}

.testimonial-author{

    border-top:
    1px solid rgba(255,255,255,.05);

    padding-top:20px;
}

.testimonial-author strong{

    display:block;

    color:#fff;
}

.testimonial-author span{

    color:#888;

    font-size:.9rem;
}
/* ==================================================
   SHOP SECTION
================================================== */

.shop-section{
    padding-bottom:120px;
}

.shop-grid{

    display:grid;

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

    gap:30px;
}

.product-card{

    background:#0d0d0d;

    border-radius:26px;

    overflow:hidden;

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

    transition:.4s;
}

.product-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(199,125,42,.35);
}

.product-card figure{

    height:320px;

    overflow:hidden;
}

.product-card img{

    height:100%;

    object-fit:cover;

    transition:.8s;
}

.product-card:hover img{

    transform:
    scale(1.08);
}

.product-content{

    padding:25px;
}

.product-content h3{

    margin-bottom:10px;

    font-size:1.2rem;
}

.product-content p{

    color:#999;

    margin-bottom:15px;
}

.product-content .price{

    font-size:1.4rem;

    color:var(--primary);

    font-weight:800;
}
/* ==========================================
   GALLERY
========================================== */

.gallery-section{
    padding-bottom:100px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1rem;
}

.gallery-item{
    height:140px;
    overflow:hidden;
    border-radius:16px;
    background:#151515;
    border:1px solid var(--border);
}

.gallery-item img{
    transition:.6s ease;
}

.gallery-item:hover img{
    transform:scale(1.08);
}
/* ==================================================
   CONTACT
================================================== */

.contact-section{

    padding-bottom:120px;
}

.contact-layout{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:50px;
}

.contact-information{

    background:#0d0d0d;

    padding:40px;

    border-radius:30px;

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

.contact-information h2{

    font-size:2.5rem;

    margin-bottom:30px;
}

.contact-list li{

    margin-bottom:30px;
}

.contact-list strong{

    display:block;

    margin-bottom:8px;

    color:var(--primary);
}

.contact-list span{

    color:#b9b9b9;
}

.contact-form-wrapper{

    background:#0d0d0d;

    border-radius:30px;

    padding:40px;

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

.contact-form h3{
    margin-bottom:20px;
}

.form-row{

    display:grid;

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

    gap:15px;
}

.contact-form input,
.contact-form textarea{

    width:100%;

    background:#161616;

    color:#fff;

    border:none;

    border-radius:14px;

    padding:16px 20px;

    margin-bottom:15px;
}

.contact-form textarea{

    resize:none;
}

.contact-form button{

    width:100%;

    height:56px;

    border-radius:14px;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    #c77d2a,
    #8d5519
    );

    font-weight:700;
}
/* ==================================================
   NEWSLETTER
================================================== */

.newsletter-section{

    padding-bottom:120px;
}

.newsletter-layout{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    padding:50px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #241406,
    #120e0a
    );
}

.newsletter-content h2{

    margin-top:10px;

    margin-bottom:10px;

    font-size:2.4rem;
}

.newsletter-content p{

    color:#c0c0c0;
}

.newsletter-form{

    display:flex;

    gap:15px;

    min-width:500px;
}

.newsletter-form input{

    flex:1;

    background:#fff;

    border:none;

    border-radius:14px;

    padding:16px 20px;
}

.newsletter-form button{

    width:160px;

    border-radius:14px;

    background:var(--primary);

    color:#fff;
}
/* ==================================================
   FOOTER
================================================== */

.site-footer{

    border-top:
    1px solid rgba(255,255,255,.05);

    padding-top:90px;
}

.footer-grid{

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr 1fr 1fr;

    gap:40px;

    padding-bottom:70px;
}

.footer-brand h3{

    font-size:2rem;

    margin-bottom:15px;
}

.footer-brand p{

    color:#aaa;

    margin-bottom:25px;
}

.social-links{

    display:flex;

    gap:15px;
}

.social-links a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:45px;
    height:45px;

    border-radius:50%;

    background:#111;
}

.footer-column h4{

    margin-bottom:20px;

    color:#fff;
}

.footer-column ul li{

    margin-bottom:12px;
}

.footer-column a{

    color:#9d9d9d;
}

.footer-column a:hover{

    color:var(--primary);
}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 0;

    border-top:
    1px solid rgba(255,255,255,.05);
}

.footer-bottom p{

    color:#888;
}

.footer-links{

    display:flex;

    gap:25px;
}

.footer-links a{

    color:#888;
}
/* ==================================================
   ADVANCED HERO EFFECTS
================================================== */

.hero-section{
    overflow:hidden;
}

.hero-section::before{

    content:'';

    position:absolute;

    top:-250px;
    right:-200px;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(199,125,42,.20),
    transparent 70%
    );

    filter:blur(80px);

    z-index:-2;
}

.hero-section::after{

    content:'';

    position:absolute;

    left:-250px;
    bottom:-250px;

    width:600px;
    height:600px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,255,255,.03),
    transparent 70%
    );

    filter:blur(100px);

    z-index:-2;
}

.hero-copy{
    position:relative;
    z-index:5;
}

.hero-title{

    background:
    linear-gradient(
    180deg,
    #ffffff,
    #d7d7d7
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-description{

    font-size:1.1rem;

    max-width:560px;
}

.hero-buttons a{

    transition:.4s;
}

.hero-buttons a:hover{

    transform:
    translateY(-5px);
}
/* ==================================================
   GLASS EFFECT
================================================== */

.feature-card,
.menu-card,
.product-card,
.stat-card,
.testimonial-card{

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);
}

.feature-card::after,
.stat-card::after,
.testimonial-card::after{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.05),
    transparent 40%
    );

    pointer-events:none;
}

.menu-card,
.product-card{

    position:relative;
}

.menu-card::before,
.product-card::before{

    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:80px;
    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
    );

    transition:1s;
}

.menu-card:hover::before,
.product-card:hover::before{

    left:140%;
}
/* ==================================================
   HOVER SYSTEM
================================================== */

.btn,
button,
a{

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.btn:hover,
button:hover{

    transform:
    translateY(-4px);
}

.feature-card:hover,
.menu-card:hover,
.product-card:hover,
.testimonial-card:hover,
.stat-card:hover{

    box-shadow:
    0 20px 50px rgba(0,0,0,.45),
    0 0 25px rgba(199,125,42,.08);
}

.social-links a:hover{

    background:var(--primary);

    transform:
    translateY(-5px);
}
/* ==================================================
   SCROLL ANIMATIONS
================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(40px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);
    }
}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:
        translateX(50px);
    }

    to{

        opacity:1;

        transform:
        translateX(0);
    }
}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:
        translateX(-50px);
    }

    to{

        opacity:1;

        transform:
        translateX(0);
    }
}

.hero-copy{

    animation:
    fadeRight 1s ease;
}

.hero-visual{

    animation:
    fadeLeft 1s ease;
}

.feature-card{

    animation:
    fadeUp .8s ease;
}
/* ==================================================
   TABLET
================================================== */

@media(max-width:1100px){

    .hero-content{
        grid-template-columns:1fr;
    }

    .hero-image{
        max-width:500px;
    }

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

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

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

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

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

    .banner-layout{
        grid-template-columns:1fr;
    }

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

    .contact-layout{
        grid-template-columns:1fr;
    }

    .footer-grid{

        grid-template-columns:
        repeat(3,1fr);
    }
}
/* ==================================================
   MOBILE
================================================== */

@media(max-width:768px){

    html{
        font-size:14px;
    }

    .site-header{
        padding:10px 0;
    }

    .header-inner{
        min-height:70px;
    }

    .main-navigation{
        display:none;
    }

    .hero-section{

        padding-top:130px;
        padding-bottom:70px;
    }

    .hero-title{

        font-size:3rem;

        line-height:1.2;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .features-grid,
    .menu-grid,
    .shop-grid,
    .stats-grid{

        grid-template-columns:1fr;
    }

    .gallery-grid{

        display:flex;

        flex-direction:column;
    }

    .newsletter-layout{

        flex-direction:column;
    }

    .newsletter-form{

        min-width:auto;

        width:100%;

        flex-direction:column;
    }

    .newsletter-form button{
        width:100%;
    }

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

    .footer-bottom{

        flex-direction:column;

        gap:20px;
    }

    .form-row{

        grid-template-columns:1fr;
    }

    .contact-information,
    .contact-form-wrapper{

        padding:25px;
    }

    .about-content h2{

        font-size:2.2rem;
    }

    .newsletter-content h2{

        font-size:2rem;
    }
}
@media(max-width:480px){

    .container{
        padding-inline:15px;
    }

    .hero-title{
        font-size:2.4rem;
    }

    .section-header{

        flex-direction:column;

        gap:15px;

        align-items:flex-start;
    }

    .btn-primary,
    .btn-secondary,
    .btn-book{

        width:100%;

        text-align:center;
    }

    .morning-ritual-banner{

        padding:25px;
    }

    .banner-content h2{

        font-size:2rem;
    }

    .offer-price{

        font-size:1.6rem;
    }

    .custom-actions{

        flex-direction:column;
    }

    .custom-actions button:last-child{

        width:100%;
    }
}
/* ==================================================
   GOLDEN GLOW
================================================== */

.hero-image img,
.banner-image img{

    filter:
    drop-shadow(
    0 0 20px rgba(199,125,42,.2)
    )
    drop-shadow(
    0 0 40px rgba(199,125,42,.15)
    )
    drop-shadow(
    0 0 60px rgba(199,125,42,.1)
    );
}

.btn-primary,
.btn-book{

    box-shadow:
    0 10px 25px rgba(199,125,42,.2),
    0 0 20px rgba(199,125,42,.1);
}

.feature-card:hover,
.menu-card:hover,
.product-card:hover{

    border-color:
    rgba(199,125,42,.4);

    box-shadow:
    0 0 25px rgba(199,125,42,.08),
    0 15px 40px rgba(0,0,0,.45);
}
.site-header.scrolled{

    background:
    rgba(5,5,5,.95);

    backdrop-filter:
    blur(25px);

    box-shadow:
    0 10px 40px rgba(0,0,0,.3);
}
.nav-list a.active{

    color:var(--primary);
}
.feature-card,
.menu-card,
.product-card,
.testimonial-card,
.about-content,
.contact-layout{

    opacity:0;

    transform:
    translateY(50px);

    transition:
    .8s ease;
}

.show{

    opacity:1;

    transform:
    translateY(0);
}
#backToTop{

    position:fixed;

    left:25px;
    bottom:25px;

    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:22px;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:999;
}

#backToTop.show{

    opacity:1;

    visibility:visible;
}.mobile-toggle{

    display:none;
}

@media(max-width:768px){

    .mobile-toggle{

        display:block;

        background:none;

        color:#fff;

        font-size:30px;
    }

    .main-navigation{

        position:fixed;

        top:90px;

        right:-100%;

        width:280px;

        height:100vh;

        background:#0d0d0d;

        transition:.4s;
    }

    .main-navigation.open{

        right:0;
    }

    .nav-list{

        flex-direction:column;

        padding:40px;
    }
}