/* static/css/site.css */

/* --- Color palette --- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Cairo:wght@400;600&family=Playfair+Display:wght@500;700&display=swap");

:root {
  /* Replace Bootstrap’s primary blues with browns */
  --bs-primary: #1f138b;   /* SaddleBrown */
  --bs-primary-rgb: 139,69,19;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #2d8ba0;  /* Sienna-ish */
}

/* Optional: a lighter background overlay on hero text for contrast */
.hero-overlay {
  background: rgba(0, 0, 0, 0.4); /* subtle darkening */
  padding: 2rem 3rem;
  border-radius: 0.5rem;
}

.btn-primary {
  background-color: #1525d4; /* brown tone */
  border-color: #1c10bd;
}

.btn-primary:hover {
  background-color: #150a76;
  border-color: #21058f;
}

.text-brown {
  color: #0d0d0d;
}

.gallery-thumb {
  cursor: pointer;
  transition: transform 0.3s;
}
.gallery-thumb:hover {
  transform: scale(1.04);
}

.horizontal-scroll {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.horizontal-scroll > div {
  scroll-snap-align: start;
}

/* existing setup */
.gallery-img {
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* BIGGER on hover  ▸ scale 1.15 (15 % larger) */
.gallery-img:hover {
  transform: scale(1.05);      /* was 1.05 */
  box-shadow: 0 12px 24px rgba(0,0,0,.25);  /* optional depth */
}
.gallery-moods span {
  font-family: 'Cairo', sans-serif;   /* or 'Playfair Display' */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #090909;      /* your brown brand color */
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.gallery-moods span:hover {
  color: #111111;
  border-color: #070707;
}

/* ===== Review section (Tolip‑style) ============================ */
.reviews-section {
  background-color: #faf9f7;          /* warm off‑white */
}

/* centre the card & limit width */
.review-card {
  max-width: 640px;
  background: #ffffff;
  padding: 2rem 2.5rem;
  border-radius: 1rem;
  box-shadow: 0 12px 24px rgba(0,0,0,.05);
}

/* quote styling */
.review-card p {
  position: relative;
}


/* stars */
.review-card .stars i {
  font-size: 1.1rem;
  color: #ffb84d;                     /* golden stars */
}

.carousel-indicators button {
  background-color: #bda588;          /* light brown dots */
  width: 10px; height: 10px; border-radius: 50%;
  opacity: .4;
}
.carousel-indicators .active { opacity: 1; }

/* make arrows soft‑brown on hover */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(64%) sepia(14%) saturate(290%) hue-rotate(2deg) brightness(96%) contrast(87%);
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  transform: scale(1.15);
}

/* (leave existing .reviews-section, .review-card, .stars, etc.) */

.review-card h6 {         /* new: centre name/city line */
  font-size: 1rem;
}

/* ===== Footer styling ========================================= */
.site-footer {
  background-color: #4b2f4a;          /* rich coffee‑brown */
  font-size: 0.95rem;
}
.site-footer h5 { font-family: 'Playfair Display', serif; }
.site-footer a:hover { opacity: 0.8; }
/* ===== Floating chat button =================================== */
.chat-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #70486f;              /* WhatsApp green */
  color: #fff; font-size: 1.7rem;
  display: flex; justify-content: center; align-items: center;
  z-index: 999;
  transition: transform .2s, box-shadow .2s;
}
.chat-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* --------------------------------------------- */
/* 2. Give the reviews section a bit more bottom padding
      so tall cards don’t sit right on the seam          */
.reviews-section {
  padding-bottom: 120px;     /* increase or decrease to taste */
  position: relative;        /* establishes its own stacking ctx */
}

/* ===== Fixed navbar adjustments ================================= */
.main-nav {
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  --link: #4b3a2f;        /* coffee‑brown like footer */
}
.main-nav .nav-link { color: var(--link); }
.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
  color: #a1689b;         /* darker on hover */
}
.main-nav .btn-primary {
  background-color: #25d366;   /* matches chat button green */
  border: none;
}
.main-nav .btn-primary:hover { opacity: 0.9; }

/* Give every on‑page section some top offset so content isn't hidden
   behind the fixed nav when we jump to an anchor                */
