Banner section :Banner image is dominating. text is not visible: use transparent color use

index.html

@@ -282,9 +282,10 @@
     </div>
   </header>
   <!-- Banner Section -->
-  <section class=" text-white py-16 md:py-22 relative overflow-hidden">
-    <div class="absolute inset-0 bg-[url('https://huggingface.co/spaces/vlcsolutions/vlc-noc-command-center/resolve/main/images/managed-noc-services-banner.png')] bg-cover bg-center mix-blend-overlay z-0"></div>
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
+  <section class="text-white py-16 md:py-22 relative overflow-hidden">
+<div class="absolute inset-0 bg-[url('https://huggingface.co/spaces/vlcsolutions/vlc-noc-command-center/resolve/main/images/managed-noc-services-banner.png')] bg-cover bg-center z-0"></div>
+    <div class="absolute inset-0 bg-[var(--vlc-navy)]/70 z-0"></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-4 text-white drop-shadow-lg" data-aos="fade-up">Achieve stability across your organization.</h1>
       <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-white drop-shadow-lg" data-aos="fade-up" data-aos-delay="100">Stop Managing Downtime. Start Utilizing VLC's 24/7 Managed NOC</p>
       <a href="#contact" class="btn-accent inline-block px-8 py-3 rounded-md font-bold text-lg drop-shadow-lg" data-aos="fade-up" data-aos-delay="200">Request Your Resilience Plan</a>

style.css

@@ -4,10 +4,13 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
   margin: 0;
 }
-
 .drop-shadow-lg {
   filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
 }
+
+.text-shadow {
+  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
 /* Modal styles */
 .modal-content {
   position: relative;