/* ==========================================================================
   ELEPHANT BEACH VILLA - LUXURY RESORT TEMPLATE STYLESHEET
   75% / 25% Color Rule:
   - Primary Accent (25% Page Coverage): Deep Forest Emerald (#2E5A44)
   - Main Background (75% Page Coverage): Warm Ivory Cream (#FFFAF5)
   
   Typography System:
   - Headline Font: "Italiana" (Google Serif Font)
   - Body Text Font: "Futura" (with sans-serif fallbacks)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Italiana&display=swap');

:root {
  /* 75% / 25% Color Palette Rule */
  --color-primary-25: #2E5A44;         /* 25% Deep Emerald Accent & Dark Sections */
  --color-primary-dark: #1F3D2E;       /* Darker Emerald for hovers/shadows */
  --color-bg-75: #FFFAF5;              /* 75% Warm Ivory Cream Background */
  --color-card-bg: #FFFFFF;            /* Pure White Card Background */
  
  --color-gold: #C5A880;               /* Luxury Gold Highlight */
  --color-gold-hover: #D4AF37;         /* Warm Gold Hover */
  --color-text-dark: #1A202C;          /* Deep Black / Charcoal Text */
  --color-text-muted: #5C6B62;         /* Muted Sage Text */
  --color-white: #FFFFFF;
  
  --color-booked: #4A2E2E;             /* Booked Calendar Date */
  --color-booked-border: #8C4A4A;
  --color-available: #2E5A44;          /* Available Calendar Date */
  --color-available-border: #4A8C6F;
  
  /* Fonts */
  --font-cinzel: 'Cinzel', serif;
  --font-serif: 'Italiana', Georgia, serif;
  --font-sans: 'Futura', 'Trebuchet MS', 'Arial', sans-serif;
  
  --container-max-width: 1280px;
  --header-height: 96px;
  --border-radius: 8px;
  --transition: all 0.3s ease;
  --box-shadow: 0 10px 30px rgba(46, 90, 68, 0.08);

  /* Google Drive Iframe Top Crop Variable (crops Drive toolbar & pop-out icon) */
  --drive-crop: 60px;
}

/* Reset & Baseline */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

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

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-75);
  color: var(--color-text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

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

img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Typography - Italiana Headlines */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-primary-25);
  letter-spacing: 0.5px;
}

h1 { font-size: clamp(2.8rem, 5.5vw, 4.5rem); }
h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
h4 { font-size: 1.35rem; }
h5 { font-size: 1.2rem; }

p {
  margin-bottom: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
}

.subtitle {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary-25);
  margin-bottom: 12px;
  display: block;
}

.text-gold { color: var(--color-gold) !important; }
.text-white { color: var(--color-white) !important; }
.text-muted { color: var(--color-text-muted); }

/* VISIBLE SECTION NUMBER BADGES */
.section-number-badge {
  display: none !important;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--border-radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
}

.btn-primary {
  background-color: var(--color-primary-25);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(46, 90, 68, 0.3);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary-25);
  border-color: var(--color-primary-25);
}

.btn-outline:hover {
  background-color: var(--color-primary-25);
  color: var(--color-white);
}

.btn-outline-gold {
  background-color: transparent;
  color: var(--color-gold) !important;
  border: 1.5px solid var(--color-gold) !important;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.btn-outline-gold:hover {
  background-color: var(--color-gold);
  color: var(--color-white) !important;
}

/* ==========================================================================
   HEADER / TOOLBAR: SPACING BETWEEN BEDROOMS & AVAILABILITY INCREASED BY +30px
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #FFFAF5 !important; /* Warm Ivory Canvas Toolbar */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(46, 90, 68, 0.12);
  height: var(--header-height);
  display: flex;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.header-nav-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

/* Mathematically Absolute Centered Logo - Luxury Stacked Layout (Desktop / Non-Mobile) */
.logo-centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
  text-decoration: none;
  gap: 0;
  padding: 4px 10px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.logo-centered:hover {
  opacity: 0.92;
  transform: translateX(-50%) translateY(-1px);
}

.brand-logo-img {
  width: 258px;
  height: 258px;
  object-fit: contain;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(197, 168, 128, 0.35));
  transition: transform 0.25s ease;
  /* 
   * The uploaded Drive logo (1600x1600 canvas) contains 667px (41.7%) transparent bottom margin.
   * At 258px scale, this creates 107.5px of transparent space below the elephant.
   * Applying margin-bottom: calc(-107.5px + 20px) (-87.5px) reduces the vertical space
   * between the elephant artwork and the "ELEPHANT BEACH" text precisely to 20px.
   */
  margin-bottom: -87.5px;
}

.logo-centered:hover .brand-logo-img {
  transform: scale(1.04);
}

.logo-icon {
  display: none;
}

.header-mobile-quick-btn {
  display: none;
}

/* Stacked Gold Typography Centered Underneath the Icon */
.logo-brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.05;
}

.logo-title-top {
  display: block;
  font-family: var(--font-cinzel), 'Cinzel', serif;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #C5A880;
  background: linear-gradient(135deg, #EED596 0%, #C5A880 50%, #9A7732 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: -3px; /* Optically centers tracking */
  white-space: nowrap;
  line-height: 1.05;
}

.logo-title-bottom {
  display: block;
  font-family: var(--font-cinzel), 'Cinzel', serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #C5A880;
  background: linear-gradient(135deg, #FFF2CE 0%, #C5A880 50%, #8A6828 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: -6px; /* Optically centers VILLA */
  white-space: nowrap;
  margin-top: 2px;
  line-height: 1.05;
}

.logo-text {
  font-family: var(--font-cinzel), 'Cinzel', serif;
  font-size: 1.25rem;
  color: var(--color-gold) !important;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

.logo-text span {
  color: var(--color-gold) !important;
}

/* Balanced Flanking Navigation Menus */
.nav-side {
  display: flex;
  align-items: center;
  list-style: none;
}

/* Increased spacing between Bedrooms and Availability buttons by +30px total (+15px left, +15px right) */
.nav-side.nav-left {
  gap: clamp(14px, 1.6vw, 22px);
  justify-content: flex-end;
  width: 42%;
  padding-right: 67px; /* Increased by +15px */
}

.nav-side.nav-right {
  gap: 24px;
  justify-content: flex-start;
  width: 42%;
  margin-left: auto;
  padding-left: 66px; /* Increased by +15px */
}

.nav-link {
  color: #000000 !important; /* Solid Crisp Black Toolbar Texts */
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: var(--transition);
}

.nav-link:hover, .nav-link.active {
  color: var(--color-primary-25) !important; /* Deep Emerald Highlight on Hover */
  font-weight: 700;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFAF5; /* Warm Ivory Dropdown Menu */
  border: 1px solid rgba(46, 90, 68, 0.18);
  border-radius: var(--border-radius);
  padding: 16px 0;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  padding: 10px 24px;
  color: #000000 !important; /* Crisp Black Dropdown Item Text */
  font-size: 0.85rem;
  font-weight: 500;
}

.dropdown-item:hover {
  background-color: rgba(46, 90, 68, 0.08);
  color: var(--color-primary-25) !important;
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-primary-25);
  font-size: 1.6rem;
  cursor: pointer;
}

/* SECTION 1 HERO & SUBPAGE HEROES WITH BLACK TINT OVERLAY */
.hero {
  position: relative;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.85) 100%),
              url('https://lh3.googleusercontent.com/d/1wWmtl2e1a_BnuESVCgpDrEzN1HL8ruu0') center/cover no-repeat fixed;
  color: var(--color-white);
  padding: 110px 0 150px;
  overflow: hidden;
}

.hero-availability {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.85) 100%),
              url('https://images.unsplash.com/photo-1576013551627-0cc20b96c2a7?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
}

.hero-about {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.85) 100%),
              url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
}

.hero-rooms {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.85) 100%),
              url('https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
}

.hero-gallery {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.85) 100%),
              url('https://lh3.googleusercontent.com/d/14zo4EHTZFQVlHbTHjjaFcCC6VvfoJt0D') center/cover no-repeat fixed;
}

.hero-contact {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.85) 100%),
              url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
}

.hero-experiences {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.85) 100%),
              url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 840px;
  text-align: center;
  margin: 0 auto;
}

.hero-stars {
  color: var(--color-gold);
  font-size: 1.1rem;
  letter-spacing: 4px;
  margin-bottom: 16px;
}

.hero-title {
  color: var(--color-white) !important;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-description {
  font-size: 1.1rem;
  color: rgba(255, 250, 245, 0.95);
  margin-bottom: 30px;
  line-height: 1.7;
}

/* Sleek Semi-Transparent Check Dates Bar */
.hero-transparent-bar-wrapper {
  position: relative;
  z-index: 10;
  margin-top: -50px;
  margin-bottom: 70px;
}

.transparent-check-bar {
  background: rgba(31, 61, 46, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 250, 245, 0.25);
  border-radius: 40px;
  padding: 16px 28px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  color: var(--color-white);
}

.bar-dates-row {
  display: contents;
}

.bar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  position: relative;
}

.bar-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-gold);
}

.bar-input {
  background: transparent;
  border: none;
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
}

/* Modern Multi-Room Selector Popover Dropdown */
.multi-room-dropdown-toggle {
  background: transparent;
  border: none;
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}

.multi-room-popover {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  background-color: var(--color-primary-dark);
  border: 1px solid rgba(197, 168, 128, 0.4);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: none;
}

.multi-room-popover.active {
  display: block;
}

.multi-room-popover-header {
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 250, 245, 0.15);
}

.room-opt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.85rem;
  color: var(--color-white);
}

.room-opt-item:hover {
  background-color: rgba(197, 168, 128, 0.2);
}

.room-opt-item input[type="checkbox"] {
  accent-color: var(--color-gold);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.guest-max-badge {
  font-size: 0.7rem;
  background-color: rgba(255, 250, 245, 0.15);
  color: var(--color-gold);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

/* Modern Stepper Counter Widget (+ / - buttons) */
.stepper-widget {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stepper-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  background: rgba(255, 250, 245, 0.1);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.stepper-btn:hover {
  background: var(--color-gold);
  color: var(--color-primary-25);
}

.stepper-value {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-white);
  min-width: 60px;
  text-align: center;
}

/* Light Theme Stepper for Availability & Booking Forms */
.stepper-widget-light {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 16px;
  transition: var(--transition);
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.reservation-form-container {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 40px;
  border-radius: 16px;
  box-shadow: var(--box-shadow);
  border: 1.5px solid rgba(46, 90, 68, 0.15);
  box-sizing: border-box;
}

.stepper-widget-light:focus-within {
  border-color: var(--color-primary-25);
  box-shadow: 0 0 0 3px rgba(46, 90, 68, 0.12);
}

.stepper-btn-light {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold);
  background: #FFFFFF;
  color: var(--color-primary-25);
  font-size: 1.1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.stepper-btn-light:hover {
  background: var(--color-primary-25);
  border-color: var(--color-primary-25);
  color: #FFFFFF;
}

.stepper-btn-light:active {
  transform: scale(0.95);
}

.stepper-value-light {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-25);
  min-width: 75px;
  text-align: center;
}

/* Section Colors System */
.section {
  padding: 90px 0;
  border-bottom: 1px solid rgba(46, 90, 68, 0.08);
}

.section-ivory {
  background-color: var(--color-bg-75);
  color: var(--color-text-dark);
}

.section-ivory .subtitle {
  color: var(--color-primary-25);
}

.section-ivory h2 {
  color: var(--color-primary-25);
}

.section-ivory p {
  color: var(--color-text-muted);
}

.section-emerald {
  background-color: var(--color-primary-25);
  color: var(--color-white);
}

.section-emerald .subtitle {
  color: var(--color-gold) !important;
}

.section-emerald h2 {
  color: var(--color-white) !important;
}

.section-emerald p {
  color: rgba(255, 250, 245, 0.95) !important;
}

/* SECTION 4 PARALLAX */
.section-banner-bg {
  position: relative;
  padding: 110px 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 100%),
              url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
  color: var(--color-white);
  text-align: center;
}

.section-banner-bg .subtitle {
  color: var(--color-gold) !important;
}

.section-banner-bg h2 {
  color: var(--color-white) !important;
  margin-bottom: 16px;
}

.section-banner-bg p {
  color: rgba(255, 250, 245, 0.95) !important;
  max-width: 700px;
  margin: 0 auto 32px;
  font-size: 1.05rem;
}

/* ==========================================================================
   SECTION 5: WIDER ROOM CARDS SHOWCASE (460px FLEX / 480px MAX-WIDTH)
   ========================================================================== */
.rooms-slider-container {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 16px 4px 32px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-25) rgba(46, 90, 68, 0.15);
}

