@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');


html, body {
overflow-x:hidden ;
overflow-y: hidden;
overflow: hidden;


color: rgb(255, 255, 255);
background-color: #ffff00;;  
font-family: 'Staatliches', cursive;
}



.section-one {

position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
z-index: 2;
pointer-events: none;
left: 34px;
top: 34px;

}


header {
  
  margin-top: 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid #000000;
  
}
.logo-row{
  text-align: center;
}
.logo {
  width: 80px;
  height: 50px;
  text-align: center;
}




section {
height: 50vh;

}
.section-onea {


width: 100%;
height: 110vh;
display: grid;
place-items: center;
scroll-snap-align: center;
user-select: none;
text-align: center;


}


.div-block-85 {
          display: flex;

  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 110px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;

  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background-color: #f1f1f1;
  box-shadow: 10px 10px  #000000;
  margin-top: 10rem;

}



.div-block-85 div{


          
align-items: center;
margin: auto;
width: auto;
margin-top: -1rem;
margin-right: 1rem;
scale: 100%;


}
       
.div-block-85 .frist{
  margin-top: -28px;

}

.space{
          background-color: #fff200;  


          height: 10vh;
}

.section-three {
          height: 68vh;

          }
        .section-three div{
        background-color: #ffffff;
        height: 420px;
          width: 33%;
          float: left;
          padding: 10px;
          color: #000000;
          
          border: 4px solid #000000;  ;
        margin-right: 3px;
        
        }



        .section-four {
          background-color: #043617;
          font-size: 50px;
          padding: 0px;
          color: #fff200;
          height: 140vh;
          
          
          }
          
          
          
          .section-four div{

position: relative;
            float: left;
            
            width: 33.33%;
          
          
          }
          
          
          
          .section-four img{
          width: 450px;
          margin-left:25rem;
          margin-top: -45rem;

          
            }
            
            .section-four h1{
          z-index: -100rem;
          margin-left:5rem;
          line-height: 0.75;
            }
        

        .imge3{

          max-height: 400px;
          max-width:  400px;
        
        }


.p{

font-size: 10px;
font-weight: 10;
position: absolute;
margin-right: 10%;

}




.section-five {
background-color:  rgb(0, 0, 0);

}
.section-six {
background-color:  rgb(0, 0, 0);
height: 100vh;
}

.section-two {
background-color:  rgb(0, 0, 0);
height: 100vh;
}




.dash{

border: 1px solid rgb(255, 255, 255);
width: 190px;
height: 0px;
margin-left: 390px;
margin-top: 3px;

}
.dash p {

margin-left:-200px;
margin-top: -15px;


}


.dash1{

border: 1px solid rgb(255, 255, 255);
width: 190px;
height: 0px;
margin-left: 390px;
margin-top: 7px;
position: absolute;
display: inline-block;

}


.dash2{

border: 1px solid rgb(255, 255, 255);
width: 190px;
height: 0px;
margin-left: 390px;
margin-top: 7px;
position: absolute;

display: inline-block;

}







.contenta{


display: flex;


}
.contenta div{


align-items: center;
margin: auto;
width: auto;
margin-top: 40%;
margin-right: 1.5%;
scale: 200%;

}

.box{
background-color: rgb(238, 34, 34);
width:27vw;
height: 27vw;

border-radius:100%;
}

.circle { 
display: flex; width:27vw;
height: 27vw;
border-radius:100%;
background: #E6E7ED; 
align-items: center; 
justify-content: center
}





.boxdiv{
position: relative;
display: flex;


}


.imge{
max-height: 600px;
max-width: 600px;
}




mark {
margin: 0 -0.1em;
padding: 0.1em 0.1em;
border-radius: 0.2em 0.2em;
background: transparent;
background-image: linear-gradient(
to right,
rgba(162, 0, 255, 0.1),
rgba(58, 47, 212, 0.7) 4%,
rgba(255, 255, 255, 0.3)
);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

.bob{

display: flex;
}

.img{
display: inline-block;
position: absolute;
margin-bottom: -100px;

}


footer {
padding: 10px 50px;
color: #fff200;
color: white;
}


textarea {
resize: none;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
white-space: nowrap;
}


.svg-inline--fa {
vertical-align: -0.200em;
}

.rounded-social-buttons {
text-align: center;
}

.rounded-social-buttons .social-button {
display: inline-block;
position: relative;
cursor: pointer;
width: 3.125rem;
height: 3.125rem;
border: 0.125rem solid transparent;
padding: 0;
text-decoration: none;
text-align: center;
color: #fefefe;
font-size: 1.5625rem;
font-weight: normal;
line-height: 2em;
border-radius: 1.6875rem;
transition: all 0.5s ease;
margin-right: 0.25rem;
margin-bottom: 0.rem;
}

.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

.rounded-social-buttons.fa-facebook-f{
font-size: 25px;
}

.rounded-social-buttons .social-button.facebook {
background-color: #fff200;

}


.progress-bar-container{
display: flex;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%) ;
width: 100%;
height: 100%;
background-color: #043617;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 5;

}
#progress-bar{

