:root {
    --primary:#36421E;      /* Olive Green — the site's one brand green, also used in the Admin panel */
    --secondary:#D4A017;    /* Safari Gold */
    --light:#F4F0E4;
    --text:#4b5563;
    --accent: #D4A62A;
    --white: #ffffff;
    --gray: #73766B;
    --nav-bg:#F4F0E4;        /* Warm ivory/sand */
    --nav-hover:#E9E1CC;


    --shadow:0 10px 30px rgba(0,0,0,0.08);
    --radius:18px;
    --container:1200px;
    
    /* Typography */
    --font-heading: 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Font-size scale. Base/heading/paragraph rules below use these tokens
       instead of raw values so the page's core reading hierarchy stays on
       one consistent scale — any new global rule should pull from here
       rather than inventing another one-off size. Component-level sizes
       (badges, popovers, small labels) are left as their own rem values
       since several were checked and found to already form an intentional
       mini-hierarchy within their component rather than random drift. */
    --fs-body: 1.125rem;
    --fs-h3: 1.75rem;
    --fs-h2: clamp(2rem, 4vw, 3rem);
    --fs-h1: clamp(2.8rem, 6vw, 4.5rem);
}

/* Desktop has enough width that the mobile-tuned base sizes above read as
   slightly small next to everything else on a big screen. Bumped up a
   little here rather than raising the base scale itself, since 1.125rem
   is the right starting point on the phone widths most visitors use. */
@media (min-width: 993px) {
    :root {
        --fs-body: 1.2rem;
        --fs-h3: 1.9rem;
    }
}

* { 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--white);
    /* width: 100%; */
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--text);
    overflow-x: hidden;
}

.wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px;
    width:100%;
}

/* ==================== TYPOGRAPHY CONSISTENCY ==================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

h1 {
    font-size: var(--fs-h1);
    margin-bottom: 1.25rem;
}

h2 {
    font-size: var(--fs-h2);
    margin-bottom: 1.25rem;
    color: var(--secondary);
}

h3 {
    font-size: var(--fs-h3);
    margin-bottom: 1rem;
}

p {
    /* Was 1.1rem — a 0.025rem gap from body's 1.125rem base that reads as
       identical on screen, so unified onto the same token rather than
       kept as an unintentional near-duplicate. */
    font-size: var(--fs-body);
    margin-bottom: 1.25rem;
    color: var(--text);
}


/* Header */
.header { 
    /* position: fixed; */
    /* width:100%; */
    background:#F4F0E4;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08); 
    position: sticky; 
    top:0; 
    z-index:1000;
    border-bottom: 1px solid rgba(86, 102, 45, 0.12);

}

.header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 12px; */
    padding: 12px 20px;
    flex-wrap: nowrap;
    min-height: 85px;
}


/* .logo is itself the <a> (see header.html) — there's no nested anchor,
   so text-decoration/color belong on this rule directly. A previous
   ".logo a" rule here was a dead selector (matched nothing) and let the
   browser's default blue/underlined link style show through on the
   wordmark text next to the logo image. */
.logo {
    display:flex;
    align-items:center;
    flex-shrink:0;
    height: 72px;
    line-height: 0;
    text-decoration: none;
}

.logo img {
    display: block;
    height: 68px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    object-position: center;
}

.logo-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--primary);
    margin-left: 10px;
    white-space: nowrap;
}

/* Blinking caret shown only while initLogoTypewriter() (main.js) is
   actively typing/erasing the wordmark — the class is added/removed by JS,
   so a no-JS visitor or a prefers-reduced-motion visitor (who the JS skips
   entirely) never sees this caret, just the plain static name. */
.logo-text.is-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    background: currentColor;
    vertical-align: -0.15em;
    animation: logoCaretBlink 0.8s steps(1) infinite;
}

@keyframes logoCaretBlink {
    50% { opacity: 0; }
}

.main-nav{
    display: flex;
    align-items: center;
    justify-content:space-between;
    margin-left: auto;
    /* position: absolute; */
    justify-content: center;
}

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

.main-nav a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    display:block;
    padding:10px 14px;
    border-radius:6px;
    transition:all 0.3s ease;
    position:relative;
}

/* .main-nav .btn {
    padding:10px 22px;
    font-size: 0.95rem;
    margin-left: 10px;
    } */

/* Hover Effect */
.main-nav a:hover{
    background: var(--nav-hover);
    color: var(--primary);
    -webkit-transform:translateY(-1px);
    -moz-transform:translateY(-1px);
    -ms-transform:translateY(-1px);
    -o-transform:translateY(-1px);
        transform:translateY(-1px);

}

/* Underline Slide Effect */
.main-nav a::after{
    content:"";
    position:absolute;
    left: 14px;
    bottom: 5px;
    width:auto;
    height:2px;
    background:var(--secondary);
    transition:0.3s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    transform:scaleX(1);
}

.main-nav a.active {
    background:rgba(212, 166, 42, 0.16);
    color:var(--primary);
}

.main-nav a.nav-cta {
    background:var(--secondary);
    color:#2F351A;
    padding:11px 19px;
    margin-left:6px;
    box-shadow:0 5px 14px rgba(212, 166, 42, 0.22);
}

.main-nav a.nav-cta:hover {
    background:#BE8F1C;
    color:#fff;
    transform:translateY(-2px);
}

.main-nav a.nav-cta::after {
    display:none;
}

.hamburger {
    font-size: 1.75rem;
    cursor:pointer;
    display:none;
    color:var(--primary);
    z-index:1001;
    padding:8px;
    border-radius:8px;
    transition:all 0.25s ease;
}

.hamburger:hover {
    background:var(--nav-hover);
    transform:scale(1.05);
}

.dropdown { 
    position:relative; 
}

.dropdown-content {
    display:none;
    position:absolute;
    background:white;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
    min-width:220px;
    padding:12px 0;
    border-radius:6px;
    top: 100%;
    left: 0;
    z-index:100;
}

.dropdown:hover .dropdown-content { 
    display:block;     
}
.dropdown-content a { 
    display:block; 
    padding:10px 20px; 
    color: #333;
    white-space: nowrap;
}

section{
    padding:80px 0;
}

section,
.wrap{
    width:100%;
    max-width: 100%;
    /* padding: 80px 20px; */
}

/* Right header actions */
.header-actions{
    display:flex;
    gap:12px;
}

.header-right{
    display:flex;
    gap:12px;
    align-items:center;
    right:0;
}

.header-phone{
    display:flex;
    gap:8px;
    color:#811a18;
    font-weight:600;
    white-space:nowrap;
    font-size: 1rem;
    color:var(--primary);
    justify-content:flex-start;
}

.header-phone i{
    font-size: 1rem;
}

.header-phone:hover{
    color:var(--secondary);
    transform:translateY(-2px);
}


/* Buttons */
.gradient-button, .btn {
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    -ms-border-radius: 9999px;
    -o-border-radius: 9999px;
        border-radius: 9999px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
}
.btn:hover {
    background: #232B14;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(54, 66, 30, 0.3);
}

/* Hamburger */
.hamburger {
    font-size: 1.75rem;
    cursor: pointer;
    display: none;
    color: var(--primary);
    z-index: 1001;
}

.hamburger:hover {
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
        transform:scale(1.1);

}

/* ==================== HERO BASE ==================== */
.hero-homepage,
.hero-tours,
.hero-destinations,
.hero-fleets,
.hero-media {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Individual backgrounds */
.hero-homepage {
    background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
                      url("../images/homepage_pic.jpg");
}

.hero-tours {
    background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
                      url("../images/wildbeast.jpg");
}

.hero-destinations {
    background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
                      url("../images/travels.jpg");
}

/* The per-destination hero (destinations/view.html) sets its own
   background-image inline per admin-uploaded photo (destination-view.js) —
   those vary a lot in aspect ratio/composition (a tall photo of a peak vs.
   a wide savannah shot), and background-size:cover's default
   background-position:center can crop the most important part on a very
   wide desktop viewport. Anchoring to the top instead keeps the subject
   (a mountain, a skyline, an animal's face) in frame more often than a
   strict center-crop does, across a wider range of uploaded images. */
#heroSection {
    background-position: center top;
}

