.animteh1-word {
    opacity: 0; /* Start hidden */
    letter-spacing:0px;
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; letter-spacing: 0px; }
    to { opacity: 1; letter-spacing: -3px;}
}
@media only screen and (max-width: 1024px) {

  @keyframes fadeIn {
    from { opacity: 0; letter-spacing: 0px; }
    to { opacity: 1; letter-spacing: -1px;}
}
}

.word-fade-in {
    opacity: 0; /* Start hidden */
    letter-spacing:0px;
    animation: fadeIn2 0.5s forwards;

}



.word-fade-in {
    opacity: 0; /* Start hidden */
  
    animation: fadeIn2 0.5s forwards;
    animation-play-state: paused; /* Pause by default */
    display: inline-block;
}
@keyframes fadeIn2 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0px); }
}


.animate-on-scroll {
    opacity: 0;
     /* Neutral initial position */
    transition: opacity var(--duration) ease, transform var(--duration) ease;
    transition-delay: var(--delay), var(--delay) ; /* Use the delay custom property */
  }
  .long-anim .animate-on-scroll{
    transition: all var(--duration) cubic-bezier(0.265, 1.395, 0.335, 1.545);
    transition-delay: var(--delay);
  }
  /* Directional animations */
  .animate-on-scroll.from-left {
    transform: translateX(-20px); /* Start position from the left */
  }
  
  .animate-on-scroll.from-right {
    transform: translateX(20px); /* Start position from the right */
  }
  
  .animate-on-scroll.from-bottom {
    transform: translateY(20px); /* Start position from the bottom */
  }

  .long-anim .animate-on-scroll.from-bottom {
    transform: translateY(100px); /* Start position from the bottom */
  }
  
  /* Final visible state */
  .animate-on-scroll.in-view {
    opacity: 1;
    transform: translate(0); /* Final position */
  }

  .long-anim .animate-on-scroll.in-view {
    opacity: 1;
    transform: translate(0); /* Final position */
  }

/* content */

.content {
 opacity: 0;
  visibility: collapse;
  transition: all 1.5s cubic-bezier(.22,.17,.22,1.35);
 transform: translateY(100px);
}

.content.visible {
  opacity:1;
  visibility: visible;
  transform: translateY(0px);
}
.content.ostetop{ transform: translateY(-100px);}



.content.visible.hiden-link {
max-height: 0px;
opacity: 0;
transition:all 1s cubic-bezier(.44,0,0,1.01);
overflow: hidden;
}

.content.visible.hiden-show {
  max-height: 100px;
  opacity: 1;

}

.hideme{visibility: hidden; opacity: 0; transition: all 1s cubic-bezier(.44,0,0,1.01);}