apply attached image in the background in the banner section

index.html

@@ -280,10 +280,14 @@ 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="pattern-navy text-white py-16 md:py-24 relative overflow-hidden">
+    <div class="absolute inset-0 z-0">
+      <img src="https://huggingface.co/spaces/vlcsolutions/power-impact-pro-builder/resolve/main/images/MS-Power-Apps.png" 
+           alt="Microsoft Power Apps" 
+           class="w-full h-full object-cover opacity-20">
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
       <div class="text-center">
         <h1 class="text-4xl md:text-5xl font-bold mb-6" data-aos="fade-up">Turn Ideas into Impactful, Scalable Apps—Effortlessly</h1>
         <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">Empower your team to create, collaborate & innovate with MS Power Platform.</p>
@@ -291,8 +295,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 md:py-24 bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="text-center mb-16">

style.css

@@ -1,8 +1,13 @@
+
 body {
 	padding: 2rem;
 	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 
+/* Banner image overlay effect */
+.pattern-navy.relative {
+  background-blend-mode: overlay;
+}
 h1 {
 	font-size: 16px;
 	margin-top: 0;