section[id] {
  scroll-margin-top: 90px;   /* equals nav height + little buffer */
}

/* ===== Fixed Hero that sits under everything else ============= */
.hero-fixed {
  position: fixed;
  inset: 0;                     /* fills the viewport */
  background: #fff center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;                  /* white text by default */
  z-index: -2;                  /* behind nav, sections, footer */
  pointer-events: none;         /* clicks pass through to nav links */
}

/* optional darker overlay for legibility (re‑using your class) */
.hero-overlay {
  background: rgba(0,0,0,.45);
  padding: 2.5rem 3rem;
  border-radius: .5rem;
}

/* Spacer block equals viewport height */
.hero-spacer {
  height: 100vh;
  pointer-events: none;   /* 🔑 let clicks fall through to the hero overlay */
}

/* ─── Gallery section with brown centre & transparent wave edges ─── */
.gallery-section {
  position: relative;
  overflow: hidden;          /* keep SVG overflow tidy            */
}

/* 1. Brown rectangle that fills the whole section */
.gallery-section::before {
  content: '';
  position: absolute;
  inset: 0;                  /* top:0 right:0 bottom:0 left:0     */
  background: #f2ecf2;       /* light latte‑brown                 */
  z-index: -2;               /* sits behind waves & all content   */
}

.hero-fixed .hero-overlay,
.hero-fixed .hero-overlay * {
  pointer-events: auto;
}

/* keep everything in the hero background untouchable … */
.hero-fixed { pointer-events: none; }

/* …except the Book‑Now button */
.hero-fixed .btn-primary {
  pointer-events: auto;          /* clicks & hovers enabled */
}


/* bigger, brighter navbar Book‑Now button */
/* refined navbar Book‑Now button */
.btn-book {
  background: #290e29;
  border: none;
  color: #fff;
  font-size: 0.95rem;
  padding: 0.45rem 1.1rem;
  border-radius: 0.4rem;
  box-shadow: 0 2px 4px rgba(0,123,255,0.25);
  transition: background 0.2s, transform 0.2s;
}
.btn-book:hover {
  background: #4b2f4a;
  transform: translateY(-1px);
}

/* wider cells for the inventory grid */
.inventory-table th,
.inventory-table td {
  min-width: 110px;      /* tweak to taste */
}
/* spacing so gallery heading clears the upper wave */
.gallery-section .gallery-heading {
  margin-top: 60px;            /* tune as needed */
}
/* optional: full‑width CTA bar styling */
.sweet-cta {
  background: #007bff;
  color: #fff;
  padding: 2rem 1rem;
}
.sweet-cta:hover { opacity: .92; }



body.dashboard-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: -1;
}

/* Force every room slide to the same  aspect‑ratio box */
.room-img {
  width: 100%;          /* fill the card width            */
  height: 220px;        /* pick any height you like        */
  object-fit: cover;    /* crop excess while keeping ratio */
  object-position: center;
}


/* card hover → light pink */
.room-card {
  transition: background-color .3s;
}
.room-card:hover {
  background: #f9ebf0;          /* light pink */
}

/* grey stars */
.room-card .stars i { color: #adb5bd; }

/* underlined link */
.book-link {
  text-decoration: underline;
  color: var(--bs-primary);
  font-weight: 500;
}
.book-link:hover { opacity: .8; }

/* optional: section band colour (override if you want) */
.apartments-section { background: #ffffff; }  /* solid white instead of transparent */

/* make video behave like a cover image */
.hero-video {
  position: absolute;
  inset: 0;                /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;       /* crop to fill */
  z-index: -3;             /* behind overlay & sections     */
}

/* optional: fallback static poster for very old browsers */
.hero-video {
  background: #fff center/cover no-repeat;
}

/* keep existing overlay styles; ensure overlay is clickable */
.hero-fixed { pointer-events: none; }
.hero-overlay,
.hero-overlay * { pointer-events: auto; }

/* ------------ CTA section style ---------------------------- */
.cta-section {
  position: relative;
  padding: 5rem 0;                       /* top & bottom space   */
}

.cta-section::before {                   /* pink overlay layer   */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(253, 246, 248, 0.8);  /* very light pink      */
  z-index: -1;                           /* keep behind content  */
}

/* underlined Contact link */
.cta-link {
  text-decoration: underline;
  font-weight: 300;       
  color: #4b3a2f;        
  display: inline-block; 
}  
.cta-link:hover { opacity: .8; }


/* ---------- ABOUT wavy colour‑band ------------------------- */
.about-section {
  position: relative;
  overflow: hidden;
  padding: 7rem 0;                 /* wave height (80px ≈ 5rem) + 2rem extra */
}

/* coloured middle strip */
.about-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f2ecf2;             /* latte‑brown used in gallery */
  z-index: -2;                     /* sit behind waves & content  */
}

/* ensure main content sits above waves */
.about-section .container { position: relative; z-index: 1; }

.about-video-thumb { position: relative; cursor: pointer; }
.video-play-btn {
  width: 90px; height: 90px;
  font-size: 90px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,0.35);
  border: 0;
  border-radius: 50%;
  transition: transform .25s, background .25s;
}
.video-play-btn:hover { transform: scale(1.08); background: rgba(0,0,0,0.5); }
.video-play-btn i { pointer-events: none; }