/* "Back to Destinations" link on a single destination's own page
   (destinations/view.html). */
.back-to-destinations {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.back-to-destinations:hover {
    gap: 12px;
    color: var(--secondary);
}

.hero-fleets {
    background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
                      url("../images/fleets.jpg");
}

.hero-media {
    background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
                      url("../images/ndovus.jpg");
}

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


.hero-content{
    position:relative;
    z-index:2;
    color:white;
    text-align: center;
    width:100%;
    max-width: 720px;
    /* padding:20px; */
}

.hero-content h1{
    font-size: var(--fs-h1);
    margin-bottom:25px;
    line-height: 1.2;
    font-weight: 800;
}

.hero-content p{
    font-size:clamp(1rem, 2vw, 1.2rem);
    margin-bottom:35px;
    line-height:1.8;
    color:rgba(255,255,255,0.92);
}

.hero-content .btn{
    padding:10px 24px;
    font-size:1.15rem;
    margin-bottom: 20px;
}


.places-section{
    max-width: 95%;
    padding:6px 0px;
    background:white;
}

.section-title{
    text-align:center;
    margin-bottom:40px;
    color:var(--secondary);
    /* font-weight: 800;
    font-size: clamp(2rem, 4vw, 3rem); */
}

/* Stats strip — see initCounters() in main.js for the count-up behavior. */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    text-align: center;
    padding: 40px 0 60px;
}

.stat-block .stat-number {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--primary);
    line-height: 1;
}

.stat-block .stat-label {
    margin-top: 8px;
    color: var(--gray);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.places-grid, .gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:20px;
}

/* Above the site's normal 1200px container width, cards were capped at 4
   columns with growing empty margins on either side rather than actually
   using the extra screen space. Widened just for this grid (not the global
   --container, which drives the header/nav everywhere) so a 5th column
   comfortably fits on large desktop monitors instead. */
@media (min-width: 1400px) {
    .places-grid, .gallery-grid {
        max-width: 1500px;
        margin: 0 auto;
    }
}


.card, .tour-card {
    border:1px solid #eee;
    overflow:hidden;
    box-shadow: var(--shadow);
    background: white;
    -webkit-border-radius:var(--radius);
    -moz-border-radius:var(--radius);
    -ms-border-radius:var(--radius);
    -o-border-radius:var(--radius);
        border-radius:var(--radius);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
        transition: all 0.4s;
}

.card-body{
    padding:25px;
}

/* Destinations grid cards specifically (scoped to #destinationsGrid so this
   doesn't affect the icon+heading .card layout reused elsewhere, e.g. the
   About page's "Why Choose Us" section). Summaries vary in length per
   destination, which without this pushed the Explore button to a different
   height on each card — flexing the card top-to-bottom (image keeps its
   fixed height, .card-body takes the rest) and letting the summary grow
   within that keeps every button aligned along the same row. */
#destinationsGrid .card {
    display: flex;
    flex-direction: column;
}

#destinationsGrid .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#destinationsGrid .card-body p {
    flex: 1;
}

.card:hover, .tour-card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    -webkit-transform:translateY(-8px);
    -moz-transform:translateY(-8px);
    -ms-transform:translateY(-8px);
    -o-transform:translateY(-8px);
        transform:translateY(-8px);
}

.card img, .gallery-item img {
    width:100%;
    height:280px;
    object-fit:cover;
    -webkit-transition: 0.3 ease;
    -moz-transition: 0.3 ease;
    -ms-transition: 0.3 ease;
    -o-transition: 0.3 ease;
        transition: 0.3 ease;
}

.card:hover img, .gallery-item:hover img {
    transform:scale(1.08);
}

/* .card-body h3{
    margin-bottom:12px;
    font-size: 1.35rem;
} */

/* .price {
    color: var(--primary);
    font-weight: 600;
    margin: 8px 0;
    font-size: 1.1rem;
} */


/* .video-container{
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    border-radius:12px;
    box-shadow: var(--shadow);
}


.video-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
} */

/* Tour Filters */
.filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 40px;
}

