banner section, do some small adjustments, don't change any description text in the banner section

index.html

@@ -274,41 +274,42 @@
 
 <!-- ======================== 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 </br>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,.88), rgba(0,32,96,.85)),
+                    url('https://huggingface.co/spaces/vlcsolutions/vlc-e-commerce-powerbridge/resolve/main/images/magento%20page.png');
+                  background-size:cover; background-position:center;
+                  background-attachment:fixed;"></div>
+      <!-- Subtle grid accent -->
+      <div class="absolute inset-0 pattern-grid opacity-30" 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-16 lg:py-24">
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tight">
+            One Platform. Full Integration. All Your </br>E-Commerce Needs Met
+          </h1>
+          <p class="mt-6 text-xl md:text-2xl opacity-95 max-w-2xl">
+            Microsoft Dynamics 365 Business Central: Connecting E-Commerce with Efficiency
+          </p>
+
+          <div class="mt-10 flex flex-wrap gap-4">
+            <a href="https://www.vlcsolutions.com/contactus.html"
+               class="btn-accent px-8 py-4 rounded-lg font-semibold text-lg inline-flex items-center gap-3 vlc-ring hover:scale-[1.02] transition-transform">
+              <i data-feather="plug" class="w-5 h-5" aria-hidden="true"></i>
+              Sync Magento with Business Central
+            </a>
+          </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>
-  </section>
+      <!-- Decorative bottom wave using brand colors -->
+      <svg class="block w-full absolute bottom-0" viewBox="0 0 1440 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" aria-hidden="true">
+        <path d="M0,96 C240,128 480,96 720,96 C960,96 1200,128 1440,96 L1440,120 L0,120 Z" fill="var(--vlc-leaf)" fill-opacity="0.15"/>
+      </svg>
+</section>
 
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
     <!-- ====== Introduction Section ====== -->

style.css

@@ -5,12 +5,13 @@
 }
 
 /* Hero button hover effect */
+.btn-accent {
+    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
 .btn-accent:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 20px rgba(141, 198, 63, 0.3);
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 0 12px 24px rgba(141, 198, 63, 0.35);
 }
-
-
 :root {
     --vlc-navy: #002060;
     --vlc-navy-700: #001a50;