apply attached image in the background in the banner section

index.html

@@ -278,10 +278,11 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
       </div>
     </div>
   </header>
-
   <!-- Banner Section -->
-  <section class="pattern-navy text-white py-16 md:py-24">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <section class="text-white py-16 md:py-24 relative overflow-hidden">
+    <div class="absolute inset-0 bg-[var(--vlc-navy)] opacity-90"></div>
+    <div class="absolute inset-0 bg-[url('https://huggingface.co/spaces/vlcsolutions/dynamics-velocity-accelerator/resolve/main/images/microsoft-power-automate-main-banner.png')] bg-cover bg-center mix-blend-overlay"></div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
       <div class="text-center" data-aos="fade-up">
         <h1 class="text-4xl md:text-5xl font-bold mb-4">Automate the Routine. Focus on What Matters.</h1>
         <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Empowering Growth, Simplifying Challenges, Accelerating Success</p>
@@ -289,8 +290,7 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
       </div>
     </div>
   </section>
-
-  <!-- Section 1 -->
+<!-- Section 1 -->
   <section class="py-16 bg-[var(--vlc-tint)]">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid md:grid-cols-2 gap-12 items-center">