apply attached image in the background in the banner section

index.html

@@ -280,22 +280,24 @@ 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 hovered-element">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center hovered-element">
-      <h1 class="text-3xl md:text-5xl font-bold mb-6 aos-init aos-animate hovered-element" data-aos="fade-up">
+  <section class="text-white py-16 md:py-24 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/dynamics-webflow-nexus/resolve/main/images/ecommerce-development-services-main-banner-and-other.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-3xl md:text-5xl font-bold mb-6" data-aos="fade-up">
         Websites That Work. Operations That Flow.
       </h1>
-      <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
+      <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
         High-performance E-commerce synced with your business to fuel 24/7 growth.
       </p>
-      <a href="./contact-us.html" class="btn-accent px-8 py-3 rounded-md text-lg font-medium inline-block aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">
+      <a href="./contact-us.html" class="btn-accent px-8 py-3 rounded-md text-lg font-medium inline-block" data-aos="fade-up" data-aos-delay="200">
         Start Your Integration
       </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="lg:flex items-center gap-12">