body {
  margin: 0;
  padding: 0;
  background-color: #212121;
  font-family: "Space Grotesk";
  min-height: 100vh;
}

.logo-box {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 99998;
}

/* Navbar */
.mtb-homepage-nav {
  width: 100%;
  max-width: 1200px;
  height: fit-content !important;
  position: relative;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  padding: 1.5rem 5rem;
  text-align: center;
  font-size: 0.875rem;
  font-family: "Space Grotesk";
  z-index: 100;
}


@media screen and (max-width: 480px) {
  .mtb-homepage-nav {
    padding: 1rem 0;
    width: 100%;
  }
}

.nav-logo {
  width: 50px;
  height: 50px;
}
@media screen and (max-width: 480px) {
  .nav-logo {
    width: 30px;
    height: 30px;
  }
}   

.mtb-homepage-nav a {
  text-decoration: none;
  color: #ffffff;

}

.mtb-homepage-nav-links {
  position: relative;
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  gap: 15px;
  text-align: center;
  font-family: "Space Grotesk";
  margin-left: 15px;
}

.nav-left {
  justify-content: left;
  width: 100%;
}

@media screen and (max-width: 480px) {
  .nav-left {
    width: 50%;
  }
}

.nav-right {
  justify-content: right;
  width: 100%;
}

.mtb-homepage-nav-links a {
  text-decoration: none;
  color: #fff;
  transition: color 0.5s ease;
}

/* Hide Case Studies and Pricing links on mobile */
@media screen and (max-width: 768px) {
  .mtb-homepage-nav-links a[href="#examples"],
  .mtb-homepage-nav-links a[href="#pricing"] {
    display: none;
  }
}

.mtb-homepage-nav-links a:after {
  content: "";
  display: block;
  width: 100%;
  height: 0.125rem;
  background-color: #feb710;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;  
}

.mtb-homepage-nav-links a:hover {
  color: #feb710;
}

.mtb-homepage-nav-links a:hover:after {
  transform: scaleX(1);
}

.request-demo-btn {
  position: relative;
  border-radius: 6px;
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  text-align: center;
  color: #212121;
  font-family: "Space Grotesk"; 
  font-weight: 700;
  border: none;
  background: rgb(254,183,16);
  box-shadow: 0 0 25px rgb(254,183,16);
  transition: box-shadow 0.5s ease;
}

.request-demo-btn:hover {
  box-shadow:
    -10px -10px 30px rgb(252,216,136),
    0 0 25px rgb(254,183,16),
    0 0 50px rgb(254,183,16),
    0 0 100px rgb(254,183,16);
}

/* Container that holds everything */
.choose-container {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  margin: auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  overflow: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.button-contain {
    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 220px;
  gap: 10px;
}
/* Starts centered at 700×700 on desktop. We'll scale down for mobile in media query. */
.lottie-wrapper {
  width: 18.75rem;
  height: 18.75rem;
  position: relative;
  overflow: visible;
  margin-bottom: 1.25rem;
}

#lottieContainer {
  position: absolute;
  width: 75rem;
  height: 75rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
}



/* Cards container. Fades in later */
.choose-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  max-width: 37.5rem;
  width: 50%;
  gap: 1.875rem;
  text-align: center;
  font-size: 0.875rem;
  opacity: 1;
  transition: opacity 1s ease;
}

.choice {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 3.125rem;
  width: 100%;
    justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0 15px rgb(254,183,16), 0 0 0 rgb(254,183,16), 0 0 0 rgb(254,183,16), 0 0 0 rgb(254,183,16);
  transition: transform 0.5s ease, box-shadow 1s ease;
}
.choice:hover {
  transform: scale(1.1);
  box-shadow: -10px -10px 30px rgb(252,216,136),
                0 0 25px rgb(254,183,16),
                0 0 50px rgb(254,183,16),
                0 0 100px rgb(254,183,16);
}

.button-contain p {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
}
.learn {
  background-color: #121212;
  color: #ffffff;

}

