@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);
body,
html {
  scroll-behavior: smooth !important;
}
.navbar {
  color: #fff;
  height: 8rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1180px;
  padding: 2rem;
}
.navbar,
.navbar .logo {
  align-items: center;
  display: flex;
}
.navbar .logo {
  height: 3rem;
  justify-content: center;
  /* overflow: hidden; */
  width: 8rem;
}
.navbar .logo .icon {
  height: 7rem;
  width: 7rem;
}
.navbar .hamburger-icon .icon {
  background-color: rgba(240, 240, 245, 0.2);
  border-radius: 2rem;
  height: 3rem;
  padding: 5px;
  width: 5rem;
}
.navbar .links {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 200px -10px gray;
  color: #333;
  display: block;
  height: 600px;
  left: 2rem;
  position: absolute;
  right: 2rem;
  top: 1rem;
  z-index: 1;
}
.navbar .links-media {
  display: none;
}
.navbar .active {
  right: 0;
}
.navbar .nav-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.navbar .nav-list .list-head {
  display: flex;
  justify-content: space-between;
}
.navbar .nav-list .list-head .logo {
  color: #99cc34;
  height: 3rem;
  width: 6rem;
}
.navbar .nav-list .list-head .logo .icon {
  height: 6rem;
  width: 6rem;
}
.navbar .nav-list .list-head .icon {
  font-size: 2rem;
}
.navbar .nav-list > li {
  align-items: center;
  border-bottom: 1px dashed rgba(209, 209, 224, 0.5);
  display: flex;
  height: 6rem;
  justify-content: center;
  padding: 1rem;
}
.navbar .nav-list > li > a {
  color: #425466;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 28px;
  width: 100%;
}
.navbar .nav-list .list-btn {
  border: none;
  margin-top: auto;
}
.navbar .nav-list .list-btn button {
  background-color: #99cc34;
  border-radius: 60px;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.2px;
  line-height: 24px;
  padding: 12px 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.navbar .sign-in {
  display: none;
}
@media only screen and (min-width: 900px) {
  .navbar .hamburger-icon,
  .navbar .links {
    display: none;
  }
  .navbar .links-media {
    display: block;
  }
  .navbar .nav-list-media {
    display: flex;
    font-size: 15px;
    font-weight: 500;
    gap: 4.5rem;
    letter-spacing: 0.2px;
    line-height: 24px;
  }
  .navbar .list-btn {
    display: none;
  }
  .navbar .sign-in {
    display: block;
  }
  .navbar .sign-in button {
    background-color: rgba(240, 240, 245, 0.2);
    border-radius: 60px;
    font-size: 15px;
    font-weight: 550;
    letter-spacing: 0.2px;
    line-height: 24px;
    padding: 12px 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
}
.hero {
  display: flex;
  margin: min(35vw, 13rem) auto 5rem;
  max-width: 1180px;
  padding: 10rem 2rem 2rem;
  position: relative;
}
.hero-title-container {
  --max-width: 75rem;
  height: auto;
  position: relative;
  width: min(120% - 2rem, var(--max-width));
}
.hero .title {
  -webkit-column-break-inside: break;
  break-inside: break;
  color: #0e2540;
  font-size: clamp(40px, 10vw, 94px);
  font-weight: 700;
  letter-spacing: clamp(-2.53px, 10vw, -3.76px);
  line-height: clamp(50px, 10vw, 97.76px);
  max-width: 11ch;
  page-break-inside: break;
}
.hero .title-main {
  mix-blend-mode: color-burn;
  opacity: 0.9;
}
.hero .title__second {
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  z-index: -4;
}
.hero .title__overlay {
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.1;
  position: absolute;
  top: 0;
}
.hero-desc-container {
  --max-width: 60rem;
  height: auto;
  margin-block: 3rem;
  width: min(100% - 2rem, var(--max-width));
}
.hero-desc-container .desc {
  color: #425466;
  font-size: 18px;
  font-weight: 450;
  letter-spacing: 0.2px;
  line-height: 28px;
}
.hero-btn-container {
  --max-width: 55rem;
  display: flex;
  gap: 1.5rem;
  height: auto;
  margin-block: 3rem;
  width: min(100% - 2rem, var(--max-width));
}
.hero-btn-container button {
  border-radius: 60px;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: 0.2px;
  line-height: 24px;
  padding: 12px 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.hero-btn-container .btn1 {
  background-color: #0e2540;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.hero-btn-container .btn2 {
  color: #0e2540;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.hero-pictures {
  display: none;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.hero-pictures .desktop {
  border-radius: 1.2rem;
  /* box-shadow: 90px 90px 150px -70px gray; */
  top: -25rem;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}
.hero-pictures .desktop,
.hero-pictures .phone {
  height: auto;
  left: -40rem;
  position: absolute;
  width: auto;
}
.hero-pictures .phone {
  background-color: #000;
  border-radius: 7rem;
  box-shadow: 0 0 200px -10px gray;
  top: -40rem;
  -webkit-transform: scale(0.4);
  transform: scale(0.4);
}
@media (min-width: 1400px) and (max-width: 1536px) {
  .hero-pictures .desktop,
  .hero-pictures .phone {
    left: -45rem;
  }
}
@media (min-width: 1200px) and (max-width: 1400px) {
  .hero-pictures .desktop,
  .hero-pictures .phone {
    left: -55rem;
  }
}
@media only screen and (min-width: 1000px) {
  .hero {
    padding: 2rem;
  }
  .hero-pictures {
    display: block;
  }
}
.brands {
  grid-gap: 5rem;
  align-items: center;
  /* display: grid; */
  gap: 5rem;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  margin-block: 10rem;
  margin-inline: auto;
  max-width: 1180px;
  margin-top: 50px;
}
.brands div {
  text-align: center;
}
@media only screen and (min-width: 760px) {
  .brands {
    grid-template-columns: repeat(4, 1fr);
  }
}
.unified {
  background-color: #f6f9fc;
  padding-top: 1px;
}
.unified-wrapper {
  margin-inline: auto;
  margin-top: 4rem;
  max-width: 1180px;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 6rem;
  padding-bottom: 12rem;
  display: flex;
  justify-content: space-between;
}
.about_text {
  max-width: 600px;
  width: 100%;
  position: relative;
  z-index: 10;
}
.about_pic {
  max-width: 500px;
  width: 100%;
}
.unified-head {
  color: #99cc34;
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 28px;
  margin-bottom: 4rem;
}
.unified-title h2 {
  color: #0e2540;
  font-size: clamp(34px, 10vw, 38px);
  font-weight: 700;
  letter-spacing: clamp(-0.1px, 10vw, -0.2px);
  line-height: clamp(44px, 10vw, 48px);
  margin-block: 4rem;
}
.unified-content {
  margin-block: 4rem;
}
.unified-desc {
  color: #425466;
  font-size: 18px;
  font-weight: 450;
  letter-spacing: 0.2px;
  line-height: 28px;
  margin-block: 2rem;
}
.unified-desc a {
  color: #99cc34;
  font-weight: 525;
}
.unified-btn {
  background-color: #99cc34;
  border-radius: 60px;
  color: #fff;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: 0.2px;
  line-height: 24px;
  padding: 12px 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media only screen and (min-width: 600px) {
  /* .unified-title h2 {
    max-width: 55%;
  } */
  /* .unified-content {
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 5rem;
    column-gap: 5rem;
  } */
  .unified-desc {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    margin: 0;
    page-break-inside: avoid;
  }
}
.pictures {
  background-color: #f6f9fc;
}
.pictures-wrapper {
  grid-gap: 3rem;
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(3, 1fr);
  left: -5rem;
  max-width: 1180px;
  position: relative;
  top: -20rem;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}
.pictures img {
  /* box-shadow: 0 0 40px -5px gray; */
  height: auto;
  object-fit: contain;
  width: auto;
}
.pictures .visa img {
  border-radius: 2rem;
}
.pictures .invoice img {
  border-radius: 1rem;
}
.pictures .payment {
  position: relative;
  top: -10rem;
}
.pictures .payment img {
  border-radius: 4.5rem;
}
.pictures .phone {
  justify-self: flex-end;
  position: relative;
  top: -30rem;
}
.pictures .phone img {
  border-radius: 5rem;
}
.pictures .fraud {
  grid-column: span 2;
  position: relative;
  top: -10rem;
}
.pictures .fraud img {
  border-radius: 1rem;
  width: 100%;
}
@media only screen and (min-width: 1000px) {
  .pictures-wrapper {
    gap: 3rem;
    left: -15rem;
    margin-inline: auto;
    padding-inline: 2rem;
    padding-top: 5rem;
    top: -19rem;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  .pictures .payment {
    position: relative;
    top: -10rem;
  }
  .pictures .phone {
    justify-self: flex-end;
    position: relative;
    top: -32rem;
  }
  .pictures .fraud {
    grid-column: span 2;
    position: relative;
    top: -10rem;
  }
}
.terminal {
  /* --skew: 7deg; */
  /* --skew-bg: calc(var(--skew) * -1); */
  background-color: #0e2540;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-block: 2rem;
  position: relative;
  /* -webkit-transform: skewY(var(--skew-bg)); */
  /* transform: skewY(var(--skew-bg)); */
  /* translate: 0 -1%; */
}
.terminal .short {
  background-color: #99cc34;
  bottom: -3rem;
  height: 4rem;
  left: 15rem;
  mix-blend-mode: multiply;
  opacity: 0.9;
  position: absolute;
  width: 15rem;
}
.terminal .tall {
  background-color: #f0fbe0;
  bottom: -4rem;
  height: 4rem;
  position: absolute;
  right: 0;
  width: 30%;
}
.terminal-content {
  margin-block: 1rem;
  margin-inline: auto;
  max-width: 1180px;
  padding-block: 1rem;
  padding-inline: 2rem;
  /* -webkit-transform: skewY(var(--skew)); */
  /* transform: skewY(var(--skew)); */
}
.terminal-head {
  color: #f0fbe0;
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 28px;
  margin-bottom: 2rem;
}
.terminal-title {
  color: #fff;
  font-size: clamp(34px, 10vw, 38px);
  font-weight: 700;
  letter-spacing: clamp(-0.1px, 10vw, -0.2px);
  line-height: clamp(44px, 10vw, 48px);
  margin-block: 2rem;
}
.terminal-desc {
  color: #adbdcc;
  font-size: 18px;
  font-weight: 450;
  line-height: 28px;
}
.terminal-btn,
.terminal-desc {
  letter-spacing: 0.2px;
  margin-block: 2rem;
}
.terminal-btn {
  background-color: #f0fbe0;
  border-radius: 60px;
  color: #0e2540;
  font-size: 15px;
  font-weight: 550;
  line-height: 24px;
  padding: 12px 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.terminal-pic {
  border-radius: 1rem;
  margin: 0 auto;
  max-height: 50rem;
  max-width: 50rem;
  overflow: hidden;
}
.terminal-pic img {
  height: auto;
  object-fit: cover;
  width: auto;
}
.terminal-details {
  grid-gap: 3rem;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  justify-items: center;
  margin-block: 6rem;
  margin-inline: auto;
}
.terminal-details .box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.terminal-details .anim {
  align-items: center;
  display: flex;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  justify-self: flex-start;
  margin-left: 1rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.terminal-details .anim img {
  object-fit: contain;
  width: 5rem;
  height: 5rem;
}
.terminal-details .shrid {
  align-items: center;
  display: flex;
  height: 4rem;
  justify-content: center;
  /* margin-left: 2rem; */
  overflow: hidden;
  width: 7rem;
}
.terminal-details .shrid img {
  height: 7rem;
  width: 7rem;
}
.terminal-details .head {
  color: #fff;
  font-weight: 600;
  font-size: 24px !important;
}
.terminal-details .desc,
.terminal-details .head {
  font-size: 18px;
  letter-spacing: 0.2px;
  line-height: 24px;
  padding: 0 32px 0 16px;
}
.terminal-details .desc {
  color: #adbdcc;
  font-weight: 400;
  text-align: justify;
}
.terminal-details .btn {
  margin-left: 10px;
  align-self: flex-start;
  border-radius: 60px;
  color: #242f66;
  background-color: #f0fbe0;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: 0.2px;
  line-height: 24px;
  padding: 12px 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media only screen and (min-width: 500px) {
  /* .terminal {
    translate: 0 -35%;
  } */
  .terminal-details {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 860px) {
  .terminal {
    padding-block: 10rem;
    /* translate: 0 -12%; */
  }
  .terminal-upper {
    display: flex;
    gap: 10rem;
    justify-content: space-between;
  }
  .terminal-title {
    max-width: 20ch;
  }
  .terminal-desc {
    max-width: 50ch;
  }
  .terminal-details {
    gap: 0;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.approach {
  padding: 50px;
  position: relative;
  /* -webkit-transform: skewY(-7deg); */
  /* transform: skewY(-7deg); */
  /* translate: 0 -0%; */
}
.approach-content {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-inline: auto;
  max-width: 1180px;
  padding: 2rem;
  /* -webkit-transform: skewY(7deg);
  transform: skewY(7deg); */
}
.approach-content-1 {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-inline: auto;
  max-width: 1180px;
  padding: 2rem;
  /* -webkit-transform: skewY(7deg); */
  /* transform: skewY(7deg); */
}
.approach-head {
  color: #99cc34;
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 28px;
  margin-bottom: 4rem;
}
.approach-title h2 {
  color: #0e2540;
  font-size: clamp(34px, 10vw, 38px);
  font-weight: 700;
  letter-spacing: clamp(-0.1px, 10vw, -0.2px);
  line-height: clamp(44px, 10vw, 48px);
  max-width: 25ch;
}
.approach-details {
  grid-gap: 3rem;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  justify-items: center;
  margin-block: 6rem;
  margin-inline: auto;
}
.approach-details .box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  padding: 20px;
}
.approach-details .anim {
  align-items: center;
  display: flex;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  justify-self: flex-start;
  margin-left: 1rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.approach-details .anim img {
  object-fit: contain;
  width: 7rem;
  height: 7rem;
}
.approach-details .head {
  color: #0e2540;
  font-weight: 600;
  font-size: 20px !important;
}
.approach-details .desc,
.approach-details .head {
  font-size: 16px;
  letter-spacing: 0.2px;
  line-height: 24px;
  padding: 0 16px 0 16px;
}
.approach-details .desc {
  color: #425466;
  font-weight: 400;
  /* text-align: ; */
}
@media only screen and (min-width: 590px) {
  .approach-details {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 1024px) {
  /* .approach {
    translate: 0 -60%;
  } */
  .approach-details {
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .ad_c {
    gap: 20px;
    grid-template-columns: 1fr 1fr !important;
  }
}
.scale {
  background-color: #0e2540;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
  /* -webkit-transform: skewY(-7deg); */
  /* transform: skewY(-7deg); */
  /* translate: 0 -12%; */
}
.scale .short {
  background-color: #f0fbe0;
  mix-blend-mode: multiply;
  opacity: 0.9;
  right: 8rem;
  top: -3rem;
  width: 15rem;
}
.scale .short,
.scale .tall {
  height: 4rem;
  position: absolute;
}
.scale .tall {
  background-color: #99cc34;
  left: 0;
  top: -4rem;
  width: 30%;
}
.scale-content {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: 6rem;
  margin-inline: auto;
  max-width: 1180px;
  padding-block: 6rem;
  padding-inline: 2rem;
  /* -webkit-transform: skewY(7deg);
  transform: skewY(7deg); */
}
.scale-head {
  color: #f0fbe0;
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 28px;
  margin-block: 2rem;
  margin-top: 4rem;
}
.scale-title {
  margin-bottom: 2rem;
}
.scale-title h2 {
  color: #fff;
  font-size: clamp(34px, 10vw, 38px);
  font-weight: 700;
  letter-spacing: clamp(-0.1px, 10vw, -0.2px);
  line-height: clamp(44px, 10vw, 48px);
}
.scale-desc {
  color: #adbdcc;
  font-size: 18px;
  font-weight: 450;
  letter-spacing: 0.2px;
  line-height: 28px;
  max-width: 60ch;
}
.scale-details {
  grid-gap: 3rem;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  justify-items: center;
  margin-block: 6rem;
  margin-inline: auto;
}
.scale-details .box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.scale-details .head {
  color: #fff;
  font-weight: 600;
  font-size: 20px !important;
}
.scale-details .desc,
.scale-details .head {
  font-size: 18px;
  letter-spacing: 0.2px;
  line-height: 24px;
  padding: 0 32px 0 16px;
}
.scale-details .desc {
  color: #adbdcc;
  font-weight: 400;
}
@media only screen and (min-width: 590px) {
  .scale-details {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 1024px) {
  .scale-title h2 {
    max-width: 20ch;
  }
  .scale-desc {
    max-width: 50ch;
  }
  .scale-details {
    gap: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.more {
  padding: 1px;
  position: relative;
  /* -webkit-transform: skewY(-7deg); */
  /* transform: skewY(-7deg); */
  z-index: 10;
}
.more-content {
  margin-block: 5rem;
  margin-inline: auto;
  max-width: 1180px;
  padding: 2rem;
  /* -webkit-transform: skewY(7deg);
  transform: skewY(7deg); */
  /* translate: 0 -30%; */
}
.more-title h3 {
  color: #0e2540;
  font-size: clamp(34px, 10vw, 38px);
  font-weight: 700;
  letter-spacing: clamp(-0.1px, 10vw, -0.2px);
  line-height: clamp(44px, 10vw, 48px);
  margin-block: 2rem;
}
.more-desc {
  color: #425466;
  font-size: 18px;
  font-weight: 450;
  letter-spacing: 0.2px;
  line-height: 28px;
}
.more-btn {
  background-color: #99cc34;
  border-radius: 60px;
  color: #fff;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: 0.2px;
  line-height: 24px;
  margin-block: 2rem;
  padding: 12px 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.more-btn:nth-of-type(2) {
  background: none;
  color: #99cc34;
}
.more-details {
  grid-gap: 4rem;
  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr;
  justify-items: center;
  margin-inline: auto;
}
.more-details .box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  padding: 20px;
}
.more-details .anim {
  align-items: center;
  display: flex;
  justify-self: flex-start;
  width: 5rem;
}
.more-details .anim img {
  object-fit: cover;
  /* width: 10rem; */
  width: 6rem;
}
.more-details .head {
  color: #0e2540;
  font-weight: 600;
}
.more-details .desc,
.more-details .head {
  font-size: 15px;
  letter-spacing: 0.2px;
  line-height: 24px;
}
.more-details .desc {
  color: #425466;
  font-weight: 450;
}
.more-details .btn {
  align-self: flex-start;
  border-radius: 60px;
  color: #fff;
  background: #99cc34;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: 0.2px;
  line-height: 24px;
  padding: 12px 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media only screen and (min-width: 500px) {
  .more-details {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 1000px) {
  .more-content {
    align-items: center;
    display: flex;
    gap: 10rem;
  }
  .more-desc {
    max-width: 60ch;
  }
}
.footer {
  background-color: #f6f9fc;
  padding: 1px;
  position: relative;
}
.footer .tall-right {
  background-color: #f0fbe0;
  height: 4rem;
  position: absolute;
  right: 0;
  top: -4rem;
  width: 30%;
}
.footer .tall-right .short-right {
  bottom: -3rem;
  left: 15rem;
  mix-blend-mode: multiply;
  opacity: 0.9;
  width: 15rem;
}
.footer .tall-left,
.footer .tall-right .short-right {
  background-color: #99cc34;
  height: 4rem;
  position: absolute;
}
.footer .tall-left {
  left: 0;
  top: 0;
  width: 30%;
}
.footer .tall-left .short-left {
  background-color: #f0fbe0;
  height: 4rem;
  mix-blend-mode: multiply;
  opacity: 0.9;
  position: absolute;
  right: 8rem;
  top: -3rem;
  width: 15rem;
}
.footer-content {
  gap: 1rem;
  margin-inline: auto;
  max-width: 1180px;
  padding-block: 2rem;
  /* -webkit-transform: skewY(7deg);
  transform: skewY(7deg); */
}
.footer-content,
.footer-content__brand {
  display: flex;
  flex-direction: column;
  padding-inline: 1rem;
}
.footer-content__brand {
  align-items: flex-start;
  color: #0e2540;
  gap: 0.5rem;
  justify-content: flex-start;
}
.footer-content__brand-logo {
  align-items: center;
  display: flex;
  height: 4rem;
  justify-content: center;
  overflow: hidden;
  width: 10rem;
}
.footer-content__brand-logo .icon {
  height: 7rem;
  transition: 0.3s;
  width: 7rem;
}
.footer-content__brand-logo .icon:hover {
  cursor: pointer;
  opacity: 0.5;
}
.footer-content__brand-location button {
  align-items: center;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
  width: 100%;
}
.footer-content__brand-location button:hover {
  opacity: 0.9;
}
.footer-content__brand-language button {
  align-items: center;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
  width: 100%;
}
.footer-content__brand-language button:hover {
  opacity: 0.9;
}
.footer-content__brand-commerce {
  margin-top: auto;
}
.footer-content__brand-commerce div {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 0.5rem;
}
.footer-content .center-links {
  display: flex;
  justify-content: center;
}
.footer-content__links {
  -webkit-column-count: 2;
  column-count: 2;
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer-content-box {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  color: #002640;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  line-height: 2.7rem;
  margin-bottom: 2rem;
  page-break-inside: avoid;
}
.footer-content-box h4 {
  max-width: 200px;
}
.footer-content-box a {
  transition: 0.1s;
}
.footer-content-box a:hover {
  opacity: 0.7;
}
@media only screen and (min-width: 720px) {
  .footer-content {
    flex-direction: row;
    gap: 4rem;
    justify-content: center;
  }
  .footer-content__brand {
    /* height: 70rem; */
    height: 30rem;
  }
  .footer-content__links {
    -webkit-column-count: 3;
    column-count: 3;
    gap: 5rem;
  }
}
.login {
  min-height: 100vh;
  padding: 3.5rem 0;
  position: relative;
}
.login .center-lines {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.login .center-lines .lines-background {
  background: linear-gradient(
    90deg,
    hsla(0, 0%, 87%, 0.781) 0 1px,
    transparent 1px 300px,
    hsla(0, 0%, 87%, 0.781) 300px 301px,
    transparent 301px 600px,
    hsla(0, 0%, 87%, 0.781) 600px 601px,
    transparent 601px 900px,
    hsla(0, 0%, 87%, 0.781) 900px 901px,
    transparent 901px 1200px
  );
  height: 100%;
  max-width: 1000px;
  position: absolute;
  top: 0;
  width: 80%;
}
.login .center-lines .lines-background .small {
  background-color: #80e9fd;
  height: 4rem;
  left: -20rem;
  opacity: 0.7;
  position: absolute;
  top: 60rem;
  -webkit-transform: skewY(-12deg);
  transform: skewY(-12deg);
  width: 20rem;
}
.login .top-background {
  background-color: #f7fafc;
  height: 120rem;
  position: fixed;
  top: -70rem;
  -webkit-transform: skewY(-12deg);
  transform: skewY(-12deg);
  width: 100%;
  z-index: -2;
}
.login .top-background .left {
  bottom: -4rem;
}
.login .top-background .left,
.login .top-background .right {
  background-color: #7a73ff;
  height: 4rem;
  position: absolute;
  width: 25%;
}
.login .top-background .right {
  bottom: 0;
  right: 0;
}
.login-content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin: 0 auto;
  max-width: 600px;
  padding: 2rem 0;
  z-index: 1;
}
.login__logo {
  color: #3c4257;
  margin: 1rem auto;
  padding: 0 2rem;
  width: 90%;
}
.login__form {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0 40px -20px gray;
  color: #3c4257;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin: 0 auto;
  padding: 5rem 0;
  width: 90%;
}
.login__form-fields,
.login__form-header {
  margin: 0 auto;
  width: 80%;
}
.login__form-fields {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.login__form-field {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto;
  width: 100%;
}
.login__form-label {
  display: flex;
  flex-wrap: wrap;
  font-weight: 500;
  gap: 1rem;
  justify-content: space-between;
}
.login__form-input {
  width: 100%;
}
.login__form-remember {
  align-items: center;
  display: flex;
  font-weight: 600;
  gap: 1rem;
}
.login__form-button,
.login__form-link {
  margin: 0 auto;
  width: 100%;
}
.login__form-link {
  text-align: center;
}
.login__input {
  border: 1px solid #adadaf;
  border-radius: 0.5rem;
  color: #3c4257;
  font-size: 1.7rem;
  padding: 1.3rem 0.9rem;
}
.login__input:focus {
  outline: 0.3rem solid #add8e6;
}
.login__checked {
  height: 1.5rem;
  width: 1.5rem;
}
.login__checked:focus {
  outline: 0.3rem solid #add8e6;
}
.login__button {
  background-color: #99cc34;
  border-radius: 0.5rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1.4rem 2rem;
  width: 100%;
}
.login__button:focus {
  outline: 0.3rem solid #add8e6;
}
.login__link {
  color: #3f6571;
  font-size: 1.5rem;
  font-weight: 600;
  transition-duration: 0.3s;
}
.login-info,
.login__link:hover {
  color: #3c4257;
}
.login-info {
  font-size: 1.6rem;
  max-width: 600px;
}
.login-info .info {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin: 0 auto;
  width: 90%;
}
.login-info .info-signup {
  margin: 0 auto;
  width: 95%;
}
.login-info .info-signup a {
  color: #99cc34;
  transition-duration: 0.3s;
}
.login-info .info-signup a:hover {
  color: #3c4257;
}
.login-info .info-description {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto;
  width: 95%;
}
.login-info .info-description .info-security-tip {
  align-items: center;
  background-color: #e3e8ee;
  border-radius: 0.5rem;
  display: flex;
  font-size: 1.3rem;
  font-weight: 500;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.login-info .info-question {
  align-items: center;
  display: flex;
  gap: 2rem;
  margin: 0 auto;
  width: 95%;
}
.login-info .info-question button {
  align-items: center;
  background-color: beige;
  border-radius: 0.5rem;
  box-shadow: 0 0 4px 1px gray;
  display: flex;
  font-size: 1.4rem;
  font-weight: 550;
  gap: 1rem;
  padding: 0.5rem 2rem;
}
.login-info .info-question .icon {
  color: #cfcf1d;
}
.login-info .info-brand {
  display: flex;
  gap: 2rem;
  margin: 0 auto;
  width: 95%;
}
.login-info .info-brand a {
  color: #757988;
}
.login-info .info-brand a:hover {
  color: #3c4257;
}
.container {
  margin: auto;
  max-width: 1240px;
}
.icon {
  font-size: 1.5rem;
}
.bold {
  font-weight: 700;
}
.inline-link {
  color: #5f5bfe;
  transition: 0.3s;
}
.inline-link:hover {
  color: #002640;
}
.gradient-wrapper {
  display: grid;
  height: 120rem;
  left: 0;
  place-items: stretch;
  position: absolute;
  top: -80rem;
  -webkit-transform: skewY(-12deg);
  transform: skewY(-12deg);
  width: 100%;
  z-index: -3;
}
#gradient-canvas {
  /* --gradient-color-1: #39598d;
  --gradient-color-2: #6ec3f4;
  --gradient-color-3: #242f66;
  --gradient-color-4: #99cc34; */
  --gradient-color-1: #99cc34;
  --gradient-color-2: #ff333d;
  --gradient-color-3: #242f66;
  --gradient-color-4: #ffcb57;
  --gradient-color-5: rgba(169, 96, 238, 0);
  --gradient-color-6: rgba(255, 51, 61, 0);
  --gradient-color-7: rgba(144, 224, 255, 0);
  --gradient-color-8: rgba(255, 203, 87, 0);
  height: 100%;
  width: 100%;
}
:root {
  --font-family: "Inter", sans-serif;
  font-size: 62.5%;
}
html {
  color-scheme: light;
  overflow-x: hidden;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Inter, sans-serif;
  font-family: var(--font-family);
  font-size: 16px;
}
*,
:after,
:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
}
ol,
ul {
  list-style-type: none;
}
a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}
img {
  height: 100%;
  width: 100%;
}
button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
}
input {
  height: 100%;
  width: 100%;
}
main {
  overflow: hidden;
}
footer {
  /* -webkit-transform: skewY(-7deg); */
  /* transform: skewY(-7deg); */
}
/*# sourceMappingURL=main.06cea177.css.map*/

.testimonial-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
}

.testimonial {
  max-width: 600px;
  text-align: left;
  position: relative;
}

.quote-icon {
  font-size: 30px;
  color: #000;
  margin-bottom: 20px;
}

.testimonial-text {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  margin-bottom: 20px;
}

.profile {
  display: flex;
  align-items: center;
  gap: 15px;
}

.profile img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-info {
  font-size: 13px;
  color: #333;
}

.profile-info strong {
  display: block;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .testimonial-container {
    flex-direction: column;
    align-items: center;
  }

  .testimonial {
    max-width: 90%;
  }

  .profile {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile img {
    margin-bottom: 10px;
  }
}
.brands {
  overflow-x: hidden;
}
/* @media (min-width: 1200px) {
  .bpo2 {
    position: relative;
    top: -60%;
  }
  .bpo1 {
    position: relative;
    top: -25%;
  }
} */
.short,
.tall,
.tall-left,
.short-left,
.tall-right,
.short-right {
  display: none !important;
}
.ailines {
  position: absolute;
  right: 0;
  object-fit: cover;
  width: 100%;
  opacity: 0.06;
  animation: circleMove 10s linear infinite;
}

@keyframes circleMove {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(10px, 10px);
  }
  50% {
    transform: translate(0px, 20px);
  }
  75% {
    transform: translate(-10px, 10px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
/* About */
.htc_about {
  max-width: 100%;
  width: 100%;
  height: auto;
  position: relative;
  /* width: min(120% - 2rem, var(--max-width)); */
}
.title_about {
  text-align: center;
}
.hero .title_about {
  max-width: 100%;
}
.mx100 {
  max-width: 100%;
}
.hero .title_overlay_about {
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
.hero .title__second_about {
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
.text-center {
  text-align: center;
}
.hdc_about {
  max-width: 1000px;
  width: 100%;
  margin: auto;
}
.hbc_about {
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}
.about_scale {
  background: white !important;
}
.tn_main {
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  line-height: 2;
}

.tn {
  background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  font-size: 120px;
  margin: 10px 0;
}
.tn_main_1 {
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  /* line-height: 2; */
}

.tn_1 {
  background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  font-size: 55px;
  margin: 10px 0;
}
.uw_about {
  padding-bottom: 1px !important;
}
.uw_about_1 {
  flex-direction: row-reverse;
}
/* styling my button */

/* Contact */
.iframe_main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
}
.iframe_main .iframe_main1 {
  max-width: 550px;
  width: 100%;
  height: 400px;
  border: none;
}
/* Contact */
/* Blog */
.blogimg {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}
.blogimg img {
  object-fit: cover;
  border-radius: 12px;
}
/* Blog */
.desc {
  padding: 12px;
  background: rgba(255, 255, 255, 0.1); /* semi-transparent */
  backdrop-filter: blur(5px); /* blur the background behind the element */
  -webkit-backdrop-filter: blur(5px); /* for Safari support */
}
.desc_main {
  padding: 0px;
  background: transparent;
  backdrop-filter: blur(0px); /* blur the background behind the element */
  -webkit-backdrop-filter: blur(0px);
}
.hero {
  justify-content: center;
}
.jleft {
  justify-content: flex-start;
}
.items-center {
  align-items: center;
}
.bg-white {
  background: white;
}
.text-brand {
  color: #99cc34;
}
.privacy_text {
  font-size: 30px;
  margin-top: 20px;
}
@media (max-width: 768px) {
  .approach {
    padding: 12px;
  }
}
.socials_1_main {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
}
.socials_1 {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.socials_1:hover {
  scale: 1.2;
}
.dropdown {
  position: relative;
  font-family: "Inter", sans-serif !important;
}

.dropdown-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  /* padding: 8px; */
  /* font-weight: 600; */
  font-family: "Inter", sans-serif !important;
}

.dropdown-content {
  margin-top: 10px;
  position: absolute;
  top: 100%;
  left: 0;
  /* filter: blur(1px); */
  /* border: 1px solid #ccc; */
  border-radius: 24px;
  min-width: 260px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 100;
  font-family: "Inter", sans-serif !important;
  background-color: rgba(255, 255, 255, 1);
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  padding: 4px;
}

.dropdown-content a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  text-decoration: none;
  color: black;
  font-family: "Inter", sans-serif !important;
}

.dropdown-content a:hover {
  background-color: #f2f2f2;
  border-radius: 24px;
}

.dropdown.show .dropdown-content {
  display: block;
  font-family: "Inter", sans-serif !important;
}

.more-content-case {
  margin-block: 5rem;
  /* margin-inline: auto; */
  margin-left: auto;
  max-width: 1540px;
  padding: 2rem;
}
@media (min-width: 1200px) and (max-width: 1536px) {
  .more-content-case {
    max-width: 1340px;
    padding: 2rem;
  }
}
.more-content-case .box {
  border-top: 4px solid #99cc34;
}
@media only screen and (min-width: 1000px) {
  .more-content-case {
    align-items: center;
    display: flex;
    gap: 10rem;
  }
}
.chev {
  width: 20px;
}
@media only screen and (min-width: 500px) {
  .m__d {
    grid-template-columns: 1fr;
  }
}
.m__d {
  margin-bottom: 40px;
}
.m__d .box {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  padding: 20px;
}
.m__d .blogimg {
  max-width: 400px;
  width: 100%;
  height: 350px;
}
.mxx {
  max-width: 840px;
  width: 100%;
}
.pl-0 {
  padding-left: 0px;
}
.services_tabs_main {
  max-width: 1280px;
  width: 100%;
  margin: auto;
}
.services_tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid #0e254062;
  border-radius: 100px;
  padding: 8px;
}
.more-btn-1 {
  font-family: "Inter", sans-serif !important;
  background-color: #0e2540;
  border-radius: 60px;
  color: #fff;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0.2px;
  line-height: 24px;
  margin-block: 0.5rem;
  padding: 12px 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

@media (max-width: 1200px) {
  .services_tabs {
    flex-wrap: wrap;
  }
}
@media (max-width: 992px) {
  .wraps {
    flex-wrap: wrap;
  }
  .unified-wrapper {
    flex-wrap: wrap;
  }
  .unified-wrapper {
    margin-top: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.h216 {
  height: 216px;
  overflow-y: hidden;
}
header {
  width: 100%;
  padding-left: 5px;
  padding-right: 5px;
  background: transparent;
  color: white;
  transition: background 0.3s, position 0.3s;
  position: relative;
}
header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  /* background: rgba(14, 37, 64, 0.5); */
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(5px);
  z-index: 999;
}
@media(min-width:768px){
header.fixed li a {
  color: #002640 !important;
}
}
@media(min-width:768px){
header.fixed button {
  color: #002640 !important;
}
}
/* Contact Us */
.align-center {
  text-align: center;
}
.content-wrapper {
  position: relative;
}
.get-in-touch {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.get-in-touch .title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 36px;
  line-height: 48px;
  padding-bottom: 48px;
}
.contact-form .form-field {
  position: relative;
  margin: 32px 0;
}
.contact-form .input-text {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 0.1px 0;
  border-color: #99cc346e;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
.contact-form .textarea-text {
  display: block;
  width: 100%;
  height: 100px;
  border-width: 0 0 0.1px 0;
  border-color: #99cc346e;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  padding-left: 10px;
}

.contact-form .input-text:focus {
  outline: none;
}
.contact-form .input-text:focus + .label,
.contact-form .input-text.not-empty + .label {
  transform: translateY(-24px);
}
/* .contact-form .label {
          position: absolute;
          left: 20px;
          bottom: 11px;
          font-size: 18px;
          line-height: 26px;
          font-weight: 400;
          color: #888;
          cursor: text;
          transition: transform 0.2s ease-in-out;
        } */
.contact-form .mess {
  /* position: absolute; */
  /* left: 20px; */
  /* bottom: 11px; */
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  /* color: #888; */
  cursor: text;
  /* padding-left: 20px; */
  transition: transform 0.2s ease-in-out;
}
.contact-form .submit-btn {
  display: inline-block;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}
/* .note {
          position: absolute;
          left: 0;
          bottom: 10px;
          width: 100%;
          text-align: center;
          font-size: 16px;
          line-height: 21px;
        } */
/* .note .link {
          color: #888;
          text-decoration: none;
        } */
/* .note .link:hover {
          text-decoration: underline;
        } */
/* Ends */
.justify-center {
  justify-content: center;
  align-items: center;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.none {
  display: none;
}
@media (min-width: 1200px) {
  .mt100 {
    margin-top: 160px;
  }
  .mt110 {
    margin-top: 110px;
  }
  .mt80 {
    margin-top: 80px;
  }
  .mt150 {
    margin-top: 150px;
  }
}
@media (max-width: 768px) {
  .hero {
    display: flex;
    margin: min(5vw, 13rem) auto 5rem;
    padding: 2rem 2rem 2rem;
  }
  .hidde {
    display: none;
  }
  .desc {
    background: rgba(255, 255, 255, 0.5);
  }
}