/* Container for the slideshow */
.slideshow-container {
    width: 100%;
    max-width: 1000px; /* The container scales to fit within the defined max width */
    margin: 0 auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow: hidden; /* Ensures only the current slide is visible */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Wrapper holding the slides */
.slideshow-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    position: relative;
}

/* Individual slides */
.slide {
    flex: 0 0 100%; /* Each slide takes 100% of the container width */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image styles */
.slide img {
    max-width: 100%; /* Images scale to fit the container */
    max-height: 80vh; /* Images do not exceed 80% of the viewport height */
    object-fit: contain; /* Maintains image aspect ratio */
    margin: auto; /* Centers the images */
}

/* Fade overlay for the slideshow */
.fade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out; /* Smooth fade effect */
    z-index: 5; /* Ensure it overlays the images only */
}

/* Active fade state */
.fade-overlay.fade-active {
    opacity: 1; /* Fully visible white overlay */
}

/* Ensure container elements are unaffected */
.container h2,
.container p {
    position: relative; /* Keep text layers unaffected by the fade-overlay */
    z-index: 1;
    padding-bottom: 2rem;
}