Merge pull request #3855 from rahulbamnuya/m2

Improve ui of conatct address and text allignmnet of map

assets/css/style.css

@@ -1784,14 +1784,31 @@ body.dark-mode .pricing-card button {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
+.contact-container {
+  background-color:var(--white);
+  display: flex;
+  justify-content: space-between; /* Ensures the contact details and map are at the left and right ends */
+  align-items: flex-start; /* Aligns the content vertically at the top */
+  flex-wrap: wrap; /* Allows wrapping on smaller screens */
+}
+
+.flex-container {
+  flex: 1; /* Takes up the left side space */
+  margin-right: 20px; /* Adds space between the contact details and map */
+  padding-top:50px;
+  padding-left:40px;
+}
+
 .map-container {
   width: 100%;
-  max-width: 400px;
-  aspect-ratio: 1;
+  max-width: 400px; /* Keeps the map responsive */
+  aspect-ratio: 1; /* Ensures a square aspect ratio */
   margin: 20px 0;
   overflow: hidden;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  flex-shrink: 0; /* Prevents shrinking of the map */
+  border:2px solid #c36969;
 }
 
 .map-container iframe {

index.html

@@ -5138,32 +5138,42 @@ <h3 style="text-align: center; color: #4f1316;">GET IN TOUCH</h3>
     <!-- Contact Information Section -->
  <div class="contact">
       <div class="contact-container">
-        <ul class="flex-container">
-          <li>
-            <p class="card-title address-title">
-              <lord-icon class="invert-col" src="https://cdn.lordicon.com/iikoxwld.json" trigger="hover" colors="primary:#000000" style="width:25px;height:25px"></lord-icon>
-              Address:
-            </p>
-            <address class="address">
+        <ul class="flex-container" style="list-style-type: none; ">
+          <li style="margin-bottom: 30px;">
+            <div style="display: flex; align-items: center;">
+              <lord-icon class="invert-col" src="https://cdn.lordicon.com/iikoxwld.json" trigger="hover"
+                colors="primary:#000000" style="width:25px;height:25px;margin-right:10px;"></lord-icon>
+              <p class="card-title address-title" id="ad"style="margin: 0; font-weight: bold;">
+                Address:
+              </p>
+            </div>
+            <address class="address" style="margin-left: 35px;">
               12, Nayabad<br>
               Kolkata, India 700054
             </address>
           </li>
-          <li>
-            <p class="card-title phone-title">
-              <lord-icon class="invert-col" src="https://cdn.lordicon.com/srsgifqc.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
-              Phone:
-            </p>
-            <a href="tel:9124421980" class="card-link">+91 9124421980</a>
+          <li style="margin-bottom: 20px;">
+            <div style="display: flex; align-items: center;">
+              <lord-icon class="invert-col" src="https://cdn.lordicon.com/srsgifqc.json" trigger="hover"
+                style="width:20px;height:20px;margin-right:10px;"></lord-icon>
+              <p class="card-title phone-title" style="margin: 0; font-weight: bold;">
+                Phone:
+              </p>
+            </div>
+            <a href="tel:9124421980" class="card-link" style="margin-left: 35px;">+91 9124421980</a>
           </li>
-          <li>
-            <p class="card-title email-title">
-              <lord-icon class="invert-col" src="https://cdn.lordicon.com/xtzvywzp.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
-              Email:
-            </p>
-            <a href="mailto:[email protected]" class="card-link">[email protected]</a>
+          <li style="margin-bottom: 20px;">
+            <div style="display: flex; align-items: center;">
+              <lord-icon class="invert-col" src="https://cdn.lordicon.com/xtzvywzp.json" trigger="hover"
+                style="width:20px;height:20px;margin-right:10px;"></lord-icon>
+              <p class="card-title email-title" style="margin: 0; font-weight: bold;">
+                Email:
+              </p>
+            </div>
+            <a href="mailto:[email protected]" class="card-link" style="margin-left: 35px;">[email protected]</a>
           </li>
         </ul>
+
         <!-- Map Container -->
         <div class="map-container">
           <iframe