From 5a7fc71e648a9dfafdf116b1d0bfe1c3c43e2ca2 Mon Sep 17 00:00:00 2001
From: Khawaja Fashi Ud Din Abdullah <khawajafashi9623@gmail.com>
Date: Mon, 14 Oct 2024 12:18:44 +0500
Subject: [PATCH 01/14] Ui change

---
 index.html            | 747 +++++++++++++++++++-----------------------
 src/css/indexmain.css |  13 +-
 2 files changed, 351 insertions(+), 409 deletions(-)

diff --git a/index.html b/index.html
index fad2fc0..71ac9c0 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,6 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
 
   <style>
-<<<<<<< HEAD
     /* .logo span {
             font-size: 28px;
             font-weight: bold;
@@ -25,48 +24,61 @@
             text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
             font-family: 'Arial', sans-serif;
         } */
-=======
-      .chatbot-container {
-        position: fixed;
-        transition: right 0.3s ease;
-        bottom: 20px; /* Adjust as needed */
-        left: 90px; /* Adjust as needed */
-        z-index: 1000; /* Ensure it appears above other elements */
-      }
+    .chatbot-container {
+      position: fixed;
+      transition: right 0.3s ease;
+      bottom: 20px;
+      /* Adjust as needed */
+      left: 90px;
+      /* Adjust as needed */
+      z-index: 1000;
+      /* Ensure it appears above other elements */
+    }
 
-      .chatbot-button {
-        background-color: #007bff;
-        border: none;
-        border-radius: 50%;
-        padding: 10px; /* Smaller padding */
-        cursor: pointer;
-        position: relative;
-        width: 50px; /* Adjusted size */
-        height: 50px; /* Adjusted size */
-      }
+    .chatbot-button {
+      background-color: #007bff;
+      border: none;
+      border-radius: 50%;
+      padding: 10px;
+      /* Smaller padding */
+      cursor: pointer;
+      position: relative;
+      width: 50px;
+      /* Adjusted size */
+      height: 50px;
+      /* Adjusted size */
+    }
 
-      .chatbot-button img {
-        width: 30px; /* Adjusted image size */
-        height: 30px; /* Adjusted image size */
-      }
+    .chatbot-button img {
+      width: 30px;
+      /* Adjusted image size */
+      height: 30px;
+      /* Adjusted image size */
+    }
 
-      .tooltip-text {
-            display: none; /* Hide by default */
-            position: absolute;
-            bottom: 100%; /* Position above the button */
-            right: 50%;
-            transform: translateX(50%);
-            background-color: #333; /* Background color for tooltip */
-            color: #fff; /* Tooltip text color */
-            padding: 5px;
-            border-radius: 5px;
-            white-space: nowrap; /* Prevent text from wrapping */
-        }
+    .tooltip-text {
+      display: none;
+      /* Hide by default */
+      position: absolute;
+      bottom: 100%;
+      /* Position above the button */
+      right: 50%;
+      transform: translateX(50%);
+      background-color: #333;
+      /* Background color for tooltip */
+      color: #fff;
+      /* Tooltip text color */
+      padding: 5px;
+      border-radius: 5px;
+      white-space: nowrap;
+      /* Prevent text from wrapping */
+    }
+
+    .chatbot-button:hover .tooltip-text {
+      display: block;
+      /* Show on hover */
+    }
 
-      .chatbot-button:hover .tooltip-text {
-        display: block; /* Show on hover */
-      }
->>>>>>> upstream/main
     body {
       font-family: Arial, sans-serif;
       background-color: #f4f4f4;
@@ -212,9 +224,8 @@
       to {
         opacity: 1;
       }
+    }
 
-<<<<<<< HEAD
-=======
     /* Logo Animation */
     @keyframes logoAnimation {
       0% {
@@ -278,21 +289,24 @@
       /* Change the color of letters in this class to red */
     }
 
-    .logo a{
+    .logo a {
       text-decoration: none;
-   }
-   .logo img:hover{
-    background-color: white;
-   }
-   .container{
-    width: 98vw;
-  
-   }
-
-   #contact-hvr:hover{
-    background: none;
-   }
-   .circle {
+    }
+
+    .logo img:hover {
+      background-color: white;
+    }
+
+    .container {
+      width: 98vw;
+
+    }
+
+    #contact-hvr:hover {
+      background: none;
+    }
+
+    .circle {
       position: absolute;
       width: 25px;
       height: 25px;
@@ -301,6 +315,7 @@
       background: radial-gradient(circle, rgba(71, 240, 255, 0.3), rgba(0, 119, 255, 0.3));
       transition: transform 0.1s, left 0.1s, top 0.1s;
     }
+
     .circle-container {
       position: fixed;
       top: 0;
@@ -312,108 +327,98 @@
     }
 
     /* faq section styles */