/* ================= ABOUT page hero fix ==================== */
.hero-fixed {                     /* already has position:fixed in your CSS */
  z-index: -2;                    /* stays behind nav & page sections        */
}

.hero-video {                     /* make the video sit behind everything   */
  position: absolute;
  inset: 0;                       /* top:0; right:0; bottom:0; left:0        */
  width: 100%;
  height: 100%;
  object-fit: cover;              /* fill the entire header area             */
  z-index: -3;                    /* lower than the overlay text             */
}

.hero-overlay {                   /* floats above video                      */
  position: relative;             /* creates new stacking context            */
  z-index: 1;
}

/* OPTIONAL: if the white words still blend into bright frames, add shadow */
.text-shadow {
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* ---------- HERO (About page) two‑column ------------------- */
.about-hero {                     /* wrapper around hero content */
  position: relative;
  width: 100vw; height: 100vh;    /* full screen */
  overflow: hidden;
  display: flex; flex-wrap: wrap;
}

.about-hero .hero-video-wrapper { /* right half: holds the video */
  flex: 1 1 50%;
  position: relative;
}

.about-hero .hero-video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.about-hero .hero-text {          /* left half: words */
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8%;
  color: #ffffff;
  background: rgba(134, 88, 120, 0.35);    /* subtle overlay for contrast */
}

@media (max-width: 992px) {       /* stack on mobile */
  .about-hero { flex-direction: column; }
  .about-hero .hero-video-wrapper,
  .about-hero .hero-text { flex: 1 1 100%; }
}

/* ─── Read‑More accent colour ─── */
.read-more-link{
  text-decoration: underline;
  font-weight: 500;
  color:#3d333f;        /* pick any hex you love */
  transition:opacity .2s;
}
.read-more-link:hover{opacity:.8}

/* ─── Decorative “postcard” overlay à la Suites ─── */
.about-video-thumb{position:relative}
.video-edge-img{
  position:absolute;
  bottom:-55px;         /* lowers it below video */
  right:-45px; 
  top: auto;
  left: auto;         /* pushes it right‐outside edge */
  width:210px; 
  height:170px;         /* postcard size               */
  border:6px solid #fff;
  border-radius:.65rem;
  box-shadow:0 12px 28px rgba(0,0,0,.15);
  transform:none;
  pointer-events:none;  /* decoration only             */
}
@media(max-width:992px){          /* hide on small screens */
  .video-edge-img{display:none}
}

/* ─── Global font swap (Inter + Playfair) ─── */
body            {font-family:'Inter',sans-serif}
h1,h2,h3,h4,h5  {font-family:'Playfair Display',serif}

/* ─── About text tweaks ─── */
.about-text{ padding-right: 1.5rem; }

.about-title{            /* heading only */
  font-size: 2rem;       /* ≈ 32 px — adjust if you want */
  line-height: 1.2;
}

/* ─── Events section styling (Squarespace‑inspired) ───────── */
.event-media{
  position:relative;
  overflow:hidden;
  background:#eae6e1;         /* slightly darker panel makes media pop */
}
.event-media::before{         /* subtle inset border   */
  content:'';
  position:absolute; inset:0;
  border-radius:.5rem;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
  pointer-events:none;
}

.event-title{
  font-family:'Playfair Display',serif;
  font-weight:600;
  font-size:1.75rem;          /* ≈28 px */
}

.event-text{
  font-size:1.05rem;          /* just a hair larger than body */
  line-height:1.7;
}

/* ─── Events section palette ─── */

.events-heading{ color:#fffefe; }   /* deep coffee‑brown headline */

/* media card */
.event-media{
  background:#eae6e1;        /* slightly darker latte panel */
  border-radius:.75rem;
  position:relative;
}

.event-media-inner{
  padding:8%;                /* creates margin all around video */
  border-radius:.5rem;       /* matches video’s rounded corners */
  overflow:hidden;
}

/* video inherits rounded corners from the inner wrapper */
.event-media-inner video{ display:block; }

/* ─── Palette & typography ─── */
/* Make sure waves are white and content clears them */
.events-section{
  background:#290e29;       /* latte */
  padding:6rem 0;           /* pushes text below top wave */
}

.events-heading,
.events-intro{
  text-align:center;        /* override lg-start */
  max-width:800px;          /* keeps paragraph nicely narrow */
  margin-left:auto;
  margin-right:auto;
}

/* ─── Media card with visible background border ─── */
.event-media-inner{
  padding:8%;                /* shows the background frame */
  border-radius:.5rem;
  overflow:hidden;
}

/* Headings & copy */
.event-title{ font-family:'Playfair Display',serif; font-size:1.75rem; }
.event-text{ font-size:1.05rem; line-height:1.7; }


:root{
  --amenity-clr:#927592;      /* e.g. use #820d7c for purple */
}

#amenities .bi {              /* the icon */
  color:var(--amenity-clr) !important;   /* beat .text-primary */
}

#amenities p {                /* the label */
  color:var(--amenity-clr);
}
/* ============================================================
   2.  “READY TO GET STARTED?” SECTION — MAKE TEXT BLACK
   ============================================================ */
