update

frontEnd/public/styles/pages/_about.scss

@@ -3,6 +3,131 @@
   // Add any specific styles for the about banner here
 }
 
+// About Service Section - Transparent Background Style - Seamless Continuous Flow
+.about-service-section {
+  position: relative;
+  background: transparent;
+  padding: 120px 0 60px 0;
+  overflow: hidden;
+  margin-bottom: 0;
+  color: #000000 !important;
+  
+  * {
+    color: inherit !important;
+  }
+  
+  &::before {
+    display: none;
+  }
+  
+  &.hero-banner {
+    background: transparent;
+    min-height: auto;
+    
+    .hero-background {
+      display: none;
+    }
+  }
+}
+
+.about-process-section {
+  position: relative;
+  background: transparent;
+  padding: 60px 0 120px 0;
+  overflow: hidden;
+  margin-top: -1px;
+  padding-top: 61px;
+  color: #000000 !important;
+  
+  * {
+    color: inherit !important;
+  }
+  
+  &::before {
+    display: none;
+  }
+  
+  &.hero-banner {
+    background: transparent;
+    min-height: auto;
+    
+    .hero-background {
+      display: none;
+    }
+  }
+}
+
+.about-journey-section {
+  position: relative;
+  background: transparent;
+  padding: 120px 0;
+  overflow: hidden;
+  color: #000000 !important;
+  
+  * {
+    color: inherit !important;
+  }
+  
+  &::before {
+    display: none;
+  }
+  
+  &.hero-banner {
+    background: transparent;
+    min-height: auto;
+    
+    .hero-background {
+      display: none;
+    }
+  }
+}
+
+.about-process-section {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+// Journey Timeline Container - Special styling
+.journey-timeline-container {
+  grid-template-columns: 1fr;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  
+  .journey-milestone-item {
+    text-align: left;
+    flex-direction: row;
+    
+    .milestone-year-icon {
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: var(--white) !important;
+      
+      span {
+        font-variant-numeric: tabular-nums;
+        letter-spacing: -0.02em;
+      }
+    }
+  }
+}
+
+// Process Steps Container - Special styling
+.process-steps-container {
+  .metric-item {
+    text-align: left;
+    flex-direction: row;
+    
+    .step-number-icon {
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: var(--white) !important;
+      
+      span {
+        font-variant-numeric: tabular-nums;
+      }
+    }
+  }
+}
+
 // Enterprise styling for about page
 .enterprise-badge {
   .enterprise-badge-content {
@@ -160,7 +285,118 @@
 }
 
 // Responsive adjustments
+@media (max-width: 991px) {
+  .about-service-section {
+    padding: 80px 0 40px 0;
+  }
+  
+  .about-process-section {
+    padding: 40px 0 80px 0;
+    padding-top: 41px;
+  }
+  
+  .about-journey-section {
+    padding: 100px 0;
+  }
+  
+  .hero-metrics {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25rem;
+  }
+  
+  .journey-timeline-container {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (max-width: 768px) {
+  .about-service-section {
+    padding: 60px 0 30px 0;
+  }
+  
+  .about-process-section {
+    padding: 30px 0 60px 0;
+    padding-top: 31px;
+  }
+  
+  .about-journey-section {
+    padding: 80px 0;
+  }
+    
+    .hero-title {
+      font-size: 2rem;
+    }
+    
+    .hero-description {
+      font-size: 1.125rem;
+      margin-bottom: 2rem;
+    }
+    
+    .hero-metrics {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+      margin: 2rem 0;
+      
+      .metric-item {
+        padding: 1.25rem;
+        gap: 0.875rem;
+        
+        .metric-icon {
+          width: 48px;
+          height: 48px;
+          
+          i {
+            font-size: 1.25rem;
+          }
+        }
+        
+        .metric-label {
+          font-size: 1rem;
+        }
+        
+        .metric-value {
+          font-size: 0.875rem;
+        }
+      }
+    }
+    
+    .journey-timeline-container {
+      margin: 2rem 0;
+      
+      .journey-milestone-item {
+        padding: 1.25rem;
+        gap: 0.875rem;
+        
+        .metric-icon {
+          width: 48px;
+          height: 48px;
+          
+          span {
+            font-size: 1rem;
+          }
+        }
+        
+        .metric-label {
+          font-size: 1rem;
+        }
+        
+        .metric-value {
+          font-size: 0.875rem;
+        }
+      }
+    }
+    
+    .hero-actions {
+      flex-direction: column;
+      width: 100%;
+      
+      .btn-primary {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  }
+  
   .enterprise-stats {
     .stat-item {
       margin-bottom: 20px;
@@ -185,3 +421,51 @@
     }
   }
 }
+
+@media (max-width: 575px) {
+  .about-service-section {
+    padding: 50px 0 25px 0;
+  }
+  
+  .about-process-section {
+    padding: 25px 0 50px 0;
+    padding-top: 26px;
+  }
+  
+  .about-journey-section {
+    padding: 60px 0;
+  }
+    
+    .hero-title {
+      font-size: 1.75rem;
+    }
+    
+    .hero-description {
+      font-size: 1rem;
+    }
+    
+    .metric-item {
+      padding: 1rem;
+      
+      .metric-icon {
+        width: 44px;
+        height: 44px;
+      }
+    }
+    
+    .journey-timeline-container {
+      .journey-milestone-item {
+        padding: 1rem;
+        
+        .metric-icon {
+          width: 44px;
+          height: 44px;
+          
+          span {
+            font-size: 0.9375rem;
+          }
+        }
+      }
+    }
+  }
+}