/* ================================================================
   SANDWICH BAR AND BISTRO — Option 2: Dark Forest Green & Gold
   Deep greens matching the logo, gold accents, premium feel
   ================================================================ */

:root {
  /* Logo-matched greens */
  --forest-950: #0d1f14;
  --forest-900: #132a1a;
  --forest-850: #1a3522;
  --forest-800: #1e3d28;
  --forest-700: #2d6a4f;
  --forest-600: #3a7d5e;
  --forest-500: #52b788;
  --forest-300: #95d5b2;
  --forest-100: #d8f3dc;
  --forest-50:  #f0fdf4;
  --forest-muted: #2d6a4f;

  --menu-forest-950: #132a1a;
  --menu-forest-900: #1a3522;
  --menu-forest-850: #1a3522;
  --menu-forest-800: #1e3d28;
  --menu-forest-700: #2d6a4f;
  --menu-forest-600: #3a7d5e;
  --menu-forest-500: #52b788;
  --menu-forest-300: #95d5b2;
  --menu-forest-100: #d8f3dc;
  --menu-forest-50:  #f0fdf4;


  /* Gold palette */
  --gold-bright: #f5f0e8;
  --gold: #f5f0e8;
  --gold-muted: #ffffff;
  --gold-dark: #967c3b;
  --gold-glow: rgba(201, 168, 76, 0.15);
  --gold-line: rgba(194, 161, 72, 0.3);

  --menu-gold-bright: #d4a843;
  --menu-gold: #c9a84c;
  --menu-gold-muted: #a8893d;
  --menu-gold-dark: #7d6630;
  --menu-gold-glow: rgba(201, 168, 76, 0.15);
  --menu-gold-line: rgba(201, 168, 76, 0.3);

  /* Neutrals */
  --white: #ffffff;
  --off-white: #f5f0e8;
  --cream: #ede8de;
  --warm-gray: #9e9585;
  --muted: rgba(237, 232, 222, 0.55);
  --muted-2: rgba(237, 232, 222, 0.35);
  --dark-overlay: rgba(13, 31, 20, 0.85);

  --menu-white: #ffffff;
  --menu-off-white: #f5f0e8;
  --menu-cream: #ede8de;
  --menu-warm-gray: #9e9585;
  --menu-muted: rgba(237, 232, 222, 0.55);
  --menu-muted-2: rgba(237, 232, 222, 0.35);
  --menu-dark-overlay: rgba(13, 31, 20, 0.85);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --font-serif: 'EB Garamond', Georgia, serif;

  /* Sizing */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-gold: 0 4px 20px rgba(201, 168, 76, 0.2);
  --shadow-dark: 0 8px 40px rgba(0, 0, 0, 0.4);
  --transition: 0.3s ease;
}
/* :root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Libre Baskerville",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
} */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--forest-900);
  background: var(--white);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
a { color: var(--gold-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  color: var(--menu-off-white);
}
em { font-style: italic; color: var(--menu-gold); }

/* --- Preloader --- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-crest { text-align: center; }
#preloader .preloader-crest .crest-s img {
  display: block;
  width: min(50vw, 150px);
  max-width: 150px;
  height: auto;
  margin-bottom: 16px;
}
.crest-s {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 700;
  color: var(--forest-700);
  line-height: 1;
  opacity: 0;
  animation: crestReveal 0.8s ease 0.2s forwards;
}
.crest-lines { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.crest-lines span {
  display: block;
  height: 2px;
  background: var(--forest-700);
  border-radius: 1px;
  animation: growLine 1s ease forwards;
}
.crest-lines span:nth-child(1) { width: 0; animation-delay: 0.6s; }
.crest-lines span:nth-child(2) { width: 0; animation-delay: 0.7s; }
.crest-lines span:nth-child(3) { width: 0; animation-delay: 0.8s; }
@keyframes crestReveal { to { opacity: 1; } }
@keyframes growLine { to { width: 30px; } }
.crest-lines span:nth-child(1) { animation-name: growLineShort; }
@keyframes growLineShort { to { width: 20px; } }
@keyframes animate-preloader {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Premium Flat Light Header
--------------------------------------------------------------*/

.header {

    position: sticky;
    top: 0;

    width: 100%;
    margin: 0;

    background: rgba(255,255,255,0.96);

    backdrop-filter: blur(15px);

    border-bottom: 1px solid rgba(0,0,0,0.08);

    padding: 12px 0;

    transition: all .4s ease;

    z-index:997;
}


.header.scrolled {

    background:#ffffff;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);

}



/* Logo */

.logo {

    display:flex;
    align-items:center;

    transition:.35s ease;

}


.logo img {

    width:100px;

    transition:.4s ease;

}


.logo:hover img {

    transform:scale(1.08);

}



/* Navigation */

.navmenu ul {

    display:flex;

    align-items:center;

    gap:5px;

    list-style:none;

    margin:0;

    padding:0;

}


.navmenu a {

    position:relative;

    color:var(--forest-950);

    font-size:13px;

    font-weight:700;

    letter-spacing:1.4px;

    text-transform:uppercase;

    padding:12px 16px;

    transition:.35s ease;

}



/* Elegant underline */

.navmenu a::after {

    content:"";

    position:absolute;

    bottom:5px;

    left:50%;

    width:0;

    height:2px;

    background:var(--gold-dark);

    transform:translateX(-50%);

    transition:.35s ease;

}


.navmenu a:hover::after,
.navmenu a.active::after {

    width:60%;

}


.navmenu a:hover,
.navmenu a.active {

    color:var(--gold-dark);

}



/* Book button */

.nav-book-btn {

    background:var(--forest-900);

    color:white !important;

    /* border:2px solid var(--menu-gold); */
    border-radius:6px;

    padding:12px 25px !important;

    margin-left:10px;

    box-shadow:
    0 8px 20px rgba(45,106,79,.25);

}


.nav-book-btn::after {

    display:none;

}


.nav-book-btn:hover {

    background:var(--gold-dark);

    color:white !important;

    transform:translateY(-2px);

}



/* Mobile icon */

.mobile-nav-toggle {

    display:none;

    font-size:28px;

    color:var(--forest-950);

    cursor:pointer;

    transition:.3s;

}


.mobile-nav-toggle:hover {

    color:var(--gold-dark);

}



/* Mobile */

@media(max-width:1199px){

    .header {

        padding:12px 15px;

    }


    .mobile-nav-toggle {

        display:block;

    }


    .navmenu ul {

        display:none;

        position:absolute;

        top:100%;

        right:15px;

        width:300px;

        background:white;

        padding:20px;

        border-radius:0 0 15px 15px;

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

        animation:menuSlide .35s ease;

    }


    .navmenu ul.active {

        display:flex;

        flex-direction:column;

    }


    .navmenu a {

        width:100%;

    }


    .nav-book-btn {

        margin-left:0;

        text-align:center;

    }

}


@keyframes menuSlide {

    from {

        opacity:0;

        transform:translateY(-15px);

    }

    to {

        opacity:1;

        transform:translateY(0);

    }

}

/* --- Hero --- */
/* Hero */
.hero{
    position: relative;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
}

.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide{
    width:100%;
    height:100%;
}

.heroSwiper .swiper-slide{
    position:relative;
    overflow:hidden;
}

.heroSwiper .swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;      /* every image fills the hero */
    object-position:center;
    animation:heroZoom 8s linear infinite alternate;
}

