.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -16px;
}

.top-hero {
display: flex;
align-items: center;
gap: 7rem;
margin-bottom: -140px;
}

.hero-img {
position: relative;
width: 175px;
}

.title {
font-family: 'Krisha', 'sans-serif';
font-size: 295px;
text-transform: uppercase;
text-shadow: 0 1px 5px rgba(13, 25, 17, 0.20);
}

.tagline {
font-size: 32px;
width: 70vw;
text-transform: uppercase;
text-align: center;
margin-top: -40px;
}

.left-text {
text-align: left;
font-size: 20px;
max-width: 175px;
text-transform: uppercase;
}

.right-text {
text-align: right;
font-size: 20px;
max-width: 175px;
text-transform: uppercase;
}

.arrow {
display: inline-block;
}

.left-arrow {
margin-left: 5px;
}

.right-arrow {
margin-right: 5px;
}


@media screen and (max-width: 800px) {
.hero-img {
    width: 130px;
    }

.top-hero {
margin-bottom: -110px;
gap: 4rem;
}

.title {
font-size: 225px;
}

.tagline {
font-size: 24px;
width: 80vw;
margin-top: -30px;
}

.left-text {
font-size: 16px;
}

.right-text {
font-size: 16px;
}
}





@media screen and (max-width: 600px) {
.hero-img {
    width: 80px;
    }

.top-hero {
margin-bottom: -80px;
gap: 2rem;
}

.title {
font-size: 150px;
}

.tagline {
font-size: 20px;
margin-top: -20px;
}

.left-text {
font-size: 14px;
}

.right-text {
font-size: 14px;
}
}



@media screen and (max-width: 400px) {
.hero-img {
    width:80px;
    }

.top-hero {
margin-bottom: -57px;
gap: .75rem;
}

.title {
font-size: 120px;
}

.tagline {
font-size: 18px;
margin-top: -15px;
width: 90vw;
}

.left-text {
font-size: 12px;
}

.right-text {
font-size: 12px;
}
}



.left-text,
.right-text, .tagline {
  opacity: 0;
  transition: all .75s ease-out;
  position: relative;
}

/* Start positions */
.left-text {
  transform: translateX(-100px);
}

.right-text {
  transform: translateX(100px);
}

.tagline {
    transform: translateY(30px);
  }

/* Animate to final positions */
.left-text.animate-in {
  transform: translateX(0);
  opacity: 1;
}

.right-text.animate-in {
  transform: translateX(0);
  opacity: 1;
}

.tagline.animate-in {
    transform: translateY(0);
    opacity: 1;
  }