.filter-btn {
    padding: 12px 28px;
    border: 2px solid var(--primary);
    background: white;
    color: var(--primary);
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--primary);
    color: white;
}

/* Tour Cards
.tour-card {
    transition: all 0.4s ease;
} */

/* Without this, initializeTourFilters() (main.js) correctly toggles the
   .hidden class on click but nothing actually hides — the whole category
   filter on tours.html did nothing visually. */
.tour-card.hidden {
    display: none;
}

/* FAQ Section */
.faq-section{
    padding:40px 0;
    background:#f8f8f8;
}

.faq-container{
    max-width:900px;
    margin:auto;
}

.faq-item{
    background:#fff;
    margin-bottom:20px;
    box-shadow:var(--shadow);
    overflow:hidden;
    cursor:pointer;
    transition:0.3s ease;
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    -ms-border-radius:16px;
    -o-border-radius:16px;
        border-radius:16px;
}

.faq-item:hover{
    transform:translateY(-3px);
}

/* Question */
.faq-question{
    padding:24px;
    font-weight:700;
    font-size:clamp(1.05rem, 2vw, 1.1rem);
    color:#333;
}

/* Hidden answer */
.faq-answer{
    max-height:0;
    overflow:hidden;
    padding:0 24px;
    color:var(--gray);
    line-height:1.7;
    transition:0.35s ease;
}

/* Hover opens answer */
.faq-item:hover .faq-answer{
    max-height:180px;
    padding:0 22px 22px;
}

/* Clicked open state */
.faq-item.active .faq-answer{
    max-height:220px;
    padding:0 22px 22px;
}

.faq-item.active .faq-question{
    color:var(--primary);
}

.faq-btn{
    margin-top:15px;
}


.back-to-top-btn {
    position:fixed;
    bottom:28px;
    left:28px;
    width:50px;
    height:50px;
    border-radius:50%;
    border:none;
    background:var(--primary);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 1rem;
    cursor:pointer;
    box-shadow:0 5px 20px rgba(0,0,0,0.25);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s;
    z-index:9999;
}

.back-to-top-btn.show {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top-btn:hover {
    background:#232B14;
}

.floating-btn {
    position:fixed;
    bottom:28px;
    right:28px;
    background:var(--primary);
    color:white;
    width:65px;
    height:65px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 1.125rem;
    box-shadow:0 5px 20px rgba(0,0,0,0.3);
    z-index:9999;
    cursor:pointer;
    transition:0.3s ease;
    -webkit-animation:pulseBtn 2s infinite;
        animation:pulseBtn 2s infinite;

}

.floating-btn:hover{
    transform:translateY(-4px) scale(1.08);
    background:var(--secondary);
}


.floating-menu {
    position:absolute;
    bottom:80px;
    right:0;
    background:var(--accent);
    box-shadow:0 10px 30px rgba(0,0,0,0.18);
    display:none;
    padding:10px 0;
    width:240px;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    -ms-border-radius:12px;
    -o-border-radius:12px;
        border-radius:12px;
    overflow: hidden;
}

.floating-menu a{
    display:block;
    padding:16px 20px;
    color:white;
    text-decoration:none;
    transition:0.3s ease;
    border-bottom:1px solid rgba(255,255,255,0.15);
}

.floating-menu a:hover{
    background:var(--gray);
    color:#fff;
    /* padding-left:25px; */
}

.floating-btn:hover .floating-menu { 
    display:block; 
}

/* Pulse Animation */
@keyframes pulseBtn{
    0%{
        box-shadow:0 0 0 0 rgba(129,26,24,0.45);
    }
    70%{
        box-shadow:0 0 0 18px rgba(129,26,24,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(129,26,24,0);
    }
}

/* Small pill that briefly types itself out beside a floating button on
   load (see initFabLabels() in main.js), then fades away — reappears on
   hover from then on as a normal tooltip. Positioned relative to its
   button's own fixed-position container, so it always sits just left of
   whichever button it belongs to. */
.fab-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20, 20, 15, 0.88);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.fab-label.show,
.floating-btn:hover .fab-label,
.newsletter-fab:hover .fab-label {
    opacity: 1;
}

/* Newsletter floating button — sits directly above the Quote/WhatsApp/Call
   cluster (28px gap + that button's 65px + 16px breathing room = 109px). A
   gold pulse (rather than reusing the red one above) keeps the two visually
   distinct as separate calls to action. */
.newsletter-fab {
    position: fixed;
    bottom: 109px;
    right: 28px;
    z-index: 9998;
}

.newsletter-fab-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: var(--secondary);
    color: white;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    animation: pulseGold 2.4s infinite;
    transition: transform 0.25s ease, background 0.25s ease;
}

