body, html {
    width: 100vw;
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color: rgb(0, 0, 0);
background: black;


}
header {
    width: 100vw;
    position: fixed;
    top: 0;
    height: 4.8rem;
    left: 0;

    z-index: 1000;

}
#header {
    margin-top: 0.3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    text-align: center;
    font-size: 14.2vw;
    margin-left: 23.86vw;
    gap: 23.8vw;
    
position: fixed;
}

#moving-text {
    font-size: 4rem; /* Adjust font size as needed */
    font-weight: bold;
    background: linear-gradient(to right, #000 0%, #000 60%, #fff 78%,  #000000 90%, #000 100%); /* Black and white gradient */
    background-size: 500% 100%; /* This will make the gradient large enough to move */
    -webkit-background-clip: text; /* Clip the background to the text */
    color: transparent; /* Make the text color transparent */
    animation: moveBackground 10s linear infinite; /* Move the background */
}
 #moving-text2 {
    font-size: 4rem; /* Adjust font size as needed */
    font-weight: bold;
    background: linear-gradient(to right, #000 0%, #000 60%, #fff 76%,  #000000 90%, #000 100%); /* Black and white gradient */
    background-size: 500% 100%; /* This will make the gradient large enough to move */
    -webkit-background-clip: text; /* Clip the background to the text */
    color: transparent; /* Make the text color transparent */
    animation: moveBackground 10s linear infinite; /* Move the background */
}



#moving-text2 {
    animation-delay: 5s !important;
}


@keyframes moveBackground {
    0% {
        background-position: 0 0; /* Start the gradient on the right */
    }
    
    100% {
        background-position: -100% 0; /* Move the gradient to the left */
    }
}


header::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
background: transparent;
    filter: blur(0px);
    z-index: -1; /* Ensures the pseudo-element is behind the header content */
}

::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
    visibility: hidden;
}


.content-section-container::-webkit-scrollbar {
    display: none;
    visibility: hidden;
}


.content-section-container {


width: 100vw;
    position: absolute;
min-width: 100%;
margin-top: 2.4rem;
pointer-events: all;
    box-sizing: border-box; /* Include padding in element's total width and height */
}

/* Style for individual content sections */
.content-section {

    overflow-x: hidden;
    margin-bottom: 7.2rem; /* Spacing between sections */
    height: 90svh;
    margin-top: 1.3rem;
    pointer-events: all;
    width: 100vw;
    opacity: 0;
    transition: all 1.51s;
    scroll-behavior: smooth;
    min-height: 300px; /* Minimum height for sections */
    display: flex;
    min-width: 100%;
    position: relative;
    flex-direction: column;
    color: #000000;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.content-section p, .content-section h2, .content-section a {
    scale: 0.72;
    opacity: 0;
    transition: scale 1.8s, opacity 0.8s, transform 2.8s;
    transform: translateX(-32vw);
}

.content-section.is-visible p, .content-section.is-visible a, .content-section.is-visible h2 {
    scale: 1;
    opacity: 1;
    transform: translateX(0);

}

.content-section.is-visible {
    opacity: 1;

}

#section1 {

    background-image: url(ottop-2.jpg);
    background-repeat: no-repeat;
    background-size: 100vw auto;
    filter: opacity(0.82);
    background-position: center;

    margin-top: 2.8rem;
}

#section1 p {
    color: rgb(255, 248, 230);
}

#section2 {
    background: linear-gradient(to bottom, #000000, #ffffffee, #000000);

}

#section3 {
    background: linear-gradient(to bottom, #000000, #ffffff, #000000);

}

#section4 {
    background: linear-gradient(to bottom, #000000, #ffffff, #000000);

}
#section5 {
    background: linear-gradient(to bottom, #000000, #ffffff, #000000);

}


#sectionX {
    background: linear-gradient(to bottom, #000000, #ffffff, #000000);

}



p {
    font-weight: lighter;
}

#section6 {
    background: linear-gradient(to bottom, #000000, #ffffff, #000000);

}

#section7 {
    background: linear-gradient(to bottom, #000000, #ffffff, #000000);
margin-bottom: 6rem;
}
#section8 {
    background: linear-gradient(to bottom, #000000, #ffffff, #000000);
}

/* When a section is fully in view, reset its opacity and scale */
.content-section.is-visible {
    opacity: 1;
}

/* Headings within sections */
.content-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #000000; /* Dark gray color */
}

/* Paragraphs within sections */
.content-section p {
    font-size: 1.1rem;
    width: 98vw;
    line-height: 1.8;
    color: #000000; /* Slightly lighter gray */
}


#h2 {
    font-family: combo, oswald;
    font-size: 8.89vw; /* Adjust font size as needed */
    font-weight: bold;
    background: linear-gradient(to right, #000 0%, #000 60%, #fff 78%,  #000000 90%, #000 100%); /* Black and white gradient */
    background-size: 300% 100%; /* This will make the gradient large enough to move */
    -webkit-background-clip: text; /* Clip the background to the text */
    color: transparent; /* Make the text color transparent */
    animation: moveBackground2 14s linear infinite; /* Move the background */
}

#section1 h2 {
    background-size: 500% 100% !important;
    animation: moveBackground2 24s linear infinite !important; 

}


@keyframes moveBackground2 {
    0% {
        background-position: 0 0; /* Start the gradient on the right */
    }
    50% {
        filter: brightness(1.2);
        background-position: -100% 0; /* Move the gradient to the left */

    }
    
    100% {
        
        background-position: 0 0; /* Move the gradient to the left */
    }
}


a {
    pointer-events: all;
    font-size: 1rem;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    color: rgb(62, 27, 0);
    font-weight: bolder;
    z-index: 1001;
}


@media screen and (min-width: 1200px) {
    
    h2, #h2 {
        font-size: 6.3vw !important;
    }
    p {
        width: 64vw !important;
        max-width: 1199px !important;
    }

   #header {
    font-size: 10vw !important;
    margin-left: 30vw !important;
    gap: 30vw !important;
   }

}


#section1 {
    background-size: 400px auto !important;
}


@media screen and (max-width: 1199px) and (max-height: 540px) and (orientation: landscape) {
    
    h2, #h2 {
        font-size: 6.9svh !important;
    }
    p {
        width: 64vw !important;
        max-width: 720px !important;
        font-size: 0.8rem !important;
    }

    header {
        height: 4vw !important;
    }

   #header {
    font-size: 4vw !important;
    margin-left: 32vw !important;
    gap: 32vw !important;
   }
}