#herovehicle {
  display: flex !important;
  width: 100% !important;
  height: auto !important;

}



/* =========================
    CASCADE DELAYS
    ========================= */

.hero-step:nth-child(1) {
  animation-delay: 0s;
}

.hero-step:nth-child(2) {
  animation-delay: 5s;
}

.hero-step:nth-child(3) {
  animation-delay: 10s;
}

/* =========================
    ANIMATION
    5 seconds ≈ 27.78% of 18s
    ========================= */

@keyframes hero-step-cascade {

  /* normal */
  0% {
    transform: scale(1);
  }

  /* grow */
  2% {
    transform: scale(1.15);
  }

  /* stay bigger */
  25.78% {
    transform: scale(1.15);
  }

  /* shrink */
  27.78% {
    transform: scale(1);
  }

  /* rest of this element's cycle */
  100% {
    transform: scale(1);
  }
}







.sponsor-reel {
  width: 100%;
  overflow: hidden;
}

.sponsor-track {
  display: flex;
  width: max-content;

  animation: sponsor-scroll 30s linear infinite;
  will-change: transform;
}

.sponsor-group {
  /*
   * Each copy always fills at least the whole screen.
   * If the logos themselves need more room,decals 
   * the group can naturally become wider.
   */
  min-width: 100vw;

  display: flex;
  align-items: center;

  /*
   * Automatically increases/decreases spacing
   * depending on screen width.
   *
   * space-around is important here because the
   * half-spacing at the ends combines perfectly
   * between reel 1 and reel 2.
   */
  justify-content: space-around;

  flex-shrink: 0;
}

.sponsor {
  flex-shrink: 0;
}

@keyframes sponsor-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sponsor-track {
    animation: none;
    transform: none;
  }
}
/*Quicker on mobile*/
@media (max-width: 1000px) {
  .sponsor-track {
    animation-duration: 10s;
  }
  .sponsor-group {
    /*
      Wider than the screen = more room
      distributed between sponsors.
    */
    min-width: 800vw;
  }
}








.service-carousel {
    --slide-width: min(65vw, 920px);
    --slide-height: 640px;
    --distance: min(48vw, 500px);

    width: 100%;
    overflow: hidden;
}

