:root {
  --gradient--yellow: #FBCD86;
  --gradient--orange: #F93B1F;
  --gradient--green: #47D6CC;
  --gradient--mono: oklch(0.7986 0.1206 188.31 / 15%);
  --gradient--mono-step: oklch(0.7986 0.1206 188.31 / 26.7%);
  --gradient--mono-orange: oklch(0.6427 0.2286 31.44 / 45%);

}

.box-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(88deg, #47D6CC 52.62%, #F93B1F 73.87%);
  filter: blur(15px);

}

.testimonials-stripe.first .stripe-gradient {
  background: radial-gradient(ellipse at 100% 50%,
      #F93B1F 30%,
      #47D6CC 40%,
      #101d1f 50%,
      #101d1f 90%);
  filter: blur(10px);

}

.testimonials-stripe.second .stripe-gradient {
  background: radial-gradient(ellipse at 100% 50%,
      #F93B1F 40%,
      #47D6CC 50%,
      #101d1f 60%,
      #101d1f 90%);
  filter: blur(10px);

}

.testimonials-stripe.third .stripe-gradient {
  background: radial-gradient(ellipse at 100% 70%,
      #F93B1F 20%,
      #47D6CC 50%,
      #101d1f 90%);
  filter: blur(10px);

}

.stripe-gradient_orange {
  filter: blur(15px);

}

.stripe-gradient_green {
  filter: blur(15px);

}

.swiper-slide.is-testimonials {
  height: auto !important;

}

.hero_anim {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero_anim.ready {
  opacity: 1;
}

.testimonial-rich-text h5 {
  color: var(--swatch--warm-grey-2);

}

.nav_wrap {
  background: linear-gradient(180deg, var(--swatch--dark), #1D3439);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);

}

.nav_banner_wrap,
.nav_wrap {
  transition: transform var(--animation-default-half);

}

/*

[data-scrolling-started="true"][data-scrolling-direction="down"] .nav_banner_wrap,
[data-scrolling-started="true"][data-scrolling-direction="down"] .nav_wrap {
  transform: translateY(calc(var(--nav--banner-height) * -1));
}
*/
.vfx {
  background-image: url(https://cdn.prod.website-files.com/68e7942a52944adda4d1dd9c/68e84c08d0640c62f3221b1e_noise-small.png);
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: 0.0625;

}

.wf-design-mode [data-anim-card] {
  position: relative;

}

.swiper-slide.is-icon {
  transform: scale(0.7);
  transition: transform var(--animation-default);
  opacity: 0.6;
}

.swiper-slide.is-icon.is-active {
  transform: scale(1);
  opacity: 1;

}

.wf-design-mode [data-webflow-preview="true"].icons-swiper {
  overflow: visible;

}

.wf-design-mode [data-webflow-preview="true"].icons-swiper .swiper-slide.is-icon {
  transform: scale(1);
  opacity: 1;

}

.footer_wrap {
  background: linear-gradient(0deg, rgb(3, 5, 6) 0%, rgb(4, 8, 9) 5%, rgb(6, 10, 11) 10%, rgb(7, 12, 14) 15%, rgb(8, 14, 16) 20%, rgb(9, 16, 17) 25%, rgb(10, 17, 19) 30%, rgb(10, 19, 20) 35%, rgb(11, 20, 22) 40%, rgb(12, 21, 23) 45%, rgb(13, 22, 25) 50%, rgb(13, 24, 26) 55%, rgb(14, 26, 28) 60%, rgb(15, 27, 30) 65%, rgb(17, 30, 32) 70%, rgb(18, 32, 35) 75%, rgb(20, 35, 38) 80%, rgb(21, 38, 42) 85%, rgb(23, 42, 46) 90%, rgb(26, 46, 51) 95%, rgb(29, 51, 56) 100%);

  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}

.gradient-bar {
  --gradient-x: 0%;
  --gradient-y: 10%;
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y), var(--gradient--yellow) 0%, var(--gradient--orange) 60%, transparent 70%);
  filter: blur(15px);
}

.gradient-bar.bar-1 {
  --gradient-y: 0%;
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y), var(--gradient--yellow) 10%, var(--gradient--orange) 30%, transparent 40%);
  filter: blur(15px);
  opacity: 0.7;
}

.gradient-bar.bar-2 {
  --gradient-y: 0%;
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y), var(--gradient--yellow) 5%, var(--gradient--orange) 40%, transparent 55%);
  filter: blur(15px);
  opacity: 0.8;
}

.gradient-bar.bar-3 {
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y), var(--gradient--yellow) 5%, var(--gradient--orange) 50%, transparent 60%);
  filter: blur(15px);
  opacity: 0.8;
}

/* Reversed version - just flip the X position */
.gradient-bar.is-reversed {
  --gradient-x: 100%;
}