-    .faq-section{
+    .faq-section {
       background-color: #e7f3fe;
-
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-
+      width: 96%;
     }
 
-    .faq-h2{
+    .faq-h2 {
+      color: #2c3e50;
       margin-bottom: 1.5rem;
       font-size: 2.5rem;
       font-weight: 600;
     }
 
-    .faqs{
+    .faqs {
       width: 100%;
     }
 
     .faq {
-    margin-bottom: 15px;
-    width: 100%; /* Full width by default */
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 10px;
-    overflow: hidden;
-    }
-
-   .faq-question {
-    background-color: #e7ffe7;
-    color: #333;
-    padding: 10px;
-    width: 100%;
-    text-align: left;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    font-size: 16px;
-    font-weight: 600;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+      margin-bottom: 15px;
+      width: 100%;
+      /* Full width by default */
+      background-color: #fff;
+      border: 1px solid #ccc;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+    .faq-question {
+      background-color: #e7ffe7;
+      color: #333;
+      padding: 10px;
+      width: 100%;
+      text-align: left;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: 600;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
 
     .faq-question::after {
-    content: '';
-    display: inline-block;
-    width: 0;
-    height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-top: 8px solid #333; /* Downward pointing wide "V" */
-    transition: transform 0.3s ease;
+      content: '';
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 8px solid #333;
+      /* Downward pointing wide "V" */
+      transition: transform 0.3s ease;
 
-    margin-right: 10px;
+      margin-right: 10px;
     }
 
     .faq.active .faq-question::after {
-    border-top: none;
-    border-bottom: 8px solid #333; /* Upward pointing wide "V" */
+      border-top: none;
+      border-bottom: 8px solid #333;
+      /* Upward pointing wide "V" */
     }
 
     .faq-answer {
-    max-height: 0; /* Initially hidden */
-    overflow: hidden; /* Hide content when not visible */
-    padding: 0 10px;
-    background-color: #fff;
-    transition: max-height 0.3s ease; /* Smooth transition */
-    border-top: 1px solid #ccc;
+      max-height: 0;
+      /* Initially hidden */
+      overflow: hidden;
+      /* Hide content when not visible */
+      padding: 0 10px;
+      background-color: #fff;
+      transition: max-height 0.3s ease;
+      /* Smooth transition */
+      border-top: 1px solid #ccc;
     }
 
     .faq-answer p {
-    margin-bottom: 10px;
+      margin-bottom: 10px;
     }
 
-   .faq.active .faq-answer {
-    max-height: 200px; /* Set to a sufficient height to display content */
-    padding: 10px; /* Adds padding when expanded */
-   }
+    .faq.active .faq-answer {
+      max-height: 200px;
+      /* Set to a sufficient height to display content */
+      padding: 10px;
+      /* Adds padding when expanded */
+    }
 
     /* Back to Top Button Styles */
-    #backToTopBtn {
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      z-index: 1000;
-      background-color: #e81a1a;
-      color: white;
-      border: none;
-      border-radius: 5px;
-      padding: 10px 15px;
-      font-size: 16px;
-      cursor: pointer;
-      display: none; /* Hidden by default */
-      transition: opacity 0.3s, visibility 0.3s;
-    }
 
-    #backToTopBtn:hover {
-      background-color: #c91515;
-    }
     .circle {
       position: absolute;
       width: 25px;
@@ -423,6 +428,7 @@
       background: radial-gradient(circle, rgba(71, 252, 255, 0.3), rgba(0, 157, 255, 0.3));
       transition: transform 0.1s, left 0.1s, top 0.1s;
     }
+
     .circle-container {
       position: fixed;
       top: 0;
@@ -431,62 +437,68 @@
       height: 100%;
       pointer-events: none;
       z-index: 9999;
-    .light-dark-btn{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding:10px 12px;
-      border-radius: 50%;
-      margin-left: 5px;
-      box-shadow: 0 0 5px rgb(0, 0, 0);
-      font-size: 15px;
     }
 
-    #logo img:hover{
+
+
+    #logo img:hover {
       background-color: #c4d7ff;
->>>>>>> upstream/main
     }
 
     .chatbot-container {
-        position: fixed;
-        transition: right 0.3s ease;
-        bottom: 20px; /* Adjust as needed */
-        left: 90px; /* Adjust as needed */
-        z-index: 1000; /* Ensure it appears above other elements */
-      }
+      position: fixed;
+      transition: right 0.3s ease;
+      bottom: 20px;
+      /* Adjust as needed */
+      left: 90px;
+      /* Adjust as needed */
+      z-index: 1000;
+      /* Ensure it appears above other elements */
+    }
 
-      .chatbot-button {
-        background-color: #007bff;
-        border: none;
-        border-radius: 50%;
-        padding: 10px; /* Smaller padding */
-        cursor: pointer;
-        position: relative;
-        width: 50px; /* Adjusted size */
-        height: 50px; /* Adjusted size */
-      }
+    .chatbot-button {
+      background-color: #007bff;
+      border: none;
+      border-radius: 50%;
+      padding: 10px;
+      /* Smaller padding */
+      cursor: pointer;
+      position: relative;
+      width: 50px;
+      /* Adjusted size */
+      height: 50px;
+      /* Adjusted size */
+    }
 
-      .chatbot-button img {
-        width: 30px; /* Adjusted image size */
-        height: 30px; /* Adjusted image size */
-      }
+    .chatbot-button img {
+      width: 30px;
+      /* Adjusted image size */
+      height: 30px;
+      /* Adjusted image size */
+    }
 
-      .tooltip-text {
-            display: none; /* Hide by default */
-            position: absolute;
-            bottom: 100%; /* Position above the button */
-            right: 50%;
-            transform: translateX(50%);
-            background-color: #333; /* Background color for tooltip */
-            color: #fff; /* Tooltip text color */
-            padding: 5px;
-            border-radius: 5px;
-            white-space: nowrap; /* Prevent text from wrapping */
-        }
+    .tooltip-text {
+      display: none;
+      /* Hide by default */
+      position: absolute;
+      bottom: 100%;
+      /* Position above the button */
+      right: 50%;
+      transform: translateX(50%);
+      background-color: #333;
+      /* Background color for tooltip */
+      color: #fff;
+      /* Tooltip text color */
+      padding: 5px;
+      border-radius: 5px;
+      white-space: nowrap;
+      /* Prevent text from wrapping */
+    }
 
-      .chatbot-button:hover .tooltip-text {
-        display: block; /* Show on hover */
-      }
+    .chatbot-button:hover .tooltip-text {
+      display: block;
+      /* Show on hover */
+    }
   </style>
 </head>
 
@@ -511,8 +523,6 @@
       </div>
       <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 80px; height: auto" />
     </div>
-
-<<<<<<< HEAD
     <nav class="menu">
       <ul>
         <li>
@@ -569,10 +579,6 @@ <h2 data-link_h2="AmbuFlow...">AmbuFlow...</h2>
   </div>
   <div class="content" id="grid-content">
     <h1>Welcome to the Ambulance Monitoring System</h1>
-=======
-  <div class="content" id="main-content" >
-    <h1 style="padding-top: 2rem; padding-bottom: 1rem;">Welcome to the Ambulance Monitoring System</h1>
->>>>>>> upstream/main
     <div class="grid">
       <div class="feature">
         <img src="images/emergency-w.jpg" alt="Emergency Response" />
@@ -644,9 +650,7 @@ <h2>Contact Us</h2>
     </div>
   </div>
 
-<<<<<<< HEAD
-  <footer style="color: #f3f4f6; text-align: center; width: 100%;">
-=======
+
 
   <!-- FAQ Section in Full Row -->
 
@@ -660,51 +664,59 @@ <h2>Contact Us</h2>
       <div class="faq">
         <button class="faq-question">What should I do while waiting for the ambulance?</button>
         <div class="faq-answer">
-            <p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
+          <p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If
+            possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
         </div>
-     </div>
+      </div>
       <div class="faq">
         <button class="faq-question">How do I track an ambulance in real-time?</button>
         <div class="faq-answer">
-            <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the live map feature.</p>
+          <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
+            live map feature.</p>
         </div>
-     </div>
+      </div>
       <div class="faq">
         <button class="faq-question">What are the emergency protocols if an ambulance is delayed?</button>
         <div class="faq-answer">
-            <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay, please contact emergency services for further instructions.</p>
+          <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
+            please contact emergency services for further instructions.</p>
         </div>
-     </div>
+      </div>
       <div class="faq">
         <button class="faq-question">Can I provide medical information for the patient in advance?</button>
         <div class="faq-answer">
-            <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for the situation.</p>
+          <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
+            the situation.</p>
         </div>
-     </div>
+      </div>
       <div class="faq">
         <button class="faq-question">Are there any charges for using the ambulance tracking service?</button>
         <div class="faq-answer">
-            <p>The ambulance tracking service is free of charge, but regular ambulance service fees may apply depending on the provider.</p>
+          <p>The ambulance tracking service is free of charge, but regular ambulance service fees may apply depending
+            on the provider.</p>
         </div>
-     </div>
+      </div>
       <div class="faq">
-        <button class="faq-question">How can I request special medical equipment or personnel on the ambulance?</button>
+        <button class="faq-question">How can I request special medical equipment or personnel on the
+          ambulance?</button>
         <div class="faq-answer">
-            <p>During your request, you can specify if the patient needs specific medical equipment or personnel, such as a ventilator or a specialized doctor.</p>
+          <p>During your request, you can specify if the patient needs specific medical equipment or personnel, such
+            as a ventilator or a specialized doctor.</p>
         </div>
-     </div>
+      </div>
       <div class="faq">
         <button class="faq-question">What should I do if the location of the ambulance is not updating?</button>
         <div class="faq-answer">
-            <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a technical issue through the system or contact support.</p>
+          <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
+            technical issue through the system or contact support.</p>
         </div>
-     </div>
+      </div>
       <div class="faq">
         <button class="faq-question">Can I schedule an ambulance in advance?</button>
         <div class="faq-answer">
-            <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
+          <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
         </div>
-     </div>
+      </div>
 
 
     </div>
@@ -713,241 +725,172 @@ <h2>Contact Us</h2>
   <!-- FAQ section ends here -->
 
 
- 
+
   <footer style="margin-top: 1.5rem; border-radius: 10px; color: #f3f4f6; text-align: center; width: 100%;">
->>>>>>> upstream/main
-    <div style="background-color: #C4D7FF; color: #f3f4f6; ">
-      <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
-
-        <!-- Quick Links Section -->
-<<<<<<< HEAD
-        <div style="flex: 1; 
-          display: flex;
-          flex-direction: column; 
-          align-items: start; 
-          min-width: 200px; 
-          margin-bottom: 20px;">
-=======
-        <div 
-        style="flex: 1; 
-        display: flex;
-        flex-direction: column; 
-        align-items: start; 
-        min-width: 200px; 
-        margin-bottom: 20px;
-        padding-left: 20px;">
->>>>>>> upstream/main
+    <div
+      style="background-color: #C4D7FF;display: flex;color: #f3f4f6;justify-content: space-evenly;position: relative;left: 2.5rem;">
+
+      <!-- Quick Links Section -->
+      <div>
+        <ul style="list-style-type: none; padding: 0;">
           <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
-          <ul style="list-style-type: none; padding: 0;">
-            <li><a href="about.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
-                onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li>
-            <li><a href="contact.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
-                onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li>
-            <li><a href="privacy.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
-                onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li>
-            <li><a href="terms.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
-                onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a></li>
-            <li><a href="sitemap.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;"
-                onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li>
-            <!-- Add FAQ link here -->
-            <li><a href="faq.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;"
-                onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">FAQ</a></li>
-          </ul>
-        </div>
+          <li><a href="about.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
+              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li>
+          <li><a href="contact.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
+              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li>
+          <li><a href="privacy.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
+              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li>
+          <li><a href="terms.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
+              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a>
+          </li>
+          <li><a href="sitemap.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;"
+              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li>
+          <!-- Add FAQ link here -->
+          <li><a href="faq.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;"
+              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">FAQ</a></li>
+        </ul>
+      </div>
 
-        <!-- Contact Information Section -->
-        <div style="flex: 1; 
+      <!-- Contact Information Section -->
+      <div style="flex: 1; 
           min-width: 200px; 
           margin-bottom: 10px;">
-          <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
-          <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
-          <a href="mailto:emergency@ambulanceservice.in" style="color: #000000; background:none; cursor: pointer;"
-            onmouseover="this.style.color='blue'"
-            onmouseout="this.style.color='black'">emergency@ambulanceservice.in</a>
-          </p>
-          <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000; background: none;"
-              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">+91-911-1234567</a></p>
-        </div>
-
-        <!-- Modified the looks of the social icons -->
-        <!-- Social Media Links -->
-        <div style="text-align: center; min-width: 200px; color: black;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-          <div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
-            <a href="https://www.facebook.com" class="social-icon facebook no-hover-effect"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
-            <a href="https://www.twitter.com" class="social-icon twitter no-hover-effect"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fa-brands fa-x-twitter"></i></a>
-            <a href="https://www.instagram.com" class="social-icon instagram no-hover-effect"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-instagram"></i></a>
-            <a href="https://www.linkedin.com" class="social-icon linkedin no-hover-effect"
-              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
-          </div>
-        </div>
+        <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
+        <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
+        <a href="mailto:emergency@ambulanceservice.in" style="color: #000000; background:none; cursor: pointer;"
+          onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">emergency@ambulanceservice.in</a>
+        </p>
+        <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000; background: none;"
+            onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">+91-911-1234567</a></p>
+      </div>
 
-        <!-- Newsletter Subscription -->
-        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
-          <form action="#">
-            <input type="email" placeholder="Your Email"
-              style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
-            <button type="submit"
-              style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
-          </form>
+      <!-- Modified the looks of the social icons -->
+      <!-- Social Media Links -->
+      <div style="text-align: center; min-width: 200px; color: black;">
+        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
+        <div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
+          <a href="https://www.facebook.com" class="social-icon facebook no-hover-effect"
+            style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
+          <a href="https://www.twitter.com" class="social-icon twitter no-hover-effect"
+            style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fa-brands fa-x-twitter"></i></a>
+          <a href="https://www.instagram.com" class="social-icon instagram no-hover-effect"
+            style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-instagram"></i></a>
+          <a href="https://www.linkedin.com" class="social-icon linkedin no-hover-effect"
+            style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
         </div>
-        <style>
-          .hover-link {
-            color: #000000;
-            text-decoration: none;
-            margin-right: 10px;
-            background: none;
-            cursor: pointer;
-            transition: color 0.3s ease;
-          }
-
-          .hover-link:hover {
-            color: blue;
-            background: none;
-          }
-        </style>
-
       </div>
 
-    </div>
-    <hr>
-    <!-- Copyright Section -->
-<<<<<<< HEAD
-    <div
-      style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;">
-      <strong>
-        <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
-      </strong>
+      <!-- Newsletter Subscription -->
+      <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
+        <form action="#">
+          <input type="email" placeholder="Your Email"
+            style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
+          <button type="submit"
+            style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
+        </form>
+      </div>
     </div>
   </footer>
-  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
-  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-  <script src="script.js"></script>
+  <!-- <hr> -->
+  <div
+    style="background-color: #C4D7FF; color: #000000;border-top: 1px solid #333; display: flex; justify-content: center; align-items: center; padding: 10px 20px;">
+    <strong>
+      <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
+    </strong>
+  </div>
 </body>
+<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+<script src="script.js"></script>
+<script src="preloader.js"></script>
 
-=======
-    <div style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: center; align-items: center; padding: 10px 20px;">
-      <strong><p>&copy; 2024 AmbuFlow. All rights reserved.</p></strong>
-      
-      <!-- Back to Top Button -->
-      <button id="backToTopBtn" style="
-        background-color: #e81a1a;
-        color: white;
-        border: none;
-        border-radius: 5px;
-        padding: 10px 15px;
-        font-size: 16px;
-        cursor: pointer;
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        z-index: 99;
-
-      ">↑</button>
-    </div>
-  </footer>
-  <script src="preloader.js"></script>
-
-  <script>
-    // Back to Top Button functionality
-    document.addEventListener('DOMContentLoaded', function() {
-      var backToTopBtn = document.getElementById("backToTopBtn");
-
-      // Show/hide button based on scroll position
-      window.addEventListener('scroll', function() {
-        if (window.pageYOffset > 300) { // Show button after scrolling down 300px
-          backToTopBtn.style.display = "block";
-        } else {
-          backToTopBtn.style.display = "none";
-        }
-      });
-
-      // Smooth scroll to top when button is clicked
-      backToTopBtn.addEventListener('click', function(e) {
-        e.preventDefault();
-        window.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-        });
-      });
+<script>
+  // Back to Top Button functionality
+  document.addEventListener('DOMContentLoaded', function () {
+    var backToTopBtn = document.getElementById("backToTopBtn");
+
+    // Show/hide button based on scroll position
+    window.addEventListener('scroll', function () {
+      if (window.pageYOffset > 300) { // Show button after scrolling down 300px
+        backToTopBtn.style.display = "block";
+      } else {
+        backToTopBtn.style.display = "none";
+      }
     });
-  </script>
-  <script>
-    function changeContent(page) {
-      var links = document.querySelectorAll(".menu ul li a");
-      links.forEach((link) => link.classList.remove("active"));
-      document.getElementById(page + "-link").classList.add("active");
-    }
-
-    window.onload = function () {
-      document.getElementById("home-link").classList.add("active");
 
-      // Add delay to each letter drop
-      const letters = document.querySelectorAll('.letter');
-      letters.forEach((letter, index) => {
-        letter.style.animationDelay = `${index * 0.1}s`;
+    // Smooth scroll to top when button is clicked
+    backToTopBtn.addEventListener('click', function (e) {
+      e.preventDefault();
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
       });
-    };
+    });
+  });
+</script>
+<script>
+  function changeContent(page) {
+    var links = document.querySelectorAll(".menu ul li a");
+    links.forEach((link) => link.classList.remove("active"));
+    document.getElementById(page + "-link").classList.add("active");
+  }
+
+  window.onload = function () {
+    document.getElementById("home-link").classList.add("active");
+
+    // Add delay to each letter drop
+    const letters = document.querySelectorAll('.letter');
+    letters.forEach((letter, index) => {
+      letter.style.animationDelay = `${index * 0.1}s`;
+    });
+  };
 
-    const thankYouMessage = document.getElementById("thankYouMessage");
-    const form = document.getElementById("subscribeForm");
+  const thankYouMessage = document.getElementById("thankYouMessage");
+  const form = document.getElementById("subscribeForm");
 
-    form.addEventListener("submit", function (event) {
-      event.preventDefault(); // Prevent form from refreshing the page
+  form.addEventListener("submit", function (event) {
+    event.preventDefault(); // Prevent form from refreshing the page
 
-      // Show Thank You Message after subscribing
-      thankYouMessage.style.display = 'block';
+    // Show Thank You Message after subscribing
+    thankYouMessage.style.display = 'block';
 
-      // Optionally clear the input field after subscribing
-      document.getElementById("emailInput").value = '';
-    });
+    // Optionally clear the input field after subscribing
+    document.getElementById("emailInput").value = '';
+  });
 
-  </script>
+</script>
 <script>
   // Back to Top Button functionality
-    document.addEventListener('DOMContentLoaded', function() {
-      var backToTopBtn = document.getElementById("backToTopBtn");
-
-      backToTopBtn.addEventListener('click', function() {
-        window.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-        });
-      });
-    });
 
