.cus{
background-color: rgb(208, 81, 247);
}
.cus:hover{
  background-color: rgb(45, 252, 72);
}


.textAnimation h1 {
  font-family: "Montserrat Medium";
  max-width: 40ch;

  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);

}

@keyframes scale {
  100% {
    transform: scale(1);
  }
}

.textAnimation span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}

.textAnimation span:nth-child(1) {
  animation: fade-in 1.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  color: rgb(255, 149, 10);
  font-size: 5rem;
}

.textAnimation span:nth-child(2) {
  animation: fade-in 2.2s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
  font-size: 4rem;
}

.textAnimationspan:nth-child(3) {
  animation: fade-in 2.6s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
  font-size: 4rem;
}

.textAnimation span:nth-child(4) {
  animation: fade-in 2.8s 1.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
  font-size: 4rem;
}

.textAnimation span:nth-child(5) {
  animation: fade-in 3.0s 2.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  font-size: 4rem;
}

.textAnimation span:nth-child(6) {
  animation: fade-in 3.2s 2.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
  font-size: 4rem;
}


@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.introB {
  background-image: linear-gradient(to right,
      #54b3d6,
      #54b3d6 50%,
      rgb(202, 170, 252) 50%);
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  padding: 5px 0;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

.introB:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.3s ease-in-out;
}

.introb:hover {
  background-position: 0;
}

.introB:hover::before {
  width: 100%;
}