.step {
  display: flex;
  align-items: center;
  padding-bottom: 36px;
}

@media (max-width: 765px) {
  .step {
    padding-bottom: 20px;
  }
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 101px;
  height: 35px;
  border-radius: 99999px;
  background-color: transparent;
  border: 1px solid var(--primary);
  color: white;
  font-size: 20px;
  font-weight: 500;
}
@media (max-width: 765px) {
  .step-number {
    width: 80px;
    font-size: 14px;
  }
}

.step-number.active {
  background-color: var(--primary);
}

.step.step.pink-theme .step-number.active {
  color: var(--pink);
  background-color: white;
  border: 1px solid var(--pink);
}

.step.pink-theme .step-number {
  border: 1px solid var(--pink);
}

.step-line {
  width: 20px;
  height: 1px;
  background-color: var(--primary);
}

.step.pink-theme .step-line {
  background-color: var(--pink);
}