:root {
  --green: #102c24;
  --green2: #173b2f;
  --gold: #d4af37;
  --cream: #f8f4eb;
  --white: #fff;
  --text: #1d2420;
  --muted: #687069;
  --shadow: 0 24px 70px rgba(16, 44, 36, .16)
}

body.dark {
  --cream: #081713;
  --white: #10241e;
  --text: #edf3ef;
  --muted: #b9c5bd
}

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

html {
  scroll-behavior: smooth
}

body {
  font-family: Poppins, Arial, sans-serif;
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none;
  color: inherit
}

.preloader {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, #234c3f, #081713 70%);
  color: #fff;
  z-index: 99999;
  display: grid;
  place-items: center;
  text-align: center;
  transition: .65s
}

.preloader.hide {
  opacity: 0;
  visibility: hidden
}

.preloader-logo {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f7df8d, #b99024);
  color: #102c24;
  font: 800 34px 'Playfair Display';
  box-shadow: 0 0 45px rgba(212, 175, 55, .42);
  animation: pulseLogo 1.4s infinite alternate
}

.preloader h2 {
  font-family: 'Playfair Display';
  font-size: 42px;
  margin-top: -70px
}

.preloader p {
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: -120px
}

.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: .35s
}

.site-header.scrolled {
  background: rgba(16, 44, 36, .93);
  backdrop-filter: blur(16px);
  box-shadow: 0 15px 45px rgba(0, 0, 0, .18)
}

.navbar {
  height: 84px;
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff
}

.logo {
  display: flex;
  gap: 12px;
  align-items: center
}

.logo span {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #13121200, #0c010100);
  color: #102c24;
  font: 800 21px 'Playfair Display'
}

.logo b {
  display: block;
  font-size: 22px;
  color: rgba(255, 208, 0, 0.815);
}

.logo small {
  display: block;
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 3px;
  text-transform: uppercase
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none
}

.nav-links a {
  font-weight: 700;
  font-size: 14px;
  position: relative
}

.nav-links a:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: .3s
}

.nav-links a:hover:after {
  width: 100%
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px
}

.menu-toggle,
.theme-toggle {
  border: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer
}

.menu-toggle {
  display: none;
  font-size: 24px
}

.nav-btn,
.primary-btn,
.ghost-btn,
.whatsapp-btn,
.submit-btn,
.outline-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 900;
  border: 0;
  cursor: pointer;
  transition: .3s;
  position: relative;
  overflow: hidden
}

.nav-btn,
.primary-btn,
.submit-btn {
  background: var(--gold);
  color: #102c24;
  box-shadow: 0 14px 38px rgba(212, 175, 55, .25)
}

.ghost-btn {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .48);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px)
}

.whatsapp-btn {
  background: #25D366;
  color: #fff
}

.outline-btn {
  background: transparent;
  border: 1px solid var(--green2);
  color: var(--green2)
}

body.dark .outline-btn {
  color: #fff;
  border-color: #fff
}

.nav-btn:hover,
.primary-btn:hover,
.ghost-btn:hover,
.submit-btn:hover {
  transform: translateY(-3px)
}

.nav-btn:after,
.primary-btn:after,
.submit-btn:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-120%);
  animation: shine 3.2s infinite
}

.hero {
  height: 100vh;
  position: relative;
  background: #102c24;
  color: #fff;
  overflow: hidden
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.25s ease, transform 6s ease
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1)
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 20, 16, .92), rgba(6, 20, 16, .38), rgba(6, 20, 16, .7));
  z-index: 2
}

.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 7%;
  max-width: 900px;
  animation: fadeUp 1s ease
}

.eyebrow,
.section-title span {
  color: var(--gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 900
}

.hero h1 {
  font: 800 104px/.92 'Playfair Display';
  margin: 18px 0;
  text-shadow: 0 24px 80px rgba(0, 0, 0, .35);
  color: rgba(255, 175, 1, 0.76);
}

.hero p {
  font-size: 19px;
  line-height: 1.8;
  color: #f6efe3;
  max-width: 700px
}

.hero-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin: 32px 0
}

.hero-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.hero-badges span {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 10px 15px;
  border-radius: 999px
}

section {
  padding: 95px 7%
}

.section-title {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 42px
}

.section-title h2,
.intro h2,
.booking-copy h2,
.page-hero h1,
.room-hero h1,
.contact-card h2 {
  font: 800 52px/1.1 'Playfair Display';
  color: var(--green2);
  margin-top: 12px
}

body.dark .section-title h2,
body.dark .intro h2,
body.dark .booking-copy h2,
body.dark .contact-card h2 {
  color: #fff
}

.section-title p {
  color: var(--muted);
  line-height: 1.8;
  margin-top: 12px
}

.weather-card {
  width: 88%;
  margin: -55px auto 0;
  position: relative;
  z-index: 5;
  background: var(--white);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 28px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px
}

.weather-card h2 {
  font: 800 34px/1.15 'Playfair Display';
  color: var(--green2)
}

body.dark .weather-card h2 {
  color: #fff
}

.weather-box {
  min-width: 230px;
  background: linear-gradient(135deg, #173b2f, #2e5d4d);
  color: #fff;
  border-radius: 22px;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 14px
}

.weather-box span {
  font-size: 38px
}

.weather-box b {
  font-size: 30px
}

.weather-box small {
  color: #dbe8e0
}

.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center
}

.intro-text p {
  color: var(--muted);
  line-height: 1.9;
  margin: 18px 0
}

.text-link {
  color: #b99024;
  font-weight: 900
}

.intro-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: end
}

.intro-images img {
  height: 420px;
  width: 100%;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: var(--shadow)
}

.intro-images img:nth-child(2) {
  height: 330px;
  margin-bottom: -35px
}

.why {
  background: radial-gradient(circle at top left, #315f50, #102c24);
  color: #fff
}

.why .section-title h2 {
  color: #fff
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.why-grid article {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  padding: 28px;
  transition: .35s
}

.why-grid article:hover {
  background: var(--gold);
  color: #102c24;
  transform: translateY(-8px)
}

.why-grid span {
  font-size: 34px
}

.why-grid h3 {
  margin: 14px 0
}

.why-grid p {
  line-height: 1.75
}

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px
}

.rooms-grid.large {
  grid-template-columns: repeat(5, 1fr)
}

.room-card {
  background: var(--white);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: .45s;
  position: relative;
  border: 1px solid rgba(212, 175, 55, .16)
}

.room-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 80px rgba(16, 44, 36, .22)
}

.room-card img {
  height: 285px;
  width: 100%;
  object-fit: cover;
  transition: .6s
}

.room-card:hover img {
  transform: scale(1.06);
  filter: saturate(1.14)
}

.room-card div {
  padding: 25px
}

.room-card h3 {
  font-size: 22px;
  color: var(--green2)
}

body.dark .room-card h3 {
  color: #fff
}

.room-card p {
  color: var(--muted);
  line-height: 1.7;
  margin: 10px 0
}

.room-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0
}

.room-meta span {
  background: var(--cream);
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px
}

.room-card b {
  display: block;
  color: #b99024;
  margin: 16px 0
}

.room-card a {
  display: inline-block;
  background: var(--green2);
  color: #fff;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 800
}

.center-btn {
  display: table;
  margin: 36px auto 0
}

.gallery-preview {
  background: linear-gradient(135deg, #fffaf0, #f0e4cc)
}

body.dark .gallery-preview {
  background: #0c1d18
}

.mini-gallery {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr 1.2fr;
  gap: 16px
}

.mini-gallery img {
  height: 310px;
  width: 100%;
  object-fit: cover;
  border-radius: 28px;
  cursor: pointer;
  transition: .4s
}

.mini-gallery img:hover {
  transform: scale(1.035);
  filter: saturate(1.18)
}

.reviews {
  background: var(--white)
}

.review-slider {
  max-width: 850px;
  margin: auto;
  overflow: hidden
}

.review-track {
  display: flex;
  transition: .5s
}

.review-track article {
  min-width: 100%;
  background: var(--cream);
  border-radius: 30px;
  padding: 45px;
  text-align: center;
  box-shadow: var(--shadow)
}

.review-track div {
  color: var(--gold);
  font-size: 24px
}

.review-track p {
  font: 700 28px/1.45 'Playfair Display';
  margin: 18px 0
}

.awards-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px
}