-    form.addEventListener("submit", function(event) {
-      event.preventDefault();
-      thankYouMessage.style.display = 'block';
-      document.getElementById("emailInput").value = '';
-    });
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    thankYouMessage.style.display = 'block';
+    document.getElementById("emailInput").value = '';
+  });
 </script>
 
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-  const faqButtons = document.querySelectorAll('.faq-question');
-
-  faqButtons.forEach(button => {
-      button.addEventListener('click', function() {
-          const faq = button.parentElement;
-          const answer = faq.querySelector('.faq-answer');
-
-          // Toggle active class
-          faq.classList.toggle('active');
-
-          // Control the max-height for slide effect
-          if (faq.classList.contains('active')) {
-              answer.style.maxHeight = answer.scrollHeight + 'px'; // Set the height based on content
-          } else {
-              answer.style.maxHeight = null; // Remove max-height to hide
-          }
+  document.addEventListener('DOMContentLoaded', function () {
+    const faqButtons = document.querySelectorAll('.faq-question');
+
+    faqButtons.forEach(button => {
+      button.addEventListener('click', function () {
+        const faq = button.parentElement;
+        const answer = faq.querySelector('.faq-answer');
+
+        // Toggle active class
+        faq.classList.toggle('active');
+
+        // Control the max-height for slide effect
+        if (faq.classList.contains('active')) {
+          answer.style.maxHeight = answer.scrollHeight + 'px'; // Set the height based on content
+        } else {
+          answer.style.maxHeight = null; // Remove max-height to hide
+        }
       });
-  });
+    });
   });
 
 
@@ -1005,5 +948,5 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
 </a>
 
 </body>
->>>>>>> upstream/main
+
 </html>
\ No newline at end of file
diff --git a/src/css/indexmain.css b/src/css/indexmain.css
index c362a44..0af799e 100644
--- a/src/css/indexmain.css
+++ b/src/css/indexmain.css
@@ -288,12 +288,6 @@ body {
     background-color: #000;
 }
 
-.menu_links.active:before {
-    color: white;
-    background-color: #000;
-}
-
-
 .main_content {
     display: flex;
     justify-content: space-between;
@@ -446,7 +440,12 @@ footer {
     padding: 15px 0;
     width: 100%;
 }
-
+footer div{
+    margin-right: 1rem;
+}
+hr{
+    
+}
 .subtext {
     font-size: 1.2rem;
     color: #1d4ed8;

From 6444ef953ddf44377ef1e2457895a69463776b79 Mon Sep 17 00:00:00 2001
From: abhishek goyal <goyalabhi2005@gmail.com>
Date: Tue, 15 Oct 2024 00:06:32 +0530
Subject: [PATCH 02/14] removed the unwanted text on feedback page,

i removed the unwanted text present on the bottom of the feedback page, also changed the java script code as it show me 9+ error in it.
also i added the backtotop button in it and make it functional
---
 Feedback.html | 285 +++++++++++++++-----------------------------------
 1 file changed, 83 insertions(+), 202 deletions(-)

diff --git a/Feedback.html b/Feedback.html
index 147bc8a..edef73e 100644
--- a/Feedback.html
+++ b/Feedback.html
@@ -713,13 +713,12 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
       ">↑</button>
     </div>
   </footer>
-
-  <!-- FAQ Popup Button -->
-  <button id="faqButton"
+<!-- FAQ Popup Button -->
+<button id="faqButton"
     style="position: fixed; bottom: 20px; right: 80px; z-index: 1000; background-color: #2980b9; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; display: none;">FAQ</button>
 
-  <!-- FAQ Popup -->
-  <div id="faqPopup"
+<!-- FAQ Popup -->
+<div id="faqPopup"
     style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 1001; max-width: 80%; max-height: 80%; overflow-y: auto;">
     <h2>Frequently Asked Questions</h2>
     <div class="faq-content">
@@ -743,10 +742,8 @@ <h3>How can hospitals benefit from AmbuFlow?</h3>
           our integrated system.</p>
       </div>
     </div>
-    <button id="closeFaqPopup"
-      style="background-color: #e74c3c; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; margin-top: 10px;">Close</button>
-  </div>
-  <button id="closeFaqPopup" style="background-color: #e74c3c; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; margin-top: 10px;">Close</button>
+    <!-- Add close button for FAQ Popup -->
+    <button id="closeFaqPopup" style="margin-top: 20px;">Close</button>
 </div>
 
 <!-- Add this div for the translator popup -->
@@ -755,203 +752,99 @@ <h3>How can hospitals benefit from AmbuFlow?</h3>
 </div>
 
 <script src="preloader.js"></script>
-<script>
-  // Add event listeners to each star label for toggling the selection
-  const stars = document.querySelectorAll('.star-rating input');
-  stars.forEach(star => {
-    star.addEventListener('change', function () {
-      // Remove the checked state from all stars
-      stars.forEach(s => {
-        const label = document.querySelector(`label[for="${s.id}"]`);
-        label.style.color = '#ddd'; // Reset color for unselected stars
-
-  <script src="preloader.js"></script>
-
-  <script>
-    // adding code for dark mode
-    document.addEventListener('DOMContentLoaded', function () {
-      const toggleButton = document.getElementById('dark-mode-toggle');
-      const darkModeButton = document.querySelector('.dark-mode-toggle');
-      const logoImage = document.querySelector('.logo img'); // Select the logo image
-      const navbar = document.querySelector('.navbar'); // Select the navbar
-
-      // Reset to light mode for the Contact page
-      document.body.classList.remove("dark-mode");
-      document.body.classList.add("light-mode");
-      darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Set icon for light mode
-      navbar.classList.remove("dark-mode"); // Ensure navbar is in light mode
-
-      // Clear the sessionStorage for theme on this page
-      sessionStorage.removeItem("theme");
-
-      toggleButton.addEventListener('click', function () {
-        document.body.classList.toggle('dark-mode');
-        navbar.classList.toggle('dark-mode'); // Toggle dark mode for navbar
-
-        // Update sessionStorage based on current mode
-        if (document.body.classList.contains('dark-mode')) {
-          sessionStorage.setItem("theme", "dark");
-          darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Change icon
-        } else {
-          sessionStorage.setItem("theme", "light");
-          darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Change icon
-        }
-
-      });
-    });
-
-    // end
-  </script>
-
-  <script>
-    // Add event listeners to each star label for toggling the selection
-    const stars = document.querySelectorAll('.star-rating input');
-    stars.forEach(star => {
-      star.addEventListener('change', function () {
-        // Remove the checked state from all stars
-        stars.forEach(s => {
-          const label = document.querySelector(`label[for="${s.id}"]`);
-          label.style.color = '#ddd'; // Reset color for unselected stars
-        });
-        // Highlight the selected star and all previous stars
-        this.checked = true;
-        const currentStarValue = this.value;
-        for (let i = 1; i <= currentStarValue; i++) {
-          const label = document.querySelector(`label[for="star${i}"]`);
-          label.style.color = '#ffdd00'; // Highlight selected stars
-        }
-      });
-    });
 
-    // Handle form submission
-    const form = document.getElementById('feedback-box');
-    const feedbackBox = document.querySelector('.feedback-box');
-    const thankYouMessage = document.getElementById('thank-you-message');
 
-    form.addEventListener('submit', function (event) {
-      event.preventDefault(); // Prevent the default form submission
-
-      // Hide the feedback-box div
-      feedbackBox.style.display = 'none';
-
-      // Show the thank-you message
-      thankYouMessage.style.display = 'flex';
+<!--  -->
+<script>
+  // Back to top button functionality
+  const backToTopButton = document.getElementById('backToTopBtn');
 
-      // Hide the form to avoid further submissions
-      form.style.display = 'none';
+  // Show the button when scrolled down 100px from the top
+  window.onscroll = function () {
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+      backToTopButton.style.display = "block";
+    } else {
+      backToTopButton.style.display = "none";
+    }
+  };
 
-      // Redirect to the home page after 2 seconds
-      setTimeout(function () {
-        window.location.href = 'index.html';
-      }, 5000); // Adjust the delay as needed
-    });
+  // Scroll to top when the button is clicked
+  backToTopButton.addEventListener('click', () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  });
+</script>
 
-    // Update or add this JavaScript for the cursor effect
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    const colors = [
-      "#ffb56b",
-      "#fdaf69",
-      "#f89d63",
-      "#f59761",
-      "#ef865e",
-      "#ec805d",
-      "#e36e5c",
-      "#df685c",
-      "#d5585c",
-      "#d1525c",
-      "#c5415d",
-      "#c03b5d",
-      "#b22c5e",
-      "#ac265e",
-      "#9c155f",
-      "#950f5f",
-      "#830060",
-      "#7c0060",
-      "#680060",
-      "#60005f",
-      "#48005f",
-      "#3d005e"
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
 
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
+<script>
+  // Dark mode functionality
+  document.addEventListener('DOMContentLoaded', function () {
+    const toggleButton = document.getElementById('dark-mode-toggle');
+    const darkModeButton = document.querySelector('.dark-mode-toggle');
+    const logoImage = document.querySelector('.logo img'); // Select the logo image
+    const navbar = document.querySelector('.navbar'); // Select the navbar
+
+    // Reset to light mode for the Contact page
+    document.body.classList.remove("dark-mode");
+    document.body.classList.add("light-mode");
+    darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Set icon for light mode
+    navbar.classList.remove("dark-mode"); // Ensure navbar is in light mode
+
+    // Clear the sessionStorage for theme on this page
+    sessionStorage.removeItem("theme");
+
+    toggleButton.addEventListener('click', function () {
+      document.body.classList.toggle('dark-mode');
+      navbar.classList.toggle('dark-mode'); // Toggle dark mode for navbar
+
+      // Update sessionStorage based on current mode
+      if (document.body.classList.contains('dark-mode')) {
+        sessionStorage.setItem("theme", "dark");
+        darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Change icon
+      } else {
+        sessionStorage.setItem("theme", "light");
+        darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Change icon
+      }
     });
+  });
 
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
-
-      circles.forEach(function (circle, index) {
-        circle.style.left = x - 12 + "px";
-        circle.style.top = y - 12 + "px";
-
-        circle.style.scale = (circles.length - index) / circles.length;
+  // FAQ Popup functionality
+  const faqButton = document.getElementById('faqButton');
+  const faqPopup = document.getElementById('faqPopup');
+  const closeFaqPopup = document.getElementById('closeFaqPopup');
 
-        circle.x = x;
-        circle.y = y;
+  faqButton.addEventListener('click', () => {
+    faqPopup.style.display = 'block';
+  });
 
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
+  closeFaqPopup.addEventListener('click', () => {
+    faqPopup.style.display = 'none';
+  });
 
-      requestAnimationFrame(animateCircles);
+  // Close popup when clicking outside
+  window.addEventListener('click', (event) => {
+    if (event.target === faqPopup) {
+      faqPopup.style.display = 'none';
     }
+  });
 
-    animateCircles();
-
-    // Add this new code for the Back to Top functionality
+  // Show/hide buttons when user scrolls
+  window.onscroll = function () {
     const backToTopBtn = document.getElementById('backToTopBtn');
-    const faqButton = document.getElementById('faqButton');
-    const faqPopup = document.getElementById('faqPopup');
-    const closeFaqPopup = document.getElementById('closeFaqPopup');
-
-    // Show/hide buttons when user scrolls
-    window.onscroll = function () {
-      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-        backToTopBtn.style.display = "block";
-        faqButton.style.display = "block";
-      } else {
-        backToTopBtn.style.display = "none";
-        faqButton.style.display = "none";
-      }
-    };
-
-    // Scroll to top when button is clicked
-    backToTopBtn.addEventListener('click', function () {
-      document.body.scrollTop = 0; // For Safari
-      document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-    });
-
-    // FAQ Popup functionality
-    faqButton.addEventListener('click', () => {
-      faqPopup.style.display = 'block';
-    });
-
-    closeFaqPopup.addEventListener('click', () => {
-      faqPopup.style.display = 'none';
-
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+      backToTopBtn.style.display = "block";
+      faqButton.style.display = "block";
+    } else {
+      backToTopBtn.style.display = "none";
+      faqButton.style.display = "none";
     }
-  });
+  };
 
+  // Add the translator popup functionality
   const translateBtn = document.getElementById('translateBtn');
   const gTranslate = document.getElementById('gTranslate');
 
   translateBtn.addEventListener('click', function() {
-    if (gTranslate.style.display === 'none') {
-      gTranslate.style.display = 'block';
-    } else {
-      gTranslate.style.display = 'none';
-    }
+    gTranslate.style.display = gTranslate.style.display === 'none' ? 'block' : 'none';
   });
 
   // Close the translator popup when clicking outside
@@ -962,7 +855,6 @@ <h3>How can hospitals benefit from AmbuFlow?</h3>
   });
 </script>
 
-<!-- Add this script at the end of the body -->
 <script>
   window.gtranslateSettings = {
     "default_language": "en",
@@ -971,21 +863,10 @@ <h3>How can hospitals benefit from AmbuFlow?</h3>
     "alt_flags": {"en": "usa"}
   }
 </script>
-<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
-    });
-
-    // Close popup when clicking outside
-    window.addEventListener('click', (event) => {
-      if (event.target === faqPopup) {
-        faqPopup.style.display = 'none';
-      }
-    });
-  </script>
 
+<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 
-  <!-- Add this if it's not already present -->
-  <div class="circle"></div>
+<!-- Add this if it's not already present -->
+<div class="circle"></div>
 </body>
-
-</html>
\ No newline at end of file
+</html>

From 4254fc7fe2740ce7a1bf48cc77f08c2fd8633764 Mon Sep 17 00:00:00 2001
From: Subhajit-2023-44 <subhajit2006patra@gmail.com>
Date: Tue, 15 Oct 2024 02:10:17 +0530
Subject: [PATCH 03/14] done

---
 team.html | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/team.html b/team.html
index e8f950d..bc70178 100644
--- a/team.html
+++ b/team.html
@@ -502,8 +502,11 @@ <h2>GPS Technician</h2>
     </div>
 
     <!-- Contact Section in Full Row -->
+
     <div class="features-container">
-        < <div class="contact-features">
+        
+         <div class="contact-features">
+
             <!-- Wrap the entire .inner div in an anchor tag to make it clickable -->
             <a href="contact.html" class="contact-feature-link">
                 <div class="inner">
@@ -522,7 +525,7 @@ <h2>Contact Us</h2>
             </a>
     </div>
 
-
+ 
     </div>
 
 

From 9719e840b26e76d22159b1686c26d89b554c94ce Mon Sep 17 00:00:00 2001
From: Kumar Anshuman <kumar2210012-d@akgec.ac.in>
Date: Tue, 15 Oct 2024 02:33:15 +0530
Subject: [PATCH 04/14] boxes at nov  bar components not looking good so i
 remove then and apply underline hover effect

---
 index.html        | 74 ++++++++++++++++++++++++++++++-----------------
 src/css/index.css | 12 ++++----
 2 files changed, 53 insertions(+), 33 deletions(-)

diff --git a/index.html b/index.html
index 3599c4b..f4e7eff 100644
--- a/index.html
+++ b/index.html
@@ -17,16 +17,14 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
   <!-- Updated to latest version -->
-
   <style>
-
-      .chatbot-container {
-        position: fixed;
-        transition: right 0.3s ease;
-        bottom: 20px; /* Adjust as needed */
-        left: 90px; /* Adjust as needed */
-        z-index: 1000; /* Ensure it appears above other elements */
-      }
+    .chatbot-container {
+      position: fixed;
+      transition: right 0.3s ease;
+      bottom: 20px; /* Adjust as needed */
+      left: 90px; /* Adjust as needed */
+      z-index: 1000; /* Ensure it appears above other elements */
+    }
 
     .chatbot-button {
       background-color: #6207ca;
@@ -89,37 +87,57 @@
       padding: 0;
       margin: 0;
       display: flex;
+     
     }
 
     nav ul li a {
       display: flex;
       align-items: center;
-      padding: px 10px;
+      padding: 10px 15px;
       text-decoration: none;
-      border: 2px solid #000;
-      border-radius: 12px;
       color: black;
       font-weight: bold;
-      background-color: white;
+      background-color: transparent;
       text-transform: uppercase;
-      margin-right: 10px;
-
+      margin-right: 5px;
+      position: relative;
+      /* transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; */
+      border: none;
+      /* Added smooth transition for background, text color, and scaling */
     }
 
     nav ul li a:hover {
-      background-color: #faecec;
+      color: #2980b9; /* Text color change on hover */
+      transform: scale(1.1); /* Slightly scale up the button on hover */
+      box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Add shadow effect */
     }
 
     nav ul li a:active {
-      background-color: #000;
-      color: white;
+       /* background-color: #333; Change background on active state */
+      color: #2980b9; /* Active text color */
+      transform: scale(1); /* Reset scale on click */
     }
 
     nav ul li a i {
       margin-right: 8px;
     }
 
+    nav ul li a::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      height: 3px;
+      transition: all 0.3s ease;
+      transform: translateX(-50%);
+    }
 
+    nav ul li a:hover::before {
+      width: 100%; /* Animated underline effect on hover */
+      background-color: rgb(76, 59, 231); /* Underline color */
+      
+    }
 
     .content {
       margin: 20px;
@@ -137,7 +155,6 @@
     }
 
     .grid {
-
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       grid-template-rows: auto auto;
@@ -147,7 +164,6 @@
       justify-items: stretch;
       justify-content: center;
       align-items: stretch;
-
     }
 
     .feature {
@@ -235,7 +251,6 @@
       margin-right: 40px;
       cursor: pointer;
       display: none;
-
     }
 
     #check {
@@ -278,11 +293,9 @@
         font-size: 30px;
         padding-left: 50px;
       }
-
     }
 
     @media (max-width:858px) {
-
       .checkbtn {
         display: block;
       }
@@ -402,7 +415,6 @@
 
     .container {
       width: 98vw;
-
     }
 
     #contact-hvr:hover {
@@ -432,12 +444,10 @@
     /* faq section styles */
     .faq-section {
       background-color: #e7f3fe;
-
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-
     }
 
     .faq-h2 {
@@ -461,9 +471,11 @@
       overflow: hidden;
       transition: background-color 0.3s ease;
     }
+
     .faq:hover {
       background-color: #e31616; /* Slight hover effect for FAQs */
     }
+
     .faq-question {
       background-color: #e7ffe7;
       color: #333;
@@ -480,9 +492,11 @@
       align-items: center;
       transition: background-color 0.3s ease;
     }
+
     .faq-question:hover {
       background-color: #d5f0d5; /* Lighter green on hover */
     }
+
     .faq-question::after {
       content: '';
       display: inline-block;
@@ -493,7 +507,6 @@
       border-top: 8px solid #333;
       /* Downward pointing wide "V" */
       transition: transform 0.3s ease;
-
       margin-right: 10px;
     }
 
@@ -522,9 +535,11 @@
       padding: 10px;
       /* Adds padding when expanded */
     }
+
     .faq.active .faq-answer p {
       transition: opacity 0.3s ease-in-out;
     }
+
     /* Back to Top Button Styles */
     #backToTopBtn {
       position: fixed;
@@ -632,6 +647,11 @@
       /* Prevent text from wrapping */
     }
 
+    .chatbot-button:hover {
+      transform: scale(1.1);
+      background-color: #5a07b2;
+    }
+
     .chatbot-button:hover .tooltip-text {
       display: block;
       /* Show on hover */
diff --git a/src/css/index.css b/src/css/index.css
index ceb8126..38fa23e 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -97,20 +97,20 @@ header {
 
 .menu ul li a {
   text-decoration: none;
-  color: #4b5563;
+  color: #0344f6;
   font-weight: 500;
   padding: 8px 12px;
   transition: background-color 0.3s;
-  border: 2px solid #1d4ed8;
-  border-radius: 15px;
+  /* border: 2px solid #1d4ed8; */
+  /* border-radius: 15px; */
 }
 
-.menu ul li a:hover {
+:hover {
   /* color: #1d4ed8;
   background-color: #f3f4f6;
   border-radius: 5px; */
-  color: white;
-  background-color: #1d4ed8;
+  color: #0344f6;
+  /* background-color: #1d4ed8; */
 }
 
 .buttons {

From 95b3b40bc3ece26ab88f124c3ad2537c139d3c6e Mon Sep 17 00:00:00 2001
From: Khawaja Fashi Ud Din Abdullah <khawajafashi9623@gmail.com>
Date: Tue, 15 Oct 2024 03:03:12 +0500
Subject: [PATCH 05/14] Ui change

---
 index.html            | 543 ++++++++++++++++++++++++------------------
 src/css/index.css     |   4 +
 src/css/indexmain.css |  24 +-
 team.html             |  34 +--
 4 files changed, 341 insertions(+), 264 deletions(-)

diff --git a/index.html b/index.html
index 71ac9c0..a821299 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>AmbuFlow</title>
 
   <link rel="stylesheet" href="src/css/indexmain.css">
@@ -14,16 +14,6 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
 
   <style>
-    /* .logo span {
-            font-size: 28px;
-            font-weight: bold;
-            background: linear-gradient(45deg, #ff5733, #33ff57, #3357ff);
-            -webkit-background-clip: text;
-            color: transparent;
-            letter-spacing: 2px;
-            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
-            font-family: 'Arial', sans-serif;
-        } */
     .chatbot-container {
       position: fixed;
       transition: right 0.3s ease;
@@ -37,6 +27,21 @@
 
     .chatbot-button {
       background-color: #007bff;
+    }
+
+    .chatbot-container {
+      position: fixed;
+      transition: right 0.3s ease;
+      bottom: 20px;
+      /* Adjust as needed */
+      left: 90px;
+      /* Adjust as needed */
+      z-index: 1000;
+      /* Ensure it appears above other elements */
+    }
+
+    .chatbot-button {
+      background-color: #6207ca;
       border: none;
       border-radius: 50%;
       padding: 10px;
@@ -47,6 +52,7 @@
       /* Adjusted size */
       height: 50px;
       /* Adjusted size */
+      right: -60px;
     }
 
     .chatbot-button img {
@@ -79,30 +85,20 @@
       /* Show on hover */
     }
 
-    body {
-      font-family: Arial, sans-serif;
-      background-color: #f4f4f4;
-      margin: 0;
-      padding: 0;
-      color: #333;
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-    }
-
-
     .content {
-      margin: 20px;
+      margin: 2rem 1.2rem;
+      /* margin-bottom: 2rem; */
       padding: 20px;
       background-color: #fff;
       border-radius: 5px;
-      flex-grow: 1;
+      font-weight: bold;
     }
 
     h1 {
       color: #2c3e50;
       text-align: center;
-      margin: 20px 0;
+      margin: 2rem 0;
+      font-weight: bold;
     }
 
     .grid {
@@ -126,7 +122,7 @@
 
     .feature:hover {
       transform: translateY(-5px);
-      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+      box-shadow: 0 4px 10px rgba(42, 40, 40, 0.3);
     }
 
     .feature img {
@@ -146,32 +142,49 @@
       color: #555;
     }
 
-    .team-feature,
-    .contact-feature {
-      padding: 20px;
+
+
+    .sticky {
       display: flex;
-      align-items: center;
-      margin-bottom: 2rem;
-      text-align: left;
-      border-radius: 10px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-      grid-column: 1 / -1;
+      position: fixed;
+      background-color: #C4D7FF;
+      top: 0;
+      left: 0;
+      z-index: 1000;
     }
 
-    .team-feature {
-      background-color: #e7ffe7;
+    footer {
+      background-color: #C4D7FF;
+      color: #f3f4f6;
+      text-align: center;
+      padding: 15px 0;
+      width: 100%;
     }
 
-    .contact-feature {
-      background-color: #f2e4aa;
+    .checkbtn {
+      font-size: 30px;
+      color: #333;
+      float: right;
+      line-height: 80px;
+      margin-right: 40px;
+      cursor: pointer;
+      display: none;
+
     }
 
-    .team-feature img,
-    .contact-feature img {
-      width: 150px;
-      height: auto;
-      margin-right: 20px;
-      border-radius: 10px;
+    #check {
+      display: none;
+    }
+
+    /* Added the hover animation on the footer social icons */
+    .social-icon {
+      transition: transform 0.3s ease;
+      /* Smooth transition effect */
+    }
+
+    .social-icon:hover {
+      transform: scale(1.3);
+      /* Scale the element to 1.3 times its size */
     }
 
     .feature p {
@@ -299,7 +312,6 @@
 
     .container {
       width: 98vw;
-
     }
 
     #contact-hvr:hover {
@@ -331,9 +343,10 @@
       background-color: #e7f3fe;
       display: flex;
       flex-direction: column;
+      margin-left: 1rem;
       align-items: center;
       justify-content: center;
-      width: 96%;
+      width: 95%;
     }
 
     .faq-h2 {
@@ -341,6 +354,7 @@
       margin-bottom: 1.5rem;
       font-size: 2.5rem;
       font-weight: 600;
+      color: #000;
     }
 
     .faqs {
@@ -357,6 +371,12 @@
       overflow: hidden;
     }
 
+
+    .faq:hover {
+      background-color: #e31616;
+      /* Slight hover effect for FAQs */
+    }
+
     .faq-question {
       background-color: #e7ffe7;
       color: #333;
@@ -368,10 +388,15 @@
       cursor: pointer;
       font-size: 16px;
       font-weight: 600;
-
       display: flex;
       justify-content: space-between;
       align-items: center;
+      transition: background-color 0.3s ease;
+    }
+
+    .faq-question:hover {
+      background-color: #d5f0d5;
+      /* Lighter green on hover */
     }
 
     .faq-question::after {
@@ -395,13 +420,14 @@
     }
 
     .faq-answer {
+      opacity: 0;
       max-height: 0;
       /* Initially hidden */
       overflow: hidden;
       /* Hide content when not visible */
       padding: 0 10px;
       background-color: #fff;
-      transition: max-height 0.3s ease;
+      transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
       /* Smooth transition */
       border-top: 1px solid #ccc;
     }
@@ -411,51 +437,17 @@
     }
 
     .faq.active .faq-answer {
+      opacity: 1;
       max-height: 200px;
       /* Set to a sufficient height to display content */
       padding: 10px;
       /* Adds padding when expanded */
     }
 
-    /* Back to Top Button Styles */
-
-    .circle {
-      position: absolute;
-      width: 25px;
-      height: 25px;
-      border-radius: 50%;
-      pointer-events: none;
-      background: radial-gradient(circle, rgba(71, 252, 255, 0.3), rgba(0, 157, 255, 0.3));
-      transition: transform 0.1s, left 0.1s, top 0.1s;
-    }
-
-    .circle-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 9999;
-    }
-
-
-
     #logo img:hover {
       background-color: #c4d7ff;
     }
 
-    .chatbot-container {
-      position: fixed;
-      transition: right 0.3s ease;
-      bottom: 20px;
-      /* Adjust as needed */
-      left: 90px;
-      /* Adjust as needed */
-      z-index: 1000;
-      /* Ensure it appears above other elements */
-    }
-
     .chatbot-button {
       background-color: #007bff;
       border: none;
@@ -477,23 +469,6 @@
       /* Adjusted image size */
     }
 
-    .tooltip-text {
-      display: none;
-      /* Hide by default */
-      position: absolute;
-      bottom: 100%;
-      /* Position above the button */
-      right: 50%;
-      transform: translateX(50%);
-      background-color: #333;
-      /* Background color for tooltip */
-      color: #fff;
-      /* Tooltip text color */
-      padding: 5px;
-      border-radius: 5px;
-      white-space: nowrap;
-      /* Prevent text from wrapping */
-    }
 
     .chatbot-button:hover .tooltip-text {
       display: block;
@@ -503,6 +478,7 @@
 </head>
 
 <body>
+  <!-- preloader -->
   <!-- preloader -->
   <div id="preloader">
     <div class="wrapper">
@@ -733,18 +709,24 @@ <h2>Contact Us</h2>
       <!-- Quick Links Section -->
       <div>
         <ul style="list-style-type: none; padding: 0;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
+          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick
+            Links</h3>
           <li><a href="about.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
-              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li>
+              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a>
+          </li>
           <li><a href="contact.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
-              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li>
+              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a>
+          </li>
           <li><a href="privacy.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
-              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li>
+              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy
+              Policy</a></li>
           <li><a href="terms.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
-              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a>
+              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of
+              Service</a>
           </li>
           <li><a href="sitemap.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;"
-              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li>
+              onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a>
+          </li>
           <!-- Add FAQ link here -->
           <li><a href="faq.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;"
               onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">FAQ</a></li>
@@ -752,9 +734,7 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links<
       </div>
 
       <!-- Contact Information Section -->
-      <div style="flex: 1; 
-          min-width: 200px; 
-          margin-bottom: 10px;">
+      <div>
         <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
         <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
         <a href="mailto:emergency@ambulanceservice.in" style="color: #000000; background:none; cursor: pointer;"
@@ -764,10 +744,12 @@ <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
             onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">+91-911-1234567</a></p>
       </div>
 
+
       <!-- Modified the looks of the social icons -->
       <!-- Social Media Links -->
       <div style="text-align: center; min-width: 200px; color: black;">
-        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
+        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow
+          Us</h3>
         <div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
           <a href="https://www.facebook.com" class="social-icon facebook no-hover-effect"
             style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
@@ -781,8 +763,9 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h
       </div>
 
       <!-- Newsletter Subscription -->
-      <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
+      <div style=" min-width: 200px; margin-bottom: 20px;">
+        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
+          Subscribe to Our Newsletter</h3>
         <form action="#">
           <input type="email" placeholder="Your Email"
             style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
@@ -792,6 +775,19 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
       </div>
     </div>
   </footer>
+  <a href="chatbot.html">
+    <div class="fixed bottom-0 right-2 chatbot-container">
+      <button class="chatbot-button group">
+        <img class="h-20" src="chatbot.gif" alt="chatbot" />
+        <span class="tooltip-text">
+          Welcome to AmbuFlow!<br />
+          How can I help You?
+        </span>
+      </button>
+    </div>
+  </a>
+
+  <div class="gtranslate_wrapper"></div>
   <!-- <hr> -->
   <div
     style="background-color: #C4D7FF; color: #000000;border-top: 1px solid #333; display: flex; justify-content: center; align-items: center; padding: 10px 20px;">
@@ -799,154 +795,241 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
       <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
     </strong>
   </div>
-</body>
-<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
-<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-<script src="script.js"></script>
-<script src="preloader.js"></script>
-
-<script>
-  // Back to Top Button functionality
-  document.addEventListener('DOMContentLoaded', function () {
-    var backToTopBtn = document.getElementById("backToTopBtn");
-
-    // Show/hide button based on scroll position
-    window.addEventListener('scroll', function () {
-      if (window.pageYOffset > 300) { // Show button after scrolling down 300px
-        backToTopBtn.style.display = "block";
-      } else {
-        backToTopBtn.style.display = "none";
-      }
-    });
+  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+  <script src="script.js"></script>
+  <script src="preloader.js"></script>
+
+  <script>
+    // Back to Top Button functionality
+    document.addEventListener('DOMContentLoaded', function () {
+      var backToTopBtn = document.getElementById("backToTopBtn");
+
+      // Show/hide button based on scroll position
+      window.addEventListener('scroll', function () {
+        if (window.pageYOffset > 300) { // Show button after scrolling down 300px
+          backToTopBtn.style.display = "block";
+        } else {
+          backToTopBtn.style.display = "none";
+        }
+      });
 
-    // Smooth scroll to top when button is clicked
-    backToTopBtn.addEventListener('click', function (e) {
-      e.preventDefault();
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
+      // Smooth scroll to top when button is clicked
+      backToTopBtn.addEventListener('click', function (e) {
+        e.preventDefault();
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+
+        })
+      })
+
+      // Back to Top Button functionality
+      document.addEventListener('DOMContentLoaded', function () {
+        var backToTopBtn = document.getElementById("backToTopBtn");
+
+        // Show/hide button based on scroll position
+        window.addEventListener('scroll', function () {
+          if (window.pageYOffset > 300) { // Show button after scrolling down 300px
+            backToTopBtn.style.display = "block";
+          } else {
+            backToTopBtn.style.display = "none";
+          }
+        });
+
+        // Smooth scroll to top when button is clicked
+        backToTopBtn.addEventListener('click', function (e) {
+          e.preventDefault();
+          window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+          });
+        });
       });
     });
-  });
-</script>
-<script>
-  function changeContent(page) {
-    var links = document.querySelectorAll(".menu ul li a");
-    links.forEach((link) => link.classList.remove("active"));
-    document.getElementById(page + "-link").classList.add("active");
-  }
-
-  window.onload = function () {
-    document.getElementById("home-link").classList.add("active");
-
-    // Add delay to each letter drop
-    const letters = document.querySelectorAll('.letter');
-    letters.forEach((letter, index) => {
-      letter.style.animationDelay = `${index * 0.1}s`;
-    });
-  };
 
-  const thankYouMessage = document.getElementById("thankYouMessage");
-  const form = document.getElementById("subscribeForm");
+    function changeContent(page) {
+      var links = document.querySelectorAll(".menu ul li a");
+      links.forEach((link) => link.classList.remove("active"));
+      document.getElementById(page + "-link").classList.add("active");
+    }
 
-  form.addEventListener("submit", function (event) {
-    event.preventDefault(); // Prevent form from refreshing the page
+    window.onload = function () {
+      document.getElementById("home-link").classList.add("active");
 
-    // Show Thank You Message after subscribing
-    thankYouMessage.style.display = 'block';
+      // Add delay to each letter drop
+      const letters = document.querySelectorAll('.letter');
+      letters.forEach((letter, index) => {
+        letter.style.animationDelay = `${index * 0.1}s`;
+      });
+    };
 
-    // Optionally clear the input field after subscribing
-    document.getElementById("emailInput").value = '';
-  });
+    const thankYouMessage = document.getElementById("thankYouMessage");
+    const form = document.getElementById("subscribeForm");
 
-</script>
-<script>
-  // Back to Top Button functionality
+    form.addEventListener("submit", function (event) {
+      event.preventDefault(); // Prevent form from refreshing the page
 
-  form.addEventListener("submit", function (event) {
-    event.preventDefault();
-    thankYouMessage.style.display = 'block';
-    document.getElementById("emailInput").value = '';
-  });
-</script>
+      // Show Thank You Message after subscribing
+      thankYouMessage.style.display = 'block';
 
+      // Optionally clear the input field after subscribing
+      document.getElementById("emailInput").value = '';
+    });
 
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    const faqButtons = document.querySelectorAll('.faq-question');
+  </script>
+  <script>
+    // Back to Top Button functionality
 
-    faqButtons.forEach(button => {
-      button.addEventListener('click', function () {
-        const faq = button.parentElement;
-        const answer = faq.querySelector('.faq-answer');
+    form.addEventListener("submit", function (event) {
+      event.preventDefault();
+      thankYouMessage.style.display = 'block';
+      document.getElementById("emailInput").value = '';
+    });
+  </script>
 
-        // Toggle active class
-        faq.classList.toggle('active');
 
-        // Control the max-height for slide effect
-        if (faq.classList.contains('active')) {
-          answer.style.maxHeight = answer.scrollHeight + 'px'; // Set the height based on content
-        } else {
-          answer.style.maxHeight = null; // Remove max-height to hide
-        }
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const faqButtons = document.querySelectorAll('.faq-question');
+
+      faqButtons.forEach(button => {
+        button.addEventListener('click', function () {
+          const faq = button.parentElement;
+          const answer = faq.querySelector('.faq-answer');
+
+          // Toggle active class
+          faq.classList.toggle('active');
+
+          // Control the max-height for slide effect
+          if (faq.classList.contains('active')) {
+            answer.style.maxHeight = answer.scrollHeight + 'px'; // Set the height based on content
+          } else {
+            answer.style.maxHeight = null; // Remove max-height to hide
+          }
+        });
+      });
+    })
+  </script>
+  <script>
+    // Back to Top Button functionality
+    document.addEventListener('DOMContentLoaded', function () {
+      var backToTopBtn = document.getElementById("backToTopBtn");
+
+      backToTopBtn.addEventListener('click', function () {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
       });
     });
-  });
 
+    form.addEventListener("submit", function (event) {
+      event.preventDefault();
+      thankYouMessage.style.display = 'block';
+      document.getElementById("emailInput").value = '';
+    });
+  </script>
+
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const faqButtons = document.querySelectorAll('.faq-question');
 
-</script>
+      faqButtons.forEach(button => {
+        button.addEventListener('click', function () {
+          const faq = button.parentElement;
+          const answer = faq.querySelector('.faq-answer');
 
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
+          // Toggle active class
+          faq.classList.toggle('active');
 
-    circles.forEach(function (circle) {
-      circle.x = 0;
-      circle.y = 0;
+          // Control the max-height for slide effect
+          if (faq.classList.contains('active')) {
+            answer.style.maxHeight = answer.scrollHeight + 'px'; // Set height based on content
+          } else {
+            answer.style.maxHeight = '0'; // Set height to zero to collapse
+          }
+        });
+      });
     });
+  </script>
+
+  <script>
+    //enabling the Dark mode toggle button added
+    document.addEventListener("DOMContentLoaded", () => {
+      const darkModeButton = document.getElementById("dark-mode-button");
+
+      // Check sessionStorage for dark mode preference
+      const currentTheme = sessionStorage.getItem("theme");
+      if (currentTheme === "dark") {
+        document.body.classList.add("dark-mode");
+        document.body.classList.remove("light-mode");
+        darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Change icon
+      } else {
+        document.body.classList.add("light-mode");
+        document.body.classList.remove("dark-mode");
+        darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Change icon
+      }
+
+      darkModeButton.addEventListener("click", () => {
+        document.body.classList.toggle("dark-mode");
+        document.body.classList.toggle("light-mode");
 
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.pageX;
-      coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+        // Save preference to sessionStorage
+        if (document.body.classList.contains("dark-mode")) {
+          sessionStorage.setItem("theme", "dark");
+          darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Change icon
+        } else {
+          sessionStorage.setItem("theme", "light");
+          darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Change icon
+        }
+      });
     });
 
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
+    // end
 
-      circles.forEach(function (circle, index) {
-        circle.style.left = `${x - 12}px`;
-        circle.style.top = `${y - 12}px`;
-        circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
 
-        const nextCircle = circles[index + 1] || circles[0];
-        circle.x = x;
-        circle.y = y;
 
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
+    document.addEventListener("DOMContentLoaded", function () {
+      const coords = { x: 0, y: 0 };
+      const circles = document.querySelectorAll(".circle");
+
+      circles.forEach(function (circle) {
+        circle.x = 0;
+        circle.y = 0;
       });
 
-      requestAnimationFrame(animateCircles);
-    }
+      window.addEventListener("mousemove", function (e) {
+        coords.x = e.pageX;
+        coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+      });
 
-    animateCircles();
-  });
-</script>
+      function animateCircles() {
+        let x = coords.x;
+        let y = coords.y;
 
-<a href="chatbot.html">
-  <div class="fixed bottom-0 right-2 chatbot-container">
-    <button class="chatbot-button group">
-      <img class="h-20" src="chatbot.gif" alt="chatbot" />
-      <span class="tooltip-text">
-        Welcome to AmbuFlow!<br />
-        How can I help You?
-      </span>
-    </button>
-  </div>
-</a>
+        circles.forEach(function (circle, index) {
+          circle.style.left = `${x - 12}px`;
+          circle.style.top = `${y - 12}px`;
+          circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+
+          const nextCircle = circles[index + 1] || circles[0];
+          circle.x = x;
+          circle.y = y;
 
+          x += (nextCircle.x - x) * 0.3;
+          y += (nextCircle.y - y) * 0.3;
+        });
+
+        requestAnimationFrame(animateCircles);
+      }
+
+      animateCircles();
+    });
+  </script>
+  <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
+  <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/css/index.css b/src/css/index.css
index 4669814..ffa6167 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -486,6 +486,10 @@ header {
   transition: all 0.3s ease-out;
 }
 
+
+/* Footer Section */
+
+
 @-webkit-keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
diff --git a/src/css/indexmain.css b/src/css/indexmain.css
index 0af799e..486fb7d 100644
--- a/src/css/indexmain.css
+++ b/src/css/indexmain.css
@@ -1,9 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
 
-* {
-    font-family: 'Poppins', sans-serif;
-}
+
 
 html {
     overflow-y: scroll;
@@ -27,10 +25,13 @@ html::-webkit-scrollbar-thumb:window-inactive {
     background: rgb(156, 156, 156);
 }
 
+* {
+    font-family: 'Poppins', sans-serif;
+}
 
 body {
     margin: 0;
-    font-family: Arial, sans-serif;
+
     background-color: #e4eaf1;
 }
 
@@ -249,6 +250,7 @@ body {
     /* transform: translateY(2px); */
     color: #373A40;
 }
+
 .menu ul li:first-child:hover {
     background-color: rgb(226, 223, 223);
     border-radius: 50%;
@@ -433,19 +435,7 @@ body {
     }
 }
 
-footer {
-    background-color: #C4D7FF;
-    color: #f3f4f6;
-    text-align: center;
-    padding: 15px 0;
-    width: 100%;
-}
-footer div{
-    margin-right: 1rem;
-}
-hr{
-    
-}
+
 .subtext {
     font-size: 1.2rem;
     color: #1d4ed8;
diff --git a/team.html b/team.html
index 0ce2245..2eb55ed 100644
--- a/team.html
+++ b/team.html
@@ -331,23 +331,23 @@ <h2>Contact Us</h2>
             </a>
     </div>
 
-  <div class="contact-features">
-      <div class="inner">
-          <div class="front">
-              <a href="Contactus.html">
-                  <img src="images/contact-w.avif" alt="Contact Us" />
-                  <h2>Contact Us</h2>
-              </a>
-          </div>
-          <div class="back">
-              <p>
-                  Reach out to us for any inquiries or assistance. We're here to
-                  help you 24/7 with our emergency services.
-              </p>
-              <a href="contact.html" class="button">Go to Contact</a>
-          </div>
-      </div>
-  </div>
+    <div class="contact-features">
+        <div class="inner">
+            <div class="front">
+                <a href="Contactus.html">
+                    <img src="images/contact-w.avif" alt="Contact Us" />
+                    <h2>Contact Us</h2>
+                </a>
+            </div>
+            <div class="back">
+                <p>
+                    Reach out to us for any inquiries or assistance. We're here to
+                    help you 24/7 with our emergency services.
+                </p>
+                <a href="contact.html" class="button">Go to Contact</a>
+            </div>
+        </div>
+    </div>
 
     </div>
 

From 52db0a9408963732e869004c4765b96eafbd2ea8 Mon Sep 17 00:00:00 2001
From: Khawaja Fashi Ud Din Abdullah <khawajafashi9623@gmail.com>
Date: Tue, 15 Oct 2024 04:01:40 +0500
Subject: [PATCH 06/14] Resolving conflicts without dark mode toggle

---
 index.html | 381 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 230 insertions(+), 151 deletions(-)

diff --git a/index.html b/index.html
index a821299..eaabad8 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>AmbuFlow</title>
 
   <link rel="stylesheet" href="src/css/indexmain.css">
@@ -27,21 +28,6 @@
 
     .chatbot-button {
       background-color: #007bff;
-    }
-
-    .chatbot-container {
-      position: fixed;
-      transition: right 0.3s ease;
-      bottom: 20px;
-      /* Adjust as needed */
-      left: 90px;
-      /* Adjust as needed */
-      z-index: 1000;
-      /* Ensure it appears above other elements */
-    }
-
-    .chatbot-button {
-      background-color: #6207ca;
       border: none;
       border-radius: 50%;
       padding: 10px;
@@ -62,6 +48,31 @@
       /* Adjusted image size */
     }
 
+    .chatbot-button img {
+      width: 30px;
+      /* Adjusted image size */
+      height: 30px;
+      /* Adjusted image size */
+    }
+
+    .tooltip-text {
+      display: none;
+      /* Hide by default */
+      position: absolute;
+      bottom: 100%;
+      /* Position above the button */
+      right: 50%;
+      transform: translateX(50%);
+      background-color: #333;
+      /* Background color for tooltip */
+      color: #fff;
+      /* Tooltip text color */
+      padding: 5px;
+      border-radius: 5px;
+      white-space: nowrap;
+      /* Prevent text from wrapping */
+    }
+
     .tooltip-text {
       display: none;
       /* Hide by default */
@@ -123,6 +134,7 @@
     .feature:hover {
       transform: translateY(-5px);
       box-shadow: 0 4px 10px rgba(42, 40, 40, 0.3);
+      box-shadow: 0 4px 10px rgba(42, 40, 40, 0.3);
     }
 
     .feature img {
@@ -153,6 +165,14 @@
       z-index: 1000;
     }
 
+    /* display: flex;
+      position: fixed;
+      background-color: #C4D7FF;
+      top: 0;
+      left: 0;
+      z-index: 1000;
+    } */
+
     footer {
       background-color: #C4D7FF;
       color: #f3f4f6;
@@ -318,6 +338,7 @@
       background: none;
     }
 
+
     .circle {
       position: absolute;
       width: 25px;
@@ -328,6 +349,7 @@
       transition: transform 0.1s, left 0.1s, top 0.1s;
     }
 
+
     .circle-container {
       position: fixed;
       top: 0;
@@ -355,6 +377,7 @@
       font-size: 2.5rem;
       font-weight: 600;
       color: #000;
+      color: #000;
     }
 
     .faqs {
@@ -364,11 +387,13 @@
     .faq {
       margin-bottom: 15px;
       width: 100%;
+
       /* Full width by default */
-      background-color: #fff;
+      background-color: #000000;
       border: 1px solid #ccc;
       border-radius: 10px;
       overflow: hidden;
+      transition: background-color 0.3s ease;
     }
 
 
@@ -399,6 +424,11 @@
       /* Lighter green on hover */
     }
 
+    .faq-question:hover {
+      background-color: #d5f0d5;
+      /* Lighter green on hover */
+    }
+
     .faq-question::after {
       content: '';
       display: inline-block;
@@ -409,7 +439,6 @@
       border-top: 8px solid #333;
       /* Downward pointing wide "V" */
       transition: transform 0.3s ease;
-
       margin-right: 10px;
     }
 
@@ -462,6 +491,20 @@
       /* Adjusted size */
     }
 
+    .chatbot-button {
+      background-color: #007bff;
+      border: none;
+      border-radius: 50%;
+      padding: 10px;
+      /* Smaller padding */
+      cursor: pointer;
+      position: relative;
+      width: 50px;
+      /* Adjusted size */
+      height: 50px;
+      /* Adjusted size */
+    }
+
     .chatbot-button img {
       width: 30px;
       /* Adjusted image size */
@@ -474,11 +517,99 @@
       display: block;
       /* Show on hover */
     }
+
+    .dark-mode-toggle {
+      font-size: 18px;
+      /* Increase font size */
+      padding: 10px 15px;
+      /* Adjust padding for better appearance */
+    }
+
+    .dark-mode {
+      background-color: black;
+      /* Dark mode navbar */
+      color: white;
+    }
+
+    /* more addition for dark mode theme */
+
+    .dark-mode .logo img {
+      filter: brightness(0) invert(1);
+      /* Inverts the color to make it white */
+    }
+
+    /* dark mode hove effect on logo */
+    .dark-mode #logo img:hover {
+      filter: brightness(0) invert(1);
+      /* Change black logo to white */
+      filter: brightness(0.8);
+      /* Change the brightness to light grey on hover */
+    }
+
+    .navbar.dark-mode .logo-img {
+      filter: brightness(0) invert(1);
+      /* Change logo color in dark mode */
+    }
+
+    .dark-mode .content {
+      background-color: rgba(50, 50, 50, 0.95);
+      /* Match body background opacity */
+      padding: 20px;
+      /* Optional: add padding for better spacing */
+    }
+
+    .dark-mode .menu a {
+      color: white;
+      /* Dark mode link color */
+      border: 1px solid lightgrey;
+      /* Light grey border in dark mode */
+    }
+
+    .dark-mode {
+      background-color: rgba(50, 50, 50, 0.95);
+      /* Slightly gray background with high opacity */
+    }
+
+    .dark-mode .menu a:hover {
+      background-color: white;
+      /* White background on hover in dark mode */
+      color: black;
+      /* Black text on hover in dark mode */
+    }
+
+    .light-dark-btn {
+      background-color: transparent;
+      border: 1px solid black;
+      /* Black border */
+      cursor: pointer;
+      color: black;
+      /* Default button color */
+    }
+
+    .light-dark-btn:hover {
+      color: blue;
+      /* Change color on hover */
+    }
+
+    .dark-mode .light-dark-btn {
+      color: white;
+      /* Button color in dark mode */
+      border: 1px solid lightgrey;
+      /* Light grey border */
+    }
+
+    .dark-mode .light-dark-btn:hover {
+      background-color: white;
+      /* Background on hover in dark mode */
+      color: black;
+      /* Text color on hover in dark mode */
+    }
   </style>
 </head>
 
 <body>
-  <!-- preloader -->
+
+
   <!-- preloader -->
   <div id="preloader">
     <div class="wrapper">
@@ -597,21 +728,21 @@ <h2>Resource Management</h2>
         </p>
       </div>
 
-    </div>
-    <!-- Team Section in Full Row -->
-    <div class="team-feature">
-      <img src="images/team-w.png" alt="Meet the Team" />
-      <div>
-        <h2>Meet the Team</h2>
-        <p>
-          Learn more about our dedicated team working tirelessly to ensure
-          efficient ambulance monitoring and resource management.
-        </p>
-        <a href="team.html" class="button">Go to Team</a>
-
+      <!-- Team Section in Full Row -->
+      <div class="team-feature">
+        <img src="images/team-w.png" alt="Meet the Team" />
+        <div class="team-feature-details">
+          <h2>Meet the Team</h2>
+          <p>
+            Learn more about our dedicated team working tirelessly to ensure
+            efficient ambulance monitoring and resource management.
+          </p>
+          <a href="team.html" class="button">Go to Team</a>
+        </div>
       </div>
     </div>
 
+
     <!-- Contact Section in Full Row -->
     <div class="contact-feature">
       <img src="images/contact-w.avif" alt="Contact Us" />
@@ -642,66 +773,72 @@ <h2>Contact Us</h2>
         <div class="faq-answer">
           <p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If
             possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
+          <p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If
+            possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
         </div>
       </div>
-      <div class="faq">
-        <button class="faq-question">How do I track an ambulance in real-time?</button>
-        <div class="faq-answer">
-          <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
-            live map feature.</p>
-        </div>
+    </div>
+    <div class="faq">
+      <button class="faq-question">How do I track an ambulance in real-time?</button>
+      <div class="faq-answer">
+        <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
+          live map feature.</p>
+        <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
+          live map feature.</p>
       </div>
-      <div class="faq">
-        <button class="faq-question">What are the emergency protocols if an ambulance is delayed?</button>
-        <div class="faq-answer">
-          <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
-            please contact emergency services for further instructions.</p>
-        </div>
+    </div>
+    <div class="faq">
+      <button class="faq-question">What are the emergency protocols if an ambulance is delayed?</button>
+      <div class="faq-answer">
+        <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
+          please contact emergency services for further instructions.</p>
+        <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
+          please contact emergency services for further instructions.</p>
       </div>
-      <div class="faq">
-        <button class="faq-question">Can I provide medical information for the patient in advance?</button>
-        <div class="faq-answer">
-          <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
-            the situation.</p>
-        </div>
+    </div>
+    <div class="faq">
+      <button class="faq-question">Can I provide medical information for the patient in advance?</button>
+      <div class="faq-answer">
+        <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
+          the situation.</p>
+        <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
+          the situation.</p>
       </div>
-      <div class="faq">
-        <button class="faq-question">Are there any charges for using the ambulance tracking service?</button>
-        <div class="faq-answer">
-          <p>The ambulance tracking service is free of charge, but regular ambulance service fees may apply depending
-            on the provider.</p>
-        </div>
+    </div>
+    <div class="faq">
+      <button class="faq-question">Are there any charges for using the ambulance tracking service?</button>
+      <div class="faq-answer">
+        <p>The ambulance tracking service is free of charge, but regular ambulance service fees may apply depending
+          on the provider.</p>
       </div>
-      <div class="faq">
-        <button class="faq-question">How can I request special medical equipment or personnel on the
-          ambulance?</button>
-        <div class="faq-answer">
-          <p>During your request, you can specify if the patient needs specific medical equipment or personnel, such
-            as a ventilator or a specialized doctor.</p>
-        </div>
+    </div>
+    <div class="faq">
+      <button class="faq-question">How can I request special medical equipment or personnel on the
+        ambulance?</button>
+      <div class="faq-answer">
+        <p>During your request, you can specify if the patient needs specific medical equipment or personnel, such
+          as a ventilator or a specialized doctor.</p>
       </div>
-      <div class="faq">
-        <button class="faq-question">What should I do if the location of the ambulance is not updating?</button>
-        <div class="faq-answer">
-          <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
-            technical issue through the system or contact support.</p>
-        </div>
+    </div>
+    <div class="faq">
+      <button class="faq-question">What should I do if the location of the ambulance is not updating?</button>
+      <div class="faq-answer">
+        <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
+          technical issue through the system or contact support.</p>
+        <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
+          technical issue through the system or contact support.</p>
       </div>
-      <div class="faq">
-        <button class="faq-question">Can I schedule an ambulance in advance?</button>
-        <div class="faq-answer">
-          <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
-        </div>
+    </div>
+    <div class="faq">
+      <button class="faq-question">Can I schedule an ambulance in advance?</button>
+      <div class="faq-answer">
+        <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
+        <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
       </div>
-
-
     </div>
   </div>
 
   <!-- FAQ section ends here -->
-
-
-
   <footer style="margin-top: 1.5rem; border-radius: 10px; color: #f3f4f6; text-align: center; width: 100%;">
     <div
       style="background-color: #C4D7FF;display: flex;color: #f3f4f6;justify-content: space-evenly;position: relative;left: 2.5rem;">
@@ -801,52 +938,7 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
   <script src="preloader.js"></script>
 
   <script>
-    // Back to Top Button functionality
-    document.addEventListener('DOMContentLoaded', function () {
-      var backToTopBtn = document.getElementById("backToTopBtn");
-
-      // Show/hide button based on scroll position
-      window.addEventListener('scroll', function () {
-        if (window.pageYOffset > 300) { // Show button after scrolling down 300px
-          backToTopBtn.style.display = "block";
-        } else {
-          backToTopBtn.style.display = "none";
-        }
-      });
-
-      // Smooth scroll to top when button is clicked
-      backToTopBtn.addEventListener('click', function (e) {
-        e.preventDefault();
-        window.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-
-        })
-      })
-
-      // Back to Top Button functionality
-      document.addEventListener('DOMContentLoaded', function () {
-        var backToTopBtn = document.getElementById("backToTopBtn");
-
-        // Show/hide button based on scroll position
-        window.addEventListener('scroll', function () {
-          if (window.pageYOffset > 300) { // Show button after scrolling down 300px
-            backToTopBtn.style.display = "block";
-          } else {
-            backToTopBtn.style.display = "none";
-          }
-        });
 
-        // Smooth scroll to top when button is clicked
-        backToTopBtn.addEventListener('click', function (e) {
-          e.preventDefault();
-          window.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-          });
-        });
-      });
-    });
 
     function changeContent(page) {
       var links = document.querySelectorAll(".menu ul li a");
@@ -877,8 +969,6 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
       document.getElementById("emailInput").value = '';
     });
 
-  </script>
-  <script>
     // Back to Top Button functionality
 
     form.addEventListener("submit", function (event) {
@@ -912,17 +1002,7 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
     })
   </script>
   <script>
-    // Back to Top Button functionality
-    document.addEventListener('DOMContentLoaded', function () {
-      var backToTopBtn = document.getElementById("backToTopBtn");
 
-      backToTopBtn.addEventListener('click', function () {
-        window.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-        });
-      });
-    });
 
     form.addEventListener("submit", function (event) {
       event.preventDefault();
@@ -930,6 +1010,7 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
       document.getElementById("emailInput").value = '';
     });
   </script>
+  </script>
 
 
   <script>
@@ -953,9 +1034,7 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
         });
       });
     });
-  </script>
 
-  <script>
     //enabling the Dark mode toggle button added
     document.addEventListener("DOMContentLoaded", () => {
       const darkModeButton = document.getElementById("dark-mode-button");
@@ -988,9 +1067,6 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
     });
 
     // end
-
-
-
     document.addEventListener("DOMContentLoaded", function () {
       const coords = { x: 0, y: 0 };
       const circles = document.querySelectorAll(".circle");
@@ -1008,28 +1084,31 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
       function animateCircles() {
         let x = coords.x;
         let y = coords.y;
+      }
+      circles.forEach(function (circle, index) {
+        circle.style.left = `${x - 12}px`;
+        circle.style.top = `${y - 12}px`;
+        circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
 
-        circles.forEach(function (circle, index) {
-          circle.style.left = `${x - 12}px`;
-          circle.style.top = `${y - 12}px`;
-          circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
 
-          const nextCircle = circles[index + 1] || circles[0];
-          circle.x = x;
-          circle.y = y;
+        const nextCircle = circles[index + 1] || circles[0];
+        circle.x = x;
+        circle.y = y;
 
-          x += (nextCircle.x - x) * 0.3;
-          y += (nextCircle.y - y) * 0.3;
-        });
+        x += (nextCircle.x - x) * 0.3;
+        y += (nextCircle.y - y) * 0.3;
+
+      });
+
+      requestAnimationFrame(animateCircles);
 
-        requestAnimationFrame(animateCircles);
-      }
 
       animateCircles();
     });
   </script>
   <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
   <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
 </body>
 
 </html>
