html, body {
    height: 100%; /* Ensure the html and body elements take up the full viewport height */
    margin: 0; /* Remove default body margin */
    padding: 0;
}

.full-page-background {
    background-image: url('come-soon.jpg'); /* Replace with your image URL */
    background-size: cover; /* Scales the image to cover the entire container while maintaining aspect ratio */
    background-position: center center; /* Centers the image horizontally and vertically */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: fixed; /* Keeps the background image fixed in the viewport even when scrolling */
    height: 100vh; /* Sets the height to 100% of the viewport height */
    width: 100vw; /* Sets the width to 100% of the viewport width */
    color: #fff; /* Example text color for readability against the background */
    display: flex; /* Centers the content */
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Add other styles for your content as needed */
}

/* Optional: Media queries for optimizing image loading or display on different devices */
@media only screen and (max-width: 767px) {
    .full-page-background {
        background-image: url('come-soon.jpg'); /* Use a smaller image for mobile */
        /* background-attachment: scroll; /* Consider using scroll for better mobile performance */ */
    }
}