@keyframes heroZoom{
    from{ transform:scale(1); }
    to{ transform:scale(1.03); }   /* subtle zoom */
}
.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,.72),

        rgba(0,0,0,.35),

        rgba(0,0,0,.15)

    );

}
.hero-content{

    position:absolute;

    top:50%;

    left:8%;

    transform:translateY(-50%);

    max-width:600px;

    z-index:10;

    color:#fff;

}
.hero-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

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

    backdrop-filter:blur(12px);

    font-size:14px;

    letter-spacing:2px;

    margin-bottom:25px;

}
.hero-content h1{

    font-size:clamp(30px,7vw,52px);

    line-height:.92;

    font-weight:800;

    margin-bottom:25px;

}
.hero-content p{

    font-size:20px;

    line-height:1.8;

    max-width:500px;

    margin-bottom:40px;

}
/* Hero Buttons */
.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

/* Primary Button */
.btn-primary-hero{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 34px;
    background:var(--menu-gold);
    color:var(--menu-forest-900);
    border:2px solid var(--menu-gold);
    border-radius:6px;
    font-family:var(--font-body);
    font-size:14px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    transition:all .35s ease;
    box-shadow:var(--shadow-gold);
}

.btn-primary-hero:hover{
    background:var(--menu-gold-bright);
    border-color:var(--menu-gold-bright);
    color:var(--menu-forest-900);
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(201,168,76,.35);
}

/* Secondary Button */
.btn-secondary-hero{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 34px;
    background:transparent;
    color:var(--off-white);
    border:2px solid rgba(245,240,232,.45);
    border-radius:6px;
    font-family:var(--font-body);
    font-size:14px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    backdrop-filter:blur(10px);
    transition:all .35s ease;
}

.btn-secondary-hero:hover{
    background:var(--menu-forest-900);
    border-color:var(--menu-gold);
    color:var(--menu-gold);
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* Button Icons (optional) */
.btn-primary-hero i,
.btn-secondary-hero i{
    margin-left:8px;
    transition:.3s;
}

.btn-primary-hero:hover i,
.btn-secondary-hero:hover i{
    transform:translateX(4px);
}

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

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .btn-primary-hero,
    .btn-secondary-hero{
        width:100%;
        padding:16px 24px;
    }
}
.hero-content>*{

    opacity:0;

    transform:translateY(35px);

}
.swiper-slide-active .hero-tag{

    opacity:1;

    transform:none;

    transition:.6s;

}

.swiper-slide-active h1{

    opacity:1;

    transform:none;

    transition:.8s .2s;

}

.swiper-slide-active p{

    opacity:1;

    transform:none;

    transition:.8s .45s;

}

.swiper-slide-active .hero-buttons{

    opacity:1;

    transform:none;

    transition:.8s .65s;

}
@media(max-width:768px){

.hero{

    min-height:680px;

}

.hero-content{

    left:0;

    right:0;

    width:90%;

    margin:auto;

    text-align:center;

}

.hero-content h1{

    font-size:48px;

}

.hero-content p{

    font-size:17px;

}

.hero-buttons{

    justify-content:center;

}

.btn-primary-hero,
.btn-secondary-hero{

    width:100%;

    justify-content:center;

}

}
.hero .swiper-pagination{
    position:absolute;
    bottom:25px !important;
    left:0;
    width:100%;
    z-index:20;
}

.hero .swiper-pagination-bullet{
    width:12px;
    height:12px;
    background:rgba(255,255,255,.5);
    opacity:1;
}

.hero .swiper-pagination-bullet-active{
    background:#C9A84C;
}

/* --- Sections --- */
/* .hero-section { padding: 10px 0;} */
.section {
  position: relative;
  z-index: 1;
  padding: 50px 0;
  overflow: visible;
}

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(13, 31, 20, 0.18), transparent 100%);
  z-index: 2;
}
/* .section { padding: 80px 0; } */
.dark-section { background: var(--forest-900); }

.section-hdr { text-align: center; margin-bottom: 60px; }
.section-hdr h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 16px; }
.section-sub { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--forest-muted); margin-top: 16px; margin-bottom: 16px}

.about.section,
#weekly.section{

    padding-top:60px;
    padding-bottom:80px;

}
.eyebrow-gold {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--menu-gold-muted);
  margin-bottom: 14px;
}

.gold-rule {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
  margin: 20px 0;
}
.gold-rule.centered { margin: 20px auto; }

/* --- About --- */
/* =================================
   PREMIUM ABOUT SECTION
================================= */

.about{

    background:
    linear-gradient(
        135deg,
        #f8f4ea,
        #ffffff
    );

    position:relative;

    overflow:hidden;

    padding:120px 0;

}



/* Decorative background */

.about::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

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


    background:

    radial-gradient(
        circle,
        rgba(201,168,76,.18),
        transparent 70%
    );


    animation:

    aboutGlow 10s infinite alternate;

}



