/*

TemplateMo 558 Klassy Cafe

https://templatemo.com/tm-558-klassy-cafe

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #fb5849;
  color: #fff;
}

::-moz-selection {
  background: #fb5849;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-white-button a {
  font-size: 13px;
  color: #fb5849;
  background-color: #fff;
  padding: 12px 25px;
  display: inline-block;
  border-radius: 3px;
  font-weight: 600;
  transition: all .3s;
}

.main-white-button a:hover {
  opacity: 0.9;
}

.main-text-button a {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  transition: all .3s;
}

.main-text-button a:hover {
  opacity: 0.9;
}

.section-heading h6 {
  position: relative;
  font-size: 15px;
  color: #fb5849;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-left: 40px;
}

.section-heading h6:before {
  width: 30px;
  height: 1px;
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  background-color: #fb5849;
}

.section-heading h2 {
  line-height: 40px;
  margin-top: 20px;
  margin-bottom: 25px; 
  font-size: 30px;
  font-weight: 900;
  color: #2a2a2a;
}


/* 
---------------------------------------------
header (redesigned for better alignment and aesthetics)
--------------------------------------------- 
*/
.header-area {
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.header-area.header-sticky {
  position: fixed;
  top: 0;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Ensures logo on left, hamburger on right */
  padding: 0 15px;
  position: relative;
}

.header-area .main-nav .logo {
  display: flex;
  align-items: center;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  margin-right: auto; /* Pushes the logo to the left */
}

.header-area .main-nav .logo img {
  max-height: 60px;
  width: auto;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  background-color: #8b1c1c; /* Matches the red background in the image */
}

.header-area .main-nav .logo .logo-text {
  font-size: 24px;
  font-weight: 700;
  color: #2a2a2a;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
}

.header-area .main-nav .logo .logo-text .separator {
  margin: 0 5px;
  font-size: 20px;
  color: #2a2a2a;
}

body.dark-mode .header-area .main-nav .logo .logo-text,
body.dark-mode .header-area .main-nav .logo .logo-text .separator {
  color: #fff;
}

.header-area.header-sticky .main-nav .logo img {
  max-height: 50px;
}

.header-area.header-sticky .main-nav .logo .logo-text {
  font-size: 20px;
}

.header-area .main-nav .nav {
  display: flex;
  align-items: center;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .nav li {
  padding: 0 20px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--link-color);
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: var(--link-hover);
}

/* Mode toggle styling */
.header-area .main-nav .nav li.mode-toggle {
  padding: 0 20px;
}

.mode-icon {
  font-size: 18px;
  color: var(--accent-color);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.mode-icon:hover {
  opacity: 1;
}

.mode-icon.active {
  opacity: 1;
  color: #fff;
}

body.dark-mode .mode-icon.active {
  color: #fb5849;
}

/* Dark mode adjustments */
body.dark-mode .header-area {
  background-color: #1a1a1a;
}

body.dark-mode .header-area.header-sticky {
  background-color: #1a1a1a;
}

/* Menu trigger (Hamburger icon) */
.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: none;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  z-index: 99;
  background: none;
  text-decoration: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  background-color: var(--link-color);
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  left: 0;
  transition: all 0.3s ease;
}

body.dark-mode .header-area .main-nav .menu-trigger span,
body.dark-mode .header-area .main-nav .menu-trigger span:before,
body.dark-mode .header-area .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span {
  top: 50%;
  transform: translateY(-50%);
}

.header-area .main-nav .menu-trigger span:before {
  content: '';
  top: -8px;
}

.header-area .main-nav .menu-trigger span:after {
  content: '';
  top: 8px;
}

/* Ensure no text appears in the menu-trigger */
.header-area .main-nav .menu-trigger,
.header-area .main-nav .menu-trigger span {
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.header-area .main-nav .menu-trigger::before,
.header-area .main-nav .menu-trigger::after,
.header-area .main-nav .menu-trigger span::before,
.header-area .main-nav .menu-trigger span::after {
  content: '' !important;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.header-area .main-nav .menu-trigger.active span {
  background-color: transparent;
}

.header-area .main-nav .menu-trigger W.active span:before {
  transform: translateY(8px) rotate(45deg);
}

.header-area .main-nav .menu-trigger.active span:after {
  transform: translateY(-8px) rotate(-45deg);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .header-area .main-nav {
    padding: 0 15px;
  }
  .header-area .main-nav .nav li {
    padding: 0 15px;
  }
  .header-area .main-nav .nav li a {
    font-size: 13px;
  }
  .header-area .main-nav .logo .logo-text {
    font-size: 22px;
  }
  .header-area .main-nav .logo .logo-text .separator {
    font-size: 18px;
  }
}

@media (max-width: 991px) {
  .header-area .main-nav .menu-trigger {
    display: block;
  }
  .header-area .main-nav .nav {
    flex-direction: column;
    background-color: #f8f8f8;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    padding: 20px;
    display: none;
  }
  body.dark-mode .header-area .main-nav .nav {
    background-color: #1a1a1a;
  }
  .header-area .main-nav .nav.active {
    display: flex;
  }
  .header-area .main-nav .nav li {
    padding: 10px 0;
    text-align: center;
  }
  .header-area .main-nav .nav li a {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
  }
  .header-area .main-nav .nav li.mode-toggle {
    padding: 10px 0;
  }
  /* Keep logo and text on the left, hamburger on the right */
  .header-area .main-nav {
    justify-content: flex-start; /* Align logo to the left */
    padding: 0 60px 0 15px; /* Extra padding on the right for the hamburger icon */
    flex-wrap: nowrap; /* Ensure single row */
  }
  .header-area .main-nav .logo {
    justify-content: flex-start; /* Align logo content to the left */
    text-align: left;
    margin-right: auto; /* Push logo to the left */
  }
  .header-area .main-nav .logo img {
    max-height: 50px;
  }
  .header-area .main-nav .logo .logo-text {
    font-size: 20px;
  }
  .header-area .main-nav .logo .logo-text .separator {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .header-area {
    height: 80px;
  }
  .header-area .main-nav {
    padding: 0 50px 0 15px;
  }
  .header-area .main-nav .logo img {
    max-height: 45px;
    margin-right: 10px;
  }
  .header-area .main-nav .logo .logo-text {
    font-size: 18px;
  }
  .header-area .main-nav .logo .logo-text .separator {
    font-size: 14px;
    margin: 0 3px;
  }
  .mode-icon {
    font-size: 16px;
  }
  .header-area .main-nav .menu-trigger {
    right: 15px;
    width: 25px;
    height: 25px;
  }
  .header-area .main-nav .menu-trigger span,
  .header-area .main-nav .menu-trigger span:before,
  .header-area .main-nav .menu-trigger span:after {
    height: 2px;
  }
  .header-area .main-nav .menu-trigger span:before {
    top: -6px;
  }
  .header-area .main-nav .menu-trigger span:after {
    top: 6px;
  }
  .header-area .main-nav .menu-trigger.active span:before {
    transform: translateY(6px) rotate(45deg);
  }
  .header-area .main-nav .menu-trigger.active span:after {
    transform: translateY(-6px) rotate(-45deg);
  }
}

@media (max-width: 576px) {
  .header-area .main-nav {
    padding: 0 45px 0 10px;
  }
  .header-area .main-nav .logo img {
    max-height: 40px;
    margin-right: 8px;
  }
  .header-area .main-nav .logo .logo-text {
    font-size: 16px;
  }
  .header-area .main-nav .logo .logo-text .separator {
    font-size: 12px;
    margin: 0 2px;
  }
  .header-area .main-nav .menu-trigger {
    right: 10px;
    width: 22px;
    height: 22px;
  }
  .header-area .main-nav .menu-trigger span:before {
    top: -5px;
  }
  .header-area .main-nav .menu-trigger span:after {
    top: 5px;
  }
  .header-area .main-nav .menu-trigger.active span:before {
    transform: translateY(5px) rotate(45deg);
  }
  .header-area .main-nav .menu-trigger.active span:after {
    transform: translateY(-5px) rotate(-45deg);
  }
}

@media (max-width: 400px) {
  .header-area .main-nav {
    padding: 0 40px 0 5px;
  }
  .header-area .main-nav .logo img {
    max-height: 35px;
    margin-right: 5px;
  }
  .header-area .main-nav .logo .logo-text {
    font-size: 14px;
  }
  .header-area .main-nav .logo .logo-text .separator {
    font-size: 10px;
    margin: 0 1px;
  }
  .header-area .main-nav .menu-trigger {
    right: 5px;
    width: 20px;
    height: 20px;
  }
}

/* Root variables (unchanged) */
:root {
  --card-bg: #fff;
  --card-text: #2a2a2a;
  --button-bg: #2a2a2a;
  --button-text: #fff;
  --button-hover: #1e1e1e;
  --accent-color: #fb5849;
  --link-color: #2a2a2a;
  --link-hover: #fb5849;
}

body.dark-mode {
  --card-bg: #333;
  --card-text: #fff;
  --button-bg: #fb5849;
  --button-text: #fff;
  --button-hover: #e04336;
  --accent-color: #fff;
  --link-color: #fff;
  --link-hover: #fb5849;
}

/* 
---------------------------------------------
banner (updated for full-width transparent overlay)
--------------------------------------------- 
*/
#top {
  padding-top: 100px;
  position: relative;
}

#top .row {
  min-height: 700px;
}

#top .col-lg-12 {
  padding: 0;
  position: relative;
}

#top .banner-background {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Prevents overflow issues */
}