.rooms-slider-container::-webkit-scrollbar {
  height: 8px;
}

.rooms-slider-container::-webkit-scrollbar-track {
  background: rgba(46, 90, 68, 0.1);
  border-radius: 10px;
}

.rooms-slider-container::-webkit-scrollbar-thumb {
  background: var(--color-primary-25);
  border-radius: 10px;
}

/* Wider Crystal Clear Photo Room Card */
.room-card-slide-overlay {
  flex: 0 0 460px;
  max-width: 480px;
  height: 420px;
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(46, 90, 68, 0.18);
  transition: var(--transition);
}

.room-card-slide-overlay:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
  border-color: var(--color-gold);
}

/* 100% Bright, Crisp Unobscured Photograph */
.room-card-full-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.room-card-slide-overlay:hover .room-card-full-img {
  transform: scale(1.05);
}

/* Subtle Bottom Dark Gradient */
.room-card-text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(15, 28, 21, 0.88) 100%);
  padding: 24px 24px 18px;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Top Floating Category Pill Badge on Image */
.room-top-pill-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(31, 61, 46, 0.85);
  backdrop-filter: blur(8px);
  color: var(--color-gold);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(197, 168, 128, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 5;
}

/* SECTION 6 PARALLAX & SLIDER */
.section-reviews-parallax {
  position: relative;
  padding: 90px 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.85) 100%),
              url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
  color: var(--color-white);
}

.section-reviews-parallax .subtitle {
  color: var(--color-gold) !important;
}

.section-reviews-parallax h2 {
  color: var(--color-white) !important;
}

.section-reviews-parallax p {
  color: rgba(255, 250, 245, 0.95) !important;
}

.reviews-slider-container {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 16px 8px 24px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) rgba(255, 250, 245, 0.2);
}

.reviews-slider-container::-webkit-scrollbar {
  height: 8px;
}

.reviews-slider-container::-webkit-scrollbar-track {
  background: rgba(255, 250, 245, 0.15);
  border-radius: 10px;
}

.reviews-slider-container::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: 10px;
}

.review-card-slide {
  flex: 0 0 350px;
  max-width: 360px;
  scroll-snap-align: start;
  background-color: #FFFFFF !important;
  padding: 28px;
  border-radius: 12px;
  border-left: 4px solid var(--color-gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  color: #000000 !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.slider-hint-text {
  font-size: 0.8rem;
  color: var(--color-gold);
  letter-spacing: 1px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ADVANCED MODERN UI COMPONENTS */
.input-group-modern {
  position: relative;
  margin-bottom: 20px;
}

.input-label-modern {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary-25);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.input-modern {
  width: 100%;
  padding: 14px 18px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text-dark);
  transition: var(--transition);
  outline: none;
}

.input-modern:focus {
  background: #FFFFFF;
  border-color: var(--color-primary-25);
  box-shadow: 0 0 0 3px rgba(46, 90, 68, 0.15);
}

.subject-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.subject-pill {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: var(--color-text-dark);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.subject-pill:hover {
  border-color: var(--color-gold);
  background: rgba(197, 168, 128, 0.1);
}

.subject-pill.active {
  background: var(--color-primary-25);
  color: var(--color-white);
  border-color: var(--color-primary-25);
  font-weight: 600;
}

/* Modern International Phone & Country Code Picker Component */
.phone-input-container {
  position: relative;
  width: 100%;
}

.phone-input-wrapper {
  display: flex;
  align-items: stretch;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  transition: var(--transition);
  position: relative;
}

.phone-input-wrapper:hover {
  border-color: #CBD5E1;
}

.phone-input-wrapper:focus-within {
  background: #FFFFFF;
  border-color: var(--color-primary-25);
  box-shadow: 0 0 0 3px rgba(46, 90, 68, 0.15);
}

.country-code-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(46, 90, 68, 0.04);
  border: none;
  border-right: 1.5px solid #E2E8F0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-primary-25);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
  transition: all 0.2s ease;
}

.country-code-btn:hover {
  background: rgba(46, 90, 68, 0.08);
}

.country-code-btn .country-flag {
  font-size: 1.25rem;
  line-height: 1;
}

.country-code-btn .country-dial {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary-25);
}

.country-code-btn .country-caret {
  font-size: 0.7rem;
  color: var(--color-gold);
  transition: transform 0.2s ease;
}

.country-code-btn[aria-expanded="true"] .country-caret {
  transform: rotate(180deg);
}

.phone-text-input {
  flex: 1;
  padding: 14px 16px;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text-dark);
  outline: none;
  width: 100%;
}

.phone-text-input::placeholder {
  color: #94A3B8;
}

/* Modern Country Dropdown Popover */
.country-dropdown-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(380px, 94vw);
  background: #FFFFFF;
  border: 1.5px solid rgba(46, 90, 68, 0.2);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(31, 61, 46, 0.18);
  z-index: 1050;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.country-dropdown-popover.active {
  display: flex;
}

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

.country-search-bar {
  padding: 10px 12px;
  border-bottom: 1px solid #E2E8F0;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  gap: 8px;
}

.country-search-input {
  width: 100%;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  outline: none;
  background: #FFFFFF;
  color: var(--color-text-dark);
  transition: border-color 0.2s ease;
}

.country-search-input:focus {
  border-color: var(--color-primary-25);
  box-shadow: 0 0 0 2px rgba(46, 90, 68, 0.1);
}

.country-list-scroll {
  max-height: 250px;
  overflow-y: auto;
  padding: 6px 0;
  list-style: none;
  margin: 0;
  overscroll-behavior: contain;
}

.country-list-scroll::-webkit-scrollbar {
  width: 6px;
}
.country-list-scroll::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}

.country-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-size: 0.88rem;
  color: var(--color-text-dark);
}

.country-option-item:hover,
.country-option-item.selected,
.country-option-item:focus {
  background: rgba(46, 90, 68, 0.08);
  outline: none;
}

.country-option-item.selected {
  font-weight: 600;
  color: var(--color-primary-25);
}

.country-option-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.country-option-flag {
  font-size: 1.25rem;
  line-height: 1;
}

.country-option-name {
  font-size: 0.88rem;
}

.country-option-code {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-gold);
  margin-left: 8px;
}

.input-hint-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* Booking Alert Banner & Toast */
.booking-alert-banner {
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 22px;
  font-size: 0.9rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: bannerFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.booking-alert-banner.success {
  background: #F0FDF4;
  border: 1.5px solid #22C55E;
  color: #14532D;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.12);
}

.booking-alert-banner.error {
  background: #FEF2F2;
  border: 1.5px solid #EF4444;
  color: #991B1B;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.12);
}

.booking-alert-banner.info {
  background: #F8FAFC;
  border: 1.5px solid var(--color-gold);
  color: var(--color-primary-25);
}

.booking-alert-id {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-primary-25);
  background: rgba(46, 90, 68, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  letter-spacing: 0.5px;
}

.calendar-sync-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  background: rgba(46, 90, 68, 0.06);
  padding: 4px 10px;
  border-radius: 20px;
  margin-left: 10px;
  transition: all 0.2s ease;
}

.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  display: inline-block;
}

.sync-dot.loading {
  background: var(--color-gold);
  animation: syncPulse 1s infinite alternate;
}

@keyframes syncPulse {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

.booking-summary-widget {
  background: linear-gradient(135deg, var(--color-primary-25) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(31, 61, 46, 0.3);
  position: relative;
  overflow: hidden;
}

.booking-summary-widget::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: rgba(197, 168, 128, 0.15);
  border-radius: 50%;
  pointer-events: none;
}

.summary-header {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-white);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 250, 245, 0.2);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255, 250, 245, 0.15);
  font-size: 0.88rem;
}

.summary-label {
  color: rgba(255, 250, 245, 0.8);
}

.summary-value {
  font-weight: 600;
  color: var(--color-gold);
}

.host-profile-card {
  background: #FFFFFF;
  border: 1px solid rgba(46, 90, 68, 0.15);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--box-shadow);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.host-avatar-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-25);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: bold;
  flex-shrink: 0;
  border: 2px solid var(--color-gold);
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.section-header.text-left {
  text-align: left;
  margin: 0 0 30px;
}

/* Feature Cards with Real Images */
.feature-card-with-img {
  background-color: var(--color-card-bg);
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid rgba(46, 90, 68, 0.12);
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.feature-card-with-img:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary-25);
}

.feature-card {
  background-color: var(--color-card-bg);
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid rgba(46, 90, 68, 0.12);
  box-shadow: var(--box-shadow);
  padding: 24px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary-25);
  box-shadow: 0 16px 36px rgba(46, 90, 68, 0.12);
}

.contact-info-card {
  background: #FFFFFF;
  padding: 32px;
  border-radius: 16px;
  box-shadow: var(--box-shadow);
  border: 1px solid rgba(46, 90, 68, 0.15);
  margin-bottom: 24px;
  box-sizing: border-box;
}

.contact-form-card {
  background: #FFFFFF;
  padding: 36px;
  border-radius: 16px;
  box-shadow: var(--box-shadow);
  border: 2px solid var(--color-primary-25);
  box-sizing: border-box;
}

.feature-card-media {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.feature-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.feature-card-content h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: var(--color-primary-25);
}

.feature-card-content p {
  font-size: 0.88rem;
  margin-bottom: 0;
  color: var(--color-text-muted);
}

/* Media Card */
.media-card-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--border-radius);
  border: 2px solid rgba(46, 90, 68, 0.15);
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.media-card-img:hover {
  transform: scale(1.02);
  border-color: var(--color-gold);
}

/* Grids */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 22px;
  width: 100%;
  box-sizing: border-box;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 28px;
  width: 100%;
  box-sizing: border-box;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 40px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.grid-2 > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Bedroom Cards */
.room-card {
  background-color: var(--color-card-bg);
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid rgba(46, 90, 68, 0.12);
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.room-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary-25);
}

.room-card-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.room-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.room-badge {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-primary-25);
  background-color: rgba(46, 90, 68, 0.1);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.room-title {
  margin-bottom: 12px;
  color: var(--color-primary-25);
}

.room-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0 24px;
  padding-top: 16px;
  border-top: 1px solid #EDF2F7;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.room-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.room-price {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-primary-25);
}

