@font-face {
    font-family: font;
    src: url(./NeueHaasDisplayMediu.ttf);
}
@font-face {
    font-family: black;
    src: url(./NeueHaasDisplayBlack.ttf);
}
@font-face {
    font-family: light;
    src: url(./NeueHaasDisplayLight.ttf);
}
*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    color:#fff;
    font-family:font;
}
html,body{
    width:100%;
    height: 100%; 
}
html {
    scroll-behavior: smooth;
  }
body::-webkit-scrollbar{
    background-color:rgba(255, 255, 255, 0);
    width: 4px;
}
body::-webkit-scrollbar-thumb{
    background-color: #111;
    border-radius: 50px;
}
.main{}

  
h1,h2,h3,h4,h5,p,span{
    cursor:context-menu;
}

nav{
    position: fixed;
    display: flex;
    align-items:flex-start;
    width:100%;
    height: 12vh;
    padding:2vw 10.5vw;
    justify-content: space-between;
    background-color: #111;
    z-index: 10;
}
nav h1{
    font-size: 1.6vw;
}
.nav-menu{
    display: flex;
    gap:2vw;
    align-items: flex-start;
    padding:1vh 0;
    position: relative;
    z-index: 10;
}
.nav-menu h4{
    font-size: .9vw;
    text-transform: uppercase;
    margin-bottom: 2vw;
}
.nav-menu h4:hover{
    color:#969696
}
.nav-menu h5{
    margin-bottom: 0.9vw;
    display:none;
    overflow: hidden;
    z-index: 10;
}
.nav-menu h5 span{
    font-size: .9vw;
    font-family: light;
    font-weight: 700;
    letter-spacing: 1px;
    color:#e7e4e4;
    display: inline-block;
    transform: translateY(25px);
}
.nav-bottom{
    width: 80%;
    height: 0%;
    position: absolute;
    top: 100%;
    z-index: 9;
    border-bottom: 2px solid rgb(213, 213, 213);
    background-color: #111;
}





nav button{
    background-color: #0ba34e;
    display: flex;
    align-items: center;
    padding:10px 15px;
    border-radius: 50px;
    border:none;
    font-size: 0.9vw;
    text-transform: uppercase

}
nav button svg{
    height: 0.9vw;
    margin-left: 1.6vw;
}





