diff --git a/Feedback.html b/Feedback.html
index a55db0b4..3f762a38 100644
--- a/Feedback.html
+++ b/Feedback.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -19,15 +20,17 @@
       flex-direction: column;
       min-height: 100vh;
     }
+
     footer {
-            background-color: #C4D7FF;
-            color: white;
-            text-align: center;
-            padding: 10px 0;
-            position: relative;
-            bottom: 0;
-            width: 100%;
-        }
+      background-color: #C4D7FF;
+      color: white;
+      text-align: center;
+      padding: 10px 0;
+      position: relative;
+      bottom: 0;
+      width: 100%;
+    }
+
     .content {
       margin: 15px;
       padding: 15px;
@@ -48,7 +51,7 @@
     }
 
     h2 {
-    
+
       text-align: center;
       color: #2c3e50;
     }
@@ -61,25 +64,29 @@
     }
 
     .star-rating input {
-      display: none; /* Hide radio inputs */
+      display: none;
+      /* Hide radio inputs */
     }
 
     .star-rating label {
-      font-size: 3.5rem; /* Increased size for better visibility */
+      font-size: 3.5rem;
+      /* Increased size for better visibility */
       color: #ddd;
       cursor: pointer;
       transition: color 0.2s;
     }
 
     /* Color the stars based on the selected rating */
-    .star-rating input:checked ~ label {
-      color: #ffdd00; /* Color for selected stars */
+    .star-rating input:checked~label {
+      color: #ffdd00;
+      /* Color for selected stars */
     }
 
     /* Color on hover */
     .star-rating label:hover,
-    .star-rating label:hover ~ label {
-      color: #ffdd00; /* Color on hover */
+    .star-rating label:hover~label {
+      color: #ffdd00;
+      /* Color on hover */
     }
 
     button {
@@ -89,7 +96,8 @@
       border: none;
       cursor: pointer;
       font-size: 16px;
-      transition: background-color 0.3s; /* Smooth transition */
+      transition: background-color 0.3s;
+      /* Smooth transition */
     }
 
     button:hover {
@@ -97,178 +105,253 @@
     }
 
     textarea {
-      width: 100%; /* Full width for better usability */
-      max-width: 500px; /* Limiting max width */
+      width: 100%;
+      /* Full width for better usability */
+      max-width: 500px;
+      /* Limiting max width */
       padding: 10px;
       margin-top: 10px;
       border: 1px solid #ccc;
       border-radius: 4px;
+    }
 
+    /* Added the hover animation on the footer social icons */
+    .social-icon {
+      transition: transform 0.3s ease;
+      /* Smooth transition effect */
+    }
+
+    .social-icon:hover {
+      transform: scale(1.3);
+      /* Scale the element to 1.3 times its size */
+    }
+
+    .fa-facebook:hover {
+      color: blue;
+      /* Icon color change to blue on hover */
+    }
+
+    .fa-x-twitter:hover {
+      color: black;
+      /* Icon color change to black on hover */
+    }
+
+    .fa-instagram:hover {
+      color: orangered;
+      /* Icon color change to orangered on hover */
+    }
+
+    .fa-linkedin-in:hover {
+      color: rgb(16, 13, 195);
+      /* Icon color change to rgb(16, 13, 195) on hover */
     }
 
     @keyframes logoAnimation {
       0% {
-      opacity: 0;
-      transform: translateX(-100px); /* Start from the left */
+        opacity: 0;
+        transform: translateX(-100px);
+        /* Start from the left */
       }
+
       50% {
-      transform: translateX(10px); /* Move slightly to the right */
+        transform: translateX(10px);
+        /* Move slightly to the right */
       }
+
       100% {
-      opacity: 1;
-      transform: translateX(0); /* End at original position */
+        opacity: 1;
+        transform: translateX(0);
+        /* End at original position */
       }
-  }
+    }
 
-  /* Letter Drop Animation */
-  @keyframes letterDrop {
+    /* Letter Drop Animation */
+    @keyframes letterDrop {
       0% {
-      transform: translateY(-100%);
-      opacity: 0;
+        transform: translateY(-100%);
+        opacity: 0;
       }
+
       50% {
-      transform: translateY(10px); /* Slight bounce */
-      opacity: 1;
+        transform: translateY(10px);
+        /* Slight bounce */
+        opacity: 1;
       }
+
       100% {
-      transform: translateY(0);
+        transform: translateY(0);
       }
-  }
+    }
 
-  .logo {
+    .logo {
       display: flex;
       align-items: center;
       animation: logoAnimation 1s ease forwards;
-  }
+    }
 
-  .brand-name {
+    .brand-name {
       display: flex;
       flex-direction: row;
       align-items: center;
-      margin-right: 10px; /* Space between the text and the logo image */
-  }
+      margin-right: 10px;
+      /* Space between the text and the logo image */
+    }
 
-  .letter {
+    .letter {
       display: inline-block;
       font-size: 2rem;
       animation: letterDrop 0.5s ease forwards;
       animation-delay: calc(var(--letter-index) * 0.1s);
-  }
-
-  .red {
-      color: red; 
-  }
-
-
-  /* feedback form  */
-  .feedback-box{
-    border: 1px solid #939aa1;
-    width: 40%;
-    min-width: 400px;
-    min-height: 350px;
-    border-radius: 15px;
-    background-color: #edf6ff;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .feed-btn{
-    text-align: center; 
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-
-    font-weight: 600;
-  
-  }
-
-  .feed-btn:hover{
-    transform: scale(1.03);
-    transition: all 0.3s ease;
-  }
-
-  .feed-msg{
-    border: none;
-    
-  }
-  .feed-msg:focus{
-    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;
-                /* Stays on top of all elements */
-            }
-
-
-  #thank-you-message{
-    text-align: center;
-    display: none;
-    justify-content: center;
-    align-items: center;
-
-    border: 1px solid #939aa1;
-    width: 40%;
-    min-width: 400px;
-    min-height: 350px;
-    border-radius: 15px;
-    background-color: #edf6ff;
-
-    font-size: 2rem; 
-    font-weight: 500;
-    color: green;
-  }
+    }
+
+    .red {
+      color: red;
+    }
+
+    .social-icon {
+      transition: transform 0.3s ease;
+      /* Smooth transition effect */
+    }
+
+    .social-icon:hover {
+      transform: scale(1.3);
+      /* Scale the element to 1.2 times its size */
+    }
+
+    .fa-facebook:hover {
+      color: blue;
+      /* Scale the element to 1.2 times its size */
+    }
+
+    .fa-x-twitter:hover {
+      color: black;
+      /* Scale the element to 1.2 times its size */
+    }
+
+    .fa-instagram:hover {
+      color: orangered;
+      /* Scale the element to 1.2 times its size */
+    }
+
+    .fa-linkedin-in:hover {
+      color: rgb(16, 13, 195);
+      /* Scale the element to 1.2 times its size */
+    }
+
+    /* feedback form  */
+    .feedback-box {
+      border: 1px solid #939aa1;
+      width: 40%;
+      min-width: 400px;
+      min-height: 350px;
+      border-radius: 15px;
+      background-color: #edf6ff;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .feed-btn {
+      text-align: center;
+      margin-top: 2rem;
+      margin-bottom: 1rem;
 
+      font-weight: 600;
+
+    }
+
+    .feed-btn:hover {
+      transform: scale(1.03);
+      transition: all 0.3s ease;
+    }
+
+    .feed-msg {
+      border: none;
+
+    }
+
+    .feed-msg:focus {
+      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;
+      /* Stays on top of all elements */
+    }
+
+
+    #thank-you-message {
+      text-align: center;
+      display: none;
+      justify-content: center;
+      align-items: center;
+
+      border: 1px solid #939aa1;
+      width: 40%;
+      min-width: 400px;
+      min-height: 350px;
+      border-radius: 15px;
+      background-color: #edf6ff;
+
+      font-size: 2rem;
+      font-weight: 500;
+      color: green;
+    }
   </style>
 </head>
 
 
 
 <header>
