/*
Theme Name: Safari Handwritten
Author: Custom
Version: 2.0
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Pacifico&family=Inter:wght@300;400;500&display=swap');

/* RESET */

*{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}
ul{padding-left:18px}

/* VARIABLES */
:root{
  --headerH:92px;
  --accent:#e45b3a;
  --ink:#ffffff;
  --muted:rgba(255,255,255,0.88);
  --bg:#070707;
  --shadow:0 18px 40px rgba(0,0,0,0.40);
}

/* GLOBAL */
html,body{background:var(--bg)}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 500px at 15% 15%, rgba(228,91,58,0.06), transparent 55%),
    var(--bg);
}

/* default pages offset for fixed header */
main{display:block;padding-top:var(--headerH)}

/* HEADER */
.site-header{
  position:fixed; top:0; left:0;
  width:100%; z-index:999;
  background:rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.header-inner{
  max-width:1240px;
  margin:0 auto;
  padding:18px 60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
}
.brand{display:flex;flex-direction:column;line-height:1}
.brand-script{
  font-family:'Pacifico',cursive;
  font-size:28px;
  letter-spacing:.5px;
  text-shadow:0 10px 30px rgba(0,0,0,0.30);
}
.brand-sub{
  margin-top:6px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.82;
}
.site-nav .menu{
  display:flex;
  gap:28px;
  align-items:center;
  list-style:none;
}
.site-nav .menu a{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.92;
  transition:transform .2s ease, opacity .2s ease;
}
.site-nav .menu a:hover{transform:translateY(-2px);opacity:1}

.enquire{
  background:var(--accent);
  padding:12px 26px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.enquire:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,0.35);opacity:.96}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  padding:14px 34px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,0.35);opacity:.96}
.btn.ghost{
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.28);
}

/* =====================================================
   HOMEPAGE HERO (VIDEO + BRIGHT FALLBACK)
   ===================================================== */
body.front-page main{ padding-top:0 !important; }

.hero{
  height:100vh;
  position:relative;
  overflow:hidden;
  background:#000;
}

/* fallback image behind video (BRIGHT so it never looks dark) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--heroFallback);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.02);
  filter: brightness(1.28) contrast(1.06) saturate(1.10);
}

/* video full bleed */
.hero video,
.hero #heroVideo{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  z-index:1 !important;
}

/* LIGHT overlay (your old one was too dark) */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(rgba(0,0,0,0.06), rgba(0,0,0,0.32));
}

.hero-content{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 18px;
  padding-top:var(--headerH);
}
.hero-content h1{
  font-family:'Pacifico',cursive;
  font-size:clamp(44px, 5vw, 66px);
  letter-spacing:.5px;
  text-shadow:0 12px 34px rgba(0,0,0,0.35);
}
.hero-content h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(24px, 3.5vw, 46px);
  opacity:0.96;
  text-shadow:0 12px 34px rgba(0,0,0,0.25);
}
.hero-content p{
  max-width:650px;
  margin-top:18px;
  line-height:1.7;
  color:var(--muted);
}
.hero-actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* =====================================================
   HOMEPAGE MID SCROLL (BRIGHTER)
   ===================================================== */
.home-scroll{
  position:relative;
  min-height:200vh;
  overflow:hidden;
  background:#000;
}
.home-scroll-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.home-scroll-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: brightness(1.12) contrast(1.05) saturate(1.08);
}

/* MAIN CULPRIT: overlay too dark — fix */
.home-scroll-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.32));
}

.home-scroll-panels{ position:relative; z-index:2; }

.home-panel{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  padding:calc(var(--headerH) + 30px) 7% 80px;
}
.home-panel-inner{ width:100%; max-width:1200px; margin:0 auto; }

.home-guides-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.guide-card{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  padding:44px;
  box-shadow: var(--shadow);
}
.guide-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.guide-kicker{
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:.82;
}
.guide-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.22);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.guide-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,0.18);opacity:.98}
.guide-title{ font-family:'Playfair Display',serif; font-size:42px; line-height:1.05; }
.guide-copy{ margin-top:14px; max-width:520px; line-height:1.75; opacity:.92; }

.home-panel-hint{
  margin-top:26px;
  display:flex;
  gap:10px;
  align-items:center;
  opacity:.90;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:11px;
}
.hint-arrow{ font-size:14px; opacity:.9 }

.planner-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(28px,2.4vw,40px);
  margin-top:10px;
}
.planner-copy{ margin-top:12px; max-width:720px; line-height:1.7; opacity:.92; }
.planner-actions{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }

/* PHOTO BREAK — IMPORTANT FIX: your old URL was wrong */
.home-photo-break{
  height:90vh;
  display:flex;
  align-items:flex-end;
  background:
    linear-gradient(to top, rgba(0,0,0,0.50), rgba(0,0,0,0.06)),
    url('./assets/img/safari.jpg') center/cover no-repeat;
}
.home-photo-break-inner{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:0 7% 70px;
}
.photo-break-title{
  font-family:'Playfair Display',serif;
  font-size:54px;
  line-height:1.05;
}

/* SPLIT SECTION */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
}
.split-img{ background-size:cover; background-position:center; }
.split-content{
  background:#c9973f;
  padding:10%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#111;
}
.script{
  font-family:'Pacifico',cursive;
  font-size:32px;
  margin:15px 0;
  letter-spacing:.4px;
}

/* =====================================================
   ENQUIRE PAGE (PRO WIZARD)
   ===================================================== */
.page-template-page-enquire main,
.page-template-page-enquire-php main{ padding-top:0 !important; }

.page-hero{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  overflow:hidden;
  background:#000;
}
.page-hero video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.52);
}

.enquiry-wizard--page{
  position:relative;
  z-index:10;
  min-height:100vh;
  padding:calc(var(--headerH) + 70px) 10% 120px;
}

.wizard{
  max-width:860px;
  margin:0 auto;
  background:rgba(0,0,0,0.52);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:26px;
  padding:56px;
  box-shadow:0 18px 40px rgba(0,0,0,0.40);
}

.progress-wrap{
  height:8px;
  background:rgba(255,255,255,0.16);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:26px;
}
.progress-bar{
  height:100%;
  width:0%;
  background:var(--accent);
  border-radius:999px;
  transition:width .35s ease;
}

.step{display:none}
.step.active{display:block}

.wizard h2{
  font-family:'Playfair Display',serif;
  font-size:34px;
  margin-bottom:16px;
}

.options{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:14px 0 22px;
}

.options button{
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.08);
  color:#fff;
  padding:14px 20px;
  border-radius:999px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:12px;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.options button:hover{transform:translateY(-2px);background:rgba(255,255,255,0.12)}
.options button.active{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 14px 32px rgba(0,0,0,0.35);
}

.calendar.hidden{display:none}
.months.hidden{display:none}

.wizard-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.next, .back{
  appearance:none;
  border:none;
  cursor:pointer;
  padding:14px 26px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.next{
  background:var(--accent);
  color:#fff;
}
.back{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
}
.next:hover,.back:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,0.35)}

.enquiry-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}
.enquiry-form input,
.enquiry-form textarea{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.28);
  color:#fff;
  outline:none;
}
.enquiry-form textarea{min-height:130px;resize:vertical}

/* =====================================================
   TANZANIA GUIDE (CARDS + GALLERY)
   ===================================================== */
.tanzania-page-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.16;
  background:center/cover no-repeat;
}

.tanzania-hero{
  position:relative;
  height:100vh;
  overflow:hidden;
  background:#000;
  isolation:isolate;
}
.tanzania-hero video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:1;
}
.tanzania-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0.14));
}
.tanzania-hero-content{
  position:absolute;
  z-index:3;
  left:7%;
  bottom:80px;
  max-width:920px;
}

.tanzania-wrapper{
  position:relative;
  z-index:2;
  padding:60px 7% 90px;
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 26px;
}
.filters button{
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:11px;
  cursor:pointer;
}
.filters button.is-active,
.filters button:hover{
  background:rgba(255,255,255,0.14);
}

.place-card{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:22px;
  padding:24px;
  border-radius:22px;
  margin-bottom:22px;
  background:rgba(0,0,0,0.38);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:var(--shadow);
}

.place-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:160px;
  gap:10px;
}
.place-gallery .img-slot{
  border-radius:18px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,0.10);
}
.place-gallery .img-slot:first-child{
  grid-column:1 / span 2;
  grid-auto-rows:260px;
  min-height:260px;
}

.place-info h3{
  font-family:'Playfair Display',serif;
  font-size:34px;
  margin-bottom:10px;
}
.place-info p{line-height:1.7;color:var(--muted)}
.place-facts{margin-top:12px}
.place-facts p{margin:8px 0}
.btn-enquire{
  display:inline-flex;
  margin-top:16px;
  background:var(--accent);
  color:#fff;
  padding:14px 22px;
  border-radius:999px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:12px;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .header-inner{padding:16px 18px;}
  .site-nav{display:none;}
  .home-guides-grid{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .place-card{grid-template-columns:1fr;}
  .tanzania-hero-content{left:18px;right:18px;}
}
/* =========================================================
   HOMEPAGE MID FIX (Guides -> Planner) + REMOVE BLACK GAP
   You currently have no .home-scroll CSS, so add this.
========================================================= */

/* Mid section wrapper */
body.front-page .home-scroll{
  position:relative;
  background:#000;
  padding:0;
  margin:0;
}

/* Background video behind both panels (fixed while scrolling this section) */
body.front-page .home-scroll-bg{
  position:sticky;        /* IMPORTANT: sticky prevents huge dead space */
  top:0;
  height:100vh;
  width:100%;
  z-index:0;
  overflow:hidden;
}

body.front-page .home-scroll-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter: brightness(1.12) contrast(1.05) saturate(1.08);
}