\ No newline at end of file

From 53d24a0c9317c93d5c3296d1a1a55bf4d22976cb Mon Sep 17 00:00:00 2001
From: Khawaja Fashi Ud Din Abdullah <khawajafashi9623@gmail.com>
Date: Tue, 15 Oct 2024 04:03:02 +0500
Subject: [PATCH 07/14] Team.html conflict

---
 team.html | 264 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 260 insertions(+), 4 deletions(-)

diff --git a/team.html b/team.html
index 2eb55ed..86be29f 100644
--- a/team.html
+++ b/team.html
@@ -9,6 +9,9 @@
     <link rel="stylesheet" href="src/css/index.css">
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+    <div class="gtranslate_wrapper"></div>
+    <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
     <!--Updated to latest version-->
     <style>
         body {
@@ -22,6 +25,156 @@
             min-height: 100vh;
         }
 
+
+        /* font size of button */
+        .buttons .login,
+        .buttons .get-started,
+        .dark-mode-toggle {
+            font-size: 18px;
+            /* Increase font size */
+            padding: 10px 15px;
+            /* Adjust padding for better appearance */
+        }
+
+        /* dark mode toggle button styling */
+        body {
+            background-color: white;
+            /* Light mode background */
+            color: black;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        .navbar {
+            background-color: lightblue;
+            /* Light mode navbar */
+            color: black;
+            padding: 10px;
+        }
+
+        .navbar.dark-mode {
+            background-color: black;
+            /* Dark mode navbar */
+            color: white;
+        }
+
+        /* more addition for dark mode theme */
+
+        .dark-mode .logo img {
+            filter: brightness(0) invert(1);
+            /* Inverts the color to make it white */
+        }
+
+        /* dark mode hove effect on logo */
+        body.dark-mode #logo img:hover {
+            filter: brightness(0) invert(1);
+            /* Change black logo to white */
+            filter: brightness(0.8);
+            /* Change the brightness to light grey on hover */
+        }
+
+        .navbar.dark-mode .logo-img {
+            filter: brightness(0) invert(1);
+            /* Change logo color in dark mode */
+        }
+
+        .menu ul {
+            list-style-type: none;
+            padding: 0;
+            display: flex;
+        }
+
+        .menu li {
+            margin-right: 20px;
+        }
+
+        .menu a {
+            color: black;
+            /* Light mode link color */
+            border: 1px solid black;
+            /* Black border */
+            padding: 5px 10px;
+            text-decoration: none;
+            transition: all 0.3s;
+        }
+
+        .menu a:hover {
+            background-color: blue;
+            /* Blue background on hover */
+            color: white;
+            /* White text on hover */
+        }
+
+        .dark-mode .menu a {
+            color: white;
+            /* Dark mode link color */
+            border: 1px solid lightgrey;
+            /* Light grey border in dark mode */
+        }
+
+        .dark-mode {
+            background-color: rgba(50, 50, 50, 0.95);
+            /* Slightly gray background with high opacity */
+        }
+
+        .dark-mode .menu a:hover {
+            background-color: white;
+            /* White background on hover in dark mode */
+            color: black;
+            /* Black text on hover in dark mode */
+        }
+
+        .light-dark-btn {
+            background-color: transparent;
+            border: 1px solid black;
+            /* Black border */
+            cursor: pointer;
+            color: black;
+            /* Default button color */
+        }
+
+        .light-dark-btn:hover {
+            color: blue;
+            /* Change color on hover */
+        }
+
+        .dark-mode .light-dark-btn {
+            color: white;
+            /* Button color in dark mode */
+            border: 1px solid lightgrey;
+            /* Light grey border */
+        }
+
+        .dark-mode .light-dark-btn:hover {
+            background-color: white;
+            /* Background on hover in dark mode */
+            color: black;
+            /* Text color on hover in dark mode */
+        }
+
+        .buttons {
+            display: flex;
+            align-items: center;
+        }
+
+
+        /* end */
+        /* adding dark mode for contact info */
+        .content {
+            transition: background-color 0.3s, color 0.3s;
+            /* Smooth transitions */
+        }
+
+        .dark-mode .content {
+            background-color: rgba(50, 50, 50, 0.95);
+            /* Match body background opacity */
+            padding: 20px;
+            /* Optional: add padding for better spacing */
+        }
+
+        /* end */
+
+
+
         .menu ul li a {
             padding: 10px 15px;
             color: black;
@@ -42,7 +195,7 @@
         }
 
         h1 {
-            color: #2c3e50;
+            color: blue;
             text-align: center;
             margin-bottom: 20px;
         }