.newsletter-fab-btn:hover {
    transform: translateY(-4px) scale(1.08) rotate(-8deg);
    background: var(--primary);
}

@keyframes pulseGold {
    0% { box-shadow: 0 0 0 0 rgba(212,160,23,0.5); }
    70% { box-shadow: 0 0 0 16px rgba(212,160,23,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,160,23,0); }
}

/* Briefly rings the card a ?dest= link scrolled to (see
   scrollToRequestedDestination() in destinations.js) so it's obvious
   which one the visitor was sent to, not just that the page jumped. */
.destination-highlight {
    animation: destinationHighlightRing 1.8s ease-out;
}

@keyframes destinationHighlightRing {
    0% { box-shadow: 0 0 0 0 rgba(212,160,23,0.7); }
    60% { box-shadow: 0 0 0 14px rgba(212,160,23,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,160,23,0); }
}

/* ==================== SCROLL REVEAL ====================
   Cards, gallery items, FAQs, and info blocks fade/slide in the first
   time they enter the viewport (see initScrollReveal() in include.js,
   which adds the .reveal class via IntersectionObserver).

   Gated behind html.js: that class is only added by JS, so anyone
   without JS enabled — or the brief moment before include.js runs —
   always sees full, visible content. There's no flash of hidden text
   and nothing depends on this purely-decorative layer to be usable. */
html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html.js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.newsletter-popover {
    display: none;
    position: absolute;
    bottom: 74px;
    right: 0;
    width: 280px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    padding: 22px;
}

.newsletter-popover.show {
    display: block;
    animation: popoverIn 0.2s ease;
}

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

.newsletter-popover h4 {
    color: var(--primary);
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.newsletter-popover p {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 14px;
}

.newsletter-popover input[type="email"] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-family: inherit;
}

.newsletter-msg {
    font-size: 0.8rem;
    margin-top: 10px;
    text-align: center;
}

.newsletter-msg-success {
    color: var(--primary);
    font-weight: 700;
}

.newsletter-msg-error {
    color: #b91c1c;
}

@media (max-width: 768px) {
    .newsletter-fab {
        bottom: 89px;
        right: 20px;
    }

    .newsletter-fab-btn {
        width: 50px;
        height: 50px;
        font-size: 1.0625rem;
    }

    .newsletter-popover {
        width: calc(100vw - 40px);
        max-width: 300px;
    }
}

/* ==================== FOOTER ==================== */
.main-footer {
    background: var(--primary);
    color: white;
    padding: 80px 0 40px;
    align-items: baseline;
}

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

.main-footer h3 {
    color: var(--accent);
    margin-bottom: 22px;
    font-size: 1.35rem;
}

.main-footer ul {
    list-style: none;
    padding:10px;
}

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

.main-footer a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s;
}

.main-footer a:hover {
    color: white;
}

.copyright {
    text-align: center;
    opacity: 0.8;
    font-size: 0.95rem;
    margin-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 25px;
}

/* Social Links */
.social-links a {
    color: white;
    font-size: 1.6rem;
    margin-right: 18px;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
        transition: transform 0.3s ease;
}

