.typingClass::after {
  content: "";
  animation-name: typingSkill;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes typingSkill {
  /* Developer typing (0% - 25%) */
  0% {
    content: "|";
  }
  2% {
    content: "D|";
  }
  4% {
    content: "De|";
  }
  6% {
    content: "Dev|";
  }
  8% {
    content: "Deve|";
  }
  10% {
    content: "Devel|";
  }
  12% {
    content: "Develo|";
  }
  14% {
    content: "Develop|";
  }
  16% {
    content: "Develope|";
  }
  18% {
    content: "Developer|";
  }

  /* Hold Developer */
  20%,
  22% {
    content: "Developer|";
  }

  /* Delete Developer (keep "De") */
  24% {
    content: "Develope|";
  }
  26% {
    content: "Develop|";
  }
  28% {
    content: "Develo|";
  }
  30% {
    content: "Devel|";
  }
  32% {
    content: "Deve|";
  }
  34% {
    content: "Dev|";
  }
  36% {
    content: "De|";
  }

  /* Designer typing (continue from "De") */
  38% {
    content: "De|";
  }
  40% {
    content: "Des|";
  }
  42% {
    content: "Desi|";
  }
  44% {
    content: "Desig|";
  }
  46% {
    content: "Design|";
  }
  48% {
    content: "Designe|";
  }
  50% {
    content: "Designer|";
  }

  /* Hold Designer */
  52%,
  54% {
    content: "Designer|";
  }

  /* Delete Designer completely */
  56% {
    content: "Designe|";
  }
  58% {
    content: "Design|";
  }
  60% {
    content: "Desig|";
  }
  62% {
    content: "Desi|";
  }
  64% {
    content: "Des|";
  }
  66% {
    content: "De|";
  }
  68% {
    content: "D|";
  }
  70% {
    content: "|";
  }

  /* Freelancer typing (70% - 90%) */
  72% {
    content: "F|";
  }
  74% {
    content: "Fr|";
  }
  76% {
    content: "Fre|";
  }
  78% {
    content: "Free|";
  }
  80% {
    content: "Freel|";
  }
  82% {
    content: "Freela|";
  }
  84% {
    content: "Freelan|";
  }
  86% {
    content: "Freelanc|";
  }
  88% {
    content: "Freelance|";
  }
  90% {
    content: "Freelancer|";
  }

  /* Hold Freelancer */
  92% {
    content: "Freelancer|";
  }

  /* Delete Freelancer completely letter by letter */
  93% {
    content: "Freelance|";
  }
  94% {
    content: "Freelanc|";
  }
  95% {
    content: "Freelan|";
  }
  96% {
    content: "Freela|";
  }
  97% {
    content: "Freel|";
  }
  98% {
    content: "Free|";
  }
  99% {
    content: "Fre|";
  }
  99.5% {
    content: "Fr|";
  }
  99.8% {
    content: "F|";
  }
  100% {
    content: "|";
  }
}
.card__icon-circle i {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.card:hover > .card__icon-circle i {
  animation: upAndDown 1s ease-in-out infinite;
  -webkit-animation: upAndDown 1s ease-in-out infinite;
}
@keyframes upAndDown {
  0% {
    translate: 0 0px;
    scale: 1;
  }
  50% {
    translate: 0 -5px;
    scale: 1.09;
  }
  100% {
    translate: 0 0px;
    scale: 1;
  }
}