@keyframes soft-shine {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 @keyframes node-pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(5, 110, 182, 0.7);
     }

     70% {
         box-shadow: 0 0 0 15px rgba(5, 110, 182, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(5, 110, 182, 0);
     }
 }

 .roadmap-section {
     padding: 80px 0;
     background-color: #f5f7fa;
     /* Light background */
     position: relative;
     overflow: hidden;
 }

 /* Animated Background */
 .roadmap-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.9), transparent 70%),
         radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.9), transparent 70%);
     background-size: 300% 300%;
     animation: soft-shine 20s ease-in-out infinite;
     z-index: 0;
 }

 .roadmap-section .section-header .section-title {
     color: var(--dark-blue);
 }

 .roadmap-section .section-header .section-subtitle {
     color: var(--text-light);
 }

 .roadmap-timeline-container {
     position: relative;
     max-width: 800px;
     margin: 40px auto;
     padding: 0 20px;
 }

 /* The vertical track and progress line */
 .timeline-track {
     position: absolute;
     width: 4px;
     background-color: #eaf2ff;
     /* Light track color */
     top: 0;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1;
 }

 .timeline-progress {
     width: 100%;
     height: 0%;
     /* Initially 0, controlled by JS */
     background: var(--primary-blue);
     box-shadow: 0 0 10px var(--primary-blue);
     transition: height 0.3s linear;
 }

 .roadmap-timeline {
     position: relative;
     z-index: 2;
 }

 .timeline-item {
     padding: 10px 40px;
     position: relative;
     width: 50%;
     box-sizing: border-box;
 }

 /* Alternating layout */
 .timeline-item:nth-child(odd) {
     left: 0;
     padding-right: 30px;
 }

 .timeline-item:nth-child(even) {
     left: 50%;
     padding-left: 30px;
 }

 .timeline-node {
     position: absolute;
     width: 18px;
     height: 18px;
     background-color: var(--primary-blue);
     border: 3px solid #f5f7fa;
     /* Match new background */
     border-radius: 50%;
     top: 30px;
     z-index: 3;
     transition: transform 0.3s ease;
 }

 .timeline-item:nth-child(odd) .timeline-node {
     right: -9px;
 }

 .timeline-item:nth-child(even) .timeline-node {
     left: 21px;
 }

 /* Animation for the node */
 .timeline-item.in-view .timeline-node {
     animation: node-pulse 2s infinite;
 }

 .timeline-content {
     padding: 20px 25px;
     background: #fff;
     position: relative;
     border-radius: 8px;
     border: 1px solid #e0e8f3;
     box-shadow: 0 10px 30px -15px rgba(5, 110, 182, 0.15);
     opacity: 0;
     transform: perspective(1000px) rotateY(20deg) translateX(30px);
     transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     transition-delay: 0.2s;
 }

 .timeline-item:nth-child(even) .timeline-content {
     transform: perspective(1000px) rotateY(-20deg) translateX(-30px);
 }

 .timeline-item.in-view .timeline-content {
     opacity: 1;
     transform: perspective(1000px) rotateY(0) translateX(0);
 }

 .timeline-year {
     color: var(--primary-blue);
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 10px;
 }

 .timeline-title {
     margin: 0 0 10px 0;
     color: var(--dark-blue);
     font-size: 1.25rem;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .timeline-icon {
     color: var(--primary-blue);
 }

 .timeline-description {
     margin: 0;
     font-size: 0.95rem;
     line-height: 1.6;
     color: var(--text-light);
 }

 /* Responsive Adjustments */
 @media screen and (max-width: 768px) {
     .timeline-track {
         left: 20px;
     }

     .timeline-item {
         width: 100%;
         padding-left: 50px;
         padding-right: 15px;
     }

     .timeline-item:nth-child(odd),
     .timeline-item:nth-child(even) {
         left: 0;
         padding-left: 50px;
     }

     .timeline-node,
     .timeline-item:nth-child(even) .timeline-node {
         left: 11px;
     }

     .timeline-content,
     .timeline-item:nth-child(even) .timeline-content {
         transform: perspective(1000px) rotateY(0deg) translateX(30px);
     }
 }