/* fonts  */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@font-face {
    font-family:"Raleway-regular";
    src:url(../fonts/Raleway-Regular.ttf)
}
@font-face {
    font-family:"Raleway-medium";
    src:url(../fonts/Raleway-Medium.ttf)
}
@font-face {
    font-family:"Raleway-bold";
    src:url(../fonts/Raleway-Bold.ttf)
}
@font-face {
    font-family:"Raleway-extrabold";
    src:url(../fonts/Raleway-ExtraBold.ttf)
}
@font-face {
    font-family:"Raleway-semibold";
    src:url(../fonts/Raleway-SemiBold.ttf)
}
@font-face {
    font-family:"Raleway-black";
    src:url(../fonts/Raleway-Black.ttf)
}


/* colors  */

:root {
    --primary:#FF8C00;
    --secondary:#0077BE;
    --ternary:#6C6C6C;
    --danger:#FE4545;
    --pure:#FFFFFF;
    --light:#FFFACD;
    --heaven:#FFFFFF;
    --footer:#005f87;
}

/* Reset  */
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

body{
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    overflow-x: hidden;
}
.container {
    width:100%;
    padding:0 15px;
    margin:0 auto;
}

@media (min-width:576px){
    .container{
        max-width:540px;
    }
}
@media (min-width: 768px) {
    .container {
      max-width: 720px;
    }
  }
  
  @media (min-width: 992px) {
    .container {
      max-width: 960px;
    }
  }
  
  @media (min-width: 1200px) {
    .container {
      max-width: 1152px;
    }
  }

  .main-wrapper{
      position:relative;
      width:100%;
      height:100vh;
      min-height:100vh;
      min-height:100dvh;
      overflow:hidden;
  }

  .nav-background{
      width:100%;
      height:100%;
      background:var(--light);
      position: absolute;
      top:0;
      left:0;
      padding:0;
      z-index:1;
  }

  .nav-trigger{
      position: absolute;
      top:0;
      left:0;
      z-index:1;
      padding:15px;
      display:none;
  }

  .mobile-menu-toggle{
      width:56px;
      height:56px;
      border:none;
      border-radius:999px;
      background:rgba(255,255,255,0.96);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;
      cursor:pointer;
      box-shadow:0 14px 30px rgba(0,0,0,0.15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
  }

  .mobile-menu-toggle span{
      width:24px;
      height:2.5px;
      border-radius:999px;
      background:var(--secondary);
      transition:transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
  }

  body.mobile-nav-open .mobile-menu-toggle{
      background:var(--secondary);
  }

  body.mobile-nav-open .mobile-menu-toggle span{
      background:var(--pure);
  }

  body.mobile-nav-open .mobile-menu-toggle span:nth-child(1){
      transform:translateY(8px) rotate(45deg);
  }

  body.mobile-nav-open .mobile-menu-toggle span:nth-child(2){
      opacity:0;
  }

  body.mobile-nav-open .mobile-menu-toggle span:nth-child(3){
      transform:translateY(-8px) rotate(-45deg);
  }

  .nav-trigger svg{
      transform:rotate(90deg) scaleX(-1);
      -webkit-transform:rotate(90deg) scaleX(-1);
      -moz-transform:rotate(90deg) scaleX(-1);
      -ms-transform:rotate(90deg) scaleX(-1);
      -o-transform:rotate(90deg) scaleX(-1);
      width:40px;
      height:40px;
}
.site-content-wrapper{
    width:100%;
    height:100%;
    position:absolute;
    background:var(--heaven);
    z-index:2;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
}

.site-content-wrapper.scaled{
    transform:scale(0.9) translateX(90%);
    -webkit-transform:scale(0.9) translateX(90%);
    -moz-transform:scale(0.9) translateX(90%);
    -ms-transform:scale(0.9) translateX(90%);
    -o-transform:scale(0.9) translateX(90%);
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    box-shadow:0 3px 10px 0 var(--secondary);
}

.site-content{
    width:100%;
    height:100%;
    overflow-y: auto; /* Allow vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--light);
}

/* Custom Scrollbar Styling */
.site-content::-webkit-scrollbar {
    width: 10px;
}

.site-content::-webkit-scrollbar-track {
    background: var(--light);
}

.site-content::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 5px;
}

.site-content::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

  header.topbar{
      background:var(--secondary);
      color:var(--pure);
      font-family:"Raleway-semibold";
      padding:0.75rem 0;
  }
  header.topbar .auth > div a{
      color:var(--pure);
      text-decoration: none;
  }
  header.topbar .icons {
      display: flex;
      align-items: center;
  }
  header.topbar .icons a{
    margin-right:0.6rem;
  }
  header.topbar .icons a img {
      transition: transform 0.3s ease, filter 0.3s ease;
  }
  header.topbar .icons a:hover img {
      transform: scale(1.1);
      /* Filter to approximate #EEBF00 (Primary Yellow) */
      filter: brightness(0) invert(85%) sepia(33%) saturate(6288%) hue-rotate(2deg) brightness(106%) contrast(103%) !important;
  }
  /* Ensure TikTok icon gets the same hover effect */
  header.topbar .icons a[href*="tiktok.com"]:hover img {
      transform: scale(1.1);
      filter: brightness(0) invert(85%) sepia(33%) saturate(6288%) hue-rotate(2deg) brightness(106%) contrast(103%) !important;
  }
  header.topbar .auth .divider{
      padding:0 1rem;
  }
  header.topbar .auth > div img{
      margin-right:0.35rem;
  }
  .flex{
    display:flex;
  }
  .justify-between{
    justify-content: space-between;
  }
  .items-center{
      align-items: center;
  }
  nav .top{
      padding:1.5rem 0;
  }
  nav .top .contact h5,  nav .top .time h5{
      font-family:"Raleway-black";
      margin-bottom:0.25rem;
  }
  nav .top .contact h6, nav .top .time h6{
    font-family:"Raleway-medium";
    letter-spacing: 0.055rem;
    font-size:0.75rem;
    color:var(--ternary);
}
nav .top .contact img, nav .top .time img{
    margin-right:1rem;
}

.justify-center{
    justify-content:center;
}
nav .navbar a{
    text-decoration:none;
    color:var(--secondary);
    font-family:"Raleway-semibold";
    font-size:1rem;
    padding:1rem 1.5rem;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
}
nav .navbar a.active{
    background:var(--primary);
    color:var(--pure);
}
nav .navbar a:hover{
    background:var(--primary);
    color:var(--pure); 
}

.navbar a.nav-highlight {
    background: var(--danger);
    color: var(--pure) !important;
    border-radius: 25px;
}

.navbar a.nav-highlight:hover {
    background: #fe6b6b;
    box-shadow: 0 0 10px var(--danger);
}

/* Dropdown Menu */
.navbar .dropdown {
    position: relative;
    display: inline-block;
}

.navbar .dropdown .dropdown-content {
    display: block;
    position: absolute;
    background-color: var(--heaven);
    min-width: 240px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 10;
    border-radius: 4px;
    margin-top: 10px;
    border: 1px solid var(--light);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, margin-top 0.3s ease;
}

/* Links inside the dropdown */
.navbar .dropdown .dropdown-content a {
    color: var(--secondary);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 0.9rem;
    font-family: "Raleway-medium";
    background: transparent; /* Override parent hover */
}

/* Change color of dropdown links on hover */
.navbar .dropdown .dropdown-content a:hover {
    background-color: var(--light);
    color: var(--primary);
}

/* Show the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    margin-top: 0;
}

/* Sticky Navbar */
.navbar.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    animation: slideDown 0.35s ease-out;
    opacity: 0.95;
}
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.magic-shadow{
    position: relative;
    background:var(--heaven);
}
.magic-shadow:after{
    content:'';
    display:block;
    width:100%;
    height:69px;
    background-image:url(../icons/shadow.svg);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom:-22px;
    z-index:-1;
    
}
.magic-shadow-sm{
    position: relative;
    background:var(--heaven);
}
.magic-shadow-sm:after{
    content:'';
    display:block;
    width:100%;
    height:69px;
    background-image:url(../icons/shadow-sm.svg);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
    z-index:-1;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-transform:translateX(-50%);
}
header.hero{
    height:600px;
    position: relative;
    overflow:hidden;
}
header.hero .container{
    position: relative;
}
header.hero .welcome{
    margin-bottom:0.25rem;
}
header.hero .welcome span{
    font-family:"Raleway-bold";
    color:var(--secondary);
    margin-right:0.75rem;

}
header.hero h1{
    font-family:"Raleway-extrabold";
    color:var(--secondary);
    font-size: 2.5rem;
    margin-bottom:0.75rem;
}
header.hero h1 span{
    color:var(--primary);
}
header.hero p{
    font-family: "Raleway-medium";
    width:50%;
    line-height:1.5;
    margin-bottom:1rem;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(1.1);
}

