body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    color: white; /* Set default text color to white */
}


.background {
    background-image: url('glass-background.png');
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
}



.landing {
    text-align: center;
    height: 100vh; /* Maintain full viewport height */
    position: relative; /* Set position relative for absolute child positioning */
}

.landing h1,
.landing .slogan {
    position: absolute; /* Positioning elements absolutely within .landing */
    left: 50%;
    transform: translateX(-50%); /* Centering horizontally */
}

.landing h1 {
    top: 50%; /* Positioning the header at the center */
    transform: translate(-50%, -50%); /* Adjust for exact center */
}

.landing .slogan {
    top: 60%; /* Positioning the slogan below the header */
    transform: translateX(-50%); /* Keep it horizontally centered */
}
.landing .logo {
    display: block;
    max-width: 60px; /* Adjust the size as needed */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center the logo horizontally */
    position: absolute;
    top: 41%; /* Adjust this value as needed to position the logo above the text */
    left: 50%;
    transform: translate(-50%, -50%);
}

header {
    text-align: center;
}

.painting-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap; /* Allows items to wrap if needed */
}

.text-left, .text-right {
    flex: 1; /* Each text container takes up equal space */
    padding: 0 20px; /* Add some padding for spacing */
    min-width: 150px; /* Minimum width to ensure text doesn't get too squished */
    color: white;
}

.luxury-painting {
    max-width: 40%; /* Adjust as necessary */
    height: auto;
    flex-shrink: 0; /* Prevent the image from shrinking */
    margin: 10px; /* Optional margin for spacing */
}

.content {
    position: relative;
    z-index: 10;
}



.staircase-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px auto;
}

.staircase-step {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 20px;
    height: 5px;
    background: silver;
    transform-origin: 0 0;
}

/* Animation or positioning for each step */
/* This is just an example. You'll need to adjust the count and degrees for a realistic effect */
@keyframes spiral {
    from { transform: rotate(0deg) translateX(50px); }
    to { transform: rotate(360deg) translateX(50px); }
}




.fountain {
    text-align: center;
}

.lemonade-image {
    max-width: 100%;
    height: auto;
}

.stars-section {
    position: relative;
    height: 300px; /* Adjust as needed */
}

#starCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.button-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.hidden {
    display: none;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Smooth transition for the text appearance */
}

.image-container {
    position: relative; /* This makes it a reference for absolute positioning */
}

.jungle-image {
    width: 100%; /* Full width of the container */
    height: auto; /* Maintain aspect ratio */
    position: relative; /* Relative positioning for absolute child positioning */
}

.animate-text {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 0; /* Align to the left edge of the parent */
    width: 100%; /* Full width to cover the image */
    transform: translateY(-50%); /* Adjust for vertical centering */
    opacity: 0; /* Start with text invisible */
    transition: opacity 5s ease-in-out; /* Transition for appearance */
    color: gold; /* Text color */
    font-size: 24px; /* Adjust font size */
    padding: 20 20px; /* Add some padding on both sides */
    text-align: center; /* Center the text inside the element */
    /* Add more styling as needed */
}

.animate-text.visible {
    opacity: 1;
}

/* ... other styles ... */


@keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

.f1-image-container {
    position: relative;
    text-align: center;
    margin-top: 20px;
}

.f1-image {
    max-width: 100%;
    height: auto;
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    /* Adjust the width, padding, etc., as needed */
}

.jungle-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}
footer {
    text-align: center;
    padding: 20px;
    position: relative;
}

.download-link {
    position: relative;
    display: inline-block;
}

.mbs-image {
    max-width: 100%;
    height: auto;
    display: block;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Choose a color that contrasts with your image */
    font-size: 20px;
    font-weight: bold;
}


.background-mbs {
    background-image: url('marina-bay-sands.jpg'); /* Replace with your Marina Bay Sands image */
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.content {
    justify-content: center;
    align-items: center;
    text-align: center;
}