@font-face {
  font-family: SF-Regular;
  src: url(../fonts/SFPRODISPLAYREGULAR.OTF);
}
@font-face {
  font-family: SF-Medium;
  src: url(../fonts/SFPRODISPLAYMEDIUM.OTF);
}
@font-face {
  font-family: SF-Bold;
  src: url(../fonts/SFPRODISPLAYBOLD.OTF);
}
@font-face {
  font-family: SF-Semibold-Italic;
  src: url(../fonts/SFPRODISPLAYSEMIBOLDITALIC.OTF);
}
@font-face {
  font-family: Gilroy-Medium;
  src: url(../fonts/Gilroy-Medium.ttf);
}
@font-face {
  font-family: Gilroy-Semibold;
  src: url(../fonts/Gilroy-SemiBold.ttf);
}
@font-face {
  font-family: HEL-MED;
  src: url(../fonts/HEL-MED.otf);
}
@font-face {
  font-family: HEL-BOLD;
  src: url(../fonts/HEL-BOLD.otf);
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiAyp8kv8JHgFVrJJLmE3tF.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiDyp8kv8JHgFVrJJLmv1plEA.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiDyp8kv8JHgFVrJJLm21llEA.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiGyp8kv8JHgFVrJJLedw.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiDyp8kv8JHgFVrJJLmg1hlEA.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiDyp8kv8JHgFVrJJLmr19lEA.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiDyp8kv8JHgFVrJJLmy15lEA.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiDyp8kv8JHgFVrJJLm111lEA.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiDyp8kv8JHgFVrJJLm81xlEA.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiGyp8kv8JHgFVrLPTedw.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLFj_V1s.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLDz8V1s.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiEyp8kv8JHgFVrFJA.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLGT9V1s.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLEj6V1s.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLCz7V1s.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLDD4V1s.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLBT5V1s.ttf) format('truetype');
}
:root {
  --cta-text-color: #fff;
  --heading-text-font: SF-Bold;
  --cta-text-font: SF-Bold;
}
*::-webkit-scrollbar {
  width: 6px;
}
*::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.4);
}
*::-webkit-scrollbar-thumb {
  /*	border-radius: 25px;*/
  /*	border: 2px solid transparent;*/
  background-clip: content-box;
  background-color: rgba(0, 0, 0, 0.4);
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: none;
  color: inherit;
}
a:visited {
  text-decoration: none;
  color: inherit;
}
a:active {
  text-decoration: none;
  color: inherit;
}
html {
  font-size: 16px;
}
body {
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: #1e1e21;
  min-height: 100%;
}
body::-webkit-scrollbar-track {
  background-color: rgba(31, 29, 29, 0.59);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
.cta-btn {
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
  padding: 12px 20px;
  color: var(--cta-text-color);
  font-family: var(--cta-text-font);
  text-transform: uppercase;
  font-size: 0.92rem;
  letter-spacing: 0.32px;
  cursor: pointer;
  transition: border 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  gap: 12px;
}
.cta-btn img {
  width: 1.5rem;
  transition: width 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cta-btn.blue {
  background: #128de3;
}
.cta-btn:hover {
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.root {
  width: 100vw;
  height: -webkit-fill-available;
  background-image: linear-gradient(135deg, #1e1e20, #0e0e11 32%);
  position: relative;
  overflow: hidden;
}
.galaxy-background {
  background-image: url(../assets/background.png);
  background-position: 50%;
  background-size: 1090px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
  z-index: 0;
}
.navigation-container {
  position: relative;
  padding: 32px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 1200px) {
  .navigation-container {
    padding: 32px;
  }
}
@media only screen and (max-width: 900px) {
  .navigation-container {
    display: none;
  }
}
.navigation-container .logo img {
  width: 6rem;
}
.navigation-container .items-container {
  color: rgba(255, 255, 255, 0.56);
  font-family: SF-Medium;
  font-size: 0.92rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  gap: 56px;
}
.mobile-navigation-wrapper {
  display: none;
}
@media only screen and (max-width: 900px) {
  .mobile-navigation-wrapper {
    display: flex;
    position: relative;
    padding: 24px 16px;
  }
  .mobile-navigation-wrapper .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.08);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
  }
  .mobile-navigation-wrapper .content .logo img {
    width: 4.5rem;
    margin-left: 12px;
  }
  .mobile-navigation-wrapper .content button {
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.64);
    padding: 8px 16px;
    color: var(--cta-text-color);
    font-family: var(--cta-text-font);
    text-transform: uppercase;
    font-size: 0.92rem;
    letter-spacing: 0.32px;
    cursor: pointer;
    transition: border 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .mobile-navigation-wrapper .content button:hover {
    border: 1px solid rgba(255, 255, 255, 0.24);
  }
}
/* .hero-container {
  position: relative;
  padding: 96px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  @media only screen and (max-width: 768px) {
    padding: 72px 48px;
  }

  @media only screen and (max-width: 600px) {
    padding: 56px 16px;
  }

  @media only screen and (max-width: 500px) {
  }

  @media only screen and (max-width: 400px) {
  }

  .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 24px;

    @media only screen and (max-width: 1200px) {
    }

    @media only screen and (max-width: 1000px) {
    }

    @media only screen and (max-width: 800px) {
    }

    @media only screen and (max-width: 768px) {
    }

    @media only screen and (max-width: 600px) {
    }

    @media only screen and (max-width: 400px) {
    }

    .hero-title {
      background-image: linear-gradient(
        145deg,
        #fff 65%,
        rgba(255, 255, 255, 0.43)
      );
      text-shadow: 0 1px rgba(0, 0, 0, 0.07);
      -webkit-background-clip: text;
      -moz-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      -moz-text-fill-color: transparent;
      font-family: SF-Bold;
      font-size: 5rem;
      letter-spacing: -0.8px;
      line-height: 96px;
      max-width: 640px;

      @media only screen and (max-width: 800px) {
        font-size: 4.48rem;
        line-height: 84px;
      }

      @media only screen and (max-width: 768px) {
      }

      @media only screen and (max-width: 600px) {
        font-size: 3.88rem;
        line-height: 72px;
      }

      @media only screen and (max-width: 400px) {
        font-size: 2.96rem;
        line-height: 56px;
        max-width: 300px;
      }
    }

    .hero-description {
      font-family: Gilroy-Medium;
      font-size: 1.32rem;
      color: #bdbdc0;
      max-width: 520px;
      letter-spacing: 0.32px;
      margin-top: 4px;

      @media only screen and (max-width: 1200px) {
      }

      @media only screen and (max-width: 1000px) {
      }

      @media only screen and (max-width: 800px) {
      }

      @media only screen and (max-width: 768px) {
      }

      @media only screen and (max-width: 600px) {
      }

      @media only screen and (max-width: 400px) {
        font-size: 1.24rem;
        line-height: 28px;
      }
    }

    .cta-btn {
      @media only screen and (max-width: 900px) {
        background: #128de3;
      }
    }
  }
} */
/*
* hero section
*/
.hero-section {
  width: 100%;
  position: relative;
  z-index: 500;
  display: flex;
  flex-direction: column;
}
.hero-text {
  width: 80%;
  max-width: 621px;
  margin: auto;
  margin-top: clamp(60px, 10vh, 100px);
  position: relative;
  z-index: 500;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}
.hero-text h2 {
  margin: 0;
  /* font-family: Inter;
        font-size: 80px;
        color: #fff; */
  text-align: center;
  background-image: linear-gradient(145deg, #fff 65%, rgba(255, 255, 255, 0.43));
  text-shadow: 0 1px rgba(0, 0, 0, 0.07);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  font-family: SF-Bold;
  font-size: 5rem;
  letter-spacing: -0.8px;
  line-height: 96px;
  /* background: linear-gradient(145deg, #FFF 65%, rgba(255, 255, 255, 0.43) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; */
}
.hero-text p {
  width: 90%;
  margin: 0 auto;
  color: #BDBDC0;
  text-align: center;
  /* Subheading */
  font-family: Poppins;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  /* 127.273% */
}
.hero-cta-btn {
  width: fit-content;
  height: fit-content;
  margin: auto;
  display: flex;
  flex-direction: row;
  column-gap: 8px;
  padding: 10px 21px;
  border-radius: 300px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0px 2px 4px 0px rgba(24, 24, 24, 0.16);
  backdrop-filter: blur(32px);
}
.hero-cta-btn img {
  width: 16px;
  height: auto;
  object-fit: contain;
}
.hero-cta-btn span {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}
.hero-animation-container {
  width: 80%;
  max-width: 1120px;
  min-width: 900px;
  height: auto;
  overflow: visible;
  margin: auto;
  margin-top: clamp(-125px, -9vw, -80px);
  position: relative;
  z-index: 400;
}
#hero-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.hero-footer {
  position: relative;
  z-index: 900;
  margin: auto;
  margin-top: clamp(-90px, -5vw, -60px);
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}
.hero-footer img {
  position: absolute;
  bottom: -150%;
  left: -70%;
  max-width: unset;
  object-fit: cover;
  object-position: center;
}
.hero-footer h2 {
  margin: auto;
  max-width: 460px;
  font-family: Inter;
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: linear-gradient(145deg, #FFF 65%, rgba(255, 255, 255, 0.43) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-footer p {
  margin: auto;
  max-width: 425px;
  font-family: Poppins;
  font-size: 22px;
  font-weight: 400;
  color: #BDBDC0;
  text-align: center;
}
/*
* hero section
*/
/* .solar-system-container {
  max-height: 48rem;

  @media only screen and (max-width: 1200px) {
  }

  @media only screen and (max-width: 1000px) {
  }

  @media only screen and (max-width: 800px) {
  }

  @media only screen and (max-width: 768px) {
  }

  @media only screen and (max-width: 600px) {
  }

  @media only screen and (max-width: 400px) {
  }

  .orbit-container {
    position: relative;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -16%);
    width: 1200px;
    height: 1200px;
    box-sizing: border-box;

    @media only screen and (max-width: 1200px) {
    }

    @media only screen and (max-width: 1000px) {
    }

    @media only screen and (max-width: 800px) {
    }

    @media only screen and (max-width: 768px) {
    }

    @media only screen and (max-width: 600px) {
    }

    @media only screen and (max-width: 400px) {
    }

    .orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: top left;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }

    .eight {
      transform: translateX(-50%) translateY(-50%);
      width: 1200px;
      height: 1200px;
      background-image: url(../assets/orbits/orbit-8.svg);
      background-repeat: round;
    }

    .seven {
      transform: translateX(-50%) translateY(-50%);
      width: 1060px;
      height: 1060px;
      background-image: url(../assets/orbits/orbit-7.svg);
      background-repeat: round;
    }

    .six {
      transform: translateX(-50%) translateY(-50%);
      width: 950px;
      height: 950px;
      background-image: url(../assets/orbits/orbit-6.svg);
      background-repeat: round;
    }

    .five {
      transform: translateX(-50%) translateY(-50%);
      width: 820px;
      height: 820px;
      background-image: url(../assets/orbits/orbit-5.svg);
      background-repeat: round;
    }

    .four {
      transform: translateX(-50%) translateY(-50%);
      width: 650px;
      height: 650px;
      background-image: url(../assets/orbits/orbit-4.svg);
      background-repeat: round;
    }

    .three {
      transform: translateX(-50%) translateY(-50%);
      width: 500px;
      height: 500px;
      background-image: url(../assets/orbits/orbit-3.svg);
      background-repeat: round;
    }

    .two {
      transform: translateX(-50%) translateY(-50%);
      width: 366px;
      height: 366px;
      background-image: url(../assets/orbits/orbit-2.svg);
      background-repeat: round;
    }

    .one {
      transform: translateX(-50%) translateY(-50%);
      width: 266px;
      height: 266px;
      background-image: url(../assets/orbits/orbit-1.svg);
      background-repeat: round;

      .logo {
        width: 100%;
        height: 100%;
        padding: 3.5rem;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
} */
.why-us-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #fff;
  padding: 96px 48px;
  gap: 72px;
  position: relative;
  z-index: 10;
}
@media only screen and (max-width: 1000px) {
  .why-us-container {
    gap: 56px;
    padding: 96px 56px;
  }
}
@media only screen and (max-width: 768px) {
  .why-us-container {
    padding: 72px 32px;
    gap: 48px;
  }
}
@media only screen and (max-width: 600px) {
  .why-us-container {
    padding: 56px 32px;
    gap: 56px;
  }
}
@media only screen and (max-width: 400px) {
  .why-us-container {
    gap: 48px;
  }
}
.why-us-container .text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 24px;
}
.why-us-container .text-container .why-us-title {
  background-image: linear-gradient(145deg, #fff 65%, rgba(255, 255, 255, 0.43));
  text-shadow: 0 1px rgba(0, 0, 0, 0.07);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  font-family: SF-Bold;
  font-size: 4rem;
  letter-spacing: -0.8px;
  line-height: 80px;
  max-width: 640px;
}
@media only screen and (max-width: 768px) {
  .why-us-container .text-container .why-us-title {
    font-size: 3.48rem;
    line-height: 66px;
    max-width: 480px;
  }
}
@media only screen and (max-width: 400px) {
  .why-us-container .text-container .why-us-title {
    font-size: 2.96rem;
    line-height: 56px;
  }
}
.why-us-container .text-container .why-us-description {
  font-family: Gilroy-Medium;
  font-size: 1.32rem;
  color: #bdbdc0;
  max-width: 480px;
  margin-top: 4px;
  line-height: 28px;
}
@media only screen and (max-width: 400px) {
  .why-us-container .text-container .why-us-description {
    font-size: 1.24rem;
  }
}
.why-us-container .cards-container {
  display: flex;
  width: 100%;
  height: 520px;
  gap: 24px;
}
@media only screen and (max-width: 1000px) {
  .why-us-container .cards-container {
    flex-direction: column;
    height: auto;
  }
}
.why-us-container .cards-container .card {
  display: flex;
  border-radius: 16px;
  align-items: flex-start;
  overflow: hidden;
}
.why-us-container .cards-container .card .text-container {
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  max-width: 480px;
  display: flex;
  flex: 1;
  justify-content: flex-start;
}
.why-us-container .cards-container .card .text-container .card-title {
  color: #fff;
  font-family: SF-Bold;
  font-size: 2rem;
  letter-spacing: -0.8px;
  z-index: 10;
}
@media only screen and (max-width: 1000px) {
  .why-us-container .cards-container .card .text-container .card-title {
    font-size: 3.16rem;
  }
}
@media only screen and (max-width: 768px) {
  .why-us-container .cards-container .card .text-container .card-title {
    font-size: 2.56rem;
  }
}
@media only screen and (max-width: 400px) {
  .why-us-container .cards-container .card .text-container .card-title {
    font-size: 2.16rem;
  }
}
.why-us-container .cards-container .card .text-container .card-description {
  font-family: Gilroy-Medium;
  font-size: 1.16rem;
  color: #fff;
  max-width: 520px;
  line-height: 26px;
  z-index: 10;
}
@media only screen and (max-width: 400px) {
  .why-us-container .cards-container .card .text-container .card-description {
    font-size: 1rem;
    line-height: 20px;
  }
}
.why-us-container .cards-container .card.creativity {
  width: 100%;
  max-height: 520px !important;
  flex-direction: column;
  background: linear-gradient(57.869deg, #ff6737 0%, #ffc24c 100%);
  padding: 24px 32px;
  padding-bottom: 0px;
}
@media only screen and (max-width: 1100px) {
  .why-us-container .cards-container .card.creativity {
    padding: 24px;
  }
}
@media only screen and (max-width: 1000px) {
  .why-us-container .cards-container .card.creativity {
    padding: 40px 48px;
    gap: 32px;
  }
}
@media only screen and (max-width: 768px) {
  .why-us-container .cards-container .card.creativity {
    padding: 24px;
    padding-bottom: 0;
  }
}
.why-us-container .cards-container .card.creativity img {
  width: 100%;
  object-fit: cover;
  display: flex;
  max-height: 316px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.why-us-container .cards-container .card.affordable,
.why-us-container .cards-container .card.technology {
  height: calc(50% - 20px);
  /* Each card in the second column takes up half the height, accounting for margins */
  flex: 1;
}
.why-us-container .cards-container .card.affordable {
  padding: 32px 0px 32px 32px;
  flex-direction: row;
  background-image: url("../assets/why-us/affordable-bg.png");
  position: relative;
}
@media only screen and (max-width: 1100px) {
  .why-us-container .cards-container .card.affordable {
    padding: 24px;
  }
}
@media only screen and (max-width: 1000px) {
  .why-us-container .cards-container .card.affordable {
    padding: 24px;
    flex-direction: column;
    align-self: baseline;
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 768px) {
  .why-us-container .cards-container .card.affordable {
    align-self: normal;
    gap: 24px;
  }
}
.why-us-container .cards-container .card.affordable .text-container {
  max-width: 240px;
}
.why-us-container .cards-container .card.affordable img {
  width: 52%;
  mix-blend-mode: luminosity;
  position: absolute;
  right: -48px;
  bottom: 0;
}
@media only screen and (max-width: 1000px) {
  .why-us-container .cards-container .card.affordable img {
    width: 24rem;
    position: relative;
  }
}
@media only screen and (max-width: 768px) {
  .why-us-container .cards-container .card.affordable img {
    margin: 0 auto;
    right: 0;
  }
}
.why-us-container .cards-container .card.technology {
  padding: 32px 0px 32px 32px;
  flex-direction: row;
  background: #1a191c;
  border: 1px solid #333333;
  position: relative;
}
@media only screen and (max-width: 1100px) {
  .why-us-container .cards-container .card.technology {
    padding: 24px;
  }
}
@media only screen and (max-width: 1000px) {
  .why-us-container .cards-container .card.technology {
    flex: 1;
    height: auto;
  }
}
@media only screen and (max-width: 768px) {
  .why-us-container .cards-container .card.technology {
    padding: 56px 32px;
  }
}
@media only screen and (max-width: 600px) {
  .why-us-container .cards-container .card.technology {
    padding: 24px;
    flex-direction: column;
    min-height: 28rem;
  }
}
@media only screen and (max-width: 400px) {
  .why-us-container .cards-container .card.technology {
    min-height: 24rem;
  }
}
.why-us-container .cards-container .card.technology .text-container {
  max-width: 240px;
}
.why-us-container .cards-container .card.technology img {
  position: absolute;
  right: -56px;
  top: 0;
  height: 100%;
  object-fit: contain;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000000 20%, #000000 80%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 20%, #000000 80%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
  position-try-fallbacks: flip-start;
}
@media only screen and (max-width: 1000px) {
  .why-us-container .cards-container .card.technology img {
    right: 4px;
    filter: brightness(0.5);
  }
}
.why-us-container .cards-container .column-1 {
  flex: 1;
  display: flex;
}
.why-us-container .cards-container .column-2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 24px;
}
@media only screen and (max-width: 1000px) {
  .why-us-container .cards-container .column-2 {
    flex-direction: row;
  }
}
@media only screen and (max-width: 768px) {
  .why-us-container .cards-container .column-2 {
    flex-direction: column;
  }
}
.clients-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  z-index: 10;
  margin: 0 24px 96px 24px;
  align-items: center;
  text-align: -webkit-center;
  position: relative;
  /* 3x3 layout for screens smaller than 1000px */
  /* 2x2 layout for screens smaller than 768px (tablet/mobile) */
  /* Horizontal dividers between rows */
  /* Vertical dividers between columns */
}
@media only screen and (max-width: 1000px) {
  .clients-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
  }
}
@media only screen and (max-width: 768px) {
  .clients-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
  }
}
@media only screen and (max-width: 600px) {
  .clients-container {
    margin: 0 16px 96px 16px;
  }
}
.clients-container .client {
  width: 100%;
  height: auto;
  padding: 64px;
}
@media only screen and (max-width: 1000px) {
  .clients-container .client {
    padding: 56px;
  }
}
@media only screen and (max-width: 600px) {
  .clients-container .client {
    padding: 40px;
  }
}
.clients-container .client img {
  width: 10rem;
}
@media only screen and (max-width: 768px) {
  .clients-container .client img {
    width: 12rem;
  }
}
.clients-container .client.globe {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  align-items: center;
}
@media only screen and (max-width: 600px) {
  .clients-container .client.globe {
    padding: 24px;
  }
}
.clients-container .client.globe img {
  width: 7.5rem;
}
@media only screen and (max-width: 600px) {
  .clients-container .client.globe img {
    width: 3.45rem;
  }
}
@media only screen and (max-width: 400px) {
  .clients-container .client.globe img {
    width: 3rem;
  }
}
.clients-container .client.globe span {
  font-family: "SF-Medium";
  color: #fff;
  font-size: 0.975rem;
}
.clients-container::before,
.clients-container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #2a2a2a 50%, rgba(255, 255, 255, 0) 100%);
}
.clients-container::before {
  top: calc(50% - 1px);
  /* Center the horizontal divider */
}
@media only screen and (max-width: 1000px) {
  .clients-container::before {
    top: calc(33% - 1px);
  }
}
@media only screen and (max-width: 768px) {
  .clients-container::before {
    top: calc(25% - 1px);
  }
}
@media only screen and (max-width: 400px) {
  .clients-container::before {
    top: calc(24.5% - 1px);
  }
}
@media only screen and (max-width: 1000px) {
  .clients-container::after {
    top: calc(66% - 1px);
  }
}
@media only screen and (max-width: 768px) {
  .clients-container::after {
    top: calc(75% - 1px);
  }
}
@media only screen and (max-width: 400px) {
  .clients-container::after {
    top: calc(73.5% - 1px);
  }
}
.clients-container .middle-divider {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #2a2a2a 50%, rgba(255, 255, 255, 0) 100%);
  /* Show only for 768px and below */
  display: none;
}
@media only screen and (max-width: 768px) {
  .clients-container .middle-divider {
    display: block;
    top: calc(50% - 1px);
  }
}
@media only screen and (max-width: 400px) {
  .clients-container .middle-divider {
    top: calc(49% - 1px);
  }
}
.clients-container .divider-vertical {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, #2a2a2a 50%, rgba(255, 255, 255, 0.02) 100%);
}
.clients-container .divider-1 {
  left: calc(25% - 1px);
  /* Position at 1st column's right edge */
}
@media only screen and (max-width: 1000px) {
  .clients-container .divider-1 {
    left: calc(33% - 1px);
  }
}
@media only screen and (max-width: 768px) {
  .clients-container .divider-1 {
    left: calc(50% - 1px);
  }
}
.clients-container .divider-2 {
  left: calc(50% - 1px);
  /* Position at 2nd column's right edge */
}
@media only screen and (max-width: 1000px) {
  .clients-container .divider-2 {
    left: calc(66% - 1px);
  }
}
@media only screen and (max-width: 768px) {
  .clients-container .divider-2 {
    display: none;
  }
}
.clients-container .divider-3 {
  left: calc(75% - 1px);
  /* Position at 3rd column's right edge */
}
@media only screen and (max-width: 1000px) {
  .clients-container .divider-3 {
    display: none;
  }
}
.video-showcase-container {
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 0 32px 0 32px;
  position: relative;
  z-index: 1;
}
.video-showcase-container img {
  border-radius: 24px;
  position: relative;
}
.video-showcase-container .video-detail-container {
  width: 100%;
  height: -webkit-fill-available;
  position: absolute;
  left: 0;
  top: 0;
  padding: 32px 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.video-showcase-container .video-detail-container .top-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.video-showcase-container .video-detail-container .top-container img {
  border-radius: 0;
  width: 8rem;
}
.video-showcase-container .video-detail-container .top-container span {
  font-family: "SF-Bold";
  font-size: 1.25rem;
  color: #fff;
}
.video-showcase-container .video-detail-container .bottom-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.video-showcase-container .video-detail-container .bottom-container .detail-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.video-showcase-container .video-detail-container .bottom-container .detail-container img {
  width: 3rem;
  cursor: pointer;
}
.video-showcase-container .video-detail-container .bottom-container .detail-container .title {
  font-family: "SF-Bold";
  font-size: 1.5rem;
}
.video-showcase-container .video-detail-container .bottom-container .detail-container .description {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.video-showcase-container .video-detail-container .bottom-container .detail-container .description .text {
  font-family: "SF-Medium";
  font-size: 1.25rem;
}
.video-showcase-container .video-detail-container .bottom-container .detail-container .description .circle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}
.video-showcase-container .video-detail-container .bottom-container .slider-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  align-self: end;
}
.video-showcase-container .video-detail-container .bottom-container .slider-container .controls-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.video-showcase-container .video-detail-container .bottom-container .slider-container .controls-container .count {
  font-family: "SF-Medium";
  font-size: 1.5rem;
  color: #fff;
}
.video-showcase-container .video-detail-container .bottom-container .slider-container .controls-container .count span {
  color: rgba(255, 255, 255, 0.4);
}
.video-showcase-container .video-detail-container .bottom-container .slider-container .controls-container .button-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.video-showcase-container .video-detail-container .bottom-container .slider-container .controls-container .button-container img {
  width: 1.35rem;
  cursor: pointer;
}
.video-showcase-container .video-detail-container .bottom-container .slider-container .progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
}
.video-showcase-container .video-detail-container .bottom-container .slider-container .progress-bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 40%;
  background: #fff;
}
.achievements-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-evenly;
  padding: 80px 0;
  align-items: end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  position: relative;
  background: #0e0e11;
  z-index: 1;
  background-image: url(../assets/background.png);
  background-size: cover;
  background-position: bottom;
}
.achievements-container .achievement {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-end;
}
.achievements-container .achievement .number-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.achievements-container .achievement .number-container span {
  font-family: "HEL-BOLD";
  letter-spacing: 0px;
  color: #fff;
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-left: 8px;
}
.achievements-container .achievement .number-container h1 {
  font-family: "HEL-BOLD";
  letter-spacing: -1px;
  font-size: 4rem;
  color: #fff;
  line-height: 0.85;
}
.achievements-container .achievement .achievement-description {
  font-family: "HEL-MED";
  font-size: 1.3rem;
  color: #fff;
  max-width: 132px;
  line-height: 24px;
  height: min-content;
}
.achievements-container .divider {
  height: 64px;
  width: 1px;
  background: rgba(255, 255, 255, 0.64);
}
.services-container {
  display: flex;
  flex-direction: column;
}
.services-container .orbit-container {
  position: relative;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -40%);
  width: 1200px;
  height: auto;
  box-sizing: border-box;
}
.services-container .orbit-container .orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: top left;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.services-container .orbit-container .eight {
  transform: translateX(-50%) translateY(-50%);
  width: 1162px;
  height: 1162px;
  background-image: url(../assets/orbits/orbit-8.svg);
  background-repeat: round;
}
.services-container .orbit-container .seven {
  transform: translateX(-50%) translateY(-50%);
  width: 962px;
  height: 962px;
  background-image: url(../assets/orbits/orbit-7.svg);
  background-repeat: round;
}
.services-container .orbit-container .six {
  transform: translateX(-50%) translateY(-50%);
  width: 780px;
  height: 780px;
  background-image: url(../assets/orbits/orbit-6.svg);
  background-repeat: round;
}
.services-container .orbit-container .five {
  transform: translateX(-50%) translateY(-50%);
  width: 614px;
  height: 614px;
  background-image: url(../assets/orbits/orbit-5.svg);
  background-repeat: round;
}
.services-container .orbit-container .four {
  transform: translateX(-50%) translateY(-50%);
  width: 464px;
  height: 464px;
  background-image: url(../assets/orbits/orbit-4.svg);
  background-repeat: round;
}
.services-container .orbit-container .three {
  transform: translateX(-50%) translateY(-50%);
  width: 332px;
  height: 332px;
  background-image: url(../assets/orbits/orbit-3.svg);
  background-repeat: round;
}
.services-container .text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  color: #fff;
  margin-top: 80px;
  gap: 24px;
}
.services-container .text-container .services-title {
  background-image: linear-gradient(145deg, #fff 65%, rgba(255, 255, 255, 0.43));
  text-shadow: 0 1px rgba(0, 0, 0, 0.07);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  font-family: SF-Bold;
  font-size: 4.5rem;
  letter-spacing: -0.8px;
  line-height: 72px;
  max-width: 640px;
}
.services-container .text-container .services-description {
  font-family: Gilroy-Medium;
  font-size: 1.18rem;
  color: #bdbdc0;
  max-width: 520px;
  letter-spacing: 0.32px;
  margin-top: 4px;
}
.services-container .cards-container {
  display: flex;
  flex-direction: row;
  padding: 80px 48px;
  gap: 16px;
}
.services-container .cards-container .col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.services-container .cards-container .col .card {
  flex: 1;
}
.services-container .cards-container .col .card .text-container {
  flex: 1;
}
.services-container .cards-container .col .card .image-container {
  display: flex;
  flex: 1;
  padding-top: 24px;
  position: relative;
}
.services-container .cards-container .col .card.ui {
  background-image: url(../assets/services/ui-bg.png);
  background-repeat: no-repeat;
  z-index: 1;
  background-size: cover;
  display: flex;
  flex-direction: row;
  border-radius: 12px;
  position: relative;
}
.services-container .cards-container .col .card.ui .text-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  align-items: normal;
  padding-left: 24px;
  margin-top: 0;
  align-self: flex-end;
  margin-bottom: 24px;
}
.services-container .cards-container .col .card.ui .text-container .service-title {
  font-family: "SF-Bold";
  font-size: 3.75rem;
  color: #fff;
  letter-spacing: -1px;
  line-height: 64px;
}
.services-container .cards-container .col .card.ui .text-container .service-description {
  font-family: Gilroy-Medium;
  font-size: 1rem;
  color: #f5f9ff;
  max-width: 200px;
  letter-spacing: 0px;
}
.services-container .cards-container .col .card.ui .text-container .learn-more-btn {
  background: #fff;
  border-radius: 6px;
  border: none;
  font-family: "SF-Bold";
  font-size: 1rem;
  color: #128de3;
  letter-spacing: 0px;
  padding: 6px;
  cursor: pointer;
}
.services-container .cards-container .col .card.ui .image-container {
  overflow: hidden;
}
.services-container .cards-container .col .card.ui .image-container img {
  border-bottom-right-radius: 12px;
  margin-left: 40px;
  overflow: hidden;
  width: 14rem;
  position: absolute;
  bottom: -24px;
}
@media only screen and (max-width: 1200px) {
  .services-container .cards-container .col .card.ui .image-container img {
    bottom: -56px;
  }
}
.services-container .cards-container .col .card.web-dev {
  background-image: url(../assets/services/ui-web-dev.png);
  background-repeat: no-repeat;
  z-index: 1;
  background-size: cover;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}
