Fix: Resolve responsive layout issues on contact page

views/contactPages/contactMain.css

@@ -35,10 +35,7 @@ a:active {
 
 /* Contact Section */
 .contact-section {
-  padding: 60px 5%;
   background-color: #f9f9f9;
-  max-width: 1400px;
-  margin: 0 auto;
 }
 
 .page-intro {
@@ -60,19 +57,18 @@ a:active {
 }
 
 .contact-container {
-  display: flex;
-  gap: 40px;
   margin-top: 30px;
 }
 
 /* Enhanced Form Container */
 .contact-form {
-  flex: 1;
   background-color: white;
   padding: 35px;
   border-radius: 12px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
   position: relative;
   overflow: hidden;
 }
@@ -303,7 +299,9 @@ a:active {
   border-radius: 50%;
   transform: scale(0);
   opacity: 0;
-  transition: transform 0.6s, opacity 0.6s;
+  transition:
+    transform 0.6s,
+    opacity 0.6s;
 }
 
 .submit-button:hover::after {
@@ -313,14 +311,17 @@ a:active {
 
 /* Contact Details Section */
 .contact-details {
-  flex: 1;
   background-color: white;
   padding: 35px;
   border-radius: 12px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
   position: relative;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .contact-details::before {
@@ -380,7 +381,9 @@ a:active {
   color: #30875f;
   margin-right: 15px;
   margin-top: 3px;
-  transition: color 0.3s, transform 0.3s;
+  transition:
+    color 0.3s,
+    transform 0.3s;
 }
 
 .contact-item:hover i {
@@ -428,8 +431,18 @@ a:active {
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
   position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.map-container iframe {
+  flex-grow: 1;
+  height: 100% !important;
+  min-height: 250px;
 }
 
 .map-container:hover {
@@ -488,7 +501,8 @@ a:active {
 /* Responsive Design */
 @media (max-width: 1200px) {
   .contact-section {
-    padding: 50px 4%;
+    padding-top: 50px;
+    padding-bottom: 50px;
   }
 
   .contact-form,
@@ -514,13 +528,8 @@ a:active {
 }
 
 @media (max-width: 768px) {
-  .contact-container {
-    flex-direction: column;
-  }
-
   .contact-form,
   .contact-details {
-    width: 100%;
     padding: 25px;
   }
 
@@ -557,7 +566,8 @@ a:active {
 
 @media (max-width: 576px) {
   .contact-section {
-    padding: 40px 15px;
+    padding-top: 40px;
+    padding-bottom: 40px;
   }
 
   .page-intro {