/* start styles */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&family=VT323&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");

/* base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quicksand";
  /* font-family: "Space Grotesk", sans-serif; */
  /* font-family: 'Montserrat', sans-serif; */
  /* font-family: "Poppins"; */
}

/* body styles */

body {
  /* overflow: hidden; */
  overflow-x: hidden !important;
}

body.preloader-active {
  overflow: hidden;
}

body.modal-open {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: scroll !important;
}

/* preloader styles and animations */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-bar {
  width: 4px;
  height: 18px;
  margin: 0 8px;
  border-radius: 4px;
  animation: loading_3194 1s ease-in-out infinite;
  background-color: #3ab37a;
}

@keyframes loading_3194 {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scaleY(3);
  }

  40% {
    transform: scale(1);
  }
}

/* text styles for API section */
.api-text {
  font-family: "Space Grotesk", sans-serif;
}

.emphasis {
  color: #3ab37a;
}

a {
  text-decoration: none !important;
}

/* navbar sign-in button styles */
button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-radius: 35px; */
  background: #3ab37a;
  /* font-family: "Montserrat", sans-serif; */
  /* box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2); */
  overflow: hidden;
  border: none;
}

button:after {
  content: " ";
  width: 0%;
  height: 100%;
  background: #1f1f1f;
  position: absolute;
  transition: all 0.4s ease-in-out;
  right: 0;
}

button:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}

button span {
  text-align: center;
  text-decoration: none;
  width: 100%;
  padding: 10px 40px;
  color: #fff;
  font-weight: 700;
  z-index: 20;
  transition: all 0.3s ease-in-out;
}

button:hover span {
  color: white;
  animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

/* hero section join us button styles */
.herobtn {
  background: #1f1f1f !important;
}

/* header/hero section background color */
header {
  /* background-color: #eaf6fe; */
  background-color: #edfff7;
}

/* padding bottom for header */
.head-end {
  padding-bottom: 70px !important;
}

/* navbar dropdown icon wrapper */
.icon-wrapper {
  background-color: #e9e9e9;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: rgb(216, 216, 248);
  height: 45px !important;
  width: 40px;
}

/* nav dropdown small text */
.nav-drop {
  font-size: small !important;
}

/* nav dropdown nig text */
.nav-drop-big {
  font-size: medium;
}

/* how it works icon wrapper */
.icon {
  list-style: none;
}

.icon > li {
  display: inline-block;
  /* background-color: #00c851; */
  /* border-radius: 50%; */
}

.icon > li > a {
  color: white;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 100px;
  width: 100px;
}

/* icon animation for how it works section */
.hvr-icon-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-icon-grow .hvr-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-grow:hover .hvr-icon,
.hvr-icon-grow:focus .hvr-icon,
.hvr-icon-grow:active .hvr-icon {
  -webkit-transform: scale(1.3) translateZ(0);
  transform: scale(1.3) translateZ(0);
}

/* .svg-back {
  background-color: rgb(216, 216, 248);
} */

/* how it works cards- claymorph background */
.cardz-back {
  backdrop-filter: blur(2px);
  background-color: #edfff7;
  border-radius: 26px;
  box-shadow: 20px 20px 40px 0px rgba(155, 205, 181, 0.5),
    inset -4px -4px 12px 0px rgba(181, 239, 212, 0.6),
    inset 0px 11px 28px 0px rgb(255, 255, 255);
}

/* grow your business section background by id */
#banner {
  background: #1f1f1f !important;
}

/* Api & ready to get started background */
.end {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1000' height='560' preserveAspectRatio='none' viewBox='0 0 1000 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1008%26quot%3b)' fill='none'%3e%3crect width='1000' height='560' x='0' y='0' fill='rgba(220%2c 242%2c 232%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c376.501C72.707%2c379.034%2c147.072%2c363.305%2c206.655%2c321.561C265.109%2c280.608%2c301.796%2c215.954%2c325.33%2c148.573C347.445%2c85.253%2c348.945%2c17.491%2c335.829%2c-48.285C323.211%2c-111.565%2c287.965%2c-164.813%2c252.139%2c-218.48C211.38%2c-279.537%2c179.872%2c-353.912%2c112.437%2c-382.927C42.902%2c-412.846%2c-39.007%2c-400.82%2c-109.89%2c-374.251C-177.997%2c-348.723%2c-235.57%2c-299.301%2c-274.529%2c-237.881C-310.436%2c-181.273%2c-310.57%2c-112.352%2c-318.255%2c-45.758C-325.717%2c18.911%2c-339.819%2c83.977%2c-318.778%2c145.581C-296.54%2c210.689%2c-253.324%2c267.118%2c-197.606%2c307.48C-139.934%2c349.257%2c-71.17%2c374.022%2c0%2c376.501' fill='%2399d9bc'%3e%3c/path%3e%3cpath d='M1000 1014.4490000000001C1082.698 1001.434 1143.997 938.9010000000001 1213.96 892.928 1283.1109999999999 847.488 1379.71 824.087 1408.018 746.336 1436.34 668.544 1368.6979999999999 590.563 1353.687 509.148 1339.468 432.03 1357.585 350.797 1322.189 280.822 1281.094 199.57799999999997 1224.1390000000001 118.58699999999999 1139.351 85.41500000000002 1052.444 51.41399999999999 947.67 57.81 865.571 102.178 787.971 144.115 758.04 236.435 716.206 314.091 682.774 376.152 663.8430000000001 440.866 646.3330000000001 509.15 626.594 586.127 591.587 661.482 607.142 739.412 624.671 827.23 664.5319999999999 916.491 737.8910000000001 967.8489999999999 812.0889999999999 1019.794 910.527 1028.53 1000 1014.4490000000001' fill='white'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1008'%3e%3crect width='1000' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: cover;
}

/* glassmorph background for sign-up/sign in  */
.form-back {
  background: rgba(237, 255, 247, 0.49);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 4px solid rgba(237, 255, 247, 0.37);
}

/* form input backgrounds */
.myinput {
  background: rgba(255, 255, 255, 0.165) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid #22724d6f !important;
  caret-color: #3ab37a;
}

.diva {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3ab37a;
}

/* For Webkit browsers */
::-webkit-scrollbar {
  width: 8px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #3ab37a;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-track:hover {
  background-color: #ccc;
}

@media (max-width: 768px) {
  .footer-image {
    width: 85%;
  }

  .worksp{
    font-size: small;
  }
}

/* @media screen and (min-width: 768px) and (max-width: 1024px) {
  .footer-image{
    width: 100%;
  }
} */


.content {
  overflow: hidden;
}

.content p {
  height: 50px; /* Set the default height of the paragraph */
  overflow: hidden;
}

.expanded p {
  height: auto;
}