diff --git a/Feedback.html b/Feedback.html
index 8fb9ce6..5fea1d0 100644
--- a/Feedback.html
+++ b/Feedback.html
@@ -8,23 +8,16 @@
   <link rel="stylesheet" href="preloaderStyle.css">
 
   <link rel="stylesheet" href="src/css/index.css">
+  <link rel="stylesheet" href="src/css/navbar.css">
   <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>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>
   <style>
     body {
-      font-family: "Poppins", sans-serif;
-      background-color: #f4f4f4;
-      margin: 0;
-      padding: 0;
-      color: #333;
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
+      background-color: white;
     }
 
-
     /* font size of button */
     .buttons .login,
     .buttons .get-started,
@@ -35,31 +28,6 @@
       /* 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:  rgb(148 207 226);
-      /* 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 {
@@ -67,110 +35,20 @@
       /* 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 h3{
+      color: wheat;
+    }
     .dark-mode .content {
       background-color: rgba(50, 50, 50, 0.95);
       /* Match body background opacity */
-      padding: 20px;
+      /* padding: 20px; */
       /* Optional: add padding for better spacing */
     }
 
@@ -187,12 +65,11 @@
     }
 
     .content {
-      margin: 15px;
-      padding: 15px;
-      background-color: #fff;
+      margin: 2rem 3rem;
+      padding: 4rem 1rem;
+      /* width: 90vw; */
+      background-color: #f7f5f5;
       border-radius: 5px;
-      flex-grow: 1;
-
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -205,10 +82,10 @@
       color: blue;
     }
 
-    h2 {
-
+    h3 {
       text-align: center;
       color: #2c3e50;
+      margin-bottom: 1rem;
     }
 
 
@@ -256,10 +133,6 @@
       /* Smooth transition */
     }
 
-    button:hover {
-      background-color: #e64a19;
-    }
-
     textarea {
       width: 100%;
       /* Full width for better usability */
@@ -301,12 +174,6 @@
       color: rgb(16, 13, 195);
       /* Icon color change to rgb(16, 13, 195) on hover */
     }
-    ul li a:hover{
-      color: blue !important;
-    }
-    a:hover{
-      color: blue !important;
-    }
 
     @keyframes logoAnimation {
       0% {
@@ -327,50 +194,6 @@
       }
     }
 
-    /* Letter Drop Animation */
-    @keyframes letterDrop {
-      0% {
-        transform: translateY(-100%);
-        opacity: 0;
-      }
-
-      50% {
-        transform: translateY(10px);
-        /* Slight bounce */
-        opacity: 1;
-      }
-
-      100% {
-        transform: translateY(0);
-      }
-    }
-
-    .logo {
-      display: flex;
-      align-items: center;
-      animation: logoAnimation 1s ease forwards;
-    }
-
-    .brand-name {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-right: 10px;
-      /* Space between the text and the logo image */
-    }
- 
-    .letter {
-
-      display:  inline-block;
-      font-size:  2rem;
-      animation:  letterDrop 0.5s ease forwards;
-      animation-delay:  calc(var(--letter-index) * 0.1s);
-
-    }
- 
-    .red {
-      color: red;
-    }
 
     .social-icon {
       transition: transform 0.3s ease;
@@ -440,19 +263,6 @@
       outline: none;
     }
 
-    .circle {
-      height: 35px;
-      width: 35px;
-      border-radius: 24px;
-      background-color: black;
-      position: fixed;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      z-index: 99999999;
-    }
-
-
     #thank-you-message {
       text-align: center;
       display: none;
@@ -470,141 +280,13 @@
       font-weight: 500;
       color: green;
     }
-
-    /* Add this new CSS for the cursor effect */
-    .circle-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 9999;
-    }
-
-    .circle {
-      position: absolute;
-      width: 25px;
-      height: 25px;
-      border-radius: 50%;
-      pointer-events: none;
-      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;
-    }
-
-    #backToTopBtn {
-      display: none;
-      /* Hidden by default */
-      position: fixed;
-      bottom: 20px;
-      right: 30px;
-      z-index: 99;
-      font-size: 18px;
-      border: none;
-      outline: none;
-      background-color: #e81a1a;
-      color: white;
-      cursor: pointer;
-      padding: 15px;
-      border-radius: 4px;
-    }
-
-    #backToTopBtn:hover {
-      background-color: #555;
-    }
-
-    .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;
-    }
-
-    /* Adjust the header buttons to accommodate the new translate button */
-    .buttons {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-
-    .chatbot-container {
-      position: fixed;
-      transition: right 0.3s ease;
-      bottom: 20px;
-      right: 7rem;
-      z-index: 1000;
-    }
-
-    .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 */
-      right: -60px;
-    }
-
-    .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 */
-    }
-
-    .chatbot-button:hover .tooltip-text {
-      display: block;
-      /* Show on hover */
-    }
   </style>
 </head>
 
 
+<body>
 
-<header class="navbar">
-  <!-- preloader -->
+  <!-- pre loader -->
   <div id="preloader">
     <div class="wrapper">
       <div class="box-wrap">
@@ -617,7 +299,9 @@
       </div>
     </div>
   </div>
-  <div class="container">
+
+  <div class="container" id="container">
+
     <div class="logo">
       <div class="brand-name">
         <span class="letter red" style="--letter-index: 1;">A</span>
@@ -629,47 +313,52 @@
         <span class="letter" style="--letter-index: 7;">o</span>
         <span class="letter" style="--letter-index: 8;">w</span>
       </div>
-      <a href="./index.html" >
-      <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
-      </a>
+      <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 80px; height: auto" />
     </div>
     <nav class="menu">
       <ul>
-        <li><a href="index.html" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i>
-            Home</a></li>
-        <li><a href="features.html" id="features-link" onclick="changeContent('features')"><i
-              class="fa-solid fa-file"></i> Features</a></li>
-        <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i>
-            Team</a></li>
-        <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i
-              class="fa-solid fa-phone"></i> Contact</a></li>
-        <li><a href="Feedback.html" id="Feedback-link" onclick="changeContent('Feedback')"><i
-              class="fa-solid fa-clipboard"></i> Feedback</a></li>
+        <li>
+          <a href="#container" style="color: #333;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711" stroke="currentColor">
+              </path>
+            </svg>
+          </a>
+        </li>
+        <li>
+          <a href="index.html" id="home-link" class="menu_links" data-link="Home">
+            <span>Home</span>
+          </a>
+        </li>
+        <li>
+          <a href="features.html" id="features-link" class="menu_links" data-link="Features">
+            <span>Features</span></a>
+        </li>
+        <li>
+          <a href="team.html" id="team-link" class="menu_links" data-link="Team">
+            <span>Team</span></a>
+        </li>
+        <li>
+          <a href="contact.html" id="contact-link" class="menu_links" data-link="Contact">
+            <span>Contact</span></a>
+        </li>
+        <li>
+          <a href="feedback.html" id="feedback-link" class="menu_links" data-link="Feedback">
+            <span>Feedback</span></a>
+        </li>
+        <li>
+          <a href="nearby.html" id="nearby-link" class="menu_links" data-link="Nearby">
+            <span>Nearby</span></a>
+        </li>
       </ul>
     </nav>
-    <div class="buttons">
-
-      
 
-      <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
-        <i class="fa-solid fa-moon"></i>
-      </button>
-
-      <a href="login.html" class="login">Log in</a>
-      <a href="up.html" class="get-started">Get started</a>
-    </div>
   </div>
-</header>
-
-
-<body>
-  <header>
 
-    <h1>AmbuFlow Feedback</h1>
-
-  </header>
 
   <div class="content">
+    <h1 style="margin-bottom: 1rem;">AmbuFlow Feedback</h1>
+
     <h3>We Value Your Feedback</h3>
     <div class="feedback-box">
       <form id="feedback-box" action="#" method="post">
@@ -697,7 +386,7 @@ <h3>We Value Your Feedback</h3>
 
 
 
-  <footer style=" color: #f3f4f6; text-align: center; width: 100%;">
+  <footer style=" color: #f3f4f6; text-align: center; width: 100%; padding-top: 3rem;">
     <div style="background-color: #C4D7FF; color: #f3f4f6; ">
       <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
 
@@ -753,349 +442,94 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
 
     </div>
     <hr>
-    <!-- Copyright Section -->
-    <div
-      style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: center; align-items: center; padding: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: absolute;
-        right: 0;
-      ">↑</button>
-    </div>
   </footer>
-<!-- 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"
-    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">
-      <div class="faq-item">
-        <h3>What is AmbuFlow?</h3>
-        <p>AmbuFlow is an advanced ambulance monitoring system designed to optimize emergency response times and improve
-          patient care.</p>
-      </div>
-      <div class="faq-item">
-        <h3>How does real-time tracking work?</h3>
-        <p>Our system uses GPS technology to track ambulances in real-time, allowing for efficient dispatch and route
-          optimization.</p>
+  <!-- Copyright Section -->
+  <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>
+    <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>
-      <div class="faq-item">
-        <h3>Is the service available 24/7?</h3>
-        <p>Yes, AmbuFlow operates round the clock to ensure emergency services are always available when needed.</p>
-      </div>
-      <div class="faq-item">
-        <h3>How can hospitals benefit from AmbuFlow?</h3>
-        <p>Hospitals can improve resource management, reduce response times, and enhance overall patient care through
-          our integrated system.</p>
+    </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>
+    
+    <!-- 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"
+      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">
+        <div class="faq-item">
+          <h3>What is AmbuFlow?</h3>
+          <p>AmbuFlow is an advanced ambulance monitoring system designed to optimize emergency response times and
+            improve
+            patient care.</p>
+        </div>
+        <div class="faq-item">
+          <h3>How does real-time tracking work?</h3>
+          <p>Our system uses GPS technology to track ambulances in real-time, allowing for efficient dispatch and route
+            optimization.</p>
+        </div>
+        <div class="faq-item">
+          <h3>Is the service available 24/7?</h3>
+          <p>Yes, AmbuFlow operates round the clock to ensure emergency services are always available when needed.</p>
+        </div>
+        <div class="faq-item">
+          <h3>How can hospitals benefit from AmbuFlow?</h3>
+          <p>Hospitals can improve resource management, reduce response times, and enhance overall patient care through
+            our integrated system.</p>
+        </div>
       </div>
+      <!-- Add close button for FAQ Popup -->
+      <button id="closeFaqPopup" style="margin-top: 20px;">Close</button>
     </div>
-    <!-- Add close button for FAQ Popup -->
-    <button id="closeFaqPopup" style="margin-top: 20px;">Close</button>
-</div>
-
-<!-- Add this div for the translator popup -->
-<div id="gTranslate" class="g-translate-popup" style="display:none;">
-  <div class="gtranslate_wrapper"></div>
-</div>
-
-<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>
-
-<script src="preloader.js"></script>
-
-
-<!--  -->
-<script>
-  // Back to top button functionality
-  const backToTopButton = document.getElementById('backToTopBtn');
-
-<<<<<<< HEAD
-  <script src="preloader.js"></script>
-
-  <script>
-
-    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");
+    
+    <script src="preloader.js"></script>
+    <script src="script.js"></script>
+    
+    <script>
 
-      toggleButton.addEventListener('click', function () {
-        document.body.classList.toggle('dark-mode');
-        navbar.classList.toggle('dark-mode'); // Toggle dark mode for navbar
+      // FAQ Popup functionality
+      const faqButton = document.getElementById('faqButton');
+      const faqPopup = document.getElementById('faqPopup');
+      const closeFaqPopup = document.getElementById('closeFaqPopup');
 
-        // 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
-        }
+      faqButton.addEventListener('click', () => {
+        faqPopup.style.display = 'block';
+      });
 
+      closeFaqPopup.addEventListener('click', () => {
+        faqPopup.style.display = 'none';
       });
-    });
-
-    // 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
+
+      // Close popup when clicking outside
+      window.addEventListener('click', (event) => {
+        if (event.target === faqPopup) {
+          faqPopup.style.display = 'none';
         }
       });
-    });
-
-    // 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';
-
-      // Hide the form to avoid further submissions
-      form.style.display = 'none';
-
-      // Redirect to the home page after 2 seconds
-      setTimeout(function () {
-        window.location.href = 'index.html';
-      }, 5000); // Adjust the delay as needed
-    });
-
-    // 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;
-    });
-
-    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;
-
-        circle.x = x;
-        circle.y = y;
-
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
-
-      requestAnimationFrame(animateCircles);
-=======
-  // 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";
->>>>>>> c3e6128543c5c7da4acc09c472a624a52adb1043
-    }
-  };
-
-  // Scroll to top when the button is clicked
-  backToTopButton.addEventListener('click', () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  });
-</script>
-
-
-<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
-      }
-    });
-  });
-
-  // FAQ Popup functionality
-  const faqButton = document.getElementById('faqButton');
-  const faqPopup = document.getElementById('faqPopup');
-  const closeFaqPopup = document.getElementById('closeFaqPopup');
-
-  faqButton.addEventListener('click', () => {
-    faqPopup.style.display = 'block';
-  });
-
-  closeFaqPopup.addEventListener('click', () => {
-    faqPopup.style.display = 'none';
-  });
-
-  // Close popup when clicking outside
-  window.addEventListener('click', (event) => {
-    if (event.target === faqPopup) {
-      faqPopup.style.display = 'none';
-    }
-  });
-
-  // Show/hide buttons when user scrolls
-  window.onscroll = function () {
-    const backToTopBtn = document.getElementById('backToTopBtn');
-    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() {
-    gTranslate.style.display = gTranslate.style.display === 'none' ? 'block' : 'none';
-  });
+    </script>
 
-  // 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>
-
-<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>
-});
-    
-    window.addEventListener('click', (event) => {
-      if (event.target === faqPopup) {
-        faqPopup.style.display = 'none';
-      }
-    });
-  </script>
 
+    <!-- Add this if it's not already present -->
+    <div class="circle"></div>
+  </body>
 
-  <!-- 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>
+</html>
\ No newline at end of file
diff --git a/Firebase.js b/Firebase.js
new file mode 100644
index 0000000..0c39d4e
--- /dev/null
+++ b/Firebase.js
@@ -0,0 +1,39 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
+import { getAuth, GoogleAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+    apiKey: "AIzaSyBKWr4Q0_bTP-9-dnviFlyesJITE1K9LxI",
+    authDomain: "bobble-ai-6c878.firebaseapp.com",
+    projectId: "bobble-ai-6c878",
+    storageBucket: "bobble-ai-6c878.appspot.com",
+    messagingSenderId: "389012742453",
+    appId: "1:389012742453:web:f212dbd734d078e5b02c7c"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+auth.languageCode = 'en';
+const provider = new GoogleAuthProvider();
+
+const google_login = document.getElementById("google_btn")
+google_login.addEventListener('click', () => {
+    signInWithPopup(auth, provider)
+        .then((result) => {
+            // This gives you a Google Access Token. You can use it to access the Google API.
+            const credential = GoogleAuthProvider.credentialFromResult(result);
+            // The signed-in user info.
+            const user = result.user;
+            console.log(user)
+            window.location.href = "index.html"
+        }).catch((error) => {
+            // Handle Errors here.
+            const errorCode = error.code;
+            const errorMessage = error.message;
+            // ...
+        });
+})
\ No newline at end of file
diff --git a/chatbot.html b/chatbot.html
index 5b2ab47..77aa4bd 100644
--- a/chatbot.html
+++ b/chatbot.html
@@ -130,7 +130,7 @@
     }
     </style>
 
-    <script type="importmap">
+  <script type="importmap">
       {
         "imports": {
           "@google/generative-ai": "https://esm.run/@google/generative-ai"
@@ -138,253 +138,254 @@
       }
     </script>
 
-    <script type="module">
-      import {
-        GoogleGenerativeAI,
-        HarmBlockThreshold,
-        HarmCategory,
-      } from "@google/generative-ai";
+  <script type="module">
+    import {
+      GoogleGenerativeAI,
+      HarmBlockThreshold,
+      HarmCategory,
+    } from "@google/generative-ai";
 
-      const API_KEY = "AIzaSyBF265bY6o63VuPypal-5w0-b7sr0N_O3A"; // Replace with your gemini-api actual API key
-      const genAI = new GoogleGenerativeAI(API_KEY);
-      let chat;
+    const API_KEY = "AIzaSyBF265bY6o63VuPypal-5w0-b7sr0N_O3A"; // Replace with your gemini-api actual API key
+    const genAI = new GoogleGenerativeAI(API_KEY);
+    let chat;
 
-      const safetySettings = [
-        {
-          category: HarmCategory.HARM_CATEGORY_HARASSMENT,
-          threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
-        },
-      ];
+    const safetySettings = [
+      {
+        category: HarmCategory.HARM_CATEGORY_HARASSMENT,
+        threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
+      },
+    ];
 
-      async function fileToGenerativePart(file) {
-        return new Promise((resolve) => {
-          const reader = new FileReader();
-          reader.onloadend = () => {
-            const base64Data = reader.result.split(",")[1];
-            resolve({ inlineData: { data: base64Data, mimeType: file.type } });
-          };
-          reader.readAsDataURL(file);
+    async function fileToGenerativePart(file) {
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const base64Data = reader.result.split(",")[1];
+          resolve({ inlineData: { data: base64Data, mimeType: file.type } });
+        };
+        reader.readAsDataURL(file);
+      });
+    }
+
+    async function sendMessage(prompt, imageParts = []) {
+      let model;
+      let result;
+      clearGreeting(); // Clear the greeting after sending the message
+
+      if (imageParts.length > 0) {
+        model = genAI.getGenerativeModel({
+          model: "gemini-pro-vision",
+          safetySettings,
         });
+      } else {
+        if (!chat) {
+          chat = await genAI
+            .getGenerativeModel({ model: "gemini-pro", safetySettings })
+            .startChat({
+              history: [],
+              generationConfig: {
+                maxOutputTokens: 4000, // maxOutputTokens Limit around 4096
+              },
+            });
+        }
+        model = chat;
       }
 
-      async function sendMessage(prompt, imageParts = []) {
-        let model;
-        let result;
-        clearGreeting(); // Clear the greeting after sending the message
-
+      try {
         if (imageParts.length > 0) {
-          model = genAI.getGenerativeModel({
-            model: "gemini-pro-vision",
-            safetySettings,
-          });
+          result = await model.generateContent([prompt, ...imageParts]);
         } else {
-          if (!chat) {
-            chat = await genAI
-              .getGenerativeModel({ model: "gemini-pro", safetySettings })
-              .startChat({
-                history: [],
-                generationConfig: {
-                  maxOutputTokens: 4000, // maxOutputTokens Limit around 4096
-                },
-              });
-          }
-          model = chat;
+          result = await model.sendMessage(prompt);
         }
 
-        try {
-          if (imageParts.length > 0) {
-            result = await model.generateContent([prompt, ...imageParts]);
-          } else {
-            result = await model.sendMessage(prompt);
-          }
-
-          const response = await result.response;
-          if (response) {
-            const text = await response.text();
-            displayMessage(text, "ai");
-          } else {
-            // This block handles a null response, suggesting blocked content
-            displayMessage(
-              "This content is not safe for display based on current settings.",
-              "ai"
-            );
-          }
-        } catch (error) {
-          console.error("Error during message generation:", error);
+        const response = await result.response;
+        if (response) {
+          const text = await response.text();
+          displayMessage(text, "ai");
+        } else {
+          // This block handles a null response, suggesting blocked content
           displayMessage(
-            "This content is not safe for display based on current settings. or an internal error.",
+            "This content is not safe for display based on current settings.",
             "ai"
           );
         }
-        clearInputs();
-      }
-
-      function displayMessage(message, sender) {
-        const outputContainer = document.getElementById("output-container");
-        const msgDiv = document.createElement("div");
-        msgDiv.classList.add(
-          "chat-message",
-          sender === "user" ? "user-message" : "ai-message"
+      } catch (error) {
+        console.error("Error during message generation:", error);
+        displayMessage(
+          "This content is not safe for display based on current settings. or an internal error.",
+          "ai"
         );
+      }
+      clearInputs();
+    }
 
-        if (sender === "ai") {
-          // Show loading animation for AI messages
-          msgDiv.innerHTML =
-            '<div class="loading">' +
-            '<div class="loading-dot"></div>' +
-            '<div class="loading-dot"></div>' +
-            '<div class="loading-dot"></div>' +
-            "</div>";
-          outputContainer.appendChild(msgDiv);
-
-          // Simulate processing delay
-          setTimeout(() => {
-            // Clear loading animation
-            msgDiv.innerHTML = "";
-
-            if (message.startsWith("```") && message.endsWith("```")) {
-              // Code block handling
-              const codeContent = message.substring(3, message.length - 3);
-              const escapedCode = codeContent
-                .replace(/</g, "&lt;")
-                .replace(/>/g, "&gt;");
-              msgDiv.innerHTML = `<pre><code class="hljs">${escapedCode}</code></pre>`;
-              window.hljs.highlightBlock(msgDiv.querySelector("code"));
-
-              // Add Copy button
-              const copyButton = document.createElement("button");
-              copyButton.innerText = "Copy code";
-              copyButton.onclick = function () {
-                navigator.clipboard.writeText(codeContent).then(
-                  () => {
-                    // Change text to show confirmation instead of using alert
-                    copyButton.innerText = "Copied!";
-                    // Optional: revert the button text back to "Copy code" after 2 seconds
-                    setTimeout(() => {
-                      copyButton.innerText = "Copy code";
-                    }, 2000);
-                  },
-                  (err) => {
-                    console.error("Failed to copy text: ", err);
-                  }
-                );
-              };
+    function displayMessage(message, sender) {
+      const outputContainer = document.getElementById("output-container");
+      const msgDiv = document.createElement("div");
+      msgDiv.classList.add(
+        "chat-message",
+        sender === "user" ? "user-message" : "ai-message"
+      );
 
-              msgDiv.appendChild(copyButton);
-            } else {
-              // For regular messages
-              msgDiv.innerHTML = marked.parse(message);
-            }
+      if (sender === "ai") {
+        // Show loading animation for AI messages
+        msgDiv.innerHTML =
+          '<div class="loading">' +
+          '<div class="loading-dot"></div>' +
+          '<div class="loading-dot"></div>' +
+          '<div class="loading-dot"></div>' +
+          "</div>";
+        outputContainer.appendChild(msgDiv);
 
-            // Scroll the output container to the bottom to ensure the latest message is visible
-            outputContainer.scrollTop = outputContainer.scrollHeight;
-          }, 1500); // Adjust the delay as needed
-        } else {
-          // User messages are displayed immediately without the loading animation
-          msgDiv.innerHTML =
-            message.startsWith("```") && message.endsWith("```")
-              ? `<pre><code class="hljs">${message.substring(
-                  3,
-                  message.length - 3
-                )}</code></pre>`
-              : marked.parse(message);
+        // Simulate processing delay
+        setTimeout(() => {
+          // Clear loading animation
+          msgDiv.innerHTML = "";
 
-          // If it's a code block, enable syntax highlighting and add a copy button
           if (message.startsWith("```") && message.endsWith("```")) {
-            const codeBlock = msgDiv.querySelector("pre code");
-            window.hljs.highlightBlock(codeBlock);
+            // Code block handling
+            const codeContent = message.substring(3, message.length - 3);
+            const escapedCode = codeContent
+              .replace(/</g, "&lt;")
+              .replace(/>/g, "&gt;");
+            msgDiv.innerHTML = `<pre><code class="hljs">${escapedCode}</code></pre>`;
+            window.hljs.highlightBlock(msgDiv.querySelector("code"));
+
+            // Add Copy button
             const copyButton = document.createElement("button");
             copyButton.innerText = "Copy code";
             copyButton.onclick = function () {
-              navigator.clipboard.writeText(codeBlock.textContent).then(
+              navigator.clipboard.writeText(codeContent).then(
                 () => {
-                  alert("Code copied to clipboard!");
+                  // Change text to show confirmation instead of using alert
+                  copyButton.innerText = "Copied!";
+                  // Optional: revert the button text back to "Copy code" after 2 seconds
+                  setTimeout(() => {
+                    copyButton.innerText = "Copy code";
+                  }, 2000);
                 },
                 (err) => {
-                  alert("Failed to copy text: ", err);
+                  console.error("Failed to copy text: ", err);
                 }
               );
             };
+
             msgDiv.appendChild(copyButton);
+          } else {
+            // For regular messages
+            msgDiv.innerHTML = marked.parse(message);
           }
 
-          outputContainer.appendChild(msgDiv);
+          // Scroll the output container to the bottom to ensure the latest message is visible
+          outputContainer.scrollTop = outputContainer.scrollHeight;
+        }, 1500); // Adjust the delay as needed
+      } else {
+        // User messages are displayed immediately without the loading animation
+        msgDiv.innerHTML =
+          message.startsWith("```") && message.endsWith("```")
+            ? `<pre><code class="hljs">${message.substring(
+              3,
+              message.length - 3
+            )}</code></pre>`
+            : marked.parse(message);
+
+        // If it's a code block, enable syntax highlighting and add a copy button
+        if (message.startsWith("```") && message.endsWith("```")) {
+          const codeBlock = msgDiv.querySelector("pre code");
+          window.hljs.highlightBlock(codeBlock);
+          const copyButton = document.createElement("button");
+          copyButton.innerText = "Copy code";
+          copyButton.onclick = function () {
+            navigator.clipboard.writeText(codeBlock.textContent).then(
+              () => {
+                alert("Code copied to clipboard!");
+              },
+              (err) => {
+                alert("Failed to copy text: ", err);
+              }
+            );
+          };
+          msgDiv.appendChild(copyButton);
         }
 
-        // Ensure the latest message is visible
-        outputContainer.scrollTop = outputContainer.scrollHeight;
+        outputContainer.appendChild(msgDiv);
       }
 
-      function clearInputs() {
-        document.getElementById("prompt-input").value = "";
-        document.getElementById("image-input").value = "";
-        clearImagePreview();
-      }
+      // Ensure the latest message is visible
+      outputContainer.scrollTop = outputContainer.scrollHeight;
+    }
 
-      document
-        .getElementById("generate-btn")
-        .addEventListener("click", async () => {
-          const prompt = document.getElementById("prompt-input").value;
-          const files = document.getElementById("image-input").files;
-          const imageParts = await Promise.all(
-            [...files].map(fileToGenerativePart)
-          );
-          if (prompt.trim() !== "") {
-            displayMessage(prompt, "user");
-            await sendMessage(prompt, imageParts);
-          }
-        });
+    function clearInputs() {
+      document.getElementById("prompt-input").value = "";
+      document.getElementById("image-input").value = "";
+      clearImagePreview();
+    }
 
-      function clearGreeting() {
-        const outputField = document.getElementById("output-field");
-        if (outputField) {
-          outputField.style.display = "none"; // Hide the field completely
+    document
+      .getElementById("generate-btn")
+      .addEventListener("click", async () => {
+        const prompt = document.getElementById("prompt-input").value;
+        const files = document.getElementById("image-input").files;
+        const imageParts = await Promise.all(
+          [...files].map(fileToGenerativePart)
+        );
+        if (prompt.trim() !== "") {
+          displayMessage(prompt, "user");
+          await sendMessage(prompt, imageParts);
         }
-      }
+      });
 
-      document
-        .getElementById("image-input")
-        .addEventListener("change", function (event) {
-          const [file] = event.target.files;
-          if (file) {
-            const reader = new FileReader();
-            reader.onload = function (e) {
-              const previewContainer = document.getElementById("image-preview");
-              const previewImage =
-                previewContainer.getElementsByTagName("img")[0];
-              previewImage.src = e.target.result;
-              previewContainer.style.display = "flex";
-            };
-            reader.readAsDataURL(file);
-          }
-        });
+    function clearGreeting() {
+      const outputField = document.getElementById("output-field");
+      if (outputField) {
+        outputField.style.display = "none"; // Hide the field completely
+      }
+    }
 
-      document
-        .getElementById("clear-image")
-        .addEventListener("click", function () {
-          // Clear the preview
-          const previewContainer = document.getElementById("image-preview");
-          const previewImage = previewContainer.getElementsByTagName("img")[0];
-          previewImage.src = "";
-          previewContainer.style.display = "none";
-          // Clear the file input
-          document.getElementById("image-input").value = "";
-        });
+    document
+      .getElementById("image-input")
+      .addEventListener("change", function (event) {
+        const [file] = event.target.files;
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = function (e) {
+            const previewContainer = document.getElementById("image-preview");
+            const previewImage =
+              previewContainer.getElementsByTagName("img")[0];
+            previewImage.src = e.target.result;
+            previewContainer.style.display = "flex";
+          };
+          reader.readAsDataURL(file);
+        }
+      });
 
-      function clearImagePreview() {
+    document
+      .getElementById("clear-image")
+      .addEventListener("click", function () {
+        // Clear the preview
         const previewContainer = document.getElementById("image-preview");
-        if (previewContainer) {
-          const previewImage = previewContainer.getElementsByTagName("img")[0];
-          previewImage.src = "";
-          previewContainer.style.display = "none";
-        }
-      }
-    </script>
-    <script>
-      var loader = document.getElementById("Loader");
-      window.addEventListener("load", function () {
-        loader.style.display = "none";
+        const previewImage = previewContainer.getElementsByTagName("img")[0];
+        previewImage.src = "";
+        previewContainer.style.display = "none";
+        // Clear the file input
+        document.getElementById("image-input").value = "";
       });
-    </script>
-  </body>
-</html>
+
+    function clearImagePreview() {
+      const previewContainer = document.getElementById("image-preview");
+      if (previewContainer) {
+        const previewImage = previewContainer.getElementsByTagName("img")[0];
+        previewImage.src = "";
+        previewContainer.style.display = "none";
+      }
+    }
+  </script>
+  <script>
+    var loader = document.getElementById("Loader");
+    window.addEventListener("load", function () {
+      loader.style.display = "none";
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/contact.html b/contact.html
index 13da930..e7da191 100644
--- a/contact.html
+++ b/contact.html
@@ -6,25 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Contact</title>
     <link rel="stylesheet" href="src/css/index.css">
+    <link rel="stylesheet" href="src/css/navbar.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 {
-            font-family: Arial, sans-serif,'Times New Roman', Times, serif;
-            background-color: #f4f4f4;
-            margin: 0;
-            padding: 0;
-            color: #333;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-        }
-
         /* font size of button */
         .buttons .login,
         .buttons .get-started,
@@ -35,129 +22,13 @@
             /* 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: rgb(148 207 226);
-            /* Light mode navbar */
-            color:  black;
-            padding:  10px;
-
-        }
- 
-        .navbar.dark-mode {
-            background-color: black;
-            /* Dark mode navbar */
-            color: rgba(255, 255, 255, 0.943);
-        }
-
         /* more addition for dark mode theme */
 
         .dark-mode .logo img {
-            filter: brightness(10) invert(1);
-            /* Inverts the color to make it white */
-        }
-
-        /* dark mode hove effect on logo */
-        body.dark-mode #logo img:hover {
-            filter: brightness(10) 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: rgb(10, 61, 212);
-            /* 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(30, 29, 29, 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: rgb(5, 5, 217);
-            /* 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;
+            /* Inverts the color to make it white */
         }
 
-
         /* end */
         /* adding dark mode for contact info */
         .content {
@@ -174,17 +45,6 @@
 
         /* end */
 
-        .menu ul li a {
-            padding: 10px 15px;
-            color: black;
-            text-decoration: none;
-        }
-
-        .menu ul li a.active {
-            color: white;
-            background-color: #000;
-        }
-
         .content {
             margin: 20px;
             padding: 20px;
@@ -277,7 +137,7 @@
         #instagram:hover {
             background: linear-gradient(45deg, #FF0080, #FF8C00, #FFD700);
             color: transparent;
-            -webkit-background-clip: text;
+            background-clip: text;
             -webkit-text-fill-color: transparent;
             transform: scale(1.5);
         }
@@ -327,229 +187,87 @@
                 /* End at original position */
             }
         }
-
-        /* Letter Drop Animation */
-        @keyframes letterDrop {
-            0% {
-                transform: translateY(-100%);
-                opacity: 0;
-            }
-
-            50% {
-                transform: translateY(10px);
-                /* Slight bounce */
-                opacity: 1;
-            }
-
-            100% {
-                transform: translateY(0);
-            }
-        }
-
-        .logo {
-            display: flex;
-            align-items: center;
-            animation: logoAnimation 1s ease forwards;
-        }
-        
-        
-
-        .brand-name {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            margin-right: 10px;
-            /* Space between the text and the logo image */
-        }
-
-        .letter {
-
-            display:  inline-block;
-            font-size:  2rem;
-            animation:  letterDrop 0.5s ease forwards;
-            animation-delay:  calc(var(--letter-index) * 0.1s);
-
-        }
-
-        .red {
-            color: red;
-        }
-
-        .circle {
-            height: 35px;
-            width: 35px;
-            border-radius: 24px;
-            background-color: black;
-            position: fixed;
-            top: 0;
-            left: 0;
-            pointer-events: none;
-            z-index: 99999999;
-            /* Stays on top of all elements */
-        }
-
         .map {
-
-      width: 860px;
-      height: 400px;
-      border: 3px 3px 3px 3px solid #090202;
-      border-radius: 5px;
-      margin: 20px auto;
-      object-fit: cover;
-    }
-
-    .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;
-    }
-
-    .chatbot-container {
-      position: fixed;
-      transition: right 0.3s ease;
-      bottom: 20px;
-      right: 7rem;
-      z-index: 1000;
-    }
-
-    .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 */
-      right: -60px;
-    }
-
-    .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 */
-    }
-
-    .chatbot-button:hover .tooltip-text {
-      display: block;
-      /* Show on hover */
-    }
-
+            width: 860px;
+            height: 400px;
+            border: 3px 3px 3px 3px solid #090202;
+            border-radius: 5px;
+            margin: 20px auto;
+            object-fit: cover;
+        }
     </style>
 </head>
 
 <body>
-
-    <header class="navbar">
-        <!-- pre loader -->
-        <div id="preloader">
-            <div class="wrapper">
-                <div class="box-wrap">
-                    <div class="box one"></div>
-                    <div class="box two"></div>
-                    <div class="box three"></div>
-                    <div class="box four"></div>
-                    <div class="box five"></div>
-                    <div class="box six"></div>
-                </div>
+    <!-- pre loader -->
+    <div id="preloader">
+        <div class="wrapper">
+            <div class="box-wrap">
+                <div class="box one"></div>
+                <div class="box two"></div>
+                <div class="box three"></div>
+                <div class="box four"></div>
+                <div class="box five"></div>
+                <div class="box six"></div>
             </div>
         </div>
+    </div>
 
-        <div class="container">
-
-            <div class="logo">
-                <div class="brand-name">
-                    <span class="letter red" style="--letter-index: 1;">A</span>
-                    <span class="letter red" style="--letter-index: 2;">m</span>
-                    <span class="letter red" style="--letter-index: 3;">b</span>
-                    <span class="letter red" style="--letter-index: 4;">u</span>
-                    <span class="letter" style="--letter-index: 5;">F</span>
-                    <span class="letter" style="--letter-index: 6;">l</span>
-                    <span class="letter" style="--letter-index: 7;">o</span>
-                    <span class="letter" style="--letter-index: 8;">w</span>
-                </div>
-                <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">
-                <ul>
-                    <li><a href="index.html" id="home-link" onclick="changeContent('home')"><i
-                                class="fa-solid fa-house"></i> Home</a></li>
-                    <li><a href="features.html" id="features-link" onclick="changeContent('features')"><i
-                                class="fa-solid fa-file"></i> Features</a></li>
-                    <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i
-                                class="fa-solid fa-user-group"></i> Team</a></li>
-                    <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i
-                                class="fa-solid fa-phone"></i> Contact</a></li>
-                    <li><a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i
-                                class="fa-solid fa-clipboard"></i> Feedback</a></li>
-                </ul>
-            </nav>
-            <div class="buttons">
-
-                
-
-                <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
-                    <i class="fa-solid fa-moon"></i>
-                </button>
-
-                <a href="login.html" class="login">Log in</a>
-                <a href="up.html" class="get-started">Get started</a>
+    <div class="container" id="container">
+
+        <div class="logo">
+            <div class="brand-name">
+                <span class="letter red" style="--letter-index: 1;">A</span>
+                <span class="letter red" style="--letter-index: 2;">m</span>
+                <span class="letter red" style="--letter-index: 3;">b</span>
+                <span class="letter red" style="--letter-index: 4;">u</span>
+                <span class="letter" style="--letter-index: 5;">F</span>
+                <span class="letter" style="--letter-index: 6;">l</span>
+                <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: 80px; height: auto" />
         </div>
-    </header>
+        <nav class="menu">
+            <ul>
+                <li>
+                    <a href="#container" style="color: #333;">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711"
+                                stroke="currentColor">
+                            </path>
+                        </svg>
+                    </a>
+                </li>
+                <li>
+                    <a href="index.html" id="home-link" class="menu_links" data-link="Home">
+                        <span>Home</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="features.html" id="features-link" class="menu_links" data-link="Features">
+                        <span>Features</span></a>
+                </li>
+                <li>
+                    <a href="team.html" id="team-link" class="menu_links" data-link="Team">
+                        <span>Team</span></a>
+                </li>
+                <li>
+                    <a href="contact.html" id="contact-link" class="menu_links" data-link="Contact">
+                        <span>Contact</span></a>
+                </li>
+                <li>
+                    <a href="feedback.html" id="contact-link" class="menu_links" data-link="Feedback">
+                        <span>Feedback</span></a>
+                </li>
+                <li>
+                    <a href="nearby.html" id="contact-link" class="menu_links" data-link="Nearby">
+                        <span>Nearby</span></a>
+                </li>
+            </ul>
+        </nav>
 
+    </div>
     <div class="content" id="main-content">
         <h1>Contact Us</h1>
         <div class="contact-info">
@@ -570,236 +288,147 @@ <h2>Emergency Care</h2>
             </div>
         </div>
         <!-- adding map -->
-     <div class = "map">
-        <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d241294.64898498365!2d72.79635424219836!3d19.09761203283721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s123%20Emergency%20Lane%2C%20Mumbai%2C%20India!5e0!3m2!1sen!2sin!4v1728732339444!5m2!1sen!2sin" width=860px height="400" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade" overflow="hidden" style="border :10" object-fit="cover" ;></iframe> 
-        <!--  ;"  loading="lazy" margin-top="50%"  ></iframe> -->
-    </div>
+        <div class="map">
+            <iframe
+                src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d241294.64898498365!2d72.79635424219836!3d19.09761203283721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s123%20Emergency%20Lane%2C%20Mumbai%2C%20India!5e0!3m2!1sen!2sin!4v1728732339444!5m2!1sen!2sin"
+                width=860px height="400" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade"
+                overflow="hidden" style="border :10" object-fit="cover" ;></iframe>
+            <!--  ;"  loading="lazy" margin-top="50%"  ></iframe> -->
+        </div>
     </div>
+
+
     <footer style=" color: #f3f4f6; text-align: center; width: 100%;">
         <div style="background-color: #C4D7FF; color: #f3f4f6; ">
             <div
                 style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
 
-                <footer style=" color: #f3f4f6; text-align: center; width: 100%;">
-                    <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 -->
-                            <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-                                <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; text-decoration: none;">About Us</a>
-                                    </li>
-                                    <li><a href="contact.html" style="color: #000000; text-decoration: none;">Contact
-                                            Us</a></li>
-                                    <li><a href="privacy.html" style="color: #000000; text-decoration: none;">Privacy
-                                            Policy</a></li>
-                                    <li><a href="terms.html" style="color: #000000; text-decoration: none;">Terms of
-                                            Service</a></li>
-                                    <li><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site
-                                            Map</a></li>
-                                </ul>
-                            </div>
-
-                            <!-- 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;">emergency@ambulanceservice.in</a></p>
-                                <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567"
-                                        style="color: #000000;">+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;">
-                                    <a href="https://www.facebook.com" class="social-icon facebook"
-                                        style="color: black; text-decoration: none; font-size: 24px;"><i
-                                            class="fab fa-facebook"></i></a>
-                                    <a href="https://www.twitter.com" class="social-icon twitter"
-                                        style="color: black; text-decoration: none; font-size: 24px;"><i
-                                            class="fa-brands fa-x-twitter"></i></a>
-                                    <a href="https://www.instagram.com" class="social-icon instagram"
-                                        style="color: black; text-decoration: none; font-size: 24px;"><i
-                                            class="fab fa-instagram"></i></a>
-                                    <a href="https://www.linkedin.com" class="social-icon linkedin"
-                                        style="color: black; text-decoration: none; font-size: 24px;"><i
-                                            class="fab fa-linkedin-in"></i></a>
-                                </div>
-                            </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>
-                            </div>
-
-                        </div>
+                <!-- Quick Links Section -->
+                <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+                    <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; text-decoration: none;">About Us</a>
+                        </li>
+                        <li><a href="contact.html" style="color: #000000; text-decoration: none;">Contact
+                                Us</a></li>
+                        <li><a href="privacy.html" style="color: #000000; text-decoration: none;">Privacy
+                                Policy</a></li>
+                        <li><a href="terms.html" style="color: #000000; text-decoration: none;">Terms of
+                                Service</a></li>
+                        <li><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site
+                                Map</a></li>
+                    </ul>
+                </div>
 
+                <!-- 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;">emergency@ambulanceservice.in</a></p>
+                    <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567"
+                            style="color: #000000;">+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;">
+                        <a href="https://www.facebook.com" class="social-icon facebook"
+                            style="color: black; text-decoration: none; font-size: 24px;"><i
+                                class="fab fa-facebook"></i></a>
+                        <a href="https://www.twitter.com" class="social-icon twitter"
+                            style="color: black; text-decoration: none; font-size: 24px;"><i
+                                class="fa-brands fa-x-twitter"></i></a>
+                        <a href="https://www.instagram.com" class="social-icon instagram"
+                            style="color: black; text-decoration: none; font-size: 24px;"><i
+                                class="fab fa-instagram"></i></a>
+                        <a href="https://www.linkedin.com" class="social-icon linkedin"
+                            style="color: black; text-decoration: none; font-size: 24px;"><i
+                                class="fab fa-linkedin-in"></i></a>
                     </div>
-                    <hr>
-                    <!-- Copyright Section -->
-                    <div
-                        style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: center; align-items: center; padding: 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: absolute;
-        right: 0;  
-      ">↑</button>
-                    </div>
-                </footer>
-
-                <script src="preloader.js"></script>
-
-
-                </script>
-                <script>    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];
-                    });
-
-                    backToTopBtn.addEventListener('click', function () {
-                        window.scrollTo({
-                            top: 0,
-                            behavior: 'smooth'
-                        });
-                    });
-
-                    // adding code for dark mode button
-                    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>
+                </div>
 
-    <!-- Add this div for the translator popup -->
-    <div id="gTranslate" class="g-translate-popup" style="display:none;">
-        <div class="gtranslate_wrapper"></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>
+                </div>
+            </div>
+        </div>
+        <hr>
+    </footer>
+    <!-- Copyright Section -->
+    <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>
     </div>
-
-    <!-- Chatbot button -->
     <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>
+            <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>
-
-    <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>
+    </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>
 
-    <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 src="preloader.js"></script>
+    <script src="script.js"></script>
+    <script>    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];
         });