.play {
  background-color: #feb710;
  color: #ffffff;

}

.type {
  font-size: 20px !important;
  text-transform: uppercase;
  font-weight: 700 !important;
}

/* EXACT scrolling text styling. Do not change. */
.word-container {
  width: 100%;
  height: 1.875rem;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.word-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
  animation: scroll-words 8s infinite;
}
.word {
  height: 1.875rem;
  line-height: 1.875rem;
  text-align: center;
  font-size: 1.25rem;
  text-transform: uppercase;
  font-weight: 700;
}
@keyframes scroll-words {
  0%, 8% {
    transform: translateY(0);
  }
  10%, 33% {
    transform: translateY(-1.875rem);
  }
  35%, 58% {
    transform: translateY(-3.75rem);
  }
  60%, 83% {
    transform: translateY(-5.625rem);
  }
  85%, 100% {
    transform: translateY(-7.5rem);
  }
}

/* Optional button styling from original. */
.first {
  font-size: 1.5625rem;
  padding: 0.625rem 1.875rem;
  border-radius: 3.125rem;
  background-color: #feb710;
  color: #212121;
  box-shadow: inset 0px 3px 20px rgba(0, 0, 0, 0.3);
  border: solid 2px #ffd677;
  transition: all 0.3s ease-in-out;
}
.first:hover {
  transform: scale(1.1);
  background-color: #ffd677;
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.3);
}

/* Mobile adjustments: smaller Lottie, column layout, smaller card height. */
@media (max-width: 736px) {
  .lottie-wrapper {
    width: 18.75rem;
    height: 18.75rem;
    margin-bottom: 1.25rem;
  }
  
  #lottieContainer {
    width: 60rem;
    height: 60rem;
  }
  
  .choose-grid {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }
  .choice {
    height: 3.125rem;
  }
}
/* Pricing Styling */


.title-price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.pricing-title {
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
}

.grey {
  font-size: 16px;
  text-transform: uppercase;
  color: #ccc;
}

.gold {
  color: #feb710;
}

.options-container {
  width: 100%;
  max-width: 900px;
  margin-top: 3.5rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6rem;
  display: grid;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
}

.option {
  padding: 2rem;
  border-radius: 20px;
  color: #ffffff;
  border: 1px solid #393939;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: #212121;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.5s;
  transition-property: all;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.ent-image {
  width: auto !important;
  margin: auto;
}

.card-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.option-1 {
  flex: 4;
  border: 1px solid #feb710;
}

.option-2:hover {
  flex: 4;
  border: 1px solid #feb710;
  box-shadow:
      0 0 2px rgb(254,183,16),
      0 0 10px rgb(254,183,16),
      0 0 25px rgb(254,183,16),
      0 0 50px rgb(254,183,16);
  
}

.option-2:hover .pricing-title{
  color: #feb710;
  
}


.option-2 {
  flex: 3;

}

.options-container ul {
  list-style-type: none;
  padding: 0;
  margin: 1rem 0;
}

.options-container li {
  display: flex;
  align-items: center;
}

.pricing-list-item img{
  width: 50px;
  display: inline;
  margin-right: 1rem;
}

hr {
  margin: 1rem 0px;
  border: 1px solid #393939;
}

.btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  margin-top: 2rem;
}

.shadow__btn2 {
  padding: 10px 20px;
  border: none;
  font-size: 16px;
  color: #ffffff;
  border-radius: 10px;
  letter-spacing: 4px;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.5s;
  transition-property: box-shadow;
  background: #feb710;
  cursor: pointer;
  margin: auto;
}

.shadow__btn3 {
  padding: 10px 20px;
  border: none;
  font-size: 16px;
  color: #ffffff;
  border-radius: 10px;
  letter-spacing: 4px;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.5s;
  transition-property: box-shadow;
  background: #121212;
  cursor: pointer;
  margin: auto;
}

