/* =====================================================================
   PALETTE  (built on #0a5b9d)
   Primary blue ......... #0a5b9d      Primary hover ....... #08497e
   Deep navy blue ....... #062a49      Darkest (bottom) .... #03192e
   Light blue accent .... #4a94d6 / #7bb3e3
   Pale blue (on dark) .. #cfe4f7 / #bcdcf5
   Premium tints ........ #f4f9ff / #eef5fc / #eaf3fb / #f2f8fd
   Text ................. #111827 (dark) / #ffffff (on dark)
   Titles: "Playfair Display"   Body: "Inter", Arial, sans-serif
   ===================================================================== */

* { box-sizing: border-box; }
    html { margin: 0; padding: 0; scroll-behavior: smooth; }
    body { margin: 0; padding: 0; background: #ffffff; color: #111827; font-family: "Inter", Arial, sans-serif; overflow-x: hidden; }
    button { font-family: inherit; border: 0; cursor: pointer; }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    .font-serif { font-family: "Playfair Display", Georgia, serif; }
    .icon { display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

 /* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.rh-navbar {
  position: sticky;
  z-index: 1000;
  top: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition:
    box-shadow 300ms ease,
    background-color 300ms ease;
}

.rh-navbar.is-scrolled {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.rh-nav-inner {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
}

.rh-mobile-spacer {
  display: block;
  width: 44px;
  flex: 0 0 44px;
}

.rh-desktop-nav {
  display: none;
}

.rh-nav-list {
  display: none;
  flex: 1;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  list-style: none;
  text-transform: uppercase;
}

.rh-nav-list-left {
  justify-content: flex-end;
  padding-right: 32px;
}

.rh-nav-list-right {
  justify-content: flex-start;
  padding-left: 32px;
}

.rh-nav-list li {
  white-space: nowrap;
}

.rh-nav-list a {
  position: relative;
  display: inline-flex;
  padding: 10px 0;
  transition: color 200ms ease;
}

.rh-nav-list a:hover {
  color: #0a5b9d;
}

.rh-nav-active > a {
  color: #0a5b9d;
}

.rh-nav-active-line {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0a5b9d;
}

/* ============================================================
   LOGO
   ============================================================ */
.rh-logo-wrap {
  position: relative;
  z-index: 20;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0 16px;
}

.rh-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rh-logo-img {
  width: auto;
  max-width: min(220px, 46vw);
  max-height: 80px;
  object-fit: contain;
}

/* ============================================================
   BOOK BUTTON
   ============================================================ */
.rh-book-btn {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 0;
  border-radius: 9999px;
  background: #0a5b9d;
  box-shadow: 0 10px 15px -3px rgba(10, 91, 157, 0.2);
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.025em;
  white-space: nowrap;
  transition:
    background-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

.rh-book-btn:hover {
  background: #08497e;
  box-shadow: 0 14px 24px rgba(10, 91, 157, 0.25);
  transform: translateY(-1px);
}

.rh-book-icon {
  color: #bcdcf5;
  stroke: currentColor;
}

/* ============================================================
   MOBILE BUTTON AND MENU
   ============================================================ */
.rh-mobile-btn {
  display: flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #0a5b9d;
  cursor: pointer;
}

.rh-mobile-menu {
  position: absolute;
  z-index: 999;
  top: 100%;
  left: 0;
  display: none;
  width: 100%;
  max-height: calc(100vh - 100px);
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 22px 24px 28px;
  border-top: 1px solid #f3f4f6;
  background: #ffffff;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.rh-mobile-menu.open {
  display: flex;
  animation: mobileMenuIn 240ms ease both;
}

.rh-mobile-menu > a:not(.rh-mobile-book) {
  padding: 13px 4px;
  border-bottom: 1px solid #f3f4f6;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rh-mobile-menu > a[aria-current="page"] {
  color: #0a5b9d;
}

.rh-mobile-menu .rh-mobile-book {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 14px 24px;
  border-radius: 4px;
  background: #0a5b9d;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.025em;
}

@keyframes mobileMenuIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

/* ============================================================
   HERO AREA
   ============================================================ */
.hero-area {
  width: 100%;
  background: #ffffff;
}

/* ============================================================
   ANIMATED HERO TITLE
   ============================================================ */
.hero-title-area {
  position: relative;
  z-index: 30;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 4.5rem) 1rem clamp(1.4rem, 2.5vw, 2.5rem);
  text-align: center;
}

.hero-subtitle {
  position: relative;
  z-index: 10;
  margin: 0 0 0.55rem;
  color: #0a5b9d;
  font-family: "Lato", Arial, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.title-stack {
  position: relative;
  z-index: 10;
  display: grid;
  width: 100%;
  min-height: clamp(5rem, 12vw, 10rem); /* Updated height for wrapped text */
  place-items: center;
  grid-template-areas: "stack";
}

.title-item {
  position: absolute;
  grid-area: stack;
  display: flex;
  width: 100%; /* Important to allow text wrapping across container */
  max-width: 100%;
  align-items: center;
  justify-content: center;
  color: #0a5b9d;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(2.35rem, 8vw, 8rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  
  /* CHANGES FOR TEXT WRAPPING */
  line-height: 1.15;
  white-space: normal;
  flex-wrap: wrap;
  text-align: center;
  
  opacity: 0;
  pointer-events: none;
}

.title-item.active,
.title-item.exiting {
  position: relative;
  opacity: 1;
}

.title-item.active {
  pointer-events: auto;
}

.word-wrapper {
  position: relative;
  display: inline-block;
  margin: 0 0.65vw;
}

.word-text {
  position: relative;
  z-index: 10;
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(20px);
}

.title-item.active .word-text {
  animation:
    heroWordEnter 0.8s ease-out
    var(--word-delay, 0s)
    forwards;
}

.title-item.exiting .word-text {
  animation: heroWordExit 0.4s ease-in forwards;
}

@keyframes heroWordEnter {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes heroWordExit {
  to {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(-20px);
  }
}

/* Smoke effect */
.smoke-container {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.smoke-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(3rem, 6vw, 6rem);
  height: clamp(3rem, 6vw, 6rem);
  border-radius: 50%;
  background-color: rgba(10, 91, 157, 0.3);
  filter: blur(8px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  will-change: transform, opacity, filter;
}

.title-item.active .smoke-particle {
  animation:
    heroSmokeRise
    var(--duration, 1.6s)
    ease-out
    var(--delay, 0s)
    forwards;
}

.title-item.exiting .smoke-particle {
  opacity: 0;
  transition: opacity 0.2s;
}

@keyframes heroSmokeRise {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate(-50%, -50%) scale(0.5);
  }

  30% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
    filter: blur(24px);
    transform:
      translate(
        calc(-50% + var(--target-x, 0px)),
        calc(-50% + var(--target-y, -60px))
      )
      scale(var(--particle-scale, 1.3));
  }
}

/* ============================================================
   SVG HERO SLIDER
   ============================================================ */
.hero-section {
  position: relative;
  width: 100%;
  max-width: 1800px;
  height: clamp(430px, 55vw, 820px);
  min-height: 430px;
  margin: 0 auto;
  padding: 0 clamp(0.35rem, 1.5vw, 1.5rem) 24px;
}

.hero-svg-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-border {
  opacity: 0.3;
}

.hero-wave {
  display: none;
}

/* Slider arrows */
.hero-arrow {
  position: absolute;
  z-index: 40;
  top: 50%;
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  color: #0a5b9d;
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.hero-arrow:hover {
  background: #f9fafb;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  transform: translateY(-50%) scale(1.05);
}

.hero-arrow-left {
  left: clamp(0.75rem, 2vw, 2rem);
}

.hero-arrow-right {
  right: clamp(0.75rem, 2vw, 2rem);
}

/* Slider dots */
.hero-dots {
  position: absolute;
  z-index: 35;
  bottom: clamp(1.25rem, 2.5vw, 2.25rem);
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0.5rem 0.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
}

.hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(10, 91, 157, 0.3);
  cursor: pointer;
  transition:
    width 220ms ease,
    background-color 220ms ease;
}

.hero-dot.active {
  width: 30px;
  background: #0a5b9d;
}

.hero-dot:hover {
  background: rgba(10, 91, 157, 0.55);
}

/* ============================================================
   TABLET AND DESKTOP HEADER
   ============================================================ */
@media (min-width: 992px) {
  .rh-nav-inner {
    padding-inline: 24px;
  }

  .rh-mobile-spacer,
  .rh-mobile-btn,
  .rh-mobile-menu {
    display: none;
  }

  .rh-desktop-nav {
    display: flex;
    flex: 1 1 0;
  }

  .rh-desktop-nav-left {
    justify-content: flex-end;
  }

  .rh-desktop-nav-right {
    justify-content: flex-start;
  }

  .rh-nav-list {
    display: flex;
  }

  .rh-book-btn {
    display: flex;
  }
}

/* ============================================================
   MOBILE & TABLET RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .rh-nav-inner {
    height: 84px;
    padding: 8px 16px;
  }

  .rh-mobile-menu {
    max-height: calc(100vh - 84px);
  }

  .rh-logo-img {
    max-height: 66px;
  }

  .hero-title-area {
    padding-top: 2rem;
  }

  .title-stack {
    min-height: 7rem; /* Updated for proper multi-line spacing */
  }

  .title-item {
    font-size: clamp(2rem, 7vw, 4rem); /* Kept balanced for width scale */
    letter-spacing: -0.04em;
    padding: 0 1rem;
  }

  .hero-section {
    height: clamp(370px, 68vw, 620px);
    min-height: 370px;
    padding-inline: 0.25rem;
  }
}

@media (max-width: 575px) {
  .rh-logo-wrap {
    margin: 0 8px;
  }

  .rh-logo-img {
    max-width: 54vw;
    max-height: 60px;
  }

  .hero-subtitle {
    font-size: 0.96rem;
  }

  .title-stack {
    min-height: 5.5rem; /* Extra space to make room for second line on smaller phones */
  }

  .title-item {
    font-size: clamp(1.8rem, 8vw, 2.8rem); /* Clamped proper value logic per width constraints */
    line-height: 1.25; 
    padding: 0 5px; 
  }

  .hero-section {
    height: clamp(310px, 85vw, 450px);
    min-height: 310px;
  }

  .hero-arrow {
    width: 40px;
    height: 40px;
  }

  .hero-arrow-left {
    left: 0.55rem;
  }

  .hero-arrow-right {
    right: 0.55rem;
  }

  .hero-dots {
    bottom: 1rem;
    gap: 9px;
  }
}

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

  .word-text {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .smoke-particle {
    display: none;
  }
}

    /* =========================
   About Section - Front Page
========================= */
.about-section { min-height: auto; background: linear-gradient(160deg, #f2f8fd 0%, #ffffff 55%, #eaf3fb 100%); display: flex; align-items: center; justify-content: center; padding: 48px 24px; font-family: "Inter", Arial, sans-serif; overflow: hidden; position: relative; }
.about-container { max-width: 1280px; width: 100%; display: grid; grid-template-columns: 1fr; gap: 64px; align-items: center; }

/* Grid Setting Laptop screens ke liye zarur theek karenagar side by side hai:
@media(min-width:992px){ .about-container { grid-template-columns: 1fr 1fr; } } */

.about-image-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; display: flex; justify-content: center; align-items: center; }
.about-dots { position: absolute; top: -32px; left: -32px; width: 160px; height: 160px; z-index: 0; background-image: radial-gradient(#0a5b9d 2px, transparent 2px); background-size: 16px 16px; opacity: 0.8; }
.about-border { position: absolute; inset: -16px; z-index: 0; border: 2px solid #0a5b9d; border-top-color: transparent; border-right-color: transparent; opacity: 0.80; border-radius: 13rem 3rem 13rem 3rem; }
.about-image { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 10; box-shadow: 0 20px 50px rgba(0,0,0,0.15); border-radius: 12rem 2rem 12rem 2rem; }
.about-content { display: flex; flex-direction: column; align-items: flex-start; z-index: 10; width: 100%; }
.about-subrow { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.about-subrow span { color: #0a5b9d; font-weight: 700; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; }
.about-line { width: 64px; height: 1px; background: #0a5b9d; opacity: 0.50; }
.about-title { margin: 0 0 24px; color: #1A1A1A; font-family: "Playfair Display", Georgia, serif; font-size: 36px; line-height: 1.1; font-weight: 400; }
.about-ornament { margin-bottom: 32px; color: #0a5b9d; }

/* Restored Full Content with Your Scroll Functionality - Cut Problem Fixed! */
.about-text { color: #333; margin-bottom: 48px; line-height: 1.85; font-size: 17px; max-width: 95%; max-height: 200px; overflow-y: auto; padding-right: 16px; }
.about-text p { margin-top: 0; margin-bottom: 16px; }
.about-text p:last-child { margin-bottom: 0; }
.about-text::-webkit-scrollbar { width: 4px; }
.about-text::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.about-text::-webkit-scrollbar-thumb { background: #0a5b9d; border-radius: 10px; }
.about-text::-webkit-scrollbar-thumb:hover { background: #08497e; }

.about-btn { background: #0a5b9d; color: #fff; padding: 16px 36px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; transition: background 300ms ease; border: none; cursor: pointer; border-radius: 4px; }
.about-btn:hover { background: #063a68; }


/* =========================
   Modal Popup Styles
========================= */
.about-modal-overlay {
    display: none; 
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.75); 
    z-index: 99999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.about-modal-content {
    background-color: #fff;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh; 
    position: relative;
    padding: 40px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.close-modal-btn {
    position: absolute;
    top: 15px; right: 25px;
    color: #666;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}
.close-modal-btn:hover { color: #e53e3e; }

.about-modal-title { margin-top: 0; margin-bottom: 24px; color: #1a1a1a; font-family: "Playfair Display", Georgia, serif; font-size: 28px; border-bottom: 2px solid #eaf3fb; padding-bottom: 10px; }
.about-modal-text { overflow-y: auto; color: #444; line-height: 1.85; font-size: 16px; padding-right: 15px; margin-bottom: 10px; }
.about-modal-text p { margin-bottom: 20px; }

.about-modal-text::-webkit-scrollbar { width: 6px; }
.about-modal-text::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.about-modal-text::-webkit-scrollbar-thumb { background: #0a5b9d; border-radius: 10px; }

@keyframes scaleIn {
    0% { opacity: 0; transform: scale(0.95) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   AMENITIES SECTION - FULLY RESPONSIVE
   ============================================================ */

.amenities-section {
  position: relative;
  min-height: auto;
  padding: 56px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0b1120 0%, #172554 100%);
  font-family: "Inter", Arial, sans-serif;
}

.amenities-waves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.amenities-waves svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  opacity: 0.05;
  transform: translate(-50%, -50%);
}

.amenities-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* =========================
   HEADER
   ========================= */

.amenities-header {
  margin-bottom: 28px;
  text-align: center;
}

.amenities-kicker {
  margin: 0 0 16px;
  color: #38bdf8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.amenities-title {
  margin: 0;
  color: #f8fafc;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.amenities-divider {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}

.amenities-divider-line {
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,.15);
}

.amenities-divider-dot {
  width: 10px;
  height: 10px;
  border: 1.5px solid #38bdf8;
  border-radius: 50%;
}

/* =========================
   DESKTOP DIAGRAM (Strict Fixed Sizing preserved for mapping icons perfectly)
   ========================= */

.amenities-desktop {
  position: relative;
  left: 50%;
  z-index: 10;
  display: none;
  width: 1400px; 
  height: 600px; 
  margin: 0;
  transform: translateX(-50%);
}

.amenities-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Fixed Center Image exact placement (Don't alter sizes so Pins touch rings strictly) */
.amenities-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  transform: translate(-50%, -50%);
}

.amenities-center-inner {
  overflow: hidden;
  background: linear-gradient(to top right, #1d4ed8, #3b82f6, #38bdf8);
  box-shadow: 0 15px 40px -10px rgba(56,189,248,.4);
  width: 100%;
  height: 100%;
  padding: 6px;
  border-radius: 50%;
}

.amenities-center-inner img {
  width: 100%;
  height: 100%;
  border: 4px solid #0f172a;
  border-radius: 50%;
  object-fit: cover;
  transition: opacity .28s ease, transform .4s ease;
}

.amenities-center-inner.is-changing img {
  opacity: .25;
  transform: scale(1.04);
}

/* Exactly matching Purane Dots Code for Map precision coordinates! */
.amenity-point {
  --amenity-color: #38bdf8;
  position: absolute;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.amenity-icon-circle {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  background: rgba(30,41,59,.82);
  color: #7dd3fc;
  box-shadow: 0 10px 34px rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
  transition: .25s ease;
}

.amenity-point:hover .amenity-icon-circle,
.amenity-point.is-active .amenity-icon-circle {
  color: white;
  border-color: var(--amenity-color);
  transform: scale(1.08);
}

.amenity-icon-circle .icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.amenity-ring { position: absolute; inset: 0; width: 100%; height: 100%; }

.amenity-label {
  position: absolute;
  top: 50%;
  width: max-content;
  max-width: 245px;
  transform: translateY(-50%);
  pointer-events: none; /* Stops hovering interference! */
}
.amenity-label-left { right: 100%; margin-right: 34px; text-align: right; }
.amenity-label-right { left: 100%; margin-left: 34px; text-align: left; }
.amenity-label h3 { margin: 0; color: #f8fafc; font-size: 20px; }
.amenity-label p { margin: 8px 0 0; color: #cbd5e1; font-size: 16px; line-height: 1.6; white-space: pre-line; }

/* =========================
   MOBILE & TABLET VIEW FIXES 📱 & 💻
   ========================= */

.amenities-mobile {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.amenities-mobile-img {
  width: min(85vw, 300px); /* Perfectly shrinks circle responsive on any thin mobile */
  height: min(85vw, 300px);
  overflow: hidden;
  background: linear-gradient(to top right, #1d4ed8, #3b82f6, #38bdf8);
  box-shadow: 0 15px 40px -10px rgba(56,189,248,.4);
  padding: 5px;
  margin-bottom: 28px;
  border-radius: 50%;
  display: flex;
}

.amenities-mobile-img img {
  width: 100%;
  height: 100%;
  border: 4px solid #0f172a;
  border-radius: 50%;
  object-fit: cover;
  transition: opacity .28s ease, transform .4s ease;
}

.amenities-grid {
  display: grid;
  grid-template-columns: 1fr; /* Defaults strictly mapped to proper width alignment */
  gap: 16px;
  width: 100%;
  max-width: 820px;
}

.amenity-card {
  --amenity-color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 108px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(30,41,59,.42);
  color: white;
  cursor: pointer;
  transition: .3s all ease;
  box-sizing: border-box; /* Prevend breaking beyond max screen-width! */
}

.amenity-card:hover {
  background: rgba(43,62,89,.6); /* Nice UI improvement */
}

.amenity-card-icon {
  display: flex;
  flex-shrink: 0;
  width: 78px;
  height: 78px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0f172a;
  color: #7dd3fc;
}

.amenity-card-icon .icon { width: 30px; height: 30px; fill: none; stroke: currentColor; }
.amenity-card h3 { margin: 0; font-size: 18px; }
.amenity-card p { margin: 6px 0 0; color: #aebbd0; }


/* =========================
   RESPONSIVE DEVICE HANDLING 💡 
   ========================= */

@media(min-width: 640px) {
  /* Big Mobile / Default Tabs -> Turn into Grid layout smoothly */
  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Specifically preserving mapping system strictly AFTER >=1280px sizes !! */
@media(min-width: 1280px) {
  .amenities-section {
    padding: 66px 0 70px;
  }
  .amenities-desktop {
    display: block !important;
  }
  .amenities-mobile {
    display: none !important;
  }
}

/* Any Tabs Or device purely under large monitor, triggers clean layout grid system */
@media(max-width: 1279px) {
  .amenities-desktop {
    display: none !important; /* Keep Strict Block here */
  }
  .amenities-mobile {
     display: flex !important; /* Forces the fluid flex model only here! */
  }
}

@media(max-width: 639px) {
  .amenities-title {
    font-size: 32px;
  }
  .amenity-card-icon {
    width: 62px;  /* Resized elegantly to save device spacing */
    height: 62px;
  }
  .amenity-card-icon .icon {
    width: 24px; height: 24px;
  }
  .amenity-card h3 { font-size: 16px; }
  .amenity-card { padding: 14px; gap: 14px; min-height: unset; }
}

@media(max-width: 375px) { /* VERY small phones handling elegantly !! */
   .amenities-title {
      font-size: 26px; 
   }
}


   /* =========================
   Attraction Section (Premium Dark Vision Edition)
   ========================= */
#attraction-explorer-section,
#attraction-explorer-section * {
  box-sizing: border-box;
}

#attraction-explorer-section {
  position: relative;
  min-height: auto;
  width: 100%;
  background: linear-gradient(180deg, #172554 0%, #020617 100%); 
  color: #f8fafc;
  font-family: "Playfair Display", Georgia, serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
}

#attraction-explorer-section .aes-blur {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 9999px;
  filter: blur(120px);
  pointer-events: none;
}

#attraction-explorer-section .aes-blur-blue {
  bottom: -6rem;
  left: -6rem;
  background: rgba(56, 189, 248, 0.20);
}

#attraction-explorer-section .aes-blur-orange {
  top: -6rem;
  right: -6rem;
  background: rgba(79, 70, 229, 0.25);
}

#attraction-explorer-section .aes-main-background {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1478809846156-3bb1f5c69784?q=80&w=2000');
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
  mix-blend-mode: luminosity; 
}

#attraction-explorer-section .aes-top-title {
  position: relative;
  z-index: 30;
  padding-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  flex-shrink: 0;
}

#attraction-explorer-section .aes-top-title h1 {
  font-size: 1.25rem;
  line-height: 1.375;
  font-family: "Playfair Display", Georgia, serif;
  color: #f8fafc;
  max-width: 48rem;
  margin: 0 auto;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

#attraction-explorer-section .aes-cards-container {
  position: relative;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  gap: 2rem;
  padding-top: 1rem;
  padding-bottom: 3rem;
}

#attraction-explorer-section .aes-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(30, 41, 59, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.15); 
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.50);
  transition: transform 500ms, box-shadow 500ms;
  width: 100%;
  max-width: 400px;
  height: 45vh;
  cursor: pointer;
  z-index: 30;
  flex-shrink: 0;
}

#attraction-explorer-section .aes-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.60);
  border: 1px solid rgba(56, 189, 248, 0.5);
}

#attraction-explorer-section .aes-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 700ms;
}

#attraction-explorer-section .aes-card:hover .aes-card-bg {
  transform: scale(1.05);
}

#attraction-explorer-section .aes-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 7, 18, 0.95) 10%, rgba(3, 7, 18, 0.45) 55%, transparent 100%);
}

#attraction-explorer-section .aes-card-content {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#attraction-explorer-section .aes-avatar-wrap {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  display: block;
}

#attraction-explorer-section .aes-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  overflow: hidden;
  border: 2px solid rgba(56, 189, 248, 0.70);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.40);
}

#attraction-explorer-section .aes-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  display: block;
}

#attraction-explorer-section .aes-card-text {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 20;
  color: #ffffff;
}

#attraction-explorer-section .aes-card-text > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: "Inter", Arial, sans-serif;
  color: #38bdf8;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: block;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

#attraction-explorer-section .aes-card-text h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 0.5rem 0;
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-weight: 600;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

#attraction-explorer-section .aes-card-text h2 span {
  display: block;
  text-transform: capitalize;
}

#attraction-explorer-section .aes-card-text p {
  font-size: 0.9rem;
  font-family: "Inter", Arial, sans-serif;
  color: #cbd5e1;
  opacity: 0.90;
  line-height: 1.625;
  margin: 0 0 1rem 0;
  display: block;
}

#attraction-explorer-section .aes-plus {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 300ms ease;
}

#attraction-explorer-section .aes-plus:hover {
  background: #38bdf8;
  border-color: #38bdf8;
  color: #020617;
}

#attraction-explorer-section .aes-plus span {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

#attraction-explorer-section .aes-mobile-spacer {
  width: 100%;
  height: clamp(360px, 50vh, 560px);
  flex-shrink: 0;
  pointer-events: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 25;
}

#attraction-explorer-section .aes-person-wrap {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  min-height: 100vh;
  height: 100vh;
  overflow: visible;
}

#attraction-explorer-section #aes-person-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#attraction-explorer-section .aes-person-fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 240px;
  margin-left: -60px;
  margin-top: -80px;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease, visibility 300ms ease;
  transform-style: preserve-3d;
}

#attraction-explorer-section .aes-person-fallback.aes-hide {
  opacity: 0;
  visibility: hidden;
}

#attraction-explorer-section .aes-fallback-person {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 72px;
  height: 210px;
  margin-left: -36px;
  transform: perspective(500px) rotateY(180deg);
  transform-style: preserve-3d;
  animation: aesFallbackIdle 1.7s ease-in-out infinite alternate;
}

#attraction-explorer-section .aes-fallback-shadow {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 78px;
  height: 18px;
  margin-left: -39px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.70);
  filter: blur(6px);
}

#attraction-explorer-section .aes-fallback-head {
  position: absolute;
  left: 50%;
  top: 0;
  width: 44px;
  height: 48px;
  margin-left: -22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fce0cd, #cd9a77);
  box-shadow: inset -7px -8px 16px rgba(0,0,0,0.16), 0 9px 18px rgba(0,0,0,0.40);
}

