html {
    font-size: 14px; /* Base font size */
}
@media (min-width: 768px) {
    html {
        font-size: 16px; /* Increase font size for larger screens */
    }
}
body {
    margin-bottom: 60px; /* Added margin to prevent bottom cut-off */
}
/* ========================== BACKGROUND IMAGE ========================== */
.background-image {
    background-image: url('/images/mobile_background.webp'); /* Path to background */
    background-size: cover; /* Ensure the entire image is visible */
    background-position: center; /* Center image */
    height: 100vh; /* Full viewport height */
    width: 100%; /* Full width */
    display: flex; /* Flexbox for centering content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    color: white; /* White text color */
    position: relative; /* Relative positioning for absolute children */
}
@media (min-width: 768px) {
    .background-image {
        background-image: url('/images/desktop_background.webp');
    }
}
/* Disable fixed background on small screens */
@media (max-width: 768px) {
    .background-image {
        background-attachment: scroll; /* Scrollable background for mobile */
    }
}
/* ========================== TOP IMAGE STYLES ========================== */
.top-image {
    position: absolute; /* Position image absolutely */
    top: 5%; /* Adjust vertical space */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure perfect centering */
    width: 15vw; /* Small width */
    max-width: 300px; /* Limit maximum width */
    height: auto; /* Maintain aspect ratio */
}
/* Responsive adjustments */
@media (max-width: 800px) {
    .top-image {
        width: 23vw; /* Adjust width on medium screens */
        max-width: 170px;
    }
}
@media (max-width: 480px) {
    .top-image {
        width: 35.5vw; /* Further adjust width on smaller screens */
        max-width: 120px;
    }
}
/* ========================== CENTERED TEXT STYLES ========================== */
.centered-text {
    position: absolute;
    top: 20%; /* Move closer to the top of the screen, using viewport height for better scaling */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure perfect centering */
    color: white;
    font-size: 1.2rem; /* Default font size */
    text-align: center;
    line-height: 1.4;
    width: 80%; /* Default width for flexibility */
    max-width: 600px; /* Prevent the text from becoming too wide */
    min-width: 250px; /* Prevent the text from becoming too narrow */
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .centered-text {
        font-size: 0.9rem; /* Adjust font size for tablets */
        top: 15%;
        width: 85%; /* Adjust width on medium screens */
    }
}

@media (max-width: 400px) {
    .centered-text {
        font-size: 0.8rem; /* Adjust font size for tablets */
        top: 13%;
        width: 85%; /* Adjust width on medium screens */
    }
}

    /* ========================== INFO SECTION STYLES ========================== */
    .info-section {
        position: absolute;
        top: 15%; /* Adjust top position for better balance on mobile */
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        padding: 10px 5%;
        text-align: center;
        display: flex;
        flex-direction: column; /* Stack items vertically by default */
        align-items: center;
        box-sizing: border-box;
    }
    /* Image on top of the section */
    .info-image-top img {
        width: 100%; /* Image scales with screen width */
        height: auto; /* Maintain aspect ratio */
        max-width: 100%; /* Ensure the image doesn't overflow */
    }
    /* Image on the bottom of the section */
    .info-image-bottom img {
        width: 100%; /* Image scales with screen width */
        height: auto; /* Maintain aspect ratio */
        max-width: 100%; /* Ensure the image doesn't overflow */
    }
    /* Info Items Container (for all images) */
    .info-items-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; /* Space between image items */
    }
    /* Individual image items */
    .info-item {
        width: 80%; /* Adjust width of image items */
        max-width: 300px; /* Optional: Maximum width for better control */
    }
    /* Separator image between image items */
    .separator-img {
        max-width: 100px; /* Ensure separator image scales properly */
        margin: 5px 0; /* Space around separator image */
    }

