fix: add styles to form stepper to match design

src/pages/ValidatorOnboarding/FormStepper/FormStepper.css

@@ -1,7 +1,22 @@
 .custom-step {
   background-color: #ffffff;
 }
-
+div[class*="StepMain-"]  {
+  align-items: start;
+}
+div[class*="LabelContainer-"] span[class*="Label-"]  {
+  text-align: initial;
+  text-transform: uppercase;
+}
+div[class*="ConnectorContainer-"]  {
+  right: unset;
+  left: calc(-100% + 28px);
+  width: 100%;
+}
+span[class*="Connector-"]  {
+  position: relative;
+  z-index: -1;
+}
 .custom-step.StepMain--active,
 .custom-step.StepMain--completed {
   background-color: #2a4cf4;
@@ -37,32 +52,8 @@
   content: attr(data-subtitle);
   position: absolute;
   top: calc(100% + 4px);
+  left: 8px;
   font-size: 12px;
   color: #A2A9B0; 
-  background: transparent;
+  width: max-content;
-  border: none;
-}
-
-[data-step="Overview"]::after {
-  left: 35%;
-}
-
-[data-step="Advisories"]::after {
-  left: 30%;
-}
-
-[data-step="Client Setup"]::after {
-  left: 32%;
-}
-
-[data-step="Validator Setup"]::after {
-  left: 25%;
-}
-
-[data-step="Key Generation"]::after {
-  left: 24.5%;
-}
-
-[data-step="Activation"]::after {
-  left: 33%;
 }

src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx

@@ -22,7 +22,14 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => {
       nonLinear={true}
       styleConfig={stepStyle}
       connectorStyleConfig={customConnectorStyle}
-      style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '2rem' }}
+      style={{
+        fontSize: '14px',
+        zIndex: 999,
+        width: '100%',
+        padding: 0,
+        marginBottom: '3rem',
+        fontFamily: 'Inter',
+      }}
     >
       {steps.map((step, index) => (
         <Step