#top .banner-background .img-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#top .banner-background .img-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Keeps aspect ratio, crops excess */
  display: block;
}

#top .banner-background .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(251, 88, 73, 0.5); /* #fb5849 with 50% transparency */
  z-index: 1; /* Sits above the image */
}

#top .banner-background .inner-content {
  text-align: center;
  padding: 20px;
  position: relative;
  z-index: 2; /* Sits above the overlay */
}

#top .banner-background h4 {
  font-family: 'Dancing Script', cursive;
  color: #fff;
  font-size: 54px;
  font-weight: 700;
}

#top .banner-background h6 {
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 3px;
  margin-top: 5px;
}

#top .banner-background .main-white-button {
  margin-top: 25px;
  margin-bottom: 10px;
}

#top .banner-background .main-white-button a {
  display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  #top {
    padding-top: 100px;
  }
  #top .row {
    min-height: auto; /* Allow flexibility */
  }
  #top .banner-background {
    min-height: 300px; /* Consistent minimum height */
  }
  #top .banner-background .img-fill {
    height: 100%; /* Ensure it matches the parent */
  }
  #top .banner-background h4 {
    font-size: 36px;
  }
  #top .banner-background h6 {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  #top .banner-background {
    min-height: 200px; /* Consistent minimum height */
  }
  #top .banner-background .img-fill {
    height: 100%; /* Ensure it matches the parent */
  }
  #top .banner-background h4 {
    font-size: 28px;
  }
  #top .banner-background h6 {
    font-size: 10px;
  }
}


/*
---------------------------------------------
about (updated to center video vertically with text)
---------------------------------------------
*/
#about {
  margin-top: 20px;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#about .section-heading h2 {
  padding-right: 120px;
}

#about img {
  width: 100%;
  overflow: hidden;
}

#about .left-text-content {
  padding-right: 15px; /* Matches Bootstrap’s gutter */
}

#about .left-text-content p {
  margin-bottom: 25px;
}

#about .right-content {
  padding-left: 15px; /* Matches Bootstrap’s gutter */
  display: flex; /* Enables vertical centering */
  align-items: center; /* Centers video vertically */
  min-height: 100%; /* Ensures it matches the left column’s height */
}

#about .right-content .thumb {
  width: 100%; /* Fills the container */
}

#about .right-content .thumb video {
  width: 100%; /* Fills the column width */
  height: auto; /* Maintains aspect ratio */
  max-height: 400px; /* Caps height to align with text, adjust as needed */
  border-radius: 10px; /* Rounds corners */
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  display: block;
  object-fit: cover; /* Ensures video fills space */
}

/* Responsive adjustments */
@media (max-width: 992px) {
  #about .left-text-content {
    padding-right: 0; /* Remove padding when stacked */
  }
  #about .right-content {
    padding-left: 0;
    margin-top: 30px; /* Adds spacing when columns stack */
    display: block; /* Reverts to block for stacking */
  }
  #about .right-content .thumb video {
    max-height: 300px; /* Smaller on tablets */
  }
}

@media (max-width: 767px) {
  #about .section-heading h2 {
    padding-right: 0; /* Remove padding for mobile */
  }
  #about .right-content .thumb video {
    max-height: 250px; /* Smaller on mobile */
  }
}


/*
---------------------------------------------
menu
---------------------------------------------
*/

#menu {
  margin-top: 120px;
  background-color: #fffafa;
  padding: 120px 0px;
}

#menu .section-heading {
  margin-bottom: 80px;
}

.card {
  margin: 0 auto;
  max-width: 100%;
  min-height: 400px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.card1 {
  background-image: url(../images/menu-item-01.jpg);
}
.card2 {
  background-image: url(../images/menu-item-02.jpg);
}
.card3 {
  background-image: url(../images/menu-item-03.jpg);
}
.card4 {
  background-image: url(../images/menu-item-04.jpg);
}
.card5 {
  background-image: url(../images/menu-item-05.jpg);
}

.info {
  position: relative;
  width: 100%;
  background-color: #fb5849;
  border: 1px solid #fb5849;
  transform: translateY(100%)
  translateY(120px)
  translateZ(0);
  transition: transform 0.5s ease-out;
}

.card:hover .info,
.card:hover .info:before {
  transform: translateY(200px) translateZ(0);
}

.title {
  margin: 0;
  padding: 30px 30px 20px 30px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.description {
  padding: 0px 30px;
  color: #fff;
}

#menu .price h6 {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: #fb5849;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  border-radius: 3px;
  text-align: center;
  line-height: 70px;
}

#menu .card .main-text-button {
  margin-left: 30px;
  margin-top: 20px;
  padding-bottom: 30px;
}

#menu .owl-menu-item {
  position: relative;
}

#menu .owl-nav {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: -80px;
  transform: translateY(5px);
}

#menu .owl-dots {
  display: none;
}
    
#menu .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
}

#menu .owl-nav .owl-prev span,
#menu .owl-nav .owl-next span {
  opacity: 0;
}

#menu .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #fb5849;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
}

#menu .owl-nav .owl-prev {
  opacity: 0.75;
  transition: all .5s;
}

#menu .owl-nav .owl-prev:hover {
  opacity: 1;
}

#menu .owl-nav .owl-next {
  opacity: 0.75;
  transition: all .5s;
}

#menu .owl-nav .owl-next:hover {
  opacity: 1;
}

#menu .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
}

#menu .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #fb5849;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
}


/*
---------------------------------------------
chefs
---------------------------------------------
*/



/*
---------------------------------------------
reservation
---------------------------------------------
*/
#reservation .section-heading {
  margin-bottom: 30px;
}

#reservation .section-heading h6 {
  color: #fff;
}

#reservation .section-heading h2 {
  color: #fff;
  font-weight: 700;
}

#reservation .section-heading h6:before {
  background-color: #fff;
}

#reservation p {
  color: #fff;
  margin-bottom: 65px;
}

#reservation {
  margin-top: 120px;
  padding: 120px 0px;
  background-image: url(../images/reservation-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-color 0.3s ease; /* Smooth transition */
}

#reservation .left-text-content {
  margin-bottom: 40px; /* Increased spacing for better separation */
}

#reservation .phone,
#reservation .message {
  background-color: #fff;
  border-radius: 10px; /* Softer rounded corners */
  text-align: center;
  padding: 25px; /* More padding for breathing room */
  margin-bottom: 25px; /* Increased spacing between cards */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Softer shadow for depth */
  transition: background-color 0.3s ease; /* Smooth transition */
}

#reservation .phone i,
#reservation .message i {
  width: 60px; /* Slightly larger icon for better visibility */
  height: 60px;
  display: inline-block;
  text-align: center;
  line-height: 60px;
  color: #fff;
  background-color: #fb5849;
  border-radius: 50%;
  font-size: 24px;
  margin-top: -30px; /* Position icon above card */
  margin-left: auto;
  margin-right: auto;
  transition: background-color 0.3s ease; /* Smooth transition */
}

#reservation .phone h4,
#reservation .message h4 {
  font-size: 20px; /* Larger for better readability */
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 10px;
  color: #2a2a2a;
}

#reservation .phone span a,
#reservation .message span a {
  font-size: 16px; /* Larger for better readability */
  color: #2a2a2a;
  transition: all .3s;
}

#reservation .phone span a:hover,
#reservation .message span a:hover {
  color: #fb5849;
}

#contact {
  padding: 40px 25px; /* More padding for better spacing */
  background-color: #fff;
  border-radius: 10px; /* Softer rounded corners */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Softer shadow for depth */
  transition: background-color 0.3s ease; /* Smooth transition */
}