.room-price span {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* REVIEWS CARDS */
.review-stars {
  color: #F59E0B;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.review-quote {
  font-style: italic;
  color: #000000 !important;
  margin-bottom: 20px;
  line-height: 1.6;
  font-size: 0.95rem;
  font-weight: 400;
}

.review-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #E2E8F0;
  padding-top: 12px;
}

.author-name {
  font-weight: 700;
  color: #000000 !important;
  font-size: 0.95rem;
}

.review-date {
  font-size: 0.78rem;
  color: #4A5568 !important;
  font-weight: 500;
}

/* Room Selector Grid */
.room-selector-wrapper {
  margin-bottom: 40px;
}

.room-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.room-select-card {
  background-color: var(--color-card-bg);
  border: 2px solid rgba(46, 90, 68, 0.15);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  user-select: none;
}

.room-select-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-3px);
}

.room-select-card.active {
  border-color: var(--color-primary-25);
  box-shadow: 0 0 0 3px rgba(46, 90, 68, 0.2);
}

.room-select-card.active::after {
  content: '✓ Selected';
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: var(--color-primary-25);
  color: var(--color-white);
  font-size: 0.7rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 20px;
}

.room-select-media-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}

.room-select-info {
  padding: 14px 18px;
}

.room-select-info h4 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.room-select-info p {
  font-size: 0.8rem;
  margin-bottom: 0;
}

.all-villa-btn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-card-bg);
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid rgba(46, 90, 68, 0.15);
}

/* Multi-Calendar Grid Container */
.multi-calendar-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 28px;
  width: 100%;
  box-sizing: border-box;
}

.room-calendar-card {
  background-color: var(--color-card-bg);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--box-shadow);
  border: 2px solid rgba(46, 90, 68, 0.15);
  width: 100%;
  box-sizing: border-box;
}

/* Single Villa Calendar Container & Card */
.single-villa-calendar-container {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.single-villa-calendar-card {
  background-color: var(--color-card-bg, #FFFFFF);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 2px solid rgba(46, 90, 68, 0.18);
  width: 100%;
  box-sizing: border-box;
}

.single-villa-calendar-card .calendar-grid {
  gap: 8px;
}

.single-villa-calendar-card .calendar-day {
  font-size: 0.95rem;
  min-height: 48px;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .single-villa-calendar-card {
    padding: 18px 14px;
    border-radius: 12px;
  }
  .single-villa-calendar-card .calendar-day {
    font-size: 0.85rem;
    min-height: 38px;
    border-radius: 6px;
  }
  .single-villa-calendar-card .calendar-grid {
    gap: 4px;
  }
}

/* Section 3 Accommodation Selection Cards */
.accommodation-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.accommodation-option-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
  position: relative;
}

.accommodation-option-card:hover {
  border-color: rgba(46, 90, 68, 0.4);
  box-shadow: 0 4px 14px rgba(46, 90, 68, 0.06);
}

.accommodation-option-card.active {
  border-color: var(--color-primary-25, #2E5A44);
  background: rgba(46, 90, 68, 0.04);
  box-shadow: 0 4px 16px rgba(46, 90, 68, 0.08);
}

.accommodation-option-card .acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.accommodation-option-card .acc-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.96rem;
  color: #1E293B;
  transition: color 0.2s ease;
}

.accommodation-option-card.active .acc-title-wrap {
  color: var(--color-primary-25, #2E5A44);
}

.accommodation-option-card input[type="radio"] {
  accent-color: var(--color-primary-25, #2E5A44);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.accommodation-option-card .acc-desc {
  margin: 0 0 0 28px;
  font-size: 0.82rem;
  color: var(--color-text-muted, #64748B);
  line-height: 1.45;
}

.accommodation-option-card .acc-badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.acc-badge-standard {
  background: rgba(46, 90, 68, 0.12);
  color: var(--color-primary-25, #2E5A44);
}

.accommodation-option-card.active .acc-badge-standard {
  background: var(--color-primary-25, #2E5A44);
  color: #FFFFFF;
}

.acc-badge-special {
  background: rgba(197, 160, 89, 0.18);
  color: #926E24;
}

.accommodation-option-card.active .acc-badge-special {
  background: var(--color-gold, #C5A059);
  color: #1B2B24;
}

.calendar-room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--color-bg-75);
}

.calendar-room-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-primary-25);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.calendar-nav-btn {
  background: var(--color-bg-75);
  border: 1px solid #CBD5E1;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary-25);
  font-size: 0.8rem;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
  font-size: 0.78rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.legend-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

.legend-box.available {
  background-color: rgba(46, 90, 68, 0.15);
  border: 1px solid var(--color-available-border);
}

.legend-box.booked {
  background-color: var(--color-booked);
  border: 1px solid var(--color-booked-border);
}

.legend-box.selected {
  background-color: var(--color-primary-25);
}

.legend-box.in-range {
  background-color: rgba(46, 90, 68, 0.3);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.calendar-day-head {
  text-align: center;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  padding-bottom: 4px;
  min-width: 0;
}

.calendar-day {
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  user-select: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.calendar-day.empty {
  cursor: default;
  background: transparent;
}

.calendar-day.available {
  background-color: rgba(46, 90, 68, 0.08);
  border: 1px solid rgba(74, 140, 111, 0.3);
  color: var(--color-primary-25);
}

.calendar-day.available:hover {
  background-color: var(--color-primary-25);
  color: var(--color-white);
  border-color: var(--color-primary-25);
}

.calendar-day.booked {
  background-color: var(--color-booked);
  border: 1px solid var(--color-booked-border);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Past Dates Disabled Styling */
.calendar-day.past-date {
  background-color: rgba(226, 232, 240, 0.4) !important;
  border: 1px solid #E2E8F0 !important;
  color: #A0AEC0 !important;
  cursor: not-allowed !important;
  opacity: 0.5;
  pointer-events: none;
}

/* Range Selection Styling */
.calendar-day.selected-start, .calendar-day.selected-end {
  background-color: var(--color-primary-25) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary-dark) !important;
  font-weight: bold;
}

.calendar-day.in-range {
  background-color: rgba(46, 90, 68, 0.28) !important;
  color: var(--color-primary-25) !important;
  border-color: var(--color-primary-25) !important;
  font-weight: 600;
}

/* Staged calendar change visual indicators */
.calendar-day.staged-change {
  position: relative;
  outline: 2px dashed #C5A059 !important;
  outline-offset: -2px;
  animation: stagedPulse 2s infinite ease-in-out;
}

.calendar-day.staged-change::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #C5A059;
  box-shadow: 0 0 5px rgba(197, 160, 89, 0.9);
}

@keyframes stagedPulse {
  0%, 100% { outline-color: #C5A059; }
  50% { outline-color: rgba(197, 160, 89, 0.4); }
}

/* Discreet Admin Link in Footer */
.discreet-admin-btn {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 250, 245, 0.32);
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  margin-left: 10px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  letter-spacing: 0.3px;
}

.discreet-admin-btn:hover,
.discreet-admin-btn:focus-visible {
  color: rgba(255, 250, 245, 0.75);
  background-color: rgba(255, 250, 245, 0.05);
  border-color: rgba(255, 250, 245, 0.18);
  outline: none;
}

/* Floating Admin Edit Mode Control Bar */
.admin-floating-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999990;
  width: calc(100% - 40px);
  max-width: 740px;
  background: #183124;
  background: linear-gradient(135deg, #162F22 0%, #204030 100%);
  border: 1px solid rgba(197, 160, 89, 0.38);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 12px 20px;
  backdrop-filter: blur(12px);
  animation: adminBarSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes adminBarSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.admin-floating-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-floating-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-floating-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(197, 160, 89, 0.16);
  color: #F0DFC0;
  border: 1px solid rgba(197, 160, 89, 0.4);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.admin-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #38A169;
  box-shadow: 0 0 8px #38A169;
  animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

.admin-pending-counter {
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 500;
}

.admin-floating-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-bar-btn {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.admin-bar-save-btn {
  background: var(--color-gold);
  color: #1A3426;
  border: 1px solid var(--color-gold);
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.25);
}

.admin-bar-save-btn:hover:not(:disabled) {
  background: #D4B26F;
  border-color: #D4B26F;
  transform: translateY(-1px);
}

.admin-bar-save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.admin-bar-discard-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.admin-bar-discard-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 640px) {
  .admin-floating-bar {
    bottom: 12px;
    width: calc(100% - 24px);
    padding: 10px 14px;
  }
  .admin-floating-content {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-floating-actions {
    justify-content: flex-end;
  }
}

/* In-Page Admin Password Modal */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(14, 28, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalFadeIn 0.2s ease-out;
}

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

.admin-modal-card {
  width: 100%;
  max-width: 440px;
  background: #183124;
  background: linear-gradient(145deg, #183325 0%, #102419 100%);
  border: 1px solid rgba(197, 160, 89, 0.4);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: modalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.admin-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.admin-modal-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(197, 160, 89, 0.15);
  border: 1px solid rgba(197, 160, 89, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.admin-modal-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #FFFFFF;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.admin-modal-subtitle {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: rgba(255, 250, 245, 0.65);
  margin: 2px 0 0;
}

.admin-modal-close-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.2s ease;
  line-height: 1;
}

.admin-modal-close-icon:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

.admin-modal-body {
  padding: 20px 22px 24px;
}

.admin-modal-field {
  margin-bottom: 16px;
}

.admin-modal-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #E2D3B7;
  margin-bottom: 8px;
}

.admin-modal-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(197, 160, 89, 0.35);
  border-radius: 8px;
  color: #FFFFFF;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.admin-modal-input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2);
}

.admin-modal-error {
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(229, 62, 62, 0.15);
  border: 1px solid rgba(229, 62, 62, 0.4);
  color: #FEB2B2;
  font-size: 0.78rem;
  margin-bottom: 16px;
  line-height: 1.4;
}

.admin-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.admin-modal-btn {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-modal-btn-cancel {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.admin-modal-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.admin-modal-btn-submit {
  background: var(--color-gold);
  color: #1A3426;
  border: 1px solid var(--color-gold);
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
}

.admin-modal-btn-submit:hover {
  background: #D4B26F;
  border-color: #D4B26F;
  transform: translateY(-1px);
}

/* Admin Sync Badge in Floating Bar */
.admin-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.admin-sync-badge.synced {
  background: rgba(46, 133, 84, 0.22);
  color: #86EFAC;
  border-color: rgba(74, 222, 128, 0.35);
}

.admin-sync-badge.warning {
  background: rgba(217, 119, 6, 0.22);
  color: #FDE68A;
  border-color: rgba(251, 191, 36, 0.35);
}

.admin-sync-badge.error {
  background: rgba(220, 38, 38, 0.22);
  color: #FCA5A5;
  border-color: rgba(248, 113, 113, 0.35);
}

.admin-bar-settings-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border: 1px solid rgba(197, 160, 89, 0.35);
}

.admin-bar-settings-btn:hover {
  background: rgba(197, 160, 89, 0.25);
  border-color: var(--color-gold);
}

.admin-modal-card-lg {
  max-width: 580px;
}

.admin-info-box {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(197, 160, 89, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  color: #E2D3B7;
  line-height: 1.5;
}

.admin-connection-result {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 16px;
  display: none;
}

.admin-connection-result.success {
  display: block;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86EFAC;
}

.admin-connection-result.error {
  display: block;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #FCA5A5;
}

.admin-connection-result.loading {
  display: block;
  background: rgba(197, 160, 89, 0.15);
  border: 1px solid rgba(197, 160, 89, 0.4);
  color: #FDE68A;
}

.admin-steps-list {
  margin: 10px 0 0 0;
  padding-left: 18px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
}

.admin-steps-list li {
  margin-bottom: 4px;
}

.validation-alert {
  display: none !important;
}

/* Footer */
.footer {
  background-color: var(--color-primary-25);
  color: var(--color-white);
  padding: 80px 0 35px;
  border-top: 1px solid rgba(255, 250, 245, 0.15);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 50px;
}

.footer-col-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: -96px; /* Levels Elephant Beach Villa text exactly with "About The Space" */
}

.footer-brand-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 24px;
}

/* Section 8 logo large as in the toolbar (258px) with matching logo:text ratio (258px:25px) */
.footer-brand-logo {
  width: 258px;
  height: 258px;
  object-fit: contain;
  margin-bottom: -87.5px;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

.footer-brand-name {
  font-family: var(--font-cinzel), 'Cinzel', serif;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-gold);
  line-height: 1.15;
}

.footer-brand-name span {
  color: var(--color-gold);
}

.footer-brand-desc {
  color: rgba(255, 250, 245, 0.75);
  line-height: 1.6;
}

.footer-col h5 {
  color: var(--color-white) !important;
  margin-bottom: 20px;
  font-size: 1.15rem;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: rgba(255, 250, 245, 0.8);
  font-size: 0.88rem;
}

.footer-links a:hover {
  color: var(--color-gold);
}

.footer-bottom {
  padding-top: 25px;
  border-top: 1px solid rgba(255, 250, 245, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 250, 245, 0.6);
}

/* Responsive */
@media (max-width: 991px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .header {
    background-color: #121315 !important; /* Matches logo dark luxury background color */
    border-bottom: 1px solid rgba(197, 160, 89, 0.25) !important;
    height: auto !important;
    min-height: unset !important;
    padding: 12px 16px 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  }

  .header-nav-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 5px !important;
    position: relative !important;
  }

  /* Hide old desktop split menus on mobile */
  .nav-side {
    display: none !important;
  }

  /* Centered logo on mobile - vertical column (Logo on line 1, Name on line 2) */
  .logo-centered {
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 auto !important;
    text-decoration: none !important;
    width: auto !important;
  }

  /* 1. Mobile view: Proportional logo & title text matching desktop ratios (258px : 25px : 40px) */
  .brand-logo-img {
    width: 155px !important;
    height: 155px !important;
    max-width: 155px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55)) !important;
    display: block !important;
    /* 
     * At 155px scale, transparent bottom space is 64.6px.
     * Setting margin-bottom to -52.6px leaves exactly 12px visual gap
     * (matching desktop 20px gap scaled by 155/258).
     */
    margin: 0 auto -52.6px auto !important;
  }

  .logo-icon {
    display: none !important;
  }

  /* Mobile Stacked Typography */
  .logo-brand-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.05 !important;
    margin: 0 auto !important;
  }

  /* Exactly 15px to preserve 258 : 25 ratio with 155px logo, scaling gracefully on small screens */
  .logo-title-top {
    font-family: var(--font-cinzel), 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: clamp(12px, 3.8vw, 15px) !important;
    letter-spacing: clamp(1.2px, 0.5vw, 2px) !important;
    text-transform: uppercase !important;
    color: #C5A059 !important;
    background: linear-gradient(135deg, #EED596 0%, #C5A880 50%, #9A7732 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-align: center !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    margin-right: -2px !important;
  }

  /* Exactly 24px to preserve 258 : 40 ratio with 155px logo, scaling gracefully on small screens */
  .logo-title-bottom {
    font-family: var(--font-cinzel), 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: clamp(17px, 5.4vw, 24px) !important;
    letter-spacing: clamp(2px, 1.1vw, 4.5px) !important;
    text-transform: uppercase !important;
    color: #C5A059 !important;
    background: linear-gradient(135deg, #FFF2CE 0%, #C5A880 50%, #8A6828 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-align: center !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    margin-right: -4.5px !important;
    margin-top: 2px !important;
  }

  .logo-text {
    display: block !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #C5A059 !important;
    text-align: center !important;
    margin: 0 auto !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  .logo-text span {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    color: #C5A059 !important;
    font-style: normal !important;
  }

  /* Remove top navigation menu from the mobile view, which is next to the book button */
  .mobile-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Book button below the name and middle of the tool bar as a new line */
  .header-mobile-quick-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px auto 0 !important;
    padding: 6px 28px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #121315 !important;
    background: linear-gradient(135deg, #EED596 0%, #C5A059 50%, #9A7732 100%) !important;
    border: 1px solid #EED596 !important;
    border-radius: 20px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.25s ease !important;
    min-height: 32px !important;
  }

  .header-mobile-quick-btn:hover, .header-mobile-quick-btn:active {
    background: linear-gradient(135deg, #FFF2CE 0%, #DFBA73 50%, #B89040 100%) !important;
    transform: scale(1.02);
  }

  /* 2. Mobile view; home page section 8: Large size logo at middle, name at middle, description justified */
  .footer-col-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 32px !important;
  }

  .footer-brand-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .footer-brand-logo {
    width: 105px !important; /* Large size logo at the middle */
    height: 105px !important;
    object-fit: contain !important;
    margin: 0 auto -28px auto !important;
    display: block !important;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)) !important;
  }

  .footer-brand-name {
    text-align: center !important;
    margin: 0 auto 14px auto !important;
    font-family: var(--font-cinzel), 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #C5A059 !important;
    line-height: 1.25 !important;
  }

  .footer-brand-name span {
    color: #C5A059 !important;
  }

  .footer-brand-desc {
    text-align: justify !important; /* Justified text */
    text-justify: inter-word !important;
    color: rgba(255, 250, 245, 0.88) !important;
    line-height: 1.75 !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }

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

/* ==========================================================================
   DESKTOP STATE: HIDE MOBILE BOTTOM TOOLBAR AND LEFT TEXT DRAWER
   ========================================================================== */
@media (min-width: 992px) {
  #mobileBottomToolbar,
  .mobile-bottom-toolbar,
  #leftTextToolbar,
  .left-text-drawer,
  #leftTextToolbarOverlay,
  .left-drawer-overlay,
  .header-mobile-quick-btn {
    display: none !important;
  }
}

/* ==========================================================================
   MOBILE BOTTOM TOOLBAR: ONLY PROFESSIONAL ICONS WITHOUT TEXTS
   ========================================================================== */
.mobile-bottom-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(24, 49, 36, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(197, 160, 89, 0.35);
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 10000;
}

.mobile-bottom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 48px;
  border-radius: 12px;
  color: rgba(255, 250, 245, 0.75);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-btn svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease, stroke 0.2s ease;
}

.mobile-bottom-btn:active {
  transform: scale(0.92);
}

.mobile-bottom-btn:hover {
  color: #FFFFFF;
}

.mobile-bottom-btn.active {
  color: var(--color-gold);
  background: rgba(197, 160, 89, 0.15);
}

.mobile-bottom-btn.active::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 6px var(--color-gold);
}

/* ==========================================================================
   HIDDEN TEXT TOOLBAR ON THE LEFT SIDE OF THE SCREEN (SLIDE-OUT DRAWER)
   ========================================================================== */
.left-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 18, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.left-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.left-text-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 310px;
  max-width: 86vw;
  background: #FFFAF5; /* Warm Ivory Canvas */
  z-index: 100001;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 10px 0 35px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-right: 1px solid rgba(46, 90, 68, 0.15);
}

.left-text-drawer.active {
  transform: translateX(0);
}

.left-drawer-header {
  padding: 18px 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(46, 90, 68, 0.12);
  background: rgba(46, 90, 68, 0.04);
}

.left-drawer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.left-drawer-logo .brand-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 0;
}

