@import "./normalize.css";
@import "./global.css";
@import "./header.css";
@import "./footer.css";

.services {
  padding-top: 50px;
  padding-bottom: 50px;
}

.services__inner {
  display: flex;
  gap: 50px;
}

.services__title {
  margin-bottom: 20px;
}

.rectangle {
  width: 10px;
  background-color: var(--font-color);
  position: relative;

  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;

  animation: growLine 1s ease-out forwards;
  animation-delay: 0.5s;
}

.circle {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: var(--font-color);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, 0);
  animation: drop 0.6s ease-out forwards;
}

.circle:nth-child(1) {
  animation-delay: 1s;
  transform: translate(-50%, 100px);
}

.circle:nth-child(2) {
  animation-delay: 1.1s;
  transform: translate(-50%, 300px);
}

.circle:nth-child(3) {
  animation-delay: 1.2s;
  transform: translate(-50%, 500px);
}

.circle:nth-child(4) {
  animation-delay: 1.3s;
  transform: translate(-50%, 700px);
}

.circle:nth-child(5) {
  animation-delay: 1.4s;
  transform: translate(-50%, 900px);
}

.circle:nth-child(6) {
  animation-delay: 1.5s;
  transform: translate(-50%, 1100px);
}

.circle:nth-child(7) {
  animation-delay: 1.6s;
  transform: translate(-50%, 1100px);
}

.circle:nth-child(8) {
  animation-delay: 1.7s;
  transform: translate(-50%, 1300px);
}

.circle:nth-child(9) {
  animation-delay: 1.8s;
  transform: translate(-50%, 1500px);
}

.services__list {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 50px;
}

.services__item {
  font-family: var(--font-base);
  color: var(--font-color);
  display: flex;
  gap: 30px;
}

.services__item-title {
  font-weight: 700;
}

.services__item-text {
  font-weight: 400;
}

.services__item svg {
  width: 55px;
  height: 55px;
  flex-shrink: 0;
}

.services__item-img {
  flex-shrink: 0;
}

.services__item-list, .item-list {
margin-top: 10px;
  margin-left: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@keyframes growLine {
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes drop {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* adaptive */
@media (width < 800px) {
  .circle:nth-child(12) {
    display: block;
  }
}

@media (width < 670px) {
  .circle:nth-child(13) {
    display: block;
  }

  .circle:nth-child(14) {
    display: block;
  }
}

@media (width < 480px) {
  .circle:nth-child(15) {
    display: block;
  }

  .circle:nth-child(16) {
    display: block;
  }

  .circle:nth-child(17) {
    display: block;
  }

  .circle:nth-child(18) {
    display: block;
  }

  .circle:nth-child(19) {
    display: block;
  }


  .services__item {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .services__item-title {
    text-align: center;
    margin-bottom: 10px;
  }

  .services__list {
    gap: 40px;
  }
}

@media (width < 435px) {
  .circle:nth-child(20) {
    display: block;
  }

  .circle:nth-child(21) {
    display: block;
  }

  .circle:nth-child(22) {
    display: block;
  }
}