.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  background-color: rgba(0, 0, 0, 0.516); 
  background-image: url(/assets/img/landing-page/fishes-hero.webp);
  background-size: cover;
  text-align: center;
}
.hero .text {
    position: relative;
    bottom: 0px;
    left: 0px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero h1 {
    margin: 0;
    text-align: center;
    font-size: 68px;
    font-weight: 500;
    color: #ffffff;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero h2 {
    color: #ffffff;
    margin: 15px 0 0 0;
    font-size: 22px;
    font-weight: 200;
    width: 100%;
    max-width: 560px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero h3 {
    text-transform: uppercase;
    font-weight: 100;
    font-size: 18px;
    color: white;
  }
  
  .hero a {
    position: relative;
    color: white;
    margin-top: 5rem;
    font-weight: 100;
    width: 200px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .hero a::after {
    content: "";
    position: absolute;
    height: 1px;
    background: white;
    width: 50%;
    left: 0;
    bottom: 0;
  }




#hero h1, #hero h2, #hero a {
    transform: scale(0.94);
    animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
  }

  @keyframes scale {
    100% {
      transform: scale(1);
    }
  }
  
 #hero h1 span, #hero h2 span, #hero a {
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
  }
  
  #hero h1 span:nth-child(1) {
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  #hero h1 span:nth-child(2) {
    animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  #hero h1 span:nth-child(3) {
    animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  #hero h1 span:nth-child(4) {
    animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  
  #hero h1 span:nth-child(5) {
    animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }



  #hero h2 span:nth-child(1) {
    animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(2) {
    animation: fade-in 0.8s 0.65s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(3) {
    animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(4) {
    animation: fade-in 0.8s 0.75s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(5) {
    animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(6) {
    animation: fade-in 0.8s 0.85s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(7) {
    animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(8) {
    animation: fade-in 0.8s 0.95s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(9) {
    animation: fade-in 0.8s 1.0s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(10) {
    animation: fade-in 0.8s 1.05s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(11) {
    animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(12) {
    animation: fade-in 0.8s 1.12s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(13) {
    animation: fade-in 0.8s 1.15s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(14) {
    animation: fade-in 0.8s 1.17s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(15) {
    animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(16) {
    animation: fade-in 0.8s 1.22s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(17) {
    animation: fade-in 0.8s 1.25s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(18) {
    animation: fade-in 0.8s 1.27s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(19) {
    animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(20) {
    animation: fade-in 0.8s 1.32s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(21) {
    animation: fade-in 0.8s 1.35s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(22) {
    animation: fade-in 0.8s 1.37s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(23) {
    animation: fade-in 0.8s 1.40s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(24) {
    animation: fade-in 0.8s 1.42s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(25) {
    animation: fade-in 0.8s 1.45s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(26) {
    animation: fade-in 0.8s 1.47s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(27) {
    animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(28) {
    animation: fade-in 0.8s 1.52s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(29) {
    animation: fade-in 0.8s 1.55s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero h2 span:nth-child(30) {
    animation: fade-in 0.8s 1.57s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  #hero a {
    animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }
  

  @keyframes fade-in {
    100% {
      opacity: 1;
      filter: blur(0);
    }
  }

  
@media (max-width: 991px) {
  .hero {
    height: auto;
    min-height: 100vh;
  } 
}