.left-drawer-logo .logo-icon {
  width: 36px;
  height: 36px;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.left-drawer-logo-text {
  display: flex;
  flex-direction: column;
}

.left-drawer-logo-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--color-primary-25);
  line-height: 1.2;
  font-weight: bold;
}

.left-drawer-logo-title span {
  color: var(--color-gold);
}

.left-drawer-logo-subtitle {
  font-size: 0.68rem;
  color: rgba(24, 49, 36, 0.65);
  letter-spacing: 0.5px;
}

.left-drawer-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(46, 90, 68, 0.08);
  border: none;
  color: var(--color-primary-25);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s;
}

.left-drawer-close-btn:hover {
  background: rgba(46, 90, 68, 0.15);
}

.left-drawer-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.left-drawer-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-gold);
  margin-bottom: 10px;
}

.left-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.left-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 8px;
  color: #183124;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.left-drawer-link-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.left-drawer-bullet {
  color: var(--color-gold);
  font-size: 0.85rem;
}

.left-drawer-link:hover {
  background: rgba(46, 90, 68, 0.07);
  color: var(--color-primary-25);
}

.left-drawer-link.active {
  background: rgba(46, 90, 68, 0.1);
  color: var(--color-primary-25);
  font-weight: 700;
  border-left: 3px solid var(--color-gold);
  padding-left: 11px;
}

.left-drawer-sublinks {
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 8px;
}

.left-drawer-sublink {
  font-size: 0.82rem;
  color: rgba(24, 49, 36, 0.8);
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s;
}

.left-drawer-sublink:hover {
  background: rgba(46, 90, 68, 0.08);
  color: var(--color-primary-25);
}

.left-drawer-badge-live {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: #DC2626;
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: 12px;
}

.left-drawer-divider {
  height: 1px;
  background: rgba(46, 90, 68, 0.12);
  margin: 18px 0;
}

.left-drawer-concierge-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.left-drawer-concierge-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.left-drawer-concierge-btn.whatsapp {
  background: #25D366;
  color: #FFFFFF;
}

.left-drawer-concierge-btn.whatsapp:hover {
  background: #1EBE5D;
}

.left-drawer-concierge-btn.phone {
  background: rgba(46, 90, 68, 0.1);
  color: var(--color-primary-25);
  border: 1px solid rgba(46, 90, 68, 0.2);
}

.left-drawer-concierge-btn.phone:hover {
  background: rgba(46, 90, 68, 0.16);
}

.left-drawer-footer {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(24, 49, 36, 0.6);
}

