/* ============================================================
   HERO SLIDER
   ============================================================ */

/* All slides hidden by default, stacked absolutely */
.slide-css {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

/* Active slide visible at 80% opacity */
.slide-css.active {
    opacity: 0.8;
}

/* ============================================================
   HERO OVERLAY
   Now correctly placed inside the slider container in HTML.
   z-index: 1 ensures it sits above the images but below content.
   ============================================================ */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
       rgba(23, 37, 84, 0.85) 0%,
        rgba(23, 37, 84, 0.25) 50%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}