.hero-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
}

.mute-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
}

.mute-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.btn{
    padding:0.75rem 0.75rem;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    line-height:0.8;
    font-size:1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    border:1px solid transparent;
}

.btn-primary {
    background:var(--primary);
    color:var(--heaven);
}
.btn-primary:hover{
    background:var(--heaven);
    color:var(--primary); 
    border:1px solid var(--primary);
}
.btn-secondary{
    background:var(--secondary);
    color:var(--heaven); 
}
.btn-secondary:hover{
    background:var(--heaven);
    color:var(--secondary); 
    border:1px solid var(--secondary);
}

header.hero button:first-child{
    margin-right:0.50rem;
}

header.hero .hero-image{
    position:absolute;
    top:-40px;
    right:40px;
}

section{
    padding:4rem 0;
}
section.top-products{
    background:var(--light);
}

.section-heading{
    font-family:"Raleway-bold";
    text-align:center;
    Position:relative;
    margin-bottom:6rem;
}
.section-heading:after{
    content:'';
    display:block;
    width: 100%;
    height:30px;
    background-image:url(../icons/hr.svg);
    background-repeat: no-repeat;
    background-position: center;
    position:absolute;
    bottom:-40px;
}
section.top-products .food-slider .food-card{
    background:var(--heaven);
    padding:1.5rem 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
section.top-products .food-slider .food-card .product-image{
    height:220px;
    margin:0 1rem 1rem;
    border-radius:12px;
    overflow:hidden;
    background:var(--light);
}
section.top-products .food-slider .food-card .product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    padding-bottom:0;
}
hr{
    border:1px solid var(--light);
    opacity: 0.8;
    margin:1rem 0;
}
section.top-products .food-slider .food-card h2{
    font-family:"Raleway-bold";
    font-size:1.3rem;
    margin-bottom:0.25rem;
}
.text-center{
    text-align: center;
}
section.top-products .food-slider .food-card .stars{
    margin-bottom:0.5rem;
}
section.top-products .food-slider .food-card .stars img{
    margin-right:0.25rem;
}
section.top-products .food-slider .food-card .price{
    font-family:"Raleway-medium";
    color:var(--danger);
    margin-bottom: 1rem;
}
section.top-products .food-slider .food-card button{
    font-family:"Raleway-medium";
    color:var(--secondary);
    background:var(--heaven);
    border:2px solid var(--primary);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    display:flex;
    align-items: center;
    width:50%;
    font-size:1rem;
    cursor: pointer;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
}
section.top-products .food-slider .food-card button:hover{
    background:var(--primary);
    color:var(--heaven);
}
.food-slider .food-card button img{
    background:var(--primary);
    padding:0.50rem;
    height:32px;
    margin-right:1.2rem;
}

