Enhance the contact page (#499)

* Update index.html

enhance the contact form

* Update index.html

changed the color of button

* Update index.html

index.html

@@ -1085,21 +1085,19 @@ <h4>Call:</h4>
       </div>
       <div class="col-lg-8 mt-5 mt-lg-0">
         <form id="contactForm" action="" role="form" class="php-email-form">
-          <div class="row">
-            <div class="col-md-6 form-group">
-              <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
-            </div>
-            <div class="col-md-6 form-group mt-3 mt-md-0">
-              <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
-            </div>
+          <div class="form-group">
+            <input type="text" name="name" class="form-control enhanced-input" id="name" placeholder="Your Name" required>
           </div>
           <div class="form-group mt-3">
-            <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
+            <input type="email" class="form-control enhanced-input" name="email" id="email" placeholder="Your Email" required>
           </div>
           <div class="form-group mt-3">
-            <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
+            <input type="text" class="form-control enhanced-input" name="subject" id="subject" placeholder="Subject" required>
           </div>
-          <div class="text-center"><button type="submit">Send Message</button></div>
+          <div class="form-group mt-3">
+            <textarea class="form-control enhanced-textarea" name="message" rows="5" placeholder="Message" required></textarea>
+          </div>
+          <div class="text-center"><button type="submit" class="btn-submit">Send Message</button></div>
         </form>
         <div id="confirmationMessage" style="display:none; margin-top: 20px; color: green;">
           Thank you for your message. We will get back to you shortly.
@@ -1109,6 +1107,36 @@ <h4>Call:</h4>
   </div>
 </section>
 
+<style>
+  .enhanced-input {
+    padding: 10px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 15px;
+  }
+
+  .enhanced-textarea {
+    padding: 10px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 15px;
+    resize: vertical;
+  }
+
+  .btn-submit {
+    padding: 10px 20px;
+    background-color: #55a5ea;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    cursor: pointer;
+  }
+
+  .btn-submit:hover {
+    background-color: #4cae4c;
+  }
+</style>
+
 <script>
   document.getElementById('contactForm').addEventListener('submit', function(event) {
     event.preventDefault(); // Prevent form submission