.explode-circle {
  animation: explode 0.5s forwards;
}

.desplode-circle {
  animation: desplode 0.5s forwards;
}
.heroTag {
  animation: movingAnim 5s infinite linear;
}
@keyframes movingAnim {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}
@keyframes explode {
  0% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: var(--primary-color);
  }
  100% {
    width: 600px;
    height: 600px;
    margin-left: -300px;
    margin-top: -300px;
    background-color: var(--primary-color);
  }
}

@keyframes desplode {
  0% {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    /* background-color: rgba(20, 180, 87, 0.8); */
    background-color: var(--primary-color);
  }
  100% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(129, 80, 108, 0.6);
  }
}

.apps {
  animation: clockwiseRotate 20s linear infinite;
}
.apps .appSingle {
  animation: counterClockwiseRotate 20s linear infinite;
}
@keyframes counterClockwiseRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes clockwiseRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animationHero {
  animation: infiniteSlide 5s infinite linear;
  transform: translateY(0px);
}

@keyframes infiniteSlide {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(25px);
  }
}