mobile not looking correct, do correct banner text

index.html

@@ -232,21 +232,21 @@
     <div class="max-w-3xl text-right ml-20" data-aos="fade-up">
 <!-- Right-aligned heading -->
       <h1
-        class="text-4xl md:text-4xl font-extrabold leading-tight antialiased drop-shadow-[0_3px_10px_rgba(0,0,0,0.45)] mb-6"
-        style="color:#ffffff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; margin-right: -20%;">
+        class="text-3xl md:text-4xl font-extrabold leading-tight antialiased drop-shadow-[0_3px_10px_rgba(0,0,0,0.45)] mb-4 md:mb-6"
+        style="color:#ffffff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;">
         Compliance Without Chaos 
       </h1>
 
       <!-- Right-aligned subheading -->
-      <p class="text-base md:text-lg mb-8 leading-relaxed drop-shadow-[0_2px_6px_rgba(0,0,0,0.35)]"
-         style="color:#ffffff; margin-right: -5%;">
+      <p class="text-sm md:text-lg mb-6 md:mb-8 leading-relaxed drop-shadow-[0_2px_6px_rgba(0,0,0,0.35)]"
+         style="color:#ffffff;">
         Smarter Inspections. Stronger Compliance.
       </p>
 <!-- CTA: consistent VLC green -->
       <a href="https://www.vlcsolutions.com/contact-us.html"
-         class="rounded-lg px-6 py-3 text-lg font-semibold inline-flex items-center shadow-lg transition-all duration-300"
-         style="background:#A6E840; color:#002060;margin-right: -5%">
-        Skip the Setup. Get the Insights.
+         class="rounded-lg px-4 py-2 md:px-6 md:py-3 text-base md:text-lg font-semibold inline-flex items-center shadow-lg transition-all duration-300"
+         style="background:#A6E840; color:#002060;">
+Skip the Setup. Get the Insights.
         <i data-feather="zap" class="w-5 h-5 ml-2" aria-hidden="true"></i>
       </a>
 

style.css

@@ -29,6 +29,24 @@
     top: 0;
     z-index: 50;
   }
+
+  /* Hero banner adjustments */
+  section.relative.text-white {
+    height: auto;
+    padding: 3rem 1rem;
+  }
+
+  .max-w-7xl.mx-auto.h-full.flex.items-center.justify-end.px-8 {
+    justify-content: center;
+    text-align: center;
+    padding: 0 1rem;
+  }
+
+  .max-w-3xl.text-right {
+    text-align: center;
+    margin-left: 0;
+    padding: 0 1rem;
+  }
 }
 h1 {
 	font-size: 16px;