/* 2. Animation for the First Carousel (Doubled to 3016px width) */
@keyframes moveBgFirst {
    from {
        background-position: 0 50%;
    }
    to {
        background-position: -3016px 50%; /* Moves exactly one full scaled width */
    }
}

/* 3. Animation for the Second Carousel (Doubled to 6032px width) */
@keyframes moveBgSecond {
    from {
        background-position: 0 50%;
    }
    to {
        background-position: -6032px 50%; /* Moves exactly one full scaled width */
    }
}

/* 4. Base Carousel Box */
.carousel {
    --speed: 35s; /* Slowed down slightly more because the travel distance doubled */
    height: 500px; /* Doubled from 250px to fit the 300px second carousel safely */
    max-width: 1160px; /* Expanded max-width so you can see more of the larger logos */
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    margin-top: -300px;
}

/* 5. First Carousel (Now 150px high) */
.carousel .logos {
    animation: moveBgFirst var(--speed) linear infinite;
    position: absolute;
    inset: 0;
    background: url("images/logo_charousel.png") 0 50% / 3016px 150px repeat-x;
}

/* 6. Second Carousel (Now 300px high) */
.carousel:nth-of-type(2) .logos {
    animation: moveBgSecond var(--speed) linear infinite;
    background: url("images/logo_charousel.png") 0 50% / 6032px 300px repeat-x;
}