.ct-timeline{
      --accent: #41983C; 
    --muted: #e6e6e6; 
    --card-bg: #fff;
    --card-text: #313131;

    --marker-size: 36px; 
    --line-width: 4px;
    --gap-y: 24px; 
    --gap-x: 0px; 

    --card-width: 100%;
    --card-radius: 14px;
    --card-shadow: 0 6px 20px rgba(0,0,0,.06);
    --content-pad: 16px 18px;
    --arrow-size: 10px;
    --transition: .35s cubic-bezier(.2,.6,.2,1);

    position: relative;
    max-width: 980px; 
    margin: 24px auto;
    padding-left: 2px; 
  }
  .ct-timeline.is-right{ padding-right: 2px; padding-left: 0; }

  .ct-line{
    position: absolute;
    top: 0; left: 0;
    width: var(--line-width);
    background: var(--muted);
    border-radius: 999px;
    transform: translateX(-50%);
    z-index: 0;
  }
  .ct-line__fill{
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 0;
    background: var(--accent);
    border-radius: 999px;
    transition: height 160ms linear;
  }

  .ct-item{
    display: grid;
    grid-template-columns: 72px 1fr; 
    gap: var(--gap-x);
    align-items: center;
    margin: var(--gap-y) 0;
    position: relative;

    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--transition), transform var(--transition);
  }
  .ct-item.in-view{
    opacity: 1;
    transform: translateY(0);
  }

  .is-right .ct-item{
    grid-template-columns: 1fr 72px;
    direction: rtl;
  }
  .is-right .ct-card{ direction: ltr; }

  .ct-marker{
    width: var(--marker-size);
    height: var(--marker-size);
    border-radius: 999px;
    background: #fff;
    border: 3px solid #41983C;
    display: grid;
    place-items: center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .ct-marker svg{ width: 62%; height: 62%; display: block; }
  .ct-marker svg { color: #41983C; }

  .ct-timeline.has-progress .ct-marker::before,
  .ct-timeline.has-progress .ct-marker::after{ display:none; }

  .ct-card{
    background: #f7f7f7;
    color: var(--card-text);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--content-pad);
    width: var(--card-width);
    max-width: 100%;
    justify-self: start;
    min-height: 120px;
    position: relative;
    z-index: 1;
  }
  .is-right .ct-card{ justify-self: end; }

  .ct-timeline:not(.is-right) .ct-card::before,
  .ct-timeline.is-right .ct-card::before{
    content:"";
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    border: var(--arrow-size) solid transparent;
  }
  .ct-timeline:not(.is-right) .ct-card::before{
    left: calc(-1 * var(--arrow-size) * 2);
    border-right-color: var(--card-bg);
  }
  .ct-timeline.is-right .ct-card::before{
    right: calc(-1 * var(--arrow-size) * 2);
    border-left-color: var(--card-bg);
  }

  .arrow-top .ct-card::before{ top: 16px; transform:none; }
  .arrow-bottom .ct-card::before{ bottom: 16px; top:auto; transform:none; }

  .ct-title{ margin: 0 0 6px; font-size: 18px; line-height: 1.35; font-weight: 700; }
  .ct-desc{ margin: 0; font-size: 1em; line-height: 1.7; }
  .ct-desc .hl{ color: #CB2A33; font-weight: 700; }

  @media (max-width: 767px){
    .ct-item{ grid-template-columns: 56px 1fr; }
    .ct-card{
      width: 100%;
      min-height: unset;
      justify-self: stretch;
      box-shadow: 0 4px 16px rgba(0,0,0,.05);
    }
    .ct-card::before{ display:none !important; }
  }