.water__animation{
  margin:0px;
    padding:0px;
    font-family: 'Bevellier', sans-serif;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-family: 'Panchang', sans-serif;
 position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
cursor: pointer;
 

}


.water__animation h1 {
 
  padding: 0;
  
    
   
     font-size: clamp(3.7rem, 8.5vw, 7.8rem);
  
  text-transform: uppercase;
  background-image: url("../images/blue_waterz.png");
  background-repeat: repeat-x;
  background-size: contain;
   background-position: 0 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgba(255,255,255,.1);
  animation: animate 15s linear ; /* changed “fill” → “animate” */
  font-weight: 900;
-webkit-text-stroke: 4px black;
overflow: visible;
white-space: nowrap;
}

@keyframes animate {
  0% {
    background-position: left 10px top 110px;
  }
  40% {
    background-position: left 10px top 10px;
  }
 
}
.hero__line {
  display: block;
}

@media (min-width: 1200px) {
  .hero__line--bottom {
    margin-top: -0.15em;
  }
}


  
@media (max-width: 1024px){
.water__animation h1 {
   font-size: clamp(4rem, 8vw, 8rem); 
   
}
 .hero__line--bottom {
    margin-top: 0em;
  }
}

@media (max-width: 768px){
.water__animation h1 {
   font-size: clamp(4rem, 7.5vw, 8rem); 
}


}

@media (max-width: 640px){
.water__animation h1 {
   font-size: clamp(3.5rem, 7.5vw, 7.5rem); 
}


}

@media (max-width: 558px){
.water__animation h1 {
   font-size: clamp(3rem, 7.5vw, 7rem); 
}


}
@media (max-width: 481px){
.water__animation h1 {
   font-size: clamp(2.5rem, 7.5vw, 6.5rem); 
} 

@media (max-width: 381px){
.water__animation h1 {
   font-size: clamp(2.2rem, 7.1vw, 6.1rem); 
} 



}}