@@ -54,6 +207,11 @@
             justify-content: center;
             gap: 22px;
             animation: fadeIn 1s ease-in-out;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 22px;
+            animation: fadeIn 1s ease-in-out;
 
         }
 
@@ -227,6 +385,38 @@
         .red {
             color: red;
         }
+
+        .translate-btn {
+            background-color: #2980b9;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s;
+        }
+
+        .translate-btn:hover {
+            background-color: #3498db;
+        }
+
+        .g-translate-popup {
+            position: fixed;
+            top: 60px;
+            right: 20px;
+            background-color: white;
+            border-radius: 5px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            padding: 10px;
+        }
+
+        .buttons {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
     </style>
 </head>
 
@@ -245,7 +435,7 @@
         </div>
     </div>
 
-    <header>
+    <header class="navbar">
         <div class="container">
 
             <div class="logo">
@@ -259,8 +449,10 @@
                     <span class="letter" style="--letter-index: 7;">o</span>
                     <span class="letter" style="--letter-index: 8;">w</span>
                 </div>
-                <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo"
-                    style="width: 50px; height: auto" />
+                <a href="./index.html">
+                    <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo"
+                        style="width: 50px; height: auto" />
+                </a>
             </div>
 
             <nav class="menu">
@@ -448,6 +640,40 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
         }
     </style>
 
+    <script>
+        // adding code for dark mode
+        document.addEventListener('DOMContentLoaded', function () {
+            const toggleButton = document.getElementById('dark-mode-toggle');
+            const darkModeButton = document.querySelector('.dark-mode-toggle');
+            const logoImage = document.querySelector('.logo img'); // Select the logo image
+            const navbar = document.querySelector('.navbar'); // Select the navbar
+
+            // Reset to light mode for the Contact page
+            document.body.classList.remove("dark-mode");
+            document.body.classList.add("light-mode");
+            darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Set icon for light mode
+            navbar.classList.remove("dark-mode"); // Ensure navbar is in light mode
+
+            // Clear the sessionStorage for theme on this page
+            sessionStorage.removeItem("theme");
+
+            toggleButton.addEventListener('click', function () {
+                document.body.classList.toggle('dark-mode');
+                navbar.classList.toggle('dark-mode'); // Toggle dark mode for navbar
+
+                // Update sessionStorage based on current mode
+                if (document.body.classList.contains('dark-mode')) {
+                    sessionStorage.setItem("theme", "dark");
+                    darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Change icon
+                } else {
+                    sessionStorage.setItem("theme", "light");
+                    darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Change icon
+                }
+            });
+        });
+
+        // end
+    </script>
     <!-- Add this script block just before the closing </body> tag -->
     <script>
         // Back to Top Button functionality
@@ -463,6 +689,36 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
         });
     </script>
 
+    <script>
+        window.gtranslateSettings = {
+            "default_language": "en",
+            "detect_browser_language": true,
+            "wrapper_selector": ".gtranslate_wrapper",
+            "alt_flags": { "en": "usa" }
+        }
+    </script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
+    <script>
+        const translateBtn = document.getElementById('translateBtn');
+        const gTranslate = document.getElementById('gTranslate');
+
+        translateBtn.addEventListener('click', function () {
+            if (gTranslate.style.display === 'none') {
+                gTranslate.style.display = 'block';
+            } else {
+                gTranslate.style.display = 'none';
+            }
+        });
+
+        // Close the translator popup when clicking outside
+        document.addEventListener('click', function (event) {
+            if (!gTranslate.contains(event.target) && event.target !== translateBtn) {
+                gTranslate.style.display = 'none';
+            }
+        });
+    </script>
+
 </body>
 
 </html>
\ No newline at end of file

From f4c8002234984d4df0507e816458c022c226e1dd Mon Sep 17 00:00:00 2001
From: Khawaja Fashi Ud Din Abdullah <khawajafashi9623@gmail.com>
Date: Tue, 15 Oct 2024 04:04:37 +0500
Subject: [PATCH 08/14] css file conflict

---
 src/css/indexmain.css | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/css/indexmain.css b/src/css/indexmain.css
index 486fb7d..75fe455 100644
--- a/src/css/indexmain.css
+++ b/src/css/indexmain.css
@@ -1,7 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
 
-
+* {
+    font-family: 'Poppins', sans-serif;
+}
 
 html {
     overflow-y: scroll;
@@ -25,13 +27,10 @@ html::-webkit-scrollbar-thumb:window-inactive {
     background: rgb(156, 156, 156);
 }
 
-* {
-    font-family: 'Poppins', sans-serif;
-}
 
 body {
     margin: 0;
-
+    font-family: Arial, sans-serif;
     background-color: #e4eaf1;
 }
 
@@ -290,6 +289,12 @@ body {
     background-color: #000;
 }
 
+.menu_links.active:before {
+    color: white;
+    background-color: #000;
+}
+
+
 .main_content {
     display: flex;
     justify-content: space-between;
@@ -435,6 +440,13 @@ body {
     }
 }
 
+footer {
+    background-color: #C4D7FF;
+    color: #f3f4f6;
+    text-align: center;
+    padding: 15px 0;
+    width: 100%;
+}
 
 .subtext {
     font-size: 1.2rem;

From d372a93817a48bfc19101d862a2cfe3cb60d2c32 Mon Sep 17 00:00:00 2001
From: Khawaja Fashi Ud Din Abdullah <khawajafashi9623@gmail.com>
Date: Tue, 15 Oct 2024 10:47:20 +0500
Subject: [PATCH 09/14] Faq correction

---
 index.html | 101 +++++++++++++++++------------------------------------
 1 file changed, 32 insertions(+), 69 deletions(-)

diff --git a/index.html b/index.html
index eaabad8..5bfb91b 100644
--- a/index.html
+++ b/index.html
@@ -206,7 +206,25 @@
       transform: scale(1.3);
       /* Scale the element to 1.3 times its size */
     }
+    .fa-facebook:hover {
+      color: blue;
+      /* Icon color change to blue on hover */
+    }
+
+    .fa-x-twitter:hover {
+      color: black;
+      /* Icon color change to black on hover */
+    }
+
+    .fa-instagram:hover {
+      color: orangered;
+      /* Icon color change to orangered on hover */
+    }
 
+    .fa-linkedin-in:hover {
+      color: rgb(16, 13, 195);
+      /* Icon color change to rgb(16, 13, 195) on hover */
+    }
     .feature p {
       color: #555;
     }
@@ -246,9 +264,6 @@
       margin-right: 20px;
       border-radius: 10px;
     }
-
-
-
     @keyframes fadeIn {
       from {
         opacity: 0;
@@ -364,30 +379,22 @@
     .faq-section {
       background-color: #e7f3fe;
       display: flex;
+      margin: 2rem 1rem;
       flex-direction: column;
-      margin-left: 1rem;
       align-items: center;
       justify-content: center;
-      width: 95%;
     }
 
     .faq-h2 {
-      color: #2c3e50;
       margin-bottom: 1.5rem;
       font-size: 2.5rem;
       font-weight: 600;
       color: #000;
-      color: #000;
-    }
-
-    .faqs {
-      width: 100%;
     }
 
     .faq {
       margin-bottom: 15px;
       width: 100%;
-
       /* Full width by default */
       background-color: #000000;
       border: 1px solid #ccc;
@@ -395,13 +402,9 @@
       overflow: hidden;
       transition: background-color 0.3s ease;
     }
-
-
     .faq:hover {
-      background-color: #e31616;
-      /* Slight hover effect for FAQs */
+      background-color: #e31616; /* Slight hover effect for FAQs */
     }
-
     .faq-question {
       background-color: #e7ffe7;
       color: #333;
@@ -418,17 +421,9 @@
       align-items: center;
       transition: background-color 0.3s ease;
     }
-
-    .faq-question:hover {
-      background-color: #d5f0d5;
-      /* Lighter green on hover */
-    }
-
     .faq-question:hover {
-      background-color: #d5f0d5;
-      /* Lighter green on hover */
+      background-color: #d5f0d5; /* Lighter green on hover */
     }
-
     .faq-question::after {
       content: '';
       display: inline-block;
@@ -439,25 +434,21 @@
       border-top: 8px solid #333;
       /* Downward pointing wide "V" */
       transition: transform 0.3s ease;
+
       margin-right: 10px;
     }
 
     .faq.active .faq-question::after {
-      border-top: none;
-      border-bottom: 8px solid #333;
-      /* Upward pointing wide "V" */
+      transform: rotate(180deg);
     }
 
     .faq-answer {
       opacity: 0;
-      max-height: 0;
-      /* Initially hidden */
-      overflow: hidden;
-      /* Hide content when not visible */
+      max-height: 0; /* Initially hidden */
+      overflow: hidden; /* Hide content when not visible */
       padding: 0 10px;
       background-color: #fff;
-      transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
-      /* Smooth transition */
+      transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition */
       border-top: 1px solid #ccc;
     }
 
@@ -472,6 +463,9 @@
       padding: 10px;
       /* Adds padding when expanded */
     }
+    .faq.active .faq-answer p {
+      transition: opacity 0.3s ease-in-out;
+    }
 
     #logo img:hover {
       background-color: #c4d7ff;
@@ -777,7 +771,7 @@ <h2>Contact Us</h2>
             possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
         </div>
       </div>
-    </div>
+    
     <div class="faq">
       <button class="faq-question">How do I track an ambulance in real-time?</button>
       <div class="faq-answer">
@@ -837,11 +831,12 @@ <h2>Contact Us</h2>
       </div>
     </div>
   </div>
+  </div>
 
   <!-- FAQ section ends here -->
   <footer style="margin-top: 1.5rem; border-radius: 10px; color: #f3f4f6; text-align: center; width: 100%;">
     <div
-      style="background-color: #C4D7FF;display: flex;color: #f3f4f6;justify-content: space-evenly;position: relative;left: 2.5rem;">
+      style="display: flex;color: #f3f4f6;justify-content: space-evenly;position: relative;left: 2.5rem;">
 
       <!-- Quick Links Section -->
       <div>
@@ -925,7 +920,6 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
   </a>
 
   <div class="gtranslate_wrapper"></div>
-  <!-- <hr> -->
   <div
     style="background-color: #C4D7FF; color: #000000;border-top: 1px solid #333; display: flex; justify-content: center; align-items: center; padding: 10px 20px;">
     <strong>
@@ -938,8 +932,6 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
   <script src="preloader.js"></script>
 
   <script>
-
-
     function changeContent(page) {
       var links = document.querySelectorAll(".menu ul li a");
       links.forEach((link) => link.classList.remove("active"));
@@ -978,29 +970,6 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
     });
   </script>
 
