/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* Root Variables & Color Scheme */
:root {
  --color-cream: #c2dec2;
  --color-primary: #8b0000;
  --color-secondary: #5b0202;
  --color-dark: #200e01;
  --color-white: #ffffff;
  --color-text: #333333;
  --color-light-gray: #f5f5f5;
  --color-border: #ddd;

  --font-primary: "Montserrat", sans-serif;
  --font-secondary: "Playfair Display", serif;
  --font-accent: "Cormorant Garamond", serif;
}

/* Mobile-first logo sizing */
.logo-img {
    height: 45px;
    width: 60px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
}

.navbar.scrolled .logo-img {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========================================
   MOBILE-FIRST GLOBAL STYLES
   ======================================== */

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

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  /* Removed overflow-x: hidden to allow sticky positioning */
}

body {
  font-family: var(--font-primary);
  color: var(--color-text);
  line-height: 1.6;
  background-color: var(--color-white);
  font-size: 14px; /* Mobile-first: Start with smaller font */
  /* Removed overflow-x: hidden to allow sticky positioning */
  width: 100%;
  max-width: 100vw; /* Prevent horizontal scroll without breaking sticky */
  padding-top: 0; /* Remove padding since navbar moves with content */
}

/* Mobile-first container: Full width with minimal padding */
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

/* Fluid images and media by default */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure iframes maintain aspect ratio */
iframe {
  width: 100%;
  border: 0;
}

.map-section iframe {
  height: 300px;
  border-radius: 12px;
}

/* ========================================
   MOBILE-FIRST TYPOGRAPHY
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-secondary);
  color: var(--color-dark);
  margin-bottom: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Mobile-first: Smaller heading sizes */
h1 {
  font-size: 1.5rem;
  letter-spacing: 0.5px;
}

h2 {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: 0.3px;
  position: relative;
  padding-bottom: 0.8rem;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

/* Make h1.section-heading look like h2 */
h1.section-heading {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: 0.3px;
  position: relative;
  padding-bottom: 0.8rem;
}

h1.section-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

h3 {
  font-size: 1.1rem;
  letter-spacing: 0.3px;
}

h4 {
  font-size: 1rem;
}

p {
  margin-bottom: 1rem;
  color: #666;
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-secondary);
}

/* Navigation Bar */
/* Navbar - Transparent initially on ALL pages */
.navbar {
  background-color: transparent !important;
  box-shadow: none !important;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* White text on transparent navbar (at top) */
.navbar .nav-menu a {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Hover color when navbar is at top (not scrolled) - Default for all pages */
.navbar .nav-menu a:hover,
.navbar .nav-menu a.active {
  color: #62b784;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Special hover color for home page when navbar is at top */
.home-page .navbar .nav-menu a:hover,
.home-page .navbar .nav-menu a.active {
  color: #0A6A4E;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Navbar Scrolled Styles - White background when scrolled */
.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease;
}

/* Ensure scrolled state works on all pages including booking pages */
body .navbar.scrolled,
.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.98) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Specific fix for all booking pages - ensure scrolled state works */
body[class*="booking"] .navbar.scrolled,
.booking_step1_dates-page .navbar.scrolled,
.booking_step2_rooms-page .navbar.scrolled,
.booking_step3_guests-page .navbar.scrolled,
.booking_step4_addons-page .navbar.scrolled,
.booking_step5_review-page .navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.98) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Text color when scrolled - black for visibility */
.navbar.scrolled .nav-menu a {
  color: #000 !important;
  text-shadow: none !important;
}

.navbar.scrolled .nav-menu a:hover,
.navbar.scrolled .nav-menu a.active {
  color: #62b784 !important;
  text-shadow: none !important;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  /* Horizontal padding inherited from .container class */
}

.logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  margin-left: 0; /* Fixed: removed margin */
  padding-left: 0; /* Fixed: removed padding */
}

.logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2rem;
  margin-right: -80px;
  padding-right: 80px;
}

.nav-menu li {
  display: flex;
  align-items: center;
}

/* Nav menu link styles moved to navbar section above */

.nav-menu a {
  font-weight: 500;
  font-size: 1.10rem;
  transition: color 0.3s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #003f2e/*#510fc3 var(--color-primary)*/;
  transition: width 0.3s ease;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
  width: 100%;
}

.nav-toggle,
.nav-toggle-label {
  display: none;
}

/* Hero Section */
.hero {
  background: linear-gradient(rgba(139, 0, 0, 0.7), rgba(91, 2, 2, 0.7)), url("/placeholder.svg?height=600&width=1200")
    center / cover;
  background-attachment: fixed;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
}

.hero-content h1 {
  font-size: 4rem;
  color: var(--color-cream);
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: fadeInDown 1s ease;
}

.hero-content p {
  font-size: 1.5rem;
  color: var(--color-cream);
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease 0.2s both;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   MOBILE-FIRST BUTTONS
   ======================================== */

.btn {
  display: inline-block;
  width: 100%; /* Mobile: Full width buttons */
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: all 0.4s ease;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  touch-action: manipulation; /* Better touch response */
  will-change: transform, box-shadow, filter; /* Optimize animations */
}

/* Removed ::before animation that was causing jitter */

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-white) !important;
  box-shadow: 0 4px 15px rgba(139, 0, 0, 0.2);
  text-decoration: none;
  transition: all 0.4s ease;
}

.nav-book-btn {
  color: var(--color-white) !important;
  text-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  /* Smooth hover animation matching btn-highlights */
  box-shadow: 0 8px 20px rgba(139, 0, 0, 0.3);
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.btn-secondary {
  background-color: var(--color-cream);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: 0 4px 15px rgba(139, 0, 0, 0.1);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(139, 0, 0, 0.3);
}

/* ========================================
   MOBILE-FIRST SECTIONS
   ======================================== */

/* About Section */
.about {
  padding: 30px 0;
  background-color: var(--color-light-gray);
}

.about h2 {
  margin-bottom: 1rem;
}

.about > .container > p {
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  padding: 0 10px;
}

/* Mobile-first: Single column grid */
.features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
  width: 100%;
}

.feature-card {
  background: var(--color-white);
  padding: 1.2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.1), transparent);
  transition: left 0.5s ease;
  z-index: 1;
}

.feature-card:hover::before {
  left: 100%;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(139, 0, 0, 0.2);
  border-color: var(--color-primary);
}

