/* ========== Timeline (apply class "timeline" to the COLUMN) ========== */
.timeline{
  --tl-line-x: 50px;
  --tl-circle: 55px;
  --tl-gap: 10px;
  --tl-pad-left: 93px;
  
  /* colors */
  --tl-line-color-top: #f6c43f;
  --tl-line-color: rgba(0,0,0,.50);
  --tl-active: #329367;
  --tl-inactive: rgba(255,255,255,.35);
  --tl-text-on-active: #fff;
  --tl-text-on-inactive: #fff;
  --tl-bg: #18CB96;

  /* fades & bottom trim */
  --tl-fade-top: 10px;
  --tl-fade-bottom: 80px;
  --tl-trim-bottom: 28px;

  position: relative;
  padding-left: var(--tl-pad-left);
  counter-reset: step;
}

/* vertical line with TOP + BOTTOM fades and shorter tail */
.timeline::before{
  content:"";
  position:absolute;
  top: 0;
  bottom: var(--tl-trim-bottom);
  left: var(--tl-line-x);
  width: 2px;

  /* line color/gradient */
  background: linear-gradient(
    to bottom,
    var(--tl-line-color-top) 0,
    var(--tl-line-color) 140px
  );

  /* fade out top & bottom */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--tl-fade-top),
    #000 calc(100% - var(--tl-fade-bottom)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--tl-fade-top),
    #000 calc(100% - var(--tl-fade-bottom)),
    transparent 100%
  );

  z-index: 0; /* line is the lowest layer */
}


/* number circle */
.timeline .elementor-widget-icon-box::before{
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position:absolute;
  left: var(--tl-line-x);
  transform: translateX(-220%);           /* must match ::after */
  top: 6px;
  width: var(--tl-circle);
  height: var(--tl-circle);
  line-height: var(--tl-circle);
  border-radius: 50%;
  background: var(--tl-inactive);
  color: var(--tl-text-on-inactive);
  font-weight: 700;
  font-size: 16px;
  text-align:center;
  z-index: 2;
  transition: background .25s ease, color .25s ease;
}

/* solid mask behind each circle to "cut" the line */
.timeline .elementor-widget-icon-box::after{
  content:"";
  position:absolute;
  left: var(--tl-line-x);
  transform: translateX(-220%);           /* must match ::before */
  top: 6px;
  width: calc(var(--tl-circle) + 0px);
  height: calc(var(--tl-circle) + 0px);
  margin-left: 0px; 
  margin-top: 0px;
  background: var(--tl-bg); 
  border-radius: 50%;
  z-index: 1; 
}

/* active (yellow) step */
.timeline .elementor-widget-icon-box.is-active::before{
  background: var(--tl-active);
  color: var(--tl-text-on-active);
}

/* optional spacing tweak */
.timeline .elementor-widget-icon-box:last-of-type{ margin-bottom: 0; }
.page-id-XXX .entry-title {
  font-size: 26px;
  margin-bottom: 16px;
}