/* --- 1. Container Setup --- */
.logo-slider-wrapper {
    /* Optional: Sets maximum width for the whole block */
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    overflow: hidden;
}

.logo-slider-wrapper h2 {
    font-size: var(--font-size-3xl);
    font-weight: 400;
    text-align: center;
}

.logo-slider-wrapper p {
    margin: 0;
}

.logo-slider {
    /* Hides the duplicate logos initially off-screen */
    overflow: hidden;
    /* Ensures the track stays inside */
    position: relative;
    /* Adds a small buffer to prevent cropping */
    padding: 8px 0;
    width: 100%;
    max-width: 100vw;
}

/* --- 2. Track & Images --- */
.slide-track {
    /* Displays all logos in a single row */
    display: flex;
    /* Sets the total width needed for all logos (original + duplicate) */
    width: fit-content;
    /* Prevents logos from wrapping */
    white-space: nowrap;
    /* Apply the animation */
    animation: scroll 60s linear infinite;
}

/* Pause animation on hover for accessibility */
.logo-slider:hover .slide-track {
    animation-play-state: paused;
}

.slide-track img {
    /* Styling for individual logos */
    height: 58px;
    /* Adjust size as needed */
    margin: 0 32px;
    /* Space between logos */
    flex-shrink: 0;
    /* Prevents images from shrinking */
    opacity: 0.7;
    filter: grayscale(100%);
    transition: opacity 0.3s, filter 0.3s;
}

.slide-track img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* --- 3. Keyframes for Motion --- */
@keyframes scroll {
    0% {
        /* Start position: fully visible (original set) */
        transform: translateX(0);
    }

    100% {
        /* End position: moves left by exactly half its content (one full set of logos) */
        transform: translateX(-50%);
    }
}

/* Optional: Add text above the slider */
.logo-slider-wrapper h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: 4px;
}

.logo-slider-wrapper p {
    font-size: var(--font-size-base);
    color: #555;
    margin-bottom: 32px;
}

@media (max-width: 992px) {
    .logo-slider-wrapper {
        max-width: 100vw !important;
        width: 100% !important;
        overflow: hidden !important;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .logo-slider {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0;
    }

    .logo-slider-wrapper h2 {
        font-size: var(--font-size-2xl);
    }
}

@media (max-width: 500px) {
    .logo-slider {
        margin: 24px 0;
    }

    .logo-slider-wrapper h2 {
        font-size: var(--font-size-xl);
    }

    .logo-slider-wrapper p {
        font-size: var(--font-size-base);
        font-weight: 300;
        max-width: 300px;
        margin: 0 auto;
    }

    .slide-track img {
        width: 168px;
        object-fit: contain;
    }
}