.slick-slide{
    margin:0 27px;
}
.slick-list{
    margin:0 -27px;
}
.top-products .slider-btn{
    width: 30px;
    height:30px;
    border: none;
    background:var(--primary);
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    cursor:pointer;
    outline:none;
}

.prev-btn{
    position:absolute;
    top:46%;
    left:-3rem;
    z-index: 1;
}
.next-btn{
    position:absolute;
    top:46%;
    right:-3rem;
    z-index: 1;
}
.top-products .slider{
    position: relative;
}
.top-products .btn-wrapper{
    margin-top:2rem;
}
.slick-track{
    padding:1rem 0;
}
section.about-meal .about-meal-wrap{
    gap:2rem;
    align-items:stretch;
}
section.about-meal .about-media-frame{
    position:relative;
    width:100%;
    min-height:100%;
    aspect-ratio:4 / 3;
    border-radius:12px;
    overflow:hidden;
    background:var(--light);
    box-shadow:0 12px 30px rgba(0,0,0,0.08);
}
section.about-meal .about-media-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.flex-1{
    flex:1;
    min-width:0;
}
section.about-meal h2{
    font-family: "Raleway-bold";
    font-size:1.4rem;
    color:var(--secondary);
    margin-bottom:2rem;
    line-height:1.3;
}
section.about-meal p{
    line-height: 1.7;
    margin-bottom:4rem;
}