+        //end 
     </script>
 
+    <!-- Add this div for the translator popup -->
+
 </body>
 
 
diff --git a/features.html b/features.html
index 91f63f3..88ff6bc 100644
--- a/features.html
+++ b/features.html
@@ -7,25 +7,11 @@
   <title>Features</title>
   <link rel="stylesheet" href="preloaderStyle.css">
   <link rel="stylesheet" href="src/css/index.css" />
+  <link rel="stylesheet" href="src/css/navbar.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 {
-      font-family: Arial, sans-serif;
-      background-color: #f4f4f4;
-      margin: 0;
-      padding: 0;
-      color: #333;
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-    }
-
-
     /* font size of button */
     .buttons .login,
     .buttons .get-started,
@@ -43,21 +29,6 @@
       color: black;
       transition: background-color 0.3s, color 0.3s;
     }
- 
-    .navbar {
-
-      background-color:  rgb(148 207 226);
-      /* Light mode navbar */
-      color:  black;
-      padding:  10px;
-
-    }
- 
-    .navbar.dark-mode {
-      background-color: black;
-      /* Dark mode navbar */
-      color: white;
-    }
 
     /* more addition for dark mode theme */
 
@@ -66,111 +37,6 @@
       /* 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 */
-    }
-    a:hover {
-      color: blue !important;
-    }
-
-    .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 */
-      width: 50px;
-    }
-
-    .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 */
@@ -180,6 +46,10 @@
       /* Smooth transitions */
     }
 
+    .dark-mode .content #para {
+      color: white;
+    }
+
     .dark-mode .content {
       background-color: rgba(50, 50, 50, 0.95);
       /* Match body background opacity */
@@ -188,72 +58,10 @@
     }
 
     /* end */
-
-
-    .logo {
-      display: flex;
-      align-items: center;
-      animation: logoAnimation 1s ease forwards;
-    }
-
-    .brand-name {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-right: 10px;
-      /* Space between the text and the logo image */
-    }
-
-    .letter {
-      
-      display: inline-block;
-      font-size: 2rem;
-      animation: letterDrop 0.5s ease forwards;
-      animation-delay: calc(var(--letter-index)* 0.1s);
-
-    }
-
-    .letter {
-      display: inline-block;
-      font-size: 2rem;
-    }
-
-    .red {
-      color: red;
-      /* Change the color of letters in this class to red */
-    }
-
-    .menu ul {
-      list-style-type: none;
-      padding: 0;
-    }
-
-    .menu ul li {
-      display: inline;
-      margin-right: 7px;
-    }
-
-    .menu ul li a {
-      padding: 10px 15px;
-      color: black;
-      text-decoration: none;
-      transition: background-color 0.3s, color 0.3s;
-    }
-
-    .menu ul li a:hover {
-      background-color: blue;
-      color: white;
-    }
-
-    .menu ul li a.active {
-      color: white;
-      background-color: #000;
-    }
-    
-
     .content {
       margin: 20px;
       padding: 20px;
+      width: 95vw;
       background-color: #e6eef3;
       border-radius: 5px;
       flex-grow: 1;
@@ -349,142 +157,48 @@
       }
     }
 
-      /* Logo Animation */
-      @keyframes logoAnimation {
-  0% {
-    opacity: 0;
-    transform: translateX(-100px); /* Start from the left */
-  }
-  50% {
-    transform: translateX(10px); /* Move slightly to the right */
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0); /* End at original position */
-  }
-}
-
-footer {
-  background-color: #C4D7FF;
-  color: white;
-  text-align: center;
-  padding: 10px 0; /* Padding for the footer */
-  
-}
-
-/* Letter Drop Animation */
-@keyframes letterDrop {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  50% {
-    transform: translateY(10px); /* Slight bounce */
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-
-#thankYouMessage {
-  margin-top: 20px;
-  font-size: 18px;
-  color: green;
-  display: none; /* Initially hidden */
-}
-
-    .translate-btn {
-      background-color: #2980b9;
-      color: white;
-      border: none;
-      padding: 9px 10px;
-      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;
-    }
+    /* Logo Animation */
+    @keyframes logoAnimation {
+      0% {
+        opacity: 0;
+        transform: translateX(-100px);
+        /* Start from the left */
+      }
 
-    .buttons {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
+      50% {
+        transform: translateX(10px);
+        /* Move slightly to the right */
+      }
 
-    .chatbot-container {
-      position: fixed;
-      transition: right 0.3s ease;
-      bottom: 20px;
-      right: 7rem;
-      z-index: 1000;
+      100% {
+        opacity: 1;
+        transform: translateX(0);
+        /* End at original position */
+      }
     }
 
-    .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 */
-      right: -60px;
-    }
+    footer {
+      background-color: #C4D7FF;
+      color: white;
+      text-align: center;
+      padding: 10px 0;
+      /* Padding for the footer */
 
-    .chatbot-button img {
-      width: 30px;
-      /* Adjusted image size */
-      height: 30px;
-      /* Adjusted image size */
     }
 
-    .tooltip-text {
+    #thankYouMessage {
+      margin-top: 20px;
+      font-size: 18px;
+      color: green;
       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 */
+      /* Initially hidden */
     }
 
-    .chatbot-button:hover .tooltip-text {
-      display: block;
-      /* Show on hover */
-    }
-    ul li a:hover{
-      color: blue !important;
-    }
-    a:hover{
-      color: blue !important;
+    .buttons {
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
- 
   </style>
 
 </head>
@@ -504,117 +218,122 @@
     </div>
   </div>
   <!-- ------------------------------Added a navbar---------------------------------- -->
-  <header class="navbar">
-    <div class="container">
-
-      <div class="logo">
-        <div class="brand-name">
-          <span class="letter red" style="--letter-index: 1;">A</span>
-          <span class="letter red" style="--letter-index: 2;">m</span>
-          <span class="letter red" style="--letter-index: 3;">b</span>
-          <span class="letter red" style="--letter-index: 4;">u</span>
-          <span class="letter" style="--letter-index: 5;">F</span>
-          <span class="letter" style="--letter-index: 6;">l</span>
-          <span class="letter" style="--letter-index: 7;">o</span>
-          <span class="letter" style="--letter-index: 8;">w</span>
-        </div>
-        <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">
-        <ul>
-          <li><a href="index.html" id="home-link" onclick="changeContent('home')"><i
-            class="fa-solid fa-house"></i>
-              Home</a></li>
-          <li><a href="features.html" id="features-link" onclick="changeContent('features')"><i
-            class="fa-solid fa-file"></i> Features</a></li>
-          <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i
-            class="fa-solid fa-user-group"></i>
-              Team</a></li>
-          <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i
-            class="fa-solid fa-phone"></i> Contact</a></li>
-          <li><a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i
-            class="fa-solid fa-clipboard"></i> Feedback</a></li>
-        </ul>
-      </nav>
-      <div class="buttons">
-
-        
-          <a href="login.html" class="login">Log in</a>
-          <a href="up.html" class="get-started">Get started</a>
-
-        <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
-          <i class="fa-solid fa-moon"></i>
-        </button>
 
+  <div class="container" id="container">
+
+    <div class="logo">
+      <div class="brand-name">
+        <span class="letter red" style="--letter-index: 1;">A</span>
+        <span class="letter red" style="--letter-index: 2;">m</span>
+        <span class="letter red" style="--letter-index: 3;">b</span>
+        <span class="letter red" style="--letter-index: 4;">u</span>
+        <span class="letter" style="--letter-index: 5;">F</span>
+        <span class="letter" style="--letter-index: 6;">l</span>
+        <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: 80px; height: auto" />
     </div>
-  </header>
-
-  <!-- -------------------------------------------------------------------------- -->
-  <div class="content" id="main-content">
-    <h1>Features</h1>
-    <p>Here are the features of AmbuFlow:</p>
-    <div class="features-grid">
-      <div class="feature-card">
-        <i class="fas fa-ambulance feature-icon"></i>
-        <h2>Quick Emergency Response</h2>
-        <p>Immediate notifications to the nearest ambulance service.</p>
-      </div>
-      <div class="feature-card">
-        <i class="fas fa-map-marked-alt feature-icon"></i>
-        <h2>Real-Time Tracking</h2>
-        <p>Track ambulances in real-time for better coordination.</p>
-      </div>
-      <div class="feature-card">
-        <i class="fas fa-comments feature-icon"></i>
-        <h2>Enhanced Communication</h2>
-        <p>Instant communication between dispatch and ambulances.</p>
-      </div>
-      <div class="feature-card">
-        <i class="fas fa-cogs feature-icon"></i>
-        <h2>Resource Management</h2>
-        <p>Efficient allocation of resources for emergencies.</p>
-      </div>
-      <div class="feature-card">
-        <i class="fas fa-user-friends feature-icon"></i>
-        <h2>User-Friendly Interface</h2>
-        <p>Easy-to-navigate system for users and providers.</p>
-      </div>
-      <div class="feature-card">
-        <i class="fas fa-clock feature-icon"></i>
-        <h2>24/7 Availability</h2>
-        <p>Always available support and monitoring services.</p>
-      </div>
-      <div class="feature-card">
-        <i class="fas fa-heartbeat feature-icon"></i>
-        <h2>Patient Health Monitoring</h2>
-        <p>Real-time monitoring of patient vitals during transport.</p>
-      </div>
-      <!-- <div class="feature-card">
+    <nav class="menu">
+      <ul>
+        <li>
+          <a href="#container" style="color: #333;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711" stroke="currentColor">
+              </path>
+            </svg>
+          </a>
+        </li>
+        <li>
+          <a href="index.html" id="home-link" class="menu_links" data-link="Home">
+            <span>Home</span>
+          </a>
+        </li>
+        <li>
+          <a href="features.html" id="features-link" class="menu_links" data-link="Features">
+            <span>Features</span></a>
+        </li>
+        <li>
+          <a href="team.html" id="team-link" class="menu_links" data-link="Team">
+            <span>Team</span></a>
+        </li>
+        <li>
+          <a href="contact.html" id="contact-link" class="menu_links" data-link="Contact">
+            <span>Contact</span></a>
+        </li>
+        <li>
+          <a href="feedback.html" id="contact-link" class="menu_links" data-link="Feedback">
+            <span>Feedback</span></a>
+        </li>
+        <li>
+          <a href="nearby.html" id="contact-link" class="menu_links" data-link="Nearby">
+            <span>Nearby</span></a>
+        </li>
+      </ul>
+    </nav>
+
+    <!-- -------------------------------------------------------------------------- -->
+    <div class="content" id="main-content">
+      <h1>Features</h1>
+      <p id="para">Here are the features of AmbuFlow:</p>
+      <div class="features-grid">
+        <div class="feature-card">
+          <i class="fas fa-ambulance feature-icon"></i>
+          <h2>Quick Emergency Response</h2>
+          <p>Immediate notifications to the nearest ambulance service.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-map-marked-alt feature-icon"></i>
+          <h2>Real-Time Tracking</h2>
+          <p>Track ambulances in real-time for better coordination.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-comments feature-icon"></i>
+          <h2>Enhanced Communication</h2>
+          <p>Instant communication between dispatch and ambulances.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-cogs feature-icon"></i>
+          <h2>Resource Management</h2>
+          <p>Efficient allocation of resources for emergencies.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-user-friends feature-icon"></i>
+          <h2>User-Friendly Interface</h2>
+          <p>Easy-to-navigate system for users and providers.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-clock feature-icon"></i>
+          <h2>24/7 Availability</h2>
+          <p>Always available support and monitoring services.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-heartbeat feature-icon"></i>
+          <h2>Patient Health Monitoring</h2>
+          <p>Real-time monitoring of patient vitals during transport.</p>
+        </div>
+        <!-- <div class="feature-card">
           <i class="fas fa-lock feature-icon"></i>
           <h2>Data Security</h2>
           <p>Ensuring the security of patient and operational data.</p>
         </div> -->
-      <div class="feature-card">
-        <i class="fas fa-phone-alt feature-icon"></i>
-        <h2>Emergency Contact Integration</h2>
-        <p>Seamless integration with emergency contact services.</p>
-      </div>
-      <div class="feature-card">
-        <i class="fas fa-tachometer-alt feature-icon"></i>
-        <h2>Driver Performance Monitoring</h2>
-        <p>Real-time tracking of driver behavior and performance on the road.</p>
-      </div>
-      <div class="feature-card">
-        <i class="fas fa-comments-dollar feature-icon"></i>
-        <h2>Feedback System</h2>
-        <p>Collecting feedback to improve service quality.</p>
+        <div class="feature-card">
+          <i class="fas fa-phone-alt feature-icon"></i>
+          <h2>Emergency Contact Integration</h2>
+          <p>Seamless integration with emergency contact services.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-tachometer-alt feature-icon"></i>
+          <h2>Driver Performance Monitoring</h2>
+          <p>Real-time tracking of driver behavior and performance on the road.</p>
+        </div>
+        <div class="feature-card">
+          <i class="fas fa-comments-dollar feature-icon"></i>
+          <h2>Feedback System</h2>
+          <p>Collecting feedback to improve service quality.</p>
+        </div>
       </div>
     </div>
-  </div>
 
   </div>
 
@@ -676,103 +395,33 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
     <hr>
     <!-- Copyright Section -->
     <div
-      style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: center; align-items: center; padding: 20px 0;">
+      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>
 
       <!-- 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: absolute;
-        right: 0;
-      ">↑</button>
     </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>
+  <button class="light-dark-btn dark-mode-toggle" id="dark-mode-button">
+    <i class="fa-solid fa-moon"></i>
+  </button>
 
-<!-- Chatbot button -->
-<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>
   <script src="preloader.js"></script>
+  <script src="script.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>
-    // Back to Top Button functionality
-    document.addEventListener('DOMContentLoaded', function () {
-      var backToTopBtn = document.getElementById("backToTopBtn");
-
-      backToTopBtn.addEventListener('click', function () {
-        window.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-        });
-      });
-    });
-  </script>
-
-  </footer>
-
-
-  <script>
-    // Accordion Functionality
-    const accordionHeader = document.querySelector('.accordion__header');
-    const accordionContent = document.querySelector('.accordion__content');
-
-    accordionHeader.addEventListener('click', function () {
-      if (accordionContent.style.display === 'block') {
-        accordionContent.style.display = 'none';
-      } else {
-        accordionContent.style.display = 'block';
-      }
-    });
 
     // Form Submission Functionality
     const form = document.getElementById('subscribeForm');
@@ -791,42 +440,6 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
       document.getElementById('emailInput').value = '';
     });
   </script>
-
-<!-- Add this div for the translator popup -->
-<div id="gTranslate" class="g-translate-popup" style="display:none;">
-  <div class="gtranslate_wrapper"></div>
-</div>
-
-<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>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 76386ce..3e91c11 100644
--- a/index.html
+++ b/index.html
@@ -11,90 +11,11 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   <!--Updated to latest version-->
 
-  <link rel="stylesheet" href="src/css/indexmain.css" />
+  <link rel="stylesheet" href="src/css/navbar.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
   <link rel="stylesheet" href="responsive.css">
 
-
   <style>
-    .chatbot-container {
-      position: fixed;
-      transition: right 0.3s ease;
-      bottom: 20px;
-      right: 8rem;
-      z-index: 1000;
-    }
-
-    .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 */
-      right: -60px;
-    }
-
-    .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 */
-    }
-
     .content {
       margin: 2rem 1.2rem;
       /* margin-bottom: 2rem; */
@@ -153,8 +74,6 @@
       color: #555;
     }
 
