:root{
  /* Teal and soft neutral palette (user-provided) */
  --bg-900: #f2f2f2;
  --brand-main: #2b6777;
  --brand-soft: #c8d8e4;
  --brand-white: #ffffff;
  --brand-gray: #f2f2f2;
  --brand-mint: #52ab98;
  --ink: #153641;
  --muted-ink: #4f6972;
  --panel: rgba(255, 255, 255, 0.82);
  --brand-gradient: linear-gradient(45deg, var(--brand-main), var(--brand-mint));
  --accent: var(--brand-mint);
}

/* Page base */
body{
  background-color: var(--bg-900);
  color: var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* Brand gradient used for primary CTAs */
.brand-gradient{
  background: var(--brand-gradient) !important;
  color: #fff !important;
}

/* Align legacy gold-gradient class to the new teal palette */
.gold-gradient{
  background: var(--brand-gradient) !important;
  color: #fff !important;
}

/* Soft accent for icons and small highlights */
.brand-accent{ color: var(--brand-main) !important; }

/* Subtle nav tint to match brand */
/* Subtle nav tint to match brand */
nav{
  background: rgba(200, 216, 228, 0.92) !important;
  color: var(--ink);
}

nav h1,
nav > div > a:first-child{
  color: var(--brand-main) !important;
}

nav a{
  color: var(--ink) !important;
  line-height: 1.2;
}

nav .hidden a{
  position: relative;
  font-weight: 700;
}

nav .hidden a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  border-radius: 999px;
  background: var(--brand-mint);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

nav .hidden a:hover,
nav #mobile-menu a:hover{
  color: var(--brand-main) !important;
}

nav .hidden a:hover::after{
  transform: scaleX(1);
}

nav .brand-gradient{
  color: #fff !important;
}

/* Button focus + hover polish */
.brand-gradient:hover{ transform: translateY(-2px) scale(1.01); transition: all .25s ease; }

/* Glass cards: add faint colored edge */
.glass{
  background: linear-gradient(180deg, var(--panel), rgba(200, 216, 228, 0.56)) !important;
  border: 1px solid rgba(43, 103, 119, 0.16) !important;
  box-shadow: 0 12px 36px rgba(43, 103, 119, 0.12);
}

/* Small helpers */
.accent-bg-teal{ background: linear-gradient(180deg, rgba(82, 171, 152, 0.1), transparent); }

/* Map legacy Tailwind color classes onto the teal palette. */
.text-yellow-400,
.hover\:text-yellow-400:hover{ color: var(--brand-mint) !important; }

.bg-yellow-400,
.hover\:bg-yellow-400:hover{ background-color: var(--brand-mint) !important; }

.bg-yellow-500{ background-color: var(--brand-main) !important; }

.from-yellow-500{ --tw-gradient-from: var(--brand-main) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(43, 103, 119, 0) var(--tw-gradient-to-position) !important; }

.to-yellow-500{ --tw-gradient-to: var(--brand-mint) var(--tw-gradient-to-position) !important; }

.accent-yellow-400{ accent-color: var(--brand-mint) !important; }

.bg-black,
.bg-\[\#f2f2f2\]{ background-color: var(--brand-gray) !important; }

.text-white{ color: var(--ink) !important; }
.text-gray-300,
.text-gray-400,
.text-gray-500{ color: var(--muted-ink) !important; }

.border-white\/10,
.border-white\/15,
.border-white\/20{ border-color: rgba(43, 103, 119, 0.18) !important; }

.bg-white\/5,
.bg-black\/30,
.bg-black\/70,
.bg-black\/80,
.bg-black\/90{ background-color: rgba(200, 216, 228, 0.48) !important; }

.placeholder\:text-gray-500::placeholder{ color: rgba(79, 105, 114, 0.72) !important; }

.hero-bg,
.booking-bg,
[class*="bg-[url"]{
  color: #fff;
}

.hero-bg .text-white,
.booking-bg .text-white,
[class*="bg-[url"] .text-white{ color: #fff !important; }

.hero-bg .text-gray-300,
.hero-bg .text-gray-400,
.booking-bg .text-gray-300,
.booking-bg .text-gray-400,
[class*="bg-[url"] .text-gray-300,
[class*="bg-[url"] .text-gray-400{ color: rgba(255, 255, 255, 0.82) !important; }

/* Hero image slider */
.hero-slider{ position: relative; }
.hero-slider .hero-track{ position: relative; overflow: hidden; height: 500px; border-radius: 30px; }
.hero-slide{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease-in-out; }
.hero-slide.active{ opacity: 1; }
.slider-prev, .slider-next{ position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; border-radius: 9999px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slider-prev{ left: 10px; }
.slider-next{ right: 10px; }
.slider-dots{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; display: flex; gap: 8px; }
.slider-dot{ width: 10px; height: 10px; border-radius: 9999px; background: rgba(255,255,255,0.28); cursor: pointer; }
.slider-dot.active{ background: #fff; }

@media (max-width: 767px){
  .hero-slider .hero-track{ height: 320px; }
  .slider-prev, .slider-next{ width: 36px; height: 36px; }
}