@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
/**
*
* Testing
*
**/
* {
  box-sizing: border-box;
}

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(151deg, rgb(10, 9, 38) 0%, rgb(12, 27, 62) 0%, rgb(24, 40, 101) 40%, rgb(27, 42, 97) 43%, rgb(29, 43, 97) 43%, rgb(27, 42, 99) 46%, rgb(25, 41, 102) 51%, rgb(23, 40, 104) 54%, rgb(21, 38, 107) 59%, rgb(12, 9, 57) 91%, rgb(7, 19, 69) 100%, rgb(0, 26, 130) 100%) no-repeat;
  font-family: 'Jost', sans-serif;
  width: 100vw;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/*header styling*/
header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 10%;
  /*navbar styling*/
  /* hamburger menu */
  /*hamburger menu list*/
  /*navbar buttons*/
}
header .logo {
  margin-top: 12px;
  margin-right: auto;
  z-index: 2;
}
header .navbar ul li {
  display: inline-block;
  padding: 20px;
  list-style: none;
}
header .navbar ul li a {
  text-decoration: none;
  color: white;
  transition: color 0.3s ease-in-out;
}
header .navbar ul li a:hover {
  transition: color 0.3s ease-in-out;
  color: #2D83EE;
}
@media (min-width: 1106px) and (max-width: 1366px) {
  header .navbar ul li {
    padding: 20px 7px;
  }
}
@media (max-width: 1105px) {
  header .navbar ul {
    display: none;
  }
}
header .navmenu {
  position: absolute;
  right: 40px;
  display: none;
}
@media (min-width: 360px) and (max-width: 1105px) {
  header .navmenu {
    display: block;
  }
}
header .navbar-hidden {
  display: none;
  position: absolute;
  background-color: lightblue;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80vh;
  width: 100vw;
  padding: 50px;
  z-index: 0;
}
header .navbar-hidden ul {
  padding: 0;
}
header .navbar-hidden li {
  list-style: none;
  padding: 10px 0px;
  font-size: 22px;
}
header .navbar-hidden button {
  margin-left: 0 !important;
  display: block !important;
}
header .navbar-hidden a {
  padding: 20px 0px;
  text-decoration: none;
  color: white;
  color: #2D83EE;
}
header .navbar-hidden.active {
  display: block;
}
header button {
  margin-left: 35px;
  padding: 10px 40px !important;
  transition: scale 0.3s ease-in-out;
  background: linear-gradient(253deg, rgb(113, 132, 253), rgb(63, 122, 240), rgb(79, 55, 238) 100%);
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.1607843137);
  border-radius: 10px;
  border-style: hidden;
  color: white;
  font: inherit;
  padding: 10px 60px;
}
header button:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
@media (min-width: 360px) and (max-width: 768px) {
  header button {
    display: none;
  }
}

