/* Container for the slider */
.slider-wrapper {
    position: relative; /* Position relative to allow positioning of child elements */
    width: 100%; /* Set a fixed width of 80% of the container's width */
    max-width: 100%; /* Maximum width for larger screens */
    margin: 0 auto; /* Center the slider horizontally */
    overflow: hidden; /* Hide any overflowing content */
    padding: 0; /* Remove padding */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Slider container */
.slider {
    display: flex; /* Use flexbox layout to align images */
    width: 100%; /* Slider takes up the full width of the slider-wrapper */
    transition: transform 1s ease; /* Animation for transform changes */
}

/* Styling for each image in the slider */
.slider img {
    flex: 0 0 100%; /* Each image takes up 100% of the slider width */
    width: 100%; /* Set image width to 100% */
   /* object-fit: cover;*/ /* Images will cover the slider area, maintaining aspect ratio */
}

/* Navigation dots container */
.slider-nav {
    display: flex; /* Align dots horizontally */
    column-gap: 0.5rem; /* Space between dots */
    position: absolute; /* Position absolutely relative to the slider-wrapper */
    bottom: 1rem; /* Distance from the bottom of the slider-wrapper */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center the dots container */
    z-index: 1; /* Ensure navigation dots are above other content */
}

/* Styling for each navigation dot */
.slider-nav a {
    width: 0.5rem; /* Size of each dot */
    height: 0.5rem;
    border-radius: 50%; /* Make dots circular */
    background-color: #fff; /* White color for dots */
    opacity: 0.75; /* Slightly transparent dots */
    transition: opacity ease 250ms; /* Smooth transition for opacity changes */
}

/* Hover effect for navigation dots */
.slider-nav a:hover {
    opacity: 1; /* Fully opaque on hover */
}

/* Responsive design adjustments */
@media (max-width: 900px) {
    .slider-wrapper {
        width: 100%; /* Set width to 90% for medium screens */
    }
}

@media (max-width: 600px) {
    .slider-wrapper {
        width: 100%; /* Set width to 100% for small screens */
    }
    
    .slider {
        aspect-ratio: 4 / 3; /* Change aspect ratio for small screens */
    }

    .slider-nav {
        bottom: 0.5rem; /* Reduce space from the bottom on small screens */
    }

    .slider-nav a {
        width: 0.4rem; /* Smaller dots for small screens */
        height: 0.4rem;
    }
}