@media (max-width: 480px) {
  .options-container {
      grid-template-columns: 1fr;
      justify-items: center;
      padding: 10px;
  }

  .option {
      width: 100%;
      max-width: 400px;
      padding: 20px; 
      min-height: auto;
  }

  .card-inner {
      height: auto;
  }

  .title-price {
      gap: 0.5rem;
  }
}
/*case study section*/

.examples-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 6rem;
}

.example-item {
  display: block;
  border-radius: 10px;
  width: 100%;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.example-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.example-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

@media screen and (max-width: 768px) {
  .examples-grid {
    gap: 1.5rem;
  }
}

@media screen and (max-width: 480px) {
  .examples-grid {
    max-width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(1, 1fr);
    gap: 1rem;
  }

}

/* Content Section */
.scroll-container {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.5s ease;
  z-index: 5;
  color: #fff !important;
  padding: 0 1rem;
}

.spline-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(33, 33, 33, 0) 65%, rgba(33, 33, 33, 1));
  z-index: 1;
}


.scroll-item {
  position: relative;
  width: 100%;
  height: fit-content;
  min-height: fit-content;
  margin-bottom: 150px;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: #fff !important;
}

@media screen and (max-width: 768px) {
  .scroll-item {
    width: 100%;
    padding: 0 20px;
    margin-bottom: 100px;
  }
}

@media screen and (max-width: 480px) {
  .scroll-item {
    width: 100%;
    padding: 0 15px;
    margin-bottom: 80px;
  }
}

@media screen and (max-width: 320px) {
  .scroll-item {
    padding: 0 10px;
    margin-bottom: 60px;
  }
}

.spline-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 900px;
  z-index: -11;
  margin: 0 auto;
  overflow: hidden;
}
.plexus-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width: 480px) {
  .spline-container {
    height: 100%;
  }
}



#canvas3d {
  width: 100%;
  height: 100%;
  min-height: 1000px;
  touch-action: none;
  transform-origin: top center;
  overflow: visible;
}
/*
.scroll-item > * {
  width: 100%;
  height: 100%;
}*/
.content-column-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2.5rem;
  overflow: visible;
  color: #fff !important;
}

.content-column-container-time {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6rem;
  overflow: visible;
  color: #fff !important;
}

@media screen and (max-width: 768px) {
  .content-column-container,
  .content-column-container-time {
    width: 100%;
    max-width: 100%;
    gap: 2rem;
  }
}

@media screen and (max-width: 480px) {
  .content-column-container,
  .content-column-container-time {
    gap: 1.5rem;
  }
}

.scroll-logo {
  position: relative;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.mtb-homepage-nav-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.headline-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 0;
  height: 100%;
  z-index: 10;
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.headline-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}


@media screen and (max-width: 480px) {
  .headline-copy {
    padding-bottom: 80px;

  }
}

/* Update text elements to be visible by default */
/*.headline-copy h1,
.headline-copy p,
.driver-header h2,
.driver-header p,
.driver-text p,
.driver-text-quote,
.driver-accent,
.atrribution,
.driver-text-three-slide h3,
.driver-text-three-slide p,
.driver-asset-wide,
.driver-asset-tall,
.slide-asset-vertical,
.slide-asset-square {
  opacity: 1 !important;
  transform: none !important;
  transition: none;
  color: #fff !important;
  z-index: 10;
}*/

.headline-copy h1 {
  font-family: "Fugaz One";
  font-size: 2.8125rem;
  font-weight: 700;
  line-height: 1.2;
  color: #FCD888 !important;
  text-transform: uppercase;
  filter: drop-shadow(0px 0px 10px rgba(254,183,16,0.5));
  padding: 0;
  margin: 0;
  text-align: center;
  max-width: 100%;
}

.headline-copy h2 {
  font-family: "Space Grotesk";
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 0;
  margin: 0;
  color: #ffffff !important;
  filter: drop-shadow(0px 0px 10px rgba(254,183,16,0.5));
}