-    <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>
-            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; 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>
-            </ul>
-        </nav>
-        <div class="buttons">
-            <a href="login.html" class="login">Log in</a>
-            <a href="up.html" class="get-started">Get started</a>
-        </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>
+      <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; 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>
+      </ul>
+    </nav>
+    <div class="buttons">
+      <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>
@@ -297,13 +380,13 @@ <h3>We Value Your Feedback</h3>
       Thank you for your response!
     </div>
   </div>
-  
 
- 
-  <footer style= " color: #f3f4f6; text-align: center; width: 100%;">
+
+
+  <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>
@@ -315,35 +398,45 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links<
             <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>
+          <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="flex: 1; min-width: 200px; margin-bottom: 20px;">
+        <div style="text-align: center; min-width: 200px; color: black;">
           <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-          <a href="https://www.facebook.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-facebook-f"></i> Facebook</a><br>
-          <a href="https://www.twitter.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fa-brands fa-x-twitter"></i> Twitter</a><br>
-          <a href="https://www.instagram.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-instagram"></i> Instagram</a><br>
-          <a href="https://www.linkedin.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
+          <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>
+            <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>
     <!-- Copyright Section -->
@@ -391,7 +484,7 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
       event.preventDefault(); // Prevent the default form submission
 
       // Hide the feedback-box div
-     feedbackBox.style.display = 'none';
+      feedbackBox.style.display = 'none';
 
       // Show the thank-you message
       thankYouMessage.style.display = 'flex';
@@ -406,4 +499,5 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
     });
   </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/contact.html b/contact.html
index a159e0fd..defde2de 100644
--- a/contact.html
+++ b/contact.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Contact</title>
     <link rel="stylesheet" href="src/css/index.css">
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <!--Updated to latest version-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+    <!--Updated to latest version-->
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -58,7 +60,8 @@
             padding: 15px;
             text-align: center;
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            width: 250px; /* Adjusted width for a better fit in a row */
+            width: 250px;
+            /* Adjusted width for a better fit in a row */
             transition: transform 0.3s, box-shadow 0.3s;
         }
 
@@ -82,16 +85,35 @@
             gap: 20px;
         }
 
+        /* Added the hover animation on the footer social icons */
         .social-icon {
-            font-size: 24px;
-            color: #000000;
-            transition: transform 0.9s ease, color 0.9s ease;
-            /* Smooth transition */
+            transition: transform 0.3s ease;
+            /* Smooth transition effect */
         }
 