section.our-services{
    background:var(--light);
    position:relative;
    z-index:0;
}
section.our-services .card-wrapper{
    margin-right:0;
    margin-top:3rem;
    gap:2rem;
    flex-wrap:wrap;
}
section.our-services .service-card{
    background:var(--heaven);
    text-align: center;
    padding:0;
    margin-right:0;
    position: relative;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    display:flex;
    flex-direction:column;
    flex:1 1 300px;
    min-width:280px;
}
section.our-services .service-card .service-card-media{
    aspect-ratio:16 / 10;
    overflow:hidden;
    border-radius:4px 4px 0 0;
    background:linear-gradient(135deg, rgba(0,119,190,0.15), rgba(255,140,0,0.18));
}
section.our-services .service-card .service-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
section.our-services .service-card .service-card-content{
    padding:1.75rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
    flex:1;
}
section.our-services .service-card h2{
    font-family: "Raleway-bold";
    font-size: 1.3rem;
    margin-bottom:0;
}
section.our-services .service-card p{
    line-height: 1.6;
    margin-bottom:0;
    flex:1;
}
.text-primary{
    color:var(--primary);
}

section.big-deal {
    background: linear-gradient(
        rgba(35,43,56,0.9),
        rgba(35,43,56,0.9)
    ), url(../images/food-table.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
section.big-deal .timer{
    display:flex;
    align-items: center;
    justify-content: center;
    margin-right:-2rem;
    margin-bottom:2rem;
}
section.big-deal .timer div{
    margin-right:2rem;
    background: var(--primary);
    width:150px;
    height:150px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
section.big-deal .timer div span:first-child{
    font-family: "Raleway-semibold";
    font-size:2.5rem;
    color:var(--heaven);
    margin-bottom:0.05rem;
}
section.big-deal .timer div span:last-child{
    font-family: "Raleway-medium";
    color:var(--heaven);
}
.text-pure{
    color:var(--pure);
}

section.latest-news{
    background:var(--light);
    position:relative;
    z-index:0;
}
section.latest-news .article-wrapper{
    display:flex;
    margin-right:-2rem;

}
.latest-news .article-wrapper .card {
    margin-right:2rem;
    background:var(--heaven);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.latest-news .article-wrapper .card img{
    width:100%;
}
.latest-news .article-wrapper .card .card-content{
    padding:2rem;
}
.latest-news .article-wrapper .card .card-content .post-meta{
    margin-bottom: 1rem;
}
.latest-news .article-wrapper .card .card-content .post-meta .comment-count{
    margin-left:1rem;
}
.latest-news .article-wrapper .card .card-content h2{
    font-family: "Raleway-bold";
    font-size: 1.3rem;
    margin-bottom:1rem;
}
.latest-news .article-wrapper .card .card-content p{
    line-height: 1.6;
}
.latest-news .btn-wrapper{
    margin-top:2rem;
}
section.subscribe{
    background:var(--primary);
}
section.subscribe .container div:first-child{
    flex:1;
    min-width:0;
    display:flex;
}
section.subscribe .container > div:first-child img{
    width:100%;
    height:100%;
    min-height:320px;
    object-fit:cover;
    display:block;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
}
section.subscribe .container div:last-child{
    flex:1;
}

.page-content img[data-managed-image-slot],
.service-details .service-row img[data-managed-image-slot]{
    width:100%;
    max-width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    display:block;
    border-radius:12px;
    background:var(--light);
    box-shadow:0 10px 24px rgba(0,0,0,0.1);
}

img.managed-image-broken{
    opacity:0;
}

.shop-page .product-card .product-image{
    padding:0;
    overflow:hidden;
}

.shop-page .product-card .product-image img{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:cover;
    display:block;
}

#featured-event-section #feat-img,
#chef-special-section #chef-special-img,
#cocktail-section #cocktail-img,
.managed-promo-image{
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:cover;
    display:block;
    border-radius:12px;
}

section.subscribe h1{
    font-family:"Raleway-bold";
    font-size: 1.5rem;
    margin-bottom:1.5rem;
}
section.subscribe p{
    font-family:"Raleway-medium"; 
    font-size: 1rem;
    margin-bottom:1.5rem;
    line-height: 1.5;
}
section.subscribe .input-wrap{
    background:var(--heaven);
    display:flex;
    padding:0.3rem;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
}
section.subscribe .input-wrap input{
    width:100%;
    border:none;
    padding: 0 1rem;
    font-size:1rem;
}
section.subscribe .input-wrap input:focus{
    outline:none;
}
section.subscribe .input-wrap button{
    padding:0.8rem 2rem;
    border:none;
    background:var(--primary);
    color:var(--pure);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    font-size:1rem;
    cursor:pointer;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    outline:none;
}
section.subscribe .input-wrap button:hover{
    background:var(--secondary);
}
section.contact-us{
    padding-top:0;
    padding-bottom: 0;
}
section.contact-us .contact-info-wrapper {
    padding:4rem 0;
    flex:1;
}
section.contact-us .map{
    flex:1;
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
}
section.contact-us .contact-info{
    display:flex;
    justify-content: center;
}
section.contact-us .contact-info > div > div {
    display:flex;
    align-items:center;
    margin-bottom:2rem;
}
section.contact-us .contact-info > div > div img{
    margin-right: 1rem;
}
section.contact-us .contact-info > div > div > div{
    display:flex;
    flex-direction: column;
}
section.contact-us .contact-info > div > div > div span:first-child{
    font-family: "Raleway-bold";
    margin-bottom:0.25rem;
}
footer{
    background:var(--footer);
    padding:4rem 0;
}
footer .container{
    display:flex;
    color:var(--pure);
}

footer .box{
    flex:1;
    margin-right:2rem;
    text-align:center;
}

footer .instagram-api img{
    width:100%;
    height:100%;
    object-fit: cover;
}
footer .instagram-api .post-wrap{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
footer .instagram-api .post-wrap > div{
    width: calc(1/3*100% - (1 - 1/3)*10px);
    margin-bottom:10px;
}
footer .box ul{
    list-style-type: none;
    text-align: left;
    display: inline-block;
}
footer .box ul li a{
    color:var(--pure);
    text-decoration: none;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    display: flex;
    align-items: center;
}
footer .box ul li a:hover{
    color:var(--primary);
}
footer .box h3{
    border-bottom:1px solid var(--primary);
    padding-bottom:1rem;
    margin-bottom:1rem;
}

footer .box p{
    line-height: 1.6;
    margin-bottom:1rem;
}
footer .box ul li{
    margin-bottom:1rem;
}
footer .box .social-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
footer .box .social-icons a {
    position: relative;
}
footer .box .social-icons a img {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease, filter 0.3s ease;
}
footer .box .social-icons a:hover img {
    transform: scale(1.2);
    filter: brightness(0) invert(85%) sepia(33%) saturate(6288%) hue-rotate(2deg) brightness(106%) contrast(103%);
}

/* Tooltip Styles */
footer .box .social-icons a::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--secondary);
    color: var(--heaven);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: "Raleway-semibold";
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

footer .box .social-icons a:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

footer.copyright{
    padding:1rem 0;
    background: var(--secondary);
    color:var(--pure);
    text-align: center;
    font-size: 0.75rem;
}
footer.copyright a{
    color:var(--primary);
    text-decoration: none;
}

/* Footer Fade-in Animation */
footer:not(.copyright) {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    visibility: hidden;
}
footer:not(.copyright).visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.nav-background .mobile-logo{
    padding:1rem;
}
.nav-background .mobile-nav{
    padding:1rem;
}
.nav-background .mobile-nav ul{
    list-style-type: none;
}
.nav-background .mobile-nav ul li{
    margin-bottom:1rem;
}
.nav-background .mobile-nav ul li a{
    text-decoration: none;
    color:var(--secondary);
    font-family: "Raleway-medium";
}
.nav-background .mobile-nav ul li a:hover{
    color:var(--primary);
}
.nav-background .contact, .nav-background .time{
    padding:1rem;
    padding-left:0;
}
.nav-background .contact img, .nav-background .time img{
    margin-right:1rem;
}
.nav-background .contact h5,.nav-background .time h5{
    font-family:"Raleway-bold";
    margin-bottom:0.25rem;
    font-size:1rem;
}
.nav-background .contact h6, .nav-background .contact h6{
    font-size: 0.75rem;
}
.nav-background .cart{
    margin-bottom:2rem;
}
.nav-background .cart a{
    color:var(--secondary);
    text-decoration: none;
    font-family: "Raleway-bold";
}
.nav-background .cart img{
    margin-right:0.75rem;
    width:20px;
    height:20px;
}
.text-logo {
    font-family: "Raleway-extrabold";
    font-size: 1.8rem;
    color: var(--secondary);
}

.text-logo span {
    color: var(--primary);
}



@media (max-width:992px){
    .main-wrapper{
        height:auto;
    }

    .nav-trigger{
        display:block;
        position:fixed;
        top:1rem;
        right:1rem;
        left:auto;
        padding:0;
        z-index:40;
    }
    header.topbar, nav{
        display:none;
    }

    header.hero {
        margin-top:0;
        height:auto;
        min-height:500px;
    }
    header.hero h1{
        font-size:2rem;
        line-height:1.15;
    }
    header.hero p{
        width:100%;
        max-width:32rem;
        font-size:1rem;
    }
    header.hero .container{
        padding-top:5rem;
    }
    header.hero .hero-image{
        right:-160px;
        top:100px;
    }

    .nav-background{
        position:fixed;
        inset:0;
        width:100%;
        height:auto;
        padding:0;
        background:rgba(8, 25, 42, 0.34);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity 0.3s ease, visibility 0.3s ease;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index:30;
    }

    .nav-background .mobile-logo{
        position:absolute;
        top:0;
        left:0;
        width:min(84vw, 360px);
        padding:1.4rem 1.25rem 0.75rem;
        background:linear-gradient(180deg, #fff6dc 0%, #ffffff 100%);
        border-right:1px solid rgba(0, 119, 190, 0.1);
        transform:translateX(-110%);
        transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        z-index:2;
    }

    .nav-background .mobile-nav{
        position:absolute;
        top:0;
        left:0;
        width:min(84vw, 360px);
        height:100%;
        padding:5.8rem 1.25rem 1.5rem;
        background:linear-gradient(180deg, #fff6dc 0%, #ffffff 100%);
        border-right:1px solid rgba(0, 119, 190, 0.1);
        overflow-y:auto;
        transform:translateX(-110%);
        transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow:0 24px 50px rgba(0,0,0,0.18);
    }

    body.mobile-nav-open .nav-background{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    body.mobile-nav-open .nav-background .mobile-logo,
    body.mobile-nav-open .nav-background .mobile-nav{
        transform:translateX(0);
    }

    .site-content-wrapper{
        min-height:100vh;
        min-height:100dvh;
        transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.35s ease, box-shadow 0.35s ease;
    }

    body.mobile-nav-open .site-content-wrapper{
        transform:translateX(min(74vw, 308px)) scale(0.98);
        border-radius:24px;
        overflow:hidden;
        box-shadow:0 20px 60px rgba(0,0,0,0.2);
    }

    body.mobile-nav-open .site-content{
        overflow:hidden;
    }

    .nav-background .cart{
        margin-bottom:1.25rem;
        padding:1rem;
        border-radius:18px;
        background:rgba(0, 119, 190, 0.08);
        border:1px solid rgba(0, 119, 190, 0.08);
    }

    .nav-background .mobile-nav ul{
        display:flex;
        flex-direction:column;
        gap:0.55rem;
    }

    .nav-background .mobile-nav ul li{
        margin-bottom:0;
    }

    .nav-background .mobile-nav ul li a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0.95rem 1rem;
        border-radius:16px;
        background:rgba(255,255,255,0.74);
        border:1px solid rgba(0, 119, 190, 0.08);
        box-shadow:0 8px 18px rgba(0,0,0,0.05);
        font-family:"Raleway-semibold";
        font-size:1rem;
        min-height:56px;
    }

    .nav-background .mobile-nav ul li a:hover,
    .nav-background .mobile-nav ul li a.is-current{
        color:var(--pure);
        background:var(--secondary);
        box-shadow:0 12px 24px rgba(0,119,190,0.22);
    }

    .nav-background .contact,
    .nav-background .time{
        margin-top:1rem;
        padding:1rem;
        background:rgba(255,255,255,0.72);
        border:1px solid rgba(0, 119, 190, 0.08);
        border-radius:18px;
    }

    .top-products .slider-btn{
        display:none!important;
    }
    .latest-news .article-wrapper{
        flex-direction:column;
    }
    .latest-news .article-wrapper .card{
        margin-right:0;
        margin-bottom:4rem;
    }

    footer .instagram-api .post-wrap > div{
        width:calc(1/2*100% - (1 - 1/3)*10px);
    }
}

@media (max-width:768px){
    .about-meal .about-meal-wrap{
        flex-direction: column;
    }
    .about-meal .about-media-frame{
        aspect-ratio:16 / 11;
        min-height:260px;
    }
    section.subscribe .container > div:first-child img{
        min-height:240px;
    }

    section.our-services .card-wrapper{
        flex-direction:column;
    }
    section.our-services .card-wrapper .service-card{
        margin-bottom:6rem;
    }
    footer .container{
        flex-direction: column;
    }
    footer .box{
        text-align: left;
        margin-right:0;
        margin-bottom:3rem;
    }
    footer .box:nth-child(3) h3{
        text-align:left;
    }
    footer .box:nth-child(3) > div{
        display:block;
    }
}

@media( max-width:576px){
    .nav-trigger{
        top:0.75rem;
        right:0.75rem;
    }

    body.mobile-nav-open .site-content-wrapper{
        transform:translateX(min(80vw, 292px)) scale(0.98);
    }

    .nav-background .mobile-logo,
    .nav-background .mobile-nav{
        width:min(88vw, 320px);
    }

    header.hero .hero-image{
        right:-235px;
        top:150px;
    }
    header.hero .container{
        padding-left:1rem;
        padding-top:5rem;
    }
    header.hero h1{
        font-size:1.75rem;
    }
    header.hero p{
        font-size:0.95rem;
    }
    header.hero{
        margin-top:0;
    }
    section.big-deal .timer > div{
        margin-right:0.50rem;
    }
    section.big-deal .timer{
        margin-right:-0.5rem;
    }

    section.subscribe .container{
        flex-direction: column;
        padding:0.50rem;
    }
   
}

/* Dark Mode Styles */
body.dark-mode {
    --primary: #FF8C00;   /* Keep Orange */
    --secondary: #4FC3F7; /* Light Blue for text visibility */
    --ternary: #ffffff;   /* White for text */
    --danger: #FF5252;    /* Brighter Red */
    --pure: #FFFFFF;      /* White for text on dark backgrounds */
    --light: #121212;
    --heaven: #1E1E1E;    /* Dark Gray for cards */
    --footer: #000000;    /* Black Footer */
    color: var(--ternary);
}

/* Dark Mode Overrides */
body.dark-mode header.topbar,
body.dark-mode footer.copyright,
body.dark-mode .booking-header,
body.dark-mode .activity-header {
    background: #001f3f; /* Dark Blue background for headers */
}

body.dark-mode .nav-background {
    background: var(--light);
}

body.dark-mode .mobile-nav ul li a {
    color: var(--pure); /* Brighter white for better contrast */
}

body.dark-mode .icons img,
body.dark-mode .contact img,
body.dark-mode .time img {
    filter: brightness(0) invert(1); /* Make icons white */
}

/* Keep social icons original colors */
body.dark-mode .social-btn img {
    filter: none;
}

body.dark-mode section.subscribe h1,
body.dark-mode section.subscribe p {
    color: #121212; /* Dark text on Orange background */
}

.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 0 0 10px;
    display: flex;
    align-items: center;
}

/* Dark Mode Booking Form Readability */
body.dark-mode .form-control,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #2a2a2a;
    color: var(--pure);
    border-color: #444;
}

body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #888;
}

body.dark-mode select.form-control,
body.dark-mode select {
    /* SVG for a white dropdown arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}


#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: none;
    background: var(--primary);
    color: var(--heaven);
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
    font-size: 1.2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: background 0.3s;
}

/* Smooth Theme Transition */
body, .site-content-wrapper, .nav-background, header, footer, 
.card, .btn, .form-control, .modal-content, .booking-container,
.service-card, .food-card, .job-card, .package-card, .archive-item,
.gallery-filters, .filter-btn, .gallery-item, .dropdown-content,
.input-wrap, .input-wrap input, .navbar, .navbar a, .review-card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#back-to-top:hover {
    background: var(--secondary);
}

/* Cart Notification Popup */
#cart-notification {
    position: fixed;
    top: 100px;
    right: 20px;
    background: var(--heaven);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    z-index: 10000;
    width: 320px;
    border-left: 5px solid var(--primary);
    transform: translateX(150%);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: block;
}
#cart-notification.show {
    transform: translateX(0);
}
#cart-notification h4 {
    font-family: "Raleway-bold";
    color: var(--secondary);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}