.about::after{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    left:-200px;
    bottom:-150px;


    background:

    radial-gradient(
        circle,
        rgba(23,53,34,.08),
        transparent 70%
    );


    animation:

    aboutGlow 12s infinite alternate-reverse;

}



@keyframes aboutGlow{


    from{

        transform:translate(0,0);

    }


    to{

        transform:translate(60px,40px);

    }

}



/* =================
   IMAGE SECTION
================= */


.about-frames{

    position:relative;

    padding:30px 40px 50px 0;

}



.frame-main{

    border-radius:30px;

    overflow:hidden;

    position:relative;

    box-shadow:

    0 30px 70px rgba(0,0,0,.18);

}



.frame-placeholder{

    aspect-ratio:4/3;

    overflow:hidden;

}



.main-image{

    width:100%;

    height:100%;

    object-fit:cover;


    transition:1s;

}



.frame-main:hover .main-image{

    transform:scale(1.08);

}



/* Animated Gold Frame */


.frame-gold-border{


    position:absolute;


    inset:15px;


    border-radius:25px;


    border:1px solid rgba(201,168,76,.8);


    animation:

    borderMove 5s infinite linear;

}



@keyframes borderMove{


    0%{

        transform:translate(0,0);

    }


    50%{

        transform:translate(8px,8px);

    }


    100%{

        transform:translate(0,0);

    }


}




/* Small Image */


.frame-accent{


    position:absolute;

    bottom:0;

    right:0;


    width:32%;


    border-radius:25px;


    overflow:hidden;


    border:8px solid #f8f4ea;


    box-shadow:

    0 25px 50px rgba(0,0,0,.25);


    animation:

    imageFloat 5s ease-in-out infinite;

}



@keyframes imageFloat{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-15px);

    }

}



.accent-image{

    width:100%;

    height:100%;

    object-fit:cover;

}



/* EST Badge */


.frame-est{


    position:absolute;

    top:0;

    left:0;


    background:

    linear-gradient(
        135deg,
        #d9b54a,
        #c49a35
    );


    padding:25px;

    border-radius:20px;


    box-shadow:

    0 20px 40px rgba(201,168,76,.35);


    animation:

    badgeFloat 4s infinite ease-in-out;

}



@keyframes badgeFloat{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-8px);

    }

}



.est-text,
.est-num{

    color:#173522;

}




/* =================
   CONTENT
================= */


.about-copy{


    padding-left:40px;

}



.about-copy h5{


    color:#b28b32;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:14px;


}



.about-copy h2{


    color:#173522;


    font-size:

    clamp(34px,4vw,52px);


    line-height:1.15;

}



.gold-rule{


    width:80px;

    height:2px;

    background:#c9a84c;

    margin:25px 0;

}




.about-lead{


    font-family:var(--font-serif);

    font-size:25px;

    color:#173522;

    font-style:italic;

    line-height:1.5;

}



.about-body{


    color:#555;

    font-size:17px;

    line-height:1.8;

}



/* Quote */


.about-testimonial{


    margin-top:35px;


    padding:25px 30px;


    background:#173522;


    border-radius:20px;


    position:relative;


    box-shadow:

    0 20px 50px rgba(0,0,0,.15);

}



.about-testimonial blockquote{


    color:#fff;


    font-family:var(--font-serif);

    font-size:22px;

    font-style:italic;


}



.about-testimonial cite{


    color:#d9b54a;

}




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


@media(max-width:991px){


.about{

    padding:80px 0;

}



.about-frames{

    padding:20px 20px 60px 0;

}



.frame-accent{


    width:38%;


}



.frame-est{

    padding:18px;

}



.est-num{

    font-size:22px;

}



.about-copy{


    padding-left:0;

    margin-top:30px;

    text-align:center;

}



.gold-rule{

    margin:20px auto;

}



.about-lead{


    font-size:21px;

}



.about-testimonial{


    text-align:left;

}


}

/* Reduce About spacing */
.about{

    padding:80px 0 90px;

    margin:0;

    position:relative;

    z-index:2;

}



/* Remove large shadow overlap */
.about::after{

    bottom:-20px;

    height:40px;

    filter:blur(15px);

}



/* Weekly spacing */
#weekly{

    padding:90px 0;

    margin:0;

}



/* Reduce top shadow area */
#weekly::before{

    height:35px;

    opacity:.35;

}

/* =================================
   LIGHT SECTION SEPARATION
================================= */


/* About Section */
.about{

    background:#f8f4ea;

    position:relative;

    z-index:2;

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

}



/* Create curved shadow overlap */
.about::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-40px;

    width:100%;

    height:80px;


    background:

    linear-gradient(
        to bottom,
        rgba(0,0,0,.12),
        transparent
    );


    filter:blur(20px);

    z-index:-1;

}



/* Weekly Section */

#weekly{

    background:#ffffff;

    position:relative;

    z-index:1;

    padding-top:130px;


    box-shadow:

    inset 0 20px 40px rgba(0,0,0,.04);

}



/* Top separator shadow for weekly */

#weekly::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:70px;


    background:

    linear-gradient(
        to bottom,
        rgba(0,0,0,.12),
        transparent
    );


    opacity:.5;

}



/* Add premium floating effect to cards/images */

.about .frame-main,
.weekly-slider,
.weekly-content{

    box-shadow:

    0 25px 70px rgba(0,0,0,.12);

}

/* --- Weekly Special --- */

/* ==========================
   WEEKLY SPECIAL WHITE THEME
========================== */

#weekly{

    background:#ffffff;

    padding:120px 0;

    position:relative;

    overflow:hidden;

}


/* subtle background decoration */

#weekly::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

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

    background:
    radial-gradient(
        circle,
        rgba(201,168,76,.12),
        transparent 70%
    );

}


/* CONTENT */

.weekly-content{

    background:#fff;

    padding:55px;

    border-radius:24px;

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

    box-shadow:
    0 25px 70px rgba(0,0,0,.08);

}



.section-tag{

    display:inline-block;

    color:#b28b32;

    font-size:14px;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:20px;

}



