:root {
  --accent: #d4af37;
  --accent-soft: #f9de8c;
  --muted: #bfa56b;
  --text: #111827;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.76);
  --surface-strong: rgba(255, 255, 255, 0.95);
  --bg: #f6f4ef;
  --bg-alt: #f8fafc;
  --border: rgba(212, 175, 55, 0.22);
  --shadow: 0 30px 80px rgba(15, 23, 42, 0.06);
  --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.04);
}

html {
  scroll-behavior: smooth;
  font-size: 16px; 
  background: radial-gradient(circle at top, rgba(255, 241, 207, 0.45), rgba(248, 250, 252, 1) 45%);
} 
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  text-rendering: optimizeLegibility; 
  background: radial-gradient(circle at top left, rgba(255, 244, 211, 0.35), transparent 25%), linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); 
  color: var(--text); 
  margin: 0; 
  font-size: 1.05rem; 
  line-height: 1.6; 
  min-height: 100vh; 
  width: 100%; 
  overflow-x: hidden;
}

.lux-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

header {
  backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px);
  background: black; 
  border-bottom: 1px solid rgba(212, 175, 55, 0.18)  ; 
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03)  ;
}
header.site-header {
  padding: 0.75rem 0;
}
header .nav-link, header a, header button {
  color: #334155 ; 
  font-size: 0.88rem; 
  transition: color .22s ease, transform .22s ease;
}
header a:hover, header button:hover {
  color: var(--accent) ; 
  transform: translateY(-1px);
}

.crystal-btn {
  background: linear-gradient(180deg, #f6d37d, #d4af37); 
  color: #0b0b0b  ; 
  padding: .7rem 1.2rem; 
  border-radius: 999px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 10px 40px rgba(212, 175, 55, 0.22); 
  transition: transform .2s ease, box-shadow .2s ease; 
  text-decoration: none;
  font-weight: 600;
}
.crystal-btn:hover {
  transform: translateY(-3px); 
  box-shadow: 0 18px 50px rgba(212, 175, 55, 0.35);
}
.book-now-btn, .book-now-btn:hover {
  border-radius: 999px;
}

.book-now-btn {
  background: linear-gradient(180deg, #f6d37d, #d4af37); 
  color: #0b0b0b  ; 
  padding: 0.6rem 1.2rem; 
  border-radius: 999px; 
  font-weight: 600; 
  box-shadow: 0 10px 40px rgba(212, 175, 55, 0.22); 
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}
.book-now-btn:hover {
  transform: translateY(-2px); 
  box-shadow: 0 20px 70px rgba(212, 175, 55, 0.35);
}

.hero-section {
  position: relative; 
  overflow: hidden; 
  min-height: 75vh; 
  background: radial-gradient(circle at top left, rgba(255, 238, 190, 0.35), transparent 40%), radial-gradient(circle at bottom right, rgba(188, 147, 71, 0.08), transparent 30%), #fff9f2;
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 50vh;
  }
  .hero-section .hero-image-card {
    min-height: 200px;
  }
  .hero-image-card img {
    min-height: 200px !important;
  }
}

@media (max-width: 480px) {
  .hero-section {
    min-height: 40vh;
  }
  .hero-section .hero-image-card {
    min-height: 150px;
  }
  .hero-image-card img {
    min-height: 150px !important;
  }
}
.hero-section::before {
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4), transparent 60%); 
  pointer-events: none;
}
.hero-image-card {
  position: relative; 
  overflow: hidden; 
  border-radius: 32px; 
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 40px 90px rgba(15, 23, 42, 0.08);
}
.hero-image-card img {
  min-height: 320px; 
  transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1), filter .7s ease;
}
.hero-image-card:hover img {
  transform: scale(1.04);
}
.hero-image-overlay {
  position: absolute; 
  inset: 0; 
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(15, 23, 42, 0.04) 100%); 
  pointer-events: none;
}
.hero-section .center-mobile h1 {
  letter-spacing: -0.03em; 
  line-height: 1.05;
}
.hero-section .book-now-btn {
  padding: 0.85rem 1.4rem;
}
.hero-section .book-now-btn:hover {
  box-shadow: 0 26px 80px rgba(212, 175, 55, 0.3);
}

