in this HERO / BANNER - text and banner image adjust correctly

index.html

@@ -274,41 +274,41 @@
 
 <!-- ======================== Main Content ======================== -->
 <main id="main" class="w-full">
-  <!-- ====== HERO / BANNER (brand overlay + subtle grid) ====== -->
-  <section class="relative overflow-hidden">
-    <!-- Background image with refined overlay -->
-    <div class="absolute inset-0" aria-hidden="true"
-         style="background-image:
-                  linear-gradient(0deg, rgba(0,32,96,.82), rgba(0,32,96,.80)),
-                  url('https://huggingface.co/spaces/vlcsolutions/vlc-e-commerce-powerbridge/resolve/main/images/magento%20page.png');
-                background-size:cover; background-position:center;"></div>
-<!-- Subtle grid accent -->
-    <div class="absolute inset-0 pattern-grid opacity-20" aria-hidden="true"></div>
-
-    <div class="relative z-10 text-white">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
-        <h1 class="text-4xl md:text-5xl font-extrabold leading-tight">
-          One Platform. Full Integration. All Your E-Commerce Needs Met
-        </h1>
-        <p class="mt-4 text-xl opacity-95">
-          Microsoft Dynamics 365 Business Central: Connecting E-Commerce with Efficiency
-        </p>
-
-        <div class="mt-8 flex flex-wrap gap-3">
-          <a href="https://www.vlcsolutions.com/contactus.html"
-             class="btn-accent px-6 py-3 rounded-lg font-semibold inline-flex items-center gap-2 vlc-ring">
-            <i data-feather="plug" class="w-4 h-4" aria-hidden="true"></i>
-            Sync Magento with Business Central
-          </a>
+    <!-- ====== HERO / BANNER (brand overlay + subtle grid) ====== -->
+    <section class="relative overflow-hidden min-h-[500px] flex items-center">
+      <!-- Background image with refined overlay -->
+      <div class="absolute inset-0" aria-hidden="true"
+           style="background-image:
+                    linear-gradient(0deg, rgba(0,32,96,.82), rgba(0,32,96,.80)),
+                    url('https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=1920&auto=format&fit=crop');
+                  background-size:cover; background-position:center;"></div>
+      <!-- Subtle grid accent -->
+      <div class="absolute inset-0 pattern-grid opacity-20" aria-hidden="true"></div>
+
+      <div class="relative z-10 text-white w-full">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center lg:text-left">
+          <div class="max-w-2xl mx-auto lg:mx-0">
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight">
+              Seamless E-Commerce Integration with Business Central
+            </h1>
+            <p class="mt-6 text-xl md:text-2xl opacity-95 max-w-2xl">
+              Unify your Magento store with Microsoft Dynamics 365 for real-time inventory, orders, and customer management
+            </p>
+            <div class="mt-8 flex flex-wrap justify-center lg:justify-start gap-4">
+              <a href="https://www.vlcsolutions.com/contactus.html"
+                 class="btn-accent px-8 py-4 rounded-lg font-bold text-lg inline-flex items-center gap-2 vlc-ring">
+                <i data-feather="zap" class="w-5 h-5" aria-hidden="true"></i>
+                Start Your Integration Today
+              </a>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-
     <!-- Decorative bottom wave using brand colors -->
-    <svg class="block w-full" viewBox="0 0 1440 60" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" aria-hidden="true">
-      <path d="M0,32 C240,64 480,0 720,24 C960,48 1200,56 1440,24 L1440,60 L0,60 Z" fill="var(--vlc-leaf)" fill-opacity="0.12"/>
+    <svg class="block w-full" viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" aria-hidden="true">
+      <path d="M0,32 C240,64 480,0 720,24 C960,48 1200,56 1440,24 L1440,80 L0,80 Z" fill="var(--vlc-leaf)" fill-opacity="0.12"/>
     </svg>
-  </section>
+</section>
 
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
     <!-- ====== Introduction Section ====== -->

style.css

@@ -1,4 +1,16 @@
 
+/* Hero section enhancements */
+.min-h-\[500px\] {
+    min-height: 500px;
+}
+
+/* Hero button hover effect */
+.btn-accent:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(141, 198, 63, 0.3);
+}
+
+
 :root {
     --vlc-navy: #002060;
     --vlc-navy-700: #001a50;