Manual changes saved

index.html

@@ -221,15 +221,62 @@
   <!-- Header / Nav -->
   
   <!-- Hero Banner -->
-   <section class="text-white py-16 md:py-24" style="background: url('https://huggingface.co/spaces/vlcsolutions/vlc-engineering-sync-pro/resolve/main/images/ECM Main Banner-2025.png') no-repeat center center; background-size: cover;">
-<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-<div class="text-center max-w-2xl mx-auto" data-aos="fade-up">
-<h1 class="text-4xl md:text-3xl font-bold leading-tight mb-4"> Bridging the Gap from Design to Delivery using AI</h1>
-        <p class="text-xl md:text-2xl mb-6 max-w-3xl mx-auto">Unify your data. Unify your teams.</p>
-        <a href="https://www.vlcsolutions.com/contactus.html" class="btn-accent px-8 py-3 rounded-md text-lg font-medium">Get Total Control</a>
-      </div>
+<section class="text-white py-16 md:py-24" style="background: url('https://huggingface.co/spaces/vlcsolutions/vlc-engineering-sync-pro/resolve/main/images/ECM Main Banner-2025.png') no-repeat center center; background-size: cover;">
+  <div class="overlay"></div>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center max-w-2xl mx-auto" data-aos="fade-up">
+      <h1 class="text-4xl md:text-3xl font-bold leading-tight mb-4 text-white">Bridging the Gap from Design to Delivery using AI</h1>
+      <p class="text-xl md:text-2xl mb-6 max-w-3xl mx-auto text-lightblue">Unify your data. Unify your teams.</p>
+      <a href="https://www.vlcsolutions.com/contactus.html" class="btn-accent px-8 py-3 rounded-md text-lg font-medium">Get Total Control</a>
     </div>
-  </section>
+  </div>
+</section>
+/* Overlay for Background Image */
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4); /* Semi-transparent black overlay */
+  z-index: -1; /* Behind text */
+}
+
+/* Primary Text Color */
+.text-white {
+  color: #FFFFFF;
+}
+
+/* Light Blue Color for Subtext */
+.text-lightblue {
+  color: #A8DADC;
+}
+
+/* Button Style */
+.btn-accent {
+  background-color: #007BFF; /* Vibrant Blue */
+  color: #FFFFFF;
+  text-align: center;
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  font-size: 1.125rem;
+  font-weight: 500;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+}
+
+/* Button Hover Effect */
+.btn-accent:hover {
+  background-color: #0056B3; /* Darker Blue */
+  text-decoration: none;
+}
+
+/* Text Shadow for Better Visibility */
+.text-white, .text-lightblue {
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhanced text shadow for readability */
+}
+
+
 
   <!-- Section 1: The End of Disconnected Operations -->
   <section class="py-16 px-4 sm:px-6 lg:px-8">