#cart-notification .cart-actions {
    display: flex;
    gap: 1rem;
}
#cart-notification .btn-checkout,
#cart-notification .btn-continue {
    flex: 1;
    padding: 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Raleway-bold";
    font-size: 0.85rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
}
#cart-notification .btn-checkout { background: var(--primary); color: var(--heaven); border: none; }
#cart-notification .btn-checkout:hover { background: var(--secondary); }
#cart-notification .btn-continue { background: transparent; color: var(--secondary); border: 1px solid var(--secondary); }
#cart-notification .btn-continue:hover { background: var(--light); }

/* Cart Icon Animation */
@keyframes cartBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.cart-animate {
    animation: cartBounce 0.5s ease;
}

/* Modern Rates/Pricing Cards */
.rates-section {
    padding: 4rem 0;
    background: var(--light);
}
.rates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.rate-card {
    background: var(--heaven);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rate-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--primary);
}
.rate-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 6px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.rate-card h3 { font-family: 'Raleway-bold'; font-size: 1.4rem; color: var(--secondary); margin-bottom: 1rem; }
.rate-card .price { font-size: 2.5rem; font-family: 'Raleway-extrabold'; color: var(--primary); margin-bottom: 0.5rem; }
.rate-card .price small { font-size: 1rem; color: var(--ternary); font-weight: normal; }
.rate-card p { color: var(--ternary); margin-bottom: 2rem; line-height: 1.6; flex-grow: 1; }
.rate-card .btn { width: 100%; border-radius: 50px; padding: 1rem; font-size: 1rem; font-family: 'Raleway-bold'; }
.rate-card .badge { position: absolute; top: 15px; right: 15px; background: var(--danger); color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; }

    section.subscribe .container{
        flex-direction: column;
        padding:0.50rem;
    }
   
}

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
    z-index: 10001;
}

