.slider-container {
    padding: 2rem;
    width: 98vw;
    min-width: 320px;
}

.slider-wrapper {
    position: relative;
    max-width: 100rem;
    margin: 0 auto;
}

.slider {
    display: flex;
    aspect-ratio: 16 / 9;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: 1rem; /* Rounded corners for the slideshow */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Box shadow for floating effect */
    -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}

/* Hide scrollbar for Chrome, Safari, and Opera */
.slider::-webkit-scrollbar {
    display: none;
}

.slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    border-radius: 1rem; /* Rounded corners for the displayed images in the slideshow */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: opacity 0.5s ease-in-out;
}

.slider img.active {
    opacity: 1;
    z-index: 2;
    
}

.slider-nav {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    position: relative;
    z-index: 2; /* Ensure navigation dots appear in front of the slides */
}

.dot {
    width: 1rem;
    height: 1rem;
    margin: 0 0.5rem;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.75;
    cursor: pointer;
}

.dot.active {
    opacity: 1;
}

/* CSS for Previous and Next buttons */
#prevBtn, #nextBtn {
    background-color: #f4a12b;
    width: 5rem;
    height: 5rem;
    color: black;
    size: 5rem;
    padding: 0rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    position: absolute;
    top: 25vw;
    margin-top: 70px;
    z-index: 3;
    transition: background-color 0.3s, color 0.3s, transform 0.3s, padding 0.3s;
    font-size: 3rem;
}

#prevBtn {
    right: 92vw;
}

#nextBtn {
    left: 92vw;
}

#prevBtn:hover, #nextBtn:hover {
    background-color: #333;
    color: #fff;
    transform: scale(1.2); /* Enlarge the button on hover */
    font-size: 3.5rem; /* Increase font size on hover */
    padding: 0rem;
}