apply attached image in the background in the banner section

index.html

@@ -280,17 +280,17 @@ 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-20">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+  <section class="text-white py-20 relative overflow-hidden">
+    <div class="absolute inset-0 bg-[var(--vlc-navy)] opacity-90 z-0"></div>
+    <div class="absolute inset-0 z-0" style="background: url('https://huggingface.co/spaces/vlcsolutions/vlc-streamsync-pro/resolve/main/images/multimedia-services-main-banner.png') center/cover no-repeat;"></div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
       <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Turn Content Into Connections</h1>
       <p class="text-xl md:text-2xl mb-8" data-aos="fade-up" data-aos-delay="100">Engage, Protect, and Grow Your Audience</p>
       <a href="./contact-us.html" class="btn-accent px-8 py-3 rounded-full text-lg font-semibold inline-block" data-aos="fade-up" data-aos-delay="200">Get Started Now</a>
     </div>
   </section>
-
-  <!-- Section 1 -->
+<!-- Section 1 -->
   <section class="py-16 bg-white">
     <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">