.social-links a:hover {
    transform: translateY(-3px);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 992px) {
    .body{
        width:100%;
        overflow-x:hidden;
    }

    .main-nav{
            position:fixed;
            height:100vh;
            width:320px;
            right:-100%;
            top:0%;
            background:var(--nav-bg);
            box-shadow:-5px 0 20px rgba(0,0,0,0.1);
            z-index:1000;
            padding:100px 30px 30px;
            -webkit-transition:left 0.4s ease;
            -moz-transition:left 0.4s ease;
            -ms-transition:left 0.4s ease;
            -o-transition:left 0.4s ease;
                transition:left 0.4s ease;
    }

    
    .main-nav.show {
        right:0;
    }

    .main-nav ul {
        display: flex;
        flex-direction: column;
        gap:20px;
        align-items: flex-start;

    }

    .main-nav li{
    width:100%;
    }

    .main-nav a{
        display:block;
        padding:18px 0;
        width: 100%;
        border-bottom:1px solid #eee;
        transition:0.3s;
        color:var(--primary) !important;
        font-weight:600;
        font-size: 1.15rem;
    }

    /* Hide desktop nav on mobile */
    .header-main > .main-nav {
        display: block;
    }
    .hamburger { 
        display: block; 
    }


    /* Hover Effect */
    .main-nav a:hover{
        background:var(--nav-hover);
        color: var(--primary);
        padding-left: 12px;
        transform:translateY(-2px);
    }

    /* Underline Slide Effect */
    .main-nav a::after{
        content:"";
        position:absolute;
        left:18px;
        bottom:8px;
        width:0%;
        height:2px;
        background:var(--secondary);
        transition:0.3s ease;
    }

    .main-nav a:hover::after{
        width:60%;
        align-items: baseline;
    }

    .main-nav a.active{
        background:var(--nav-hover);
        color:white;
    }
    
 

    /* Header phone stays visible */
    .header-phone span{
        display:flex;
    }

/* Better spacing */
    .header-actions{
        gap:8px;
    }


    .hero{
        text-align: center;
    }

    .hero-content{
        margin:0 auto;
        text-align: center;
    }

    .hero h1 {
        font-size: 2.6rem;
    }

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

    .header-phone:hover{
    color:var(--secondary);
    transform:translateY(-2px);
}

}

