/* Slideshow container styling */
.slideshow-container {
    position: relative;
    max-width: 80vw;    /* Maximum width of 80% of the viewport width */
    max-height: 80vh;   /* Maximum height of 80% of the viewport height */
    margin: auto;
    background-color: rgb(30, 30, 30);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;   /* Hide overflow to ensure images don’t extend outside the container */
}

.caption {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

/* Individual slides */
.mySlides {
    display: none;
}

/* Image styling within slides */
.slideshow-container img {
    max-width: 80%;    /* Constrain images to the container’s width */
    max-height: 80%;   /* Constrain images to the container’s height */
    width: auto;        /* Maintain aspect ratio */
    height: auto;       /* Maintain aspect ratio */
    vertical-align: middle;
}

/* Fade animation for slides */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from { opacity: .4 }
    to { opacity: 1 }
}


.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #ef942b;
}