:root{
  --bg:#0a0911;
  --bg-soft:#130f1c;
  --primary:#F6C86E;       /* warm yellow */
  --primary-2:#F29F6B;     /* peachy orange */
  --text:#fff9f0;
  --muted:#e9d9c4;
  --gold:#FFD36E;
  --accent:#A07CFF;        /* soft purple accent */
  --card:#120f18;
  --glass: rgba(255, 255, 255, 0.06);
  --border: rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html,body {}
a{color:var(--primary)}
.container{max-width:1100px;margin:0 auto;padding:24px}
nav{
  position:sticky; top:0; z-index:1000;
  background: linear-gradient(90deg, rgba(14,11,20,.85), rgba(14,11,20,.65));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:48px; width:auto}
.brand span{font-weight:700; letter-spacing:.5px}
.menu a{margin:0 10px; text-decoration:none; padding:8px 10px; border-radius:8px}
.menu a:hover{background:var(--glass)}

.hero{
  padding:72px 0 60px;
}
.hero-card{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:28px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:24px; padding:28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.hero h1{font-family:"Playfair Display", Georgia, serif; font-size:48px; margin:0 0 12px}
.hero p{color:var(--muted); line-height:1.6}
.hero .cta{display:flex; gap:14px; margin-top:18px; flex-wrap:wrap}
.button{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#1b1425; font-weight:700; border:none; padding:12px 16px;
  border-radius:12px; cursor:pointer; text-decoration:none; display:inline-block;
}
.button.alt{background:transparent; color:var(--text); border:1px solid var(--border)}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px; padding:18px;
}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px}
.gallery img{width:100%; height:260px; object-fit:cover; border-radius:16px; border:1px solid var(--border)}
.section{padding:70px 0}
.section h2{font-family:"Playfair Display", Georgia, serif; font-size:36px; margin-top:0}
.kv{display:flex; gap:14px; align-items:flex-start}
.kv .k{color:var(--muted); min-width:140px}
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table tr{background:var(--card); border:1px solid var(--border)}
.table td{padding:14px 16px}
.badge{background:rgba(247,215,116,.13); color:var(--gold); border:1px solid rgba(247,215,116,.35); padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.4px}
form input, form select, form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#100b19; color:var(--text)
}
form .row{display:grid; grid-template-columns: repeat(2,1fr); gap:12px}
form button{margin-top:10px}
.small{font-size:12px; color:var(--muted)}
.reviews .item{display:flex; gap:14px; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--card)}
.stars{color:var(--gold); font-size:18px}
.footer{padding:40px 0; color:var(--muted); border-top:1px solid var(--border)}
.floating-contact{
  position:fixed; right:18px; bottom:18px; z-index:1001;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#1b1425; border-radius:999px; padding:12px 16px; font-weight:700; border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
@media (max-width: 900px){
  .hero-card{grid-template-columns:1fr; padding:22px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  form .row{grid-template-columns:1fr}
  .hero h1{font-size:36px}
}


/* --- Enhanced Home styles --- */
.hero{
  padding:90px 0 80px;
}
.hero .bg-wrap{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border:1px solid var(--border);
  background:
    radial-gradient(1200px 800px at 10% 20%, rgba(214,178,255,.25) 0%, rgba(214,178,255,0) 60%),
    radial-gradient(900px 600px at 90% 80%, rgba(233,194,230,.25) 0%, rgba(233,194,230,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 40px 120px rgba(0,0,0,.45);
}
.hero .hero-card{
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 2;
}
.hero-visual{
  background: url('assets/gallery_2.png') center/cover no-repeat, var(--card);
  border:1px solid var(--border);
  border-radius: 18px;
  min-height: 320px;
}
.trust{
  display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-top:18px
}
.trust .t{
  background: var(--card); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; text-align:center; font-size:14px; color:var(--muted)
}
.checklist{display:grid; gap:10px; margin-top:14px}
.checklist div::before{content:'✓'; margin-right:8px; color:var(--gold); font-weight:700}
.quickfacts ul{list-style:none; padding-left:0; margin:0}
.quickfacts li{display:flex; justify-content:space-between; border-bottom:1px dashed var(--border); padding:8px 0}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badges .pill{border:1px solid var(--border); background:var(--glass); padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted)}
.faq{margin-top:18px}
.faq details{border:1px solid var(--border); background:var(--card); border-radius:12px; padding:10px 12px}
.faq details+details{margin-top:10px}
.reveal{opacity:0; transform: translateY(18px); transition: all .6s ease}
.reveal.show{opacity:1; transform:none}

.reveal{opacity:0; transform: translateY(18px); transition: all .7s ease;}
.reveal.show{opacity:1; transform: translateY(0)}
.hero .overlay{
  position:relative;
}
.hero .overlay::after{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(700px 300px at 30% 20%, rgba(255,205,102,.08), transparent 60%),
              radial-gradient(700px 300px at 70% 80%, rgba(160,124,255,.08), transparent 60%);
  border-radius:24px; pointer-events:none;
}
.tagline{
  font-family:"Playfair Display", Georgia, serif; 
  font-size:20px; 
  color:var(--gold); 
  letter-spacing:.6px;
}
.promise-list{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:18px}
.promise-list .p{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px}
.promise-list .t{font-weight:700; margin-bottom:6px}
@media (max-width: 900px){
  .promise-list{grid-template-columns:1fr}
}

.about-banner{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border:1px solid var(--border);
  background: var(--card);
}
.about-banner img{
  width:100%; height: 420px; object-fit: cover; display:block; opacity:.95;
}
.about-banner .veil{
  position:absolute; inset:0;
  background: radial-gradient(700px 320px at 80% 20%, rgba(255,211,110,.18), transparent 60%),
              radial-gradient(700px 320px at 20% 90%, rgba(160,124,255,.18), transparent 60%);
  pointer-events:none;
}
.about-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; margin-top:16px}
.about-grid .card p{margin-top:6px}
.list-dot{margin:0; padding-left:18px}
.list-dot li{margin:6px 0}
@media (max-width: 900px){
  .about-grid{grid-template-columns:1fr}
  .about-banner img{height: 300px}
}

.fullbleed{width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw}
.about-banner{border-radius:0 !important; border:none !important}
.about-banner img{width:100%; height:auto !important; object-fit:contain !important}



/* Gallery Section 2x2 Grid for iOS and responsive screens */
#gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 20px;
}

#gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

/* Ensure responsive zoom and scaling for iOS */
@media screen and (max-width: 768px) {
    html {
        zoom: 1;
    }
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
}



/* Gallery Section 2x2 Grid for iOS and responsive screens */
#gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 20px;
}

#gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

/* Ensure responsive zoom and scaling for iOS */
@media screen and (max-width: 768px) {
    html {
        zoom: 1;
    }
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
}


/* ==== GLOBAL FULL BACKGROUND IMAGE ==== */
body {}

/* === Booking form spacing & layout === */
#booking form label {
    display: block;
    margin-bottom: 24px;
}

#booking input,
#booking select,
#booking textarea {
    width: 100%;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.4);
    outline: none;
    font-size: 15px;
    background: rgba(0,0,0,0.25); /* slight tint to improve visibility */
    color: white;
}
#booking option { color: black; }

#booking .card {
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    padding: 32px;
    border-radius: 12px;
}



/* ---- Reviews Styling ---- */
.review-block {
  margin-bottom: 28px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.review-block p {
  margin: 6px 0 6px;
  line-height: 1.5;
}
.review-meta {
  display: block;
  text-align: right;
  font-size: 14px;
  opacity: 0.8;
}
.stars {
  font-size: 20px;
  color: #ffcc00;
  font-weight: bold;
}


/* ---------- GLOBAL BACKGROUND GRADIENT ---------- */
body {
    background: linear-gradient(160deg, #0b0b0b 0%, #1a1a1a 45%, #121212 100%);
    background-attachment: fixed;
    color: white;
}

/* ---------- REVIEW BOX / CARD STYLING ---------- */
#reviews {
    padding-left: 18px;
    padding-right: 18px;
}

.review-block {
    background: linear-gradient(145deg, rgba(0,0,0,0.6), rgba(25,25,25,0.85));
    padding: 24px;
    border-radius: 14px;
    backdrop-filter: blur(6px);
    margin-bottom: 26px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.review-block p {
    margin: 10px 0 10px;
    line-height: 1.5;
    color: white;
}

.stars {
    font-size: 22px;
    color: #ffcc00;
    font-weight: bold;
    margin-bottom: 6px;
}

.review-meta {
    display: block;
    text-align: right;
    font-size: 13px;
    opacity: 0.85;
    color: #cfcfcf;
}



/* ========== BOOKING SECTION BACKGROUND ========== */
#booking {
    position: relative;
    padding: 60px 20px;
    background: url('assets/booking-bg.jpg') no-repeat center center / cover;
    border-radius: 0;
}

/* Box the form */
#booking .card {
    max-width: 700px;
    margin: auto;
    background: rgba(0,0,0,0.65);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
}

#booking input,
#booking select,
#booking textarea {
    background: rgba(0,0,0,0.35);
    border-radius: 10px;
    padding: 18px;
    font-size: 16px;
    color: white;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.25);
}

#booking label {
    display: block;
    margin-bottom: 20px;
    color: white;
}

#booking button {
    width: 100%;
    padding: 18px;
    border-radius: 10px;
    background: #b48a70;
    color: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
}



/* ---- ADD‑ONS STYLING ---- */
.addons-section {
  margin-top: 40px;
}

.addons-section h3 {
  margin-bottom: 20px;
  font-size: 22px;
  color: #ffffff;
}

.addon-box {
  background: linear-gradient(145deg, rgba(0,0,0,0.65), rgba(25,25,25,0.85));
  padding: 18px 22px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  font-size: 17px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.addon-box span {
  color: #ffcc88;
  font-weight: 600;
}

.addon-box.highlight {
  border: 1px solid #ffcc88;
}



/* ---- Contact Icons Grid ---- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: white;
  background: linear-gradient(145deg, rgba(0,0,0,0.6), rgba(25,25,25,0.88));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  backdrop-filter: blur(5px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.contact-card:hover, .contact-card:active {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.45);
  border-color: rgba(255, 204, 136, 0.6);
}
.contact-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.tiny.muted {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.75;
}