.hero{
position:absolute;
height:40vh;
border:2px solid blue;
z-index:2;
top:0;
  width:100vw;
}

.boxdiv{

position:absolute;


z-index:10;
height:74.2vh;
  height:14.2vh;
       aspect-ratio:1/1.41;
  max-height: 700px;
}

  #yValueDisplay {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: bold;
    color: black;
    z-index:4;
  }
.arc {
  position:relative;
    width: 100dvw;
    height: auto;
    top: 30px;
    left: 0;
    transform-origin: 0 100%;
   
border: 1px solid blue;
}


.biggerdiv1{

position:relative;
background:#acd084;
height:100svh;
width:100%;
opacity:1;
}


 .biggerdiv{
position:relative;

height:75vh;
  height:25vh;
width:100%;
border-radius:1.7vw;
border-radius:0vw;
border:2px solid blue;

opacity:.2;

}

.greenmains{
position:relative;background:#acd084;
height:100svh;
width:100%;
border:2px solid blue;
 

}
.mains{
   top: calc(6vw + 30px);
border: 0px solid black;
position:absolute;
  height: calc(100% - 6vw - 20px);
width:100%;
background-color:white;
background:#fef7e6;

z-index:2;
}

.template{
position:absolute;
font-size: 40px;

}


.firstboxdiv{
display:flex;
justify-content:center;
align-items:center;
}

@keyframes wave {
0%{
transform: translateX(0vw);
}
100%{
transform:translateX(40vw);
}
}


.wave{

animation:wave linear 3s infinite;
}


.svgcurve0{
position:absolute;
left:-80vw;
}



.pin-windmill-svg
{
border:2px solid black;
position:absolute;
top:0%;
left:50%;
width:25%;
height:25%;
z-index:10;
}

.animationdiv{
display:flex;
justify-content:center;
align-items:center;
position:absolute;
height:51vh;
width:18vw;
z-index:10;
overflow:hidden;
}

.boxdiv1{
background-color:blue;
opacity:.2;
height:15%;
width:100%;
border-radius:1.7vw;
border:1px solid blue;
}

.boxdiv2{
height:85%;
width:100%;
border-radius:1.7vw;
display:flex;
justify-content:center;
align-items:center;
z-index:3;
border:1px solid blue;
}


.animationdiv2{
display:flex;
top:5%;
position:absolute;
height:95%;
width:100%;
z-index:-1;
overflow:hidden;
border:0px solid red;
}


html,body{
overscroll-behavior-x: none;
overflow-x: none; 
  overscroll-behavior-x: contain; 
overflow-x: hidden; 
}

*{


}






.gallery{


position:relative;
width:100%;
height: calc(100% - 30px);
height:100%;


}


.link p
{

font-size:40px;
font-weight:500;
text-transform: uppercase;
color: #000;
}

.link  span{

padding: 0 0px;
font-size: 10px;

}


.links{

display:flex;
gap: 2em;
}

nav{top:0;}

footer{bottom:0;}









.child{
position:absolute;
height:50px;
width:50px;
background-color:white;

}

.link
{
position:absolute;
}



#id1{
}






.first
{ 
display:flex;
flex-direction: column; 
text-align: center;
position:absolute;

height:20vh;
width:68.90625vw;
border:2px solid red;

text-decoration:none;
z-index:3;
}

.second{


border:1px solid black;
  }


.allBulles{
position:absolute;
top:35%;
left:0;
}
.secondtextwrapper{
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
display:flex;
justify-content:center;
align-items:center;
}
.secondtext{
 
   
font-size:50px;
}


.gallery_fixed{

position:fixed;
width:100vw;
height:100vh;
z-index:1;
}

.svgcurve{
height:1px;
width:1px;
background-color:blue;
position:absolute;
top:50%;
left:0;
}

.svgcurve_{
height:3px;
width:3px;
background-color:black;
position:absolute;
top:3.10%;
left:0px;
}

.svgcurve_{
height:3px;
width:3px;
background-color:black;
position:absolute;
top:0%;
left:0px;
}

.svgcurve_1{
height:5px;
width:5px;
background-color:black;
position:absolute;
 top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.svgcurve_2{
height:5px;
width:5px;
background-color:black;
position:absolute;
top:0;
left:0;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
 
}





.svgdiv{

height:8.65vh;
width:100%;
background:#acd084;
opacity:.7
}
 
.circle{
position:absolute;
display:none;
display:block;
left:50%;
top:50%;
background:#ffd372;
border-radius: 50%;
height: 30px; 
width: 30px;
z-index:-1;

}

.textintro{
z-index:4;
position:absolute;
top:50%;
width:100%;
display:flex;
justify-content:center;
align-items:center;
border:1px solid blue;
h1{
 
    font-size: 6vw;  
}
h3{

}
}

.firsttext1{
top:0%;
position:relative;
font-size:40px;
text-align: center;
border:1px solid blue;
}

.firsttext2{
font-size:40px;
position:relative;
text-align: center;
border:1px solid blue;
}

.intro{

height:100%;
width:100%;
display:flex;

justify-content:center;


}






.lottieinside1{
border:1px solid blue;
position:fixed;
top:0%;
width:50%;
height:100%;
z-index:1;
}

.lottie1{
position:absolute;
top:5%;
width:75%;
}
.fleur{
transform:scale(.70);
position:absolute;
top:-25%;
left:6%;

}


.lottie2{
top:0%;
position:relative;
width:500px;
height:400px;
}
.lottie3{

position:relative;
width:550px;
height:450px;

}

.lottie4{
border:1px solid blue;
top: 3.5%;
left:60%;
position:fixed;
width:60%;
height:850px;
}

.animationdiv3{
display:flex;
flex-direction:column;
width:100%;
height:100%;
}
.div3div2{
flex 1;
height:50%;
border:1px solid blue;
}

<div class="textintro">
<h2>Yerba</h2>
<h1>INFUSED OF BIO ENERGY</h1>
<h2>Mate</h2>
</div>