h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', Georgia, serif; 
  letter-spacing: 0.01em;
  color: #111827;
  text-shadow: 0 10px 30px rgba(15, 23, 42, 0.01);
}
p, li, label, input, button, select, textarea, a {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
section p, section li {
  color: #475569;
}

section .\rounded-\[32px\], section .\rounded-\[40px\], .section-card, .table-card {
  background: rgba(255, 255, 255, 0.92); 
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: var(--shadow-soft);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s ease, border-color .3s ease;
}

.section-card:hover, section .\rounded-\[32px\]\:hover, section .\rounded-\[40px\]\:hover, .table-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 75px rgba(15, 23, 42, 0.08);
  border-color: rgba(212, 175, 55, 0.35);
}
#offers .grid,
#services .grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

#offers .grid::-webkit-scrollbar,
#services .grid::-webkit-scrollbar {
  height: 6px;
}

#offers .grid::-webkit-scrollbar-track,
#services .grid::-webkit-scrollbar-track {
  background: rgba(212, 175, 55, 0.1);
  border-radius: 10px;
}

#offers .grid::-webkit-scrollbar-thumb,
#services .grid::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 10px;
}

#offers .grid::-webkit-scrollbar-thumb:hover,
#services .grid::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.6);
}

#offers .group,
#services .group {
  flex: 0 0 auto;
  width: 280px;
  height: 280px;
  aspect-ratio: 1 / 1 !important;
}

@media (max-width: 768px) {
  #offers .group,
  #services .group {
    width: 240px;
    height: 240px;
  }
}

@media (max-width: 480px) {
  #offers .group,
  #services .group {
    width: 180px;
    height: 180px;
  }
}

.table-grid-unit {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.table-grid-unit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.filter-tab-active {
  background: linear-gradient(180deg, #f6d37d, #d4af37)  ;
  color: #0b0b0b  ;
  border-color: #d4af37  ;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.18);
}

.custom-scroll::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #d4af37;
  border-radius: 4px;
}

.partner-logo {
  filter: grayscale(100%) opacity(.75); 
  transition: transform .3s ease, filter .3s ease, opacity .3s ease;
}
.partner-logo:hover {
  transform: scale(1.06); 
  filter: grayscale(0); 
  opacity: 1;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: var(--shadow-soft);
}
.gallery-card img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-card:hover img {
  transform: scale(1.05);
}

input, select, textarea {
  background-color: #ffffff  ;
  border: 1px solid rgba(148, 163, 184, 0.25)  ;
  color: #111827  ;
  border-radius: 12px;
  padding: 0.85rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; 
  border-color: #d4af37  ;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.15)  ;
  transform: translateY(-1px);
}

.nav-center {
  display: flex; 
  align-items: center;
}
.nav-link {
  color: #334155; 
  text-decoration: none; 
  font-size: 0.9rem; 
  letter-spacing: 0.35em; 
  text-transform: uppercase; 
  padding: 0.5rem; 
  transition: color .22s ease, transform .22s ease;
}
.nav-link:hover {
  color: var(--accent); 
  transform: translateY(-2px);
}
.nav-logo-img {
  height: 48px;
}

.nav-dropdown {
  min-width: 12rem; 
  backdrop-filter: blur(18px); 
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(212, 175, 55, 0.15);
  z-index: 99999;
  position: absolute;
  transform: translateZ(0);
  overflow: visible !important;
}

.social-icon {
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 44px; 
  height: 44px; 
  border-radius: 9999px; 
  color: inherit;
  transition: background 0.25s, color 0.25s;
}
.social-icon svg {
  opacity: 0.95;
}

section {
  overflow-wrap: break-word; 
  word-break: break-word;
}
main, .max-w-6xl, .max-w-7xl {
  width: 100%;
}
.text-main\/85 { color: rgba(17, 24, 39, 0.85); }
.text-main\/70 { color: rgba(71, 85, 105, 0.7); }
.bg-amber-100 { background: rgba(249, 222, 140, 0.14); }
.text-amber-600 { color: #d97706; }

.reveal {
  opacity: 0; 
  transform: translateY(28px); 
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.visible {
  opacity: 1; 
  transform: translateY(0);
}
.reveal[data-reveal-delay="100"] { transition-delay: .1s; }
.reveal[data-reveal-delay="150"] { transition-delay: .15s; }
.reveal[data-reveal-delay="200"] { transition-delay: .2s; }
.reveal[data-reveal-delay="250"] { transition-delay: .25s; }
.reveal[data-reveal-delay="300"] { transition-delay: .3s; }

@media (max-width: 767px) {
  .hero-section { min-height: calc(100vh - 120px); padding: 2rem 1rem; }
  header .header-inner { justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
  header .header-inner nav { width: 100%; justify-content: center; }
  header .header-inner nav a { padding-left: 0.75rem; padding-right: 0.75rem; }
}
@media (min-width: 768px) {
  .lux-heading.text-5xl { font-size: 3.5rem; }
}