#weekly h2{

    font-size:58px;

    font-weight:700;

    color:#173522;

    margin-bottom:25px;

}



#weekly p{

    font-size:18px;

    line-height:1.9;

    color:#666;

    max-width:520px;

}



/* Divider */

.weekly-divider{

    display:flex;

    align-items:center;

    margin:35px 0;

}


.weekly-divider span{

    flex:1;

    height:1px;

    background:#d9c28b;

}


.weekly-divider i{

    color:#c9a84c;

    margin:0 18px;

    font-size:12px;

}



/* Buttons */

.weekly-buttons{

    display:flex;

    gap:20px;

}



.weekly-buttons .btn{

    padding:15px 35px;

    border-radius:8px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}



.btn-primary{

    background:#173522;

    border:2px solid #173522;

    color:#fff;

}


.btn-primary:hover{

    background:#c9a84c;

    border-color:#c9a84c;

    color:#173522;

}



.btn-outline-dark{

    border:2px solid #173522;

    color:#173522;

}


.btn-outline-dark:hover{

    background:#173522;

    color:#fff;

}



/* ==================
   SWIPER
================== */


.weekly-slider{

    border-radius:25px;

    overflow:hidden;

    position:relative;

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

}



.weekly-slider .swiper-slide{

    height:520px;

}



.weekly-slider img{

    width:100%;

    height:100%;

    transition:.6s;

}



.weekly-slider .swiper-slide:hover img{

    transform:scale(1.05);

}



/* Pagination */

.weekly-pagination{

    position:absolute;

    bottom:25px!important;

    z-index:5;

    text-align:center;

}



.weekly-pagination .swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#fff;

    opacity:.7;

}



.weekly-pagination .swiper-pagination-bullet-active{

    width:35px;

    border-radius:20px;

    background:#c9a84c;

}





/* MOBILE */

@media(max-width:991px){


#weekly{

    padding:80px 0;

}



.weekly-content{

    padding:35px;

    text-align:center;

}



#weekly h2{

    font-size:40px;

}



#weekly p{

    font-size:16px;

}



.weekly-buttons{

    flex-direction:column;

}



.weekly-buttons .btn{

    width:100%;

}



.weekly-slider .swiper-slide{

    height:420px;

}


}

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

.menu{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 10%,rgba(201,161,74,.08),transparent 35%),
        radial-gradient(circle at 90% 80%,rgba(201,161,74,.06),transparent 35%),
        linear-gradient(180deg,#183022 0%,#102118 45%,#0b1711 100%);
}

/* Ambient golden light */
.menu::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(120deg,
            transparent 0%,
            rgba(201,161,74,.05) 20%,
            transparent 40%,
            rgba(255,255,255,.015) 50%,
            transparent 60%,
            rgba(201,161,74,.04) 80%,
            transparent 100%);
    mix-blend-mode:screen;
}

/* Moving luxury shine */
.menu::after{
    content:"";
    position:absolute;
    top:-120%;
    left:-45%;
    width:35%;
    height:350%;
    transform:rotate(20deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.04),
        rgba(255,235,180,.12),
        rgba(255,255,255,.04),
        transparent
    );

    animation:luxuryShine 14s linear infinite;
    pointer-events:none;
}

.menu .container:last-child{
    max-width:1000px;
    position:relative;
    z-index:2;
}

/*==================================================
                NAVIGATION
==================================================*/

.menu-nav{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:4px;

    margin-bottom:50px;
    padding:8px;

    border-radius:16px;

    background:rgba(15,30,21,.70);

    backdrop-filter:blur(18px);

    border:1px solid rgba(201,161,74,.18);

    box-shadow:
        0 15px 40px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.05),
        inset 0 -1px rgba(201,161,74,.05);
}

.mnav-btn{

    background:transparent;

    border:none;

    color:var(--menu-muted);

    font-family:var(--font-body);

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    padding:12px 22px;

    border-radius:12px;

    cursor:pointer;

    transition:.35s ease;
}

.mnav-btn:hover{

    color:var(--menu-gold);

    background:rgba(201,161,74,.08);
}

.mnav-btn.active{

    background:linear-gradient(
        135deg,
        #d7b35b,
        #f5dfa0
    );

    color:#102118;

    box-shadow:
        0 8px 25px rgba(201,161,74,.35);

    animation:floatBtn 2.5s ease-in-out infinite;
}

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

.menu-list{
    position:relative;
}

.menu-row{

    position:relative;

    display:flex;

    align-items:center;

    gap:16px;

    padding:22px 18px;

    margin-bottom:10px;

    border-radius:16px;

    border:1px solid transparent;

    transition:all .45s ease;

    overflow:hidden;
}

/* .menu-row.show{

    opacity:1;

    transform:translateY(0);
} */

.menu-row.hidden{

    display:none !important;
}

/* Hover glow */

.menu-row::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(201,161,74,.05),
        transparent
    );

    opacity:0;

    transition:.45s;
}

.menu-row::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        #c9a14a,
        #ffe7a4,
        #c9a14a,
        transparent
    );

    transition:.5s;
}

.menu-row:hover{

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

    border-color:rgba(201,161,74,.12);

    padding-left:28px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(201,161,74,.08);
}

.menu-row:hover::before{

    opacity:1;
}

.menu-row:hover::after{

    width:100%;
}

.menu-row.featured{

    border-left:3px solid var(--menu-gold);

    background:rgba(201,161,74,.03);
}

/*==================================================
                    CONTENT
==================================================*/

.mr-info{

    flex:1;
}

.mr-info h5{

    font-family:var(--font-display);

    font-size:20px;

    color:var(--menu-off-white);

    margin-bottom:5px;

    transition:.3s;
}

.menu-row:hover .mr-info h5{

    color:#ffe7aa;
}

.mr-info p{

    font-size:16px;

    line-height:1.7;

    color:var(--menu-muted-2);

    margin:0;
}

.mr-info small{

    display:block;

    margin-top:8px;

    color:var(--menu-gold-muted);

    font-size:14px;
}

/*==================================================
                    DOTS
==================================================*/