@media (max-width: 900px) {
    .wrap > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

@media (max-width: 768px) {
    .body{
        width:100%;
        overflow-x:hidden;
    }

    .wrap {
        padding: 15px;
    }

    .main-nav{
        position:fixed;
        height:100vh;
        width:300px;
        right:-100%;
        top:0%;
        background:var(--nav-bg);
        box-shadow:0 5px 15px rgba(0,0,0,0.1);
        transition:0.35s ease;
        z-index:1000;
        padding-top:80px;
    }

    /* Hover Effect */
    .main-nav a:hover{
        background:var(--nav-hover);
        transform:translateY(-2px);
    }

    section { 
        padding: 60px 0; 
    }

    .hero{
        min-height:80vh;
        justify-content:center;
        text-align:center;
    }


    .hero-content {
        text-align: center;
    }

    .hero-homepage,
    .hero-tours,
    .hero-destinations,
    .hero-fleets,
    .hero-media {
        min-height: 70vh;              /* less aggressive height */
        background-position: center top; /* show the important part of the image */
        align-items: center;
    }

    .hero-content h1 {
        font-size: 2.3rem;
        line-height: 1.25;
        margin-bottom: 16px;
    }

    .hero-content p {
        font-size: 1rem;
        margin-bottom: 24px;
        padding: 0 8px;
    }

    /* .hero-content .btn {
        width: auto;
        min-width: 180px;
        padding: 14px 28px;
    } */


    .card img {
        height: 200px;
    }

    .btn{
        width: 100%;
    }

    .header-phone:hover{
        color:var(--secondary);
        transform:translateY(-2px);
    }

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

    .header .wrap {
        display: flex;
        flex-direction: row;          /* keep side by side */
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        min-height: 64px;
        gap: 12px;
    }

    .header-phone{
        font-size: 0.8125rem;
    }

    .header-phone i{
        font-size: 0.875rem;
    }


    .logo {
        height:auto;
    }

    .logo img{
        height:46px;
        max-width: 150px;
    }

    .logo-text {
        font-size: 1.05rem;
    }

    .hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.625rem;
        padding: 8px;
        margin-left: auto;
    }

    .floating-btn{
        width:55px;
        height:55px;
        font-size: 1rem;
        bottom:20px;
        right:20px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .main-footer {
        padding: 60px 0 30px;
    }
}


@media (max-width: 576px){
    .header .wrap{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }


    .header-right{
        width:100%;
        justify-content:space-between;
    }
    .header-main {
        padding: 15px 0;
    }
    
    .logo img {
        height: 55px;
    }

    .logo-text {
        font-size: 1rem;
    }
    .main-nav ul {
        display: flex;
        flex-direction: column;
        gap:0;

    }

    .main-nav.show {
        /* display: block; */
        right:0;
    }

    .main-nav li{
    width:100%;
    }
}

/* ====================== CONTACT & QUOTE FORM STYLES ====================== */
.contact-form-container {
    background: white;
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(123, 30, 30, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Phone number field paired with a country dial-code prefix — see
   initPhoneCountryField() in main.js. The prefix is read-only (derived
   from the Country field above it) so the two can never end up
   contradicting each other. */
.phone-field {
    display: flex;
    gap: 10px;
}

.phone-field .phone-dial-code {
    flex: 0 0 70px;
    text-align: center;
    padding: 14px 6px;
    background: var(--light);
    color: var(--text);
    font-weight: 600;
}

.phone-field input:not(.phone-dial-code) {
    flex: 1;
    min-width: 0;
}

.form-hint {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--gray);
}

.form-hint.error {
    color: #b91c1c;
    font-weight: 600;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 1.1rem;
}

.info-item i {
    font-size: 1.6rem;
    color: var(--primary);
    margin-top: 4px;
}

/* ====================== MEDIA GALLERY ====================== */

.gallery-item {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    /* box-shadow: var(--shadow); */
    aspect-ratio: 16 / 11;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
        transition: transform 0.3s ease;

}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover {
    transform: translateY(-6px);
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: white;
    padding: 25px 20px 18px;
    opacity: 0.9;
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    -ms-transform: translateY(8px);
    -o-transform: translateY(8px);
        transform: translateY(8px);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
        transition: all 0.4s ease;

}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
    opacity: 1;
}

/* Full-size preview opened by openImageLightbox() in main.js — used by the
   Big Five gallery so a visitor can see the animal photo clearly instead
   of only the small cropped thumbnail. */
.image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 40px;
    cursor: zoom-out;
}

.image-lightbox img {
    width: min(90vw, 900px);
    height: min(85vh, 650px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: zoom-in;
    transition: transform 0.25s ease;
}

.image-lightbox img.zoomed {
    cursor: zoom-out;
    transform: scale(1.6);
}

.image-lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ====================== RESPONSIVE FIXES ====================== */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-container {
        padding: 30px 20px;
    }

    .gallery-item {
        transform: none; /* remove lift on mobile if you prefer */
    }

    .gallery-overlay {
        transform: translateY(0);
        opacity: 1; /* always visible on mobile */
        background: linear-gradient(transparent, rgba(0,0,0,0.75));
        padding: 20px 16px 16px;
    }

    .gallery-item:active {
        transform: scale(0.98);
    }

    .gallery-grid {
        gap: 20px;
        /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    }
}

@media (max-width: 576px) {
    /* Was 2.4rem — larger than the 768px tier's 2.3rem above, so on a
       ~500px screen (where both rules apply and this one wins by coming
       later in source order) the hero heading actually grew before
       shrinking again at 480px. Corrected to continue the downward step. */
    .hero-content h1 {
        font-size: 2.1rem;
    }
}

@media (max-width: 480px) {
    .hero-homepage,
    .hero-tours,
    .hero-destinations,
    .hero-fleets,
    .hero-media {
        min-height: 65vh;
        background-position: center 30%; /* adjust if faces/animals are cut off */
    }

    .hero-content h1 {
        font-size: 1.9rem;
    }
    
    .header .wrap {
        padding: 8px 14px;
        min-height: 58px;
    }

    .logo img {
        height: 42px;
        max-width: 130px;
    }

    /* Hidden below 480px — the icon alone plus the hamburger and nav
       already fill the header at this width; keeping the wordmark too
       forced things to wrap/overlap. */
    .logo-text {
        display: none;
    }
}