#cta, #cta h2, #cta p, #cta .cta-link{
  color:#000 !important;
}
#cta .cta-link:hover{ opacity:.8 }



/* keep the existing border‑radius so the image gets rounded too */
.event-media{border-radius:.75rem;position:relative;}

.event-media-inner{
  padding:12%;          /* ↑ was 8% — now the border is ~50 % wider */
}

@media(max-width:1200px){
  .event-media-inner{ padding:10%; }  /* slightly narrower on medium screens */
}
@media(max-width:768px){
  .event-media-inner{ padding:6%; }   /* keep mobile from looking cramped  */
}

/* ---------- tiny “Read More →” inside Events cards ---------- */
.apartments-read-link{
  position: absolute;           /* distance from card’s top edge */
  bottom: -2rem;        /* distance from card’s bottom edge */
  right: 0.5rem;
  font-size:1rem;          /* smaller than body text   */
  font-weight:500;
  text-decoration: underline;
  color:#3d333f;        /* pick any hex you love */
  transition:opacity .2s;
  
}
.apartments-read-link:hover{color:#7b727c;opacity:.8}

/* keep link on its own line on mobile */
@media(max-width:991.98px){
  .apartments-read-link{display:inline-block;margin-top:.5rem}
}


#amenities .fa-solid{ vertical-align: middle; }
#amenities i {                       /* everything in the grid  */
  font-size: 3rem;                   /* ≈ Bootstrap display‑6   */
  line-height: 1;
  color:#820d7c;  /* purple or primary */
}

/* optional fine‑tune if FA still looks a hair smaller */
#amenities .fa-person-swimming,
#amenities .fa-sun               { font-size: 3.2rem; }
/* ===== Services carousel ================================= */
.service-card{
  background:#ffffff;
  border-radius:1rem;
  box-shadow:0 10px 20px rgba(0,0,0,.05);
}
.service-card img{height:160px;object-fit:cover;}

