* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

footer {
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: .55em;
    text-align: center;
}

footer p {
    letter-spacing: .1rem;
    font-family: "Time New Roman", serif;
    font-weight: 600;
}

.gallery-container {
    display: flex;                /* Use Flexbox layout */
    justify-content: center;  /* Align items to the left */
    align-items: center;          /* Center items vertically */
    min-height: 90vh;
}             /* Full height of the viewport */

.title-image {
    max-width: 15%;              /* Adjust width to your liking */
    height: auto;                /* Maintain aspect ratio */
    margin-right: 30px;          /* Space between title image and slideshow */
    transition: filter 0.3s ease;
}

.title-image.invert {
    filter: invert(1);
}

.slideshow-container {
    position: relative;
    max-width: 50%;              /* Adjust as needed */
     max-height: 100vh;
    overflow: hidden;            /* Hide overflow */
    transition: transform 0.5s;
}

.fade {
    display: none;                /* Initially hide all images */
    opacity: 0;                  /* Start with images invisible */
    transition: opacity 1s;      /* Fade effect */
    width: 100%;
}

.fade img {
    width: 100%;                 /* Responsive images */
    height: auto;                /* Maintain aspect ratio */
}

/* Media Query for Small Screens */
@media (max-width: 600px) {
    .gallery-container {
        flex-direction: column;   /* Stack vertically on small screens */
    }

    .title-image {
        position: absolute;
        top: 5vh;
        max-width: 100%;           /* Adjust title image size */
        margin-right: 0;          /* Space between title image and slideshow */
    }

    .slideshow-container {
        max-width: 100%;           /* Adjust for smaller screens */
        /* transform: rotate(-90deg); */
    
    }
}

@media (max-width: 950px) {
    .title-image {
        max-width: 25%;           /* Adjust title image size */
    }
}

/* Show the active image */
.show {
    display: block;              /* Show the active image */
    opacity: 1;                  /* Fully visible */
}