-        #facebook:hover {
-            color: #1877F2;
-            transform: scale(1.5);
+        .social-icon:hover {
+            transform: scale(1.3);
+            /* Scale the element to 1.3 times its size */
+        }
+
+        .fa-facebook:hover {
+            color: blue;
+            /* Icon color change to blue on hover */
+        }
+
+        .fa-x-twitter:hover {
+            color: black;
+            /* Icon color change to black on hover */
+        }
+
+        .fa-instagram:hover {
+            color: orangered;
+            /* Icon color change to orangered on hover */
+        }
+
+        .fa-linkedin-in:hover {
+            color: rgb(16, 13, 195);
+            /* Icon color change to rgb(16, 13, 195) on hover */
         }
 
         #twitter:hover {
@@ -126,75 +148,87 @@
             from {
                 opacity: 0;
             }
+
             to {
                 opacity: 1;
             }
         }
+
         /* Logo Animation */
         @keyframes logoAnimation {
             0% {
-            opacity: 0;
-            transform: translateX(-100px); /* Start from the left */
+                opacity: 0;
+                transform: translateX(-100px);
+                /* Start from the left */
             }
+
             50% {
-            transform: translateX(10px); /* Move slightly to the right */
+                transform: translateX(10px);
+                /* Move slightly to the right */
             }
+
             100% {
-            opacity: 1;
-            transform: translateX(0); /* End at original position */
+                opacity: 1;
+                transform: translateX(0);
+                /* End at original position */
             }
         }
-    
+
         /* Letter Drop Animation */
         @keyframes letterDrop {
             0% {
-            transform: translateY(-100%);
-            opacity: 0;
+                transform: translateY(-100%);
+                opacity: 0;
             }
+
             50% {
-            transform: translateY(10px); /* Slight bounce */
-            opacity: 1;
+                transform: translateY(10px);
+                /* Slight bounce */
+                opacity: 1;
             }
+
             100% {
-            transform: translateY(0);
+                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 */
+            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; 
+            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 */
-            }
+            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 */
+        }
     </style>
 </head>
 <header>
@@ -210,105 +244,127 @@
                 <span class="letter" style="--letter-index: 7;">o</span>
                 <span class="letter" style="--letter-index: 8;">w</span>
             </div>
-            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
-          </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>
-        </div>
-    </div>
-</header>
-
-<div class="content" id="main-content">
-    <h1>Contact Us</h1>
-    <div class="contact-info">
-        <div class="contact-item">
-            <img src="images/call1-w.avif" style="border-radius: 50%;" alt="Call Us">
-            <h2>Call Us</h2>
-            <p>For immediate assistance, call our emergency line at <strong>123-456-7890</strong>.</p>
-        </div>
-        <div class="contact-item">
-            <img src="https://i.postimg.cc/m2bGBGFf/help-w.png" style="border-radius: 50%;" alt="Help">
-            <h2>Need Help?</h2>
-            <p>Our team is available 24/7 to help you with any inquiries.</p>
-        </div>
-        <div class="contact-item">
-            <img src="images/caremeregency-w.png" style="border-radius: 50%;" alt="Emergency Care">
-            <h2>Emergency Care</h2>
-            <p>In case of an emergency, please do not hesitate to reach out to us immediately.</p>
         </div>
-    </div>
+    </header>
 
-    <!-- Social Media Section -->
-    <div class="social-media">
-        <a href="#" class="social-icon"><i class="fab fa-facebook" id="facebook"></i></a>
-        <a href="#" class="social-icon"><i class="fa-brands fa-x-twitter" id="twitter"></i></a>  <!--Updated icon-->
-        <a href="#" class="social-icon"><i class="fab fa-instagram" id="instagram"></i></a>
-        <a href="#" class="social-icon"><i class="fab fa-linkedin" id="linkedin"></i></a>
-    </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;">
-        
-        <!-- 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>
-  
-        <!-- Social Media Links -->
-        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-          <a href="https://www.facebook.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-facebook-f"></i> Facebook</a><br>
-          <a href="https://www.twitter.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fa-brands fa-x-twitter"></i> Twitter</a><br>
-          <a href="https://www.instagram.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-instagram"></i> Instagram</a><br>
-          <a href="https://www.linkedin.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
+    <div class="content" id="main-content">
+        <h1>Contact Us</h1>
+        <div class="contact-info">
+            <div class="contact-item">
+                <img src="images/call1-w.avif" style="border-radius: 50%;" alt="Call Us">
+                <h2>Call Us</h2>
+                <p>For immediate assistance, call our emergency line at <strong>123-456-7890</strong>.</p>
+            </div>
+            <div class="contact-item">
+                <img src="https://i.postimg.cc/m2bGBGFf/help-w.png" style="border-radius: 50%;" alt="Help">
+                <h2>Need Help?</h2>
+                <p>Our team is available 24/7 to help you with any inquiries.</p>
+            </div>
+            <div class="contact-item">
+                <img src="images/caremeregency-w.png" style="border-radius: 50%;" alt="Emergency Care">
+                <h2>Emergency Care</h2>
+                <p>In case of an emergency, please do not hesitate to reach out to us immediately.</p>
+            </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>
+
+        <!-- Added responsiveness: Link redirect to respective sites -->
+        <!-- Social Media Section -->
+        <div class="social-media">
+            <a style=font-size:24px; href="https://www.facebook.com/" class="social-icon facebook"><i
+                    class="fab fa-facebook"></i></a>
+            <a style=font-size:24px; href="https://x.com/" class="social-icon twitter"><i
+                    class="fa-brands fa-x-twitter"></i></a>
+            <!--Updated icon-->
+            <a style=font-size:24px; href="https://www.instagram.com/" class="social-icon instagram"><i
+                    class="fab fa-instagram"></i></a>
+            <a style=font-size:24px; href="https://www.linkedin.com/" class="social-icon linkedin"><i
+                    class="fab fa-linkedin"></i></a>
         </div>