/* Carousel dots like Reviews */
.services-carousel .owl-dots{text-align:center;margin-top:1rem;}
.services-carousel .owl-dot{
  width:10px;height:10px;margin:0 4px;border-radius:50%;
  background:#ae8cd3;transition:background .2s;
}
.services-carousel .owl-dot.active{background:#820d7c}

/* Read More bottom‑right in Services column */
.services-col{position:relative;}
.services-read-link{
  position:absolute;bottom:1.2rem;right:1.5rem;
  font-size:.85rem;font-weight:500;
  color:var(--brand-500);text-decoration:underline;
  transition:opacity .2s;
}
.services-read-link:hover{opacity:.8}

/* ========================================================
   AMENITIES‑SERVICES two‑column patch
======================================================== */

/* 1. Force exact 50/50 columns on ≥ lg */
@media (min-width: 992px){
  #amenities-services .row{
    display:flex;            /* same height columns      */
  }
  #amenities-services .col-lg-6{
    flex:0 0 50%;
    max-width:50%;
  }
}

/* 2. Add breathing room so nothing feels crowded */
#amenities-services .col-lg-6{
  padding:3rem 2.5rem;       /* top/bottom 3rem, sides 2.5rem */
}

@media (max-width: 991.98px){
  /* mobile — keep reasonable inner spacing */
  #amenities-services .col-lg-6{ padding:2rem 1.5rem; }
}

/* 3. Restore amenity icon + label colour */
#amenities-services .bi,
#amenities-services .fa-solid,
#amenities-services .amenities-section p{
  color:#820d7c;  /* default purple */
}

/* 4. (Optional) Keep icons the same size even after FA swap */
#amenities-services i{ font-size:3rem; line-height:1; }
/* ===== FORCE 50 / 50 on ≥ lg ===== */
@media (min-width: 992px){
  #amenities-services .row{display:flex}
  #amenities-services .amenities-col,
  #amenities-services .services-col{
    flex:0 0 50%; max-width:50%;
  }
}

/* ===== EVEN PADDING ===== */
#amenities-services .amenities-col,
#amenities-services .services-col{
  padding:3rem 2.5rem;
}
@media(max-width:991.98px){
  #amenities-services .amenities-col,
  #amenities-services .services-col{padding:2rem 1.5rem}
}

/* ===== PURPLE FOR *ALL* AMENITY ICONS & LABELS ===== */
:root{ --amenity-clr:#820d7c; }      /* define once */

#amenities-services .amenities-col i,
#amenities-services .amenities-col p{
  color:#820d7c!important;  /* beat old brown */
}

/* keep icon size consistent */
#amenities-services .amenities-col i{ font-size:3rem; line-height:1; }

/* optional – ensure Bootstrap’s .text-primary doesn’t override */
#amenities-services .amenities-col .text-primary{
  color:#820d7c!important;
}
/* ========== Amenities & Services final polish ========== */
.service-card{max-width:520px;margin-inline:auto}
.service-card img{height:320px;object-fit:cover}

.services-carousel .owl-dot{background:#bfa4e7;width:10px;height:10px;margin:0 4px;border-radius:50%}
.services-carousel .owl-dot.active{background:#820d7c}

:root{ --amenity-clr:#8b5189; }
#amenities-services .amenities-col i,
#amenities-services .amenities-col p,
#amenities-services .amenities-col .text-primary{
  color:#820d7c!important;
}

.services-read-link{
  font-size:.9rem;font-weight:500;
  color:#820d7c;text-decoration:underline;
  transition:opacity .2s;
}
.services-read-link:hover{opacity:.8}

#amenities i {                       /* everything in the grid  */
  font-size: 3rem;                   /* ≈ Bootstrap display‑6   */
  line-height: 1;
  color: var(--amenity-clr, var(--bs-primary));  /* purple or primary */
}

/* optional fine‑tune if FA still looks a hair smaller */
#amenities .fa-person-swimming,
#amenities .fa-sun               { font-size: 3.2rem; }
/* Purple inside Amenities grid even when text-primary is present */
#amenities-services .amenities-col .text-primary{
  color: var(--amenity-clr, #8d4289) !important;
}

/* ===== Magazine Split band ================================= */
.mag-split-section{
  background:linear-gradient(135deg,#2e0d82 0%,#820d7c 100%);
  padding:5rem 0;
  overflow:hidden;
}
.mag-head{letter-spacing:.5px}

/* Amenities slim list */
.amenities-strip{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
}
.amenities-strip li{
  flex:1 1 50%;                     /* 2‑column list on desktop */
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.08);
}
.amenities-strip li:nth-child(2n){border-right:none}
@media(max-width:991.98px){
  .amenities-strip li{flex:1 1 100%;border-right:none}
}

.amenities-strip i{
  font-size:1.4rem;color:#f3e8ff;       /* pale lavender */
}
.amenities-strip span{font-weight:500}

/* TIER 3 SPLIT DESIGN */
.tier3-section h3 { font-family: 'Playfair Display', serif; }

.tier3-amenities .bi, .tier3-amenities .fas {
  color: #820d7c !important;
}

.services-carousel .card-title {
  font-size: 1.1rem;
  color: #fff;
}

.services-carousel .card-text {
  font-size: 0.95rem;
  color: #ccc;
}

.services-carousel .owl-dot {
  width: 30px;
  height: 6px;
  background: #aaa;
  border-radius: 999px;
  margin: 0 4px;
  transition: 0.2s;
}
.services-carousel .owl-dot.active {
  background: #fff;
}
.signature-services-section {
  position: relative;
}

.signature-services-section .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4); /* dark transparent overlay */
  z-index: 1;
}

