apply attached image in the background in the banner section

index.html

@@ -280,10 +280,11 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
       </div>
     </div>
   </header>
-
   <!-- Security Banner -->
-  <section class="pattern-navy py-16 px-4 sm:px-6 lg:px-8 text-white">
-    <div class="max-w-7xl mx-auto text-center">
+  <section class="relative py-16 px-4 sm:px-6 lg:px-8 text-white">
+    <div class="absolute inset-0 bg-[var(--vlc-navy)] opacity-90"></div>
+    <div class="absolute inset-0 bg-[url('https://huggingface.co/spaces/vlcsolutions/securedynamics-shieldforce/resolve/main/images/procedures-and-people-main-page-and-others.png')] bg-cover bg-center"></div>
+    <div class="max-w-7xl mx-auto text-center relative z-10">
       <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Security Embedded in Everything We Do</h1>
       <p class="text-xl max-w-3xl mx-auto mb-8" data-aos="fade-up" data-aos-delay="100">Protecting data, ensuring compliance, and earning trust through disciplined security practices.</p>
       <a href="#security-framework" class="btn-accent px-8 py-3 rounded-md font-medium inline-flex items-center" data-aos="fade-up" data-aos-delay="200">
@@ -291,8 +292,7 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
       </a>
     </div>
   </section>
-
-  <!-- Section 1: Trust Core -->
+<!-- Section 1: Trust Core -->
   <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white" id="security-framework">
     <div class="max-w-7xl mx-auto">
       <div class="grid md:grid-cols-2 gap-12 items-center">