.feature-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 1rem;
  position: relative;
  z-index: 0;
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-image img {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.feature-card h3 {
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 1.5rem;
  position: relative;
  z-index: 2;
}

.feature-card p {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

/* Highlights Section - Mobile First */
.highlights {
  padding: 30px 0;
  background: var(--color-white);
}

.highlights-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.highlights-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.highlights-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.highlights-image:hover img {
  transform: scale(1.05);
}

.highlights-text {
  padding: 1rem 0;
  width: 100%;
}

.highlights-label {
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.highlights-text h2 {
  font-family: var(--font-accent);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.3;
  margin-bottom: 1rem;
  text-align: center;
}

.highlights-text h2::after {
  display: none;
}

.highlight-accent {
  color: var(--color-dark);
  font-weight: 600;
}

.highlights-description {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.highlight-list {
  list-style: none;
  margin-bottom: 2.5rem;
}

.highlight-list li {
  font-size: 1rem;
  color: var(--color-text);
  padding: 0.8rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.highlight-list li:last-child {
  border-bottom: none;
}

.checkmark {
  color: var(--color-primary);
  font-size: 1.2rem;
  font-weight: bold;
  background-color: rgba(139, 0, 0, 0.1);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
}

.btn-highlights {
  background-color: #2d5f3f;
  color: var(--color-white);
  padding: 14px 40px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: all 0.4s ease;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
}

.btn-highlights:hover {
  background-color: transparent;
  border-color: #2d5f3f;
  color: #2d5f3f;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 95, 63, 0.2);
}

/* Button with red background that transitions to green outline on hover */
.btn-contact {
  background-color: var(--color-primary);
  color: var(--color-white) !important;
  padding: 14px 40px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: all 0.4s ease;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.btn-contact span {
  display: block;
  position: relative;
  z-index: 2;
  color: var(--color-white);
  transition: color 0.5s ease;
}

.btn-contact:hover span {
  animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
  color: #2d5f3f !important;
}

@keyframes MoveScaleUpInitial {
  to {
    transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
    opacity: 0;
  }
}

@keyframes MoveScaleUpEnd {
  from {
    transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.btn-contact::before {
  content: '';
  position: absolute;
  background: transparent;
  width: 120%;
  height: 0;
  padding-bottom: 120%;
  top: -110%;
  left: -10%;
  border-radius: 50%;
  transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
  z-index: 1;
}

.btn-contact:hover::before {
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.btn-contact::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
  z-index: 1;
}

.btn-contact:hover::after {
  transform: translate3d(0, 0, 0);
  transition-duration: 0.05s;
  transition-delay: 0.4s;
  transition-timing-function: linear;
}

.btn-contact:hover {
  background-color: transparent !important;
  border-color: #2d5f3f !important;
  color: #2d5f3f !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 95, 63, 0.2);
}

/* Button with red background that transitions to red outline on hover */
.btn-book {
  background-color: var(--color-primary);
  color: var(--color-white) !important;
  padding: 14px 40px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: all 0.4s ease;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
}

.btn-book:hover {
  background-color: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 0, 0, 0.2);
}

/* Smart navbar book button with context-aware hover colors */
.btn-navbook {
  background-color: var(--color-primary);
  color: var(--color-white) !important;
  padding: 14px 40px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: all 0.5s ease;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.btn-navbook span {
  position: relative;
  z-index: 2;
  color: var(--color-white) !important;
  transition: color 0.4s ease;
}

.btn-navbook::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  background: var(--color-primary);
  transform: skew(30deg) translateX(-110%);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  z-index: 1;
}

.btn-navbook:hover::before {
  transform: skew(30deg) translate3d(100%, 0, 0);
}

/* Default hover: white (for non-home pages, not scrolled) - ALL DEVICES */
.btn-navbook:hover {
  background-color: transparent !important;
  border-color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}

.btn-navbook:hover span {
  color: #fff !important;
}

/* DESKTOP ONLY: Non-home pages - inverted styling (only in navbar) */
@media (min-width: 1025px) {
  /* Only apply to navbar buttons, not booking page buttons */
  /* Exclude booking pages from inverted styling */
  body:not(.home-page):not([class*="booking"]) .navbar:not(.scrolled) .nav-menu .btn-navbook {
    background-color: transparent !important;
    border-color: #fff !important;
  }
  
  body:not(.home-page):not([class*="booking"]) .navbar:not(.scrolled) .nav-menu .btn-navbook span {
    color: #fff !important;
  }
  
  body:not(.home-page):not([class*="booking"]) .navbar:not(.scrolled) .nav-menu .btn-navbook::before {
    background: #fff;
    transform: skew(30deg) translateX(-110%);
  }
  
  /* Hover: white background with red text */
  body:not(.home-page):not([class*="booking"]) .navbar:not(.scrolled) .nav-menu .btn-navbook:hover {
    background-color: #fff !important;
    border-color: #fff !important;
  }
  
  body:not(.home-page):not([class*="booking"]) .navbar:not(.scrolled) .nav-menu .btn-navbook:hover::before {
    transform: skew(30deg) translate3d(100%, 0, 0);
  }
  
  body:not(.home-page):not([class*="booking"]) .navbar:not(.scrolled) .nav-menu .btn-navbook:hover span {
    color: var(--color-primary) !important;
  }
  
  /* SCROLLED STATE - Override inverted styling */
  .navbar.scrolled .nav-menu .btn-navbook {
    background-color: var(--color-primary) !important;
    border-color: transparent !important;
  }
  
  .navbar.scrolled .nav-menu .btn-navbook span {
    color: var(--color-white) !important;
  }
  
  .navbar.scrolled .nav-menu .btn-navbook::before {
    background: var(--color-primary) !important;
    transform: skew(30deg) translateX(-110%) !important;
  }
  
  .navbar.scrolled .nav-menu .btn-navbook:hover {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
  }
  
  .navbar.scrolled .nav-menu .btn-navbook:hover span {
    color: var(--color-primary) !important;
  }
  
  .navbar.scrolled .nav-menu .btn-navbook:hover::before {
    transform: skew(30deg) translate3d(100%, 0, 0) !important;
  }
}

/* Home page styling - same for all devices */
.home-page .btn-navbook {
  background-color: var(--color-primary) !important;
  border-color: transparent !important;
}

.home-page .btn-navbook span {
  color: var(--color-white) !important;
}

.home-page .btn-navbook::before {
  background: var(--color-primary);
  transform: skew(30deg) translateX(-110%);
}

.home-page .btn-navbook:hover {
  background-color: transparent !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 0, 0, 0.2);
}

.home-page .btn-navbook:hover::before {
  transform: skew(30deg) translate3d(100%, 0, 0);
}

.home-page .btn-navbook:hover span {
  color: var(--color-primary) !important;
}

/* When navbar is scrolled: always red - same for all devices - HIGHEST PRIORITY */
.navbar.scrolled .btn-navbook,
.navbar.scrolled .nav-menu .btn-navbook,
.navbar.scrolled .nav-menu a.btn-navbook {
  background-color: var(--color-primary) !important;
  border-color: transparent !important;
}

.navbar.scrolled .btn-navbook span,
.navbar.scrolled .nav-menu .btn-navbook span,
.navbar.scrolled .nav-menu a.btn-navbook span {
  color: var(--color-white) !important;
}

.navbar.scrolled .btn-navbook::before,
.navbar.scrolled .nav-menu .btn-navbook::before,
.navbar.scrolled .nav-menu a.btn-navbook::before {
  background: var(--color-primary);
  transform: skew(30deg) translateX(-110%);
}

.navbar.scrolled .btn-navbook:hover,
.navbar.scrolled .nav-menu .btn-navbook:hover,
.navbar.scrolled .nav-menu a.btn-navbook:hover,
.navbar.scrolled .nav-menu a.btn-navbook.active {
  background-color: transparent !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 0, 0, 0.2);
}

.navbar.scrolled .btn-navbook:hover::before,
.navbar.scrolled .nav-menu .btn-navbook:hover::before,
.navbar.scrolled .nav-menu a.btn-navbook:hover::before {
  transform: skew(30deg) translate3d(100%, 0, 0);
}

.navbar.scrolled .btn-navbook:hover span,
.navbar.scrolled .nav-menu .btn-navbook:hover span,
.navbar.scrolled .nav-menu a.btn-navbook:hover span,
.navbar.scrolled .nav-menu a.btn-navbook.active span {
  color: var(--color-primary) !important;
}

/* Override nav-menu link styling for btn-navbook - CRITICAL */
.navbar .nav-menu a.btn-navbook,
.navbar .nav-menu a.btn-navbook:visited,
.navbar .nav-menu a.btn-navbook:active {
  color: var(--color-white) !important;
  text-shadow: none !important;
}

/* Override nav-menu hover for btn-navbook - white by default */
.navbar .nav-menu a.btn-navbook:hover {
  background-color: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* DESKTOP: Non-home pages inverted - ONLY IN NAVBAR */
@media (min-width: 1025px) {
  /* Exclude booking pages and scrolled state */
  body:not(.home-page):not([class*="booking"]) .navbar:not(.scrolled) .nav-menu a.btn-navbook {
    background-color: transparent !important;
    border-color: #fff !important;
  }
  
  body:not(.home-page):not([class*="booking"]) .navbar:not(.scrolled) .nav-menu a.btn-navbook:hover {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--color-primary) !important;
  }
  
  /* SCROLLED STATE - Always red */
  .navbar.scrolled .nav-menu a.btn-navbook {
    background-color: var(--color-primary) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
  
  .navbar.scrolled .nav-menu a.btn-navbook:hover {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
  }
}

/* Override nav-menu hover for btn-navbook on home page - red */
.home-page .navbar .nav-menu a.btn-navbook {
  background-color: var(--color-primary) !important;
  border-color: transparent !important;
}

.home-page .navbar .nav-menu a.btn-navbook:hover {
  background-color: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  text-shadow: none !important;
}

/* Override scrolled navbar styling for btn-navbook - HIGHEST PRIORITY */
.navbar.scrolled .nav-menu a.btn-navbook,
.navbar.scrolled .nav-menu a.btn-navbook:visited,
.navbar.scrolled .nav-menu a.btn-navbook:active {
  background-color: var(--color-primary) !important;
  border-color: transparent !important;
  color: var(--color-white) !important;
  text-shadow: none !important;
}

/* Override scrolled navbar hover for btn-navbook - always red */
.navbar.scrolled .nav-menu a.btn-navbook:hover,
.navbar.scrolled .nav-menu a.btn-navbook.active {
  background-color: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  text-shadow: none !important;
}

/* Highlights responsive handled in main media queries below */

/* Location Section - Mobile First */
.location {
  padding: 30px 0;
}

.location-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.location-info {
  width: 100%;
}

.location-info h3 {
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.location-info p {
  margin-bottom: 1rem;
  line-height: 1.8;
}

.contact-details {
  background-color: var(--color-cream);
  padding: 1.5rem;
  border-radius: 8px;
  margin: 1.5rem 0;
  width: 100%;
}

.contact-details p {
  margin-bottom: 0.5rem;
}

/* Map container - full width on all devices */
.map-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
  width: 100%;
  height: 300px;
  border: 0;
  display: block;
}

/* Page Header - Mobile First */
.page-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
  padding: 60px 15px 60px; /* Normal padding since navbar is in document flow */
  text-align: center;
  width: 100%;
}

.page-header h1 {
  color: var(--color-cream);
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.page-header p {
  color: var(--color-cream);
  font-size: 1rem;
}

/* ========================================
   ALL ROOMS INCLUDE SECTION - MOBILE FIRST
   ======================================== */

.room-amenities-included {
  padding: 50px 0;
  background: linear-gradient(135deg, rgba(194, 222, 194, 0.2) 0%, rgba(255, 255, 255, 0.9) 100%);
  position: relative;
  overflow: hidden;
}

.room-amenities-included::before {
  content: '🍃';
  position: absolute;
  top: 20px;
  right: 5%;
  font-size: 4rem;
  opacity: 0.15;
  transform: rotate(25deg);
}

.room-amenities-included h2 {
  text-align: center;
  margin-bottom: 2.5rem;
  color: var(--color-primary);
  font-size: 1.8rem;
  font-weight: 700;
  position: relative;
  padding-bottom: 1rem;
}

.room-amenities-included h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

.amenities-icons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.amenity-icon-item {
  background: linear-gradient(135deg, var(--color-white) 0%, rgba(255, 255, 255, 0.95) 100%);
  padding: 2rem 1.5rem;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.amenity-icon-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.05), transparent);
  transition: left 0.5s ease;
}

.amenity-icon-item:hover::before {
  left: 100%;
}

.amenity-icon-item:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 30px rgba(139, 0, 0, 0.15);
  border-color: var(--color-primary);
}

.amenity-icon-item img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 1.2rem;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 3px solid var(--color-white);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.amenity-icon-item:hover img {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(139, 0, 0, 0.25);
}

.amenity-icon-item p {
  font-weight: 600;
  color: var(--color-dark);
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.3px;
  line-height: 1.4;
}

/* Amenities Preview - Mobile First */
.amenities-preview {
  background-color: var(--color-light-gray);
  padding: 30px 0;
}

.amenities-preview h2 {
  margin-bottom: 1.5rem;
}

.amenities-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.amenity-item {
  background-color: var(--color-white);
  padding: 1.5rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  width: 100%;
}

.amenity-item:hover {
  transform: scale(1.05);
}

.amenity-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

/* Amenities Section - Mobile First */
.amenities-section {
  padding: 30px 0;
}

.amenities-grid-large {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.amenity-card {
  background-color: var(--color-white);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-top: 3px solid var(--color-primary);
  overflow: hidden;
  width: 100%;
}

.amenity-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(139, 0, 0, 0.15);
}

.amenity-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  transition: transform 0.3s ease;
}

.amenity-card:hover img {
  transform: scale(1.05);
}

.amenity-icon-large {
  font-size: 4rem;
  margin: 1rem 0;
}

.amenity-card h3 {
  color: var(--color-primary);
  margin: 1rem 0;
  padding: 0 1.5rem;
}

.amenity-card p {
  padding: 0 1.5rem 1.5rem;
}

/* ========================================
   CULTURAL EXPERIENCES SECTION - MOBILE FIRST
   ======================================== */

.cultural-experiences-section {
  background-color: var(--color-light-gray);
  padding: 50px 0;
}

.cultural-experiences-section h2 {
  text-align: center;
  margin-bottom: 1rem;
}

.section-subtitle {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  color: #666;
  font-size: 1rem;
}

.experience-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  background-color: var(--color-white);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.experience-item-reverse {
  flex-direction: row-reverse;
}

.experience-image {
  width: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.experience-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.experience-item:hover .experience-image img {
  transform: scale(1.05);
}

.experience-content {
  width: 50%;
  padding: 1.5rem;
  text-align: left;
}

.experience-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-align: center;
}

.experience-content h3 {
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-size: 1.5rem;
  text-align: center;
}

.experience-content p {
  color: #666;
  line-height: 1.7;
  font-size: 1rem;
}

/* Mobile Layout: Heading -> Paragraph -> Photo */
@media (max-width: 768px) {
  .cultural-experiences-section .experience-item,
  .cultural-experiences-section .experience-item-reverse {
    flex-direction: column !important;
    gap: 0 !important;
    text-align: center;
  }
  
  .cultural-experiences-section .experience-content,
  .cultural-experiences-section .experience-image {
    width: 100% !important;
  }
  
  .cultural-experiences-section .experience-content {
    order: 1 !important;
    padding: 1.5rem !important;
  }
  
  .cultural-experiences-section .experience-image {
    order: 2 !important;
  }
  
  .cultural-experiences-section .experience-image img {
    height: 250px !important;
    border-radius: 0 !important;
  }
}

/* ========================================
   DHIMSA VIDEO SECTION - MOBILE FIRST
   ======================================== */

/* Dhimsa Video Section */
.dhimsa-video-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.dhimsa-video-section h2 {
  text-align: center;
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.video-description {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  color: #666;
  font-size: 1.1rem;
  line-height: 1.7;
}

.video-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  background-color: #000;
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
}

.video-mute-button {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(139, 0, 0, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  outline: none;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.video-mute-button:hover {
  background-color: rgba(139, 0, 0, 1);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.video-mute-button:active {
  transform: scale(0.95);
}

.video-mute-button span {
  display: block;
  line-height: 1;
  font-size: 1.5rem;
}

/* Breakfast Menu - Mobile First */
.breakfast-menu {
  background-color: var(--color-light-gray);
  padding: 30px 0;
}

.breakfast-menu h2 {
  margin-bottom: 1.5rem;
}

.menu-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.menu-item {
  background-color: var(--color-white);
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.menu-item h4 {
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.menu-item ul {
  list-style: none;
  padding: 0;
}

.menu-item li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.menu-item li:last-child {
  border-bottom: none;
}

.breakfast-note {
  text-align: center;
  background-color: var(--color-cream);
  padding: 1.5rem;
  border-radius: 5px;
  color: var(--color-dark);
  font-weight: 600;
}

/* FAQ Section - Mobile First */
.faq-section {
  padding: 30px 0;
}

.faq-container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 1rem;
  background-color: var(--color-cream);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--color-dark);
  transition: background-color 0.3s ease;
  font-size: 0.95rem;
  text-align: left;
}

.faq-question:hover {
  background-color: rgba(237, 231, 199, 0.8);
}

.faq-icon {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 1rem;
  background-color: var(--color-white);
  display: none;
  animation: slideDown 0.3s ease;
  font-size: 0.9rem;
}

.faq-item.active .faq-answer {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Booking Section - Mobile First */
.booking-section {
  padding: 30px 0;
  background-color: var(--color-light-gray);
}

.booking-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.booking-form h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.form-step {
  margin-bottom: 1.5rem;
  background-color: var(--color-white);
  padding: 1.2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  width: 100%;
  overflow: visible;
}

.form-step h3 {
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}

.room-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.room-option {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 2px solid var(--color-border);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.room-option:hover {
  border-color: var(--color-primary);
  background-color: rgba(237, 231, 199, 0.3);
}

.room-option input[type="radio"] {
  margin-right: 1rem;
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.room-option input[type="radio"]:checked + span {
  color: var(--color-primary);
  font-weight: 600;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.form-row.three-cols {
  display: flex;
  flex-direction: column;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-group input,
.form-group textarea {
  padding: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 5px rgba(139, 0, 0, 0.2);
}

.checkbox {
  display: flex !important;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
  background: transparent;
}

.checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin: 0;
}

.checkbox span {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.4;
}

/* Breakfast Addon Checkbox */
.breakfast-addon-container {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
}

.breakfast-addon-container input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.breakfast-addon-container label {
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--color-text);
  margin: 0;
  user-select: none;
}

/* Booking Summary - Mobile First */
.booking-summary {
  background-color: var(--color-white);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  height: fit-content;
  position: static;
  width: 100%;
}

.booking-summary h3 {
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}

.summary-items {
  margin-bottom: 1.5rem;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 0;
  font-size: 0.95rem;
}

.summary-item span:first-child {
  font-weight: 600;
  color: var(--color-text);
}

.summary-item.total {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-primary);
  padding: 1rem 0;
  border-top: 2px solid var(--color-primary);
  margin-top: 0.5rem;
}

.summary-divider {
  display: none !important;
}

.payment-section {
  margin: 1.5rem 0;
}

.payment-section form {
  display: flex;
  justify-content: center;
}

.terms {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  /* Removed border-top that was causing white line above payment button */
}

.terms label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}

/* Contact Section - Mobile First */
.contact-section {
  padding: 30px 0;
}

.contact-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
  width: 100%;
}

.contact-info h2,
.contact-form h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.info-item {
  margin-bottom: 2rem;
}

.info-item h3 {
  color: var(--color-primary);
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
}

.info-item p {
  color: #666;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#form-message {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 5px;
  text-align: center;
  display: none;
}

#form-message.success {
  background-color: #d4edda;
  color: #155724;
  display: block;
}

#form-message.error {
  background-color: #f8d7da;
  color: #721c24;
  display: block;
}

.map-section {
  margin-top: 4rem;
}

.map-section h2 {
  text-align: center;
  margin-bottom: 4rem;
}

/* Footer - Mobile First */
.footer {
  background-color: #000000;
  color: var(--color-white);
  padding: 2rem 0 1rem;
  margin-top: 2rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.footer-section h4 {
  color: var(--color-white);
  margin-bottom: 1rem;
}

.footer-section ul {
  list-style: none;
}

.footer-section li {
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: var(--color-white);
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: var(--color-primary);
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background-color: var(--color-primary);
  border-radius: 50%;
  color: var(--color-white);
  transition: background-color 0.3s ease;
}

.social-links a:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.designer-credit {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.5rem;
  font-style: italic;
  font-family: var(--font-accent);
  letter-spacing: 0.5px;
}

.designer-email {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.designer-email:hover {
  color: #fbff00;
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    flex-direction: column;
    background-color: var(--color-white);
    width: 100%;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    padding: 1rem 0;
    gap: 0.3rem;
    height: auto;
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
    align-items: center;
    margin-right: 0;
    padding-right: 0;
  }
  
  /* Reduce font size and padding for nav menu items on mobile */
  .nav-menu li {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .nav-menu a {
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    display: block;
    width: auto;
    text-align: center;
    margin: 0;
  }
  
  /* Specific styling for Book Now button in mobile menu */
  .nav-menu .nav-book-btn,
  .nav-menu .btn-navbook,
  .nav-menu a.nav-book-btn,
  .nav-menu a.btn-navbook {
    font-size: 0.9rem;
    padding: 0.6rem 1.5rem;
    margin: 0.3rem auto;
    width: 85%;
    max-width: 280px;
    display: block;
    text-align: center;
    background-color: var(--color-primary) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
  
  /* Higher specificity when menu is open */
  .nav-toggle:checked ~ .nav-menu .nav-book-btn,
  .nav-toggle:checked ~ .nav-menu .btn-navbook,
  .nav-toggle:checked ~ .nav-menu a.nav-book-btn,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook {
    background-color: var(--color-primary) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
  
  .nav-menu .nav-book-btn span,
  .nav-menu .btn-navbook span,
  .nav-menu a.nav-book-btn span,
  .nav-menu a.btn-navbook span {
    color: var(--color-white) !important;
  }
  
  /* Higher specificity when menu is open */
  .nav-toggle:checked ~ .nav-menu .nav-book-btn span,
  .nav-toggle:checked ~ .nav-menu .btn-navbook span,
  .nav-toggle:checked ~ .nav-menu a.nav-book-btn span,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook span {
    color: var(--color-white) !important;
  }
  
  .nav-menu .nav-book-btn:hover,
  .nav-menu .btn-navbook:hover,
  .nav-menu a.nav-book-btn:hover,
  .nav-menu a.btn-navbook:hover {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
  }
  
  .nav-menu .nav-book-btn:hover span,
  .nav-menu .btn-navbook:hover span,
  .nav-menu a.nav-book-btn:hover span,
  .nav-menu a.btn-navbook:hover span {
    color: var(--color-primary) !important;
  }

  .nav-toggle:checked ~ .nav-menu {
    left: 0;
  }

  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
  }

  .nav-toggle-label span {
    width: 25px;
    height: 3px;
    background-color: var(--color-primary);
    transition: 0.3s;
    border-radius: 3px;
  }

  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
  
  /* ULTIMATE OVERRIDE - Book Now button MUST be red in mobile menu - MAXIMUM SPECIFICITY */
  /* This must come AFTER all nav-menu a styles to override them */
  .nav-menu a.btn.btn-navbook.nav-book-btn,
  .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn,
  .nav-menu a.btn-navbook,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook,
  .nav-menu .btn-navbook,
  .nav-toggle:checked ~ .nav-menu .btn-navbook {
    background-color: var(--color-primary) !important;
    border: 2px solid transparent !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
  
  .nav-menu a.btn.btn-navbook.nav-book-btn span,
  .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn span,
  .nav-menu a.btn-navbook span,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook span,
  .nav-menu .btn-navbook span,
  .nav-toggle:checked ~ .nav-menu .btn-navbook span {
    color: var(--color-white) !important;
  }
  
  .nav-menu a.btn.btn-navbook.nav-book-btn:hover,
  .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn:hover,
  .nav-menu a.btn-navbook:hover,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook:hover,
  .nav-menu .btn-navbook:hover,
  .nav-toggle:checked ~ .nav-menu .btn-navbook:hover {
    background-color: transparent !important;
    border: 2px solid var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
  }
  
  .nav-menu a.btn.btn-navbook.nav-book-btn:hover span,
  .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn:hover span,
  .nav-menu a.btn-navbook:hover span,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook:hover span,
  .nav-menu .btn-navbook:hover span,
  .nav-toggle:checked ~ .nav-menu .btn-navbook:hover span {
    color: var(--color-primary) !important;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  .hero {
    height: 400px;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }

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

  .booking-container {
    grid-template-columns: 1fr;
  }

  .booking-summary {
    position: static;
    top: auto;
  }

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

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-row.three-cols {
    grid-template-columns: 1fr;
  }

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

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

  .amenities-grid-large {
    grid-template-columns: 1fr;
  }

  .faq-container {
    max-width: 100%;
  }

  
}

@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  .hero {
    height: 300px;
  }

  .hero-content h1 {
    font-size: 1.8rem;
  }

  .hero-content p {
    font-size: 1rem;
  }

  .btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .page-header {
    padding: 60px 0 50px; /* Normal padding for static navbar */
  }

  .page-header h1 {
    font-size: 1.8rem;
  }

  .page-header p {
    font-size: 1rem;
  }

  .nav-menu {
    padding: 1.5rem 0;
    gap: 0.5rem;
  }

  .nav-menu a {
    font-size: 0.95rem;
  }

  .amenity-icon-large {
    font-size: 2.5rem;
  }

  /* Cultural experiences mobile layout: heading → paragraph → photo */
  .cultural-experiences-section .experience-item,
  .cultural-experiences-section .experience-item-reverse {
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 2rem;
  }
  
  .cultural-experiences-section .experience-image,
  .cultural-experiences-section .experience-content {
    width: 100% !important;
  }
  
  .cultural-experiences-section .experience-content {
    order: 1 !important;
    padding: 1rem !important;
    text-align: center;
  }
  
  .cultural-experiences-section .experience-image {
    order: 2 !important;
  }
  
  .cultural-experiences-section .experience-image img {
    height: 200px !important;
    border-radius: 0 !important;
  }

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

  .footer-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Hero Slideshow - Responsive Full Screen */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height by default */
  min-height: 600px; /* Minimum height for content visibility */
  overflow: hidden;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.slideshow-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  animation: fadeIn 0.5s ease-in-out;
}

.slide.active {
  display: block;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0 15px 15px;
}

/* Old slide styles removed - using new Taj-style carousel below */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  transition: 0.3s ease;
  border-radius: 0 8px 8px 0;
  user-select: none;
  background-color: rgba(139, 0, 0, 0.5);
  z-index: 3;
}

.next {
  right: 0;
  border-radius: 8px 0 0 8px;
}

.prev:hover,
.next:hover {
  background-color: rgba(139, 0, 0, 0.9);
}

.slideshow-dots {
  text-align: center;
  position: absolute;
  bottom: 20px;
  width: 100%;
  z-index: 3;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.dot.active,
.dot:hover {
  background-color: var(--color-cream);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Navigation Book Button */
.nav-book-btn {
  padding: 8px 20px !important;
  border-radius: 5px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.nav-book-btn:hover {
  transform: translateY(-2px);
}

/* Tourism Section - Mobile First */
.tourism-section {
  padding: 30px 0;
  background-color: var(--color-light-gray);
}

.tourism-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.tourism-card {
  background-color: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
}

.tourism-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(139, 0, 0, 0.2);
}

.tourism-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  transition: transform 0.3s ease;
}

.tourism-card:hover img {
  transform: scale(1.05);
}

.tourism-info {
  padding: 1.2rem;
}

.tourism-info h3 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.tourism-distance {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.tourism-location {
  font-size: 0.9rem;
  color: #666;
  margin: 1rem 0;
}

.tourism-info .btn {
  margin-top: 1rem;
  width: 100%;
}

/* Reviews Section - Mobile First */
.reviews-section {
  padding: 30px 0;
}

.overall-rating {
  text-align: center;
  background: linear-gradient(135deg, var(--color-cream) 0%, rgba(237, 231, 199, 0.7) 100%);
  padding: 2rem 1rem;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.rating-score {
  display: inline-block;
}

.rating-score .score {
  font-size: 3rem;
  font-weight: bold;
  color: var(--color-primary);
  display: block;
  margin-bottom: 0.5rem;
}

.rating-score .stars {
  font-size: 1.5rem;
  color: #ffa500;
  margin-bottom: 0.5rem;
}

.reviews-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
}

.review-card {
  background-color: var(--color-white);
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 4px solid var(--color-primary);
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(139, 0, 0, 0.15);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.reviewer-info h4 {
  color: var(--color-dark);
  margin-bottom: 0.3rem;
  font-size: 1.1rem;
}

.reviewer-info .stars {
  color: #ffa500;
  font-size: 1.1rem;
}

.review-date {
  font-size: 0.85rem;
  color: #999;
}

.review-text {
  color: #666;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* Write Review Section */
.write-review-section {
  max-width: 700px;
  margin: 0 auto;
  background-color: var(--color-light-gray);
  padding: 3rem;
  border-radius: 15px;
}

.write-review-section h2 {
  text-align: center;
  margin-bottom: 2rem;
}

.review-form .form-group {
  margin-bottom: 1.5rem;
}

.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.5rem;
}

.star-rating input[type="radio"] {
  display: none;
}

.star-rating label {
  font-size: 2rem;
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s ease;
}

.star-rating input[type="radio"]:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #ffa500;
}

#review-message {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 5px;
  text-align: center;
  display: none;
}

#review-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  display: block;
}

#review-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  display: block;
}

/* Contact Message Styling */
#contact-message {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 5px;
  text-align: center;
  display: none;
  font-weight: 500;
}

#contact-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 2px solid #28a745;
  display: block;
}

#contact-message.error {
  background-color: #fff3cd;
  color: #856404;
  border: 2px solid #ffc107;
  display: block;
}

/* Image Border Radius for all images */
.tourism-card img,
.review-card img,
.amenity-card img,
.room-card img,
.feature-card img {
  border-radius: 10px;
}

/* Responsive for Slideshow */
@media (max-width: 768px) {
  .hero-slideshow {
    height: 400px;
  }

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

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

  .nav-book-btn {
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  .prev,
  .next {
    padding: 10px;
    font-size: 18px;
  }

  .write-review-section {
    padding: 2rem 1.5rem;
  }
}

/* Payment Type Selection */
.payment-type-section {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background-color: var(--color-light-gray);
  border-radius: 8px;
}

.payment-type-section h4 {
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.payment-option {
  display: flex;
  align-items: flex-start;
  padding: 1.2rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--color-white);
}

.payment-option:hover {
  border-color: var(--color-primary);
  background-color: rgba(237, 231, 199, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 0, 0, 0.1);
}

.payment-option input[type="radio"] {
  margin-right: 1rem;
  margin-top: 0.3rem;
  cursor: pointer;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.payment-option input[type="radio"]:checked + span {
  color: var(--color-primary);
}

.payment-option input[type="radio"]:checked {
  accent-color: var(--color-primary);
}

.payment-option span {
  flex: 1;
}

.payment-option strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  color: var(--color-dark);
}

.payment-option small {
  display: block;
  color: #666;
  margin-bottom: 0.5rem;
}

.payment-amount {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-top: 0.5rem;
}

.payment-note {
  background-color: rgba(237, 231, 199, 0.5);
  padding: 1rem;
  border-radius: 5px;
  border-left: 4px solid var(--color-primary);
}

.payment-note p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-dark);
}

/* Responsive Payment Options */
@media (max-width: 768px) {
  .payment-option {
    padding: 1rem;
  }
  
  .payment-option strong {
    font-size: 1rem;
  }
  
  .payment-amount {
    font-size: 1.1rem;
  }
}

/* Enhanced Scroll Animations */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Smooth Page Load Animations */
.about {
  animation: fadeInUp 0.8s ease-out;
}

.highlights {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.faq-section {
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

/* Enhanced Tourism Card Hover */
.tourism-card {
  position: relative;
  overflow: hidden;
}

.tourism-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(237, 231, 199, 0.3), transparent);
  transition: left 0.6s ease;
  z-index: 1;
}

.tourism-card:hover::before {
  left: 100%;
}

/* Enhanced Review Card */
.review-card {
  position: relative;
  overflow: hidden;
}

.review-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-cream));
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.review-card:hover::before {
  opacity: 0.3;
}

/* Improved Highlight List Animation */
/* Old highlight-list styles removed - using new Taj-style layout above */

/* Amenity Card Enhanced */
.amenity-card {
  position: relative;
}

.amenity-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(to top, rgba(139, 0, 0, 0.1), transparent);
  transition: height 0.4s ease;
}

.amenity-card:hover::after {
  height: 100%;
}

/* FAQ Item Enhanced Animation */
.faq-item {
  transition: all 0.3s ease;
}

.faq-item:hover {
  transform: translateX(5px);
}

.faq-item.active {
  box-shadow: 0 4px 15px rgba(139, 0, 0, 0.15);
}