-        
-      </div>
-      
     </div>
-    <hr>
-    <!-- Copyright Section -->
-    <div style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;">
-      <strong><p>&copy; 2024 AmbuFlow. All rights reserved.</p></strong>
-      
-      <!-- Back to Top Button -->
-      <button id="backToTopBtn" style="
+
+    <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>
+
+                    </div>
+                    <hr>
+                    <!-- Copyright Section -->
+                    <div
+                        style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;">
+                        <strong>
+                            <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
+                        </strong>
+
+                        <!-- Back to Top Button -->
+                        <button id="backToTopBtn" style="
         background-color: #e81a1a;
         color: white;
         border: none;
@@ -317,23 +373,44 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
         font-size: 16px;
         cursor: pointer;
       ">↑</button>
-    </div>
-</footer>
+                    </div>
+                </footer>
 
-<script>
-    function changeContent(page) {
-        var links = document.querySelectorAll('.menu ul li a');
-        links.forEach(link => link.classList.remove('active'));
-        document.getElementById(page + '-link').classList.add('active');
-    }
+                
+                </script>
+                <script>    const coords = { x: 0, y: 0 };
+                    const circles = document.querySelectorAll(".circle");
 
-    window.onload = function() {
-        document.getElementById('contact-link').classList.add('active');
-    };
+                    const colors = [
+                        "#ffb56b",
+                        "#fdaf69",
+                        "#f89d63",
+                        "#f59761",
+                        "#ef865e",
+                        "#ec805d",
+                        "#e36e5c",
+                        "#df685c",
+                        "#d5585c",
+                        "#d1525c",
+                        "#c5415d",
+                        "#c03b5d",
+                        "#b22c5e",
+                        "#ac265e",
+                        "#9c155f",
+                        "#950f5f",
+                        "#830060",
+                        "#7c0060",
+                        "#680060",
+                        "#60005f",
+                        "#48005f",
+                        "#3d005e"
+                    ];
 
