/* --- Client Logos Section Styling --- */
.logos-slider-container {
    position: relative;
    height: 200px; /* Set a fixed height for the slider area */
}

.logos-slide {
    /* 30s controls the speed (longer value = slower) */
    animation: slide 60s linear infinite; 
    white-space: nowrap; /* Forces all logos onto one line */
    position: absolute; 
    left: 0;
    top: 0;
}

.logos-slide img {
    width: 1750px;
    height: 400px; /* Height of the logo images */
    margin: 0 0px; /* Spacing between logos */
    filter: grayscale(%); /* Optional: Makes logos grayscale */
    opacity: 100;
    transition: filter 0.3s ease, opacity 0.3s;
}

.logos-slide img:hover {
    filter: grayscale(0%); /* Optional: Color on hover */
    opacity: 1;
}

/* Pause animation when mouse hovers over the slider */
.logos-slider-container:hover .logos-slide {
    animation-play-state: paused;
}

/* The Keyframe Animation: Moves the entire logo strip from 0% to -50% of its total width */
@keyframes slide {
    0% {
        transform: translateX(0); 
    }
    100% {
        transform: translateX(-50%); 
    }
}