/* Smooth Transitions for All Interactive Elements */
a, button, input, textarea, select {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Page Header Enhancement */
.page-header {
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(237, 231, 199, 0.2), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Booking Summary Sticky Enhancement */
.booking-summary {
  transition: all 0.3s ease;
}

.booking-summary:hover {
  box-shadow: 0 8px 30px rgba(139, 0, 0, 0.15);
}


@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.whatsapp-float:hover {
  animation: none;
}

/* Leaf Decorations for Araku Vibe */
.leaf-decoration {
  position: absolute;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.leaf-top-left {
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 Q30 30 20 50 Q30 70 50 90 Q40 70 40 50 Q40 30 50 10" fill="%23228B22" opacity="0.3"/><path d="M50 10 Q70 30 80 50 Q70 70 50 90 Q60 70 60 50 Q60 30 50 10" fill="%232E8B57" opacity="0.3"/></svg>') no-repeat center;
  background-size: contain;
  transform: rotate(-15deg);
  animation: leafFloat 6s ease-in-out infinite;
}

.leaf-top-right {
  top: -30px;
  right: -30px;
  width: 150px;
  height: 150px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 Q30 30 20 50 Q30 70 50 90 Q40 70 40 50 Q40 30 50 10" fill="%23228B22" opacity="0.3"/><path d="M50 10 Q70 30 80 50 Q70 70 50 90 Q60 70 60 50 Q60 30 50 10" fill="%232E8B57" opacity="0.3"/></svg>') no-repeat center;
  background-size: contain;
  transform: rotate(25deg);
  animation: leafFloat 7s ease-in-out infinite reverse;
}

.leaf-bottom-left {
  bottom: -40px;
  left: -40px;
  width: 180px;
  height: 180px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 Q30 30 20 50 Q30 70 50 90 Q40 70 40 50 Q40 30 50 10" fill="%23228B22" opacity="0.3"/><path d="M50 10 Q70 30 80 50 Q70 70 50 90 Q60 70 60 50 Q60 30 50 10" fill="%232E8B57" opacity="0.3"/></svg>') no-repeat center;
  background-size: contain;
  transform: rotate(45deg);
  animation: leafFloat 8s ease-in-out infinite;
}

.leaf-bottom-right {
  bottom: -20px;
  right: -20px;
  width: 160px;
  height: 160px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 Q30 30 20 50 Q30 70 50 90 Q40 70 40 50 Q40 30 50 10" fill="%23228B22" opacity="0.3"/><path d="M50 10 Q70 30 80 50 Q70 70 50 90 Q60 70 60 50 Q60 30 50 10" fill="%232E8B57" opacity="0.3"/></svg>') no-repeat center;
  background-size: contain;
  transform: rotate(-35deg);
  animation: leafFloat 5s ease-in-out infinite reverse;
}

@keyframes leafFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

/* Section with leaf decorations */
.section-with-leaves {
  position: relative;
  overflow: hidden;
}

/* Leaf border decoration */
.leaf-border {
  position: relative;
}

.leaf-border::before {
  content: '🍃';
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  opacity: 0.3;
  animation: leafSway 3s ease-in-out infinite;
}

.leaf-border::after {
  content: '🍃';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  font-size: 2rem;
  opacity: 0.3;
  animation: leafSway 3s ease-in-out infinite reverse;
}

@keyframes leafSway {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  50% {
    transform: translateY(-50%) rotate(10deg);
  }
}

/* Floating leaves background */
.floating-leaves {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.floating-leaf {
  position: absolute;
  font-size: 2.5rem;
  opacity: 0.4;
  animation: fall linear infinite;
  filter: drop-shadow(2px 2px 4px rgba(34, 139, 34, 0.3));
}

.floating-leaf:nth-child(1) {
  left: 10%;
  animation-duration: 15s;
  animation-delay: 0s;
}

.floating-leaf:nth-child(2) {
  left: 30%;
  animation-duration: 18s;
  animation-delay: 2s;
}

.floating-leaf:nth-child(3) {
  left: 50%;
  animation-duration: 20s;
  animation-delay: 4s;
}

.floating-leaf:nth-child(4) {
  left: 70%;
  animation-duration: 16s;
  animation-delay: 1s;
}

.floating-leaf:nth-child(5) {
  left: 90%;
  animation-duration: 19s;
  animation-delay: 3s;
}

@keyframes fall {
  0% {
    top: -10%;
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(20px) rotate(90deg);
  }
  50% {
    transform: translateX(-20px) rotate(180deg);
  }
  75% {
    transform: translateX(20px) rotate(270deg);
  }
  100% {
    top: 110%;
    transform: translateX(0) rotate(360deg);
  }
}

/* Green accent for Araku vibe */
.green-accent {
  color: #228B22;
}

.green-bg-subtle {
  background: linear-gradient(135deg, rgba(34, 139, 34, 0.05) 0%, transparent 100%);
}

/* Nature-inspired divider */
.nature-divider {
  text-align: center;
  margin: 3rem 0;
  position: relative;
}

.nature-divider::before {
  content: '🌿 🍃 🌿';
  font-size: 1.5rem;
  opacity: 0.5;
  filter: drop-shadow(1px 1px 2px rgba(34, 139, 34, 0.3));
}

/* Enhanced sections with nature theme */
.about, .highlights, .faq-section, .location {
  position: relative;
}

.about::before,
.highlights::before {
  content: '🍃';
  position: absolute;
  top: 20px;
  right: 5%;
  font-size: 4rem;
  opacity: 0.25;
  transform: rotate(25deg);
  animation: leafFloat 6s ease-in-out infinite;
  filter: drop-shadow(2px 2px 4px rgba(34, 139, 34, 0.2));
}

.faq-section::before {
  content: '🌿';
  position: absolute;
  top: 30px;
  left: 5%;
  font-size: 5rem;
  opacity: 0.25;
  transform: rotate(-15deg);
  animation: leafFloat 7s ease-in-out infinite reverse;
  filter: drop-shadow(2px 2px 4px rgba(34, 139, 34, 0.2));
}

.location::after {
  content: '🍃';
  position: absolute;
  bottom: 30px;
  right: 5%;
  font-size: 3.5rem;
  opacity: 0.25;
  transform: rotate(45deg);
  animation: leafFloat 5s ease-in-out infinite;
  filter: drop-shadow(2px 2px 4px rgba(34, 139, 34, 0.2));
}

/* Query Section on FAQ Page */
.query-section {
  padding: 60px 0;
  background: linear-gradient(135deg, rgba(237, 231, 199, 0.3) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.query-box {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--color-white);
  padding: 3rem;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(139, 0, 0, 0.15);
  border-top: 4px solid var(--color-primary);
}

.query-box h2 {
  color: var(--color-primary);
  margin-bottom: 1rem;
  text-align: center;
}

.query-box > p {
  text-align: center;
  color: #666;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.query-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.query-form .form-group {
  margin-bottom: 1.5rem;
}

.query-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--color-dark);
}

.query-form input,
.query-form textarea {
  width: 100%;
  padding: 0.9rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.query-form input:focus,
.query-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(139, 0, 0, 0.1);
}

.query-form textarea {
  resize: vertical;
  min-height: 150px;
}

.query-form .btn {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  margin-top: 1rem;
}

#query-form-message {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  display: none;
}

#query-form-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  display: block;
}

/* Responsive Query Form */
@media (max-width: 768px) {
  .query-box {
    padding: 2rem 1.5rem;
  }
  
  .query-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* ========================================
   HERO SLIDESHOW - TAJ STYLE
   ======================================== */

.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  /* overflow: hidden; - Removed to allow sticky positioning */
  margin-top: 0;
}

.slideshow-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
  z-index: 1;
}

.slide-content {
  position: absolute;
  bottom: 15%;
  left: 8%;
  right: 8%;
  z-index: 2;
  color: var(--color-white);
  max-width: 800px;
  animation: slideContentFadeIn 1s ease-out;
  text-align: left;
}

@keyframes slideContentFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-content h1 {
  font-family: var(--font-accent);
  font-size: 3.5rem;
  font-weight: 400;
  color: var(--color-white);
  margin-bottom: 1rem;
  letter-spacing: 2px;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.slide-content p {
  font-size: 1.3rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2rem;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.btn-hero {
  background-color: rgba(139, 0, 0, 0.9);
  color: var(--color-white);
  padding: 14px 40px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: all 0.4s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-hero:hover {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Slide Navigation Arrows */
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.slide-arrow:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-50%) scale(1.1);
}

.slide-arrow.prev {
  left: 40px;
}

.slide-arrow.next {
  right: 40px;
}

.slide-arrow svg {
  width: 24px;
  height: 24px;
}

/* Slideshow Dots */
.slideshow-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot:hover {
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.2);
}

.dot.active {
  background-color: var(--color-white);
  width: 32px;
  border-radius: 6px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .slide-content h1 {
    font-size: 2.8rem;
  }
  
  .slide-content p {
    font-size: 1.1rem;
  }
  
  .slide-arrow {
    width: 45px;
    height: 45px;
  }
  
  .slide-arrow.prev {
    left: 20px;
  }
  
  .slide-arrow.next {
    right: 20px;
  }
}

@media (max-width: 768px) {
  .hero-slideshow {
    height: 70vh;
    min-height: 500px;
  }
  
  .slide-content {
    left: 5%;
    right: 5%;
    bottom: 20%;
  }
  
  .slide-content h1 {
    font-size: 2rem;
    letter-spacing: 1px;
  }
  
  .slide-content p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .btn-hero {
    padding: 12px 30px;
    font-size: 0.85rem;
  }
  
  .slide-arrow {
    width: 40px;
    height: 40px;
  }
  
  .slide-arrow.prev {
    left: 15px;
  }
  
  .slide-arrow.next {
    right: 15px;
  }
  
  .slideshow-dots {
    bottom: 30px;
  }
}

@media (max-width: 480px) {
  .slide-content {
    left: 5%;
    right: 5%;
    bottom: 15%;
  }
  
  .slide-content h1 {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }
  
  .slide-content p {
    font-size: 0.9rem;
  }
  
  .slide-arrow {
    width: 35px;
    height: 35px;
  }
  
  .slide-arrow svg {
    width: 18px;
    height: 18px;
  }
}


/* ========================================
   GLOBAL IMAGE HOVER ANIMATIONS
   ======================================== */

img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.4s ease,
              filter 0.4s ease;
}

img:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  filter: brightness(1.05);
}

/* Specific image containers with border radius */
.feature-image img,
.room-card img,
.slide img {
  border-radius: 15px;
}

/* Duplicate feature card styles removed - using main styles above */

