/* Logo Slider Styles */
.logo-slider-container {
    width: 100%;
    overflow: hidden;

    background: transparent;
    position: relative;
}

.logo-slider-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* White fade overlay removed - no fade effect */

.logo-slider-track {
    display: flex;
    gap: 12px;
    animation: slide 30s linear infinite;
    will-change: transform;
    width: fit-content;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Hover pause removed - animation continues on hover */

.logo-slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    transform: translateZ(0);
    backface-visibility: hidden;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}

/* Ensure all logos are aligned and same size */
.logo-slide .logo-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    vertical-align: middle;
}

.logo-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
    display: block;
    margin: 0 auto;
}

/* Animation for continuous sliding - seamless infinite loop */
/* Using 33.333% because we render 3 sets of logos for ultra-smooth transition */
@keyframes slide {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-33.333%, 0, 0);
    }
}

/* Ensure smooth infinite loop - no gaps or jumps */
.logo-slider-track {
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-fill-mode: both;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo-slider-container {
        padding: 30px 0;
    }
    
    .logo-slider-track {
        gap: 12px;
        animation-duration: 20s;
    }
    
    .logo-slide {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 480px) {
    .logo-slider-container {
        padding: 20px 0;
    }
    
    .logo-slider-track {
        gap: 12px;
        animation-duration: 15s;
    }
    
    .logo-slide {
        width: 120px;
        height: 120px;
    }
}

/* Pause animation on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .logo-slider-track {
        animation: none;
    }
    
    .logo-slider-track {
        justify-content: center;
        flex-wrap: wrap;
    }
}