/*hero section*/
.hero {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 80px 10%;
  /*hero text styling*/
}
.hero .hero-text {
  margin-left: 50px;
  /*hero section buttons*/
  /*request free quote*/
  /*explore services*/
}
.hero .hero-text h1 {
  font-size: 60px;
  font-weight: 400;
  width: 80%;
  color: white;
}
@media (max-width: 1366px) and (min-width: 1105px) {
  .hero .hero-text h1 {
    width: 100%;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .hero .hero-text h1 {
    font-size: 40px;
  }
}
.hero .hero-text h3 {
  font-size: 32px;
  font-weight: 400;
  color: white;
  width: 57%;
}
@media (min-width: 360px) and (max-width: 767px) {
  .hero .hero-text h3 {
    font-size: 20px;
    width: 80%;
  }
}
.hero .hero-text a {
  padding: 10px 0px;
}
.hero .hero-text button {
  font: inherit;
  font-size: 20px;
  border-radius: 10px;
  border-style: hidden;
  color: white;
  padding: 15px 50px;
}
@media (min-width: 360px) and (max-width: 767px) {
  .hero .hero-text button {
    font-size: 20px;
    padding: 10px 20px;
  }
}
.hero .hero-text .quote-request {
  background: linear-gradient(253deg, rgb(113, 132, 253), rgb(63, 122, 240), rgb(79, 55, 238) 100%);
  transition: scale 0.3s ease-in-out;
}
.hero .hero-text .quote-request:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
@media (min-width: 360px) and (max-width: 767px) {
  .hero .hero-text .quote-request {
    margin-left: -40px;
  }
}
.hero .hero-text .explore {
  background: #132D6B;
  border: 1px solid #7184FD;
  margin-left: 40px;
  transition: background-color 0.3s ease-in-out;
}
.hero .hero-text .explore:hover {
  transition: background-color 0.3s ease-in-out;
  background: #2D83EE;
}
@media (min-width: 360px) and (max-width: 767px) {
  .hero .hero-text .explore {
    margin-left: -40px;
  }
}
.hero .explore-buttons {
  display: flex;
}
@media (min-width: 360px) and (max-width: 767px) {
  .hero .explore-buttons {
    flex-direction: column;
    justify-content: center;
  }
}
@media (min-width: 1105px) and (max-width: 1366px) {
  .hero {
    padding: 80px;
  }
}
@media (max-width: 1105px) and (min-width: 360px) {
  .hero {
    flex-direction: column;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .hero {
    text-align: center;
    padding: 10px;
  }
}

/*company info*/
.add-info {
  padding: 10px;
  margin-left: 150px;
}
.add-info .info-text {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.add-info .info-text .info1, .add-info .info-text .info2, .add-info .info-text .info3 {
  display: flex;
  align-items: center;
  gap: 20px;
}
.add-info .info-text .info1 h1, .add-info .info-text .info2 h1, .add-info .info-text .info3 h1 {
  font-size: 50px;
  color: #2D83EE;
  font-weight: 600;
}
.add-info .info-text .info1 p, .add-info .info-text .info2 p, .add-info .info-text .info3 p {
  font-size: 22px;
  font-weight: 600;
  width: 37%;
  color: white;
  text-align: left;
}
@media (min-width: 360px) and (max-width: 767px) {
  .add-info .info-text .info1 p, .add-info .info-text .info2 p, .add-info .info-text .info3 p {
    width: auto;
  }
}
.add-info .info-text .info2 p {
  width: 44%;
}
@media (min-width: 360px) and (max-width: 1105px) {
  .add-info .info-text {
    flex-direction: column;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .add-info .info-text {
    margin-left: -120px;
  }
}

/*services section*/
.services {
  background-color: white;
  padding: 60px 230px;
  /*smart contract auditing*/
  /*penetration testing*/
  /*due diligence*/
}
.services .heading .service-heading {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #2D83EE;
  width: 10%;
}
.services .heading h3 {
  margin-top: -10px;
  font-weight: 600;
  font-size: 40px;
  width: 18%;
}
.services .pathfund-image {
  margin-left: -50px;
  width: 110%;
}
.services img {
  padding: 0px 50px;
}
.services .service-sca {
  margin-top: 40px;
  padding: 4rem;
  gap: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /*list of platforms*/
}
.services .service-sca .service-heading {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #2D83EE;
  margin-bottom: -40px;
}
.services .service-sca .sca-info h3 {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.7px;
}
.services .service-sca .sca-info p {
  font-size: 18px;
  line-height: 2rem;
  margin-top: -30px;
  width: 76%;
}
.services .service-sca .sca-info a {
  text-decoration: none;
  color: white;
}
.services .service-sca .sca-info button {
  background: linear-gradient(253deg, rgb(113, 132, 253), rgb(63, 122, 240), rgb(79, 55, 238) 100%);
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.1607843137);
  border-radius: 10px;
  border-style: hidden;
  color: white;
  font: inherit;
  padding: 10px 60px;
  transition: scale 0.3s ease-in-out;
  margin-top: 20px;
}
.services .service-sca .sca-info button:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
.services .service-sca .sca-example {
  font-size: 18px;
}
.services .service-sca .sca-example ul {
  margin: 0;
  padding: 0;
}
.services .service-sca .sca-example ul li {
  line-height: 2rem;
  list-style: none;
}
.services .service-sca .sca-example ul li img {
  padding: 0;
  margin-right: 10px;
}
@media (max-width: 1105px) and (min-width: 360px) {
  .services .service-sca {
    flex-direction: column;
    padding: 0;
    gap: 0;
  }
}
.services .service-pentest {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem;
}
.services .service-pentest .pentest-info .service-heading {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #2D83EE;
  margin-bottom: -35px;
}
.services .service-pentest .pentest-info h3 {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.7px;
}
.services .service-pentest .pentest-info p {
  font-size: 18px;
  line-height: 2rem;
  margin-top: -30px;
  width: 60%;
}
.services .service-pentest .pentest-info a {
  text-decoration: none;
  color: white;
}
.services .service-pentest .pentest-info button {
  background: linear-gradient(253deg, rgb(113, 132, 253), rgb(63, 122, 240), rgb(79, 55, 238) 100%);
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.1607843137);
  border-radius: 10px;
  border-style: hidden;
  color: white;
  font: inherit;
  padding: 10px 60px;
  transition: scale 0.3s ease-in-out;
  margin-top: 20px;
}
.services .service-pentest .pentest-info button:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
@media (min-width: 360px) and (max-width: 767px) {
  .services .service-pentest {
    flex-direction: column-reverse;
    padding: 2rem;
  }
}
.services .service-diligence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rem;
  padding: 2rem 8rem;
}
.services .service-diligence .diligence-info .service-heading {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #2D83EE;
  margin-bottom: -35px;
}
.services .service-diligence .diligence-info h3 {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.7px;
}
.services .service-diligence .diligence-info p {
  font-size: 18px;
  line-height: 2rem;
  margin-top: -30px;
  width: 95%;
}
.services .service-diligence .diligence-info a {
  text-decoration: none;
  color: white;
}
.services .service-diligence .diligence-info button {
  background: linear-gradient(253deg, rgb(113, 132, 253), rgb(63, 122, 240), rgb(79, 55, 238) 100%);
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.1607843137);
  border-radius: 10px;
  border-style: hidden;
  color: white;
  font: inherit;
  padding: 10px 60px;
  transition: scale 0.3s ease-in-out;
  margin-top: 20px;
}
.services .service-diligence .diligence-info button:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
.services .service-diligence .diligence-info .diligence-example {
  font-size: 18px;
}
.services .service-diligence .diligence-info .diligence-example ul {
  margin: 0;
  padding: 0;
}
.services .service-diligence .diligence-info .diligence-example ul li {
  line-height: 2rem;
  list-style: none;
}
.services .service-diligence .diligence-info .diligence-example ul li img {
  padding: 0;
  margin-right: 10px;
}
@media (max-width: 1105px) and (min-width: 360px) {
  .services .service-diligence {
    flex-direction: column;
    padding: 0;
    gap: 0;
    margin-bottom: 100px;
  }
}
.services .security {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.services .security .service-heading {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #2D83EE;
  letter-spacing: 4.8px;
  margin-bottom: -30px;
}
.services .security h3 {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.7px;
}
.services .security .security-image {
  background-image: url("../images/security.png");
  height: 270px;
  background-size: contain;
  background-repeat: no-repeat;
  width: 120%;
}
@media (max-width: 1366px) and (min-width: 1105px) {
  .services .security .security-image {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1105px) {
  .services .security .security-image {
    width: 250%;
    height: 350px;
  }
}
@media (min-width: 360px) and (max-width: 768px) {
  .services .security .security-image {
    background-image: url("../images/securitysmall.png");
    height: 1354px;
    margin-bottom: -600px;
  }
}
@media (max-width: 1366px) and (min-width: 1105px) {
  .services {
    padding: 60px 20px;
  }
}
@media (min-width: 360px) and (max-width: 768px) {
  .services {
    padding: 40px 30px;
  }
}

.portfolio {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem;
  flex-direction: column;
}
.portfolio .portfolio-container .service-heading {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #2D83EE;
}
.portfolio .portfolio-container h3 {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.7px;
  color: white;
}
.portfolio .portfolio-container a {
  text-decoration: none;
  color: white;
  padding: 0px 10px;
}
.portfolio .portfolio-container .portfolio-buttons {
  margin-top: -10px;
}
.portfolio .portfolio-container .portfolio-buttons button {
  padding: 7px 25px;
  border-radius: 20px;
  border: 1px solid white;
  background: transparent;
  color: white;
  font: inherit;
  transition: background-color 0.3s ease-in-out;
}
.portfolio .portfolio-container .portfolio-buttons button:hover {
  transition: background-color 0.3s ease-in-out;
  background: #2D83EE;
}
.portfolio .portfolio-container .portfolio-buttons .default-button {
  background: #2D83EE;
  border-style: hidden;
}
.portfolio .reports {
  padding: 6rem;
  display: grid;
  grid-template-columns: repeat(5, 2fr);
  gap: 10rem;
  opacity: 1;
}
.portfolio .reports p {
  font-size: 22px;
  color: white;
  font-weight: 600;
}
@media (min-width: 360px) and (max-width: 1105px) {
  .portfolio .reports .arrow {
    display: none;
  }
}
.portfolio .reports .report1 .cta a, .portfolio .reports .report2 .cta a, .portfolio .reports .report3 .cta a {
  padding: 0px 15px;
}
.portfolio .reports .report1 .cta button, .portfolio .reports .report2 .cta button, .portfolio .reports .report3 .cta button {
  padding: 10px 60px;
  font-size: 14px;
  font: inherit;
  border-radius: 5px;
  background: transparent;
  color: white;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2941176471);
  transition: background-color 0.3s ease-in-out;
}
.portfolio .reports .report1 .cta button:hover, .portfolio .reports .report2 .cta button:hover, .portfolio .reports .report3 .cta button:hover {
  transition: background-color 0.3s ease-in-out;
  background: #2D83EE;
}
@media (min-width: 1105px) and (max-width: 1366px) {
  .portfolio .reports {
    gap: 5rem;
    margin-right: 100px;
  }
}
@media (min-width: 360px) and (max-width: 1105px) {
  .portfolio .reports {
    grid-template-columns: auto;
  }
}
.portfolio .placeholder {
  padding: 10px 60px;
  font-size: 14px;
  font: inherit;
  border-radius: 5px;
  background: transparent;
  color: white;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2941176471);
}

