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



/* 1  */

.nav1 {
  background: rgb(50, 50, 190);
  background: linear-gradient(90deg, rgba(50, 50, 190, 1) 7%, rgba(27, 109, 200, 1) 74%);
}

.client-text1 {
  font-family: 'Jost', sans-serif;
  width: 80px;
  height: 23px;
  font-size: 16px;
  letter-spacing: 3px;
  color: #2D83EE;
}

.client-text2 {
  font-family: 'Jost', sans-serif;
  width: 143px;
  height: 58px;
  font-size: 40px;
  color: #391400;
}

.client-text3>h3 {
  width: 147px;
  height: 42px;
  color: #2D83EE;
}

.animation-text1 {
  color: rgba(57, 20, 0, 1);
  font-family: 'Jost', sans-serif;
  font-size: 40px;
}

.animation-text2 {
  color: rgba(57, 20, 0, 1);
  font-family: 'Jost', sans-serif;
  font-size: 18px;
}

.animation-btn {
  width: 175px;
  height: 50px;
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  opacity: 1;

}

.secure-text1 {
  font-family: 'Jost', sans-serif;
  height: 23px;
  font-size: 16px;
  letter-spacing: 4.8px;
  color: #2D83EE;

}

.secure-text2 {
  font-family: 'Jost', sans-serif;
  height: 58px;
  font-size: 40px;
  color: rgba(57, 20, 0, 1);

}

.portfolio-text2 {
  font-family: 'Jost', sans-serif;
  height: 58px;
  color: rgba(255, 255, 255, 1);
  font-size: 40px;
}

.portfolio-btn1 {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 28px;
  background: rgba(45, 131, 238, 1);
  height: 38px;
}

.portfolio-btn2 {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(227, 227, 227, 1);

  border-radius: 28px;
  height: 38px;
}

.view-btn {
  width: 170px;
  height: 48px;

  border: 1px solid rgba(255, 255, 255, 0.29);
  border-radius: 6px;
  opacity: 1;
}

.blog-text1 {
  font-family: 'Jost', sans-serif;

  height: 23px;
  text-align: left;
  font-size: 16px;
  letter-spacing: 3px;
  color: rgba(45, 131, 238, 1);
  text-transform: uppercase;
  opacity: 1;
}

.blog-text2 {
  font-family: 'Jost', sans-serif;
  width: 366px;
  height: 58px;
  text-align: left;
  font-size: 40px;
  color: rgba(57, 20, 0, 1);
  opacity: 1;
}

.blog-text3 {
  font-family: 'Jost', sans-serif;

  height: 64px;
  text-align: left;
  font-size: 22px;

  color: rgba(45, 131, 238, 1);
  opacity: 1;
}

.blog-text4 {
  font-family: 'Jost', sans-serif;

  text-align: left;
  font-size: 16px;
  letter-spacing: 0px;
  color: rgba(57, 20, 0, 1);
  opacity: 1;
}

.hash1 {

  font-family: 'Jost', sans-serif;
  text-align: left;
  font-size: 18px;
  letter-spacing: 0px;
  color: white;
  opacity: 1;

}

.footer-text {
  font-family: 'Jost', sans-serif;
  font: 18px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}


@media only screen and (max-device-width: 320px) {
  .hero-heading {
    font-family: 'Jost', sans-serif;
    width: 300px;
    line-height: 40px;
    font-size: x-large;
    color: white;
  }

  .hero-subheading {
    color: white;
  }

  .animation1 {
    width: 10px;
    height: 10px;
  }

  .animation2 {
    width: 10px;
    height: 10px;
  }

  .hero-image2 {
    width: 175px;
    height: 160px;

  }

  .hero2 {
    background-color: #2D83EE;
    /* width: 1255px;  */
    height: 580px;
    border-radius: 30px
  }

}


/* @media only screen and (min-device-width: 720px) {
  .hero-heading{
    height: 261px;
    width: 752px;
    font-family: 'Jost', sans-serif;
    font-size: 60px;
    color: #FFFFFF;
    text-align: left;
 
    line-height: 87px;
  
  }
  } */

@media screen and (min-width: 1024px) {
  .hero-heading {
    height: 261px;
    width: 752px;
    font-family: 'Jost', sans-serif;
    font-size: 60px;
    color: #FFFFFF;
    text-align: left;

    line-height: 87px;

  }

  .animation-first {
    margin-left: 11rem;
    margin-top: -3rem;
  }

  .hero-subheading {
    height: 46px;
    width: 554px;
    font-family: 'Jost', sans-serif;
    font-size: 28px;
    color: #FFFFFF;
    text-align: left;
    /* line-height-step: 87; */
    line-height: 46px;
  }

  .onabove {
    position: absolute;
    top: 3620px;
    height: 60px;
    width: 340px;
    background-color: blueviolet;
    z-index: 1;

  }

  .below {
    margin-top: -20;
  }

  .hero2 {
    background-color: #2D83EE;
    width: 1100px;
    height: 580px;
    border-radius: 30px;
    margin-left: 5rem;

  }

  .hero-image2 {
    width: 460px;
    height: 440px;

  }

  .why-text-1 {
    font-family: 'Jost', sans-serif;

    height: 122px;


    font: 40px;
    color: rgba(57, 20, 0, 1);
    opacity: 1;
  }

  .textimonal-text1 {
    font-family: 'Jost', sans-serif;
    height: 80px;
    text-align: center;
    font: 18px;
    color: rgba(57, 20, 0, 1);
    opacity: 1;
  }

  .faq1 {
    font-family: 'Jost', sans-serif;
    width: 306px;
    height: 122px;

    text-align: left;
    font-size: 40px;

    color: rgba(57, 20, 0, 1);
    opacity: 1;
  }

  .faq2 {
    font-family: 'Jost', sans-serif;
    width: 470px;
    height: 67px;

    text-align: left;
    font-size: 18px;
    letter-spacing: 0px;
    color: rgba(57, 20, 0, 1);
    opacity: 1;
  }

  .join-text1 {
    font-family: 'Jost', sans-serif;
    width: 448px;
    height: 130px;

    text-align: left;
    font-size: 45px;
    letter-spacing: 0px;

    opacity: 1;
  }

  .join-text2 {
    width: 504px;
    height: 46px;

    text-align: left;
    font-size: 16px;
    letter-spacing: 0px;

    opacity: 1;
  }
}