#title span {
  display: inline-block;
  opacity: 0;
  transform: scale(0);
}
.hero-para {
  opacity: 0;
}
.hero-btn {
  transform: scale(0);
  opacity: 0;
}
.hero-img {
  opacity: 0;
  transform: translateX(-100px);
}
.cracter {
  animation: bounce 1.5s infinite ease-in-out;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}



.about-title .word {
  display: inline-block;
  opacity: 0;
  transform: rotateX(90deg);
}

#aboutHeading span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  z-index: 99;
}

.inner {
  opacity: 0;
  transform: translateY(50px);
}