-
-
     .sticky {
       display: flex;
       position: fixed;
@@ -205,6 +124,7 @@
       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 */
@@ -224,6 +144,7 @@
       color: rgb(16, 13, 195);
       /* Icon color change to rgb(16, 13, 195) on hover */
     }
+
     .feature p {
       color: #555;
     }
@@ -263,6 +184,7 @@
       margin-right: 20px;
       border-radius: 10px;
     }
+
     @keyframes fadeIn {
       from {
         opacity: 0;
@@ -273,76 +195,7 @@
       }
     }
 
-    /* Logo Animation */
-    @keyframes logoAnimation {
-      0% {
-        opacity: 0;
-        transform: translateX(-100px);
-        /* Start from the left */
-      }
-
-      50% {
-        transform: translateX(10px);
-        /* Move slightly to the right */
-      }
-
-      100% {
-        opacity: 1;
-        transform: translateX(0);
-        /* End at original position */
-      }
-    }
-
-    /* Letter Drop Animation */
-    @keyframes letterDrop {
-      0% {
-        transform: translateY(-100%);
-        opacity: 0;
-      }
 
-      50% {
-        transform: translateY(10px);
-        /* Slight bounce */
-        opacity: 1;
-      }
-
-      100% {
-        transform: translateY(0);
-      }
-    }
-
-    .logo {
-      display: flex;
-      align-items: center;
-      animation: logoAnimation 1s ease forwards;
-    }
-
-    .brand-name {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-right: 10px;
-      /* Space between the text and the logo image */
-    }
-
-    .letter {
-      display: inline-block;
-      font-size: 2rem;
-      animation: letterDrop 0.5s ease forwards;
-    }
-
-    .red {
-      color: red;
-      /* Change the color of letters in this class to red */
-    }
-
-    .logo a {
-      text-decoration: none;
-    }
-
-    .logo img:hover {
-      background-color: white;
-    }
 
     .container {
       width: 98vw;
@@ -352,28 +205,6 @@
       background: none;
     }
 
-
-    .circle {
-      position: absolute;
-      width: 25px;
-      height: 25px;
-      border-radius: 50%;
-      pointer-events: none;
-      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;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 9999;
-    }
-
     /* faq section styles */
     .faq-section {
       background-color: #e7f3fe;
@@ -395,14 +226,18 @@
       margin-bottom: 15px;
       width: 100%;
       /* Full width by default */
-      /* background-color: #000000; */
+      background-color: #000000;
       border: 1px solid #ccc;
       border-radius: 10px;
       overflow: hidden;
       transition: background-color 0.3s ease;
-      transition: all 0.3s ease;
     }
-    
+
+    .faq:hover {
+      background-color: #e31616;
+      /* Slight hover effect for FAQs */
+    }
+
     .faq-question {
       background-color: #e7ffe7;
       color: #333;
@@ -419,9 +254,12 @@
       align-items: center;
       transition: background-color 0.3s ease;
     }
+
     .faq-question:hover {
-      background-color: #d5f0d5; /* Lighter green on hover */
+      background-color: #d5f0d5;
+      /* Lighter green on hover */
     }
+
     .faq-question::after {
       content: '';
       display: inline-block;
@@ -442,11 +280,14 @@
 
     .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;
     }
 
@@ -461,6 +302,7 @@
       padding: 10px;
       /* Adds padding when expanded */
     }
+
     .faq.active .faq-answer p {
       transition: opacity 0.3s ease-in-out;
     }
@@ -469,63 +311,26 @@
       background-color: #c4d7ff;
     }
 
