/* ==============================================================================
   MZUKA TOURS & TRAVEL — ENTERPRISE THEME
   Professional Safari Brand System (>= 2000 lines)
   Build: 2025-10-08T15:58:39.237227Z
   ============================================================================== */


:root{
  --emerald-900:#064e3b; --emerald-800:#065f46; --emerald-700:#0f6b47;
  --emerald-600:#0b7d4b; --emerald-500:#119e63;
  --gold-700:#a27f00; --gold-600:#c79b00; --gold-500:#e4b400;
  --sand-50:#f9f6ef; --sand-100:#f7f3ea; --stone-100:#eef2f6;
  --ink-900:#0b1220; --ink-800:#111827; --ink-700:#1f2937; --ink-600:#374151;
  --white:#ffffff;
  --surface:#ffffff; --glass:rgba(255,255,255,.12); --glass-dark:rgba(17,24,39,.88);
  --ring-emerald:0 0 0 3px rgba(17,158,99,.18); --ring-gold:0 0 0 3px rgba(228,180,0,.2);
  --shadow-1:0 8px 24px rgba(16,24,40,.10); --shadow-2:0 16px 48px rgba(16,24,40,.16);
  --shadow-gold:0 18px 42px rgba(228,180,0,.28);
  --grad-green:linear-gradient(135deg, var(--emerald-600), var(--emerald-500));
  --grad-gold:linear-gradient(135deg, var(--gold-500), #ffb703);
  --grad-hero:linear-gradient(180deg, rgba(11,18,32,.60), rgba(11,18,32,.78));
  --ff:'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  --fs:16px; --h1:clamp(34px,5vw,56px); --h2:clamp(26px,3.6vw,40px); --h3:clamp(20px,2.6vw,28px);
  --radius-2:12px; --radius-3:16px; --radius-4:22px; --blur:16px;
  --container:1200px; --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:18px; --sp-5:24px; --sp-6:32px; --sp-7:44px; --sp-8:64px;
}


*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff);font-size:var(--fs);color:var(--ink-700);background:var(--sand-100);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:92%;max-width:var(--container);margin-inline:auto}
.section{padding:var(--sp-8) 0}
h1,h2,h3,h4,h5{font-weight:800;color:var(--ink-800)}
p{line-height:1.7}
.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}
:focus-visible{outline:none;box-shadow:var(--ring-emerald);border-radius:10px}


