.con_1,
.con_2,
.skills {
  display: flex;
}
.item {
  padding-top: 2rem;
}
.con_1 .item,
.con_2 .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 115px;
  transform: translate(0);
}
.con_1 .item .circle,
.con_2 .item .circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border: 5px solid #5ff1d0;
  border-radius: 44px;
  transform: translate(0);
}
.con_1 .item .circle::before,
.con_2 .item .circle::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: #0a192f;
  transform: scaleX(1);
  transform-origin: 100% 0%;
  animation: 1s linear forwards animation-circle;
}
.con_1 .item:nth-child(2) .circle::before,
.con_2 .item:nth-child(3) .circle::before {
  animation-delay: 2s;
}
.con_1 .item:nth-child(2) .circle::after,
.con_1 .item:nth-child(3) .circle::before,
.con_2 .item:nth-child(2) .circle::before {
  animation-delay: 3s;
}
.con_1 .item .circle::after,
.con_2 .item .circle::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: #5ff1d0;
  height: 5px;
}
.con_1 .item:not(:nth-child(4)) .circle::after,
.con_2 .item:not(:nth-child(4)) .circle::after {
  left: 75px;
  animation: 1s linear forwards animation-line;
}
.con_1 .item:nth-child(3) .circle::after,
.con_2 .item:first-child .circle i,
.con_2 .item:nth-child(3) .circle::after {
  animation-delay: 4s;
}
.con_1 .item .circLe i,
.con_2 .item .circLe i {
  font-size: 32px;
  color: #5ff1d0;
  transform: scale(0);
  animation: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4) forwards animate-icon;
}
.con_1 .item:first-child .circle i {
  animation-delay: 0.25s;
}
.con_1 .item:nth-child(2) .circle i {
  animation-delay: 2.2s;
}
.con_1 .item:nth-child(3) .circle i {
  animation-delay: 4.5s;
}
.con_1 .item:nth-child(4) .circle i {
  animation-delay: 6.5s;
}
.con_1 .item .circle i,
.con_2 .item .circle i {
  font-size: 4rem;
  color: #fff;
}
.animations {
  position: relative;
  min-height: 40vh;
}
.con_2 .item:nth-child(2) .circle::after,
.con_2 .item:nth-child(4) .circle::before {
  animation-delay: 1s;
}
@keyframes animation-circle {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes animation-line {
  0% {
    width: 0;
  }
  100% {
    width: 34px;
  }
}
@keyframes animate-icon {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.con_2 .item:nth-child(2) .circle i {
  animation-delay: 3.2s;
}
.con_2 .item:nth-child(3) .circle i {
  animation-delay: 2.5s;
}
.con_2 .item:nth-child(4) .circle i {
  animation-delay: 1.5s;
}
.con_1 .from-left,
.con_2 .from-left {
  transform: translateX(-50%);
}
.con_1 .from-right,
.con_2 .from-right {
  transform: translateX(50%);
}
.con_1 .from-left,
.con_1 .from-right {
  transition: opacity 450ms ease-in, transform 0.6s ease-in;
  opacity: 0;
}
.con_1 .from-left.appear,
.con_1 .from-right.appear,
.con_2 .from-left.appear,
.con_2 .from-right.appear {
  transform: translateX(0);
  opacity: 1;
}
.con_2 .from-left,
.con_2 .from-right {
  transition: opacity 0.6s ease-in, transform 1.1s ease-in;
  opacity: 0;
}
@media (max-width: 955px) {
  .container {
    justify-content: center;
    align-items: center;
  }
  .con_1,
  .con_2 {
    display: flex;
    flex-wrap: wrap;
  }
  .con_1 .item:not(:nth-child(4)) .circle::after,
  .con_2 .item:not(:nth-child(4)) .circle::after {
    left: 70px;
  }
  @keyframes animation-line {
    0% {
      width: 0;
    }
    100% {
      width: 40px;
    }
  }
}
@media (max-width: 450px) {
  .con_1 .item,
  .con_2 .item {
    width: 95px;
  }
  .con_1 .item .circle,
  .con_2 .item .circle {
    width: 60px;
    height: 60px;
  }
  .con_1 .item .circle::after,
  .con_2 .item .circle::after {
    height: 3px;
  }
  .con_1 .item:not(:nth-child(4)) .circle::after,
  .con_2 .item:not(:nth-child(4)) .circle::after {
    left: 50px;
  }
  @keyframes animation-line {
    0% {
      width: 0;
    }
    100% {
      width: 40px;
    }
  }
}
.description h2 {
  color: #fff;
  padding-top: 1rem;
}
button[disabled] {
  background: #21a781;
  color: #202092;
}
button[disabled]:hover {
  background: #6e7976;
  color: #242425;
}