/* ==========================================================================
   PHONE-SPECIFIC PROFESSIONAL OPTIMIZATIONS (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Root and Container Width Constraints */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .container,
  .hero-transparent-bar-wrapper,
  .room-selector-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Fluid Headlines & Typography across all mobile screens */
  h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.5rem) !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  h2 {
    font-size: clamp(1.45rem, 5.2vw, 2.05rem) !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  h3 {
    font-size: clamp(1.22rem, 4.2vw, 1.6rem) !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  h4 {
    font-size: 1.15rem !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .subtitle {
    font-size: clamp(0.72rem, 2.5vw, 0.82rem) !important;
    letter-spacing: 2px !important;
  }

  /* Balanced Section Spacing & Background Fix for Mobile / iOS */
  .section {
    padding: 50px 0 !important;
  }

  .section-banner-bg {
    padding: 65px 0 !important;
    background-attachment: scroll !important;
  }

  .section-reviews-parallax,
  .hero {
    background-attachment: scroll !important;
  }

  /* Hero Banner */
  .hero {
    padding: 65px 16px 75px !important;
  }

  .hero-stars {
    font-size: 0.95rem;
    letter-spacing: 3px;
    margin-bottom: 8px;
  }

  .hero-title {
    font-size: clamp(1.85rem, 6.5vw, 2.45rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px;
  }

  .hero-description {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    margin-bottom: 20px;
    color: rgba(255, 250, 245, 0.92) !important;
  }

  /* Transparent Check Bar */
  .hero-transparent-bar-wrapper {
    margin-top: -30px !important;
    margin-bottom: 45px !important;
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .transparent-check-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    border-radius: 18px !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(24, 49, 36, 0.95) !important;
    border: 1px solid rgba(197, 160, 89, 0.4) !important;
  }

  .transparent-check-bar .bar-dates-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .transparent-check-bar .bar-field {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .transparent-check-bar .bar-input {
    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px;
    padding: 10px 12px !important;
    font-size: 16px !important; /* Prevents iOS Safari auto-zoom */
    color: #FFFFFF !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px;
  }

  .bar-villa-badge {
    white-space: normal !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 8px 14px !important;
    font-size: 0.84rem !important;
    box-sizing: border-box !important;
  }

  .stepper-widget {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 4px 8px;
    justify-content: space-between;
    min-height: 44px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .stepper-btn {
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }

  .multi-room-dropdown-toggle {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.85rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .transparent-check-bar .btn-gold {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Multi-Room Popover & Country Popover & Admin Floating Bar */
  .multi-room-popover,
  .country-dropdown-popover {
    position: fixed !important;
    top: auto !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    left: 0 !important;
    right: 0 !important;
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 18px !important;
    z-index: 99999 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  }

  .admin-floating-bar {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    margin: 0 auto !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 8px) !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
  }

  .admin-floating-content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .admin-floating-actions {
    justify-content: flex-end !important;
  }

  /* Grid Layouts Stacked on Phone */
  .grid-2, .grid-3, .grid-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .grid-2 > *, .grid-3 > *, .grid-4 > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Feature cards & Specs on Phone */
  .feature-card {
    padding: 18px 16px !important;
  }

  .space-specs-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .space-spec-chip {
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
  }

  /* Space Carousels Mobile Fitting */
  .space-carousel-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.1rem !important;
  }

  .space-carousel-btn.prev {
    left: 8px !important;
  }

  .space-carousel-btn.next {
    right: 8px !important;
  }

  .space-carousel-tag,
  .space-carousel-counter {
    top: 10px !important;
    font-size: 0.68rem !important;
    padding: 4px 10px !important;
  }

  .space-carousel-tag {
    left: 10px !important;
  }

  .space-carousel-counter {
    right: 10px !important;
  }

  .space-carousel-caption {
    padding: 16px 14px 34px !important;
  }

  .space-carousel-caption h4 {
    font-size: 0.96rem !important;
  }

  .space-carousel-caption p {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  /* Room Cards on Phone */
  .room-card {
    border-radius: 14px !important;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .room-card-img {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover;
  }

  .room-body {
    padding: 18px 16px !important;
  }

  .room-body h3 {
    font-size: 1.25rem !important;
  }

  .room-footer {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Room Selection Grid & Multi-Calendar (availability.html) */
  .room-selector-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .room-select-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .all-villa-btn-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .multi-calendar-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .room-calendar-card,
  .single-villa-calendar-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 12px !important;
    border-radius: 14px !important;
  }

  .calendar-room-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .calendar-header {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 12px !important;
  }

  .calendar-header h4 {
    order: -1;
    width: 100%;
    text-align: center;
    font-size: 1.15rem !important;
    margin-bottom: 2px !important;
  }

  .calendar-nav-btn {
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
  }

  .calendar-legend {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 10px !important;
    margin-bottom: 12px !important;
    font-size: 0.74rem !important;
  }

  .calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .calendar-day-head {
    font-size: 0.65rem !important;
    padding: 2px 0 !important;
    text-align: center;
    letter-spacing: 0.5px !important;
  }

  .calendar-day {
    aspect-ratio: 1;
    font-size: 0.72rem !important;
    border-radius: 4px !important;
    padding: 2px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Accommodation Options & Guest Stepper on availability.html */
  .accommodation-options-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .accommodation-option-card {
    padding: 14px 14px !important;
  }

  .accommodation-option-card .acc-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .accommodation-option-card .acc-desc {
    margin: 6px 0 0 0 !important;
  }

  .stepper-widget-light {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px !important;
  }

  .stepper-widget-light > span:last-of-type {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 4px;
    font-size: 0.76rem !important;
  }

  /* Contact Page Cards on Mobile */
  .contact-info-card,
  .contact-form-card {
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }

  .subject-pills-container {
    gap: 8px !important;
  }

  .subject-pill {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
  }

  /* Reservation Request Form Container on Mobile */
  .reservation-form-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  /* iOS Safari Auto-Zoom Prevention on all inputs */
  input, select, textarea,
  .input-modern,
  .phone-text-input,
  .country-search-input {
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  /* Horizontal Sliders & Carousels strictly isolated */
  .rooms-slider-container,
  .reviews-slider-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    gap: 16px !important;
  }

  .room-card-slide-overlay {
    flex: 0 0 calc(100vw - 56px) !important;
    max-width: calc(100vw - 56px) !important;
    min-width: 0 !important;
    height: 380px !important;
    box-sizing: border-box !important;
  }

  .review-card-slide {
    flex: 0 0 calc(100vw - 56px) !important;
    max-width: calc(100vw - 56px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 20px 18px !important;
  }

  /* Calendar table on Phone */
  .calendar-table {
    font-size: 0.78rem;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .calendar-table th, .calendar-table td {
    padding: 8px 4px;
  }

  .calendar-room-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .calendar-room-tabs::-webkit-scrollbar {
    display: none;
  }

  .calendar-room-tab-btn {
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 0.78rem;
    flex-shrink: 0;
  }

  /* Booking modal on phones */
  .modal-content {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
    max-height: 90vh !important;
    padding: 20px 16px !important;
    border-radius: 18px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: auto;
  }

  /* Footer on phone */
  .footer {
    padding: 45px 0 calc(75px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    margin-bottom: 30px !important;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* Extra Small Phones (<= 480px) */
@media (max-width: 480px) {
  .section {
    padding: 42px 0 !important;
  }

  .section-banner-bg {
    padding: 52px 0 !important;
  }

  .room-card-slide-overlay {
    height: clamp(320px, 85vw, 380px) !important;
  }

  .review-card-slide {
    padding: 16px 14px !important;
  }

  .host-profile-card {
    padding: 14px !important;
    gap: 10px !important;
  }

  .host-avatar-circle {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.15rem !important;
  }
}

/* Compact Phones (<= 360px like iPhone SE / Galaxy Z Flip folded) */
@media (max-width: 360px) {
  .container,
  .hero-transparent-bar-wrapper,
  .room-selector-wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .brand-logo-img {
    width: 130px !important;
    height: 130px !important;
    max-width: 130px !important;
    margin: 0 auto -44px auto !important;
  }

  .logo-title-bottom {
    font-size: 16px !important;
    letter-spacing: 2px !important;
  }

  .single-villa-calendar-card {
    padding: 14px 8px !important;
  }

  .calendar-nav-btn {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
  }
}

/* ==========================================================================
   LUXURY TOAST NOTIFICATIONS & NETWORK SPINNERS
   ========================================================================== */
#toastContainer {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
  width: calc(100% - 48px);
  pointer-events: none;
}

@media (max-width: 768px) {
  #toastContainer {
    top: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
  }
}

.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-item.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-item.success {
  background: #F0FDF4;
  border: 1.5px solid #22C55E;
  color: #14532D;
}

.toast-item.error {
  background: #FEF2F2;
  border: 1.5px solid #EF4444;
  color: #991B1B;
}

.toast-item.warning {
  background: #FFFBEB;
  border: 1.5px solid #F59E0B;
  color: #92400E;
}

.toast-item.info {
  background: #F8FAFC;
  border: 1.5px solid var(--color-gold);
  color: var(--color-primary-25);
}

.toast-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}

.toast-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-message {
  flex: 1;
  word-break: break-word;
}

.toast-close-btn {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 0 4px;
  transition: opacity 0.2s;
}

.toast-close-btn:hover {
  opacity: 1;
}

/* Button Loading Spinner */
.btn-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  border-top-color: #FFFFFF;
  animation: btnSpin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

button:disabled, .btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   ABOUT THE SPACE: MODERN AUTO-SLIDING & TOUCH-SCROLLABLE SPACE GALLERIES
   ========================================================================== */
.space-feature-section {
  padding: 70px 0;
  position: relative;
}

/* Wide Container for Section 2, 3, 4, 5 */
.space-container {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Wide Header and Narrative Block */
.space-header-block {
  width: 100%;
  margin-bottom: 32px;
}

.space-badge-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.space-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--color-primary-25);
  margin-top: 4px;
  margin-bottom: 20px;
  line-height: 1.25;
}

/* Narrative Text with Responsive Spacious Columns */
.space-narrative {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .space-narrative {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.space-lead-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text-dark, #1B2B24);
  margin-bottom: 0;
  font-weight: 500;
}

.space-desc-text {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--color-text-muted, #4A5D53);
  margin-bottom: 0;
}

/* Feature Spec Chips Grid - Expansive Row Layout */
.space-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 22px;
  margin-bottom: 20px;
}

.space-spec-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(46, 90, 68, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-primary-25);
  transition: var(--transition);
}

.space-spec-chip:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.22);
}

.space-spec-icon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Luxury Highlight Card within details */
.space-highlight-card {
  background: rgba(197, 168, 128, 0.14);
  border-left: 4px solid var(--color-gold);
  border-radius: 8px;
  padding: 16px 22px;
  margin-top: 18px;
  font-size: 0.94rem;
  color: var(--color-text-dark, #1B2B24);
  line-height: 1.6;
}

.space-highlight-card strong {
  color: var(--color-primary-25);
}

/* Pool Notice Callout styling */
.space-pool-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(197, 168, 128, 0.18);
  border-left: 4px solid var(--color-gold, #C5A880);
  padding: 14px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.95rem;
  color: var(--color-primary-25);
}

.pool-banner-icon {
  font-size: 1.45rem;
  line-height: 1;
  flex-shrink: 0;
}

.pool-banner-text {
  line-height: 1.5;
}

/* Space Carousel Outer Wrapper - Wide Panoramic Cinema Aspect */
.space-carousel-wrapper {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #15261E;
  border: 1.5px solid rgba(46, 90, 68, 0.2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  user-select: none;
  touch-action: pan-y pinch-zoom;
}

/* Modern CSS Scroll-Snap Track */
.space-carousel-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.space-carousel-track::-webkit-scrollbar {
  display: none;
}

.space-carousel-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* Individual Carousel Slide */
.space-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 540px;
  min-height: 280px;
  overflow: hidden;
  background-color: #101C16;
}

@media (min-width: 1200px) {
  .space-carousel-slide {
    aspect-ratio: 21 / 10;
    max-height: 560px;
  }
}

.grid-2 .space-carousel-slide {
  aspect-ratio: 16 / 11;
  max-height: 480px;
  min-height: 320px;
}

@media (max-width: 768px) {
  .space-carousel-slide {
    aspect-ratio: 16 / 10;
    min-height: 240px;
  }
  .grid-2 .space-carousel-slide {
    aspect-ratio: 16 / 11;
    min-height: 240px;
  }
  .space-container {
    padding: 0 16px;
  }
  .space-feature-section {
    padding: 48px 0;
  }
}

.space-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.space-carousel-wrapper:hover .space-carousel-img {
  transform: scale(1.025);
}

/* Floating Badges on Slide */
.space-carousel-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(23, 45, 34, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-gold);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(197, 168, 128, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  z-index: 5;
  pointer-events: none;
}

.space-carousel-counter {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  z-index: 5;
  pointer-events: none;
}

.space-carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(16, 30, 22, 0.88) 100%);
  padding: 24px 20px 38px;
  color: #FFFFFF;
  z-index: 4;
  pointer-events: none;
}

.space-carousel-caption h4 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: #FFFFFF;
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.space-carousel-caption p {
  font-size: 0.82rem;
  color: rgba(255, 250, 245, 0.85);
  margin: 0;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Carousel Prev/Next Buttons */
.space-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(23, 45, 34, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(197, 168, 128, 0.55);
  color: var(--color-gold);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  padding: 0;
  line-height: 1;
}

.space-carousel-btn:hover {
  background: var(--color-primary-25);
  color: #FFFFFF;
  border-color: var(--color-gold);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.space-carousel-btn:active {
  transform: translateY(-50%) scale(0.96);
}

.space-carousel-btn.prev {
  left: 14px;
}

.space-carousel-btn.next {
  right: 14px;
}

/* Carousel Interactive Dots */
.space-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.space-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}

.space-carousel-dot:hover {
  background: #FFFFFF;
  transform: scale(1.2);
}

.space-carousel-dot.active {
  width: 22px;
  border-radius: 10px;
  background: var(--color-gold);
  border-color: var(--color-gold);
  box-shadow: 0 0 8px rgba(197, 168, 128, 0.6);
}

/* Space Details Typography & Specifications */
.space-details-column h2 {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  color: var(--color-primary-25);
  margin-top: 8px;
  margin-bottom: 18px;
  line-height: 1.25;
}

.space-lead-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-dark, #1B2B24);
  margin-bottom: 16px;
  font-weight: 500;
}

.space-desc-text {
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--color-text-muted, #4A5D53);
  margin-bottom: 24px;
}

/* Feature Spec Chips Grid */
.space-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 24px;
}

.space-spec-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(46, 90, 68, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary-25);
  transition: var(--transition);
}

.space-spec-chip:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
  box-shadow: 0 4px 12px rgba(197, 168, 128, 0.2);
}

.space-spec-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Luxury Highlight Card within details */
.space-highlight-card {
  background: rgba(197, 168, 128, 0.12);
  border-left: 4px solid var(--color-gold);
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 20px;
  font-size: 0.92rem;
  color: var(--color-text-dark, #1B2B24);
  line-height: 1.55;
}

.space-highlight-card strong {
  color: var(--color-primary-25);
}

/* Pool Notice Callout styling */
.space-pool-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(197, 168, 128, 0.18);
  border-left: 4px solid var(--color-gold, #C5A880);
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.94rem;
  color: var(--color-primary-25);
}

/* ==========================================================================
   ROOMS PAGE: LARGE HORIZONTAL ROOM SHOWCASE SECTIONS & SLIDERS
   ========================================================================== */
.room-horizontal-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(46, 90, 68, 0.15);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.08);
  margin-bottom: 56px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.room-horizontal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.14);
  border-color: var(--color-primary-25);
}

