.effect-warp .effect {
  position: absolute;
  z-index: -1;
}

.effect {
  position: absolute;
}

.effect-1 {
  width: 30px;
  height: 30px;
  border: 4px solid teal;
  right: 10%;
  position: absolute;
  bottom: 10%;
  animation: spin 10s linear infinite;
}

.effect-2 {
  position: absolute;
  left: 3%;
  bottom: 20%;
  width: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  animation: topBounce 3s ease-in-out infinite;
}

.effect-2 div {
  height: 3px;
  width: 3px;
  background-color: #ff9c07;
  margin: 0 3px 8px;
}
.effect-3 {
  height: 180px;
  width: 180px;
  border: 25px solid var(--skin-color);
  border-radius: 50%;
  border: 20px solid teal;
  top: -130px;
  left: 59%;
  position: absolute;
  opacity: 0.3;
  animation: leftBounce 3s ease-in-out infinite;
  z-index: 1 !important;
}

.effect-4 {
  border-top: 30px solid transparent;
  border-left: 30px solid teal;
  left: 30%;
  top: 20%;
  animation: spin 15s linear infinite;
}
.effect-4:before {
  content: "";
  border-top: 30px solid transparent;
  border-left: 30px solid teal;
  position: absolute;
  opacity: 0.5;
  left: -35px;
  top: -25px;
}
.effect-5 {
  height: 50px;
  width: 50px;
  right: 6%;
  top: 30%;
  display: flex;
  justify-content: space-between;
  border-radius: 50%;
  overflow: hidden;
  animation: spin 10s linear infinite;
}

.effect-5 div {
  width: 1px;
  background-color: #4dd0e1;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes topBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(25px);
  }
}
@keyframes leftBounce {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(25px);
  }
}