/* Styling for the Client Logo Animation Section */

.client-logos-section .logo-row {
    display: flex;
    flex-wrap: nowrap; /* Ensures logos stay in a single line */
    gap: 48px; /* Default gap for larger screens */
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 1100px; 
    min-height: 60px;
    /* Removed overflow-x: auto; to disable scrolling */
}

.client-logos-section .logo-item img {
    height: 40px;
    width: auto;
    filter: grayscale(1);
    background: transparent;
    transition: filter 0.2s, opacity 0.3s ease-in-out;
    opacity: 1;
}

/* This class triggers the 5-second blink animation */
.client-logos-section .logo-item.active img {
    filter: none; /* Make it colorful */
    animation: blinkInOut 5s forwards;
}

@keyframes blinkInOut {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0; 
    }
}

/* Dark mode compatibility */
html.dark-mode .client-logos-section .logo-item:not(.active) img {
    opacity: 0.6;
    filter: invert(1) grayscale(1);
}

html.dark-mode .client-logos-section .logo-item.active img {
    filter: none; /* Keep the original color, do not invert */
}

/* Adjusted for smaller screens: Reduce gap to fit all logos on one line */
@media (max-width: 1024px) { /* Adjust breakpoint as needed based on your logo count and sizes */
    .client-logos-section .logo-row {
        gap: 20px; /* Reduced gap */
        max-width: 90%; /* Allow it to take more width if needed */
        padding: 0 10px; /* Add some padding to the sides */
    }
    .client-logos-section .logo-item img {
        height: 30px; /* Slightly reduce logo size if necessary */
    }
}

@media (max-width: 768px) {
    .client-logos-section .logo-row {
        gap: 15px; /* Further reduce gap for smaller tablets */
        /* Removed flex-wrap: wrap; to keep them in one row */
    }
    .client-logos-section .logo-item img {
        height: 25px; /* Further reduce logo size if necessary */
    }
}

@media (max-width: 480px) { /* Even smaller screens / mobile */
    .client-logos-section .logo-row {
        gap: 10px; /* Minimal gap */
    }
    .client-logos-section .logo-item img {
        height: 20px; /* Smallest logo size */
    }
    .client-logos-section .logo-row{
        flex-wrap: wrap;
    }
}