.awards-grid article {
  background: var(--white);
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--shadow);
  text-align: center
}

.awards-grid img {
  height: 320px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 20px
}

.awards-grid span {
  font-size: 48px
}

.awards-grid h3 {
  color: var(--green2);
  margin: 12px 0
}

body.dark .awards-grid h3 {
  color: #fff
}

.booking-section {
  background: radial-gradient(circle at 10% 20%, rgba(212, 175, 55, .2), transparent 25%), linear-gradient(135deg, #fffaf0, #f2e4cb)
}

body.dark .booking-section {
  background: #0b1d18
}

.booking-shell {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 30px;
  max-width: 1180px;
  margin: auto
}

.booking-copy {
  background: linear-gradient(135deg, #102c24, #2e5d4d);
  color: #fff;
  border-radius: 34px;
  padding: 42px;
  box-shadow: var(--shadow)
}

.booking-copy h2 {
  color: #fff
}

.booking-copy p {
  line-height: 1.9;
  color: #edf3ef;
  margin: 15px 0
}

.booking-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.booking-pills span {
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 13px
}

.booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(16px);
  border-radius: 34px;
  padding: 34px;
  box-shadow: var(--shadow)
}

body.dark .booking-form {
  background: rgba(16, 36, 30, .92)
}

.booking-form label {
  display: block;
  font-size: 13px;
  color: var(--green2);
  font-weight: 900;
  margin-bottom: 7px
}

body.dark .booking-form label {
  color: #fff
}

.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid #ded2bd;
  border-radius: 16px;
  background: #fff;
  font-family: inherit;
  outline: 0
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, .16)
}

.booking-form .full {
  grid-column: 1/-1
}

.booking-form textarea {
  min-height: 105px
}

.submit-btn {
  grid-column: 1/-1;
  background: #25D366;
  color: #fff
}

.summary-modal,
.video-modal,
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .78);
  z-index: 7000;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.summary-box,
.video-modal>div {
  background: var(--white);
  border-radius: 28px;
  max-width: 600px;
  width: 100%;
  padding: 34px;
  position: relative;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35)
}

.summary-box h2,
.video-modal h2 {
  font-family: 'Playfair Display';
  color: var(--green2);
  margin-bottom: 18px
}

body.dark .summary-box h2,
body.dark .video-modal h2 {
  color: #fff
}

.modal-close,
.lightbox button,
.video-modal button {
  position: absolute;
  right: 14px;
  top: 14px;
  border: 0;
  background: var(--green2);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer
}

.summary-box p {
  line-height: 2
}

.summary-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px
}

.page-hero,
.room-hero {
  min-height: 62vh;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  position: relative;
  padding: 130px 7% 70px
}

.page-hero:before,
.room-hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8, 22, 18, .88), rgba(8, 22, 18, .35))
}

.page-hero>div,
.room-hero>div {
  position: relative;
  z-index: 2;
  max-width: 900px
}

.page-hero h1,
.room-hero h1 {
  color: #fff;
  font-size: 72px
}

.page-hero p,
.room-hero p {
  line-height: 1.8;
  color: #f8efe1
}

.filter-tabs {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px
}

.filter-tabs button {
  border: 1px solid #e1d0ad;
  background: var(--white);
  color: var(--green2);
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 900;
  cursor: pointer
}

.filter-tabs .active,
.filter-tabs button:hover {
  background: var(--green2);
  color: #fff
}

.video-note {
  max-width: 900px;
  margin: 0 auto 32px;
  background: linear-gradient(135deg, #102c24, #2e5d4d);
  color: #fff;
  border-radius: 28px;
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: center;
  box-shadow: var(--shadow)
}

.video-note span {
  font-size: 42px
}

.video-note p {
  color: #dce8e0
}

.gallery-masonry {
  columns: 3 280px;
  column-gap: 18px
}

.g-item {
  break-inside: avoid;
  margin: 0 0 18px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
  background: var(--white);
  transition: .35s
}

.g-item.hide {
  display: none
}

.g-item:hover {
  transform: translateY(-7px)
}

.g-item img {
  width: 100%;
  min-height: 280px;
  object-fit: cover;
  cursor: pointer;
  transition: .45s
}

.g-item.tall img {
  min-height: 460px
}

.g-item.wide img {
  min-height: 350px
}

.g-item:hover img {
  transform: scale(1.06)
}

.g-item figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: rgba(16, 44, 36, .84);
  color: #fff;
  border-radius: 16px;
  padding: 12px;
  font-weight: 800
}

.video-card>div {
  min-height: 280px;
  background: linear-gradient(135deg, #102c24, #2f604f);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px;
  cursor: pointer
}

.video-card span {
  font-size: 58px;
  color: var(--gold)
}

.video-modal video {
  width: 100%;
  border-radius: 18px;
  margin: 18px 0
}

.attraction-grid,
.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.attraction-grid article,
.policy-grid article {
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow)
}

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

.attraction-grid div,
.policy-grid article {
  padding: 26px
}

.attraction-grid h3,
.policy-grid h3 {
  color: var(--green2);
  margin-bottom: 10px
}

body.dark .attraction-grid h3,
body.dark .policy-grid h3 {
  color: #fff
}

.attraction-grid p,
.policy-grid p {
  color: var(--muted);
  line-height: 1.75
}

.contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  background: var(--white);
  border-radius: 34px;
  padding: 35px;
  box-shadow: var(--shadow)
}

.contact-card img {
  height: 420px;
  width: 100%;
  object-fit: cover;
  border-radius: 26px
}

.contact-card p {
  line-height: 2
}

.map-wrap iframe {
  width: 100%;
  height: 480px;
  border-radius: 28px;
  box-shadow: var(--shadow)
}

.room-highlights {
  width: 86%;
  margin: -45px auto 0;
  position: relative;
  z-index: 5;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-radius: 28px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 22px
}

body.dark .room-highlights {
  background: rgba(16, 36, 30, .92)
}

.room-highlights div {
  text-align: center;
  border-right: 1px solid rgba(212, 175, 55, .2)
}

.room-highlights div:last-child {
  border-right: 0
}

.room-highlights b {
  display: block;
  color: var(--green2);
  margin-bottom: 4px
}

body.dark .room-highlights b {
  color: #fff
}

.room-highlights span {
  color: var(--muted);
  font-size: 13px
}

.room-detail {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 35px;
  align-items: start
}

.room-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.room-gallery img {
  height: 280px;
  width: 100%;
  object-fit: cover;
  border-radius: 24px;
  cursor: pointer
}

.room-info-panel {
  background: var(--white);
  border-radius: 30px;
  padding: 35px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 105px
}

.room-info-panel h2 {
  font: 800 42px/1.1 'Playfair Display';
  color: var(--green2)
}

body.dark .room-info-panel h2 {
  color: #fff
}

.room-info-panel p {
  color: var(--muted);
  line-height: 1.8;
  margin: 15px 0
}

.detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0
}

.detail-stats div {
  background: var(--cream);
  border-radius: 18px;
  padding: 16px;
  text-align: center
}

.detail-stats span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px
}

.amenities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  list-style: none
}

.amenities li {
  background: var(--cream);
  padding: 12px;
  border-radius: 14px;
  font-weight: 700
}

.room-tour {
  margin-top: 26px;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(16, 44, 36, .08), rgba(212, 175, 55, .13));
  border: 1px solid rgba(212, 175, 55, .28)
}

.room-tour h3 {
  color: var(--green2);
  margin-bottom: 8px
}