#contact h4 {
  text-align: center;
  font-weight: 700;
  font-size: 28px; /* Larger for better hierarchy */
  color: #2a2a2a;
  margin-bottom: 25px;
}

/* Styles for the input labels (Date: and Time:) */
.contact-form .input-label {
  display: block;
  color: #ff0000; /* Red color */
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

/* Styles for the note after the time input */
.contact-form .input-note {
  display: block;
  color: #ff0000; /* Red color */
  font-size: 14px;
  font-style: italic;
  margin-top: 5px;
}

/* Dark mode overrides */
body.dark-mode #reservation .phone,
body.dark-mode #reservation .message,
body.dark-mode #contact {
  background-color: #fb5849; /* Red background in dark mode */
}

body.dark-mode #reservation .phone h4,
body.dark-mode #reservation .message h4,
body.dark-mode #contact h4 {
  color: #fff; /* White text for contrast */
}

body.dark-mode #reservation .phone span a,
body.dark-mode #reservation .message span a {
  color: #fff; /* White text for contrast */
}

body.dark-mode #reservation .phone span a:hover,
body.dark-mode #reservation .message span a:hover {
  color: #e04336; /* Slightly darker red on hover for contrast */
}

body.dark-mode #reservation .phone i,
body.dark-mode #reservation .message i {
  background-color: #fff; /* White background for icons */
  color: #fb5849; /* Red icon color for contrast */
}

/* Form inputs in dark mode */
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea,
body.dark-mode .contact-form select {
  background-color: #fff; /* White background for inputs */
  color: #2a2a2a; /* Dark text for readability */
  border-color: #ddd; /* Light border */
}

body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form textarea:focus,
body.dark-mode .contact-form select:focus {
  border-color: #e04336; /* Slightly darker red on focus */
}

body.dark-mode .contact-form button {
  background-color: #2a2a2a; /* Dark button background */
  color: #fff; /* White text */
}

body.dark-mode .contact-form button:hover {
  background-color: #1e1e1e; /* Darker on hover */
}

/* Form styles */
.contact-form input,
.contact-form textarea,
.contact-form select {
  color: #2a2a2a;
  font-size: 16px; /* Larger for better readability */
  border: 1px solid #ddd;
  background-color: #fff;
  width: 100%;
  height: 50px; /* Taller inputs for better usability */
  border-radius: 5px;
  outline: none;
  padding: 12px 15px; /* More padding for comfort */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 20px; /* Increased spacing between inputs */
  box-shadow: none;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #fb5849;
  box-shadow: 0 0 5px rgba(251, 88, 73, 0.3); /* Subtle focus glow */
}

.contact-form button {
  margin-top: 0;
  font-size: 16px; /* Larger for better readability */
  color: #fff;
  background-color: #fb5849;
  padding: 15px 30px; /* Larger button for better tap target */
  width: 100%;
  box-shadow: none;
  border: none;
  display: inline-block;
  border-radius: 5px;
  font-weight: 600;
  transition: all .3s;
}

.contact-form button:hover {
  background-color: #e04336; /* Slightly darker red on hover */
}

.contact-form textarea {
  height: 160px; /* Taller textarea for better usability */
  resize: none;
  padding: 15px;
}

.contact-form ::-webkit-input-placeholder { /* Edge */
  color: #888; /* Lighter placeholder for better contrast */
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #888;
}

.contact-form ::placeholder {
  color: #888;
}


/* Responsive adjustments */
@media (max-width: 1200px) {
  #reservation {
    margin-top: 100px;
    padding: 100px 20px;
  }

  #reservation .section-heading h2 {
    font-size: 32px;
  }

  #contact {
    padding: 35px 20px;
  }
}

@media (max-width: 991px) {
  #reservation .left-text-content,
  #reservation .contact-form {
    margin-bottom: 40px;
  }

  #reservation .row {
    flex-direction: column;
  }

  #reservation .col-lg-6 {
    width: 100%;
  }

  #contact {
    margin-left: 0;
    padding: 30px 20px;
  }

  #reservation .section-heading h2 {
    font-size: 28px;
  }

  #reservation p {
    margin-bottom: 40px;
  }

  #reservation .phone i,
  #reservation .message i {
    width: 55px;
    height: 55px;
    line-height: 55px;
    font-size: 22px;
  }

  #reservation .phone h4,
  #reservation .message h4 {
    font-size: 18px;
  }

  #contact h4 {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  #reservation {
    margin-top: 80px;
    padding: 80px 15px;
  }

  #reservation .section-heading h2 {
    font-size: 24px;
  }

  #reservation p {
    margin-bottom: 30px;
    font-size: 16px;
  }

  #reservation .phone,
  #reservation .message {
    padding: 20px;
    margin-bottom: 20px;
  }

  #reservation .phone i,
  #reservation .message i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    margin-top: -25px;
  }

  #reservation .phone h4,
  #reservation .message h4 {
    font-size: 16px;
  }

  #reservation .phone span a,
  #reservation .message span a {
    font-size: 14px;
  }

  #contact {
    padding: 25px 15px;
  }

  #contact h4 {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    height: 45px;
    font-size: 14px;
    padding: 10px 12px;
    margin-bottom: 15px;
  }

  .contact-form textarea {
    height: 140px;
  }

  .contact-form button {
    font-size: 14px;
    padding: 12px 25px;
  }

  
  .contact-form .input-label {
    font-size: 14px;
  }

  .contact-form .input-note {
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  #reservation {
    margin-top: 60px;
    padding: 60px 10px;
  }

  #reservation .section-heading h2 {
    font-size: 20px;
  }

  #reservation p {
    font-size: 14px;
    margin-bottom: 25px;
  }

  #reservation .phone,
  #reservation .message {
    padding: 15px;
    margin-bottom: 15px;
  }

  #reservation .phone i,
  #reservation .message i {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    margin-top: -22px;
  }

  #reservation .phone h4,
  #reservation .message h4 {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 8px;
  }

  #reservation .phone span a,
  #reservation .message span a {
    font-size: 13px;
  }

  #contact {
    padding: 20px 10px;
  }

  #contact h4 {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    height: 40px;
    font-size: 13px;
    padding: 8px 10px;
    margin-bottom: 12px;
  }

  .contact-form textarea {
    height: 120px;
  }

  .contact-form button {
    font-size: 13px;
    padding: 10px 20px;
  }

  .contact-form .input-label {
    font-size: 13px;
  }

  .contact-form .input-note {
    font-size: 11px;
  }
}

.n {
  color: red;
  font-size: 1rem;
  text-align: center;
  margin: 1rem auto;
  max-width: 90%;
}

@media (min-width: 600px) {
  .n {
    font-size: 1.2rem;
    max-width: 80%;
  }
}

@media (min-width: 1024px) {
  .n {
    font-size: 1.5rem;
    max-width: 60%;
  }
}

/*
---------------------------------------------
offers
---------------------------------------------
*/

#offers {
  padding-top: 120px;
}

#offers .section-heading {
  margin-bottom: 70px;
}

#offers .section-heading h6 {
  padding-left: 0px;
}

#offers .section-heading h6:before {
  display: none;
}

#offers .heading-tabs {
  text-align: center;
}

#offers .heading-tabs .main-dark-button {
  text-align: right;
}

#offers #tabs ul {
  padding: 0;
}
#offers #tabs ul li {
  display: inline-block;
  margin: 0px 15px;
}
#offers #tabs ul li:last-child {
  margin-right: 0px;
}
#offers #tabs ul li:first-child {
  margin-left: 0px;
}
#offers #tabs ul li a {
  text-transform: capitalize;
  width: 100%;
  display: inline-block;
  font-size: 15px;
  color: #2a2a2a;
  font-weight: 600;
  transition: all 0.3s;
  text-align: center;
}

#offers #tabs ul li a img {
  display: block;
  margin: 0 auto 15px auto;
}
#offers #tabs ul .ui-tabs-active a {
  color: #fb5849;
  position: relative;
}
#offers #tabs ul .ui-tabs-active span {
  color: #1e1e1e;
}
#offers .tabs-content {
  margin-top: 60px;
  text-align: left;
  display: inline-block;
  transition: all 0.3s;
}
#offers .tabs-content .tab-item {
  position: relative;
  margin-bottom: 60px;
}
#offers .tabs-content img {
  float: left;
  width: 100px;
  max-width: 100px;
  margin-right: 20px;
  border-radius: 5px;
}
#offers .tabs-content h4 {
  padding-top: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 10px;
  margin-right: 100px;
}