-    // Back to Top Button functionality
-    document.addEventListener('DOMContentLoaded', function() {
-        var backToTopBtn = document.getElementById("backToTopBtn");
+                    circles.forEach(function (circle, index) {
+                        circle.x = 0;
+                        circle.y = 0;
+                        circle.style.backgroundColor = colors[index % colors.length];
+                    });
 
         backToTopBtn.addEventListener('click', function() {
             window.scrollTo({
@@ -344,4 +421,5 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
     });
 </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/features.html b/features.html
index 54cd66d6..24350bf3 100644
--- a/features.html
+++ b/features.html
@@ -1,79 +1,178 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Features</title>
-    <link rel="stylesheet" href="src/css/index.css" />
-    <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
-    <!--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;
-      }
-      .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 */
-      }
-      .menu ul {
-        list-style-type: none;
-        padding: 0;
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Features</title>
+  <link rel="stylesheet" href="src/css/index.css" />
+  <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
+  <!--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;
+    }
+
+    .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 */
+    }
+
+    .menu ul {
+      list-style-type: none;
+      padding: 0;
+    }
+
+    .menu ul li {
+      display: inline;
+      margin-right: 10px;
+    }
+
+    .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: #000;
+      color: white;
+    }
+
+    .menu ul li a.active {
+      color: white;
+      background-color: #000;
+    }
+
+    .content {
+      margin: 20px;
+      padding: 20px;
+      background-color: #e6eef3;
+      border-radius: 5px;
+      flex-grow: 1;
+    }
+
+    h1 {
+      color: #2c3e50;
+      text-align: center;
+      margin-bottom: 20px;
+    }
+
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 20px;
+      animation: fadeIn 1s ease-in-out;
+    }
+
+    .feature-card {
+      background: #abd4fc;
+      padding: 15px;
+      border-radius: 5px;
+      text-align: center;
+      transition: transform 0.3s;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+
+    .feature-card:hover {
+      transform: translateY(-5px);
+    }
+
+    .feature-icon {
+      font-size: 40px;
+      color: #0560c2;
+      /* Bootstrap primary color */
+      margin-bottom: 10px;
+    }
+
+    /* Added the hover animation on the footer social icons */
+    .social-icon {
+      transition: transform 0.3s ease;
+      /* Smooth transition effect */
+    }
+
+    .social-icon:hover {
+      transform: scale(1.3);
+      /* Scale the element to 1.3 times its size */
+    }
+
+    .fa-facebook:hover {
+      color: blue;
+      /* Icon color change to blue on hover */
+    }
+
+    .fa-x-twitter:hover {
+      color: black;
+      /* Icon color change to black on hover */
+    }
+
+    .fa-instagram:hover {
+      color: orangered;
+      /* Icon color change to orangered on hover */
+    }
+
+    .fa-linkedin-in:hover {
+      color: rgb(16, 13, 195);
+      /* Icon color change to rgb(16, 13, 195) on hover */
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
       }
-      .menu ul li {
-        display: inline;
-        margin-right: 10px;
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
       }
-      .menu ul li a {
-        padding: 10px 15px;
-        color: black;
-        text-decoration: none;
-        transition: background-color 0.3s, color 0.3s;
+    }
+
+    /* Logo Animation */
+    @keyframes logoAnimation {
+      0% {
+        opacity: 0;
+        transform: translateX(-100px);
+        /* Start from the left */
       }
-      .menu ul li a:hover {
-        background-color: #000;
-        color: white;
+
+      50% {
+        transform: translateX(10px);
+        /* Move slightly to the right */
       }
-      .menu ul li a.active {
+
+      footer {
+        background-color: #C4D7FF;
         color: white;
-        background-color: #000;
-      }
-      .content {
-        margin: 20px;
-        padding: 20px;
-        background-color: #e6eef3;
-        border-radius: 5px;
-        flex-grow: 1;
-      }
-      h1 {
-        color: #2c3e50;
         text-align: center;
         margin-bottom: 20px;
       }
@@ -156,128 +255,115 @@
 
     </style>
 </head>
+
 <body>
-    <header>
-      <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>
+  <header>
+    <div class="container">
 
-        <nav class="menu">
-          <ul>
-            <li>
-              <a href="index.html" id="home-link"
-                ><i class="fa-solid fa-house"></i> Home</a
-              >
-            </li>
-            <li>
-              <a href="features.html" id="features-link" class="active"
-                ><i class="fa-solid fa-file"></i> Features</a
-              >
-            </li>
-            <li>
-              <a href="team.html" id="team-link"
-                ><i class="fa-solid fa-user-group"></i> Team</a
-              >
-            </li>
-            <li>
-              <a href="contact.html" id="contact-link"
-                ><i class="fa-solid fa-clipboard"></i> Contact</a
-              >
-            </li>
-            <li>
-              <a href="Feedback.html" id="team-link"
-                ><i class="fa-solid fa-user-group"></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>
+      <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>
-    </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">
-          <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-comments-dollar feature-icon"></i>
-          <h2>Feedback System</h2>
-          <p>Collecting feedback to improve service quality.</p>
-        </div>
+
+      <nav class="menu">
+        <ul>
+          <li>
+            <a href="index.html" id="home-link"><i class="fa-solid fa-house"></i> Home</a>
+          </li>
+          <li>
+            <a href="features.html" id="features-link" class="active"><i class="fa-solid fa-file"></i> Features</a>
+          </li>
+          <li>
+            <a href="team.html" id="team-link"><i class="fa-solid fa-user-group"></i> Team</a>
+          </li>
+          <li>
+            <a href="contact.html" id="contact-link"><i class="fa-solid fa-clipboard"></i> Contact</a>
+          </li>
+          <li>
+            <a href="Feedback.html" id="team-link"><i class="fa-solid fa-user-group"></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>
+      </div>
+    </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">
+        <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-comments-dollar feature-icon"></i>
+        <h2>Feedback System</h2>
+        <p>Collecting feedback to improve service quality.</p>
       </div>
     </div>
+  </div>
 
-</div>
+  </div>
 
-<footer style= " color: #f3f4f6; text-align: center; width: 100%;">
+  <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>
@@ -289,35 +375,45 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links<
             <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>
+          <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="flex: 1; min-width: 200px; margin-bottom: 20px;">
+        <div style="text-align: center; min-width: 200px; color: black;">
           <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-          <a href="https://www.facebook.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-facebook-f"></i> Facebook</a><br>
-          <a href="https://www.twitter.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fa-brands fa-x-twitter"></i> Twitter</a><br>
-          <a href="https://www.instagram.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-instagram"></i> Instagram</a><br>
-          <a href="https://www.linkedin.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
+          <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>
+            <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>
     <!-- Copyright Section -->
@@ -354,37 +450,38 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
   </footer>
 
 
-<script>
+  <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';
-        }
+    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');
     const thankYouMessage = document.getElementById('thankYouMessage');
 
-    form.addEventListener('submit', function(event) {
-        event.preventDefault(); // Prevent the default form submission behavior
+    form.addEventListener('submit', function (event) {
+      event.preventDefault(); // Prevent the default form submission behavior
 
-        // Show the thank you message
-        thankYouMessage.style.display = 'block';
+      // Show the thank you message
+      thankYouMessage.style.display = 'block';
 
-        // Hide the accordion content after submission
-        accordionContent.style.display = 'none';
+      // Hide the accordion content after submission
+      accordionContent.style.display = 'none';
 
-        // Clear the input field
-        document.getElementById('emailInput').value = '';
+      // Clear the input field
+      document.getElementById('emailInput').value = '';
     });
-</script>
+  </script>
 
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 65af36ce..2ac1cfa8 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -28,12 +29,14 @@
       flex-direction: column;
       min-height: 100vh;
     }
+
     nav ul {
       list-style-type: none;
       padding: 0;
       margin: 0;
       display: flex;
     }
+
     nav ul li a {
       display: flex;
       align-items: center;
@@ -51,21 +54,36 @@
     nav ul li a:hover {
       background-color: #f0f0f0;
     }
+
     nav ul li a:active {
       background-color: #000;
       color: white;
     }
+
     nav ul li a i {
       margin-right: 8px;
     }
-    a.active,a:hover{
-      background: #1b9bff ;
+
+    a.active,
+    a:hover {
+      background: #1b9bff;
       transition: .5s;
     }
+
+    /* Remove hover and active styles for specific links */
+    a.no-hover-effect.active,
+    a.no-hover-effect:hover {
+      background: inherit;
+      /* Retains the original background */
+      transition: none;
+      /* No transition effect */
+    }
+
     #home-link:active {
       background-color: black;
       color: white;
     }
+
     .content {
       margin: 20px;
       padding: 20px;
@@ -160,61 +178,104 @@
       padding: 15px 0;
       width: 100%;
     }
-    .checkbtn{
+
+    .checkbtn {
       font-size: 30px;
       color: #333;
       float: right;
       line-height: 80px;
       margin-right: 40px;
       cursor: pointer;
-      display:none;
+      display: none;
 
     }
-    #check{
+
+    #check {
       display: none;
     }
-@media (max-width:966px){
-  label.logo{
-    font-size: 30px;
-    padding-left: 50px;
-  }
 
-}
-@media (max-width:858px){
+    /* Added the hover animation on the footer social icons */
+    .social-icon {
+      transition: transform 0.3s ease;
+      /* Smooth transition effect */
+    }
+
+    .social-icon:hover {
+      transform: scale(1.3);
+      /* Scale the element to 1.3 times its size */
+    }
+
+    .fa-facebook:hover {
+      color: blue;
+      /* Icon color change to blue on hover */
+    }
+
+    .fa-x-twitter:hover {
+      color: black;
+      /* Icon color change to black on hover */
+    }
+
+    .fa-instagram:hover {
+      color: orangered;
+      /* Icon color change to orangered on hover */
+    }
+
+    .fa-linkedin-in:hover {
+      color: rgb(16, 13, 195);
+      /* Icon color change to rgb(16, 13, 195) on hover */
+    }
+
+    @media (max-width:966px) {
+      label.logo {
+        font-size: 30px;
+        padding-left: 50px;
+      }
+
+    }
+
+    @media (max-width:858px) {
+
+      .checkbtn {
+        display: block;
+      }
+
+      ul {
+        position: fixed;
+        width: 100%;
+        height: 100vh;
+        background: #77a1cc;
+        top: 85px;
+        left: -200%;
+        text-align: center;
+        transition: all .5s;
+        height: 80px;
+      }
+
+      nav ul li {
+        display: block;
+      }
+
+      nav ul li a {
+        display: block;
+        font-size: 10px;
+      }
+
+      a:hover,
+      a.active {
+        background: none;
+        color: #000000;
+      }
+
+      #check:checked~ul {
+        left: 0;
+      }
+    }
 
-  .checkbtn{
-    display: block;
-  }
-  ul{
-    position: fixed;
-    width: 100% ;
-    height: 100vh;
-    background: #77a1cc;
-    top: 85px;
-    left:-200%;
-    text-align: center;
-    transition:all .5s ;
-    height: 80px;
-  }
-  nav ul li{
-    display: block;
-  }
-  nav ul li a {
-    display: block;
-    font-size: 10px;
-  }
-  a:hover,a.active{
-    background: none;
-    color:#000000 ;
-  }
-  #check:checked ~ ul{
-    left:0;
-  }
-}
     @keyframes fadeIn {
       from {
         opacity: 0;
       }
+
       to {
         opacity: 1;
       }
@@ -224,14 +285,19 @@
     @keyframes logoAnimation {
       0% {
         opacity: 0;
-        transform: translateX(-100px); /* Start from the left */
+        transform: translateX(-100px);
+        /* Start from the left */
       }
+
       50% {
-        transform: translateX(10px); /* Move slightly to the right */
+        transform: translateX(10px);
+        /* Move slightly to the right */
       }
+
       100% {
         opacity: 1;
-        transform: translateX(0); /* End at original position */
+        transform: translateX(0);
+        /* End at original position */
       }
     }
 
@@ -241,10 +307,13 @@
         transform: translateY(-100%);
         opacity: 0;
       }
+
       50% {
-        transform: translateY(10px); /* Slight bounce */
+        transform: translateY(10px);
+        /* Slight bounce */
         opacity: 1;
       }
+
       100% {
         transform: translateY(0);
       }
@@ -260,7 +329,8 @@
       display: flex;
       flex-direction: row;
       align-items: center;
-      margin-right: 10px; /* Space between the text and the logo image */
+      margin-right: 10px;
+      /* Space between the text and the logo image */
     }
 
     .letter {
@@ -270,88 +340,95 @@
     }
 
     .red {
-      color: red; /* Change the color of letters in this class to red */
+      color: red;
+      /* Change the color of letters in this class to red */
     }
 
 
     /* faq section styles */
-    .faq-section{
+    .faq-section {
       background-color: #e7f3fe;
 
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      
+
     }
 
-    
 
-    .faq-h2{
+
+    .faq-h2 {
       margin-bottom: 1.5rem;
       font-size: 2.5rem;
       font-weight: 600;
     }
 
-    .faqs{
+    .faqs {
       width: 100%;
     }
 
     .faq {
-    margin-bottom: 15px;
-    width: 100%; /* Full width by default */
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 10px;
-    overflow: hidden;
-    }
-
-   .faq-question {
-    background-color: #e7ffe7;
-    color: #333;
-    padding: 10px;
-    width: 100%;
-    text-align: left;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    font-size: 16px;
-    font-weight: 600;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+      margin-bottom: 15px;
+      width: 100%;
+      /* Full width by default */
+      background-color: #fff;
+      border: 1px solid #ccc;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+    .faq-question {
+      background-color: #e7ffe7;
+      color: #333;
+      padding: 10px;
+      width: 100%;
+      text-align: left;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: 600;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
 
     .faq-question::after {
-    content: '';
-    display: inline-block;
-    width: 0;
-    height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-top: 8px solid #333; /* Downward pointing wide "V" */
-    transition: transform 0.3s ease;
+      content: '';
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 8px solid #333;
+      /* Downward pointing wide "V" */
+      transition: transform 0.3s ease;
 
-    margin-right: 10px;
+      margin-right: 10px;
     }
 
     .faq.active .faq-question::after {
-    border-top: none;
-    border-bottom: 8px solid #333; /* Upward pointing wide "V" */
+      border-top: none;
+      border-bottom: 8px solid #333;
+      /* Upward pointing wide "V" */
     }
 
     .faq-answer {
-    max-height: 0; /* Initially hidden */
-    overflow: hidden; /* Hide content when not visible */
-    padding: 0 10px;
-    background-color: #fff;
-    transition: max-height 0.3s ease; /* Smooth transition */
-    border-top: 1px solid #ccc;
+      max-height: 0;
+      /* Initially hidden */
+      overflow: hidden;
+      /* Hide content when not visible */
+      padding: 0 10px;
+      background-color: #fff;
+      transition: max-height 0.3s ease;
+      /* Smooth transition */
+      border-top: 1px solid #ccc;
     }
 
     .faq-answer p {
-    margin-bottom: 10px;
+      margin-bottom: 10px;
     }
 
    .faq.active .faq-answer {
@@ -537,77 +614,165 @@ <h2>Contact Us</h2>
       </div>
     </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;">
-      
-      <!-- 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;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li>
-          <li><a href="contact.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li>
-          <li><a href="privacy.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li>
-          <li><a href="terms.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a></li>
-          <li><a href="sitemap.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li>
-        </ul>
-      </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;">
+
+        <!-- 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; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li>
+            <li><a href="contact.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li>
+            <li><a href="privacy.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li>
+            <li><a href="terms.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a></li>
+            <li><a href="sitemap.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li>          
+          </ul>
+        </div>
 
-      <!-- Contact Information Section -->
-      <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-        <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
-        <p style="color: #000000;">123 Emergency Lane, Mumbai, India</p>
-        <p><a href="mailto:emergency@ambulanceservice.in" style="color: #000000;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">emergency@ambulanceservice.in</a></p>
-        <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">+91-911-1234567</a></p>
-      </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; background:none; cursor: pointer;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">emergency@ambulanceservice.in</a></p>
+          <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000; background: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">+91-911-1234567</a></p>
+        </div>
 
-      <!-- Social Media Links -->
-      <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-        <a href="https://www.facebook.com" class="hover-link"><i class="fab fa-facebook-f"></i> Facebook</a><br>
-        <a href="https://www.twitter.com" class="hover-link"><i class="fab fa-twitter"></i> Twitter</a><br>
-        <a href="https://www.instagram.com" class="hover-link"><i class="fab fa-instagram"></i> Instagram</a><br>
-        <a href="https://www.linkedin.com" class="hover-link"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
-      </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 no-hover-effect"
+              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 no-hover-effect"
+              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 no-hover-effect"
+              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 no-hover-effect"
+              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>
+        
+        <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>
 
-      <style>
-        .hover-link {
-          color: #000000;
-          text-decoration: none;
-          margin-right: 10px;
-          cursor: pointer;
-          transition: color 0.3s ease;
-        }
-
-        .hover-link:hover {
-          color: blue;
-        }
-      </style>
-
-      <!-- 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 id="subscribeForm">
-          <input id="emailInput" 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>
-        <p id="thankYouMessage" style="display:none; color: green;">Thank you for subscribing!</p>
       </div>
+
     </div>
-  </div>
+    <hr>
+    <!-- Copyright Section -->
+    <div style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;">
+      <strong><p>&copy; 2024 AmbuFlow. All rights reserved.</p></strong>
+      
+      <!-- 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;
+      ">↑</button>
+    </div>
+  </footer>
+
+  <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>
+  <script>
+    function changeContent(page) {
+      var links = document.querySelectorAll(".menu ul li a");
+      links.forEach((link) => link.classList.remove("active"));
+      document.getElementById(page + "-link").classList.add("active");
+    }
 
-  <hr>
+    window.onload = function () {
+      document.getElementById("home-link").classList.add("active");
 
-  <!-- Copyright Section -->
-  <div style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;">
-    <strong><p>&copy; 2024 AmbuFlow. All rights reserved.</p></strong>
-    
-    <!-- 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;">↑</button>
-  </div>
-</footer>
+      // 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");
+
+    form.addEventListener("submit", function (event) {
+      event.preventDefault(); // Prevent form from refreshing the page
+
+      // Show Thank You Message after subscribing
+      thankYouMessage.style.display = 'block';
+
+      // Optionally clear the input field after subscribing
+      document.getElementById("emailInput").value = '';
+    });
+
+  </script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const faqButtons = document.querySelectorAll('.faq-question');
+
+
+    <!-- Copyright Section -->
+    <div style="
+            text-align: center;
+            margin-top: 20px;
+            border-top: 1px solid white;
+            padding-top: 10px;
+          ">
+      <p>&copy; 2024 Ambulance Monitoring System. All rights reserved.</p>
+    </div>
+  </footer>
+
+
+  <!-- Back to Top Button -->
+  <button id="back-to-top">
+    <i class="fas fa-chevron-up" style="font-size: 30px;"></i>
+  </button>
+
+  <script src="script.js"></script>
+
+
+  </script>
 
 <script>
   // Back to Top Button functionality
diff --git a/team.html b/team.html
index d01d924b..0edcb1f3 100644
--- a/team.html
+++ b/team.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Team</title>
     <link rel="stylesheet" href="src/css/index.css">
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <!--Updated to latest version-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+    <!--Updated to latest version-->
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -24,7 +26,7 @@
             color: black;
             text-decoration: none;
         }
-        
+
         .menu ul li a.active {
             color: white;
             background-color: #000;
@@ -115,87 +117,134 @@
             width: 100%;
         }
 
+        /* Added the hover animation on the footer social icons */
+        .social-icon {
+            transition: transform 0.3s ease;
+            /* Smooth transition effect */
+        }
+
+        .social-icon:hover {
+            transform: scale(1.3);
+            /* Scale the element to 1.3 times its size */
+        }
+
+        .fa-facebook:hover {
+            color: blue;
+            /* Icon color change to blue on hover */
+        }
+
+        a .social-icon .twitter:hover{
+            color: white;
+        }
+        .fa-x-twitter:hover {
+            color: black;
+            /* Icon color change to black on hover */
+        }
+
+        .fa-instagram:hover {
+            color: orangered;
+            /* Icon color change to orangered on hover */
+        }
+
+        .fa-linkedin-in:hover {
+            color: rgb(16, 13, 195);
+            /* Icon color change to rgb(16, 13, 195) on hover */
+        }
+
         @keyframes fadeIn {
             from {
                 opacity: 0;
             }
+
             to {
                 opacity: 1;
             }
         }
+
         /* Logo Animation */
         @keyframes logoAnimation {
             0% {
-            opacity: 0;
-            transform: translateX(-100px); /* Start from the left */
+                opacity: 0;
+                transform: translateX(-100px);
+                /* Start from the left */
             }
+
             50% {
-            transform: translateX(10px); /* Move slightly to the right */
+                transform: translateX(10px);
+                /* Move slightly to the right */
             }
+
             100% {
-            opacity: 1;
-            transform: translateX(0); /* End at original position */
+                opacity: 1;
+                transform: translateX(0);
+                /* End at original position */
             }
         }
-    
+
         /* Letter Drop Animation */
         @keyframes letterDrop {
             0% {
-            transform: translateY(-100%);
-            opacity: 0;
+                transform: translateY(-100%);
+                opacity: 0;
             }
+
             50% {
-            transform: translateY(10px); /* Slight bounce */
-            opacity: 1;
+                transform: translateY(10px);
+                /* Slight bounce */
+                opacity: 1;
             }
+
             100% {
-            transform: translateY(0);
+                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 */
+            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; 
+            color: red;
         }
     </style>
 </head>
+
 <body>
 
-<header>
-    <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>
+    <header>
+        <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>
+                <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo"
+                    style="width: 50px; height: auto" />
             </div>
-            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
-          </div>
 
         <nav class="menu">
             <ul>
@@ -282,14 +331,21 @@ <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
       <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" class="footer-link">+91-911-1234567</a></p>
     </div>
 
-    <!-- Social Media Links -->
-    <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-      <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
-      <a href="https://www.facebook.com" class="hover-link"><i class="fab fa-facebook-f"></i> Facebook</a><br>
-      <a href="https://www.twitter.com" class="hover-link"><i class="fa-brands fa-x-twitter"></i> Twitter</a><br>
-      <a href="https://www.instagram.com" class="hover-link"><i class="fab fa-instagram"></i> Instagram</a><br>
-      <a href="https://www.linkedin.com" class="hover-link"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
-    </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;">
@@ -351,4 +407,5 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
 </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file