body.dark .room-tour h3 {
  color: #fff
}

.room-tour video {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 18px;
  background: #102c24
}

.related-rooms {
  background: linear-gradient(135deg, #fffaf0, #f0e4cc)
}

body.dark .related-rooms {
  background: #0a1b16
}

.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 20px;
  box-shadow: 0 30px 90px #000
}

.float-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  padding: 15px 22px;
  font-weight: 900;
  z-index: 5000;
  box-shadow: 0 12px 35px rgba(37, 211, 102, .35);
  animation: floatPulse 1.8s infinite
}

.back-top {
  display: none;
  position: fixed;
  right: 30px;
  bottom: 86px;
  border: 0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background: var(--green2);
  color: #fff;
  font-size: 22px;
  z-index: 5000;
  cursor: pointer
}

.footer {
  background: #081713;
  color: #fff;
  padding: 70px 7% 25px
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: 40px
}

.footer-logo {
  font-size: 24px;
  font-weight: 900
}

.footer-logo span {
  background: var(--gold);
  color: #102c24;
  border-radius: 50%;
  padding: 8px 10px;
  margin-right: 8px
}

.footer p,
.footer a {
  display: block;
  color: #cad6cf;
  line-height: 1.9;
  margin-top: 8px
}

.footer h4 {
  color: var(--gold);
  margin-bottom: 10px
}

.copyright {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 40px;
  padding-top: 20px;
  color: #bfc7c0
}

.reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: .8s
}

.reveal.active {
  opacity: 1;
  transform: translateY(0)
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(60px)
  }

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

@keyframes pulseLogo {
  to {
    box-shadow: 0 0 55px rgba(212, 175, 55, .75)
  }
}

@keyframes shine {
  0% {
    transform: translateX(-120%)
  }

  45%,
  100% {
    transform: translateX(120%)
  }
}

@keyframes floatPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .5)
  }

  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0)
  }
}

@media(max-width:1200px) {

  .rooms-grid,
  .rooms-grid.large {
    grid-template-columns: repeat(2, 1fr)
  }

  .why-grid,
  .awards-grid,
  .attraction-grid,
  .policy-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .booking-shell,
  .intro,
  .contact-card,
  .room-detail {
    grid-template-columns: 1fr
  }

  .room-info-panel {
    position: static
  }

  .weather-card {
    flex-direction: column;
    text-align: center
  }

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

@media(max-width:760px) {
  .navbar {
    height: 78px;
    background: rgba(16, 44, 36, .94)
  }

  .menu-toggle {
    display: block
  }

  .nav-links {
    display: none;
    position: absolute;
    left: 5%;
    right: 5%;
    top: 78px;
    background: #102c24;
    border-radius: 20px;
    padding: 22px;
    flex-direction: column
  }

  .nav-links.show {
    display: flex
  }

  .nav-btn {
    display: none
  }

  .hero h1 {
    font-size: 58px
  }

  .hero-content {
    text-align: center;
    align-items: center;
    padding: 0 5%
  }

  .hero-actions {
    justify-content: center
  }

  .hero-badges {
    justify-content: center
  }

  .section-title h2,
  .intro h2,
  .booking-copy h2 {
    font-size: 36px
  }

  .page-hero h1,
  .room-hero h1 {
    font-size: 44px
  }

  .rooms-grid,
  .rooms-grid.large,
  .why-grid,
  .awards-grid,
  .attraction-grid,
  .policy-grid,
  .mini-gallery,
  .footer-grid,
  .booking-form,
  .detail-stats,
  .amenities,
  .room-highlights {
    grid-template-columns: 1fr
  }

  .intro-images,
  .room-gallery {
    grid-template-columns: 1fr
  }

  .intro-images img,
  .intro-images img:nth-child(2) {
    height: 280px;
    margin: 0
  }

  .weather-card {
    width: 90%;
    margin-top: 20px
  }

  .booking-copy,
  .booking-form,
  .contact-card {
    padding: 25px;
    border-radius: 26px
  }

  section {
    padding: 70px 5%
  }

  .summary-actions {
    flex-direction: column
  }

  .room-highlights {
    margin-top: 20px
  }

  .room-highlights div {
    border-right: 0;
    border-bottom: 1px solid rgba(212, 175, 55, .18);
    padding-bottom: 12px
  }

  .room-highlights div:last-child {
    border-bottom: 0
  }

  .float-whatsapp {
    right: 14px;
    bottom: 14px
  }

  .back-top {
    right: 18px;
    bottom: 75px
  }
}


/* ===== Responsive Room Upgrade ===== */
.rooms-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 30px !important;
}

.room-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .08) !important;
  transition: .4s ease !important;
}

.room-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .15) !important;
}

.room-card img {
  height: 260px !important;
  object-fit: cover !important;
  transition: .6s !important;
}

.room-card:hover img {
  transform: scale(1.08) !important;
}

.room-card-content,
.room-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.room-card p {
  flex: 1 !important;
}

.room-card .btn,
.room-card .view-btn,
.room-card a {
  margin-top: auto !important;
}

@media(max-width:992px) {
  .rooms-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media(max-width:768px) {
  .rooms-grid {
    grid-template-columns: 1fr !important;
  }

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






.availability-checker {
  padding: 80px 7% 95px;
}

.checker-card {
  max-width: 1180px;
  margin: auto;
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 32px;
  align-items: center;
  padding: 36px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 252, 245, .92));
  box-shadow: 0 30px 90px rgba(16, 44, 36, .15);
}

.checker-card>div:first-child {
  padding-right: 30px;
  border-right: 1px solid rgba(212, 175, 55, .25);
}

.checker-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 43px;
  line-height: 1.04;
  color: #173b2f;
  margin: 12px 0 14px;
}

.checker-card p {
  font-size: 15px;
  line-height: 1.75;
  color: #687069;
}

.checker-form {
  display: grid;
  grid-template-columns: 1fr 1fr .75fr 1.05fr;
  gap: 13px;
  align-items: end;
}

.checker-form:before {
  content: "Fast availability inquiry";
  grid-column: 1/-1;
  margin-bottom: 4px;
  color: #b99024;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 12px;
}

.checker-form input,
.checker-form select {
  height: 58px;
  padding: 0 16px;
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: 17px;
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  outline: 0;
}

.checker-form input:focus,
.checker-form select:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, .16);
}

.checker-form button {
  grid-column: 1/-1;
  justify-self: start;
  height: 58px;
  min-width: 220px;
  border: 0;
  border-radius: 17px;
  background: #25D366;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  padding: 0 24px;
  box-shadow: 0 18px 42px rgba(37, 211, 102, .28);
  transition: .3s;
}

.checker-form button:hover {
  transform: translateY(-3px);
}

@media(max-width:1200px) {
  .checker-card {
    grid-template-columns: 1fr;
  }

  .checker-card>div:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(212, 175, 55, .25);
    padding-bottom: 22px;
  }

  .checker-form {
    grid-template-columns: repeat(2, 1fr);
  }

  .checker-form button {
    width: 100%;
  }
}

@media(max-width:760px) {
  .checker-card {
    padding: 24px;
    border-radius: 26px;
  }

  .checker-card h2 {
    font-size: 34px;
  }

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

  .checker-form input,
  .checker-form select,
  .checker-form button {
    height: 56px;
  }
}


/* Fix big top/bottom gap around availability checker */
.availability-checker {
  padding: 40px 7% 50px !important;
  min-height: auto !important;
}

.checker-card {
  margin: 0 auto !important;
  padding: 32px 36px !important;
}

@media(max-width:760px) {
  .availability-checker {
    padding: 30px 5% 40px !important;
  }

  .checker-card {
    padding: 24px !important;
  }
}

.premium-room-slider,
.rooms-preview {
  padding-top: 60px !important;
}

.availability-checker {
  padding: 40px 7% 50px !important;
}

/* Remove top space before availability section */
.availability-checker {
  margin-top: -50px !important;
  padding-top: 20px !important;
}


