body {
  font-family: new-kansas, sans-serif;
  font-style: normal;
}

h1,
h2,
h3 {
  font-family: puffin-arcade-liquid, sans-serif !important;
  font-style: normal;
  color: #FF2E7E !important;
}



h4, h5 {
  font-family: puffin-arcade-regular, sans-serif;
  font-style: normal;
}

.hero-words {
  width: 100%;
  max-width: 800px; /* optional cap to control width */
}
.hero-words p {
  max-width: 65ch;
  margin: 1rem auto 0;
  text-align: center;
}

.custom-hero-font-2 {
  font-family: puffin-arcade-nerf, sans-serif !important;
  font-weight: 800;
  font-style: normal;
  color: #ff2e7e !important;
}

.cute {
  font-family: puffin-arcade-nerf, sans-serif !important;
  font-weight: 800;
  font-style: normal;
}

.bitches-tagline {
  font-family: puffin-arcade-regular, sans-serif !important;
  font-weight: 800;
  font-style: normal;
}

#experience-scroll {
  font-family: puffin-arcade-nerf, sans-serif !important;
  font-weight: 800;
  font-style: normal;
}

#stat-line {
  font-family: puffin-arcade-regular, sans-serif !important;
  font-weight: 800;
  font-style: normal;
  color: #fff;
}

.hero-words {
  display: flex;
  flex-direction: column;
  align-items: center;     /* centres each span’s block box */
}

@media (max-width: 767px) {
  .hero-words span[data-scroll-direction="horizontal"] {
    display: inline-block;
    width: max-content;    /* shrink to fit the content */
    margin-left: auto;
    margin-right: auto;    /* centres the inline-block spans */
  }
}

.svg-stroke-color-light svg rect {
    stroke: transparent !important;
}

#experience-scroll {
    mix-blend-mode: normal !important;
    color: #F4F4F4 !important;
}