.headline-copy p {
  font-family: "Space Grotesk";
  font-size: 1rem;
  font-weight: 400;
  color: #fff !important;
  width: 100%;
  padding: 0;
  margin: 0;
}
.fine-print {
  font-family: "Space Grotesk";
  font-size: 0.5rem;
  font-weight: 400;
  color: #fff !important;
}
@media screen and (max-width: 480px) {
  .fine-print {
    display: none;
  }
}

.hero-interaction {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  gap: 10px;
}

.video-hero {
  position: relative;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}


.hero-interaction-image {

  height: 5rem !important;
  width: auto !important;
  max-width: 300px !important;
}

.hero-interaction-engage {
  width: 5%;
  height: auto;
  transform: perspective(800px) rotateY(15deg) scale(1) rotateX(-10deg) translate(10px, -120px);
  transition: 0.6s ease all;
  z-index: 100;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: visible;

  &:hover {
    transform: perspective(800px) rotateY(-5deg) scale(1.2) rotateX(-5deg) translate(15px, -100px);
  }
}

.hero-interaction-timespent {
  width: 5%;
  height: auto;
  transform: perspective(800px) rotateY(-15deg) scale(1) rotateX(-10deg) translate(-30px, 180px);
  transition: 0.6s ease all;
  z-index: 100;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: visible;
  &:hover {
    transform: perspective(800px) rotateY(-5deg) scale(1.2) rotateX(-5deg) translate(-30px, 175px);
  }
}

@media screen and (max-width: 480px) {
  .hero-interaction-timespent {
    display: none;
  }
  .hero-interaction-engage {
    display: none;
  }
}

.hero-interaction-whereinc {
  width: 220px;
  height: auto;
  transform: perspective(800px) rotateY(0deg) scale(1) rotateX(6deg);
  z-index: 100;
  opacity: 1;
  transition: 0.6s ease all;
  border-radius: 8px;

  &:hover {
    transform: perspective(800px) rotateY(0deg) translateY(-10px)
      rotateX(0deg) scale(1.1);
    z-index: 110;
    opacity: 1;
  }
}
@media screen and (max-width: 480px) {
  .hero-interaction-whereinc {
    width: 125px;
  }
}

.hero-interaction-danpatrick {
  width: 220px;
  height: auto;
  transform: perspective(800px) rotateY(15deg) scale(0.9) rotateX(6deg);
  opacity: 1;
  transition: 0.6s ease all;
  border-radius: 8px;
  z-index: 99;
  &:hover {
    transform: perspective(800px) rotateY(5deg) translateY(-10px)
      rotateX(5deg) scale(1.1);
    z-index: 110;
    opacity: 1;
  }
}
@media screen and (max-width: 480px) {
  .hero-interaction-danpatrick {
        width: 125px;
  }
}

.hero-interaction-airstream {
  width: 220px;
  height: auto;
  transform: perspective(800px) rotateY(-15deg) scale(0.9) rotateX(6deg);
  z-index: 99;
  opacity: 1;
  transition: 0.6s ease all;
  border-radius: 8px;

  &:hover {
    transform: perspective(800px) rotateY(-5deg) translateY(-10px)
      rotateX(5deg) scale(1.1);
    z-index: 110;
    opacity: 1;
  }
}
@media screen and (max-width: 480px) {
  .hero-interaction-airstream {
    width: 125px;
  }
}



#timeAnimation {
  position: relative;
  width: 400px;
  height: 400px;
  z-index: -10;
}

.toibox-effect {
  position: relative;
  margin-top: -100px;
  width: 100%;
  height: 550px;
  margin: 2rem 0;
  border-radius: 10px;
}
.toibox-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}



@media screen and (max-width: 480px) {
  .toibox-effect {
    height: 235px;
    width: 380px;
  }
}

