//==============================================
// Module/steps
//==============================================
#steps {
  margin: 0 auto;
}
.steps-bg-color {
  background-color: var(--steps-wrapper-bg-color);
}
.steps-wrapper {
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 1140px;
}
.steps_title {
  color: var(--step-title-color);
  font-size: 1.5rem;
}
// Step circle
.step {
  width: 40px;
  height: 40px;
  background-color: var(--step-circle-bg-color);
  display: inline-block;
  border: 4px solid;
  border-color: transparent;
  border-radius: 50%;
  color: var(--step-circle-text-color);
  font-weight: 600;
  text-align: center;
  line-height: 26px;
}
.step:first-child {
  line-height: 30px;
}
.step:nth-child(n + 2) {
  margin: 0 0 0 240px;
  transform: translate(0, -4px);
}
.step:nth-child(n + 2):before {
  width: 190px;
  height: 3px;
  display: block;
  background-color: var(--step-line-color);
  transform: translate(-220px, 15px);
  content: "";
}
.step:after {
  width: 180px;
  display: block;
  transform: translate(-70px, 3px);
  color: var(--step-text-color);
  content: attr(data-desc);
  font-weight: 600;
  font-size: 13px;
  margin-top: 10px;
}
.step:first-child:after {
  transform: translate(-70px, -1px);
}
.step.active {
  border-color: var(--step-active-color);
  color: var(--step-active-color);
}
.step.active:before {
  background: linear-gradient(
    to left,
    var(--step-active-color) 0%,
    var(--step-done-color) 100%
  );
}
.step.active:after {
  color: var(--step-active-text-color);
}
.step.done {
  background-color: var(--step-done-color);
  border-color: var(--step-done-color);
  color: var(--step-done-ckeck-icon-color);
}
.step.done:before {
  background-color: var(--step-done-color);
}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) {
  .steps-wrapper {
    display: none;
  }
}
