apply attached image in the background in the banner section

index.html

@@ -281,8 +281,10 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
     </div>
   </header>
   <!-- Banner Start -->
-  <section class="pattern-navy text-white py-16">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <section class="pattern-navy text-white py-16 relative overflow-hidden">
+    <div class="absolute inset-0 bg-[var(--vlc-navy)] opacity-90 z-0"></div>
+    <div class="absolute inset-0 z-0 bg-cover bg-center" style="background-image: url('https://huggingface.co/spaces/vlcsolutions/dynamics-copilot-accelerator/resolve/main/images/microsoft-copilot-studio-main-page.png')"></div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
       <div class="text-center">
         <h2 class="text-3xl md:text-4xl font-bold mb-4">Copilot Studio: Intelligent Conversations, Seamless Support</h2>
         <p class="text-xl text-gray-200 mb-8 max-w-3xl mx-auto">Personalized engagement powered by AI — available anytime, anywhere.</p>
@@ -290,7 +292,7 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
       </div>
     </div>
   </section>
-  <!-- Banner Completed -->
+<!-- Banner Completed -->
 
   <!-- Section 1 -->
   <section class="py-16 bg-white">

style.css

@@ -5,6 +5,10 @@ body {
   padding: 0;
   line-height: 1.6;
 }
+
+.pattern-navy {
+  position: relative;
+}
 h1 {
 	font-size: 16px;
 	margin-top: 0;