update

frontEnd/public/styles/_responsive.scss

@@ -93,19 +93,24 @@
   }
 
   .modern-banner {
+    padding-top: 80px; // Account for fixed navbar
+    
     .container {
       padding: 60px 0;
+      padding-top: 30px; // Start content below navbar
+      justify-content: flex-start; // Align to top on tablet
     }
     
     .banner-content {
       margin-bottom: 30px;
+      margin-top: 0;
     }
     
     .content-center {
       max-width: 550px;
       
       .main-heading {
-        font-size: clamp(1.5rem, 3vw, 2.5rem);
+        font-size: clamp(1.3rem, 3vw, 2rem); // Reduced from 1.5rem-2.5rem to 1.3rem-2rem
         line-height: 1.2;
       }
       
@@ -386,13 +391,19 @@
 
   .modern-banner {
     min-height: 100vh;
+    padding-top: 100px; // Account for fixed navbar (increased)
+    padding-bottom: 30px; // Add bottom padding
     
     .container {
-      padding: 40px 0;
+      padding: 30px 0;
+      padding-top: 20px; // Start content below navbar
+      justify-content: flex-start; // Align to top on mobile
     }
     
     .banner-content {
       margin-bottom: 25px;
+      margin-top: 0; // Remove any top margin
+      align-items: flex-start; // Align to top
     }
     
     .content-center {
@@ -428,8 +439,10 @@
         font-size: 14px;
         margin-bottom: 20px;
         max-width: 100%;
-        line-height: 1.5;
+        line-height: 1.6; // Increased for better readability
         padding: 0 10px;
+        word-wrap: break-word; // Ensure long words wrap
+        overflow-wrap: break-word; // Additional word wrapping support
       }
       
       .carousel-indicators {
@@ -970,8 +983,16 @@
   
   // Extra small mobile styles for modern banner
   .modern-banner {
+    padding-top: 70px; // Account for fixed navbar (smaller on mobile)
+    
     .container {
       padding: 30px 0;
+      padding-top: 15px; // Start content below navbar
+      justify-content: flex-start; // Align to top
+    }
+    
+    .banner-content {
+      margin-top: 0;
     }
     
     .content-center {
@@ -1089,8 +1110,18 @@
   
   // Ultra small mobile styles for modern banner
   .modern-banner {
+    padding-top: 90px; // Account for fixed navbar (increased)
+    padding-bottom: 25px; // Add bottom padding
+    
     .container {
       padding: 25px 0;
+      padding-top: 15px; // Start content below navbar
+      justify-content: flex-start; // Align to top
+    }
+    
+    .banner-content {
+      margin-top: 0;
+      align-items: flex-start; // Align to top
     }
     
     .content-center {
@@ -1124,8 +1155,10 @@
       .description {
         font-size: 12px;
         margin-bottom: 16px;
-        line-height: 1.3;
+        line-height: 1.5; // Increased for better readability
         padding: 0;
+        word-wrap: break-word; // Ensure long words wrap
+        overflow-wrap: break-word; // Additional word wrapping support
       }
       
       .carousel-indicators {
@@ -1196,9 +1229,16 @@
 @media only screen and (max-width: 374.98px) {
   .modern-banner {
     min-height: 100vh;
+    padding-top: 68px; // Account for fixed navbar (smaller on very small screens)
     
     .container {
       padding: 20px 0;
+      padding-top: 12px; // Start content below navbar
+      justify-content: flex-start; // Align to top
+    }
+    
+    .banner-content {
+      margin-top: 0;
     }
     
     .content-center {
@@ -1308,6 +1348,7 @@
     min-height: auto;
     height: auto;
     padding: 20px 0;
+    padding-top: 70px; // Account for fixed navbar
     
     .container {
       padding: 20px 0;
@@ -1425,6 +1466,7 @@
 @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
   .modern-banner {
     min-height: 90vh;
+    padding-top: 80px; // Account for fixed navbar
     
     .container {
       padding: 40px 0;
@@ -1472,13 +1514,14 @@
 @media only screen and (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
   .modern-banner {
     min-height: 100vh;
+    padding-top: 80px; // Account for fixed navbar
     
     .content-center {
       max-width: 600px;
       padding: 0 30px;
       
       .main-heading {
-        font-size: clamp(1.8rem, 4vw, 2.5rem);
+        font-size: clamp(1.5rem, 4vw, 2rem); // Reduced from 1.8rem-2.5rem to 1.5rem-2rem
         margin-bottom: 16px;
       }
       

frontEnd/public/styles/base/_global.scss

@@ -276,11 +276,18 @@ a {
 
 .sticky-wrapper {
   position: relative;
+  z-index: 1;
+  overflow: visible;
 }
 
 .sticky-item {
   position: sticky;
   top: 220px;
+  z-index: 1;
+  align-self: flex-start;
+  
+  // Ensure sticky stops at bottom of container
+  bottom: auto;
 }
 
 

frontEnd/public/styles/components/_cookie-consent.scss

@@ -189,7 +189,7 @@
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
-  z-index: var(--z-50);
+  z-index: 10001 !important; // Higher than banner overlay (10000)
   display: flex;
   align-items: center;
   justify-content: center;

frontEnd/public/styles/layout/_banner.scss

@@ -10,17 +10,18 @@
 // 4.02.01  modern banner styles start
 .modern-banner {
   position: relative;
-  height: 100vh;
-  height: calc(var(--vh, 1vh) * 100); // Dynamic viewport height for mobile browsers
   min-height: 100vh;
+  min-height: calc(var(--vh, 1vh) * 100); // Dynamic viewport height for mobile browsers
   min-height: -webkit-fill-available; // iOS viewport fix
   background: #0a0a0a;
-  overflow: hidden;
   overflow-x: hidden; // Prevent horizontal scroll
+  overflow-y: auto; // Allow vertical scroll if content is too long
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start; // Align content to top
   padding: 0;
+  padding-top: 100px; // Account for fixed navbar (increased from 80px)
+  padding-bottom: 40px; // Add bottom padding for scroll indicator
 
   .banner-background {
     position: absolute;
@@ -614,11 +615,12 @@
   .container {
     position: relative;
     z-index: 2;
-    height: 100%;
+    min-height: auto; // Allow content to determine height
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    padding: 80px 0;
+    justify-content: flex-start; // Align to top instead of center
+    padding: 40px 0; // Reduced padding
+    padding-top: 20px; // Start content below navbar
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
@@ -635,15 +637,19 @@
       max-width: 100%;
       padding-left: 15px;
       padding-right: 15px;
+      padding-top: 20px; // Start content below navbar on mobile
+      justify-content: flex-start; // Align content to top on mobile
     }
   }
 
   .banner-content {
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start; // Align to top instead of center
     flex: 1;
     margin-bottom: 40px;
+    padding-top: 20px; // Add top padding for spacing
+    min-height: auto; // Allow content to determine height
 
     .content-center {
       text-align: center;
@@ -700,11 +706,13 @@
       }
 
       .main-heading {
-        font-size: clamp(2.5rem, 5vw, 4.5rem);
+        font-size: clamp(2rem, 4vw, 3.5rem); // Reduced from 2.5rem-4.5rem to 2rem-3.5rem
         font-weight: 700;
-        line-height: 1.1;
+        line-height: 1.2; // Slightly increased for better spacing
         color: white;
         margin-bottom: 20px;
+        word-wrap: break-word; // Ensure long words wrap
+        overflow-wrap: break-word; // Additional word wrapping support
 
         .gradient-text {
           background: linear-gradient(135deg, #0ea5e9, #6366f1);
@@ -728,12 +736,15 @@
 
       .description {
         font-size: 18px;
-        line-height: 1.6;
+        line-height: 1.7; // Increased line height for better readability
         color: rgba(255, 255, 255, 0.8);
         margin-bottom: 32px;
-        max-width: 650px;
+        max-width: 700px; // Slightly increased max-width
         margin-left: auto;
         margin-right: auto;
+        word-wrap: break-word; // Ensure long words wrap
+        overflow-wrap: break-word; // Additional word wrapping support
+        hyphens: auto; // Enable automatic hyphenation
         
         &.carousel-text {
           transition: opacity 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;

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;
+          }
+        }
+      }
+    }
+  }
+}