/* ZanziSavanna Tours — Modern multipage theme
   - Bootstrap 5 + custom polish
   - Clean, responsive, image-forward
*/

:root{
  --bg: #0b1220;
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.10);
  --text: #e9edf5;
  --muted: rgba(233,237,245,.72);
  --brand: #22c55e;
  --brand2: #0ea5e9;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
}

html, body{
  height: 100%;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: #0b1220;
  background: #f6f7fb;
}

a{
  text-decoration: none;
}

.container-narrow{
  max-width: 1020px;
}

/* NAV */
.navbar{
  backdrop-filter: blur(10px);
}

.navbar .nav-link{
  font-weight: 600;
  letter-spacing: .2px;
}

.navbar-dark .nav-link{
  color: rgba(255,255,255,.82) !important;
}

.navbar-dark .nav-link:hover{
  color: #fff !important;
}

/* HERO */
.hero{
  position: relative;
  min-height: 82vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
}

.hero.hero-sm{ min-height: 52vh; }

.hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 12% 20%, rgba(34,197,94,.35), transparent 55%),
              radial-gradient(1000px 500px at 85% 35%, rgba(14,165,233,.35), transparent 55%),
              linear-gradient(180deg, rgba(2,6,23,.90), rgba(2,6,23,.70));
  z-index: 1;
}

.hero-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.15) contrast(1.02);
  transform: scale(1.02);
}

.hero-content{
  position:relative;
  z-index: 2;
  color: var(--text);
  padding: 96px 0 56px;
}

.badge-soft{
  display:inline-flex;
  align-items:center;
  gap: .5rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
  font-weight: 600;
}

.hero h1{
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.04;
  text-shadow: 0 10px 35px rgba(0,0,0,.35);
}

.hero p{
  color: rgba(233,237,245,.82);
  max-width: 52ch;
}

/* Sections */
.section{
  padding: 72px 0;
}

.section-title{
  font-weight: 800;
  letter-spacing: -0.4px;
}

.kicker{
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  color: rgba(2,6,23,.55);
  font-weight: 800;
}

.card-soft{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--radius);
  box-shadow: 0 10px 35px rgba(2,6,23,.06);
  overflow: hidden;
  background: #fff;
}

.card-soft.dark{
  background: #0b1220;
  border-color: rgba(255,255,255,.10);
  color: var(--text);
  box-shadow: var(--shadow);
}

.media-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-cover{
  height: 230px;
  width: 100%;
  object-fit: cover;
}

.img-cover.sm{ height: 180px; }
.img-cover.lg{ height: 280px; }

.icon-pill{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(34,197,94,.14);
  color: #16a34a;
}

.icon-pill.blue{ background: rgba(14,165,233,.14); color: #0284c7; }
.icon-pill.amber{ background: rgba(245,158,11,.16); color: #b45309; }

.btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #18b353;
  --bs-btn-hover-border-color: #18b353;
  --bs-btn-color: #06210f;
  font-weight: 800;
  border-radius: 14px;
  padding: .78rem 1rem;
}

.btn-ghost{
  border-radius: 14px;
  padding: .78rem 1rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
}

.btn-ghost:hover{
  color:#fff;
  background: rgba(255,255,255,.10);
}

.btn-outline-dark.rounded-xl{
  border-radius: 14px;
  padding: .78rem 1rem;
  font-weight: 800;
}

/* chips */
.chip{
  display:inline-flex;
  align-items:center;
  gap: .4rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(2,6,23,.06);
  color: rgba(2,6,23,.72);
  font-weight: 700;
  font-size: .84rem;
}

.chip.dark{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.12);
}

/* feature lists */
.checklist{
  list-style: none;
  padding: 0;
  margin: 0;
}
.checklist li{
  display:flex;
  gap: .6rem;
  padding: .35rem 0;
  color: rgba(2,6,23,.80);
}
.checklist li span{
  margin-top: .1rem;
}

.check{
  width: 18px; height: 18px;
  border-radius: 6px;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.30);
  display:grid; place-items:center;
  flex: 0 0 auto;
}
.check svg{ width: 12px; height: 12px; color: #16a34a; }

/* forms */
.form-control, .form-select{
  border-radius: 14px;
  padding: .80rem .95rem;
}

.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.55);
}

/* footer */
.site-footer{
  background: #0b1220;
  color: rgba(233,237,245,.84);
  border-radius: 28px 28px 0 0;
}

.site-footer a{
  color: rgba(233,237,245,.84);
}
.site-footer a:hover{
  color: #fff;
}

/* subtle reveal */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.show{
  opacity: 1;
  transform: translateY(0);
}

/* utility */
.rounded-xxl{ border-radius: 22px; }
.shadow-soft{ box-shadow: 0 10px 35px rgba(2,6,23,.10); }
.hr-soft{ border-color: rgba(255,255,255,.10); }

/* cards hover */
.hover-lift{
  transition: transform .2s ease, box-shadow .2s ease;
}
.hover-lift:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(2,6,23,.12);
}

/* responsive tweaks */
@media (max-width: 992px){
  .hero-content{ padding: 92px 0 44px; }
  .hero h1{ font-size: 2.3rem; }
}
@media (min-width: 992px){
  .hero h1{ font-size: 3.3rem; }
}