/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Style for full-screen video section */
.fullscreen-video {
    position: fixed; /* Fix the video in place */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
    z-index: 1; /* Ensure the video is on top */
    transition: transform 0.5s ease; /* Transition for sliding effect */
}

/* Video styling */
.fullscreen-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

/* Style for interactive image section */
.interactive-image {
    position: fixed; /* Fix the image in place */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0; /* Ensure it's behind the video */
}

/* Image container styling */
.image-container {
    position: relative;
    display: inline-block;
}

/* Main image */
.main-image {
    max-width: 60%;
    height: auto;
    display: block;
}

/* Overlay image */
.overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto;
    opacity: 0; /* Initially hidden */
    transition: opacity 2s ease; /* Smooth opacity transition */
    pointer-events: none; /* Ensure it doesn’t interfere with mouse events */
}

/* Overlay link to make the area clickable */
.overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none; /* Remove underline */
    z-index: 2; /* Ensure the link is on top */
}

/* Dummy content to allow scrolling */
.dummy-content {
    height: 200vh; /* Adjust height as needed to ensure scrolling */
    background-color: #DFF8EB; /* Background color for visibility */
    padding: 20px;
    text-align: center;
}