.service-carousel-viewport {
    position: relative;
    width: 100%;
    height: var(--slide-height);
    overflow: visible;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.service-carousel-viewport.is-dragging {
    cursor: grabbing;
}

.service-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.service-slide {
    position: absolute;

    left: 50%;
    top: 50%;

    width: var(--slide-width);
    height: var(--slide-height);

    /* JS sets these */
    transform:
        translate(
            calc(-50% + var(--x, 0px)),
            -50%
        )
        scale(var(--scale, .72));

    opacity: var(--opacity, 1);

    transform-origin: center;
    will-change: transform;

    
    /*overflow: hidden;*/
}

.service-slide:not(.is-dragging) {
    transition:
        transform 600ms cubic-bezier(.22, 1, .36, 1),
        opacity 600ms ease;
}


/* =========================
   LOADER
   ========================= */

.service-main-loader {
    width: min(440px, 70%);
    margin: 40px auto 0;
}

.service-main-loader-wrap {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.loader-bar-container {
    height: 12px;
    border-radius: 999px;
    background: #262323;
    overflow: hidden;
}

.loader-bar-container-inner {
    width: 100%;
    height: 100%;
 
}

/* moving light indicator */
.service-main-loader-wrap::after {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: calc((100% - (22px * 3)) / 4);
    height: 12px;

    border-radius: 999px;
    background: var(--primary-brand);

    transform: translateX(
        calc(
            var(--progress, 0) *
            (100% + 22px)
        )
    );

    will-change: transform;
}





/*services*/













.text-effect {
  position: relative;

  font-size: clamp(3rem, 12vw, 21rem);
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: .8;
  letter-spacing: -0.03em;
  color: inherit;
}

.text-effect-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.text-effect-svg text {
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
}

.text-effect-svg .solid {
  fill: currentColor;
}

.text-effect-svg .outline-text {
  fill: transparent;
  stroke: inherit ;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;

  stroke-dasharray: var(--path-length, 3000);
  stroke-dashoffset: var(--path-length, 3000);
  transform: translate(22px, 16px);
}

@keyframes draw-outline {
  from {
    stroke-dashoffset: var(--path-length, 3000);
  }

  to {
    stroke-dashoffset: 0;
  }
}






.cascade {
  --stagger: 110ms;
  --duration: 520ms;
  --distance: 18px;
  --start-scale: 0.94;

  display: grid;
  gap: 6px;
}

.cascade > * {
  --i: 0;

  margin: 0;
  opacity: 0;

  transform:
    translateY(var(--distance))
    scale(var(--start-scale));

  transform-origin: left center;

  animation:
    cascade-pop var(--duration)
    cubic-bezier(.2, .9, .25, 1.15)
    forwards;

  animation-delay: calc(var(--i) * var(--stagger));

  filter: blur(5px);
  will-change: opacity, transform, filter;
}

.cascade.replay > * {
  animation: none;

  opacity: 0;

  transform:
    translateY(var(--distance))
    scale(var(--start-scale));

  filter: blur(5px);
}

@keyframes cascade-pop {
  0% {
    opacity: 0;

    transform:
      translateY(var(--distance))
      scale(var(--start-scale));

    filter: blur(5px);
  }

  65% {
    opacity: 1;

    transform:
      translateY(-2px)
      scale(1.015);

    filter: blur(0);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cascade > * {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}
















    /* =========================================
       TWO VERTICAL REELS
       ========================================= */

    .pada-sponsor-reels {
      display: flex;
      width: 57rem;
      height: 1000px;
      overflow: hidden;
    }

    .pada-sponsor-reel {
      width: 50%;
      height: 100%;
      overflow: hidden;
    }

    /* Track contains 2 identical groups */
    .pada-sponsor-track {
      display: flex;
      flex-direction: column;
      height: max-content;
      will-change: transform;
    }

    /*
      Each group is one complete reel.

      Because there are two identical groups,
      50% of the complete track = exactly
      one complete group.
    */
    .pada-sponsor-group {
      min-height: 100vh;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;

      flex-shrink: 0;
    }

    .pada-sponsor {
        flex-shrink: 0;
        width: 100%;
        margin: 1rem;
        display: block;
        padding: 8px 16px;
            padding-bottom: 8px;
        color: #111;
        font-size: clamp(20px, 3vw, 42px);
        font-weight: 700;
        text-decoration: none;
        border: 3px solid #0b0b0b;
        border-radius: 16px;
        background: #fff;
        padding-bottom: 1rem;
    }




    /* =========================================
       LEFT REEL — DOWN
       ========================================= */

    .pada-sponsor-reel--down .pada-sponsor-track {
      animation: pada-sponsor-scroll-down 90s linear infinite;
      transform-style: preserve-3d;
    }
    .pada-sponsor-reel--down{
      margin-right:1rem;
    }

    @keyframes pada-sponsor-scroll-down {
      from {
        transform: translate3d(0, -50%, 0);
      }

      to {
        transform: translate3d(0, 0, 0);
      }
    }


    /* =========================================
       RIGHT REEL — UP
       ========================================= */

    .pada-sponsor-reel--up .pada-sponsor-track {
      animation: pada-sponsor-scroll-up 90s linear infinite;
    }

    @keyframes pada-sponsor-scroll-up {
      from {
        transform: translate3d(0, 0, 0);
      }

      to {
        transform: translate3d(0, -50%, 0);
      }
    }


    /* =========================================
       MOBILE
       ========================================= */

    @media (max-width: 1000px) {
      .pada-sponsor-reel--down .pada-sponsor-track,
      .pada-sponsor-reel--up .pada-sponsor-track {
        animation-duration: 20s;
      }

      .pada-sponsor-group {
        min-height: 200vh;
      }

      .url-sp {
        padding: 18px 15px;
        font-size: 18px;
      }
    }


    /* =========================================
       REDUCED MOTION
       ========================================= */

    @media (prefers-reduced-motion: reduce) {
      .pada-sponsor-track {
        animation: none !important;
        transform: none !important;
      }
    }





    .QA-tag{
        color: #E9E9E9;
        font-size: 0.75rem;
        font-style: italic;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 2px;
        padding-bottom: 6px;
    }
    .QA-Q-container{
        width:100%;
        display: flex;
        align-items: center;
    }
    .QA-Q-ico{
        border-right: 3px solid #E9E9E9;
        font-weight: 900;
        color: #E9E9E9;
  
        font-size: 3rem;
        width: 2rem;
        overflow: hidden;
    }
    .QA-Q{
        font-size: 1.25rem;
        color: black;
        padding-left: 6px;
        text-transform: uppercase;
        font-weight: 900;
    }
    .QA-A-container{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: right;
    }
    .QA-A{
        font-size: 1rem;
        color: black;
        padding-right: 6px;
        text-align: right;
        text-transform: uppercase;
    }
    .QA-A-ico{
        border-left: 3px solid #E9E9E9;
        font-weight: 900;
        color: #E9E9E9;
       
        font-size: 3rem;
        width: 2rem;
        overflow: hidden;
        height: max-content;
    }