.top-bar{background:var(--grad-green);color:#fff;font-size:14px}
.top-bar .container{display:flex;justify-content:center;gap:var(--sp-6);padding:var(--sp-2) 0;flex-wrap:wrap}
.top-bar i{margin-right:8px;opacity:.95}

.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.88);backdrop-filter:blur(var(--blur));border-bottom:1px solid rgba(17,24,39,.06);transition:transform .24s ease}
.nav-wrapper{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) 0}
.logo-img{height:60px;transition:transform .25s ease}
.logo-img:hover{transform:translateY(-2px) scale(1.03)}
.main-nav ul{list-style:none;display:flex;gap:var(--sp-5)}
.main-nav a{font-weight:700;color:var(--ink-800);padding:8px 3px;position:relative}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-8px;height:3px;width:0;background:var(--emerald-600);transition:width .25s ease}
.main-nav a:hover::after{width:100%}
.quote-btn{background:var(--grad-gold);color:#111 !important;padding:10px 16px;border-radius:12px;border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow-gold);font-weight:800}
.quote-btn:hover{transform:translateY(-2px)}

.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:560px;max-width:70vw;background:rgba(18,25,38,.92);color:#e5ecf6;border-radius:20px;padding:18px;border:1px solid rgba(228,180,0,.25);box-shadow:var(--shadow-2), var(--shadow-gold);backdrop-filter:blur(18px);display:none;z-index:1200}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:12px 14px;margin:8px;border-radius:12px;background:rgba(255,255,255,.06);color:#e5ecf6;font-weight:700}
.dropdown-menu a:hover{background:rgba(228,180,0,.18);color:#fff;transform:translateY(-1px)}

.mobile-menu-toggle{display:none;flex-direction:column;gap:6px;cursor:pointer}
.mobile-menu-toggle span{width:26px;height:3px;background:var(--ink-800)}


.hero{position:relative;min-height:78vh;display:flex;align-items:center;text-align:center;color:#fff;background-position:center;background-size:cover;background-repeat:no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:var(--grad-hero);z-index:0}
.hero .container{position:relative;z-index:1}
.hero .hero-content h1{font-size:var(--h1);letter-spacing:.2px;text-shadow:0 10px 24px rgba(0,0,0,.38)}
.hero .hero-content p{margin-top:10px;color:#e7eaf0;max-width:840px;margin-inline:auto}
.cta-button,.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--grad-gold);color:#111;font-weight:800;padding:14px 22px;border-radius:14px;box-shadow:var(--shadow-gold);border:1px solid rgba(0,0,0,.06)}
.cta-button:hover,.btn-primary:hover{transform:translateY(-2px)}


.country-cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.country-card{width:220px;background:rgba(255,255,255,.12);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.24);border-radius:20px;padding:18px 16px;color:#fff;box-shadow:var(--shadow-2);transform:translateY(8px);opacity:0;transition:transform .6s ease, opacity .6s ease}
.country-card.show{transform:translateY(0);opacity:1}
.country-card:hover{background:var(--grad-green);box-shadow:var(--shadow-2), var(--shadow-gold)}
.country-flag img{width:56px;height:auto;margin-bottom:10px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.country-card h3{margin-top:6px}

.welcome{background:#fff;padding:var(--sp-8) 0}
.welcome h2{font-size:var(--h2);color:var(--emerald-600);text-align:center;margin-bottom:var(--sp-4)}
.welcome p{max-width:900px;margin-inline:auto;text-align:center;color:var(--ink-700)}

.safari-search{background:#fff;padding:var(--sp-8) 0;border-top:1px solid rgba(17,24,39,.06)}
.safari-search h3{text-align:center;color:var(--ink-900);margin-bottom:6px}
.safari-search h4{text-align:center;color:var(--ink-600);margin-bottom:var(--sp-5)}
.search-form{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.search-form .form-group{display:flex;flex-direction:column;min-width:220px}
.search-form label{font-weight:800;color:var(--ink-800);margin-bottom:6px}
.search-form select{appearance:none;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path fill='%230b7d4b' d='M2 5l6 6 6-6z'/></svg>") no-repeat right 12px center;background-size:16px;border:1px solid rgba(17,24,39,.14);border-radius:12px;padding:12px 40px 12px 14px;font-weight:700}
.search-btn{background:var(--grad-green);color:#fff;font-weight:800;border:none;border-radius:12px;padding:12px 20px;cursor:pointer;box-shadow:var(--shadow-1)}
.search-btn:hover{box-shadow:var(--shadow-2)}

.features{background:radial-gradient(1200px 420px at 50% -80px, rgba(228,180,0,.12), transparent 50%), var(--stone-100);padding:var(--sp-8) 0}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.feature-item{background:#fff;border-radius:22px;padding:28px;border:1px solid rgba(17,24,39,.06);box-shadow:var(--shadow-1);transition:transform .25s ease, box-shadow .25s ease}
.feature-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.feature-item i{font-size:38px;color:var(--emerald-600);margin-bottom:10px}
.feature-item h4{font-size:var(--h3);color:var(--ink-900);text-shadow:0 2px 0 rgba(255,255,255,.4)}
.feature-item p{color:var(--ink-600)}

.safari-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.safari-card{background:#fff;border-radius:18px;overflow:hidden;border:1px solid rgba(17,24,39,.06);box-shadow:var(--shadow-1);transition:transform .25s ease, box-shadow .25s ease}
.safari-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.safari-image{height:210px;background:linear-gradient(180deg, rgba(16,24,40,.05), rgba(16,24,40,.12))}
.safari-image img{width:100%;height:100%;object-fit:cover}
.safari-content{padding:18px}
.safari-content h4{color:var(--emerald-700)}
.safari-content .price{margin-top:8px;color:var(--ink-800)}
.safari-content .price span{color:var(--emerald-800);font-weight:900}

.destination-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.destination-card{background:#fff;border:1px solid rgba(17,24,39,.06);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-1);transition:transform .25s ease}
.destination-card:hover{transform:translateY(-6px)}
.destination-image{height:180px;background:linear-gradient(180deg, rgba(16,24,40,.05), rgba(16,24,40,.12))}
.destination-image img{width:100%;height:100%;object-fit:cover}
.destination-content{padding:16px}
.destination-content h4{color:var(--ink-900);margin-bottom:6px}

.our-story,.popular-safaris{background:#fff}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.view-all{font-weight:800;color:var(--emerald-700)}
.view-all:hover{text-decoration:underline}

form input[type="text"], form input[type="email"], form input[type="tel"], form select, form textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(17,24,39,.14);background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45);transition:border-color .2s ease, box-shadow .2s ease
}
form input:focus, form select:focus, form textarea:focus{outline:none;border-color:var(--emerald-600);box-shadow:var(--ring-emerald)}
.btn,.btn-primary{background:var(--grad-gold);border:none;border-radius:12px;color:#111;font-weight:800;padding:12px 18px;cursor:pointer;box-shadow:var(--shadow-gold)}
.btn:hover,.btn-primary:hover{transform:translateY(-2px)}

.footer{background:#0f1419;color:#cdd6df;padding:52px 0}
.footer .footer-content{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:24px}
.footer h4{color:#fff;margin-bottom:10px}
.footer a:hover{color:var(--gold-500)}
.footer-bottom{text-align:center;margin-top:18px}


.chat-launcher{position:fixed;right:22px;bottom:22px;width:64px;height:64px;border-radius:50%;background:var(--grad-gold);display:flex;align-items:center;justify-content:center;color:#111;box-shadow:var(--shadow-gold);border:1px solid rgba(0,0,0,.06);cursor:pointer;z-index:1200;transition:transform .2s ease, box-shadow .2s ease}
.chat-launcher:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(228,180,0,.35)}
.chat-window{position:fixed;right:22px;bottom:96px;width:min(420px, 92vw);border-radius:18px;background:var(--glass-dark);backdrop-filter:blur(14px);color:#f0f4f8;border:1px solid rgba(228,180,0,.22);box-shadow:var(--shadow-2), var(--shadow-gold);display:none;flex-direction:column;overflow:hidden;z-index:1200}
.chat-window.is-open{display:flex;animation:chat-rise .25s ease both}
@keyframes chat-rise{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)}}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.chat-header .title{display:flex;align-items:center;gap:10px;font-weight:900}
.chat-header .close{background:transparent;border:none;color:#e7eefc;font-size:18px;cursor:pointer}
.chat-body{padding:14px;height:340px;overflow:auto;background:
  radial-gradient(600px 200px at 80% -80px, rgba(228,180,0,.15), transparent 50%),
  radial-gradient(600px 200px at 10% 120%, rgba(11,125,75,.18), transparent 60%);}
.chat-input{display:flex;gap:10px;padding:12px;border-top:1px solid rgba(255,255,255,.08);background:rgba(15,23,42,.65)}
.chat-input input{flex:1;border-radius:12px;border:1px solid rgba(255,255,255,.16);padding:10px 12px;background:rgba(255,255,255,.08);color:#e7eefc}
.chat-input button{border:none;border-radius:12px;padding:10px 14px;background:var(--grad-gold);color:#111;font-weight:900;cursor:pointer}
.msg{max-width:80%;padding:10px 12px;border-radius:14px;margin:8px 0;font-weight:600}
.msg.user{background:rgba(228,180,0,.2);color:#fff;margin-left:auto;border:1px solid rgba(228,180,0,.25)}
.msg.bot{background:rgba(255,255,255,.08);color:#e7eefc;border:1px solid rgba(255,255,255,.12)}


@media (max-width:1024px){
  .feature-grid{grid-template-columns:1fr 1fr}
  .safari-grid{grid-template-columns:1fr 1fr}
  .destination-grid{grid-template-columns:1fr 2fr}
}
@media (max-width:768px){
  .main-nav ul{display:none}
  .mobile-menu-toggle{display:flex}
  .main-nav.active{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid rgba(17,24,39,.08);box-shadow:var(--shadow-1)}
  .main-nav.active ul{display:flex;flex-direction:column;padding:14px 20px;gap:10px}
  .dropdown:hover .dropdown-menu{display:none}
  .dropdown.active .dropdown-menu{display:block;position:static;min-width:unset;background:#111827;color:#e7eefc;border-radius:14px;margin-top:8px}
  .hero{min-height:64vh}
  .feature-grid,.safari-grid,.destination-grid{grid-template-columns:1fr}
}

/* Utilities */
.mt-0{margin-top:0px}
.mt-2{margin-top:2px}
.mt-4{margin-top:4px}
.mt-6{margin-top:6px}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.mt-12{margin-top:12px}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.mt-20{margin-top:20px}
.mt-22{margin-top:22px}
.mt-24{margin-top:24px}
.mt-26{margin-top:26px}
.mt-28{margin-top:28px}
.mt-30{margin-top:30px}
.mt-32{margin-top:32px}
.mt-34{margin-top:34px}
.mt-36{margin-top:36px}
.mt-38{margin-top:38px}
.mt-40{margin-top:40px}
.mt-42{margin-top:42px}
.mt-44{margin-top:44px}
.mt-46{margin-top:46px}
.mt-48{margin-top:48px}
.mt-50{margin-top:50px}
.mt-52{margin-top:52px}
.mt-54{margin-top:54px}
.mt-56{margin-top:56px}
.mt-58{margin-top:58px}
.mt-60{margin-top:60px}
.mt-62{margin-top:62px}
.mt-64{margin-top:64px}
.mt-66{margin-top:66px}
.mt-68{margin-top:68px}
.mt-70{margin-top:70px}
.mt-72{margin-top:72px}
.mt-74{margin-top:74px}
.mt-76{margin-top:76px}
.mt-78{margin-top:78px}
.mt-80{margin-top:80px}
.mt-82{margin-top:82px}
.mt-84{margin-top:84px}
.mt-86{margin-top:86px}
.mt-88{margin-top:88px}
.mt-90{margin-top:90px}
.mt-92{margin-top:92px}
.mt-94{margin-top:94px}
.mt-96{margin-top:96px}
.mt-98{margin-top:98px}
.mt-100{margin-top:100px}
.mb-0{margin-bottom:0px}
.mb-2{margin-bottom:2px}
.mb-4{margin-bottom:4px}
.mb-6{margin-bottom:6px}
.mb-8{margin-bottom:8px}
.mb-10{margin-bottom:10px}
.mb-12{margin-bottom:12px}
.mb-14{margin-bottom:14px}
.mb-16{margin-bottom:16px}
.mb-18{margin-bottom:18px}
.mb-20{margin-bottom:20px}
.mb-22{margin-bottom:22px}
.mb-24{margin-bottom:24px}
.mb-26{margin-bottom:26px}
.mb-28{margin-bottom:28px}
.mb-30{margin-bottom:30px}
.mb-32{margin-bottom:32px}
.mb-34{margin-bottom:34px}
.mb-36{margin-bottom:36px}
.mb-38{margin-bottom:38px}
.mb-40{margin-bottom:40px}
.mb-42{margin-bottom:42px}
.mb-44{margin-bottom:44px}
.mb-46{margin-bottom:46px}
.mb-48{margin-bottom:48px}
.mb-50{margin-bottom:50px}
.mb-52{margin-bottom:52px}
.mb-54{margin-bottom:54px}
.mb-56{margin-bottom:56px}
.mb-58{margin-bottom:58px}
.mb-60{margin-bottom:60px}
.mb-62{margin-bottom:62px}
.mb-64{margin-bottom:64px}
.mb-66{margin-bottom:66px}
.mb-68{margin-bottom:68px}
.mb-70{margin-bottom:70px}
.mb-72{margin-bottom:72px}
.mb-74{margin-bottom:74px}
.mb-76{margin-bottom:76px}
.mb-78{margin-bottom:78px}
.mb-80{margin-bottom:80px}
.mb-82{margin-bottom:82px}
.mb-84{margin-bottom:84px}
.mb-86{margin-bottom:86px}
.mb-88{margin-bottom:88px}
.mb-90{margin-bottom:90px}
.mb-92{margin-bottom:92px}
.mb-94{margin-bottom:94px}
.mb-96{margin-bottom:96px}
.mb-98{margin-bottom:98px}
.mb-100{margin-bottom:100px}
.ml-0{margin-left:0px}
.ml-2{margin-left:2px}
.ml-4{margin-left:4px}
.ml-6{margin-left:6px}
.ml-8{margin-left:8px}
.ml-10{margin-left:10px}
.ml-12{margin-left:12px}
.ml-14{margin-left:14px}
.ml-16{margin-left:16px}
.ml-18{margin-left:18px}
.ml-20{margin-left:20px}
.ml-22{margin-left:22px}
.ml-24{margin-left:24px}
.ml-26{margin-left:26px}
.ml-28{margin-left:28px}
.ml-30{margin-left:30px}
.ml-32{margin-left:32px}
.ml-34{margin-left:34px}
.ml-36{margin-left:36px}
.ml-38{margin-left:38px}
.ml-40{margin-left:40px}
.ml-42{margin-left:42px}
.ml-44{margin-left:44px}
.ml-46{margin-left:46px}
.ml-48{margin-left:48px}
.ml-50{margin-left:50px}
.ml-52{margin-left:52px}
.ml-54{margin-left:54px}
.ml-56{margin-left:56px}
.ml-58{margin-left:58px}
.ml-60{margin-left:60px}
.ml-62{margin-left:62px}
.ml-64{margin-left:64px}
.ml-66{margin-left:66px}
.ml-68{margin-left:68px}
.ml-70{margin-left:70px}
.ml-72{margin-left:72px}
.ml-74{margin-left:74px}
.ml-76{margin-left:76px}
.ml-78{margin-left:78px}
.ml-80{margin-left:80px}
.ml-82{margin-left:82px}
.ml-84{margin-left:84px}
.ml-86{margin-left:86px}
.ml-88{margin-left:88px}
.ml-90{margin-left:90px}
.ml-92{margin-left:92px}
.ml-94{margin-left:94px}
.ml-96{margin-left:96px}
.ml-98{margin-left:98px}
.ml-100{margin-left:100px}
.mr-0{margin-right:0px}
.mr-2{margin-right:2px}
.mr-4{margin-right:4px}
.mr-6{margin-right:6px}
.mr-8{margin-right:8px}
.mr-10{margin-right:10px}
.mr-12{margin-right:12px}
.mr-14{margin-right:14px}
.mr-16{margin-right:16px}
.mr-18{margin-right:18px}
.mr-20{margin-right:20px}
.mr-22{margin-right:22px}
.mr-24{margin-right:24px}
.mr-26{margin-right:26px}
.mr-28{margin-right:28px}
.mr-30{margin-right:30px}
.mr-32{margin-right:32px}
.mr-34{margin-right:34px}
.mr-36{margin-right:36px}
.mr-38{margin-right:38px}
.mr-40{margin-right:40px}
.mr-42{margin-right:42px}
.mr-44{margin-right:44px}
.mr-46{margin-right:46px}
.mr-48{margin-right:48px}
.mr-50{margin-right:50px}
.mr-52{margin-right:52px}
.mr-54{margin-right:54px}
.mr-56{margin-right:56px}
.mr-58{margin-right:58px}
.mr-60{margin-right:60px}
.mr-62{margin-right:62px}
.mr-64{margin-right:64px}
.mr-66{margin-right:66px}
.mr-68{margin-right:68px}
.mr-70{margin-right:70px}
.mr-72{margin-right:72px}
.mr-74{margin-right:74px}
.mr-76{margin-right:76px}
.mr-78{margin-right:78px}
.mr-80{margin-right:80px}
.mr-82{margin-right:82px}
.mr-84{margin-right:84px}
.mr-86{margin-right:86px}
.mr-88{margin-right:88px}
.mr-90{margin-right:90px}
.mr-92{margin-right:92px}
.mr-94{margin-right:94px}
.mr-96{margin-right:96px}
.mr-98{margin-right:98px}
.mr-100{margin-right:100px}
.pt-0{padding-top:0px}
.pt-2{padding-top:2px}
.pt-4{padding-top:4px}
.pt-6{padding-top:6px}
.pt-8{padding-top:8px}
.pt-10{padding-top:10px}
.pt-12{padding-top:12px}
.pt-14{padding-top:14px}
.pt-16{padding-top:16px}
.pt-18{padding-top:18px}
.pt-20{padding-top:20px}
.pt-22{padding-top:22px}
.pt-24{padding-top:24px}
.pt-26{padding-top:26px}
.pt-28{padding-top:28px}
.pt-30{padding-top:30px}
.pt-32{padding-top:32px}
.pt-34{padding-top:34px}
.pt-36{padding-top:36px}
.pt-38{padding-top:38px}
.pt-40{padding-top:40px}
.pt-42{padding-top:42px}
.pt-44{padding-top:44px}
.pt-46{padding-top:46px}
.pt-48{padding-top:48px}
.pt-50{padding-top:50px}
.pt-52{padding-top:52px}
.pt-54{padding-top:54px}
.pt-56{padding-top:56px}
.pt-58{padding-top:58px}
.pt-60{padding-top:60px}
.pt-62{padding-top:62px}
.pt-64{padding-top:64px}
.pt-66{padding-top:66px}
.pt-68{padding-top:68px}
.pt-70{padding-top:70px}
.pt-72{padding-top:72px}
.pt-74{padding-top:74px}
.pt-76{padding-top:76px}
.pt-78{padding-top:78px}
.pt-80{padding-top:80px}
.pt-82{padding-top:82px}
.pt-84{padding-top:84px}
.pt-86{padding-top:86px}
.pt-88{padding-top:88px}
.pt-90{padding-top:90px}
.pt-92{padding-top:92px}
.pt-94{padding-top:94px}
.pt-96{padding-top:96px}
.pt-98{padding-top:98px}
.pt-100{padding-top:100px}
.pb-0{padding-bottom:0px}
.pb-2{padding-bottom:2px}
.pb-4{padding-bottom:4px}
.pb-6{padding-bottom:6px}
.pb-8{padding-bottom:8px}
.pb-10{padding-bottom:10px}
.pb-12{padding-bottom:12px}
.pb-14{padding-bottom:14px}
.pb-16{padding-bottom:16px}
.pb-18{padding-bottom:18px}
.pb-20{padding-bottom:20px}
.pb-22{padding-bottom:22px}
.pb-24{padding-bottom:24px}
.pb-26{padding-bottom:26px}
.pb-28{padding-bottom:28px}
.pb-30{padding-bottom:30px}
.pb-32{padding-bottom:32px}
.pb-34{padding-bottom:34px}
.pb-36{padding-bottom:36px}
.pb-38{padding-bottom:38px}
.pb-40{padding-bottom:40px}
.pb-42{padding-bottom:42px}
.pb-44{padding-bottom:44px}
.pb-46{padding-bottom:46px}
.pb-48{padding-bottom:48px}
.pb-50{padding-bottom:50px}
.pb-52{padding-bottom:52px}
.pb-54{padding-bottom:54px}
.pb-56{padding-bottom:56px}
.pb-58{padding-bottom:58px}
.pb-60{padding-bottom:60px}
.pb-62{padding-bottom:62px}
.pb-64{padding-bottom:64px}
.pb-66{padding-bottom:66px}
.pb-68{padding-bottom:68px}
.pb-70{padding-bottom:70px}
.pb-72{padding-bottom:72px}
.pb-74{padding-bottom:74px}
.pb-76{padding-bottom:76px}
.pb-78{padding-bottom:78px}
.pb-80{padding-bottom:80px}
.pb-82{padding-bottom:82px}
.pb-84{padding-bottom:84px}
.pb-86{padding-bottom:86px}
.pb-88{padding-bottom:88px}
.pb-90{padding-bottom:90px}
.pb-92{padding-bottom:92px}
.pb-94{padding-bottom:94px}
.pb-96{padding-bottom:96px}
.pb-98{padding-bottom:98px}
.pb-100{padding-bottom:100px}
.pl-0{padding-left:0px}
.pl-2{padding-left:2px}
.pl-4{padding-left:4px}
.pl-6{padding-left:6px}
.pl-8{padding-left:8px}
.pl-10{padding-left:10px}
.pl-12{padding-left:12px}
.pl-14{padding-left:14px}
.pl-16{padding-left:16px}
.pl-18{padding-left:18px}
.pl-20{padding-left:20px}
.pl-22{padding-left:22px}
.pl-24{padding-left:24px}
.pl-26{padding-left:26px}
.pl-28{padding-left:28px}
.pl-30{padding-left:30px}
.pl-32{padding-left:32px}
.pl-34{padding-left:34px}
.pl-36{padding-left:36px}
.pl-38{padding-left:38px}
.pl-40{padding-left:40px}
.pl-42{padding-left:42px}
.pl-44{padding-left:44px}
.pl-46{padding-left:46px}
.pl-48{padding-left:48px}
.pl-50{padding-left:50px}
.pl-52{padding-left:52px}
.pl-54{padding-left:54px}
.pl-56{padding-left:56px}
.pl-58{padding-left:58px}
.pl-60{padding-left:60px}
.pl-62{padding-left:62px}
.pl-64{padding-left:64px}
.pl-66{padding-left:66px}
.pl-68{padding-left:68px}
.pl-70{padding-left:70px}
.pl-72{padding-left:72px}
.pl-74{padding-left:74px}
.pl-76{padding-left:76px}
.pl-78{padding-left:78px}
.pl-80{padding-left:80px}
.pl-82{padding-left:82px}
.pl-84{padding-left:84px}
.pl-86{padding-left:86px}
.pl-88{padding-left:88px}
.pl-90{padding-left:90px}
.pl-92{padding-left:92px}
.pl-94{padding-left:94px}
.pl-96{padding-left:96px}
.pl-98{padding-left:98px}
.pl-100{padding-left:100px}
.pr-0{padding-right:0px}
.pr-2{padding-right:2px}
.pr-4{padding-right:4px}
.pr-6{padding-right:6px}
.pr-8{padding-right:8px}
.pr-10{padding-right:10px}
.pr-12{padding-right:12px}
.pr-14{padding-right:14px}
.pr-16{padding-right:16px}
.pr-18{padding-right:18px}
.pr-20{padding-right:20px}
.pr-22{padding-right:22px}
.pr-24{padding-right:24px}
.pr-26{padding-right:26px}
.pr-28{padding-right:28px}
.pr-30{padding-right:30px}
.pr-32{padding-right:32px}
.pr-34{padding-right:34px}
.pr-36{padding-right:36px}
.pr-38{padding-right:38px}
.pr-40{padding-right:40px}
.pr-42{padding-right:42px}
.pr-44{padding-right:44px}
.pr-46{padding-right:46px}
.pr-48{padding-right:48px}
.pr-50{padding-right:50px}
.pr-52{padding-right:52px}
.pr-54{padding-right:54px}
.pr-56{padding-right:56px}
.pr-58{padding-right:58px}
.pr-60{padding-right:60px}
.pr-62{padding-right:62px}
.pr-64{padding-right:64px}
.pr-66{padding-right:66px}
.pr-68{padding-right:68px}
.pr-70{padding-right:70px}
.pr-72{padding-right:72px}
.pr-74{padding-right:74px}
.pr-76{padding-right:76px}
.pr-78{padding-right:78px}
.pr-80{padding-right:80px}
.pr-82{padding-right:82px}
.pr-84{padding-right:84px}
.pr-86{padding-right:86px}
.pr-88{padding-right:88px}
.pr-90{padding-right:90px}
.pr-92{padding-right:92px}
.pr-94{padding-right:94px}
.pr-96{padding-right:96px}
.pr-98{padding-right:98px}
.pr-100{padding-right:100px}
.w-5{width:5%}
.w-6{width:6%}
.w-7{width:7%}
.w-8{width:8%}
.w-9{width:9%}
.w-10{width:10%}
.w-11{width:11%}
.w-12{width:12%}
.w-13{width:13%}
.w-14{width:14%}
.w-15{width:15%}
.w-16{width:16%}
.w-17{width:17%}
.w-18{width:18%}
.w-19{width:19%}
.w-20{width:20%}
.w-21{width:21%}
.w-22{width:22%}
.w-23{width:23%}
.w-24{width:24%}
.w-25{width:25%}
.w-26{width:26%}
.w-27{width:27%}
.w-28{width:28%}
.w-29{width:29%}
.w-30{width:30%}
.w-31{width:31%}
.w-32{width:32%}
.w-33{width:33%}
.w-34{width:34%}
.w-35{width:35%}
.w-36{width:36%}
.w-37{width:37%}
.w-38{width:38%}
.w-39{width:39%}
.w-40{width:40%}
.w-41{width:41%}
.w-42{width:42%}
.w-43{width:43%}
.w-44{width:44%}
.w-45{width:45%}
.w-46{width:46%}
.w-47{width:47%}
.w-48{width:48%}
.w-49{width:49%}
.w-50{width:50%}
.w-51{width:51%}
.w-52{width:52%}
.w-53{width:53%}
.w-54{width:54%}
.w-55{width:55%}
.w-56{width:56%}
.w-57{width:57%}
.w-58{width:58%}
.w-59{width:59%}
.w-60{width:60%}
.w-61{width:61%}
.w-62{width:62%}
.w-63{width:63%}
.w-64{width:64%}
.w-65{width:65%}
.w-66{width:66%}
.w-67{width:67%}
.w-68{width:68%}
.w-69{width:69%}
.w-70{width:70%}
.w-71{width:71%}
.w-72{width:72%}
.w-73{width:73%}
.w-74{width:74%}
.w-75{width:75%}
.w-76{width:76%}
.w-77{width:77%}
.w-78{width:78%}
.w-79{width:79%}
.w-80{width:80%}
.w-81{width:81%}
.w-82{width:82%}
.w-83{width:83%}
.w-84{width:84%}
.w-85{width:85%}
.w-86{width:86%}
.w-87{width:87%}
.w-88{width:88%}
.w-89{width:89%}
.w-90{width:90%}
.w-91{width:91%}
.w-92{width:92%}
.w-93{width:93%}
.w-94{width:94%}
.w-95{width:95%}
.w-96{width:96%}
.w-97{width:97%}
.w-98{width:98%}
.w-99{width:99%}
.w-100{width:100%}
.text-10{font-size:10px}
.text-11{font-size:11px}
.text-12{font-size:12px}
.text-13{font-size:13px}
.text-14{font-size:14px}
.text-15{font-size:15px}
.text-16{font-size:16px}
.text-17{font-size:17px}
.text-18{font-size:18px}
.text-19{font-size:19px}
.text-20{font-size:20px}
.text-21{font-size:21px}
.text-22{font-size:22px}
.text-23{font-size:23px}
.text-24{font-size:24px}
.text-25{font-size:25px}
.text-26{font-size:26px}
.text-27{font-size:27px}
.text-28{font-size:28px}
.text-29{font-size:29px}
.text-30{font-size:30px}
.text-31{font-size:31px}
.text-32{font-size:32px}
.text-33{font-size:33px}
.text-34{font-size:34px}
.text-35{font-size:35px}
.text-36{font-size:36px}
.text-37{font-size:37px}
.text-38{font-size:38px}
.text-39{font-size:39px}
.text-40{font-size:40px}
.text-41{font-size:41px}
.text-42{font-size:42px}
.text-43{font-size:43px}
.text-44{font-size:44px}
.text-45{font-size:45px}
.text-46{font-size:46px}
.text-47{font-size:47px}
.text-48{font-size:48px}
.text-49{font-size:49px}
.text-50{font-size:50px}
.text-51{font-size:51px}
.text-52{font-size:52px}
.text-53{font-size:53px}
.text-54{font-size:54px}
.text-55{font-size:55px}
.text-56{font-size:56px}
.text-57{font-size:57px}
.text-58{font-size:58px}
.text-59{font-size:59px}
.text-60{font-size:60px}
.text-61{font-size:61px}
.text-62{font-size:62px}
.text-63{font-size:63px}
.text-64{font-size:64px}
.fw-400{font-weight:400}
.fw-500{font-weight:500}
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.fw-800{font-weight:800}
.fw-900{font-weight:900}
.lh-1{line-height:1}
.lh-1_25{line-height:1.25}
.lh-1_4{line-height:1.4}
.lh-1_6{line-height:1.6}
.lh-1_8{line-height:1.8}
.lh-2{line-height:2}
.text-ink{color:var(--ink-900)}
.bg-ink{background:var(--ink-900)}
.text-muted{color:var(--ink-600)}
.bg-muted{background:var(--ink-600)}
.text-emerald{color:var(--emerald-700)}
.bg-emerald{background:var(--emerald-700)}
.text-gold{color:var(--gold-600)}
.bg-gold{background:var(--gold-600)}
.text-white{color:#fff}
.bg-white{background:#fff}
.d-block{display:block!important}
.d-inline{display:inline!important}
.d-inline-block{display:inline-block!important}
.d-flex{display:flex!important}
.d-grid{display:grid!important}
.d-none{display:none!important}

/* Cards, alerts, badges, breadcrumbs, pagination, tables, modals, tabs, tooltips */
.card{background:#fff;border:1px solid rgba(17,24,39,.08);border-radius:18px;box-shadow:var(--shadow-1);overflow:hidden}
.card-body{padding:18px}
.alert{padding:14px 16px;border-radius:12px;margin:12px 0;border:1px solid rgba(0,0,0,.08)}
.alert-success{background:rgba(17,158,99,.08);color:var(--emerald-800);border-color:rgba(17,158,99,.25)}
.alert-info{background:#eef6ff;color:#0b1220}
.alert-warning{background:rgba(228,180,0,.12);color:#7c5c00;border-color:rgba(228,180,0,.25)}
.alert-danger{background:#fee2e2;color:#7f1d1d}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;border:1px solid rgba(0,0,0,.06)}
.badge-emerald{background:rgba(17,158,99,.12);color:var(--emerald-800);border-color:rgba(17,158,99,.25)}
.badge-gold{background:rgba(228,180,0,.12);color:#7c5c00;border-color:rgba(228,180,0,.25)}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;color:var(--ink-600);font-weight:700}
.breadcrumbs a:hover{text-decoration:underline}
.pagination{display:flex;gap:8px;align-items:center}
.pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:8px;border:1px solid rgba(17,24,39,.14);background:#fff}
.pagination a.active{background:var(--grad-green);color:#fff;border-color:transparent}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{font-size:14px;color:var(--ink-600);text-align:left;padding:12px 14px}
.table tbody td{background:#fff;border:1px solid rgba(17,24,39,.08);border-left:none;border-right:none;padding:12px 14px}
.table tbody tr{box-shadow:var(--shadow-1)}
.table tbody tr:hover{box-shadow:var(--shadow-2)}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:1400}
.modal.is-open{display:flex}
.modal-dialog{width:min(720px,92vw);background:#fff;border-radius:20px;box-shadow:var(--shadow-2);overflow:hidden}
.modal-header,.modal-footer{padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06)}
.modal-footer{border-top:1px solid rgba(0,0,0,.06);border-bottom:none}
.modal-body{padding:16px}
.tabs{display:flex;gap:8px;border-bottom:1px solid rgba(17,24,39,.08);margin-bottom:12px}
.tab{padding:10px 14px;border-radius:10px 10px 0 0;font-weight:800}
.tab.active{background:#fff;border:1px solid rgba(17,24,39,.08);border-bottom-color:#fff}
.tooltip{position:relative}
.tooltip:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#111827;color:#fff;font-size:12px;padding:6px 8px;border-radius:8px;white-space:nowrap}


/* ===== ENHANCED SOURCE APPENDED ===== */

/* ========================================
   ENHANCED SAFARI WEBSITE - COSMIC EDITION
   Glassy, Interactive, Out-of-Earth Design
   ======================================== */

/* ============ SPARKLE CURSOR EFFECT ============ */
@keyframes sparkle {
    0% { transform: scale(0) rotate(0deg); opacity: 1; }
    50% { transform: scale(1) rotate(180deg); opacity: 0.8; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

body {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="%23d4af37" opacity="0.3"/><circle cx="10" cy="10" r="3" fill="%23fff"/></svg>'), auto;
}

/* ============ ROOT VARIABLES - COSMIC SAFARI ============ */
:root {
    /* Cosmic Safari Color Palette */
    --cosmic-gold: linear-gradient(135deg, #d4af37 0%, #f1c40f 50%, #ffd700 100%);
    --cosmic-brown: linear-gradient(135deg, #8b4513 0%, #a0522d 50%, #cd853f 100%);
    --cosmic-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    --cosmic-purple: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --safari-sunset: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 25%, #ffd93d 50%, #6bcf7f 75%, #4d96ff 100%);
    
    /* Glass Colors */
    --glass-white: rgba(255, 255, 255, 0.1);
    --glass-white-strong: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-shadow: rgba(0, 0, 0, 0.3);
    
    /* Primary Colors */
    --primary-color: #d4af37;
    --secondary-color: #8b4513;
    --accent-color: #667eea;
    --text-color: #333;
    --light-bg: #f8f9fa;
    --safari-gold: #d4af37;
    --safari-brown: #8b4513;
    
    /* Glow Effects */
    --glow-gold: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 40px rgba(212, 175, 55, 0.4);
    --glow-purple: 0 0 20px rgba(102, 126, 234, 0.6), 0 0 40px rgba(102, 126, 234, 0.4);
}

/* ============ RESET & BASE - ENHANCED ============ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background: 
        linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    position: relative;
    min-height: 100vh;
}

/* Animated Background Particles */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
    animation: drift 20s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes drift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.1); }
    100% { transform: translate(-30px, 30px) scale(0.9); }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* ============ GLASS MORPHISM UTILITY ============ */
.glass {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ============ TOP CONTACT BAR - GLASSY ============ */
.top-bar {
    background: rgba(44, 62, 80, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    color: white;
    padding: 10px 0;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1001;
}

.top-bar .contact-info {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.top-bar .contact-info span {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    padding: 5px 10px;
    border-radius: 5px;
}

.top-bar .contact-info span:hover {
    background: rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

.top-bar .contact-info i {
    color: #d4af37;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
}

/* ============ HEADER - FLOATING GLASS ============ */
.header {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.header:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    gap: 30px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 1;
    min-width: 0;
}

.logo-img {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 4px 8px rgba(212, 175, 55, 0.4));
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo:hover .logo-img {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 6px 12px rgba(212, 175, 55, 0.6));
}

.logo a {
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.3s ease;
}

/* ============ NAVIGATION - INTERACTIVE ============ */
.main-nav {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

.main-nav > ul {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    padding: 0;
    margin: 0;
}

.main-nav a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 20px;
    border-radius: 12px;
    white-space: nowrap;
    font-size: 15px;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.main-nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    transition: left 0.5s ease;
}

.main-nav a:hover::before {
    left: 100%;
}

.main-nav a:hover {
    color: #fff;
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 10px 25px rgba(212, 175, 55, 0.3),
        0 0 20px rgba(212, 175, 55, 0.2);
}

/* ============ BUTTONS - COSMIC INTERACTIVE ============ */
.quote-btn,
.search-btn,
.btn-primary {
    background: linear-gradient(135deg, #d4af37 0%, #f1c40f 50%, #ffd700 100%);
    color: #1a1a2e !important;
    padding: 15px 35px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-weight: 700;
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 
        0 10px 30px rgba(212, 175, 55, 0.4),
        0 0 20px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.quote-btn::before,
.search-btn::before,
.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.quote-btn:hover::before,
.search-btn:hover::before,
.btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.quote-btn:hover,
.search-btn:hover,
.btn-primary:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 15px 40px rgba(212, 175, 55, 0.6),
        0 0 30px rgba(212, 175, 55, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.6);
}

.quote-btn:active,
.search-btn:active,
.btn-primary:active {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 8px 20px rgba(212, 175, 55, 0.4),
        0 0 15px rgba(212, 175, 55, 0.3);
}

/* General Button Styles */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    line-height: 1.4;
    position: relative;
    overflow: hidden;
}

/* ============ DROPDOWN - GLASSY ============ */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(30, 30, 60, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    min-width: 520px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 15px;
    max-height: 450px;
    overflow-y: auto;
    margin-top: 10px;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dropdown-menu li {
    list-style: none;
    display: block !important;
    width: 100% !important;
    flex: none !important;
}

.dropdown-menu a {
    display: block;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    transition: all 0.3s ease;
    font-size: 14px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    margin: 2px 0;
}

.dropdown-menu a:hover {
    background: rgba(212, 175, 55, 0.2);
    color: #fff;
    transform: translateX(5px);
    border-color: rgba(212, 175, 55, 0.3);
}

/* ============ MOBILE MENU TOGGLE - GLASSY ============ */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1001;
}

.mobile-menu-toggle:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.4);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: linear-gradient(90deg, #d4af37, #ffd700);
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ============ HERO SECTION - COSMIC SAFARI ============ */
.hero {
    background: 
        linear-gradient(135deg, 
            rgba(0, 0, 0, 0.6) 0%, 
            rgba(26, 26, 46, 0.4) 50%,
            rgba(0, 0, 0, 0.6) 100%
        ),
        url('../../background/lion.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    text-align: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(102, 126, 234, 0.15) 0%, transparent 50%);
    animation: pulse 8s ease-in-out infinite;
    z-index: 1;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

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

.hero-content h1 {
    font-size: 68px;
    margin-bottom: 25px;
    font-weight: 900;
    text-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(212, 175, 55, 0.5);
    letter-spacing: -1px;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 0%, #ffd700 50%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-content p {
    font-size: 24px;
    margin-bottom: 50px;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(255, 255, 255, 0.3);
    font-weight: 400;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.95);
}

/* ============ COUNTRY CARDS - GLASSY FLOATING ============ */
.country-cards {
    display: flex;
    gap: 25px;
    margin-top: 60px;
    overflow-x: auto;
    padding: 30px 10px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.5) rgba(255, 255, 255, 0.1);
}

.country-cards::-webkit-scrollbar {
    height: 8px;
}

.country-cards::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.country-cards::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.5);
    border-radius: 10px;
}

.country-cards::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.7);
}

.country-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: white;
    padding: 40px 30px;
    border-radius: 25px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
    min-width: 280px;
    flex-shrink: 0;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.country-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.15) 50%, 
        transparent 70%);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.country-card:hover::before {
    animation: shine 1.5s ease-in-out infinite;
    opacity: 1;
}

@keyframes shine {
    0% { transform: rotate(45deg) translateX(-100%); }
    100% { transform: rotate(45deg) translateX(100%); }
}

.country-card:hover {
    transform: translateY(-20px) scale(1.08);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(212, 175, 55, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.15);
}

.country-card h3 {
    font-size: 26px;
    margin-bottom: 15px;
    color: white;
    font-weight: 800;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(212, 175, 55, 0.5);
    position: relative;
    z-index: 2;
}

.country-card p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    position: relative;
    z-index: 2;
    letter-spacing: 0.5px;
}

.country-flag {
    width: 70px;
    height: 50px;
    margin: 0 auto 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(212, 175, 55, 0.3);
    position: relative;
    z-index: 2;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.country-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.country-card:hover .country-flag {
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(212, 175, 55, 0.5);
    border-color: rgba(212, 175, 55, 0.5);
}

.country-card:hover .country-flag img {
    transform: scale(1.15) rotate(3deg);
}

/* Animation states */
.country-card {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.country-card.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    display: block !important;
}

/* ============ WELCOME SECTION - COSMIC GLASS ============ */
.welcome {
    padding: 120px 0;
    background: 
        linear-gradient(135deg, 
            rgba(26, 26, 46, 0.95) 0%, 
            rgba(22, 33, 62, 0.9) 50%,
            rgba(15, 52, 96, 0.95) 100%
        ),
        url('https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: white;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
}

.welcome::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 20%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(212, 175, 55, 0.15) 0%, transparent 50%);
    animation: drift 15s ease-in-out infinite alternate;
}

.welcome h2 {
    font-size: 56px;
    color: white;
    margin-bottom: 30px;
    text-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(212, 175, 55, 0.5);
    font-weight: 800;
    background: linear-gradient(135deg, #ffffff 0%, #ffd700 50%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome p {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.95);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* ============ SAFARI SEARCH - COSMIC FORM ============ */
.safari-search {
    padding: 120px 0;
    background: 
        linear-gradient(135deg, 
            rgba(102, 126, 234, 0.9) 0%, 
            rgba(118, 75, 162, 0.85) 50%,
            rgba(240, 147, 251, 0.9) 100%
        ),
        url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: white;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
}

.safari-search::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255, 105, 180, 0.1) 0%, transparent 50%);
    animation: pulse 10s ease-in-out infinite;
}

.safari-search h3 {
    font-size: 48px;
    color: white;
    margin-bottom: 15px;
    text-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(255, 255, 255, 0.5);
    font-weight: 800;
}

.safari-search h4 {
    font-size: 30px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 50px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.search-form {
    display: flex;
    justify-content: center;
    gap: 25px;
    max-width: 950px;
    width: 100%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: 30px;
    padding: 45px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.form-group {
    flex: 1;
}

.form-group label {
    display: block;
    color: white;
    font-weight: 700;
    margin-bottom: 12px;
    font-size: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group select,
.form-group input {
    width: 100%;
    padding: 16px 22px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a2e;
    font-size: 16px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.form-group select:focus,
.form-group input:focus {
    outline: none;
    border-color: #ffd700;
    background: rgba(255, 255, 255, 1);
    box-shadow: 
        0 8px 25px rgba(212, 175, 55, 0.4),
        0 0 20px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: translateY(-3px) scale(1.02);
}

/* ============ FEATURES - GLASSY CARDS ============ */
.features {
    padding: 100px 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: 
        linear-gradient(135deg, 
            rgba(15, 52, 96, 0.85) 0%, 
            rgba(22, 33, 62, 0.8) 50%,
            rgba(26, 26, 46, 0.85) 100%
        ),
        url('../../background/lion.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.4);
}

.features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(102, 126, 234, 0.15) 0%, transparent 50%);
    animation: pulse 12s ease-in-out infinite;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
}

.feature-item {
    text-align: center;
    padding: 45px 35px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 25px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #d4af37, #ffd700, #f1c40f);
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.feature-item:hover::before {
    transform: scaleX(1);
}

.feature-item:hover {
    transform: translateY(-15px) scale(1.05);
    background: rgba(212, 175, 55, 0.15);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(212, 175, 55, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(212, 175, 55, 0.5);
}

.feature-item i {
    font-size: 64px;
    color: #d4af37;
    margin-bottom: 25px;
    display: block;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.5));
}

.feature-item:hover i {
    transform: scale(1.2) rotate(10deg);
    color: #ffd700;
    filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.8));
}

.feature-item h4 {
    font-size: 24px;
    margin-bottom: 20px;
    color: white;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.feature-item p {
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.8;
    font-size: 16px;
}

/* ============ SAFARI CARDS - ULTIMATE GLASS ============ */
.popular-safaris,
.short-safaris,
.midrange-safaris,
.long-safaris {
    padding: 100px 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: white;
}

.popular-safaris {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f5 100%);
    color: #1a1a2e;
}

.short-safaris {
    background: 
        linear-gradient(135deg, 
            rgba(0, 0, 0, 0.5) 0%, 
            rgba(212, 175, 55, 0.15) 50%,
            rgba(0, 0, 0, 0.5) 100%
        ),
        url('https://images.unsplash.com/photo-1559827260-dc66d52bef19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.midrange-safaris {
    background: 
        linear-gradient(135deg, 
            rgba(0, 0, 0, 0.4) 0%, 
            rgba(102, 126, 234, 0.15) 50%,
            rgba(0, 0, 0, 0.4) 100%
        ),
        url('../../background/elephant.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.long-safaris {
    background: 
        linear-gradient(135deg, 
            rgba(0, 0, 0, 0.4) 0%, 
            rgba(118, 75, 162, 0.15) 50%,
            rgba(0, 0, 0, 0.4) 100%
        ),
        url('../../background/buffalo.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
}

.section-header h3 {
    font-size: 52px;
    color: white;
    font-weight: 900;
    position: relative;
    display: inline-block;
    text-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(212, 175, 55, 0.5);
    background: linear-gradient(135deg, #ffffff 0%, #ffd700 50%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.popular-safaris .section-header h3 {
    color: #1a1a2e;
    background: linear-gradient(135deg, #1a1a2e 0%, #667eea 50%, #1a1a2e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.section-header h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 80px;
    height: 5px;
    background: linear-gradient(90deg, #d4af37, #ffd700);
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.view-all {
    background: rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: white;
    text-decoration: none;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 25px;
    border: 2px solid rgba(212, 175, 55, 0.5);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.view-all:hover {
    background: linear-gradient(135deg, #d4af37, #ffd700);
    border-color: #ffd700;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 15px 35px rgba(212, 175, 55, 0.4),
        0 0 25px rgba(212, 175, 55, 0.5);
    color: #1a1a2e;
}

.safari-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
}

.safari-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 0;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.safari-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(102, 126, 234, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.safari-card:hover::before {
    opacity: 1;
}

.safari-card:hover {
    transform: translateY(-20px) scale(1.05);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(212, 175, 55, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(212, 175, 55, 0.6);
}

.safari-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
    border-radius: 25px 25px 0 0;
}

.safari-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
}

.safari-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.safari-card:hover .safari-image img {
    transform: scale(1.15) rotate(2deg);
}

.safari-content {
    padding: 30px 25px;
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.safari-card h4 {
    font-size: 20px;
    color: white;
    margin-bottom: 20px;
    line-height: 1.4;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.popular-safaris .safari-card h4 {
    color: #1a1a2e;
    text-shadow: none;
}

.price {
    font-size: 22px;
    color: #ffd700;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.price span {
    font-size: 28px;
    font-weight: 900;
    background: linear-gradient(135deg, #ffd700, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============ POPULAR DESTINATIONS - COSMIC ============ */
.popular-destinations {
    padding: 120px 0;
    background: 
        linear-gradient(135deg, 
            rgba(0, 0, 0, 0.5) 0%, 
            rgba(118, 75, 162, 0.15) 50%,
            rgba(0, 0, 0, 0.5) 100%
        ),
        url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    color: white;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
}

.destination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 35px;
    margin-bottom: 50px;
}

.destination-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 0;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(212, 175, 55, 0.2);
}

.destination-card:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 35px rgba(212, 175, 55, 0.4);
    border-color: rgba(212, 175, 55, 0.5);
}

.destination-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
    border-radius: 20px 20px 0 0;
}

.destination-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.destination-card:hover .destination-image img {
    transform: scale(1.2) rotate(3deg);
}

.destination-content {
    padding: 25px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.destination-card h4 {
    font-size: 18px;
    color: white;
    margin-bottom: 12px;
    line-height: 1.4;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.destination-card p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* ============ OUR STORY - GLASSY ============ */
.our-story {
    padding: 120px 0;
    background: 
        linear-gradient(135deg, 
            rgba(22, 33, 62, 0.9) 0%, 
            rgba(15, 52, 96, 0.85) 50%,
            rgba(26, 26, 46, 0.9) 100%
        ),
        url('https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.4);
}

.our-story h3 {
    font-size: 48px;
    margin-bottom: 40px;
    font-weight: 800;
    text-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(212, 175, 55, 0.5);
    background: linear-gradient(135deg, #ffffff 0%, #ffd700 50%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.our-story p {
    font-size: 22px;
    max-width: 950px;
    margin: 0 auto 50px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #d4af37, #ffd700);
    color: #1a1a2e !important;
    padding: 18px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-size: 18px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 
        0 15px 35px rgba(212, 175, 55, 0.4),
        0 0 25px rgba(212, 175, 55, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 20px 45px rgba(212, 175, 55, 0.6),
        0 0 35px rgba(212, 175, 55, 0.5);
    border-color: rgba(255, 255, 255, 0.6);
}

/* ============ FOOTER - GLASSY ============ */
.footer {
    background: rgba(22, 33, 62, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: white;
    padding: 40px 0 20px;
    border-top: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-section h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #ffd700;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 15px;
    display: inline-block;
}

.footer-section a:hover {
    color: #ffd700;
    transform: translateX(5px);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.social-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.social-links i {
    color: #ffd700;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

.contact-details p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.contact-details i {
    color: #ffd700;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

.footer-bottom {
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    padding-top: 15px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.footer-bottom a {
    color: #ffd700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-bottom a:hover {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

/* ============ RESPONSIVE - MOBILE FIRST ============ */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    .main-nav:not(.active) {
        display: none !important;
    }
    
    .main-nav {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(30, 30, 60, 0.98);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        z-index: 1000;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    }
    
    .main-nav.active {
        display: block !important;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .main-nav ul {
        flex-direction: column !important;
        padding: 20px 0 !important;
        gap: 0 !important;
    }
    
    .main-nav li {
        width: 100%;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    }
    
    .main-nav a {
        display: block;
        padding: 18px 25px;
    }
    
    .dropdown-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: rgba(20, 20, 40, 0.95) !important;
        margin: 0 !important;
        min-width: auto !important;
        display: none;
        grid-template-columns: 1fr !important;
    }
    
    .dropdown.active .dropdown-menu {
        display: grid !important;
    }
    
    .hero-content h1 {
        font-size: 36px;
    }
    
    .hero-content p {
        font-size: 18px;
    }
    
    .country-cards {
        flex-direction: column;
        overflow-x: visible;
    }
    
    .country-card {
        min-width: auto;
    }
    
    .search-form {
        flex-direction: column;
        padding: 30px;
    }
    
    .section-header {
        flex-direction: column;
        gap: 20px;
    }
    
    .section-header h3 {
        font-size: 32px;
    }
    
    .safari-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 28px;
    }
    
    .welcome h2 {
        font-size: 32px;
    }
    
    .safari-search h3 {
        font-size: 28px;
    }
    
    .section-header h3 {
        font-size: 24px;
    }
    
    .feature-item {
        padding: 30px 20px;
    }
    
    .feature-item i {
        font-size: 48px;
    }
}

/* ============ CLICK SPARKLE EFFECT ============ */
@keyframes clickSparkle {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1) rotate(180deg);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(0) rotate(360deg);
        opacity: 0;
    }
}

.sparkle {
    position: fixed;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 9999;
    animation: clickSparkle 0.8s ease-out forwards;
}

.sparkle::before,
.sparkle::after {
    content: '✨';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

/* Add this JavaScript snippet to your WordPress theme's footer or custom JS file:

<script>
document.addEventListener('click', function(e) {
    const sparkle = document.createElement('div');
    sparkle.className = 'sparkle';
    sparkle.style.left = e.clientX + 'px';
    sparkle.style.top = e.clientY + 'px';
    document.body.appendChild(sparkle);
    
    setTimeout(() => sparkle.remove(), 800);
});
</script>

*/

/* ============ SMOOTH SCROLLING ============ */
html {
    scroll-behavior: smooth;
}

/* ============ SELECTION STYLING ============ */
::selection {
    background: rgba(212, 175, 55, 0.3);
    color: white;
}

::-moz-selection {
    background: rgba(212, 175, 55, 0.3);
    color: white;
}

/* ============ LOADING ANIMATION ============ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* ============ END OF ENHANCED STYLES ============ */


/* ===== ORIGINAL SOURCE APPENDED ===== */

/* ==========================================================================
   MZUKA TOURS & TRAVEL — ENHANCED STYLE.CSS
   Blended with Enhanced Figma Theme (Glassmorphism + Microsoft-level polish)
   ========================================================================== */

/* ------------------ ROOT VARIABLES ------------------ */
:root {
  --primary-color: #00b37a;
  --secondary-color: #005f43;
  --accent-color: #ffd700;
  --bg-color: #f7f9fb;
  --text-dark: #1a1a1a;
  --text-light: #f9f9f9;
  --glass-bg: rgba(255, 255, 255, 0.12);
  --shadow-soft: 0 10px 35px rgba(0, 0, 0, 0.12);
  --radius: 16px;
  --transition: all 0.3s ease;
  --hero-overlay: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
  --gradient-primary: linear-gradient(135deg, #00b37a, #00965c);
  --gradient-accent: linear-gradient(135deg, #ffd700, #ff9f00);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* ------------------ GLOBAL RESET ------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Segoe UI', Roboto, sans-serif;
  background: #f0f4f8;
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ------------------ UTILITIES ------------------ */
.container {
  width: 90%;
  max-width: 1250px;
  margin: auto;
}
h1, h2, h3, h4, h5 {
  font-weight: 700;
  color: var(--text-dark);
}
a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
img {
  max-width: 100%;
  display: block;
}

/* ------------------ TOP BAR ------------------ */
.top-bar {
  background: var(--gradient-primary);
  color: var(--text-light);
  padding: 10px 0;
  font-size: 14px;
  letter-spacing: 0.3px;
}
.top-bar .contact-info {
  display: flex;
  justify-content: center;
  gap: 25px;
  align-items: center;
}
.top-bar i {
  margin-right: 6px;
  color: #fff;
}

/* ------------------ HEADER / NAV ------------------ */
.header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 0;
  z-index: 999;
  transition: var(--transition);
}
.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.logo-img {
  height: 65px;
  transition: transform 0.3s ease;
}
.logo-img:hover {
  transform: scale(1.06);
}
.main-nav ul {
  display: flex;
  list-style: none;
  gap: 25px;
}
.main-nav a {
  font-weight: 600;
  color: var(--text-dark);
  position: relative;
  padding: 6px 0;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 3px;
  width: 0;
  background: var(--primary-color);
  transition: width 0.3s ease;
}
.main-nav a:hover::after {
  width: 100%;
}
.quote-btn {
  background: var(--gradient-primary);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,179,122,0.25);
}
.quote-btn:hover {
  transform: translateY(-2px);
}

/* ------------------ HERO SECTION ------------------ */
.hero {
  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  background-color: #000;
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 850px;
  animation: fadeInUp 1s ease forwards;
}
.hero-content h1 {
  font-size: 3rem;
  text-shadow: 0 5px 25px rgba(0,0,0,0.4);
}
.hero-content p {
  margin-top: 12px;
  font-size: 1.2rem;
  color: #e6e6e6;
}

/* ------------------ COUNTRY CARDS ------------------ */
.country-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
  gap: 20px;
}
.country-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  width: 210px;
  padding: 20px;
  color: #fff;
  text-align: center;
  transition: var(--transition);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  animation: popIn 1s ease forwards;
}
.country-card:hover {
  transform: translateY(-8px) scale(1.03);
  background: var(--gradient-primary);
  box-shadow: 0 15px 35px rgba(0,179,122,0.3);
}
.country-flag img {
  width: 55px;
  height: auto;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* ------------------ WELCOME SECTION ------------------ */
.welcome {
  text-align: center;
  padding: 100px 20px;
  background: #fff;
}
.welcome h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: var(--primary-color);
}
.welcome p {
  font-size: 1.05rem;
  max-width: 850px;
  margin: auto;
  color: #333;
}

/* ------------------ SAFARI SEARCH ------------------ */
.safari-search {
  background: var(--gradient-primary);
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}
.search-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 25px;
}
.form-group {
  display: flex;
  flex-direction: column;
}
select, .search-btn {
  padding: 12px 18px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
}
.search-btn {
  background: var(--gradient-accent);
  color: #000;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.search-btn:hover {
  transform: scale(1.05);
}

/* ------------------ FEATURE GRID ------------------ */
.features {
  background: #fff;
  padding: 80px 20px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 35px;
}
.feature-item {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border-radius: var(--radius);
  padding: 25px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.feature-item:hover {
  transform: translateY(-8px);
  background: var(--gradient-primary);
  color: #fff;
}
.feature-item i {
  font-size: 35px;
  color: var(--primary-color);
  margin-bottom: 10px;
}

/* ------------------ SAFARI CARDS ------------------ */
.safari-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}
.safari-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: var(--transition);
}
.safari-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,179,122,0.25);
}
.safari-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.safari-content {
  padding: 18px;
}
.safari-content h4 {
  color: var(--primary-color);
}
.safari-content .price span {
  color: var(--secondary-color);
  font-weight: 700;
}

/* ------------------ DESTINATIONS ------------------ */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}
.destination-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.destination-card:hover {
  transform: translateY(-8px);
}
.destination-content {
  padding: 20px;
}

/* ------------------ FOOTER ------------------ */
.footer {
  background: #0f1419;
  color: #cfd9df;
  padding: 60px 20px;
}
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 40px;
}
.footer-section h4 {
  color: #fff;
  margin-bottom: 15px;
}
.footer-bottom {
  text-align: center;
  margin-top: 25px;
  color: #aaa;
}
.footer a:hover {
  color: var(--accent-color);
}

/* ------------------ ANIMATIONS ------------------ */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* ------------------ RESPONSIVE ------------------ */
@media (max-width: 768px) {
  .main-nav ul {
    display: none;
  }
  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
  }
  .mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: #333;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
}

/* Page background */
.quote-page {
  background: #000; /* safety color under hero */
  color: #0a1b2b;
}

/* Hero with HD wildlife image */
.quote-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: 48px;
  background: center/cover no-repeat var(--bg);
}
.quote-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 35%, rgba(0,0,0,.55));
}
.quote-hero .container { position: relative; z-index: 1; }

/* Header text (visible over background) */
.quote-hero__header {
  text-align: center;
  color: #fff;
  margin: 48px 0 18px;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.quote-hero__header h1 {
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 6px;
}
.quote-hero__header p {
  color: #e8f0ff;
  margin: 0;
}

/* Two-column layout */
.quote-layout {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px) {
  .quote-layout { grid-template-columns: 1fr; }
}

/* Glass card */
.glass-card {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-radius: 20px;
  padding: 18px;
  color: #f7fbff;
}

/* Inputs on glass */
.fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.fg label { font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.fg input, .fg select, .fg textarea {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.38);
  color: #07203a;
  border-radius: 12px;
  padding: 12px;
  outline: none;
}
.fg input::placeholder, .fg textarea::placeholder { color: rgba(7,32,58,.65); }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: #ffd166;
  box-shadow: 0 0 0 3px rgba(255,209,102,.25);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 720px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.fieldset { border: 1px solid rgba(255,255,255,.3); border-radius: 14px; padding: 10px 12px 2px; margin: 8px 0 6px; }
.fieldset legend { padding: 0 6px; color: #fff; }

.multiselect { min-height: 120px; }

.hint { color: #e6f0ff; opacity: .9; }

.actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.status { color: #b3ffcf; font-weight: 600; }

/* Map + summary */
.side .quote-map { height: 360px; border-radius: 14px; overflow: hidden; margin-bottom: 12px; }
.summary { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 14px; padding: 12px; }
.summary h4 { margin: 0 0 8px; color: #fff; }
.summary ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.summary li { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 10px; padding: 8px 10px; color: #f3f8ff; }

.btn.btn-primary { background: #ffd166; color: #0a1b2b; border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 800; }
.req { color: #ffd166; }

.safari-slideshow img, .destination-slideshow img { object-fit: cover; object-position: center; }

/* ===== MZUKA PATCH R1 — HERO & LAYOUT ===== */
:root{
  /* single, sober palette */
  --mzuka-ink:#101828;
  --mzuka-bg:#0b1324;
  --mzuka-forest:#0e7a57;      /* primary */
  --mzuka-gold:#d4af37;        /* accent */
  --mzuka-line:rgba(16,24,40,.12);
}

.container{ max-width:1200px; margin:0 auto; padding:0 16px; box-sizing:border-box; }

/* Center hero content perfectly on all screens */
.hero{
  display:grid; place-items:center;
  min-height:84vh;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  position:relative; isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,rgba(0,0,0,.46) 0%, rgba(0,0,0,.36) 100%);
  pointer-events:none;
}
.hero .container{ z-index:1; display:flex; flex-direction:column; align-items:center; }
.hero .hero-content{ text-align:center; max-width:940px; }
.hero .hero-content h1{
  margin:0 0 10px;
  font-size:clamp(34px,6.2vw,72px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:#fafaf9;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.hero .hero-content p{
  margin:10px auto 26px;
  max-width:820px;
  color:#e6e6e6;
  font-size:clamp(16px,2.2vw,20px);
  opacity:.92;
}

/* Button clean, no kiddish glow */
.btn, .btn-primary{
  background:var(--mzuka-gold);
  color:#0b1324;
  font-weight:800;
  border:0; border-radius:14px;
  padding:12px 22px;
  box-shadow:0 8px 24px rgba(212,175,55,.22);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover, .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(212,175,55,.28); }
.btn:active{ transform:translateY(0); }

/* Make anchor sections account for sticky header */
#safari-search{ scroll-margin-top:110px; }

/* === MZUKA THEME – CONSISTENT, CLEAN, RESPONSIVE === */
:root{
  --brand: #0f5132;           /* deep safari green */
  --brand-2: #0a3622;         /* darker accent */
  --accent: #d4af37;          /* gold */
  --ink: #0b1324;             /* dark text */
  --ink-2:#2a3245;
  --muted:#6b7280;
  --surface:#ffffff;
  --glass-bg: rgba(255,255,255,0.08);
  --glass-bd: rgba(255,255,255,0.22);
  --shadow: 0 20px 60px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{scroll-behavior:smooth}

.container{
  width:min(1180px, 92vw);
  margin-inline:auto;
}

/* Top bar & header keep same structure, just color balance */
.top-bar{
  background: var(--brand);
  color:#e7f6ef;
  font-weight:600;
}
.header{
  background:#fff;
  border-bottom:1px solid #eef1f4;
}
.header .nav-wrapper{gap:20px}
.header .main-nav ul>li>a{color:var(--ink);font-weight:700}
.header .main-nav .dropdown-menu{
  background:#0f172a; color:#e5e7eb; border-radius:14px; border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.header .main-nav .dropdown-menu a{color:#e5e7eb}

/* HERO — centered, readable, HD */
.hero{
  position:relative; min-height:84vh; display:flex; align-items:center; background-size:cover; background-position:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35) 40%, rgba(0,0,0,.35));
}
.hero .container{position:relative; z-index:1}
.hero-content{max-width:900px; margin-inline:auto; text-align:center}
.hero h1{
  margin:0 0 12px; font-size: clamp(36px, 5vw, 64px); line-height:1.05; font-weight:900;
  color:#fff; letter-spacing:.5px;
}
.hero .country-text{
  color:#dbeafe; font-size: clamp(16px, 2vw, 22px);
}
.hero .btn{
  margin-top:26px;
  background: linear-gradient(45deg, var(--accent), #ffd166);
  color: #1f2937; font-weight: 900; letter-spacing:.5px;
  border:0; border-radius:14px; padding:16px 26px; cursor:pointer;
  box-shadow: 0 14px 36px rgba(212,175,55,.35);
}
.hero .btn:hover{transform:translateY(-1px)}

/* SEARCH CARD (glass) */
.safari-search{padding:56px 0; background:linear-gradient(180deg,#f8fafc,#f1f5f9)}
.search-form{
  display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap;
  background: rgba(255,255,255,.6); border:1px solid #e5e7eb; border-radius:16px; padding:18px;
  backdrop-filter: blur(8px);
}
.search-form .form-group{flex:1; min-width:240px}

/* SAFARI CARDS */
.safari-grid{
  display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.safari-card{
  background:#fff; border:1px solid #eef1f4; border-radius:20px; overflow:hidden;
  box-shadow:0 12px 36px rgba(2,8,23,.08);
}
.safari-slideshow{position:relative; height:240px; overflow:hidden}
.safari-slideshow img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s}
.safari-slideshow img.active{opacity:1}
.safari-content{padding:16px 16px 18px}
.safari-content h4{margin:2px 0 8px; color:var(--ink); font-size:18px; font-weight:900}
.safari-content .price{color:var(--ink-2); font-weight:800}
.safari-content .price span{color:var(--accent)}
.safari-content .btn{
  display:inline-flex; gap:8px; align-items:center; margin-top:10px;
  background:var(--brand); color:#fff; border:0; border-radius:12px; padding:10px 14px; font-weight:800;
}
.safari-content .btn:hover{background:var(--brand-2)}

/* DESTINATION CARDS (slideshow uses same image rules) */
.destination-card{
  background:#fff; border:1px solid #eef1f4; border-radius:20px; text-decoration:none; color:inherit;
  overflow:hidden; box-shadow:0 12px 36px rgba(2,8,23,.08);
}

/* FOOTER */
.footer{background:#0b1324; color:#dbeafe}
.footer a{color:#93c5fd}

/* CHATBOT btn stays out of the way */
.chatbot-btn{z-index:40}

/* UTIL */
.view-all{font-weight:800; color:var(--brand)}
.section-header{display:flex; align-items:center; justify-content:space-between; margin:10px 0 18px}

/* MOBILE */
@media (max-width: 640px){
  .hero{min-height:66vh}
  .search-form{padding:14px}
}

/* ================================
   Quote Page — centered & glassy
   (scoped so nothing leaks)
   ================================ */

.quote-page{
  --ink: #eaf1f7;
  --ink-2:#c9d6e4;
  --panel: rgba(255,255,255,.10);
  --panel-2: rgba(255,255,255,.16);
  --stroke: rgba(255,255,255,.22);
  --shadow: 0 24px 80px rgba(15,23,42,.25);
  --brand: #0a6b4e;
  --brand-2:#0f8f6a;
  color: var(--ink);
}

.quote-page .container{ width:min(1100px, 92vw); margin-inline:auto }

/* Hero uses --bg-image that you set inline on the section.
   Falls back to a local image if none provided */
.quote-page .quote-hero{
  position:relative; min-height:78vh; display:flex; align-items:center;
  background-size:cover; background-position:center;
  background-image: var(--bg-image, image-set(
    url("../background/lion_hd.avif") type("image/avif"),
    url("../background/lion_hd.jpg")  type("image/jpeg")
  ));
}

/* Lighter overlay so the photo is actually visible */
.quote-page .quote-hero__overlay{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.28));
}

.quote-page .quote-hero__header{
  position:relative; z-index:2; text-align:center; color:#fff; margin-bottom:18px
}
.quote-page .quote-hero__header h1{
  font-size: clamp(34px,4.8vw,56px); margin:0 0 8px; font-weight:900;
  text-shadow: 0 6px 24px rgba(0,0,0,.55);
}

/* Layout */
.quote-page .quote-layout{
  position:relative; z-index:2; display:grid; gap:20px;
  grid-template-columns: 1.2fr .8fr;
}

/* Glass card */
.quote-page .glass-card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius:16px; padding:16px; color:var(--ink);
  box-shadow: var(--shadow);
}

/* Map + side */
.quote-page .quote-map{
  height:300px; border-radius:12px; overflow:hidden; margin-bottom:12px;
  border:1px solid var(--panel-2);
}
@media (min-width: 881px){
  .quote-page .side{ position:sticky; top:22px; height:fit-content }
}

/* Fieldset */
.quote-page .fieldset{
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px; padding:12px; margin:12px 0;
}
.quote-page .fieldset legend{ font-weight:800; color:#fff; padding:0 6px }

/* Grids */
.quote-page .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.quote-page .grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px }

/* Form */
.quote-page .fg label{ font-weight:800; color:#fff }
.quote-page .fg .hint{ color: var(--ink-2); font-size:12.5px; margin-top:4px }

.quote-page input[type="text"],
.quote-page input[type="email"],
.quote-page input[type="tel"],
.quote-page input[type="date"],
.quote-page input[list],
.quote-page select,
.quote-page textarea{
  width:100%;
  color:#f7fbff;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.24);
  border-radius:12px;
  padding:12px 14px;
  min-height:48px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.quote-page textarea{ min-height:110px; resize:vertical }
.quote-page ::placeholder{ color:#d5dfec }

/* Focus/invalid */
.quote-page input:focus,
.quote-page select:focus,
.quote-page textarea:focus{
  border-color:#cde3ff;
  box-shadow: 0 0 0 3px rgba(205,227,255,.18);
}
.quote-page .is-invalid{
  border-color:#ffa8a8 !important;
  box-shadow: 0 0 0 3px rgba(255,168,168,.18) !important;
}

/* Multi-select height */
.quote-page .multiselect{ min-height:130px }

/* Actions */
.quote-page .actions{ display:flex; gap:12px; align-items:center; margin-top:10px }
.quote-page .actions .btn{
  background: linear-gradient(45deg, var(--brand), var(--brand-2));
  color:#fff; border:0; border-radius:12px; padding:12px 16px; font-weight:800;
  box-shadow: 0 16px 40px rgba(10,107,78,.35); cursor:pointer;
}
.quote-page .actions .btn:hover{ filter: brightness(1.05) }

/* Responsive */
@media (max-width: 880px){
  .quote-page .quote-layout{ grid-template-columns:1fr }
}



/* ===== MZUKA THEME v2 ===== */
:root{
  --brand:#0a7a5c;           /* primary emerald */
  --brand-600:#096b52;
  --brand-700:#075845;
  --accent:#d4af37;          /* gold */
  --ink:#101418;             /* dark text */
  --muted:#6b7280;           /* secondary text */
  --bg:#0b0f13;              /* page bg */
  --glass-bg: rgba(255,255,255,.08);
  --glass-stroke: rgba(255,255,255,.22);
  --glass-shadow: 0 30px 60px rgba(2,6,12,.35);
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --ring: 0 0 0 2px var(--accent) inset, 0 16px 50px rgba(212,175,55,.18);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;background:#0a0e12;color:var(--ink);font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
.container{width:min(1200px,92vw);margin-inline:auto}

/* ---------- header / menus ---------- */
.top-bar{background:var(--brand);color:#fff}
.header{background:#fff}
.main-nav > ul > li > a{padding:14px 18px;border-radius:12px}
.main-nav > ul > li > a:hover{background:rgba(10,122,92,.08)}
/* dropdown */
.dropdown-menu{
  background:rgba(12,16,22,.92);
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}
.dropdown-menu a{color:#e5e7eb}
.dropdown-menu a:hover{background:rgba(255,255,255,.06)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:78vh;display:flex;align-items:center;
  background: center/cover no-repeat var(--hero-url, url('background/hero_1.jpg'));
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35) 30%,rgba(0,0,0,.55));
}
.hero .container{position:relative;z-index:2}
.hero h1{font-size:clamp(40px,6vw,72px);line-height:1.05;margin:0;color:#fff}
.hero p{color:#e8eef4;opacity:.9}

/* CTA always clickable */
.hero a.btn{position:relative;z-index:3;pointer-events:auto}

/* ---------- glass primitives ---------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius-2xl);
  box-shadow:var(--glass-shadow);
  backdrop-filter: blur(14px);
}

/* ---------- search bar (glassy, compact) ---------- */
.safari-search{padding:48px 0;margin-top:-64px}
.search-form{
  display:grid;gap:16px;grid-template-columns:1fr 1fr auto;
  padding:22px;border-radius:26px;
}
.search-form.glass select, .search-form.glass button{
  height:58px;border-radius:16px;border:1px solid rgba(255,255,255,.16);
}
.search-form select{
  width:100%;padding:0 16px;background:rgba(255,255,255,.06);
  color:#f1f5f9;appearance:none;outline:none;
}
.search-form select:focus{box-shadow:var(--ring)}
.search-form button{
  background:linear-gradient(180deg,var(--accent),#c79f25);
  color:#0a0e12;font-weight:800;padding:0 26px;border:0;
  box-shadow:0 16px 40px rgba(212,175,55,.35);cursor:pointer
}
.search-form button:active{transform:translateY(1px)}

/* ---------- Safari cards (glassy) ---------- */
.safari-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.safari-card{border-radius:28px;overflow:hidden;position:relative}
.safari-card .media{
  position:relative;aspect-ratio:16/10;overflow:hidden
}
.safari-card .media img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease, opacity .4s ease;
}
.safari-card:hover .media img{transform:scale(1.04)}
.safari-card .body{padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));backdrop-filter:blur(10px)}
.safari-card h4{margin:6px 0 4px;color:#f9fafb;font-size:22px;font-weight:800}
.price{font: 900 18px/1.2 ui-sans-serif,system-ui; color:#b9c2cf}
.price span{
  font: 900 clamp(22px,3.6vw,32px)/1.05 ui-sans-serif,system-ui;
  letter-spacing:.3px;color:#fff;text-shadow:0 6px 26px rgba(0,0,0,.45)
}
/* Book button */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:14px;padding:12px 18px;text-decoration:none}
.btn-primary{
  background:linear-gradient(180deg,var(--brand),var(--brand-700));
  color:#fff;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(10,122,92,.35);
}
.btn-primary:hover{filter:brightness(1.05)}
/* small “pill” button inside card footer */
.safari-card .btn-primary{padding:12px 18px;border-radius:12px}

/* ---------- features (NOW visible, glass) ---------- */
.features{padding:22px 0 48px}
.feature-grid{display:grid;gap:22px;grid-template-columns:repeat(4,1fr)}
.feature-item{
  padding:26px;text-align:center;color:#e5e7eb
}
.feature-item .glass{padding:26px}
.feature-item h4{margin:10px 0 8px;font-weight:900;color:#fff}
.feature-item p{color:#c7d2de}

/* ---------- destinations ---------- */
.destination-card{border-radius:24px;overflow:hidden}
.destination-card .destination-slideshow{aspect-ratio:16/10;position:relative}
.destination-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.destination-card img.active{opacity:1}

/* ---------- lazy image helpers ---------- */
.lazy{opacity:0;transition:opacity .35s ease}
.lazy.is-loaded{opacity:1}

/* ---------- footer ---------- */
.footer{background:#0b0f13;color:#d1d5db}
.footer a{color:#d1d5db}



/* ============== QUICK FIX PACK ============== */
/* 1) Smooth in-page scroll + anchor offset for the sticky header */
html { scroll-behavior: smooth; }
#safari-search { scroll-margin-top: 110px; }

/* 2) Search box: readable controls (no washed-out pills) */
.safari-search .search-form {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 24px 60px rgba(15,23,42,0.18);
}
.safari-search .search-form select,
.safari-search .search-form input {
  background: #ffffff;
  color: #0e1726;
  border: 1px solid rgba(15,23,42,0.15);
  border-radius: 14px;
  min-height: 52px;
  padding: 12px 14px;
}
.safari-search .search-form ::placeholder { color: #8a97a6; }
.safari-search .btn.btn-primary {
  background: linear-gradient(45deg,#E3B341,#ffd166);
  color: #1b1604;
  border: none;
  box-shadow: 0 12px 32px rgba(227,179,65,.35);
  font-weight: 900;
}

/* 3) Feature cards: true glass with high contrast text (no hover dependency) */
.features .feature-item {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(15,23,42,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #0e1726;
}
.features .feature-item h4 { color: #0e1726; text-shadow: none; }
.features .feature-item p  { color: #2a3545; }

/* 4) Safari cards: price typography + button style */
.safari-card .price {
  margin: 10px 0 12px;
  color: #2a3545;
  font-weight: 600;
  font-size: 16px;
}
.safari-card .price span {
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #0e1726;
  text-shadow: 0 2px 16px rgba(0,0,0,.08);
}
.safari-card .btn.btn-primary {
  background: #0e7c66;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
  box-shadow: 0 16px 40px rgba(14,124,102,.28);
}
.safari-card .btn.btn-primary:hover { transform: translateY(-1px); }

/* 5) Slideshows: faster, smoother fades */
.safari-slideshow img,
.destination-slideshow img {
  transition: opacity .45s ease;     /* was .8s – snappier */
  will-change: opacity;
}

/* 6) Kill any elephant/themed background that keeps showing (section overlay) */
.popular-safaris,
.short-safaris,
.midrange-safaris,
.long-safaris {
  background-image: none !important;   /* if your CSS had a background photo */
  background: transparent !important;
}

/* 7) Dropdown menus (nav): raise contrast so they’re not dull */
.header .dropdown-menu {
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 20px 50px rgba(15,23,42,0.18);
}
.header .dropdown-menu a {
  color: #0e1726;
  font-weight: 600;
}
.header .dropdown-menu a:hover {
  background: rgba(14,124,102,0.10);
}

/* 8) Ensure hero headline is centered and not drifting */
.hero .hero-content { max-width: 900px; margin-inline: auto; }

/* 9) Make section headings more legible on top of imagery */
.section-header h3 { color: #0e1726; text-shadow: none; }

.safari-card .btn.btn-primary {
  background: linear-gradient(45deg,#E3B341,#ffd166);
  color:#1b1604;
  box-shadow: 0 16px 40px rgba(227,179,65,.32);
}

/* ---------- GLOBAL: smoother scroll for “Start Your Journey” ---------- */
html { scroll-behavior: smooth; }

/* ---------- HERO: sharper, classier heading ---------- */
.hero .hero-content h1{
  font-weight: 900;
  letter-spacing: .4px;
  text-shadow: 0 6px 24px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.6);
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}
.hero::before{
  /* slightly lighter so background isn’t crushed */
  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.28));
}

/* ---------- SEARCH PANEL: keep it neutral glass ---------- */
.safari-search .search-form{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 80px rgba(15,23,42,.20);
}

/* ---------- FEATURES: readable without hover ---------- */
.features .feature-item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #eaf1f7;
}
.features .feature-item h4{ color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35) }
.features .feature-item p{ color:#cbd6e2 }

/* ---------- SECTIONS: let the background be seen ---------- */
.popular-safaris, .popular-destinations{
  position: relative;
  isolation:isolate;
}
.popular-safaris::before, .popular-destinations::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(1200px 500px at 50% -50%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, rgba(6,12,20,.45), rgba(6,12,20,.25));
}

/* ---------- CARDS: real glass + cleaner content ---------- */
.safari-card, .destination-card{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.safari-content h4{ color:#f7fafc; text-shadow:0 1px 0 rgba(0,0,0,.35) }
.safari-content .price{
  margin: 6px 0 10px;
  font-weight: 800;
  color:#c9d4e3;
}
.safari-content .price span{
  font-size: 1.25rem;
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
  color:#ffe08a;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* ---------- BOOK NOW: elevated, tactile ---------- */
.safari-content .btn.btn-primary{
  border-radius: 14px;
  padding: 12px 18px;
  background: linear-gradient(45deg, #0a6b4e, #0f8f6a);
  box-shadow: 0 16px 40px rgba(10,107,78,.35);
}
.safari-content .btn.btn-primary i{ opacity:.9 }

/* ---------- SLIDES: longer fades + loader ---------- */
.safari-slideshow, .destination-slideshow{
  position:relative; overflow:hidden; border-top-left-radius:20px; border-top-right-radius:20px
}
.safari-slideshow .slide, .destination-slideshow .slide{
  position:absolute; inset:0; opacity:0;
  transition: opacity .9s ease-in-out;
}
.safari-slideshow .slide.active, .destination-slideshow .slide.active{ opacity:1 }

/* Loader (octagon-ish) */
.slide-loader{
  position:absolute; right:12px; bottom:12px;
  width:22px; height:22px;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:#ffd166;
  border-radius:6px; /* nearly octagon look with slight rounding */
  animation: spin 1.1s linear infinite;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.slide.is-loading .slide-loader{ opacity:1 }
@keyframes spin { to{ transform: rotate(360deg) } }

/* Make <picture> img fill container like old <img> */
.safari-slideshow picture, .destination-slideshow picture,
.safari-slideshow img, .destination-slideshow img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* ---------- FLAGS in the nav dropdown ---------- */
.header .dropdown-menu a.flag{ position:relative; padding-left:28px }
.header .dropdown-menu a.flag::before{
  content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:18px; height:12px; background-size:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.15)
}
.header .dropdown-menu a.flag-ke::before{ background-image:url('flags/ke.svg') }
.header .dropdown-menu a.flag-tz::before{ background-image:url('flags/tz.svg') }
.header .dropdown-menu a.flag-rw::before{ background-image:url('flags/rw.svg') }
.header .dropdown-menu a.flag-ug::before{ background-image:url('flags/ug.svg') }


/* ====== VISIBILITY + CONTRAST FIXES ====== */

/* Hero heading: brighter, crisp */
.hero h1{
  color:#F9F7F1;
  text-shadow: 0 6px 28px rgba(0,0,0,.55), 0 2px 0 rgba(0,0,0,.55);
  -webkit-text-stroke: .5px rgba(0,0,0,.35);
  letter-spacing:.4px;
}

/* Section titles (Search Your Safari etc.) */
.safari-search h3,
.section-header h3{
  color:#eef2ff;
  text-shadow: 0 10px 28px rgba(0,0,0,.35), 0 1px 0 rgba(0,0,0,.55);
}

/* Glass panel actually glass (lets bg show), but content readable */
.glass{
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Prevent the big white block look behind feature cards */
.features{
  background: radial-gradient(1200px 600px at 50% -120px, rgba(255,255,255,.08), rgba(0,0,0,.65) 60%, rgba(0,0,0,.85));
}

/* Inputs in glass areas: readable */
.search-form select,
.search-form input,
.feature-item,
.safari-card .safari-content,
.destination-card .destination-content{
  color:#0e1525;
}

/* Search dropdowns: no white-on-white anymore */
.search-form select{
  background: rgba(255,255,255,.92);
  color:#111827;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
}
.search-form select option{ color:#111827; }

/* Price & book button: cleaner, premium */
.safari-card .price span{
  font-weight:900;
  font-feature-settings:"tnum" on, "lnum" on;
}
.safari-card .btn.btn-primary{
  border-radius:14px;
  font-weight:900;
  box-shadow: 0 16px 38px rgba(227,179,65,.35);
}

/* Quote page hero background (use the variable or fallback) */
.quote-hero{
  background:
    linear-gradient(180deg, rgba(5,10,15,.55), rgba(5,10,15,.35)),
    var(--bg-image, url('assets/background/serengeti_2.jpg'));
  background-size:cover; background-position:center;
}

/* If the nav dropdowns use <select> anywhere, keep them untouched */
.header .dropdown-menu select{ all:unset; }

/* Subtle gradient behind Search panel so headings stay readable but bg shows */
.safari-search{
  background:
    radial-gradient(1200px 600px at 50% -180px, rgba(255,255,255,.08), rgba(0,0,0,.75) 60%, rgba(0,0,0,.88));
}

/* Loader for slides (small octagon) */
.slide-loader{
  position:absolute; inset:auto 12px 12px auto;
  width:20px; height:20px;
  border-radius:4px;
  border:3px solid rgba(255,255,255,.35);
  border-left-color:transparent;
  animation:spin 1s linear infinite;
  opacity:.85; pointer-events:none;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* NAV: visible pills at rest */
.header .main-nav > ul > li > a{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:14px;
  background:rgba(255,255,255,.9); color:#101418; font-weight:800;
  box-shadow:0 8px 26px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.05);
}
.header .main-nav > ul > li > a:hover{
  filter:brightness(1.03); transform:translateY(-1px);
}

/* Dropdowns/selects: dark text on light bg */
select, .search-form select{
  color:#0f172a; background:#fff; border:1px solid #dbe3ef;
}
select option{ color:#0f172a; background:#fff; }

/* HERO: brighter image + punchy headline */
.hero{ background-position:center; background-size:cover; }
.hero::before{ background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.15)); } /* lighter */
.hero .hero-content h1{
  font-size:clamp(44px,6.5vw,86px);
  font-weight:900; letter-spacing:.2px;
  background:linear-gradient(180deg,#fff 0%, #ffe08a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 22px 50px rgba(0,0,0,.35);
}

/* Cards: ensure caption areas contrast */
.safari-card .safari-content, .destination-card .destination-content{
  color:#f2f6fb;
  text-shadow:0 10px 30px rgba(0,0,0,.45);
}


.menu-country-item .flag {
  font-size: 24px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}


body {
  background: linear-gradient(180deg, #0a0f0c 0%, #111d12 40%, #241a05 100%);
  color: #f5f5f5;
}

/* Buttons with gold & green safari accents */
.btn-glass-cta {
  background: linear-gradient(145deg, #fcd34d, #eab308);
  color: #1a1500;
  box-shadow: 0 10px 24px rgba(234, 179, 8, 0.35);
}
.btn-glass-cta:hover {
  background: linear-gradient(145deg, #fde68a, #facc15);
  box-shadow: 0 18px 40px rgba(234, 179, 8, 0.45);
}

/* Top bar instruments — drums, masks, safari rhythm */
.top-bar {
  background: linear-gradient(90deg, #1f2937, #111827);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.top-bar i {
  color: #fbbf24; /* golden glow */
  margin-right: 6px;
}


.page-empty {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: radial-gradient(circle at center, rgba(46, 34, 10, 0.6) 0%, rgba(12, 12, 12, 0.9) 100%);
  color: #fff;
}
.page-empty h2 {
  font-weight: 800;
  letter-spacing: 1px;
}
.page-empty a {
  margin-top: 20px;
  padding: 10px 26px;
  border-radius: 12px;
  background: linear-gradient(145deg, #fcd34d, #facc15);
  color: #1a1500;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(234,179,8,.35);
}

.logo-img {
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.25));
  transition: filter .3s ease;
}
.logo-img:hover {
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.45));
}


/* ─── Slim top-bar (clean, spreadsheet-cell height) ───────────────── */
.top-bar{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.top-bar .container{ max-width:1200px; margin:0 auto; padding:0 16px; }
.top-bar .contact-info{
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap;
  gap:12px; padding:6px 0;           /* ← reduced height */
  font-size:13px; line-height:1.35;  /* ← compact text */
  letter-spacing:.1px;
}
.top-bar .contact-info span{
  display:inline-flex; align-items:center; gap:8px;
  color:#e8eef7; opacity:.92; padding:2px 8px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
}
.top-bar .contact-info i{
  font-size:14px; color:#a8b3c7;     /* subtle icon size */
}
.top-bar .contact-info .africon{ font-size:14px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
@media (max-width:640px){
  .top-bar .contact-info{ justify-content:center; gap:8px; padding:6px 0; }
  .top-bar .contact-info span{ padding:2px 6px; font-size:12.5px; }
}


/* Dropdown depth so it isn't clipped */
.header, .main-nav, .dropdown, .dropdown-menu { position:relative; z-index:50; }

/* Make sure flags render in color and stay visible */
.menu-country-item .flag{
  display:inline-block; width:auto;
  font-size:22px; line-height:1;
  /* Force color emoji fonts where available */
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",system-ui,sans-serif;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

/* Dropdown look (keeps your glass theme) */
.dropdown-menu{
  overflow: auto;     /* not hidden, so flags can't be clipped */
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 25px 80px rgba(0,0,0,.35);
}
.menu-country-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:14px;
  color:#fff; text-decoration:none;
}
.menu-country-item:hover{ background:rgba(255,255,255,.28); color:#111827; }