.services-container .cards-container .col .card.web-dev .text-container {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
  padding-right: 24px;
  text-align: left;
  margin-top: 16px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.services-container .cards-container .col .card.web-dev .text-container .text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.services-container .cards-container .col .card.web-dev .text-container .text .service-title {
  font-family: "SF-Bold";
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: -1px;
}
.services-container .cards-container .col .card.web-dev .text-container .text .service-description {
  font-family: Gilroy-Medium;
  font-size: 1rem;
  color: #f5f9ff;
  max-width: 200px;
  letter-spacing: 0px;
}
.services-container .cards-container .col .card.web-dev .text-container .learn-more-btn {
  background: #fff;
  border-radius: 6px;
  border: none;
  font-family: "SF-Bold";
  font-size: 1rem;
  color: #1f2024;
  letter-spacing: 0px;
  padding: 8px 12px;
  cursor: pointer;
}
.services-container .cards-container .col .card.web-dev .image-container {
  display: flex;
  padding-top: 24px;
  margin-left: 32px;
}
.services-container .cards-container .col .card.web-dev .image-container img {
  border-bottom-right-radius: 12px;
  margin-left: 12px;
  overflow: hidden;
  box-shadow: -2px 4px 12px #021022;
}
.services-container .cards-container .col .card.mobile-app {
  background-image: url(../assets/services/app-bg.png);
  background-repeat: no-repeat;
  z-index: 1;
  background-size: cover;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  gap: 24px;
  flex: 1;
}
.services-container .cards-container .col .card.mobile-app .text-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  align-items: normal;
  padding-left: 24px;
  padding-right: 24px;
  margin-top: 32px;
  position: relative;
  flex: 0;
}
.services-container .cards-container .col .card.mobile-app .text-container .service-title {
  font-family: "SF-Bold";
  font-size: 2.75rem;
  color: #fff;
  letter-spacing: -1px;
  line-height: 48px;
}
.services-container .cards-container .col .card.mobile-app .text-container .service-description {
  font-family: Gilroy-Medium;
  font-size: 1rem;
  color: #f5f9ff;
  max-width: none;
  letter-spacing: 0px;
}
.services-container .cards-container .col .card.mobile-app .text-container .learn-more-btn {
  background: #fff;
  border-radius: 0px 6px 6px 0px;
  border: none;
  font-family: "SF-Bold";
  font-size: 1rem;
  color: #b82a00;
  letter-spacing: 0px;
  padding: 8px 16px;
  cursor: pointer;
  width: fit-content;
  margin-left: -24px;
}
.services-container .cards-container .col .card.mobile-app .image-container {
  overflow: hidden;
  padding: 0 48px;
  width: 100%;
}
.services-container .cards-container .col .card.mobile-app .image-container video {
  border-radius: 3.5rem;
  overflow: hidden;
  width: -webkit-fill-available;
  margin: auto;
  margin-bottom: -96px;
}
@media only screen and (max-width: 1300px) {
  .services-container .cards-container .col .card.mobile-app .image-container video {
    border-radius: 2.95rem;
  }
}
@media only screen and (max-width: 1100px) {
  .services-container .cards-container .col .card.mobile-app .image-container video {
    border-radius: 1.85rem;
  }
}
.services-container .cards-container .col .card.branding {
  background: #e7f3f6;
  background-repeat: no-repeat;
  z-index: 1;
  background-size: cover;
  display: flex;
  flex-direction: row;
  border-radius: 12px;
  position: relative;
  flex: none;
}
.services-container .cards-container .col .card.branding .text-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  align-items: normal;
  padding-left: 24px;
  margin-top: 24px;
  padding-bottom: 24px;
}
.services-container .cards-container .col .card.branding .text-container .service-title {
  font-family: "SF-Bold";
  font-size: 2.75rem;
  color: #ee448b;
  letter-spacing: -1px;
  line-height: 48px;
}
.services-container .cards-container .col .card.branding .text-container .service-description {
  font-family: Gilroy-Medium;
  font-size: 1rem;
  color: #4a4a50;
  max-width: 200px;
  letter-spacing: 0px;
}
.services-container .cards-container .col .card.branding .text-container .learn-more-btn {
  background: #fff;
  border-radius: 6px;
  border: none;
  font-family: "SF-Bold";
  font-size: 1rem;
  color: #ee438b;
  letter-spacing: 0px;
  padding: 6px;
  cursor: pointer;
  margin-top: 16px;
}
.services-container .cards-container .col .card.branding .image-container {
  overflow: hidden;
}
.services-container .cards-container .col .card.branding .image-container img {
  border-bottom-right-radius: 0;
  overflow: hidden;
  max-width: 20rem;
  position: absolute;
  left: -44px;
  bottom: 0;
}
.services-container .cards-container .col .card.marketing {
  background-image: url(../assets/services/ui-web-dev.png);
  background-repeat: no-repeat;
  z-index: 1;
  background-size: cover;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  flex: none;
}
.services-container .cards-container .col .card.marketing .text-container {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
  padding-right: 24px;
  text-align: left;
  margin-top: 16px;
  justify-content: space-between;
  align-items: flex-start;
}
.services-container .cards-container .col .card.marketing .text-container .service-title {
  font-family: "SF-Bold";
  font-size: 2.75rem;
  color: #fff;
  letter-spacing: -1px;
  line-height: 48px;
}
.services-container .cards-container .col .card.marketing .text-container .service-description {
  font-family: Gilroy-Medium;
  font-size: 1rem;
  color: #f5f9ff;
  max-width: none;
  letter-spacing: 0px;
}
.services-container .cards-container .col .card.marketing .image-container {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 24px;
  justify-content: space-between;
  flex: none;
}
.services-container .cards-container .col .card.marketing .image-container img {
  width: 3rem;
}
.services-container .cards-container .col .card.marketing .learn-more-btn {
  background: #fff;
  border-radius: 6px;
  border: none;
  font-family: "SF-Bold";
  font-size: 1rem;
  color: #1f2024;
  letter-spacing: 0px;
  padding: 8px 48px;
  cursor: pointer;
  margin-top: 12px;
  width: fit-content;
  margin-left: 24px;
  margin-bottom: 20px;
}
.services-container .cards-container .col .services-all-btn {
  width: 100%;
  background: #48484a;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  font-family: "SF-Medium";
  font-size: 1.45rem;
  color: #fff;
  cursor: pointer;
  position: relative;
  height: 56px;
}
.testimonials-container {
  display: flex;
  flex-direction: column;
  color: #fff;
  align-items: center;
  padding: 160px 0;
}
.testimonials-container .text-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.testimonials-container .text-container .testimonial-title {
  display: flex;
  position: relative;
}
.testimonials-container .text-container .testimonial-title h1 {
  font-family: "SF-Medium";
  font-size: 7.5rem;
  letter-spacing: 0px;
  line-height: 112px;
  text-align: center;
  max-width: 1040px;
  font-weight: 200;
}
.testimonials-container .text-container .testimonial-title .gif {
  position: absolute;
  border-radius: 12px;
  width: 8rem;
}
.testimonials-container .text-container .testimonial-title .gif.first {
  right: 152px;
  top: -104px;
}
.testimonials-container .text-container .testimonial-title .gif.second {
  left: -48px;
  top: -20px;
}
.testimonials-container .text-container .testimonial-title .gif.third {
  left: 64px;
  bottom: -80px;
}
.testimonials-container .text-container .testimonial-title .gif.forth {
  right: -24px;
  bottom: -64px;
}
.testimonials-container .text-container .testimonial-description {
  font-family: Gilroy-Medium;
  font-size: 1.32rem;
  color: #ffffff;
  letter-spacing: 0.32px;
  margin-top: 120px;
  text-align: center;
  width: 100%;
}
.testimonials-container .reviews-container {
  display: flex;
  margin: 120px 0;
  position: relative;
  overflow: hidden;
  /* Hide overflow to create a scrolling effect */
  height: -webkit-fill-available;
  width: 100%;
  transition: none;
  /* Disable transitions for layout changes */
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000000 20%, #000000 80%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 20%, #000000 80%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
  -webkit-mask-composite: intersect;
}
.testimonials-container .reviews-container .splide__track .splide__list {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  gap: 160px;
}
.testimonials-container .reviews-container .splide__track .splide__list .splide__slide {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 360px;
}
.testimonials-container .reviews-container .splide__track .splide__list .splide__slide.review-column .review {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.testimonials-container .reviews-container .splide__track .splide__list .splide__slide.review-column .review .review-title {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.testimonials-container .reviews-container .splide__track .splide__list .splide__slide.review-column .review .review-title img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.testimonials-container .reviews-container .splide__track .splide__list .splide__slide.review-column .review .review-title .details {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.testimonials-container .reviews-container .splide__track .splide__list .splide__slide.review-column .review .review-title .details .name {
  font-family: "SF-Medium";
  font-weight: 200;
  font-size: 0.96rem;
  color: #fff;
  letter-spacing: 0px;
}
.testimonials-container .reviews-container .splide__track .splide__list .splide__slide.review-column .review .review-title .details .handle {
  font-family: "SF-Medium";
  font-weight: 200;
  font-size: 0.96rem;
  color: rgba(245, 249, 255, 0.77);
  letter-spacing: 0px;
}
.testimonials-container .reviews-container .splide__track .splide__list .splide__slide.review-column .review .review-description {
  font-family: "SF-Regular";
  font-weight: 100;
  font-size: 0.96rem;
  color: rgba(245, 249, 255, 0.64);
  letter-spacing: 0px;
}
.form-container {
  display: flex;
  flex-direction: row;
  padding: 0 96px 160px;
  justify-content: space-between;
  align-items: center;
}
.form-container .text-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-container .text-container .ratings-container {
  display: flex;
  flex-direction: row;
  border: 1px solid #fff;
  border-radius: 72px;
  padding: 16px 24px;
  width: fit-content;
  gap: 20px;
  align-items: center;
}
.form-container .text-container .ratings-container img {
  width: 6rem;
}
.form-container .text-container .ratings-container .separator {
  width: 1px;
  height: 24px;
  background: #fff;
}
.form-container .text-container .ratings-container .review-count {
  font-family: "SF-Medium";
  font-weight: 200;
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: 0px;
}
.form-container .text-container .form-title {
  font-family: "SF-Bold";
  font-size: 3.5rem;
  letter-spacing: -1px;
  line-height: 60px;
  font-weight: 100;
  color: #fff;
  max-width: 480px;
  margin-top: 8px;
}
.form-container .text-container .form-description {
  font-family: Gilroy-Medium;
  font-size: 1.2rem;
  color: rgba(245, 249, 255, 0.77);
  max-width: 480px;
  letter-spacing: 0.32px;
  margin-top: 4px;
}
.form-container .text-container .button-container {
  display: flex;
  flex-direction: row;
  gap: 12px;
  position: relative;
}
.form-container .text-container .button-container .cta-btn {
  cursor: pointer;
  position: relative;
}
.form-container .text-container .button-container .cta-btn.book {
  cursor: pointer;
  background: #128de3;
}
.form-container .work-slider-container {
  display: flex;
  flex-direction: row;
  gap: 32px;
  overflow: hidden;
  height: 100vh;
  transform: skewY(12deg);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000000 80%, #000000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 8%, #000000 88%, rgba(0, 0, 0, 0) 102%);
  mask-composite: intersect;
  -webkit-mask-composite: intersect;
  /* Continuous scroll effect */
}
.form-container .work-slider-container .work-column {
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 150vh;
  /* Increase column height for continuous scroll */
  animation: scrollColumn 10s linear infinite;
}
@media only screen and (max-width: 600px) {
  .form-container .work-slider-container .work-column {
    flex-direction: row;
    width: 150vw;
    height: auto;
    animation: scrollRow 10s linear infinite;
  }
}
.form-container .work-slider-container .work-column img {
  max-width: 200px;
  border-radius: 24px;
  object-fit: cover;
}
.form-container .work-slider-container .work-column:nth-child(2) {
  animation-direction: reverse;
}
@keyframes scrollColumn {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + 100vh));
    /* Adjust based on container height */
  }
}
@keyframes scrollRow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% + 100vw));
    /* Adjust based on container height */
  }
}
.footer-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 80px 120px 40px;
  background: #141414;
  position: relative;
}
.footer-container .details-container {
  display: flex;
  flex-direction: row;
}
.footer-container .details-container .text-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer-container .details-container .text-container img {
  width: 6.5rem;
}
.footer-container .details-container .text-container .company-description {
  font-family: Gilroy-Medium;
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: 0.32px;
  margin-top: 4px;
  line-height: 26px;
  max-width: 400px;
}
.footer-container .details-container .links-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 160px;
}
.footer-container .details-container .links-container .links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-container .details-container .links-container .links a {
  font-family: "SF-Bold";
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: 0px;
}
.footer-container .details-container .links-container .contacts {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer-container .details-container .links-container .contacts .email {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-container .details-container .links-container .contacts .email .title {
  font-family: "SF-Regular";
  font-weight: 100;
  font-size: 1.04rem;
  color: rgba(245, 249, 255, 0.56);
  letter-spacing: 0px;
  text-transform: uppercase;
}
.footer-container .details-container .links-container .contacts .email .description {
  font-family: "SF-Bold";
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: 0px;
}
.footer-container .details-container .links-container .contacts .whatsapp {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-container .details-container .links-container .contacts .whatsapp .title {
  font-family: "SF-Regular";
  font-weight: 100;
  font-size: 1.04rem;
  color: rgba(245, 249, 255, 0.56);
  letter-spacing: 0px;
  text-transform: uppercase;
}
.footer-container .details-container .links-container .contacts .whatsapp .description {
  display: flex;
  flex-direction: row;
  gap: 4px;
  font-family: "SF-Bold";
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: 0px;
}
.footer-container .platforms-container {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 72px;
}
.footer-container .platforms-container img {
  height: 72px;
  width: auto;
  cursor: pointer;
}
.footer-container .services-navigation {
  display: flex;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin-top: 0px;
}
.footer-container .services-navigation .services {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.footer-container .services-navigation .services .collapsed {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  padding: 12px 8px;
  align-items: center;
}
.footer-container .services-navigation .services .collapsed .title {
  font-family: "SF-Bold";
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: 0px;
  height: fit-content;
}
.footer-container .services-navigation .services .collapsed .plus-btn {
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 2rem;
}
.footer-container .services-navigation .services .opened {
  display: none;
}
.footer-container .social-links-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  color: #fff;
  justify-content: space-between;
  align-items: center;
}
.footer-container .social-links-container .copyright {
  font-family: "SF-Medium";
  font-weight: 100;
  color: rgba(245, 249, 255, 0.48);
  font-size: 1.12rem;
  letter-spacing: 0.45px;
}
.footer-container .social-links-container .icons-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
}
.footer-container .social-links-container .icons-container .icon {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  cursor: pointer;
}
.footer-container .social-links-container .legal-link-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.footer-container .social-links-container .legal-link-container a {
  font-family: "SF-Medium";
  font-weight: 100;
  color: rgba(245, 249, 255, 0.48);
  font-size: 1.12rem;
  letter-spacing: 0.45px;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */