/* Logo Slider CSS */
.logo-slider {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 20px 0;
    width: 100%;
    margin-top: 0 !important; /* Override inline styles if any */
}

.logo-slider-track {
    display: flex;
    align-items: center;
    /* Animation speed can be adjusted here */
    animation: scroll 60s linear infinite;
    width: max-content; /* Ensure width fits all logos */
}

.single-logo {
    display: inline-block;
    padding: 0 30px; /* Space between logos */
    flex-shrink: 0; /* Prevent logos from shrinking */
}

.single-logo img {
    max-width: 150px; /* Limit logo width */
    height: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    display: block; /* Remove whitespace below image */
}

.single-logo img:hover {
    filter: grayscale(0%);
}

/* Animation Keyframes */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Move by half to seamless loop if content is duplicated */
    }
}

/* Pause animation on hover (optional) */
.logo-slider:hover .logo-slider-track {
    animation-play-state: paused;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .single-logo {
        padding: 0 20px;
    }
    .single-logo img {
        max-width: 120px;
    }
}