/* ------------------contact-form---------------------------------- */
.contact-form{
    width: 95vw;
    height: 85vh;
}
.contact-form h1{
    font-size: 7vw;
}
form{
    width: 94%;
    margin-top: -25vw;
    height: 75%;
}
form>input{
    height: 6%;
    padding-left: 2vw;
    font-size: 3.5vw;
}
form>textarea{
    padding-left: 2vw;
    font-size: 3.5vw;
}
form>button{
    width: 36vw;
    height: 10vw;
    border-radius: 2vw;
    font-size: 3.9vw;
}
.contact-form i{
    font-size: 6vw;
}
/* --------------------------------hero---------------------------------------- */
.hero{
    padding-top: 10vw;
    height: 80vh;
    /* background-color: red; */
    flex-direction: row-reverse;
}
.hero-text{
    height: 50%;
    width: 90%;
    padding-right: 0vw;
    padding-left: 0vw;
    order: 2;
    margin-top: -5vw;
}
.hero-text h3{
    margin-top: 0vw;
    font-size: 3.3vw;
    padding-left: 0vw;
    text-align: center;
    font-weight: 600;
}
.hero-text h1{
    font-size: 15vw;
    letter-spacing: -.5vw;
    margin-top: -.5vw;
    text-align: center;
    font-weight: 700;
}
.hero-text p{
    width: 100%;
    padding-left: 6vw;
    padding-right: 6vw;
    font-size: 3vw;
    text-align: center;
    margin-top:0vw;
    margin-right: 0vw;
}
.hero-text p>span{
    padding-left: .5vw;
    padding-right: .5vw;
}
.buttons{
    width:100%;
    flex-wrap: wrap;
    padding-left: 10vw;
    padding-right: 10vw;
    height: 24vw;
    padding-top: 6vw;
    justify-content: center;
}
.buttons button{
    width: 28.3vw;
    border-radius: 20vw;
    margin-top: -2vw;
    height: 6.7vw;
    font-size: 3.03vw;
}
.hero-img{
    width: 100%;
    height: 45%;
    order: 1;
}
.hero-img img{
    height: 100%;
    width: 100%;
}
.hero-socials{
    top: 10%;
    right: 24%;
    width: 8vw;
    height:8vw;
}
.hero-socials i{
    font-size: 3.5vw;
}
.hero-socials:hover{
    width: 6.2vw;
    height: 6.2vw;
}
/*---------------------------marque----------------------------------*/
.softwares{
    order: 3;
    height: 7vw;
    width: 85vw;
    margin-left: 3vw;
    margin-top: 6vw;
}
.marque img{
    margin-left: 3vw;
    margin-right: 3vw;
    height: 5vw;
    width: 8vw;
}
.marque img:hover{
    height: 4.5vw;
    width: 8.5vw;
}
/* -----------------------------------------motion------------------------------------- */
hr{
    margin-left: 5%;
    margin-top: 10vw;
    width: 90%;
    display: block;
}
#hybrid-hr{
    margin-top: 15vw;
}
.motion{
    height: 200vh;
    width: 100vw;
    /* background-color: red; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
}
.motion-reels{
    order: 2;
    width: 90%;
    /* background-color: aqua; */
    height: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    padding-top: -20vw;
}
.motion-reels video{
    height: 47%;
    width: 90%;
    border-radius: 5vw;
}
.motion-text{
    order: 1;
    width: 90%;
    height: 21%;
    /* background-color: rebeccapurple; */
    padding-top: 15vw;
    padding-left: 0vw;
    padding-right: 0vw;
}
.motion-text h1{
    text-align: center;
    font-size: 8.2vw;
    font-weight: 700;
}
.motion-text h2{
    margin-top: 4vw;
    text-align: center;
    font-size: 5vw;
}
.motion-text p{
    width: 100%;
    padding-left: 6vw;
    padding-right: 6vw;
    margin-top: 6vw;
    text-align: center;
    font-size: 3vw;
}
.motion-text p>span{
    padding-left: .5vw;
    padding-right: .5vw;
}
.motion-btn{
    height: 20vw;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 4vw;
    justify-content: center;
    padding-left: 25vw;
    padding-right: 25vw;
}
.motion-btn button{
    width: 28.3vw;
    border-radius: 20vw;
    margin-top: 0vw;
    height: 6.7vw;
    font-size: 3.03vw;
}
.motion-btn button:hover{
    margin-top: -1.3vw;
}
/* -----------------------------------------hybrid------------------------------------- */
.hybrid{
    height: 200vh;
    width: 100vw;
    /* background-color: red; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.hybrid-reels{
    width: 90%;
    /* background-color: aqua; */
    height: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    padding-top: -20vw;
}
.hybrid-reels video{
    height: 47%;
    width: 90%;
    border-radius: 5vw;
}
.hybrid-text{
    width: 90%;
    height: 21%;
    /* background-color: rebeccapurple; */
    padding-top: 15vw;
    padding-left: 0vw;
    padding-right: 0vw;
}
.hybrid-text h1{
    text-align: center;
    font-size: 8.2vw;
    font-weight: 700;
}
.hybrid-text h2{
    margin-top: 4vw;
    text-align: center;
    font-size: 5vw;
}
.hybrid-text p{
    width: 100%;
    padding-left: 6vw;
    padding-right: 6vw;
    margin-top: 6vw;
    text-align: center;
    font-size: 3vw;
}
.hybrid-text p>span{
    padding-left: .5vw;
    padding-right: .5vw;
}
.hybrid-btn{
    height: 20vw;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 4vw;
    justify-content: center;
    padding-left: 25vw;
    padding-right: 25vw;
}
.hybrid-btn button{
    width: 28.3vw;
    border-radius: 20vw;
    margin-top: 0vw;
    height: 6.7vw;
    font-size: 3.03vw;
}
.hybrid-btn button:hover{
    margin-top: -1.3vw;
}
/* ------------------------------------long form --------------------------------------- */
.long-head{
    width: 100vw;
    height: 31vh;
    padding-top: 8vw;
    padding-bottom: 3vw;
}
.long-head h1{
    width: 100%;
    font-size: 8.3vw;
    padding-left: 5vw;
    padding-right: 5vw;
    line-height: 9vw;
}
.long-head p{
    width: 100%;
    padding-left: 19vw;
    padding-right: 19vw;
    font-size: 3vw;
}
.long-head p>span{
    padding-left: .5vw;
    padding-right: .5vw;
}
.long-form{
    margin-top: 2vw;
    height: 30vh;
}
.arrow {
    font-size: 6vw;
    height: 7vw;
    width: 7vw;
}
.arrow:hover{
    height: 7.2vw;
    width: 7.2vw;
}
/* --------------------------footer--------------------------------- */
footer{
    height: 30vh;
}
footer p{
    left: 45%;
    font-size: 2vw;
}
.foot-head{
    font-size: 4vw;
    padding-top: 4vw;
}
.foot-btn{
    margin-top: -5vw;
    width: 40%;
    height: 57%;
}
.foot-btn button{
    filter: drop-shadow(3px 4px var(--pri));
    width: 35.3vw;
    border-radius: 20vw;
    margin-top: 0vw;
    height: 6.7vw;
    font-size: 2.7vw;
}
.foot-btn button:hover{
    filter: drop-shadow(0px 0px var(--pri));
}