Google map integration and enhancement of contact us section under Se…

…rvices Tab

dex.html

@@ -51,6 +51,90 @@
         background-color: #3fbcc0;
         z-index: 9999;
       }
+      .contact__container {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        padding-top: 50px;
+        text-align: left;
+      }
+
+      .contact__content {
+        flex: 1;
+      max-width: 45%;
+      display: flex;
+      flex-direction: column;
+      padding-left: 20px;
+      gap: 1rem;
+      padding-left: 100px;
+      color: white;
+      }
+
+      .contact__heading {
+        text-align: left;
+        margin-bottom: 0.5rem; /* Reduce space below heading */
+      }
+
+      .section__title-center {
+        padding-left: 10px;
+      }
+
+      .contact__description {
+        text-align: left;
+        margin-bottom: 1rem; /* Space below description */
+      }
+
+      .contact__map {
+        flex: 1;
+        max-width: 45%;
+        margin-left: 10px;
+      }
+
+      .contact__address {
+        display: flex;
+      align-items: center;
+      gap: 10px;
+      margin: 10px 0;
+      color: white;
+      }
+
+      .contact__information {
+        font-weight: bold;
+        color: white;
+      }
+
+      .button {
+        display: inline-block;
+        margin-top: 20px;
+        padding: 10px 20px;
+        background-color: #007bff;
+        color: white;
+        text-decoration: none;
+        border-radius: 5px;
+        text-align: center;
+      }
+
+      .button:hover {
+        background-color: #0056b3;
+      }
+
+      @media (max-width: 768px) {
+        .contact__container {
+          flex-direction: column;
+          align-items: center;
+        }
+
+        .contact__content,
+        .contact__map {
+          max-width: 100%;
+        }
+
+        .contact__map {
+          margin-left: 0;
+          margin-top: 20px;
+        }
+      }
     </style>
   <script type="text/javascript">
     (function () {
@@ -275,30 +359,29 @@ <h2 class="section__title-center">
 
       <!--=============== CONTACT US ===============-->
       <section class="contact section container" id="contact">
-        <div class="contact__container grid">
+        <div class="contact__container">
           <div class="contact__content">
             <h2 class="section__title-center">
-              Contact Us From <br />
-              Here
+              Contact Us From Here
             </h2>
             <p class="contact__description">
               You can contact us from here, you can write to us, call us or
               visit our service center, we will gladly assist you.
             </p>
+            <div class="contact__address">
+              <i class="fa-solid fa-envelope"></i>
+              <p>Email: <span class="contact__information">[email protected]</span></p>
+            </div>
+            <div class="contact__address">
+              <i class="fa-solid fa-map"></i>
+              <p>Location: <span class="contact__information">New Delhi</span></p>
+            </div>
+            <div class="container">
+              <a href="index.html#contact" class="button">Contact Us</a>
+            </div>
           </div>
-
-          <ul class="contact__content grid">
-            <li class="contact__address">
-              Email:
-              <span class="contact__information">[email protected]</span>
-            </li>
-            <li class="contact__address">
-              Location: <span class="contact__information">New Delhi</span>
-            </li>
-          </ul>
-
-          <div class="contact__content">
-            <a href="index.html#contact" class="button">Contact Us</a>
+          <div class="contact__map">
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8343092661703!2d77.22972667550205!3d28.66467942564711!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1720370841354!5m2!1sen!2sin" width="400" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
           </div>
         </div>
       </section>