body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.full-width-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff; /* Set text color to be visible on the background */
    position: relative;
}

.full-width-container.image-container {
    background: url('../img/main-image2.png') center/cover no-repeat;
}

.full-width-container.color-container {
    background-color: #00089a;
}

.overlay-image {
    position: absolute;
    top: 44%; /* Set to the height of the first container */
    left: 0;
    width: 100%; /* Cover the full width of the screen */
    height: 130%; /* Cover the full height of the screen */
    background: url('../img/spacer2.png') center/cover no-repeat; /* Adjust the path to your overlay image */
    pointer-events: none; /* Ensure the overlay image doesn't interfere with interactions */
    z-index: 1; /* Place the overlay above the second container */
}

.content {
    max-width: 800px; /* Adjust as needed */
    margin: 0 20px; /* Adjust as needed */
}

/* Media query for mobile responsiveness */
@media screen and (max-width: 768px) {
    .overlay-image {
        width: 100%;
        height: auto;
        top: 50%; /* Adjust the top position for better mobile compatibility */
        transform: translateY(-50%);
    }
}