*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: Matter;
}
body,html{
    width: 100%;
    height: 100%;
}
.main{
    background-color: #161616;
  user-select: none;
}
.page1{
    width: 100vw;
    height: 100vh;
   position: relative;
   background-color: white;
   overflow: hidden;
}

.nav{
    width:90vw ;
    /* background-color: aqua; */
    height:8vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
margin: auto;
}
.nav img{
    width: 10vw;
}
.right a{
    margin: 20px;
    color: black;
    text-decoration: none;
    font-size: 1.3rem;
    align-items:;

}
.right{
    display: flex;
    align-items: center;
  justify-content: center;
  width: 30%;

  gap: 2vw;
    /* justify-content: center; */
}
.right i{
    font-size: 2.5vw;
   
}
.part-text{
width: 100%;
height: 80%;
/* background-color: rebeccapurple; */
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
padding-left:  13vw;
line-height: 9vw;

}
.part-text h1{
    font-size: 9vw;
    font-weight: 300;
    font-family: Matter;
    letter-spacing: -0.4vw;
}

.page2{
  width: 100vw;
  height: 100vh;
position: relative;
background-color: white;
}
.page2 video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
}

.img{
/* background-color: red; */
display: flex;
gap: 2vw;
}
.img video{
    width: 13vw;
    border-radius: 50%;
    height: 19vh;
    object-fit: cover;
}
.page3{
    width: 100%;
    height: 100vh;
   background-color: white;
}
.page3-flex{
    width: 100%;
    height: 100%;
    /* background-color: red; */
    display: flex;
    justify-content: space-between;
}
.lefty{
    width: 50%;
    /* background-color: aqua; */
    height: 100%;
    position: relative;
    align-items:center;
    justify-content:end ;
    display: flex;
    padding-right: 5vw;
}
.lefty video{
    width: 70%;
    height: 70%;
    position: absolute;

}
.righty{
    width: 50%;
    /* background-color: rgb(255, 0, 0); */
    height: 100%;
   
    justify-content:center ;
    display: flex;
    /* padding-left: 5vw; */
    flex-direction: column;
}
.sizwe{
    /* background-color: rebeccapurple; */
    display: flex;
    flex-direction: column;
    width: 70%;
    font-size: 2.1vw;
    gap: 3.5vw;
}

.sizwe button{
    padding: 7vw 5vw;
    border-radius: 100px;
    font-size: 2vw;
    background-color: transparent;
    border: 1px solid black;
    position: relative;
    z-index: 111;
   overflow: hidden;
}
body> video {
    position: fixed;
    right: 3%;
    bottom: 5%;
    width: 7%;
    z-index:222;
    background-color: transparent;
    border-radius: 50%;
    /* top: 100%; */
}
.sizwe button::after{
    content: "";
    /* padding: 7vw 5vw; */
    /* border-radius: 100px; */
    position: absolute;
    border-radius: 100px;
    top: 100%;
    left: 0%;
    z-index: -1;
    background-color: black;
    width:100%;
    height: 100%;
}
.sizwe button:hover::after{
    top: 0%;
    
    transition: all 0.7s ease ;
}
.sizwe button:hover{
    color: white;
    transition: all 0.5s ease ;
}
.page4{
    width: 100%;
    min-height: 100vh;
    /* background-color: rebeccapurple; */
    padding: 5vw 12vw;
    background-color: white;
}
.featured h1{
    font-size: 4vw;
    font-weight: 400;
}
.featured h1:nth-child(2){
    -webkit-text-stroke:1px black;
    color: transparent;
}
.feature-in{
    width: 100%;
    height: 100vh;
    /* border: 1px solid black; */
    display: flex;
    margin-top: 5vw;
    justify-content: space-between;
}
.feature-left{
    width: 45%;
    height: 100%;
    overflow: hidden;
    /* border: 1px solid red; */
    overflow: hidden;
}

.feature-right{
    width: 45%;
    height: 100%;
    /* border: 1px solid red; */
    position: relative;
}
.feature-right img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 111;
}

.elem{
    width: 100%;
    height: 100vh;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    flex-direction: column;
    gap: 2vw;
   /* position: absolute; */


}

.page6 h1{
    font-size: 11.8vw;
    font-weight: 200;
    line-height: 10vw;
}

.elem h1:nth-child(1){
font-size: 2vw;
}
.elem h1:nth-child(2){
font-size:2.7vw ;
line-height: 3.4vw;
}