.driver-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.dh-height {
margin-bottom: -200px;
}
.driver-header h2 {
  font-family: "Fugaz One";
  font-size: 2.8125rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 0;
  margin: 0;
  color: #FCD888 !important;
  text-transform: uppercase;
  filter: drop-shadow(0px 0px 10px rgba(254,183,16,0.5));
}
@media screen and (max-width: 768px) {
  .driver-header h2 {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 480px) {
  .driver-header h2 {
    font-size: 2rem;
  }
}


.driver-header p {
  font-size: 1.25rem; 
  font-weight: 400;
  width: 60%;
  text-align: center;
  color: #fff !important;
  font-family: 'Space Grotesk';
  padding: 0;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .driver-header p {
    font-size: 1.1rem;
    line-height: 1.4;
  }
}

@media screen and (max-width: 480px) {
  .driver-header p {
    font-size: 1rem;
    line-height: 1.3;
  }
}

.driver-container-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}
.driver-container-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
}
@media screen and (max-width: 480px) {
  .driver-container-row {
    flex-direction: column;
  }
}
.driver-container-column {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.driver-container-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: left;
  width: 70%;
}
@media screen and (max-width: 480px) {
  .driver-container-left {
    width: 100%;
  }
}
.driver-container-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
}
.driver-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  text-align: left;
}
.driver-text-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 150px;
}
.driver-text p {
  font-size: 1.375rem; 
  line-height: 1.6;
  font-weight: 200;
  color: #fff !important;
  font-family: 'Space Grotesk';
  padding: 0;
  margin: 0;
  max-width: 100%;
}
.driver-text h3 {
  font-family: "Space Grotesk";
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1;
  color: #fff !important;
  margin-top: 21.875rem;
}
.driver-text span {
  font-weight: 700;
}
.driver-yellow {
  color: #feb710 !important;
}
.driver-accent {
  color: #feb710 !important;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 480px) {
  .driver-accent {
    font-size: 26px;
  }
}
.atrribution {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff !important;
  font-family: 'Space Grotesk';
}
.black-background {
  background-color: #000 !important;
}
.gap-highlight {
  color: #feb710 !important;
  transition: color 0.5s ease-in-out;
}

.gap-highlight.text-white {
  color: white !important;
}

.gap-highlight-2 {
  color: #ffffff !important;
  opacity: 0;
  transition: color 0.5s 0.5s ease-in-out, opacity 0.5s 0.5s ease-in-out;
}
.gap-highlight-2.text-transparent {
  color: #feb710 !important;
  opacity: 1;
}

  .driver-asset-wide {
    width: 100%;
    aspect-ratio: 16/9;
  } 
.driver-asset-square {
  width: 50%;
  aspect-ratio: 1/1;
}
@media screen and (max-width: 480px) {
  .driver-asset-square {
    width: 100%;
  }
}
.driver-asset-tall {
  width: 30%;
  aspect-ratio: 9/16;
}
@media screen and (max-width: 480px) {
  .driver-asset-tall {
    display: none; 
  }
}
.button-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.asset-video {
  position: relative;
width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.three-slide-container {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none; /* IE and Edge */
  scroll-behavior: smooth;
}

.three-slide-container::-webkit-scrollbar {
  display: none;
}

.three-slide-content {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  width: 2700px;
  gap: 20px;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  .three-slide-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    touch-action: pan-x; /* Enable horizontal touch scrolling */
  }
}

.three-slide-item {
  position: relative;
  width: 100%;
  max-width: 900px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

@media screen and (max-width: 768px) {
  .three-slide-item {
    width: 33.333%; /* Each item takes up 1/3 of the container */
    min-width: 85vw; /* Ensure each item is at least 85% of viewport width */
    max-width: 85vw; /* Limit maximum width */
    gap: 1.5rem;
  }
}

.slide-breakbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 20px;
}


/* Update carousel nav styles */
.carousel-nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  z-index: 2;
  margin: 1rem 0;
}

.carousel-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #212121;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.carousel-dot.active {
  opacity: 1;
  background: #feb710;
}