#availability-checker .checker-card {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 32px;
  align-items: center;
}

#availability-checker .checker-form {
  display: grid;
  grid-template-columns: 1fr 1fr 120px 1.3fr;
  gap: 13px;
  width: 100%;
}

#availability-checker .checker-form input,
#availability-checker .checker-form select {
  width: 100%;
  min-width: 0;
}

#availability-checker .checker-form button {
  grid-column: 1 / -1;
  width: 220px;
}

@media(max-width:1000px) {
  #availability-checker .checker-card {
    grid-template-columns: 1fr;
  }

  #availability-checker .checker-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:600px) {
  #availability-checker .checker-form {
    grid-template-columns: 1fr;
  }

  #availability-checker .checker-form button {
    width: 100%;
  }
}


.cinematic-strip {
  padding: 90px 7%;
  background: linear-gradient(135deg, #eaf7fb, #f8f4eb);
  text-align: center;
}

.strip-gallery {
  max-width: 1050px;
  margin: 45px auto 0;
  display: flex;
  gap: 8px;
  height: 360px;
  justify-content: center;
}

.strip-card {
  flex: 1;
  min-width: 90px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  filter: grayscale(1);
  transition: .65s cubic-bezier(.22, .61, .36, 1);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

.strip-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .65s;
}

.strip-card:hover,
.strip-card.active {
  flex: 2.4;
  filter: grayscale(0);
}

.strip-card:hover img,
.strip-card.active img {
  transform: scale(1.08);
}

.strip-card::after {
  content: "View Photo";
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(16, 44, 36, .78);
  color: white;
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(10px);
  transition: .35s;
}

.strip-card:hover::after,
.strip-card.active::after {
  opacity: 1;
  transform: translateY(0);
}

@media(max-width:768px) {
  .strip-gallery {
    height: auto;
    flex-direction: column;
  }

  .strip-card {
    height: 230px;
    flex: auto;
  }

  .strip-card:hover,
  .strip-card.active {
    flex: auto;
  }
}

.room-tour {
  margin-bottom: 0 !important;
}

.room-info-panel {
  padding-bottom: 15px !important;
}

.cinematic-strip {
  padding-top: 0 !important;
}




.villa-popup {
  position: fixed;
  right: 25px;
  bottom: 95px;
  width: 340px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  z-index: 6000;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .25);
  transform: translateX(120%);
  opacity: 0;
  transition: .6s ease;
  border: 1px solid rgba(212, 175, 55, .25);
}

.villa-popup.show {
  transform: translateX(0);
  opacity: 1;
}

.villa-popup-img img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.villa-popup-content {
  padding: 22px;
}

.villa-popup-content span {
  color: #d4af37;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.villa-popup-content h3 {
  margin: 8px 0;
  color: #173b2f;
  font-size: 24px;
}

.villa-popup-content p {
  color: #687069;
  line-height: 1.6;
  font-size: 14px;
  margin-bottom: 16px;
}

.villa-popup-content a {
  display: block;
  text-align: center;
  background: #173b2f;
  color: #fff;
  padding: 13px;
  border-radius: 999px;
  font-weight: 900;
}

.villa-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 44, 36, .9);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
}

@media(max-width:768px) {
  .villa-popup {
    width: 90%;
    right: 5%;
    bottom: 80px;
  }
}


@media(max-width:768px) {
  .villa-popup {
    width: 280px;
    right: 14px;
    bottom: 78px;
    border-radius: 20px;
  }

  .villa-popup-img img {
    height: 95px;
  }

  .villa-popup-content {
    padding: 14px;
  }

  .villa-popup-content span {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .villa-popup-content h3 {
    font-size: 19px;
    margin: 5px 0;
  }

  .villa-popup-content p {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .villa-popup-content a {
    padding: 10px;
    font-size: 13px;
  }

  .villa-popup-close {
    width: 27px;
    height: 27px;
    font-size: 17px;
  }
}

@media(max-width:380px) {
  .villa-popup {
    width: 250px;
    right: 10px;
  }
}






.luxury-video-section {
  padding: 100px 7%;
  background:
    radial-gradient(circle at top left, rgba(212, 175, 55, .18), transparent 30%),
    linear-gradient(135deg, #fffaf0, #f0e4cc);
  text-align: center;
  overflow: hidden;
}

.video-content {
  max-width: 780px;
  margin: 0 auto 45px;
}

.video-content span {
  color: #d4af37;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 900;
}

.video-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 54px;
  line-height: 1.1;
  color: #173b2f;
  margin: 14px 0;
}

.video-content p {
  color: #687069;
  line-height: 1.8;
  font-size: 17px;
}

.luxury-video-wrapper {
  max-width: 1080px;
  margin: auto;
  position: relative;
  border-radius: 36px;
  padding: 12px;
  background: linear-gradient(135deg, #d4af37, rgba(255, 255, 255, .7), #173b2f);
  box-shadow: 0 35px 100px rgba(16, 44, 36, .25);
}

.luxury-video-wrapper video {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
  border-radius: 28px;
  background: #102c24;
}

.video-badge {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 2;
  background: rgba(16, 44, 36, .86);
  color: white;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, .35);
}

@media(max-width:768px) {
  .luxury-video-section {
    padding: 70px 5%;
  }

  .video-content h2 {
    font-size: 36px;
  }

  .luxury-video-wrapper {
    border-radius: 24px;
    padding: 7px;
  }

  .luxury-video-wrapper video {
    height: 280px;
    border-radius: 18px;
  }

  .video-badge {
    top: 16px;
    left: 16px;
    font-size: 11px;
    padding: 8px 13px;
  }
}




/* Video section dark mode fix */
body.dark .luxury-video-section {
  background:
    radial-gradient(circle at top left, rgba(212, 175, 55, .12), transparent 30%),
    linear-gradient(135deg, #081713, #10241e) !important;
}

body.dark .video-content h2 {
  color: #fff !important;
}

body.dark .video-content p {
  color: #b9c5bd !important;
}

body.dark .luxury-video-wrapper {
  background: linear-gradient(135deg, #d4af37, rgba(255, 255, 255, .12), #173b2f) !important;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .45) !important;
}

body.dark .video-badge {
  background: rgba(212, 175, 55, .16) !important;
  color: #fff !important;
  border: 1px solid rgba(212, 175, 55, .4) !important;
}





.premium-contact {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(212, 175, 55, .18), transparent 28%),
    linear-gradient(135deg, #fff, #fffaf0) !important;
}

.premium-contact::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  background: rgba(212, 175, 55, .14);
  border-radius: 50%;
}

.contact-info {
  position: relative;
  z-index: 2;
}

.contact-info h2 {
  max-width: 620px;
}

.contact-info p {
  font-size: 17px;
  margin: 10px 0;
  color: #1d2420;
}

.contact-features {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0 8px;
}

.contact-features span {
  background: #f5f0e6;
  color: #173b2f;
  padding: 10px 15px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}

.contact-image {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
}

.contact-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(16, 44, 36, .25));
  pointer-events: none;
}

.contact-image img {
  height: 440px;
  width: 100%;
  object-fit: cover;
  transition: .7s ease;
}

.premium-contact:hover .contact-image img {
  transform: scale(1.06);
}

/* Dark mode */
body.dark .premium-contact {
  background:
    radial-gradient(circle at 15% 20%, rgba(212, 175, 55, .12), transparent 28%),
    linear-gradient(135deg, #10241e, #081713) !important;
}

body.dark .contact-info p {
  color: #b9c5bd;
}

body.dark .contact-features span {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

@media(max-width:768px) {
  .contact-image img {
    height: 280px;
  }

  .contact-info p {
    font-size: 15px;
  }
}





/* Cinematic strip dark mode fix */
body.dark .cinematic-strip {
  background:
    radial-gradient(circle at top left, rgba(212, 175, 55, .12), transparent 32%),
    linear-gradient(135deg, #081713, #10241e) !important;
}

body.dark .cinematic-strip .section-title h2,
body.dark .cinematic-strip h2 {
  color: #ffffff !important;
  text-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}

body.dark .strip-card {
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45) !important;
  border: 1px solid rgba(212, 175, 55, .18);
}

body.dark .strip-card::after {
  background: rgba(212, 175, 55, .18) !important;
  color: #fff !important;
  border: 1px solid rgba(212, 175, 55, .35);
}

/* active image dark mode */
body.dark .strip-card.active {
  filter: grayscale(0) brightness(1.05) !important;
}

/* non-active images dark mode */
body.dark .strip-card:not(.active) {
  filter: grayscale(1) brightness(.72) !important;
}






.home-3d-cta {
  padding: 90px 7%;
  background:
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, .16), transparent 30%),
    linear-gradient(135deg, #081713, #173b2f);
}

.home-3d-card {
  max-width: 1180px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 35px;
  align-items: center;
  padding: 42px;
  border-radius: 36px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(212, 175, 55, .28);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .35);
}

.home-3d-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  line-height: 1.1;
  color: #fff;
  margin: 14px 0;
}