/* ========================== MOBILE STYLES ========================== */
@media (max-width: 400px) {
    .info-section {
        top: 27%;
        padding: 8px;
    }

    .info-title {
        color: #D4AF37; /* Pale gold color */
        font-size: 0.9rem;
    }

    .info-body {
        font-size: 0.75rem;
    }

    .separator-img {
        max-height: 50px;
        max-width: 6px; /* Ensure the separator image is responsive */
    }
    /* Top and Bottom images on mobile should scale properly */
    .info-image-top img, .info-image-bottom img {
        max-width: 60px; /* Allow the images to scale freely on small screens */
    }
    /* Info items on mobile should be stacked */
    .info-items-container {
        flex-direction: column;
        gap: 10px;
    }

    .info-item {
        width: 100%; /* Full width on mobile */
    }
}



    /* ========================== MOBILE STYLES ========================== */
    @media (max-width: 768px) {
        .info-section {
            top: 28%;
            padding: 8px;
        }

        .info-title {
            color: #D4AF37; /* Pale gold color */
            font-size: 0.9rem;
        }

        .info-body {
            font-size: 0.75rem;
        }

        .separator-img {
            max-height: 30px;
            max-width: 15px; /* Ensure the separator image is responsive */
        }
        /* Top and Bottom images on mobile should scale properly */
        .info-image-top img, .info-image-bottom img {
            max-width: 60px; /* Allow the images to scale freely on small screens */
        }
        /* Info items on mobile should be stacked */
        .info-items-container {
            flex-direction: column;
            gap: 10px;
        }

        .info-item {
            width: 100%; /* Full width on mobile */
        }
    }
    /* ========================== TABLET AND DESKTOP STYLES ========================== */
    @media (min-width: 768px) {
        .info-section {
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            top: 38%;
            padding: 20px 10%;
        }

        .info-items-container {
            flex-direction: row; /* Images in a row */
            justify-content: space-evenly; /* Evenly distribute items */
            align-items: flex-start;
            gap: 20px; /* Space between images */
        }

        .info-item {
            width: 45%; /* Adjust width for each image item */
        }

        .info-title {
            color: #D4AF37; /* Pale gold color */
            font-size: 1.1rem;
        }

        .info-body {
            font-size: 0.8rem;
        }

        .separator-img {
            display: flex;
            align-self: center;
            justify-content: center;
            align-items: center;
            margin: 0px auto;
            max-height: 75px;
            max-width: 9px; /* Ensure the separator image is responsive */
        }
        /* Top and Bottom images on tablet and desktop should scale properly */
        .info-image-top img, .info-image-bottom img {
            max-width: 80px; /* Let images scale responsively */
        }
    }
    /* ========================== EXTRA LARGE SCREENS ========================== */
    @media (min-width: 1200px) {
        .info-section {
            top: 40%; /* Adjust for extra-large screens */
        }

        .info-title {
            color: #D4AF37; /* Pale gold color */
            font-size: 1.2rem;
            align-items: flex-start;
        }

        .info-body {
            font-size: 0.9rem;
        }

        .separator-img {
            display: flex;
            align-self: center;
            justify-content: center;
            align-items: center;
            margin: 0px auto;
            max-width: 100px;
        }
        /* Top and Bottom images on very large screens */
        .info-image-top img, .info-image-bottom img {
            max-width: 100px; /* Let images scale responsively */
        }
    }
    /* ========================== BOTTOM CONTENT STYLES ========================== */
    /* First Section: Website Under Construction and Contact Us Button */
.bottom-content-1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
    /* Website under construction text */
    .construction-text {
        font-size: 1rem;
        color: white;
        margin-bottom: 20px; /* Space between text and button */
    }
    /* Contact Us Button */
    .contact-btn {
        display: inline-flex;
        justify-content: center; /* Center the content inside the button */
    }

    .whatsapp-btn {
        background-color: #6B4F4F; /* Brown-grey color */
        color: white;
        font-size: 1rem;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .whatsapp-logo {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }
    /* Second Section: Logos */
    .bottom-content-2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        margin-top: 20px;
    }

    .logos-section {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    /* Logo styling */
    .logo-item {
        width: 80px;
        height: 80px;
    }

    .logo-item1 {
        width: 90px;
        height: 90px;
    }

    .logo-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .logo-item1 img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    /* ========================== MOBILE STYLES ========================== */
    @media (max-width: 768px) {
        /* First Section */
        .bottom-content-1 {
            top: 97%; /* Adjust for smaller screens */
            padding: 0 10px;
        }

        .construction-text {
            font-size: 0.9rem;
        }

        .whatsapp-btn {
            font-size: 0.9rem;
            padding: 8px 16px;
        }
        /* Second Section (Logos) */
        .bottom-content-2 {
            top: 106%; /* Shift the first section further downward */
        }

        .logos-section {
            gap: 15px;
        }

        .logo-item {
            width: 45px;
            height: 45px;
        }

        .logo-item1 {
            width: 60px;
            height: 60px;
        }
    }
    /* ========================== DESKTOP STYLES ========================== */
    @media (min-width: 768px) {
        /* First Section */
        .bottom-content-1 {
            top: 73%; /* Shift the first section further downward */
            bottom: auto; /* Remove bottom constraint */
            padding: 4px 8%; /* Add padding for spacing */
        }

        .construction-text {
            font-size: 1.1rem;
        }

        .whatsapp-btn {
            font-size: 0.9rem;
            padding: 8px 15px;
        }
        /* Second Section (Logos) */
        .bottom-content-2 {
            top: 88%; /* Shift logos section further downward */
        }

        .logos-section {
            gap: 20px;
        }

        .logo-item {
            width: 60px;
            height: 60px;
        }

        .logo-item1 {
            width: 75px;
            height: 75px;
        }
    }