/* Overlay (not too dark) */
body.front-page .home-scroll-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.32));
}

/* Panels sit above background */
body.front-page .home-scroll-panels{
  position:relative;
  z-index:2;
}

/* Each panel should fit content (NOT 100vh) */
body.front-page .home-panel{
  min-height:auto;
  padding:calc(var(--headerH) + 40px) 7% 70px;
}

/* Keep content a nice width */
body.front-page .home-panel-inner{
  max-width:1200px;
  margin:0 auto;
}

/* Guides grid */
body.front-page .home-guides-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

body.front-page .guide-card{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  padding:44px;
  border-radius:22px;
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
}

body.front-page .guide-title{
  font-family:'Playfair Display',serif;
  font-size:42px;
  line-height:1.05;
}

body.front-page .guide-copy{
  margin-top:14px;
  line-height:1.75;
  opacity:.92;
}

/* Planner section spacing (so it never feels empty) */
body.front-page .home-panel-planner{
  padding-bottom:90px;
}

/* Make sure the photo break always comes immediately next */
body.front-page .home-photo-break{
  position:relative;
  z-index:5;
  margin-top:0;
}

/* Mobile *
@media (max-width: 900px){
  body.front-page .home-guides-grid{grid-template-columns:1fr;}
  body.front-page .guide-card{padding:28px;}
}
/* =============================
   ITINERARIES PAGE STYLES
============================= */
.iti-hero{ position:relative; height:92vh; overflow:hidden; background:#000; }
.iti-hero-bg{
  position:absolute; inset:0;
  background-image:var(--itiHero);
  background-size:cover; background-position:center;
  transform:scale(1.02);
  filter:brightness(1.12) contrast(1.06) saturate(1.08);
}
.iti-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.55));
}
.iti-hero-inner{
  position:relative; z-index:2;
  max-width:1100px;
  margin:0 auto;
  padding:calc(var(--headerH) + 70px) 7% 60px;
}
.iti-hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(42px,5vw,70px);
  margin-bottom:12px;
}
.iti-hero p{ max-width:720px; opacity:.92; line-height:1.7; }
.iti-hero-actions{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }

.iti-wrap{ padding:50px 7% 90px; position:relative; z-index:2; }
.iti-toolbar{
  display:flex; gap:18px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:22px;
}
.iti-filters{ display:flex; flex-wrap:wrap; gap:10px; }
.iti-filter{
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:11px;
  cursor:pointer;
}
.iti-filter.is-active, .iti-filter:hover{ background:rgba(255,255,255,0.14); }

.iti-search input{
  width:min(420px, 86vw);
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(0,0,0,0.25);
  color:#fff;
  outline:none;
}

.iti-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}

.iti-card{
  background:rgba(0,0,0,0.38);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,0.30);
  transition:transform .18s ease, box-shadow .18s ease;
}
.iti-card:hover{ transform:translateY(-4px); box-shadow:0 28px 70px rgba(0,0,0,0.38); }

.iti-media{ height:210px; background-size:cover; background-position:center; position:relative; }
.iti-badges{ position:absolute; left:14px; top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.iti-badge, .iti-pill{
  background:rgba(0,0,0,0.50);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.iti-body{ padding:18px 18px 16px; }
.iti-body h3{
  font-family:'Playfair Display',serif;
  font-size:22px;
  margin-bottom:8px;
}
.iti-summary{ opacity:.92; line-height:1.65; }
.iti-highlights{ margin:12px 0 0; opacity:.92; line-height:1.6; }
.iti-highlights li{ margin:6px 0; }

.iti-foot{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.iti-from{ opacity:.92; font-size:13px; letter-spacing:1px; }
.iti-cta{
  background:var(--accent);
  color:#fff;
  padding:12px 16px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
}

@media (max-width: 980px){
  .iti-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .iti-grid{ grid-template-columns:1fr; }
}
/* =========================
   FOOTER (clean + premium)
========================= */
#site-footer{
  position:relative;
  background:rgba(0,0,0,0.55);
  border-top:1px solid rgba(255,255,255,0.10);
}

.footer-inner{
  max-width:1240px;
  margin:0 auto;
  padding:70px 7% 40px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:28px;
}

.footer-brand{
  font-family:'Pacifico',cursive;
  font-size:28px;
  letter-spacing:.4px;
}

#site-footer h4{
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:.86;
  margin-bottom:14px;
}

#site-footer ul{
  list-style:none;
  padding:0;
  margin:0;
}
#site-footer li{ margin:10px 0; }
#site-footer a{
  opacity:.88;
  transition:opacity .2s ease, transform .2s ease;
}
#site-footer a:hover{ opacity:1; transform:translateY(-1px); }

.footer-note{
  margin-top:12px;
  line-height:1.7;
  opacity:.86;
  max-width:420px;
}

.footer-mini{
  margin-top:14px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.78;
}

.footer-form{
  margin-top:12px;
  display:flex;
  gap:10px;
}
.footer-form input{
  flex:1;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(0,0,0,0.25);
  color:#fff;
  outline:none;
}
.footer-form button{
  padding:12px 16px;
  border-radius:14px;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:11px;
}

.footer-social{
  margin-top:14px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  letter-spacing:1px;
}

.footer-bottom{
  max-width:1240px;
  margin:0 auto;
  padding:18px 7% 24px;
  border-top:1px solid rgba(255,255,255,0.10);
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  opacity:.82;
  font-size:12px;
}

.footer-small .dot{ margin:0 10px; opacity:.6; }

@media (max-width: 900px){
  .footer-inner{ grid-template-columns:1fr; padding:52px 7% 28px; }
}
/* =========================
   BASIC PAGE LAYOUT (About/Lodges/Contact)
========================= */
.page-shell{
  position:relative;
  z-index:10;
  min-height:100vh;
  padding:calc(var(--headerH) + 70px) 7% 100px;
}
.page-card{
  max-width:1100px;
  margin:0 auto;
  background:rgba(0,0,0,0.50);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:26px;
  padding:56px;
  box-shadow:0 18px 40px rgba(0,0,0,0.40);
}
.kicker{
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:.82;
  margin-bottom:10px;
}
.page-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(34px,4.5vw,58px);
  margin-bottom:12px;
}
.lead{opacity:.92; line-height:1.75; max-width:800px;}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  margin-top:26px;
}
.bullets{margin-top:12px;opacity:.92;line-height:1.65;}
.bullets li{margin:8px 0;}
.quote{
  margin-top:26px;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  font-family:'Playfair Display',serif;
  font-size:18px;
  opacity:.92;
}
.cta-row{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;}

.lodges-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
.lodge-card{
  border-radius:22px;
  overflow:hidden;
  background:rgba(0,0,0,0.40);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 18px 40px rgba(0,0,0,0.30);
}
.lodge-img{height:190px;background-size:cover;background-position:center;}
.lodge-body{padding:16px;}
.lodge-meta{font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:.82;margin-bottom:10px;}

.map-embed iframe{
  width:100%;
  height:260px;
  border:0;
  border-radius:18px;
  margin-top:10px;
}

@media (max-width: 980px){
  .two-col{grid-template-columns:1fr;}
  .lodges-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .page-card{padding:28px;}
  .lodges-grid{grid-template-columns:1fr;}
}
/* ===========================
   HOMEPAGE FINAL OVERRIDES
   (prevents black gap + adds lodges block)
=========================== */
body.front-page .home-scroll{
  min-height:auto !important;     /* kill forced 200vh */
  padding:0 !important;
  margin:0 !important;
}

body.front-page .home-panel{
  min-height:auto !important;     /* don’t force 100vh */
  padding-top:calc(var(--headerH) + 18px) !important;
  padding-bottom:60px !important;
}

/* keep background video pinned nicely during this section */
body.front-page .home-scroll-bg{
  position:sticky !important;
  top:0 !important;
  height:100vh !important;
}

/* NEW: Camps & Lodges block inside planner panel */
.home-lodges{
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,0.12);
}

.home-lodges-actions{
  margin-top:16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.home-lodges .lodges-grid{
  margin-top:18px;
}

.home-lodges-mini{
  margin-top:14px;
}
.kenya-hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 20px 60px;
  position:relative;
}
.kenya-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
}
.kenya-hero .hero-inner{ position:relative; max-width:900px; z-index:2; }

.filters{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:25px 20px;
}
.filters button{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.25);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:.25s;
}
.filters button.active, .filters button:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}
.places-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
  padding:0 20px 60px;
  max-width:1200px;
  margin:0 auto;
}
.place-card{
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:.25s;
}
.place-card:hover{ transform:translateY(-4px); }
.place-media{ height:190px; background-size:cover; background-position:center; }
.place-content{ padding:16px 16px 18px; }
.place-content h3{ margin:0 0 8px; font-size:1.2rem; }
.place-content p{ opacity:.85; line-height:1.6; margin:0 0 14px; }
.place-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
/* ==========================================
   HARD FIX: remove "dead black" mid section
   (works even if the mid video fails)
========================================== */

/* 1) Give the whole mid section a visible background image fallback */
body.front-page .home-scroll{
  background:
    radial-gradient(1100px 700px at 20% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.28)),
    url('./assets/img/safari.jpg') center/cover no-repeat !important;
}

