/* POPPINS FONT FAMILY */
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");

* {
  font-family: "Poppins", sans-serif;
}
header{
  height: 300px;
  background-color: #3400ff;
}
.nav-item{
  float: right;
  position: relative;
  right: 100px;
  margin: 10px 16px;
  color: #fff;
}
.nav-item-active{
  position: relative;
  left: 1150px;
  top: 10px;
  padding: 2px;
  border: 2px solid #fff;
  border-radius: 5px;
  font-weight: 400;
  color:#5a31fc;
  background-color: #fff;
}
svg{
  position: relative;
  left: 390px;
  top: 6px;
}
.header-image{
  float: right;
 position: relative;
 bottom: 150px;
 width: 30%;
}
.logo{
  margin-left: 50px;
}
.header-text{
  margin-left: 100px;
}
.companies{
  display: flex;
  gap: 30px;
}
.api{
  position: relative;
  top: 20px;
  left: 50px;
  font-weight: bold;
}
.cards{
  display: flex;
  flex-direction: row;
  gap: 160px;
}
.card{
  margin-bottom: 30px;
  margin-left: -10px;
}
.card-active{
  padding: 0px 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 3.5) 0px 5px 10px;
  color: #4617fe;

}
.card-logo{
  margin-left: 10px;
  margin-top: 20px;
}
.card-body{
  position: relative;
  bottom: 15px;
}
.blog-heading{
  margin-left: 40px;
}
.blog-cards img{
  width: 15%;
}
.blog-bottom img{
  position: relative;
  bottom:460px;
  left: 350px;
  width: 5%;
}
.blog-author b{
  position: relative;
  bottom: 510px;
  left: 220px;
  
}
.blog-content{
  position: relative;
  bottom: 250px;
  left: 440px;
}
.blog-card:nth-child(2){
  position: relative;
  bottom: 550px;
  left: 650px;
}
.faq-section{
  display: flex;
  flex-direction: row;
  background-color: #e9edff;
  box-shadow: rgba(0, 0, 0, .24) 0px 3px 8px;
  position: relative;
  bottom: 850px;
}
.faq-content{
  font-size: 12px;
  width: 60%;
}
.faq-image img{
 width: 30%;
 margin-left: 400px;
 margin-top: 50px;
}
.faq-content button{
  background: #5A31FC;
  border-radius: 3px;
  color: white;
  border: none;
  padding: 5px;
  padding-left: 20px;
  padding-right: 20px;
}
.download-section{
  position: relative;
  bottom: 780px;
}
.download-email{
  position: relative;
  left: 700px;
  bottom:50px;
  
}
input{
  padding: 2px 140px;
  border-radius: 10px;
  background-color: transparent;
  border: 2px solid grey;
}
form button{
  position: relative;
  right: 110px;
  padding: 2px 20px;
  border-radius: 10px;
  background-color:  #5A31FC;
  color: #fff;
}


.footer-section{
  height: 200px;
  background-color: #3C0AFE;
  position: relative;
  bottom: 900px;
}
.list{
  display: flex;
  flex-direction: row;
  list-style-type: none;
  gap: 30px;
  position: relative;
  right: 40px;
  top: 90px;
  
}
.logos-list{
  display: flex;
  flex-direction: row;
  gap: 25px;
  list-style-type: none;
  font-size: 15px;
  position: relative;
  left: 1005px;
}
.footer-logos{
  position: relative;
  left: 1018px;
  margin: 0px 20px;
}
.footer-logo{
  position: relative;
  top: 90px;
  left: 30px;
}
.card:last-child::after{
  content: ">";
  display: flex;
  background-color: #4617fe;
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  position:relative;
  bottom: 160px;
  left: 100px;
  justify-content: center;
  align-items: center;
  font-size: 30px;

}
@media screen and (max-width:480px) {
   header{
    width: 350vw;
   }
   .footer-section{
    width: 400vw;
   }
   
  }