/* Ensure Book Now button text is white */
.nav-book-btn,
.nav-book-btn:visited,
.nav-book-btn:active {
  color: var(--color-white) !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

.navbar.scrolled .nav-book-btn,
.navbar.scrolled .nav-book-btn:hover,
.navbar.scrolled .nav-book-btn:active,
.navbar.scrolled .nav-book-btn:visited {
  color: var(--color-white) !important;
  text-shadow: none !important;
}

/* Room card images */
.room-card img {
  border-radius: 15px;
  width: 100%;
  height: 250px;
  object-fit: cover;
}

/* Tourism card images */
.tourism-card img {
  border-radius: 15px;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Review card images (if any) */
.review-card img {
  border-radius: 15px;
}

/* Amenity images */
.amenity-card img {
  border-radius: 15px;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Gallery images */
.gallery-item img {
  border-radius: 15px;
}

/* Map container */
.map-container iframe {
  border-radius: 15px;
}

/* Logo should not have hover effect */
.logo-img:hover {
  transform: none;
  filter: none;
}

/* Slide images should not scale on hover (they're in carousel) */
.slide img:hover {
  transform: none;
  filter: none;
}


/* GST Information Note */
.gst-note {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background-color: rgba(237, 231, 199, 0.3);
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--color-text);
}

.gst-note strong {
  color: var(--color-primary);
}


/* ========================================
   TOURISM CAROUSEL
   ======================================== */

.more-destinations {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 2px solid rgba(139, 0, 0, 0.1);
}

.more-destinations h2 {
  text-align: center;
  margin-bottom: 0.5rem;
}

.section-subtitle {
  text-align: center;
  color: var(--color-text);
  font-size: 1.1rem;
  margin-bottom: 3rem;
}

.tourism-carousel-container {
  position: relative;
  padding: 0 40px; /* Mobile-first: smaller padding */
}

.tourism-carousel {
  overflow: hidden;
  width: 100%;
}

.tourism-carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 2rem;
}

.tourism-carousel .tourism-card {
  flex: 0 0 calc(33.333% - 1.35rem);
  min-width: calc(33.333% - 1.35rem);
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.carousel-nav:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(139, 0, 0, 0.3);
}

.carousel-nav.prev-tourism {
  left: 0;
}

.carousel-nav.next-tourism {
  right: 0;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(139, 0, 0, 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-dot.active {
  background-color: var(--color-primary);
  width: 32px;
  border-radius: 6px;
}

.carousel-dot:hover {
  background-color: rgba(139, 0, 0, 0.6);
}

/* Responsive Tourism Carousel */
@media (max-width: 1024px) {
  .tourism-carousel .tourism-card {
    flex: 0 0 calc(50% - 1rem);
    min-width: calc(50% - 1rem);
  }
}

@media (max-width: 768px) {
  .tourism-carousel-container {
    padding: 0 50px;
  }
  
  .tourism-carousel .tourism-card {
    flex: 0 0 100%;
    min-width: 100%;
  }
  
  .carousel-nav {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .tourism-carousel-container {
    padding: 0 40px;
  }
  
  .carousel-nav {
    width: 35px;
    height: 35px;
  }
  
  .carousel-nav svg {
    width: 18px;
    height: 18px;
  }
}





/* ========================================
   HIDDEN ADMIN ACCESS LINK
   ======================================== */

.admin-access {
  position: absolute;
  bottom: 10px;
  left: 48px;
  font-size: 1.5rem;
  opacity: 0.7;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 100;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

.admin-access:hover {
  opacity: 1;
  transform: scale(1.3) rotate(90deg);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

.footer-bottom {
  position: relative;
}

/* Responsive Admin Access */
@media (max-width: 768px) {
  .admin-access {
    font-size: 0.9rem;
    bottom: 5px;
    left: 38px;
  }
}


/* ========================================
   CROSS-BROWSER COMPATIBILITY
   ======================================== */

/* Reset and normalize for all browsers */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Smooth scrolling for all browsers */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Fix for iOS Safari */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Flexbox compatibility */
.nav-menu,
.footer-content,
.stats-grid,
.features,
.rooms-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Grid compatibility */
@supports not (display: grid) {
  .features,
  .rooms-grid,
  .amenities-grid-large,
  .tourism-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .feature-card,
  .room-card,
  .amenity-card,
  .tourism-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(33.333% - 2rem);
    flex: 0 0 calc(33.333% - 2rem);
  }
}

/* Transform compatibility */
.btn,
.feature-card,
.room-card {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.btn:hover,
.feature-card:hover,
.room-card:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

/* Border radius compatibility */
.btn,
.room-card,
.feature-card,
.amenity-card {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

/* Box shadow compatibility */
.navbar.scrolled,
.room-card,
.feature-card {
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Gradient compatibility */
.hero,
.page-header,
.btn-primary {
  background: -webkit-linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  background: -o-linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

/* Filter compatibility */
.admin-access {
  -webkit-filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

/* Backdrop filter fallback */
@supports not (backdrop-filter: blur(10px)) {
  .navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
  }
}

/* Object-fit fallback for IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .room-card img,
  .feature-image img,
  .tourism-card img {
    width: 100%;
    height: auto;
  }
}

/* Sticky positioning fallback - REMOVED to allow relative positioning */
/* @supports not (position: sticky) {
  .navbar {
    position: fixed;
  }
} */

/* CSS Variables fallback for older browsers */
@supports not (--css: variables) {
  :root {
    /* Fallback colors */
  }
  
  .btn-primary {
    background: #8b0000;
  }
  
  .page-header {
    background: #8b0000;
  }
}

/* Flexbox gap fallback */
@supports not (gap: 1rem) {
  .nav-menu > * {
    margin-right: 2rem;
  }
  
  .nav-menu > *:last-child {
    margin-right: 0;
  }
  
  .features > *,
  .rooms-grid > * {
    margin: 1rem;
  }
}

/* Animation compatibility */
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* Input appearance for all browsers */
input,
textarea,
select,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Restore checkbox appearance */
input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
}

/* Remove default button styles */
button {
  border: none;
  background: none;
  cursor: pointer;
}

/* Fix for Safari date inputs */
input[type="date"],
input[type="time"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

/* Prevent text size adjustment on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Fix for iOS input zoom */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

/* Print styles */
@media print {
  .navbar,
  .whatsapp-float,
  .admin-access {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-primary {
    border: 2px solid currentColor;
  }
  
  .navbar {
    border-bottom: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  /* Keep light theme for now, but structure is ready */
}


/* ========================================
   MOBILE-FIRST RESPONSIVE BREAKPOINTS
   ======================================== */

/* ========================================
   TABLET LAYOUT: 601px to 1024px
   ======================================== */
@media (min-width: 601px) and (max-width: 1024px) {
  /* Base adjustments for tablet */
  body {
    font-size: 16px;
  }

  .container {
    padding: 0 25px;
    max-width: 100%;
  }

  /* Typography for tablet */
  h1 {
    font-size: 2.2rem;
  }

  h1.section-heading {
    font-size: 1.9rem;
  }

  h2 {
    font-size: 1.9rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  /* Logo for tablet */
  .logo-img {
    height: 60px;
    width: 80px;
  }

  .logo {
    margin-left: 0; /* Fixed: removed negative margin */
  }

  /* Nav container for tablet */
  .nav-container {
    padding: 1.3rem 0;
  }

  /* Buttons for tablet */
  .btn {
    width: auto;
    padding: 12px 30px;
    font-size: 1rem;
  }

  /* Hero section for tablet */
  .hero,
  .hero-slideshow {
    height: 500px;
  }

  .hero-content h1,
  .slide-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p,
  .slide-content p {
    font-size: 1.2rem;
  }

  /* Page header for tablet */
  .page-header {
    padding: 80px 25px 80px; /* Normal padding for static navbar */
  }

  .page-header h1 {
    font-size: 2.2rem;
  }

  .page-header p {
    font-size: 1.1rem;
  }

  /* Sections padding for tablet */
  .about,
  .highlights,
  .location,
  .rooms-section,
  .amenities-section,
  .amenities-preview,
  .tourism-section,
  .reviews-section,
  .faq-section,
  .booking-section,
  .contact-section,
  .query-section,
  .dhimsa-video-section,
  .breakfast-menu {
    padding: 50px 0;
  }

  /* Dhimsa video section for tablet */
  .dhimsa-video-section h2 {
    font-size: 2.2rem;
  }

  .video-description {
    font-size: 1.1rem;
  }

  .video-container {
    max-width: 1000px;
  }

  /* 2-column grid layouts for tablet */
  .features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  /* Amenities icons grid for tablet */
  .amenities-icons-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1200px;
  }

  .amenity-icon-item {
    padding: 2.5rem 1.5rem;
  }

  .amenity-icon-item img {
    width: 100px;
    height: 100px;
  }

  .amenity-icon-item p {
    font-size: 1.05rem;
  }

  .room-amenities-included h2 {
    font-size: 2rem;
  }

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

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

  .amenities-grid-large {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

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

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

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

  /* Highlights section for tablet */
  .highlights-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
  }

  .highlights-image {
    height: 400px;
  }

  .highlights-text h2 {
    font-size: 2rem;
    text-align: left;
  }

  .highlights-text h2::after {
    left: 0;
    transform: translateX(0);
  }

  .highlights-description {
    font-size: 1rem;
  }

  /* Location section for tablet */
  .location-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .map-container {
    width: 100%;
  }

  .map-container iframe {
    height: 400px;
  }

  /* Carousels for tablet */
  .tourism-carousel-container,
  .guest-carousel-container {
    padding: 0 50px;
  }

  /* Booking section for tablet */
  .booking-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
  }

  .booking-summary {
    position: sticky;
    top: 100px;
  }

  /* Contact section for tablet */
  .contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .contact-info h2,
  .contact-form h2 {
    text-align: left;
    font-size: 1.8rem;
  }

  /* Map section for tablet */
  .map-section iframe {
    height: 400px;
  }

  /* Cultural experiences for tablet */
  .experience-item {
    gap: 2.5rem;
    margin-bottom: 3rem;
  }

  .experience-image img {
    height: 300px;
  }

  .experience-content {
    padding: 2.5rem;
  }

  .experience-content h3 {
    font-size: 1.8rem;
  }

  /* Mobile and Tablet Portrait: Change cultural activities layout */
  @media (max-width: 768px) and (orientation: portrait), 
         (max-width: 1024px) and (orientation: portrait) {
    .experience-item {
      flex-direction: column !important;
      gap: 0;
      margin-bottom: 2rem;
    }
    
    .experience-image,
    .experience-content {
      width: 100%;
    }
    
    .experience-content {
      order: 1;
      padding: 1.5rem 0;
    }
    
    .experience-image {
      order: 2;
    }
    
    .experience-image img {
      height: 250px;
      border-radius: 12px;
    }
  }

  .experience-icon {
    font-size: 3.5rem;
  }

  /* Query section for tablet */
  .query-box {
    padding: 2.5rem;
  }

  .query-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  /* WhatsApp button for tablet */
  .whatsapp-float {
    /* Tablet styles moved to sticky-fix.css */
  }

  /* Booking form heading for tablet */
  .booking-form h2 {
    text-align: left;
  }

  /* Form rows for tablet */
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .form-row.three-cols {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer for tablet */
  .footer-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  /* Tourism carousel for tablet */
  .tourism-carousel .tourism-card {
    flex: 0 0 calc(50% - 1rem);
    min-width: calc(50% - 1rem);
  }

  /* Image heights for tablet */
  .feature-image {
    height: 220px;
  }

  .room-card img {
    height: 220px;
  }

  .amenity-card img {
    height: 280px;
  }

  .tourism-card img {
    height: 220px;
  }
}

/* ========================================
   DESKTOP/LAPTOP LAYOUT: 1025px and above
   ======================================== */
@media (min-width: 1025px) {
  /* Base adjustments for desktop */
  body {
    font-size: 18px;
  }

  .container {
    max-width: 1500px;
    padding: 0 40px;
  }

  /* Typography for desktop */
  h1 {
    font-size: 3rem;
  }

  h1.section-heading {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 1.8rem;
  }

  /* Logo for desktop */
  .logo-img {
    height: 100px;
    width: 130px;
  }

  .logo {
    margin-left: 0; /* Fixed: removed negative margin */
  }

  /* Nav container for desktop */
  .nav-container {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Buttons for desktop */
  .btn {
    width: auto;
    padding: 12px 30px;
    font-size: 1rem;
  }

  /* Hero section for desktop */
  .hero,
  .hero-slideshow {
    height: 100vh;
    min-height: 600px;
  }

  .hero-content h1,
  .slide-content h1 {
    font-size: 3.5rem;
  }

  .hero-content p,
  .slide-content p {
    font-size: 1.3rem;
  }

  /* Page header for desktop */
  .page-header {
    padding: 100px 40px 40px; /* Normal padding for static navbar */
  }

  .page-header h1 {
    font-size: 3rem;
  }

  .page-header p {
    font-size: 1.2rem;
  }

  /* Sections padding for desktop */
  .about,
  .highlights,
  .location,
  .rooms-section,
  .amenities-section,
  .amenities-preview,
  .tourism-section,
  .reviews-section,
  .faq-section,
  .booking-section,
  .contact-section,
  .query-section,
  .dhimsa-video-section,
  .breakfast-menu {
    padding: 60px 0;
  }

  /* Dhimsa video section for desktop */
  .dhimsa-video-section h2 {
    font-size: 2.5rem;
  }

  .video-description {
    font-size: 1.15rem;
    margin-bottom: 3rem;
  }

  .video-container {
    max-width: 1200px;
  }

  /* Multi-column grid layouts for desktop */
  .features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  /* Amenities icons grid for desktop */
  .amenities-icons-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    max-width: 1400px;
  }

  .amenity-icon-item {
    padding: 3rem 2rem;
  }

  .amenity-icon-item img {
    width: 110px;
    height: 110px;
    border: 4px solid var(--color-white);
  }

  .amenity-icon-item p {
    font-size: 1.1rem;
  }

  .room-amenities-included {
    padding: 70px 0;
  }

  .room-amenities-included h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
  }

  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  .amenities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .amenities-grid-large {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .tourism-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  .reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

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

  /* Highlights section for desktop */
  .highlights-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  .highlights-image {
    height: 600px;
  }

  .highlights-text {
    padding: 2rem 0;
  }

  .highlights-text h2 {
    font-size: 2.5rem;
    text-align: left;
  }

  .highlights-text h2::after {
    display: none;
  }

  .highlights-description {
    font-size: 1.1rem;
    line-height: 1.8;
  }

  /* Location section for desktop */
  .location-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .map-container {
    width: 100%;
  }

  .map-container iframe {
    height: 500px;
  }

  /* Carousels for desktop */
  .tourism-carousel-container,
  .guest-carousel-container {
    padding: 0 60px;
  }

  /* Booking section for desktop */
  .booking-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
  }

  .booking-summary {
    position: sticky;
    top: 100px;
  }

  /* Contact section for desktop */
  .contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  /* Form rows for desktop */
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .form-row.three-cols {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer for desktop */
  .footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  /* Tourism carousel for desktop */
  .tourism-carousel .tourism-card {
    flex: 0 0 calc(33.333% - 1.35rem);
    min-width: calc(33.333% - 1.35rem);
  }

  /* Image heights for desktop */
  .feature-image {
    height: 250px;
  }

  .room-card img {
    height: 250px;
  }

  .amenity-card img {
    height: 320px;
  }

  .tourism-card img {
    height: 250px;
  }

  /* Room and card info padding */
  .room-info {
    padding: 2rem;
  }

  .feature-card {
    padding: 1.5rem;
  }

  .amenity-item {
    padding: 2rem;
  }

  /* About section text */
  .about > .container > p {
    font-size: 1.1rem;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Contact section for desktop */
  .contact-info h2,
  .contact-form h2 {
    text-align: left;
    font-size: 1.8rem;
  }

  /* Map section for desktop */
  .map-section iframe {
    height: 500px;
  }

  /* Cultural experiences for desktop */
  .cultural-experiences-section {
    padding: 70px 0;
  }

  .experience-item {
    gap: 3rem;
    margin-bottom: 4rem;
  }

  .experience-image img {
    height: 400px;
  }

  .experience-content {
    padding: 3rem;
  }

  .experience-content h3 {
    font-size: 2rem;
  }

  .experience-content p {
    font-size: 1.1rem;
  }

  .experience-icon {
    font-size: 4rem;
  }

  /* Query section for desktop */
  .query-box {
    max-width: 800px;
    padding: 3rem;
  }

  .query-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  /* WhatsApp button for desktop */
  .whatsapp-float {
    /* Desktop styles moved to sticky-fix.css */
  }

  /* Booking form heading for desktop */
  .booking-form h2 {
    text-align: left;
  }

  /* FAQ container for desktop */
  .faq-container {
    max-width: 800px;
  }

  .faq-question {
    padding: 1.5rem;
    font-size: 1rem;
  }

  .faq-answer {
    padding: 1.5rem;
    font-size: 1rem;
  }

  /* Reviews for desktop */
  .overall-rating {
    padding: 3rem;
  }

  .rating-score .score {
    font-size: 4rem;
  }

  .rating-score .stars {
    font-size: 2rem;
  }

  .review-card {
    padding: 2rem;
  }

  /* Footer for desktop */
  .footer {
    padding: 3rem 0 1rem;
    margin-top: 4rem;
    font-size: 1.2rem;
  }
}

/* Mobile menu styles (applies to all mobile/tablet) */
@media (max-width: 1024px) {
  /* Navigation - Mobile Menu */
  .navbar .nav-menu a {
    color: #000 !important;
    text-shadow: none !important;
  }
  
  /* Exception: Keep Book Now button text white */
  .navbar .nav-menu a.nav-book-btn,
  .navbar .nav-menu a.btn-navbook {
    color: var(--color-white) !important;
    text-shadow: none !important;
  }
  
  .navbar .nav-menu a:hover,
  .navbar .nav-menu a.active {
    color: #62b784 !important;
    text-shadow: none !important;
  }
  
  /* Exception: Keep Book Now button hover colors context-aware */
  .navbar .nav-menu a.nav-book-btn:hover,
  .navbar .nav-menu a.nav-book-btn.active,
  .navbar .nav-menu a.btn-navbook:hover,
  .navbar .nav-menu a.btn-navbook.active {
    background-color: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
    text-shadow: none !important;
  }
  
  /* Home page: red hover */
  .home-page .navbar .nav-menu a.btn-navbook:hover,
  .home-page .navbar .nav-menu a.btn-navbook.active {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    text-shadow: none !important;
  }

  .navbar.scrolled .nav-menu a {
    color: #000 !important;
    text-shadow: none !important;
  }
  
  /* Exception: Keep Book Now button text white when scrolled */
  .navbar.scrolled .nav-menu a.nav-book-btn,
  .navbar.scrolled .nav-menu a.btn-navbook {
    color: var(--color-white) !important;
    text-shadow: none !important;
  }
  
  .navbar.scrolled .nav-menu a:hover,
  .navbar.scrolled .nav-menu a.active {
    color: #62b784 !important;
    text-shadow: none !important;
  }
  
  /* Exception: Book Now button scrolled hover - always red */
  .navbar.scrolled .nav-menu a.nav-book-btn:hover,
  .navbar.scrolled .nav-menu a.nav-book-btn.active,
  .navbar.scrolled .nav-menu a.btn-navbook:hover,
  .navbar.scrolled .nav-menu a.btn-navbook.active {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    text-shadow: none !important;
  }
  
  /* Exception: Keep Book Now button text white when scrolled and hovered */
  .navbar.scrolled .nav-menu a.nav-book-btn:hover,
  .navbar.scrolled .nav-menu a.nav-book-btn.active {
    color: var(--color-white) !important;
    text-shadow: none !important;
  }

  .nav-menu {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
  }

  .nav-toggle-label span {
    background-color: var(--color-white);
  }

  .navbar.scrolled .nav-toggle-label span {
    background-color: var(--color-dark);
  }
}

/* Additional mobile-specific adjustments already handled in base mobile-first styles */

/* Extra small devices handled in base mobile-first styles */

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  .hero,
  .hero-slideshow {
    height: 100vh;
    min-height: 400px;
  }

  .slide-content {
    bottom: 10%;
  }

  .slide-content h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .slide-content p {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .btn-hero {
    padding: 10px 30px;
  }
}

/* Print styles */
@media print {
  .navbar,
  .whatsapp-float,
  .floating-leaves,
  .slideshow-dots,
  .slide-arrow,
  .carousel-nav,
  .btn {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  .container {
    max-width: 100%;
  }

  .page-header {
    background: #fff;
    color: #000;
    border-bottom: 2px solid #000;
  }
}

/* Dhimsa Video Section */
.dhimsa-video-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.dhimsa-video-section h2 {
  text-align: center;
  color: #8b0000;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.video-description {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2rem;
  color: #555;
  font-size: 1.1rem;
  line-height: 1.6;
}

.video-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.video-container video {
  width: 100%;
  height: auto;
  display: block;
}

.mute-toggle-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.mute-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
  border-color: #8b0000;
}

.mute-toggle-btn:active {
  transform: scale(0.95);
}

.mute-icon {
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .dhimsa-video-section h2 {
    font-size: 2rem;
  }
  
  .video-description {
    font-size: 1rem;
    padding: 0 1rem;
  }
  
  .mute-toggle-btn {
    width: 40px;
    height: 40px;
    top: 15px;
    right: 15px;
  }
  
  .mute-icon {
    font-size: 1.2rem;
  }
}

/* Keep h3 styling same as h4 in breakfast menu */
.breakfast-menu .menu-item h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #8b0000;
  font-weight: 600;
}

/* Tourism Carousel Styles */
.tourism-carousel-container {
  position: relative;
  padding: 0 60px;
  margin: 2rem 0;
}

.tourism-carousel {
  overflow: hidden;
  width: 100%;
}

.tourism-carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  gap: 20px;
}

.tourism-carousel-track .tourism-card {
  flex: 0 0 calc(33.333% - 14px);
  min-width: calc(33.333% - 14px);
  margin: 0;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(139, 0, 0, 0.9);
  border: none;
  color: white;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.carousel-nav:hover {
  background: rgba(139, 0, 0, 1);
  transform: translateY(-50%) scale(1.1);
}

.carousel-nav.prev-tourism {
  left: 0;
}

.carousel-nav.next-tourism {
  right: 0;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-dot.active {
  background: #8b0000;
  transform: scale(1.3);
}

.carousel-dot:hover {
  background: #a52a2a;
}

@media (max-width: 1024px) {
  .tourism-carousel-track .tourism-card {
    flex: 0 0 calc(50% - 10px);
    min-width: calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .tourism-carousel-container {
    padding: 0 50px;
  }
  
  .tourism-carousel-track {
    gap: 15px;
  }
  
  .tourism-carousel-track .tourism-card {
    flex: 0 0 100%;
    min-width: 100%;
  }
  
  .carousel-nav {
    width: 40px;
    height: 40px;
  }
}

/* Booking Room Options with Images */
.room-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.room-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.room-option:hover {
  border-color: #8b0000;
  box-shadow: 0 4px 12px rgba(139, 0, 0, 0.1);
  transform: translateY(-2px);
}

.room-option input[type="radio"]:checked ~ .room-option-content,
.room-option:has(input[type="radio"]:checked) {
  border-color: #8b0000;
  background: rgba(139, 0, 0, 0.05);
}

.room-option-img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.room-option-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.room-option input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

.room-option span {
  font-size: 1rem;
  color: #333;
  font-weight: 500;
}

.room-option small {
  color: #666;
  font-weight: 400;
}

@media (max-width: 768px) {
  .room-option {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .room-option-img {
    width: 100%;
    height: 150px;
  }
  
  .room-option-content {
    width: 100%;
  }
}

/* Image Modal/Lightbox */
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.image-modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: zoomIn 0.3s ease;
  border-radius: 8px;
}

@keyframes zoomIn {
  from { transform: translate(-50%, -50%) scale(0.7); }
  to { transform: translate(-50%, -50%) scale(1); }
}

.image-modal-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  z-index: 10000;
  line-height: 1;
}

.image-modal-close:hover,
.image-modal-close:focus {
  color: #bbb;
  transform: scale(1.2);
}

.image-modal-caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
}

.room-option-img {
  cursor: pointer;
  position: relative;
}

.room-option-img:hover {
  opacity: 0.9;
}

.room-option-img::after {
  content: '🔍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.room-option-img:hover::after {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .image-modal-content {
    max-width: 95%;
    max-height: 80vh;
  }
  
  .image-modal-close {
    top: 10px;
    right: 20px;
    font-size: 40px;
  }
  
  .image-modal-caption {
    font-size: 1rem;
    bottom: 20px;
  }
}

/* Prevent modal image from moving on hover */
.image-modal-content:hover {
  transform: translate(-50%, -50%) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Guest Highlights Section */
.guest-highlights {
  padding: 5rem 0;
  background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
}

.guest-highlights h2 {
  text-align: center;
  color: #8b0000;
  margin-bottom: 0.5rem;
  font-size: 2.5rem;
}

.guest-highlights .section-subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 3rem;
  font-size: 1.1rem;
}

.guest-carousel-container {
  position: relative;
  padding: 0 40px; /* Reduced for mobile */
  margin: 2rem 0;
}

.guest-carousel {
  overflow: hidden;
  width: 100%;
}

.guest-carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  gap: 25px;
}

.guest-highlight-card {
  flex: 0 0 calc(33.333% - 17px);
  min-width: calc(33.333% - 17px);
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.guest-highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(139, 0, 0, 0.2);
}

.guest-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.guest-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.guest-highlight-card:hover .guest-image img {
  transform: scale(1.05);
}

.guest-review {
  padding: 1.5rem;
}

.guest-rating {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: #ffa500;
}

.guest-comment {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1rem;
  font-style: italic;
  min-height: 80px;
}

.guest-name {
  font-size: 0.9rem;
  color: #8b0000;
  font-weight: 600;
  text-align: right;
}

.prev-guest,
.next-guest {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(139, 0, 0, 0.9);
  border: none;
  color: white;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.prev-guest:hover,
.next-guest:hover {
  background: rgba(139, 0, 0, 1);
  transform: translateY(-50%) scale(1.1);
}

.prev-guest {
  left: 0;
}

.next-guest {
  right: 0;
}

@media (max-width: 1024px) {
  .guest-carousel-track {
    gap: 20px;
  }
  
  .guest-highlight-card {
    flex: 0 0 calc(50% - 10px);
    min-width: calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .guest-highlights {
    padding: 3rem 0;
  }
  
  .guest-highlights h2 {
    font-size: 2rem;
  }
  
  .guest-carousel-container {
    padding: 0 50px;
  }
  
  .guest-carousel-track {
    gap: 15px;
  }
  
  .guest-highlight-card {
    flex: 0 0 100%;
    min-width: 100%;
  }
  
  .guest-image {
    height: 200px;
  }
  
  .guest-comment {
    min-height: auto;
  }
  
  .prev-guest,
  .next-guest {
    width: 40px;
    height: 40px;
  }
}

/* Required field indicator */
.required {
  color: #dc3545;
  font-weight: bold;
  margin-left: 3px;
}

label .required {
  color: #dc3545;
}

h3 .required {
  color: #dc3545;
  font-size: 1.2rem;
}

/* Terms and Conditions Checkbox */
.terms {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.terms label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: #333;
}

.terms input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #8b0000;
  appearance: auto;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
}

.terms span {
  user-select: none;
}

.terms label:hover {
  color: #8b0000;
}

/* Payment Options Styling */
.payment-type-section {
  margin: 2rem 0;
}

.payment-type-section h4 {
  color: #333;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.payment-options {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.payment-option {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.payment-option:hover {
  border-color: #8b0000;
  box-shadow: 0 4px 12px rgba(139, 0, 0, 0.1);
}

.payment-option input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #8b0000;
}

.payment-option input[type="radio"]:checked {
  accent-color: #8b0000;
}

.payment-option:has(input[type="radio"]:checked) {
  border-color: #8b0000;
  background: rgba(139, 0, 0, 0.05);
  box-shadow: 0 4px 12px rgba(139, 0, 0, 0.15);
}

.payment-option span {
  flex: 1;
}

.payment-option strong {
  color: #333;
  font-size: 1.05rem;
}

.payment-option small {
  color: #666;
  font-size: 0.9rem;
}

.payment-amount {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #8b0000;
}

.payment-note {
  padding: 1rem;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  margin-top: 1rem;
}

.payment-note p {
  margin: 0;
  color: #856404;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .payment-options {
    flex-direction: column;
  }
}

/* Fees Tooltip Styling */
.fees-tooltip {
  position: relative;
  display: inline-block;
  color: #007bff;
  cursor: help;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.fees-tooltip:hover {
  color: #0056b3;
}

.fees-tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: 180px;
  background-color: #333;
  color: #ffffff !important;
  text-align: left;
  border-radius: 6px;
  padding: 0.75rem;
  position: absolute;
  z-index: 1000;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  line-height: 1.6;
  font-weight: normal;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.fees-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.fees-tooltip:hover .fees-tooltip-text {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {
  .fees-tooltip-text {
    width: 160px;
    font-size: 0.8rem;
    bottom: 130%;
  }
}

/* Info Tooltip Styling (for children age info) */
.info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: #9ca3af;
  color: #ffffff;
  border-radius: 50%;
  cursor: help;
  font-size: 0.75rem;
  font-weight: bold;
  margin-left: 0.35rem;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}

.info-tooltip:hover {
  background-color: #4b5563;
}

.info-tooltip::before {
  content: attr(title);
  visibility: hidden;
  opacity: 0;
  width: 200px;
  background-color: #333;
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
  padding: 0.5rem;
  position: absolute;
  z-index: 1000;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: normal;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: normal;
  pointer-events: none;
}

.info-tooltip::after {
  content: "";
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.info-tooltip:hover::before,
.info-tooltip:hover::after {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {
  .info-tooltip::before {
    width: 180px;
    font-size: 0.8rem;
  }
}


/* ============================================
   NAVBAR SCROLLED - FINAL OVERRIDE
   ============================================ */
.navbar.scrolled {
  background-color: white !important;
  background: white !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15) !important;
}

.navbar.scrolled .nav-menu a {
  color: black !important;
  text-shadow: none !important;
}

.navbar.scrolled .nav-menu a:hover,
.navbar.scrolled .nav-menu a.active {
  color: #62b784 !important;
}


/* ============================================
   NAVBAR SCROLLED - ABSOLUTE FINAL
   ============================================ */
nav.navbar.scrolled,
.navbar.scrolled {
  background: white !important;
  background-color: white !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.navbar.scrolled .nav-container {
  background: white !important;
  background-color: white !important;
}

.navbar.scrolled .nav-menu {
  background: white !important;
}

.navbar.scrolled .nav-menu a {
  color: #000 !important;
  text-shadow: none !important;
}

.navbar.scrolled .nav-menu a:hover {
  color: #62b784 !important;
}


/* ============================================
   DESKTOP NAVBAR SCROLLED - MEDIA QUERY
   ============================================ */
@media (min-width: 1025px) {
  .navbar.scrolled {
    background: white !important;
    background-color: white !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
  }
  
  .navbar.scrolled .nav-menu a {
    color: #000 !important;
    text-shadow: none !important;
  }
  
  .navbar.scrolled .nav-menu a:hover,
  .navbar.scrolled .nav-menu a.active {
    color: #62b784 !important;
    text-shadow: none !important;
  }
  
  .navbar.scrolled .nav-container {
    background: white !important;
  }
}


/* ============================================
   MODAL SLIDESHOW ARROWS
   ============================================ */
.modal-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  transition: all 0.3s ease;
}

.modal-prev {
  left: 20px;
}

.modal-next {
  right: 20px;
}

.modal-slide-arrow:hover {
  background: rgba(139, 0, 0, 0.95);
  color: white;
  transform: translateY(-50%) scale(1.1);
}

.modal-slide-arrow svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 768px) {
  .modal-slide-arrow {
    width: 40px;
    height: 40px;
  }
  
  .modal-slide-arrow svg {
    width: 24px;
    height: 24px;
  }
  
  .modal-prev {
    left: 10px;
  }
  
  .modal-next {
    right: 10px;
  }
}

/* Coupon Message Styles */
.coupon-message {
    padding: 1rem;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 1rem;
}

.coupon-message.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #22c55e;
}

.coupon-message.error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #ef4444;
}

.coupon-message.info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #3b82f6;
}

/* Phone input styling */
#customer-phone {
    font-family: monospace;
    letter-spacing: 1px;
}

/* Coupon code input styling */
#coupon-code {
    font-family: monospace;
    font-weight: bold;
}

/* Discount section */
#discount-section {
    background: #dcfce7;
    border: 1px solid #22c55e;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

/* Button hover effects */
.btn-coupon:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-coupon:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
/* ========================================
   COMPREHENSIVE RESPONSIVE FIXES
   All Device Compatibility - Mobile, Tablet, Desktop
   ======================================== */

/* ========================================
   GLOBAL FIXES
   ======================================== */

/* Prevent horizontal scroll on all devices - FIXED: Don't use overflow-x hidden as it breaks sticky positioning */
html, body {
  /* overflow-x: hidden; - REMOVED: This breaks position: sticky */
  width: 100%;
  max-width: 100vw; /* Use max-width instead to prevent horizontal scroll */
}

* {
  box-sizing: border-box;
}

/* Smooth transitions without jitter */
* {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ========================================
   BUTTON HOVER FIX - NO JITTER
   ======================================== */

.btn {
  will-change: transform, box-shadow, filter;
  backface-visibility: hidden;
}

.btn-primary:hover,
.nav-book-btn:hover {
  /* Smooth hover animation matching btn-highlights */
  box-shadow: 0 8px 20px rgba(139, 0, 0, 0.3);
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Remove any ::before pseudo-element animations that cause jitter */
.btn::before {
  display: none !important;
}

/* Remove any ::after pseudo-elements that might cause white lines */
.btn::after {
  display: none !important;
}

/* Remove focus outlines that might cause white lines */
.btn:focus,
.btn:focus-visible,
#razorpay-button:focus,
#razorpay-button:focus-visible {
  outline: none !important;
  box-shadow: 0 6px 25px rgba(139, 0, 0, 0.45) !important;
}

/* Specific fix for payment button white line issue */
#razorpay-button {
  border: none !important;
  outline: none !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  background-image: linear-gradient(135deg, #8b0000 0%, #6b0000 100%) !important;
  background-color: #8b0000 !important;
}

#razorpay-button::before,
#razorpay-button::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
}

.payment-section {
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Force remove any text decorations from all button elements */
button, .btn, .btn-primary {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
}

/* Remove any potential underlines from parent containers */
.payment-section,
.section-card,
.terms {
  text-decoration: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Aggressive fix for any remaining pseudo-elements */
*[id*="razorpay"]::before,
*[id*="razorpay"]::after,
.payment-section::before,
.payment-section::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Fix for potential emoji/font rendering issues */
#razorpay-button {
  font-smoothing: antialiased !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
}

/* Remove any potential box-shadow that might appear as a line */
#razorpay-button:focus,
#razorpay-button:active,
#razorpay-button:hover {
  box-shadow: 0 6px 25px rgba(139, 0, 0, 0.45) !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Fix potential z-index and transform issues */
#razorpay-button {
  z-index: 999 !important;
  transform: none !important;
  -webkit-transform: none !important;
  position: relative !important;
  isolation: isolate !important;
}

/* Ensure parent containers don't interfere */
.payment-section {
  z-index: 1 !important;
  transform: none !important;
  position: relative !important;
  isolation: isolate !important;
}

/* Fix for potential browser rendering issues */
#razorpay-button {
  will-change: auto !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* FINAL COMPREHENSIVE FIX FOR WHITE LINE ISSUE */
#razorpay-button {
  /* Reset all potential interfering properties */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  
  /* Remove any potential lines or decorations */
  border-image: none !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  
  /* Fix background to ensure no gaps */
  background-clip: padding-box !important;
  background-origin: padding-box !important;
  background-attachment: scroll !important;
  
  /* Remove any potential text effects */
  text-shadow: none !important;
  text-stroke: none !important;
  -webkit-text-stroke: none !important;
  
  /* Fix display and layout */
  display: block !important;
  vertical-align: baseline !important;
  
  /* Override any inherited transitions that might cause visual artifacts */
  transition: box-shadow 0.3s ease, filter 0.3s ease !important;
  
  /* FORCE SOLID BACKGROUND - NO GAPS */
  background: #8b0000 !important;
  background-color: #8b0000 !important;
  background-image: none !important;
}

/* Ensure all parent containers have matching backgrounds to prevent gray showing through */
.payment-section {
  background: white !important;
  margin: 2rem 0 !important;
  padding: 1rem 0 !important;
}

.booking-summary-enhanced {
  background: white !important;
  padding-bottom: 2rem !important;
}

.section-card {
  background: white !important;
  padding-bottom: 3rem !important;
}

.section-navigation {
  margin-top: 2rem !important;
  padding-top: 1rem !important;
  background: white !important;
}

/* Force the booking section to have white background instead of gray */
.booking-section {
  background-color: white !important;
}

/* Remove any potential pseudo-element content from ALL elements in payment flow */
.payment-section *::before,
.payment-section *::after,
.terms *::before,
.terms *::after {
  content: none !important;
  display: none !important;
}

/* ========================================
   NAVBAR SCROLL ANIMATION FIX
   ======================================== */

.navbar {
  will-change: background-color, box-shadow;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  transform: translateZ(0);
}

.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px);
}

/* Ensure nav links transition smoothly */
.nav-menu a {
  transition: color 0.3s ease;
}

/* ========================================
   MOBILE NAVIGATION FIX
   ======================================== */

@media (max-width: 1024px) {
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.98);
    width: 100%;
    text-align: center;
    transition: left 0.3s ease;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    padding: 1rem 0;
    gap: 0.3rem;
    z-index: 999;
    height: auto;
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
  }

  .nav-toggle:checked ~ .nav-menu {
    left: 0;
  }

  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1000;
  }

  .nav-toggle-label span {
    width: 25px;
    height: 3px;
    background-color: var(--color-white);
    transition: 0.3s;
    border-radius: 3px;
  }

  .navbar.scrolled .nav-toggle-label span {
    background-color: var(--color-dark);
  }

  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  /* Mobile menu link colors - FIXED TO NOT INTERFERE WITH ACTIVE STATE */
  .nav-menu a {
    color: var(--color-dark) !important;
    text-shadow: none !important;
  }

  /* Remove conflicting hover/active rules - let main CSS handle this */
  /* .nav-menu a:hover,
  .nav-menu a.active {
    color: var(--color-primary) !important;
  } */
  
  /* Book Now button styling for mobile menu - Always red */
  .nav-menu .nav-book-btn,
  .nav-menu .btn-navbook,
  .nav-menu a.nav-book-btn,
  .nav-menu a.btn-navbook {
    background-color: var(--color-primary) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
  
  /* Higher specificity when menu is open */
  .nav-toggle:checked ~ .nav-menu .nav-book-btn,
  .nav-toggle:checked ~ .nav-menu .btn-navbook,
  .nav-toggle:checked ~ .nav-menu a.nav-book-btn,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook {
    background-color: var(--color-primary) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
  
  .nav-menu .nav-book-btn span,
  .nav-menu .btn-navbook span,
  .nav-menu a.nav-book-btn span,
  .nav-menu a.btn-navbook span {
    color: var(--color-white) !important;
  }
  
  /* Higher specificity when menu is open */
  .nav-toggle:checked ~ .nav-menu .nav-book-btn span,
  .nav-toggle:checked ~ .nav-menu .btn-navbook span,
  .nav-toggle:checked ~ .nav-menu a.nav-book-btn span,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook span {
    color: var(--color-white) !important;
  }
  
  .nav-menu .nav-book-btn:hover,
  .nav-menu .btn-navbook:hover,
  .nav-menu a.nav-book-btn:hover,
  .nav-menu a.btn-navbook:hover {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
  }
  
  .nav-menu .nav-book-btn:hover span,
  .nav-menu .btn-navbook:hover span,
  .nav-menu a.nav-book-btn:hover span,
  .nav-menu a.btn-navbook:hover span {
    color: var(--color-primary) !important;
  }
  
  /* ULTIMATE OVERRIDE - Book Now button MUST be red in mobile menu - MAXIMUM SPECIFICITY */
  .nav-menu a.btn.btn-navbook.nav-book-btn,
  .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn,
  .nav-menu a.btn-navbook,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook,
  .nav-menu .btn-navbook,
  .nav-toggle:checked ~ .nav-menu .btn-navbook {
    background-color: var(--color-primary) !important;
    border: 2px solid transparent !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
  
  .nav-menu a.btn.btn-navbook.nav-book-btn span,
  .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn span,
  .nav-menu a.btn-navbook span,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook span,
  .nav-menu .btn-navbook span,
  .nav-toggle:checked ~ .nav-menu .btn-navbook span {
    color: var(--color-white) !important;
  }
  
  .nav-menu a.btn.btn-navbook.nav-book-btn:hover,
  .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn:hover,
  .nav-menu a.btn-navbook:hover,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook:hover,
  .nav-menu .btn-navbook:hover,
  .nav-toggle:checked ~ .nav-menu .btn-navbook:hover {
    background-color: transparent !important;
    border: 2px solid var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
  }
  
  .nav-menu a.btn.btn-navbook.nav-book-btn:hover span,
  .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn:hover span,
  .nav-menu a.btn-navbook:hover span,
  .nav-toggle:checked ~ .nav-menu a.btn-navbook:hover span,
  .nav-menu .btn-navbook:hover span,
  .nav-toggle:checked ~ .nav-menu .btn-navbook:hover span {
    color: var(--color-primary) !important;
  }
}

/* ========================================
   HERO SLIDESHOW RESPONSIVE FIX
   ======================================== */

/* Mobile - Reasonable coverage without losing look */
@media (max-width: 600px) {
  .hero-slideshow {
    height: 75vh; /* Increased from 60vh for better coverage */
    min-height: 450px; /* Slightly increased minimum */
  }

  .slide-content {
    left: 5%;
    right: 5%;
    bottom: 10%;
  }

  .slide-content h1 {
    font-size: 1.5rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
  }

  .slide-content p {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  .btn-hero {
    padding: 10px 25px;
    font-size: 0.8rem;
  }

  .slide-arrow {
    width: 35px;
    height: 35px;
  }

  .slide-arrow.prev {
    left: 10px;
  }

  .slide-arrow.next {
    right: 10px;
  }

  .slide-arrow svg {
    width: 16px;
    height: 16px;
  }

  .slideshow-dots {
    bottom: 20px;
    gap: 8px;
  }

  .dot {
    width: 8px;
    height: 8px;
  }

  .dot.active {
    width: 24px;
  }
}

/* Tablet - Good coverage while maintaining proportions */
@media (min-width: 601px) and (max-width: 1024px) {
  .hero-slideshow {
    height: 85vh; /* Increased from 70vh for better coverage */
    min-height: 550px; /* Slightly increased minimum */
  }

  .slide-content {
    left: 5%;
    right: 5%;
    bottom: 15%;
  }

  .slide-content h1 {
    font-size: 2.2rem;
  }

  .slide-content p {
    font-size: 1.1rem;
  }

  .btn-hero {
    padding: 12px 30px;
    font-size: 0.9rem;
  }

  .slide-arrow {
    width: 45px;
    height: 45px;
  }

  .slide-arrow.prev {
    left: 20px;
  }

  .slide-arrow.next {
    right: 20px;
  }
}

/* Desktop/Laptop - Full viewport coverage */
@media (min-width: 1025px) {
  .hero-slideshow {
    height: 100vh; /* Full viewport height for immersive experience */
    min-height: 700px; /* Increased minimum for better desktop experience */
  }

  .slide-content {
    left: 8%;
    right: 8%;
    bottom: 15%;
  }

  .slide-content h1 {
    font-size: 3.5rem;
  }

  .slide-content p {
    font-size: 1.3rem;
  }
}

/* ========================================
   GRID LAYOUTS - RESPONSIVE
   ======================================== */

/* Mobile - Single column */
@media (max-width: 600px) {
  .features,
  .rooms-grid,
  .amenities-grid,
  .amenities-grid-large,
  .tourism-grid,
  .reviews-grid,
  .menu-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .amenities-icons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .amenity-icon-item {
    padding: 1.5rem 1rem;
  }

  .amenity-icon-item img {
    width: 70px;
    height: 70px;
  }

  .amenity-icon-item p {
    font-size: 0.9rem;
  }
}

/* Tablet - 2 columns */
@media (min-width: 601px) and (max-width: 1024px) {
  .features,
  .rooms-grid,
  .amenities-grid-large,
  .tourism-grid,
  .reviews-grid,
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .amenities-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .amenities-icons-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* Desktop - 3+ columns */
@media (min-width: 1025px) {
  .features,
  .rooms-grid,
  .tourism-grid,
  .reviews-grid,
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  .amenities-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .amenities-grid-large {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .amenities-icons-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
  }
}

/* ========================================
   HIGHLIGHTS SECTION RESPONSIVE
   ======================================== */

/* Mobile */
@media (max-width: 600px) {
  .highlights-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .highlights-image {
    height: 250px;
  }

  .highlights-text h2 {
    font-size: 1.5rem;
    text-align: center;
  }

  .highlights-text h2::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Tablet & Desktop */
@media (min-width: 601px) {
  .highlights-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
  }

  .highlights-image {
    height: 400px;
  }

  .highlights-text h2 {
    text-align: left;
  }

  .highlights-text h2::after {
    left: 0;
    transform: translateX(0);
  }
}

@media (min-width: 1025px) {
  .highlights-content {
    gap: 4rem;
  }

  .highlights-image {
    height: 600px;
  }

  .highlights-text h2 {
    font-size: 2.5rem;
  }
}

/* ========================================
   LOCATION SECTION RESPONSIVE
   ======================================== */

/* Mobile */
@media (max-width: 600px) {
  .location-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .map-container iframe {
    height: 300px;
  }
}

/* Tablet & Desktop */
@media (min-width: 601px) {
  .location-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .map-container iframe {
    height: 400px;
  }
}

@media (min-width: 1025px) {
  .location-content {
    gap: 3rem;
  }

  .map-container iframe {
    height: 500px;
  }
}

/* ========================================
   BOOKING SECTION RESPONSIVE
   ======================================== */

/* Mobile */
@media (max-width: 600px) {
  .booking-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .booking-summary {
    position: static;
  }

  .form-row,
  .form-row.three-cols {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
  .booking-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }

  .booking-summary {
    position: sticky;
    top: 100px;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .form-row.three-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .booking-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
  }

  .booking-summary {
    position: sticky;
    top: 100px;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .form-row.three-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================================
   CONTACT SECTION RESPONSIVE
   ======================================== */

/* Mobile */
@media (max-width: 600px) {
  .contact-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .contact-info h2,
  .contact-form h2 {
    text-align: center;
  }
}

/* Tablet & Desktop */
@media (min-width: 601px) {
  .contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .contact-info h2,
  .contact-form h2 {
    text-align: left;
  }
}

@media (min-width: 1025px) {
  .contact-container {
    gap: 3rem;
  }
}

/* ========================================
   FOOTER RESPONSIVE
   ======================================== */

/* Mobile */
@media (max-width: 600px) {
  .footer-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
  .footer-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

/* ========================================
   CAROUSEL FIX - SMOOTH SCROLLING
   ======================================== */

.tourism-carousel-track,
.guest-carousel-track {
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile carousel */
@media (max-width: 600px) {
  .tourism-carousel-container,
  .guest-carousel-container {
    padding: 0 40px;
  }

  .tourism-carousel .tourism-card {
    flex: 0 0 100%;
    min-width: 100%;
  }

  .carousel-nav {
    width: 35px;
    height: 35px;
  }

  .carousel-nav svg {
    width: 18px;
    height: 18px;
  }
}

/* Tablet carousel */
@media (min-width: 601px) and (max-width: 1024px) {
  .tourism-carousel-container,
  .guest-carousel-container {
    padding: 0 50px;
  }

  .tourism-carousel .tourism-card {
    flex: 0 0 calc(50% - 1rem);
    min-width: calc(50% - 1rem);
  }

  .carousel-nav {
    width: 45px;
    height: 45px;
  }
}

/* Desktop carousel */
@media (min-width: 1025px) {
  .tourism-carousel-container,
  .guest-carousel-container {
    padding: 0 60px;
  }

  .tourism-carousel .tourism-card {
    flex: 0 0 calc(33.333% - 1.35rem);
    min-width: calc(33.333% - 1.35rem);
  }

  .carousel-nav {
    width: 50px;
    height: 50px;
  }
}

/* ========================================
   IMAGE OPTIMIZATION
   ======================================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent layout shift */
.feature-image,
.room-card img,
.tourism-card img,
.amenity-card img {
  width: 100%;
  object-fit: cover;
}

/* Mobile image heights */
@media (max-width: 600px) {
  .feature-image {
    height: 200px;
  }

  .room-card img {
    height: 200px;
  }

  .tourism-card img {
    height: 180px;
  }

  .amenity-card img {
    height: 200px;
  }
}

/* Tablet image heights */
@media (min-width: 601px) and (max-width: 1024px) {
  .feature-image {
    height: 220px;
  }

  .room-card img {
    height: 220px;
  }

  .tourism-card img {
    height: 220px;
  }

  .amenity-card img {
    height: 280px;
  }
}

/* Desktop image heights */
@media (min-width: 1025px) {
  .feature-image {
    height: 250px;
  }

  .room-card img {
    height: 250px;
  }

  .tourism-card img {
    height: 250px;
  }

  .amenity-card img {
    height: 320px;
  }
}

/* ========================================
   TYPOGRAPHY RESPONSIVE
   ======================================== */

/* Mobile */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 1.5rem;
  }

  h1.section-heading {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  .page-header h1 {
    font-size: 1.8rem;
  }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 2.2rem;
  }

  h1.section-heading {
    font-size: 1.9rem;
  }

  h2 {
    font-size: 1.9rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  .page-header h1 {
    font-size: 2.2rem;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  body {
    font-size: 18px;
  }

  h1 {
    font-size: 3rem;
  }

  h1.section-heading {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 1.8rem;
  }

  .page-header h1 {
    font-size: 3rem;
  }
}

/* ========================================
   CONTAINER RESPONSIVE
   ======================================== */

/* Mobile */
@media (max-width: 600px) {
  .container {
    padding: 0 15px;
    max-width: 100%;
  }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
  .container {
    padding: 0 25px;
    max-width: 100%;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .container {
    padding: 0 40px;
    max-width: 1500px;
  }
}

/* ========================================
   SECTION PADDING RESPONSIVE
   ======================================== */

/* Mobile */
@media (max-width: 600px) {
  .about,
  .highlights,
  .location,
  .rooms-section,
  .amenities-section,
  .tourism-section,
  .reviews-section,
  .faq-section,
  .booking-section,
  .contact-section {
    padding: 30px 0;
  }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
  .about,
  .highlights,
  .location,
  .rooms-section,
  .amenities-section,
  .tourism-section,
  .reviews-section,
  .faq-section,
  .booking-section,
  .contact-section {
    padding: 50px 0;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .about,
  .highlights,
  .location,
  .rooms-section,
  .amenities-section,
  .tourism-section,
  .reviews-section,
  .faq-section,
  .booking-section,
  .contact-section {
    padding: 60px 0;
  }
}

/* ========================================
   WHATSAPP BUTTON RESPONSIVE
   ======================================== */

/* Mobile */
@media (max-width: 600px) {
  .whatsapp-float {
    /* Mobile styles moved to sticky-fix.css */
  }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
  .whatsapp-float {
    /* Tablet styles moved to sticky-fix.css */
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .whatsapp-float {
    /* Desktop styles moved to sticky-fix.css */
  }
}

/* ========================================
   LANDSCAPE ORIENTATION FIX
   ======================================== */

@media (max-height: 600px) and (orientation: landscape) {
  .hero-slideshow {
    height: 100vh;
    min-height: 400px;
  }

  .slide-content {
    bottom: 10%;
  }

  .slide-content h1 {
    font-size: 1.8rem;
  }

  .slide-content p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .btn:hover,
  .feature-card:hover,
  .room-card:hover,
  .tourism-card:hover {
    transform: none;
  }

  /* Increase touch target sizes */
  .btn,
  .carousel-nav,
  .slide-arrow {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better tap feedback */
  .btn:active,
  .carousel-nav:active,
  .slide-arrow:active {
    opacity: 0.7;
  }
}

/* ========================================
   SAFARI SPECIFIC FIXES
   ======================================== */

@supports (-webkit-appearance: none) {
  /* Fix for Safari input zoom */
  input,
  textarea,
  select {
    font-size: 16px;
  }

  /* Fix for Safari flexbox */
  .nav-menu,
  .features,
  .rooms-grid {
    -webkit-flex-wrap: wrap;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .navbar,
  .whatsapp-float,
  .admin-access,
  .carousel-nav,
  .slide-arrow {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .container {
    max-width: 100%;
  }
}

/* ========================================
   ACCESSIBILITY - REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .floating-leaf {
    animation: none !important;
  }
}


/* ========================================
   ENHANCED BOOKING FORM STYLES
   ======================================== */

.addon-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.addon-section h4 {
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.breakfast-addon-container {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.breakfast-addon-container:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(139, 0, 0, 0.1);
}

.breakfast-addon-container input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.breakfast-addon-container label {
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--color-text);
  margin: 0;
  user-select: none;
  flex: 1;
}

/* Number of rooms input styling */
#num_rooms {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary);
}
/* ========================================
   HEADING UNDERLINE FIXES
   ======================================== */

/* Fix for all h2 headings with underlines */
h2 {
  position: relative;
  padding-bottom: 1.2rem !important;
  margin-bottom: 2rem !important;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

/* Specific fixes for section headings */
.contact-section h2,
.faq-section h2,
.location h2,
.about h2,
.highlights h2,
.amenities-section h2,
.rooms-section h2,
.tourism-section h2,
.reviews-section h2 {
  padding-bottom: 1.5rem !important;
  margin-bottom: 2.5rem !important;
}

/* Left-aligned headings */
.contact-info h2,
.contact-form h2 {
  text-align: left;
  padding-bottom: 1rem !important;
}

.contact-info h2::after,
.contact-form h2::after {
  left: 0;
  transform: translateX(0);
}

/* Page header titles */
.page-header h1 {
  margin-bottom: 1rem !important;
}

.page-header p {
  margin-top: 0.5rem !important;
}

/* Section with decorative underline */
.section-heading {
  position: relative;
  padding-bottom: 1.5rem !important;
  margin-bottom: 2.5rem !important;
}

.section-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  h2 {
    padding-bottom: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  h2::after {
    width: 60px;
    height: 2px;
  }
}
/* ========================================
   LOGO FIT FIX - REMOVE TRANSPARENT BORDERS + NAVBAR SPACING
   ======================================== */

/* ========================================
   NAVBAR CONTAINER SPACING - RESPONSIVE (INCREASED)
   ======================================== */

/* Base navbar container with increased responsive padding */
.nav-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 35px !important; /* Increased base padding from 25px */
  padding-right: 35px !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Mobile - increased padding */
@media (max-width: 480px) {
  .nav-container {
    padding-left: 30px !important; /* Increased from 20px */
    padding-right: 30px !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
  }
}

/* Small mobile to tablet */
@media (min-width: 481px) and (max-width: 768px) {
  .nav-container {
    padding-left: 40px !important; /* Increased from 30px */
    padding-right: 40px !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-container {
    padding-left: 50px !important; /* Increased from 35px */
    padding-right: 50px !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Small desktop */
@media (min-width: 1025px) and (max-width: 1280px) {
  .nav-container {
    padding-left: 60px !important; /* Increased from 45px */
    padding-right: 60px !important;
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
  }
}

/* Medium desktop */
@media (min-width: 1281px) and (max-width: 1600px) {
  .nav-container {
    padding-left: 75px !important; /* Increased from 55px */
    padding-right: 75px !important;
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
  }
}

/* Large desktop */
@media (min-width: 1601px) {
  .nav-container {
    padding-left: 90px !important; /* Increased from 70px */
    padding-right: 90px !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* ========================================
   LOGO CONTAINER SPACING
   ======================================== */

/* Remove all padding and margins from logo container but add left spacing */
.logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  /* Removed padding and margin overrides to allow base styles to work */
}

.logo a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Removed padding and margin overrides to allow base styles to work */
}

.logo-img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================
   NAVIGATION MENU SPACING
   ======================================== */

/* Add right padding to nav menu to prevent sticking to right edge */
.nav-menu {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  gap: 1.5rem !important;
  /* Removed margin and padding overrides to allow base styles to work */
}

/* Responsive nav menu spacing */
@media (max-width: 480px) {
  .nav-menu {
    gap: 1rem !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .nav-menu {
    gap: 1.2rem !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .nav-menu {
    gap: 1.3rem !important;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .nav-menu {
    gap: 1.5rem !important;
  }
}

@media (min-width: 1281px) {
  .nav-menu {
    gap: 2rem !important;
  }
}

/* ========================================
   LOGO IMAGE - RECTANGULAR & LARGER SIZE
   ======================================== */

/* Make logo image rectangular and larger - OVERRIDE ALL PADDING */
.logo-img {
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: top !important;
  line-height: 0 !important;
  /* Make it rectangular by setting both width and height */
  aspect-ratio: 3/2 !important; /* Rectangular ratio */
}

/* Mobile logo sizing - rectangular and larger */
@media (max-width: 480px) {
  .logo-img {
    height: 55px !important; /* Increased from 45px */
    width: 80px !important; /* 1:2 ratio - 40 * 2 */
    padding: 0 !important;
  }
  
  .logo {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: auto !important;
  }
  
  .nav-container {
    justify-content: space-between !important;
  }
}

/* Small mobile to tablet */
@media (min-width: 481px) and (max-width: 768px) {
  .logo-img {
    height: 65px !important; /* Increased from 50px */
    width: 90px !important; /* 1:2 ratio - 45 * 2 */
    padding: 0 !important;
  }
  
  .logo {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: auto !important;
  }
  
  .nav-container {
    justify-content: space-between !important;
  }
}
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
  .logo-img {
    height: 70px !important; /* Increased from 55px */
    width: 100px !important; /* 1:2 ratio - 50 * 2 */
    padding: 0 !important;
  }
}

/* Small desktop */
@media (min-width: 1025px) and (max-width: 1280px) {
  .logo-img {
    height: 80px !important; /* Increased from 60px */
    width: 110px !important; /* 1:2 ratio - 55 * 2 */
    padding: 0 !important;
  }
}

/* Medium desktop */
@media (min-width: 1281px) and (max-width: 1600px) {
  .logo-img {
    height: 85px !important; /* Increased from 65px */
    width: 120px !important; /* 1:2 ratio - 60 * 2 */
    padding: 0 !important;
  }
}

/* Large desktop */
@media (min-width: 1601px) {
  .logo-img {
    height: 100px !important; /* Increased from 80px */
    width: 130px !important; /* 1:2 ratio - 65 * 2 */
    padding: 0 !important;
  }
}

/* Keep visual effects but remove spacing */
.logo-img {
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: box-shadow 0.3s ease !important;
}

.navbar.scrolled .logo-img {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   MOBILE MENU ADJUSTMENTS
   ======================================== */

/* Mobile hamburger menu spacing */
@media (max-width: 768px) {
  .nav-menu {
    position: fixed !important;
    left: -100% !important;
    top: 70px !important;
    flex-direction: column !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    width: 100% !important;
    text-align: center !important;
    transition: left 0.3s ease !important;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05) !important;
    padding: 1rem 25px !important; /* Increased horizontal padding */
    gap: 0.3rem !important;
    z-index: 999 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }
  
  .nav-toggle:checked ~ .nav-menu {
    left: 0 !important;
  }
  
  .nav-menu li {
    display: block !important;
    width: 100% !important;
  }
  
  .nav-menu a {
    display: block !important;
    width: 100% !important;
    padding: 0.8rem 1rem !important;
    font-size: 1rem !important;
  }
  
  .nav-book-btn {
    width: 80% !important;
    max-width: 300px !important;
    margin: 0.5rem auto !important;
    padding: 12px 20px !important;
    font-size: 1rem !important;
    display: block !important;
    text-align: center !important;
    background-color: var(--color-primary) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
  
  .nav-book-btn span {
    color: var(--color-white) !important;
  }
  
  .nav-book-btn:hover {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
  }
  
  .nav-book-btn:hover span {
    color: var(--color-primary) !important;
  }
  
  /* Ensure Book Now button stays centered in mobile menu */
  @media (max-width: 768px) {
    .nav-menu li {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      padding: 0 !important;
    }
    
    .nav-menu .nav-book-btn,
    .nav-menu .btn-navbook {
      width: 85% !important;
      max-width: 280px !important;
      margin: 0.5rem auto !important;
      display: block !important;
      font-size: 0.9rem !important;
      padding: 0.7rem 1.5rem !important;
      background-color: var(--color-primary) !important;
      border-color: transparent !important;
      color: var(--color-white) !important;
    }
    
    /* Higher specificity when menu is open */
    .nav-toggle:checked ~ .nav-menu .nav-book-btn,
    .nav-toggle:checked ~ .nav-menu .btn-navbook {
      background-color: var(--color-primary) !important;
      border-color: transparent !important;
      color: var(--color-white) !important;
    }
    
    .nav-menu .nav-book-btn span,
    .nav-menu .btn-navbook span {
      color: var(--color-white) !important;
    }
    
    /* Higher specificity when menu is open */
    .nav-toggle:checked ~ .nav-menu .nav-book-btn span,
    .nav-toggle:checked ~ .nav-menu .btn-navbook span {
      color: var(--color-white) !important;
    }
    
    .nav-menu .nav-book-btn:hover,
    .nav-menu .btn-navbook:hover {
      background-color: transparent !important;
      border-color: var(--color-primary) !important;
      color: var(--color-primary) !important;
    }
    
    .nav-menu .nav-book-btn:hover span,
    .nav-menu .btn-navbook:hover span {
      color: var(--color-primary) !important;
    }
    
    /* ULTIMATE OVERRIDE - Book Now button MUST be red in mobile menu - MAXIMUM SPECIFICITY */
    .nav-menu a.btn.btn-navbook.nav-book-btn,
    .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn,
    .nav-menu a.btn-navbook,
    .nav-toggle:checked ~ .nav-menu a.btn-navbook,
    .nav-menu .btn-navbook,
    .nav-toggle:checked ~ .nav-menu .btn-navbook {
      background-color: var(--color-primary) !important;
      border: 2px solid transparent !important;
      border-color: transparent !important;
      color: var(--color-white) !important;
    }
    
    .nav-menu a.btn.btn-navbook.nav-book-btn span,
    .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn span,
    .nav-menu a.btn-navbook span,
    .nav-toggle:checked ~ .nav-menu a.btn-navbook span,
    .nav-menu .btn-navbook span,
    .nav-toggle:checked ~ .nav-menu .btn-navbook span {
      color: var(--color-white) !important;
    }
    
    .nav-menu a.btn.btn-navbook.nav-book-btn:hover,
    .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn:hover,
    .nav-menu a.btn-navbook:hover,
    .nav-toggle:checked ~ .nav-menu a.btn-navbook:hover,
    .nav-menu .btn-navbook:hover,
    .nav-toggle:checked ~ .nav-menu .btn-navbook:hover {
      background-color: transparent !important;
      border: 2px solid var(--color-primary) !important;
      border-color: var(--color-primary) !important;
      color: var(--color-primary) !important;
    }
    
    .nav-menu a.btn.btn-navbook.nav-book-btn:hover span,
    .nav-toggle:checked ~ .nav-menu a.btn.btn-navbook.nav-book-btn:hover span,
    .nav-menu a.btn-navbook:hover span,
    .nav-toggle:checked ~ .nav-menu a.btn-navbook:hover span,
    .nav-menu .btn-navbook:hover span,
    .nav-toggle:checked ~ .nav-menu .btn-navbook:hover span {
      color: var(--color-primary) !important;
    }
  }
}
/* ========================================
   AGGRESSIVE STICKY NAVBAR & FLOATING BUTTON FIX
   ======================================== */

/* ========================================
   NAVBAR SCROLLING WITH PAGE FIX
   ======================================== */

/* Make navbar use sticky positioning */
.navbar,
nav.navbar {
  position: sticky !important; /* Sticky positioning for proper scroll behavior */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important; /* High z-index for sticky positioning */
  /* Background is set earlier - don't override here */
  transition: all 0.3s ease !important;
  pointer-events: auto !important;
  will-change: background-color, box-shadow !important;
  transform: none !important; /* Remove hardware acceleration transform */
}

/* Scrolled navbar should have white background - DON'T override this */
.navbar.scrolled,
nav.navbar.scrolled {
  position: sticky !important;
  top: 0 !important;
  /* Remove background override to allow white background when scrolled */
}

/* White background when scrolled - handled by main CSS and JavaScript */
.navbar.scrolled,
nav.navbar.scrolled {
  /* Let the main CSS handle the white background transition */
  /* This ensures proper transparent -> white transition */
}

/* Override any conflicting body/html styles - FIXED: Don't use overflow-x hidden */
html {
  scroll-behavior: smooth !important;
  max-width: 100vw !important; /* Prevent horizontal scroll without breaking sticky */
}

body {
  padding-top: 0 !important;
  margin-top: 0 !important;
  max-width: 100vw !important; /* Prevent horizontal scroll without breaking sticky */
  width: 100% !important;
}

/* Hero section can now start normally since navbar is not fixed */
.hero-slideshow {
  height: 100vh !important;
  min-height: 100vh !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
}

/* ========================================
   WHATSAPP FLOATING BUTTON FIX - HIGHEST PRIORITY
   ======================================== */

/* ========================================
   WHATSAPP BUTTON - FORCE FIXED POSITIONING (MAXIMUM SPECIFICITY)
   ======================================== */

/* Ultimate override with maximum specificity to force fixed positioning */
html body .whatsapp-float,
html body a.whatsapp-float,
html body div .whatsapp-float,
html body section .whatsapp-float,
html body main .whatsapp-float,
html body article .whatsapp-float,
html body aside .whatsapp-float,
html body nav .whatsapp-float,
html body header .whatsapp-float,
html body footer .whatsapp-float,
html body * .whatsapp-float {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 60px !important;
  height: 60px !important;
  background-color: #25D366 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  color: white !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important;
  transition: all 0.3s ease !important;
  z-index: 2147483647 !important; /* Maximum possible z-index */
  pointer-events: auto !important;
  /* Force hardware acceleration */
  transform: translate3d(0, 0, 0) !important;
  will-change: transform, box-shadow !important;
  /* Reset ALL potentially conflicting properties */
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  top: auto !important;
  left: auto !important;
  /* Ensure it's not affected by any parent container */
  contain: none !important;
  isolation: auto !important;
  /* Override any backdrop filters or filters that might affect it */
  backdrop-filter: none !important;
  filter: none !important;
  /* Ensure it's not clipped by any parent */
  clip: auto !important;
  clip-path: none !important;
  /* Animation */
  animation: whatsapp-pulse 2s infinite !important;
}

/* Hover state with maximum specificity */
html body .whatsapp-float:hover,
html body a.whatsapp-float:hover,
html body div .whatsapp-float:hover,
html body section .whatsapp-float:hover,
html body main .whatsapp-float:hover,
html body article .whatsapp-float:hover,
html body aside .whatsapp-float:hover,
html body nav .whatsapp-float:hover,
html body header .whatsapp-float:hover,
html body footer .whatsapp-float:hover,
html body * .whatsapp-float:hover {
  background-color: #128C7E !important;
  transform: translate3d(0, 0, 0) scale(1.1) !important;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4) !important;
  color: white !important;
  text-decoration: none !important;
  animation: none !important;
}

/* Icon styling */
.whatsapp-float span {
  display: block !important;
  line-height: 1 !important;
  font-size: inherit !important;
  color: white !important;
}

/* Pulse animation */
@keyframes whatsapp-pulse {
  0%, 100% {
    transform: scale(1) translateZ(0);
  }
  50% {
    transform: scale(1.05) translateZ(0);
  }
}

/* ========================================
   RESPONSIVE WHATSAPP BUTTON SIZING (MAXIMUM SPECIFICITY)
   ======================================== */

/* Mobile devices */
@media (max-width: 480px) {
  html body .whatsapp-float,
  html body a.whatsapp-float,
  html body * .whatsapp-float {
    width: 50px !important;
    height: 50px !important;
    bottom: 15px !important;
    right: 15px !important;
    font-size: 1.2rem !important;
  }
}

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
  html body .whatsapp-float,
  html body a.whatsapp-float,
  html body * .whatsapp-float {
    width: 55px !important;
    height: 55px !important;
    bottom: 18px !important;
    right: 18px !important;
    font-size: 1.3rem !important;
  }
}

/* Desktop */
@media (min-width: 769px) {
  html body .whatsapp-float,
  html body a.whatsapp-float,
  html body * .whatsapp-float {
    width: 60px !important;
    height: 60px !important;
    bottom: 20px !important;
    right: 20px !important;
    font-size: 1.5rem !important;
  }
}

/* ========================================
   ENSURE NO CONFLICTS WITH OTHER ELEMENTS
   ======================================== */

/* Make sure other fixed elements don't interfere */
.floating-leaves {
  z-index: 1 !important; /* Behind everything */
  position: fixed !important;
}

/* Ensure mobile menu doesn't interfere but stays below navbar */
@media (max-width: 768px) {
  .nav-menu {
    z-index: 99997 !important; /* Below navbar but above other content */
    position: fixed !important;
  }
}

/* Override any print styles that might hide elements */
@media print {
  .navbar {
    display: none !important;
  }
  .whatsapp-float {
    display: none !important;
  }
}

/* ========================================
   FORCE HARDWARE ACCELERATION & PERFORMANCE
   ======================================== */

/* Force GPU acceleration for smooth scrolling */
.whatsapp-float {
  -webkit-transform: translateZ(0) !important;
  -moz-transform: translateZ(0) !important;
  -ms-transform: translateZ(0) !important;
  -o-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  -webkit-perspective: 1000 !important;
  perspective: 1000 !important;
}

/* ========================================
   NAVBAR POSITIONING
   ======================================== */

/* Make sure navbar uses sticky positioning */
body .navbar {
  position: sticky !important;
  top: 0 !important;
}

/* ========================================
   ENSURE PROPER VIEWPORT FOR STICKY SCROLLING
   ======================================== */

/* Ensure viewport doesn't interfere with sticky scrolling */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  /* Don't use overflow-x: hidden as it can break fixed positioning */
  position: relative !important;
  /* Reset any containment that could break fixed positioning */
  contain: none !important;
  /* Reset any transforms that could create new stacking contexts */
  transform: none !important;
  /* Reset any filters that could affect fixed positioning */
  filter: none !important;
  backdrop-filter: none !important;
}

/* Ensure no parent elements interfere with fixed positioning */
html {
  overflow-x: visible !important;
  /* Reset any containment that could break fixed positioning */
  contain: none !important;
  /* Ensure no CSS properties create new stacking contexts */
  isolation: auto !important;
}

body {
  overflow-x: visible !important;
  /* Reset any containment that could break fixed positioning */
  contain: none !important;
  /* Ensure no CSS properties create new stacking contexts */
  isolation: auto !important;
}

/* Reset any CSS properties on all elements that could interfere with fixed positioning */
* {
  /* Reset CSS containment that can break fixed positioning */
  contain: none !important;
}
/* ========================================
   MAXIMUM SPECIFICITY OVERRIDE FOR STICKY SCROLLING
   ======================================== */

/* This rule has maximum specificity to ensure sticky scrolling behavior */
html body .whatsapp-float,
html body a.whatsapp-float {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 999999 !important;
  /* Ensure it's always visible and positioned correctly for sticky scrolling */
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* Force sticky behavior on all browsers */
  -webkit-position: fixed !important;
  -moz-position: fixed !important;
  -ms-position: fixed !important;
  -o-position: fixed !important;
}

/* Ensure no parent container can override the sticky behavior */
* .whatsapp-float,
*:not(html) .whatsapp-float {
  position: fixed !important;
}

/* Browser-specific sticky scrolling fixes */
@supports (position: fixed) {
  .whatsapp-float {
    position: fixed !important;
  }
}

/* Fallback for older browsers */
@media screen {
  .whatsapp-float {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
  }
}
/* ========================================
   NAVBAR POSITIONING - CONSISTENT ACROSS ALL PAGES
   ======================================== */

/* Home page: navbar overlays hero */
.home-page .navbar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

/* Home page scrolled: becomes sticky */
.home-page .navbar.scrolled {
  position: sticky !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px);
}


/* Full screen hero - Covers entire viewport, BELOW navbar */
.hero-slideshow {
  height: 100vh !important;
  min-height: 100vh !important; /* Override the 600px min-height */
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  /* Ensure it starts from the very top of the page */
  margin-top: 0 !important;
  /* LOW z-index so navbar appears ON TOP of hero */
  z-index: 1 !important; /* BELOW navbar (navbar is z-index 1000) */
  box-sizing: border-box !important;
  /* Remove any bottom spacing that could create white strip */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body {
  padding-top: 0 !important;
  margin: 0 !important;
  /* Ensure no spacing interferes with full screen hero */
  padding: 0 !important;
}
/* ========================================
   HOME PAGE HERO FULL SCREEN COVERAGE
   ======================================== */

/* Ensure hero-slideshow covers full viewport on home page WITHOUT horizontal scroll */
.home-page .hero-slideshow {
  height: 100vh !important;
  min-height: 100vh !important;
  width: 100% !important; /* Use 100% instead of 100vw */
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure it covers from edge to edge without overflow */
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Ensure slideshow container also covers full area without gaps */
.home-page .hero-slideshow .slideshow-container {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure no gaps at bottom */
  bottom: 0 !important;
  top: 0 !important;
}

/* Ensure slides cover full area without gaps */
.home-page .hero-slideshow .slide {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure slide images cover full area without gaps */
.home-page .hero-slideshow .slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  /* Remove any spacing that could create gaps */
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* ========================================
   FIX NAVBAR NEGATIVE MARGIN FOR HERO-SLIDESHOW
   ======================================== */

/* Override the negative margin from navbar-overlap-fix.css that causes white strip */
.home-page .navbar,
.navbar {
  margin-bottom: 0 !important; /* Remove negative margin that causes white gap */
}

/* Also fix it when scrolled */
.home-page .navbar.scrolled,
.navbar.scrolled {
  margin-bottom: 0 !important; /* Remove negative margin that causes white gap */
}

/* Ensure hero-slideshow compensates for any remaining spacing issues */
.hero-slideshow {
  /* Force it to start from absolute top */
  margin-top: 0 !important;
  /* Ensure it covers full height without gaps */
  height: 100vh !important;
  min-height: 100vh !important;
  /* Remove any bottom spacing that could create white strip */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* ========================================
   ENSURE NAVBAR OVERLAYS ON TOP OF HERO-SLIDESHOW
   ======================================== */

/* Force navbar to overlay on top of hero-slideshow */
.home-page .navbar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important; /* Above hero-slideshow */
  background-color: transparent !important; /* Transparent initially */
  transition: all 0.3s ease !important;
}

/* When scrolled, navbar becomes fixed and white */
.home-page .navbar.scrolled {
  position: fixed !important;
  top: 0 !important;
  z-index: 1000 !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure hero-slideshow stays below navbar */
.home-page .hero-slideshow {
  z-index: 1 !important; /* Below navbar */
  position: relative !important;
}
/* ========================================
   NAVBAR OVERLAP WITH PAGE-HEADER FIX - ALL PAGES
   ======================================== */

/* CRITICAL: Comprehensive reset to eliminate white strip */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Force html and body to start from absolute top */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}

/* Ensure all pages start from the very top */
body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  position: relative !important;
}

/* Additional browser-specific resets */
html {
  -webkit-margin-before: 0 !important;
  -webkit-margin-after: 0 !important;
  -webkit-margin-start: 0 !important;
  -webkit-margin-end: 0 !important;
  -webkit-padding-before: 0 !important;
  -webkit-padding-after: 0 !important;
  -webkit-padding-start: 0 !important;
  -webkit-padding-end: 0 !important;
}

body {
  -webkit-margin-before: 0 !important;
  -webkit-margin-after: 0 !important;
  -webkit-margin-start: 0 !important;
  -webkit-margin-end: 0 !important;
  -webkit-padding-before: 0 !important;
  -webkit-padding-after: 0 !important;
  -webkit-padding-start: 0 !important;
  -webkit-padding-end: 0 !important;
}

.page-header {
  margin-top: -80px !important; /* Pull page-header up behind transparent navbar */
  padding-top: 160px !important; /* Extra padding to accommodate navbar overlay */
  position: relative;
  z-index: 1; /* Below navbar */
}

/* Default navbar positioning for all pages */
.navbar {
  z-index: 1000 !important; /* Above page-header */
  position: sticky !important;
  top: 0;
}

/* Home page: transparent navbar that becomes solid on scroll */
.home-page .navbar {
  background-color: transparent;
  box-shadow: none;
}

/* ALL PAGES: Navbar positioning */
.navbar {
  position: sticky !important; /* Sticky positioning for all pages */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Home page: transparent navbar initially */
.home-page .navbar {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Scrolled state: solid background for all pages */
.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px);
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Removed rooms-page specific nav-container padding override */
/* Now uses default nav-container styles for consistency */

/* Page-header positioning for transparent navbar overlay */
.page-header {
  margin: 0 !important; /* Remove all margins */
  margin-top: -111px !important; /* Pull page-header up behind transparent navbar */
  padding-top: 140px !important; /* Padding for navbar space */
  position: relative;
  z-index: 1; /* Below navbar (navbar is z-index 1000) */
}

/* When scrolled, navbar becomes white and sticky */
.navbar.scrolled {
  position: sticky !important; /* Become sticky when scrolled */
  top: 0 !important; /* Stick to top when scrolled */
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
  margin-bottom: -111px !important; /* KEEP SAME MARGIN as stationary */
  padding: 0 !important; /* Remove all padding to eliminate gaps */
  /* UNIFIED TRANSITION: Only background and box-shadow */
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
  border: none !important; /* Ensure no border creates red strip */
  /* Ensure full coverage */
  min-height: 80px !important;
  box-sizing: border-box !important;
}

/* Responsive adjustments for different screen sizes */
@media (min-width: 601px) and (max-width: 1024px) {
  .page-header {
    padding-top: 80px !important;
  }
  
  /* All pages tablet */
  .page-header {
    margin-top: -121px !important; /* Pull page-header up behind transparent navbar */
    padding-top: 160px !important; /* Padding for navbar space */
  }
  
  .navbar {
    padding: 0 !important; /* Remove all padding */
    /* UNIFIED TRANSITION: Only background and box-shadow */
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 90px !important; /* Slightly larger for tablet */
  }
  
  .nav-container {
    padding: 1.2rem 5rem !important; /* Doubled horizontal padding (was 2.5rem, now 5rem) */
    /* NO TRANSITION: Container should not animate */
    background: transparent !important;
    border: none !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  .navbar.scrolled {
    padding: 0 !important; /* Remove all padding */
    /* UNIFIED TRANSITION: Only background and box-shadow */
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
    min-height: 90px !important; /* Slightly larger for tablet */
  }
}

@media (min-width: 1025px) {
  .page-header {
    padding-top: 100px !important;
  }
  
  /* All pages desktop */
  .page-header {
    margin-top: -191px !important; /* Pull page-header up behind transparent navbar */
    padding-top: 180px !important; /* Padding for navbar space */
  }
  
  .navbar {
    padding: 0 !important; /* Remove all padding */
    /* UNIFIED TRANSITION: Only background and box-shadow */
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 100px !important; /* Larger for desktop */
  }
  
  .nav-container {
    padding: 1.5rem 6rem !important; /* Doubled horizontal padding (was 3rem, now 6rem) */
    /* NO TRANSITION: Container should not animate */
    background: transparent !important;
    border: none !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  .navbar.scrolled {
    padding: 0 !important; /* Remove all padding */
    /* UNIFIED TRANSITION: Only background and box-shadow */
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
    min-height: 100px !important; /* Larger for desktop */
  }
}

/* Ensure proper spacing for hero sections that don't have page-header */
.hero-slideshow {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* CRITICAL: Override any conflicting transitions from other CSS files */
.navbar,
.navbar.scrolled {
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.navbar *,
.navbar.scrolled * {
  transition: none !important; /* Disable all child element transitions */
}

.nav-menu a,
.navbar.scrolled .nav-menu a {
  transition: none !important; /* Text should change instantly */
}

.logo-img,
.navbar.scrolled .logo-img {
  transition: none !important; /* Logo should change instantly */
}

/* Make sure navbar text is visible over page-header */
.navbar .nav-menu a {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important; /* Stronger shadow for better visibility */
  font-weight: 500 !important;
  /* NO TRANSITION: Text should change instantly */
}

.navbar .nav-menu a:hover,
.navbar .nav-menu a.active {
  color: #62b784 !important; /* Green for all pages except home */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important; /* Keep shadow for visibility */
}

/* Special hover color for home page when navbar is at top */
.home-page .navbar .nav-menu a:hover,
.home-page .navbar .nav-menu a.active {
  color: #0A6A4E !important; /* Darker green for home page only */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important; /* Keep shadow for visibility */
}

/* Mobile and Tablet Override: Black text instead of white */
@media (max-width: 1024px) {
  .navbar .nav-menu a {
    color: #000 !important;
    text-shadow: none !important;
  }
  
  /* Exception: Keep Book Now button text white */
  .navbar .nav-menu a.nav-book-btn {
    color: var(--color-white) !important;
    text-shadow: none !important;
  }
  
  .navbar .nav-menu a:hover,
  .navbar .nav-menu a.active {
    color: #62b784 !important;
    text-shadow: none !important;
  }
  
  /* Exception: Keep Book Now button hover colors context-aware */
  .navbar .nav-menu a.nav-book-btn:hover,
  .navbar .nav-menu a.nav-book-btn.active,
  .navbar .nav-menu a.btn-navbook:hover,
  .navbar .nav-menu a.btn-navbook.active {
    background-color: transparent !important;
    border-color: #2d5f3f !important;
    color: #2d5f3f !important;
    text-shadow: none !important;
  }
  
  /* Home page: red hover */
  .home-page .navbar .nav-menu a.btn-navbook:hover,
  .home-page .navbar .nav-menu a.btn-navbook.active {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    text-shadow: none !important;
  }
  
  .home-page .navbar .nav-menu a:hover,
  .home-page .navbar .nav-menu a.active {
    color: #62b784 !important; /* Use same green for mobile instead of darker green */
    text-shadow: none !important;
  }
  
  /* Exception: Keep Book Now button text white on home page */
  .home-page .navbar .nav-menu a.nav-book-btn:hover,
  .home-page .navbar .nav-menu a.nav-book-btn.active {
    color: var(--color-white) !important;
    text-shadow: none !important;
  }
  
  /* Mobile hamburger menu should be white at top, black when scrolled */
  .navbar .nav-toggle-label span {
    background-color: white !important;
  }
  
  /* When scrolled, hamburger should be black */
  .navbar.scrolled .nav-toggle-label span {
    background-color: #000 !important;
  }
}

.navbar .logo-img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important; /* Shadow for logo visibility */
  /* NO TRANSITION: Logo should change instantly */
}

/* When scrolled, remove shadows and change colors */
.navbar.scrolled .nav-menu a {
  text-shadow: none !important;
  color: #000 !important;
  /* NO TRANSITION: Text should change instantly */
}

.navbar.scrolled .nav-menu a:hover,
.navbar.scrolled .nav-menu a.active {
  color: #62b784 !important; /* Same green hover color for all pages when scrolled */
  text-shadow: none !important;
}

.navbar.scrolled .logo-img {
  filter: none !important;
  /* NO TRANSITION: Logo should change instantly */
}


/* ========================================


/* ========================================


/* ========================================
   ROOMS PAGE STYLES
   ======================================== */

/* Rooms Section - Mobile First */
.rooms-section {
  padding: 30px 0;
}

.rooms-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.room-card {
  background-color: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  width: 100%;
}

.room-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.05) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.room-card:hover::after {
  opacity: 1;
}

.room-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 15px 40px rgba(139, 0, 0, 0.25);
}

.room-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.room-card:hover img {
  transform: scale(1.1);
}

.room-info {
  padding: 1.2rem;
}

.room-info h3 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.room-size {
  font-size: 0.9rem;
  color: #999;
  margin-bottom: 0.5rem;
}

.room-capacity {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 1rem;
}

.room-price {
  font-size: 1.8rem;
  color: var(--color-primary);
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.room-price span {
  font-size: 0.9rem;
  color: #666;
}

.room-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.room-amenities span {
  background-color: var(--color-cream);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--color-dark);
}

/* Image Modal Styles */
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.95);
}

.image-modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: zoom 0.3s;
}

@keyframes zoom {
  from {
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}

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

.image-modal-close:hover,
.image-modal-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.image-modal-caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
}

/* Modal Slideshow Arrows */
.modal-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.5);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.modal-slide-arrow:hover {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.8);
}

.modal-prev {
  left: 30px;
}

.modal-next {
  right: 30px;
}

/* Responsive Rooms Grid */
@media (min-width: 601px) and (max-width: 1024px) {
  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  .room-card img {
    height: 220px;
  }
}

@media (min-width: 1025px) {
  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
  
  .room-card img {
    height: 250px;
  }
}

/* Mobile responsive for modal */
@media (max-width: 768px) {
  .image-modal-content {
    max-width: 95%;
    max-height: 80vh;
  }
  
  .image-modal-close {
    top: 10px;
    right: 20px;
    font-size: 35px;
  }
  
  .modal-slide-arrow {
    width: 40px;
    height: 40px;
  }
  
  .modal-prev {
    left: 15px;
  }
  
  .modal-next {
    right: 15px;
  }
  
  .image-modal-caption {
    font-size: 0.9rem;
    bottom: 10px;
  }
}


/* ========================================
   NAVBAR CONSISTENCY FIX
   ======================================== */

/* Ensure navbar has consistent sizing across all pages */
.navbar {
  min-height: 80px; /* Consistent minimum height */
}

/* Ensure nav-container maintains consistent padding */
.nav-container {
  min-height: 80px; /* Match navbar height */
}

/* Desktop navbar consistency */
@media (min-width: 1025px) {
  .navbar {
    min-height: 120px; /* Larger on desktop */
  }
  
  .nav-container {
    min-height: 120px; /* Match navbar height */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* Tablet navbar consistency */
@media (min-width: 601px) and (max-width: 1024px) {
  .navbar {
    min-height: 90px;
  }
  
  .nav-container {
    min-height: 90px;
  }
}


/* ========================================
   BOOKING SYSTEM STYLES
   ======================================== */

/* Smart Offers Section */
.smart-offers-section {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 1.5rem 0;
    margin-bottom: 2rem;
    margin-top: 0;
}

.offers-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.offer-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 0.9375rem;
    color: #333;
}

.offer-text strong {
    color: #8b0000;
}

.offer-icon {
    font-size: 1.25rem;
}

.fomo-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
}

/* Progress Stepper */
.booking-progress {
    background: white;
    padding: 3rem 2rem 2rem 2rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    position: relative;
    z-index: 10;
    overflow: visible;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: visible;
}

.progress-line {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 3px;
    background: #e5e7eb;
    z-index: 1;
}

.progress-line-fill {
    height: 100%;
    background: #10b981;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
    flex: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: visible;
    padding-top: 0.5rem;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 3px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.progress-step.active .step-circle {
    border-color: #8b0000;
    background: #8b0000;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.3);
}

.progress-step.completed .step-circle {
    border-color: #10b981;
    background: #10b981;
    color: transparent;
}

.progress-step.completed .step-circle::before {
    content: '✓';
    font-size: 1.2rem;
    color: white;
    position: absolute;
}

.step-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    transition: color 0.3s ease;
}

.progress-step.active .step-label {
    color: #8b0000;
}

.progress-step.completed .step-label {
    color: #10b981;
}

/* Booking Sections */
.booking-section {
    padding: 2rem 0;
}

.booking-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.booking-section-wrapper {
    display: none;
    animation: fadeInUp 0.4s ease;
}

.booking-section-wrapper.active {
    display: block;
}

.section-card {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f3f4f6;
}

.section-title h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 1rem 0;
    text-align: center;
}

.section-subtitle {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.section-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.section-subtitle p {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0;
}

/* Navigation Buttons */
.section-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #f3f4f6;
}

.btn-nav {
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-prev {
    background: #f3f4f6;
    color: #374151;
}

.btn-prev:hover {
    background: #e5e7eb;
    transform: translateX(-4px);
}

.btn-next {
    background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
    color: white;
    margin-left: auto;
}

.btn-next:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.3);
}

/* Room Selection Grid */
.rooms-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.room-selection-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.room-selection-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #8b0000, #6b0000);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.room-selection-card.selected {
    border-color: #8b0000;
    box-shadow: 0 8px 20px rgba(139, 0, 0, 0.15);
    transform: translateY(-4px);
}

.room-selection-card.selected::before {
    transform: scaleX(1);
}

.room-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.room-card-image {
    width: 150px;
    height: 150px;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.room-card-image:hover {
    transform: scale(1.05);
}

.room-card-info h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.25rem 0;
}

.room-card-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #8b0000;
}

.room-card-price small {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
}

.room-quantity-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.room-quantity-selector label {
    flex: 1;
    font-weight: 600;
    color: #374151;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.qty-btn {
    width: 36px;
    height: 36px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    border-color: #8b0000;
    color: #8b0000;
    background: #fef2f2;
}

.qty-display {
    min-width: 40px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.required {
    color: #dc2626;
}

/* Add-ons Grid */
.addons-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.addon-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.addon-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.addon-card:hover {
    border-color: #8b0000;
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.1);
    transform: translateY(-2px);
}

.addon-card.selected {
    border-color: #8b0000;
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.15);
}

.addon-card.selected .addon-card-content {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.addon-card.selected .addon-checkmark {
    opacity: 1;
    transform: scale(1);
}

.addon-card-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.addon-icon-large {
    font-size: 2.5rem;
    line-height: 1;
}

.addon-details-full {
    flex: 1;
}

.addon-details-full h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.25rem 0;
}

.addon-price-large {
    font-size: 1.125rem;
    font-weight: 700;
    color: #8b0000;
}

.addon-checkmark {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #10b981;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

/* Booking Summary */
.booking-summary-enhanced {
    position: sticky;
    top: 200px;
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 100%;
}

.summary-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.summary-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.summary-items {
    margin-bottom: 1.5rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    font-size: 0.9375rem;
    border-bottom: 1px solid #f3f4f6;
}

.summary-item span:first-child {
    font-weight: 600;
    color: #374151;
}

.summary-item span:last-child {
    font-weight: 700;
    color: #1a1a1a;
}

.summary-item.total {
    font-size: 1.25rem;
    font-weight: 700;
    color: #8b0000;
    padding: 1rem 0;
    border-top: 2px solid #8b0000;
    border-bottom: none;
    margin-top: 0.5rem;
}

.summary-divider {
    height: 2px;
    background: #f3f4f6;
    margin: 1rem 0;
}

/* Payment Type Section */
.payment-type-section {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 12px;
}

.payment-type-section h4 {
    color: #8b0000;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.payment-option {
    display: flex;
    align-items: flex-start;
    padding: 1.2rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.payment-option:hover {
    border-color: #8b0000;
    background: rgba(237, 231, 199, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.1);
}

.payment-option input[type="radio"] {
    margin-right: 1rem;
    margin-top: 0.3rem;
    cursor: pointer;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: #8b0000;
}

.payment-amount {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: bold;
    color: #8b0000;
    margin-top: 0.5rem;
}

/* Terms */
.terms {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

.terms label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
}

.terms input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #8b0000;
}

.terms-link {
    color: #8b0000;
    text-decoration: underline;
}

.terms-link:hover {
    color: #6b0000;
}

/* Payment Section */
.payment-section {
    margin: 1.5rem 0;
}

/* Policy Modal */
.policy-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    overflow-y: auto;
}

.policy-modal-content {
    background: white;
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 16px;
    max-width: 800px;
    position: relative;
}

.policy-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    font-weight: bold;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.policy-modal-close:hover {
    background: #f3f4f6;
    color: #1a1a1a;
}

.policy-modal-header h2 {
    color: #8b0000;
    margin-bottom: 1.5rem;
}

.policy-highlight {
    background: #fef3c7;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #f59e0b;
    margin: 1.5rem 0;
}

.policy-section {
    margin: 1.5rem 0;
}

.policy-section h3 {
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.policy-section ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.policy-section li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Image Modal */
.image-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

.image-modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.image-modal-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.image-modal-caption {
    text-align: center;
    color: white;
    padding: 10px 20px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

/* Responsive */
@media (max-width: 768px) {
    .booking-progress {
        padding: 2.5rem 1rem 1rem 1rem;
        position: relative;
        top: auto;
    }
    
    .progress-steps {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .progress-step {
        flex: 0 0 calc(33.333% - 0.5rem);
    }
    
    .section-card {
        padding: 1.25rem;
    }
    
    .rooms-selection-grid,
    .addons-selection-grid {
        grid-template-columns: 1fr;
    }
    
    .booking-summary-enhanced {
        position: static;
        top: auto;
    }
    
    .section-navigation {
        flex-direction: column;
    }
    
    .btn-next {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .progress-step {
        flex: 0 0 calc(50% - 0.375rem);
    }
    
    .section-card {
        padding: 1rem;
    }
}


/* ========================================
   GOOGLE REVIEWS STYLING
   ======================================== */

/* Google Review Summary */
.google-review-summary {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
}

.summary-left {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.rating-score .score {
    font-size: 4rem;
    font-weight: 700;
    color: #8b0000;
    display: block;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.rating-score .stars {
    font-size: 2rem;
    color: #ffa500;
    margin-bottom: 0.5rem;
}

.rating-score .review-count {
    font-size: 1rem;
    color: #666;
    margin: 0.5rem 0;
}

.rating-score .google-badge {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.summary-right {
    padding: 1rem;
}

.rating-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rating-bar-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bar-label {
    min-width: 60px;
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.bar-container {
    flex: 1;
    height: 12px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffa500 0%, #ff8c00 100%);
    border-radius: 6px;
    transition: width 0.3s ease;
}

/* Google Review Cards */
.google-review {
    border-left: 4px solid #4285f4;
}

.google-review .review-source {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.review-category {
    display: inline-block;
    background: #f0f9ff;
    color: #0369a1;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.review-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.8;
}

.review-details p {
    margin-bottom: 0.5rem;
}

.review-details strong {
    color: #374151;
}

/* Review Owner Response */
.review-owner-response {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
}

.response-label {
    font-weight: 700;
    color: #92400e;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.response-date {
    font-size: 0.8rem;
    color: #78350f;
    margin-bottom: 0.75rem;
}

.response-text {
    color: #451a03;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Negative Review Styling */
.negative-review {
    border-left-color: #dc2626;
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}

.negative-review .stars {
    color: #dc2626;
}

/* Review Rating Badge */
.review-rating {
    background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1rem;
}

/* Responsive Reviews */
@media (max-width: 768px) {
    .google-review-summary {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.5rem;
    }
    
    .rating-score .score {
        font-size: 3rem;
    }
    
    .rating-score .stars {
        font-size: 1.5rem;
    }
    
    .bar-label {
        min-width: 50px;
        font-size: 0.85rem;
    }
    
    .review-details {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .google-review-summary {
        padding: 1rem;
    }
    
    .summary-left {
        padding: 1rem;
    }
    
    .rating-bar-item {
        gap: 0.5rem;
    }
    
    .bar-label {
        min-width: 45px;
        font-size: 0.8rem;
    }
}

/* Info Icon Tooltip Styling */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: #9ca3af;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    cursor: help;
    margin-left: 4px;
    transition: background-color 0.3s ease;
    position: relative;
}

.info-icon:hover {
    background-color: #6b7280;
}

.info-tooltip {
    display: none;
    position: absolute;
    background-color: #1f2937;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: normal;
    white-space: nowrap;
    z-index: 1000;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
}

.form-group label:hover .info-tooltip {
    display: block;
}


/* ========================================
   FINAL NAVBAR SCROLL FIX - HIGHEST PRIORITY
   ======================================== */
/* This rule comes last to override any conflicts */
body .navbar.scrolled,
html body .navbar.scrolled,
.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.98) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
}


/* ========================================
   BOOKING PAGES NAVBAR - DEDICATED STYLES
   Copied from working pages (contact, faq, etc.)
   ======================================== */

/* Booking pages: Initial transparent navbar */
.booking_step1_dates-page .navbar,
.booking_step2_rooms-page .navbar,
.booking_step3_guests-page .navbar,
.booking_step4_addons-page .navbar,
.booking_step5_review-page .navbar {
  background-color: transparent !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  transition: all 0.3s ease !important;
}

/* Booking pages: White text on transparent navbar - DESKTOP ONLY */
@media (min-width: 769px) {
  .booking_step1_dates-page .navbar .nav-menu a,
  .booking_step2_rooms-page .navbar .nav-menu a,
  .booking_step3_guests-page .navbar .nav-menu a,
  .booking_step4_addons-page .navbar .nav-menu a,
  .booking_step5_review-page .navbar .nav-menu a {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Booking pages: Green hover on desktop */
  .booking_step1_dates-page .navbar .nav-menu a:hover,
  .booking_step1_dates-page .navbar .nav-menu a.active,
  .booking_step2_rooms-page .navbar .nav-menu a:hover,
  .booking_step2_rooms-page .navbar .nav-menu a.active,
  .booking_step3_guests-page .navbar .nav-menu a:hover,
  .booking_step3_guests-page .navbar .nav-menu a.active,
  .booking_step4_addons-page .navbar .nav-menu a:hover,
  .booking_step4_addons-page .navbar .nav-menu a.active,
  .booking_step5_review-page .navbar .nav-menu a:hover,
  .booking_step5_review-page .navbar .nav-menu a.active {
    color: #62b784 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  }
}

/* Booking pages: Scrolled navbar - WHITE BACKGROUND */
.booking_step1_dates-page .navbar.scrolled,
.booking_step2_rooms-page .navbar.scrolled,
.booking_step3_guests-page .navbar.scrolled,
.booking_step4_addons-page .navbar.scrolled,
.booking_step5_review-page .navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.98) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

/* Booking pages: Black text when scrolled */
.booking_step1_dates-page .navbar.scrolled .nav-menu a,
.booking_step2_rooms-page .navbar.scrolled .nav-menu a,
.booking_step3_guests-page .navbar.scrolled .nav-menu a,
.booking_step4_addons-page .navbar.scrolled .nav-menu a,
.booking_step5_review-page .navbar.scrolled .nav-menu a {
  color: #000 !important;
  text-shadow: none !important;
}

/* Booking pages: Hover colors when scrolled */
.booking_step1_dates-page .navbar.scrolled .nav-menu a:hover,
.booking_step1_dates-page .navbar.scrolled .nav-menu a.active,
.booking_step2_rooms-page .navbar.scrolled .nav-menu a:hover,
.booking_step2_rooms-page .navbar.scrolled .nav-menu a.active,
.booking_step3_guests-page .navbar.scrolled .nav-menu a:hover,
.booking_step3_guests-page .navbar.scrolled .nav-menu a.active,
.booking_step4_addons-page .navbar.scrolled .nav-menu a:hover,
.booking_step4_addons-page .navbar.scrolled .nav-menu a.active,
.booking_step5_review-page .navbar.scrolled .nav-menu a:hover,
.booking_step5_review-page .navbar.scrolled .nav-menu a.active {
  color: #62b784 !important;
}

/* Booking pages: Mobile/Tablet specific styles */
@media (max-width: 768px) {
  /* Hamburger icon should be white on transparent navbar */
  .booking_step1_dates-page .navbar:not(.scrolled) .nav-toggle-label span,
  .booking_step2_rooms-page .navbar:not(.scrolled) .nav-toggle-label span,
  .booking_step3_guests-page .navbar:not(.scrolled) .nav-toggle-label span,
  .booking_step4_addons-page .navbar:not(.scrolled) .nav-toggle-label span,
  .booking_step5_review-page .navbar:not(.scrolled) .nav-toggle-label span {
    background-color: white !important;
  }
  
  /* Hamburger icon should be dark when scrolled */
  .booking_step1_dates-page .navbar.scrolled .nav-toggle-label span,
  .booking_step2_rooms-page .navbar.scrolled .nav-toggle-label span,
  .booking_step3_guests-page .navbar.scrolled .nav-toggle-label span,
  .booking_step4_addons-page .navbar.scrolled .nav-toggle-label span,
  .booking_step5_review-page .navbar.scrolled .nav-toggle-label span {
    background-color: var(--color-primary) !important;
  }
  
  /* CRITICAL: Mobile menu should ALWAYS have white background and dark text on booking pages */
  .booking_step1_dates-page .nav-menu,
  .booking_step2_rooms-page .nav-menu,
  .booking_step3_guests-page .nav-menu,
  .booking_step4_addons-page .nav-menu,
  .booking_step5_review-page .nav-menu {
    background-color: var(--color-white) !important;
  }
  
  /* CRITICAL: Force black text in mobile menu on booking pages - HIGHEST PRIORITY */
  .booking_step1_dates-page .nav-menu a,
  .booking_step2_rooms-page .nav-menu a,
  .booking_step3_guests-page .nav-menu a,
  .booking_step4_addons-page .nav-menu a,
  .booking_step5_review-page .nav-menu a,
  .booking_step1_dates-page .nav-toggle:checked ~ .nav-menu a,
  .booking_step2_rooms-page .nav-toggle:checked ~ .nav-menu a,
  .booking_step3_guests-page .nav-toggle:checked ~ .nav-menu a,
  .booking_step4_addons-page .nav-toggle:checked ~ .nav-menu a,
  .booking_step5_review-page .nav-toggle:checked ~ .nav-menu a {
    color: #000 !important;
    text-shadow: none !important;
  }
  
  .booking_step1_dates-page .nav-menu a:hover,
  .booking_step1_dates-page .nav-menu a.active,
  .booking_step2_rooms-page .nav-menu a:hover,
  .booking_step2_rooms-page .nav-menu a.active,
  .booking_step3_guests-page .nav-menu a:hover,
  .booking_step3_guests-page .nav-menu a.active,
  .booking_step4_addons-page .nav-menu a:hover,
  .booking_step4_addons-page .nav-menu a.active,
  .booking_step5_review-page .nav-menu a:hover,
  .booking_step5_review-page .nav-menu a.active {
    color: #62b784 !important;
  }
  
  /* CRITICAL: Book Now button must ALWAYS be red in mobile menu on ALL pages including booking pages */
  .nav-menu .nav-book-btn,
  .nav-menu .btn-navbook,
  .nav-menu a.nav-book-btn,
  .nav-menu a.btn-navbook,
  .booking_step1_dates-page .nav-menu .nav-book-btn,
  .booking_step1_dates-page .nav-menu .btn-navbook,
  .booking_step1_dates-page .nav-menu a.nav-book-btn,
  .booking_step1_dates-page .nav-menu a.btn-navbook,
  .booking_step2_rooms-page .nav-menu .nav-book-btn,
  .booking_step2_rooms-page .nav-menu .btn-navbook,
  .booking_step2_rooms-page .nav-menu a.nav-book-btn,
  .booking_step2_rooms-page .nav-menu a.btn-navbook,
  .booking_step3_guests-page .nav-menu .nav-book-btn,
  .booking_step3_guests-page .nav-menu .btn-navbook,
  .booking_step3_guests-page .nav-menu a.nav-book-btn,
  .booking_step3_guests-page .nav-menu a.btn-navbook,
  .booking_step4_addons-page .nav-menu .nav-book-btn,
  .booking_step4_addons-page .nav-menu .btn-navbook,
  .booking_step4_addons-page .nav-menu a.nav-book-btn,
  .booking_step4_addons-page .nav-menu a.btn-navbook,
  .booking_step5_review-page .nav-menu .nav-book-btn,
  .booking_step5_review-page .nav-menu .btn-navbook,
  .booking_step5_review-page .nav-menu a.nav-book-btn,
  .booking_step5_review-page .nav-menu a.btn-navbook {
    background-color: var(--color-primary) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
  
  .nav-menu .nav-book-btn span,
  .nav-menu .btn-navbook span,
  .nav-menu a.nav-book-btn span,
  .nav-menu a.btn-navbook span,
  .booking_step1_dates-page .nav-menu .nav-book-btn span,
  .booking_step1_dates-page .nav-menu .btn-navbook span,
  .booking_step1_dates-page .nav-menu a.nav-book-btn span,
  .booking_step1_dates-page .nav-menu a.btn-navbook span,
  .booking_step2_rooms-page .nav-menu .nav-book-btn span,
  .booking_step2_rooms-page .nav-menu .btn-navbook span,
  .booking_step2_rooms-page .nav-menu a.nav-book-btn span,
  .booking_step2_rooms-page .nav-menu a.btn-navbook span,
  .booking_step3_guests-page .nav-menu .nav-book-btn span,
  .booking_step3_guests-page .nav-menu .btn-navbook span,
  .booking_step3_guests-page .nav-menu a.nav-book-btn span,
  .booking_step3_guests-page .nav-menu a.btn-navbook span,
  .booking_step4_addons-page .nav-menu .nav-book-btn span,
  .booking_step4_addons-page .nav-menu .btn-navbook span,
  .booking_step4_addons-page .nav-menu a.nav-book-btn span,
  .booking_step4_addons-page .nav-menu a.btn-navbook span,
  .booking_step5_review-page .nav-menu .nav-book-btn span,
  .booking_step5_review-page .nav-menu .btn-navbook span,
  .booking_step5_review-page .nav-menu a.nav-book-btn span,
  .booking_step5_review-page .nav-menu a.btn-navbook span {
    color: var(--color-white) !important;
  }
  
  .nav-menu .nav-book-btn:hover,
  .nav-menu .btn-navbook:hover,
  .nav-menu a.nav-book-btn:hover,
  .nav-menu a.btn-navbook:hover,
  .booking_step1_dates-page .nav-menu .nav-book-btn:hover,
  .booking_step1_dates-page .nav-menu .btn-navbook:hover,
  .booking_step1_dates-page .nav-menu a.nav-book-btn:hover,
  .booking_step1_dates-page .nav-menu a.btn-navbook:hover,
  .booking_step2_rooms-page .nav-menu .nav-book-btn:hover,
  .booking_step2_rooms-page .nav-menu .btn-navbook:hover,
  .booking_step2_rooms-page .nav-menu a.nav-book-btn:hover,
  .booking_step2_rooms-page .nav-menu a.btn-navbook:hover,
  .booking_step3_guests-page .nav-menu .nav-book-btn:hover,
  .booking_step3_guests-page .nav-menu .btn-navbook:hover,
  .booking_step3_guests-page .nav-menu a.nav-book-btn:hover,
  .booking_step3_guests-page .nav-menu a.btn-navbook:hover,
  .booking_step4_addons-page .nav-menu .nav-book-btn:hover,
  .booking_step4_addons-page .nav-menu .btn-navbook:hover,
  .booking_step4_addons-page .nav-menu a.nav-book-btn:hover,
  .booking_step4_addons-page .nav-menu a.btn-navbook:hover,
  .booking_step5_review-page .nav-menu .nav-book-btn:hover,
  .booking_step5_review-page .nav-menu .btn-navbook:hover,
  .booking_step5_review-page .nav-menu a.nav-book-btn:hover,
  .booking_step5_review-page .nav-menu a.btn-navbook:hover {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
  }
  
  .nav-menu .nav-book-btn:hover span,
  .nav-menu .btn-navbook:hover span,
  .nav-menu a.nav-book-btn:hover span,
  .nav-menu a.btn-navbook:hover span,
  .booking_step1_dates-page .nav-menu .nav-book-btn:hover span,
  .booking_step1_dates-page .nav-menu .btn-navbook:hover span,
  .booking_step1_dates-page .nav-menu a.nav-book-btn:hover span,
  .booking_step1_dates-page .nav-menu a.btn-navbook:hover span,
  .booking_step2_rooms-page .nav-menu .nav-book-btn:hover span,
  .booking_step2_rooms-page .nav-menu .btn-navbook:hover span,
  .booking_step2_rooms-page .nav-menu a.nav-book-btn:hover span,
  .booking_step2_rooms-page .nav-menu a.btn-navbook:hover span,
  .booking_step3_guests-page .nav-menu .nav-book-btn:hover span,
  .booking_step3_guests-page .nav-menu .btn-navbook:hover span,
  .booking_step3_guests-page .nav-menu a.nav-book-btn:hover span,
  .booking_step3_guests-page .nav-menu a.btn-navbook:hover span,
  .booking_step4_addons-page .nav-menu .nav-book-btn:hover span,
  .booking_step4_addons-page .nav-menu .btn-navbook:hover span,
  .booking_step4_addons-page .nav-menu a.nav-book-btn:hover span,
  .booking_step4_addons-page .nav-menu a.btn-navbook:hover span,
  .booking_step5_review-page .nav-menu .nav-book-btn:hover span,
  .booking_step5_review-page .nav-menu .btn-navbook:hover span,
  .booking_step5_review-page .nav-menu a.nav-book-btn:hover span,
  .booking_step5_review-page .nav-menu a.btn-navbook:hover span {
    color: var(--color-primary) !important;
  }
}