/* Mobile styles */
@media screen and (max-width: 768px) {
  .carousel-nav {
    display: flex;
  }

  .three-slide-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .three-slide-container::-webkit-scrollbar {
    display: none;
  }

  .three-slide-content {
    flex-wrap: nowrap;
    gap: 20px;
    padding: 0 20px;
    width: auto;
  }

  .three-slide-item {
    min-width: 85vw;
    width: 85vw;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

.slide-asset-vertical {
  position: relative;
  width: 500px;
}
@media screen and (max-width: 768px) {
  .slide-asset-square {
    width: 50%;
  }
  .slide-asset-vertical {
    width: 300px;
  }
}

@media screen and (max-width: 480px) {
  .slide-asset-vertical {
    width: 200px;
  }
}




.driver-text-three-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  width: 75%;
}
.driver-text-three-slide-laptop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  width: 35%;
}
@media screen and (max-width: 480px) {
  .driver-text-three-slide-laptop {
    width: 100%;
  }
  .driver-text-three-slide {
    width: 100%;
  }
}
.driver-text-three-slide, .driver-text-three-slide-laptop p {
  font-size: 22px; 
  line-height: 1.3;
  font-weight: 200;
  color: #fff !important;
  font-family: 'Space Grotesk';
  padding: 0;
  margin: 0;

}
@media screen and (max-width: 768px) {
  .driver-text-three-slide p {
    font-size: 1.1rem;
    line-height: 1.4;
  }
}
@media screen and (max-width: 480px) {
  .driver-text-three-slide p {
    font-size: .75rem;
    line-height: 1.3;
    text-align: left;
  }
  .driver-text-three-slide-laptop p {
    font-size: .75rem;
    line-height: 1.3;
  }
}

.driver-text-three-slide h3 {
  font-family: "Fugaz One";
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  height: 20px;
  padding: 0;
  margin: 0;
  color: #feb710 !important;
  text-transform: uppercase;
  white-space: nowrap;
  filter: drop-shadow(0px 0px 10px rgba(254,183,16,0.5));
}
@media screen and (max-width: 480px) {
  .driver-text-three-slide h3 {
    font-size: 18px;
  }
}

spline-viewer {
  width: 100%;
  height: 100%;
  display: block;
  transition: all 0.3s ease;
}

spline-viewer.loaded {
  opacity: 1;
}