.lightbox-close:hover {
    color: var(--primary);
}

.lightbox-caption {
    color: #fff;
    margin-top: 1rem;
    font-family: "Raleway-medium";
    text-align: center;
    font-size: 1.2rem;
}

/* Cart Notification Popup */
#cart-notification {
    position: fixed;
    top: 100px;
    right: 20px;
    background: var(--heaven);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    z-index: 10000;
    width: 320px;
    border-left: 5px solid var(--primary);
    transform: translateX(150%);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: block;
}
#cart-notification.show {
    transform: translateX(0);
}
#cart-notification h4 {
    font-family: "Raleway-bold";
    color: var(--secondary);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}
#cart-notification p {
    font-family: "Raleway-medium";
    color: var(--ternary);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}
#cart-notification .cart-actions {
    display: flex;
    gap: 1rem;
}
#cart-notification .btn-checkout,
#cart-notification .btn-continue {
    flex: 1;
    padding: 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Raleway-bold";
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
}
#cart-notification .btn-checkout { background: var(--primary); color: var(--heaven); border: none; }
#cart-notification .btn-checkout:hover { background: var(--secondary); }
#cart-notification .btn-continue { background: transparent; color: var(--secondary); border: 1px solid var(--secondary); }
#cart-notification .btn-continue:hover { background: var(--light); }

