.sponsor-banner-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.sponsor-banner-track {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}

/* This creates the seamless loop effect with two identical wrappers */
.sponsor-wrapper {
    display: flex;
    flex-shrink: 0;
}

/* Primary wrapper animation */
.sponsor-wrapper.primary {
    animation: scroll-seamless var(--scroll-duration, 20s) linear infinite;
}

/* Secondary wrapper animation - exactly the same but ensures no gaps */
.sponsor-wrapper.secondary {
    animation: scroll-seamless var(--scroll-duration, 20s) linear infinite;
}

.sponsor-banner-container[data-pause-on-hover="true"]:hover .sponsor-wrapper {
    animation-play-state: paused;
}

.sponsor-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsor-logo img {
    max-width: none;
    object-fit: contain;
    display: block;
}

/* New seamless animation - one wrapper simply follows the other */
@keyframes scroll-seamless {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}