.room-horizontal-card.reverse .room-carousel-col {
  order: 2;
}

.room-horizontal-card.reverse .room-horizontal-body {
  order: 1;
}

.room-carousel-col {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
}

.room-carousel-col .space-carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  margin: 0;
  padding: 0;
}

.room-carousel-col .space-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
}

.room-carousel-col .space-carousel-slide {
  display: flex !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative !important;
  overflow: hidden !important;
}

.room-carousel-col .space-carousel-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.room-carousel-col .space-carousel-caption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 20px 20px 38px !important;
  margin: 0 !important;
}

.room-carousel-col .space-carousel-dots {
  position: absolute !important;
  bottom: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 10 !important;
}

.room-horizontal-body {
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #FFFFFF;
}

.room-horizontal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.room-badge-gold {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #7A5F35;
  background-color: rgba(197, 168, 128, 0.2);
  border: 1px solid rgba(197, 168, 128, 0.45);
  padding: 4px 12px;
  border-radius: 4px;
}

.room-horizontal-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-text-dark, #1B2B24);
  margin-bottom: 12px;
  line-height: 1.25;
}

.room-horizontal-desc {
  font-size: 0.98rem;
  line-height: 1.68;
  color: var(--color-text-muted, #4A5D53);
  margin-bottom: 20px;
}

.room-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
  padding: 16px 0;
  margin-bottom: 20px;
  border-top: 1px solid rgba(46, 90, 68, 0.1);
  border-bottom: 1px solid rgba(46, 90, 68, 0.1);
}

.room-spec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-dark, #1B2B24);
}

.room-spec-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}

.room-horizontal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
}

.room-capacity-pill {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary-25);
  background: rgba(46, 90, 68, 0.08);
  border: 1px solid rgba(46, 90, 68, 0.16);
  padding: 8px 16px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 991px) {
  .room-horizontal-card {
    grid-template-columns: 1fr !important;
    margin-bottom: 36px;
    border-radius: 16px;
  }
  .room-horizontal-card.reverse .room-carousel-col {
    order: 1 !important;
  }
  .room-horizontal-card.reverse .room-horizontal-body {
    order: 2 !important;
  }
  .room-carousel-col {
    min-height: 0 !important;
    max-height: 380px !important;
    height: auto !important;
  }
  .room-carousel-col .space-carousel-wrapper {
    min-height: 0 !important;
    height: auto !important;
  }
  .room-carousel-col .space-carousel-track {
    min-height: 0 !important;
    height: auto !important;
  }
  .room-carousel-col .space-carousel-slide {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
  }
  .room-carousel-col .space-carousel-img {
    height: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }
  .room-carousel-col .space-carousel-dots {
    bottom: 12px !important;
  }
  .room-horizontal-body {
    padding: 24px 20px;
  }
  .room-horizontal-title {
    font-size: 1.45rem;
  }
  .room-specs-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .room-horizontal-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .room-horizontal-footer .btn {
    text-align: center;
    width: 100%;
  }
}

/* ==========================================================================
   DRONE VIDEO SHOWCASE SECTIONS (360° Villa Tour & Uncrowded Coastline)
   ========================================================================== */
.drone-showcase-card {
  background: #FFFFFF;
  border-radius: 18px;
  border: 1.5px solid rgba(46, 90, 68, 0.15);
  box-shadow: 0 16px 45px rgba(27, 43, 36, 0.08);
  overflow: hidden;
  margin: 0 auto;
  max-width: 1080px;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.drone-showcase-card:hover {
  box-shadow: 0 22px 55px rgba(27, 43, 36, 0.13);
}

.drone-video-player-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden !important;
  border-radius: 18px;
  box-sizing: border-box;
}

@supports not (aspect-ratio: 16 / 9) {
  .drone-video-player-frame {
    height: 0;
    padding-top: 56.25%;
  }
}

/* Google Drive & video embed iframe: top cropped to remove Drive toolbar & pop-out icon */
.drone-video-player-frame iframe,
.drone-video-player-frame iframe.drone-embed-iframe {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  border: 0 !important;
  top: calc(-1 * var(--drive-crop, 60px)) !important;
  height: calc(100% + (2 * var(--drive-crop, 60px))) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  z-index: 5 !important;
}

/* Fullscreen control button for video container */
.drone-fullscreen-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 20;
  background: rgba(13, 25, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.drone-fullscreen-btn:hover {
  background: var(--color-gold, #C5A880);
  border-color: #FFFFFF;
  color: #1B2B24;
  transform: scale(1.08);
}

.drone-video-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 25, 20, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: background 0.3s ease;
}

.drone-video-play-overlay.hidden {
  display: none !important;
}

.drone-play-btn-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 250, 245, 0.95);
  border: 2px solid var(--color-gold, #C5A880);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, border-color 0.2s ease;
}