.home-3d-text p {
  color: #dce8e0;
  line-height: 1.8;
  margin-bottom: 26px;
}

.home-3d-btn {
  display: inline-block;
  background: #d4af37;
  color: #102c24;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 900;
  transition: .3s;
}

.home-3d-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(212, 175, 55, .35);
}

.home-3d-image {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .28);
}

.home-3d-image img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  transition: .7s ease;
}

.home-3d-card:hover .home-3d-image img {
  transform: scale(1.07);
}

.view-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(212, 175, 55, .94);
  color: #102c24;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 0 0 18px rgba(212, 175, 55, .18);
  animation: pulse360 1.8s infinite;
}

@keyframes pulse360 {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, .38)
  }

  70% {
    box-shadow: 0 0 0 24px rgba(212, 175, 55, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0)
  }
}

@media(max-width:768px) {
  .home-3d-card {
    grid-template-columns: 1fr;
    padding: 26px;
    border-radius: 26px;
  }

  .home-3d-text h2 {
    font-size: 36px;
  }

  .home-3d-image img {
    height: 240px;
  }

  .view-badge {
    width: 76px;
    height: 76px;
    font-size: 20px;
  }
}



.experience-hub {
  padding: 100px 7%;
  background: linear-gradient(135deg, #fffaf0, #f4e7cf);
}

body.dark .experience-hub {
  background: #0b1d18;
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 40px;
}

.experience-card {
  background: var(--white);
  border-radius: 28px;
  padding: 35px 25px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: .4s;
  position: relative;
  overflow: hidden;
}

.experience-card:hover {
  transform: translateY(-10px);
}

.exp-icon {
  font-size: 52px;
  margin-bottom: 18px;
}

.experience-card h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--green2);
}

body.dark .experience-card h3 {
  color: #fff;
}

.experience-card p {
  color: var(--muted);
  line-height: 1.7;
}

.featured {
  background: linear-gradient(135deg, #102c24, #21493b);
  color: #fff;
}

.featured h3,
.featured p {
  color: #fff;
}

.featured span {
  position: absolute;
  top: 18px;
  right: -35px;
  background: var(--gold);
  color: #102c24;
  padding: 8px 40px;
  font-size: 12px;
  font-weight: 900;
  transform: rotate(35deg);
}

@media(max-width:1000px) {
  .experience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:650px) {
  .experience-grid {
    grid-template-columns: 1fr;
  }
}






/* Availability Checker - Light Mode */
.availability-checker {
  background: #f7f2e8;
}

.checker-card {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(20, 40, 32, .12);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .12);
}

.checker-card h2 {
  color: #11251d;
}

.checker-card p {
  color: #5f6b66;
}

.checker-form input,
.checker-form select {
  background: #ffffff;
  color: #14251f;
  border: 1px solid rgba(20, 40, 32, .18);
}

.checker-form input::placeholder {
  color: #7b8681;
}

/* Availability Checker - Dark Mode */
body.dark .availability-checker {
  background: #061913;
}

body.dark .checker-card {
  background: linear-gradient(135deg, #0b211b, #071510);
  border: 1px solid rgba(212, 175, 55, .22);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .45);
}

body.dark .checker-card h2 {
  color: #ffffff;
}

body.dark .checker-card p {
  color: #b7c0bc;
}

body.dark .checker-form input,
body.dark .checker-form select {
  background: #10231d;
  color: #ffffff;
  border: 1px solid rgba(212, 175, 55, .28);
}

body.dark .checker-form input::placeholder {
  color: #9fa8a3;
}

body.dark .checker-form input:focus,
body.dark .checker-form select:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .15);
}

/* Button same both modes */
.checker-form button {
  background: #25D366;
  color: #ffffff;
  border: none;
}







.experience-hub {
  padding: 100px 7%;
  background: linear-gradient(135deg, #ffffff, #f5ecc6);
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 40px;
}

.experience-card {
  background: linear-gradient(145deg, #102c24, #173b2f);
  color: #fff;
  border: 1px solid rgba(212, 175, 55, .22);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .22);
}


.experience-card:hover {
  transform: translateY(-10px);
  border-color: #d4af37;
}

.exp-icon {
  font-size: 52px;
  margin-bottom: 18px;
}

.experience-card h3 {
  color: #fff;
}


.experience-card p {
  color: #cdd8d2;
}

@media(max-width:900px) {
  .experience-grid {
    grid-template-columns: 1fr;
  }
}

.experience-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 40px 25px;
  border-radius: 28px;

  background: #102c24 !important;
  color: #fff !important;

  border: 1px solid rgba(212, 175, 55, .25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);

  transition: .4s ease;
}

.experience-card h3 {
  color: #fff !important;
}

.experience-card p {
  color: #d5ddd8 !important;
}

.experience-card:hover {
  background: #173b2f !important;
  transform: translateY(-10px);
  border-color: #d4af37;
}










.checker-form button {
  width: 100% !important;
  display: block !important;
  margin-top: 15px;
  padding: 18px;
  border: none;
  border-radius: 18px;
  background: #25D366;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}








/* ===== Premium Room Cards ===== */

.rooms-preview .premium-room-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 34px !important;
}

.rooms-preview .premium-room-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  background: #fff !important;
  border: 1px solid rgba(212, 175, 55, .35) !important;
  box-shadow: 0 18px 45px rgba(14, 45, 35, .12) !important;
  transition: .45s ease !important;
}

.rooms-preview .premium-room-card:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 35px 80px rgba(14, 45, 35, .22) !important;
}

.room-img-box {
  position: relative !important;
  height: 260px !important;
  overflow: hidden !important;
  margin: 18px 18px 0 !important;
  border-radius: 24px !important;
}

.room-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: .7s ease !important;
}

.premium-room-card:hover .room-img-box img {
  transform: scale(1.08) !important;
}

.room-img-box::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .12), transparent 45%, rgba(0, 0, 0, .45)) !important;
}

.room-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 2 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #d4af37, #f4df8a) !important;
  color: #123d31 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.room-rating {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 2 !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #123d31 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  backdrop-filter: blur(10px) !important;
}

.room-info {
  padding: 28px 30px 30px !important;
}

.room-info small {
  display: block !important;
  margin-bottom: 8px !important;
  color: #c29416 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.room-info h3 {
  margin: 0 0 14px !important;
  color: #123d31 !important;
  font-size: 25px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

.room-info p {
  margin: 0 0 22px !important;
  color: #68756f !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
}

.room-info .room-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 25px !important;
}

.room-info .room-meta span {
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: #f4eddf !important;
  color: #33483f !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.room-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-top: 22px !important;
  border-top: 1px solid rgba(18, 61, 49, .1) !important;
}