.mr-dots{

    flex:1;

    min-width:30px;

    max-width:120px;

    height:1px;

    background:repeating-linear-gradient(
        90deg,
        rgba(201,161,74,.45) 0,
        rgba(201,161,74,.45) 3px,
        transparent 3px,
        transparent 8px
    );
}

/*==================================================
                    PRICE
==================================================*/

.mr-price{

    position:relative;

    font-family:var(--font-display);

    font-size:21px;

    font-weight:600;

    color:#d6b15b;

    white-space:nowrap;

    animation:priceGlow 2.8s ease-in-out infinite;
}

.mr-price::before{

    content:"";

    position:absolute;

    width:70px;

    height:70px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    background:radial-gradient(
        circle,
        rgba(201,161,74,.20),
        transparent 70%
    );

    filter:blur(14px);

    z-index:-1;
}

/*==================================================
                TAG
==================================================*/

.tag-g{

    display:inline-block;

    margin-left:8px;

    padding:3px 8px;

    border-radius:20px;

    font-size:11px;

    font-weight:700;

    color:#f1d58d;

    border:1px solid rgba(201,161,74,.35);

    background:rgba(201,161,74,.08);
}

/*==================================================
            SECTION TITLES
==================================================*/

.menu-section-title{

    justify-content:center;

    padding:40px 0 15px;
}

.menu-section-title h5{

    color:#e7c978;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:15px;
}

/*==================================================
                ANIMATIONS
==================================================*/

@keyframes floatBtn{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

@keyframes luxuryShine{

    from{

        left:-60%;

    }

    to{

        left:160%;

    }

}

@keyframes priceGlow{

    0%,100%{

        text-shadow:none;

    }

    50%{

        text-shadow:
            0 0 10px rgba(201,161,74,.45),
            0 0 20px rgba(201,161,74,.20);

    }

}
/* --- BYO --- */
.byo-visual-section {
  position: relative;
  padding: 80px 20px;
  background: linear-gradient(
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.75)
  ),
  url('../../img/restaurant/byo-back.png') center/cover no-repeat;
  color: #ffffff;
}

.byo-visual-section h3 { color: var(--white); }

.byo-visual-content {
  max-width: 700px;
  margin: auto;
  text-align: center;
}

.byo-badge {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 2px;
  color: #c9a24d; /* gold accent */
  border: 1px solid #c9a24d;
  padding: 6px 14px;
  margin-bottom: 18px;
}

.byo-visual-content h2 {
  font-size: 34px;
  margin-bottom: 16px;
  font-weight: 700;
}

.byo-visual-content p {
  font-size: 18px;
  line-height: 1.7;
  color: #eaeaea;
}

/*--------------------------------------------------------------
# Book A Table Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Premium Luxury Book A Table Section
--------------------------------------------------------------*/

.premium-booking-section{
    position:relative;
    overflow:hidden;
    padding:100px 0;

    background:
        radial-gradient(circle at 15% 15%, rgba(201,161,74,.14), transparent 28%),
        radial-gradient(circle at 90% 20%, rgba(255,214,120,.08), transparent 30%),
        radial-gradient(circle at 85% 90%, rgba(45,106,79,.08), transparent 30%),
        linear-gradient(180deg,#fbfaf6 0%,#f7f4ed 100%);
}

/* Floating background lights */

/* Large floating golden glow */
.premium-booking-section::before{

    content:"";
    position:absolute;

    width:700px;
    height:700px;

    left:-250px;
    top:-220px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(201,161,74,.18) 0%,
            rgba(201,161,74,.08) 35%,
            transparent 70%);

    filter:blur(35px);

    animation:bookingGlow 10s ease-in-out infinite alternate;

    pointer-events:none;
}


/* Bottom green glow */
.premium-booking-section::after{

    content:"";
    position:absolute;

    width:650px;
    height:650px;

    right:-220px;
    bottom:-220px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(45,106,79,.14),
            transparent 72%);

    filter:blur(40px);

    animation:bookingGlow2 12s ease-in-out infinite alternate;

    pointer-events:none;
}

.premium-booking-section .container{

    position:relative;
    z-index:2;
}
.premium-booking-section .container::before{

    content:"";

    position:absolute;

    inset:-150px;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255,255,255,.18) 45%,
            rgba(201,161,74,.10) 50%,
            rgba(255,255,255,.18) 55%,
            transparent 100%
        );

    transform:translateX(-120%) rotate(15deg);

    animation:bookingShine 10s linear infinite;

    pointer-events:none;

    z-index:-1;
}
/*--------------------------------------------------------------
Left Content
--------------------------------------------------------------*/

.premium-booking-section .reservation-info{

    animation:fadeLeftBooking .9s ease forwards;
}

.premium-booking-section h3{

    font-size:2.4rem;
    font-weight:800;
    color:var(--forest-950);
    margin-bottom:20px;
}

.premium-booking-section .reservation-info>.text-content>p{

    font-size:1.05rem;
    line-height:1.8;
    color:#555;
    max-width:460px;
}

/*--------------------------------------------------------------
Contact Cards
--------------------------------------------------------------*/

.premium-booking-section .detail-item{

    position:relative;

    display:flex;
    align-items:flex-start;
    gap:18px;

    padding:18px;

    margin-bottom:18px;

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(201,161,74,.12);

    border-radius:16px;

    overflow:hidden;

    transition:.4s;

    box-shadow:
        0 15px 35px rgba(0,0,0,.06);
}

.premium-booking-section .detail-item::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    transform:skewX(-20deg);

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

    transition:.8s;
}

.premium-booking-section .detail-item:hover{

    transform:translateX(8px);

    box-shadow:
        0 22px 45px rgba(0,0,0,.10);

    border-color:rgba(201,161,74,.25);
}

.premium-booking-section .detail-item:hover::before{

    left:160%;
}

.premium-booking-section .detail-item i{

    width:50px;
    height:50px;

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

    border-radius:50%;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--forest-900),
        var(--forest-700)
    );

    box-shadow:0 10px 20px rgba(45,106,79,.25);

    font-size:20px;
}

.premium-booking-section .detail-item h5{

    margin-bottom:5px;

    color:var(--forest-950);
}

.premium-booking-section .detail-item p{

    margin:0;

    color:#666;
}

