.box-process {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 20%;
}
.box-process::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 4px;
  z-index: 1;

  background: #d9d9d9;
}
.box-process .item {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;

  background: #d9d9d9;
}
.box-process .item.active {
  background: #801cf0;
}
.box-process .item span {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 23px;
  text-align: center;

  color: #f5f5f5;
}

@media screen and (max-width: 600px) {
  .box-process .item span {
    font-size: 15px;
    line-height: 19px;
  }
  .box-process .item {
    width: 25px;
    height: 25px;
  }
}