updated roadmap UI

poc/components/roadmap.html

@@ -57,7 +57,7 @@
 .timeline::before {
     content: '';
     position: absolute;
-    left: 85px;
+    left: 96px;
     top: 0;
     bottom: 0;
     width: 2px;
@@ -68,20 +68,20 @@
     display: flex;
     margin-bottom: 2rem;
     position: relative;
-    align-items: flex-start;
+    align-items: center; /* Use center alignment */
 }
 
 .milestone::before {
     content: '';
     position: absolute;
-    left: 85px;
-    top: 15px;
+    left: 88px;
+    top: 50%; /* Center the circle vertically */
+    transform: translateY(-50%); /* Adjust to align perfectly */
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: #888;
     border: 2px solid var(--hero-background);
-    transform: translate(-50%, -50%);
     box-sizing: border-box;
 }
 
@@ -91,8 +91,9 @@
     font-family: 'Poppins', sans-serif;
     font-weight: 600;
     color: var(--hero-subtitle-background);
-    padding-top: 8px;
+    padding-top: 0; /* Remove padding to align vertically */
     white-space: nowrap;
+    text-align: right; /* Align the date to the right */
 }
 
 .milestone-content {
@@ -146,4 +147,4 @@
         padding: 1rem;
     }
 }
-</style>
+</style>