/*--------------------------------------------------------------
Booking Form
--------------------------------------------------------------*/

.premium-booking-section .reservation-form-wrapper{

    position:relative;

    overflow:hidden;

    padding:45px;

    border-radius:26px;

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(201,161,74,.18);

    animation:fadeRightBooking .9s ease forwards;

    transition:.45s;

    box-shadow:

        0 35px 80px rgba(0,0,0,.12),

        0 0 45px rgba(201,161,74,.10),

        inset 0 1px rgba(255,255,255,.7);
}

/* Animated border */

.premium-booking-section .reservation-form-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:26px;

    padding:1px;

    background:linear-gradient(
        135deg,
        transparent,
        rgba(201,161,74,.5),
        transparent,
        rgba(201,161,74,.4),
        transparent
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    animation:borderGlow 8s linear infinite;

    pointer-events:none;
}

.premium-booking-section .reservation-form-wrapper:hover{

    transform:translateY(-10px);

    box-shadow:

        0 45px 100px rgba(0,0,0,.16),

        0 0 60px rgba(201,161,74,.20);
}

/*--------------------------------------------------------------
Form Header
--------------------------------------------------------------*/

.premium-booking-section .form-header{

    text-align:center;

    margin-bottom:30px;
}

.premium-booking-section .form-header h3{

    font-size:2rem;
}

.premium-booking-section .form-header p{

    color:#777;
}

/*--------------------------------------------------------------
Inputs
--------------------------------------------------------------*/

.premium-booking-section input,
.premium-booking-section textarea,
.premium-booking-section select{

    background:#fff;

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

    border-radius:12px;

    padding:15px 18px;

    transition:.35s;

    box-shadow:0 8px 18px rgba(0,0,0,.03);
}

.premium-booking-section input:hover,
.premium-booking-section textarea:hover,
.premium-booking-section select:hover{

    border-color:#d7b35b;
}

.premium-booking-section input:focus,
.premium-booking-section textarea:focus,
.premium-booking-section select:focus{

    border-color:#c9a14a;

    transform:translateY(-2px);

    box-shadow:

        0 0 0 4px rgba(201,161,74,.12),

        0 15px 28px rgba(0,0,0,.08);
}

/*--------------------------------------------------------------
Book Button
--------------------------------------------------------------*/

.premium-booking-section .btn-ghost{

    position:relative;

    overflow:hidden;

    border:none;

    /* border-radius:50px; */

    padding:15px 48px;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    color:#fff;

    background:linear-gradient(
        135deg,
        #1d3d2a,
        #2d6a4f,
        #d2a94c
    );

    background-size:220%;

    transition:.45s;

    box-shadow:

        0 18px 35px rgba(45,106,79,.30),

        0 0 25px rgba(201,161,74,.18);
}

.premium-booking-section .btn-ghost::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

    transform:skewX(-25deg);

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

    transition:.8s;
}

.premium-booking-section .btn-ghost:hover{

    background-position:right;

    transform:translateY(-4px);

    box-shadow:

        0 28px 50px rgba(45,106,79,.40),

        0 0 35px rgba(201,161,74,.30);
}

.premium-booking-section .btn-ghost:hover::before{

    left:170%;
}

.premium-booking-section .btn-ghost:active{

    transform:scale(.98);
}

/*--------------------------------------------------------------
Animations
--------------------------------------------------------------*/

@keyframes bookingFloat{

    0%,100%{
        transform:translateY(0) scale(1);
    }

    50%{
        transform:translateY(25px) scale(1.08);
    }
}

@keyframes fadeLeftBooking{

    from{
        opacity:0;
        transform:translateX(-40px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes fadeRightBooking{

    from{
        opacity:0;
        transform:translateX(40px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes borderGlow{

    from{
        filter:hue-rotate(0deg);
    }

    to{
        filter:hue-rotate(30deg);
    }
}
@keyframes bookingGlow{

    from{
        transform:scale(1) translate(0,0);
    }

    to{
        transform:scale(1.15) translate(30px,20px);
    }
}

@keyframes bookingGlow2{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.1) translate(-25px,-20px);
    }
}

@keyframes bookingShine{

    from{
        transform:translateX(-150%) rotate(18deg);
    }

    to{
        transform:translateX(170%) rotate(18deg);
    }
}
@media (max-width:767px){

    .premium-booking-section::before{

        width:520px;
        height:520px;

        left:-180px;
        top:-160px;

        opacity:1;
    }

    .premium-booking-section::after{

        width:480px;
        height:480px;

        right:-180px;
        bottom:-180px;

        opacity:1;
    }

    .premium-booking-section .reservation-form-wrapper{

        box-shadow:
            0 25px 50px rgba(0,0,0,.18),
            0 0 35px rgba(201,161,74,.25),
            0 0 70px rgba(201,161,74,.12);
    }
}
/*--------------------------------------------------------------
Responsive
--------------------------------------------------------------*/

@media(max-width:991px){

    .premium-booking-section{

        padding:80px 0;
    }

    .premium-booking-section .reservation-form-wrapper{

        padding:35px 25px;
    }
}

@media(max-width:767px){

    .premium-booking-section{

        padding:60px 15px;
    }

    .premium-booking-section h3{

        font-size:1.9rem;
    }

    .premium-booking-section .reservation-form-wrapper{

        padding:25px 18px;

        border-radius:20px;
    }

    .premium-booking-section .detail-item{

        padding:15px;
    }

    .premium-booking-section .detail-item:hover{

        transform:none;
    }

    .premium-booking-section .btn-ghost{

        width:100%;
    }
}

/* --- Contact --- */
/* ==========================
   CONTACT DARK PREMIUM THEME
========================== */

.contact{

    background:
    linear-gradient(
        180deg,
        var(--forest-950),
        var(--forest-900)
    );

    padding-bottom:0;

    position:relative;

    overflow:hidden;

}


/* Animated background glow */

.contact::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

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

    background:
    radial-gradient(
        circle,
        rgba(201,168,76,.18),
        transparent 70%
    );

    animation:
    contactGlow 8s ease-in-out infinite alternate;

}



.contact::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    bottom:100px;
    left:-150px;

    background:
    radial-gradient(
        circle,
        rgba(45,106,79,.25),
        transparent 70%
    );

    animation:
    contactGlow 10s ease-in-out infinite alternate-reverse;

}



@keyframes contactGlow{

    from{

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

    }

    to{

        transform:translate(50px,40px) scale(1.2);

    }

}



/* Heading */

.contact h2{

    color:#fff;

}



.contact .section-sub{

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

}



/* Contact Cards */

.contact-tile{


    height:100%;

    padding:40px 30px;

    text-align:center;


    background:

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


    border:

    1px solid rgba(201,168,76,.25);


    border-radius:22px;


    backdrop-filter:blur(15px);


    color:#fff;


    position:relative;


    overflow:hidden;


    transition:.5s;


    animation:

    cardFloat 5s ease-in-out infinite;

}



.contact-tile:nth-child(2){

    animation-delay:1s;

}


.contact-tile:nth-child(3){

    animation-delay:2s;

}



@keyframes cardFloat{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-8px);

    }

}