.logo-card {
  box-shadow: 0 13.505px 27.01px 0 rgba(249, 59, 31, 0.25), 0 8.103px 8.103px 0 rgba(249, 59, 31, 0.25);

}

.awards-slider_cms_wrap.swiper {
  overflow: visible !important;

}

.how_item.is-active .how-icon_wrap {
  color: var(--swatch--brand-2);

}

/*------GRADIENT ORANGE GREEN -------*/

@property --gradient-size {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 15%;
}

.gradient-bar.color {
  --gradient-size: 10%;
  --gradient-x: 0%;
  --gradient-y: 40%;
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y),
      var(--gradient--green) var(--gradient-size),
      var(--gradient--orange) calc(var(--gradient-size) + 40%),
      transparent calc(var(--gradient-size) + 50%));
  filter: blur(10px);
  animation: pulseGradient 3s ease-in-out infinite alternate;
}

.gradient-bar.bar-1.color {
  --gradient-size: 15%;
  --gradient-y: 30%;
  --gradient-x: 15%;
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y),
      var(--gradient--green) var(--gradient-size),
      var(--gradient--orange) calc(var(--gradient-size) + 10%),
      transparent calc(var(--gradient-size) + 15%));
  filter: blur(10px);
  opacity: 0.7;
  animation: pulseGradient 3s ease-in-out infinite alternate;
}

.gradient-bar.bar-2.color {
  --gradient-size: 15%;
  --gradient-x: 0%;
  --gradient-y: 20%;
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y),
      var(--gradient--green) var(--gradient-size),
      var(--gradient--orange) calc(var(--gradient-size) + 25%),
      transparent calc(var(--gradient-size) + 35%));
  filter: blur(10px);
  opacity: 0.8;
  animation: pulseGradient 3s ease-in-out infinite alternate;
}

.gradient-bar.bar-3.color {
  --gradient-size: 25%;
  --gradient-y: 25%;
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y),
      var(--gradient--green) var(--gradient-size),
      var(--gradient--orange) calc(var(--gradient-size) + 15%),
      transparent calc(var(--gradient-size) + 30%));
  filter: blur(10px);
  opacity: 0.8;
  animation: pulseGradient 3s ease-in-out infinite alternate;
}

@keyframes pulseGradient {
  to {
    --gradient-size: 20%;
  }
}

/* Reversed version - just flip the X position */

.gradient-bar.color.is-reversed {
  --gradient-x: 100%;
}

.gradient-bar.color.color.reverse-y {
  --gradient-y: 60%;
}

.gradient-bar.bar-1.color.reverse-y {
  --gradient-y: 70%;
}

.gradient-bar.bar-2.color.reverse-y {
  --gradient-y: 70%;
}

.gradient-bar.bar-3.color.reverse-y {
  --gradient-y: 75%;
}

.gradient-bar.is-reversed {
  --gradient-x: 100%;
}

.gradient-bars {
  transition: width var(--animation-default-half);

}

@container threshold-huge (width >=100em) {
  .gradient-bars.is-large {
    width: 35vw !important;

  }

}

.circle-bar_gradient {
  --gradient-size: 10%;
  --gradient-x: 50%;
  --gradient-y: 50%;
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y),
      var(--gradient--orange) var(--gradient-size),
      var(--gradient--green) calc(var(--gradient-size) + 40%),
      transparent calc(var(--gradient-size) + 50%));
  filter: blur(10px);

}

.circle-bar_gradient.bar-2 {
  --gradient-size: 10%;
  --gradient-x: 50%;
  --gradient-y: 70%;
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y),
      var(--gradient--orange) var(--gradient-size),
      var(--gradient--green) calc(var(--gradient-size) + 30%),
      transparent calc(var(--gradient-size) + 40%));
  filter: blur(10px);

}

.circle-bar_gradient.bar-3 {
  --gradient-size: 10%;
  --gradient-x: 50%;
  --gradient-y: 110%;
  background: radial-gradient(ellipse at var(--gradient-x) var(--gradient-y),
      var(--gradient--orange) var(--gradient-size),
      var(--gradient--green) calc(var(--gradient-size) + 20%),
      transparent calc(var(--gradient-size) + 30%));
  filter: blur(10px);

}

.how_img {
  background: linear-gradient(180deg, var(--swatch--dark-2), var(--swatch--dark)) padding-box,
    linear-gradient(180deg, #1D3439, transparent) border-box;
  border: 1px solid transparent;
}

.card-shadow {
  box-shadow: rgb(47, 47, 65) 0px 0.5px 0px 0.75px, rgba(0, 0, 0, 0.64) 4px 8px 12px -6px;
}

.how-box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -1rem;
  width: 1rem;
  height: 1px;
  background-color: var(--swatch--charcoal);

}

