@font-face {
    font-family:display ;
    src: url(display.ttf);
}

@font-face {
    font-family:head ;
    src: url( Dirtyline36Daysoftype2022-Reg.ttf);
}


@font-face {
    font-family:stretchy ;
    src: url(STRRETCH\ SANS\ 400.otf);
}

@font-face {
    font-family:inter ;
    src: url(Inter-Medium.ttf);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html , body{
    height: 100%;
    width: 100%;
    font-family: display;
    overflow-x: hidden;
    background-color: #f0f0f0;
    overflow-x: hidden;
    
}


/* svg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

path{
    fill: none;
    stroke-width: 50;
    stroke-linecap: round;
    stroke-linejoin: round;

} */




#pointer{
    height: 2.5vh;
    width:2.5vh;
    border-radius: 50%;
    position: fixed;
    z-index: 2;
    background-color: black;
    display: flex;
    align-self: center;
    flex-wrap: wrap;
    pointer-events: none;

    
}



#pointer i{
    color: white;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top:50%;
    opacity:0;

}


#loader{
    height: 100vh;
    width: 100vw;
    background-color: black;
    color: #fff;
    font-size: 2.5vw;
    text-align: center;
    position: fixed;
    display: flex;
    z-index: 5;
    
}

#loader h1{
    position: relative;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        display: flex;
        align-items: center;
}

#innerhello{
    height: 5.5vw;
    overflow: hidden;
    /* background-color: #CCEF92; */
    display: inline-block;
}


#innerhello span{
    position: relative;
    /* color: red; */
    animation: animation 2.8s ease infinite;
}

@keyframes animation{
    0%,
    100% {
        top: 0;
    }
    20%{
        top: 0;
    }
    25%{
        top: -6vw;
    }
    45%{
        top: -6vw;
    }
    50%{
        top: -12vw;
    }
    70%{
        top: -12vw;

    }
    75%{
        top: -18vw;
    }
    95%{
        top: -18vw;
    }

}


#loader h2{
    font-size: 1.2vw;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 90%;
    left: 50%;
    font-weight: 200;
    color: #6a6a6a;
    
}

.page{
    width: 100vw;
    min-height: 100vh;
    margin:0;
    
}

#page1 #wrapper1 h1{
    font-size: 10vw;
    font-family:head;
}

/* @media (max-width: 479px) {
    #page1 #wrapper1 h1{
       font-size: 1px;
       
       font-family:head;
       /* color: red; */
  

/* #page1{
   background-color: #ebebeb;
} */


#page1 #nav{
    height: 13vh;
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    border-bottom: 2px solid rgb(176, 176, 176);
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    z-index: 200;
    
}

#nav #nleft{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* margin: 0 5%; */
}

#nav #nright{
    /* padding: 0 5%; */
    display: inline-block;
    /* background-color: blue; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 33%;
}


#nav #nright a{
    color: black;
    font-size: 1.2vw;
    text-decoration: none;
    transition: 0.2s;
}

#nright a:hover{
    background-color: #CCEF92;
    transition: 0.2s;
    border-radius: 50px;
    padding: 5%;
    font-weight: 200;
}

#nav #nright i{
    
    color: black;
    font-size: 1.5vw;
    text-decoration: none;
    
}



/* .overlay{
    position: absolute;
    top: 0%;
    left: 0%;
    color: rgb(255, 255, 255);
    background-color: black;
    clip-path: circle(100px at var(--x, 50%) var(--y, 50%));
    transition: clip-path 150ms;
    opacity: 0;
    z-index: 400;
} */




#navmenu{
    color: black;
    background-color: #CCEF92;
    height: 100vh;
    font-size: 4vw;
    /* font-stretch: 600%; */
    width: 40vw;
    position: fixed;
    top: 0%;
    left: 100%;
    text-align: right;
    display: flex;
    flex-direction: column;
    padding-top: 7%;
    z-index: 600;
}

#navmenu span{
    text-align: left;
    display: inline-block;
}

#navmenu span h6{
    font-weight: 100;
    text-align: left;

}

#navmenu #close{
    font-size: 6vh;
    position: absolute;
    right: 10%;
    top: 3.5%;
}

