diff --git a/contact.html b/contact.html
index 3935c0d2..80139f82 100644
--- a/contact.html
+++ b/contact.html
@@ -1,478 +1,240 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Contact Us Form</title>
+    
+    <!-- External Stylesheets -->
     <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" href="./contact.css">
     
+    <!-- Icons and Fonts -->
     <link rel="icon" href="/icons/airplane.svg" />
     <link rel="icon" href="https://img.icons8.com/?size=100&id=I24lanX6Nq71&format=png&color=000000">
     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
-    <link
-      rel="icon"
-      href="https://img.icons8.com/?size=100&id=I24lanX6Nq71&format=png&color=000000"
-    />
-<style>
-          /* circle styles */
-          .circle {
-            height: 24px;
-            width: 24px;
-            border-radius: 24px;
-            background-color: rgb(255, 0, 0);
-            position: fixed;
-            top: 0;
-            left: 0;
-            pointer-events: none;
-            z-index: 99999999;
-          }
-        </style>  
-    </head>
-<style>
-    .card {
-      width: 80%;
-      margin: 30px auto;
-      padding: 20px;
-      margin-bottom: 70px;
-      border: 1px solid #ccc;
-      border-radius: 8px;
-      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-      background-color: #fff;
-    }
-
-    .card-header h2 {
-      color: #fff;
-      padding: 15px;
-      margin-bottom: 20px;
-      text-align: center;
-      width: 100%;
-      border-bottom: 1px solid #ddd;
-      border-radius: 6px;
-      text-shadow: 2px 2px 10px gray;
-    }
-
-    .card-body {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: 20px;
-    }
-
-    .form-section {
-      flex: 1;
-      min-width: 45%;
-      color: #121111;
-    }
-
-    .image-section {
-      flex: 1;
-      min-width: 45%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .image-section img {
-      max-width: 100%;
-      height: auto;
-      max-height: 500px;
-      margin-top: 60px;
-    }
-
-    .form-group {
-      margin-bottom: 20px;
-      color: #fff;
-    }
-
-    label {
-      display: block;
-      margin-bottom: 10px;
-      color: #1e1e1e;
-    }
-
-    input,
-    textarea {
-      width: 100%;
-      padding: 12px;
-      border: 1px solid #ccc;
-      border-radius: 5px;
-      color: #121212;
-    }
-
-    textarea {
-      height: 120px;
-    }
-
-    button[type="submit"] {
-      background-color: rgb(27, 27, 27);
-      color: #fff;
-      padding: 12px 20px;
-      border: none;
-      border-radius: 5px;
-      cursor: pointer;
-      font-size: 1.5rem;
-    }
-
-    button[type="submit"]:hover {
-      background-color: black;
-    }
-
-    .error-message {
-      color: red;
-      font-size: 0.9em;
-      margin-top: 5px;
-      display: none;
-    }
-
-    @media (max-width: 768px) {
-      .card-body {
-        flex-direction: column;
-      }
 
-      .form-section,
-      .image-section {
-        width: 100%;
-        min-width: 100%;
-      }
-    }
-    /* .form-group { 
-    position: relative;
-}  */
-
-    .tooltip {
-      visibility: hidden;
-      background-color: black;
-      color: #fff;
-      width: 200px;
-      text-align: center;
-      padding: 3px;
-      border-radius: 5px;
-      position: absolute;
-      z-index: 1;
-      /* bottom: 30%; Position above the input field */
-      top: 41%;
-      left: 60%;
-      transform: translateX(-50%);
-      opacity: 0;
-      transition: opacity 0.3s;
-      font-size: 12px;
-    }
-
-    .form-group:hover .tooltip {
-      visibility: visible;
-      opacity: 1;
-    }
-  </style>
-  <body>
-    <div class="container-fluid">
-      <header style="background-color: black; height: 85px">
-        <nav style="padding: 5px; width: 90%">
-          <div class="logo">
-            <img src="img/logo.png" id="logo-web" />
-            <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
-          </div>
-
-          <!-- Hamburger button for mobile -->
-          <button class="hamburger" id="hamburger">☰</button>
+    <!-- Internal Styles -->
+    <style>
+        /* General styling */
+        .card {
+            width: 80%;
+            margin: 30px auto;
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            background-color: #fff;
+        }
+
+        .card-header h2 {
+            color: #fff;
+            padding: 15px;
+            text-align: center;
+            background-color: #333;
+            border-radius: 6px;
+            text-shadow: 2px 2px 10px gray;
+        }
+
+        .card-body {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+
+        .form-section {
+            flex: 1;
+            min-width: 45%;
+            color: #121111;
+        }
+
+        .image-section img {
+            max-width: 100%;
+            height: auto;
+            max-height: 500px;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+            color: #121111;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 10px;
+            color: #1e1e1e;
+        }
+
+        input, textarea {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        textarea {
+            height: 120px;
+        }
+
+        button[type="submit"] {
+            background-color: rgb(27, 27, 27);
+            color: #fff;
+            padding: 12px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1.5rem;
+        }
+
+        button[type="submit"]:hover {
+            background-color: black;
+        }
+
+        .error-message {
+            color: red;
+            font-size: 0.9em;
+            display: none;
+        }
+
+        /* Tooltip */
+        .tooltip {
+            visibility: hidden;
+            background-color: black;
+            color: #fff;
+            width: 200px;
+            text-align: center;
+            padding: 5px;
+            border-radius: 5px;
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: opacity 0.3s;
+            font-size: 12px;
+        }
+
+        .form-group:hover .tooltip {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            .card-body {
+                flex-direction: column;
+            }
+            .form-section, .image-section {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
 
-          <ul id="nav-list">
-            <!-- Close button for dropdown -->
-            <span class="dropdown-close-btn" id="closeBtn">×</span>
-            <li><a href="./index.html" class="navhover">Home</a></li>
-            <li><a href="team.html" class="navhover">Team</a></li>
-            <li>
-              <a href="index.html#deals" class="navhover">Exclusive Deals</a>
-            </li>
-            <li><a href="index.html#benefits" class="navhover">Benefits</a></li>
-            <li><a href="about.html" class="navhover">About</a></li>
-            <li>
-              <a href="index.html#itineraries" class="navhover"
-                >Travel Itineraries</a
-              >
-            </li>
-</style>
 <body>
-    <div class="container-fluid">
-        <header style="background-color: black;height:85px;">
-            <nav style="padding: 5px;width:100%;">
-                <div class="logo" style="align-items: center;">
-                    <img src="img/logo.png" id="logo-web">
-                    <h1 id="logo"><a href="#home" style="margin-left: 18px; margin-top: 5px;">BuddyTrail</a></h1>
-                </div>
+    <!-- Header Section -->
+    <header style="background-color: black; height: 85px">
+        <nav style="padding: 5px; width: 90%">
+            <div class="logo">
+                <img src="img/logo.png" id="logo-web" alt="BuddyTrail Logo" />
+                <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
+            </div>
 
-            <!-- Hamburger button for mobile -->
+            <!-- Hamburger Menu for Mobile -->
             <button class="hamburger" id="hamburger">☰</button>
-        
-            <ul id="nav-list" style="margin-left: 65px;">
-              <!-- Close button for dropdown -->
-              <span class="dropdown-close-btn" id="closeBtn">×</span>
-              <li><a href="./index.html" class="navhover">Home</a></li>
-              <li><a href="team.html" class="navhover">Team</a></li>
-              <li><a href="index.html#deals" class="navhover">Exclusive Deals</a></li>
-              <li><a href="index.html#benefits" class="navhover">Benefits</a></li>
-              <li><a href="about.html" class="navhover">About</a></li>
-              <li><a href="index.html#itineraries" class="navhover">Travel Itineraries</a></li>
-              
-              <li><a href="./contact.html" class="navhover">Contact</a></li>
-              <li><a href="index.html#reviews" class="navhover">Reviews</a></li>
-              <li><a href="auth.html" class="navhover">Sign In</a></li>
+
+            <!-- Navigation Links -->
+            <ul id="nav-list">
+                <span class="dropdown-close-btn" id="closeBtn">×</span>
+                <li><a href="./index.html" class="navhover">Home</a></li>
+                <li><a href="team.html" class="navhover">Team</a></li>
+                <li><a href="index.html#deals" class="navhover">Exclusive Deals</a></li>
+                <li><a href="index.html#benefits" class="navhover">Benefits</a></li>
+                <li><a href="about.html" class="navhover">About</a></li>
+                <li><a href="index.html#itineraries" class="navhover">Travel Itineraries</a></li>
+                <li><a href="./contact.html" class="navhover">Contact</a></li>
+                <li><a href="index.html#reviews" class="navhover">Reviews</a></li>
+                <li><a href="auth.html" class="navhover">Sign In</a></li>
             </ul>
-        
-            <!-- Toggle Button -->
-            <button class="mode-toggle" id="modeToggle">
-                <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
-                <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
-            </button>
-          </nav>
-        </header>
-        
-        <section id="contactus">
-            <div class="card pb-5 pt-1">
-                <div class="card-header">
-                    <h2>Contact Us</h2>
+        </nav>
+    </header>
+
+    <!-- Contact Us Section -->
+    <section id="contactus">
+        <div class="card">
+            <div class="card-header">
+                <h2>Contact Us</h2>
+            </div>
+            <div class="card-body">
+                <div class="form-section">
+                    <div class="form-group">
+                        <label for="message">Message</label>
+                        <textarea id="message" name="message" placeholder="Your message" required></textarea>
+                        <div class="tooltip">Feel free to describe your message in detail.</div>
+                        <span class="error-message" id="messageError"></span>
+                    </div>
+                    <button type="submit">Send</button>
                 </div>
-                <div class="form-group">
-                  <label for="message">Message</label>
-                  <textarea
-                    id="message"
-                    name="message"
-                    placeholder="Your message"
-                    required
-                  ></textarea>
-                  <div class="tooltip">
-                    Feel free to describe your message in detail.
-                  </div>
-                  <span class="error-message" id="messageError"></span>
+                <div class="image-section">
+                    <img src="./image.png" alt="Contact Image" />
                 </div>
-                <button type="submit">Send</button>
-              </form>
             </div>
-            <div class="image-section">
-              <img
-                src="./image.png"
-                alt="Contact Image"
-                style="max-width: 80%; height: auto; max-height: 500px"
-              />
-            </div>
-          </div>
         </div>
-      </section>
-    </div>
+    </section>
 
+    <!-- Footer Section -->
     <footer id="footer">
-      <div class="footer-container">
-        <!-- About Us Section -->
-        <div class="footer-column">
-          <h3>About Us</h3>
-          <p>
-            Discover and plan affordable trips with BuddyTrail's travel
-            companion tools.
-          </p>
-          <!-- Newsletter Form Section -->
-          <style>
-            .footer-column.newsletter {
-              max-width: 300px;
-              margin: 0 auto;
-              text-align: center;
-            }
-            #newsletter-form {
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-            }
-            #email {
-              width: 100%;
-              margin-bottom: 10px;
-              padding: 8px;
-              box-sizing: border-box;
-            }
-            button[type="submit"] {
-              width: 100px;
-              padding: 6px;
-              font-size: 14px;
-              background-color: #007bff;
-            }
-            #subscription-message {
-              font-size: 14px;
-              margin-top: 10px;
-            }
-          </style>
-          <div class="footer-column newsletter" id="newsletter">
-            <h3>Subscribe to Our Newsletter</h3>
-            <form id="newsletter-form">
-              <input
-                type="email"
-                id="email"
-                placeholder="Enter your email"
-                required
-              />
-              <button type="submit">Subscribe</button>
-            </form>
-            <p id="subscription-message"></p>
-          </div>
-        </div>
+        <div class="footer-container">
+            <!-- About Us -->
+            <div class="footer-column">
+                <h3>About Us</h3>
+                <p>Discover and plan affordable trips with BuddyTrail's travel companion tools.</p>
+            </div>
 
-        <!-- Quick Links Section -->
-        <div class="footer-column">
-          <h3>Quick Links</h3>
-          <ul>
-            <li><a href="#home">Home</a></li>
-            <li><a href="about.html">About</a></li>
-            <li><a href="faq.html" class="faq-link">FAQs</a></li>
-            <li><a href="servicespage.html">Services</a></li>
-            <li><a href="contact.html">Contact</a></li>
-            <li><a href="team.html">Team</a></li>
-            <li><a href="contributor/contributor.html">Our Contributor</a></li>
-          </ul>
-        </div>
+            <!-- Newsletter -->
+            <div class="footer-column newsletter">
+                <h3>Subscribe to Our Newsletter</h3>
+                <form id="newsletter-form">
+                    <input type="email" id="email" placeholder="Enter your email" required />
+                    <button type="submit">Subscribe</button>
+                    <p id="subscription-message"></p>
+                </form>
+            </div>
 
-        <!-- Legal Links Section -->
-        <div class="footer-column">
-          <h3>Legal Links</h3>
-          <ul>
-            <li><a href="terms_of_service.html">Terms of Service</a></li>
-            <li><a href="privacypolicy.html">Privacy Policy</a></li>
-            <li><a href="copyright.html">Copyright Notice</a></li>
-            <li><a href="disclaimer.html">Disclaimer</a></li>
-            <li><a href="cookie_policy.html">Cookie Policy</a></li>
-          </ul>
-        </div>
+            <!-- Quick Links -->
+            <div class="footer-column">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="#home">Home</a></li>
+                    <li><a href="about.html">About</a></li>
+                    <li><a href="faq.html">FAQs</a></li>
+                    <li><a href="servicespage.html">Services</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                    <li><a href="team.html">Team</a></li>
+                    <li><a href="contributor/contributor.html">Our Contributor</a></li>
+                </ul>
+            </div>
 
-        <!-- Contact Us Section -->
-        <div class="footer-column">
-          <h3>Contact Us</h3>
-          <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
-          <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
-          <!-- Follow Us Section -->
-          <div class="footer-column">
-            <h3>Follow Us</h3>
-            <div class="social-icons">
-              <a href="https://discord.com/invite/priyaghosal" target="_blank"
-                ><i class="fab fa-discord"></i
-              ></a>
-              <a
-                href="https://x.com/https://twitter.com/PriyaGhosa39968"
-                target="_blank"
-                ><i class="fa-brands fa-x-twitter"></i
-              ></a>
-              <a
-                href="https://github.com/PriyaGhosal/BuddyTrail"
-                target="_blank"
-                ><i class="fab fa-github"></i
-              ></a>
-              <a
-                href="https://www.linkedin.com/in/priya-ghosal-785771286/"
-                target="_blank"
-                ><i class="fab fa-linkedin-in"></i
-              ></a>
+            <!-- Legal Links -->
+            <div class="footer-column">
+                <h3>Legal Links</h3>
+                <ul>
+                    <li><a href="terms_of_service.html">Terms of Service</a></li>
+                    <li><a href="privacypolicy.html">Privacy Policy</a></li>
+                    <li><a href="copyright.html">Copyright Notice</a></li>
+                    <li><a href="disclaimer.html">Disclaimer</a></li>
+                    <li><a href="cookie_policy.html">Cookie Policy</a></li>
+                </ul>
             </div>
-          </div>
-        </div>
-      </div>
 
-      <!-- Footer Bottom Section -->
-      <div class="footer-bottom">
-        <p class="copyright-b">&copy; 2024 BuddyTrail. All rights reserved.</p>
-      </div>
+            <!-- Contact Info -->
+            <div class="footer-column">
+                <h3>Contact Us</h3>
+                <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
+                <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
+            </div>
+        </div>
     </footer>
-
-    <!-- Scripts -->
-    <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="./contact.js"></script>
-
-<script>
-  window.onscroll = function() {
-    var header = document.querySelector("header");
-    if (window.pageYOffset > 0) {
-      header.classList.add("sticky");
-    } else {
-      header.classList.remove("sticky");
-    }
-  };
-</script>
-
-
-<!-- Circles -->
-<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>
-
-<script>
-    // coordinates for the cursor :
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    const colors = [
-      "#fc5720", "#fc6532", "#fc6532","#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#fefefe", "#cdf2c5", "#b2eca5", "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02", 
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-
-    // update the coordinates when the mouse moves:
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
-
-    // animation function to move the circles:
-    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);
-    }
-    
-    animateCircles();
-  </script>
-
 </body>
 </html>