.drone-play-btn-circle svg {
  width: 28px;
  height: 28px;
  fill: var(--color-primary-25, #2E5A44);
  margin-left: 4px;
  transition: transform 0.2s ease, fill 0.2s ease;
}

.drone-video-play-overlay:hover .drone-play-btn-circle {
  transform: scale(1.1);
  background: var(--color-gold, #C5A880);
  border-color: #FFFFFF;
}

.drone-video-play-overlay:hover .drone-play-btn-circle svg {
  fill: #FFFFFF;
}

.drone-play-label {
  margin-top: 14px;
  color: #FFFFFF;
  font-family: var(--font-cinzel), 'Cinzel', serif;
  font-size: 0.88rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.drone-video-controls-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 18px;
  background: linear-gradient(0deg, rgba(13, 25, 20, 0.92) 0%, rgba(13, 25, 20, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 12;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.drone-video-player-frame:hover .drone-video-controls-bar,
.drone-video-player-frame:focus-within .drone-video-controls-bar {
  opacity: 1;
}

.drone-ctrl-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.drone-ctrl-btn:hover {
  background: var(--color-gold, #C5A880);
  border-color: #FFFFFF;
  color: #1B2B24;
}

.drone-tag-live {
  background: rgba(197, 168, 128, 0.25);
  border: 1px solid var(--color-gold, #C5A880);
  color: var(--color-gold, #C5A880);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.drone-tag-live::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px #10B981;
}

.drone-showcase-footer {
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: #FFFFFF;
  border-top: 1px solid rgba(46, 90, 68, 0.08);
}

.drone-highlights-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.drone-highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary-25, #2E5A44);
  background: rgba(46, 90, 68, 0.06);
  border: 1px solid rgba(46, 90, 68, 0.15);
  padding: 6px 14px;
  border-radius: 30px;
  transition: all 0.2s ease;
}

.drone-highlight-pill:hover {
  background: var(--color-primary-25, #2E5A44);
  color: #FFFFFF;
  border-color: var(--color-primary-25, #2E5A44);
}

.drone-admin-note {
  font-size: 0.78rem;
  color: var(--color-text-muted, #5C6B62);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  text-align: center;
  justify-content: center;
}

.drone-admin-note code {
  background: rgba(46, 90, 68, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-primary-25, #2E5A44);
  font-weight: 600;
}

/* ==========================================================================
   LAGOON DRONE VIDEOS (Side-by-Side 2-Column Split Layout)
   ========================================================================== */
#lagoon-drone-section {
  background: #FAF8F5;
  border-top: 1px solid rgba(46, 90, 68, 0.08);
  border-bottom: 1px solid rgba(46, 90, 68, 0.08);
}

.lagoon-video-split-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  box-sizing: border-box;
}

.lagoon-video-split-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 18px;
  border: 1.5px solid rgba(46, 90, 68, 0.14);
  box-shadow: 0 14px 38px rgba(27, 43, 36, 0.07);
  overflow: hidden;
  box-sizing: border-box;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.lagoon-video-split-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(27, 43, 36, 0.12);
}

.lagoon-video-split-card .drone-video-player-frame {
  width: 100%;
  border-radius: 16px 16px 0 0;
  border: none;
  box-shadow: none;
}

.lagoon-video-split-caption {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #FFFFFF;
  border-top: 1px solid rgba(46, 90, 68, 0.08);
}

.lagoon-video-split-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-primary-25, #2E5A44);
  background: rgba(46, 90, 68, 0.08);
  border: 1px solid rgba(46, 90, 68, 0.18);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.lagoon-video-split-text {
  margin: 0;
  font-size: 0.86rem;
  color: var(--color-text-muted, #5C6B62);
  line-height: 1.4;
  text-align: right;
}

@media (max-width: 860px) {
  .lagoon-video-split-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .lagoon-video-split-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 16px 15px;
  }

  .lagoon-video-split-text {
    text-align: left;
    font-size: 0.84rem;
  }
}

@media (max-width: 768px) {
  #villa-360-drone-section,
  #coastal-drone-section,
  #lagoon-drone-section {
    padding: 44px 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  #villa-360-drone-section .container,
  #coastal-drone-section .container,
  #lagoon-drone-section .container {
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #villa-360-drone-section .section-header,
  #coastal-drone-section .section-header,
  #lagoon-drone-section .section-header {
    margin-bottom: 24px !important;
    padding: 0 !important;
  }

  #villa-360-drone-section h2,
  #coastal-drone-section h2,
  #lagoon-drone-section h2 {
    font-size: clamp(1.35rem, 5vw, 1.8rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    word-break: break-word !important;
  }

  #villa-360-drone-section p,
  #coastal-drone-section p,
  #lagoon-drone-section p {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    word-break: break-word !important;
  }

  .drone-showcase-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  /* Standalone cinematic video player card on mobile */
  .drone-video-player-frame {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    display: block !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #000000 !important;
    border: 1.5px solid rgba(46, 90, 68, 0.16) !important;
    box-shadow: 0 14px 38px rgba(27, 43, 36, 0.12) !important;
    padding: 0 !important;
    margin: 0 !important;
    touch-action: manipulation !important;
  }

  /* Guaranteed 16:9 aspect ratio on all mobile devices and WebViews (never collapses to 0 height) */
  .drone-video-player-frame::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    padding-top: 56.25% !important;
  }

  /* Drive iframe on mobile: cropped top toolbar and pop-out icon, fills frame seamlessly */
  .drone-video-player-frame iframe,
  .drone-video-player-frame iframe.drone-embed-iframe {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    border: 0 !important;
    top: calc(-1 * var(--drive-crop, 60px)) !important;
    height: calc(100% + (2 * var(--drive-crop, 60px))) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 5 !important;
  }

  /* Highlights & CTA displayed OUTSIDE the video play card on mobile */
  .drone-showcase-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 22px 0 0 0 !important;
    margin-top: 4px !important;
    gap: 16px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .drone-highlights-list {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .drone-highlight-pill {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    background: #FFFFFF !important;
    color: var(--color-primary-25, #2E5A44) !important;
    border: 1px solid rgba(46, 90, 68, 0.16) !important;
    border-radius: 30px !important;
    box-shadow: 0 2px 8px rgba(27, 43, 36, 0.06) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.4 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .drone-highlight-pill:active {
    transform: scale(0.97) !important;
  }

  .drone-showcase-footer .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 13px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    margin-top: 2px !important;
    box-shadow: 0 4px 14px rgba(46, 90, 68, 0.12) !important;
  }
}

/* ==========================================================================
   HOME PAGE SECTION 3 (Estate & Living Spaces) - PERFECT MOBILE SCREEN FIT
   ========================================================================== */
.section[data-section="3"],
.section-emerald {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
}

.estate-grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.estate-text-col,
.estate-carousel-col {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.estate-carousel-col {
  overflow: hidden !important;
}

.section[data-section="3"] .space-carousel-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.section[data-section="3"] .space-carousel-track {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.section[data-section="3"] .space-carousel-slide {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  flex: 0 0 100% !important;
  box-sizing: border-box !important;
}

.estate-list {
  padding-left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 991px) {
  .section[data-section="3"] .grid-2,
  .estate-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .section[data-section="3"] {
    padding: 40px 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .section[data-section="3"] .container {
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .section[data-section="3"] .grid-2,
  .section[data-section="3"] .estate-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .estate-text-col {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .estate-carousel-col {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .section[data-section="3"] h2 {
    font-size: clamp(1.35rem, 5.5vw, 1.8rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .section[data-section="3"] p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 15px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .estate-list {
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .estate-list li {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .estate-btn {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 11px 18px !important;
    font-size: 0.86rem !important;
  }

  .section[data-section="3"] .space-carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .section[data-section="3"] .space-carousel-slide {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 320px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .section[data-section="3"] .space-carousel-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* ==========================================================================
   PHOTO & VIDEO GALLERY ENHANCEMENTS (gallery.html)
   ========================================================================== */
.gallery-showcase-section {
  padding: 70px 0 95px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 24px;
}

.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--color-sand-50, #F4EFEA);
  border: 1px solid rgba(46, 90, 68, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  aspect-ratio: 4 / 3;
  cursor: pointer;
  outline: none;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.3s ease;
}

.gallery-item:focus-visible {
  outline: 2px solid var(--color-gold, #C89A58);
  outline-offset: 3px;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(31, 61, 46, 0.14);
  border-color: rgba(200, 154, 88, 0.45);
}

.gallery-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

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

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(15, 33, 24, 0.4) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px;
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-expand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary-25, #2E5A44);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: scale(0.85);
  transition: transform 0.25s ease, background-color 0.2s ease;
}

.gallery-item:hover .gallery-expand-badge {
  transform: scale(1);
}

/* Gallery Lightbox */
.gallery-lightbox-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 16, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-lightbox-modal.active {
  display: flex;
  opacity: 1;
}

.gallery-lightbox-content {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox-img {
  max-width: 92vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  object-fit: contain;
}

.gallery-lightbox-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.gallery-lightbox-btn:hover {
  background: var(--color-gold, #C89A58);
  border-color: var(--color-gold, #C89A58);
  color: #FFFFFF;
  transform: scale(1.08);
}

.gallery-lightbox-close {
  top: 24px;
  right: 24px;
}

.gallery-lightbox-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-lightbox-prev:hover {
  transform: translateY(-50%) scale(1.08);
}

.gallery-lightbox-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-lightbox-next:hover {
  transform: translateY(-50%) scale(1.08);
}

.gallery-lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.45);
  padding: 6px 14px;
  border-radius: 20px;
}

@media (max-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 580px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gallery-item {
    aspect-ratio: 16 / 11;
  }
  .gallery-lightbox-prev {
    left: 10px;
    width: 38px;
    height: 38px;
  }
  .gallery-lightbox-next {
    right: 10px;
    width: 38px;
    height: 38px;
  }
  .gallery-lightbox-close {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
  }
}

/* ==========================================================================
   SURROUNDING ATTRACTIONS & EXCURSIONS — PROFESSIONAL SCROLL ANIMATION
   Exclusively applied to #attractions section on About The Space page
   ========================================================================== */
#attractions {
  overflow: hidden;
}

#attractions .section-header.attraction-header-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

#attractions .section-header.attraction-header-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#attractions.attractions-animated .feature-card {
  opacity: 0;
  transform: translateY(38px) scale(0.975);
  transition: 
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
  transition-delay: var(--stagger-delay, 0s);
  will-change: opacity, transform;
  position: relative;
  overflow: hidden;
}

#attractions.attractions-animated .feature-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Luxury subtle gold accent line at top of cards for refined elevation */
#attractions.attractions-animated .feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-gold, #C5A880), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  pointer-events: none;
}

#attractions.attractions-animated .feature-card.is-visible:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* Interactive lift & warm emerald shadow on hover */
#attractions.attractions-animated .feature-card.is-visible:hover {
  transform: translateY(-8px) scale(1.008);
  box-shadow: 0 20px 38px -10px rgba(46, 90, 68, 0.18), 0 8px 16px -4px rgba(0, 0, 0, 0.05);
  border-color: rgba(46, 90, 68, 0.32);
  transition: 
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
}

/* Image zoom inside card on hover */
#attractions.attractions-animated .feature-card img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

#attractions.attractions-animated .feature-card:hover img {
  transform: scale(1.04);
}

/* Responsive adjustment for phones & tablets */
@media (max-width: 768px) {
  #attractions.attractions-animated .feature-card {
    transition-delay: 0.05s !important;
    transform: translateY(26px) scale(0.985);
  }
  #attractions.attractions-animated .feature-card.is-visible {
    transform: translateY(0) scale(1);
  }
}

/* Accessibility: prefers-reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  #attractions.attractions-animated .feature-card,
  #attractions .section-header.attraction-header-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #attractions.attractions-animated .feature-card img {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   EXPERIENCES PAGE (experiences.html) — LUXURY THEME & SCROLL TRANSITIONS
   Matches the 75% Warm Ivory (#FFFAF5) / 25% Deep Emerald (#2E5A44) & Gold
   palette, Italiana serif headlines, Futura body typography, and smooth reveals.
   ========================================================================== */

/* Hero Section */
.experience-hero {
  position: relative;
  height: min(560px, 68svh);
  min-height: 420px;
  color: var(--color-white);
  text-align: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 90px 0 110px;
}

.experience-hero .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 57%;
  animation: exp-arrive 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 0;
}

.experience-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.82) 100%);
  z-index: 1;
}

.experience-hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 840px;
  padding: 0 24px;
  margin: 0 auto;
  animation: exp-fade-up 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.experience-hero .eyebrow {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-gold);
  margin-bottom: 14px;
  display: block;
}

.experience-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--color-white) !important;
  margin: 0 0 18px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.experience-hero .hero-content p {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  color: rgba(255, 250, 245, 0.95);
  margin: 0 auto;
  line-height: 1.7;
}

.experience-hero .hero-location {
  position: absolute;
  bottom: 26px;
  left: 5%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 250, 245, 0.88);
}

.experience-hero .hero-location svg {
  color: var(--color-gold);
}

.experience-hero .hero-scroll {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-gold);
  text-decoration: none;
  transition: var(--transition);
}

.experience-hero .hero-scroll:hover {
  color: var(--color-white);
}

.experience-hero .hero-scroll svg {
  animation: exp-drift 2s ease-in-out infinite;
}

.experience-hero .hero-count {
  position: absolute;
  bottom: 26px;
  right: 5%;
  z-index: 2;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 250, 245, 0.85);
}

/* Sticky Chapter Sub-Navigation */
.chapter-nav {
  position: sticky;
  top: var(--header-height, 96px);
  z-index: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 250, 245, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(46, 90, 68, 0.14);
  box-shadow: 0 4px 20px rgba(46, 90, 68, 0.05);
}

.chapter-nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 26px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.8px;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.chapter-nav a span {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: 1px;
}

.chapter-nav a:hover {
  color: var(--color-primary-25);
  background-color: rgba(46, 90, 68, 0.05);
}

.chapter-nav a.active {
  color: var(--color-primary-25);
  font-weight: 600;
  border-bottom-color: var(--color-primary-25);
  background-color: rgba(46, 90, 68, 0.04);
}

/* Intro Section & Legend Callout */
.experiences-main {
  background-color: var(--color-bg-75);
}

.experiences-main .eyebrow {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary-25);
}

.experiences-main .intro {
  text-align: center;
  padding: 72px 24px 36px;
  max-width: 900px;
  margin: 0 auto;
}

.experiences-main .intro .eyebrow {
  color: var(--color-gold);
  margin-bottom: 10px;
}

.experiences-main .intro h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--color-primary-25);
  max-width: 760px;
  margin: 12px auto 18px;
  line-height: 1.22;
}

.experiences-main .intro p {
  color: var(--color-text-muted);
  max-width: 740px;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.85;
}

.experiences-main .legend-block {
  max-width: 960px;
  margin: 16px auto 32px;
  padding: 36px 42px;
  background: var(--color-card-bg);
  border: 1px solid rgba(46, 90, 68, 0.14);
  border-left: 4px solid var(--color-gold);
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.experiences-main .legend-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(46, 90, 68, 0.12);
}

.experiences-main .legend-block .eyebrow {
  color: var(--color-gold);
  margin-bottom: 8px;
}

.experiences-main .legend-block h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  color: var(--color-primary-25);
  margin: 8px 0 14px;
  line-height: 1.28;
}