#navmenu a{
    font-weight: 100;
    border-bottom: solid 1px rgb(73, 73, 73) ;
    padding-right: 8.5%;
    padding-left: 4.5%;


    margin: 1%;
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#navfoot{
    font-size: 1vw;
    color: #000000;
    display: flex;
    flex-wrap: wrap;
    padding-right: 10.5%;
    padding-left: 4.5%;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: 14%;
}

#navmenu2{
    display: none;
}





#page1 #wrap{
    /* background-color: red; */
    margin: 4.5% 5%;
    width: 90%;
    position: relative;
    display: flex;
}




#wrapper1{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    
    
}


#wrapper1 h2{
    width: 60%;
    margin-top: 0.8%;
    font-weight: 300;
    font-size: 2.5vh;
    color: #1f1f1f;
    text-align: center;
    
}

/* #wrapper1 img{
    height: 68vh;
    position: absolute;
    top: 24%;
    z-index: -1;
    left: 90%;
    transform: rotate(10deg);
} */

#imgwrap{
    height: 70vh;
   display: flex;
   width: 100vw;
   flex-wrap: nowrap;
   margin-top: 4%;
   animation-name: infinitescroll;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

} 
#imgwrap img{
    display: inline-block;
    padding: 0.8%;
 
 } 
#i1{
    height: 100%;
}

 #i2{
    height: 100%;
 }

 #i3{
    height: 65%;
 }

 #i4{
    height: 33%;
    margin-top: 3%;
    
 }

 #i5{
    height: 100%;
    
 }

 #i6{
    height: 50%;
    
 }

#iiwrap{
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    width: 20.5%;
    /* background-color: red; */
    padding: 0.7%;
    margin-right: 1.8%;

}


.pill{
    border-radius: 50px;
    font-size: 3.5vh;
    padding: 15px 25px;
    margin-right:10px;
    border: 2px solid black;
}

#pill1{
    /* background-color: rgb(181, 255, 70);      background: linear-gradient(110deg,   #2b1de8,#1ddde8, #dd00f3, #dd00f3, #490079);
  
       background-size: 200% 200%;
     
        -webkit-animation: rainbow 10s ease infinite;
             -z-animation: rainbow 10s ease infinite;
             -o-animation: rainbow 10s ease infinite;
                animation: rainbow 10s ease infinite; */
    background-color: #CCEF92;
                
     
       }
      
     
     @-webkit-keyframes rainbow {
         0%{background-position:0% 82%}
         50%{background-position:100% 19%}
         100%{background-position:0% 82%}
     }
     @-moz-keyframes rainbow {
         0%{background-position:0% 82%}
         50%{background-position:100% 19%}
         100%{background-position:0% 82%}
     }
     @-o-keyframes rainbow {
         0%{background-position:0% 82%}
         50%{background-position:100% 19%}
         100%{background-position:0% 82%}
     }
     @keyframes rainbow { 
         0%{background-position:0% 82%}
         50%{background-position:100% 19%}
       100%{background-position:0% 82%}  
     
     }


#pill2{
    background-color: rgb(169, 141, 255);
}

#spanh2{
    margin-top: 5.5%;
}



#wrapper{
    width: 100%;
    text-align: center;
    /* border-top: #7f7f7f 1px solid; */
    margin: 8% 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    /* background-color: black; */

}

#wrapper2{
    height: 100%;
    /* margin-left: 5%; */
    /* background-color: red; */
    width:40%;
    /* z-index: 500; */
    
}

#wrapper video{
    width: 50%;
    height: 70vh;
    background-color: rgb(174, 137, 174)
}

.elem{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgb(212, 212, 212);
    font-size: 2.5vh;
    padding: 2% 0;
    position: relative;
    height: 12vh;
    overflow: hidden;
    z-index: 500;

    /* background-color: red; */
}

.elem a{
    color: black;
    text-decoration: none;
    z-index: 100;
}

#wrapper2 h1{
    color: #1f1f1f;
    margin-bottom: 8%;
    text-align: left;
    /* margin-left: 3%; */

}

.icon{
    display:flex;
    align-items: center;
    /* justify-content: space-between; */
    width: 35%;
    /* background-color: red; */
    margin-left: 3%;
}

.elem h2{
    font-weight: 300;
    
}

.elem i{
    color: black;
    font-size: 3vh;
    margin-right: 15%;
   
    
}

