/* button animation */

button{
  transition: all 0.2s ease-in-out;
}
button:hover{
  transform: scale(1.1);
}

.ranking-img{
  transition: all 0.2s ease-in-out;
}
.ranking-img:hover {
  transform: scale(1.3);
}

tbody tr td div{
  transition: all 0.2s ease-in-out;
}
tbody td:hover  div{
  transform: scale(1.1);
}


.animate-section {
  animation-name: fadeInUp; /* Define your animation */
  animation-duration: 1s;
  animation-delay: 0.5s; /* Delay if needed */
  animation-fill-mode: forwards; /* Keeps the final state of the animation */
  opacity: 0; /* Start with opacity 0 */
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* Move element up */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* Restore to original position */
  }
}


.floating-img {
  width: 262px;
  margin-right: 30px;
  animation: floatAnimation 3s ease-in-out infinite; /* Adjust animation duration and timing */
}

@keyframes floatAnimation {
  0% {
    transform: translateY(0); /* Start position */
  }
  50% {
    transform: translateY(-10px); /* Peak of upward movement */
  }
  100% {
    transform: translateY(0); /* Return to start position */
  }
}



.rotate-in-2-fwd-ccw{-webkit-animation:rotate-in-2-fwd-ccw .5s cubic-bezier(.25,.46,.45,.94) both;animation:rotate-in-2-fwd-ccw .5s cubic-bezier(.25,.46,.45,.94) both}


@-webkit-keyframes rotate-in-2-fwd-ccw{0%{-webkit-transform:translateZ(-200px) rotate(45deg);transform:translateZ(-200px) rotate(45deg);opacity:0}100%{-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0);opacity:1}}@keyframes rotate-in-2-fwd-ccw{0%{-webkit-transform:translateZ(-200px) rotate(45deg);transform:translateZ(-200px) rotate(45deg);opacity:0}100%{-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0);opacity:1}}