.experiences-main .legend-block p {
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.9;
  margin: 0;
}

/* Alternating Story Section Wrappers */
.story-section-wrap {
  border-top: 1px solid rgba(46, 90, 68, 0.08);
  transition: background-color 0.3s ease;
}

.story-section-wrap:nth-of-type(even) {
  background-color: #F7F2EB;
}

.story {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
  gap: 64px;
  max-width: var(--container-max-width, 1280px);
  margin: 0 auto;
  padding: 76px 24px;
  scroll-margin-top: 155px;
}

.story.reverse {
  grid-template-columns: 1fr 1.15fr;
}

.story.reverse .story-photo {
  order: 2;
}

.story-photo {
  position: sticky;
  top: 170px;
  aspect-ratio: 1.13 / 1;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(46, 90, 68, 0.16);
  box-shadow: 0 16px 40px rgba(46, 90, 68, 0.12);
  background-color: #EAE3DC;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.story-photo:hover {
  box-shadow: 0 22px 48px rgba(46, 90, 68, 0.2);
  border-color: rgba(197, 168, 128, 0.6);
}

.story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-photo:hover img {
  transform: scale(1.045);
}

.story-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(18, 36, 27, 0.62) 100%);
  pointer-events: none;
}

.story-photo.story-video-card::after,
.story-photo.story-carousel-card::after {
  display: none;
}

.story-photo.story-video-card .drone-video-player-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.story-photo.story-video-card figcaption {
  z-index: 15;
  pointer-events: none;
}

/* Story Carousel Card (Stories 03, 04, 06) */
.story-photo.story-carousel-card .space-carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: #101C16;
  margin: 0;
  padding: 0;
}

.story-photo.story-carousel-card .space-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
}

.story-photo.story-carousel-card .space-carousel-slide {
  display: flex !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.story-photo.story-carousel-card .space-carousel-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(18, 36, 27, 0.62) 100%);
  pointer-events: none;
  z-index: 2;
}

.story-photo.story-carousel-card .space-carousel-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.story-photo.story-carousel-card .space-carousel-dots {
  bottom: 20px;
  right: 18px;
  left: auto;
  transform: none;
  z-index: 10;
}

.story-photo figcaption {
  position: absolute;
  bottom: 20px;
  left: 22px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(18, 36, 27, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(197, 168, 128, 0.35);
  color: var(--color-white);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: none;
}

.story-photo figcaption svg {
  color: var(--color-gold);
  flex-shrink: 0;
}

/* Story Copy & Typography */
.story-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.story-label span {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-gold);
}

.story-label i {
  display: inline-block;
  width: 36px;
  height: 1.5px;
  background-color: var(--color-gold);
}

.story-label p {
  margin: 0;
  color: var(--color-primary-25);
}

.story h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 2.85rem);
  line-height: 1.18;
  color: var(--color-primary-25);
  margin: 0 0 22px;
}

.story-description {
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.9;
  margin: 0 0 20px;
}

/* Travel Distance Tables */
.travel-table-wrap {
  margin: 22px 0 28px;
  background: var(--color-card-bg);
  border: 1px solid rgba(46, 90, 68, 0.14);
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: 0 6px 20px rgba(46, 90, 68, 0.05);
}

.travel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.travel-table caption {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.travel-table th,
.travel-table td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(46, 90, 68, 0.1);
  padding: 11px 10px 11px 0;
}

.travel-table tbody tr:last-child th,
.travel-table tbody tr:last-child td {
  border-bottom: none;
}

.travel-table thead th {
  color: var(--color-primary-25);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1.5px solid rgba(46, 90, 68, 0.2);
}

.travel-table tbody th {
  width: 38%;
  font-weight: 600;
  color: var(--color-text-dark);
}

.travel-table td:nth-child(2) {
  white-space: nowrap;
  color: var(--color-primary-25);
  font-weight: 600;
}

/* Story Feature Chips (Family Section) */
.story-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding-top: 18px;
  margin-top: 8px;
  border-top: 1px solid rgba(46, 90, 68, 0.14);
}

.story-details span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background-color: var(--color-card-bg);
  border: 1px solid rgba(46, 90, 68, 0.16);
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-primary-25);
  box-shadow: 0 2px 8px rgba(46, 90, 68, 0.05);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.story-details span:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
}

.story-details span svg {
  color: var(--color-gold);
  flex-shrink: 0;
}

/* Visitor Tip Callout */
.visitor-tip {
  background: rgba(197, 168, 128, 0.15);
  border-left: 4px solid var(--color-gold);
  border-radius: 8px;
  padding: 16px 20px;
  color: var(--color-text-dark);
  font-size: 0.92rem;
  line-height: 1.75;
  margin-top: 22px;
}

.visitor-tip strong {
  display: block;
  color: var(--color-primary-25);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}

/* Story Blockquote */
.story-quote {
  font-family: var(--font-serif);
  font-size: 1.38rem;
  line-height: 1.55;
  color: var(--color-primary-25);
  border-left: 3px solid var(--color-gold);
  margin: 26px 0 0;
  padding: 6px 0 6px 20px;
  background: linear-gradient(90deg, rgba(197, 168, 128, 0.08) 0%, transparent 100%);
  border-radius: 0 8px 8px 0;
}

/* Closing Section (25% Deep Emerald Theme) */
.experiences-main .closing {
  text-align: center;
  background-color: var(--color-primary-25);
  color: var(--color-white);
  padding: 88px 24px 96px;
  border-top: 1px solid rgba(197, 168, 128, 0.25);
}

.experiences-main .closing .eyebrow {
  color: var(--color-gold);
  margin-bottom: 12px;
  display: block;
}

.experiences-main .closing h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--color-white) !important;
  margin: 12px auto 18px;
}

.experiences-main .closing p {
  color: rgba(255, 250, 245, 0.92);
  max-width: 680px;
  margin: 0 auto 32px;
  font-size: 1.02rem;
  line-height: 1.85;
}

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.closing-actions .btn svg {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  transition: transform 0.25s ease;
}

.closing-actions .btn:hover svg {
  transform: translate(2px, -2px);
}

.closing-actions .btn-gold-solid {
  background-color: var(--color-gold);
  color: #121315 !important;
  border: 1.5px solid var(--color-gold);
  font-weight: 600;
}

.closing-actions .btn-gold-solid:hover {
  background-color: #DFBA73;
  border-color: #DFBA73;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* Smooth Scroll Reveal Transitions & 6-Story Choreography */
.experiences-main .reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
  will-change: opacity, transform;
}

.motion-ready .experiences-main .reveal:not(.visible) {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
}

/* Directional Split Motion for the 6 Story Sections */
.motion-ready .experiences-main .story:not(.reverse) .story-photo.reveal:not(.visible) {
  opacity: 0;
  transform: translate3d(-52px, 38px, 0) scale(0.94);
}

.motion-ready .experiences-main .story:not(.reverse) .story-copy.reveal:not(.visible) {
  opacity: 0;
  transform: translate3d(52px, 38px, 0);
}

.motion-ready .experiences-main .story.reverse .story-photo.reveal:not(.visible) {
  opacity: 0;
  transform: translate3d(52px, 38px, 0) scale(0.94);
}

.motion-ready .experiences-main .story.reverse .story-copy.reveal:not(.visible) {
  opacity: 0;
  transform: translate3d(-52px, 38px, 0);
}

/* Cinematic Image Scale & Scroll Parallax inside Story Photo */
.experiences-main .story-photo img {
  transform: translate3d(0, var(--story-parallax-y, 0px), 0) scale(1.05);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1), filter 1.1s ease;
  will-change: transform;
}

.motion-ready .experiences-main .story-photo.reveal:not(.visible) img {
  transform: translate3d(0, 18px, 0) scale(1.16);
  filter: brightness(0.88);
}

.experiences-main .story-photo.visible:hover img {
  transform: translate3d(0, var(--story-parallax-y, 0px), 0) scale(1.09);
}

/* Location Caption Badge Entrance */
.experiences-main .story-photo figcaption {
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.32s,
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.32s;
}

.motion-ready .experiences-main .story-photo.reveal:not(.visible) figcaption {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

/* Staggered Cascade Choreography for Story Copy Children */
.experiences-main .story-copy > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--stagger-delay, 0s);
}

.motion-ready .experiences-main .story-copy.reveal:not(.visible) > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

/* Gold Chapter Line Draw Animation */
.experiences-main .story-label i {
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
}

.motion-ready .experiences-main .story-copy.reveal:not(.visible) .story-label i {
  transform: scaleX(0);
}

/* Subtle Hover Lift on Travel Tables & Story Quotes */
.experiences-main .travel-table-wrap {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.experiences-main .travel-table-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(46, 90, 68, 0.1);
  border-color: rgba(197, 168, 128, 0.45);
}

@keyframes exp-fade-up {
  0% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes exp-arrive {
  0% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes exp-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Responsive Breakpoints for Experiences Page */
@media (max-width: 1050px) {
  .chapter-nav a {
    padding: 18px 18px;
    font-size: 0.8rem;
  }
  .story {
    gap: 40px;
    padding: 60px 24px;
  }
}

@media (max-width: 991px) {
  .chapter-nav {
    top: 0;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 12px;
  }
  .chapter-nav::-webkit-scrollbar {
    display: none;
  }
  .chapter-nav a {
    padding: 16px 15px;
    font-size: 0.78rem;
    gap: 7px;
  }
  .story {
    scroll-margin-top: 70px;
  }
}

@media (max-width: 768px) {
  .experience-hero {
    height: 60svh;
    min-height: 400px;
    max-height: 510px;
    padding: 70px 0 90px;
  }
  .experience-hero .hero-location {
    font-size: 0.7rem;
    bottom: 20px;
    left: 6%;
  }
  .experience-hero .hero-count {
    display: none;
  }
  .experience-hero .hero-scroll {
    left: auto;
    right: 6%;
    transform: none;
    font-size: 0.68rem;
  }
  .experiences-main .intro {
    padding: 48px 20px 24px;
  }
  .experiences-main .legend-block {
    margin: 12px 20px 28px;
    padding: 26px 24px;
  }
  .story,
  .story.reverse {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 44px 20px;
  }
  .story.reverse .story-photo {
    order: 0;
  }
  .story-photo {
    position: relative;
    top: auto;
    aspect-ratio: 1.18 / 1;
  }
  .motion-ready .experiences-main .story:not(.reverse) .story-photo.reveal:not(.visible),
  .motion-ready .experiences-main .story.reverse .story-photo.reveal:not(.visible) {
    transform: translate3d(0, 32px, 0) scale(0.96);
  }
  .motion-ready .experiences-main .story:not(.reverse) .story-copy.reveal:not(.visible),
  .motion-ready .experiences-main .story.reverse .story-copy.reveal:not(.visible) {
    transform: translate3d(0, 32px, 0);
  }
  .experiences-main .closing {
    padding: 64px 20px 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .experiences-main .reveal:not(.visible),
  .motion-ready .experiences-main .story-copy.reveal:not(.visible) > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .experiences-main .story-photo img {
    transform: none !important;
    transition: none !important;
  }
  .experience-hero .hero-image,
  .experience-hero .hero-content,
  .experience-hero .hero-scroll svg {
    animation: none !important;
  }
}