.hero-area {
    position: relative;
    background-color: #fff;
    padding: 80px 0 0 0;
}
.logoslider{padding:20px 0;}
.slider {
    width: 100%;
    overflow: hidden; /* Hide the overflow to enable scrolling effect */
    position: relative;
}

.slider-track {
    display: flex;
    width: calc(200px * 10); /* Adjust width based on the number of slides */
    animation: scroll 40s linear infinite; /* Slower scroll for desktop */
}

/* Each logo slide */
.slide {
    flex: 0 0 auto;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 3px 6px;margin:10px;
}

.slide img {
    width: 154px; /* Adjust logo size */
    height: auto;
    display: block;
}

/* Scroll animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-200px * 5)); /* Adjust scroll distance based on number of slides */
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .slider-track {
        width: calc(150px * 10); /* Adjust for tablets */
        animation: scroll 45s linear infinite;
    }

    .slide img {
        width: 150px; /* Adjust logo size for tablets */
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-150px * 5));
        }
    }
}

@media (max-width: 480px) {
    .slider-track {
        width: calc(120px * 10); /* Adjust for small screens */
        animation: scroll 30s linear infinite;
    }

    .slide img {
        width: 120px; /* Adjust logo size for mobile */
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-120px * 5));
        }
    }
}