/* Container Setup */
.slider-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Slides Row - ANIMATION ADDED HERE */
.slides-container {
    display: flex;
    width: 500%; /* 5 slides = 500% */
    /* 15s total (5s per slide), infinite loop */
    animation: autoSlide 20s infinite ease-in-out; 
}

/* Pause the slider when a user hovers over the testimonial */
.slider-wrapper:hover .slides-container {
    animation-play-state: paused;
}

/* Hide Radio Buttons */
input[type="radio"] {
    display: none;
}



.slide-item {
    width: 33.333%; /* One-third of the 300% container */
}

/* Content Layout */
.slide-content {
    display: flex;
    align-items: center;
}

.img-box { flex: 1; height: 750px; }
.img-box img { width: 100%; height: 100%; object-fit: cover; }
.text-box { flex: 1; padding: 40px; }

/* THE AUTO-SLIDE LOGIC – 5 SLIDES */
@keyframes autoSlide {

    /* Slide 1 */
    0%, 16% {
        transform: translateX(0%);
    }

    /* Slide 2 */
    20%, 36% {
        transform: translateX(-20%);
    }

    /* Slide 3 */
    40%, 56% {
        transform: translateX(-40%);
    }

    /* Slide 4 */
    60%, 76% {
        transform: translateX(-60%);
    }

    /* Slide 5 */
    80%, 96% {
        transform: translateX(-80%);
    }

    /* Loop back */
    100% {
        transform: translateX(0%);
    }
}
/* CSS Logic: Move container based on checked radio
#slide1:checked ~ .slides-container { transform: translateX(0%); }
#slide2:checked ~ .slides-container { transform: translateX(-33.333%); }
#slide3:checked ~ .slides-container { transform: translateX(-66.666%); } */

/* Controls (Dots) */
.controls {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Optional: Keep the dots but animate them to match */
.controls label {
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    animation: dotHighlight 15s infinite;
}

/* Active Dot Styling
#slide1:checked ~ .controls label[for="slide1"],
#slide2:checked ~ .controls label[for="slide2"],
#slide3:checked ~ .controls label[for="slide3"] {
    background: #333;
    transform: scale(1.2);
} */

@keyframes dotHighlight {
    0%, 28% { background: #333; transform: scale(1.2); } /* Slide 1 dot active */
    33%, 94% { background: #ccc; transform: scale(1); }
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .slide-content { flex-direction: column; }
    .img-box { height: 300px; width: 100%; }
    .text-box { padding: 20px; text-align: center; }
}