.signature-services-section .container {
  position: relative;
  z-index: 2;
}
#amenities {
  background: #f8f9fa; /* lighter backdrop if needed */
  border-radius: 1rem;
}
.signature-services-section .overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
  z-index:1;
}
.signature-services-section .container{position:relative;z-index:2}

/* purple amenity icons */
.purple-icon{color:#820d7c!important}

/* carousel dot colours */
.services-carousel .owl-dot{
  width:28px;height:6px;border-radius:9999px;
  background:#bfa4e7;margin:0 3px;transition:.2s;
}
.services-carousel .owl-dot.active{background:#fff}

/* FRAME in your regular light colour */
.signature-services-section .frame-bg{
  background:#f8f9fa;      /* use your normal page background */
  position:relative;
  overflow:hidden;          /* trims overlay edges nicely     */
  border-radius:1rem;       /* optional soft corners          */
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* INNER transparent showcase */
.signature-services-section .overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
  z-index:1;
}

/* Container holds content above overlay */
.signature-services-section .container{position:relative;z-index:2}

/* Title styling – elegant but quiet */
.signature-heading{
  font-family:'Playfair Display',serif;
  font-size:2rem;
  letter-spacing:.5px;
  color:#ffffff;
}

/* Keep dots visible on dark bg */
.services-carousel .owl-dot{
  background:#bfa4e7;width:28px;height:6px;border-radius:999px;margin:0 3px;
}
.services-carousel .owl-dot.active{background:#ffffff}
.signature-heading{font-size:1.5rem;opacity:.85;margin-bottom:2rem}

/* Light outer frame */
.frame-bg{
  background:#f8f9fa;           /* your normal page colour */
  padding:3rem 0;
  border-radius:1rem;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* Showcase area retains dark overlay only over the carousel */
.showcase-wrap{position:relative}
.local-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
  border-radius:1rem;          /* matches card corners */
  z-index:1;
  pointer-events:none;
}
.services-carousel{position:relative;z-index:2}

/* Read More alignment */
.read-more-link{
  font-size:.9rem;font-weight:500;color:#820d7c;
  text-decoration:underline;
}
@media(min-width:992px){       /* desktop */
  .read-more-link{float:right}
}
/* -- overlay just for carousel area -- */
.showcase-wrap{position:relative}
.local-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.4);       /* adjust opacity here */
  border-radius:inherit;
  z-index:1;
  pointer-events:none;
}
/* purple icons */
.purple-icon{color:#820d7c!important}

/* carousel dots */
.services-carousel .owl-dot{
  width:28px;height:6px;border-radius:9999px;
  background:#bfa4e7;margin:0 3px;transition:.2s;
}
.services-carousel .owl-dot.active{background:#fff}
.about-hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
}

.hero-text {
  z-index: 2;
  position: relative;
  width: 50%;
  padding: 4rem;
  background: rgba(0, 0, 0, 0.4); /* subtle dark bg to improve contrast */
}

.hero-video-wrapper video {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}
.about-hero {
  height: 100vh;
  display: flex;
  flex-direction: row;
  background-color: black; /* fallback if video fails */
  overflow: hidden;
}

.hero-text {
  width: 50%;
  z-index: 2;
}

.hero-video-wrapper {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.hero-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .about-hero {
    flex-direction: column;
  }

  .hero-text, .hero-video-wrapper {
    width: 100%;
    text-align: center;
  }
}
.about-hero {
  font-family: 'Cairo', sans-serif;
}
.smaller-lead {
  font-size: 1.2rem;
  line-height: 1.5;
  font-family: 'Cairo', sans-serif
}

/* 🟣 Parallax Header */

.contact-header .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

/* 🟣 Make iframe responsive */
.map-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}
.map-responsive iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  /* Services Carousel Image */
  .services-carousel .card-img-top {
    height: auto;
    max-height: 200px;
    object-fit: cover;
  }

  /* Amenities icon and label stack better */
  #amenities .col {
    flex-direction: column;
    justify-content: center;
  }

  /* CTA Buttons stack on mobile */
  .cta-section .d-flex.justify-content-center {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  /* Event media */
  .event-media video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* Event text padding */
  .events-section .col-lg-6 {
    text-align: center;
  }

  /* Review card responsiveness */
  .reviews-carousel .review-card {
    padding: 1rem;
    margin: 0 auto;
  }

  /* Footer columns stack */
  .site-footer .row > div {
    text-align: center;
  }
}