/* 2) Make sure the background video layer is not “dimmed” or hidden */
body.front-page .home-scroll-bg{
  background: url('./assets/img/safari.jpg') center/cover no-repeat !important;
}

/* 3) Brighten the video itself */
body.front-page .home-scroll-bg video{
  opacity: 1 !important;
  filter: brightness(1.45) contrast(1.10) saturate(1.18) !important;
}

/* 4) Your overlay is what makes it look black — kill it hard */
body.front-page .home-scroll-overlay{
  background: linear-gradient(rgba(0,0,0,.04), rgba(0,0,0,.18)) !important;
}

/* 5) Keep text readable with a premium “glass” panel */
body.front-page .home-panel-inner{
  background: rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 24px !important;
  padding: 54px !important;
  backdrop-filter: blur(10px);
}

@media (max-width: 900px){
  body.front-page .home-panel-inner{ padding: 28px !important; }
}
.home-scroll-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
/* =========================================
   HERO VIDEO SHOULD SHOW BEHIND HEADER
========================================= */

/* Front page header starts transparent (video shows behind) */
body.front-page .site-header{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: none !important;
}

/* Optional: make nav text slightly clearer on video */
body.front-page .site-nav .menu a,
body.front-page .brand-sub{
  text-shadow: 0 10px 25px rgba(0,0,0,0.55);
}

/* When you scroll, bring back the nice dark glass header */
body.front-page .site-header.is-scrolled{
  background: rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
/* =========================================
   HERO VIDEO SHOWS BEHIND HEADER (Homepage)
========================================= */

/* Start transparent on homepage */
body.front-page .site-header{
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* When you scroll, bring back the glass header */
body.front-page .site-header.is-scrolled{
  background: rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Optional: make header text readable on video */
body.front-page .brand-script,
body.front-page .brand-sub,
body.front-page .site-nav .menu a{
  text-shadow: 0 10px 25px rgba(0,0,0,0.55);
}
/* ==========================================
   FIX: HOMEPAGE DARK MID SECTION (NO BLACK)
   Strong fallback + brighter overlay
========================================== */

/* 1) Fallback image behind everything so it never turns black */
body.front-page .home-scroll{
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.18)),
    url('./assets/img/safari.jpg') center/cover no-repeat !important;
}

/* 2) Ensure background layer has a visible fallback too */
body.front-page .home-scroll-bg{
  background: url('./assets/img/safari.jpg') center/cover no-repeat !important;
}

/* 3) Brighten the mid video (this is what you see behind the text) */
body.front-page .home-scroll-bg video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  filter: brightness(1.55) contrast(1.12) saturate(1.20) !important;
}

/* 4) Your overlay is still making it feel black — lighten it */
body.front-page .home-scroll-overlay{
  background: linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.16)) !important;
}

/* 5) Make the cards less heavy (so it feels bright, not “blocked”) */
body.front-page .guide-card{
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}

/* Optional: soften the huge dark feeling in the planner panel too */
body.front-page .home-panel-inner{
  background: rgba(0,0,0,0.14) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
body.front-page .home-scroll{
  background:
    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.25)),
    url('/wp-content/themes/YOUR-THEME/assets/img/safari.jpg') center/cover no-repeat !important;
}
/* FORCE the mid-section background to actually be visible */
body.front-page .home-scroll{
  min-height: 100vh;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

/* If the video exists, keep it behind the content */
body.front-page .home-scroll-bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

/* Make sure overlays are not killing your background */
body.front-page .home-scroll-overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.18)) !important;
}

/* Panels (text/cards) always on top */
body.front-page .home-scroll-panels{
  position: relative !important;
  z-index: 2 !important;
}
/* ==========================================
   ITINERARIES PAGE: BRIGHTER BACKGROUND
   (kills the "dead black" look)
========================================== */

/* 1) Make the itineraries hero always show a visible background */
.iti-hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 20% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.32)),
    url('./assets/img/safari.jpg') center/cover no-repeat !important;
}

/* 2) Lighten your hero overlay (this is usually the main darkness culprit) */
.iti-hero-overlay{
  background: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.18)) !important;
}

/* 3) Make cards feel "glass" instead of dark blocks */
.iti-card{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(10px);
}

/* 4) Make card media pop more */
.iti-media{
  filter: brightness(1.12) contrast(1.06) saturate(1.10) !important;
}

/* 5) Ensure the whole archive page isn't pure black */
.iti-archive{
  background:
    radial-gradient(1000px 600px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22)) !important;
}
/* ===== HARD OVERRIDE: Accordion must collapse (wins against theme CSS) ===== */
.gm-acc__body{
  display: none !important;
}
.gm-acc__sec.is-open .gm-acc__body{
  display: block !important;
}

/* Make headers clearly clickable */
.gm-acc__head{
  user-select:none;
}

/* Optional: reduce visual overwhelm even when open */
.gm-acc__body{
  max-height: 62vh;
  overflow: auto;
}

/* =========================================
   ARUSHA PRIVATE GUIDE SECTION (FINAL FIX)
   CLEAN VIDEO • NO STRETCH • PROFESSIONAL LAYOUT
========================================= */

.arusha-guide-section {
  position: relative;
  min-height: 80vh;
  padding: 110px 6%;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

/* ================= VIDEO BACKGROUND ================= */

.arusha-guide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.arusha-guide-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
}

/* ================= DARK OVERLAY ================= */

.arusha-guide-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.58);
  z-index: 1;
}

/* ================= MAIN CONTAINER ================= */

.arusha-guide-container {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

/* ================= TOP GRID ================= */

.arusha-guide-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 60px;
}

/* ================= TEXT ================= */

.arusha-kicker {
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.75;
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.arusha-title {
  font-size: 42px;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 600;
}

.arusha-text {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 14px;
  opacity: 0.95;
  max-width: 600px;
}

/* ================= ACTION BUTTONS ================= */

.arusha-actions {
  display: flex;
  gap: 14px;
  margin-top: 25px;
  flex-wrap: wrap;
}

/* ================= GUIDE IMAGE ================= */

.arusha-guide-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.arusha-guide-image img {
  max-height: 420px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 25px 50px rgba(0,0,0,0.65));
  animation: arushaFloat 5s ease-in-out infinite;
}

@keyframes arushaFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* ================= CARDS ================= */

.arusha-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.arusha-card {
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.arusha-card:hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,0.1);
}

.arusha-card-img {
  height: 170px;
  background-size: cover;
  background-position: center;
}

.arusha-card-body {
  padding: 16px;
}

.arusha-card-body h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.arusha-card-body p {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.85;
}

.arusha-price {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  color: #f5c542;
  font-size: 13px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 992px) {
  .arusha-guide-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .arusha-actions {
    justify-content: center;
  }

  .arusha-title {
    font-size: 32px;
  }

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

@media (max-width: 600px) {
  .arusha-cards {
    grid-template-columns: 1fr;
  }

  .arusha-guide-section {
    padding: 80px 5%;
  }
}
/* ===== SOUVENIRS PRO SECTION ===== */

.souvenirs-section {
  position: relative;
  padding: 120px 6%;
  text-align: center;
  color: #fff;
}

.home-photo-break-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.souvenirs-section .home-photo-break-inner {
  position: relative;
  z-index: 2;
}

.souvenirs-subtitle {
  max-width: 700px;
  margin: 15px auto 50px;
  opacity: 0.9;
  font-size: 15px;
}

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

.souvenir-card {
  background: rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: 0.4s;
}

.souvenir-card:hover {
  transform: translateY(-10px);
  background: rgba(255,255,255,0.15);
}

.souvenir-img {
  height: 190px;
  background-size: cover;
  background-position: center;
}

.souvenir-body {
  padding: 15px;
}

.souvenir-body h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.souvenir-body p {
  font-size: 13px;
  opacity: 0.85;
}

.souvenir-price {
  display: block;
  margin-top: 12px;
  font-weight: bold;
  color: #f5c542;
}

.souvenirs-cta {
  margin-top: 40px;
}

/* responsive */
@media (max-width: 992px) {
  .souvenirs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .souvenirs-grid {
    grid-template-columns: 1fr;
  }
}
/* ===============================
   HOMEPAGE CLEAN STRUCTURE FIX
   Scoped ONLY to front page
================================ */

body.front-page .home-scroll{
  position: relative;
  overflow: hidden;
  background: #000;
}

/* video layer */
body.front-page .home-scroll-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

body.front-page .home-scroll-bg video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.35) contrast(1.1) saturate(1.15);
}

/* overlay (soft luxury tone) */
body.front-page .home-scroll-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    rgba(0,0,0,0.08),
    rgba(0,0,0,0.35)
  );
}

/* content layer */
body.front-page .home-scroll-panels{
  position: relative;
  z-index: 2;
}

/* SECTION SPACING FIX (PREVENT CRASHING LAYOUT) */
body.front-page .home-panel{
  min-height: auto;
  padding: 120px 7% 80px;
}

body.front-page .home-panel-inner{
  max-width: 1200px;
  margin: 0 auto;
}
/* ===============================
   ARUSHA GUIDE (AND BEYOND STYLE)
================================ */

.arusha-guide-section{
  position: relative;
  padding: 140px 6%;
  overflow: hidden;
}

/* video */
.arusha-guide-bg video{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* overlay softened for luxury feel */
.arusha-guide-overlay{
  background: rgba(0,0,0,0.50);
}

/* grid spacing improved */
.arusha-guide-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
}

