Manual changes saved

index.html

@@ -224,27 +224,41 @@
   </header>
   <!-- ======= HERO / BANNER ======= -->
 <!-- ====== HERO SECTION (Compact with Background Banner Image) ====== -->
-<section class="relative text-white py-12 md:py-16 overflow-hidden"
-         style="background-color:#002060;">
+<section class="relative py-12 md:py-16 overflow-hidden" style=>
   <!-- Banner Background Image -->
   <div class="absolute inset-0">
-    <img src="https://huggingface.co/spaces/vlcsolutions/toolmaster-pro-erp-integrator/resolve/main/images/ToolManagement-Banner-Nov2025.png" 
+    <img src="https://huggingface.co/spaces/vlcsolutions/toolmaster-pro-erp-integrator/resolve/main/images/ToolManagement-Banner-Nov2025.png"
          alt="Tool Management Banner"
          class="w-full h-full object-cover object-right">
   </div>
-<!-- Content -->
+
+  <!-- Overlay for Better Text Contrast -->
+  <div class="absolute inset-0 bg-black/30"></div>
+
+  <!-- Content -->
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <h1 class="text-3xl md:text-4xl font-bold mb-2 text-white drop-shadow-md">
-      Bridge Production & Planning with<br> Real-Time Tool Insights
+
+    <!-- Title -->
+    <h1 class="text-3xl md:text-4xl font-bold mb-2 text-[#C8F3FF] drop-shadow-lg">
+      Bridge Production & Planning with<br>
+      Real-Time Tool Insights
     </h1>
-    <p class="text-lg md:text-xl font-medium mb-6 text-white/90">
+
+    <!-- Subtitle -->
+    <p class="text-lg md:text-xl font-medium mb-6 text-[#E8F9FF]">
       Optimize Every Tool, Maximize Every Minute
     </p>
+
+    <!-- Button -->
     <a href="https://www.vlcsolutions.com/contactus.html"
-       class="mx-auto inline-block bg-[var(--vlc-leaf)] hover:bg-[var(--vlc-leaf-dark)] text-[var(--vlc-navy)] font-bold py-3 px-8 rounded-full text-xl md:text-2xl mb-8 transition-colors duration-200 shadow-lg hover:shadow-xl">
+       class="mx-auto inline-block bg-[var(--vlc-leaf)] hover:bg-[var(--vlc-leaf-dark)]
+              text-[var(--vlc-navy)] font-bold py-3 px-8 rounded-full
+              text-xl md:text-2xl mb-8 transition-colors duration-200 shadow-lg hover:shadow-xl">
       Solve Your Downtime Problem
     </a>
+  </div>
 </section>
+
 <!-- ====== CTA RIBBON (Brand navy with subtle pattern) ====== -->
 <section class="pattern-navy text-white py-8 bg-[var(--vlc-navy-700)]">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">