:root{
  --divider: #E9D2CF;
  --brand-700: #8C4A43;
  --brand-600: #A2564D;
  --bg: #FFF5F5; --fg:#111827; --muted:#6b7280;
  --brand:#B4635A; --accent:#F7E9E7; --border:#F0DDDA;
  --radius:1.25rem; --container:1100px;
  
}
*{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background: var(--bg);color:var(--fg);font-family:var(--font)}
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}
.header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav a{color:var(--fg);text-decoration:none;margin-left:1rem}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:600}
.logo-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:12px}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--border);text-decoration:none;color:var(--fg)}
.btn-primary{background:#111827;color:#fff;border-color:#111827}
.hero{position:relative;min-height:60vh;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1519400197429-404ae1a1e184?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;filter:brightness(.6) z-index:0; }
.hero-inner{position:relative;z-index:1;color:#fff;padding:4rem 0}
.hero .tag{display:inline-block;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);padding:.25rem .5rem;border-radius:999px}
.section{padding:3rem 0}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)}}
.list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.list li{display:flex;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border)}
.list li:first-child{border-top:none}
.price{font-variant-numeric:tabular-nums}
.footer{border-top:1px solid var(--border);padding:2rem 0;color:var(--muted);font-size:.9rem}
.small{color:var(--muted);font-size:.95rem}
h1,h2,h3{margin:0 0 .75rem 0} h2{font-size:1.875rem} h3{font-size:1.25rem}
.table-2col{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.table-2col > div{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between}
.table-2col > div:nth-child(odd){background:#fafafa}
hr.sep{border:none;border-top:1px solid var(--border);margin:2rem 0}
a.underline{text-decoration:underline}

/* --- Dropdown menu (pure CSS, no JS) --- */
.navbar{display:flex;align-items:center;justify-content:space-between;height:80px}
.navlinks{display:flex;align-items:center;gap:1rem}
.dropdown{position:relative}
.dropdown > a{display:inline-flex;align-items:center;gap:.35rem}
.dropdown-menu{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--border);border-radius:.75rem;box-shadow:0 6px 30px rgba(0,0,0,.08);padding:.5rem;display:none;z-index:2000;pointer-events:auto}
.dropdown:hover .dropdown-menu{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--border);border-radius:.75rem;box-shadow:0 6px 30px rgba(0,0,0,.08);padding:.5rem;display:none;z-index:2000;pointer-events:auto}
.dropdown-menu a{display:block;padding:.5rem .75rem;border-radius:.5rem;text-decoration:none;color:var(--fg)}
.dropdown-menu a:hover{background:#f3f4f6}
.dropdown-grid{display:grid;grid-template-columns:1fr;gap:.25rem}
@media(min-width:640px){.dropdown-grid{grid-template-columns:1fr 1fr}}
/* keep header sticky */
.header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}

/* Overlay fixes so dropdown stays above hero */
.header{z-index:1000}
.dropdown-menu{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--border);border-radius:.75rem;box-shadow:0 6px 30px rgba(0,0,0,.08);padding:.5rem;display:none;z-index:2000;pointer-events:auto}
.hero{position:relative}
/* Ensure hero background layer doesn't overlap header */

/* Robust dropdown behavior */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu{margin-top:0;padding:.5rem}
.dropdown-menu a{display:block}

.section{position:relative}
.section > .container{position:relative;z-index:1}

@media(min-width:992px){}
/* assign background images */




/* --- Montserrat airy font theme --- */

:root{
  --font: 'Montserrat', sans-serif;
}
body{font-family:var(--font);font-weight:300;letter-spacing:.2px}
h1,h2,h3{font-family:var(--font);font-weight:600;letter-spacing:.3px}
h1{font-size:2.5rem}
h2{font-size:1.75rem}
h3{font-size:1.25rem}
.small{font-weight:300}


/* Airy style for nav and buttons */
.navlinks a{font-weight:400;letter-spacing:.4px}
.btn{font-weight:400;letter-spacing:.3px}
.btn-primary{font-weight:500}


/* --- Dividers & Hover polish --- */
.section
.card:hover{box-shadow:0 10px 28px rgba(31,41,55,.08); transform:translateY(-1px); transition:box-shadow .2s ease, transform .08s ease}
.list li:hover{background:var(--accent)}
.navlinks a:hover::after{background:var(--brand) !important}
.btn:hover{box-shadow:0 10px 28px rgba(31,41,55,.10)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-600);border-color:var(--brand-600)}
a.underline{color:var(--brand)}
a.underline:hover{color:var(--brand-700)}


/* Replaced */
html{scroll-behavior:smooth;scroll-padding-top:88px;scroll-behavior:smooth}



/* Stylish nav & footer links */
.navlinks a,
.footer a {
  color: var(--fg);
  text-decoration: none;
  position: relative;
  font-weight: 400;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.navlinks a::after,
.footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background-color: var(--brand);
  transition: width 0.3s ease;
}

