/* ════════════════════════════════════════
   Tasneem Aqua Sports — style.css
   Bootstrap 5 RTL + Tailwind CSS
   Cross-browser validated · Digiolia © 2025
════════════════════════════════════════ */

/* ══ RESET & GLOBAL ═══════════════════════════════ */
*, *::before, *::after { font-family: 'Cairo', sans-serif !important; box-sizing: border-box; margin: 0; padding: 0; }

/* ── NO HORIZONTAL SCROLL (all browsers) ── */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100%;
  direction: rtl;
  background: #fff;
  color: #0D2040;
  -webkit-text-size-adjust: 100%;   /* Safari auto-zoom fix */
  text-size-adjust: 100%;
}

:root {
  --brand-dark:  #0D2040;
  --brand-mid:   #3B68A3;
  --brand-light: #5B96D4;
  --brand-foam:  #B8D4F0;
  --sea-sand:    #EEF5FC;
  --muted:       #5A7899;
  --white:       #FFFFFF;
  --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
}

/* ══ DESKTOP NAVBAR ════════════════════════════════ */
.main-nav {
  background: rgba(13,32,64,.85) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .3s, box-shadow .3s;
  z-index: 1050;
  padding: .6rem 0;
}
.main-nav.scrolled { background: rgba(13,32,64,.98) !important; box-shadow: 0 4px 24px rgba(0,0,0,.28); }
.brand-name { font-size: .95rem; font-weight: 800; color: #fff; line-height: 1.2; }
.brand-sub  { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-foam); opacity: .85; }
.nav-link-custom {
  color: rgba(255,255,255,.78);
  font-weight: 600; font-size: .95rem;
  text-decoration: none; padding: .45rem .8rem;
  border-radius: 8px; transition: color .2s, background .2s;
}
.nav-link-custom:hover  { color: #fff; background: rgba(255,255,255,.08); }
.nav-link-custom.active { color: var(--brand-foam); }

/* ══ MOBILE TOPBAR ═════════════════════════════════ */
.mobile-topbar {
  background: rgba(13,32,64,.93);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: .65rem 1rem;
  z-index: 1050; transition: background .3s;
}
.mobile-topbar.scrolled { background: rgba(13,32,64,.98); }
.mobile-brand-name { font-size: .85rem; font-weight: 800; color: #fff; line-height: 1.2; }
.mobile-brand-sub  { font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-foam); opacity: .8; }

/* ══ BUTTONS ════════════════════════════════════════ */
.btn-brand {
  background: var(--brand-mid); color: #fff !important; border: none;
  box-shadow: 0 6px 22px rgba(59,104,163,.38);
  transition: background .2s, -webkit-transform .2s, transform .2s, box-shadow .2s;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.btn-brand:hover { background: #2E5590; color: #fff !important; -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(59,104,163,.50); }

.btn-brand-sm {
  background: var(--brand-mid); color: #fff !important; border: none;
  padding: .38rem 1.1rem; font-size: .82rem; font-weight: 800; border-radius: 50px;
  box-shadow: 0 4px 14px rgba(59,104,163,.4); text-decoration: none;
  transition: background .2s, -webkit-transform .2s, transform .2s; display: inline-block;
}
.btn-brand-sm:hover { background: #2E5590; -webkit-transform: scale(1.04); transform: scale(1.04); }

.btn-ghost-white {
  background: rgba(255,255,255,.10); color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.25);
  transition: background .2s, -webkit-transform .2s, transform .2s;
}
.btn-ghost-white:hover { background: rgba(255,255,255,.20); color: #fff !important; -webkit-transform: translateY(-2px); transform: translateY(-2px); }

.btn-whatsapp {
  background: #25D366; color: #fff !important; border: none;
  box-shadow: 0 6px 22px rgba(37,211,102,.38);
  transition: background .2s, -webkit-transform .2s, transform .2s;
}
.btn-whatsapp:hover { background: #1da851; color: #fff !important; -webkit-transform: translateY(-2px); transform: translateY(-2px); }

.btn-ghost-dark {
  background: transparent; color: var(--muted) !important;
  border: 1.5px solid #dee2e6; transition: all .2s;
}
.btn-ghost-dark:hover { background: #f8f9fa; color: var(--brand-dark) !important; border-color: #adb5bd; }

/* ══ HERO ══════════════════════════════════════════ */
.hero-section {
  position: relative; overflow: hidden;
  min-height: 100vh;     /* fallback for browsers without svh */
  min-height: 100svh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 6rem;
}

/* ── Hero Slideshow ── */
.hero-slideshow { position: absolute; inset: 0; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center center;
  opacity: 0;
  transition: opacity 1.8s ease;
  -webkit-animation: kenburns 8s ease-in-out infinite alternate;
  animation: kenburns 8s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.hero-slide.active { opacity: 1; }

@-webkit-keyframes kenburns {
  0%   { -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); }
  100% { -webkit-transform: scale(1.07) translateX(-1.5%); transform: scale(1.07) translateX(-1.5%); }
}
@keyframes kenburns {
  0%   { -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); }
  100% { -webkit-transform: scale(1.07) translateX(-1.5%); transform: scale(1.07) translateX(-1.5%); }
}

.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: -webkit-linear-gradient(top, rgba(13,32,64,.35) 0%, rgba(13,32,64,.58) 30%, rgba(13,32,64,.80) 60%, rgba(13,32,64,.96) 100%);
  background:         linear-gradient(to bottom, rgba(13,32,64,.35) 0%, rgba(13,32,64,.58) 30%, rgba(13,32,64,.80) 60%, rgba(13,32,64,.96) 100%);
}

/* ── Floating icons strip ── */
.hero-icons-strip {
  position: absolute; bottom: 80px;
  left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
  width: min(600px, 88vw);        /* never wider than viewport */
  max-width: 88vw;
  opacity: .12; pointer-events: none; z-index: 2;
  -webkit-filter: brightness(5) saturate(0);
  filter: brightness(5) saturate(0);
  -webkit-animation: icons-float 6s ease-in-out infinite;
  animation: icons-float 6s ease-in-out infinite;
}
@-webkit-keyframes icons-float {
  0%,100% { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); }
  50%      { -webkit-transform: translateX(-50%) translateY(-8px); transform: translateX(-50%) translateY(-8px); }
}
@keyframes icons-float {
  0%,100% { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); }
  50%      { -webkit-transform: translateX(-50%) translateY(-8px); transform: translateX(-50%) translateY(-8px); }
}

/* ── Hero content ── */
.hero-content { max-width: 860px; width: 100%; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 4; }

.hero-logo {
  height: 140px; width: auto; max-width: 85vw;
  -o-object-fit: contain; object-fit: contain;
  display: block; margin: 0 auto;
  -webkit-filter: drop-shadow(0 4px 20px rgba(0,0,0,.45));
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.45));
  -webkit-animation: logo-float 4s ease-in-out infinite;
  animation: logo-float 4s ease-in-out infinite;
}
@-webkit-keyframes logo-float {
  0%,100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50%      { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
}
@keyframes logo-float {
  0%,100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50%      { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
}

.hero-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: .45rem;
  background: rgba(91,150,212,.18);
  border: 1px solid rgba(184,212,240,.32);
  color: var(--brand-foam);
  font-size: .8rem; font-weight: 600;
  padding: .35rem 1.1rem; border-radius: 50px;
  letter-spacing: .04em; margin: .9rem auto;
}

.hero-title { color: #fff; font-weight: 700; margin: .4rem 0 .9rem; }
.hero-title-main {
  display: block;
  font-size: clamp(1.2rem, 4vw, 3rem);
  line-height: 2;
  text-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.hero-title-sub {
  display: block;
  font-size: clamp(.88rem, 2.2vw, 1.2rem);
  color: var(--brand-foam); font-weight: 600;
  margin-top: .4rem; opacity: .9;
}
.hero-title-sub,
.hero-title-sub:hover,
.hero-title-sub:focus,
.hero-title-sub:visited {
  text-decoration: none;
}

.hero-pills {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  gap: .4rem; margin: .7rem 0;
}
.act-pill {
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.18);
  padding: .22rem .75rem; border-radius: 50px;
  font-size: .76rem; font-weight: 600;
  white-space: nowrap;
}

/* Slide dots */
.hero-slide-dots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: .5rem; margin: .6rem 0; }
.hsd { width: 28px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); transition: all .4s; cursor: pointer; }
.hsd.active { background: #fff; width: 44px; }

.hero-btns {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  gap: 1rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 1.3rem;
}
.btn-hero-primary {
  background: var(--brand-mid); color: #fff; font-size: 1.05rem; font-weight: 800;
  padding: .85rem 2.4rem; border-radius: 50px; text-decoration: none;
  box-shadow: 0 8px 28px rgba(59,104,163,.50);
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: .4rem;
  -webkit-transform: translateZ(0); transform: translateZ(0);
  transition: background .2s, -webkit-transform .2s, transform .2s, box-shadow .2s;
}
.btn-hero-primary:hover { background: #2E5590; -webkit-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 0 14px 36px rgba(59,104,163,.6); color: #fff; }
.btn-hero-ghost {
  background: rgba(255,255,255,.09); color: #fff; font-size: 1rem; font-weight: 600;
  padding: .85rem 2rem; border-radius: 50px; text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.24);
  transition: background .2s, -webkit-transform .2s, transform .2s;
}
.btn-hero-ghost:hover { background: rgba(255,255,255,.18); -webkit-transform: translateY(-3px); transform: translateY(-3px); color: #fff; }

.scroll-hint {
  color: rgba(255,255,255,.4); margin-top: 1.6rem; display: inline-block;
  -webkit-animation: bob 2.4s ease-in-out infinite;
  animation: bob 2.4s ease-in-out infinite;
}
@-webkit-keyframes bob { 0%,100%{ -webkit-transform:translateY(0); transform:translateY(0); } 50%{ -webkit-transform:translateY(8px); transform:translateY(8px); } }
@keyframes bob         { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }

/* Bubbles */
.bubble {
  position: absolute; border-radius: 50%;
  background: rgba(91,150,212,.07);
  -webkit-animation: rise linear infinite;
  animation: rise linear infinite;
}
@-webkit-keyframes rise {
  0%   { -webkit-transform:translateY(110vh) scale(.4); transform:translateY(110vh) scale(.4); opacity:0; }
  8%   { opacity:.9; } 92%{ opacity:.4; }
  100% { -webkit-transform:translateY(-15vh) scale(1.1); transform:translateY(-15vh) scale(1.1); opacity:0; }
}
@keyframes rise {
  0%   { transform:translateY(110vh) scale(.4); opacity:0; }
  8%   { opacity:.9; } 92%{ opacity:.4; }
  100% { transform:translateY(-15vh) scale(1.1); opacity:0; }
}

.wave-down { position:absolute; bottom:-1px; left:0; right:0; line-height:0; overflow:hidden; }
.wave-up   { position:absolute; top:-1px;    left:0; right:0; line-height:0; overflow:hidden; }
.wave-down svg, .wave-up svg { width:100%; height:auto; display:block; }

/* ══ SECTION LABELS ════════════════════════════════ */
.sec-eye   { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--brand-mid); margin-bottom:.5rem; }
.sec-title { font-size:clamp(1.7rem,3.5vw,2.5rem); font-weight:900; line-height:1.2; }
.sec-sub   { color:var(--muted); font-size:.95rem; line-height:1.75; max-width:500px; margin-inline:auto; }

/* ══ ACTIVITY CARDS — desktop ══════════════════════ */
.activities-section { background:var(--sea-sand); padding:6rem 0 5rem; overflow:hidden; }

.activity-card {
  background:#fff; border-radius:var(--r-lg); overflow:hidden; height:100%;
  border-top:4px solid var(--accent);
  box-shadow:0 2px 16px rgba(13,32,64,.07);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  transition:-webkit-transform .3s, transform .3s, box-shadow .3s;
  -webkit-transform:translateZ(0); transform:translateZ(0);
}
.activity-card:hover { -webkit-transform:translateY(-7px); transform:translateY(-7px); box-shadow:0 18px 48px rgba(59,104,163,.15); }

.ac-photo {
  height:200px; position:relative; overflow:hidden;
  background-size:cover; background-position:center;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
.ac-photo-overlay {
  position:absolute; inset:0;
  background:-webkit-linear-gradient(top, rgba(13,32,64,.1) 0%, rgba(13,32,64,.55) 100%);
  background:         linear-gradient(to bottom, rgba(13,32,64,.1) 0%, rgba(13,32,64,.55) 100%);
}
.ac-emoji  { font-size:2.8rem; position:relative; z-index:1; -webkit-filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)); filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.ac-body   { padding:1.3rem 1.4rem 1.4rem; -webkit-box-flex:1; -ms-flex:1; flex:1; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; }
.ac-name   { font-size:1.12rem; font-weight:900; color:var(--brand-dark); margin-bottom:.2rem; }
.ac-en     { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-mid); font-weight:700; margin-bottom:.65rem; }
.ac-desc   { font-size:.87rem; color:var(--muted); line-height:1.7; -webkit-box-flex:1; -ms-flex:1; flex:1; margin-bottom:1rem; }
.ac-book   { color:var(--brand-mid); border:1.5px solid var(--brand-mid); background:transparent; font-size:.82rem; font-weight:700; padding:.42rem 1.1rem; border-radius:50px; text-decoration:none; display:inline-block; transition:all .2s; -ms-flex-item-align:start; align-self:flex-start; }
.ac-book:hover { background:var(--brand-mid); color:#fff; }

/* ══ MOBILE ACTIVITIES — horizontal scroll ═════════ */
.mobile-activities { position:relative; overflow:hidden; }
.mobile-act-scroll {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  gap:1rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  -ms-scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:.5rem 1rem 1rem;
  /* Prevent vertical scroll interference */
  overscroll-behavior-x:contain;
}
.mobile-act-scroll::-webkit-scrollbar { display:none; }

.mob-act-card {
  min-width:74vw; max-width:290px;
  -webkit-scroll-snap-align:center; scroll-snap-align:center;
  -webkit-box-flex:0; -ms-flex:0 0 auto; flex:0 0 auto;
  background:#fff; border-radius:var(--r-lg);
  box-shadow:0 4px 20px rgba(13,32,64,.10); overflow:hidden;
}
.mac-photo { height:128px; position:relative; background-size:cover; background-position:center; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.mac-photo-overlay { position:absolute; inset:0; }
.mac-emoji { font-size:3rem; position:relative; z-index:1; -webkit-filter:drop-shadow(0 2px 10px rgba(0,0,0,.35)); filter:drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.mac-body  { padding:1rem 1.1rem 1.2rem; }
.mac-name  { font-size:1.05rem; font-weight:900; color:var(--brand-dark); margin-bottom:.15rem; }
.mac-en    { font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-mid); font-weight:700; margin-bottom:.6rem; }
.mac-desc  { font-size:.83rem; color:var(--muted); line-height:1.65; margin-bottom:.85rem; }
.mac-btn   { display:block; width:100%; text-align:center; color:#fff; font-weight:800; font-size:.88rem; padding:.5rem 1rem; border-radius:50px; text-decoration:none; transition:opacity .2s; }
.mac-btn:hover { opacity:.88; color:#fff; }

.scroll-dots { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; gap:.45rem; padding:.5rem 0 .3rem; }
.sdot { width:7px; height:7px; border-radius:50%; background:rgba(59,104,163,.25); transition:all .3s; cursor:pointer; }
.sdot.active { background:var(--brand-mid); -webkit-transform:scale(1.3); transform:scale(1.3); }

/* ══ VIBE SECTION ═══════════════════════════════════ */
.vibe-section {
  background:-webkit-linear-gradient(135deg, #0D2040 0%, #1A3A6A 60%, #2B5494 100%);
  background:         linear-gradient(135deg, #0D2040 0%, #1A3A6A 60%, #2B5494 100%);
  padding:6rem 1.5rem; overflow:hidden;
}
.vibe-dots { background-image:radial-gradient(rgba(91,150,212,.07) 1px,transparent 1px); background-size:34px 34px; }
.vibe-quote { font-size:clamp(1.5rem,3.5vw,2.4rem); font-weight:900; color:#fff; line-height:1.35; }
.vibe-body  { color:rgba(184,212,240,.75); line-height:1.85; max-width:580px; margin-inline:auto; }
.stat-num   { font-size:1.85rem; font-weight:900; color:#fff; line-height:1; }
.stat-lbl   { font-size:.74rem; color:var(--brand-foam); opacity:.75; margin-top:.3rem; }

/* ══ LOCATION ═══════════════════════════════════════ */
.location-section { padding:5rem 0; }
.loc-icon { font-size:1.4rem; -ms-flex-negative:0; flex-shrink:0; margin-top:.05rem; }
.loc-lbl  { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; }
.loc-val  { font-size:1rem; font-weight:700; color:var(--brand-dark); line-height:1.5; } a { text-decoration: none; color: inherit;}
.map-card {
  height:280px;
  background:-webkit-linear-gradient(135deg,#c8e6f7,#90c8ec);
  background:         linear-gradient(135deg,#c8e6f7,#90c8ec);
  border:2px dashed rgba(59,104,163,.25); border-radius:var(--r-lg);
  text-decoration:none;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  gap:.9rem; transition:border-color .2s, -webkit-transform .2s, transform .2s;
}
.map-card:hover { border-color:var(--brand-mid); -webkit-transform:translateY(-4px); transform:translateY(-4px); }

/* ══ SOCIAL ═════════════════════════════════════════ */
.social-section { background:var(--brand-dark); padding:5rem 1.5rem; overflow:hidden; }
.s-btn { display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:.55rem; padding:.65rem 1.4rem; border-radius:50px; font-weight:700; font-size:.88rem; white-space:nowrap; text-decoration:none; border:1.5px solid; transition:all .22s; }
.s-fb  { color:#90CAF9; border-color:rgba(144,202,249,.3); background:rgba(144,202,249,.08); }
.s-fb:hover  { background:#1877F2; color:#fff; border-color:#1877F2; }
.s-ig  { color:#F48FB1; border-color:rgba(244,143,177,.3); background:rgba(244,143,177,.08); }
.s-ig:hover  { background:#E1306C; color:#fff; border-color:#E1306C; }
.s-tt  { color:#B2EBF2; border-color:rgba(178,235,242,.3); background:rgba(178,235,242,.08); }
.s-tt:hover  { background:#010101; color:#fff; border-color:#fff; }
.s-sc  { color:#FFFDE7; border-color:rgba(255,253,231,.3); background:rgba(255,253,231,.08); }
.s-sc:hover  { background:#FFFC00; color:#1a1a1a; border-color:#FFFC00; }
.s-th  { color:#E1BEE7; border-color:rgba(225,190,231,.3); background:rgba(225,190,231,.08); }
.s-th:hover  { background:#101010; color:#fff; border-color:#fff; }

/* ══ FOOTER ═════════════════════════════════════════ */
.site-footer { background:#060F1E; color:rgba(255,255,255,.28); font-size:.78rem; line-height:1.7; padding:1.8rem 1rem; text-align:center; }
.site-footer a { color:var(--brand-light); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

/* ══ MOBILE BOTTOM NAV ══════════════════════════════ */
.mobile-bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:1200;
  background:rgba(10,20,45,.97);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.09);
  padding:8px 4px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:flex-start; -ms-flex-align:flex-start; align-items:flex-start;
  -webkit-box-pack:space-around; -ms-flex-pack:space-around; justify-content:space-around;
}
.mbn-item {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  gap:3px; color:rgba(255,255,255,.45); text-decoration:none;
  font-size:.62rem; font-weight:600; padding:4px 6px;
  min-width:48px; -webkit-box-flex:1; -ms-flex:1; flex:1;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s;
}
.mbn-item:hover, .mbn-item.active { color:var(--brand-light); }
.mbn-item svg { transition:-webkit-transform .2s; transition:transform .2s; }
.mbn-item.active svg { -webkit-transform:scale(1.1); transform:scale(1.1); }
.mbn-book-btn { color:rgba(255,255,255,.85) !important; margin-top:-20px; position:relative; z-index:2; }
.mbn-book-circle {
  width:56px; height:56px; border-radius:50%;
  background:-webkit-linear-gradient(135deg,var(--brand-light),var(--brand-mid));
  background:         linear-gradient(135deg,var(--brand-light),var(--brand-mid));
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  box-shadow:0 4px 18px rgba(59,104,163,.55); color:#fff;
  transition:-webkit-transform .2s, transform .2s, box-shadow .2s;
}
.mbn-book-btn:hover .mbn-book-circle { -webkit-transform:scale(1.08); transform:scale(1.08); }
.mbn-book-btn span { font-size:.62rem; font-weight:700; margin-top:3px; }

/* ══ BOOKING MODAL ══════════════════════════════════ */

/* Raise modal ABOVE bottom nav (z-index 1200) */
#bookingModal          { z-index: 1310 !important; }
.modal-backdrop        { z-index: 1309 !important; }

/* Hide bottom nav while booking modal is open */
body.modal-booking-open .mobile-bottom-nav { display:none !important; }

/* Dialog wrapper */
.booking-dialog {
  margin:0 auto;
  max-width:720px; width:100%;
  display:-webkit-box !important; display:-ms-flexbox !important; display:flex !important;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  min-height:calc(100% - 1rem);
  pointer-events:none;
}

/* The white card */
.booking-content {
  border-radius:20px !important; overflow:hidden;
  pointer-events:all; width:100%;
  display:-webkit-box !important; display:-ms-flexbox !important; display:flex !important;
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -ms-flex-direction:column; flex-direction:column !important;
  max-height:90vh;
}

/* Header — fixed, never scrolls */
.booking-header {
  background:-webkit-linear-gradient(135deg,#0D2040 0%,#3B68A3 100%);
  background:         linear-gradient(135deg,#0D2040 0%,#3B68A3 100%);
  padding:1.1rem 1.4rem;
  -webkit-box-flex:0; -ms-flex-negative:0; flex-shrink:0;
}
.booking-header-sub { font-size:.77rem; opacity:.7; color:var(--brand-foam); }

/* Scrollable body */
.booking-body {
  -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:1.4rem 1.5rem 1.5rem;
}

/* Footer bar — scrolls with content, not sticky */
.booking-footer-bar {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  gap:.75rem; margin-top:1.2rem;
  padding:1rem 0 1.8rem;
  border-top:1px solid #e9ecef;
}

/* Mobile: bottom sheet */
@media (max-width:767.98px) {
  .booking-dialog {
    position:fixed !important;
    inset:auto 0 0 0 !important;
    margin:0 !important;
    max-width:100% !important;
    min-height:auto !important;
    -webkit-box-align:flex-end !important; -ms-flex-align:flex-end !important; align-items:flex-end !important;
  }
  .booking-content {
    border-radius:24px 24px 0 0 !important;
    max-height:calc(100vh - 56px) !important;
    max-height:calc(100svh - 56px) !important;
  }
  .modal.fade  .booking-dialog { -webkit-transform:translateY(100%); transform:translateY(100%); transition:-webkit-transform .38s cubic-bezier(.32,.72,0,1); transition:transform .38s cubic-bezier(.32,.72,0,1); }
  .modal.show  .booking-dialog { -webkit-transform:translateY(0) !important; transform:translateY(0) !important; }
  .booking-body { padding:1.1rem 1rem 0.5rem; }
  .booking-footer-bar {
    -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
    -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch;
    padding:.8rem 0 calc(1.2rem + env(safe-area-inset-bottom, 0px));
  }
  .booking-footer-bar .btn { width:100%; justify-content:center; -webkit-box-pack:center; }
}

/* iOS: prevent zoom on select/input focus */
.form-control-custom, .form-select { font-size:16px !important; }

/* Form styles */
.form-label-custom { font-weight:700; font-size:.88rem; color:var(--brand-dark); margin-bottom:.35rem; display:block; }
.form-control-custom {
  border:1.5px solid #dee2e6; border-radius:var(--r-sm);
  padding:.6rem .88rem; color:var(--brand-dark);
  transition:border-color .2s, box-shadow .2s; background:#fff;
  width:100%; appearance:none; -webkit-appearance:none;
  -moz-appearance:none;
}
.form-control-custom:focus   { border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(59,104,163,.12); outline:none; }
.form-control-custom.is-invalid { border-color:#dc3545; box-shadow:0 0 0 3px rgba(220,53,69,.10); }
.form-control-custom.is-valid   { border-color:#198754; box-shadow:0 0 0 3px rgba(25,135,84,.10); }
.invalid-feedback { font-size:.78rem; font-weight:600; }
.form-select.form-control-custom { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A7899' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left .75rem center; padding-left:2.5rem; background-size:16px; }

/* Success */
.success-icon { font-size:4.5rem; -webkit-animation:bounce-in .6s cubic-bezier(.36,.07,.19,.97) both; animation:bounce-in .6s cubic-bezier(.36,.07,.19,.97) both; }
@-webkit-keyframes bounce-in { 0%{-webkit-transform:scale(.3);transform:scale(.3);opacity:0} 50%{-webkit-transform:scale(1.08);transform:scale(1.08);opacity:1} 70%{-webkit-transform:scale(.95);transform:scale(.95)} 100%{-webkit-transform:scale(1);transform:scale(1)} }
@keyframes bounce-in { 0%{transform:scale(.3);opacity:0} 50%{transform:scale(1.08);opacity:1} 70%{transform:scale(.95)} 100%{transform:scale(1)} }
.success-details { background:#eff8ff; border:1px solid #bfdbfe; color:#1e40af; font-size:.88rem; font-weight:600; text-align:right; border-radius:var(--r-sm); }
.modal-backdrop { --bs-backdrop-opacity:.65; }

/* ══ SCROLL REVEAL ══════════════════════════════════ */
.fi { opacity:0; -webkit-transform:translateY(28px); transform:translateY(28px); transition:opacity .7s ease, -webkit-transform .7s ease; transition:opacity .7s ease, transform .7s ease; }
.fi.d1 { transition-delay:.10s; } .fi.d2 { transition-delay:.20s; } .fi.d3 { transition-delay:.30s; }
.fi.show { opacity:1; -webkit-transform:none; transform:none; }

/* ══ BODY PADDING FOR FIXED BARS ════════════════════ */
@media (min-width:992px) {
  body { padding-top:68px; }
  .hero-section { padding-top:5rem; }
}
@media (max-width:991.98px) {
  body { padding-top:56px; padding-bottom:78px; }
  .hero-section { min-height:100vh; min-height:100svh; padding-top:4.5rem; padding-bottom:5rem; }
  .hero-logo { height:110px; max-width:80vw; }
  .hero-title-main { font-size:clamp(1.2rem,4vw,2.6rem); }
  .hero-title-sub  { font-size:clamp(.82rem,2.1vw,1.05rem); text-decoration: none;}
  .activities-section { padding:4rem 0 2.5rem; }
  .vibe-section       { padding:5rem 1.5rem; }
  .location-section   { padding:3.5rem 0; }
  .social-section     { padding:4rem 1.5rem; }
  .map-card           { height:220px; }
  .hero-icons-strip   { bottom:95px; opacity:.07; }
  .hero-slide-dots    { display:none; } /* hide on small screens to reduce clutter */
}
@media (max-width:480px) {
  .hero-logo       { height:95px; }
  .act-pill        { font-size:.72rem; padding:.2rem .65rem; }
  .hero-btns       { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; width:100%; }
  .btn-hero-primary, .btn-hero-ghost { padding:.8rem 1.5rem; font-size:.95rem; width:100%; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
  .s-btn           { padding:.55rem 1rem; font-size:.82rem; }
  .hero-badge      { font-size:.72rem; padding:.28rem .8rem; }
}

/* ══ SAFARI / FIREFOX SCROLL FIX ════════════════════ */
* { -webkit-box-sizing:border-box; box-sizing:border-box; }
img { max-width:100%; height:auto; }
svg { overflow:hidden; }