@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap');
*{

margin: 0;
padding: 0;
box-sizing: border-box;
}


.hero-container{

position: relative;
display: flex;
justify-content:center;
align-items: center;

background-image: url(./asset\ 0.svg);

background-position:center;
background-size: cover ;
height: 104vh;
width: 100%;

overflow: hidden;
}


nav{

position:absolute;
display: flex;
align-items: center;
justify-content:space-evenly;
top: 0;
margin-left: -100px;
padding-top: 10px;
padding-left: -100px;

}



.logo{

width: 250px;
padding-bottom: 60px;
margin-left: 20px;

padding-right: 90px;
}
.logo:hover{

transition: 0.5s ease-in;
cursor: pointer;

}



nav ul li{
list-style-type: none;
display: inline-block;
padding: 10px;




}
nav ul li a{

text-decoration: none;
color:#ffffff;
font-size: 16px;
margin-left: 30px;
font-family:Arial, Helvetica, sans-serif;


}

nav button{

border: #ffffff;
border-radius: 55px;
width: 60px;
height: 35px;
position: absolute;
margin-right:-1100px;
padding-left:  5px 10px;
text-align: center;
color:rgb(35, 35, 84);
padding: 5px 10px;
}

nav button:hover{

    cursor: pointer;
    color: #4850a7;
}
nav ul li a:hover{

text-decoration: underline;
transition: 0.5s ease-in;

}



.img-section{

display: flex;
justify-content:center;
align-items: center;
position: absolute;
margin-left: -300px;

}
.now1{
margin-bottom: -300px;
margin-left: 200px;
color: #23272a;
}
.now2{
    color: #23272a;
    margin-bottom: -300px;
 margin-left: 770px;
}

.text-features{
font-size:27px;
font-family: 'Fira Sans Condensed', sans-serif;
text-align: center;
color: #ffffff;
margin-left: 130px;
font-weight: 600;
line-height: 53.2px;
}

.text-features h1{
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 70.4px;
    margin-bottom: 0px;
    font-family: 'Poppins', sans-serif;

}



.text-features p{
    text-align: center;
  font-family: Arial, Helvetica, sans-serif;
    margin-left: 100px;
   font: size 15px ;
  font-weight: 100;
  line-height: 35.4px;
  padding-bottom: 80px;
  row-gap: 30px;
  color: #ffffff;
}
.btn-features{
    padding-top: 20px;
padding: 10px 20px;
margin: 5px 10px;
margin-right: 100px;
color: #23272a;
}

.btn-features a{
  
font-size:16px;
color: #23272a;
width: 293px;
height: 56px;
text-decoration: none;
margin: 5px 10px;
padding: 16px 32px;
text-align: center;
border-radius: 28px;
font-family: Arial, Helvetica, sans-serif;

}

.btn-features a:hover{
cursor: pointer;
color: #404eed;
transition: 0.5s ease-in;

}
.border3{

background-color:#23272a;
color: #ffffff;

}
.border3:hover{
 
    background-color: #32383c;
    cursor: zoom-in;
    transition: 0.5s ease-in;
}

.img-text{

padding-top: 100px;
padding-left: 100px;

}


.para1{
font-family: Arial, Helvetica, sans-serif;
margin-left: 900px;
margin-top: -350px;
font-size: 40px;
line-height: 38.4px;
text-align: start;
color: #23272a;
}
.para2{
    font-family: Arial, Helvetica, sans-serif;
    line-height: 26.5px;
    margin-left: 900px;
   font-size: 16px;
   padding-right: 90px;
   color: #23272a;
}


.img-para{

 margin-left: 450px;
margin-top: -380px;
}
.para3{

font-family: Arial, Helvetica, sans-serif;
margin-left: 120px;
margin-top: 390px;
font-size:40px ;
line-height: 38.4px;
color: #23272a;
}

.par4{

   margin-left: 120px;
   text-align: start;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
 line-height: 26.5px;
 color: #23272a;
}

.tension1{
margin-top: 140px;
text-align: center;
font-size: 40px;
font-family: Arial, Helvetica, sans-serifS;
color: #23272a;
}

.tension2{
    margin-left: 140px;
    text-align: center;
    margin-right: 170px;
    font-size: 19px;
    line-height: 26.5px;
    cursor: #000000;
    font-family: Arial, Helvetica, sans-serif;
    row-gap: 30px;
    }

.ban1{
 
    margin-left: 90px;
}

.head{
margin-left: 400px;
margin-bottom: -10px;

}
.heading{

text-align: center;
font-size: 40px;
font-family: 'Poppins', sans-serif;
margin-bottom: 80px;
}
.bts1{
  
    font-size:22px;
    background-color:#5562f6 ;
    padding-top: 20px;
    padding: 10px 25px;
    margin: 10px 20px;
    text-align: center;
   width: 350px;
   margin-left: 450px;
   margin-bottom: 70px;
   border-radius: 28px;
  
    }

.bts1:hover{

background-color: #656ed4;
transition: 0.5s ease-in;
cursor: pointer;
}




.container{


margin: auto;
max-width: 1170px;

}
.row{

display: flex;
flex-wrap: wrap;

}



ul{

list-style: none;
text-decoration: none;

}


.footer{

background-color: #23272a;
padding: 90px 0;


}
.footer-cool{
width: 15%;
padding: 30px 50px;
padding-left: 120px;
}

.footer-cool h4{

font-size: 16px;
color: #3444f0;
font-family: 'Poppins', sans-serif;
margin-bottom: 20px;
}

.footer-cool ul li{

margin-bottom: 10px;
text-decoration: none;
list-style: none;
}

.footer-cool ul li a{

text-decoration: none;
color: #ffffff;
font-size: 15px;
font-weight: 200;
font-family: 'Poppins', sans-serif;

}
.footer-cool ul li a:hover{

text-decoration: underline;

}






.social-links h1{
    font-size: 35px;
    color:#5865f2;
    font-weight:900;
    font-family: 'Poppins', sans-serif;
    text-align: start;
    line-height: 28px;
    padding-left: 20px;
}
.container .social-links a{
    display: inline-block;
    padding-left: 20px;
    height:40px ;
    width:40px ;
    background-color: rgba(255, 255, 255, 0.5);
    margin:0 10px 10px 0 ;
    text-align: center;
    line-height:40px ;
    border-radius:50% ;
    color: #ffffff;
    transition:all 0.5s ease-in;
   padding: 5px 10px;
}

.qasim image{
width: 30px;



}

.logo1{

margin-top: 50px;
padding-left: 20px;

}


.social-links li{
padding-left: 20px;
display: inline-block;
color: #ffffff;
}
.social-links a:hover{
color: #24262b;
background-color: #23272a;

}






.signup-btn button{

    border-radius: 55px;
    width: 70px;
    height: 35px;
    
     background-color: #5865f2;
    margin-left: 1050px;
    padding-left:  8px 10px;
    text-align: center;
    color:#ffffff;
    padding: 5px 10px;
    border: #404eed;
    }
.signup-btn button:hover{
background-color:#7a85f6;
transition: 0.5s ease-in;


}