#attraction-explorer-section .aes-fallback-neck {
  position: absolute;
  left: 50%;
  top: 43px;
  width: 16px;
  height: 18px;
  margin-left: -8px;
  border-radius: 8px;
  background: #c99777;
}

#attraction-explorer-section .aes-fallback-body {
  position: absolute;
  left: 50%;
  top: 58px;
  width: 58px;
  height: 86px;
  margin-left: -29px;
  border-radius: 22px 22px 16px 16px;
  background: linear-gradient(145deg, #1d4ed8, #1e40af); 
  box-shadow: inset -10px -12px 20px rgba(0,0,0,0.30), 0 12px 24px rgba(0,0,0,0.50);
}

#attraction-explorer-section .aes-fallback-arm {
  position: absolute;
  top: 66px;
  width: 16px;
  height: 78px;
  border-radius: 12px;
  background: linear-gradient(145deg, #2563eb, #1e40af);
  transform-origin: 50% 12px;
}

#attraction-explorer-section .aes-fallback-arm-left {
  left: 2px;
  transform: rotate(11deg);
}

#attraction-explorer-section .aes-fallback-arm-right {
  right: 2px;
  transform: rotate(-11deg);
}

#attraction-explorer-section .aes-fallback-leg {
  position: absolute;
  top: 136px;
  width: 18px;
  height: 76px;
  border-radius: 12px;
  background: linear-gradient(145deg, #334155, #0f172a); 
  transform-origin: 50% 8px;
}