.elem .overlay2{
    width: 100%;
    height: 12vh;
    z-index: -2;
    background-color: #CCEF92;
    position: absolute;
    height: 12vh;
    top: -110%;
    transition: ease-in  0.3s;
    border-top: 1px solid rgb(185, 185, 185);

}

.elem:hover .overlay2{
    top:0%;
}




#page2{
    height: 100vh;
    width: 100vw;
    position: relative;
    border-top: 1px solid rgb(153, 153, 153) ;
}

#page2 h1{
    font-size: 12vh;
    /* position: absolute;
    transform: translateX(-50%);
    top: 10%;
    left: 50%; */
    font-family: head;
    text-align: center;
    margin-top: 5%;
    /* margin-top: 5%; */
}




#page2 h2{
    font-size: 1.9vh;
    font-weight: 200;
    color: #6a6a6a;
    text-align: center;

}

@keyframes infinitescroll{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-100%);
    }
}

#loop2 img{
    height: 65vh;
    /* position: relative;
    transform: translateX(-50%);
    top: -50%;
    left: 50%; */
}

#loop2{
    display: flex;
    
    height: 65vh;
  
    animation-name: infinitescroll;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite; 
}
    /* padding: -10% -10%;
    position: absolute;
    bottom: 0%;
    overflow-y: hidden;
  
}




#page3{
    min-height: 100vh;
    width: 100vw;
    /* background-color: black;} */


#wrapper3{
    margin:2% 5%;
    display: flex;
    flex-wrap: wrap;
    /* background-color: red; */
    position: relative;
}

.tsh{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 1%;
    flex-wrap: wrap;
}
.tsh img{
    width: 24%;
    border: 1px solid rgb(186, 186, 186);
    border-radius: 10px;
}


#page4{
    min-height: 100vh;
    width: 100vw;
    border-top: 1px solid rgb(153, 153, 153) ;

}

#page4 h2{
    font-size: 1.9vh;
    font-weight: 200;
    color: #6a6a6a;
    text-align: center;
}

#page4 h1{
    font-size: 12vh;
    font-family: head;
    text-align: center;
    margin-top: 5%;
}

.line{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

#wrapper4{
    margin: 7.5% 5%;
    /* background-color: #1f1f1f; */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.img-cover{
    width: 29vw;
    /* background-color: red; */
    position: relative;
    margin: 2.5% 0;
}

.img-cover img{
    /* height: 100%; */
    width: 100%;
    object-fit: cover;
}

#more{
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    /* flex-wrap: wrap; */
    min-width: 650vw;
    padding: 1%;
    font-size: 7vh;
    font-family: stretchy;
    font-stretch: 200%;
    animation-name: infinitescroll;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    background-color: #CCEF92;
    color: #1f1f1f;
}




#page5{
    height: 100vh;
    width:100vw ;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #ffffff;
    border-top: 1px solid rgb(153, 153, 153) ;

}

#page5 h1{
    /* font-size: 12vh; */
    font-family: head;
    text-align: center;
    margin-top: 4%;
}

#page5 h2{
    font-size: 1.9vh;
    font-weight: 200;
    color: #5f5f5f;
    text-align: center;
    transition: 0.3s;

}

#right5{
    width: 100vw;
    height: 65vh;
    /* color: #aaaaaa; */
    color: #8b8b8b;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    /* padding: 1%; */
    margin-top: 2%;
}

#right5 .step{
    width: 31%;
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center; 
    background-color:#141414;
    padding-top: 2%;
    border-radius: 5%;
    position: relative;
}


/* .no{
    color: #414141;
    margin-bottom: 2%;
    font-size: 9vh;
} */

#right5 .step h1{
    font-family:display;
    font-size: 7vh;
    z-index: 15;
    transition: 0.3s;

}

#right5 .step h1{
   margin-top: 28%;
    font-family:display;
    font-size: 6.5vh;

}


#right5 .step h2{
    padding: 12%;
    padding-top: 4.5%;
    z-index: 15;
    font-size: 90%;
}

.no{
    color:#1c1c1c;
    margin-bottom: 2%;
    font-size: 13vh;
    font-weight: 600;
   text-align: left;
   position: absolute;
   transform: translate(-50%,-50%);
   left: 50%;
    top:20%;
    z-index: 10;
    transition: 0.2s;
}

#right5 .step:hover{
    background-color: #111111;
   color: #575757;
   transition: 0.3s;
}

