*{
    margin: 0;
    padding: 0;
    cursor: default; 
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    font-family: 'SFPRO';
}
::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
@font-face {
    font-family: 'SFPRO';
    src: url('./SF-Pro.ttf');
}
.bg{
    background-size: 100%;
    background-repeat: no-repeat; 
}
.click{
    cursor: pointer;
}
.logo{
    width: 127rem;
    height: 56rem;
    position: absolute;
    z-index: 2;
    top: 28rem;
    left:  96rem;
    background-image: url('./img/logos.png');
}
.sks{
    display: flex;
    position: absolute;
    top: 45rem;
    left: 324rem;
    color: white;
}
.sk{
    font-size: 18rem;
    text-decoration: underline;
    margin-left: 33rem;
    z-index: 3;
}
.app{
    width: 194rem;
    height: 50rem;
    position: absolute;
    z-index: 2;
    top: 30rem;
    right:  96rem;
    background-image: url('./img/app.png');
}
.titleList{
    display: none;
    position: absolute;
    top: 49rem;
    left: 400rem;
}
.title{
    font-size: 18rem;
    
    margin-right: 44rem;
    font-weight: bolder;
    position: relative;
    padding: 0 8rem;
}
.title:hover,.act{
    color:#1E9CFC
}
.title:hover::after,.act::after{
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 33rem;
    transform: translateX(-50%);
    height: 3rem;
    background-color: #1E9CFC;
    animation: long .5s forwards;
    border-radius: 1rem;
}
@keyframes long{
    0%{
        width:0;
    }
    100%{
        width:100%;
    }
}
.openScreen{
    width: 100vw;
    height: 100vh;
}
video{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}
.opBox{
    position: absolute;
    bottom: 67rem;
    left: 82rem;
    
}
.opP1{
    display: none;
    width: 717rem;
    height: 190rem;
    font-size: 80rem;
    line-height: 93.75rem;
    color: white;
    font-weight: bolder;
    margin-bottom: 15rem;
}
.opP2{
    display: none;
    width: 645rem;
    height: 62rem;
    line-height: 28.13rem;
    font-size: 24rem;
    color: white;
    margin-bottom: 80rem;
}
.opB{
    width: 217rem;
    height: 72rem;
    border-radius: 20rem;
    font-weight: bolder;
    background-color: white;
    font-size: 18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 14rem;
}

.team{
    display: none;
    width: 100vw;
    height: fit-content;
    background-image: url('./img/p1bg.png');
    box-sizing: border-box;
    padding-left: 170rem;
    
    padding-top: .1rem;
}
.p1p1{
    width: 358rem;
    height: 268rem;
    background-image: url('./img/p1p1.png');
    position: absolute;
    top: 174rem;
    right: 236rem;
}
.p1t1{
    width: 1000rem;
    height: 120rem;
    font-size: 50rem;
    line-height: 58.59rem;
    margin-top: 292rem;
    font-weight: bolder;
}
.p1t2{
    width: 1092rem;
    height: 62rem;
    font-size: 24rem;
    line-height: 28.13rem;
    margin-top: 31rem;
   
}
.mBox{
    display: flex;
    margin-top: 68rem;
}
.man{
    width: 380rem;
    height: 530rem;
    margin-right: 20rem;
    position: relative;
    overflow: hidden;
    border-radius: 20rem;
}
.m1{
    background-image: url('./img/m1.png');
}
.m2{
    background-image: url('./img/m2.png');
}
.m3{
    background-image: url('./img/m3.png');
}
.m4{
    background-image: url('./img/m4.png');
}

.m1:hover::after,.m2:hover::after,.m3:hover::after,.m4:hover::after{
    content: 'Chris has had a successful entrepreneurial record as the founder and executive chairman of Zest since its establishment.';
    display: flex;
    position: absolute;
    box-sizing: border-box;
    padding: 0 26rem;
    width: 100%;
    height: 81.5%;
    background-color: rgba(0, 0, 0, .4);
    top: -432rem;
    color: white;
    font-size: 22rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: down .5s forwards;
}
@keyframes down{
    0%{
        top:-432rem
    }
    100%{
        top:0;
    }
}
.m2:hover::after{
    content: 'Weiwei is responsible for driving revenue growth through various channels, including real-time operations, partner relationships, and marketing.';
}
.m3:hover::after{
    content: "Joseph is responsible for managing Zest's engineering team, advocating for product quality, and driving innovation through cross functional collaboration. Under his guidance,the team was able to achieve outstanding results and continuously exceed expectations";
}
.m4:hover::after{
    content: 'Amy has been serving as the head of the Zest product team, responsible for overseeing all aspects of product design and development,and working closely with cross functional teams to ensure successful product releases.';
}

.p1p2{
    width: 1586rem;
    height: 1230rem;
    background-image: url('./img/p1p2.png');
    margin: 90rem 0 103rem;
}

