desktop and mobile should show the correct

index.html

@@ -221,20 +221,19 @@
     </div>
   </header>
   <!-- Hero / Banner (right-aligned text) -->
-  <section class="relative text-white"
+  <section class="relative text-white bg-[var(--vlc-navy)] md:h-[346px] min-h-[300px]"
   style="
-    height: 346px;
     background:
       url('https://huggingface.co/spaces/vlcsolutions/inspection-dynamo-pro/resolve/main/images/Inspection%20Management%20-Banner-Nov2025.png')
       no-repeat center center / cover;
   ">
-<div class="max-w-7xl mx-auto h-full flex items-center justify-end px-8">
-    <div class="max-w-3xl text-right ml-20" data-aos="fade-up">
+<div class="max-w-7xl mx-auto h-full flex items-center justify-end px-4 md:px-8">
+    <div class="max-w-3xl text-right md:ml-20 w-full md:w-auto" 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%;">
-        Compliance Without Chaos 
+        class="text-3xl 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; md:margin-right: -20%;">
+Compliance Without Chaos 
       </h1>
 
       <!-- Right-aligned subheading -->

style.css

@@ -33,21 +33,69 @@
   /* Hero banner adjustments */
   section.relative.text-white {
     height: auto;
-    padding: 3rem 1rem;
+    min-height: 300px;
+    padding: 2rem 1rem;
   }
 
   .max-w-7xl.mx-auto.h-full.flex.items-center.justify-end.px-8 {
     justify-content: center;
     text-align: center;
     padding: 0 1rem;
+    height: 100%;
   }
 
   .max-w-3xl.text-right {
     text-align: center;
-    margin-left: 0;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+  }
+
+  .max-w-3xl.text-right h1 {
+    font-size: 2rem;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+  }
+
+  .max-w-3xl.text-right p {
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .max-w-3xl.text-right a {
+    margin: 0 auto;
+  }
+
+  /* Features section */
+  .grid.md\:grid-cols-2.gap-10 {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  /* System capabilities */
+  .max-w-6xl.mx-auto.px-4 {
     padding: 0 1rem;
   }
 }
+
+/* Desktop styles */
+@media (min-width: 768px) {
+  section.relative.text-white {
+    height: 346px;
+  }
+
+  .max-w-7xl.mx-auto.h-full.flex.items-center.justify-end.px-8 {
+    padding-right: 2rem;
+  }
+
+  .max-w-3xl.text-right {
+    margin-right: -5%;
+  }
+
+  .max-w-3xl.text-right h1 {
+    margin-right: -20%;
+  }
+}
 h1 {
 	font-size: 16px;
 	margin-top: 0;