-    .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:hover .tooltip-text {
-      display: block;
-      /* Show on hover */
+    .dark-mode .light-dark-btn {
+      color: white;
+      /* Button color in dark mode */
+      /* border: 1px solid lightgrey; */
+      /* Light grey border */
     }
 
-    .dark-mode-toggle {
-      font-size: 18px;
-      /* Increase font size */
-      padding: 10px 15px;
-      /* Adjust padding for better appearance */
+    .dark-mode .light-dark-btn:hover {
+      /* background-color: white; */
+      /* Background on hover in dark mode */
+      color: black;
+      /* Text color on hover in dark mode */
     }
 
-    .dark-mode {
-      background-color: black;
-      /* Dark mode navbar */
-      /* color: white; */
-    }
-    .dark-mode .main_content p{
+    .dark-mode .main_content p {
       color: wheat;
     }
-    .dark-mode .content h1{
+
+    .dark-mode .content h1 {
       color: wheat;
 
     }
@@ -537,75 +342,12 @@
       /* Inverts the color to make it white */
     }
 
-    /* dark mode hove effect on logo */
-
-
-    .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: black;
-      /* Dark mode link color */
-      /* Light grey border in dark mode */
-    }
-    .dark-mode .menu a.active {
-      color: white;
-      /* Dark mode link color */
-      /* 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 */
-    }
-
-    .dark-mode {
-      background-color: rgba(50, 50, 50, 0.95);
-      /* Slightly gray background with high opacity */
-    }
-
-
-    .light-dark-btn {
-      background-color: transparent;
-      border: none;
-      position: fixed;
-      z-index: 1111;
-      right: 1rem;
-      bottom: 1rem;
-      /* 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>
 
@@ -625,24 +367,17 @@
       </div>
     </div>
   </div>
-
-
-  <div class="dropdown">
-    <button class="dropbtn" onclick="toggleDropdown()">&#9776;</button>
-    <ul class="dropdown-content">
-        <li><a href="index.html" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a></li>
-        <li><a href="features.html" id="features-link" onclick="changeContent('features')"><i class="fa-solid fa-file"></i> Features</a></li>
-        <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a></li>
-        <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a></li>
-        <li><a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a></li>
-    </ul>
-</div>
-
-
   <div class="container" id="container">
     <div class="logo">
       <div class="brand-name">
-        <span class="ambu">Ambu</span><span>Flow</span>
+        <span class="letter red" style="--letter-index: 1;">A</span>
+        <span class="letter red" style="--letter-index: 2;">m</span>
+        <span class="letter red" style="--letter-index: 3;">b</span>
+        <span class="letter red" style="--letter-index: 4;">u</span>
+        <span class="letter" style="--letter-index: 5;">F</span>
+        <span class="letter" style="--letter-index: 6;">l</span>
+        <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: 80px; height: auto" />
     </div>
@@ -657,7 +392,7 @@
           </a>
         </li>
         <li>
-          <a href="index.html" id="home-link" class="menu_links" data-link="Home">
+          <a href="index.html" id="index-link" class="menu_links" data-link="Home">
             <span>Home</span>
           </a>
         </li>
@@ -789,6 +524,8 @@ <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>
     
@@ -867,8 +604,7 @@ <h2>Contact Us</h2>
 
   <!-- FAQ section ends here -->
   <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;">
+    <div style="display: flex;color: #f3f4f6;justify-content: space-evenly;position: relative;left: 2.5rem;">
 
       <!-- Quick Links Section -->
       <div>
@@ -914,7 +650,7 @@ <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
       <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 class="media-link" style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
+        <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"
@@ -961,35 +697,12 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
       <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
     </strong>
   </div>
-  <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 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>
-
-function toggleDropdown() {
-            var dropdownContent = document.querySelector('.dropdown-content');
-            dropdownContent.classList.toggle('show');
-        }
-
-
-    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");
 
@@ -1032,58 +745,19 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
         button.addEventListener('click', function () {
           const faq = button.parentElement;
           const answer = faq.querySelector('.faq-answer');
-        
-          // Collapse all other answers
-          document.querySelectorAll('.faq').forEach(item => {
-            if (item !== faq) {
-              item.classList.remove('active');
-              item.querySelector('.faq-answer').style.maxHeight = '0';
-            }
-          });
-        
-          // Toggle active class for clicked FAQ
+
+          // 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';
+            answer.style.maxHeight = answer.scrollHeight + 'px'; // Set height based on content
           } else {
-            answer.style.maxHeight = '0';
+            answer.style.maxHeight = '0'; // Set height to zero to collapse
           }
         });
       });
     });
-
-
-    //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");
-
-        // 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
-        }
-      });
-    });
-
     // end
     document.addEventListener("DOMContentLoaded", function () {
       const coords = { x: 0, y: 0 };
@@ -1118,11 +792,6 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
       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>
-  <script src="https://apis.google.com/js/platform.js" async defer></script>
-  <meta name="google-signin-client_id" content="756798891791-69vfi6rfu9lkoo8r6iup9ce2k3dsddo6.apps.googleusercontent.com">
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/login.html b/login.html
index b9f728c..6bb0cf7 100644
--- a/login.html
+++ b/login.html
@@ -1,459 +1,403 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Register & Login</title>
-    <link rel="stylesheet" href="preloaderStyle.css">
-    <link rel="stylesheet" href="src\css/login.css" />
-    <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-    />
-  </head>
-  <div class="gtranslate_wrapper"></div>
-<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Register & Login</title>
+  <link rel="stylesheet" href="preloaderStyle.css">
+  <link rel="stylesheet" href="src\css/login.css" />
+  <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+</head>
+<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>
-    <!-- preloader -->
+
+<body>
+  <!-- preloader -->
   <div id="preloader">
     <div class="wrapper">
-        <div class="box-wrap">
-            <div class="box one"></div>
-            <div class="box two"></div>
-            <div class="box three"></div>
-            <div class="box four"></div>
-            <div class="box five"></div>
-            <div class="box six"></div>
-        </div>
+      <div class="box-wrap">
+        <div class="box one"></div>
+        <div class="box two"></div>
+        <div class="box three"></div>
+        <div class="box four"></div>
+        <div class="box five"></div>
+        <div class="box six"></div>
+      </div>
     </div>
-</div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="container">
-      <div class="forms-container">
-        <div class="signin-signup">
-          <form action="#" class="sign-in-form">
-            <h2 class="title">Sign in</h2>
-            <div class="input-field">
-              <i class="fas fa-user"></i>
-              <input type="text" placeholder="Username" />
-            </div>
-            <div class="input-field">
-              <i class="fas fa-lock" id="toggle-password"></i>
-              <input
-                type="password"
-                placeholder="Password"
-                id="password-input"
-              />
-            </div>
-            <input type="submit" value="Login" class="btn solid" />
-            <p class="social-text">Or Sign in with social platforms</p>
-            <div class="social-media">
-              <a
-                href="https://www.google.com"
-                target="_blank"
-                class="social-icon"
-              >
-                <i
-                  class="fab fa-google"
-                  style="font-size: 24px; color: #1f6deb"
-                ></i>
-              </a>
-              <a
-                href="https://facebook.com/YourPage"
-                target="_blank"
-                class="social-icon"
-              >
-                <i
-                  class="fab fa-facebook-f"
-                  style="font-size: 24px; color: #4267b2"
-                ></i>
-              </a>
-              <a
-                href="https://github.com/YourGitHubProfile"
-                target="_blank"
-                class="social-icon"
-              >
-                <i
-                  class="fab fa-github"
-                  style="font-size: 24px; color: #333"
-                ></i>
-              </a>
-            </div>
-          </form>
-          <form action="#" class="sign-up-form" style="background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
-            <h2 class="title">Sign up</h2>
-            <div class="input-field">
-                <i class="fas fa-user"></i>
-                <input type="text" placeholder="Username" />
-            </div>
-            <div class="input-field">
-                <i class="fas fa-envelope"></i>
-                <input type="email" placeholder="Email" />
+  </div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="container">
+    <div class="forms-container">
+      <div class="signin-signup">
+        <form action="#" class="sign-in-form">
+          <h2 class="title">Sign in</h2>
+          <div class="input-field">
+            <i class="fas fa-user"></i>
+            <input type="text" placeholder="Username" />
+          </div>
+          <div class="input-field">
+            <i class="fas fa-lock" id="toggle-password"></i>
+            <input type="password" placeholder="Password" id="password-input" />
+          </div>
+          <input type="submit" value="Login" class="btn solid" />
+          <p class="social-text">Or Sign in with social platforms</p>
+          <div class="social-media">
+            <div class="social-icon g-signin2" id="google_btn" >
+              <i class="fab fa-google" style="font-size: 24px; color: #4285F4;"></i>
             </div>
-            <div class="input-field">
+            <a href="https://facebook.com/YourPage" target="_blank" class="social-icon">
+              <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267b2"></i>
+            </a>
+            <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon">
+              <i class="fab fa-github" style="font-size: 24px; color: #333"></i>
+            </a>
+          </div>
+        </form>
+        <form action="#" class="sign-up-form"
+          style="background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
+          <h2 class="title">Sign up</h2>
+          <div class="input-field">
+            <i class="fas fa-user"></i>
+            <input type="text" placeholder="Username" />
+          </div>
+          <div class="input-field">
+            <i class="fas fa-envelope"></i>
+            <input type="email" placeholder="Email" />
+          </div>
+          <div class="input-field">
 
-                <i class="fas fa-lock" id="toggle-password-signup"></i>
-                <input type="password" placeholder="Password" id="password-input-signup" />
-            </div>
-        
-            <!-- Password strength meter starts here (initially hidden) -->
-            <div id="password-strength-section" style="display: none;">
-                <label for="password-input-signup">Password Strength:</label>
-                <div class="strength-meter" style="width: 100%; max-width: 300px; height: 10px; background-color: #e0e0e0; border-radius: 5px; margin: 10px auto;">
-                    <div id="strength-bar-signup" style="height: 100%; width: 1%; background-color: #d73f40; border-radius: 5px; transition: width 0.5s, background-color 0.5s;"></div>
-                </div>
-                <div class="strength-label" id="strength-label-signup" style="font-size: 14px; margin-top: 10px;">Weak</div>
+            <i class="fas fa-lock" id="toggle-password-signup"></i>
+            <input type="password" placeholder="Password" id="password-input-signup" />
+          </div>
+
+          <!-- Password strength meter starts here (initially hidden) -->
+          <div id="password-strength-section" style="display: none;">
+            <label for="password-input-signup">Password Strength:</label>
+            <div class="strength-meter"
+              style="width: 100%; max-width: 300px; height: 10px; background-color: #e0e0e0; border-radius: 5px; margin: 10px auto;">
+              <div id="strength-bar-signup"
+                style="height: 100%; width: 1%; background-color: #d73f40; border-radius: 5px; transition: width 0.5s, background-color 0.5s;">
+              </div>
             </div>
-            <!-- Password strength meter ends here -->
-        
-            <input type="submit" class="btn" value="Sign up" />
-            <p class="social-text">Or Sign up with social platforms</p>
-            <div class="social-media">
-                <a href="https://www.google.com" target="_blank" class="social-icon">
-                    <i class="fab fa-google" style="font-size: 24px; color: #4285F4;"></i>
-                </a>
-                <a href="https://facebook.com/YourPage" target="_blank" class="social-icon">
-                    <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267B2;"></i>
-                </a>
-                <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon">
-                    <i class="fab fa-github" style="font-size: 24px; color: #333;"></i>
-                </a>
+            <div class="strength-label" id="strength-label-signup" style="font-size: 14px; margin-top: 10px;">Weak</div>
+          </div>
+          <!-- Password strength meter ends here -->
+
+          <input type="submit" class="btn" value="Sign up" />
+          <p class="social-text">Or Sign up with social platforms</p>
+          <div class="social-media">
+            <div class="social-icon g-signin2" id="google_btn" >
+              <i class="fab fa-google" style="font-size: 24px; color: #4285F4;"></i>
             </div>
+            <a href="https://facebook.com/YourPage" target="_blank" class="social-icon">
+              <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267B2;"></i>
+            </a>
+            <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon">
+              <i class="fab fa-github" style="font-size: 24px; color: #333;"></i>
+            </a>
+          </div>
         </form>
-        
+
         <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>
         <script>
-            let passwordSignup = document.getElementById("password-input-signup");
-            let strengthBarSignup = document.getElementById("strength-bar-signup");
-            let strengthLabelSignup = document.getElementById("strength-label-signup");
-            let passwordStrengthSection = document.getElementById("password-strength-section");
-        
-            passwordSignup.oninput = function () {
-                let value = passwordSignup.value;
-        
-                // Show the strength meter when the user starts typing
-                if (value.length > 0) {
-                    passwordStrengthSection.style.display = "block";
-                } else {
-                    passwordStrengthSection.style.display = "none";
-                }
-        
-                let result = zxcvbn(value);
-                let score = result.score; // Score is between 0 and 4
-                let widths = ["1%", "25%", "50%", "75%", "100%"];
-                let colors = ["#d73f40", "#dc6551", "#f2b84f", "#bde952", "#3ba62f"];
-                let labels = ["Very Weak", "Weak", "Fair", "Good", "Strong"];
-        
-                strengthBarSignup.style.width = widths[score];
-                strengthBarSignup.style.backgroundColor = colors[score];
-                strengthLabelSignup.textContent = labels[score];
-            };
+          let passwordSignup = document.getElementById("password-input-signup");
+          let strengthBarSignup = document.getElementById("strength-bar-signup");
+          let strengthLabelSignup = document.getElementById("strength-label-signup");
+          let passwordStrengthSection = document.getElementById("password-strength-section");
+
+          passwordSignup.oninput = function () {
+            let value = passwordSignup.value;
+
+            // Show the strength meter when the user starts typing
+            if (value.length > 0) {
+              passwordStrengthSection.style.display = "block";
+            } else {
+              passwordStrengthSection.style.display = "none";
+            }
+
+            let result = zxcvbn(value);
+            let score = result.score; // Score is between 0 and 4
+            let widths = ["1%", "25%", "50%", "75%", "100%"];
+            let colors = ["#d73f40", "#dc6551", "#f2b84f", "#bde952", "#3ba62f"];
+            let labels = ["Very Weak", "Weak", "Fair", "Good", "Strong"];
+
+            strengthBarSignup.style.width = widths[score];
+            strengthBarSignup.style.backgroundColor = colors[score];
+            strengthLabelSignup.textContent = labels[score];
+          };
         </script>
-        
-        </div>
+
       </div>
+    </div>
 
-      <div class="panels-container">
-        <a href="index.html" class="homeBtn">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 20"
-            width="30"
-            height="30"
-          >
-            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-          </svg>
-        </a>
-        <div class="panel left-panel">
-          <div class="content">
-            <h3>New here ?</h3>
-            <p>
-              Discover new experiences with AmbuFlow! <br />Get access to
-              exclusive content and features. <br />
-              Create your account.
-            </p>
-            <a href="index.html" class="homeBtn">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox=" 0 0 24 20"
-                width="30"
-                height="30"
-              >
-                <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-              </svg>
-            </a>
-            <button class="btn transparent" id="sign-up-btn">Sign up</button>
-          </div>
-          <img src="img/log.svg" class="image" alt="" />
+    <div class="panels-container">
+      <a href="index.html" class="homeBtn">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" width="30" height="30">
+          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+        </svg>
+      </a>
+      <div class="panel left-panel">
+        <div class="content">
+          <h3>New here ?</h3>
+          <p>
+            Discover new experiences with AmbuFlow! <br />Get access to
+            exclusive content and features. <br />
+            Create your account.
+          </p>
+          <a href="index.html" class="homeBtn">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 0 24 20" width="30" height="30">
+              <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+            </svg>
+          </a>
+          <button class="btn transparent" id="sign-up-btn">Sign up</button>
         </div>
-        <div class="panel right-panel">
-          <div class="content">
-            <h3>One of us ?</h3>
-            <p>Welcome to our community</p>
-            <button class="btn transparent" id="sign-in-btn">Sign in</button>
-          </div>
-          <img src="img/register.svg" class="image" alt="" />
+        <img src="img/log.svg" class="image" alt="" />
+      </div>
+      <div class="panel right-panel">
+        <div class="content">
+          <h3>One of us ?</h3>
+          <p>Welcome to our community</p>
+          <button class="btn transparent" id="sign-in-btn">Sign in</button>
         </div>
+        <img src="img/register.svg" class="image" alt="" />
       </div>
     </div>
-    <script src="preloader.js"></script>
-    <script>
-      const sign_in_btn = document.querySelector("#sign-in-btn");
-      const sign_up_btn = document.querySelector("#sign-up-btn");
-      const container = document.querySelector(".container");
-
-      sign_up_btn.addEventListener("click", () => {
-        container.classList.add("sign-up-mode");
-      });
-
-      sign_in_btn.addEventListener("click", () => {
-        container.classList.remove("sign-up-mode");
-      });
-
-      // Sign in form submission
-      document.querySelector(".sign-in-form").addEventListener("submit", async function (event) {
-          event.preventDefault();
-
-          const username = document.querySelector(".sign-in-form input[type='text']").value;
-          const password = document.querySelector(".sign-in-form input[type='password']").value;
-
-          // Remove the below block of code when the server is ready (Written just for testing)
-          if (username === "username" && password === "123456") {
-              console.log("Login successful!");
-              localStorage.setItem("userID", "7887892rdwed3")
-              localStorage.setItem("JWTtoken", "dummyToken123"); // Example token
-              localStorage.setItem("login", "success");
-              window.location.href = "hospital.html";
-          }
-          // Testing block ends here, proceed with actual request once the server is ready
-
-          const data = JSON.stringify({ username, password });
-          console.log(data);
-
-          // Uncomment the below code when MongoDB is ready
-          /*
-          try {
-              const response = await fetch("http://localhost:3000/login", {
-                  method: "POST",
-                  headers: {
-                      "Content-Type": "application/json",
-                  },
-                  body: data,
-              });
-
-              if (!response.ok) {
-                  throw new Error("Login failed: " + response.statusText);
-              }
-
-              const result = await response.json();
-              console.log("Server response:", result);
-              localStorage.setItem("token", result.token);
-              localStorage.setItem("userID", result.id);
-              console.log('Login successful!');
-              window.location.href = "hospital.html";
-          } catch (error) {
-              alert("Invalid username or password");
-              console.error("Error during login:", error);
-          }
-          */
-      });
-
-
-      // Sign up form submission
-      document.querySelector(".sign-up-form").addEventListener("submit", async function (event) {
-          event.preventDefault();
-
-          // Get the input values
-          const username = document.querySelector(".sign-up-form input[type='text']").value;
-          const email = document.querySelector(".sign-up-form input[type='email']").value;
-          const password = document.querySelector(".sign-up-form input[type='password']").value;
-
-          // Validate inputs
-          if (username === "" || email === "" || password === "") {
-            alert("Please fill in all fields");
-            return;
-          }
-
-          // Generate a UUID
-          const userId = uuid.v4();
-          console.log("Generated UUID:", userId);
+  </div>
+  <script src="preloader.js"></script>
+  <script>
+    const sign_in_btn = document.querySelector("#sign-in-btn");
+    const sign_up_btn = document.querySelector("#sign-up-btn");
+    const container = document.querySelector(".container");
+
+    sign_up_btn.addEventListener("click", () => {
+      container.classList.add("sign-up-mode");
+    });
+
+    sign_in_btn.addEventListener("click", () => {
+      container.classList.remove("sign-up-mode");
+    });
+
+    // Sign in form submission
+    document.querySelector(".sign-in-form").addEventListener("submit", async function (event) {
+      event.preventDefault();
+
+      const username = document.querySelector(".sign-in-form input[type='text']").value;
+      const password = document.querySelector(".sign-in-form input[type='password']").value;
+
+      // Remove the below block of code when the server is ready (Written just for testing)
+      if (username === "username" && password === "123456") {
+        console.log("Login successful!");
+        localStorage.setItem("userID", "7887892rdwed3")
+        localStorage.setItem("JWTtoken", "dummyToken123"); // Example token
+        localStorage.setItem("login", "success");
+        window.location.href = "hospital.html";
+      }
+      // Testing block ends here, proceed with actual request once the server is ready
 
-          const data = JSON.stringify({
-            id: userId,
-            username,
-            email,
-            password,
-          });
-          console.log(data);
+      const data = JSON.stringify({ username, password });
+      console.log(data);
 
-          // Uncomment the below code when MongoDB is ready
-          /*
-          try {
-            const response = await fetch("http://localhost:3000/signup", {
+      // Uncomment the below code when MongoDB is ready
+      /*
+      try {
+          const response = await fetch("http://localhost:3000/login", {
               method: "POST",
               headers: {
-                "Content-Type": "application/json",
+                  "Content-Type": "application/json",
               },
               body: data,
-            });
-
-            if (!response.ok) {
-              const errorData = await response.json();
-              throw new Error(errorData.message || "Signup failed");
-            }
-
-            const result = await response.json();
-            console.log("Server response:", result);
+          });
 
-            alert("Signup successful!");
-            window.location.href = "login.html";
-          } catch (error) {
-            alert(error.message);
-            console.error("Error during signup:", error);
+          if (!response.ok) {
+              throw new Error("Login failed: " + response.statusText);
           }
-          */
+
+          const result = await response.json();
+          console.log("Server response:", result);
+          localStorage.setItem("token", result.token);
+          localStorage.setItem("userID", result.id);
+          console.log('Login successful!');
+          window.location.href = "hospital.html";
+      } catch (error) {
+          alert("Invalid username or password");
+          console.error("Error during login:", error);
+      }
+      */
+    });
+
+    
+
+      // Uncomment the below code when MongoDB is ready
+      /*
+      try {
+        const response = await fetch("http://localhost:3000/signup", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: data,
         });
 
-      // Toggle password visibility
-      function togglePassword(fieldId, icon) {
-        const field = document.getElementById(fieldId);
-        const isPassword = field.type === "password";
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.message || "Signup failed");
+        }
 
-        // Toggle between 'password' and 'text'
-        field.type = isPassword ? "text" : "password";
+        const result = await response.json();
+        console.log("Server response:", result);
 
-        // Change the icon class between eye and eye-slash
-        icon.classList.toggle("fa-lock-open", isPassword);
-        icon.classList.toggle("fa-lock", !isPassword);
+        alert("Signup successful!");
+        window.location.href = "login.html";
+      } catch (error) {
+        alert(error.message);
+        console.error("Error during signup:", error);
       }
+      */
 
-      document
-        .getElementById("toggle-password")
-        .addEventListener("click", function () {
-          togglePassword("password-input", this);
-        });
+    // Toggle password visibility
+    function togglePassword(fieldId, icon) {
+      const field = document.getElementById(fieldId);
+      const isPassword = field.type === "password";
 
-      document
-        .getElementById("toggle-password-signup")
-        .addEventListener("click", function () {
-          togglePassword("password-input-signup", this);
-        });
+      // Toggle between 'password' and 'text'
+      field.type = isPassword ? "text" : "password";
 
-      // Check password strength
-      function checkPasswordStrength() {
-        const password = document.querySelector(
-          ".sign-up-form input[type='password']"
-        ).value;
-        const strengthWeak = document.getElementById("strength-weak");
-        const strengthMedium = document.getElementById("strength-medium");
-        const strengthStrong = document.getElementById("strength-strong");
-
-        let strength = 0;
-
-        if (password.length >= 8) strength++;
-        if (password.match(/[A-Z]/)) strength++;
-        if (password.match(/[a-z]/)) strength++;
-        if (password.match(/[0-9]/)) strength++;
-        if (password.match(/[^a-zA-Z0-9]/)) strength++;
-
-        strengthWeak.className = "";
-        strengthMedium.className = "";
-        strengthStrong.className = "";
-
-        if (strength >= 1) strengthWeak.className = "weak";
-        if (strength >= 3) strengthMedium.className = "medium";
-        if (strength >= 5) strengthStrong.className = "strong";
-      }
-
-      document
-        .querySelector(".sign-up-form input[type='password']")
-        .addEventListener("input", checkPasswordStrength);
-    </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
-    <script>
-      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",
-      ];
+      // Change the icon class between eye and eye-slash
+      icon.classList.toggle("fa-lock-open", isPassword);
+      icon.classList.toggle("fa-lock", !isPassword);
+    }
 
-      circles.forEach(function (circle, index) {
-        circle.x = 0;
-        circle.y = 0;
-        circle.style.backgroundColor = colors[index % colors.length];
+    document
+      .getElementById("toggle-password")
+      .addEventListener("click", function () {
+        togglePassword("password-input", this);
       });
 
-      window.addEventListener("mousemove", function (e) {
-        coords.x = e.clientX;
-        coords.y = e.clientY;
+    document
+      .getElementById("toggle-password-signup")
+      .addEventListener("click", function () {
+        togglePassword("password-input-signup", this);
       });
 
-      function animateCircles() {
-        let x = coords.x;
-        let y = coords.y;
+    // Check password strength
+    function checkPasswordStrength() {
+      const password = document.querySelector(
+        ".sign-up-form input[type='password']"
+      ).value;
+      const strengthWeak = document.getElementById("strength-weak");
+      const strengthMedium = document.getElementById("strength-medium");
+      const strengthStrong = document.getElementById("strength-strong");
+
+      let strength = 0;
+
+      if (password.length >= 8) strength++;
+      if (password.match(/[A-Z]/)) strength++;
+      if (password.match(/[a-z]/)) strength++;
+      if (password.match(/[0-9]/)) strength++;
+      if (password.match(/[^a-zA-Z0-9]/)) strength++;
+
+      strengthWeak.className = "";
+      strengthMedium.className = "";
+      strengthStrong.className = "";
+
+      if (strength >= 1) strengthWeak.className = "weak";
+      if (strength >= 3) strengthMedium.className = "medium";
+      if (strength >= 5) strengthStrong.className = "strong";
+    }
+
+    document
+      .querySelector(".sign-up-form input[type='password']")
+      .addEventListener("input", checkPasswordStrength);
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
+  <script>
+    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;
+    });
+
+    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";
 
-        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;
 
-          circle.style.scale = (circles.length - index) / circles.length;
+        circle.x = x;
+        circle.y = y;
 
-          circle.x = x;
-          circle.y = y;
+        const nextCircle = circles[index + 1] || circles[0];
+        x += (nextCircle.x - x) * 0.3;
+        y += (nextCircle.y - y) * 0.3;
+      });
 
-          const nextCircle = circles[index + 1] || circles[0];
-          x += (nextCircle.x - x) * 0.3;
-          y += (nextCircle.y - y) * 0.3;
-        });
+      requestAnimationFrame(animateCircles);
+    }
 
-        requestAnimationFrame(animateCircles);
-      }
+    animateCircles();
+  </script>
+  <script src="https://apis.google.com/js/platform.js" async defer></script>
+  <!-- <script src="Firebase.js" type="module"></script> -->
+</body>
 
-      animateCircles();
-    </script>
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/nearby.html b/nearby.html
index 69492e2..5bf48f1 100644
--- a/nearby.html
+++ b/nearby.html
@@ -1,32 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="src/css/navbar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <title>Find Nearby Hospital</title>
     <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>
     <style>
         body {
             font-family: Arial, sans-serif;
             padding: 20px;
             background-color: #f7f7f7;
         }
+
         h1 {
             text-align: center;
             margin-bottom: 10px;
         }
+
         h2 {
             text-align: center;
             font-size: 18px;
             color: #555;
             margin-bottom: 30px;
         }
+
+        .main_container {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
         .search-container {
             text-align: center;
             margin-bottom: 20px;
         }
+
         #searchInput {
             width: 300px;
             padding: 10px;
@@ -34,12 +46,7 @@
             border: 1px solid #ddd;
             border-radius: 4px;
         }
-        .container {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 20px;
-            margin-bottom: 20px;
-        }
+
         .hospital-card {
             background-color: #e7f3fe;
             padding: 10px;
@@ -48,17 +55,20 @@
             transition: transform 0.3s ease, box-shadow 0.3s ease;
             font-size: large;
         }
+
         .hospital-card:hover {
             transform: scale(1.05);
-            box-shadow: 0 6px 15px rgba(0,0,0,0.2);
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
             color: rgb(178, 233, 233);
         }
+
         .hospital-card img {
             width: 100%;
             height: 180px;
             object-fit: cover;
             border-radius: 8px;
         }
+
         .hospital-card a {
             display: block;
             margin: 10px 0 5px 0;
@@ -67,13 +77,107 @@
             font-weight: bold;
             font-size: 16px;
         }
+
         .hospital-card p {
             color: #676262;
         }
