/* .hero {
    width: 100%;
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translateX(-50%) translateY(-50%);
} */

.hero {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 1rem;
  }
  
  @media (max-width: 768px) {
    .hero {
      padding: 2rem 1rem;
    }
  }
  
  @media (min-width: 769px) {
    .hero {
      max-width: 1200px;
      margin: 0 auto;
    }
  }
  
  /*.tagline_1 span{*/
  /*  font-size: 1.2rem; */
  /*}*/
  
  /*@media (min-width: 480px) {*/
  /*  .tagline_1 span{*/
  /*    font-size: 1.5rem; */
  /*  }*/
  /*}*/
  /*@media (min-width: 300px) {*/
  /*  .tagline_1 span{*/
  /*    font-size: 2rem; */
  /*  }*/
  /*}*/
  
  /*@media (min-width: 768px) {*/
  /*  .tagline_1 span{*/
  /*    font-size: 2rem; */
  /*  }*/
  /*}*/
  
  /*@media (min-width: 992px) {*/
  /*  .tagline_1 span{*/
  /*    font-size: 2.5rem; */
  /*  }*/
  /*}*/
  
  /*@media (min-width: 1200px) {*/
  /*  .tagline_1 span{*/
  /*    font-size: 4rem; */
  /*  }*/
  /*}*/
  
  /*@media (min-width: 1600px) {*/
  /*  .tagline_1 span{*/
  /*    font-size: 3.5rem; */
  /*  }*/
  /*}*/
  
.tagline_1 span {
  font-size: clamp(1.8rem, 5vw, 4rem);
}



.hero-h1 {
    
    letter-spacing: -3px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
}

.cssanimation, .cssanimation span {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.cssanimation span { display: inline-block }

.leFadeInRight span { animation-name: leFadeInRight }
@keyframes leFadeInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to { opacity: 1 }
}