/* ---------- PROCESS WRAPPER ---------- */
.service-process{
  position:relative;
  padding-left:45px;
}

/* light base vertical line */
.service-process::before{
  content:'';
  position:absolute;
  left:54.5px;
  top:15.5px;
  width:2px;
  height:83%;
  
}

/* dark progress line */
.progress-line{
  position:absolute;
  left:54.5px;
  top:15.5px;
  width:2px;
  height:85%;
  background:#1a7faf;
  transition:height .6s ease;
}

/* ---------- STEP ---------- */
.process-step{
  display:flex;
  gap:20px;
  margin-bottom:35px;
}

/* circle */
.process-step .dot{
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid #1a7faf;
  background:#fff;
  margin-top:6px; 
  flex-shrink:0;
  transition:all .4s ease;
}

/* text */
.process-step p{
  margin:0;
  line-height:1.7;
  color:#e8e6e6;
  opacity:0;
  transition:color .4s ease, opacity .4s ease;
}

/* active step */
.process-step.active .dot{
  background:#1a7faf;
  box-shadow:0 0 10px rgba(13,110,253,.5);
}

/* completed step circle should be FILLED */
.process-step.done .dot{
  background:#1a7faf;
  border-color:#1a7faf;
  box-shadow:none;
}

.process-step.active p{
  opacity:2;
  color:#111111;
}

/* completed step */
.process-step.done p{
  opacity:1;
  color:#0e0d0d;
}