+
+        .dark-mode .logo img {
+            filter: brightness(10);
+            /* Inverts the color to make it white */
+        }
+
+        .dark-mode h1,
+        .dark-mode h2 {
+            color: #e7f3fe;
+        }
     </style>
 </head>
+
 <body>
+    <!-- pre loader -->
+    <div id="preloader">
+        <div class="wrapper">
+            <div class="box-wrap">
+                <div class="box one"></div>
+                <div class="box two"></div>
+                <div class="box three"></div>
+                <div class="box four"></div>
+                <div class="box five"></div>
+                <div class="box six"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container" id="container">
 
+        <div class="logo">
+            <div class="brand-name">
+                <span class="letter red" style="--letter-index: 1;">A</span>
+                <span class="letter red" style="--letter-index: 2;">m</span>
+                <span class="letter red" style="--letter-index: 3;">b</span>
+                <span class="letter red" style="--letter-index: 4;">u</span>
+                <span class="letter" style="--letter-index: 5;">F</span>
+                <span class="letter" style="--letter-index: 6;">l</span>
+                <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: 80px; height: auto" />
+        </div>
+        <nav class="menu">
+            <ul>
+                <li>
+                    <a href="#container" style="color: #333;">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711"
+                                stroke="currentColor">
+                            </path>
+                        </svg>
+                    </a>
+                </li>
+                <li>
+                    <a href="index.html" id="home-link" class="menu_links" data-link="Home">
+                        <span>Home</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="features.html" id="features-link" class="menu_links" data-link="Features">
+                        <span>Features</span></a>
+                </li>
+                <li>
+                    <a href="team.html" id="team-link" class="menu_links" data-link="Team">
+                        <span>Team</span></a>
+                </li>
+                <li>
+                    <a href="contact.html" id="contact-link" class="menu_links" data-link="Contact">
+                        <span>Contact</span></a>
+                </li>
+                <li>
+                    <a href="feedback.html" id="feedback-link" class="menu_links" data-link="Feedback">
+                        <span>Feedback</span></a>
+                </li>
+                <li>
+                    <a href="nearby.html" id="nearby-link" class="menu_links" data-link="Nearby">
+                        <span>Nearby</span></a>
+                </li>
+            </ul>
+        </nav>
+
+    </div>
+    <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>
+    <button class="light-dark-btn dark-mode-toggle" id="dark-mode-button">
+        <i class="fa-solid fa-moon"></i>
+    </button>
     <h1>Find Nearby Hospital</h1>
     <h2>Track or call an ambulance and check nearby hospitals for emergency services</h2>
 
@@ -81,86 +185,86 @@ <h2>Track or call an ambulance and check nearby hospitals for emergency services
         <input type="text" id="searchInput" placeholder="Search hospitals by name or location...">
     </div>
 