.sus{
    display: none;
    width: 100vw;
    height: 3000rem;
    background-image: url('./img/p2bg.png');
    background-position-y:723rem;
    box-sizing: border-box;
    padding-left: 97rem;
    padding-top: .1rem;
}
.p2t1Box{
    width: 925rem;
    height: 750rem;
    padding-left: 83rem;
    margin-top: 150rem;
    padding-top: .1rem;
    
    color: white;
    border-radius: 20rem 200rem 20rem 20rem;
    background: linear-gradient(to right,#494860,#15163A);
}
.p2t1{
    font-size: 50rem;
    width: 800rem;
    height: 180rem;
    line-height: 58.59rem;
    font-weight: bolder;
    margin: 54rem 0 339rem;
}
.p2t2{
    font-size: 22rem;
    width: 809rem;
    height: 130rem;
    line-height: 25.78rem;
    
}

.p2p1{
    width: 705rem;
    height: 750rem;
    background-image: url('./img/p2p1.png');
    position: absolute;
    top: 150rem;
    right: 97rem;
}

.p2t3Box{
    width: 1737rem;
    height: 278rem;
    border-radius: 50rem;
    margin-top: 72rem;
    position: relative;
    
    box-sizing: border-box;
    padding-top: 74rem;
    padding-left: 87rem;
    background-color: white;
}

.p2t3{
    font-size: 60rem;
    font-weight: bolder;
    margin-bottom: 23rem;
}
.p2t4{
    font-size: 30rem;
}
.p2p2{
    width: 67rem;
    height: 67rem;
    background-image: url('./img/p2p2.png');
    position: absolute;
    top: 105rem;
    right: 87rem;
}

.p2ptBox{
    display: flex;
    flex-wrap: wrap;
    margin-top: 72rem;
}
.p2ptBx{
    width: 744rem;
    margin-right: 119rem;
}

.p2p3{
    width: 94rem;
    height: 94rem;
    background-image: url('./img/p2p3.png');
    margin-bottom: 48rem;
}
.p2p4{
    background-image: url('./img/p2p4.png');
}
.p2p5{
    background-image: url('./img/p2p5.png');
    margin-bottom: 23rem;
}
.p2p6{
    background-image: url('./img/p2p6.png');
    margin-bottom: 23rem;
}

.p2t5{
    font-size: 40rem;
    margin: 23rem 0;
}
.p2t6{
    font-size: 22rem;
    margin-bottom: 85rem;
}
.p2t7Box{
    display: flex;
    justify-content: space-between;
}
.p2t7{
    font-size: 32rem;
    color: #2C8EFF;
    margin-bottom: 17rem;
}
.p2t8{
    font-size: 22rem;
}

.p2pt2Box{
    display: flex;
    margin-top: 149rem;
}

.p2p7{
    width: 562rem;
    height: 466rem;
    background-image: url('./img/p2p7.png');
    margin-right: 20rem;
}
.p2p8{
    background-image: url('./img/p2p8.png');
}
.p2p9{
    background-image: url('./img/p2p9.png');
}
.p2t9{
    font-size: 26rem;
    font-weight: bolder;
    margin: 46rem 0 13rem;
}
.p2t10{
    width: 562rem;
    line-height: 23.44rem;
    font-size: 20rem;
}

.join{
    display: none;
}

.p3p1{
    width: 1920rem;
    height: 522rem;
    background-image: url('./img/p3p1.png');
}

.p3p2{
    width: 1160rem;
    height: 710rem;
    background-image: url('./img/p3p2.png');
    margin-top: 73rem;
    margin-left: 97rem;
    margin-bottom: 207rem;
}
.p3p3{
    width: 251rem;
    height: 251rem;
    background-image: url('./img/p3p3.png');
    position: absolute;
    top: 1094rem;
    left: 1086rem;
}

.p3InpBox{
    width: 553rem;
    height: 704rem;
    border-radius: 130rem 20rem 20rem 0;
    background-color: white;
    position: absolute;
    right: 97rem;
    top: 595rem;
    border: 3rem solid #F3F3F3;
    padding-top: .1rem;
}

.inpName{
    font-size: 24rem;
    margin: 95rem 0 14rem 45rem;
    position: relative;
}
.inpEmail{
    margin-top: 64rem;
}
span{
    color: #1DC19D;
}
input{
    width: 459rem;
    height: 75rem;
    font-size: 20rem;
    box-sizing: border-box;
    padding: 23rem 0 24rem 24rem;
    border: 1px solid #EDEDED;
    outline: none;
    margin-left: 45rem;
    border-radius: 50rem;
    cursor: text;
    position: relative;
}

::-webkit-input-placeholder{
    color: darkgrey;
}
.p3p4{
    width: 459rem;
    height: 85rem;
    background-image: url('./img/p3p4.png');
    margin: 136rem 0 0 45rem;
}

.noInp{
    border: 1rem solid #FF0000;
    position: relative;
}

.novalue::after{
    content: 'Cannot be empty';
    display: block;
    position: absolute;
    color: #FF0000;
    font-size: 20rem;
    top: 131rem;
    left: 42rem;
}
.noe::after{
    content: 'Invalid email format';
    display: block;
    position: absolute;
    color: #FF0000;
    font-size: 20rem;
    top: 131rem;
    left: 42rem;
}
.p3maskBox{
    display: none;
    width: 553rem;
    height: 710rem;
    border-radius: 130rem 20rem 20rem 0;
    background-color: rgba(0, 0, 0, .4);
    position: absolute;
    right: 97rem;
    top: 595rem;
    padding-top: .1rem;
}
.p3p5{
    width: 100rem;
    height: 100rem;
    background-image: url('./img/p3p5.png');
    margin: 282rem auto 0;
}
.p3t1{
    font-size: 26rem;
    color: white;
    text-align: center;
}

footer{
    display: none;
    width: 100vw;
    height: 179rem;
    border-top: 1px solid #E7E7E7;
    text-align: center;
    font-size: 24rem;
    
}
.skips{
    display: flex;
    justify-content: center;
    margin-top: 55rem;
    margin-bottom: 20rem;
}
.skip{
    margin-right: 50rem;
    margin-left: 50rem;
    font-size: 18rem;
    text-decoration: underline;
    color:#1E9CFC;
}