body, html {
    margin: 0;
    padding: 0;
}

.image-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Set height to full viewport height */
    overflow: hidden;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ensure the image fills the container */
    opacity: 1;
    transition: opacity 1s ease-in-out; /* Transition opacity over 1 second */
}

.image-container img.image2 {
    opacity: 0; /* Initially hide the second image */
}