#attraction-explorer-section .aes-fallback-leg-left {
  left: 22px;
  transform: rotate(4deg);
}

#attraction-explorer-section .aes-fallback-leg-right {
  right: 22px;
  transform: rotate(-4deg);
}

@keyframes aesFallbackIdle {
  0% { transform: perspective(500px) rotateY(180deg) translateY(0); }
  100% { transform: perspective(500px) rotateY(180deg) translateY(-6px); }
}

#attraction-explorer-section .aes-status-text {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

#attraction-explorer-section .aes-status-text div {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-family: "Inter", Arial, sans-serif;
  opacity: 0.60;
  color: #94a3b8; 
  font-weight: 500;
}

#attraction-explorer-section .aes-return-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  background: rgba(30, 41, 59, 0.80);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: "Inter", Arial, sans-serif;
  transition: all 250ms ease;
  display: none;
  cursor: pointer;
}

#attraction-explorer-section .aes-return-btn:hover {
  background: #38bdf8;
  color: #020617;
  border-color: #38bdf8;
}

#attraction-explorer-section .aes-inside-scene {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: linear-gradient(180deg, #172554 0%, #020617 100%);
  overflow: hidden;
  font-family: "Inter", Arial, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1500ms;
}

#attraction-explorer-section .aes-inside-scene.aes-active {
  display: flex;
}

#attraction-explorer-section .aes-inside-scene.aes-visible {
  opacity: 1;
}

#attraction-explorer-section .aes-inside-top-button {
  position: absolute;
  top: 3rem;
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 50;
}

#attraction-explorer-section .aes-inside-top-button button {
  background: rgba(30, 41, 59, 0.60);
  backdrop-filter: blur(8px);
  color: #f8fafc;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 300ms ease;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  font-family: "Inter", Arial, sans-serif;
}

#attraction-explorer-section .aes-inside-top-button button:hover {
  background: #38bdf8;
  color: #020617;
  border-color: #38bdf8;
}

#attraction-explorer-section .aes-inside-top-button button:hover .aes-arrow-circle {
  background: rgba(0, 0, 0, 0.15); 
}

#attraction-explorer-section .aes-arrow-circle {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 9999px;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 300ms ease;
}

#attraction-explorer-section .aes-arrow-circle svg {
  display: block;
}

#attraction-explorer-section .aes-inside-scroll {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding-top: 5rem;
  overflow-y: auto;
  overflow-x: hidden;
}

#attraction-explorer-section .aes-inside-cards {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding: 1.5rem 2rem 4rem 2rem;
  gap: 2.5rem;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  perspective: 1200px;
}

#attraction-explorer-section .aes-inside-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  transform-style: preserve-3d;
}

#attraction-explorer-section .aes-inside-card {
  width: 85vw;
  max-width: 340px;
  height: 300px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); 
  transition: transform 500ms, box-shadow 500ms, border 300ms;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1); 
  background: #1e293b;
  position: relative;
}

#attraction-explorer-section .aes-inside-card-wrap:hover .aes-inside-card {
  transform: translateY(-8px);
  box-shadow: 0 35px 50px -12px rgba(0, 0, 0, 0.8);
  border-color: rgba(56, 189, 248, 0.5);
}

#attraction-explorer-section .aes-inside-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms;
  display: block;
  opacity: 0.95;
}

#attraction-explorer-section .aes-inside-card-wrap:hover .aes-inside-card img {
  transform: scale(1.05);
  opacity: 1; 
}

/* ===============================
   CHANGED AS PER REQUEST
   Bahar na nikle aur text format theek rahe (wrapped, no spacing issues) 
=============================== */
#attraction-explorer-section .aes-inside-title {
  margin-top: 1.5rem;
  text-align: center;
  color: #f8fafc;
  font-size: 1rem;            /* Removed clamp chotapan - clean sizes ab normal hngi */
  line-height: 1.3rem;
  font-weight: 500;
  text-transform: none;       /* Capital/uppercase ki zarurt nahi (NORMAL rakha gaya hai) */
  letter-spacing: normal;     /* Spacing hata di gai normal words honge */
  font-family: "Inter", Arial, sans-serif;
  word-wrap: break-word;      /* Break easily naake box ke bahar na jae */
  white-space: normal;        /* Now 2 lines pe aajaega, lambi width cut nahi karega ! */
  padding: 0 0.5rem;          /* Edges per chipkne se rokega */
}

@media (max-width: 1023px) {
  #attraction-explorer-section .aes-cards-container {
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 2.5rem;
  }
  #attraction-explorer-section .aes-cards-container > .aes-person-wrap[data-placement="mobile-cards"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    z-index: 35;
    overflow: visible;
    pointer-events: none;
  }
  #attraction-explorer-section .aes-cards-container > .aes-person-wrap[data-placement="mobile-cards"] #aes-person-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  #attraction-explorer-section .aes-cards-container > .aes-person-wrap[data-placement="mobile-cards"] .aes-person-fallback {
    left: 50%;
    top: 50%;
    margin-left: -60px;
    margin-top: -92px;
    transform: scale(0.28);
    transform-origin: center center;
  }
  #attraction-explorer-section .aes-inside-card-wrap {
    transform: none !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  #attraction-explorer-section .aes-cards-container > .aes-person-wrap[data-placement="mobile-cards"] .aes-person-fallback {
    transform: scale(0.34);
  }
  #attraction-explorer-section .aes-mobile-spacer {
    height: clamp(440px, 54vh, 680px);
  }
  #attraction-explorer-section .aes-mobile-spacer .aes-person-fallback {
    transform: scale(0.34);
  }
}

@media (min-width: 640px) {
  #attraction-explorer-section .aes-top-title h1 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  #attraction-explorer-section .aes-cards-container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  #attraction-explorer-section .aes-mobile-spacer {
    height: clamp(440px, 54vh, 680px);
  }
}

@media (min-width: 1024px) {
  #attraction-explorer-section .aes-top-title {
    padding-top: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  #attraction-explorer-section .aes-top-title h1 {
    font-size: clamp(2rem, 3.1vw, 3.15rem);
    line-height: 1.08;
    max-width: min(78rem, calc(100vw - 3rem));
  }
  #attraction-explorer-section .aes-cards-container {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    padding-left: clamp(2rem, 6vw, 7rem);
    padding-right: clamp(2rem, 6vw, 7rem);
    gap: clamp(16rem, 28vw, 36rem);
    padding-top: 0;
    padding-bottom: 0;
  }
  #attraction-explorer-section .aes-card {
    max-width: none;
    width: clamp(340px, 26vw, 430px);
    height: clamp(480px, 62vh, 600px);
    border-radius: 40px;
  }
  #attraction-explorer-section .aes-card:hover {
    transform: translateY(-1rem);
  }
  #attraction-explorer-section .aes-card-content {
    padding: 2rem;
  }
  #attraction-explorer-section .aes-avatar-wrap {
    top: 2rem;
    left: 2rem;
  }
  #attraction-explorer-section .aes-card-text h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }
  #attraction-explorer-section .aes-card-text p {
    margin-bottom: 1.5rem;
  }
  #attraction-explorer-section .aes-mobile-spacer {
    display: none;
  }
  #attraction-explorer-section .aes-status-text {
    bottom: 3rem;
  }
  #attraction-explorer-section .aes-status-text div {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.5em;
  }
  #attraction-explorer-section .aes-return-btn {
    top: 2rem;
    right: 3rem;
  }
  #attraction-explorer-section .aes-inside-scroll {
    align-items: center;
    padding-top: 4rem;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  #attraction-explorer-section .aes-inside-cards {
    flex-direction: row;
    width: 100%;
    max-width: none;
    overflow-x: visible;
    padding-left: clamp(1.5rem, 4vw, 4.5rem);
    padding-right: clamp(1.5rem, 4vw, 4.5rem);
    padding-bottom: 2rem;
    gap: clamp(1rem, 2.6vw, 2.5rem);
    justify-content: center;
  }
  #attraction-explorer-section .aes-inside-card {
    width: clamp(150px, 14.5vw, 220px);
    height: clamp(250px, 25vw, 360px);
    border-radius: 40px;
    box-shadow: 0 30px 45px -10px rgba(0, 0, 0, 0.70), 0 8px 10px -6px rgba(0, 0, 0, 0.40); 
  }
  #attraction-explorer-section .aes-inside-title {
    /* Large device fix per requested */
    margin-top: 1.5rem;
    font-size: clamp(0.9rem, 1vw, 1.125rem); 
    line-height: 1.4;
    letter-spacing: normal;       /* Safe normal tracking now */
    white-space: normal;          /* WRAPS safely now! */
  }
}

/* ============================================================
   MERGED INTERACTIVE MAP LAYOUT — SHOWN AFTER ROBOT ARRIVAL
   ============================================================ */

#attraction-explorer-section {
  min-height: 100vh;
  overflow: hidden;
}

#attraction-explorer-section .aes-card:focus-visible,
#attraction-explorer-section button:focus-visible,
#attraction-explorer-section .aes-attraction-box:focus-visible {
  outline: 3px solid #f8fafc;
  outline-offset: 4px;
}

#attraction-explorer-section .aes-card.aes-selected-card {
  border-color: rgba(56, 189, 248, 0.9);
  box-shadow: 0 30px 70px rgba(14, 165, 233, 0.28);
}

#attraction-explorer-section .aes-person-fallback.aes-walking .aes-fallback-arm-left,
#attraction-explorer-section .aes-person-fallback.aes-walking .aes-fallback-leg-right {
  animation: aesFallbackWalkForward 0.45s ease-in-out infinite alternate;
}

#attraction-explorer-section .aes-person-fallback.aes-walking .aes-fallback-arm-right,
#attraction-explorer-section .aes-person-fallback.aes-walking .aes-fallback-leg-left {
  animation: aesFallbackWalkBackward 0.45s ease-in-out infinite alternate;
}

@keyframes aesFallbackWalkForward {
  from { transform: rotate(-20deg); }
  to { transform: rotate(24deg); }
}

@keyframes aesFallbackWalkBackward {
  from { transform: rotate(24deg); }
  to { transform: rotate(-20deg); }
}

/* Full-screen inside scene so the large map layout remains usable. */
#attraction-explorer-section .aes-inside-scene {
  position: fixed;
  inset: 0;
  z-index: 9999;
  justify-content: flex-start;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 10%, rgba(14, 165, 233, 0.22), transparent 30%),
    radial-gradient(circle at 90% 5%, rgba(249, 115, 22, 0.18), transparent 28%),
    linear-gradient(180deg, #172554 0%, #020617 100%);
}

#attraction-explorer-section .aes-inside-top-button {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 10020;
  pointer-events: none;
}

#attraction-explorer-section .aes-inside-top-button button {
  pointer-events: auto;
}

#attraction-explorer-section .aes-explorer-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 86px;
  -webkit-overflow-scrolling: touch;
}

#attractions-interactive-map,
#attractions-interactive-map * {
  box-sizing: border-box;
}

#attractions-interactive-map {
  width: 100%;
  min-height: 100%;
  color: #f8fafc;
  font-family: "Inter", Arial, sans-serif;
  user-select: text;
}

#attractions-interactive-map .aes-map-shell {
  width: min(1720px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 56px;
}

#attractions-interactive-map .aes-map-section-header {
  width: min(900px, 100%);
  margin: 0 auto 34px;
  text-align: center;
}

#attractions-interactive-map .aes-map-eyebrow {
  margin: 0 0 10px;
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#attractions-interactive-map .aes-map-section-header h2 {
  margin: 0;
  color: #ffffff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.9rem);
  line-height: 1.05;
  font-weight: 600;
}

#attractions-interactive-map .aes-map-section-header > p:last-child {
  max-width: 760px;
  margin: 16px auto 0;
  color: #cbd5e1;
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  line-height: 1.75;
}

#attractions-interactive-map .aes-attractions-layout-container {
  display: grid;
  grid-template-columns: minmax(230px, 0.82fr) minmax(500px, 1.65fr) minmax(230px, 0.82fr);
  gap: clamp(16px, 2vw, 30px);
  align-items: start;
}

#attractions-interactive-map .aes-attractions-side {
  display: grid;
  gap: 24px;
}

/* Four-card layout: two cards on each side of the map. */
#attractions-interactive-map .aes-left-side,
#attractions-interactive-map .aes-right-side {
  align-content: start;
}

