Contact Form input bug when field required

Button formate with same CSS

Signed-off-by: vimal-java-dev <vimal929@gmail.com>

Author: vimal-java-dev

aboutUs/index.html

@@ -34,9 +34,11 @@
             referrerpolicy="no-referrer">
     </noscript>
 
+    <!-- CSS -->
     <link rel="stylesheet" href="/css/global.css">
     <link rel="stylesheet" href="/css/aboutUs.css">
     <link rel="stylesheet" href="/css/dropdown.css">
+    <link rel="stylesheet" href="/css/open-modal-btn.css">
     <link rel="stylesheet" href="/css/whatsapp-floating.css">
 
     <!-- Open Graph -->
@@ -156,7 +158,7 @@
         </div>
     </nav>
 
-    <section id="hero" class="hero-about">
+    <section id="hero" class="hero">
         <div id="particles-js"></div>
         <div class="gradient-overlay"></div>
         <div class="hero-content">
@@ -285,7 +287,7 @@ <h2 class="cta-title">Our Mission</h2>
                 preferred technology partner for small to medium enterprises looking to scale their digital presence
                 with confidence.
             </p>
-            <a href="/contactUs" class="btn primary">Partner With Us Today <i class="fas fa-arrow-right"
+            <a href="/contactUs" class="open-modal-btn btn glow-btn">Partner With Us Today <i class="fas fa-arrow-right"
                     style="margin-left:8px;"></i></a>
         </div>
     </section>

contactUs/index.html

@@ -37,6 +37,7 @@
     <link rel="stylesheet" href="/css/global.css">
     <link rel="stylesheet" href="/css/contactUs.css">
     <link rel="stylesheet" href="/css/dropdown.css">
+    <link rel="stylesheet" href="/css/open-modal-btn.css">
     <link rel="stylesheet" href="/css/whatsapp-floating.css">
 
     <!-- Open Graph -->
@@ -143,7 +144,7 @@
         </div>
     </nav>
 
-    <section id="hero" class="hero-contact">
+    <section id="hero" class="hero">
         <div id="particles-js"></div>
         <div class="gradient-overlay"></div>
         <div class="hero-content">
@@ -159,6 +160,16 @@ <h1>Contact <span class="gradient-text">Vimal Tech</span></h1>
                 <span class="highlight-text">technical support?</span> Reach out to us directly. We are ready
                 <span class="highlight-text">to engineer your next big idea.</span>
             </p>
+            <div class="hero-availability">
+                <span class="availability-dot"></span>
+                <span>Actively accepting project requirements</span>
+                <span class="availability-dot"></span>
+            </div>
+
+            <a href="#contactForm" class="hero-scroll-hint">
+                <span>Click to contact form</span>
+                <span class="scroll-line"></span>
+            </a>
         </div>
     </section>
 
@@ -272,8 +283,8 @@ <h3 style="margin-bottom: 20px; font-family: var(--font-primary);">Start a Conve
                     </div>
 
                     <button type="submit" class="btn primary glow-btn" id="submitBtn"
-                        style="width: 100%; border: none; cursor: pointer; margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 8px;">
-                        <span class="btn-text">Send Message</span>
+                        style="margin-left: 30%; margin-right: 30%; justify-content: center; align-items: center;">
+                        <span class="btn-text">Submit</span>
                         <i class="fas fa-paper-plane submit-icon"></i>
                     </button>
 
@@ -285,14 +296,33 @@ <h3 style="margin-bottom: 20px; font-family: var(--font-primary);">Start a Conve
                     <p class="fallback-text">
                         Having trouble? Please use the provided email, phone, or WhatsApp to reach out directly.
                     </p>
-                    <p style="font-size: 0.8rem; color: var(--color-muted); text-align: center; margin-top: 10px;">
+                    <p style="font-size: 0.8rem; color: var(--color-muted); text-align: center;">
                         I typically respond within <strong>24 hours</strong>.
                     </p>
                 </form>
             </div>
         </div>
     </section>
 
+    <!-- Google Maps Section -->
+    <section class="map-section fade-in" aria-label="Location map">
+        <div class="map-label">
+            <span>Virtual Office · Valsad, Gujarat - India</span>
+        </div>
+        <iframe
+            src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d720.8584561459695!2d72.92232226949376!3d20.614061254046845!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMjDCsDM2JzUwLjYiTiA3MsKwNTUnMjIuNyJF!5e1!3m2!1sen!2sin!4v1773056719378!5m2!1sen!2sin"
+            style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
+            title="Map of Valsad">
+        </iframe>
+        <!-- Open in Google Maps Button -->
+        <div class="map-button">
+            <a href="https://maps.app.goo.gl/XmxSewhQsDVa3DwAA" target="_blank" rel="noopener noreferrer"
+                class="map-open-btn">
+                Open Location in Google Maps
+            </a>
+        </div>
+    </section>
+
     <!-- Footer -->
     <footer class="site-footer">
         <div class="footer-divider-top"></div>

css/aboutUs.css

@@ -1,51 +1,4 @@
 /* about.css - Elegant & Modern Update */
-
-/* ===== HERO SECTION ===== */
-.hero-about {
-    position: relative;
-    min-height: 100vh;
-    /* min-height: 80vh; */
-    /* Slightly shorter than services for faster content access */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    overflow: hidden;
-    background: radial-gradient(circle at center, #1e293b, #020617);
-    color: #e5ff7a;
-    /* your strong green */
-}
-
-body.dark .hero-about {
-    background: radial-gradient(circle at center, #0f172a, #000000);
-}
-
-#particles-js {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-}
-
-body.dark #particles-js canvas {
-    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35));
-}
-
-.gradient-overlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(45deg, rgba(56, 189, 248, 0.1), rgba(0, 0, 0, 0.5));
-    z-index: 1;
-}
-
-.hero-about .hero-content {
-    position: relative;
-    z-index: 2;
-    max-width: 850px;
-    padding: 20px;
-}
-
 /* ===== UTILITIES ===== */
 .section-header {
     text-align: center;