/* Main wrapper */
.carousel-wrappers {
    width: 100% ;
    overflow: hidden ;
    padding: 20px 0 ;
    background: #fff;
}

/* Shared row styling */
.carousel-row {
    display: flex !important;
    gap: 20px !important;
    width: max-content !important;
}

/* Infinite animation */
@keyframes scroll-right {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

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

/* Apply animation */
.row-a { 
    animation: scroll-right 40s linear infinite !important; 
    margin-bottom: 2rem !important;
    gap: 2rem !important;
}

.row-b { 
    animation: scroll-left 40s linear infinite !important; 
    gap: 2rem !important;
}

/* Each image class */
.a-img1,.a-img2,.a-img3,.a-img4,.a-img5,
.b-img1,.b-img2,.b-img3,.b-img4,.b-img5 {
    width: 200px !important;
    height: 150px !important;
    object-fit: cover !important;
    border-radius: 35px !important;
}

.a-img1, .b-img1 {
    width: 336px !important;
    height: 234px !important;
}

.a-img1, .a-img3 {
    align-self: flex-end !important;
}

.a-img2, .b-img2 {
    width: 533px !important;
    height: 312px !important;
}

.a-img3, .b-img3 {
    width: 272.25px !important;
    height: 184.5px !important;
}

.a-img4, .b-img4 {
    width: 533px !important;  
    height: 312px !important;
}

.a-img5, .b-img5 {
    width: 450px !important;
    height: 300px !important;
}
/* =========================
   RESPONSIVE SCALE ONLY
   (NO STYLE CHANGES)
========================= */

/* Tablets */
@media (max-width: 1024px) {

    .a-img1, .b-img1 {
        width: 280px !important;
        height: 195px !important;
    }

    .a-img2, .b-img2,
    .a-img4, .b-img4 {
        width: 440px !important;
        height: 260px !important;
    }

    .a-img3, .b-img3 {
        width: 230px !important;
        height: 155px !important;
    }

    .a-img5, .b-img5 {
        width: 380px !important;
        height: 255px !important;
    }
}

/* Large phones */
@media (max-width: 768px) {

    .carousel-row {
        gap: 14px !important;
    }

    .a-img1, .b-img1 {
        width: 230px !important;
        height: 160px !important;
    }

    .a-img2, .b-img2,
    .a-img4, .b-img4 {
        width: 360px !important;
        height: 215px !important;
    }

    .a-img3, .b-img3 {
        width: 190px !important;
        height: 130px !important;
    }

    .a-img5, .b-img5 {
        width: 310px !important;
        height: 210px !important;
    }
}

/* Small phones */
@media (max-width: 480px) {

    .carousel-wrappers {
        padding: 12px 0 !important;
    }

    .carousel-row {
        gap: 10px !important;
    }

    .a-img1, .b-img1 {
        width: 180px !important;
        height: 125px !important;
    }

    .a-img2, .b-img2,
    .a-img4, .b-img4 {
        width: 280px !important;
        height: 170px !important;
    }

    .a-img3, .b-img3 {
        width: 150px !important;
        height: 105px !important;
    }

    .a-img5, .b-img5 {
        width: 240px !important;
        height: 165px !important;
    }
}