/* text hierarchy improved */
.arusha-title{
  font-size: 46px;
  line-height: 1.15;
}

.arusha-text{
  font-size: 16px;
  line-height: 1.8;
  opacity: 0.92;
}

/* IMAGE FLOAT FIX */
.arusha-guide-image img{
  max-height: 450px;
  animation: floatSoft 6s ease-in-out infinite;
}

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

/* CARDS upgraded spacing */
.arusha-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 70px;
}

.arusha-card{
  border-radius: 18px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  transition: 0.3s ease;
}

.arusha-card:hover{
  transform: translateY(-10px);
  background: rgba(255,255,255,0.12);
}

.arusha-card-img{
  height: 180px;
}
/* ===============================
   SOUVENIRS SECTION (PRO VERSION)
================================ */

.souvenirs-section{
  position: relative;
  padding: 140px 6%;
  text-align: center;
}

/* background overlay fix */
.souvenirs-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.60);
  z-index: 1;
}

.souvenirs-section > *{
  position: relative;
  z-index: 2;
}

.souvenirs-subtitle{
  max-width: 750px;
  margin: 20px auto 60px;
  opacity: 0.88;
  line-height: 1.7;
}

/* GRID upgraded */
.souvenirs-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

/* CARDS upgraded (premium shop feel) */
.souvenir-card{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  transition: 0.35s ease;
}

.souvenir-card:hover{
  transform: translateY(-12px);
  background: rgba(255,255,255,0.14);
}

.souvenir-img{
  height: 200px;
  background-size: cover;
  background-position: center;
}

.souvenir-body{
  padding: 18px;
}

.souvenir-body h3{
  font-size: 18px;
  margin-bottom: 8px;
}

.souvenir-body p{
  font-size: 13px;
  opacity: 0.85;
  line-height: 1.6;
}

.souvenir-price{
  margin-top: 12px;
  display: block;
  color: #f5c542;
  font-weight: 600;
}
/* ================================
   SOCIAL PROOF SECTION (NEW)
================================ */

.social-proof-section{
  padding:120px 7%;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.95));
  color:#fff;
  position:relative;
}

.social-proof-inner{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

.social-proof-head{
  margin-bottom:50px;
}

.social-title{
  font-family:'Playfair Display',serif;
  font-size:44px;
  margin:12px 0;
}

.social-sub{
  opacity:0.85;
  max-width:700px;
  margin:0 auto;
  line-height:1.7;
}

/* ===== AWARDS ===== */
.awards-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:60px;
}

.award-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:18px;
  padding:28px;
  backdrop-filter: blur(10px);
  transition:0.3s;
}

.award-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,0.10);
}

.award-icon{
  font-size:28px;
  margin-bottom:10px;
}

/* ===== REVIEWS ===== */
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:60px;
}

.review-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  padding:26px;
  text-align:left;
  backdrop-filter: blur(10px);
}

.review-card p{
  line-height:1.7;
  opacity:0.92;
  margin-bottom:14px;
  font-style:italic;
}

.review-card span{
  font-size:12px;
  letter-spacing:1px;
  opacity:0.7;
}

/* ===== CTA ===== */
.social-cta{
  margin-top:20px;
  padding:50px 30px;
  border-radius:22px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
}

.social-cta h3{
  font-family:'Playfair Display',serif;
  font-size:32px;
  margin-bottom:10px;
}

.social-cta p{
  opacity:0.85;
  margin-bottom:20px;
}

.social-cta-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  .awards-row,
  .reviews-grid{
    grid-template-columns:1fr;
  }

  .social-title{
    font-size:32px;
  }
}
/* ================= ELITE TRUST WALL ================= */

.elite-trust{
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:50px;
  padding:140px 6%;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.05), transparent 60%),
    #050505;
  align-items:center;
}

/* CENTER */
.elite-center{
  text-align:center;
}

.elite-center h2{
  font-family:'Playfair Display',serif;
  font-size:44px;
  margin-bottom:30px;
}

/* BADGES */
.elite-badges{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:28px;
}

.elite-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  padding:12px 16px;
  border-radius:14px;
}

/* PAYMENTS ELITE GRID */
.elite-payments{
  margin-top:20px;
}

.elite-payments span{
  display:block;
  margin-bottom:12px;
  opacity:0.8;
  letter-spacing:1px;
  font-size:12px;
}

.elite-pay-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

.elite-pay-grid img{
  width:52px;
  height:auto;
  opacity:0.75;
  transition:0.3s;
  filter:grayscale(100%);
}

.elite-pay-grid img:hover{
  opacity:1;
  filter:none;
  transform:translateY(-3px);
}

/* MARQUEE CORE FIX (NO CUT OFF) */
.elite-marquee{
  overflow:hidden;
  height:520px;
  position:relative;
}

.elite-track{
  display:flex;
  flex-direction:column;
  gap:18px;
  animation:eliteScroll 22s linear infinite;
}

.elite-track.reverse{
  animation:eliteScrollReverse 22s linear infinite;
}

/* CARD DESIGN */
.elite-card{
  display:flex;
  gap:14px;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
}

.elite-card img{
  width:50px;
  height:50px;
  border-radius:50%;
  object-fit:cover;
}

.elite-head{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  opacity:0.85;
}

.elite-stars{
  color:#f5c542;
  margin:4px 0;
}

.elite-card p{
  font-size:13px;
  line-height:1.5;
  opacity:0.9;
}

/* SMOOTH LOOP FIX */
@keyframes eliteScroll{
  0%{transform:translateY(0);}
  100%{transform:translateY(-50%);}
}

@keyframes eliteScrollReverse{
  0%{transform:translateY(-50%);}
  100%{transform:translateY(0);}
}

/* MOBILE */
@media(max-width:900px){
  .elite-trust{
    grid-template-columns:1fr;
  }
  .elite-marquee{
    display:none;
  }
}
/* ================= SECTION ZONING SYSTEM (PRO UX FIX) ================= */

/* base spacing system */
section{
  position:relative;
}

/* 1. CINEMATIC ZONE (hero, video sections) */
.zone-cinematic{
  background:#000;
  color:#fff;
}

/* adds soft fade separation instead of hard cuts */
.zone-cinematic::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:120px;
  background:linear-gradient(to bottom, rgba(0,0,0,0), #050505);
  pointer-events:none;
}

/* 2. EDITORIAL ZONE (lodges, itineraries, cards) */
.zone-editorial{
  background:#0b0b0b;
  padding:120px 6%;
}

/* creates “air” between sections */
.zone-editorial + .zone-editorial{
  padding-top:40px;
}

/* 3. STORY ZONE (guides, arusha section) */
.zone-story{
  background:radial-gradient(circle at top, rgba(255,255,255,0.05), transparent 60%), #070707;
  padding:120px 6%;
}

/* 4. TRUST / CONVERSION ZONE */
.zone-trust{
  background:#050505;
  padding:140px 6%;
}

/* VISUAL BREAK LINES (important luxury trick) */
.section-divider{
  height:1px;
  width:100%;
  background:rgba(255,255,255,0.08);
  margin:0 auto;
  max-width:1200px;
}
/* =========================================================
   ULTRA FORCE HEADER FIX (HOMEPAGE ONLY)
   KILLS ALL BLACK HEADER STATES
========================================================= */

/* FORCE REMOVE ALL BACKGROUND STATES ON HOMEPAGE */
html body.front-page .site-header,
html body.front-page .site-header.is-scrolled,
html body.front-page .site-header.scrolled{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* FORCE OVERRIDE ANY INLINE / JS APPLIED CLASS ON LOAD */
html body.front-page .site-header[class*="scrolled"]{
  background: transparent !important;
  backdrop-filter: none !important;
}

/* ONLY WHEN USER ACTUALLY SCROLLS PAGE (REAL STATE CONTROL) */
body.front-page.scrolled .site-header{
  background: rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* FORCE POSITION ABOVE HERO VIDEO */
html body.front-page .site-header{
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999 !important;
}

/* MAKE TEXT CLEAR ON VIDEO */
html body.front-page .site-header a,
html body.front-page .brand,
html body.front-page .brand-sub{
  color: #fff !important;
  text-shadow: 0 10px 30px rgba(0,0,0,0.65);
}
/* =========================
   HERO FIX (FULL COVER CINEMATIC)
   ========================= */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;

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

/* video MUST behave like background */
.hero video {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  z-index: 0;
  transform: scale(1.02); /* removes edge gaps */
}

/* fallback background */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--heroFallback);
  background-size: cover;
  background-position: center;
  z-index: -2;
}

/* dark cinematic overlay */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
  );
  z-index: 1;
}

/* content sits above video */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
  padding: 0 20px;
}

