/* =========================================
   PREMIUM HERO IMAGE SLIDER
   ========================================= */

.image-slider-container {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    background: #064420;
}


/* =========================================
   SLIDES
   ========================================= */

.hero-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}


/* =========================================
   IMAGE
   ========================================= */

.hero-slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;

    transform: scale(1);

    transition:
        transform 6s ease;
}


/* Slow cinematic zoom */
.hero-slide.active img {
    transform: scale(1.08);
}


/* =========================================
   DARK GREEN OVERLAY
   ========================================= */

.slider-overlay {
    position: absolute;
    inset: 0;

    z-index: 3;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(6, 68, 32, 0.88) 0%,
            rgba(6, 68, 32, 0.55) 35%,
            rgba(6, 68, 32, 0.20) 70%,
            rgba(0, 0, 0, 0.45) 100%
        );
}


/* =========================================
   SLIDE CONTENT
   ========================================= */

.slide-content {
    position: absolute;

    z-index: 5;

    left: 9%;
    top: 50%;

    transform: translateY(-50%);

    width: 80%;
    max-width: 850px;

    color: #ffffff;

    opacity: 0;
    transform: translate(-40px, -50%);

    transition:
        opacity 1s ease 0.3s,
        transform 1s ease 0.3s;
}


/* Animate text when slide becomes active */
.hero-slide.active .slide-content {
    opacity: 1;

    transform: translate(0, -50%);
}


/* Small slide number */
.slide-number {
    display: inline-block;

    margin-bottom: 15px;

    padding: 6px 14px;

    border-left: 4px solid #46bf34;

    color: #d9ff4f;

    font-size: 0.9rem;
    font-weight: 700;

    letter-spacing: 3px;
}


/* Main heading */
.slide-content h1 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: clamp(2.5rem, 5vw, 5rem);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: 0.5px;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.55);
}


/* Description */
.slide-content p {
    margin: 0;

    max-width: 650px;

    color: #f1f8f3;

    font-size: clamp(1rem, 1.5vw, 1.25rem);

    line-height: 1.7;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5);
}


/* =========================================
   SLIDER DOTS
   ========================================= */

.slider-dots {
    position: absolute;

    z-index: 10;

    left: 9%;
    bottom: 35px;

    display: flex;
    align-items: center;

    gap: 10px;
}

.slider-dot {
    display: block;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.5);

    cursor: pointer;

    transition: all 0.35s ease;
}

.slider-dot:hover {
    transform: scale(1.3);

    background: #ffffff;
}

.slider-dot.active {
    width: 38px;

    border-radius: 10px;

    background: #46bf34;

    box-shadow:
        0 0 12px rgba(70, 191, 52, 0.8);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 768px) {

    .image-slider-container {
        height: 520px;
    }

    .slide-content {
        left: 7%;
        width: 86%;
    }

    .slide-content h1 {
        font-size: 2.5rem;
    }

    .slide-content p {
        font-size: 1rem;
    }

    .slider-dots {
        left: 7%;
        bottom: 25px;
    }
}


@media (max-width: 480px) {

    .image-slider-container {
        height: 450px;
    }

    .slide-content {
        left: 6%;
        width: 88%;
    }

    .slide-number {
        font-size: 0.75rem;
    }

    .slide-content h1 {
        font-size: 2rem;
    }

    .slide-content p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .slider-dots {
        left: 6%;
        bottom: 20px;
    }
}

/* =========================================
   BRIGHT & CLEAR SLIDER TEXT
   ========================================= */

/* Main slide heading */
.slide-content h1 {
    margin: 0 0 20px;

    color: #ffffff !important;

    font-size: clamp(2.5rem, 5vw, 5rem);

    font-weight: 900;

    line-height: 1.08;

    letter-spacing: 0.5px;

    /* Dark outline around every letter */
    -webkit-text-stroke: 1.5px rgba(0, 35, 18, 0.85);

    /* Strong layered shadow */
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.85),
        2px 2px 5px rgba(0, 0, 0, 0.85),
        -2px -2px 5px rgba(0, 0, 0, 0.55),
        0 6px 18px rgba(0, 0, 0, 0.75);

    /* Slight glow */
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}


