@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@500&display=swap');

.hero-text-animation {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 64px 0;
}

.hero-text-animation h1 {
  color: #FFFFFF;
  font-family: 'Baloo Bhai 2';
  font-size: 62px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.2;
  text-align: center;
  margin: 0 auto;
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 12px;
}

.hero-text-animation__scroller {
  border-bottom: 6px solid #55D6BE;
  height: calc(1em + 20px);
  overflow: hidden;
  padding-bottom: 20px;
  position: relative;
  width: 44%;
}

.hero-text-animation__scroller > span {
  color: #55D6BE;
  position: absolute;
  inset: 0;
}

.hero-text-animation__scroller--3 > span {
  animation: slide3 6s 2s ease normal 1 forwards;  
}

.hero-text-animation__scroller--4 > span {
  animation: slide4 8s 2s ease normal 1 forwards;  
}

.hero-text-animation__scroller--5 > span {
  animation: slide5 10s 2s ease normal 1 forwards;  
}

.hero-text-animation__scroller--6 > span {
  animation: slide6 12s 2s ease normal 1 forwards;  
}

@media (min-width: 1024px) {
  .hero-text-animation {
    padding: 115px 0;
  }
  .hero-text-animation h1 {
    font-size: 60px;
  }
}

@media (min-width: 1025px) and (max-width: 1100px) {
  .hero-text-animation h1 {
    font-size: 62px;
  }
}

@media (min-width: 1101px) and (max-width: 1300px) {
  .hero-text-animation h1 {
    font-size: 68px;
  }
}

@media (min-width: 1301px) {
  .hero-text-animation h1 {
    font-size: 70px;
  }  
}

@media (min-width: 1400px) {
  .hero-text-animation .page-center {
    max-width: 1400px !important;
  }

  .hero-text-animation h1 {
    font-size: 92px;
  }
}

@media (max-width: 1023px) {
  .hero-text-animation h1 {
    flex-wrap: wrap;
  }  
  
  .hero-text-animation__scroller,
  .hero-text-animation__static {
    margin: 0 auto;
    width: 100%;
  }
  
  .hero-text-animation__scroller {
    max-width: 450px;
  }
}

@media (max-width: 450px) {
  .hero-text-animation h1 {
    font-size: 44px;
  } 
}


@keyframes slide3 {
  0% { top: 0; }
  33% { top: -1.2em; }
  66% { top: -2.4em; }
  100% { top: -2.4em; }
}

@keyframes slide4 {
  0% { top: 0; }
  25% { top: -1.2em; }
  50% { top: -2.4em; }
  75% { top: -3.6em; }
  100% { top: -3.6em; }
}

@keyframes slide5 {
  0% { top: 0; }
  20% { top: -1.2em; }
  40% { top: -2.4em; }
  60% { top: -3.6em; }
  80% { top: -4.8em; }
  100% { top: -4.8em; }
}

@keyframes slide6 {
  0% { top: 0; }
  16.66% { top: -1.2em; }
  33.33% { top: -2.4em; }
  49.99% { top: -3.6em; }
  66.66% { top: -4.8em; }
  83.33% { top: -6em; }
  100% { top: -6em; }
}