responsive contact page

resources/css/site.css

@@ -324,11 +324,13 @@ p {
 
 /* CONTACT PAGE */
 .contact-section {
-    padding-top: 100px;
+    padding-top: 90px;
 }
 
 .bg-contact {
     background: url(../assets/images/wallpaper8.jpg);
+    padding-top: 50%;
+    background-size: cover;
 }
 
 .contact-form {
@@ -340,10 +342,10 @@ p {
     border: none;
     transition: all 0.3s ease-in-out;
     outline: none;
-    padding: 25px 40px;
+    padding: 10px 15px;
     border-radius: 50px;
     border: 1px solid #ADADAD;
-    font-size: clamp(0.85em, 1.042vw, 1.25em);
+    font-size: clamp(1em, 1.242vw, 1.45em);
     margin-bottom: 20px;
 }
 
@@ -481,6 +483,17 @@ p {
     .footer-menu-container {
         padding: 0px 15px;
     }
+
+    .contact-form input {
+        border: none;
+        transition: all 0.3s ease-in-out;
+        outline: none;
+        padding: 25px 40px;
+        border-radius: 50px;
+        border: 1px solid #ADADAD;
+        font-size: clamp(0.85em, 1.042vw, 1.25em);
+        margin-bottom: 20px;
+    }
 }
 
 /* Large devices (≥992px) - lg */

resources/views/contact.antlers.html

@@ -1,9 +1,12 @@
 <section class="contact-section">
-    <div class="row">
-        <div class="col-12 col-md-6 py-5 px-6 bg-white">
+    <div class="row m-0">
+        <div class="col-12 col-md-6 d-block d-md-none bg-contact">
+            <!-- Image -->
+        </div>
+        <div class="col-12 col-md-6 py-5 px-5 bg-white">
             
-            <form class="contact-form bg-secondary-subtle rounded-5 p-5 my-1">
-                <h3 style="margin-bottom: 70px;">Fill in your information</h3>
+            <form class="contact-form bg-secondary-subtle rounded-5 py-5 px-3 px-md-5 my-1">
+                <h3 class="text-center text-md-start" style="margin-bottom: 70px;">Fill in your information</h3>
                 <div class="d-flex flex-column" style="margin-bottom: 10px;">
                     <input type="text" placeholder="Your name">
                     <input type="email" placeholder="Your email">
@@ -11,8 +14,8 @@
                     <input type="text" placeholder="Company name">
                 </div>
                 <div class="container-fluid p-0 d-flex flex-column flex-md-row justify-content-center justify-content-md-between px-5" style="margin-bottom: 40px;">
-                    <p class="p-small fw-bold"> Follow us now:</p>
-                    <div class="d-flex flex-row" style="gap: 20px;">
+                    <p class="p-small fw-bold text-center text-md-start"> Follow us now:</p>
+                    <div class="d-flex flex-row justify-content-center justify-content-md-start" style="gap: 20px;">
                         <i class="bi bi-telephone-fill text-dark" style="font-size: 20px;"></i>
                         <i class="bi bi-whatsapp text-dark" style="font-size: 20px;"></i>
                         <i class="bi bi-envelope text-dark" style="font-size: 22px;"></i>
@@ -22,7 +25,7 @@
             </form>
             
         </div>
-        <div class="col-12 col-md-6 bg-contact">
+        <div class="col-12 col-md-6 d-none d-md-block bg-contact">
             <!-- Image -->
         </div>
     </div>