.video-container {
  position: relative;
  width: 100%;
  height: auto;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(254, 183, 16, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  z-index: 10;
  opacity: 1;
}

.play-button svg {
  width: 30px;
  height: 30px;
  color: #212121;
  margin-left: 2px;
}

.play-button:hover {
  background: rgb(254, 183, 16);
  transform: translate(-50%, -50%) scale(1.1);
}

.play-button.playing {
  opacity: 0;
  pointer-events: none;
}

/* Tablet Styles (768px and below) */
@media screen and (max-width: 768px) {
  .content-column-container,
  .content-column-container-time {
    width: 100%;
    max-width: 100%;
    gap: 2rem;
  }

  .driver-header h2 {
    font-size: 2.2rem;
  }

  .driver-text p {
    font-size: 1.1rem;
    line-height: 1.4;
  }

  .driver-text-three-slide {
    width: 100%;
  }

  .driver-text-three-slide p {
    font-size: 1rem;
    line-height: 1.4;
  }

  .play-button {
    width: 50px;
    height: 50px;
  }

  .play-button svg {
    width: 25px;
    height: 25px;
  }
}

/* Mobile Styles (480px and below) */
@media screen and (max-width: 480px) {
  .content-column-container,
  .content-column-container-time {
    gap: 1.5rem;
  }


  .driver-header p {
    font-size: 1rem;
    width: 100%;
  }

  .driver-text p {
    font-size: 1.5rem;
    line-height: 1.3;
  }



  .driver-text-three-slide {
    width: 100%;
    text-align: center;
  }

  .driver-text-three-slide p {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .play-button {
    width: 40px;
    height: 40px;
  }

  .play-button svg {
    width: 20px;
    height: 20px;
  }

  .carousel-nav {
    gap: 10px;
  }

  .carousel-dot {
    width: 25px;
    height: 25px;
    font-size: 10px;
  }
}



/* Base styles for better mobile readability */
html {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  html {
    font-size: 14px;
  }
}

/* Update scroll container for better mobile layout */
.scroll-container {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.5s ease;
  z-index: 5;
  color: #fff !important;
  padding: 0 1rem;
}

@media screen and (max-width: 768px) {
  .scroll-container {
    padding: 0 1.5rem;
  }
}

@media screen and (max-width: 480px) {
  .scroll-container {
    padding: 0 1rem;
  }
}

/* Update headline styles for better readability */
.headline-copy h1 {
  font-family: "Fugaz One";
  font-size: 2.8125rem;
  font-weight: 700;
  line-height: 1.2;
  color: #FCD888 !important;
  text-transform: uppercase;
  filter: drop-shadow(0px 0px 10px rgba(254,183,16,0.5));
  padding: 0;
  margin: 0;
  text-align: center;
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  .headline-copy h1 {
    font-size: 2.2rem;
    line-height: 1.3;
  }
}

@media screen and (max-width: 480px) {
  .headline-copy h1 {
    font-size: 2rem;
    line-height: 1.4;
  }
  .headline-copy h2 {
    font-size: 1.5rem;
  }
}

/* Update driver text for better readability */
.driver-text p {
  font-size: 1.375rem; 
  line-height: 1.6;
  font-weight: 200;
  color: #fff !important;
  font-family: 'Space Grotesk';
  padding: 0;
  margin: 0;
  max-width: 100%;
}

/* Update three slide content for better mobile layout */

@media screen and (max-width: 768px) {
  .three-slide-content {
    width: 300%; /* Set to 300% to accommodate 3 slides */
    flex-direction: row; /* Keep row direction for horizontal scrolling */
    gap: 20px;
    padding: 0 20px;
  }
}

.three-slide-item {
  position: relative;
  width: 100%;
  max-width: 900px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

@media screen and (max-width: 768px) {
  .three-slide-item {
    width: 33.333%; /* Each item takes up 1/3 of the container */
    min-width: 85vw; /* Ensure each item is at least 85% of viewport width */
    max-width: 85vw; /* Limit maximum width */
    gap: 1.5rem;
  }
}

/* Update slide breakbox for better mobile layout */


/* Update driver text three slide for better readability */
.driver-text-three-slide p {
  font-size: 22px; 
  line-height: 1.3;
  font-weight: 200;
  color: #fff !important;
  font-family: 'Space Grotesk';
  padding: 0;
  margin: 0;
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  .driver-text-three-slide p {
    font-size: 1.1rem;
    line-height: 1.4;
  }
}

@media screen and (max-width: 480px) {
  .driver-text-three-slide p {
    font-size: 1rem;
    line-height: 1.3;
  }
}

/* Update carousel navigation for better mobile interaction */
.carousel-nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  z-index: 2;
  margin: 1rem 0;
}

@media screen and (max-width: 480px) {
  .carousel-nav {
    gap: 15px;
    margin: 0.75rem 0;
  }
}

.carousel-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #212121;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

@media screen and (max-width: 480px) {
  .carousel-dot {
    width: 25px;
    height: 25px;
    font-size: 10px;
  }
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 900px;
  background-color: #121212;
  border-radius: 10px;
  padding: 20px;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.modal-close svg {
  width: 100%;
  height: 100%;
  fill: #fff;
}

/* Modal Video Player Styles */
.modal-thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  background-color: #000;
}

.modal-thumbnail img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

.modal-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.modal-video-container {
  display: none;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background-color: #121212;
}

.modal-video-container.active {
  display: block;
}

.modal-video-container video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

@media screen and (max-width: 768px) {
  .modal-content {
    width: 95%;
    padding: 15px;
  }
  
  .modal-thumbnail {
    height: auto;
    max-height: 400px;
  }
}

@media screen and (max-width: 480px) {
  .modal-content {
    width: 100%;
    padding: 10px;
  }
}