/* ===== Container & Center Rail ===== */
.timeline-container{
    max-width:1200px; margin:0 auto; padding:20px 40px; position:relative;
  }
  .timeline-container::before{
    content:''; position:absolute; left:49.1%; top:150px; bottom:200px; width:4px;
    background:#e0e0e0; transform:translateX(-50%); ;
  }
  .timeline-container::after{
    content:''; position:absolute; left:49.1%; top:150px; width:4px; height:var(--timeline-progress,0%);
    background:#357abd; transform:translateX(-50%);  transition:height .1s ease-out;
    max-height:calc(100% - 350px);
  }
  
  /* ===== Sections ===== */
  .timeline-section{
    margin-bottom:60px; opacity:0; transform:translateY(50px); transition:all .6s ease; position:relative;
  }
  .timeline-section.in-view{ opacity:1; transform:translateY(0); }
  
  .section-content{ position:relative; min-height:300px; padding:0 40px; }
  
  /* ===== FLEX layout: [image] 60px [text] ===== */
  .section-wrapper{
    display:flex;               /* ← switch to flex */
    align-items:center !important;
    justify-content:space-between;
    gap:60px;                   /* center rail gap */
    width:100%; max-width:1000px; margin:0 auto; position:relative; z-index:5;
  }
  
  /* each side occupies half minus half-gap so nothing crosses the rail */
  .section-image, .section-text{
    flex:0 0 calc(50% - 30px);
    align-self:center !important;
    margin:0 !important;
  }
  
  /* image card */
  .section-image{
    max-width:380px; border-radius:20px; overflow:hidden;
  }
  .section-image img{
    width:100%; height:220px; object-fit:cover; border-radius:20px; display:block;
  }
  
  /* text block (vertical center by flex) */
  .section-text{
    max-width:520px; position:relative; z-index:5;
    display:flex; flex-direction:column; justify-content:center; min-height:220px;
    text-align:left;
  }
  .section-text h2{ font-size:1.8rem; color:#333; margin:0 0 12px; font-weight:600; line-height:1.2; }
  .section-text p { font-size:.95rem; color:#666; line-height:1.5; margin:0; }
  
  /* ===== Number Bubbles on the rail ===== */
  .section-content::after{
    content:attr(data-number); position:absolute; left:49%; top:44%; transform:translate(-50%,-50%);
    width:46px; height:46px; background:#357abd; border-radius:50%; z-index:999;
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px;
    box-shadow:0 4px 12px rgba(139,21,56,.3);
  }
  .timeline-section:first-child .section-content::after{    transform:translate(-50%,-20%); }
  .timeline-section:last-child  .section-content::after{ bottom:0; transform:translate(-50%, 20%); }
  
  /* ===== Zig-zag: even sections flip sides via row-reverse ===== */
  .timeline-section:nth-child(even) .section-wrapper{
    flex-direction:row-reverse;
  }
  /* keep text left-aligned even after flip */
  .timeline-section:nth-child(even) .section-text{ text-align:left; }
  
  /* old small square badge under content: hidden */
  .section-icon{ display:none !important; }
  
  /* ===== Mobile ===== */
  @media (max-width:768px){
    .timeline-container::before,
    .timeline-container::after,
    .section-content::after{ display:none; }
  
    .section-wrapper{
      flex-direction:column !important;
      gap:20px; max-width:350px; text-align:center;
    }
    .section-image{ max-width:280px; }
    .section-image, .section-text{
      flex:0 0 auto; width:100%;
    }
    .section-text{
      min-height:0; display:block; text-align:center;
    }
  }