@media (max-width: 767px) {
  .how_img_item {
    padding: 1rem;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, var(--swatch--dark-2), var(--swatch--dark)) padding-box,
      linear-gradient(180deg, #1D3439, transparent) border-box;
    border: 1px solid transparent;

  }
}

@property --gradient-size {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 15%;
}

@keyframes animateGradientSize {
  0% {
    --gradient-size: 10%;
  }

  100% {
    --gradient-size: 25%;
  }
}

.gradient-bar.color.is-hero {
  --gradient-angle: 225deg;
  background: linear-gradient(var(--gradient-angle),
      var(--gradient--green) var(--gradient-size),
      var(--gradient--orange) calc(var(--gradient-size) + 30%),
      transparent calc(var(--gradient-size) + 45%));
  filter: blur(10px);
  animation: animateGradientSize 3s ease-in-out infinite alternate;
}

.gradient-bar.bar-1.color.is-hero {
  --gradient-angle: 240deg;
  background: linear-gradient(var(--gradient-angle),
      var(--gradient--green) 0%,
      var(--gradient--orange) var(--gradient-size),
      transparent calc(var(--gradient-size) + 10%));
  filter: blur(10px);
  opacity: 0.7;
  animation: animateGradientSize 3s ease-in-out infinite alternate;
}

.gradient-bar.bar-2.color.is-hero {
  --gradient-angle: 215deg;
  background: linear-gradient(var(--gradient-angle),
      var(--gradient--green) 0%,
      var(--gradient--orange) calc(var(--gradient-size) + 20%),
      transparent calc(var(--gradient-size) + 25%));
  filter: blur(10px);
  opacity: 0.8;
  animation: animateGradientSize 3s ease-in-out infinite alternate;
}

/* Flip along X axis when reverse-y is added */
.gradient-bar.color.is-hero.reverse-y {
  --gradient-angle: 315deg;
}

.gradient-bar.bar-1.color.is-hero.reverse-y {
  --gradient-angle: 300deg;
}

.gradient-bar.bar-2.color.is-hero.reverse-y {
  --gradient-angle: 325deg;
}

.nav_dropdown_component:has(.w--current) .nav_links_link {
  color: var(--swatch--brand-2);

}

.blog_toc_link.w--current {
  color: var(--swatch--brand-2);

}

.glow-circle {
  background: radial-gradient(60.15% 60.15% at 60.75% 53.39%, #47D6CC 0%, #F6371E 100%);

  filter: blur(40px);

}

.glow-circle {

  transition: top var(--animation-default);
}

.card.diff:hover .glow-circle {
  top: -28rem;

}

.gradient-bar.mono {
  --gradient-shift: 0%;
  --gradient-angle: 90deg;
  background: linear-gradient(var(--gradient-angle),
      transparent calc(0% + var(--gradient-shift)),
      var(--gradient--mono) calc(15% + var(--gradient-shift)),
      var(--gradient--mono-step) calc(25% + var(--gradient-shift)),
      var(--gradient--mono-orange) calc(35% + var(--gradient-shift)),
      transparent calc(55% + var(--gradient-shift)));
  filter: blur(10px);
}

.gradient-bar.mono.bar-2 {
  --gradient-shift: 12%;
}

.gradient-bar.mono.bar-3 {
  --gradient-shift: 25%;
}

.gradient-bar.mono.bar-4 {
  --gradient-shift: 40%;
}

.gradient-bar.mono.bar-5 {
  --gradient-shift: 80%;
}

.gradient-bar.mono.bar-6 {
  --gradient-shift: 40%;
}

.gradient-bar.mono.bar-7 {
  --gradient-shift: 25%;
}

.gradient-bar.mono.bar-8 {
  --gradient-shift: 12%;
}

.gradient-bar.mono.stat {
  --gradient-shift: 0%;
  --gradient-angle: 90deg;
  background: linear-gradient(var(--gradient-angle),
      transparent calc(0% + var(--gradient-shift)),
      var(--gradient--mono) calc(15% + var(--gradient-shift)),
      transparent calc(30% + var(--gradient-shift)));
  filter: blur(10px);
}

.gradient-bar.mono.bar-2.stat {
  --gradient-shift: 80%;
}

.gradient-bar.mono.bar-3.stat {
  --gradient-shift: -20%;
}

.gradient-bar.mono.bar-4.stat {
  --gradient-shift: 70%;
}

.gradient-bar.mono.bar-5.stat {
  --gradient-shift: 60%;
}

.gradient-bar.mono.bar-6.stat {
  --gradient-shift: 90%;
}

.gradient-bar.mono.bar-7.stat {
  --gradient-shift: -20%;
}

.gradient-bar.mono.bar-8.stat {
  --gradient-shift: 5%;
}