#attractions-interactive-map .aes-attraction-box {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.76);
  color: #f8fafc;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

#attractions-interactive-map .aes-attraction-box:hover,
#attractions-interactive-map .aes-attraction-box.aes-active {
  transform: translateY(-5px);
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 24px 55px rgba(14, 165, 233, 0.18);
}

#attractions-interactive-map .aes-attraction-image {
  position: relative;
  height: 126px;
  overflow: hidden;
  background: #0f172a;
}

#attractions-interactive-map .aes-attraction-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 6, 23, 0.75), transparent 58%);
}

#attractions-interactive-map .aes-attraction-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

#attractions-interactive-map .aes-attraction-box:hover .aes-attraction-image img,
#attractions-interactive-map .aes-attraction-box.aes-active .aes-attraction-image img {
  transform: scale(1.07);
}

#attractions-interactive-map .aes-attraction-copy {
  padding: 17px 18px 18px;
}

#attractions-interactive-map .aes-attraction-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 9px;
  color: #ffffff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.28;
}

#attractions-interactive-map .aes-attraction-icon {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #38bdf8;
}

#attractions-interactive-map .aes-attraction-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #cbd5e1;
  font-size: 0.82rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

#attractions-interactive-map .aes-attraction-features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

#attractions-interactive-map .aes-feature-tag,
#attractions-interactive-map .aes-popup-feature {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.09);
  color: #bae6fd;
  font-size: 0.68rem;
  font-weight: 700;
}

#attractions-interactive-map .aes-map-container {
  padding: clamp(16px, 2.2vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;
  background: rgba(15, 23, 42, 0.78);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

#attractions-interactive-map .aes-map-title {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.3;
  text-align: center;
}

#attractions-interactive-map .aes-map-title i {
  margin-right: 7px;
  color: #38bdf8;
}

#attractions-interactive-map .aes-map-area {
  position: relative;
  overflow: hidden;
  height: clamp(390px, 56vh, 610px);
  min-height: 390px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: #dbeafe;
}

#attractions-interactive-map #aes-map {
  width: 100%;
  height: 100%;
  min-height: 390px;
}

#attractions-interactive-map .leaflet-container {
  font-family: "Inter", Arial, sans-serif;
}

#attractions-interactive-map .aes-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(2, 6, 23, 0.88);
  color: #e2e8f0;
  transition: opacity 350ms ease;
}

#attractions-interactive-map .aes-loading-overlay p {
  margin: 0;
}

#attractions-interactive-map .aes-loading-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: aesMapSpin 0.85s linear infinite;
}

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

#attractions-interactive-map .aes-journey-progress {
  display: none;
  height: 7px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

#attractions-interactive-map .aes-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #f97316);
  transition: width 70ms linear;
}

#attractions-interactive-map .aes-instructions {
  margin-top: 14px;
  color: #cbd5e1;
  font-size: 0.82rem;
  text-align: center;
}

#attractions-interactive-map .aes-instructions p {
  margin: 0;
}

#attractions-interactive-map .aes-instructions i {
  color: #38bdf8;
}

#attractions-interactive-map .aes-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

#attractions-interactive-map .aes-control-btn {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-family: "Inter", Arial, sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

#attractions-interactive-map .aes-control-btn:hover {
  transform: translateY(-2px);
  background: #38bdf8;
  color: #020617;
}

/* Leaflet marker for the map explorer. */
#attractions-interactive-map .aes-map-character {
  position: relative;
  width: 46px;
  height: 56px;
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.34));
}

#attractions-interactive-map .aes-map-character-head {
  position: absolute;
  top: 0;
  left: 10px;
  width: 26px;
  height: 23px;
  border: 3px solid #ffffff;
  border-radius: 10px 10px 8px 8px;
  background: #38bdf8;
}

#attractions-interactive-map .aes-map-character-eye {
  position: absolute;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #020617;
}

#attractions-interactive-map .aes-map-character-eye:first-child { left: 5px; }
#attractions-interactive-map .aes-map-character-eye:last-child { right: 5px; }

#attractions-interactive-map .aes-map-character-body {
  position: absolute;
  top: 23px;
  left: 7px;
  width: 32px;
  height: 26px;
  border: 3px solid #ffffff;
  border-radius: 9px 9px 12px 12px;
  background: #1d4ed8;
}

#attractions-interactive-map .aes-map-character::before,
#attractions-interactive-map .aes-map-character::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 11px;
  height: 10px;
  border-radius: 4px;
  background: #0f172a;
}

#attractions-interactive-map .aes-map-character::before { left: 8px; }
#attractions-interactive-map .aes-map-character::after { right: 8px; }

#attractions-interactive-map .aes-map-character.aes-walking {
  animation: aesMapCharacterBob 0.34s ease-in-out infinite alternate;
}

@keyframes aesMapCharacterBob {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-7px) rotate(2deg); }
}

/* Popup */
#attractions-interactive-map .aes-info-popup {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(10px);
}

#attractions-interactive-map .aes-info-popup.aes-open {
  display: flex;
}

#attractions-interactive-map .aes-popup-card {
  width: min(720px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  background: #0f172a;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.58);
}

#attractions-interactive-map .aes-popup-image-wrap {
  height: clamp(210px, 36vh, 340px);
  overflow: hidden;
}

#attractions-interactive-map .aes-popup-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#attractions-interactive-map .aes-popup-body {
  padding: clamp(20px, 3vw, 32px);
}

#attractions-interactive-map .aes-popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

#attractions-interactive-map .aes-popup-title {
  margin: 0;
  color: #ffffff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  line-height: 1.15;
}

#attractions-interactive-map .aes-popup-title i {
  margin-right: 7px;
  color: #38bdf8;
}

#attractions-interactive-map .aes-close-popup {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
}

#attractions-interactive-map .aes-close-popup:hover {
  background: #f97316;
}

#attractions-interactive-map #aes-popup-description {
  margin: 18px 0 0;
  color: #cbd5e1;
  line-height: 1.72;
}

#attractions-interactive-map .aes-popup-features {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

#attractions-interactive-map .aes-popup-coordinates {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 0.82rem;
}

@media (max-width: 1240px) {
  #attractions-interactive-map .aes-attractions-layout-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #attractions-interactive-map .aes-map-container {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #attractions-interactive-map .aes-attractions-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #attractions-interactive-map .aes-map-shell {
    width: min(100% - 20px, 1720px);
  }

  #attractions-interactive-map .aes-attractions-layout-container {
    display: flex;
    flex-direction: column;
  }

  #attractions-interactive-map .aes-map-container {
    width: 100%;
    order: 1;
  }

  #attractions-interactive-map .aes-left-side { order: 2; }
  #attractions-interactive-map .aes-right-side { order: 3; }

  #attractions-interactive-map .aes-attractions-side {
    width: 100%;
    grid-template-columns: 1fr;
  }

  #attractions-interactive-map .aes-attraction-box {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
  }

  #attractions-interactive-map .aes-attraction-image {
    height: 100%;
    min-height: 180px;
  }

  #attractions-interactive-map .aes-map-area,
  #attractions-interactive-map #aes-map {
    height: 420px;
    min-height: 420px;
  }
}

@media (max-width: 520px) {
  #attraction-explorer-section .aes-inside-top-button {
    top: 10px;
  }

  #attraction-explorer-section .aes-inside-top-button button {
    padding: 0.62rem 1rem;
    font-size: 0.78rem;
  }

  #attraction-explorer-section .aes-explorer-scroll {
    padding-top: 70px;
  }

  #attractions-interactive-map .aes-map-shell {
    width: calc(100% - 14px);
  }

  #attractions-interactive-map .aes-map-section-header {
    margin-bottom: 22px;
    padding: 0 7px;
  }

  #attractions-interactive-map .aes-map-container {
    padding: 10px;
    border-radius: 22px;
  }

  #attractions-interactive-map .aes-map-area,
  #attractions-interactive-map #aes-map {
    height: 360px;
    min-height: 360px;
    border-radius: 16px;
  }

  #attractions-interactive-map .aes-attraction-box {
    display: block;
  }

  #attractions-interactive-map .aes-attraction-image {
    height: 190px;
    min-height: 0;
  }

  #attractions-interactive-map .aes-controls {
    flex-direction: column;
  }

  #attractions-interactive-map .aes-control-btn {
    width: 100%;
  }

  #attractions-interactive-map .aes-info-popup {
    padding: 10px;
  }

  #attractions-interactive-map .aes-popup-card {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #attraction-explorer-section *,
  #attractions-interactive-map * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   SAFE ROBOT + RESTAURANT SPACING RESPONSIVE FIXES
   ============================================================ */
#attraction-explorer-section .aes-person-wrap,
#attraction-explorer-section #aes-person-canvas {
  max-width: 100%;
}

#attraction-explorer-section .aes-inside-scene[data-active-category="restaurants"] .aes-attractions-side {
  gap: 28px;
}

#attraction-explorer-section .aes-inside-scene[data-active-category="restaurants"] .aes-attraction-title {
  gap: 14px;
}

#attraction-explorer-section .aes-inside-scene[data-active-category="restaurants"] .aes-attraction-features {
  gap: 10px;
}

#attractions-interactive-map .leaflet-marker-icon {
  transition: transform 180ms ease;
}

#attractions-interactive-map .leaflet-marker-icon:hover {
  z-index: 10000 !important;
}

@media (min-width: 1024px) and (max-height: 720px) {
  #attraction-explorer-section .aes-card {
    height: clamp(390px, 58vh, 500px);
  }

  #attraction-explorer-section .aes-top-title {
    padding-top: 1.35rem;
  }
}

@media (max-width: 1023px) {
  #attraction-explorer-section .aes-cards-container > .aes-person-wrap[data-placement="mobile-cards"] {
    max-width: 100%;
  }

  #attraction-explorer-section .aes-inside-scene[data-active-category="restaurants"] .aes-attractions-side {
    gap: 22px;
  }
}

@media (max-width: 820px) {
  #attractions-interactive-map .aes-attractions-layout-container {
    gap: 22px;
  }

  #attractions-interactive-map .aes-attractions-side {
    gap: 18px;
  }
}

@media (max-width: 380px) {
  #attraction-explorer-section .aes-cards-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #attraction-explorer-section .aes-card {
    border-radius: 18px;
  }

  #attractions-interactive-map .aes-map-area,
  #attractions-interactive-map #aes-map {
    height: 320px;
    min-height: 320px;
  }

  #attractions-interactive-map .aes-attraction-image {
    height: 165px;
  }
}


    /* =========================
       Photo Gallery Section
       ========================= */
    #exceptional-wheel-container {
      position: relative;
      width: 100%;
      max-width: 100vw;
      overflow: hidden;
      background: #eaf3fb;
      isolation: isolate;
    }

    #exceptional-wheel-container .background {
      position: absolute;
      inset: 0;
      background: #eaf3fb;
      z-index: 0;
    }

    #exceptional-wheel-container .wheel-mask {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 30%;
      overflow: hidden;
      z-index: 1;
      pointer-events: none;
    }

    #exceptional-wheel-container .wheel-mask-left {
      left: 0;
    }

    #exceptional-wheel-container .wheel-mask-right {
      right: 0;
    }

    #exceptional-wheel-container .wheel {
      position: absolute;
      top: 50%;
      pointer-events: none;
      transform-origin: center;
    }

    #exceptional-wheel-container .wheel-left {
      left: 0;
      animation: exceptionalRotateLeft 140s linear infinite;
    }

    #exceptional-wheel-container .wheel-right {
      right: 0;
      animation: exceptionalRotateRight 140s linear infinite;
    }

    #exceptional-wheel-container .card {
      position: absolute;
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 16px 40px rgba(6, 42, 73, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.15);
      background-color: #052033;
      transform-origin: center;
      transform: var(--card-transform);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      pointer-events: auto;
    }

    #exceptional-wheel-container .card:hover {
      transform: var(--card-hover-transform);
      box-shadow: 0 22px 55px rgba(6, 42, 73, 0.6);
    }

    #exceptional-wheel-container .card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Desktop center content */
    #exceptional-wheel-container .content {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 10;
      width: 100%;
      max-width: 640px;
      padding: 0 24px;
      text-align: center;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    #exceptional-wheel-container .heading {
      font-family: "Playfair Display", Georgia, serif;
      font-weight: 700;
      color: #062a49;
      line-height: 1.05;
      margin: 0 0 16px;
      letter-spacing: -0.03em;
      text-align: center;
      pointer-events: auto;
    }

    #exceptional-wheel-container .subtext {
      color: #333;
      font-size: 18px;
      line-height: 1.5;
      max-width: 520px;
      margin: 0 auto 38px;
      font-weight: 400;
      text-align: center;
      font-family: "Inter", Arial, sans-serif;
      pointer-events: auto;
    }

    #exceptional-wheel-container .button {
      background-color: #062a49;
      color: #eaf3fb;
      border: none;
      border-radius: 100px;
      padding: 8px 28px 8px 8px;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      box-shadow: 0 12px 24px rgba(6, 42, 73, 0.35);
      pointer-events: auto;
      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      font-family: "Inter", Arial, sans-serif;
    }

    #exceptional-wheel-container .button:hover {
      transform: scale(1.05);
    }

    #exceptional-wheel-container .button-icon-wrapper {
      width: 42px;
      height: 42px;
      background-color: #eaf3fb;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    @keyframes exceptionalRotateLeft {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }

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

    @keyframes exceptionalRotateRight {
      from {
        transform: translate(50%, -50%) rotate(0deg);
      }

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

    /* Tablet + Mobile: content above circle */
    #exceptional-wheel-container.is-stacked .content {
      top: var(--content-top, 32px);
      left: 50%;
      max-width: 560px;
      padding: 0 20px;
      transform: translateX(-50%);
    }

    #exceptional-wheel-container.is-stacked .wheel-mask {
      top: var(--wheel-start, 220px);
      bottom: auto;
      height: var(--wheel-area-height, 420px);
      width: 50%;
    }

    #exceptional-wheel-container.is-stacked .wheel-left,
    #exceptional-wheel-container.is-stacked .wheel-right {
      animation-duration: 120s;
    }

    /* Tablet */
    @media (min-width: 768px) and (max-width: 1199px) {
      #exceptional-wheel-container .heading {
        font-size: 46px !important;
        line-height: 1.08;
        margin-bottom: 14px;
      }

      #exceptional-wheel-container .subtext {
        font-size: 18px !important;
        line-height: 1.5;
        max-width: 82%;
        margin-bottom: 30px;
      }

      #exceptional-wheel-container .button {
        font-size: 17px;
      }
    }

    /* Mobile */
    @media (max-width: 767px) {
      #exceptional-wheel-container .content {
        max-width: 340px;
        padding: 0 18px;
      }

      #exceptional-wheel-container .heading {
        font-size: 30px !important;
        line-height: 1.1;
        margin-bottom: 10px;
      }

      #exceptional-wheel-container .subtext {
        font-size: 16px !important;
        line-height: 1.4;
        max-width: 92%;
        margin: 0 auto 24px;
      }

      #exceptional-wheel-container .button {
        padding: 6px 20px 6px 6px;
        font-size: 16px;
        gap: 10px;
      }

      #exceptional-wheel-container .button-icon-wrapper {
        width: 36px;
        height: 36px;
      }
    }

    /* Small Mobile */
    @media (max-width: 380px) {
      #exceptional-wheel-container .content {
        max-width: 310px;
        padding: 0 16px;
      }

      #exceptional-wheel-container .heading {
        font-size: 27px !important;
      }

      #exceptional-wheel-container .subtext {
        font-size: 14px !important;
      }
    }

    /* =========================
       FAQ + Map Section
       ========================= */
    .mapfaq-section { min-height: auto; background: #eef5fc; display: flex; align-items: center; justify-content: center; padding: 48px 16px; font-family: "Inter", Arial, sans-serif; }
    .mapfaq-grid { max-width: 1300px; width: 100%; display: grid; grid-template-columns: 1fr; gap: 24px; }
    .location-card { background: #fff; border-radius: 32px; padding: 32px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 520px; border: 1px solid #f3f4f6; }
    .card-top { position: relative; z-index: 10; }
    .section-kicker-gold { margin: 0 0 12px; color: #0a5b9d; font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
    .location-card h2, .faq-card h2 { margin: 0 0 16px; font-family: "Playfair Display", Georgia, serif; font-size: 40px; color: #111827; line-height: 1.1; font-weight: 400; }
    .map-dot-bg { position: absolute; inset: 0; background-image: radial-gradient(#d1d5db 1.5px, transparent 1.5px); background-size: 24px 24px; opacity: 0.60; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 60%); mask-image: radial-gradient(ellipse at center, black 10%, transparent 60%); }
    .map-frame { position: relative; z-index: 10; flex-grow: 1; width: 100%; margin-top: 24px; margin-bottom: 32px; min-height: 250px; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); border: 1px solid #e5e7eb; }
    .map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
    .contact-card { background: #fff; border-radius: 16px; box-shadow: 0 15px 40px -10px rgba(0,0,0,0.15); padding: 24px; position: relative; z-index: 20; margin-top: auto; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; }
    .contact-address { display: flex; flex-direction: column; gap: 16px; }
    .contact-row { display: flex; align-items: flex-start; gap: 12px; }
    .contact-row.center { align-items: center; }
    .small-icon-bg { background: #f3f4f6; padding: 6px; border-radius: 50%; flex-shrink: 0; color: #6b7280; display: flex; align-items: center; justify-content: center; }
    .small-icon-bg .icon { width: 14px; height: 14px; stroke-width: 2.5; }
    .contact-name { font-size: 16px; font-weight: 600; color: #111827; line-height: 1.38; padding-top: 2px; }
    .contact-address-text { font-size: 16px; color: #374151; line-height: 1.6; }
    .contacts-side { display: flex; flex-direction: column; gap: 20px; width: 100%; }
    .contact-list { display: flex; flex-direction: column; gap: 12px; }
    .contact-value { font-size: 16px; color: #1f2937; font-weight: 500; }
    .directions-btn { background: #062a49; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 14px 28px; border-radius: 8px; width: 100%; transition: background 200ms ease; box-shadow: 0 4px 6px rgba(0,0,0,0.10); margin-top: 4px; }
    .directions-btn:hover { background: rgba(6,42,73,0.90); }
    .faq-card { background: #062a49; border-radius: 32px; padding: 32px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.10); position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; }
    .faq-card h2 { color: #fff; margin-bottom: 32px; }
    .faq-pattern { position: absolute; top: -64px; right: -64px; width: 450px; height: 450px; color: rgba(255,255,255,0.05); transform: rotate(12deg); pointer-events: none; }
    .faq-list { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 10; margin-top: 8px; }
    .faq-item { border: 1px solid rgba(255,255,255,0.20); border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; cursor: pointer; background: rgba(255,255,255,0.05); transition: background 200ms ease; }
    .faq-item:hover { background: rgba(255,255,255,0.05); }
    .faq-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
    .faq-question { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.95); }
    .faq-sign { width: 20px; height: 20px; color: rgba(255,255,255,0.80); flex-shrink: 0; margin-left: 16px; }
    .faq-answer { display: none; margin-top: 12px; font-size: 16px; color: rgba(255,255,255,0.72); line-height: 1.7; padding-right: 32px; }
    .faq-item.open .faq-answer { display: block; }

    @media (min-width: 640px) {
      .hero-arrow { width: 56px; height: 56px; }
      .hero-arrow-left { left: 2%; }
      .hero-arrow-right { right: 2%; }
      .hero-dots { gap: 16px; }
      .gallery-stage { height: 400px; }
      .gallery-card { width: 480px; height: 300px; }
    }
    @media (min-width: 768px) {
      .rh-nav-inner { padding-left: 48px; padding-right: 48px; }
      .rh-logo-name { font-size: 24px; }
      .rh-logo-sub { font-size: 12px; }
      .hero-arrow-left { left: 3%; }
      .hero-arrow-right { right: 3%; }
      .about-section { padding: 56px 36px; }
      .about-border { inset: -20px; }
      .about-title { font-size: 48px; }
      .about-text { font-size: 18px; }
      .amenities-title { font-size: 44px; }
      .amenities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .gallery-header h1 { font-size: 48px; }
      .gallery-stage { height: 500px; }
      .gallery-card { width: 700px; height: 420px; border-radius: 32px; }
      .gallery-btn { width: 64px; height: 64px; }
      .gallery-lightbox-title { font-size: 30px; }
      .mapfaq-section { padding: 56px 32px; }
      .location-card, .faq-card { padding: 48px; }
      .location-card h2, .faq-card h2 { font-size: 48px; }
      .contact-card { padding: 32px; flex-direction: row; align-items: center; }
      .contact-address { max-width: 280px; }
      .contacts-side { width: auto; align-items: flex-end; }
      .directions-btn { width: auto; }
    }
    @media (min-width: 1024px) {
      .rh-mobile-spacer, .rh-mobile-btn { display: none; }
      .rh-nav-list { display: flex; }
      .rh-nav-inner { padding-left: 64px; padding-right: 64px; }
      .about-section { padding: 64px 56px; }
      .about-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
      .about-image-wrap { aspect-ratio: auto; height: 600px; }
      .about-title { font-size: 56px; }
      .mapfaq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
      .location-card { min-height: 560px; }
    }
    @media (min-width: 1280px) {
      .rh-nav-inner { padding-left: 96px; padding-right: 96px; }
      .rh-nav-list { gap: 40px; }
      .rh-nav-list-left { padding-right: 64px; }
      .rh-nav-list-right { padding-left: 64px; }
    }
    @media (min-width: 1400px) {
      .amenities-desktop { display: block; }
      .amenities-mobile { display: none; }
    }
    @media (max-width: 767px) {
      .about-title br { display: none; }
      .about-image { border-radius: 7rem 1.25rem 7rem 1.25rem; }
      .about-border { border-radius: 8rem 2rem 8rem 2rem; }
      .gallery-header h1 { padding: 0 18px; }
    }


  
/* ============================================================
   SECTION 4 — ROOMS
   ============================================================ */
.rooms-section {
  position: relative;
  padding: 24px 0 40px;       /* Added a little extra padding for Mobile breathability */
  width: 100%;
  overflow: hidden;
  background: linear-gradient(160deg, #f2f8fd 0%, #ffffff 55%, #eaf3fb 100%);
  color: #062a49;
  font-family: "Inter", Arial, sans-serif;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .rooms-section {
    padding: 16px 0 48px;
  }
}

.rooms-section .rooms-bg-text-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  overflow: hidden;
  margin-bottom: 24px;        /* Diya thoda extra space mobile pe taki text chipke nahi */
  padding: 0;
  line-height: 1.1;
  z-index: 0;
}

@media (min-width: 768px) {
  .rooms-section .rooms-bg-text-wrap {
    margin-bottom: 60px;      /* Desktop margin slightly adjusted */
  }
}

.rooms-section .rooms-bg-text {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.5rem, 8vw, 6rem); /* TITLE FIX: Scalable banaya bina text clipping ke */
  line-height: 1.1;
  -webkit-text-stroke: 1px rgba(10, 91, 157, 0.32);
  white-space: normal;        /* TITLE FIX: Ab mobile pe yeh wrap ho jaega badle screen cut hone ke */
  text-align: center;
  letter-spacing: -0.02em;
  opacity: 0.95;
  user-select: none;
  display: block;
  margin: 0;
  padding: 0 1rem;            /* Di thodi padding kinaro par (Sides) */
}

@media (min-width: 768px) {
  .rooms-section .rooms-bg-text {
    font-size: 11vw;
    line-height: 0.85;
    white-space: nowrap;      /* Desktop par purana effect barkarar */
    padding: 0;
  }
}

.rooms-section .rooms-carousel-wrap {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .rooms-section .rooms-carousel-wrap {
    padding: 0 2rem;
  }
}

.rooms-section .rooms-viewport {
  overflow: hidden;
  width: 100%;
}

.rooms-section .rooms-track {
  display: flex;
  transition: transform 0.7s ease-in-out;
  will-change: transform;
}

.rooms-section .rooms-page {
  width: 100%;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* Gap slightly adjusted mobile pe */
  padding-bottom: 1rem;
}

@media (min-width: 768px) {
  .rooms-section .rooms-page {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .rooms-section .rooms-page {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
}

.rooms-section .room-card {
  position: relative;
  width: 100%;
  /* Mobile me Card vertically badha (taller) kar diya he, so zyada info clear aayegi bina overflow kare */
  aspect-ratio: 4 / 5;  
  overflow: hidden;
  background: #eef5fc;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(6, 42, 73, 0.18);
  border: 1px solid rgba(10, 91, 157, 0.12);
}

.rooms-section .room-card.is-offset {
  margin-top: 0;
}

@media (min-width: 768px) {
  .rooms-section .room-card.is-offset {
    margin-top: 2rem;
  }
  .rooms-section .room-card {
     /* Desktop or Tablet per design waapas square */
     aspect-ratio: 1 / 1; 
  }
}

.rooms-section .room-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
  display: block;
  max-width: 100%;
}

.rooms-section .room-card:hover img {
  transform: scale(1.05);
}

.rooms-section .room-card-overlay {
  position: absolute;
  inset: 0;
  /* Card lambi hai mobile pe to bottom se darkness slightly expand hogi readable text ke lie */
  background: linear-gradient(
    to top,
    rgba(3, 25, 46, 0.98) 0%, 
    rgba(6, 42, 73, 0.65) 55%,
    transparent 100%
  );
}

.rooms-section .room-card-content {
  position: absolute;
  inset: 0;
  padding: 1.5rem; /* Information visible banane mobile margin thodi badhaayi */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
}

@media (min-width: 768px) {
  .rooms-section .room-card-content {
    padding: 2rem;
  }
}

.rooms-section .room-title {
  font-family: "Playfair Display", Georgia, serif;
  /* INFO FIX: Title Badi screens k barabar ab Mobile pr aur saaf (visible) dikhega */
  font-size: 1.5rem;  
  margin: 0 0 0.5rem;         
}

@media (min-width: 768px) {
  .rooms-section .room-title {
    font-size: 1.875rem;
    margin: 0 0 1rem;
  }
}

.rooms-section .room-amenities-label {
  font-weight: 500;
  /* INFO FIX: Size `0.7rem` bohot chhota tha. Ab ise properly badha kr clear and bigger banaya */
  font-size: 0.9rem; 
  letter-spacing: 0.05em; /* Itni choti fonts pe spacing kamm hone chahiye clarity padne k liye*/
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(123, 179, 227, 0.75);
  padding-bottom: 0.35rem;
  margin-bottom: 1rem; /* Better breathing gap di */
  display: inline-block;
  font-family: "Inter", Arial, sans-serif;
}

@media (min-width: 768px) {
  .rooms-section .room-amenities-label {
    font-size: 0.9rem; /* Desk & tab ke lie comfortable scale */
  }
}

.rooms-section .room-amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* INFO FIX: Mobile me ise increase kiya taaki chota bindu aur chipka wa (illegible) data dikhai de (Up to approx 13-14px instead of 10px) */
  font-size: 0.85rem;  
  gap: 0.65rem 0.5rem; 
  color: rgba(255, 255, 255, 0.85);
  font-family: "Inter", Arial, sans-serif;
}

@media (min-width: 768px) {
  .rooms-section .room-amenities-grid {
    font-size: 0.85rem; /* Consistent saaf (legible) font sizes set hue */
    gap: 0.75rem 0.5rem;
  }
}

.rooms-section .room-amenity {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Gap bada di dot or information text ke bich for neat looks */
}

.rooms-section .room-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7bb3e3;
  flex-shrink: 0;
}

.rooms-section .rooms-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  position: relative;
  z-index: 20;
}

.rooms-section .rooms-nav-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid #0a5b9d;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, color 0.3s;
  color: #0a5b9d;
  font-size: 1.25rem;
  cursor: pointer;
  font-family: inherit;
}

.rooms-section .rooms-nav-btn:hover:not(:disabled) {
  background: #0a5b9d;
  color: #ffffff;
}

.rooms-section .rooms-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.rooms-section .rooms-nav-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}



/* ══════════════════════════════════════════
   Footer MARQUEE BANNER
══════════════════════════════════════════ */
.footer-marquee {
  background: #04223c;
  border-top: 1px solid rgba(123,179,227,0.25);
  overflow: hidden;
  padding: 16px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 70px;
  white-space: nowrap;
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #cfe4f7;
}
.marquee-icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1.5px solid rgba(123,179,227,0.45);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: rgba(123,179,227,0.75);
}
.marquee-icon svg {
  width: 20px;
  height: 20px;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
 
/* ══════════════════════════════════════════
   MAIN FOOTER BODY
══════════════════════════════════════════ */
.site-footer { background: linear-gradient(180deg, #073257 0%, #062a49 100%); }
 
.footer-body {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (min-width: 640px)  { .footer-body { padding: 0 44px; } }
@media (min-width: 1280px) { .footer-body { padding: 0 60px; } }
 
.footer-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(123,179,227,0.2);
}
@media (min-width: 900px) {
  .footer-main-grid {
    grid-template-columns: 1.1fr 1px 0.72fr 1px 0.72fr 1px 0.95fr;
  }
}
 
.col-divider {
  display: none;
  background: rgba(123,179,227,0.18);
  width: 1px;
}
@media (min-width: 900px) { .col-divider { display: block; } }
 
.fc { padding: 34px 0 30px; }
@media (min-width: 900px)  { .fc { padding: 42px 32px 38px; } }
@media (min-width: 1280px) { .fc { padding: 46px 40px 42px; } }
@media (min-width: 900px)  { .fc:first-child { padding-left: 0; } }
@media (min-width: 900px)  { .fc:last-child  { padding-right: 0; } }
 
.fc-heading {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 600;
  color: #cfe4f7;
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}
 
/* ── COL 1 Brand ── */
.brand-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.c-icon { width: 34px; height: 36px; position: relative; flex-shrink: 0; }
.c-left  { position: absolute; left:0; top:0; width:19px; height:100%; background: #cfe4f7; border-radius: 17px 0 0 17px; }
.c-inner { position: absolute; left:9px; top:6px; width:20px; height:24px; background: #062a49; border-radius: 15px 0 0 15px; }
.brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  font-weight: 700;
  color: #cfe4f7;
  line-height: 1.1;
}
.brand-sub {
  font-size: 10px;
  letter-spacing: 0.27em;
  color: #cfe4f7;
  font-weight: 600;
  margin-top: 4px;
  display: block;
  font-family: "Inter", Arial, sans-serif;
  opacity: 0.9;
}
.brand-desc {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(254,253,246,0.9);
  margin-bottom: 20px;
  font-family: "Inter", Arial, sans-serif;
}
.avail-label {
  font-family: "Inter", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #cfe4f7;
  margin-bottom: 6px;
  opacity: 0.95;
}
.avail-time {
  font-size: 13px;
  color: rgba(254,253,246,0.8);
  font-family: "Inter", Arial, sans-serif;
  margin-bottom: 24px;
}
.social-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(254,253,246,0.95);
  margin-bottom: 14px;
  font-family: "Inter", Arial, sans-serif;
}
.social-row { display: flex; gap: 10px; flex-wrap: wrap; }
.soc-btn {
  width: 38px; height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(123,179,227,0.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgba(123,179,227,0.85);
  background: rgba(10,58,99,0.35);
}
.soc-btn:hover {
  background: rgba(123,179,227,0.15);
  border-color: rgba(123,179,227,0.7);
  color: #cfe4f7;
  transform: translateY(-2px);
}
.soc-btn svg { display: block; }
 
/* ── COL 2 & 3 Links ── */
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 16px; padding: 0; margin: 0; }
.nav-list a {
  text-decoration: none;
  font-size: 16px;
  color: rgba(254,253,246,0.85);
  font-family: "Inter", Arial, sans-serif;
  transition: all 0.2s;
  display: inline-block;
  position: relative;
}
.nav-list a:hover { 
  color: #cfe4f7; 
  transform: translateX(4px);
}
 
/* ── COL 4 Contact ── */
.contact-list { list-style: none; display: flex; flex-direction: column; gap: 18px; padding: 0; margin: 0; }
.contact-item { display: flex; align-items: flex-start; gap: 12px; }
.contact-icon {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  color: rgba(123,179,227,0.85);
}
.contact-text {
  font-size: 15px;
  color: rgba(254,253,246,0.85);
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.65;
}
.contact-text a { color: rgba(254,253,246,0.85); text-decoration: none; transition: color 0.2s; }
.contact-text a:hover { color: #cfe4f7; }
.contact-text small { font-size: 12px; color: rgba(123,179,227,0.75); }
 
/* ══════════════════════════════════════════
   BOTTOM BAR (UPDATED DESIGN)
══════════════════════════════════════════ */
.bottom-bar {
  background: #03192e;
  border-top: 1px solid rgba(123,179,227,0.2);
  padding: 22px 28px;
}
@media (min-width: 640px)  { .bottom-bar { padding: 22px 44px; } }
@media (min-width: 1280px) { .bottom-bar { padding: 24px 60px; } }
 
.owner-disclaimer {
  max-width: 900px;
  margin: 0 auto 28px auto;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  font-family: "Inter", Arial, sans-serif;
  color: white;
  letter-spacing: 0.02em;
}

.bottom-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-content: center;
}

.bottom-center-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom-logo-icon {
  width: 120px;
  height: auto;
  opacity: 0.9;
}

.bottom-links { 
  display: flex; 
  align-items: center; 
  justify-content: center;
  gap: 14px; 
  flex-wrap: wrap;
}
.bottom-links a {
  font-size: 14px;
  color: #ffffff; /* Changed to Solid White */
  font-family: "Inter", Arial, sans-serif;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.bottom-links a:hover { 
  text-decoration: underline; 
  color: #cfe4f7;
}

.bottom-dot { 
  width: 4px; 
  height: 4px; 
  border-radius: 50%; 
  background: #ffffff; /* White to match the new text color */
  opacity: 0.8;
}

@media (max-width: 899px) {
  .fc { border-top: 1px solid rgba(123,179,227,0.12); }
  .fc:first-child { border-top: none; }
}

/* ============================================================
   COMPACT SECTION SPACING + BLUE PALETTE FINAL OVERRIDES
   ============================================================ */
@media (max-width: 767px) {
  .about-section,
  .amenities-section,
  .mapfaq-section,
  .rooms-section {
    padding-top: 40px;
    padding-bottom: 36px;
  }

  #attraction-explorer-section .aes-top-title {
    padding-top: 1.5rem;
  }

  #attraction-explorer-section .aes-cards-container {
    padding-top: 0.75rem;
    padding-bottom: 2rem;
  }

  .rooms-section .rooms-bg-text-wrap {
    margin-bottom: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .about-section,
  .amenities-section,
  .mapfaq-section,
  .rooms-section {
    padding-top: 52px;
    padding-bottom: 46px;
  }
}

@media (min-width: 1024px) {
  .about-section,
  .amenities-section,
  .mapfaq-section,
  .rooms-section {
    padding-top: 64px;
    padding-bottom: 56px;
  }
}





/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #0a5b9d; /* primary blue */
    color: #ffffff; /* icon colour */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 24px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
}

.back-to-top:hover {
    background-color: #08497e; /* darker on hover */
    transform: translateY(-5px); /* Lift effect on hover */
}

.back-to-top i {
    color: #ffffff; /* icon colour */
}

.back-to-top.visible {
    visibility: visible;
    opacity: 1;
}
/* =====================================================================
   MOBILE + TABLET RESPONSIVE OVERRIDES
   Desktop/PC styles (1024px and above) remain unchanged.
   ===================================================================== */

@media (max-width: 1023px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  a,
  span,
  li,
  div {
    overflow-wrap: anywhere;
  }

  /* Header / navigation */
  .rh-navbar {
    position: sticky;
    top: 0;
  }

  .rh-nav-inner {
    min-height: 76px;
    height: 76px;
    padding: 8px 20px;
    gap: 8px;
  }

  .rh-nav-list {
    display: none !important;
  }

  .rh-book-btn {
    display: none !important;
  }

  .rh-mobile-spacer,
  .rh-mobile-btn {
    display: flex !important;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
  }

  .rh-logo-wrap {
    min-width: 0;
    margin: 0 auto;
    flex: 1 1 auto;
  }

  .rh-logo-link {
    max-width: 100%;
    justify-content: center;
  }

  .rh-logo-img {
    width: auto;
    max-width: min(240px, 100%);
    max-height: 60px;
  }

  .rh-mobile-menu {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100svh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    gap: 4px;
  }

  .rh-mobile-menu a {
    display: flex;
    min-height: 46px;
    align-items: center;
    padding: 10px 4px;
    font-size: 13px;
    line-height: 1.4;
  }

  .rh-mobile-menu .rh-mobile-book {
    min-height: 48px;
    margin-top: 12px;
    border-radius: 9999px;
  }

  /* Hero */
  .hero-section {
    height: clamp(430px, calc(100svh - 76px), 760px);
    min-height: 430px;
    padding-bottom: 0;
    overflow: hidden;
  }

  .hero-svg-wrap,
  .hero-svg {
    overflow: hidden;
  }

  .hero-arrow {
    width: 42px;
    height: 42px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  }

  .hero-arrow-left {
    left: 14px;
  }

  .hero-arrow-right {
    right: 14px;
  }

  .hero-dots {
    bottom: 16px;
    gap: 10px;
    z-index: 25;
  }

  .hero-dot {
    width: 10px;
    height: 10px;
  }

  /* About */
  .about-section {
    padding-left: 28px;
    padding-right: 28px;
  }

  .about-container {
    gap: 42px;
  }

  .about-image-wrap {
    width: min(100%, 680px);
    margin: 0 auto;
  }

  .about-dots {
    top: -20px;
    left: -20px;
    width: 124px;
    height: 124px;
    background-size: 14px 14px;
  }

  .about-border {
    inset: -12px;
  }

  .about-content {
    width: min(100%, 680px);
    margin: 0 auto;
  }

  .about-subrow {
    margin-bottom: 18px;
  }

  .about-title {
    font-size: clamp(38px, 6vw, 50px);
    line-height: 1.12;
    margin-bottom: 18px;
  }

  .about-ornament {
    margin-bottom: 22px;
  }

  .about-text {
    max-width: 100%;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    margin-bottom: 30px;
    font-size: 17px;
    line-height: 1.75;
  }

  .about-btn {
    min-height: 48px;
  }

  /* Amenities */
  .amenities-section {
    padding-left: 0;
    padding-right: 0;
  }

  .amenities-container {
    padding-left: 28px;
    padding-right: 28px;
  }

  .amenities-header {
    margin-bottom: 26px;
  }

  .amenities-title {
    font-size: clamp(36px, 5.5vw, 46px);
  }

  .amenities-mobile-img {
    width: min(300px, 52vw);
    height: min(300px, 52vw);
    min-width: 240px;
    min-height: 240px;
    margin-bottom: 28px;
  }

  .amenities-grid {
    width: 100%;
    max-width: 850px;
    gap: 16px;
  }

  .amenity-card {
    min-width: 0;
    min-height: 104px;
    padding: 16px;
    gap: 16px;
  }

  .amenity-card-icon {
    width: 68px;
    height: 68px;
  }

  .amenity-card h3 {
    font-size: 18px;
    line-height: 1.3;
  }

  .amenity-card p {
    font-size: 14px;
    line-height: 1.55;
  }

  /* Attraction explorer */
  #attraction-explorer-section {
    overflow: hidden;
  }

  #attraction-explorer-section .aes-top-title {
    padding-left: 24px;
    padding-right: 24px;
  }

  #attraction-explorer-section .aes-top-title h1 {
    max-width: 720px;
  }

  #attraction-explorer-section .aes-cards-container {
    width: 100%;
    max-width: 760px;
    padding-left: 28px;
    padding-right: 28px;
    gap: 22px;
  }

  #attraction-explorer-section .aes-card {
    width: 100%;
    max-width: 560px;
    height: clamp(430px, 58svh, 560px);
  }

  #attraction-explorer-section .aes-card-content {
    padding: 24px;
  }

  #attraction-explorer-section .aes-card-text h2 {
    font-size: clamp(26px, 4vw, 34px);
    line-height: 1.18;
  }

  #attraction-explorer-section .aes-card-text p {
    font-size: 15px;
    line-height: 1.55;
  }

  #attraction-explorer-section .aes-mobile-spacer {
    width: 100%;
    max-width: 560px;
    height: clamp(420px, 52svh, 620px);
  }

  #attraction-explorer-section .aes-status-text {
    bottom: 18px;
    padding: 0 20px;
    text-align: center;
  }

  #attraction-explorer-section .aes-status-text div {
    line-height: 1.5;
  }

  #attraction-explorer-section .aes-return-btn {
    top: 16px;
    right: 16px;
    max-width: calc(100% - 32px);
  }

  #attraction-explorer-section .aes-inside-top-button {
    top: 18px;
    padding: 0 16px;
  }

  #attraction-explorer-section .aes-inside-top-button button {
    max-width: 100%;
    justify-content: center;
  }

  #attraction-explorer-section .aes-inside-scroll {
    padding-top: 76px;
  }

  #attraction-explorer-section .aes-inside-cards {
    padding: 16px 24px 42px;
    gap: 28px;
  }

  #attraction-explorer-section .aes-inside-card {
    width: min(78vw, 420px);
    max-width: 420px;
    height: clamp(280px, 48vw, 390px);
  }

  #attraction-explorer-section .aes-inside-title {
    width: min(78vw, 420px);
    max-width: 420px;
    margin-top: 16px;
    padding: 0 8px;
  }

  /* Photo gallery wheel */
  #exceptional-wheel-container {
    width: 100%;
    max-width: 100%;
  }

  #exceptional-wheel-container.is-stacked {
    min-height: 820px;
  }

  #exceptional-wheel-container.is-stacked .content {
    width: 100%;
    max-width: 620px;
  }

  #exceptional-wheel-container.is-stacked .wheel-mask {
    max-width: 50%;
  }

  #exceptional-wheel-container .heading,
  #exceptional-wheel-container .subtext {
    overflow-wrap: normal;
  }

  /* Map + FAQ */
  .mapfaq-section {
    padding-left: 28px;
    padding-right: 28px;
  }

  .mapfaq-grid {
    gap: 24px;
  }

  .location-card,
  .faq-card {
    width: 100%;
    min-width: 0;
    padding: 36px;
  }

  .location-card {
    min-height: 0;
  }

  .location-card h2,
  .faq-card h2 {
    font-size: clamp(40px, 5.5vw, 50px);
  }

  .map-frame {
    flex: none;
    min-height: 320px;
    height: 320px;
    margin-top: 22px;
    margin-bottom: 24px;
  }

  .contact-card {
    width: 100%;
    min-width: 0;
  }

  .contact-name,
  .contact-address-text,
  .contact-value,
  .contact-text,
  .contact-text a {
    overflow-wrap: anywhere;
  }

  .faq-row {
    align-items: flex-start;
  }

  .faq-question {
    min-width: 0;
    line-height: 1.5;
  }

  .faq-answer {
    padding-right: 0;
  }

  /* Rooms */
  .rooms-section .rooms-bg-text-wrap {
    margin-bottom: 34px;
  }

  .rooms-section .rooms-bg-text {
    font-size: clamp(72px, 13vw, 132px);
    line-height: 0.9;
  }

  .rooms-section .rooms-carousel-wrap {
    padding-left: 28px;
    padding-right: 28px;
  }

  .rooms-section .rooms-page {
    gap: 22px;
  }

  .rooms-section .room-card {
    min-width: 0;
  }

  .rooms-section .room-card-content {
    padding: 22px;
  }

  .rooms-section .rooms-nav {
    margin-top: 8px;
  }

  /* Footer */
  .footer-body {
    padding-left: 32px;
    padding-right: 32px;
  }

  .footer-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .fc {
    min-width: 0;
    padding: 34px 24px;
    border-top: 1px solid rgba(123, 179, 227, 0.12);
  }

  .fc:first-child,
  .fc:nth-child(3) {
    border-top: 0;
  }

  .nav-list a,
  .contact-text,
  .brand-desc {
    overflow-wrap: anywhere;
  }

  .bottom-bar {
    padding-left: 32px;
    padding-right: 32px;
  }

  .bottom-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }

  .bottom-links {
    justify-content: center;
  }

  .bottom-logo-icon {
    max-width: 112px;
  }

  /* Back to top */
  .back-to-top {
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    font-size: 21px;
  }
}