.navlinks a:hover,
.footer a:hover {
  color: var(--brand);
}

.navlinks a:hover::after,
.footer a:hover::after {
  width: 100%;
}


/* Wider nav spacing */
.navlinks {
  display: flex;
  gap: 2rem;
  align-items: center;
}


/* Softer card style */
.card {
  border-radius: 1.5rem;
  padding: 1.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  background: #fff;
}


/* --- Muted rose wash & soft cards --- */
.card{
  border-radius: 1.5rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
@media (min-width: 768px){
  .card{ padding: 1.75rem; }
}


/* Full-width hero with overlay */
.hero {
  position: relative;
  width: 100%;
  min-height: 45vh;
  background-image: url('images/hero.jpg'); /* path relative to style.css */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
}
.hero::after {
  content: "";
  position: absolute; left:0; right:0; bottom:0; height: 120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--bg) 100%);
}
@media (max-width: 768px){
  .hero{ min-height: 38vh; }
}

/* Poster-style text inside hero */
.hero-content {
  position: absolute;
  left: 50px;
  right: 24px;
  bottom: 28px;
  max-width: 700px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  animation: heroFade 600ms ease-out both;
}
.hero-content .badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: .9rem;
  backdrop-filter: blur(2px);
}
.hero-content h1 {
  margin-top: .5rem;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.25;
  font-weight: 600;
}
.hero-content .lead {
  margin-top: 0.75rem;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  opacity: .95;
}
@keyframes heroFade { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@media (max-width: 768px){
  .hero-content{ left: 20px; max-width: 100%; }
}

/* Sticky footer */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer.footer { flex-shrink: 0; border-top: 1px solid rgba(0,0,0,.1); }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Remove hero bottom fade on homepage only */
#index .hero::after { background: none !important; height: 0 !important; }


/* About box social icons */
.about-social{ display:flex; align-items:center; gap:.75rem; margin-top:.75rem; }
.about-social__label{ font-weight:600; opacity:.8; margin-right:.25rem; }
.about-social .social-icon{ display:inline-flex; align-items:center; justify-content:center; line-height:0; color: var(--brand, #9c6b6b); opacity:.9; transition: opacity .2s ease, transform .2s ease; }
.about-social .social-icon:hover{ opacity:1; transform: translateY(-1px); }
.about-social .social-icon svg{ width:22px; height:22px; stroke: currentColor; }

/* Footer divider */
footer { border-top: 1px solid rgba(0,0,0,.1); }


/* Header social icons */
.nav-social{ display:flex; align-items:center; gap:.6rem; margin-left:.75rem; }
.nav-social__link{ display:inline-flex; align-items:center; justify-content:center; color: var(--brand, #9c6b6b); opacity:.9; transition: opacity .2s ease, transform .2s ease; }
.nav-social__link:hover{ opacity:1; transform: translateY(-1px); }
.nav-social svg{ width:18px; height:18px; stroke: currentColor; }
/* Hide header icons on small screens */
@media (max-width: 640px){
  .nav-social{ display:none; }
}


/* Book Now button (homepage) solid white bg, muted rose text */
.btn-booknow{
  display:inline-block;
  padding: 0.6rem 1rem;
  border-radius: 9999px;
  border: 1.5px solid #fff;
  background:#fff;
  color: var(--brand, #9c6b6b);
  text-decoration:none;
  transition: all .2s ease;
}
.btn-booknow:hover{
  background: var(--brand, #9c6b6b);
  color:#fff;
  text-decoration:none;
}


/* Solid white pill with rose text (homepage hero) */
.btn-white-rose{
  display:inline-block;
  padding: 0.6rem 1rem;
  border-radius: 9999px;
  border: 1.5px solid #fff;
  color: var(--brand, #9c6b6b);
  background: #fff;
  text-decoration:none;
  transition: all .2s ease;
}
.btn-white-rose:hover{
  background: var(--brand, #9c6b6b);
  color: #fff;
  text-decoration:none;
}





/* Hero-specific Book Now button (refined style) */
.hero .btn {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: 7px;
  background: #fff;
  color: var(--brand, #9c6b6b);
  border: 1.5px solid #fff;
  text-decoration: none;
  transition: all .2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.hero .btn:hover {
  background: var(--brand, #9c6b6b);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}


/* Header brand logo image */
.brand-logo{
  display:block;
  height: 65px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
@media (max-width: 640px){
  .brand-logo{ height: 36px; }
}


/* Wordmark image next to BBM badge */

@media (max-width: 640px){
  
}


/* Larger brand logo image */
.brand-logo-large {
  display:block;
  height: 65px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
@media (max-width: 640px){
  .brand-logo-large { height: 38px; }
}


/* Larger brand wordmark image (no BBM badge) */

 /* slightly larger for emphasis */
@media (max-width: 640px){
  
  
}

/* Ensure brand anchor contents are vertically centered within nav */
header nav a.brand, header nav .brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}





/* Extra large brand wordmark image */

@media (max-width: 640px){
  
}