#offers .tabs-content p {
  margin-right: 100px;
}

#offers .tabs-content .left-list {
  margin-right: 15px;
}

#offers .tabs-content .right-list {
  margin-left: 15px;
}

#offers .tabs-content .price h6 {
  position: absolute;
  top: 15px;
  right: 0;
  width: 70px;
  height: 70px;
  background-color: #fb5849;
  display: inline-block;
  text-align: center;
  line-height: 70px;
  border-radius: 3px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}


/* ---------------------------------------------
   Footer
   --------------------------------------------- */
footer {
  margin-top: 60px;
  padding: 50px 0px;
  background-color: #fb5849;
  text-align: center;
}

footer .logo {
  display: flex;
  align-items: center;
  justify-content: center; /* Centers logo and text horizontally */
  flex-wrap: wrap; /* Prevents breaking on smaller screens */
}

footer .logo img {
  max-width: 100px; /* Smaller than header for footer context */
  height: auto;
  border-radius: 50%; /* Makes the logo round */
  object-fit: cover; /* Ensures the image fits the circle */
  margin-right: 10px; /* Space between logo and text */
  transition: all 0.3s ease;
}

footer .logo .logo-text {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
}

footer .left-text-content p,
footer .right-text-content p {
  color: #fff;
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
}

footer .right-text-content ul {
  text-align: center;
}

footer .right-text-content ul li {
  display: inline-block;
  margin: 0 10px;
}

footer .right-text-content ul li a {
  width: 44px;
  height: 44px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  font-size: 20px;
  background-color: #fff;
  border-radius: 50%;
  color: #fb5849;
  transition: all 0.5s ease;
}

footer .right-text-content ul li a:hover {
  color: #2a2a2a;
}


/*
---------------------------------------------
stats section (updated with confirmed background.jpg)
---------------------------------------------
*/
#stats {
  padding: 80px 0; /* Spacing above and below */
  background: url('assets/images/background.jpg') no-repeat center center/cover; /* Background image */
  background-size: cover; /* Ensures full coverage */
  background-position: center; /* Centers the image */
  position: relative;
  color: #fff; /* White text for contrast */
  min-height: 400px; /* Ensures section has height to show background */
}

#stats .stats-content {
  display: flex;
  justify-content: space-between; /* Text on left, bowl on right */
  align-items: center; /* Vertically centers content */
  max-width: 1200px; /* Matches container width */
  margin: 0 auto; /* Centers content */
}

#stats .stats-text {
  flex: 1; /* Takes available space on left */
  padding-left: 30px; /* Space from left edge */
  text-align: left;
}

#stats .stat-item {
  margin-bottom: 20px;
}

#stats .stat-item .count {
  font-size: 48px;
  font-weight: 700;
  color: #fb5849; /* Theme color */
  display: inline-block;
  min-width: 80px; /* Prevents layout shift */
}

#stats .stat-item p {
  font-size: 18px;
  margin: 5px 0 0;
  text-transform: uppercase;
}

#stats .stats-text h3 {
  font-size: 24px;
  font-weight: 600;
  margin-top: 30px;
  line-height: 1.4;
}

#stats .spinning-bowl {
  width: 150px; /* Fixed size for round shape */
  height: 150px; /* Equal height for circle */
  border-radius: 50%; /* Makes it round */
  object-fit: cover; /* Ensures image fits circle */
  animation: spin 4s linear infinite; /* Spinning animation */
  margin-right: 30px; /* Space from right edge */
}

/* Spinning animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */
@media (max-width: 992px) {
  #stats .stats-content {
    flex-direction: column; /* Stack text and bowl */
    text-align: center;
  }
  #stats .stats-text {
    padding-left: 0;
    margin-bottom: 30px; /* Space between text and bowl */
  }
  #stats .spinning-bowl {
    margin-right: 0; /* Center on stack */
  }
}

@media (max-width: 767px) {
  #stats .spinning-bowl {
    width: 100px;
    height: 100px;
  }
  #stats .stat-item .count {
    font-size: 36px;
  }
  #stats .stat-item p {
    font-size: 16px;
  }
  #stats .stats-text h3 {
    font-size: 20px;
  }
}

/*
---------------------------------------------
stats section (updated with background.jpg as <img> tag)
---------------------------------------------
*/
#stats {
  padding: 80px 0; /* Spacing above and below */
  position: relative;
  color: #fff; /* White text for contrast */
  min-height: 500px; /* Ensures section height */
}

#stats .stats-content {
  position: relative; /* Allows layering */
  display: flex;
  justify-content: space-between; /* Text on left, bowl on right */
  align-items: center; /* Vertically centers content */
  max-width: 1200px; /* Matches container width */
  margin: 0 auto; /* Centers content */
}

#stats .stats-background {
  position: absolute; /* Layers behind text and bowl */
  top: 0;
  left: 0;
  width: 100%; /* Full width of container */
  height: 100%; /* Full height of section */
  object-fit: cover; /* Ensures image fills space */
  z-index: 1; /* Behind other content */
}

#stats .stats-text {
  flex: 1; /* Takes available space on left */
  padding-left: 30px; /* Space from left edge */
  text-align: left;
  position: relative; /* Stays above background */
  z-index: 2; /* Above background image */
}

#stats .stat-item {
  margin-bottom: 20px;
}

#stats .stat-item .count {
  font-size: 48px;
  font-weight: 700;
  color: #fb5849; /* Theme color */
  display: inline-block;
  min-width: 80px; /* Prevents layout shift */
}

#stats .stat-item p {
  font-size: 18px;
  margin: 5px 0 0;
  text-transform: uppercase;
}

#stats .stats-text h3 {
  font-size: 24px;
  font-weight: 600;
  margin-top: 30px;
  line-height: 1.4;
}

#stats .spinning-bowl {
  width: 250px; /* Larger size as requested */
  height: 250px; /* Equal height for round shape */
  border-radius: 50%; /* Makes it round */
  object-fit: cover; /* Ensures image fits circle */
  animation: spin 4s linear infinite; /* Spinning animation */
  margin-right: 30px; /* Space from right edge */
  position: relative; /* Stays above background */
  z-index: 2; /* Above background image */
}

/* Spinning animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */
@media (max-width: 992px) {
  #stats {
    min-height: 600px; /* Adjust height for stacking */
  }
  #stats .stats-content {
    flex-direction: column; /* Stack text and bowl */
    text-align: center;
  }
  #stats .stats-text {
    padding-left: 0;
    margin-bottom: 30px; /* Space between text and bowl */
  }
  #stats .spinning-bowl {
    width: 200px; /* Slightly smaller on tablets */
    height: 200px;
    margin-right: 0; /* Center on stack */
  }
}

@media (max-width: 767px) {
  #stats {
    min-height: 500px; /* Adjust for mobile */
  }
  #stats .spinning-bowl {
    width: 150px; /* Smaller on mobile */
    height: 150px;
  }
  #stats .stat-item .count {
    font-size: 36px;
  }
  #stats .stat-item p {
    font-size: 16px;
  }
  #stats .stats-text h3 {
    font-size: 20px;
  }
}
/*
---------------------------------------------
stats section (reverted, no background, perfect round bowl)
---------------------------------------------
*/
#stats {
  padding: 80px 0; /* Spacing above and below */
  background-color: #f8f8f8; /* Light gray default, adjust as needed */
  position: relative;
  color: #2a2a2a; /* Dark text for contrast */
  min-height: 400px; /* Ensures section height */
}

#stats .stats-content {
  display: flex;
  justify-content: space-between; /* Text on left, bowl on right */
  align-items: center; /* Vertically centers content */
  max-width: 1200px; /* Matches container width */
  margin: 0 auto; /* Centers content */
}

#stats .stats-text {
  flex: 1; /* Takes available space on left */
  padding-left: 30px; /* Space from left edge */
  text-align: left;
}

#stats .stat-item {
  margin-bottom: 20px;
}

#stats .stat-item .count {
  font-size: 48px;
  font-weight: 700;
  color: #fb5849; /* Theme color */
  display: inline-block;
  min-width: 80px; /* Prevents layout shift */
}

#stats .stat-item p {
  font-size: 18px;
  margin: 5px 0 0;
  text-transform: uppercase;
}

#stats .stats-text h3 {
  font-size: 24px;
  font-weight: 600;
  margin-top: 30px;
  line-height: 1.4;
}

#stats .spinning-bowl {
  width: 250px; /* Larger size */
  height: 250px; /* Equal height for perfect circle */
  border-radius: 50%; /* Ensures perfect roundness */
  object-fit: cover; /* Fits image within circle */
  animation: spin 4s linear infinite; /* Spinning animation */
  margin-right: 30px; /* Space from right edge */
}