/* Card shine effect */


.contact-tile::before{


    content:"";


    position:absolute;


    top:0;

    left:-100%;


    width:60%;

    height:100%;


    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.15),

        transparent

    );


    transition:.8s;


}



.contact-tile:hover::before{


    left:130%;


}



.contact-tile:hover{


    transform:translateY(-12px);


    border-color:var(--gold);


    box-shadow:

    0 25px 60px rgba(0,0,0,.5);


}




/* Icon */


.ct-icon{


    width:65px;

    height:65px;


    border:

    1px solid var(--gold);


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:0 auto 25px;


    font-size:23px;


    color:var(--gold);


    position:relative;


    animation:

    iconPulse 3s infinite;


}




@keyframes iconPulse{


    0%{

        box-shadow:

        0 0 0 0 rgba(201,168,76,.5);

    }


    70%{

        box-shadow:

        0 0 0 18px rgba(201,168,76,0);

    }


    100%{

        box-shadow:

        0 0 0 0 rgba(201,168,76,0);

    }


}



.contact-tile:hover .ct-icon{


    background:var(--gold);


    color:var(--forest-950);


    transform:

    rotateY(360deg);


    transition:.8s;


}



.contact-tile h4{


    font-family:var(--font-display);


    color:#fff;


    font-size:22px;


    margin-bottom:15px;


}

.contact-tile p{

    color:

    rgba(255,255,255,.7);


    line-height:1.8;


}

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


@media(max-width:991px){


.contact{

    padding-bottom:0;

}



.contact-tile{


    padding:35px 25px;


    animation:

    cardFloatMobile 6s ease-in-out infinite;


}



@keyframes cardFloatMobile{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-5px);

    }


}

}

/* Separate Map Section */
.location-map-section {
    background: #ffffff;
    padding: 0;
    position: relative;
    z-index: 1;
}

.location-map-section .map-wrapper {
    background: #ffffff;
    padding: 40px 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.08);
}

.location-map-section iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}


/* Mobile */
@media (max-width: 768px) {
    .location-map-section .map-wrapper {
        padding: 25px 15px;
    }

    .location-map-section iframe {
        height: 350px;
    }
}
/* ===================================
   PREMIUM CAREER SECTION
=================================== */


.career-section{


    background:

    linear-gradient(
        180deg,
        var(--forest-950),
        var(--forest-900)
    );


    padding:100px 0;


    position:relative;


    overflow:hidden;


}



/* Background glow */

.career-section::before{


    content:"";


    position:absolute;


    width:450px;
    height:450px;


    top:-200px;
    right:-150px;


    background:

    radial-gradient(
        circle,
        rgba(201,168,76,.2),
        transparent 70%
    );


    animation:

    careerGlow 8s infinite alternate;


}



@keyframes careerGlow{


    from{

        transform:translate(0,0);

    }


    to{

        transform:translate(-40px,40px);

    }


}




/* Form card */


.career-section .reservation-form-wrapper{


    background:

    rgba(255,255,255,.06);


    backdrop-filter:

    blur(18px);


    border:

    1px solid rgba(201,168,76,.3);


    border-radius:25px;


    padding:45px;


    box-shadow:


    0 30px 80px rgba(0,0,0,.45);


    animation:

    careerFloat 6s ease-in-out infinite;


}



@keyframes careerFloat{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-8px);

    }


}





/* Heading */


.career-section .form-header h3{


    color:#fff;


    font-size:38px;


}



.career-section .form-header p{


    color:

    rgba(255,255,255,.7);


}





/* Inputs */


.career-section input{


    background:

    rgba(255,255,255,.95)!important;


    border-radius:10px!important;


    padding:14px 18px!important;


}



.career-section label{


    color:#fff;


}



.career-section small{


    color:rgba(255,255,255,.6)!important;


}





/* Button */


.career-section .btn-ghost{


    border:

    2px solid var(--gold);


    color:var(--gold);


    padding:14px 40px;


    border-radius:30px;


    transition:.4s;


}



.career-section .btn-ghost:hover{


    background:var(--gold);


    color:var(--forest-950);


    transform:translateY(-3px);


}





/* Input focus */

.career-section input:focus{


    border-color:var(--gold)!important;


    box-shadow:

    0 0 0 4px rgba(201,168,76,.2)!important;


}





/* Mobile */


@media(max-width:768px){


.career-section{


    padding:70px 0;

}



.career-section .reservation-form-wrapper{


    padding:30px 20px;


}



.career-section .form-header h3{


    font-size:30px;

}


}

/* =================================
   PREMIUM LIGHT FOOTER
================================= */

.footer{

    background:

    linear-gradient(
        180deg,
        #ffffff,
        #f8f4ea
    );

    padding:70px 0 35px;

    position:relative;

    overflow:hidden;

    color:var(--forest-900);

}



/* Decorative gold glow */

.footer::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    top:-220px;
    right:-150px;


    background:

    radial-gradient(
        circle,
        rgba(201,168,76,.18),
        transparent 70%
    );


    animation:

    footerGlow 10s ease-in-out infinite alternate;

}



