:root {
      --timeline-line: #94BDDA;
      --timeline-red: #FF5151;
      --timeline-bg: #FDFCF8;
      --timeline-circle-bg: #FFF3F3;
      --timeline-circle-border: #FFD6D6;
      --timeline-text: #777777;
      --timeline-heading: #111111;
   }
   
   .timeline-section {
       background-color: var(--timeline-bg);
       padding-bottom: 60px;
   }

   .com_sec_head_top {
      text-align: center;
      margin-bottom: 40px;
   }
   
   .com_sec_head_top h2 {
      color: var(--timeline-heading);
      font-weight: 700;
   }

   /* ======================================================
   TIMELINE SECTION & CONTAINER
   ====================================================== */
   .timeline {
      position: relative;
      width: 100%;
      container-type: inline-size;
   }
   .timeline__container {
      position: relative;
      width: 100%;
      aspect-ratio: 1366 / 634;
      margin-top: 2cqw;
   }

   /* ======================================================
   HEADER / LOGO
   ====================================================== */
   .timeline__header {
      position: absolute;
      bottom: -2cqw;
      right: -1cqw;
      z-index: 10;
   }
   .timeline__header img {
      width: 7cqw;
   }

   /* ======================================================
   SVG LINE & CAP
   ====================================================== */
   .timeline__svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
   }

   .timeline__cap {
      position: absolute;
      left: 2.2%; 
      top: 92.3%;
      width: 1.8cqw;
      height: 0.9cqw;
      background: var(--timeline-line);
      border-radius: 0 0 2cqw 2cqw;
      transform: translateX(-50%);
      opacity: 0;
      transition: 0.5s;
   }
   .timeline__cap.is-visible {
      opacity: 1;
   }

   /* ======================================================
   ITEMS & LAYOUT POSITIONS
   ====================================================== */
   .timeline__item {
      position: absolute;
      width: 19cqw;
      display: flex;
      flex-direction: column;
   }

   /* Item X-Positions */
   .timeline__item--1 { left: 2.2%; }
   .timeline__item--2 { left: 21.2%; }
   .timeline__item--3 { left: 40.3%; }
   .timeline__item--4 { left: 59.3%; }
   .timeline__item--5 { left: 78.3%; }

   /* Item Y-Positions */
   .timeline__item--1, .timeline__item--3, .timeline__item--5 {
      top: 6.6%;
   }
   .timeline__item--2, .timeline__item--4 {
      bottom: 6.6%;
      justify-content: flex-end;
   }

   /* ======================================================
   ARC BOX (Contains the circle & badge)
   ====================================================== */
   .timeline__arc-box {
      position: relative;
      width: 19cqw;
      height: 19cqw;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   /* ======================================================
   INNER PINK CIRCLES
   ====================================================== */
   .timeline__circle {
      position: relative;
      width: 15cqw;  /* Smaller than arc box to create the gap */
      height: 15cqw;
      border-radius: 50%;
      background: var(--timeline-circle-bg);
      border: 3px solid var(--timeline-circle-border);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      z-index: 2;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
   }

   /* Item 2 and 4 are transparent inside */
   .timeline__item--2 .timeline__circle,
   .timeline__item--4 .timeline__circle {
      background: transparent;
   }

   .timeline__circle h3 {
      color: var(--timeline-red);
      font-size: 1.55cqw;
      line-height: 1.25;
      font-weight: 600;
      margin: 0;
   }

   /* ======================================================
   TEXT CONTENT
   ====================================================== */
   .timeline__content {
      width: 17cqw;
      margin: 0 auto;
      font-size: 0.85cqw;
      line-height: 1.6;
      text-align: center;
      color: var(--timeline-text);
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
   }

   .timeline__item--1 .timeline__content,
   .timeline__item--3 .timeline__content,
   .timeline__item--5 .timeline__content {
      margin-top: 1.5cqw;
   }

   .timeline__item--2 .timeline__content,
   .timeline__item--4 .timeline__content {
      margin-bottom: 1.5cqw;
   }

   /* ======================================================
   BADGES (Positioned precisely on the blue curve)
   ====================================================== */
   .timeline__badge {
      position: absolute;
      width: 3.8cqw;
      height: 3.8cqw;
      border-radius: 50%;
      background: #FFFFFF;
      border: 3px solid var(--timeline-line);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--timeline-line);
      font-size: 1.6cqw;
      font-weight: 700;
      z-index: 10;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }

   /* Perfect mathematically angled coordinates for the badges */
   .timeline__item--1 .timeline__badge { top: 0.8cqw; left: 0.8cqw; }
   .timeline__item--2 .timeline__badge { top: 14.4cqw; left: 0.8cqw; }
   .timeline__item--3 .timeline__badge { top: 0.8cqw; right: 0.8cqw; }
   .timeline__item--4 .timeline__badge { top: 14.4cqw; right: 0.8cqw; }
   .timeline__item--5 .timeline__badge { top: 0.8cqw; right: 0.8cqw; }

   /* ======================================================
   VISIBLE STATE ANIMATIONS
   ====================================================== */
   .is-visible.timeline__circle,
   .is-visible.timeline__content {
      opacity: 1;
      transform: translateY(0);
   }
   .is-visible.timeline__badge {
      opacity: 1;
      transform: scale(1);
   }

@media (max-width: 800px) {

   .timeline__container{
      display:flex;
      flex-direction:column;
      gap:25px;
   }

   .timeline__item{
      width:100%;
      position:relative;
      left:auto !important;
      top:auto !important;
      bottom:auto !important;
      display:flex;
      justify-content:center;
      align-items:center;
   }

   /* Card */
   .timeline__arc-box{
      width:100%;
      max-width:350px;
      padding:25px 20px;
      /*background:#fff;*/
      /*border:1px solid #e8e8e8;*/
      /*border-radius:16px;*/
      /*box-shadow:0 5px 15px rgba(0,0,0,.06);*/

      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:12px;
      text-align:center;
   }

   /* Number */
   .timeline__badge{
      /*position:static !important;*/
      /*width:52px;*/
      /*height:52px;*/
      /*border-radius:50%;*/
      /*background:#fff;*/
      /*border:2px solid var(--timeline-line);*/
      /*display:flex;*/
      /*align-items:center;*/
      /*justify-content:center;*/
      /*font-size:22px;*/
      /*color:var(--timeline-line);*/
      /*opacity:1;*/
      /*transform:none;*/
      /*margin-bottom:5px;*/
   }

   /* Heading */
   .timeline__circle{
      width:auto;
      height:auto;
      background:none !important;
      border:none !important;
      opacity:1;
      transform:none;
   }

   .timeline__circle h3{
      margin:0;
      font-size:22px;
      line-height:1.35;
   }

   .timeline__circle h3 br{
      display:none;
   }

   /* Paragraph */
   .timeline__content{
      width:100%;
      max-width:100%;
      margin:0 !important;
      padding:0;
      opacity:1;
      transform:none;
      font-size:15px;
      line-height:1.7;
      text-align:center;
   }

   .timeline__svg,
   .timeline__cap,
   .timeline__header{
      display:none;
   }
   
   .timeline__item{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Heading box first */
.timeline__arc-box{
    order:1;
}

/* Paragraph second */
.timeline__content{
    order:2;
}

/* Badge heading ke upar */
.timeline__badge{
    position:static !important;
    order:1;
    display:none;
}

.timeline__circle{
    order:2;
}
}