/* ==========================================
   MTALIII AFRICA
   FINAL STATIC CINEMATIC HERO
   ========================================== */

/* 1. Main hero container */

#home.hero {
    position: relative !important;
    isolation: isolate;

    height: 760px !important;
    min-height: 0 !important;
    max-height: 760px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    background: #173b30;

    transform: none !important;
    animation: none !important;
}

/* 2. Wildlife background — exact approved position */

#home .hero-bg {
    position: absolute !important;
    inset: 0 !important;

    background-image:
        url("/images/hero/mtaliii-africa-hero.webp") !important;

    background-size: 100% auto !important;
    background-position: center -210px !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-color: #173b30 !important;

    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* 3. Dark gradient for readable text */

#home .hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(90deg,
            rgba(4, 25, 19, 0.65) 0%,
            rgba(4, 25, 19, 0.30) 48%,
            rgba(4, 25, 19, 0.05) 100%);

    pointer-events: none;
}

/* 4. Hero text and buttons */

#home .hero-inner {
    position: relative !important;
    z-index: 2 !important;

    padding-top: 12px !important;
    margin-top: 0 !important;
}

#home .hero-inner> :first-child {
    margin-top: 0 !important;
}

/* 5. Hide unnecessary old elements */

#home .mt-hero-slide {
    display: none !important;
}

#home .hero-bottom {
    display: none !important;
}

/* 6. Mobile layout */

@media (max-width: 700px) {

    #home.hero {
        height: auto !important;
        min-height: 680px !important;
        max-height: none !important;
    }

    #home .hero-bg {
        background-size: cover !important;
        background-position: 60% center !important;
    }

    #home .hero-inner {
        padding-top: 12px !important;
    }

    #home .hero-shade {
        background: linear-gradient(90deg,
                rgba(4, 25, 19, 0.72),
                rgba(4, 25, 19, 0.24));
    }
}

/* 7. Accessibility — reduced motion */

@media (prefers-reduced-motion: reduce) {

    #home.hero,
    #home .hero-bg {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}


/* =========================================
   MTALIII AFRICA — REMOVE OLD HERO COUNTER
   AND EMPTY GREEN SPACE
========================================= */

/* Hide the original slideshow counter */
#home .hero-counter,
#home #heroNumber,
#home #heroCaption {
    display: none !important;
}

/* Remove unused bottom content */
#home .hero-bottom {
    display: none !important;
}

/* Keep hero at the approved height */
#home.hero {
    height: 500px !important;
    min-height: 0 !important;
    max-height: 500px !important;
    overflow: hidden !important;
}

/* Preserve the exact approved photograph position */
#home .hero-bg {
    background-size: 100% auto !important;
    background-position: center -210px !important;
}

/* Remove extra vertical spacing after the hero */
#home+section {
    margin-top: 0 !important;
}