.footer::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    bottom:-150px;
    left:-100px;


    background:

    radial-gradient(
        circle,
        rgba(45,106,79,.08),
        transparent 70%
    );


}



@keyframes footerGlow{


    from{

        transform:translate(0,0);

    }


    to{

        transform:translate(40px,30px);

    }

}




.footer-inner{

    text-align:center;

    position:relative;

    z-index:2;

}





/* Logo */


.footer-inner img{

    max-height:120px;

    margin-bottom:25px;


    filter:

    drop-shadow(
        0 10px 20px rgba(0,0,0,.12)
    );


    animation:

    logoFloat 5s ease-in-out infinite;

}



@keyframes logoFloat{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-8px);

    }

}





/* Gold divider */

.footer-gold-line{

    width:100px;

    height:2px;


    background:

    linear-gradient(
        90deg,
        transparent,
        var(--gold-dark),
        transparent
    );


    margin:0 auto 35px;


    animation:

    lineGrow 3s infinite;

}



@keyframes lineGrow{


    0%,100%{

        width:90px;

    }


    50%{

        width:150px;

    }

}




/* Footer navigation */


.footer-links-row{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;


    gap:16px;


    margin-bottom:35px;

}



.footer-links-row a{


    color:var(--forest-900);


    font-size:14px;


    font-weight:700;


    letter-spacing:2px;


    text-transform:uppercase;


    position:relative;


    transition:.4s;

}



.footer-links-row a::after{


    content:"";


    position:absolute;


    bottom:-7px;


    left:50%;


    width:0;


    height:2px;


    background:var(--gold-dark);


    transform:translateX(-50%);


    transition:.4s;

}



.footer-links-row a:hover{


    color:var(--gold-dark);

}



.footer-links-row a:hover::after{


    width:100%;

}



.footer-links-row span{


    color:var(--gold-dark);

}




/* Contact row */


.footer-contact-row{


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:25px;


    margin-bottom:35px;

}



.footer-contact-row span{


    display:flex;

    align-items:center;

    gap:10px;


    color:var(--forest-muted);


    font-size:15px;


    transition:.4s;

}



.footer-contact-row i{


    color:var(--gold-dark);

    font-size:18px;

}



.footer-contact-row span:hover{


    color:var(--forest-900);


    transform:translateY(-3px);

}





/* Copyright */


.footer-copy{


    border-top:

    1px solid rgba(23,53,34,.15);


    padding-top:25px;


    color:var(--forest-muted);


    font-size:13px;


    letter-spacing:1px;

}





/* Mobile */

@media(max-width:768px){


.footer{

    padding:55px 20px 30px;

}



.footer-inner img{

    max-height:95px;

}



.footer-links-row{


    flex-direction:column;

    gap:14px;

}



.footer-links-row span{

    display:none;

}



.footer-contact-row{


    flex-direction:column;

    gap:18px;

}



.footer-contact-row span{

    justify-content:center;

    text-align:center;

}


}

/* --- Scroll Top --- */
.scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: var(--gold);
  color: var(--forest-900);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
  z-index: 996;
  box-shadow: var(--shadow-gold);
}
.scroll-top.active { opacity: 1; visibility: visible; }
.scroll-top:hover { background: var(--forest-900); color: var(--white); transform: translateY(-2px); }

/* --- Min height hero responsive --- */
.min-vh-100 { min-height: 100vh; }
@media (max-width: 991px) { .min-vh-100 { min-height: auto; padding: 120px 0 60px; } }

/* --- Container for d-flex used from Bootstrap concepts --- */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.d-none { display: none; }
.d-lg-block { display: none; }
@media (min-width: 992px) { .d-lg-block { display: block; } }
@media (min-width: 576px) { .d-sm-block { display: block !important; } }
.d-xl-none { display: none; }
@media (max-width: 1199px) { .d-xl-none { display: block !important; } }

/* Bootstrap grid subset */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding:0 20px;}
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row.gy-4 > * { padding-top: 24px; }
.row.gy-5 > * { padding-top: 32px; }
.row.align-items-center { align-items: center; }
[class*="col-"] { padding: 0 12px; }
.col-lg-4 { width: 100%; }
.col-lg-5 { width: 100%; }
.col-lg-6 { width: 100%; }
.col-lg-7 { width: 100%; }
@media (min-width: 992px) {
  .col-lg-4 { width: 33.3333%; }
  .col-lg-5 { width: 41.6666%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.3333%; }
}

/* Responsive */
@media (max-width: 991px) {
  .section { padding: 70px 0; }
  .about-frames { padding: 0; margin-bottom: 20px; }
  .frame-accent, .frame-est { display: none; }
  .byo-panel { gap: 24px; }
}
@media (max-width: 576px) {
  .menu-row { flex-wrap: wrap; }
  .mr-dots { display: none; }
  .footer-contact-row { flex-direction: column; gap: 12px; }
}

/* 🔥 REQUIRED: Popup overlay */
.xmas-overlay {
  position: fixed;
  inset: 0;
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999; /* make sure it's above everything */
}

/* Card wrapper */
.image-card {
  position: relative;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Carousel container */
.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
}

/* Track */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

/* 🔥 IMPORTANT: Prevent image cut */
.popup-image {
  width: 100%;
  height: 85vh;
  object-fit: contain;
  flex-shrink: 0;
  background: #000;
  border-radius: 16px;
}

/* Close button */
.xmas-close {
  position: absolute;
  top: -10px;
  right: -5px;
  font-size: 28px;
  color: #fff;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  padding: 4px 10px;
  cursor: pointer;
  z-index: 100000;
}

/* Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

/* Dots */
.carousel-dots {
  position: absolute;
  bottom: 12px;
  width: 100%;
  text-align: center;
}

.carousel-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  cursor: pointer;
}

.carousel-dots span.active {
  background: #fff;
}

/* Mobile */
@media (max-width: 576px) {
  .popup-image {
    height: 75vh;
  }

  .carousel-btn {
    display: none;
  }
}

/* Animations */
@keyframes popIn {
  from {
    transform: scale(0.85) translateY(40px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes glowPulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

.career-info h2{

    font-size:58px;

    font-weight:700;

    color:#173522;

    margin-bottom:25px;

}