/* Spinning animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */
@media (max-width: 992px) {
  #stats {
    min-height: 500px; /* Adjust height for stacking */
  }
  #stats .stats-content {
    flex-direction: column; /* Stack text and bowl */
    text-align: center;
  }
  #stats .stats-text {
    padding-left: 0;
    margin-bottom: 30px; /* Space between text and bowl */
  }
  #stats .spinning-bowl {
    width: 200px; /* Slightly smaller on tablets */
    height: 200px;
    margin-right: 0; /* Center on stack */
  }
}

@media (max-width: 767px) {
  #stats {
    min-height: 400px; /* Adjust for mobile */
  }
  #stats .spinning-bowl {
    width: 150px; /* Smaller on mobile */
    height: 150px;
  }
  #stats .stat-item .count {
    font-size: 36px;
  }
  #stats .stat-item p {
    font-size: 16px;
  }
  #stats .stats-text h3 {
    font-size: 20px;
  }
}

/*
---------------------------------------------
map section (new section before footer)
---------------------------------------------
*/
#map {
  padding: 80px 0; /* Spacing above and below */
  background-color: #fff; /* White background */
  position: relative;
}

#map .map-content {
  text-align: center; /* Centers heading and text */
}

#map .section-heading {
  margin-bottom: 30px;
}

#map .section-heading h6 {
  color: #fb5849; /* Theme color */
  font-size: 18px;
  text-transform: uppercase;
}

#map .section-heading h2 {
  font-size: 36px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 10px;
}

#map p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 40px;
}

#map .map-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px; /* Matches container */
  margin: 0 auto; /* Centers iframe */
}

#map .map-wrapper iframe {
  width: 100%;
  height: 400px; /* Fixed height for map */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Responsive adjustments */
@media (max-width: 992px) {
  #map .section-heading h2 {
    font-size: 30px;
  }
  #map .map-wrapper iframe {
    height: 350px; /* Slightly smaller on tablets */
  }
}

@media (max-width: 767px) {
  #map {
    padding: 60px 0; /* Reduced padding on mobile */
  }
  #map .section-heading h2 {
    font-size: 24px;
  }
  #map p {
    font-size: 14px;
  }
  #map .map-wrapper iframe {
    height: 300px; /* Smaller on mobile */
  }
}

/*
---------------------------------------------
reviews section
---------------------------------------------
*/
#reviews {
  padding: 80px 0;
  background-color: rgba(0, 0, 0, 0.6); /* 60% transparent black */
  color: #fff;
  position: relative;
  transition: background-color 0.3s ease; /* Smooth transition */
}

#reviews .reviews-content {
  text-align: center;
}

#reviews .section-heading {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#reviews .section-heading h6 {
  color: #fb5849;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 15px;
}

#reviews .section-heading h2 {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  line-height:焕성된 상태입니다;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

#reviews .review-slider {
  margin-bottom: 50px;
}

#reviews .review-card {
  background-color: var(--card-bg); /* #fff in light mode */
  color: var(--card-text); /* #2a2a2a in light mode */
  width: 300px; /* Fixed width for consistency */
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  margin: 0 auto; /* Centers within slider */
}

body.dark-mode #reviews .review-card {
  background-color: #333; /* Gray background in dark mode */
  color: #fff; /* Ensure text stays white */
}

#reviews .review-card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

#reviews .review-text p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
  font-style: italic;
}

#reviews .review-author {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: #fb5849;
}

#reviews .feedback-prompt h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
}

#reviews .feedback-prompt p {
  font-size: 16px;
  margin-bottom: 20px;
}

#reviews .main-button {
  display: inline-block;
  background-color: var(--button-bg);
  color: var(--button-text);
  padding: 12px 25px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

#reviews .main-button:hover {
  background-color: var(--button-hover);
  text-decoration: none;
}

/* Owl Carousel custom styles */
#reviews .owl-nav {
  margin-top: 20px;
}

#reviews .owl-nav button.owl-prev,
#reviews .owl-nav button.owl-next {
  background-color: #2a2a2a;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  margin: 0 10px;
  transition: background-color 0.3s ease;
}

#reviews .owl-nav button.owl-prev:hover,
#reviews .owl-nav button.owl-next:hover {
  background-color: #fb5849;
}

#reviews .owl-dots {
  margin-top: 15px;
}

#reviews .owl-dots .owl-dot span {
  background-color: #fff;
  width: 10px;
  height: 10px;
  margin: 0 5px;
}

#reviews .owl-dots .owl-dot.active span {
  background-color: #fb5849;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  #reviews .section-heading h2 {
    font-size: 34px;
  }
  #reviews .section-heading h6 {
    font-size: 18px;
  }
  #reviews .feedback-prompt h3 {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  #reviews {
    padding: 60px 0;
  }
  #reviews .section-heading h2 {
    font-size: 28px;
  }
  #reviews .section-heading h6 {
    font-size: 16px;
    margin-bottom: 10px;
  }
  #reviews .review-card {
    width: 280px; /* Slightly smaller for mobile */
  }
  #reviews .review-text p {
    font-size: 14px;
  }
  #reviews .review-author {
    font-size: 12px;
  }
  #reviews .feedback-prompt h3 {
    font-size: 20px;
  }
  #reviews .feedback-prompt p {
    font-size: 14px;
  }
}


/* ---------------------------------------------
   Footer
   --------------------------------------------- */
   footer {
    position: relative; /* Ensure footer is a positioning context */
    padding-bottom: 120px; /* Increased padding to accommodate the newsletter content */
    text-align: center; /* Ensure all content in footer is centered by default */
  }
  
  /* Ensure the container and row don't interfere with centering */
  footer .container {
    width: 100%; /* Full width */
    max-width: 1200px; /* Matches typical container width in your design */
    margin: 0 auto; /* Center the container */
  }
  
  footer .row {
    display: flex;
    justify-content: center; /* Center the row content */
  }
  
  /* ---------------------------------------------
     Footer Newsletter Section
     --------------------------------------------- */
  footer .newsletter {
    text-align: center; /* Center-align all content inside */
    background-color: transparent; /* Default transparent to inherit from footer */
    padding: 20px; /* Add some padding for spacing */
    transition: background-color 0.3s ease; /* Smooth transition */
    position: absolute; /* Position it at the bottom */
    bottom: 0; /* Align to bottom of footer */
    left: 0; /* Start from the left edge */
    right: 0; /* Extend to the right edge */
    margin: 0 auto; /* Center the element */
    width: 100%; /* Full width of the footer */
    max-width: 600px; /* Cap width for better aesthetics */
  }
  
  body.dark-mode footer .newsletter {
    background-color: #000; /* Black background in dark mode */
  }
  
  footer .newsletter h1 {
    color: #fff; /* White text for contrast */
    font-size: 36px; /* Larger size for h1 prominence */
    font-weight: 700; /* Bold for emphasis */
    font-family: 'Dancing Script', cursive; /* Elegant font to match banner h1 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
    margin-bottom: 10px; /* Space below h1 */
  }
  
  footer .newsletter p {
    color: #ccc; /* Light gray for the description text */
    font-size: 16px; /* Slightly smaller than h1 */
    font-family: 'Poppins', sans-serif; /* Matches your site's body font */
    margin-bottom: 20px; /* Space below the paragraph */
  }
  
  footer .newsletter .subscribe-btn {
    display: inline-block; /* Center the button */
    background-color: #fb5849; /* Red color matching your theme */
    color: #fff; /* White text */
    font-size: 16px; /* Readable size */
    font-weight: 500; /* Medium weight */
    font-family: 'Poppins', sans-serif; /* Matches your site's font */
    text-transform: uppercase; /* Matches the "SUBSCRIBE" style in the image */
    padding: 10px 30px; /* Padding for button size */
    border-radius: 25px; /* Rounded corners like in the image */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s ease; /* Smooth hover transition */
  }
  
  footer .newsletter .subscribe-btn:hover {
    background-color: #e04336; /* Darker red on hover */
  }
  
  body.dark-mode footer .newsletter h1,
  body.dark-mode footer .newsletter p {
    color: #fff; /* Ensure text remains white in dark mode */
  }
  
  body.dark-mode footer .newsletter p {
    color: #ccc; /* Keep the light gray for the paragraph in dark mode */
  }
  
  body.dark-mode footer .newsletter .subscribe-btn {
    background-color: #fb5849; /* Keep red button in dark mode */
  }
  
  body.dark-mode footer .newsletter .subscribe-btn:hover {
    background-color: #e04336; /* Darker red on hover in dark mode */
  }
  
  /* Responsive Adjustments */
  @media (max-width: 992px) {
    footer .newsletter {
      max-width: 100%; /* Full width on smaller screens */
      padding: 15px; /* Slightly less padding */
    }
    footer .newsletter h1 {
      font-size: 30px; /* Slightly smaller on tablets */
    }
    footer .newsletter p {
      font-size: 14px; /* Smaller paragraph text */
    }
    footer .newsletter .subscribe-btn {
      padding: 8px 25px; /* Slightly smaller button */
      font-size: 14px;
    }
  }
  
  @media (max-width: 767px) {
    footer .newsletter h1 {
      font-size: 24px; /* Smaller on mobile */
    }
    footer .newsletter p {
      font-size: 12px; /* Smaller paragraph text */
    }
    footer .newsletter .subscribe-btn {
      padding: 6px 20px; /* Smaller button on mobile */
      font-size: 12px;
    }
    footer {
      padding-bottom: 100px; /* Adjust padding for smaller screens */
    }
  }

