.homepage-bg-img1 {
    position: absolute;
    z-index: 0;
    width: 100%; /* Adjust to cover the entire width */
    height: 100vh; /* Adjust to cover the entire height of the viewport */
    top: 0;
    background: url("https://images.unsplash.com/photo-1654331045702-405756aba4ab?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5hdnklMjBibHVlJTIwYmlvbG9neXxlbnwwfHwwfHx8MA%3D%3D") no-repeat center center;
    background-size: cover; /* Ensure the image covers the entire container */
}

.home-page-container {
    position: relative;
    background-color: #00001a; /* Black container background */
    color: #fff; /* Light text color */
    width: max(100%);
    margin: 0 auto;
    flex-shrink: 0;
    top: -30px;
    height: 14500px;
    display: flex; /* Use flexbox */
    z-index: 0;
    flex-wrap: wrap;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    /* z-index: 6; */
    box-shadow: inset 120px 0px 70px -30px #00001a, inset -120px 0px 70px -30px #00001a;

}

/*
.homepage-bigtitle{
    top: 170px;
    width: 1300px;
    height: 400px;
    position: absolute;
    z-index: 3
}

.homepage-bigtitle-name{
    margin: 0 auto;
    margin-top: 10px;
    width: 1300px;
    height: 200px;
    color: #00001a;
    text-align: center;
    font-feature-settings: 'liga' off;
    font-family: Arial;
    font-size: 80px;
    font-style: normal;
    font-weight: 600;
}
/*
/* Make the header take up the full viewport */
.homepage-bigtittle {
    width: 100%;
    height: 100vh; /* Full viewport height */
    position: sticky; /* Sticky position to allow scrolling effect */
    top: 0;
    z-index: 3;
    background-color: #008000; /* Example background color */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Styling for the text inside the header */
.homepage-bigtittle-name {
    color: #00001a;
    font-family: Arial;
    font-size: 80px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    position: relative;
}

/* Add a fade-out effect */
@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

.homepage-bigtittle-name.sticky {
    animation: fadeOut 1s forwards;
}

/* Trigger the fade-out animation when the user scrolls */
body {
    height: 200vh; /* Just to allow scrolling */
    margin: 0;
    padding: 0;
}

/*
/* Use the :root or :after pseudo-element to trigger the animation 
body::after {
    content: '';
    display: block;
    height: 100vh; /* Adjust this value if you want the effect to trigger sooner or later 
    position: relative;
    z-index: 1;
}
*/