/* Google Review Badge */
.google-badge {
    width: 26px;
    height: 26px;
    background-color: #4285F4; /* Google Blue */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.google-badge img {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    filter: none !important;
}

/* Fun Moments & Leaderboard Styles */
.leaderboard-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.leaderboard-card {
    background: var(--heaven);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 300px;
    position: relative;
    border: 2px solid transparent;
}
.rank-1 { border-color: #FFD700; transform: scale(1.1); z-index: 2; }
.rank-2 { border-color: #C0C0C0; }
.rank-3 { border-color: #CD7F32; }
.rank-badge {
    position: absolute; top: 10px; left: 10px;
    background: var(--primary); color: white;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; z-index: 10;
}

/* Comment Modal */
.comment-modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); }
.comment-content { background-color: #fefefe; margin: 5% auto; padding: 0; border-radius: 8px; width: 90%; max-width: 800px; display: flex; overflow: hidden; height: 500px; }
.comment-media { flex: 1.5; background: #000; display: flex; align-items: center; justify-content: center; }
.comment-media img, .comment-media video { max-width: 100%; max-height: 100%; }
.comment-sidebar { flex: 1; display: flex; flex-direction: column; padding: 1rem; background: #fff; }
.comment-list { flex-grow: 1; overflow-y: auto; margin-bottom: 1rem; border-bottom: 1px solid #eee; }
.single-comment { margin-bottom: 0.8rem; font-size: 0.9rem; }
.single-comment strong { color: var(--secondary); }
.comment-form { display: flex; gap: 0.5rem; }
@media(max-width: 768px) {
    .comment-content { flex-direction: column; height: 80vh; margin: 10% auto; }
}