﻿/* --- Home Page Slideshow --- */
.home-page .slideshow-wrapper {
    display: flex;
    justify-content: center; /* horizontal centering */
    margin: 20px 0;
}

.home-page .slideshow-container {
    position: relative;
    width: 80%; /* less than 100% so it can be centered */
    max-width: 1100px;
    height: 60vh; /* fixed height */
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    animation: fadeInInitial 1.2s ease-out;
}
@keyframes fadeInInitial {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 600px) {
    .home-page .slideshow-container {
        height: 50vh;
    }
}

.home-page .slide {
    display: none;
    position: absolute;
    inset: 0; /* shorthand for top/right/bottom/left:0 */
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
    transition: opacity 0.8s ease;
}

.home-page .slide-image {
    display: block; /* makes the image a block element */
    margin: 0 auto; /* centers horizontally */
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.home-page .fade {
    animation-name: fade;
    animation-duration: 1.8s;
}

@keyframes fade {
    from {
        opacity: .3;
    }

    to {
        opacity: 1;
    }
}