/* =========================================
   SUPPORTING MESSAGE
   ========================================= */

.slide-content p {
    margin: 0;

    max-width: 700px;

    color: #ffffff !important;

    font-size: clamp(1rem, 1.5vw, 1.3rem);

    font-weight: 600;

    line-height: 1.7;

    letter-spacing: 0.2px;

    /* Dark stroke */
    -webkit-text-stroke: 0.6px rgba(0, 35, 18, 0.8);

    /* Strong readable shadow */
    text-shadow:
        1px 1px 3px rgba(0, 0, 0, 0.95),
        -1px -1px 3px rgba(0, 0, 0, 0.75),
        0 4px 12px rgba(0, 0, 0, 0.85);
}


/* =========================================
   SLIDE NUMBER
   ========================================= */

.slide-number {
    display: inline-block;

    margin-bottom: 15px;

    padding: 6px 14px;

    border-left: 4px solid #d9ff4f;

    color: #d9ff4f !important;

    font-size: 0.9rem;

    font-weight: 800;

    letter-spacing: 3px;

    text-shadow:
        1px 1px 4px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(217, 255, 79, 0.45);
}


/* =========================================
   EXTRA DARK GRADIENT BEHIND TEXT
   ========================================= */


/* Keep text above the extra gradient */
.slide-content {
    z-index: 6;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .slide-content h1 {
        -webkit-text-stroke: 1px rgba(0, 35, 18, 0.9);

        text-shadow:
            1px 2px 4px rgba(0, 0, 0, 0.95),
            0 5px 15px rgba(0, 0, 0, 0.8);
    }

    .slide-content p {
        -webkit-text-stroke: 0.4px rgba(0, 35, 18, 0.85);

        text-shadow:
            1px 1px 4px rgba(0, 0, 0, 0.95),
            0 4px 10px rgba(0, 0, 0, 0.8);
    }
}

/* =========================================
   LIGHT HERO IMAGE OVERLAY
   ========================================= */

.slider-overlay {
    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    /* Very subtle overlay - keeps the image bright */
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.12) 45%,
        rgba(0, 0, 0, 0.05) 100%
    );
}


/* =========================================
   SLIDE CONTENT
   ========================================= */

.slide-content {
    position: absolute;

    z-index: 6;

    left: 9%;
    top: 50%;

    width: 80%;
    max-width: 850px;

    color: #ffffff;

    opacity: 0;

    transform: translate(-40px, -50%);

    transition:
        opacity 1s ease 0.3s,
        transform 1s ease 0.3s;
}


/* Active slide text animation */
.hero-slide.active .slide-content {
    opacity: 1;

    transform: translate(0, -50%);
}


/* =========================================
   MAIN HEADING
   ========================================= */

.slide-content h1 {
    margin: 0 0 20px;

    color: #ffffff !important;

    font-size: clamp(2.5rem, 5vw, 5rem);

    font-weight: 900;

    line-height: 1.08;

    letter-spacing: 0.5px;

    /* Clear dark outline */
    -webkit-text-stroke: 2.5px #d2c332;

    /* Strong shadow without darkening image */
    text-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.6),
        0 4px 10px rgba(0, 0, 0, 0.75),
        0 8px 20px rgba(0, 0, 0, 0.45);

    filter: drop-shadow(
        0 0 3px rgba(255, 255, 255, 0.25)
    );
}


/* =========================================
   SUPPORTING TEXT
   ========================================= */

.slide-content p {
    margin: 0;

    max-width: 700px;

    color: #ffffff !important;

    font-size: clamp(1rem, 1.5vw, 1.3rem);

    font-weight: 600;

    line-height: 1.7;

    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.7);

    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.5),
        0 3px 8px rgba(0, 0, 0, 0.8),
        0 5px 15px rgba(0, 0, 0, 0.45);
}


/* =========================================
   SLIDE NUMBER
   ========================================= */

.slide-number {
    display: inline-block;

    margin-bottom: 15px;

    padding: 6px 14px;

    border-left: 4px solid #d9ff4f;

    color: #d9ff4f !important;

    font-size: 0.9rem;

    font-weight: 800;

    letter-spacing: 3px;

    text-shadow:
        1px 1px 4px rgba(0, 0, 0, 0.8);
}