#right5 .step:hover .no{
    color: #656565;
  transition: 0.3s;
  font-size: 13.4vh;
}

#right5 .step:hover h1{
    color: #c1c1c1;
    transition: 0.3s;
    font-size: 7.2vh;

 }

 #right5 .step:hover h2{
    color: #b2b2b2;
    transition: 0.3s;
    font-weight: 400;
    
 }

#page6{
    min-height: 100vh;
    width: 100vw;

}

#page6 h1{
    font-size: 12vh;
    font-family: head;
    text-align: center;
    margin-top: 4%;
}

#wrapper6{
    min-height: 60vh;
    /* background-color: #CCEF92; */
    width: 100vw;
    margin-top: 5%;
    position: relative;
    
   
}

#line1{
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 60vh;

}

#wrapper6 #line1 #l1{
    height: 50%;
}

#wrapper6 #line1 #l2{
    height: 50%;
}

#wrapper6 #line1 #l3{
    margin-top: 2%;
    height: 75%;
}

#line1 #l4{
    /* filter: invert(1); */
    height:50%;

}

#line2{
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 60vh;

}

#line2 img{
    
    height:50%;
}

#line2 #l4{
    filter: invert(1);
    height:50%;

}


#line2 #l5{
    scale: 1.6;

}

#line2 #l6{
    scale:0.8;

}

#headpage5{
    font-size: 12vh;
}



#page5{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    height: 130vh;
}


