@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}


.client-belt-list {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    height: 100px;
    padding: 20px 0;
    position: relative;

    &:before,
    &:after {
        position: absolute;
        top: 0;
        width: 80px;
        height: 100%;
        content: "";
        z-index: 2;
    }

    &:before {
        left: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
    }

    &:after {
        right: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
    }

    .logo-track {
        height: 100%;
        display: inline-block;
        white-space: nowrap;
        animation: scroll 30s linear infinite;

        .logo-item {
            height: 100%;
            display: inline-block;
            padding: 0 20px;

            img {
                height: 100%;
                /* Adjust the height of the logos as needed */
                vertical-align: middle;
                filter: grayscale(1);
                mix-blend-mode: multiply;
            }
        }
    }

    &:hover {
        .logo-track {
            animation-play-state: paused;
        }
    }
}