@media (max-width: 767px) {
  .rh-nav-inner {
    min-height: 72px;
    height: 72px;
    padding: 6px 14px;
  }

  .rh-mobile-spacer,
  .rh-mobile-btn {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .rh-logo-wrap {
    margin: 0 6px;
  }

  .rh-logo-img {
    max-width: min(190px, 100%);
    max-height: 54px;
  }

  .rh-mobile-menu {
    top: 72px;
    max-height: calc(100svh - 72px);
    padding: 16px;
  }

  .hero-section {
    height: clamp(360px, calc(100svh - 72px), 620px);
    min-height: 360px;
  }

  .hero-arrow {
    width: 36px;
    height: 36px;
  }

  .hero-arrow-left {
    left: 10px;
  }

  .hero-arrow-right {
    right: 10px;
  }

  .hero-dots {
    bottom: 12px;
    gap: 8px;
  }

  .hero-dot {
    width: 9px;
    height: 9px;
  }

  .about-section,
  .mapfaq-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .about-container {
    gap: 32px;
  }

  .about-image-wrap {
    width: calc(100% - 10px);
  }

  .about-dots {
    top: -14px;
    left: -14px;
    width: 92px;
    height: 92px;
    background-size: 12px 12px;
  }

  .about-border {
    inset: -8px;
  }

  .about-title {
    font-size: clamp(32px, 10vw, 42px);
    line-height: 1.13;
  }

  .about-subrow {
    gap: 12px;
    margin-bottom: 16px;
  }

  .about-subrow span {
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .about-line {
    width: 44px;
  }

  .about-text {
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.7;
  }

  .about-btn {
    width: 100%;
    padding: 15px 24px;
  }

  .amenities-container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .amenities-kicker {
    margin-bottom: 12px;
    letter-spacing: 0.18em;
  }

  .amenities-title {
    font-size: clamp(30px, 9vw, 38px);
  }

  .amenities-mobile-img {
    width: min(250px, 72vw);
    height: min(250px, 72vw);
    min-width: 0;
    min-height: 0;
    margin-bottom: 22px;
  }

  .amenities-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .amenity-card {
    min-height: 0;
    padding: 14px;
    gap: 14px;
    border-radius: 14px;
  }

  .amenity-card-icon {
    width: 58px;
    height: 58px;
  }

  .amenity-card-icon .icon {
    width: 26px;
    height: 26px;
  }

  .amenity-card h3 {
    font-size: 17px;
  }

  .amenity-card p {
    margin-top: 4px;
    font-size: 13px;
  }

  #attraction-explorer-section .aes-top-title {
    padding-left: 18px;
    padding-right: 18px;
  }

  #attraction-explorer-section .aes-top-title h1 {
    font-size: clamp(21px, 6.5vw, 30px);
    line-height: 1.25;
  }

  #attraction-explorer-section .aes-cards-container {
    padding-left: 16px;
    padding-right: 16px;
    gap: 18px;
  }

  #attraction-explorer-section .aes-card {
    max-width: 430px;
    height: clamp(390px, 64svh, 510px);
    border-radius: 22px;
  }

  #attraction-explorer-section .aes-card-content {
    padding: 20px;
  }

  #attraction-explorer-section .aes-avatar-wrap {
    top: 20px;
    left: 20px;
  }

  #attraction-explorer-section .aes-card-text h2 {
    font-size: clamp(24px, 8vw, 32px);
  }

  #attraction-explorer-section .aes-card-text p {
    font-size: 14px;
    line-height: 1.5;
  }

  #attraction-explorer-section .aes-mobile-spacer {
    max-width: 430px;
    height: clamp(360px, 50svh, 500px);
  }

  #attraction-explorer-section .aes-inside-cards {
    padding-left: 16px;
    padding-right: 16px;
  }

  #attraction-explorer-section .aes-inside-card {
    width: min(88vw, 380px);
    height: clamp(250px, 68vw, 340px);
    border-radius: 20px;
  }

  #attraction-explorer-section .aes-inside-title {
    width: min(88vw, 380px);
  }

  #exceptional-wheel-container.is-stacked {
    min-height: 720px;
  }

  #exceptional-wheel-container.is-stacked .content {
    padding-left: 16px;
    padding-right: 16px;
  }

  #exceptional-wheel-container .heading {
    font-size: clamp(28px, 9vw, 36px) !important;
  }

  #exceptional-wheel-container .subtext {
    font-size: 15px !important;
    max-width: 100%;
  }

  .mapfaq-grid {
    gap: 18px;
  }

  .location-card,
  .faq-card {
    padding: 24px 18px;
    border-radius: 22px;
  }

  .location-card h2,
  .faq-card h2 {
    font-size: clamp(32px, 10vw, 42px);
    line-height: 1.12;
  }

  .map-frame {
    height: 260px;
    min-height: 260px;
    margin-top: 18px;
    margin-bottom: 18px;
  }

  .contact-card {
    padding: 18px;
    gap: 20px;
    border-radius: 14px;
  }

  .contact-address,
  .contacts-side {
    width: 100%;
  }

  .contact-name,
  .contact-address-text,
  .contact-value {
    font-size: 15px;
  }

  .directions-btn {
    min-height: 46px;
    padding: 13px 18px;
  }

  .faq-card h2 {
    margin-bottom: 24px;
  }

  .faq-list {
    gap: 10px;
  }

  .faq-item {
    padding: 14px 15px;
  }

  .faq-question,
  .faq-answer {
    font-size: 15px;
  }

  .rooms-section .rooms-bg-text-wrap {
    margin-bottom: 24px;
  }

  .rooms-section .rooms-bg-text {
    font-size: clamp(58px, 18vw, 94px);
  }

  .rooms-section .rooms-carousel-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .rooms-section .rooms-page {
    gap: 16px;
  }

  .rooms-section .room-card {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }

  .rooms-section .room-card-content {
    padding: 16px;
  }

  .rooms-section .room-title {
    font-size: clamp(21px, 6vw, 28px);
  }

  .rooms-section .room-amenities-grid {
    gap: 5px 8px;
    font-size: 11px;
  }

  .rooms-section .rooms-nav {
    gap: 16px;
  }

  .rooms-section .rooms-nav-btn {
    width: 44px;
    height: 44px;
  }

  .footer-marquee {
    padding: 12px 0;
  }

  .marquee-item {
    gap: 16px;
    padding-right: 44px;
    font-size: clamp(27px, 9vw, 38px);
  }

  .marquee-icon {
    width: 42px;
    height: 42px;
  }

  .footer-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-main-grid {
    grid-template-columns: 1fr;
  }

  .fc {
    padding: 28px 0;
    border-top: 1px solid rgba(123, 179, 227, 0.12);
  }

  .fc:first-child {
    border-top: 0;
  }

  .fc:nth-child(3) {
    border-top: 1px solid rgba(123, 179, 227, 0.12);
  }

  .fc-heading {
    margin-bottom: 18px;
  }

  .brand-desc {
    font-size: 15px;
  }

  .nav-list {
    gap: 13px;
  }

  .nav-list a {
    font-size: 15px;
  }

  .bottom-bar {
    padding: 20px;
  }

  .owner-disclaimer {
    margin-bottom: 22px;
    font-size: 13px;
  }

  .bottom-copy,
  .bottom-links a {
    font-size: 13px;
  }

  .bottom-links {
    gap: 10px;
  }

  .bottom-logo-icon {
    max-width: 96px;
  }

  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    font-size: 19px;
  }
}

