.container-sldr {
    background-color: rgb(248, 248, 248);
    padding: 10px;
    margin-top: 20px;
}

.main-slider-container {
    display: flex;
    justify-content: center;
}

#main-slider {
    margin-bottom: 10px;
    width: 800px;
}

@media (max-width: 800px) {
    #main-slider {
        width: 600px;
    }
}   
@media (max-width: 600px) {
    #main-slider {
        width: 464px;
    }
}

.slider-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center all elements */
    justify-content: center;
}

.slider-img {
    max-width: 100%;
    height: auto;
    display: block;
}

.slider-wrapper .splide {
    padding: 0 2rem; /* Adjust padding for alignment */
}

.splide__slide {
    opacity: 0.3;
    border: transparent;
}

.splide__slide.is-active {
    opacity: 1; /* Highlight active slide without border */
}

#thumbnail-slider img {
    object-fit: cover;
    width: 100px; /* Match JS settings */
    height: 60px; /* Match JS settings */
}

@media (min-width: 800px) {
    #thumbnail-slider {
        max-width: 930px;
    }
}

@media (max-width: 800px) {
    #thumbnail-slider {
        max-width: 600px;
    }
}

@media (max-width: 600px) {
    #thumbnail-slider {
        max-width: 400px;
    }
}
#thumbnail-slider {
    width: 100%; /* Matches the main slider's width */
    margin-top: 10px; /* Add space between main and thumbnail sliders */
}

#thumbnail-slider img {
    object-fit: cover;
    width: 100px; /* Match JS fixedWidth */
    height: 60px; /* Match JS fixedHeight */
}