$('.services-carousel, .reviews-carousel').owlCarousel({
  loop: true,
  margin: 16,
  nav: false,
  dots: true,
  responsive: {
    0: { items: 1 },
    576: { items: 1 },
    768: { items: 2 },
    992: { items: 3 }
  }
});
@media (max-width: 768px) {
  .about-hero {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    overflow-x: auto; /* allow horizontal scroll if very narrow */
  }

  .hero-text,
  .hero-video-wrapper {
    flex: 0 0 48%; /* fixed width so they sit side by side */
    max-width: 48%;
    min-width: 280px; /* minimum width for readability */
  }

  .hero-text {
    text-align: left;
  }

  .hero-video-wrapper video {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  /* Adjust fonts for smaller widths */
  .about-hero .display-3 {
    font-size: 1.8rem;
  }
  .about-hero .lead {
    font-size: 0.9rem;
  }
}

  /* Navbar spacing fix */
  .navbar .btn-book {
    margin-top: 0.5rem;
    margin-left: 0;
  }

  /* Section spacing */
  #about-details .container,
  #signature-summary .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Signature Summary Images layout */
  #signature-summary .col-md-6:last-child {
    margin-top: 2rem;
  }

  #signature-summary .row.g-3 .col-6,
  #signature-summary .row.g-3 .col-12 {
    padding: 0.5rem;
  }

  #signature-summary img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Responsive font fallback (optional) */
  .display-3 {
    font-size: 2rem;
  }
  

  .lead {
    font-size: 1rem;
  }

body {
  padding-top: 60px; /* desktop navbar height */
}

@media (max-width: 768px) {
  .about-hero {
    display: flex !important;
    flex-wrap: nowrap !important;    /* prevent wrapping */
    overflow-x: auto !important;     /* allow horizontal scroll */
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding: 1rem !important;
    width: 100vw !important;          /* full viewport width */
    box-sizing: border-box !important;
  }
  .about-hero::-webkit-scrollbar {
    display: none; /* hide scrollbar */
  }
  .about-hero {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .hero-text,
  .hero-video-wrapper {
    flex: 0 0 100vw !important;    /* fixed width equals viewport width */
    scroll-snap-align: start !important;
    min-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .hero-text {
    text-align: center !important;
  }
  .hero-video-wrapper {
    display: block !important;       /* ensure visible */
    min-height: 200px !important;    /* optional min height */
  }
  .hero-video-wrapper video {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    display: block !important;
  }
}


/* ---------- PRIMARY COLORS ---------- */
:root {
  --navy-blue: #0b3d91;
  --green: #2e8b57;
  --yellow: #f4c430;
  --light-grey: #f2f2f2;
  --dark-grey: #4f4f4f;
  --accent-color: var(--green); /* for buttons and highlights */
}

/* ===== NAVBAR ===== */
.navbar-light .navbar-nav .nav-link {
  color: var(--navy-blue);
  font-weight: 500;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--green);
}

.btn-book {
  background-color: var(--green);
  color: white;
  border: none;
}

.btn-book:hover {
  background-color: var(--navy-blue);
}

/* ===== HERO SECTION ===== */
.hero-overlay h1,
.hero-overlay p {
  color: var(--yellow); /* bright contrast on video */
  text-shadow: 2px 2px var(--dark-grey);
}

/* ===== ABOUT SECTION ===== */
.about-title {
  color: var(--navy-blue);
}

.about-lead {
  color: var(--dark-grey);
}

.read-more-link {
  color: var(--green);
}

.read-more-link:hover {
  color: var(--navy-blue);
}

/* ===== APARTMENTS CARDS ===== */
.room-card {
  border: 1px solid var(--light-grey);
}

.room-card .card-title {
  color: var(--navy-blue);
}

.room-card .stars i {
  color: var(--yellow);
}

/* ===== SIGNATURE SERVICES ===== */
#signature-services {
  background-color: var(--light-grey);
}