@media (max-width: 479px) {
  .rh-logo-img {
    max-width: min(155px, 100%);
    max-height: 48px;
  }

  .hero-section {
    min-height: 340px;
    height: clamp(340px, calc(100svh - 72px), 560px);
  }

  .hero-arrow {
    width: 34px;
    height: 34px;
  }

  .about-image {
    border-radius: 5rem 1rem 5rem 1rem;
  }

  .about-border {
    border-radius: 5.6rem 1.35rem 5.6rem 1.35rem;
  }

  .about-title {
    font-size: clamp(30px, 10.5vw, 38px);
  }

  .amenities-mobile-img {
    width: min(230px, 72vw);
    height: min(230px, 72vw);
  }

  .amenity-card {
    align-items: flex-start;
  }

  .amenity-card-icon {
    width: 52px;
    height: 52px;
  }

  #attraction-explorer-section .aes-card {
    min-height: 380px;
    height: 60svh;
    max-height: 470px;
  }

  #attraction-explorer-section .aes-card-content {
    padding: 18px;
  }

  #attraction-explorer-section .aes-card-text p {
    margin-bottom: 12px;
  }

  #exceptional-wheel-container.is-stacked {
    min-height: 680px;
  }

  .location-card,
  .faq-card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .map-frame {
    height: 230px;
    min-height: 230px;
  }

  .rooms-section .room-card {
    aspect-ratio: 1 / 1;
  }

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

  .bottom-links {
    flex-direction: column;
  }

  .bottom-dot {
    display: none;
  }
}

