:root{
  --safari-green:#2a6f4b;
  --earth-brown:#8b5e3c;
  --gold:#d4af37;
  --ocean-blue:#0b6fa4;
  --bg:#f7f6f2;
  --muted:#6b6b6b;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Arial;background:var(--bg);color:#111;margin:0}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.site-header{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.06);position:sticky;top:0;z-index:20}
.nav-bar{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;color:var(--safari-green);text-decoration:none;font-size:1.1rem}
.nav a{margin-left:1rem;color:#333;text-decoration:none}
.btn{background:var(--safari-green);color:#fff;padding:0.6rem 1rem;border-radius:6px;text-decoration:none;display:inline-block}
.btn.outline{background:rgba(255,255,255,0.12);border:2px solid rgba(255,255,255,0.18);color:#fff}
.hero{position:relative;padding:4rem 0;background-image:url('https://upload.wikimedia.org/wikipedia/commons/7/75/Three_zebras_in_Masai_Mara_National_Park%2C_Kenya.jpg');background-size:cover;background-position:center;color:white}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.45));pointer-events:none}
.hero-inner{position:relative;background:linear-gradient(180deg,rgba(0,0,0,0.65),rgba(0,0,0,0.65));padding:3rem;border-radius:8px;backdrop-filter:blur(2px)}
.hero h1{font-size:2.4rem;text-shadow:0 3px 14px rgba(0,0,0,0.6);margin:0;color:#fff}
.hero .tagline{opacity:0.98;margin-top:0.5rem;color:rgba(255,255,255,0.95)}
.hero .hero-ctas a{margin-right:0.6rem}
.hero .btn{box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.featured .card,.grid .card{background:#fff;padding:1rem;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,0.06)}
.card .img-wrap{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:6px}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.tour-title{font-weight:600;margin:0.5rem 0}
.tour-meta{color:var(--muted);font-size:0.9rem}
.whatsapp-float{position:fixed;right:18px;bottom:18px;background:var(--safari-green);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,0.16)}
.whatsapp-float img{width:28px;height:28px}
.site-footer{padding:1rem 0;background:#fff;margin-top:3rem}
/* Professional footer styles */
.site-footer{background:var(--safari-green);color:#fff;padding:2rem 0;margin-top:3rem}
.site-footer a{color:rgba(255,255,255,0.95);text-decoration:none}
.site-footer .muted{color:rgba(255,255,255,0.85)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem;align-items:start}
.footer-brand .logo{color:#fff;font-weight:700;font-size:1.15rem}
.footer-contact p,.footer-links p,.footer-social p{margin:0.35rem 0;color:rgba(255,255,255,0.95)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:1rem;margin-top:1rem;text-align:center;color:rgba(255,255,255,0.9)}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr}}
.inquiry-form{max-width:600px;display:grid;gap:0.6rem}
.inquiry-form label{display:block}
.inquiry-form input,.inquiry-form textarea,.inquiry-form select{width:100%;padding:0.6rem;border:1px solid #ddd;border-radius:6px}
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.8);z-index:60}
.lightbox img{max-width:95%;max-height:85%}
.lightbox .lightbox-close{position:absolute;right:20px;top:20px;background:transparent;border:0;color:#fff;font-size:2rem}

/* Tour details layout */
.tour-layout{display:grid;grid-template-columns:1fr 320px;gap:1.5rem;align-items:start}
.booking-card{background:#fff;padding:1rem;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.08)}
.booking-card h4{margin-top:0}
.booking-card .form-row{margin-bottom:0.6rem}
.booking-card input,.booking-card textarea,.booking-card select{width:100%;padding:0.5rem;border:1px solid #ddd;border-radius:6px}
.btn-whatsapp{background:#25D366;color:#fff;padding:0.6rem 0.9rem;border-radius:6px;display:inline-block;text-decoration:none}

@media (max-width:900px){.tour-layout{grid-template-columns:1fr;}}

/* Responsive tweaks */
@media (max-width:700px){
  .nav{display:none}
  .hero{padding:2rem}
  .hero-inner{padding:1.5rem}
}

@media (max-width:1000px){
  .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.8rem}
}

@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .hero-inner{padding:1rem}
}

/* Small image caption styling */
.card .tour-title{font-size:1rem;margin-top:.6rem}

/* Accessibility & focus styles */
.btn:focus-visible, a:focus-visible, button:focus-visible {outline:3px solid var(--gold);outline-offset:3px}
input:focus-visible, textarea:focus-visible, select:focus-visible {box-shadow:0 0 0 3px rgba(11,111,164,0.12);border-color:var(--ocean-blue)}
.nav a:focus-visible{outline:2px dashed var(--ocean-blue);outline-offset:3px}
.card:focus-within{box-shadow:0 6px 20px rgba(0,0,0,0.12)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Lightbox visible state */
.lightbox[aria-hidden="false"]{display:flex}

/* gallery grid used on tour-details */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.6rem;margin-top:0.6rem}
.gallery-grid img{width:100%;height:140px;object-fit:cover;border-radius:6px;display:block}