/* ---------------------------------------------
   Preloader
   --------------------------------------------- */
#preloader {
  overflow: hidden;
  background-color: #fb5849;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 99999;
  color: #fff;
}

#preloader .jumper {
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper > div:nth-child(2) {
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  animation-delay: 0.66666s;
}

@keyframes jumper {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Root variables (minimal, only for elements that need switching) */
:root {
  --card-bg: #fff;
  --card-text: #2a2a2a;
  --button-bg: #2a2a2a;
  --button-text: #fff;
  --button-hover: #1e1e1e;
  --accent-color: #fb5849;
  --link-color: #2a2a2a;
  --link-hover: #fb5849;
}

/* Dark mode overrides */
body.dark-mode {
  --card-bg: #333;
  --card-text: #fff;
  --button-bg: #fb5849;
  --button-text: #fff;
  --button-hover: #e04336;
  --accent-color: #fff;
  --link-color: #fff;
  --link-hover: #fb5849;
}

/* Base styles (light mode unchanged) */
body {
  background-color: #fff;
  color: #2a2a2a; /* Original black text */
  transition: background-color 0.3s ease;
}

body.dark-mode {
  background-color: #1a1a1a;
}

/* Explicitly turn black text white in dark mode */
body.dark-mode,
body.dark-mode h1,
body.dark-mode h2:not(#reviews .section-heading h2), /* Exclude #reviews h2 */
body.dark-mode h3:not(#reviews .feedback-prompt h3), /* Exclude #reviews h3 */
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6:not(#reviews .section-heading h6), /* Exclude #reviews h6 */
body.dark-mode p:not(#reviews .feedback-prompt p), /* Exclude #reviews p */
body.dark-mode span:not(.review-author span), /* Exclude review-author */
body.dark-mode div {
  color: #fff !important;
}

/* Header styles */
header {
  background-color: #f8f8f8;
  color: #2a2a2a;
  transition: background-color 0.3s ease;
}

body.dark-mode header {
  background-color: #1a1a1a;
}

section {
  color: #2a2a2a;
  transition: background-color 0.3s ease;
}

body.dark-mode section {
  background-color: #1a1a1a;
}

/* Footer styles */

.footer-section {
  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
  color: #fff;
  padding: 80px 0 40px;
  font-family: 'Poppins', sans-serif;
  position: relative;
}

.footer-title {
  font-size: 20px;
  font-weight: 600;
  color: #ff6f61;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.contact-info, .quick-links {
  list-style: none;
  padding: 0;
}

.contact-info li, .quick-links li {
  font-size: 16px;
  margin-bottom: 10px;
  color: #ddd;
}

.contact-info li i {
  margin-right: 10px;
  color: #ff6f61;
}

.contact-info a, .quick-links a {
  color: #ddd;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-info a:hover, .quick-links a:hover {
  color: #ff6f61;
}

.opening-hours {
  font-size: 14px;
  color: #ccc;
  margin-top: 15px;
  line-height: 1.6;
}

.footer-brand .logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 20px;
}

.footer-logo-img {
  max-width: 100px;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.footer-logo-img:hover {
  transform: scale(1.05);
}

.logo-text {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-left: 15px;
  text-transform: uppercase;
}

.brand-description {
  font-size: 16px;
  font-style: italic;
  color: #ddd;
  margin: 10px 0 20px;
}

.footer-divider {
  width: 50px;
  height: 2px;
  background: #ff6f61;
  margin: 0 auto 20px;
}

.copyright, .design-credit {
  font-size: 14px;
  color: #ccc;
  margin: 5px 0;
}

.design-credit a {
  color: #ff6f61;
  text-decoration: none;
}

.design-credit a:hover {
  color: #fff;
}

.social-icons {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
  justify-content: center; /* Changed from flex-end to center */
}

.social-icons li a {
  color: #fff;
  font-size: 20px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons li a:hover {
  color: #ff6f61;
  transform: scale(1.2);
}

.newsletter-row {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.newsletter-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.newsletter-subtitle {
  font-size: 16px;
  color: #ddd;
  margin-bottom: 20px;
}

.newsletter-form {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 500px;
  margin: 0 auto;
}

.newsletter-input {
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  width: 70%;
  background: #fff;
  color: #333;
}

.subscribe-btn {
  padding: 12px 25px;
  background: #ff6f61;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.subscribe-btn:hover {
  background: #e65a50;
}

.whatsapp-chat {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  z-index: 1000;
  transition: transform 0.3s ease;
}

.whatsapp-chat:hover {
  transform: scale(1.1);
}

/* Back to Top Button Styles */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 90px; /* Positioned to the left of WhatsApp icon */
  background: #ff6f61;
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: #e65a50;
  transform: scale(1.1);
}

@media (max-width: 991px) {
  .footer-contact, .footer-brand, .footer-links {
      text-align: center;
      margin-bottom: 40px;
  }
  .social-icons {
      justify-content: center;
  }
  .newsletter-form {
      flex-direction: column;
      align-items: center;
  }
  .newsletter-input {
      width: 100%;
      margin-bottom: 10px;
  }
  .back-to-top {
      right: 80px; /* Adjust for smaller screens */
  }
}

@media (max-width: 767px) {
  .back-to-top {
      right: 70px;
  }
}


/* General element styles */
.review-card {
  background-color: var(--card-bg);
  color: var(--card-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.main-button {
  background-color: var(--button-bg);
  color: var(--button-text);
  transition: background-color 0.3s ease;
}

.main-button:hover {
  background-color: var(--button-hover);
}

.section-heading h6 {
  color: #fb5849;
}

.review-author {
  color: var(--accent-color);
}

a, .nav li a {
  color: var(--link-color);
  transition: color 0.3s ease;
}

a:hover, .nav li a:hover, .nav li a.active {
  color: var(--link-hover);
}

/* Header-specific styles */
.header-area .main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1000;
}

.header-area .main-nav .nav {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-area .main-nav .nav li {
  padding: 0 20px;
}

.header-area .main-nav .nav li a {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Mode toggle styling */
.mode-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.mode-icon {
  font-size: 20px;
  color: var(--accent-color);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.mode-icon.active {
  opacity: 1;
  color: #fff;
}

body.dark-mode .mode-icon.active {
  color: #fb5849;
}

/* Sticky header adjustments */
.header-area.background-header {
  background-color: #f8f8f8;
}

body.dark-mode .header-area.background-header {
  background-color: #1a1a1a;
}

/* Specific section styles */
#stats {
  background-color: #f8f8f8;
}

#map {
  background-color: #fff;
}

#reviews {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Reviews section specifics (unchanged from original) */
#reviews .section-heading h6 {
  color: #fb5849;
}

#reviews .section-heading h2 {
  color: #fff;
}

#reviews .feedback-prompt h3 {
  color: #fff;
}

#reviews .feedback-prompt p {
  color: #fff;
}

#reviews .review-text p {
  color: var(--card-text);
}

#reviews .review-author span {
  color: var(--accent-color);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .header-area .main-nav .nav {
    flex-direction: column;
    background-color: #f8f8f8;
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    padding: 20px;
    display: none;
  }
  body.dark-mode .header-area .main-nav .nav {
    background-color: #1a1a1a;
  }
  .header-area .main-nav .nav.active {
    display: flex;
  }
  .header-area .main-nav .nav li {
    padding: 10px 0;
  }
  .mode-toggle {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .mode-icon {
    font-size: 18px;
  }
}


#stats {
  padding: 80px 0; /* Spacing above and below */
  background-color: #f8f8f8; /* Light gray default */
  position: relative;
  color: #2a2a2a; /* Dark text for contrast */
  min-height: 400px; /* Ensures section height */
  transition: background-color 0.3s ease; /* Smooth transition */
}

body.dark-mode #stats {
  background-color: #000; /* Black background in dark mode */
  color: #fff; /* Ensure text remains white for contrast */
}


#map {
  padding: 80px 0; /* Spacing above and below */
  background-color: #fff; /* White background */
  position: relative;
  transition: background-color 0.3s ease; /* Smooth transition */
}

