.slides .img-holder {
    object-fit: contain;
    background-position: center center;
    background-repeat: no-repeat;
    min-width: 100%;
    transition: all ease-in 500ms;
    background-size: cover;
}

.slides {
    display: flex;
    overflow-x: scroll;
}

    .slides::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .slides::-webkit-scrollbar {
        width: 0; /* Remove scrollbar space */
        background: transparent; /* Optional: blend scrollbar into background */
    }
    /* Optional: show scrollbar track on hover */
    .slides::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.4); /* Adjust opacity as needed */
    }

    /* Webkit browsers (Chrome, Safari) */
    .slides::-webkit-scrollbar {
        width: 8px;
        /* Set width of the invisible scrollbar */
    }

    .slides::-webkit-scrollbar-thumb {
        background-color: transparent;
        /* Make thumb transparent */
    }

    .slides::-webkit-scrollbar-track {
        background-color: transparent;
        /* Make track transparent */
    }

.slder_container .dot.active {
    color: #eeeeee98;
}

.thumbnails.hero {
    margin:0px 0 0px 0;
}


.thumbnails {
    margin: 10px auto 0;
    padding: 0;
    justify-content: center;
}


.thumbnail {
    width: 130px;
    height: 60px;
    overflow: hidden;
    list-style: none;
    margin: 0 0.2rem;
    cursor: pointer;
}

.thumbnail-hero {
    overflow: hidden;
    list-style: none;
    margin: 2px 2px;
    cursor: pointer;
}


.thumbnail img {
    width: 100%;
    height: auto;
}

.thumbnail, .thumbnail-hero {
    opacity: 0.5;
}
.thumbnail-hero {
    opacity: 0.2;
    color: #eee;
}

    .thumbnail.is-active {
        opacity: 1;

    }

.thumbnail-hero.is-active {
    opacity: .5;
    color:#eee;
}

.splide__arrow--next, .splide__arrow--prev {
    background-color: #eeeeee87 !important
}

@media (max-width: 768px) {
    #main-hero-carousel .splide__arrow--next, #main-hero-carousel .splide__arrow--prev {
        display: none !important;
    }
}