/* ensure no weird offsets */
.hero-content h1,
.hero-content h2,
.hero-content p {
  color: #fff;
  text-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
/* =========================================================
   SAFETY PATCH LAYER (DO NOT DELETE ANY EXISTING CODE)
   Fixes ONLY: header + hero + homepage stacking issues
========================================================= */

/* =========================
   1. FORCE HEADER LAYER FIX
========================= */

/* Ensure header always sits above everything */
.site-header{
  z-index: 999999 !important;
  position: fixed !important;
}

/* Prevent any JS/class from forcing black background on load */
.site-header,
.site-header.is-scrolled,
.site-header.scrolled,
.site-header[class*="scrolled"]{
  background: rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(10px) !important;
}

/* Homepage: allow video behind header (ONLY visual fix) */
body.front-page .site-header{
  background: transparent !important;
  backdrop-filter: none !important;
}

/* =========================
   2. HERO VIDEO FIX (NO BREAK)
========================= */

/* Ensure hero always has proper stacking */
.hero{
  position: relative !important;
  overflow: hidden !important;
}

/* Video must NEVER go behind overlays incorrectly */
.hero video{
  z-index: 0 !important;
  object-fit: cover !important;
}

/* Force correct overlay stacking order */
.hero::after{
  z-index: 1 !important;
}

.hero-content{
  z-index: 2 !important;
  position: relative !important;
}

/* =========================
   3. HOMEPAGE MID SECTION FIX
========================= */

/* Prevent black gap caused by conflicting heights */
body.front-page .home-scroll{
  min-height: 100vh !important;
  background-size: cover !important;
}

/* Ensure video NEVER disappears */
body.front-page .home-scroll-bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

/* Ensure overlay doesn't darken too much */
body.front-page .home-scroll-overlay{
  background: linear-gradient(
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.25)
  ) !important;
}

/* Content always above */
body.front-page .home-scroll-panels{
  position: relative !important;
  z-index: 2 !important;
}

/* =========================
   4. FIX “BLACK HEADER ON SCROLL BUG”
   (common WordPress JS issue)
========================= */

/* If JS adds scroll class incorrectly, neutralize it */
body.front-page.scrolled .site-header,
body.front-page.is-scrolled .site-header{
  background: rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(12px) !important;
}
.tour-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.tour-modal.active { display:flex; }

.tour-modal-content {
  background:#111;
  color:#fff;
  padding:30px;
  max-width:600px;
  width:90%;
  border-radius:10px;
  position:relative;
}

.tour-modal-img {
  height:250px;
  background-size:cover;
  background-position:center;
  margin-bottom:15px;
}

.tour-modal-close {
  position:absolute;
  top:10px;
  right:15px;
  font-size:26px;
  cursor:pointer;
}/* GRID */
.home-itineraries {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;
  margin-top:50px;
}

/* CARD */
.itinerary-card {
  position:relative;
  background:rgba(255,255,255,0.03);
  border-radius:12px;
  overflow:hidden;
  transition:all .3s ease;
}

.itinerary-card:hover {
  transform:translateY(-8px);
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

/* IMAGE */
.itinerary-img {
  height:200px;
  background-size:cover;
  background-position:center;
}

/* BODY */
.itinerary-body {
  padding:18px;
}

/* BADGE */
.itinerary-badge {
  position:absolute;
  top:10px;
  left:10px;
  background:#000;
  color:#fff;
  padding:5px 10px;
  font-size:12px;
  border-radius:5px;
}

/* RIBBON */
.itinerary-ribbon {
  position:absolute;
  top:10px;
  right:-40px;
  background:#c49b63;
  color:#000;
  padding:5px 40px;
  transform:rotate(45deg);
  font-size:11px;
  font-weight:bold;
}

/* PRICING */
.itinerary-pricing {
  display:flex;
  flex-direction:column;
  font-size:13px;
  margin:10px 0;
  opacity:0.85;
}

.itinerary-pricing span {
  margin-bottom:3px;
}

/* OVERLAY */
.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.75)
  );
  z-index:1;
}

/* ENSURE CONTENT ABOVE VIDEO */
.hero-content {
  position:relative;
  z-index:2;
}

/* BADGE */
.hero-badge {
  display:inline-block;
  background:rgba(0,0,0,0.6);
  padding:8px 12px;
  font-size:12px;
  border-radius:6px;
  margin-bottom:15px;
  backdrop-filter: blur(6px);
}

/* TRUST STRIP */
.hero-trust {
  margin-top:15px;
  font-size:13px;
  opacity:0.85;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* SCROLL HINT */
.scroll-hint {
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  font-size:12px;
  opacity:0.7;
  z-index:2;
}

.scroll-hint .arrow {
  font-size:18px;
  margin-top:4px;
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* full screen */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* VIDEO fills entire hero */
.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* KEY PROPERTY */
  z-index: 0;
}
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero {
  margin-top: -80px; /* adjust to your header height */
}
.safari-journey {
  position: relative;
  padding: 100px 20px;
  background: #0b0b0b;
  color: #fff;
  overflow: hidden;
}

.journey-overlay {
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top, rgba(255,255,255,0.05), transparent);
}

.journey-container {
  position: relative;
  max-width: 900px;
  margin: auto;
  text-align: center;
}

.journey-steps {
  display:flex;
  justify-content:center;
  gap:15px;
  margin:30px 0;
  flex-wrap:wrap;
}

.step {
  padding:6px 12px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:20px;
  font-size:12px;
  opacity:0.6;
}

.step.active {
  opacity:1;
  background:#e45b3a;
  border-color:#e45b3a;
}

.journey-panel {
  display:none;
  animation: fadeUp .6s ease;
}

.journey-panel.active {
  display:block;
}

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

.journey-options {
  display:flex;
  gap:15px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:20px;
}

.journey-option {
  padding:12px 18px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:#fff;
  cursor:pointer;
  transition:0.3s;
  border-radius:8px;
}

.journey-option:hover {
  background:#e45b3a;
  transform:translateY(-3px);
}

.journey-result {
  margin:20px 0;
  padding:20px;
  background:rgba(255,255,255,0.05);
  border-radius:10px;
}
.journey-option {
  position: relative;
  overflow: hidden;
  transition: 0.35s ease;
}

.journey-option::after {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.2), transparent);
  opacity:0;
  transition:0.3s;
}

.journey-option:hover::after {
  opacity:1;
}

.journey-option:active {
  transform: scale(0.95);
}
.journey-live-output {
  margin-top: 25px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.3);
  border-radius: 12px;
  text-align: left;
  min-height: 90px;
}

.journey-live-output h4 {
  margin-bottom: 10px;
  font-size: 14px;
  opacity: 0.7;
}

.live-line {
  font-size: 14px;
  line-height: 1.6;
  transition: 0.3s ease;
}

.journey-option.active {
  background: #e45b3a !important;
  transform: scale(1.05);
}
.magazine-section {
  padding: 100px 8%;
  background: #0e0e0e;
  color: white;
}

.magazine-header {
  text-align: center;
  margin-bottom: 60px;
}

.magazine-header h2 {
  font-size: 42px;
}

.magazine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.mag-card {
  background: #151515;
  border-radius: 18px;
  overflow: hidden;
}

.mag-img {
  height: 280px;
  background-size: cover;
  background-position: center;
}

.mag-content {
  padding: 20px;
}

/* CHAPTER */
.chapter-section {
  padding: 120px 10%;
  background: #111;
  text-align: center;
  color: white;
}

.chapter-label {
  color: #e45b3a;
  letter-spacing: 3px;
}

/* MICRO STORIES */
.micro-story-section {
  padding: 120px 8%;
  background: #0c0c0c;
}

.micro-story {
  display: flex;
  gap: 40px;
  margin-bottom: 80px;
  align-items: center;
}

.micro-story.reverse {
  flex-direction: row-reverse;
}

.micro-img {
  flex: 1;
  height: 320px;
  background-size: cover;
  border-radius: 16px;
}

.micro-text {
  flex: 1;
  color: white;
}

/* CULTURE */
.culture-section {
  position: relative;
  padding: 140px 10%;
  background-image: url('../assets/img/culture.jpg');
  background-size: cover;
  background-position: center;
  color: white;
}

.culture-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.culture-content {
  position: relative;
  max-width: 600px;
}
.mag-break{
  padding:120px 8%;
  background:#0b0b0b;
  color:#fff;
}

.mag-break-inner{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
}

.mag-break-image{
  height:520px;
  background-size:cover;
  background-position:center;
  border-radius:20px;
  transform:scale(1);
  transition:transform 1.2s ease;
}

.mag-break:hover .mag-break-image{
  transform:scale(1.05);
}

.mag-break-content h2{
  font-size:42px;
  margin:15px 0;
}

.mag-break-content p{
  opacity:0.8;
  line-height:1.7;
}

.mag-kicker{
  font-size:12px;
  letter-spacing:3px;
  opacity:0.6;
}

.mag-stats{
  display:flex;
  gap:25px;
  margin-top:30px;
}

.mag-stat strong{
  font-size:26px;
  display:block;
}

.mag-stat span{
  font-size:12px;
  opacity:0.6;
}
.mag-divider{
  padding:90px 8%;
  background:#0b0b0b;
  color:#fff;
  text-align:center;
}

.mag-divider-inner{
  max-width:900px;
  margin:auto;
}

.mag-tag{
  font-size:12px;
  letter-spacing:3px;
  opacity:0.5;
}

.mag-divider h2{
  font-size:38px;
  margin:20px 0;
  line-height:1.3;
}

.mag-divider p{
  opacity:0.7;
  line-height:1.7;
}
.story-strip{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  min-height:500px;
}

.story-image{
  background-size:cover;
  background-position:center;
}

.story-content{
  padding:80px;
  background:#111;
  color:#fff;
}

.story-content h2{
  font-size:36px;
  margin-bottom:20px;
}

.story-content p{
  opacity:0.7;
  line-height:1.7;
}
/* =========================
   GLOBAL COLOR RESET FIX
========================= */

body {
  color: #ffffff;
  background: #0b0b0b;
}

/* FORCE ALL HEADINGS TO BE READABLE */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
}