.misc {
  background-color: white;
  display: flex;
  justify-content: space-around;
  padding: 6rem;
  /*box alignment*/
}
.misc .misc-info .service-heading {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #2D83EE;
}
.misc .misc-info h3 {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.7px;
  width: 50%;
}
@media (min-width: 768px) and (max-width: 1105px) {
  .misc .misc-info h3 {
    width: 100%;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .misc .misc-info h3 {
    width: 100%;
    font-size: 30px;
  }
}
.misc .misc-info button {
  background: linear-gradient(253deg, rgb(113, 132, 253), rgb(63, 122, 240), rgb(79, 55, 238) 100%);
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.1607843137);
  border-radius: 10px;
  border-style: hidden;
  color: white;
  font: inherit;
  padding: 10px 60px;
  transition: scale 0.3s ease-in-out;
  padding: 15px 30px !important;
}
.misc .misc-info button:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
@media (min-width: 360px) and (max-width: 767px) {
  .misc .misc-info button {
    margin-bottom: 30px;
  }
}
.misc .misc-info-boxes {
  display: block;
  /*overlapping box*/
}
.misc .misc-info-boxes .box1, .misc .misc-info-boxes .box2, .misc .misc-info-boxes .box3, .misc .misc-info-boxes .box4, .misc .misc-info-boxes .box5 {
  border: 1px solid #2D83EE;
  padding: 2rem 0.5rem;
  border-radius: 15px;
  color: #2D83EE;
  font-weight: 600;
}
.misc .misc-info-boxes .box1 {
  width: 70%;
  margin-left: auto;
  text-align: center;
}
.misc .misc-info-boxes .box2 {
  position: relative;
  width: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: 100px;
  font-size: 16px;
}
.misc .misc-info-boxes .box3 {
  position: relative;
  background-color: #4A4BEE;
  color: white;
  margin-top: -35px;
  width: 80%;
  text-align: center;
  font-size: 22px;
}
@media (min-width: 360px) and (max-width: 1105px) {
  .misc .misc-info-boxes .box3 {
    position: relative;
    margin-top: 0;
    right: 0;
    width: 80%;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .misc .misc-info-boxes .box3 {
    font-size: 16px;
  }
}
.misc .misc-info-boxes .box4 {
  width: 80%;
  text-align: center;
  margin-left: 80px;
}
.misc .misc-info-boxes .box5 {
  width: 70%;
  margin-left: auto;
  text-align: center;
}
@media (min-width: 360px) and (max-width: 1105px) {
  .misc {
    flex-direction: column;
    padding: 4rem;
  }
}

.mentions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: white;
  padding: 2rem;
}
.mentions .mentions-heading {
  text-align: center;
}
.mentions .mentions-heading .service-heading {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #2D83EE;
  margin-bottom: -30px;
}
.mentions .mentions-heading h3 {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.7px;
}
.mentions .sites {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  gap: 25px;
}
.mentions .sites .site1, .mentions .sites .site2, .mentions .sites .site3, .mentions .sites .site4, .mentions .sites .site5, .mentions .sites .site6 {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #2D83EE;
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.1607843137);
  border-radius: 15px;
  transition: scale 0.3s ease-in-out;
}
.mentions .sites .site1 a, .mentions .sites .site2 a, .mentions .sites .site3 a, .mentions .sites .site4 a, .mentions .sites .site5 a, .mentions .sites .site6 a {
  text-decoration: none;
  font-weight: 600;
  font-size: 22px;
  text-align: center;
  color: #2D83EE;
}
@media (max-width: 1366px) and (min-width: 1105px) {
  .mentions .sites .site1, .mentions .sites .site2, .mentions .sites .site3, .mentions .sites .site4, .mentions .sites .site5, .mentions .sites .site6 {
    width: 80%;
    padding: 0;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .mentions .sites .site1, .mentions .sites .site2, .mentions .sites .site3, .mentions .sites .site4, .mentions .sites .site5, .mentions .sites .site6 {
    width: 70%;
  }
}
.mentions .sites .site1:hover, .mentions .sites .site2:hover, .mentions .sites .site3:hover, .mentions .sites .site4:hover, .mentions .sites .site5:hover, .mentions .sites .site6:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
@media (max-width: 1366px) and (min-width: 1105px) {
  .mentions .sites {
    margin-left: 100px;
  }
}
@media (min-width: 360px) and (max-width: 1105px) {
  .mentions .sites {
    grid-template-columns: auto;
    justify-items: center;
  }
}

.testimonials {
  background-color: white;
  margin-top: -80px;
  padding: 15rem;
  /*testimonials*/
}
.testimonials .testimonial-headings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*read more button*/
}
.testimonials .testimonial-headings .service-heading {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #2D83EE;
  margin-bottom: -30px;
}
.testimonials .testimonial-headings h3 {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.7px;
}
.testimonials .testimonial-headings button {
  margin-top: 20px;
  background: linear-gradient(253deg, rgb(113, 132, 253), rgb(63, 122, 240), rgb(79, 55, 238) 100%);
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.1607843137);
  border-radius: 10px;
  border-style: hidden;
  color: white;
  font: inherit;
  padding: 10px 60px;
  transition: scale 0.3s ease-in-out;
  padding: 15px 50px;
}
.testimonials .testimonial-headings button:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
@media (min-width: 360px) and (max-width: 1105px) {
  .testimonials .testimonial-headings {
    flex-direction: column;
    align-items: stretch;
  }
}
.testimonials .testimonial-info {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  place-content: center;
  text-align: center;
  padding: 40px;
  gap: 10rem;
}
@media (min-width: 360px) and (max-width: 1105px) {
  .testimonials .testimonial-info {
    grid-template-columns: auto;
    gap: 40px;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .testimonials .testimonial-info {
    justify-items: center;
  }
}
@media (max-width: 1366px) and (min-width: 1105px) {
  .testimonials {
    padding: 9rem;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .testimonials {
    margin-top: 0;
    padding: 4rem;
  }
}

.faqs {
  background-color: white;
  margin-top: -200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 2rem 20rem;
  gap: 10rem;
}
.faqs .faqs-title .service-heading {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #2D83EE;
  margin-bottom: -30px;
}
.faqs .faqs-title h3 {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.7px;
}
.faqs .faqs-title p {
  font-size: 18px;
  line-height: 2rem;
}
.faqs .faqs-title button {
  background: linear-gradient(253deg, rgb(113, 132, 253), rgb(63, 122, 240), rgb(79, 55, 238) 100%);
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.1607843137);
  border-radius: 10px;
  border-style: hidden;
  color: white;
  font: inherit;
  padding: 10px 60px;
  transition: scale 0.3s ease-in-out;
  padding: 15px 50px;
}
.faqs .faqs-title button:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
.faqs .faqs-info h4 {
  font-size: 22px;
  font-weight: 600;
}
@media (min-width: 360px) and (max-width: 767px) {
  .faqs .faqs-info h4 {
    font-size: 18px;
  }
}
.faqs .faqs-info .question:after {
  content: url("../images/downarrow.png");
}
.faqs .faqs-info .answer {
  height: 0;
  overflow: hidden;
  transition: 600ms;
  overflow-y: auto;
}
.faqs .faqs-info .faq {
  border: 1px solid #2D83EE;
  width: 80%;
  padding: 0.5rem 2rem;
}
.faqs .faqs-info .faq.active .answer {
  height: 200px;
}
.faqs .faqs-info .faq.active .question::after {
  content: url("../images/uparrow.png");
}
@media (max-width: 1366px) and (min-width: 1105px) {
  .faqs .faqs-info .faq {
    width: 100%;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .faqs .faqs-info .faq {
    width: 120%;
  }
}
.faqs .faqs-info .faq.first {
  border-radius: 6px 6px 0px 0px;
}
.faqs .faqs-info .faq.first .question {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faqs .faqs-info .faq.first img {
  scale: 1.3;
}
.faqs .faqs-info .faq.first p {
  font-size: 18px;
  line-height: 30px;
  width: 90%;
}
@media (min-width: 360px) and (max-width: 767px) {
  .faqs .faqs-info .faq.first p {
    width: 100%;
    font-size: 16px;
  }
}
.faqs .faqs-info .faq.second .question, .faqs .faqs-info .faq.third .question, .faqs .faqs-info .faq.last .question {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faqs .faqs-info .faq.second .question img, .faqs .faqs-info .faq.third .question img, .faqs .faqs-info .faq.last .question img {
  scale: 1.3;
}
.faqs .faqs-info .faq.last {
  border-radius: 0px 0px 6px 6px;
}
@media (max-width: 1366px) and (min-width: 1105px) {
  .faqs {
    padding: 2rem 10rem;
  }
}
@media (min-width: 360px) and (max-width: 1105px) {
  .faqs {
    padding: 2rem 6rem;
    flex-direction: column;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .faqs {
    padding: 2rem 4rem;
    margin-top: 0px;
  }
}

.blog {
  background-color: white;
  margin-top: -20px;
  padding: 1rem 12rem;
}
.blog .blog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blog .blog-heading .service-heading {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #2D83EE;
  margin-bottom: -30px;
}
.blog .blog-heading h3 {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.7px;
}
.blog .blog-heading button {
  background: linear-gradient(253deg, rgb(113, 132, 253), rgb(63, 122, 240), rgb(79, 55, 238) 100%);
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.1607843137);
  border-radius: 10px;
  border-style: hidden;
  color: white;
  font: inherit;
  padding: 10px 60px;
  transition: scale 0.3s ease-in-out;
  padding: 15px 50px;
  margin-right: 50px;
}
.blog .blog-heading button:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
@media (min-width: 360px) and (max-width: 767px) {
  .blog .blog-heading {
    flex-direction: column;
    margin-bottom: 20px;
  }
}
.blog .blog-content {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  justify-content: center;
  gap: 7rem;
}
.blog .blog-content h4 {
  font-size: 22px;
  color: #2D83EE;
  font-weight: 600;
}
.blog .blog-content .blog-item {
  width: 90%;
}
@media (max-width: 1366px) and (min-width: 1105px) {
  .blog .blog-content {
    gap: 2rem;
  }
}
@media (max-width: 1105px) and (min-width: 360px) {
  .blog .blog-content {
    grid-template-columns: auto;
    place-content: center;
    justify-items: center;
  }
}
@media (max-width: 1105px) and (min-width: 360px) {
  .blog {
    padding: 1rem 3rem;
  }
}

.hashingbits {
  display: flex;
  justify-content: space-between;
  padding: 4rem 10rem;
  height: 80vh;
}
.hashingbits .hashingbits-info {
  color: white;
  font-size: 18px;
}
.hashingbits .hashingbits-info img {
  padding: 0.5rem;
}
@media (min-width: 360px) and (max-width: 767px) {
  .hashingbits .hashingbits-info img {
    width: 80%;
  }
}
.hashingbits .hashingbits-info input {
  width: 60%;
  padding: 1.3rem;
  border-radius: 15px;
  border-style: hidden;
  background: rgba(0, 0, 0, 0.3019607843) 10% 10% no-repeat padding-box;
  opacity: 0.7;
  color: white;
  font: inherit;
  font-size: 16px;
}
@media (min-width: 360px) and (max-width: 767px) {
  .hashingbits .hashingbits-info input {
    width: 100%;
  }
}
.hashingbits .hashingbits-info .emailcheck {
  margin-top: 40px;
}
@media (min-width: 360px) and (max-width: 767px) {
  .hashingbits .hashingbits-info .emailcheck {
    display: none;
  }
}
.hashingbits .mail-image .backdrop {
  margin-top: -100px;
  margin-right: -100px;
}
@media (min-width: 360px) and (max-width: 767px) {
  .hashingbits .mail-image .backdrop {
    margin-top: -222px;
    width: 110%;
    margin-bottom: 201px;
  }
}
@media (min-width: 768px) and (max-width: 360px) {
  .hashingbits .mail-image .backdrop {
    margin-top: -12px;
    margin-left: -378px;
  }
}
.hashingbits .mail {
  position: relative;
  bottom: 84%;
  left: 37%;
  right: 20%;
  margin-top: 70px;
  margin-right: -70px;
}
@media (min-width: 360px) and (max-width: 767px) {
  .hashingbits .mail {
    display: none;
  }
}
@media (max-width: 1366px) and (min-width: 1105px) {
  .hashingbits .mail {
    left: 30%;
    bottom: 60%;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .hashingbits {
    padding: 1rem;
    height: 100vh;
    flex-direction: column;
  }
}
@media (max-width: 1366px) and (min-width: 768px) {
  .hashingbits {
    height: auto;
  }
}

.apply {
  background-color: white;
  margin-top: -160px;
  padding: 6rem 2rem;
  display: flex;
  justify-content: center;
}
.apply .card {
  border-radius: 30px;
  background-color: #2D83EE;
  padding: 3rem 6rem;
  width: 65%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.apply .card .card-info {
  width: 40%;
}
.apply .card .card-info h3 {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.7px;
  color: white;
}
@media (min-width: 360px) and (max-width: 767px) {
  .apply .card .card-info h3 {
    font-size: 28px;
  }
}
.apply .card .card-info p {
  font-size: 18px;
  line-height: 2rem;
  color: white;
  font-size: 16px;
  font-weight: 400;
}
.apply .card .card-info button {
  background: linear-gradient(253deg, rgb(113, 132, 253), rgb(63, 122, 240), rgb(79, 55, 238) 100%);
  box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.1607843137);
  border-radius: 10px;
  border-style: hidden;
  color: white;
  font: inherit;
  padding: 10px 60px;
  transition: scale 0.3s ease-in-out;
  padding: 15px 50px;
  background: white;
  color: black;
  margin-top: 60px;
}
.apply .card .card-info button:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
@media (min-width: 360px) and (max-width: 767px) {
  .apply .card .card-image img {
    width: 100%;
  }
}
@media (max-width: 1366px) and (min-width: 1105px) {
  .apply .card {
    padding: 3rem 2rem;
    width: 80%;
  }
}
@media (min-width: 360px) and (max-width: 1105px) {
  .apply .card {
    padding: 3rem 0rem;
    width: auto;
    flex-direction: column;
  }
}

footer {
  background-color: #28293E;
  margin-top: -20px;
  padding: 2rem 12rem;
  color: white;
}
footer h4 {
  font-weight: 600;
  font-size: 22px;
}
footer .footer-main {
  display: grid;
  grid-template-columns: repeat(4, 2fr);
  gap: 11rem;
  justify-content: center;
}
footer .footer-main select {
  padding: 0.5rem 2rem;
  margin-bottom: 10px;
  background-color: white;
  font: inherit;
  font-weight: 600;
}
footer .footer-main .company-text {
  line-height: 30px;
}
footer .footer-main ul {
  margin: 0;
  padding: 0;
  line-height: 32px;
}
footer .footer-main ul li {
  list-style: none;
}
footer .footer-main ul li a {
  text-decoration: none;
  color: white;
  font-size: 18px;
}
@media (min-width: 768px) and (max-width: 1105px) {
  footer .footer-main {
    grid-template-columns: repeat(2, 2fr);
    gap: 5rem;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  footer .footer-main {
    grid-template-columns: repeat(1, 2fr);
    gap: 2rem;
    text-align: center;
  }
}
footer .footer-links {
  text-align: center;
}
footer .footer-links a {
  padding: 0px 10px;
}
footer .footer-links img {
  transition: scale 0.3s ease-in-out;
}
footer .footer-links img:hover {
  transition: scale 0.3s ease-in-out;
  scale: 1.05;
}
footer .footer-copyright {
  margin-top: 40px;
  margin-bottom: -30px;
  border-top: 1px solid #3A3C56;
  font-size: 16px;
  color: #DFDFDF;
  text-align: center;
}
@media (min-width: 360px) and (max-width: 1105px) {
  footer {
    padding: 2rem 1rem;
  }
}/*# sourceMappingURL=styles.css.map */