body.dark-mode #map {
  background-color: #000; /* Black background in dark mode */
}

/*
---------------------------------------------
menu
---------------------------------------------
*/
#menu {
  margin-top: 120px;
  background-color: #fffafa; /* Light pinkish-white in light mode */
  padding: 120px 0px;
  transition: background-color 0.3s ease; /* Smooth transition */
}

body.dark-mode #menu {
  background-color: #000; /* Black background in dark mode */
}

#menu .section-heading {
  margin-bottom: 80px;
}

.card {
  margin: 0 auto;
  max-width: 100%;
  min-height: 400px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.card1 {
  background-image: url(../images/menu-item-01.jpg);
}
.card2 {
  background-image: url(../images/menu-item-02.jpg);
}
.card3 {
  background-image: url(../images/menu-item-03.jpg);
}
.card4 {
  background-image: url(../images/menu-item-04.jpg);
}
.card5 {
  background-image: url(../images/menu-item-05.jpg);
}

.info {
  position: relative;
  width: 100%;
  background-color: #fb5849;
  border: 1px solid #fb5849;
  transform: translateY(100%)
  translateY(120px)
  translateZ(0);
  transition: transform 0.5s ease-out;
}

.card:hover .info,
.card:hover .info:before {
  transform: translateY(200px) translateZ(0);
}

.title {
  margin: 0;
  padding: 30px 30px 20px 30px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.description {
  padding: 0px 30px;
  color: #fff;
}

#menu .price h6 {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: #fb5849;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  border-radius: 3px;
  text-align: center;
  line-height: 70px;
}

#menu .card .main-text-button {
  margin-left: 30px;
  margin-top: 20px;
  padding-bottom: 30px;
}

#menu .owl-menu-item {
  position: relative;
}

#menu .owl-nav {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: -80px;
  transform: translateY(5px);
}

#menu .owl-dots {
  display: none;
}
    
#menu .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
}

#menu .owl-nav .owl-prev span,
#menu .owl-nav .owl-next span {
  opacity: 0;
}

#menu .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #fb5849;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
}

#menu .owl-nav .owl-prev {
  opacity: 0.75;
  transition: all .5s;
}

#menu .owl-nav .owl-prev:hover {
  opacity: 1;
}

#menu .owl-nav .owl-next {
  opacity: 0.75;
  transition: all .5s;
}

#menu .owl-nav .owl-next:hover {
  opacity: 1;
}

#menu .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
}

#menu .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #fb5849;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
}

/* Existing tab styles */
#offers #tabs ul li a {
  text-transform: capitalize;
  width: 100%;
  display: inline-block;
  font-size: 15px;
  color: #2a2a2a; /* Black in light mode */
  font-weight: 600;
  transition: all 0.3s;
  text-align: center;
}

#offers #tabs ul .ui-tabs-active a {
  color: #fb5849; /* Red when active in light mode */
  position: relative;
}

/* Dark mode override */
body.dark-mode #offers #tabs ul li a {
  color: #fff; /* White by default in dark mode */
}

body.dark-mode #offers #tabs ul li a:hover,
body.dark-mode #offers #tabs ul .ui-tabs-active a {
  color: #fb5849; /* Red on hover and when active in dark mode */
}


/* Flipbook Section Styling */
#menu {
  margin-top: 120px;
  background-color: #fffafa; /* Light pinkish-white background */
  padding: 120px 0;
  transition: background-color 0.3s ease;
}

body.dark-mode #menu {
  background-color: #000; /* Black in dark mode */
}

.flipbook-container {
  text-align: center;
  margin-bottom: 30px;
}

.flipbook-title {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

body.dark-mode .flipbook-title {
  color: #fff; /* White in dark mode */
}

.flipbook-iframe {
  width: 100%;
  height: 500px; /* Adjust height as needed */
  border: none;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  background-color: #fff; /* White background for iframe */
  transition: box-shadow 0.3s ease;
}

.flipbook-iframe:hover {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 991px) {
  .flipbook-iframe {
    height: 400px; /* Smaller height on tablets */
  }
}

@media (max-width: 767px) {
  .flipbook-iframe {
    height: 300px; /* Smaller height on mobile */
  }
  .flipbook-title {
    font-size: 18px;
  }
}

/* Add this at the end of templatemo-klassy-cafe.css */

/* White box container around Subscribe Now button */
footer .newsletter .subscribe-box {
  background-color: #ffffff; /* White background */
  padding: 10px; /* Space inside the box */
  display: inline-block; /* Fits snugly around the button */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  margin-top: 10px; /* Space above the box */
}

/* Ensure the button inside the box behaves correctly */
footer .newsletter .subscribe-box .main-button-icon {
  display: block; /* Fills the container */
  text-align: center; /* Centers text */
  background-color: #fb5849; /* Matches your theme’s red */
  color: #fff; /* White text for contrast */
  padding: 12px 25px; /* Consistent with other buttons */
  border-radius: 3px; /* Matches existing button style */
}

/* Prevent fading on hover */
footer .newsletter .subscribe-box .main-button-icon:hover {
  opacity: 1 !important; /* Stays fully opaque */
  transition: none !important; /* Removes animation */
}

/* Dark mode adjustments */
body.dark-mode footer .newsletter .subscribe-box {
  background-color: #ffffff; /* Keeps white box in dark mode */
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1); /* Subtle white shadow for contrast */
}

body.dark-mode footer .newsletter .subscribe-box .main-button-icon {
  background-color: #fb5849; /* Keeps red button */
  color: #fff; /* White text */
}

body.dark-mode footer .newsletter .subscribe-box .main-button-icon:hover {
  opacity: 1 !important; /* No fading in dark mode */
  transition: none !important; /* No animation */
}

/* Popup Styling */
.popup {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
  z-index: 9999; /* Above all content */
  justify-content: center;
  align-items: center;
  opacity: 0; /* For fade-in animation */
  transition: opacity 0.5s ease; /* Smooth fade */
}

.popup.active {
  display: flex; /* Show when active */
  opacity: 1; /* Fully visible */
}

.popup-content {
  position: relative;
  background-color: transparent; /* No white background */
  padding: 0; /* Remove padding */
  border-radius: 10px; /* Keep rounded corners on image */
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); /* Shadow around image */
  width: 60%; /* Just over half the screen width */
  max-width: 700px; /* Cap for larger screens */
  transform: scale(0.8); /* Start smaller for zoom effect */
  transition: transform 0.5s ease; /* Smooth zoom */
}

.popup.active .popup-content {
  transform: scale(1); /* Full size when active */
}

.popup-image {
  width: 100%; /* Fills the container width */
  height: auto; /* Maintains aspect ratio */
  display: block;
  border-radius: 10px; /* Matches popup-content */
  max-height: 80vh; /* Ensures it fits within viewport */
  object-fit: contain; /* Full image visible without cropping */
}