/* FORCE PARAGRAPHS */
p {
  color: rgba(255,255,255,0.85);
}

/* LINKS */
a {
  color: #ffffff;
}

/* =========================
   HERO FIX (CRITICAL)
========================= */

.hero {
  position: relative;
  overflow: hidden;
}

#heroVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.75)
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* =========================
   SECTION DEFAULT FIX
========================= */

section {
  position: relative;
  color: #fff;
}

/* ensure cards remain readable */
.arusha-card,
.mag-card,
.itinerary-card,
.lodge-card {
  color: #fff;
}
/* =========================================
   CINEMATIC NATURE COLOR SYSTEM
========================================= */

:root{

  /* deep safari palette */
  --night:#06110d;
  --forest:#0d1f17;
  --earth:#1a140f;
  --warm:#2d1d12;
  --gold:#c9973f;
  --sun:#e45b3a;

}

/* MAIN SITE BACKGROUND */
html,
body{
  background:
    radial-gradient(circle at top left,
      rgba(201,151,63,.10),
      transparent 28%),

    radial-gradient(circle at bottom right,
      rgba(34,87,58,.18),
      transparent 32%),

    linear-gradient(
      180deg,
      #08120f 0%,
      #0b1713 22%,
      #11110d 48%,
      #0a1613 72%,
      #050505 100%
    );

  background-attachment:fixed;
}

/* HERO OVERLAY */
.hero::after{
  background:
    linear-gradient(
      to bottom,
      rgba(4,14,10,.20),
      rgba(6,18,14,.34),
      rgba(5,5,5,.58)
    ) !important;
}

/* MID SECTION */
.home-scroll-overlay{
  background:
    linear-gradient(
      to bottom,
      rgba(8,20,14,.16),
      rgba(8,16,12,.46),
      rgba(0,0,0,.68)
    ) !important;
}

/* STORY STRIPS */
.story-strip{
  background:
    linear-gradient(
      135deg,
      rgba(16,31,24,.88),
      rgba(18,14,10,.92)
    );

  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* MAGAZINE BREAK */
.mag-break{
  background:
    radial-gradient(
      circle at top right,
      rgba(201,151,63,.08),
      transparent 24%
    ),

    linear-gradient(
      180deg,
      rgba(8,16,12,.96),
      rgba(15,12,9,.98)
    );
}

/* TRUST SECTION */
.elite-trust{
  background:
    linear-gradient(
      180deg,
      #08120f,
      #11100d
    );
}

/* SPLIT FINAL SECTION */
.split-content{
  background:
    linear-gradient(
      135deg,
      #b88738,
      #8f6425
    ) !important;

  color:#fff;
}

/* CARDS */
.guide-card,
.mag-card,
.itinerary-card,
.arusha-card,
.lodge-card,
.elite-card{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.04)
    );

  backdrop-filter:blur(10px);

  border:1px solid rgba(255,255,255,.08);
}

/* BEAUTIFUL ORANGE GLOW */
.hero-content h1,
.photo-break-title,
.planner-title,
.mag-break-content h2{
  text-shadow:
    0 0 30px rgba(228,91,58,.12),
    0 8px 30px rgba(0,0,0,.35);
}

/* SUBTLE GOLDEN LIGHT */
.hero-badge,
.guide-kicker,
.mag-kicker,
.mag-tag{
  color:#f0c67a;
}

/* BUTTON IMPROVEMENT */
.btn{
  background:
    linear-gradient(
      135deg,
      #e45b3a,
      #c4472b
    );

  box-shadow:
    0 10px 30px rgba(228,91,58,.25);
}

/* FOOTER ATMOSPHERE */
#site-footer{
  background:
    linear-gradient(
      180deg,
      rgba(10,16,13,.98),
      rgba(0,0,0,1)
    );
}
/* =========================================
   JOURNEY CONTINUES — PREMIUM EDITORIAL
========================================= */

.mag-divider{
  position:relative;
  padding:120px 20px;
  overflow:hidden;

  background:
    radial-gradient(
      circle at top left,
      rgba(201,151,63,.10),
      transparent 24%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(34,87,58,.16),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #08120f,
      #11100d
    );

  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* glowing atmosphere */
.mag-divider::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.03),
      transparent
    );

  animation: dividerFlow 12s linear infinite;
  pointer-events:none;
}

@keyframes dividerFlow{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(100%); }
}

.mag-divider-inner{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

.mag-tag{
  display:inline-flex;
  padding:10px 18px;
  border-radius:999px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);

  letter-spacing:3px;
  font-size:11px;
  text-transform:uppercase;

  color:#f0c67a;
}

.mag-divider h2{
  margin-top:26px;

  font-family:'Playfair Display',serif;
  font-size:clamp(38px,4vw,68px);
  line-height:1.08;

  max-width:850px;
  margin-inline:auto;

  text-shadow:
    0 0 40px rgba(228,91,58,.08),
    0 10px 30px rgba(0,0,0,.35);
}

.mag-divider p{
  margin-top:24px;

  max-width:720px;
  margin-inline:auto;

  line-height:1.9;
  font-size:18px;

  color:rgba(255,255,255,.82);
}

/* =========================================
   TANZANIA TOLD LIKE A STORY
========================================= */

.magazine-section{
  position:relative;
  padding:120px 7%;
  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(8,16,12,.96),
      rgba(14,10,8,.98)
    );
}

/* cinematic ambient light */
.magazine-section::before{
  content:"";
  position:absolute;
  width:700px;
  height:700px;

  top:-240px;
  right:-180px;

  background:
    radial-gradient(
      circle,
      rgba(201,151,63,.08),
      transparent 70%
    );

  pointer-events:none;
}

.magazine-header{
  text-align:center;
  max-width:900px;
  margin:0 auto 70px;
}

.magazine-header h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(42px,5vw,76px);
  line-height:1.05;

  text-shadow:
    0 0 40px rgba(228,91,58,.10),
    0 12px 30px rgba(0,0,0,.35);
}

.magazine-header p{
  margin-top:22px;

  font-size:19px;
  line-height:1.9;

  color:rgba(255,255,255,.78);

  max-width:720px;
  margin-inline:auto;
}

/* editorial cards */
.magazine-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;

  max-width:1400px;
  margin:0 auto;
}

.mag-card{
  position:relative;
  overflow:hidden;

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.03)
    );

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(12px);

  transition:
    transform .4s ease,
    box-shadow .4s ease;
}

.mag-card:hover{
  transform:translateY(-8px);

  box-shadow:
    0 30px 80px rgba(0,0,0,.45);
}

.mag-img{
  height:420px;
  background-size:cover;
  background-position:center;

  transition:transform 1.2s ease;
}

.mag-card:hover .mag-img{
  transform:scale(1.06);
}

.mag-content{
  padding:34px;
}

.mag-content h3{
  font-family:'Playfair Display',serif;
  font-size:34px;
  line-height:1.15;
}

.mag-content p{
  margin-top:18px;
  line-height:1.85;
  color:rgba(255,255,255,.80);
}

/* mobile */
@media(max-width:900px){

  .magazine-grid{
    grid-template-columns:1fr;
  }

  .mag-img{
    height:300px;
  }

  .mag-divider{
    padding:90px 20px;
  }

}
/* =====================================
   PREMIUM TITLES
===================================== */

.hero-content h1,
.magazine-header h2,
.mag-divider h2,
.planner-title,
.photo-break-title,
.story-content h2,
.elite-center h2{
  
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7e7c1 45%,
      #d9a95f 100%
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  letter-spacing:-1.5px;

  text-shadow:
    0 0 35px rgba(217,169,95,.08),
    0 8px 30px rgba(0,0,0,.35);
}
/* =====================================
   CINEMATIC LIGHTS
===================================== */

.hero::before,
.magazine-section::after,
.story-strip::before{
  content:"";
  position:absolute;
  width:600px;
  height:600px;
  border-radius:50%;
  pointer-events:none;
  filter:blur(80px);
  opacity:.12;
}

.hero::before{
  top:-200px;
  right:-100px;

  background:
    radial-gradient(
      circle,
      rgba(255,180,80,.45),
      transparent 70%
    );
}

.magazine-section::after{
  bottom:-250px;
  left:-120px;

  background:
    radial-gradient(
      circle,
      rgba(60,140,90,.30),
      transparent 70%
    );
}
/* =====================================
   PREMIUM GLASS CARDS
===================================== */

.mag-card,
.itinerary-card,
.arusha-card,
.guide-card,
.elite-card,
.lodge-card{

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  backdrop-filter:blur(18px);

  border:
    1px solid rgba(255,255,255,.10);

  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}
/* =====================================
   FILM GRAIN
===================================== */

body::after{
  content:"";
  position:fixed;
  inset:0;

  background-image:
    url("https://grainy-gradients.vercel.app/noise.svg");

  opacity:.035;

  pointer-events:none;
  z-index:9999;

  mix-blend-mode:soft-light;
}/* =====================================
   BUTTON FLARE
===================================== */

.btn{
  position:relative;
  overflow:hidden;
}

.btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:80%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );

  transform:skewX(-25deg);

  transition:1s;
}

.btn:hover::before{
  left:140%;
}
/* =========================================
   PREMIUM ITINERARY EXPERIENCE CARDS
========================================= */

