/* public/styles/custom.css में जोड़ें */

/* --- Hero Slider Styling --- */
#slider-container {
    position: relative;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Background Image Properties */
    background-size: cover;
    background-position: center;
    
    /* Animation and Initial State */
    opacity: 0; /* By default, all slides are hidden */
    transition: opacity 1.5s ease-in-out; /* Smooth transition */
}

.slide.active {
    opacity: 1; /* Only the active slide is visible */
    z-index: 10; /* Bring the active slide to the front */
}

/* Hero Text should be above the slides but below the navigation buttons */
.hero-text-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20; 
}

/* ========================================================= */
/* PURE CSS INFINITE TESTIMONIAL SLIDER */
/* ========================================================= */

#testimonial-track-css {
    width: 200%; /* Total width of the 10 slides (5 original + 5 clones) */
    animation: scroll-left 15s linear infinite; 
}

/* Hover effect: When the user hovers over the track, the animation pauses */
#testimonial-track-css:hover {
    animation-play-state: paused;
}

/* The core animation: Moves the entire track from 0% to -50% of its double width */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%); 
    }
}