-    <div class="container" id="hospitalContainer">
+    <div class="main_container" id="hospitalContainer">
         <!-- Hospital cards will be dynamically added here -->
     </div>
 
     <script>
         // Hospital data
         const hospitals = [
-        {
-            name: "AIIMS Delhi",
-            location: "Ansari Nagar, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipP9JGi6pake5Zae72zMqWgYhakGZTnP1KMkEoMI=w408-h306-k-no",
-            link: "https://www.google.com/maps/place/All+India+Institute+Of+Medical+Sciences+Delhi/@28.5671821,77.2074702,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce26f903969d7:0x8367180c6de2ecc2!8m2!3d28.5671774!4d77.2100451!16s%2Fm%2F0lq5p3v?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
-        },
-        {
-            name: "Fortis Escorts Heart Institute",
-            location: "Okhla Road, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipO_LJoTauSAwR0RaSEco9DpYYfVjcBL6oMwZlGM=w480-h240-k-no",
-            link: "https://www.google.com/maps/place/Fortis+Escorts+Heart+Institute/@28.5605979,77.2714045,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce392b869bbaf:0x865db71ba6f271b2!8m2!3d28.5605932!4d77.2739794!16s%2Fg%2F1tyzxc62?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
-        },
-        {
-            name: "Max Super Speciality Hospital",
-            location: "Saket, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipMHbDvRM2SnP15JEFiHHU3BkbeMyILB4Fe_9vb_=w408-h272-k-no",
-            link: "https://www.google.com/maps/place/Max+Super+Speciality+Hospital,+Saket+(Max+Saket)/@28.5275537,77.2094197,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce1f427d4c5fb:0x582d47bbf4970bc1!8m2!3d28.527549!4d77.2119946!16s%2Fm%2F0nhgv9_?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
-        },
-        {
-            name: "BLK Super Speciality Hospital",
-            location: "Pusa Road, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipOOE3FO4yP5Th80bikVNoZbSmhNUgZz8baujSsJ=w427-h240-k-no",
-            link: "https://www.google.com/maps/place/BLK-Max+Super+Speciality+Hospital+Delhi/@28.6433081,77.1771302,17z/data=!3m1!4b1!4m6!3m5!1s0x390d029633b6af21:0x9a67323b63bcc188!8m2!3d28.6433034!4d77.1797051!16s%2Fg%2F1tfzvwkd?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
-        },
-        {
-            name: "Sir Ganga Ram Hospital",
-            location: "Rajinder Nagar, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipPge4AJnRsJww6qZfswWAL9LBfd1iDCBM-hpCzW=w408-h544-k-no",
-            link: "https://www.google.com/maps/place/SIR+GANGA+RAM+HOSPITAL,+Sir+Ganga+Ram+Hospital+Marg,+Old+Rajinder+Nagar,+New+Rajinder+Nagar,+Delhi,+110060/@28.6385473,77.1894559,17z/data=!3m1!4b1!4m6!3m5!1s0x390d02a17c4ab835:0xdee61a9d767b964b!8m2!3d28.6384582!4d77.1895559!16s%2Fg%2F11bytpc110?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
-        },
-        {
-            name: "Apollo Hospitals Delhi",
-            location: "Karol Bagh, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipNUO3hhiOSgCnWYou3qHm0SQTlKaM0wIfiG_OaU=w408-h270-k-no",
-            link: "#"
-        },
-        {
-            name: "Holy Family Hospital",
-            location: "Okhla, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipMpQ-20kn_yH0AtOS1fl7o9fhVcdPZIs4ncO5fU=w408-h306-k-no",
-            link: "https://www.google.com/maps/place/Holy+Family+Hospital/@28.5618161,77.2751113,17z/data=!4m15!1m8!3m7!1s0x390ce3929e6d3319:0xcd2355b56b80d9cf!2sHoly+Family+Hospital!8m2!3d28.5618161!4d77.2751113!10e5!16s%2Fm%2F0n46sgy!3m5!1s0x390ce3929e6d3319:0xcd2355b56b80d9cf!8m2!3d28.5618161!4d77.2751113!16s%2Fm%2F0n46sgy?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
-        },
-        {
-            name: "Safdarjung Hospital",
-            location: "Safdarjung Enclave, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipNrfGkAU1lF3dJVwnJZpLFNrRbzmksWyRDJmvwy=w408-h489-k-no",
-            link: "https://www.google.com/maps/place/Safdarjung+Hospital+New+Emergency+Block/@28.5686945,77.2069167,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce3c788fcae8f:0x2db4a8bddc6eae25!8m2!3d28.5686945!4d77.2069167!16s%2Fg%2F11f66b854r?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
-        },
-        {
-            name: "Moolchand Medcity",
-            location: "Lajpat Nagar, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipO3wxKBu2OTky8xeC5ML8UrgN-ddnaxTqyKuHzr=w408-h368-k-no",
-            link: "https://www.google.com/maps/place/Moolchand+Hospital/@28.566167,77.2331993,17z/data=!4m10!1m2!2m1!1smoolchand+medcity!3m6!1s0x390ce3c849a0fecd:0x309c4e9de4e2aff3!8m2!3d28.566167!4d77.235388!15sChFtb29sY2hhbmQgbWVkY2l0eZIBEHByaXZhdGVfaG9zcGl0YWzgAQA!16s%2Fg%2F11j0045tc5?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
-        },
-        {
-            name: "Deen Dayal Upadhyay Hospital",
-            location: "Hari Nagar, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipOwiTt3QQ-u0vkOmn0njbkwESBmspr82g_wF4Er=w427-h240-k-no",
-            link: "https://www.google.com/maps/place/Deen+Dayal+Upadhyay+Hospital/@28.628017,77.1122963,17z/data=!3m1!4b1!4m6!3m5!1s0x390cfd309eebed77:0xc8559980f0b50535!8m2!3d28.628017!4d77.1122963!16s%2Fg%2F1tf1m64n?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
-        },
-        {
-            name: "Artemis Hospitals",
-            location: "Dwarka, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipO4FfTa6lmb3Hncw3WgwGt-4n-4qcv6NDMVeUfh=w408-h306-k-no",
-            link: "https://www.google.com/maps/place/Artemis+Hospitals+Dwarka/@28.5709273,77.0593246,17z/data=!3m1!4b1!4m6!3m5!1s0x390d1b03c0000001:0x3eb1330d284a7209!8m2!3d28.5709273!4d77.0593246!16s%2Fg%2F11g_yrth5?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
-        },
-        {
-            name: "Venkateshwar Hospital",
-            location: "Sector 18A, Dwarka, New Delhi",
-            image: "https://lh5.googleusercontent.com/p/AF1QipPfqqxb8Yu1rfBbEWDzom0Gb1mfY7R8zohuCym1=w408-h544-k-no",
-            link: "https://www.google.com/maps/place/Venkateshwar+Hospital/@28.5885973,77.0380428,17z/data=!3m1!4b1!4m6!3m5!1s0x390d1ac3e8a4b27b:0x218f945a11993663!8m2!3d28.5885973!4d77.0380428!16s%2Fg%2F11b7y83nv6?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
-        }
-    ];
+            {
+                name: "AIIMS Delhi",
+                location: "Ansari Nagar, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipP9JGi6pake5Zae72zMqWgYhakGZTnP1KMkEoMI=w408-h306-k-no",
+                link: "https://www.google.com/maps/place/All+India+Institute+Of+Medical+Sciences+Delhi/@28.5671821,77.2074702,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce26f903969d7:0x8367180c6de2ecc2!8m2!3d28.5671774!4d77.2100451!16s%2Fm%2F0lq5p3v?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
+            },
+            {
+                name: "Fortis Escorts Heart Institute",
+                location: "Okhla Road, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipO_LJoTauSAwR0RaSEco9DpYYfVjcBL6oMwZlGM=w480-h240-k-no",
+                link: "https://www.google.com/maps/place/Fortis+Escorts+Heart+Institute/@28.5605979,77.2714045,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce392b869bbaf:0x865db71ba6f271b2!8m2!3d28.5605932!4d77.2739794!16s%2Fg%2F1tyzxc62?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
+            },
+            {
+                name: "Max Super Speciality Hospital",
+                location: "Saket, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipMHbDvRM2SnP15JEFiHHU3BkbeMyILB4Fe_9vb_=w408-h272-k-no",
+                link: "https://www.google.com/maps/place/Max+Super+Speciality+Hospital,+Saket+(Max+Saket)/@28.5275537,77.2094197,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce1f427d4c5fb:0x582d47bbf4970bc1!8m2!3d28.527549!4d77.2119946!16s%2Fm%2F0nhgv9_?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
+            },
+            {
+                name: "BLK Super Speciality Hospital",
+                location: "Pusa Road, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipOOE3FO4yP5Th80bikVNoZbSmhNUgZz8baujSsJ=w427-h240-k-no",
+                link: "https://www.google.com/maps/place/BLK-Max+Super+Speciality+Hospital+Delhi/@28.6433081,77.1771302,17z/data=!3m1!4b1!4m6!3m5!1s0x390d029633b6af21:0x9a67323b63bcc188!8m2!3d28.6433034!4d77.1797051!16s%2Fg%2F1tfzvwkd?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
+            },
+            {
+                name: "Sir Ganga Ram Hospital",
+                location: "Rajinder Nagar, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipPge4AJnRsJww6qZfswWAL9LBfd1iDCBM-hpCzW=w408-h544-k-no",
+                link: "https://www.google.com/maps/place/SIR+GANGA+RAM+HOSPITAL,+Sir+Ganga+Ram+Hospital+Marg,+Old+Rajinder+Nagar,+New+Rajinder+Nagar,+Delhi,+110060/@28.6385473,77.1894559,17z/data=!3m1!4b1!4m6!3m5!1s0x390d02a17c4ab835:0xdee61a9d767b964b!8m2!3d28.6384582!4d77.1895559!16s%2Fg%2F11bytpc110?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
+            },
+            {
+                name: "Apollo Hospitals Delhi",
+                location: "Karol Bagh, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipNUO3hhiOSgCnWYou3qHm0SQTlKaM0wIfiG_OaU=w408-h270-k-no",
+                link: "#"
+            },
+            {
+                name: "Holy Family Hospital",
+                location: "Okhla, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipMpQ-20kn_yH0AtOS1fl7o9fhVcdPZIs4ncO5fU=w408-h306-k-no",
+                link: "https://www.google.com/maps/place/Holy+Family+Hospital/@28.5618161,77.2751113,17z/data=!4m15!1m8!3m7!1s0x390ce3929e6d3319:0xcd2355b56b80d9cf!2sHoly+Family+Hospital!8m2!3d28.5618161!4d77.2751113!10e5!16s%2Fm%2F0n46sgy!3m5!1s0x390ce3929e6d3319:0xcd2355b56b80d9cf!8m2!3d28.5618161!4d77.2751113!16s%2Fm%2F0n46sgy?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
+            },
+            {
+                name: "Safdarjung Hospital",
+                location: "Safdarjung Enclave, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipNrfGkAU1lF3dJVwnJZpLFNrRbzmksWyRDJmvwy=w408-h489-k-no",
+                link: "https://www.google.com/maps/place/Safdarjung+Hospital+New+Emergency+Block/@28.5686945,77.2069167,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce3c788fcae8f:0x2db4a8bddc6eae25!8m2!3d28.5686945!4d77.2069167!16s%2Fg%2F11f66b854r?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
+            },
+            {
+                name: "Moolchand Medcity",
+                location: "Lajpat Nagar, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipO3wxKBu2OTky8xeC5ML8UrgN-ddnaxTqyKuHzr=w408-h368-k-no",
+                link: "https://www.google.com/maps/place/Moolchand+Hospital/@28.566167,77.2331993,17z/data=!4m10!1m2!2m1!1smoolchand+medcity!3m6!1s0x390ce3c849a0fecd:0x309c4e9de4e2aff3!8m2!3d28.566167!4d77.235388!15sChFtb29sY2hhbmQgbWVkY2l0eZIBEHByaXZhdGVfaG9zcGl0YWzgAQA!16s%2Fg%2F11j0045tc5?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
+            },
+            {
+                name: "Deen Dayal Upadhyay Hospital",
+                location: "Hari Nagar, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipOwiTt3QQ-u0vkOmn0njbkwESBmspr82g_wF4Er=w427-h240-k-no",
+                link: "https://www.google.com/maps/place/Deen+Dayal+Upadhyay+Hospital/@28.628017,77.1122963,17z/data=!3m1!4b1!4m6!3m5!1s0x390cfd309eebed77:0xc8559980f0b50535!8m2!3d28.628017!4d77.1122963!16s%2Fg%2F1tf1m64n?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
+            },
+            {
+                name: "Artemis Hospitals",
+                location: "Dwarka, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipO4FfTa6lmb3Hncw3WgwGt-4n-4qcv6NDMVeUfh=w408-h306-k-no",
+                link: "https://www.google.com/maps/place/Artemis+Hospitals+Dwarka/@28.5709273,77.0593246,17z/data=!3m1!4b1!4m6!3m5!1s0x390d1b03c0000001:0x3eb1330d284a7209!8m2!3d28.5709273!4d77.0593246!16s%2Fg%2F11g_yrth5?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
+            },
+            {
+                name: "Venkateshwar Hospital",
+                location: "Sector 18A, Dwarka, New Delhi",
+                image: "https://lh5.googleusercontent.com/p/AF1QipPfqqxb8Yu1rfBbEWDzom0Gb1mfY7R8zohuCym1=w408-h544-k-no",
+                link: "https://www.google.com/maps/place/Venkateshwar+Hospital/@28.5885973,77.0380428,17z/data=!3m1!4b1!4m6!3m5!1s0x390d1ac3e8a4b27b:0x218f945a11993663!8m2!3d28.5885973!4d77.0380428!16s%2Fg%2F11b7y83nv6?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
+            }
+        ];
 
         function createHospitalCard(hospital) {
             return `
@@ -178,13 +282,13 @@ <h2>Track or call an ambulance and check nearby hospitals for emergency services
         }
 
         function filterHospitals(searchTerm) {
-            return hospitals.filter(hospital => 
+            return hospitals.filter(hospital =>
                 hospital.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                 hospital.location.toLowerCase().includes(searchTerm.toLowerCase())
             );
         }
 
-        document.getElementById('searchInput').addEventListener('input', function(e) {
+        document.getElementById('searchInput').addEventListener('input', function (e) {
             const searchTerm = e.target.value;
             const filteredHospitals = filterHospitals(searchTerm);
             renderHospitals(filteredHospitals);
@@ -193,6 +297,7 @@ <h2>Track or call an ambulance and check nearby hospitals for emergency services
         // Initial render
         renderHospitals(hospitals);
     </script>
-
+    <script src="script.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index dfc3a79..a7b8b4e 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,101 @@
+let script = document.createElement('script');
+script.src = "https://cdn.gtranslate.net/widgets/latest/float.js"; // URL of the external script
+script.defer = true; // Ensures the script runs after parsing the HTML
+document.body.appendChild(script); // Add the script to the body
+
+window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }
+// Function to change the active class when a link is clicked
+function changeContent(page) {
+  var links = document.querySelectorAll(".menu ul li a");
+
+  // Remove "active" class from all links
+  links.forEach((link) => link.classList.remove("active"));
+
+  // Add "active" class to the current page link
+  var activeLink = document.getElementById(page + "-link");
+  if (activeLink) {
+    activeLink.classList.add("active");
+  } else {
+    console.error(`Link with id ${page + '-link'} not found`);
+  }
+
+  console.log(page + "-link");
+}
+
+// Function that runs when the window loads
+window.onload = function () {
+  // Assuming you are using the URL or some global variable to determine the page
+  var currentPage = window.location.pathname.split("/").pop().replace(".html", "");
+  if (currentPage) {
+    changeContent(currentPage);
+  }
+
+  // Add delay to each letter drop
+  const letters = document.querySelectorAll('.letter');
+  letters.forEach((letter, index) => {
+    letter.style.animationDelay = `${index * 0.1}s`;
+  });
+};
+
+// JS for dark mode functionality
+// adding code for dark mode
+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");
+
+    // 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
+    }
+  });
+});
+
+//For Translator
+window.gtranslateSettings = {
+  "default_language": "en",
+  "detect_browser_language": true,
+  "wrapper_selector": ".gtranslate_wrapper",
+  "alt_flags": { "en": "usa" }
+}
+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';
+  }
+});
+
 // Newsletter form submission handler
+
 document
   .getElementById("newsletter-form")
   .addEventListener("submit", function (event) {
@@ -50,39 +147,7 @@ accordions.forEach((accordion, index) => {
   });
 });
 
-// Function to handle the active state of navbar items
-function changeContent(page) {
-  // Get all navigation links
-  var links = document.querySelectorAll(".menu ul li a");
 
-  // Remove the active class from all links
-  links.forEach((link) => link.classList.remove("active"));
-
-  // Add the active class to the clicked link
-  document.getElementById(page + "-link").classList.add("active");
-}
-
-// Make "Home" the default active page on load
-window.onload = function () {
-  document.getElementById("home-link").classList.add("active");
-};
-
-// JS for dark mode functionality
-// Get the dark mode button element
-const darkModeButton = document.getElementById('dark-mode-button');
-
-// Add event listener for toggle functionality
-darkModeButton.addEventListener('click', () => {
-  document.body.classList.toggle('dark-mode');
-
-  // Toggle icon between moon and sun
-  const icon = darkModeButton.querySelector('i');
-  icon.classList.toggle('fa-moon');
-  icon.classList.toggle('fa-sun');
-
-  // Log the current classes for debugging
-  console.log(icon.classList); // Check the classes being applied to the icon
-});
 
 // Back to top button functionality
 const backToTopButton = document.getElementById('back-to-top');
@@ -96,7 +161,4 @@ window.onscroll = function () {
   }
 };
 
-// Scroll to top when the button is clicked
-backToTopButton.addEventListener('click', () => {
-  window.scrollTo({ top: 0, behavior: 'smooth' });
-});
+
diff --git a/src/css/index.css b/src/css/index.css
index 81d0a6b..292dcda 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -34,125 +34,6 @@ body {
   font-family: Arial, sans-serif;
 }
 
-header {
-  background-color: #ffffff;
-  border-bottom: px solid #e5e7eb;
-}
-
-.container {
-  /* max-width: 1280px; */
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px;
-}
-
-.brand-name {
-  font-family: 'poppins', sans-serif;
-  font-weight: bold;
-  margin-right: 0.5rem;
-  font-size: 1.5rem;
-  color: #2980B9;
-}
-
-.ambu {
-  font-family: 'poppins', sans-serif;
-  font-weight: bold;
-  font-size: 1.5rem;
-  color: #e81a1a;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-}
-
-.logo img {
-  height: 40px;
-  margin-right: 10px;
-}
-
-.logo span {
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-.menu {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.menu ul {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.menu ul li {
-  margin-left: 20px;
-}
-
-.menu ul li a {
-  text-decoration: none;
-  color: #0344f6;
-  font-weight: 500;
-  padding: 8px 12px;
-  transition: background-color 0.3s;
-  /* border: 2px solid #1d4ed8; */
-  /* border-radius: 15px; */
-}
-
-:hover {
-  /* color: #1d4ed8;
-  background-color: #f3f4f6;
-  border-radius: 5px; */
-  color: #0344f6;
-  /* background-color: #1d4ed8; */
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  text-wrap: nowrap;
-}
-
-.buttons a {
-  text-decoration: none;
-  padding: 10px 20px;
-  border-radius: 5px;
-  margin-left: 10px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  transition: background-color 0.3s, color 0.3s;
-  border: 2px solid #1d4ed8;
-}
-
-.login {
-  color: #4b5563;
-  background-color: transparent;
-  border: 1px solid transparent;
-}
-
-.login:hover {
-  /* background-color: #f3f4f6;
-  color: #1d4ed8; */
-  background-color: #1d4ed8;
-  ;
-  color: white;
-}
-
-.get-started {
-  background-color: #1d4ed8;
-  color: #ffffff;
-}
-
-.get-started:hover {
-  background-color: #2563eb;
-}
-
 .quick-ft {
   display: flex;
   flex-direction: column;
diff --git a/src/css/indexmain.css b/src/css/indexmain.css
index 75fe455..080bc84 100644
--- a/src/css/indexmain.css
+++ b/src/css/indexmain.css
@@ -1,300 +1,5 @@
 @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;
-    overflow-x: hidden;
-    scroll-behavior: smooth;
-}
-
-html::-webkit-scrollbar {
-    width: 9px;
-    transition: width 0.3s ease;
-    margin: 10px;
-}
-
-html::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: rgba(216, 216, 216, 0.74);
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
-}
-
-html::-webkit-scrollbar-thumb:window-inactive {
-    background: rgb(156, 156, 156);
-}
-
-
-body {
-    margin: 0;
-    font-family: Arial, sans-serif;
-    background-color: #e4eaf1;
-}
-
-#loader-wrapper {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1001;
-}
-
-#loader-wrapper .loader-section {
-    position: fixed;
-    top: 0;
-    width: 51%;
-    height: 100%;
-    background: #EEEEEE;
-    z-index: 1000;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-}
-
-#loader-wrapper .loader-section.section-left {
-    left: 0;
-}
-
-#loader-wrapper .loader-section.section-right {
-    right: 0;
-}
-
-#loader {
-    display: block;
-    position: relative;
-    left: 50%;
-    top: 50%;
-    width: 150px;
-    height: 150px;
-    margin: -75px 0 0 -75px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #DC5F00;
-    -webkit-animation: spin 2s linear infinite;
-    animation: spin 2s linear infinite;
-    z-index: 99999;
-}
-
-#loader:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #373A40;
-    -webkit-animation: spin 3s linear infinite;
-    animation: spin 3s linear infinite;
-}
-
-#loader:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #686D76;
-    -webkit-animation: spin 1.5s linear infinite;
-    animation: spin 1.5s linear infinite;
-}
-
-.loaded #loader-wrapper {
-    visibility: hidden;
-    -webkit-transform: translateY(-100%);
-    transform: translateY(-100%);
-    -webkit-transition: all 0.3s 1s ease-out;
-    transition: all 0.3s 1s ease-out;
-}
-
-.loaded #loader-wrapper .loader-section.section-left {
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
-    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-.loaded #loader-wrapper .loader-section.section-right {
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
-    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-.loaded #loader {
-    opacity: 0;
-    -webkit-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
-}
-
-@-webkit-keyframes spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-.container {
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 10px 20px;
-}
-
-.brand-name {
-    font-family: 'poppins', sans-serif;
-    font-weight: bold;
-    margin-right: 0.5rem;
-    font-size: 1.5rem;
-    color: #2980B9;
-}
-
-.ambu {
-    font-family: 'poppins', sans-serif;
-    font-weight: bold;
-    font-size: 1.5rem;
-    color: #e81a1a;
-}
-
-.logo {
-    display: flex;
-    align-items: center;
-    margin-top: 0.7rem;
-}
-
-.logo img {
-    margin: 0 5px;
-}
-
-.logo span {
-    font-size: 2rem;
-    font-weight: 600;
-}
-
-.menu {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    width: 100%;
-    bottom: 1rem;
-    z-index: 1000;
-}
-
-.menu ul {
-    background-color: rgb(240, 236, 236);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40);
-    list-style: none;
-    padding: 0.6rem 0.4rem;
-    border-radius: 50px;
-    overflow: hidden;
-}
-
-.menu_links {
-    padding: 0.55rem;
-    color: rgb(78, 77, 77);
-    text-decoration: none;
-    font-size: 13.5px;
-    display: block;
-    border-radius: 50px;
-    position: relative;
-}
-
-.menu_links.active {
-    color: white;
-    background-color: #000;
-}
-
-.menu ul li {
-    margin-left: 7px;
-}
-
-.menu ul li:first-child {
-    margin-left: 3px;
-}
-
-.menu ul li:first-child a {
-    padding: 5px 8px;
-    position: relative;
-    top: 3px;
-    /* transform: translateY(2px); */
-    color: #373A40;
-}
-
-.menu ul li:first-child:hover {
-    background-color: rgb(226, 223, 223);
-    border-radius: 50%;
-}
-
-.menu_links span {
-    display: block;
-    transition: 0.5s;
-}
-
-.menu_links:hover span {
-    transform: translateY(-70px);
-}
-
-.menu_links:hover {
-    background-color: rgb(226, 223, 223);
-    /* background-color: rgb(226, 223, 223); */
-    transition: 0.5s;
-}
-
-.menu_links::before {
-    content: "";
-    position: absolute;
-    content: attr(data-link);
-    top: 100%;
-    opacity: 0;
-    transition: 0.5s;
-}
-
-.menu_links:hover:before {
-    top: 20%;
-    opacity: 1;
-}
-
-.menu_links.active:hover {
-    color: white;
-    background-color: #000;
-}
-
-.menu_links.active:before {
-    color: white;
-    background-color: #000;
-}
-
-
 .main_content {
     display: flex;
     justify-content: space-between;
diff --git a/src/css/login.css b/src/css/login.css
index 4e4a120..9376241 100644
--- a/src/css/login.css
+++ b/src/css/login.css
@@ -420,6 +420,7 @@ form.sign-in-form {
   border-radius: 10px;
   cursor: pointer;
   transition: 0.3s;
+  z-index: 111;
   text-decoration: none;
   border: 1px solid #4d84e2; 
 }
diff --git a/src/css/navbar.css b/src/css/navbar.css
new file mode 100644
index 0000000..8a8f076
--- /dev/null
+++ b/src/css/navbar.css
@@ -0,0 +1,513 @@
+@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;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+}
+
+html::-webkit-scrollbar {
+    width: 9px;
+    transition: width 0.3s ease;
+    margin: 10px;
+}
+
+html::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: rgba(216, 216, 216, 0.74);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+}
+
+html::-webkit-scrollbar-thumb:window-inactive {
+    background: rgb(156, 156, 156);
+}
+
+
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #e4eaf1;
+}
+
+#loader-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1001;
+}
+
+#loader-wrapper .loader-section {
+    position: fixed;
+    top: 0;
+    width: 51%;
+    height: 100%;
+    background: #EEEEEE;
+    z-index: 1000;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+}
+
+#loader-wrapper .loader-section.section-left {
+    left: 0;
+}
+
+#loader-wrapper .loader-section.section-right {
+    right: 0;
+}
+
+#loader {
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 150px;
+    height: 150px;
+    margin: -75px 0 0 -75px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #DC5F00;
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+    z-index: 99999;
+}
+
+#loader:before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #373A40;
+    -webkit-animation: spin 3s linear infinite;
+    animation: spin 3s linear infinite;
+}
+
+#loader:after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #686D76;
+    -webkit-animation: spin 1.5s linear infinite;
+    animation: spin 1.5s linear infinite;
+}
+
+.loaded #loader-wrapper {
+    visibility: hidden;
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+    -webkit-transition: all 0.3s 1s ease-out;
+    transition: all 0.3s 1s ease-out;
+}
+
+.loaded #loader-wrapper .loader-section.section-left {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.loaded #loader-wrapper .loader-section.section-right {
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.loaded #loader {
+    opacity: 0;
+    -webkit-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+.container {
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 20px;
+}
+
+.brand-name {
+    font-family: 'poppins', sans-serif;
+    font-weight: bold;
+    font-size: 1.5rem;
+    color: #2980B9;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 10px;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    margin-top: 0.7rem;
+    animation: logoAnimation 1s ease forwards;
+}
+
+/* Logo Animation */
+@keyframes logoAnimation {
+    0% {
+        opacity: 0;
+        transform: translateX(-100px);
+        /* Start from the left */
+    }
+
+    50% {
+        transform: translateX(10px);
+        /* Move slightly to the right */
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+        /* End at original position */
+    }
+}
+
+.logo a {
+    text-decoration: none;
+}
+
+.logo img {
+    margin: 0 5px;
+}
+
+.logo span {
+    font-size: 2rem;
+    font-weight: 600;
+}
+
+.menu {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    width: 100%;
+    bottom: 1rem;
+    z-index: 1000;
+}
+
+.menu ul {
+    background-color: rgb(240, 236, 236);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40);
+    list-style: none;
+    padding: 0.6rem 0.4rem;
+    border-radius: 50px;
+    overflow: hidden;
+}
+
+.menu_links {
+    padding: 0.55rem;
+    color: rgb(78, 77, 77);
+    text-decoration: none;
+    font-size: 13.5px;
+    display: block;
+    border-radius: 50px;
+    position: relative;
+}
+
+.menu_links.active {
+    color: white;
+    background-color: #000;
+}
+
+.menu ul li {
+    margin-left: 7px;
+}
+
+.menu ul li:first-child {
+    margin-left: 3px;
+}
+
+.menu ul li:first-child a {
+    padding: 5px 8px;
+    position: relative;
+    top: 3px;
+    /* transform: translateY(2px); */
+    color: #373A40;
+}
+
+.menu ul li:first-child:hover {
+    background-color: rgb(226, 223, 223);
+    border-radius: 50%;
+}
+
+.menu_links span {
+    display: block;
+    transition: 0.5s;
+}
+
+.menu_links:hover span {
+    transform: translateY(-70px);
+}
+
+.menu_links:hover {
+    background-color: rgb(226, 223, 223);
+    /* background-color: rgb(226, 223, 223); */
+    transition: 0.5s;
+}
+
+.menu_links::before {
+    content: "";
+    position: absolute;
+    content: attr(data-link);
+    top: 100%;
+    opacity: 0;
+    transition: 0.5s;
+}
+
+.menu_links:hover:before {
+    top: 20%;
+    opacity: 1;
+}
+
+.menu_links.active:hover {
+    color: white;
+    background-color: #000;
+}
+
+.menu_links.active:before {
+    color: white;
+}
+
+.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 */
+    right: -60px;
+}
+
+.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 */
+}
+
+.chatbot-button:hover .tooltip-text {
+    display: block;
+    /* Show on hover */
+}
+
+.circle {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    pointer-events: none;
+    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;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9999;
+}
+
+.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:hover .tooltip-text {
+    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; */
+}
+
+
+
+.dark-mode {
+    background-color: rgba(50, 50, 50, 0.95);
+    /* Slightly gray background with high opacity */
+}
+
+
+.light-dark-btn {
+    background-color: transparent;
+    border: none;
+    position: fixed;
+    z-index: 1111;
+    right: 1rem;
+    bottom: 1rem;
+    /* Black border */
+    cursor: pointer;
+    color: black;
+    /* Default button color */
+}
+
+.light-dark-btn:hover {
+    color: blue;
+    /* Change color on hover */
+}
+
+.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 */
+    /* 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 */
+}
+
+.red {
+    color: red;
+    /* Change the color of letters in this class to red */
+}
+
+.letter {
+    display: inline-block;
+    font-size: 2rem;
+    animation: letterDrop 0.5s ease forwards;
+    animation-delay: calc(var(--letter-index)* 0.1s);
+}
+
+@keyframes letterDrop {
+    0% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+
+    50% {
+        transform: translateY(10px);
+        /* Slight bounce */
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
\ No newline at end of file
diff --git a/src/css/up.css b/src/css/up.css
index a9e5354..3da2a7a 100644
--- a/src/css/up.css
+++ b/src/css/up.css
@@ -398,8 +398,6 @@ form.sign-in-form {
   }
 }
 
-
-
 .homeBtn {
     position: absolute;
     top: 20px;
@@ -410,6 +408,7 @@ form.sign-in-form {
     border-radius: 10px;
     cursor: pointer;
     transition: 0.3s;
+    z-index: 1111;
     text-decoration: none;
     border: 1px solid #f3f1f1;
   }
diff --git a/team.html b/team.html
index 19de16d..ccd92b1 100644
--- a/team.html
+++ b/team.html
@@ -7,6 +7,7 @@
     <title>Team</title>
     <link rel="stylesheet" href="preloaderStyle.css">
     <link rel="stylesheet" href="src/css/index.css">
+    <link rel="stylesheet" href="src/css/navbar.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>
@@ -14,18 +15,6 @@
     <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
     <!--Updated to latest version-->
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f4f4f4;
-            margin: 0;
-            padding: 0;
-            color: #333;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-        }
-
-
         /* font size of button */
         .buttons .login,
         .buttons .get-started,
@@ -36,29 +25,6 @@
             /* 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:  rgb(148 207 226);
-            /* 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 {
@@ -66,53 +32,12 @@
             /* 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 */
@@ -125,40 +50,6 @@
             /* 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 {
@@ -174,20 +65,6 @@
         }
 
         /* end */
-
-
-
-        .menu ul li a {
-            padding: 10px 15px;
-            color: black;
-            text-decoration: none;
-        }
-
-        .menu ul li a.active {
-            color: white;
-            background-color: #000;
-        }
-
         .content {
             margin: 20px;
             padding: 20px;
@@ -203,7 +80,6 @@
         }
 
         .team-section {
-
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
@@ -214,7 +90,6 @@
             justify-content: center;
             gap: 22px;
             animation: fadeIn 1s ease-in-out;
-
         }
 
         .team-member {
@@ -344,136 +219,6 @@
                 /* End at original position */
             }
         }
-
-        /* Letter Drop Animation */
-        @keyframes letterDrop {
-            0% {
-                transform: translateY(-100%);
-                opacity: 0;
-            }
-
-            50% {
-                transform: translateY(10px);
-                /* Slight bounce */
-                opacity: 1;
-            }
-
-            100% {
-                transform: translateY(0);
-            }
-        }
-
-        .logo {
-            display: flex;
-            align-items: center;
-            animation: logoAnimation 1s ease forwards;
-        }
-
-        .brand-name {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            margin-right: 10px;
-            /* Space between the text and the logo image */
-        }
- 
-        .letter {
-
-            display:  inline-block;
-            font-size:  2rem;
-            animation:  letterDrop 0.5s ease forwards;
-            animation-delay:  calc(var(--letter-index) * 0.1s);
- 
-        }
- 
-        .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;
-        }
-
-        .chatbot-container {
-      position: fixed;
-      transition: right 0.3s ease;
-      bottom: 20px;
-      right: 7rem;
-      z-index: 1000;
-    }
-
-    .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 */
-      right: -60px;
-    }
-
-    .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 */
-    }
-
-    .chatbot-button:hover .tooltip-text {
-      display: block;
-      /* Show on hover */
-    }
     </style>
 </head>
 
@@ -491,48 +236,62 @@
             </div>
         </div>
     </div>
-
-    <header class="navbar">
-        <div class="container">
-
-            <div class="logo">
-                <div class="brand-name">
-                    <span class="letter red" style="--letter-index: 1;">A</span>
-                    <span class="letter red" style="--letter-index: 2;">m</span>
-                    <span class="letter red" style="--letter-index: 3;">b</span>
-                    <span class="letter red" style="--letter-index: 4;">u</span>
-                    <span class="letter" style="--letter-index: 5;">F</span>
-                    <span class="letter" style="--letter-index: 6;">l</span>
-                    <span class="letter" style="--letter-index: 7;">o</span>
-                    <span class="letter" style="--letter-index: 8;">w</span>
-                </div>
-                <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">
-                <ul>
-                    <li><a href="index.html" id="home-link" onclick="changeContent('home')"><i
-                                class="fa-solid fa-house"></i> Home</a></li>
-                    <li><a href="features.html" id="features-link" onclick="changeContent('features')"><i
-                                class="fa-solid fa-file"></i> Features</a></li>
-                    <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i
-                                class="fa-solid fa-user-group"></i> Team</a></li>
-                    <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i
-                                class="fa-solid fa-phone"></i> Contact</a></li>
-                    <li><a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i
-                                class="fa-solid fa-clipboard"></i> Feedback</a></li>
-                </ul>
-            </nav>
-            <div class="buttons">
-                <a href="login.html" class="login">Log in</a>
-                <a href="up.html" class="get-started">Get started</a>
+    <!-- ------------------------------Added a navbar---------------------------------- -->
+    <div class="container" id="container">
+
+        <div class="logo">
+            <div class="brand-name">
+                <span class="letter red" style="--letter-index: 1;">A</span>
+                <span class="letter red" style="--letter-index: 2;">m</span>
+                <span class="letter red" style="--letter-index: 3;">b</span>
+                <span class="letter red" style="--letter-index: 4;">u</span>
+                <span class="letter" style="--letter-index: 5;">F</span>
+                <span class="letter" style="--letter-index: 6;">l</span>
+                <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: 80px; height: auto" />
         </div>
-    </header>
+        <nav class="menu">
+            <ul>
+                <li>
+                    <a href="#container" style="color: #333;">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M6.34314 11.5858L12 5.92893M12 5.92893L17.6568 11.5858M12 5.92893V18.0711"
+                                stroke="currentColor">
+                            </path>
+                        </svg>
+                    </a>
+                </li>
+                <li>
+                    <a href="index.html" id="home-link" class="menu_links" data-link="Home">
+                        <span>Home</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="features.html" id="features-link" class="menu_links" data-link="Features">
+                        <span>Features</span></a>
+                </li>
+                <li>
+                    <a href="team.html" id="team-link" class="menu_links" data-link="Team">
+                        <span>Team</span></a>
+                </li>
+                <li>
+                    <a href="contact.html" id="contact-link" class="menu_links" data-link="Contact">
+                        <span>Contact</span></a>
+                </li>
+                <li>
+                    <a href="feedback.html" id="contact-link" class="menu_links" data-link="Feedback">
+                        <span>Feedback</span></a>
+                </li>
+                <li>
+                    <a href="nearby.html" id="contact-link" class="menu_links" data-link="Nearby">
+                        <span>Nearby</span></a>
+                </li>
+            </ul>
+        </nav>
 
+    </div>
     <div class="content" id="main-content">
         <h1>Meet Our Team</h1>
         <div class="team-section">
@@ -561,28 +320,24 @@ <h2>GPS Technician</h2>
 
     <!-- Contact Section in Full Row -->
     <div class="features-container">
-    <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 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>
-
-    </div>
-
-
-
     <footer style="color: #f3f4f6; text-align: center; width: 100%; background-color: #C4D7FF; border: none;">
         <div
             style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 20px 0;">
@@ -639,137 +394,36 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
                 </form>
             </div>
         </div>
+    </footer>
+        <script src="preloader.js"></script>
+
+
 
         <!-- Copyright Section -->
         <div
-            style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: center; align-items: center; padding: 20px; border-top: 1px solid #a0c0ff;">
+            style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: center; align-items: center; padding: 10px 20px; border-top: 1px solid #a0c0ff;">
             <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: absolute;
-        right: 0;
-    ">↑</button>
-        </div>
-    </footer>
-
-    <!-- Chatbot button -->
-    <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>
-
-    <script src="preloader.js"></script>
-
-    <!-- Add this style block in the <head> section or in your CSS file -->
-    <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>
-
-    <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
-        // Back to Top Button functionality
-        document.addEventListener('DOMContentLoaded', function () {
-            var backToTopBtn = document.getElementById("backToTopBtn");
-
-            backToTopBtn.addEventListener('click', function () {
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth'
-                });
-            });
-        });
-    </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>
-
+            <script src="preloader.js"></script>
+            <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>
+            <button class="light-dark-btn dark-mode-toggle" id="dark-mode-button">
+                <i class="fa-solid fa-moon"></i>
+            </button>
+            <!-- Add this style block in the <head> section or in your CSS file -->
+
+            <script src="script.js">
+            </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/up.html b/up.html
index cc980df..372b885 100644
--- a/up.html
+++ b/up.html
@@ -563,217 +563,224 @@ <h3>One of us ?</h3>
 
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Register & Login</title>
-    <link rel="stylesheet" href="preloaderStyle.css">
-    <link rel="stylesheet" href="src/css/up.css" />
-    <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Register & Login</title>
+  <link rel="stylesheet" href="preloaderStyle.css">
+  <link rel="stylesheet" href="src/css/up.css" />
+  <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
 </head>
+
 <body>
-    <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>
-
-    <!-- Preloader -->
-    <div id="preloader">
-        <div class="wrapper">
-            <div class="box-wrap">
-                <div class="box one"></div>
-                <div class="box two"></div>
-                <div class="box three"></div>
-                <div class="box four"></div>
-                <div class="box five"></div>
-                <div class="box six"></div>
-            </div>
-        </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>
+
+  <!-- Preloader -->
+  <div id="preloader">
+    <div class="wrapper">
+      <div class="box-wrap">
+        <div class="box one"></div>
+        <div class="box two"></div>
+        <div class="box three"></div>
+        <div class="box four"></div>
+        <div class="box five"></div>
+        <div class="box six"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="forms-container">
+      <div class="signin-signup">
+        <!-- Sign In Form -->
+        <form action="#" class="sign-in-form">
+          <h2 class="title">Sign in</h2>
+          <div class="input-field">
+            <i class="fas fa-user"></i>
+            <input type="text" placeholder="Username" required />
+          </div>
+          <div class="input-field">
+            <i class="fas fa-lock" id="toggle-password"></i>
+            <input type="password" placeholder="Password" id="password-input" required />
+          </div>
+          <input type="submit" value="Login" class="btn solid" />
+          <p class="social-text">Or Sign in with social platforms</p>
+          <div class="social-media">
+            <a href="https://www.google.com" target="_blank" class="social-icon"><i class="fab fa-google"
+                style="font-size: 24px; color: #4285f4"></i></a>
+            <a href="https://facebook.com/YourPage" target="_blank" class="social-icon"><i class="fab fa-facebook-f"
+                style="font-size: 24px; color: #4267b2"></i></a>
+            <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon"><i class="fab fa-github"
+                style="font-size: 24px; color: #333"></i></a>
+          </div>
+        </form>
+
+        <!-- Sign Up Form -->
+        <form action="#" class="sign-up-form">
+          <h2 class="title">Sign up</h2>
+          <div class="input-field">
+            <i class="fas fa-user"></i>
+            <input type="text" placeholder="Username" required />
+          </div>
+          <div class="input-field">
+            <i class="fas fa-envelope"></i>
+            <input type="email" placeholder="Email" required />
+          </div>
+          <div class="input-field">
+            <i class="fas fa-lock" id="toggle-password-signup"></i>
+            <input type="password" placeholder="Password" id="password-input-signup" required />
+          </div>
+          <input type="submit" class="btn" value="Sign up" />
+        </form>
+      </div>
     </div>
 
-    <div class="container">
-        <div class="forms-container">
-            <div class="signin-signup">
-                <!-- Sign In Form -->
-                <form action="#" class="sign-in-form">
-                    <h2 class="title">Sign in</h2>
-                    <div class="input-field">
-                        <i class="fas fa-user"></i>
-                        <input type="text" placeholder="Username" required />
-                    </div>
-                    <div class="input-field">
-                        <i class="fas fa-lock" id="toggle-password"></i>
-                        <input type="password" placeholder="Password" id="password-input" required />
-                    </div>
-                    <input type="submit" value="Login" class="btn solid" />
-                    <p class="social-text">Or Sign in with social platforms</p>
-                    <div class="social-media">
-                        <a href="https://www.google.com" target="_blank" class="social-icon"><i class="fab fa-google" style="font-size: 24px; color: #4285f4"></i></a>
-                        <a href="https://facebook.com/YourPage" target="_blank" class="social-icon"><i class="fab fa-facebook-f" style="font-size: 24px; color: #4267b2"></i></a>
-                        <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon"><i class="fab fa-github" style="font-size: 24px; color: #333"></i></a>
-                    </div>
-                </form>
-
-                <!-- Sign Up Form -->
-                <form action="#" class="sign-up-form">
-                    <h2 class="title">Sign up</h2>
-                    <div class="input-field">
-                        <i class="fas fa-user"></i>
-                        <input type="text" placeholder="Username" required />
-                    </div>
-                    <div class="input-field">
-                        <i class="fas fa-envelope"></i>
-                        <input type="email" placeholder="Email" required />
-                    </div>
-                    <div class="input-field">
-                        <i class="fas fa-lock" id="toggle-password-signup"></i>
-                        <input type="password" placeholder="Password" id="password-input-signup" required />
-                    </div>
-                    <input type="submit" class="btn" value="Sign up" />
-                </form>
-            </div>
+    <div class="panels-container">
+      <div class="panel left-panel">
+        <div class="content">
+          <h3>New here ?</h3>
+          <p>Discover new experiences with AmbuFlow! <br />Get access to exclusive content and features. <br />Create
+            your account.</p>
+          <button class="btn transparent" id="sign-up-btn">Sign up</button>
         </div>
-
-        <div class="panels-container">
-            <div class="panel left-panel">
-                <div class="content">
-                    <h3>New here ?</h3>
-                    <p>Discover new experiences with AmbuFlow! <br />Get access to exclusive content and features. <br />Create your account.</p>
-                    <button class="btn transparent" id="sign-up-btn">Sign up</button>
-                </div>
-            </div>
-            <div class="panel right-panel">
-                <div class="content">
-                    <h3>One of us ?</h3>
-                    <p>Welcome to our community</p>
-                    <button class="btn transparent" id="sign-in-btn">Sign in</button>
-                </div>
-            </div>
+      </div>
+      <div class="panel right-panel">
+        <div class="content">
+          <h3>One of us ?</h3>
+          <p>Welcome to our community</p>
+          <button class="btn transparent" id="sign-in-btn">Sign in</button>
         </div>
+      </div>
     </div>
+  </div>
 
-    <script src="preloader.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js">
-      
-    </script>
-        <script>
-          const sign_in_btn = document.querySelector("#sign-in-btn");
-          const sign_up_btn = document.querySelector("#sign-up-btn");
-          const container = document.querySelector(".container");
-          
-          // Toggle between sign up and sign in
-          sign_up_btn.addEventListener("click", () => {
-              container.classList.add("sign-up-mode");
-          });
-          
-          sign_in_btn.addEventListener("click", () => {
-              container.classList.remove("sign-up-mode");
-          });
-          
-          // Sign in form submission
-          document.querySelector(".sign-in-form").addEventListener('submit', function(event) {
-              event.preventDefault();
-          
-              const username = document.querySelector(".sign-in-form input[type='text']").value;
-              const password = document.querySelector(".sign-in-form input[type='password']").value;
-          
-              // Retrieve stored credentials
-              const storedUsername = localStorage.getItem('username');
-              const storedPassword = localStorage.getItem('password');
-          
-              console.log(`Stored Username: ${storedUsername}, Input Username: ${username}`);
-              console.log(`Stored Password: ${storedPassword}, Input Password: ${password}`);
-          
-              // Validate input against stored credentials
-              if (username === storedUsername && password === storedPassword) {
-                  alert('Login successful!');
-                  window.location.href = 'index.html';
-              } else {
-                  alert('Invalid username or password');
-              }
-          });
-          
-          // Sign up form submission
-          document.querySelector(".sign-up-form").addEventListener('submit', function(event) {
-              event.preventDefault();
-          
-              const username = document.querySelector(".sign-up-form input[type='text']").value;
-              const email = document.querySelector(".sign-up-form input[type='email']").value;
-              const password = document.querySelector(".sign-up-form input[type='password']").value;
-          
-              if (username === '' || email === '' || password === '') {
-                  alert('Please fill in all fields');
-                  return;
-              }
-          
-              // Store the username and password in localStorage
-              localStorage.setItem('username', username);
-              localStorage.setItem('password', password); // Ensure you're storing the password
-          
-              alert('Your account is created successfully. Please login to access the website.');
-              container.classList.remove("sign-up-mode"); // Optionally switch to sign in mode
-          });
+  <script src="preloader.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js">
 
+  </script>
+  <script>
+    const sign_in_btn = document.querySelector("#sign-in-btn");
+    const sign_up_btn = document.querySelector("#sign-up-btn");
+    const container = document.querySelector(".container");
 
-        // Toggle password visibility
-        function togglePassword(fieldId, icon) {
-            const field = document.getElementById(fieldId);
-            field.type = field.type === 'password' ? 'text' : 'password';
-            icon.classList.toggle('fa-lock-open');
-            icon.classList.toggle('fa-lock');
-        }
+    // Toggle between sign up and sign in
+    sign_up_btn.addEventListener("click", () => {
+      container.classList.add("sign-up-mode");
+    });
 
-        document.getElementById("toggle-password").addEventListener("click", function() {
-            togglePassword("password-input", this);
-        });
+    sign_in_btn.addEventListener("click", () => {
+      container.classList.remove("sign-up-mode");
+    });
 
-        document.getElementById("toggle-password-signup").addEventListener("click", function() {
-            togglePassword("password-input-signup", this);
-        });
+    // Sign in form submission
+    document.querySelector(".sign-in-form").addEventListener('submit', function (event) {
+      event.preventDefault();
 
-        // Circle animation
-        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",
-        ];
+      const username = document.querySelector(".sign-in-form input[type='text']").value;
+      const password = document.querySelector(".sign-in-form input[type='password']").value;
 
-        circles.forEach(function (circle, index) {
-            circle.x = 0;
-            circle.y = 0;
-            circle.style.backgroundColor = colors[index % colors.length];
-        });
+      // Retrieve stored credentials
+      const storedUsername = localStorage.getItem('username');
+      const storedPassword = localStorage.getItem('password');
 
-        window.addEventListener("mousemove", function (e) {
-            coords.x = e.clientX;
-            coords.y = e.clientY;
-        });
+      console.log(`Stored Username: ${storedUsername}, Input Username: ${username}`);
+      console.log(`Stored Password: ${storedPassword}, Input Password: ${password}`);
 
-        function animateCircles() {
-            let x = coords.x;
-            let y = coords.y;
+      // Validate input against stored credentials
+      if (username === storedUsername && password === storedPassword) {
+        alert('Login successful!');
+        window.location.href = 'index.html';
+      } else {
+        alert('Invalid username or password');
+      }
+    });
 
-            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;
+    // Sign up form submission
+    document.querySelector(".sign-up-form").addEventListener('submit', function (event) {
+      event.preventDefault();
 
-                circle.x = x;
-                circle.y = y;
+      const username = document.querySelector(".sign-up-form input[type='text']").value;
+      const email = document.querySelector(".sign-up-form input[type='email']").value;
+      const password = document.querySelector(".sign-up-form input[type='password']").value;
 
-                const nextCircle = circles[index + 1] || circles[0];
-                x += (nextCircle.x - x) * 0.3;
-                y += (nextCircle.y - y) * 0.3;
-            });
+      if (username === '' || email === '' || password === '') {
+        alert('Please fill in all fields');
+        return;
+      }
 
-            requestAnimationFrame(animateCircles);
-        }
+      // Store the username and password in localStorage
+      localStorage.setItem('username', username);
+      localStorage.setItem('password', password); // Ensure you're storing the password
+
+      alert('Your account is created successfully. Please login to access the website.');
+      container.classList.remove("sign-up-mode"); // Optionally switch to sign in mode
+    });
+
+
+    // Toggle password visibility
+    function togglePassword(fieldId, icon) {
+      const field = document.getElementById(fieldId);
+      field.type = field.type === 'password' ? 'text' : 'password';
+      icon.classList.toggle('fa-lock-open');
+      icon.classList.toggle('fa-lock');
+    }
+
+    document.getElementById("toggle-password").addEventListener("click", function () {
+      togglePassword("password-input", this);
+    });
+
+    document.getElementById("toggle-password-signup").addEventListener("click", function () {
+      togglePassword("password-input-signup", this);
+    });
+
+    // Circle animation
+    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;
+    });
+
+    function animateCircles() {
+      let x = coords.x;
+      let y = coords.y;
 
-        animateCircles();
-    </script>
+      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;
+
+        circle.x = x;
+        circle.y = y;
+
+        const nextCircle = circles[index + 1] || circles[0];
+        x += (nextCircle.x - x) * 0.3;
+        y += (nextCircle.y - y) * 0.3;
+      });
+
+      requestAnimationFrame(animateCircles);
+    }
+
+    animateCircles();
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file