.page1{
    min-height: 100vh;
    width: 100%;
    background-color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.margin{
    margin-top: 30vh;
}
.page1 h1{
    font-size: 6.5vw;
    font-weight: 500;
    font-family: font;
    line-height: 1;
   
}
.page1 p{
    text-align: center;
    font-size: 1.5vw;
    font-weight: 700;
    font-family: light;
    letter-spacing: 1px;
    margin-top: 4vh;
    color:#ebebeb;
    
}
.page1-hover{
    display: flex;
    margin-top: 1vh;
    align-items: center;
    justify-content: center;
    gap:3px
}
.page1-hover h4{
    font-size: 1.2vw;
    font-family: light;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: lowercase;
    padding: 5px 10px ;
    border-radius: 50px;
    border: 1px solid #ebebeb;
    color: #ebebeb;
}
.page1-hover h4:nth-last-child(2){
    border:none;
    padding:0;
}

.img-move{
    margin-top: 10vh;
    width:44%;
    white-space: nowrap;
    padding:2vw;
    overflow:hidden;
    position: relative;
}
.img-move .move{
    display: inline-block;
    animation-name: imgmove;
    animation-duration: 9s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.img-move .move img{
    height: 1.2vw;
    margin: 0 1vw
}
@keyframes imgmove{
    0%{
        transform: translateX(0);
    }
    100%{
        transform:translateX(-100%)
    }
}
.blurleft{
    width: 25%;
    height: 100%;
    background: linear-gradient(to right,#111,transparent);
    position: absolute;
    top:0;
    left:0;
    z-index: 2;
}
.blurright{
    width: 25%;
    height: 100%;
    background: linear-gradient(to right,transparent,#111);
    position: absolute;
    top:0;
    right:0;
    z-index: 2;
}




.page2{
    height: 100vh;
    width: 100%;
    background-color:#111;
    position:relative;
    padding:0 10.5vw;
    padding-bottom: 7vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top:1px solid #333;
}
.page2-left{
    height: 100%;
    width: 40%;
    display: flex;
    padding:3vw 0;
    flex-direction: column;
    align-items:flex-start;
    justify-content:space-between;
}
.page2-left p{
    font-size:1vw ;
    line-height: 1.5;
    font-weight:500;
    font-family: light;
    letter-spacing: 1px;
}
.page2-left h5{
    font-size: 1.2vw;
    line-height: 1.5;
    width:65%;
    font-weight: 600;
    font-family: light;
    letter-spacing: .5px;
}
.page2-right{
    height: 100%;
    width: 50%;
}
.page2-right-hover{
    position: relative;
    height: 10vw;
    padding-top:1.5vw;
    padding-bottom:7vw;
    border-bottom:  1px solid #333;
}
.page2-right-hover h2{
    font-size: 1.5vw;
    font-family:light ;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: capitalize;
}
.page2-right-hover img{
    height: 6vw;
    width: 6vw;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    opacity: 0;
    scale:0;
}

.page3{
    height: 80vh;
    width: 100%;
    background-color:#111;
    position: relative;
    background:url(./images/page3img.webp);
    background-size:cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page3icon{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.page3icon .icon{
    background-color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:3.5vw;
    border-radius: 50%;
}
.page3icon .icon i{
    color:#111;
    font-size: 3vw;
}
.page3icon h5{
    font-size: 0.8vw;
    letter-spacing: .5px;
    font-weight: 900;
    padding:10px 20px;
    border-radius: 50px;
    text-transform: uppercase;
    background-color: #fff;
    color:#111;
    margin-top: 0.5vw;
    opacity:0;
    transition: all ease 0.5s;
    transform: translateY(20%);
}
.page3icon:hover h5{
    opacity:1;
    transform: translateY(0%);
}
.page3 video{
    height: 100%;
    width: 100%;
    position: absolute;
    object-fit: cover;
    transform: scaleX(0.7) scaleY(0);
    border-radius: 30px;
    opacity:0;
    z-index: 99;
}
.page4{
    min-height: 100vh;
    width: 100%;
    background-color: #fff;
    position: relative;
    padding-bottom: 10vh;
}
.page41{
    width: 100%;
    height: 75vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:12vh 10vw;
    padding-bottom: 0;
}
.page41left{
    height: 100%;
    width: 24%;
    border-top: 2px solid #000;
    padding-top:3vh;
}
.page41left h2{
    color:#111;
    font-size: 2.5vw;
}
.page41left p{
    width:95%;
    color:#000;
    font-family: light;
    font-weight: 700;
    font-size: 1.2vw;
    margin-top:20vh;
    line-height: 1.4;
    letter-spacing: 0.5px;
}
.page41right{
    height: 100%;
    width: 70%;
    background-color: black;
    position: relative;
}
.page41right img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page41right video{
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    object-fit: cover;
    opacity: 0;
    transition: opacity ease 0.3s
}


.page5{
    min-height: 100vh;
    width: 100%;
    background-color: #111;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between; 
    padding:10vh 10vw;
    padding-bottom: 2vw;
}
.page5>button{
    background-color:#0ba34e;
    padding: 0.8vw 2.5vw;
    font-size: 1vw;
    border-radius: 50px;
    border:none;
    position: sticky;
    top:15%
}
.page5right{
    width:70%
}
.page5right>p{
    font-size: 2.1vw;
    letter-spacing: 1px;
    line-height: 1.3;
    font-family: light;
    font-weight: 700;
    margin-bottom:15vh;
}
.page5right>p span{
    width: 15vw;
    display: inline-block;
}
.page5main{
    width: 100%;
    margin-top:5vh;
    padding:3vh 0;
    border-top: 2px solid #fff;
}
.page5main h1{
    font-size: 3.5vw;
    letter-spacing: 1px;
    

}
.page5main .page5icon{
    display: flex;
    margin-top: 5vh;
    margin-bottom: 6vh;

}
.page5main .page5icon h4{
    border-radius: 50px;
    border:1px solid #fff;
    padding:0.8vh 1.2vw;
    font-size: 0.9vw;
    font-family: light;
    font-weight: 700;
    text-transform: uppercase;
}
.page5hover1{
    display: flex;
    align-items:flex-start;
    justify-content: space-between;
    padding-top: 2vh;
    padding-bottom: 8vh;
    position: relative;
    overflow: hidden;
    border-top: 2px solid #333;
}
.page5hover1 p{
    width: 60%;
    font-family: light;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.5;  
    position: relative;
    z-index: 8;
    font-size: .9vw;  

}
.page5hover1 h3{
    font-size: 2vw;
    font-family: light;
    font-weight: 700;
    letter-spacing: 1px;
    position: relative;
    z-index: 8;
}
.page5hover1 i{
    font-size: 1.5vw;
    position: relative;
    z-index: 8;
}
.tophover{
    height: 100%;
    width: 100%;
    background-color:#222;
    position: absolute;
    top:0;
    transform: translateY(-100%);
    opacity:0;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}
.page5hover1:hover h3{
    padding-left: 1vw;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}
.page5hover1:hover i{
    padding-right: 1vw;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}

.page5hover1:hover .tophover{
    transform: translateY(0);
    opacity: 1;
}
.page5hover1:hover{
    border-top:2px solid #fff
}
summary::marker {
    content: "";
}
.uiux {
    padding: 3vh 0;
}

.product {
    padding: 3vh 0;

    border-top: 1px solid #333;
}
.iconflex{
    display: flex;
    justify-content: space-between;
}
.iconflex i{
    font-size: 2vw;
}


.page6{
    min-height: 100vh;
    width: 100%;
    background-color: #fff;
    padding:10vh 10vw;
}
.page6>h1{
    font-size: 6vw;
    color:#111;
    padding-left: 21.5vw;
    line-height: 0.9;
    padding-bottom: 10vh;
    border-bottom: 1px solid #dadada;
}
.page6text{
    display: flex;
    justify-content:space-between;
    align-items:flex-start;
    color:#111;
    padding-top: 10vh;
    position: relative;
}
.page6text .page6right{
    width: 73%;
}
.page6text .page6right p{
    font-size: 1.5vw;
    color:#111;
    font-family: light;
    font-weight: 900;
    margin-bottom: 5vh;
    width:70%;
    letter-spacing: 1px;
}
.page6left{
    background-color:#0e1ef8;
    width: 16vw;
    height: 8vh;
    border-radius:50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 15%;
}
.page6left h4{
    position: absolute;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9vw;
}
.page6left i{
    margin-left: 0.5vw;
    font-size:1.2vw ;
    font-weight: 100;
}
.page6bottom{
    height: 50vh;
    width: 100%;
    border-top: 1px solid #dadada;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.bottom{
    border-right: 1px solid #dadada;
    width:20%;
    height: 100%;
}
.bottom1{
    border-right: 1px solid #dadada;
    width:35%;
    height: 100%;
}
.bottom2{
    border-right: 1px solid #dadada;
    width:22%;
    height: 100%;
}
.bottom3{
    border-right: 1px solid #dadada;
    width:25%;
    height: 100%;
}
.bottom4{
    width:25%;
    height: 100%;
}
#bottom5{
    padding:4vh 0.2vw;
}
#bottom5 h5{
    color:#111;
    font-size: 1.5vw;
    margin-bottom: 4vh;
    letter-spacing: 1px;
}
#bottom5 h4{
    background-color: #111;
    width:75%;
    font-size: 0.9vw;
    letter-spacing: 1px;
    padding:1.5vh 0.7vw;
    border-radius: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 0.4vh;
    margin-left: 0.2vw;
}
#bottom5 h4 span{
    background-color: #333;
    padding:0.5vw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5vw;
    width: 1.5vw;
    margin-right: 0.8vw;
}
#bottom5 h4:nth-child(2){
    transform: translateX(0);
}
#bottom5 h4:nth-child(3){
    transform: translateX(10%);
}
#bottom5 h4:nth-child(4){
    transform: translateX(20%);
}
#bottom5 h4:nth-child(5){
    transform: translateX(30%);
}
#bottom5 h4:nth-child(6){
    transform: translateX(40%);
}
#bottom5 h4:nth-child(7){
    transform: translateX(50%);
}
.page7{
    min-height: 80vh;
    width: 100%;
    background-color: #111;
    padding:10vh 10vw;
    position: relative;
    text-align: center;
    justify-content: center;
    align-items:center;
    padding-bottom: 2vh;
}
.page7 h1{
    color:#fff;
    font-size:5.5vw;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.page7footer{
    position: relative;
    display: flex;
    width: 100%;
    min-height:30vh;
    justify-content:space-between;
    align-items:center;
    text-align: left;
    padding-bottom: 5vh;

}
.foot{
    width:25%;
    margin-top: 5vh;
}
.foot h2{
    text-transform: uppercase;
    color:#fff;
    font-family: light;
    font-size: 1.5vw;
    letter-spacing: 2px;
    padding-bottom: 1vh;
}
.foot h4{
    text-transform: uppercase;
    color:#fff;
    font-family: light;
    font-size: 1vw;
    letter-spacing: 1px;
    padding-top: 1vh;
    font-weight: 400;
}
.last{
    width: 100%;
    padding: 1vh 0;
    justify-content: space-between;
    display: flex;
    border-top: 1px solid #dadada;
    align-items: center;
}
.last h3{
    color:#fff;
    font-family: light;
    font-size: 1vw;
    letter-spacing: 1px;
    font-weight: 400;
}

.menu{
    width: 100%;
    height: 70vh;
    background-color: #fff;
    position:absolute;
    top: -100%;
    z-index: 88;
}




.fullmenu{
    display: none;
    opacity: 0;
}
.menuicon{
    position: absolute;
    top:2%;
    right:2%;
    z-index: 99;
}
.menuicon i{
        font-size: 4vh;
        color:#fff

}




                                      
@media (max-width: 952px) and (min-width: 850px){
    .page2{
        height: 67vh;}
    .page41 {
        height: 52vh}
    .page6>h1 {
            padding-bottom: 4vh;
        }    
   .page6text {
            padding-top: 4vh;  }  

     .page7 {
           min-height: 60vh;}
}


@media (max-width: 850px) and (min-width: 60px){
    .page2{
        height: 54vh;}
        .page3 {
            height: 50vh;}
        .page5right>p {
              margin-bottom: 5vh;
          }
          .page6left {
            width: 18vw;
            height: 6vh;}
            .page6bottom {
                height: 42vh;}
        .page41 {
            height: 52vh}
            .page5 {
                min-height: 90vh;}

        .page6>h1 {
                padding-bottom: 4vh;
            }    
       .page6text {
                padding-top: 4vh;  }
                .page6 {
                    padding: 5vh 10vw;
                }  
    
         .page7 {
               min-height: 60vh;}
               .page5main {
                padding: 0vh 0;
            }



    }







@media (max-width:600px)   {
nav{
    opacity:0
}
.fullmenu {
     display:block; 
     opacity: 1; 
}




.margin {
    margin-top: 5vh;
}
.page1 {
    min-height: 27vh;
}
.img-move {
    margin-top: 0vh;}
    .page2 {
        padding-top: 1vh;
        height: 22vh;
    }
    .page3 {
        height: 26vh;
    }
    .page41left p {
        margin-top: 11vh;
    }
    .page41 {
        padding-top: 5vh;
        height: 25vh;
    }
    .page4 {
        min-height: 55vh;
        padding-bottom: 4vh;
    }
    .page5 {
        padding-top: 3vh;
        min-height: 36vh;
    }
    .page5main .page5icon {
        margin-top: 2vh;
        margin-bottom: 0vh;
    } 
    .page6left {
        width: 19vw;
        height: 2vh;
    }
    .page6left h4 {
        font-size: 0.7vw;
    }
        .page6text {
        padding-top: 3vh;
    }
    .page5right>p {
        margin-bottom: 3vh;
    }

   .page5main {
    padding: 0vh 0;
}
.page5main {
    margin-top: 2vh;
    padding: 0vh 0;
}
.uiux {
    padding: 2vh 0;
}
.product {
    padding: 1vh 0;
}
.page5main .page5icon h4 {
    padding: 0.3vh 1.2vw;
}

.page6 {
    padding: 3vh 10vw;
}
.page6>h1 {
    padding-bottom: 2vh;
}
.page6text {
    padding-top: 2vh;
}
.page6text .page6right p {
    margin-bottom: 1vh;
}
#bottom5 h5 {
    margin-bottom: 1vh;
}
#bottom5 h4 {
    font-size: 0.8vw;
    padding: .2vh 1vw;
    margin-bottom: 0.6vh;
    margin-left: 0.2vw;
}
.page6bottom {
    height: 17vh;
}
.bottom5 {
    padding: 2vh 0.2vw;
}
.page6 {
    min-height: 39vh;
}
.page7footer {
    min-height: 19vh;
    padding-bottom: 4vh;
}
.page7 {
    min-height: 40vh;
}




}