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