:root{
  --step-duration: 3s;     /* time between steps (change to slow/speed) */
  --pause-duration: 3s;    /* pause after finishing last step */
  --total-duration: 12s;   /* (4 steps -> (4-1)*3s + 3s = 12s). Update if you change the two vars above */
  --active: #f8b936;
  --active2: #f8b936;
  --inactive: #d6d8dc;
  --bar-bg: #eceff3;
  --text: #222;
  --muted: #666;
}

.progress-container { max-width: 980px; width: 95%; margin: 100px auto 200px auto; position: relative; }

/* progress bar */
.progresslanding {
  height: 10px;
  background: var(--bar-bg);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  margin-bottom: -34px; /* space for step labels */
}

/* animated fill: synced to timeline below */
.progress-fill{
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--active), var(--active2));
  border-radius: inherit;
  animation: progressFill var(--total-duration) linear infinite;
}

/* Keyframes for fill:
   We have 4 steps and start at step 1 (t=0). The fill reaches:
     - step2 position at step-duration (T1)
     - step3 at 2*step-duration (T2)
     - step4 at 3*step-duration (T3)
   Percentages are T / total-duration.
   With defaults (step=3s, total=12s): T1=3s => 25%, T2=6s => 50%, T3=9s => 75%
*/
@keyframes progressFill{
  0%   { width: 0%; }
  25%  { width: 33.3333%; }  /* end of step1 -> move to 2nd marker */
  50%  { width: 66.6666%; }  /* end of step2 -> move to 3rd marker */
  75%  { width: 100%; }      /* end of step3 -> move to 4th marker */
  100% { width: 100%; }      /* pause keeps it full until loop restarts */
}

/* steps container - absolute positioned steps will overlap the bar */
.stepslanding { position: relative; width: 100%; }

/* each step is absolutely positioned along the width so circles sit over the bar */
/* positions chosen to be evenly spaced: 0%, 33.333%, 66.666%, 100% */
.step{
  position: absolute;
  top: -36px;                /* lift step up so its circle overlaps the bar */
  width: 220px;              /* max width for text wrapping */
  transform: translateX(-50%);
  text-align: center;
  left: 0;                   /* will be overridden per step */
}

/* exact left anchors */
.step.s1 { left: 0%; }            /* first (left-most) */
.step.s2 { left: 33.3333%; }     /* second */
.step.s3 { left: 66.6666%; }     /* third */
.step.s4 { left: 100%; }         /* last (right-most) */

/* heading above the circle */
.step h6 {
  font-size: 16px;
  color: #000;
  font-weight: 500;
  margin-top: 0px;
  margin-bottom: 15px;
}

/* circle (icon) sits between heading and description and overlaps the bar */
.circle{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--inactive);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto;
  transition: all .25s ease;
  z-index: 3;
  box-shadow: none;
}
.circle img {
  height: 35px;
}

.progresstext {
  font-size: 14px;
  color: var(--text-color);
  line-height: 18px;
  font-weight: 400;
  margin-top: 15px;
}


/* --- circle activation keyframes --- */
/* circle1: active from the start and stays active */
@keyframes circle1 {
  0%   { 
    border-color: var(--active);
    background: linear-gradient(180deg,var(--active),var(--active2)); 
    color: #fff; box-shadow: 0 8px 26px rgba(0,123,255,.12); transform: scale(1.06); 
  }
  100% { 
    border-color: var(--active); 
    background: linear-gradient(180deg,var(--active),var(--active2)); 
    color: #fff; 
    box-shadow: 0 8px 26px rgba(0,123,255,.12); 
    transform: scale(1.06); 
  }
}

/* circle2: inactive until 25% of timeline, then becomes active and stays */
@keyframes circle2 {
  0%    { 
    border-color: var(--inactive); 
    background: #fff; color: var(--active); 
    box-shadow: none; 
    transform: scale(1); 
  }
  24.999% { 
    border-color: var(--inactive); 
    background:#fff; color:var(--active); 
    box-shadow:none; 
    transform:scale(1); 
  }
  25%   { 
    border-color: var(--active); 
    background: linear-gradient(180deg,var(--active),var(--active2)); 
    color: #fff; 
    box-shadow: 0 8px 26px rgba(0,123,255,.12); 
    transform: scale(1.06); 
  }
  100%  { border-color: var(--active); 
    background: linear-gradient(180deg,var(--active),var(--active2)); 
    color: #fff; 
    box-shadow: 0 8px 26px rgba(0,123,255,.12); 
    transform: scale(1.06); 
  }
}

/* circle3: turns active at 50% timeline */
@keyframes circle3 {
  0%,49.999% { 
    border-color: var(--inactive); 
    background:#fff; 
    color:var(--active); 
    box-shadow:none; 
    transform:scale(1); 
  }
  50%  { 
    border-color: var(--active); 
    background: linear-gradient(180deg,var(--active),var(--active2)); 
    color: #fff; 
    box-shadow: 0 8px 26px rgba(0,123,255,.12); 
    transform: scale(1.06); 
  }
  100% { 
    border-color: var(--active); 
    background: linear-gradient(180deg,var(--active),var(--active2)); 
    color: #fff; 
    box-shadow: 0 8px 26px rgba(0,123,255,.12); 
    transform: scale(1.06);
  }
}

/* circle4: turns active at 75% timeline (when progress reached the last marker) */
@keyframes circle4 {
  0%,74.999% { 
    border-color: var(--inactive); 
    background:#fff; 
    color:var(--active); 
    box-shadow:none; 
    transform:scale(1); 
  }
  75%  { 
    border-color: var(--active); 
    background: linear-gradient(180deg,var(--active),var(--active2)); 
    color: #fff; 
    box-shadow: 0 8px 26px rgba(0,123,255,.12); 
    transform: scale(1.06); 
  }
  100% { 
    border-color: var(--active); 
    background: linear-gradient(180deg,var(--active),var(--active2)); 
    color: #fff; 
    box-shadow: 0 8px 26px rgba(0,123,255,.12); 
    transform: scale(1.06); 
  }
}

/* attach animations to the circles (use same timeline so they sync) */
.step.s1 .circle { animation: circle1 var(--total-duration) linear infinite both; }
.step.s2 .circle { animation: circle2 var(--total-duration) linear infinite both; }
.step.s3 .circle { animation: circle3 var(--total-duration) linear infinite both; }
.step.s4 .circle { animation: circle4 var(--total-duration) linear infinite both; }

/* responsive: stack vertically on narrow screens */

@media (max-width: 1080px){
  .progress-container { max-width: 800px;}
}

@media (max-width: 992px){
  .progress-container { max-width: 600px;}
  .step{
  width: 180px;
}
.step h6 {
  font-size: 14px;
}
.progresstext {
  font-size: 13px;
}


}

@media (max-width: 767px){
  .progress-container { margin: 30px auto 0px auto;}
  .progresslanding { margin-bottom: 20px; }
  .stepslanding { position: static; }
  .step {
    position: relative;
    left: 0 !important;
    transform: none;
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    top: 0;
  }

.step h6 {
  font-size: 16px;
}
.progresstext {
  font-size: 14px;
}
  
}