width: 30%;
margin-top: 0.5%;
height: 2%;

}
label{

color: #fefefe;
font-size: 2rem;
}

#canvas-container{
pointer-events: none;
position: absolute;
top: 0;
left: 0;
outline: none;
z-index: 0;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background:#000;
background: radial-gradient(circle at center center,#171717 0,#050505 58%);
}


#canvas-container-details{
pointer-events: none;
position: absolute;
top: 0;
left: 0;
outline: none;
z-index: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
pointer-events: all;
overflow: hidden;
}



.scroll-side{
          font-family: 'Staatliches', cursive;
          color: #ffffff;
font-size: 70px;
white-space: nowrap;



}


* {
box-sizing: border-box;
}

.column {
float: right;
width: 27.33%;
padding: 20px;
white-space: nowrap;
z-index: -10;

top: 0;
left: 0;
right: 0;


}

/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
justify-content: space-between;


}
.imge3{

max-height: 400px;
max-width:  400px;

}



.container {
padding: 100px 20px 0;
max-width: 960px;
margin: 0 auto;
}
.section-onea h1 {
          font-family: 'Staatliches', cursive;
    
          color: #000000;
margin: 0;
text-align: center;
font-size: 120px;
overflow: hidden;
line-height: 1;
animation: reveal 5.5s cubic-bezier(0.80, 0, 0.175, 1) 0.5s;

}
.black{
height:20vh;
  background-color: #000000;
}

.showcase{

  height: 20vh;
  color: #000000;
  white-space: nowrap;
  
  }
  .showcase h1 {
font-size: 80px;
    color: #bb1d1d;
  }
  
  .short{
    height: 2vh;
    background-color: #000000;  
  
  }
  .right{
    font-size: 100px;
  }



  .text-seven{
    margin: 0;
  margin-left: 20rem;
  font-size:180px;
  color: #ffffff41;
  
  line-height: 0.75;
  
  }
  

  
  .section-seven {
    background-color: #043617;

    color: #000000;
  height: 60vh;
  font-size: 60px;

  }
  
  
  
  .section-seven  p{
margin-top: 0.10rem;

-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px;
  }
  
  
 
  
  .section-seven img{
  

    float: right;
  
  width: 220px;

  }



.section-seven div{

display: flex;
gap: 4rem;
}

@keyframes reveal {
0% {
transform: translate(0,50%);
}
100% {
transform: translate(0,0);
}
}


.section-nine{
color: #f1f1f1;
  height: 100vh;
  background-color: #000000;
;

}


.section-nine img {
margin-left: 50rem;
margin-top: -35rem;
width: 30%;
box-shadow: 9px 4px  9px#000000;

}

.section-nine p{

  -webkit-text-fill-color: transparent;
   -webkit-text-stroke: 1px;
   margin: 0;
 margin-left: 5rem;
 margin-top: 0rem;

 font-size:160px;
 color: #ffffff;
 
 line-height: 0.75;
 
 }
 
.section-ten {
  background-color: #0b0a0a;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
  height: 80vh;
  }
  

      .section-ten p{

        -webkit-text-fill-color: transparent;
         -webkit-text-stroke: 1px;
         margin: 0;
       margin-left: 40rem;
       font-size:180px;
       color: #ffffff;
       
       line-height: 0.90;
       
       }
       .line{
        height:1vh;
        width: 1000vh;
    background-color: #ffffff6d;
    margin-top: -10.10rem;
       }
       .line2{
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px;
        height:1vh;
        width: 1000vh;
    background-color: #ffffffcb;
    margin-top: -10.10rem;
    
       }



.section-five p{
font-size: 140%;
font-weight: 100;
padding-left: 0.5em;
animation: move-right-to-left 7s linear infinite;
white-space: nowrap;

z-index: 10px;

}



@keyframes slide-left {
from {
-webkit-transform: translateX(0);
        transform: translateX(0);
}
to {
-webkit-transform: translateX(-10%);
        transform: translateX(-100%);
}
}




@keyframes move-right-to-left {
from {
    transform: translateX(0);
}
to {
    transform: translateX(-90%);
}
}

@media screen and (max-width: 600px) {



html, body {

overflow-x:hidden ;
overflow-y: hidden;
overflow: hidden;

pointer-events: none;

color: rgb(255, 255, 255);

font-family: 'Staatliches', cursive;
}


header {
  margin-top: 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid #b5b5b5;
}
.logo-row{
  text-align: center;
}
.logo {
  width: 80px;
  height: 40px;
  text-align: center;
}
.section-onea h1 {
  font-family: 'Staatliches', cursive;

  color: #000000;
margin: 0;
text-align: center;
font-size: 80px;
overflow: hidden;
line-height: 1;
animation: reveal 5.5s cubic-bezier(0.80, 0, 0.175, 1) 0.5s;

}

.progress-bar-container{
  display: flex;
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% , -50%) ;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 5;
  
  }