@media (max-width: 1023px) and (hover: none) {
  .amenity-card,
  #attraction-explorer-section .aes-card,
  #attraction-explorer-section .aes-inside-card-wrap,
  .rooms-section .room-card,
  #exceptional-wheel-container .card,
  .soc-btn,
  .back-to-top {
    -webkit-tap-highlight-color: transparent;
  }

  #attraction-explorer-section .aes-card:hover,
  #attraction-explorer-section .aes-inside-card-wrap:hover .aes-inside-card,
  .rooms-section .room-card:hover img,
  #exceptional-wheel-container .card:hover,
  .soc-btn:hover,
  .back-to-top:hover {
    transform: none;
  }

  #attraction-explorer-section .aes-card:hover .aes-card-bg,
  #attraction-explorer-section .aes-inside-card-wrap:hover .aes-inside-card img {
    transform: none;
  }
}
/* ============================================================
   ATTRACTION CARD TAP CUE + SAFE MAP FALLBACK
   ============================================================ */
#attraction-explorer-section .aes-tap-hand {
  position: absolute;
  top: 25%;
  right: 7%;
  z-index: 45;
  display: block;
  width: clamp(82px, 7vw, 116px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.96;
  transform-origin: 17% 7%;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.34));
  animation: aesTapHand 1.08s cubic-bezier(0.42, 0, 0.22, 1) infinite;
  transition: opacity 180ms ease, visibility 180ms ease;
}

#attraction-explorer-section .aes-tap-hand img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

#attraction-explorer-section.aes-is-inside .aes-tap-hand {
  opacity: 0;
  visibility: hidden;
  animation-play-state: paused;
}

@keyframes aesTapHand {
  0%, 30%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  48% {
    transform: translate3d(-8px, -10px, 0) scale(0.93);
  }
  62% {
    transform: translate3d(-3px, -4px, 0) scale(0.98);
  }
}

#attractions-interactive-map .aes-map-fallback {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.32) 1px, transparent 1px),
    linear-gradient(145deg, #bfdbfe, #dbeafe 48%, #bae6fd);
  background-size: 42px 42px, 42px 42px, auto;
}

#attractions-interactive-map .aes-map-fallback::before,
#attractions-interactive-map .aes-map-fallback::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 24px;
  border: 7px solid rgba(14, 116, 144, 0.2);
  border-left: 0;
  border-right: 0;
  border-radius: 50%;
  transform: rotate(-18deg);
}

#attractions-interactive-map .aes-map-fallback::after {
  width: 52%;
  transform: translateY(95px) rotate(24deg);
}

#attractions-interactive-map .aes-map-fallback-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: min(430px, calc(100% - 34px));
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  text-align: center;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(10px);
}

#attractions-interactive-map .aes-map-fallback-copy i {
  color: #38bdf8;
  font-size: 1.8rem;
}

#attractions-interactive-map .aes-map-fallback-copy strong {
  color: #ffffff;
  font-size: 1.05rem;
}

#attractions-interactive-map .aes-map-fallback-copy span {
  color: #cbd5e1;
  font-size: 0.82rem;
  line-height: 1.55;
}

@media (max-width: 639px) {
  #attraction-explorer-section .aes-tap-hand {
    top: 22%;
    right: 4%;
    width: 78px;
  }
}


/* =====================================================================
   FINAL RESPONSIVE STABILIZATION
   Keeps the desktop visual design intact while making phones and tablets
   fully usable without horizontal clipping or hidden content.
   ===================================================================== */

/* Required by the hamburger icon toggle in script.js. */
.is-hidden {
  display: none !important;
}

/* Prevent sticky-header anchor targets from being hidden underneath it. */
#about,
#amenities,
#rooms,
#attraction-explorer-section,
#gallery,
#contact {
  scroll-margin-top: 92px;
}

/* ---------------------------------------------------------------------
   HEADER: tablet/mobile navigation through 1199px
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .rh-nav-inner {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    width: 100%;
    min-height: 76px;
    height: 76px;
    padding: 8px 18px;
    gap: 8px;
  }

  .rh-desktop-nav,
  .rh-nav-list,
  .rh-book-btn {
    display: none !important;
  }

  .rh-mobile-spacer {
    display: block !important;
    grid-column: 1;
    width: 44px;
    height: 44px;
  }

  .rh-logo-wrap {
    grid-column: 2;
    min-width: 0;
    width: 100%;
    margin: 0;
    justify-self: center;
  }

  .rh-logo-link {
    width: 100%;
    max-width: 260px;
  }

  .rh-logo-img {
    width: auto;
    max-width: 100%;
    max-height: 60px;
    margin: 0 auto;
  }

  .rh-mobile-btn {
    position: relative;
    z-index: 1002;
    display: flex !important;
    grid-column: 3;
    width: 44px;
    height: 44px;
    padding: 8px;
    color: #0a5b9d;
    justify-self: end;
  }

  .rh-mobile-btn svg {
    display: block;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    overflow: visible;
  }

  .rh-mobile-menu {
    position: fixed;
    top: 76px;
    right: 0;
    left: 0;
    width: 100%;
    max-height: calc(100dvh - 76px);
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.menu-open {
    overflow: hidden;
  }
}

@media (max-width: 767px) {
  .rh-nav-inner {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    min-height: 72px;
    height: 72px;
    padding: 6px 14px;
  }

  .rh-mobile-spacer,
  .rh-mobile-btn {
    width: 42px;
    height: 42px;
  }

  .rh-logo-link {
    max-width: 190px;
  }

  .rh-logo-img {
    max-height: 54px;
  }

  .rh-mobile-menu {
    top: 72px;
    max-height: calc(100dvh - 72px);
  }
}

@media (max-width: 479px) {
  .rh-logo-link {
    max-width: 155px;
  }
}

/* ---------------------------------------------------------------------
   HEADER: precise desktop logo centering
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
  #siteHeader .rh-nav-inner {
    position: relative;
    display: block;
    height: 100px;
    padding: 10px 24px;
  }

  #siteHeader .rh-mobile-spacer,
  #siteHeader .rh-mobile-btn,
  #siteHeader .rh-mobile-menu {
    display: none !important;
  }

  #siteHeader .rh-logo-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  #siteHeader .rh-desktop-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
  }

  #siteHeader .rh-desktop-nav-left {
    right: calc(50% + 126px);
    left: 24px;
    justify-content: flex-end;
  }

  #siteHeader .rh-desktop-nav-right {
    right: 170px;
    left: calc(50% + 126px);
    justify-content: flex-start;
  }

  #siteHeader .rh-nav-list {
    display: flex;
    width: 100%;
    gap: clamp(14px, 1.45vw, 24px);
  }

  #siteHeader .rh-nav-list-left {
    justify-content: flex-end;
    padding-right: 0;
  }

  #siteHeader .rh-nav-list-right {
    justify-content: flex-start;
    padding-left: 0;
  }

  #siteHeader .rh-book-btn {
    position: absolute;
    top: 50%;
    right: 24px;
    display: flex;
    transform: translateY(-50%);
  }

  #siteHeader .rh-book-btn:hover {
    transform: translateY(calc(-50% - 1px));
  }
}

@media (min-width: 1200px) and (max-width: 1350px) {
  #siteHeader .rh-nav-list {
    gap: 12px;
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  #siteHeader .rh-desktop-nav-right {
    right: 158px;
  }

  #siteHeader .rh-book-btn {
    right: 18px;
    padding-right: 18px;
    padding-left: 18px;
  }
}

/* ---------------------------------------------------------------------
   AMENITIES: fluid image and complete card grid
   --------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .amenities-container,
  .amenities-mobile,
  .amenities-grid {
    width: 100%;
    min-width: 0;
  }

  .amenities-mobile {
    overflow: visible;
  }

  .amenities-mobile-img {
    flex: 0 0 auto;
    max-width: 72vw;
    max-height: 72vw;
  }

  .amenity-card {
    min-width: 0;
    overflow: hidden;
    text-align: left;
  }

  .amenity-card > div:last-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .amenity-card h3,
  .amenity-card p {
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (min-width: 640px) and (max-width: 1279px) {
  .amenities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .amenities-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .amenities-mobile-img {
    width: min(230px, 68vw);
    height: min(230px, 68vw);
  }
}

/* ---------------------------------------------------------------------
   ROOMS: show every card on phones/tablets instead of hiding pages
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .rooms-section .rooms-viewport {
    overflow: visible;
  }

  .rooms-section .rooms-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    transform: none !important;
    transition: none;
  }

  .rooms-section .rooms-page {
    display: contents;
  }

  .rooms-section .room-card,
  .rooms-section .room-card.is-offset {
    min-width: 0;
    margin-top: 0;
  }

  .rooms-section .rooms-nav {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .rooms-section .rooms-track {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* ---------------------------------------------------------------------
   ATTRACTION EXPLORER: compact, fully visible phone/tablet layout
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
  #attraction-explorer-section {
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  #attraction-explorer-section .aes-top-title {
    padding: 32px 22px 8px;
  }

  #attraction-explorer-section .aes-top-title h1 {
    max-width: 760px;
    overflow-wrap: normal;
    word-break: normal;
  }

  #attraction-explorer-section .aes-cards-container {
    display: flex;
    width: 100%;
    max-width: 760px;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 18px 24px 42px;
  }

  #attraction-explorer-section .aes-card {
    width: min(100%, 560px);
    max-width: 560px;
    height: clamp(410px, 56dvh, 540px);
    min-height: 410px;
    max-height: 540px;
    flex: 0 0 auto;
  }

  #attraction-explorer-section .aes-mobile-spacer {
    display: flex;
    width: min(100%, 560px);
    height: clamp(190px, 24dvh, 270px);
    min-height: 190px;
    max-height: 270px;
  }

  #attraction-explorer-section .aes-cards-container > .aes-person-wrap[data-placement="mobile-cards"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  #attraction-explorer-section .aes-status-text {
    display: none;
  }

  #attraction-explorer-section .aes-card-text,
  #attraction-explorer-section .aes-card-text h2,
  #attraction-explorer-section .aes-card-text p {
    overflow-wrap: normal;
    word-break: normal;
  }

  #attraction-explorer-section .aes-return-btn {
    position: fixed;
    top: 92px;
    right: 18px;
    z-index: 1001;
  }
}

@media (max-width: 767px) {
  #attraction-explorer-section .aes-top-title {
    padding: 26px 16px 4px;
  }

  #attraction-explorer-section .aes-cards-container {
    padding: 14px 16px 34px;
  }

  #attraction-explorer-section .aes-card {
    width: 100%;
    height: clamp(380px, 60dvh, 470px);
    min-height: 380px;
    max-height: 470px;
  }

  #attraction-explorer-section .aes-mobile-spacer {
    width: 100%;
    height: clamp(170px, 22dvh, 230px);
    min-height: 170px;
    max-height: 230px;
  }

  #attraction-explorer-section .aes-return-btn {
    top: 82px;
    right: 12px;
  }
}

/* Responsive map cards and controls inside the attraction modal. */
@media (max-width: 820px) {
  #attractions-interactive-map .aes-map-shell {
    width: calc(100% - 16px);
  }

  #attractions-interactive-map .aes-map-container,
  #attractions-interactive-map .aes-attraction-box,
  #attractions-interactive-map .aes-popup-card {
    min-width: 0;
    max-width: 100%;
  }

  #attractions-interactive-map .aes-map-area,
  #attractions-interactive-map #aes-map {
    width: 100%;
  }
}

/* Landscape-tablet refinements. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .rooms-section .rooms-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #attraction-explorer-section .aes-cards-container {
    max-width: 1100px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(48px, 7vw, 84px);
    padding: 26px 32px 54px;
  }

  #attraction-explorer-section .aes-card {
    width: min(430px, calc((100% - 64px) / 2));
    height: clamp(430px, 62vh, 520px);
    min-height: 430px;
    max-height: 520px;
  }

  #attraction-explorer-section .aes-mobile-spacer {
    display: none;
  }
}