@media screen and (max-width:720px) {
    #loader h1{
        position: absolute;
        transform: translate(-50%,-50%);
        top: 40%;
        left: 50%;
        font-size: 6vh;
        width: 100vw;
    }

    #loader h2{
        font-size: 2.7vh;
        
    }

    #page1 #nav{
        height: 7vh;
    }

    #nav #nright a{
        display: none;
    }

    #nav #nleft{
        font-size: 1.2vh;
    }

    #nav #nright{
        display: flex;
       justify-content: flex-end;
    }

    #nav #nright i{
        font-size: 2vh;
        
    }

    #wrapper1{
        width: 100%;
        align-items: center;
        position: absolute;
        transform: translateX(-50%);
        left: 55%;
    }

    #wrap #wrapper1 h1{
        font-size: 8.8vh;
        text-align: center;
        margin: 5% ;
        margin-top: 10%;
        margin-bottom: .1%;
        margin-left: 6%;
    }

    #wrap #wrapper1 h2{
        /* margin: 5% ; */
        font-weight: 300;
        font-size: 1.3vh;
        text-align: center;
        width: 84%;
        margin-top: 1%;
        margin-bottom: 5%;
        color: #5a5a5a;
        
    }

    #page1 #wrap{
        /* background-color: red; */
        margin: 8.5% 0%  ;
        display: flex;
        flex-wrap: wrap;
        margin-top: 10%;
    }


    #imgwrap{
        height: 50vh;
       display: flex;
       width: 220vw;
       flex-wrap: nowrap;
       margin-top: 4%;
       animation-name: infinitescroll;
        animation-duration: 60s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    
    } 
    #imgwrap img{
        display: inline-block;
        padding: 0.8%;
     
     } 
    #i1{
        height: 100%;
        padding-left: 0%;
    }
    
     #i2{
        height: 100%;
     }
    
     #i3{
        height: 65%;
        
     }
    
     #i4{
        height: 33%;
        margin-top: 3%;
        
     }
    
     #i5{
        height: 100%;
        
     }
    
     #i6{
        height: 50%;
        
     }

     #iiwrap{
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        width: 30.5%;
        /* background-color: red; */
        /* padding: 0.7%; */
        margin-right: 0%;
        padding-right: 0%;
    
    }



    .pill{
        border-radius: 50px;
        font-size: 90%;
        padding: 2% 4%;
        margin-right:2%;
        text-align: center;

    }


    #spanh2{
        margin: 0 5%;
        margin-top: 8.5%;

        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .overlay{
        display: none;
    }


    #wrapper2{
        width: 100%;
        margin-top: 5%;
        display: none;
    }

    #wrapper2 h1{
        margin-top: 5%;
        margin-left: 13%;


    }

    .elem{
        width: 100%;
        font-size: 2vh;
        height: 6vh;
        
    }

    .elem i{
        margin-left: 30%;

    }

    .overlay2{
       display: none;
    }

    #pointer{
        display: none;
    }


    #page2 h1{
        font-size: 9vh;
        text-align: center;
        margin-top: 10%;
       
    }

    #loop2 img{
        height: 35vh;
        margin-left: -5%;
        /* position: relative;
        transform: translateX(-50%);
        top: -50%;
        left: 50%; */
    }

    #page2{
        height: 65vh;
        
    }

    #loop2{
        display: flex;
        
        height: 40vh;
        margin-top:5%;
        /* position: absolute;
        bottom: 15%; */
        /* overflow-y: hidden; */
      
    }

    .tsh img{
        width: 46%;
        margin: 1% 0;
    }

    #navmenu{
        display: none;
    }

    #navmenu2{
        
        width: 100vw;
        height: 100vh;
        color: black;
        background-color: #CCEF92;
        font-size: 6vh;
        position: fixed;
        top: 0%;
        left: 100%;
        text-align: right;
        display: flex;
        flex-direction: column;
        padding-top: 30%;
        z-index: 600;
    }

    #navmenu2 i{
        font-size: 6vh;
        position: absolute;
        right: 6%;
        top: 1.5%;
    }
    
    #navmenu2 a{
        font-weight: 100;
        border-bottom: solid 1px rgb(73, 73, 73) ;
        padding: 3.5% ;
        padding-right: 8.5%;

        text-decoration: none;
        color: black;
    }

    #page4 h1{
        font-size: 9vh;
        margin-top: 15%;
    }

    #page4 h2{
        font-size: 1.4vh;
        /* margin-top: 15%; */
    }


    #wrapper4{
       
    margin: 1% 1%;
    margin-top: 10%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    }


    .line{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        /* background-color: red; */
        width: 32.6%;
        margin-bottom: 20%;
    }
   
    .img-cover{
        width: 100%;
        /* background-color: red; */
        position: relative;
        margin: 0.2% 0;
    }
    
    .img-cover img{
        /* height: 100%; */
        width: 100%;
        object-fit: cover;
    }
    

    #more{
        font-size: 4vh;
    }
    


    #loader h1{
        display: none;
    }
    
    

    #loader h2{
        font-size: 4vw;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        font-weight: 200;
        color: #6a6a6a;
        
    }



    /* page5 */


    #page5{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        height: 200vh;
    }

    #page5 h1{
        /* display: none; */
    }

    #headpage5{
        padding-top: 10%;
        font-size: 9vh;
        /* color: red; */
    }
   
    #headsmall{
        display: none;
    }
    
    #page5 h2{
        font-size: 1.6vh;
        font-weight: 200;
        color: #5f5f5f;
        text-align: center;
        transition: 0.3s;
    
    }
    
    #right5{
        
        width: 100vw;
        height: 165vh;
        /* background-color: red;  */
        color: #8b8b8b;
        gap: 2.5% ;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        
    }
    
    #right5 .step{
        width: 90%;
        height: 60vh;
        display: flex;
        flex-direction: column;
        align-items: center; 
        background-color:#141414;
        padding-top: 2%;
        border-radius: 5%;
        position: relative;
    }
    

    
    #right5 .step h1{
       margin-top: 34%;
        font-family:display;
        font-size: 5vh;
        z-index: 15;
        transition: 0.3s;
    
    }
    
    
    #right5 .step h2{
        padding: 12%;
        padding-top: 4.5%;
        z-index: 15;
        font-size: 90%;
    }
    
    .no{
        color:#1c1c1c;
        margin-bottom: 2%;
        font-size: 13vh;
        font-weight: 600;
       text-align: left;
       position: absolute;
       transform: translate(-50%,-50%);
       left: 50%;
        top:20%;
        z-index: 10;
        transition: 0.2s;
    }
    
    #right5 .step:hover{
        background-color: #111111;
       color: #575757;
       transition: 0.3s;
    }
    
    #right5 .step:hover .no{
        color: #656565;
      transition: 0.3s;
      font-size: 13.4vh;
    }
    
    #right5 .step:hover h1{
        color: #c1c1c1;
        transition: 0.3s;
        font-size: 7.2vh;
    
     }
    
     #right5 .step:hover h2{
        color: #b2b2b2;
        transition: 0.3s;
        font-weight: 400;
        
     }
    
   

}