.home-itineraries{
  margin-top:70px;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

/* CARD */
.itinerary-card{
  position:relative;
  overflow:hidden;

  border-radius:30px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  border:1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(18px);

  box-shadow:
    0 20px 60px rgba(0,0,0,.35);

  transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease;
}

/* cinematic hover */
.itinerary-card:hover{
  transform:
    translateY(-10px);

  border-color:
    rgba(217,169,95,.35);

  box-shadow:
    0 35px 90px rgba(0,0,0,.50),
    0 0 40px rgba(217,169,95,.08);
}

/* IMAGE */
.itinerary-img{
  height:300px;

  background-size:cover;
  background-position:center;

  position:relative;

  transition:
    transform 1.2s ease,
    filter .6s ease;
}

/* cinematic image darkening */
.itinerary-img::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.65),
      rgba(0,0,0,.08)
    );
}

/* image zoom */
.itinerary-card:hover .itinerary-img{
  transform:scale(1.08);
  filter:saturate(1.12);
}

/* BODY */
.itinerary-body{
  position:relative;
  padding:30px;
}

/* TITLE */
.itinerary-body h3{
  font-family:'Playfair Display',serif;

  font-size:34px;
  line-height:1.08;

  background:
    linear-gradient(
      180deg,
      #fff,
      #f1d39d
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
    0 8px 30px rgba(0,0,0,.35);
}

/* TEXT */
.itinerary-body p{
  margin-top:16px;

  line-height:1.8;

  color:rgba(255,255,255,.78);
}

/* PRICING */
.itinerary-pricing{
  margin-top:24px;

  display:flex;
  flex-direction:column;
  gap:12px;
}

.itinerary-pricing span{
  padding:12px 14px;

  border-radius:14px;

  background:
    rgba(255,255,255,.04);

  border:
    1px solid rgba(255,255,255,.06);

  color:
    rgba(255,255,255,.86);

  transition:.3s ease;
}

/* pricing hover glow */
.itinerary-card:hover .itinerary-pricing span{
  background:
    rgba(217,169,95,.08);

  border-color:
    rgba(217,169,95,.18);
}

/* BADGE */
.itinerary-badge{
  position:absolute;
  top:20px;
  left:20px;
  z-index:5;

  padding:10px 16px;

  border-radius:999px;

  background:
    rgba(0,0,0,.45);

  backdrop-filter:blur(12px);

  border:
    1px solid rgba(255,255,255,.14);

  letter-spacing:2px;
  font-size:11px;
  text-transform:uppercase;

  color:#fff;
}

/* FEATURED RIBBON */
.itinerary-ribbon{
  position:absolute;
  top:24px;
  right:-38px;
  z-index:6;

  width:180px;

  padding:12px 0;

  text-align:center;

  background:
    linear-gradient(
      135deg,
      #e4b35a,
      #c88a2f
    );

  color:#111;

  font-size:11px;
  font-weight:700;

  letter-spacing:2px;
  text-transform:uppercase;

  transform:
    rotate(45deg);

  box-shadow:
    0 12px 30px rgba(0,0,0,.35);
}

/* BUTTON */
.itinerary-card .btn{
  width:100%;
  margin-top:24px;
}

/* FEATURED CARD */
.itinerary-card.featured{
  transform:translateY(-10px);
}

.itinerary-card.featured::before{
  content:"";
  position:absolute;
  inset:0;

  border-radius:30px;

  padding:1px;

  background:
    linear-gradient(
      135deg,
      rgba(255,215,140,.55),
      transparent,
      rgba(255,215,140,.18)
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;

  pointer-events:none;
}

/* MOBILE */
@media(max-width:1100px){

  .home-itineraries{
    grid-template-columns:1fr;
  }

  .itinerary-img{
    height:260px;
  }

}
/* =========================================
   JOURNEY CONTINUES
   MOVING ITINERARY BACKGROUNDS
========================================= */

.mag-divider{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* DARK OVERLAY ABOVE MOVING IMAGES */
.mag-divider::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;

  background:
    linear-gradient(
      180deg,
      rgba(5,10,8,.72),
      rgba(5,5,5,.82)
    );
}

/* CONTENT ABOVE EVERYTHING */
.mag-divider-inner{
  position:relative;
  z-index:5;
}

/* MOVING IMAGE LAYER */
.mag-divider::before{
  content:"";

  position:absolute;
  inset:0;

  width:300%;
  height:100%;

  z-index:1;

  opacity:.23;

  background-repeat:repeat-x;
  background-size:auto 100%;

  animation: safariMove 120s linear infinite;

  /* YOUR ITINERARY ASSETS */
  background-image:

    url('../img/itineraries/tz-01-serengeti-crater.jpg'),
    url('../img/itineraries/tz-02-northern-circuit.jpg'),
    url('../img/itineraries/tz-03-zanzibar.jpg'),
    url('../img/itineraries/tz-04-calving.jpg'),
    url('../img/itineraries/tz-05-short-north.jpg'),
    url('../img/itineraries/tz-06-ruaha.jpg'),
    url('../img/itineraries/tz-07-nyerere.jpg'),
    url('../img/itineraries/tz-08-kilimanjaro.jpg'),
    url('../img/itineraries/tz-09-luxury.jpg'),
    url('../img/itineraries/tz-10-zanzibar-only.jpg');

  background-position:

    0 0,
    320px 0,
    640px 0,
    960px 0,
    1280px 0,
    1600px 0,
    1920px 0,
    2240px 0,
    2560px 0,
    2880px 0;
}

/* CONTINUOUS MOVEMENT */
@keyframes safariMove{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-33.333%);
  }

}
/* =========================================
   JOURNEY CONTINUES MOVING BACKGROUND
========================================= */

.mag-divider{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  min-height:420px;

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

/* MOVING BACKGROUND WRAPPER */
.mag-slider{
  position:absolute;
  inset:0;
  z-index:1;

  overflow:hidden;
}

/* TRACK */
.mag-track{
  position:absolute;
  top:0;
  left:0;

  display:flex;
  height:100%;

  animation:safariScroll 90s linear infinite;
}

/* IMAGES */
.mag-track img{
  width:340px;
  height:420px;

  object-fit:cover;

  flex-shrink:0;

  opacity:.38;

  filter:
    brightness(.82)
    saturate(1.05)
    contrast(1.05);

  transform:scale(1.02);
}
/* DARK CINEMATIC OVERLAY */
.mag-divider::before{
  content:"";
  position:absolute;
  inset:0;

  z-index:2;

  background:
    linear-gradient(
      180deg,
      rgba(6,14,10,.45),
      rgba(0,0,0,.62)
    );
}

/* CONTENT ABOVE */
.mag-divider-inner{
  position:relative;
  z-index:5;

  text-align:center;
}

/* SMOOTH MOVEMENT */
@keyframes safariScroll{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}
/* GOLDEN LIGHT PASS */
.mag-divider::after{
  content:"";
  position:absolute;

  top:0;
  left:-20%;

  width:40%;
  height:100%;

  z-index:3;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,190,90,.08),
      transparent
    );

  animation:
    lightSweep 14s linear infinite;

  pointer-events:none;
}

@keyframes lightSweep{

  from{
    transform:translateX(-100%);
  }

  to{
    transform:translateX(350%);
  }

}
/* =========================================================
   ELITE CINEMATIC SAFARI EXPERIENCE
   ADD AT VERY BOTTOM OF STYLE.CSS
========================================================= */


/* =========================================================
   GLOBAL ATMOSPHERIC LIGHTING
========================================================= */

body{
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;

  z-index:-2;
  pointer-events:none;

  background:

    radial-gradient(
      circle at 15% 20%,
      rgba(217,169,95,.08),
      transparent 22%
    ),

    radial-gradient(
      circle at 80% 10%,
      rgba(43,98,68,.10),
      transparent 26%
    ),

    radial-gradient(
      circle at 50% 80%,
      rgba(224,122,57,.06),
      transparent 28%
    );

  filter:blur(40px);
}


/* =========================================================
   CINEMATIC FILM GRAIN
========================================================= */

body::after{
  content:"";
  position:fixed;
  inset:0;

  pointer-events:none;

  opacity:.03;

  z-index:9999;

  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      transparent 0,
      rgba(255,255,255,.22) 1px,
      transparent 2px
    );

  background-size:4px 4px;

  mix-blend-mode:soft-light;
}


/* =========================================================
   PREMIUM TITLES
========================================================= */

.hero-content h1,
.mag-divider h2,
.magazine-header h2,
.story-content h2,
.planner-title,
.photo-break-title,
.elite-center h2{

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f6e7c7 40%,
      #d9a95f 100%
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  letter-spacing:-1.5px;

  text-shadow:
    0 10px 40px rgba(0,0,0,.45),
    0 0 40px rgba(217,169,95,.10);
}


/* =========================================================
   GOLDEN TITLE UNDERLINE
========================================================= */

.magazine-header h2::after,
.mag-divider h2::after,
.hero-content h1::after{
  content:"";

  display:block;

  width:120px;
  height:2px;

  margin:24px auto 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      #d9a95f,
      transparent
    );

  opacity:.8;
}


/* =========================================================
   LUXURY GLASS CARDS
========================================================= */

.mag-card,
.itinerary-card,
.arusha-card,
.guide-card,
.lodge-card,
.elite-card{

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  border:
    1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(18px);

  box-shadow:
    0 20px 60px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.04);

  transition:
    transform .5s ease,
    box-shadow .5s ease,
    border-color .5s ease;
}


/* =========================================================
   PREMIUM HOVER DEPTH
========================================================= */