.room-bottom b {
  color: #bd8d10 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.room-bottom a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 13px 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #123d31, #1b5a48) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  box-shadow: 0 12px 28px rgba(18, 61, 49, .25) !important;
  transition: .3s ease !important;
}

.room-bottom a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 38px rgba(18, 61, 49, .36) !important;
}

@media(max-width:1000px) {
  .rooms-preview .premium-room-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media(max-width:650px) {
  .rooms-preview .premium-room-grid {
    grid-template-columns: 1fr !important;
  }

  .room-img-box {
    height: 235px !important;
  }

  .room-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .room-bottom a {
    width: 100% !important;
  }
}




/* Room Card Footer Premium Fix */
.room-card b {
  display: inline-block !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(212, 175, 55, .12) !important;
  color: #b9890f !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  margin-bottom: 14px !important;
}

.room-card a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #123d31, #1e5a48) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(18, 61, 49, .25) !important;
}

.room-card a::after {
  content: "→";
}

.room-card a:hover {
  transform: translateY(-3px) !important;
  background: linear-gradient(135deg, #d4af37, #f4df8a) !important;
  color: #123d31 !important;
}



/* Mobile Responsive Room Cards */

@media (max-width: 1024px) {

  .rooms-grid,
  .premium-room-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 768px) {
  .rooms-preview {
    padding: 60px 16px !important;
  }

  .rooms-grid,
  .premium-room-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .room-card,
  .premium-room-card {
    width: 100% !important;
    border-radius: 24px !important;
  }

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

  .room-img-box {
    height: 220px !important;
    margin: 12px !important;
    border-radius: 20px !important;
  }

  .room-info,
  .room-card>div {
    padding: 22px !important;
  }

  .room-info h3,
  .room-card h3 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  .room-info p,
  .room-card p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .room-meta {
    gap: 8px !important;
  }

  .room-meta span {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  .room-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .room-bottom a,
  .room-card a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {

  .room-info h3,
  .room-card h3 {
    font-size: 22px !important;
  }

  .room-card img,
  .room-img-box,
  .room-img-box img {
    height: 200px !important;
  }
}



/* Luxury Room Meta Tags */

.room-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 25px;
}

.room-meta span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 42px;
  border-radius: 50px;
  background: linear-gradient(135deg,
      #fff,
      #f6f1e8);
  border: 1px solid rgba(212, 175, 55, .25);
  color: #123d31;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
  transition: .3s ease;
}

.room-meta span:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
}

/* Icon Circle */
.room-meta span::before {
  content: "";
  position: absolute;
  left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg,
      #d4af37,
      #f4df8a);
}

/* Guest Icon */
.room-meta span:first-child::after {
  content: "👥";
  position: absolute;
  left: 13px;
  font-size: 12px;
}

/* Bed Icon */
.room-meta span:last-child::after {
  content: "🛏️";
  position: absolute;
  left: 13px;
  font-size: 12px;
}

/* Mobile */
@media(max-width:768px) {
  .room-meta {
    gap: 8px;
  }

  .room-meta span {
    font-size: 13px;
    padding: 10px 15px 10px 38px;
  }
}



/* =========================
   Mobile Responsive Rooms
========================= */

@media (max-width: 992px) {

  .rooms-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

}

@media (max-width: 768px) {

  .rooms-preview {
    padding: 60px 18px !important;
  }

  .rooms-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .room-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

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

  .room-card>div {
    padding: 22px !important;
  }

  .room-card h3 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .room-card p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

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

  .room-meta span {
    font-size: 13px !important;
    padding: 10px 14px 10px 38px !important;
  }

  .room-card b {
    display: block !important;
    margin: 18px 0 12px !important;
    font-size: 16px !important;
  }

  .room-card a {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 14px !important;
  }

  .center-btn {
    width: 100% !important;
    text-align: center !important;
    margin-top: 25px !important;
  }

}

@media (max-width: 480px) {

  .room-card img {
    height: 210px !important;
  }

  .room-card h3 {
    font-size: 24px !important;
  }

  .room-card p {
    font-size: 14px !important;
  }

  .room-meta span {
    width: 100%;
    justify-content: flex-start;
  }

}



.room-card p {
  margin-bottom: 10px !important;
}

.room-meta {
  margin: -8px 0 !important;
}

.room-card b {
  margin: 6px 0 !important;
}


/* View All Rooms Button Fix */

.center-btn {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: fit-content !important;
  margin: 30px auto 0 !important;
  padding: 16px 32px !important;
  border-radius: 50px !important;
  text-align: center !important;
}

/* Mobile */
@media(max-width:768px) {

  .center-btn {
    width: 100% !important;
    max-width: 320px !important;
    margin: 25px auto !important;
    padding: 15px 20px !important;
    font-size: 15px !important;
  }

}

section {
  padding-top: 40px !important;
  padding-bottom: 60px !important;
}

.section-title {
  margin-bottom: 35px !important;
}

@media(max-width:768px) {
  section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}


.weather-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  /* කලින් 50px+ නම් අඩුවෙනවා */
  padding: 25px 35px !important;
  margin: 30px 0 !important;
}

.weather-card h2 {
  margin: 8px 0 0 !important;
  line-height: 1.2;
}

.weather-box {
  padding: 18px 25px !important;
  min-width: 260px;
}

/* Weather section gap fix */

.weather-card {
  padding: 25px 34px !important;
  margin: 30px auto 35px !important;
  min-height: auto !important;
}

.weather-card h2 {
  margin: 6px 0 0 !important;
  line-height: 1.15 !important;
}

.weather-card .eyebrow {
  margin-bottom: 5px !important;
}

.weather-box {
  padding: 16px 26px !important;
}

/* weather card එකට පස්සේ එන section එකේ top gap අඩු කරනවා */
.weather-card+section,
.weather-card+.about,
.weather-card+.welcome-section {
  padding-top: 25px !important;
  margin-top: 0 !important;
}

@media(max-width:768px) {
  .weather-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px !important;
    margin: 20px auto 25px !important;
    gap: 14px !important;
  }

  .weather-box {
    width: 100% !important;
    justify-content: center !important;
  }

  .weather-card+section,
  .weather-card+.about,
  .weather-card+.welcome-section {
    padding-top: 15px !important;
  }
}

.weather-card {
  margin-bottom: 3px !important;
}





@media(max-width:768px) {

  .gallery-masonry {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .g-item img {
    height: 120px !important;
    min-height: 120px !important;
  }

}

@media (max-width:768px) {

  .gallery-masonry {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;

    columns: unset !important;
    column-count: unset !important;
  }

  .gallery-masonry .g-item {
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    break-inside: auto !important;
  }

  .gallery-masonry .g-item img {
    width: 100% !important;
    height: 130px !important;
    min-height: 130px !important;
    object-fit: cover !important;
    display: block !important;
  }

  .gallery-masonry .g-item.tall img,
  .gallery-masonry .g-item.wide img {
    height: 130px !important;
    min-height: 130px !important;
  }

  .gallery-masonry .g-item figcaption {
    display: none !important;
  }

}




/* Room Gallery Mobile Slider */

@media(max-width:768px) {

  .room-gallery {
    display: flex !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding: 0 16px 15px !important;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .room-gallery::-webkit-scrollbar {
    display: none;
  }

  .room-gallery img {
    flex: 0 0 85% !important;
    width: 85% !important;
    height: 260px !important;

    object-fit: cover;
    border-radius: 22px;

    scroll-snap-align: center;
    cursor: pointer;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
  }

}

@media(max-width:768px) {

  .room-gallery {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 10px;
  }

  .room-gallery::-webkit-scrollbar {
    display: none;
  }

  .room-gallery img {
    flex: 0 0 90%;
    width: 90%;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
  }

}








/* Mobile only swipe slider */
@media(max-width:768px) {

  .cinematic-strip {
    padding: 50px 0 !important;
    overflow: hidden !important;
  }

  .cinematic-strip .section-title {
    padding: 0 18px !important;
  }

  #photoSlider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    height: 260px !important;
    padding: 0 16px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  #photoSlider::-webkit-scrollbar {
    display: none !important;
  }

  #photoSlider .strip-card,
  #photoSlider .strip-card.active {
    flex: 0 0 88% !important;
    min-width: 88% !important;
    height: 260px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    scroll-snap-align: center !important;
    filter: none !important;
  }

  #photoSlider .strip-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

@media(max-width:768px) {
  .strip-card.active {
    flex: 0 0 100% !important;
  }
}












.flatpickr-calendar {
  border-radius: 22px !important;
  border: 1px solid rgba(212, 175, 55, .35) !important;
  box-shadow: 0 25px 70px rgba(16, 44, 36, .25) !important;
  overflow: hidden !important;
  font-family: Poppins, Arial, sans-serif !important;
}

.flatpickr-months,
.flatpickr-weekdays {
  background: #102c24 !important;
}

.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekday {
  color: #d4af37 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #102c24 !important;
  border-color: #102c24 !important;
  color: #fff !important;
}

.flatpickr-day.today {
  border-color: #d4af37 !important;
}

.flatpickr-day:hover {
  background: #f4eddf !important;
  border-color: #d4af37 !important;
  color: #102c24 !important;
}


.flatpickr-calendar {
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .18) !important;
}

