/*---- Animation - On Hover (desktop) effect - MOVE UP -----*/
@media (min-width: 444px){
    .anim-hover-move-up:hover {
      transform: translateY(-2px);
    }
    .anim-hover-move-up{
      transition: transform 250ms;
    }
  }


/*---- Animation - On Load (all) - MOVE UP -----*/
.anim-load-bounce{
  animation: bounce 2s linear 1s;
  -webkit-animation: bounce 2s linear 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
}
@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  30% {
    transform: translateY(-7px);
  }
  50% {
    transform: translateY(3px);
  }
  60% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}
@-webkit-keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  30% {
    transform: translateY(-7px);
  }
  50% {
    transform: translateY(3px);
  }
  60% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}


/*---- Animation - On Load (all) - MOVE UP -----*/
.anim-load-scale{
  animation: scaleup 2s linear 1s;
  -webkit-animation: scaleup 2s linear 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
}
@keyframes scaleup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  75% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes scaleup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  75% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}


/* Animation - On Load (all) - Tilt and Shake with Delay */
.anim-tilt-n-move-shaking {
  animation: tilt-n-move-shaking 4s linear infinite;
  -webkit-animation: tilt-n-move-shaking 4s linear infinite;
  animation-timing-function: ease-in-out;
}
@keyframes tilt-n-move-shaking {
  0%, 20% {
    transform: translate(0, 0) rotate(0deg) scaleX(1) scaleY(1);
  }
  5%, 25% {
    transform: translate(2px, 2px) rotate(2deg) scaleX(0.95) scaleY(1.05);
  }
  10%, 30% {
    transform: translate(0, 0) rotate(0deg) scaleX(1) scaleY(1);
  }
  15%, 35% {
    transform: translate(-2px, 2px) rotate(-2deg) scaleX(0.95) scaleY(1.05);
  }
  40%, 100% {
    transform: translate(0, 0) rotate(0deg) scaleX(1) scaleY(1);
  }
}


/* Animation - On Scroll - Rotate */
@keyframes roll {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
.anim-scroll-rotate {
  animation-name: roll;
  animation-duration: 2s; /* Adjusted duration */
  animation-iteration-count: infinite;
  animation-play-state: paused;
  /* animation-timing-function: ease-in-out; */
  animation-fill-mode: both; /* Experiment with fill mode */
}