.logo-slider {
    height: 50px !important;
    animation: slidein 60s linear infinite;
    white-space: nowrap;

    .logos {
        width: 100%;
        display: inline-block;
        margin: 0px 0;
        height: auto;
        img {
            animation: fade-in 0.5s
            cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
        }
    }

    img {
        font-size: 2.5rem;
        color: #fff;
        margin: 0 10px;
        height: 50px;
    }
}


@keyframes slidein {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.logo-container {
    overflow: hidden;
    /* Ensure there's a defined width and potentially a height */
    width: 100%; /* or a specific pixel value */
    /* height: 200px; Uncomment and adjust if necessary */
}

/* for tablets */
@media (max-width: 768px) {
    .logo-slider {
        height: 55px;
    }
    .logo-slider .logos img {
        font-size: 1.5rem;
    }
}

/* for mobile */
@media (max-width: 480px) {
    .logo-slider {
        height: 40px;
    }
    .logo-slider .logos img {
        font-size: 1.2rem;
    }
}