#progress-bar{

  width: 60%;
  margin-top:4%;
  height: 2%;
  
  }
  .imge3{

    width: 300px;
  }

.scroll-side{
color: #ffffff;
font-size: 70px;
white-space: nowrap;



}



.section-one {

position: fixed;
top: 0;
left: 0;
right: 0;

z-index: 2;
pointer-events: none;

}



.section-onea {

width: 100%;
height: 100vh;
display: grid;
place-items: center;
scroll-snap-align: center;
user-select: none;
text-align: center;
}




.div-block-85 {

margin-left: auto;
margin-right: auto;
width: 95%;
height: 97px;
border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;

  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
background-color: #f1f1f1;
box-shadow: 4px 4px  #000000;
margin-top: 8rem;

}

.div-block-85 div{
  display: inline-block; 
  margin:-1rem;
  margin-top: -1rem;
  margin-right: -1rem;

  scale: 70%;

}
        
.div-block-85 .frist{
  margin-top: -24px;

}



.section-three {
  height: 190vh;


}


.section-three div{

  width: 60%;
  height: 28rem;
  margin-bottom: -100rem;  
  margin: 5;
  padding: 1em;
 position: relative;
 margin-left: 5rem;


}

.section-three img{

  width: 180%;
  margin-left: -4rem;
  margin-top: 3rem;


}
  


.section-four {
  font-size: 30px;
  padding: 0px;
  color: #fff200;
  height: 90vh;
  
  
  }

  
  
  
  .section-four div{
    float: left;
    width: 40%;
  
  
  }
  
  
  .section-four h1{
   padding: 0px;
   margin-top: 1rem;

  margin-left: -0rem;
  line-height: -0;

  
  }

  
.section-four img{
width: 280px;
margin-top: -2rem;
margin-left: -3rem;
position: absolute;

}







.imge{
max-height: 300px;
max-width: 300px;
}

.boxdiv{

size: auto;

}

.showcase{

  height:20vh;
  background-color: #fff200;  
  color: #000000;
  white-space: nowrap;
  margin-right: -300rem;
  }
  .short{
    height: 1vh;
    background-color: #000000;  

  }

.box{
background-color: rgb(238, 34, 34);
height: 80vw;
width:  80vw;

border-radius:100%;

}

.circle{

background-color: rgb(248, 244, 244);
height: 80vw;
width:  80vw;

border-radius:100%;

}
footer{

position: absolute;
margin-left: 40px;
margin-bottom: -50px;

}
.scroll-text{
color: #bb1d1d;
font-size:95px;
word-spacing: 6em;
margin-left: -1px;
animation: reveal 9.5s cubic-bezier(0.70, 0, 0.175, 1) 0.5s;


}
.section-five p{
font-size: 90%;
font-weight: 100;
padding-left: 0.5em;
animation: move-right-to-left 7s linear infinite;
white-space: nowrap;

z-index: 10px;

}



@keyframes move-right-to-left {
from {
    transform: translateX(0);
}
to {
    transform: translateX(-90%);
}
}


.boxdiv{
position: relative;
display: flex;


}

.black{
  height:3vh;
    background-color: #000000;
  }
  .text-seven{
    margin: 0;
  margin-left: 1rem;
  font-size: 90px;
  color: #ffffff41;
  
  line-height: 1.80;
  
  }
  
  .section-seven {
    height: 50vh;
    font-size: 50px;

  
  }
  
  .section-seven img{
  

  width: 160px;
  }


  .section-seven h1{
    font-size: 20px;
    z-index: 1px;
    position: absolute;
    }

.section-seven div{
display: flex;
gap: 2rem;
}
  

.section-nine{

  height: 100vh;
  ;

}

.section-nine p{
  margin: 0;
margin-left: 0rem;
font-size:135px;
color: #ffffff;

line-height: 0.75;

}



.section-nine img {

position: absolute;
margin-top: -30rem;
margin-left: 1rem;
width: 70%;  
  }
  .line{
    display:none

   }
   .line2{
   display:none

   }

  .section-ten {
    background-color: #080707;
    border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
    height: 80vh;
    }

    

    .section-ten p{

      -webkit-text-fill-color: transparent;
       -webkit-text-stroke: 1px;
       margin: 0;
     margin-left: 0.50rem;
     font-size:150px;
     color: #ffffff;
     
     line-height: 1.30;
     
     }
  }
     


        
      
  
  @media only screen and (min-width: 374px) and  (max-width: 375px)  {
     
      

     .section-three{

      height: 170vh;
     }
     
.section-four{

  height:75vh ;
}

    }
      @media only screen and (min-width: 389px) and  (max-width: 390px)  {
     


.section-three{

  height:170vh ;
}

.section-four{

  height:70vh ;
}
      }
      @media only screen and (min-width: 413px) and  (max-width:414px)  {
     
        
        .section-three{
        
          height:190vh ;
        }
        
        .section-four{
        
          height:80vh ;
        }
 
       
    }