.mag-card:hover,
.itinerary-card:hover,
.arusha-card:hover,
.guide-card:hover,
.lodge-card:hover,
.elite-card:hover{

  transform:
    translateY(-10px);

  border-color:
    rgba(217,169,95,.28);

  box-shadow:
    0 35px 100px rgba(0,0,0,.55),
    0 0 40px rgba(217,169,95,.08);
}


/* =========================================================
   CINEMATIC IMAGE MOVEMENT
========================================================= */

.mag-img,
.itinerary-img,
.lodge-img,
.arusha-card-img{

  transition:
    transform 1.8s ease,
    filter .8s ease;
}

.mag-card:hover .mag-img,
.itinerary-card:hover .itinerary-img,
.lodge-card:hover .lodge-img,
.arusha-card:hover .arusha-card-img{

  transform:scale(1.08);

  filter:
    saturate(1.08)
    contrast(1.04);
}


/* =========================================================
   BUTTON CINEMATIC LIGHT
========================================================= */

.btn{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #e07a39,
      #c95c2a
    );

  box-shadow:
    0 12px 30px rgba(224,122,57,.22);
}

.btn::before{
  content:"";
  position:absolute;

  top:0;
  left:-120%;

  width:80%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );

  transform:skewX(-25deg);

  transition:1s;
}

.btn:hover::before{
  left:140%;
}


/* =========================================================
   STORY ATMOSPHERE
========================================================= */

.story-strip,
.mag-break,
.magazine-section,
.elite-trust{

  position:relative;
  overflow:hidden;
}

.story-strip::before,
.mag-break::before,
.magazine-section::before,
.elite-trust::before{

  content:"";
  position:absolute;

  width:700px;
  height:700px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(217,169,95,.08),
      transparent 70%
    );

  filter:blur(50px);

  pointer-events:none;
}

.story-strip::before{
  top:-250px;
  right:-200px;
}

.mag-break::before{
  bottom:-300px;
  left:-200px;
}

.magazine-section::before{
  top:-250px;
  left:-250px;
}

.elite-trust::before{
  bottom:-250px;
  right:-200px;
}


/* =========================================================
   ELEGANT BODY TEXT
========================================================= */

p{
  color:
    rgba(255,255,255,.78);

  line-height:1.85;
}


/* =========================================================
   KICKERS / LABELS
========================================================= */

.guide-kicker,
.mag-kicker,
.mag-tag,
.arusha-kicker{

  color:#f0c67a;

  letter-spacing:3px;

  text-transform:uppercase;

  font-size:11px;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#050505;
}

::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      180deg,
      #d9a95f,
      #7a5425
    );

  border-radius:999px;
}


/* =========================================================
   MOBILE POLISH
========================================================= */

@media(max-width:768px){

  .hero-content h1,
  .mag-divider h2,
  .magazine-header h2{
    letter-spacing:-.5px;
  }

  .mag-card,
  .itinerary-card,
  .guide-card,
  .arusha-card{
    border-radius:24px;
  }

}
/* =========================================================
   ULTRA COMPACT HEADER
========================================================= */

.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;

  z-index:9999;

  height:54px;

  background:
    rgba(5,10,8,.82);

  backdrop-filter:blur(10px);

  border-bottom:
    1px solid rgba(255,255,255,.05);
}

/* REMOVE EXTRA SPACE */
.header-glow{
  display:none;
}

/* CONTAINER */
.header-inner{
  width:95%;
  max-width:1400px;

  height:54px;

  margin:auto;

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

  gap:12px;
}

/* =========================================================
   BRAND
========================================================= */

.brand{
  display:flex;
  align-items:center;

  gap:8px;

  text-decoration:none;

  flex-shrink:0;
}

/* SMALL LOGO */
.brand-logo{
  width:28px;
  height:28px;

  border-radius:50%;

  overflow:hidden;
}

.brand-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* SMALL TITLE */
.brand-script{
  font-size:15px;

  line-height:1;

  font-weight:700;

  background:
    linear-gradient(
      180deg,
      #ffe8b3,
      #d9a95f,
      #d65a31
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* REMOVE SUBTITLE */
.brand-sub{
  display:none;
}

/* =========================================================
   NAV
========================================================= */

.site-nav{
  flex:1;

  display:flex;
  justify-content:center;
}

.menu{
  display:flex;
  align-items:center;

  gap:14px;

  margin:0;
  padding:0;

  list-style:none;
}

.menu a{
  color:#fff;

  text-decoration:none;

  font-size:10px;

  letter-spacing:1px;

  text-transform:uppercase;

  opacity:.82;

  transition:.25s;
}

.menu a:hover{
  color:#f0c67a;

  opacity:1;
}

/* =========================================================
   ACTIONS
========================================================= */

.header-actions{
  display:flex;
  align-items:center;

  gap:8px;
}

/* WHATSAPP */
.header-whatsapp{
  font-size:10px;

  color:#fff;

  text-decoration:none;

  opacity:.7;
}

/* BUTTON */
.enquire{
  padding:7px 12px;

  border-radius:999px;

  font-size:10px;

  text-decoration:none;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #df7a39,
      #c95528
    );
}

/* =========================================================
   MOBILE ICON
========================================================= */

.menu-toggle{
  display:none;

  width:32px;
  height:32px;

  border:none;
  background:none;

  position:relative;

  cursor:pointer;
}

.menu-toggle span{
  position:absolute;

  left:6px;

  width:18px;
  height:2px;

  background:#fff;
}

.menu-toggle span:nth-child(1){
  top:9px;
}

.menu-toggle span:nth-child(2){
  top:15px;
}

.menu-toggle span:nth-child(3){
  top:21px;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:1100px){

  .site-nav{
    display:none;
  }

  .menu-toggle{
    display:block;
  }

}

@media(max-width:700px){

  .header-whatsapp,
  .enquire{
    display:none;
  }

  .brand-script{
    font-size:13px;
  }

}

/* =========================================================
   IMPORTANT:
   PREVENT CONTENT HIDING UNDER HEADER
========================================================= */

#site-main{
  padding-top:54px;
}

/* =========================
   EXPERIENCE SECTION
========================= */

.safari-experiences{
  margin-top:40px;
  padding:30px;

  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;

  backdrop-filter:blur(10px);
}

.exp-title{
  font-size:18px;
  color:#f5d39a;
  margin-bottom:5px;
}

.exp-sub{
  font-size:12px;
  opacity:.7;
  margin-bottom:20px;
}

/* REGION TITLE */
.exp-region{
  font-size:12px;
  letter-spacing:2px;
  margin:20px 0 10px;
  color:#fff;
  opacity:.6;
}

/* GRID */
.exp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}

/* CARD */
.exp-card{
  cursor:pointer;
  position:relative;

  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;

  padding:14px;

  background:
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.25));

  transition:.3s;
}

.exp-card:hover{
  transform:translateY(-3px);
  border-color:rgba(224,122,57,.4);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* HIDE CHECKBOX */
.exp-card input{
  display:none;
}

/* TEXT */
.exp-inner h5{
  font-size:13px;
  margin-bottom:4px;
  color:#fff;
}

.exp-inner p{
  font-size:11px;
  opacity:.7;
}

/* SELECTED STATE */
.exp-card input:checked + .exp-inner{
  border-left:2px solid #df7a39;
}

.exp-card input:checked ~ .exp-inner,
.exp-card:has(input:checked){
  background:
    linear-gradient(135deg, rgba(223,122,57,.2), rgba(0,0,0,.3));
  border-color:#df7a39;
}

/* ================= LUXURY SOUVENIR SECTION ================= */
.souvenirs-section {
  position: relative;
  padding: 140px 20px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* DARK BUT CLEAN OVERLAY */
.souvenirs-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 1;
}

/* CONTENT WRAPPER */
.home-photo-break-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: auto;
  text-align: center;
}

/* ================= TITLE (SUBTLE LUXURY) ================= */
.photo-break-title {
  font-size: 46px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.souvenirs-section p {
  opacity: 0.65;
  font-size: 16px;
  margin-bottom: 60px;
}

/* ================= GRID (BALANCED EDITORIAL LAYOUT) ================= */
.souvenirs-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

/* ================= CARD (MINIMAL LUXURY) ================= */
.souvenir-card {
  grid-column: span 3;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;

  transition: all 0.35s ease;
}

/* IMAGE */
.souvenir-img {
  height: 180px;
  background-size: cover;
  background-position: center;
  filter: contrast(1.05);
}

/* TEXT */
.souvenir-card h3 {
  font-size: 16px;
  margin: 12px 12px 4px;
  font-weight: 500;
  color: #fff;
}

.souvenir-card span {
  display: block;
  margin: 0 12px 14px;
  font-size: 13px;
  color: #c9a84a;
}

/* ================= HOVER (VERY SUBTLE = LUXURY FEEL) ================= */
.souvenir-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
}

/* IMAGE SLIGHT ZOOM ONLY */
.souvenir-card:hover .souvenir-img {
  transform: scale(1.03);
  transition: transform 0.5s ease;
}

/* ================= FEATURED ITEM (ONLY ONE HERO PIECE) ================= */
.souvenir-card.featured {
  grid-column: span 6;
}

.souvenir-card.featured .souvenir-img {
  height: 320px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px) {
  .souvenir-card {
    grid-column: span 6;
  }

  .souvenir-card.featured {
    grid-column: span 12;
  }
}

@media (max-width: 600px) {
  .souvenir-card {
    grid-column: span 12;
  }
}