/* Partner Carousel Styles */
.partners-carousel {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column; /* Changed from flex to column */
    justify-content: center;
    gap: 2rem;
}

.partners-carousel::before,
.partners-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px; /* Adjust fade width */
    z-index: 2;
}

.partners-carousel::before {
    left: 0;
    background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
}

.partners-carousel::after {
    right: 0;
    background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
}

.partner-row {
    display: flex;
    flex-direction: row; /* Explicitly set to row */
    width: max-content; /* Ensure the row is wide enough to scroll */
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.partner-row.right-to-left {
    animation-name: scroll-left;
}

.partner-row.left-to-right {
    animation-name: scroll-right;
}

.partner-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25vw; /* Use viewport width for responsive sizing */
    margin-right: 4vw; /* Use viewport width for responsive spacing */
}

.partner-logo img {
    max-width: 20vw; /* Responsive max-width */
    max-height: 15vw; /* Responsive max-height */
    filter: grayscale(100%);
}

/* Add a media query to prevent logos from becoming too large on desktop */
@media (min-width: 1200px) {
    .partner-logo {
        width: 300px; /* Max width for the container */
        margin-right: 48px; /* Fixed margin for large screens */
    }

    .partner-logo img {
        max-width: 240px; /* Max width for the image */
        max-height: 180px; /* Max height for the image */
    }
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* Add this rule to pause the animation during the restart */
.partners-carousel.restarting .partner-row {
    animation-play-state: paused;
}

/* RTL adjustments for partner carousel animations */
html[dir="rtl"] .partner-row.right-to-left {
    animation-name: scroll-left-rtl;
}

html[dir="rtl"] .partner-row.left-to-right {
    animation-name: scroll-right-rtl;
}

@keyframes scroll-left-rtl {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(50%); /* Move right in LTR context, which is visually left in RTL */
    }
}

@keyframes scroll-right-rtl {
    0% {
        transform: translateX(50%); /* Move left in LTR context, which is visually right in RTL */
    }
    100% {
        transform: translateX(0%);
    }
}