.services-carousel .card-body h5 {
  color: var(--navy-blue);
}

.services-carousel .card-body p {
  color: var(--dark-grey);
}

#signature-services a {
  color: var(--green);
}

#signature-services a:hover {
  color: var(--navy-blue);
}

/* ===== CTA SECTION ===== */

.cta-section h2 {
  color: var(--yellow);
}

.cta-section p {
  color: var(--light-grey);
}

.cta-link {
  color: var(--green);
}

.cta-link:hover {
  color: var(--yellow);
  border-bottom: none;
}

/* ===== REVIEWS ===== */
.reviews-section {
  background-color: var(--light-grey);
}

.review-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.review-card h6 {
  color: var(--navy-blue);
}

/* ===== FOOTER ===== */
.site-footer {
  background-color: #06064f;
  color: white;
}

.site-footer a {
  color: var(--yellow);
}

.site-footer a:hover {
  color: var(--green);
}

.amenity-box {
  border: 1px solid var(--green);
  color: var(--navy-blue);
}

.amenity-box:hover {
  border-color: var(--yellow);
  transform: scale(1.05);
}

/* ===== MODAL ===== */
.modal-content {
  border-radius: 1rem;
}

.modal-header .modal-title {
  color: var(--green);
}

.modal-body input,
.modal-body select,
.modal-body textarea {
  border: 1px solid var(--green);
}

/* ===== FLOATING CHAT BUTTON ===== */
.chat-btn {
  background-color: var(--green);
  color: white;
  border-radius: 50%;
}

.chat-btn:hover {
  background-color: var(--navy-blue);
  color: var(--yellow);
}

/* Signature Services Section Colors */
#signature-services {
  background-color: #2e8b57; /* green background example, can switch to #f4c430 (yellow) or #f2f2f2 (light grey) */
  color: #fff; /* default text color */
}


/* Carousel cards */
.services-carousel .card-body h5 {
  color: #f2f2f2; /* light grey so it pops against green */
  font-weight: 600;
}

.services-carousel .card-body p {
  color: #e0f7e0; /* softer greenish-white for description */
}

/* Card background / border */
.services-carousel .card {
  background-color: rgba(255, 255, 255, 0.05); /* slight transparency */
  border: none;
}

/* Read More link */
#signature-services a {
  color: #f4c430; /* yellow link */
}

#signature-services a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Amenities icons */
#amenities i {
  color: #f4c430; /* yellow icons on green background */
}

#amenities span {
  color: #fff; /* white text for amenities */
}


  /* ===== FORCE HERO TITLE SLIDE UP (PARALLAX HEADER) ===== */
.hero-animate .hero-title {
  opacity: 0 !important;
  transform: translateY(60px) !important;
  animation: heroSlideUpForce 1s ease-out forwards !important;
}

/* Reuse same animation */
@keyframes heroSlideUpForce {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===== FORCE HERO TITLE ANIMATION ===== */
.hero-animate .hero-title {
  opacity: 0 !important;
  transform: translateY(60px) !important;
  animation: heroSlideUpForce 1s ease-out forwards !important;
}

/* Keyframes */
@keyframes heroSlideUpForce {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}