-
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const faqButtons = document.querySelectorAll('.faq-question');
-
-      faqButtons.forEach(button => {
-        button.addEventListener('click', function () {
-          const faq = button.parentElement;
-          const answer = faq.querySelector('.faq-answer');
-
-          // Toggle active class
-          faq.classList.toggle('active');
-
-          // Control the max-height for slide effect
-          if (faq.classList.contains('active')) {
-            answer.style.maxHeight = answer.scrollHeight + 'px'; // Set the height based on content
-          } else {
-            answer.style.maxHeight = null; // Remove max-height to hide
-          }
-        });
-      });
-    })
-  </script>
   <script>
 
 
@@ -1089,20 +1058,14 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
         circle.style.left = `${x - 12}px`;
         circle.style.top = `${y - 12}px`;
         circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
-
-
         const nextCircle = circles[index + 1] || circles[0];
         circle.x = x;
         circle.y = y;
 
         x += (nextCircle.x - x) * 0.3;
         y += (nextCircle.y - y) * 0.3;
-
       });
-
       requestAnimationFrame(animateCircles);
-
-
       animateCircles();
     });
   </script>

From 1efd9fa2dd2b18f12ad8416694374b77bfb27d2e Mon Sep 17 00:00:00 2001
From: Rohit yadav <151960291+rohir1132yadav@users.noreply.github.com>
Date: Tue, 15 Oct 2024 12:17:05 +0530
Subject: [PATCH 10/14] apply hover effect and box shadow

i have apply the hover effect on button and navbar and apply box shadow
---
 index.html | 20 ++++++++++++++++++--
 style.css  |  1 +
 style1.css |  2 +-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3599c4b..b08ec3e 100644
--- a/index.html
+++ b/index.html
@@ -636,6 +636,18 @@
       display: block;
       /* Show on hover */
     }
+    .button:hover{
+      color:rgb(16, 14, 14);
+      background-color: #c91515;
+      box-shadow: 2px 2px 2px 2px rgb(255, 68, 0);
+      border-color: #c91515;
+    }
+    li a:hover{
+      box-shadow: 2px 2px 2px 2px rgb(0, 102, 255);
+      color: #6207ca;
+      background-color: #101215;
+      border-color: #c91515;
+    }
   </style>
 
 </head>
@@ -766,7 +778,8 @@ <h2>Meet the Team</h2>
             Learn more about our dedicated team working tirelessly to ensure
             efficient ambulance monitoring and resource management.
           </p>
-          <a href="team.html" class="button">Go to Team</a>
+          <h2>
+          <a href="team.html" class="button">Go to Team</a></h2>
         </div>
       </div>
 
@@ -930,11 +943,14 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
           <form action="#">
             <input type="email" placeholder="Your Email"
               style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
-            <button type="submit"
+            <button class="subscirbe" type="submit"
               style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
           </form>
         </div>
         <style>
+          .subscirbe:hover{
+            box-shadow: 2px 2px 2px 2px rgb(246, 67, 2);
+          }
           .hover-link {
             color: #000000;
             text-decoration: none;
diff --git a/style.css b/style.css
index ab85f99..1d3fde3 100644
--- a/style.css
+++ b/style.css
@@ -109,3 +109,4 @@ nav {
         display: flex; /* Show menu when toggled */
     }
 }
+
diff --git a/style1.css b/style1.css
index 0c3b7f8..e3d3c2c 100644
--- a/style1.css
+++ b/style1.css
@@ -415,4 +415,4 @@ pre {
     opacity: 1;
   }
 
-}
\ No newline at end of file
+}

From aefe01baa0e61c3cefaa8177c9db9771f9f33339 Mon Sep 17 00:00:00 2001
From: Khawaja Fashi Ud Din Abdullah <khawajafashi9623@gmail.com>
Date: Tue, 15 Oct 2024 11:50:03 +0500
Subject: [PATCH 11/14] Team

---
 team.html | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/team.html b/team.html
index 86be29f..62247ff 100644
--- a/team.html
+++ b/team.html
@@ -504,7 +504,7 @@ <h2>GPS Technician</h2>
 
     <!-- Contact Section in Full Row -->
     <div class="features-container">
-        < <div class="contact-features">
+        <div class="contact-features">
             <!-- Wrap the entire .inner div in an anchor tag to make it clickable -->
             <a href="contact.html" class="contact-feature-link">
                 <div class="inner">
@@ -673,9 +673,6 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
         });
 
         // end
-    </script>
-    <!-- Add this script block just before the closing </body> tag -->
-    <script>
         // Back to Top Button functionality
         document.addEventListener('DOMContentLoaded', function () {
             var backToTopBtn = document.getElementById("backToTopBtn");

From 467f55f045d62427926c451b887c3e11cbce0bcd Mon Sep 17 00:00:00 2001
From: Khawaja Fashi Ud Din Abdullah <khawajafashi9623@gmail.com>
Date: Tue, 15 Oct 2024 12:54:14 +0500
Subject: [PATCH 12/14] Dark mode

---
 index.html | 51 ++++++++++++++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 5bfb91b..7bdaa98 100644
--- a/index.html
+++ b/index.html
@@ -522,7 +522,14 @@
     .dark-mode {
       background-color: black;
       /* Dark mode navbar */
-      color: white;
+      /* color: white; */
+    }
+    .dark-mode .main_content p{
+      color: wheat;
+    }
+    .dark-mode .content h1{
+      color: wheat;
+
     }
 
     /* more addition for dark mode theme */
@@ -533,14 +540,9 @@
     }
 
     /* dark mode hove effect on logo */
-    .dark-mode #logo img:hover {
-      filter: brightness(0) invert(1);
-      /* Change black logo to white */
-      filter: brightness(0.8);
-      /* Change the brightness to light grey on hover */
-    }
 
-    .navbar.dark-mode .logo-img {
+
+    .dark-mode .logo-img {
       filter: brightness(0) invert(1);
       /* Change logo color in dark mode */
     }
@@ -553,9 +555,19 @@
     }
 
     .dark-mode .menu a {
+      color: black;
+      /* Dark mode link color */
+      /* Light grey border in dark mode */
+    }
+    .dark-mode .menu a.active {
       color: white;
       /* Dark mode link color */
-      border: 1px solid lightgrey;
+      /* Light grey border in dark mode */
+    }
+    .dark-mode .menu a.active:before {
+      color: white;
+      background: none;
+      /* Dark mode link color */
       /* Light grey border in dark mode */
     }
 
@@ -564,16 +576,14 @@
       /* Slightly gray background with high opacity */
     }
 
-    .dark-mode .menu a:hover {
-      background-color: white;
-      /* White background on hover in dark mode */
-      color: black;
-      /* Black text on hover in dark mode */
-    }
 
     .light-dark-btn {
       background-color: transparent;
-      border: 1px solid black;
+      border: none;
+      position: fixed;
+      z-index: 1111;
+      right: 1rem;
+      bottom: 1rem;
       /* Black border */
       cursor: pointer;
       color: black;
@@ -588,12 +598,12 @@
     .dark-mode .light-dark-btn {
       color: white;
       /* Button color in dark mode */
-      border: 1px solid lightgrey;
+      /* border: 1px solid lightgrey; */
       /* Light grey border */
     }
 
     .dark-mode .light-dark-btn:hover {
-      background-color: white;
+      /* background-color: white; */
       /* Background on hover in dark mode */
       color: black;
       /* Text color on hover in dark mode */
@@ -834,7 +844,7 @@ <h2>Contact Us</h2>
   </div>
 
   <!-- FAQ section ends here -->
-  <footer style="margin-top: 1.5rem; border-radius: 10px; color: #f3f4f6; text-align: center; width: 100%;">
+  <footer style="margin-top: 1.5rem; color: #f3f4f6; text-align: center; width: 100%;">
     <div
       style="display: flex;color: #f3f4f6;justify-content: space-evenly;position: relative;left: 2.5rem;">
 
@@ -918,6 +928,9 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
       </button>
     </div>
   </a>
+  <button class="light-dark-btn dark-mode-toggle" id="dark-mode-button">
+    <i class="fa-solid fa-moon"></i>
+  </button>
 
   <div class="gtranslate_wrapper"></div>
   <div

From f377e5f3e507cfecab42d180777b1869432c828c Mon Sep 17 00:00:00 2001
From: Md Afzal Mir <108697331+4F24L@users.noreply.github.com>
Date: Tue, 15 Oct 2024 14:41:56 +0530
Subject: [PATCH 13/14] faq footer alignment solved (#776)

---
 index.html | 7 +------
 style1.css | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index b08ec3e..89e5723 100644
--- a/index.html
+++ b/index.html
@@ -798,11 +798,6 @@ <h2>Contact Us</h2>
     </div>
   </div>
 
-  <footer>
-    <div class="footer-container">
-      <div class="footer-contents" style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
-
-
 
   <!-- FAQ Section in Full Row -->
 
@@ -1181,7 +1176,7 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
     </div>
   </a>
   
-  <div class="gtranslate_wrapper"></div>
+  <!-- <div class="gtranslate_wrapper"></div> -->
   <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
   <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 </body>
diff --git a/style1.css b/style1.css
index e3d3c2c..9cb8610 100644
--- a/style1.css
+++ b/style1.css
@@ -287,7 +287,7 @@ h1 {
 
 footer {
   text-align: center;
-  display: flex;
+  
   flex-wrap: wrap;
   justify-content: space-between;
   background-color: #fff5f5;

From 29870e0f03a7ef16318d9214ab3f9f54423375da Mon Sep 17 00:00:00 2001
From: Ankul Maddheshiya <ankulmaddheshiyanew@gmail.com>
Date: Tue, 15 Oct 2024 16:57:09 +0530
Subject: [PATCH 14/14] Update index.html

adding media Quiery at 640px
---
 index.html | 37 ++++++++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 6ea853c..8dd323e 100644
--- a/index.html
+++ b/index.html
@@ -288,10 +288,29 @@
       /* Icon color change to rgb(16, 13, 195) on hover */
     }
 
+
+
+    @media (max-width: 640px){
+
+      .quick{
+        padding-left: 20%;
+        text-decoration: underline;
+      }
+      .followm{
+     padding-left: 40%;
+      }
+      .socialicon{
+        padding-left: 30%;
+      }
+      .contm{
+        margin-right: 5%;
+      }
+
+    }
     @media (max-width:966px) {
       label.logo {
         font-size: 30px;
-        padding-left: 50px;
+        padding-left: 70px;
       }
     }
 
@@ -905,11 +924,11 @@ <h2>Contact Us</h2>
         min-width: 200px; 
         margin-bottom: 20px;
         padding-left: 20px;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
+          <h3 class="quick"   style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
           <ul style="list-style-type: none; padding: 0;">
             <li><a href="about.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
                 onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li>
-            <li><a href="contact.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
+            <li><a class="contactm" href="contact.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
                 onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li>
             <li><a href="privacy.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;"
                 onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li>
@@ -927,9 +946,9 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links<
         <div style="flex: 1; 
         min-width: 200px; 
         margin-bottom: 10px;">
-          <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
+          <h3   class="contm"  style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
           <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
-          <a href="mailto:emergency@ambulanceservice.in" style="color: #000000; background:none; cursor: pointer;"
+          <a href="mailto:emergency@ambulanceservice.in" style="color: #000000; background:none;  font-size: 90%; cursor: pointer;"
             onmouseover="this.style.color='blue'"
             onmouseout="this.style.color='black'">emergency@ambulanceservice.in</a></p>
           <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000; background: none;"
@@ -939,8 +958,8 @@ <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
         <!-- Modified the looks of the social icons -->
         <!-- Social Media Links -->
         <div style="text-align: center; min-width: 200px; color: black;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-          <div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
+          <h3  class="followm" style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
+          <div   class="socialicon"  style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
             <a href="https://www.facebook.com" class="social-icon facebook no-hover-effect"
               style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
             <a href="https://www.twitter.com" class="social-icon twitter no-hover-effect"
@@ -1009,6 +1028,10 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
       ">↑</button>
     </div>
   </footer>
+
+
+
+
   <script src="preloader.js"></script>
 
   <script>