/* Container Setup */
.slider-wrapper {
    width: 100%;
    max-width: 900px;
    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: 300%; /* 3 slides = 300% */
    /* 15s total (5s per slide), infinite loop */
    animation: autoSlide 15s 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: 450px; }
.img-box img { width: 100%; height: 100%; object-fit: cover; }
.text-box { flex: 1; padding: 40px; }

/* THE AUTO-SLIDE LOGIC */
@keyframes autoSlide {
    /* Slide 1 */
    0%, 28% { transform: translateX(0%); } 
    
    /* Transition to Slide 2 */
    33%, 61% { transform: translateX(-33.333%); } 
    
    /* Transition to Slide 3 */
    66%, 94% { transform: translateX(-66.666%); }
    
    /* Return to Slide 1 */
    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; }
}