.elem h2{
    color: gray;
    font-size: 1.5vw;
}
.btn{
    /* background-color: black; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn button{
    margin-top: 3vw;
padding:1vw 2vw;
border-radius: 300px;
background-color: transparent;
border:1px solid rgba(0, 0, 0, 0.289);
position: relative;
overflow: hidden;
z-index: 2;
}
.btn button::after{
content: "";
width:100% ;
border-radius: 300px;
height: 100%;
position: absolute;
background-color: black;
top: -100%;
left: 0%;
z-index: -1;
}
.btn button:hover::after{
    top: 0%;
    transition: all 0.5s ease;
}
.btn button:hover{
    color: white;
    transition: all 0.5s ease;
}
.page5{
    width: 100%;
    min-height: 100vh;
    background-color: #161616;
    border-top-left-radius: 10%;
    color: white;
    border-top-right-radius: 10%;
    overflow: hidden;
}
.for{
    width: 100%;
    min-height: 100vh;
    background-color: white;
}
.text-5{
    /* background-color: rebeccapurple; */
    width: 100%;
    height: 76vh;
    font-size: 4.5vw;
    justify-content: center;
display: flex;
padding-left: 10vw;
flex-direction: column;

}
.text-5 h1{
    font-weight: 200;
font-weight: Matter;
line-height: 8vw;
letter-spacing: -0.3vw;
}
.below5{
    width: 100%;
    height: 100vh;
    padding: 20vw;
    /* background-color: red; */
 
}
.swiper {
    width: 95%;
    height: 50vh;

    /* padding:0vw 12vw ; */
    /* background-color: rebeccapurple; */
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: gray; */
    display: flex;
    flex-direction: column;
    
    justify-content: center;
   text-align: start;
    position: relative;
    margin-left: 2vw;


  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2vw ;
  }
  .imag{
    width: 100%;
    height: 70%;
    position: relative;margin-bottom: 2vw;
  }
.swiper-slide img{
    position: absolute;
    width: 100%;
    height: 100%;
}
.swiper-slide h3{
    color: white;
font-weight: 100;
    font-size: 1.29vw;
}
.in-center{
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    width: 100%;
    height: 50vh;
}
.inter-center{
/* background-color: rgb(255, 255, 0); */
width: 50%;
display: flex;
flex-direction: column;
gap: 3vw;
}
.in-center p{
    font-size: 2vw;
}
.inter-center button{
    width: 40%;
    padding:1vw 1.08vw;
    color: white;
    font-size: 1.7vw;
    border-radius: 30px;
    /* white-space: nowrap; */
    background-color: transparent;
    border: 2px solid white;
    position: relative;
    overflow: hidden;
    z-index: 11;
}
.inter-center button::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 0%;
    background-color: white;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    z-index: -1;
    /* padding:1vw 1.08vw; */
}
.in-center button:hover::after{
    top: 0%;
    transition: all 0.5s ease ;
}
.in-center button:hover{
    color: black;
}
.feature-right img{
    transition: all 3s ease;
}
.flexy-5{
    width: 100%;
    height: 55vh;
    /* background-color: rebeccapurple; */
    display: flex;
justify-content: space-evenly;
}
.left-5{
    width: 45%;
    height: 100%;
    /* background-color: red; */
}
.right-5{
    width: 40%;
    height: 100%;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;

}
.left-5 video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.right-5 p{
    font-size: 1.7vw;
}

