.left-border {
    border-left: 5px solid #2CBD9F;
}
span.background-bg {
    position: relative;
}
span.background-bg:before {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 30px;
    content: "";
    background: #2CBD9F26;
}
.Beginning {
    background-image: url("https://ranjitpalsingh.com/wp-content/themes/twentytwenty-child/img/about-us-new/left-right-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.text-yellow {
    color: #FFCA14;
}



.section-header {
    display:inline-block;
    background:#1a9e8e;
    color:#fff;
    font-size:20px;
    font-weight:700;
    padding:8px 28px;
    border-radius:6px;
    margin-bottom:48px;
  }
 
  /* ── RAIL ── */
  .timeline-wrapper { position:relative; padding-bottom:40px; }
 
  .timeline-rail {
    position:absolute;
    left:50%;
    top:0; bottom:0;
    width:3px;
    background:#dde8e8;
    transform:translateX(-50%);
    z-index:0;
  }
 
  .timeline-fill {
    position:absolute;
    left:0; top:0;
    width:100%;
    height:0%;
    background:linear-gradient(to bottom,#1a9e8e,#117a6d);
    transition:height 0.1s linear;
    border-radius:2px;
  }
 
  /* ── ITEM ── */
  .tl-item {
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    margin-bottom:52px;
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.55s ease, transform 0.55s ease;
  }
  .tl-item.visible { opacity:1; transform:translateY(0); }
 
  /* odd: img-left | dot | text-right */
  .tl-item.odd  .tl-img-side  { order:0; padding-right:30px; }
  .tl-item.odd  .tl-dot-col   { order:1; }
  .tl-item.odd  .tl-text-side { order:2; padding-left:30px; }
 
  /* even: text-left | dot | img-right */
  .tl-item.even .tl-text-side { order:0; padding-right:30px; }
  .tl-item.even .tl-dot-col   { order:1; }
  .tl-item.even .tl-img-side  { order:2; padding-left:30px; }
 
  .tl-img-side, .tl-text-side { width:calc(50% - 24px); }
 
  /* ── DOT COLUMN ── */
  .tl-dot-col {
    width:48px;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    padding-top:14px;
  }
 
  /* The circle */
  .tl-dot-inner {
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    border:3px solid #c0d8d8;
    box-shadow:0 0 0 0 rgba(26,158,142,0);
    transition:
      border-color 0.45s ease,
      background   0.45s ease,
      box-shadow   0.45s ease;
    position:relative;
    z-index:2;
  }
 
  /* Active circle – triggered by JS adding .active to tl-dot-inner */
  .tl-dot-inner.active {
    background:#1a9e8e;
    border-color:#1a9e8e;
    box-shadow:0 0 0 6px rgba(26,158,142,0.22);
  }
 
  /* ── IMAGE CARD ── */
  .tl-img-card {
    border-radius:10px;
    overflow:hidden;
    position:relative;
    box-shadow:0 4px 18px rgba(0,0,0,0.10);
  }
  .tl-img-card img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
  }
  .tl-img-caption {
    position:absolute;
    bottom:0; left:0; right:0;
    background:rgba(15,30,30,0.82);
    color:#fff;
    font-size:13px;
    font-weight:600;
    padding:10px 14px;
    line-height:1.4;
  }
 
  /* ── TEXT CARD ── */
  .tl-text-card {
    background:#fff;
    border:1px solid #e2eeee;
    border-radius:10px;
    padding:20px 22px;
    box-shadow:0 2px 12px rgba(0,0,0,0.05);
    height:100%;
  }
  .tl-text-card p {
    font-size:13.5px;
    color:#3a5050;
    line-height:1.82;
    margin-bottom:10px;
  }
  .tl-text-card p:last-child { margin-bottom:0; }
 
  /* ── MOBILE ── */
  @media(max-width:767px){
    .timeline-rail { left:18px; transform:none; }
    .tl-item,
    .tl-item.odd,
    .tl-item.even {
      flex-direction:column !important;
    }
    .tl-item.odd  .tl-img-side,
    .tl-item.odd  .tl-dot-col,
    .tl-item.odd  .tl-text-side,
    .tl-item.even .tl-img-side,
    .tl-item.even .tl-dot-col,
    .tl-item.even .tl-text-side {
      order:unset !important;
      width:100% !important;
      padding:0 0 14px 0 !important;
    }
    .tl-dot-col {
      justify-content:flex-start;
      padding-left:6px;
      padding-top:0;
    }
  }