.flatpickr-months,
.flatpickr-weekdays {
  background: #0f3d33 !important;
}

.flatpickr-current-month,
.flatpickr-weekday {
  color: #d4af37 !important;
  font-weight: 600 !important;
}

.flatpickr-day.selected {
  background: #0f3d33 !important;
  border-color: #0f3d33 !important;
  color: #fff !important;
}

.flatpickr-day.today {
  border-color: #d4af37 !important;
}

.flatpickr-day:hover {
  background: #d4af37 !important;
  color: #0f3d33 !important;
}



/* Stop mobile input zoom */
input,
select,
textarea,
.flatpickr-input {
  font-size: 16px !important;
}






@media(max-width:768px) {

  .gallery-preview {
    padding: 60px 0;
  }

  .mini-gallery {
    display: flex !important;
    overflow-x: auto !important;
    gap: 14px !important;
    padding: 0 16px !important;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mini-gallery::-webkit-scrollbar {
    display: none;
  }

  .mini-gallery img {
    flex: 0 0 85%;
    min-width: 85%;

    height: 260px;
    object-fit: cover;

    border-radius: 24px;
    scroll-snap-align: center;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
    transition: .4s;
  }

  .mini-gallery img:active {
    transform: scale(.98);
  }

  .gallery-preview .center-btn {
    width: calc(100% - 32px);
    margin: 25px 16px 0;
    text-align: center;
  }

}

.mini-gallery {
  position: relative;
}






/* Premium Reviews Mobile Design */

.reviews {
  background: linear-gradient(180deg, #fffaf0, #f3ead7);
}

.review-slider {
  max-width: 900px;
  margin: auto;
  overflow: hidden;
}

.review-track article {
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 18px 45px rgba(16, 44, 36, .12) !important;
}

/* Mobile */
@media(max-width:768px) {

  .reviews {
    padding: 55px 16px !important;
  }

  .reviews .section-title h2 {
    font-size: 34px !important;
  }

  .review-slider {
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .review-slider::-webkit-scrollbar {
    display: none !important;
  }

  .review-track {
    display: flex !important;
    gap: 16px !important;
    transform: none !important;
    transition: none !important;
    width: max-content !important;
  }

  .review-track article {
    min-width: 85vw !important;
    max-width: 85vw !important;
    padding: 30px 22px !important;
    scroll-snap-align: center !important;
    text-align: center !important;
  }

  .review-track div {
    color: #d4af37 !important;
    font-size: 24px !important;
    letter-spacing: 3px !important;
    margin-bottom: 18px !important;
  }

  .review-track p {
    font-size: 22px !important;
    line-height: 1.45 !important;
    color: #173b2f !important;
  }

  .review-track h4 {
    margin-top: 18px !important;
    color: #b99024 !important;
    font-size: 14px !important;
  }

  .review-slider {
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }
}







@media (max-width:768px) {

  .review-slider {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    padding-bottom: 10px !important;
  }

  .review-slider::-webkit-scrollbar {
    display: none !important;
  }

  .review-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    width: max-content !important;
    transform: none !important;
  }

  .review-track article {
    flex: 0 0 85vw !important;
    min-width: 85vw !important;
    max-width: 85vw !important;

    background: #fff !important;
    border-radius: 24px !important;

    padding: 25px !important;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08) !important;
  }

  .review-track article p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .review-track article h4 {
    margin-top: 15px !important;
    color: #d4af37 !important;
  }

}





/* Premium Reviews - Desktop + Mobile */

.reviews {
  background:
    radial-gradient(circle at top, rgba(212, 175, 55, .16), transparent 32%),
    linear-gradient(180deg, #fffaf0, #f4ead8) !important;
}

.review-slider {
  max-width: 980px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

.review-track article {
  position: relative !important;
  min-height: 300px !important;
  padding: 55px 70px !important;
  border-radius: 36px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(212, 175, 55, .22) !important;
  box-shadow: 0 28px 80px rgba(16, 44, 36, .12) !important;
}

.review-track article::before {
  content: "“";
  position: absolute;
  left: 35px;
  top: 18px;
  font-family: "Playfair Display", serif;
  font-size: 110px;
  line-height: 1;
  color: rgba(212, 175, 55, .18);
}

.review-track div {
  color: #d4af37 !important;
  font-size: 26px !important;
  letter-spacing: 5px !important;
  margin-bottom: 20px !important;
}

.review-track p {
  max-width: 760px !important;
  margin: 0 auto 25px !important;
  color: #102c24 !important;
  font-family: "Playfair Display", serif !important;
  font-size: 34px !important;
  line-height: 1.35 !important;
}

.review-track h4 {
  color: #173b2f !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

@media(max-width:768px) {
  .reviews {
    padding: 55px 16px !important;
  }

  .review-track article {
    min-height: auto !important;
    padding: 35px 24px !important;
    border-radius: 28px !important;
  }

  .review-track p {
    font-size: 22px !important;
  }
}





/* Awards / Certificates Premium Mobile */

.awards {
  background: linear-gradient(180deg, #fffaf0, #f4ead8);
}

.awards-grid article {
  border: 1px solid rgba(212, 175, 55, .25);
}

@media(max-width:768px) {

  .awards {
    padding: 55px 14px !important;
  }

  .awards .section-title h2 {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }

  .awards-grid {
    display: flex !important;
    overflow-x: auto !important;
    gap: 16px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    padding-bottom: 12px !important;
  }

  .awards-grid::-webkit-scrollbar {
    display: none !important;
  }

  .awards-grid article {
    flex: 0 0 88% !important;
    min-width: 88% !important;
    border-radius: 28px !important;
    padding: 20px !important;
    background: #fff !important;
    scroll-snap-align: center !important;
    box-shadow: 0 18px 45px rgba(16, 44, 36, .12) !important;
  }

  .awards-grid img {
    height: 260px !important;
    border-radius: 22px !important;
    object-fit: cover !important;
  }

  .awards-grid h3 {
    font-size: 20px !important;
    margin-top: 18px !important;
    text-align: center !important;
  }

  .awards-grid p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }
}




.preloader{
  position:fixed;
  inset:0;
  z-index:99999;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  background:
  radial-gradient(circle at center,
  rgba(212,175,55,.15),
  transparent 35%),
  linear-gradient(135deg,#031d17,#0b3a2f,#031d17);

  overflow:hidden;
}

/* Gold glow behind logo */
.preloader::before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;

  background:radial-gradient(
  circle,
  rgba(212,175,55,.28),
  transparent 70%);

  animation:pulseGlow 3s infinite ease-in-out;
}

.preloader-logo{
  position:relative;

  width:110px;
  height:110px;

  border-radius:50%;

  background:linear-gradient(
  135deg,
  #f4d56d,
  #d4af37);

  color:#0f3d33;
  font-size:48px;
  font-weight:800;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
  0 0 20px rgba(212,175,55,.5),
  0 0 60px rgba(212,175,55,.25);

  animation:logoFloat 2.5s ease-in-out infinite;
}

/* spinning ring */
.preloader-logo::before{
  content:"";
  position:absolute;
  inset:-10px;

  border-radius:50%;
  border:2px solid rgba(212,175,55,.25);
  border-top-color:#d4af37;

  animation:spinRing 2s linear infinite;
}

.preloader h2{
  margin-top:35px;

  color:#fff;
  font-family:'Playfair Display',serif;
  font-size:60px;
  font-weight:700;

  text-shadow:0 4px 25px rgba(0,0,0,.25);

  animation:fadeUp .8s ease;
}

.preloader p{
  margin-top:12px;

  color:#d4af37;
  font-size:14px;
  letter-spacing:6px;
  text-transform:uppercase;

  animation:fadeUp 1.2s ease;
}

.preloader.hide{
  opacity:0;
  visibility:hidden;
  transition:.7s;
}

/* Animations */

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

@keyframes logoFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-8px);
  }
}

@keyframes pulseGlow{
  0%,100%{
    transform:scale(1);
    opacity:.7;
  }
  50%{
    transform:scale(1.15);
    opacity:1;
  }
}

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

/* Mobile */

@media(max-width:768px){

  .preloader-logo{
    width:85px;
    height:85px;
    font-size:36px;
  }

  .preloader h2{
    font-size:42px;
  }

  .preloader p{
    font-size:11px;
    letter-spacing:4px;
  }

  .preloader::before{
    width:220px;
    height:220px;
  }
}















.room-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:22px 0;
}

.room-meta span{
    position:relative;
    display:flex;
    align-items:center;

    padding:12px 18px 12px 48px;

    border-radius:50px;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(212,175,55,.25);

    color:#fff;
    font-size:14px;
    font-weight:600;

    backdrop-filter:blur(10px);

    transition:.35s;
}

/* Gold Icon Circle */
.room-meta span::before{
    content:"";
    position:absolute;
    left:10px;

    width:28px;
    height:28px;
    border-radius:50%;

    background:linear-gradient(135deg,#d4af37,#f0d77a);
}

/* Guest Icon */
.room-meta span:first-child::after{
    content:"👥";
    position:absolute;
    left:17px;
    font-size:12px;
}

/* Bed Icon */
.room-meta span:last-child::after{
    content:"🛏️";
    position:absolute;
    left:17px;
    font-size:12px;
}

.room-meta span:hover{
    transform:translateY(-3px);
    border-color:#d4af37;
    box-shadow:0 10px 25px rgba(212,175,55,.15);
}

/* Light Mode */
body:not(.dark) .room-meta span{
    background:#f7f3ea;
    color:#173b2f;
}

/* Dark Mode */
body.dark .room-meta span{
    background:rgba(255,255,255,.08);
    color:#fff;
    border-color:rgba(212,175,55,.3);
}

/* Mobile */
@media(max-width:768px){

    .room-meta{
        flex-direction:column;
        gap:10px;
    }

    .room-meta span{
        width:100%;
    }
}












/* Reviews - 3 Card Layout Without HTML Change */

.review-slider{
  max-width:1200px !important;
  overflow:visible !important;
  margin:auto !important;
}

.review-track{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important;
  transform:none !important;
  width:100% !important;
}

.review-track article{
  min-width:0 !important;
  width:100% !important;
  padding:38px 28px !important;
  border-radius:30px !important;
  background:#fff !important;
  border:1px solid rgba(212,175,55,.25) !important;
  box-shadow:0 20px 55px rgba(16,44,36,.10) !important;
  text-align:center !important;
}

.review-track article::before{
  content:"“";
  display:block;
  font-size:70px;
  line-height:.6;
  color:rgba(212,175,55,.25);
  font-family:"Playfair Display",serif;
}

.review-track article div{
  color:#d4af37 !important;
  font-size:20px !important;
  letter-spacing:3px !important;
  margin:10px 0 18px !important;
}

.review-track article p{
  font-size:19px !important;
  line-height:1.6 !important;
  color:#123d31 !important;
  margin:0 0 18px !important;
}

.review-track article h4{
  color:#b99024 !important;
  font-weight:900 !important;
}

/* Mobile */
@media(max-width:768px){
  .review-track{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .review-track article{
    padding:30px 22px !important;
  }

  .review-track article p{
    font-size:16px !important;
  }
}


/* Mobile Review Slider */

@media(max-width:768px){

  .review-slider{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:10px;
  }

  .review-slider::-webkit-scrollbar{
    display:none;
  }

  .review-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:16px !important;
    width:max-content !important;
    transform:none !important;
    animation:none !important;
  }

  .review-track article{
    flex:0 0 88vw !important;
    min-width:88vw !important;
    max-width:88vw !important;

    background:#fff !important;
    border-radius:28px !important;

    padding:30px 24px !important;

    box-shadow:0 15px 40px rgba(16,44,36,.10) !important;

    scroll-snap-align:center;
  }

  .review-slider{
    scroll-snap-type:x mandatory;
  }

  .review-track article p{
    font-size:18px !important;
    line-height:1.7 !important;
  }

  .review-track article h4{
    color:#d4af37 !important;
    margin-top:15px !important;
  }

}




/* Reviews + Awards Dark Mode Fix */

body.dark .reviews,
body.dark .awards{
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.12), transparent 35%),
    linear-gradient(180deg,#081713,#10241e) !important;
}

body.dark .reviews .section-title span,
body.dark .awards .section-title span{
  color:#d4af37 !important;
}

body.dark .reviews .section-title h2,
body.dark .awards .section-title h2{
  color:#ffffff !important;
}

body.dark .review-track article,
body.dark .awards-grid article{
  background:#10241e !important;
  border:1px solid rgba(212,175,55,.25) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.35) !important;
}