.page6{
    width: 100%;
    min-height: 100vh;
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
background-color: white;
padding: 8vw 10vw;
display: flex;
flex-direction: column;
gap: 10vw;

}
.page7{
    width: 100%;
    height: 30vh;
    display: flex;
  flex-direction: column;
  background-color: white;
 justify-content: center;
    /* background-color: aqua; */
}
.element h1{
    display: inline-block;
    font-size: 12vw;
    font-weight: 100;
    
  
}
.in-text::-webkit-scrollbar{
    display: none;
}
.in-text{
 
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  
}
.imagg{
    width: 15%;
height:18vh;
border-radius:300px;
overflow: hidden;
/* background-color: aqua; */
display: inline-block;

}
.imagg video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes anime {
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-100%);
    }
}
.element{
   animation-name: anime;
   animation-duration: 10s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   display: inline-block;
   /* display: flex; */
   /* margin-left: 19vw; */
   margin-right: 19vw;
}
.page8{
    width: 100%;
    min-height: 80vh;
display: flex;

    background-color: white;
}
.elemo{
    width: 30%;
height: 50vh;
/* background-color: red; */

gap: 0.7vw;
margin:0vw 1vw;
display: inline-block;

}
.imege{
    width: 100%;
    height: 85%;
    /* background-color: rebeccapurple; */
 
}
.imege img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inside-page{
 width: 100%;
 min-height: 80vh;
 padding: 10vw 5vw;
 display: flex;
 align-items: center;
 overflow-x: auto;
 overflow-y: hidden;
 /* white-space: nowrap; */
 /* flex-wrap: wrap; */
 display: inline-block;
white-space: nowrap;
cursor:grab
}
.inside-page::-webkit-scrollbar{
    display: none;
 
}
.swiper{
    cursor:grab;
}
.page9{
    width: 100%;
    min-height: 150vh;
    background-color: black;
    padding-top: 9vw;
}
.vid{
    width: 8%;
    height: 20vh;
    /* background-color: rebeccapurple; */
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    margin: 0vw 3vw;
}
.vid video{
    width: 100%;
    height: 100%;
    object-fit: cover;


}
.elem2{
    animation-name: anime2;
   animation-duration: 10s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   display: inline-block;
   padding-left: 2vw;
   /* padding-right: 2vw; */
}
.elem2 h1{
font-size: 12vw;
font-weight: 100;
display: inline-block;
color: white;
}
.letsmove{
    white-space: nowrap;
    overflow-y: auto;
overflow-y: hidden;
display: inline-block;
}
.letsmove::-webkit-scrollbar{
    display: none;
}
@keyframes anime2 {
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-100%);
    }
}
.in-project{
    width: 100%;
    min-height: 105vh;
    /* background-color: green; */
}
.elem3{
    width: 100%;
    height:15vh;
    border-top: 1px solid gray;
    padding: 0vw 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
   cursor: pointer;
}
.more-project h5{
    padding:3vw 5vw;
    color: white;
    font-size: 1.1vw;
    font-weight: 400;
}
.elem3 h2{
    font-weight: 400;
}
.elem3 h2 i{
    font-size: 3.5vw;
    font-weight: 400;
}
.overlay{
    width: 100%;
    height: 15vh;
    background-color: white;
    position: absolute;
    left: 0%;
    color: black;
    
    display: flex;
    align-items: center;
    overflow-x: auto;
    transform: scaleY(0);
opacity: 0;
    overflow-y: hidden;
   
}
.elem3:hover .move{
    transform: scaleY(1);
opacity: 1;
transition: scale 0.5s ease;
}
.elem3:hover .overlay{
transform: scaleY(1);
opacity: 1;
transition: all 0.3s ease;
}
.move{
    display: flex;
    align-items: center;
    gap: 3vw;
    white-space: nowrap;
    padding: 0vw 3vw;
    animation-name: anime3;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    opacity: 0;
  
}
.overlay::-webkit-scrollbar{
    display: none;
}
.move i{
    display: inline-block;
}
.move h2{
    display: inline-block;
    font-size: 2vw;
}
@keyframes anime3 {
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-100%);
    }
}
.mail{
    width: 80%;
    /* background-color: rebeccapurple; */
    height: 40vh;
    padding: 0vw 5vw;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.left-mail,.right-mail{
    display: flex;
    flex-direction: column;
 
    width: 30%;
    /* background-color: red; */
    gap: 2vw;
}
.top-mail h1{
    font-weight: 100;
    font-size: 2vw;
}
.top-mail h1 span{
    font-size: 2vw;
    font-weight: 100;


   
}
.bottom-mail button{
    width: 90%;
    padding: 1vw;
    border-radius: 300px;
    border: 1px solid  white;
    background-color: transparent;
    color: white;
    font-size: 2vw;
    overflow: hidden;
    position: relative;
    z-index: 11;
}
.bottom-mail .button-1{
    width: 100%;
    padding: 1vw;
    border-radius: 300px;
    border: 1px solid  white;
    background-color: transparent;
    font-size: 1.7vw;
  
}
.bottom-mail button::after{
    content: "";
    background-color: white;
    left: 0%;
    top: 100%;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;

}
.bottom-mail button:hover::after{
    top: 0%;
    transition: all 0.5s ease;
    border-radius: 300px;
}
.bottom-mail button:hover{
  color: black;
  transition: all 0.5s ease;
}
.footer{
    width: 100%;
    height: 100vh;
    background-color: white;
    position: relative;
 
}
.footer .centee{
width: 100%;
height: 75vh;
/* background-color: red; */
position: relative;
z-index: 11;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 5vw;
}
.footer video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0%;

}
.footer .centee h1{
    font-size: 10vw;
    line-height: 4vw;
    font-weight: 400;
    color: white;
    letter-spacing: -0.7vw;
}
.footer .centee button{
    width: 37%;
    /* padding: 0vw 2.5vw; */
    border-radius: 200px;
    font-size: 8.5vw;
    color: white;
background-color: transparent;
border: 2px solid white;
overflow: hidden;
position: relative;
z-index: 1;
}
.footer .centee button::after{
    content: "";
    position: absolute;
z-index: 111111;
top: 100%;
left: 0%;
width: 100%;
height: 100%;
background-color: white;
border-radius: 200px;
z-index: -1;
}
.footer .centee button:hover::after{
    top: 0%;
transition: all 0.5s ease;
}
.footer .centee button:hover{
 color: black;
 transition: all 0.5s ease;
}
.no-more{
    width: 50%;
    /* background-color: red; */
height: 25vh;
position: relative;
z-index: 11;
display: flex;
padding-left: 5vw;
justify-content: space-between;

align-items: flex-end;
padding-bottom: 3vw;
color: white;
}
.at-last button{
    padding:0.3vw 1vw;
    color: white;
    background-color: transparent;
    border: 2px solid white;
    font-size: 1.3vw;
    border-radius: 300px;
}
.at-last{
    gap: 1vw;
    display: flex;
}
.at-last h4{
    margin-bottom: 5vw;
}