.close-btn {
  position: absolute;
  top: -15px; /* Above popup */
  right: -15px; /* Outside top-right corner */
  font-size: 30px; /* Large and clear */
  font-weight: 900; /* Bold */
  color: #fff; /* White for contrast */
  background-color: #fb5849; /* Theme accent */
  width: 40px; /* Circular */
  height: 40px; /* Circular */
  line-height: 40px; /* Center × */
  text-align: center; /* Center × */
  border-radius: 50%; /* Circular shape */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

.close-btn:hover {
  background-color: #e04336; /* Darker red on hover */
  transform: scale(1.1); /* Slight zoom */
}

body.dark-mode .popup-content {
  background-color: transparent; /* Still transparent in dark mode */
}

body.dark-mode .close-btn {
  color: #fff; /* White in dark mode */
  background-color: #fb5849; /* Consistent accent */
}

body.dark-mode .close-btn:hover {
  background-color: #e04336; /* Darker red on hover */
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .popup-content {
    width: 70%; /* Slightly wider on tablets */
    max-width: 600px;
  }
  .close-btn {
    top: -12px;
    right: -12px;
    font-size: 26px;
    width: 36px;
    height: 36px;
    line-height: 36px;
  }
}

@media (max-width: 767px) {
  .popup-content {
    width: 85%; /* Wider on mobile */
    max-width: 500px;
  }
  .close-btn {
    top: -10px;
    right: -10px;
    font-size: 24px;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
  .popup-image {
    max-height: 70vh; /* Slightly smaller on mobile */
  }
}

@media (max-width: 480px) {
  .popup-content {
    width: 90%; /* Almost full width on tiny screens */
  }
  .close-btn {
    font-size: 20px;
    width: 28px;
    height: 28px;
    line-height: 28px;
  }
  .popup-image {
    max-height: 60vh; /* Adjusted for tiny screens */
  }
}

/*
---------------------------------------------
Shamraat’s Feast Section
---------------------------------------------
*/
#feast {
  padding: 100px 0;
  background: linear-gradient(135deg, #fffafa 0%, #f8f8f8 100%); /* Subtle gradient */
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

body.dark-mode #feast {
  background: linear-gradient(135deg, #1a1a1a 0%, #000 100%); /* Dark gradient in dark mode */
}

#feast .feast-content {
  position: relative;
  z-index: 2;
}

#feast .feast-image {
  margin-bottom: 40px;
}

#feast .feast-image img {
  max-width: 300px; /* Adjust based on your course.png size */
  height: auto;
  border-radius: 50%; /* Circular image */
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.5s ease;
}

#feast .feast-image img:hover {
  transform: rotate(10deg) scale(1.05); /* Subtle animation on hover */
}

#feast .section-heading h6 {
  color: #fb5849;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

#feast .section-heading h2 {
  font-family: 'Dancing Script', cursive; /* Elegant font */
  font-size: 48px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 30px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

body.dark-mode #feast .section-heading h2 {
  color: #fff;
}

#feast .feast-details {
  background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white box */
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
  transition: background-color 0.3s ease;
}

body.dark-mode #feast .feast-details {
  background-color: rgba(51, 51, 51, 0.9); /* Dark gray in dark mode */
}

#feast .availability {
  font-size: 18px;
  font-weight: 600;
  color: #fb5849;
  margin-bottom: 30px;
}

#feast .availability span {
  font-size: 14px;
  color: #666;
  font-weight: 400;
  margin-left: 10px;
}

body.dark-mode #feast .availability span {
  color: #ccc;
}

#feast .feast-menu {
  margin-bottom: 40px;
}

#feast .menu-item {
  margin-bottom: 30px;
  text-align: left;
}

#feast .menu-item h4 {
  font-size: 24px;
  font-weight: 700;
  color: #fb5849;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

#feast .menu-item h4:after {
  content: '';
  width: 50px;
  height: 2px;
  background-color: #fb5849;
  position: absolute;
  bottom: -5px;
  left: 0;
  transition: width 0.3s ease;
}

#feast .menu-item:hover h4:after {
  width: 80px; /* Expands on hover */
}

#feast .menu-item h4 span {
  font-size: 14px;
  font-weight: 400;
  color: #2a2a2a;
  margin-left: 10px;
}

body.dark-mode #feast .menu-item h4 span {
  color: #fff;
}

#feast .menu-item p {
  font-size: 16px;
  line-height: 1.8;
  color: #2a2a2a;
  margin: 0;
}

body.dark-mode #feast .menu-item p {
  color: #fff;
}

#feast .feast-price {
  text-align: center;
}

#feast .feast-price h3 {
  font-size: 36px;
  font-weight: 700;
  color: #fb5849;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

#feast .feast-price h3 span {
  font-size: 18px;
  font-weight: 400;
  color: #666;
  margin-left: 10px;
}

body.dark-mode #feast .feast-price h3 span {
  color: #ccc;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  #feast {
    padding: 80px 0;
  }
  #feast .feast-image img {
    max-width: 250px;
  }
  #feast .section-heading h2 {
    font-size: 40px;
  }
  #feast .feast-details {
    padding: 30px;
  }
  #feast .menu-item h4 {
    font-size: 22px;
  }
  #feast .feast-price h3 {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  #feast {
    padding: 60px 0;
  }
  #feast .feast-image img {
    max-width: 200px;
  }
  #feast .section-heading h6 {
    font-size: 18px;
  }
  #feast .section-heading h2 {
    font-size: 32px;
  }
  #feast .feast-details {
    padding: 20px;
  }
  #feast .availability {
    font-size: 16px;
  }
  #feast .menu-item h4 {
    font-size: 20px;
  }
  #feast .menu-item p {
    font-size: 14px;
  }
  #feast .feast-price h3 {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  #feast .feast-image img {
    max-width: 150px;
  }
  #feast .section-heading h2 {
    font-size: 28px;
  }
  #feast .section-heading h6 {
    font-size: 16px;
  }
  #feast .feast-details {
    padding: 15px;
  }
  #feast .menu-item h4 {
    font-size: 18px;
  }
  #feast .feast-price h3 {
    font-size: 24px;
  }
}

/*
---------------------------------------------
Shamraat’s House Treasures Section
---------------------------------------------
*/
#treasures {
  padding: 120px 0;
  background: linear-gradient(to bottom, #fffafa 0%, #f8f8f8 100%); /* Soft gradient */
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

body.dark-mode #treasures {
  background: linear-gradient(to bottom, #1a1a1a 0%, #000 100%); /* Dark gradient */
}

#treasures .treasures-heading h6 {
  color: #fb5849;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

#treasures .treasures-heading h6:before {
  content: '';
  width: 40px;
  height: 2px;
  background-color: #fb5849;
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
}

#treasures .treasures-heading h6:after {
  content: '';
  width: 40px;
  height: 2px;
  background-color: #fb5849;
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
}

#treasures .treasures-heading h2 {
  font-family: 'Dancing Script', cursive;
  font-size: 50px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 60px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

body.dark-mode #treasures .treasures-heading h2 {
  color: #fff;
}

#treasures .treasures-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px; /* Space between cards */
}

#treasures .treasures-item {
  flex: 0 1 calc(33.333% - 20px); /* 3 columns with gap */
  max-width: 360px; /* Caps width for consistency */
}

#treasures .treasure-card {
  position: relative;
  height: 300px; /* Fixed height for uniformity */
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  /* Removed transition and hover effects */
}

#treasures .treasure-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)); /* Darker gradient for contrast */
  color: #fff; /* White text in light mode */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 1; /* Always fully visible */
  /* Removed transition */
}

body.dark-mode #treasures .treasure-overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.95)); /* Slightly darker in dark mode */
  color: #fff; /* Ensure white text in dark mode */
}

#treasures .treasure-overlay h4 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  color: #fff; /* Explicitly white for visibility */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Shadow for contrast */
}

#treasures .treasure-overlay h4:after {
  content: '';
  width: 50px;
  height: 2px;
  background-color: #fb5849;
  position: absolute;
  bottom: -5px;
  left: 0;
  /* Removed transition */
}

#treasures .treasure-overlay p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: #fff; /* Explicitly white for visibility */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Shadow for contrast */
  opacity: 1; /* Always visible */
  transform: translateY(0); /* No movement */
  /* Removed transition */
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  #treasures {
    padding: 80px 0;
  }
  #treasures .treasures-item {
    flex: 0 1 calc(50% - 15px); /* 2 columns */
  }
  #treasures .treasures-heading h2 {
    font-size: 42px;
  }
  #treasures .treasure-card {
    height: 280px;
  }
  #treasures .treasure-overlay h4 {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  #treasures {
    padding: 60px 0;
  }
  #treasures .treasures-item {
    flex: 0 1 100%; /* 1 column */
    max-width: 100%;
  }
  #treasures .treasures-heading h6 {
    font-size: 20px;
  }
  #treasures .treasures-heading h2 {
    font-size: 36px;
  }
  #treasures .treasures-heading h6:before,
  #treasures .treasures-heading h6:after {
    width: 30px;
  }
  #treasures .treasure-card {
    height: 260px;
  }
  #treasures .treasure-overlay h4 {
    font-size: 20px;
  }
  #treasures .treasure-overlay p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  #treasures .treasures-heading h2 {
    font-size: 30px;
  }
  #treasures .treasures-heading h6 {
    font-size: 18px;
  }
  #treasures .treasure-card {
    height: 240px;
  }
  #treasures .treasure-overlay h4 {
    font-size: 18px;
  }
  #treasures .treasure-overlay p {
    font-size: 12px;
  }
}