body.dark .review-track article p,
body.dark .awards-grid article p{
  color:#d7e2dc !important;
}

body.dark .review-track article h4,
body.dark .awards-grid article h3{
  color:#d4af37 !important;
}

body.dark .review-track article div{
  color:#d4af37 !important;
}

body.dark .review-track article::before{
  color:rgba(212,175,55,.25) !important;
}




/* Why Choose Us - Mobile Slider */

@media(max-width:768px){

  .why{
    padding:60px 0 !important;
    overflow:hidden !important;
  }

  .why .section-title{
    padding:0 18px !important;
  }

  .why-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:16px !important;
    overflow-x:auto !important;
    padding:0 18px 14px !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .why-grid::-webkit-scrollbar{
    display:none !important;
  }

  .why-grid article{
    flex:0 0 86% !important;
    min-width:86% !important;
    height:260px !important;
    border-radius:28px !important;
    scroll-snap-align:center !important;
    background:rgba(255,255,255,.09) !important;
    border:1px solid rgba(212,175,55,.22) !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
  }

  .why-grid article span{
    width:58px !important;
    height:58px !important;
    border-radius:18px !important;
    display:grid !important;
    place-items:center !important;
    background:linear-gradient(135deg,#d4af37,#f4df8a) !important;
    font-size:26px !important;
    margin-bottom:18px !important;
  }

  .why-grid article h3{
    font-size:22px !important;
    color:#fff !important;
  }

  .why-grid article p{
    font-size:15px !important;
    line-height:1.7 !important;
    color:#e8f0ec !important;
  }
}





@media(max-width:768px){

  .room-tour{
    padding:0 !important;
    background:none !important;
    border:none !important;
  }

  .room-tour h3{
    padding:0 15px;
    margin-bottom:15px;
  }

  .room-tour video{
    width:100% !important;
    height:300px !important;
    border-radius:24px !important;
    object-fit:cover !important;
  }
}