diff --git a/Blog.html b/Blog.html
index 47761ed..dfb6893 100644
--- a/Blog.html
+++ b/Blog.html
@@ -14,7 +14,8 @@
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-  <link rel="stylesheet" href="navbar.css">
+  <link rel="stylesheet" href="pages/navbar.css">
+  <link rel="stylesheet" href="footer.css">
   <style>
  /* General Body Styling */
 body {
@@ -268,100 +269,90 @@ <h2 class="blog-post-title">Coding Interview Preparation Tips</h2>
     <a href="#next" class="next-page">Next »</a>
   </div>
 
-  <footer style="background: linear-gradient(to right, #11cb2a, #19be50);; color: #ffffff; padding: 40px 20px; font-family: 'Arial', sans-serif; overflow: hidden;">
+  <footer>
     <!-- Footer Container -->
-    <div class="footer-container" style="max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px;">
-      
+    <div class="footer-container">
       <!-- Left Section (Logo and Description) -->
-      <div class="footer-left" style="flex: 2; min-width: 300px;">
+      <div class="footer-left">
         <!-- Logo -->
-        <div class="footer-logo" style="margin-bottom: 20px; animation: fadeInLeft 1s;">
-          <div style="background-color: #8cc152; padding: 20px; border-radius: 8px; display: inline-block;">
-            <h1 style="margin: 0; font-size: 36px; font-weight: bold;">DSA</h1>
+        <div class="footer-logo" >
+          <div class="footer-div" onclick="window.location.href = 'index.html'">
+            <h1>DSA</h1>
           </div>
         </div>
         <!-- Description -->
-        <p style="font-size: 16px; line-height: 1.6; animation: fadeInLeft 1.5s;">
-          DSA problem solutions involve step-by-step methods to solve data structure and algorithm challenges efficiently. 
-          They include understanding the problem, selecting the right approach, implementing optimized code, and analyzing 
-          time and space complexity for performance.
+        <p>
+          DSA problem solutions involve step-by-step methods to solve data
+          structure and algorithm challenges efficiently. They include
+          understanding the problem, selecting the right approach,
+          implementing optimized code, and analyzing time and space complexity
+          for performance.
         </p>
       </div>
-  
+
       <!-- Quick Links Section -->
+      <div class="footer-section-services">
+        <h2>Quick Links </h2>
+        <ul >
+          <li><a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li><a href="#">Work With Us</a></li>
+          <li><a href="#">Investor Relations</a></li>
+          <li><a href="#">Contact Us</a></li>
+        </ul>
       </div>
-        <div class="footer-section services" >
-          <h2 style="font-size: 18px;
-           margin-bottom: 10px; 
-           transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">DSA Problem Solutions</h2>
-          <ul style="list-style: none; padding: 0;">
-            <li><a href="about.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Who We Are</a></li>
-            <li><a href="Blog.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Blog</a></li>
-            <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Work With Us</a></li>
-            <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Investor Relations</a></li>
-            <li><a href="contact.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Contact Us</a></li>
-          </ul>
-        </div>
-  
+      <div class="footer-section-services">
+        <h2> DSA Problem Solutions </h2>
+        <ul >
+          <li> <a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li> <a href="#">Work With Us</a></li>
+          <li> <a href="#">Investor Relations</a></li>
+          <li> <a href="contact.html">Contact Us</a> </li>
+        </ul>
+      </div>
+
       <!-- Learn More Section -->
-       <div class="footer-section services" >
-          <h2 style="font-size: 18px;
-           margin-bottom: 10px; 
-           transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Learn More</h2>
-          <ul style="list-style: none; padding: 0;">
-            <li><a href="privacy.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Privacy Policy</a></li>
-            <li><a href="security.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Security</a></li>
-            <li><a href="terms.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Terms of Service</a></li>
-            <li><a href="contributors.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Our Contributors</a></li>
-          </ul>
+      <div class="footer-section-services">
+        <h2> Learn More</h2>
+        <ul >
+          <li><a href="privacy.html">Privacy Policy</a></li>
+          <li><a href="security.html">Security</a></li>
+          <li><a ref="terms.html">Terms of Service</a></li>
+          <li><a href="contributors.html">Our Contributors</a></li>
+        </ul>
       </div>
     </div>
-  
+
     <!-- Stay Updated Section -->
-    <div class="footer-section.newsletter" style="background: rgba(255, 255, 255, 0.2); border-radius: 20px;  backdrop-filter: blur(10px); padding: 10px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  transition: transform 0.3s ease, box-shadow 0.3s ease;">
-      <h3 style="font-size: 18px; margin-bottom: 20px; text-align: center; color: #ffffff;">Stay Updated</h3>
-      <p style="text-align: center; font-size: 14px; line-height: 1.8; margin-bottom: 20px;">
-        Subscribe to our newsletter for the latest updates and tips on mastering data structures and algorithms.
+    <div
+      class="footer-section-newsletter" >
+      <h3 > Stay Updated </h3>
+      <p >
+        Subscribe to our newsletter for the latest updates and tips on
+        mastering data structures and algorithms.
       </p>
-      <form action="#" method="POST" style="max-width: 600px; margin: 0 auto; display: flex; gap: 10px;">
-        <input type="email" placeholder="Your Email Address" required style="flex: 1; padding: 10px; font-size: 14px; border: 1px solid #dee2e6; border-radius: 4px;">
-        <button type="submit" style="padding: 10px 20px; font-size: 14px; background-color: #6c757d; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s;">
-          Subscribe
-        </button>
+      <form action="#" method="POST">
+        <input type="email" placeholder="Your Email Address" required />
+        <button type="submit">Subscribe</button>
       </form>
     </div>
-  
+
     <!-- Social Links -->
-    <div class="social-links" style="text-align: center; margin-top: 40px; animation: fadeInUp 2.5s;">
-      <ul style="list-style: none; padding: 0; display: flex; justify-content: center; gap: 20px;">
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-facebook"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-twitter"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-linkedin"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-youtube"></i></a></li>
+    <div
+      class="social-links" >
+      <ul>
+        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+        <li><a href="#" ><i class="fab fa-twitter"></i></a></li>
+        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
       </ul>
     </div>
-  
+
     <!-- Footer Bottom -->
-    <div class="footer-bottom" style="text-align: center; margin-top: 20px; padding-top: 20px; background: none; color: #ffffff; animation: fadeInUp 3s;">
-      <p style="margin: 0; font-size: 14px;">&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+    <div
+      class="footer-bottom">
+      <p> &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.</p>
     </div>
   </footer>
   
diff --git a/about.html b/about.html
index 20893be..538ac10 100644
--- a/about.html
+++ b/about.html
@@ -323,6 +323,8 @@
         top: -20px;
         left: -11px;
       }
+
+      
     </style>
   </head>
 
@@ -569,48 +571,42 @@ <h4 style="font-size: 18px; margin-bottom: 10px; transition: color 0.3s; color:
         <p style="margin: 0; font-size: 14px; color: white;">© 2025 DSA Problem Solutions. All rights reserved.</p>
       </div>
     </footer>
-  
-<script>
-  // Set the current year dynamically
-  document.getElementById('currentYear').textContent = new Date().getFullYear();
-</script>
-  
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
-    integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
-    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
-  <script src="script.js"></script>
-  <script src="//code.tidio.co/5w3m6cpl10rvqjkkmhv1nx8p0fqloyq6.js" async></script>
-  <script src="scrollscript.js"></script>
-  <script src="audio.js"></script>
-  <!-- Scroll to Top Button -->
-  <script>
-    const scrollButton = document.getElementById('scrollButton');
-    const outerCircle = document.querySelector('.outer-circle');
-    const arrow = document.querySelector('.arrow');
-
-      // Function to handle scroll behavior
-      window.addEventListener('scroll', () => {
-      const scrollTop = window.scrollY;
-      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
-      const scrollProgress = (scrollTop / scrollHeight) * 360;
-
-      // Show button after scrolling 7-8 lines (~100px)
-      if (scrollTop > 100) {
-        scrollButton.classList.add('visible');
-      } else {
-        scrollButton.classList.remove('visible');
-      }
-
-      // Update the circular progress
-      outerCircle.style.setProperty('--scroll-progress', `${scrollProgress}deg`);
-    });
-
-      // Scroll-to-top functionality
-      scrollButton.addEventListener('click', () => {
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+      integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
+      integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script src="about.js"></script>
+    <script src="script.js"></script>
+    <script>
+      // Set the current year dynamically
+      document.getElementById("currentYear").textContent =
+        new Date().getFullYear();
+    </script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
+    <script>
+      // Initialize tilt effect on mission cards
+      VanillaTilt.init(document.querySelectorAll(".mission-card"), {
+        max: 15,
+        speed: 400,
+        glare: true,
+        "max-glare": 0.2,
+      });
+
+      // Mobile menu toggle
+      document
+        .querySelector(".mobile-menu-btn")
+        .addEventListener("click", function () {
+          document.querySelector(".nav-links").classList.toggle("active");
+        });
+    </script>
+  </body>
+</html>
diff --git a/contact.html b/contact.html
index 47534c0..fba0cdb 100644
--- a/contact.html
+++ b/contact.html
@@ -22,43 +22,515 @@
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="styles.css" />
-   <link rel="stylesheet" href="navbar.css">
+  
+   <link rel="stylesheet" href="pages/navbar.css">
    <link rel="stylesheet" href="contact.css">
+   <link rel="stylesheet" href="footer.css">
 </head>
-    <body>
-    <div id="cursor"></div>
-    <header>
-      <nav class="navbar">
-        <div class="logo">
-          <img src="./img/logo2.png" alt="Logo" />
-        </div>
-        <button class="mobile-menu-btn">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <line x1="3" y1="12" x2="21" y2="12"></line>
-            <line x1="3" y1="6" x2="21" y2="6"></line>
-            <line x1="3" y1="18" x2="21" y2="18"></line>
-          </svg>
-        </button>
-        <ul class="nav-links">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="/pages/platform.html">Platforms</a></li>
-          <li><a href="about.html">About</a></li>
-          <li><a href="contact.html" class="active">Contact</a></li>
-          <li><a href="/pages/Login.html">Log In</a></li>
-          <li><a href="/pages/SignUp.html">Sign Up</a></li>
-        </ul>
-      </nav>
-    </header>
+
+<style>
+  body {
+    font-family: "Poppins", sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background: linear-gradient(to right, #e3ffe7, #d9e7ff);
+    color: #333;
+  }
+
+  /* Navbar Styles */
+  .navbar {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 1rem 2rem;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    backdrop-filter: blur(10px);
+    border-radius: 5px;
+    border: 5px rgb(173, 186, 74) solid;
+  }
+
+  .logo {
+    display: flex;
+    align-items: center;
+  }
+
+  .logo img {
+    height: 40px;
+    width: auto;
+    transition: transform 0.3s ease;
+  }
+
+  .logo img:hover {
+    transform: scale(1.05);
+  }
+
+  .nav-links {
+    display: flex;
+    gap: 2rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .nav-links li {
+    position: relative;
+  }
+
+  .nav-links a {
+    color: #000;
+    font-weight: bold;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 1rem;
+    padding: 0.5rem 0;
+    transition: color 0.3s ease;
+  }
+
+  .nav-links a:hover {
+    color: #007bff;
+  }
+
+  /* Underline animation for nav links */
+  .nav-links a::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: #007bff;
+    transition: width 0.3s ease;
+  }
+
+  .nav-links a:hover::after {
+    width: 100%;
+  }
+
+  /* Active link style */
+  .nav-links a.active {
+    color: #007bff;
+  }
+
+  .nav-links a.active::after {
+    width: 100%;
+  }
+
+  /* Mobile menu button - Hidden by default */
+  .mobile-menu-btn {
+    display: none;
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    cursor: pointer;
+
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .navbar {
+      padding: 1rem;
+    }
+
+    .mobile-menu-btn {
+      display: block;
+    }
+
+    .nav-links {
+      display: none;
+      /* Hide by default on mobile */
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: rgba(255, 255, 255, 0.98);
+      flex-direction: column;
+      padding: 1rem;
+      gap: 1rem;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    /* Show menu when active */
+    .nav-links.active {
+      display: flex;
+    }
+
+    .nav-links li {
+      width: 100%;
+      text-align: center;
+    }
+
+    .nav-links a {
+      display: block;
+      padding: 0.75rem 0;
+    }
+
+    .nav-links a::after {
+      display: none;
+      /* Remove hover animation on mobile */
+    }
+  }
+
+  /* Dark mode support */
+  @media (prefers-color-scheme: dark) {
+
+
+    .nav-links a {
+      color: #0e0f0f;
+      font-weight: bold;
+    }
+
+    .nav-links a:hover {
+      color: #60a5fa;
+    }
+
+    .nav-links a::after {
+      background-color: #60a5fa;
+    }
+
+    @media (max-width: 768px) {
+      .nav-links {
+        background: rgba(174, 237, 158, 0.98);
+
+      }
+    }
+  }
+
+  /* Add smooth scroll behavior */
+  html {
+    scroll-behavior: smooth;
+  }
+
+  /* Optional: Adjust for fixed header when scrolling to anchor links */
+  :target {
+    scroll-margin-top: 80px;
+  }
+
+  .content-wrapper {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 4rem 1.5rem;
+  }
+
+  .contact-section {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 24px;
+    padding: 3rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+  }
+
+  .header-content {
+    text-align: center;
+    margin-bottom: 3.5rem;
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, #239d21 0%, #04ff00 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 700;
+  }
+
+  .header-content p {
+    color: #64748b;
+    font-size: 1.1rem;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  .contact-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    margin-bottom: 3rem;
+  }
+
+  .contact-info {
+    background: #f8faff;
+    padding: 1.5rem;
+    border-radius: 16px;
+    text-align: center;
+    transition: transform 0.3s ease;
+  }
+
+  .contact-info:hover {
+    transform: translateY(-5px);
+  }
+
+  .contact-info i {
+    font-size: 1.5rem;
+    color: #239d21;
+    margin-bottom: 1rem;
+  }
+
+  .contact-info h3 {
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+    color: #1e293b;
+  }
+
+  .contact-info p {
+    color: #64748b;
+    font-size: 0.9rem;
+  }
+
+  #contact-form {
+    display: grid;
+    gap: 1.5rem;
+  }
+
+  .form-group {
+    position: relative;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #1e293b;
+    font-weight: 500;
+    font-size: 0.95rem;
+  }
+
+  input,
+  textarea {
+    width: 100%;
+    padding: 1rem;
+    border: 2px solid #e2e8f0;
+    border-radius: 12px;
+    background: #f8faff;
+    font-size: 1rem;
+    color: #1e293b;
+    transition: all 0.3s ease;
+  }
+
+  input:focus,
+  textarea:focus {
+    outline: none;
+    border-color: #239d21;
+    background: #fff;
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+  }
+
+  textarea {
+    min-height: 150px;
+    resize: vertical;
+  }
+
+  button {
+    background: linear-gradient(135deg, #239d21 0%, #07ff02 100%);
+    color: white;
+    padding: 1rem 2rem;
+    border: none;
+    border-radius: 12px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
+  }
+
+  button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 12px rgba(37, 99, 235, 0.25);
+  }
+
+  #popup-message {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    background: #239d21;
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: 12px;
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+    transform: translateY(150%);
+    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  #popup-message.show {
+    transform: translateY(0);
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  /* Loading animation */
+  .loading {
+    position: relative;
+    pointer-events: none;
+  }
+
+  .loading::after {
+    content: "";
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 50%;
+    left: 50%;
+    margin: -10px 0 0 -10px;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: white;
+    animation: spin 1s ease-in-out infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .content-wrapper {
+      padding: 2rem 1rem;
+    }
+
+    .contact-section {
+      padding: 2rem;
+      border-radius: 16px;
+    }
+
+    .contact-grid {
+      grid-template-columns: 1fr;
+    }
+
+    h1 {
+      font-size: 2rem;
+    }
+
+    .header-content p {
+      font-size: 1rem;
+    }
+  }
+
+  
+
+  #about {
+    margin: 40px;
+    text-align: justify"
+
+  }
+
+  .about {
+    flex: 2;
+    min-width: 300px;
+    display: flex;
+    align-items: flex-start;
+    margin: 10px;
+    transition: transform 0.3s ease-in-out;
+
+  }
+
+  
+
+  @media (max-width: 770px) {
+    .content-wrapper {
+      max-width: 575px;
+    }
+
+    .social-icons {
+      margin-left: 25%;
+    }
+  }
+
+  @media (max-width: 430px) {
+    .content-wrapper {
+      max-width: 360px;
+    }
+
+  }
+
+  @media (max-width: 380px) {
+    .content-wrapper {
+      max-width: 310px;
+    }
+  }
+
+  @media (max-width: 321px) {
+    .content-wrapper {
+      max-width: 285px;
+    }
+
+    #about {
+      margin-left: 10px;
+      margin-right: 0;
+      text-align: left;
+    }
+
+    .about {
+      min-width: 220px
+    }
+
+    .footer-content {
+      padding: 0;
+    }
+
+    footer {
+      padding: 0 5px;
+    }
+
+    .footer-section img {
+      width: 50px
+    }
+
+    .social-icons {
+      margin-left: 21%;
+    }
+  }
+
+  #cursor {
+    height: 20px;
+    width: 20px;
+    background-color: rgb(125, 239, 11, 0.5);
+    border-radius: 50%;
+    position: fixed;
+    font-size: 7px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
+</style>
+
+<body>
+  <div id="cursor"></div>
+  <header>
+    <nav class="navbar">
+      <div class="logo">
+        <img src="./img/logo2.png" alt="Logo" />
+      </div>
+      <button class="mobile-menu-btn">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="3" y1="12" x2="21" y2="12"></line>
+          <line x1="3" y1="6" x2="21" y2="6"></line>
+          <line x1="3" y1="18" x2="21" y2="18"></line>
+        </svg>
+      </button>
+      <ul class="nav-links">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="#platforms">Platforms</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="contact.html" class="active">Contact</a></li>
+        <li><a href="pages/Login.html">Log In</a></li>
+        <li><a href="pages/SignUp.html">Sign Up</a></li>
+      </ul>
+    </nav>
+  </header>
+
   <main class="content-wrapper">
     <section class="contact-section">
       <div class="header-content">
@@ -139,84 +611,117 @@ <h3>Call Us</h3>
         </div>
       </div>
 
-    
+      <form id="contact-form" onsubmit="handleSubmit(event)">
+        <div class="form-group">
+          <label for="name">Your Name</label>
+          <input type="text" id="name" name="name" placeholder="Enter your name" required />
+        </div>
+        <div class="form-group">
+          <label for="email">Your Email</label>
+          <input type="email" id="email" name="email" placeholder="Enter your email" required />
+        </div>
+        <div class="form-group">
+          <label for="message">Your Message</label>
+          <textarea id="message" name="message" placeholder="Enter your message" required></textarea>
+        </div>
+        <button type="submit">Send Message</button>
+      </form>
+    </section>
+    <div id="popup-message" class="hidden">
+      Your message has been sent successfully! 🎉
+    </div>
   </main>
-  <footer class="main-footer" style="background: linear-gradient(to right,  #0e2511, #19be50);; color: #ffffff; padding: 20px 20px;">
-    <div class="footer-content" style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;">
-      <div class="footer-section" style="flex: 1; min-width: 250px; max-width: 300px;">
+
+  </main>
+
+  <footer>
+    <!-- Footer Container -->
+    <div class="footer-container">
+      <!-- Left Section (Logo and Description) -->
+      <div class="footer-left">
         <!-- Logo -->
-        <div class="footer-logo" style="margin-bottom: 10px; animation: fadeInLeft 1s; text-align: center;">
-          <div style="padding: 10px; border-radius: 8px; display: inline-block;">
-            <img src="img/lightlogo.png" alt="Logo" style="height: 60px; width: auto;">
+        <div class="footer-logo" >
+          <div class="footer-div" onclick="window.location.href = 'index.html'">
+            <h1>DSA</h1>
           </div>
         </div>
-        <p style="text-align: justify; margin-bottom: 20px; line-height: 1.6; color: white;">DSA problem solutions involve understanding the problem, choosing the right approach, implementing optimized code, and analyzing time and space complexity for efficiency.</p>
-        <div class="social-links" style="text-align: center;">
-          <a href="#" target="_blank" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
-          <a href="#" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
-          <a href="#" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
-          <a href="#" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
-          <a href="#" target="_blank" aria-label="Linkedin"><i class="fa-brands fa-linkedin-in"></i></a>
-        </div>
+        <!-- Description -->
+        <p>
+          DSA problem solutions involve step-by-step methods to solve data
+          structure and algorithm challenges efficiently. They include
+          understanding the problem, selecting the right approach,
+          implementing optimized code, and analyzing time and space complexity
+          for performance.
+        </p>
       </div>
   
       <!-- Quick Links Section -->
-      <div class="footer-section services">
-          <h4 style="font-size: 18px; margin-bottom: 10px; transition: color 0.3s; color: white;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Quick Links<div class="underline"><span></span></div></h4>
-  <br><ul style="list-style: none; padding: 5;">
-            <li><a href="about.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Who We Are</a></li>
-            <li><a href="blog.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Blog</a></li>
-            <li><a href="work.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Work With Us</a></li>
-            <li><a href="#" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Investor Relations</a></li>
-            <li><a href="contact.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Contact Us</a></li>
-          </ul>
+      <div class="footer-section-services">
+        <h2>Quick Links </h2>
+        <ul >
+          <li><a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li><a href="#">Work With Us</a></li>
+          <li><a href="#">Investor Relations</a></li>
+          <li><a href="#">Contact Us</a></li>
+        </ul>
+      </div>
+      <div class="footer-section-services">
+        <h2> DSA Problem Solutions </h2>
+        <ul >
+          <li> <a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li> <a href="#">Work With Us</a></li>
+          <li> <a href="#">Investor Relations</a></li>
+          <li> <a href="contact.html">Contact Us</a> </li>
+        </ul>
+      </div>
+
+      <!-- Learn More Section -->
+      <div class="footer-section-services">
+        <h2> Learn More</h2>
+        <ul >
+          <li><a href="privacy.html">Privacy Policy</a></li>
+          <li><a href="security.html">Security</a></li>
+          <li><a ref="terms.html">Terms of Service</a></li>
+          <li><a href="contributors.html">Our Contributors</a></li>
+        </ul>
       </div>
-      <div class="footer-section services">
-          <h4 style="font-size: 18px; margin-bottom: 10px; transition: color 0.3s; color: white;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Learn More<div class="underline"><span></span></div></h4>
-  <br><ul style="list-style: none; padding: 0;">
-             <ul style="list-style: none; padding: 0;">
-            <li><a href="privacy.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Privacy Policy</a></li>
-  
-  
-            <li><a href="Security.html" style="color: white; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" <li=""></a><a href="security.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Security</a></li>
-            <li><a href="terms.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Terms of Service</a></li>
-            <li><a href="contributors.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Our Contributors</a></li>
-          </ul>
-      </ul></div>
-  
-       <div class="footer-section services">
-          <h4 style="font-size: 18px; margin-bottom: 10px; transition: color 0.3s; color: white;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Newsletter<div class="underline"><span></span></div></h4>
-         <br>
-         <ul style="list-style: none; padding: 0;">
-          <form>
-          <i class="fas fa-envelope"></i>
-          <input type="email" placeholder="Enter your email id" required="" fdprocessedid="7t54w">
-          <button type="submit" fdprocessedid="xi78vf"><i class="fas fa-arrow-right"></i></button>
-        </form>
-        <br>
-        <h4 style="font-size: 18px; margin-bottom: 10px; transition: color 0.3s; color: white;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Contact Us <div class="underline"><span></span></div></h4>
-        <br>
-        <ul style="list-style: none; padding: 0;">
-             <ul style="list-style: none; padding: 0;">
-            <li><a href="mailto:contact@example.com" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">contact@example.com</a></li>
-            <li><a class="fas fa-map-marker-alt" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">India</a></li>
-             </ul>
-        </ul></ul></div>
     </div>
-  
-    <div class="footer-bottom" style="text-align: center; margin-top: 10px;">
-      <p style="margin: 0; font-size: 14px; color: white;">© 2025 DSA Problem Solutions. All rights reserved.</p>
+
+    <!-- Stay Updated Section -->
+    <div
+      class="footer-section-newsletter" >
+      <h3 > Stay Updated </h3>
+      <p >
+        Subscribe to our newsletter for the latest updates and tips on
+        mastering data structures and algorithms.
+      </p>
+      <form action="#" method="POST">
+        <input type="email" placeholder="Your Email Address" required />
+        <button type="submit">Subscribe</button>
+      </form>
+    </div>
+
+    <!-- Social Links -->
+    <div
+      class="social-links" >
+      <ul>
+        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+        <li><a href="#" ><i class="fab fa-twitter"></i></a></li>
+        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+      </ul>
+    </div>
+
+    <!-- Footer Bottom -->
+    <div
+      class="footer-bottom">
+      <p> &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.</p>
     </div>
   </footer>
+
   
-   <script>document.getElementById('currentYear').textContent = new Date().getFullYear();</script>
-   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
-          integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
-          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="script.js"></script>
-    <script src="//code.tidio.co/5w3m6cpl10rvqjkkmhv1nx8p0fqloyq6.js" async></script>
-    <script src="audio.js"></script>
-    <!-- Scroll to Top Button -->
   <script>
      const scrollButton = document.getElementById('scrollButton');
   const outerCircle = document.querySelector('.outer-circle');
diff --git a/contributors.html b/contributors.html
index b7343b7..736613a 100644
--- a/contributors.html
+++ b/contributors.html
@@ -1,38 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <meta property="og:image" content="img/lightlogo.png" />
-    <meta
-      property="og:url"
-      content="https://priyeshsingh24.github.io/DSA_SOLUTION_PLATFORM/"
-    />
-    <meta property="og:type" content="website" />
-
-    <link rel="icon" href="img/lightlogo.png" type="image/png" />
-    <link rel="icon" href="img/lightlogo.png" sizes="16x16" type="image/png" />
-
-    <title>Our Contributors- DSA Problem Solutions</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
-      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-    <link rel="stylesheet" href="navbar.css" />
-    <style>
-      @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Our Contributors- DSA Problem Solutions</title>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+    integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="pages/navbar.css">
+    <link rel="stylesheet" href="footer.css">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
       body {
         font-family: "Poppins", sans-serif;
@@ -69,136 +50,12 @@
         background-color: rgb(80, 183, 218);
       }
 
-      footer {
-        background-color: #ffffff;
-        padding: 40px 0;
-        color: #ffffff;
-        box-shadow: 12px 6px 14px rgba(0, 0, 0, 0.15);
-        font-family: "Outfit", serif;
-        font-weight: 300;
-        margin-top: 50px;
-      }
-
-      .footer-content {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 20px;
-        max-width: 1200px;
-        margin: auto;
-        padding: 20px;
-      }
-
-      .footer-section {
-        margin: 20px;
-      }
-
-      .footer-section h2 {
-        font-size: 18px;
-        font-weight: bold;
-        margin-bottom: 20px;
-      }
-
-      .footer-section ul {
-        list-style: none;
-        padding: 0;
-      }
-
-      .footer-section ul li {
-        margin-bottom: 10px;
-      }
-
-      .footer-section ul li a {
-        text-decoration: none;
-        color: #6c757d;
-        font-size: 14px;
+    
+    @keyframes pulse {
+      0% {
+        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.6);
       }
 
-      .footer-section ul li a:hover {
-        color: #000;
-      }
-
-      .social-icons {
-        display: flex;
-        gap: 10px;
-      }
-
-      .social-icons li {
-        list-style: none;
-      }
-
-      .social-icons li a {
-        font-size: 20px;
-        color: #6c757d;
-      }
-
-      .footer-section.newsletter h2 {
-        font-size: 22px;
-        color: #ea0202;
-        margin-bottom: 15px;
-      }
-
-      .footer-section.newsletter p {
-        font-size: 14px;
-        color: #130111;
-        margin-bottom: 20px;
-      }
-
-      .footer-section.newsletter .newsletter-form {
-        display: flex;
-        justify-content: center;
-        gap: 10px;
-        align-items: center;
-      }
-
-      .footer-section.newsletter .newsletter-form input {
-        padding: 10px;
-        font-size: 14px;
-        width: 250px;
-        border: 2px solid #ddd;
-        border-radius: 4px;
-        transition: border-color 0.3s ease;
-      }
-
-      .footer-section.newsletter .newsletter-form input:focus {
-        border-color: #ff5722;
-        /* Focused border color */
-        outline: none;
-      }
-
-      .footer-section.newsletter .subscribe-btn {
-        background: linear-gradient(90deg, #ff5722, #ff0000);
-        /* Red gradient */
-        color: #fff;
-        padding: 10px 20px;
-        font-size: 14px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        transition: background 0.3s ease, transform 0.3s ease;
-      }
-
-      .footer-section.newsletter .subscribe-btn:hover {
-        background: linear-gradient(90deg, #ff0000, #ff5722);
-        /* Reverse gradient on hover */
-        transform: translateY(-3px);
-        /* Button hover animation */
-      }
-
-      .footer-bottom {
-        text-align: center;
-        padding: 20px 0;
-        background-color: #e9ecef;
-        font-size: 14px;
-        position: relative;
-        bottom: 0;
-      }
-
-      @keyframes pulse {
-        0% {
-          text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4),
-            0 0 20px rgba(255, 255, 255, 0.6);
-        }
-
         100% {
           text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4),
             0 0 30px rgb(251, 255, 251);
@@ -216,41 +73,26 @@
         letter-spacing: 2px;
       }
 
-      .contributors-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-        gap: 20px;
-        margin: 40px auto;
-        padding: 0 20px;
-        max-width: 1200px;
-      }
+    .contributors-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 20px;
+      margin: 40px auto;
+      padding: 0 20px;
+      max-width: 1200px;
+    }
 
-      /* General Reset */
-      body {
-        font-family: "Arial", sans-serif;
-        margin: 0;
-        padding: 0;
-        background-color: #f0f4f8;
-        color: #333;
-      }
 
-      /* Footer Styling */
-      footer {
-        background-color: #333;
-        color: #fff;
-        text-align: center;
-        padding: 1rem 0;
-      }
+    /* General Reset */
+    body {
+      font-family: 'Arial', sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f0f4f8;
+      color: #333;
+    }
 
-      footer a {
-        color: #00bcd4;
-        text-decoration: none;
-        font-weight: bold;
-      }
-
-      footer a:hover {
-        text-decoration: underline;
-      }
+      
 
       /* Contributors Section Container */
       #contributors {
@@ -301,31 +143,82 @@
         color: #555;
       }
 
-      /* 3D Effect on Hover */
-      .contributor-card:hover img {
-        border-color: #ff5722;
+    /* 3D Effect on Hover */
+    .contributor-card:hover img {
+      border-color: #ff5722;
+    }
+
+
+    
+
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .navbar {
+        padding: 1rem;
+      }
+
+      .mobile-menu-btn {
+        display: block;
       }
 
-      footer {
-        background-color: white;
-        color: white;
+      .nav-links {
+        display: none;
+        /* Hide by default on mobile */
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: rgba(255, 255, 255, 0.98);
+        flex-direction: column;
+        padding: 1rem;
+        gap: 1rem;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Show menu when active */
+      .nav-links.active {
+        display: flex;
+      }
+
+      .nav-links li {
+        width: 100%;
         text-align: center;
-        padding: 20px 0;
-        position: relative;
       }
 
-      footer a {
-        color: #fff;
-        text-decoration: none;
-        margin: 0 10px;
-        font-size: 1.2em;
+      .nav-links a {
+        display: block;
+        padding: 0.75rem 0;
       }
 
-      footer a:hover {
-        text-decoration: underline;
+      .nav-links a::after {
+        display: none;
+        /* Remove hover animation on mobile */
       }
-    </style>
-  </head>
+    }
+
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+
+      .nav-links a {
+        color: #f9fafd;
+      }
+
+      .nav-links a:hover {
+        color: #60a5fa;
+      }
+
+      .nav-links a::after {
+        background-color: #60a5fa;
+      }
+
+      @media (max-width: 768px) {
+        .nav-links {
+          background: rgba(174, 237, 158, 0.98);
+        }
+      }
+    }
+  </style>
+</head>
 
   <body>
     <nav class="navbar">
@@ -360,555 +253,193 @@
       </ul>
     </nav>
 
-    <main>
-      <div class="content-wrapper"></div>
-      <h1 class="title" style="text-align: center; margin-top: 40px">
-        Our Contributors
-      </h1>
-      <div id="contributors" class="contributors-grid">
-        <!-- Dynamic contributors will be added here -->
-      </div>
-    </main>
-
-    <footer
-      style="
-        background: linear-gradient(to right, #0e2511, #19be50);
-        color: #ffffff;
-        padding: 40px 20px;
-        font-family: 'Arial', sans-serif;
-        overflow: hidden;
-      "
-    >
-      <!-- Footer Container -->
-      <div
-        class="footer-container"
-        style="
-          max-width: 1200px;
-          margin: 0 auto;
-          display: flex;
-          flex-wrap: wrap;
-          gap: 40px;
-        "
-      >
-        <!-- Left Section (Logo and Description) -->
-        <div class="footer-left" style="flex: 2; min-width: 300px">
-          <!-- Logo -->
-          <div
-            class="footer-logo"
-            style="margin-bottom: 20px; animation: fadeInLeft 1s"
-          >
-            <div
-              style="
-                background-color: #8cc152;
-                padding: 20px;
-                border-radius: 8px;
-                display: inline-block;
-              "
-            >
-              <h1 style="margin: 0; font-size: 36px; font-weight: bold">DSA</h1>
-            </div>
-          </div>
-          <!-- Description -->
-          <p
-            style="
-              font-size: 16px;
-              line-height: 1.6;
-              animation: fadeInLeft 1.5s;
-            "
-          >
-            DSA problem solutions involve step-by-step methods to solve data
-            structure and algorithm challenges efficiently. They include
-            understanding the problem, selecting the right approach,
-            implementing optimized code, and analyzing time and space complexity
-            for performance.
-          </p>
-        </div>
+  <main>
+    <div class="content-wrapper"></div>
+    <h1 class="title" style="text-align: center; margin-top: 40px;">Our Contributors</h1>
+    <div id="contributors" class="contributors-grid">
+      <!-- Dynamic contributors will be added here -->
+    </div>
+  </main>
 
-        <!-- Quick Links Section -->
-        <div class="footer-section services">
-          <h2
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Quick Links
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="about.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Who We Are</a
-              >
-            </li>
-
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black';; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Blog</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Work With Us</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Investor Relations</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Contact Us</a
-              >
-            </li>
-          </ul>
-        </div>
-        <div class="footer-section services">
-          <h2
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            DSA Problem Solutions
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="about.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Who We Are</a
-              >
-            </li>
-            <li>
-              <a
-                href="Blog.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Blog</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Work With Us</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Investor Relations</a
-              >
-            </li>
-            <li>
-              <a
-                href="contact.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Contact Us</a
-              >
-            </li>
-          </ul>
-        </div>
 
-        <!-- Learn More Section -->
-        <div class="footer-section services">
-          <h2
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Learn More
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="privacy.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Privacy Policy</a
-              >
-            </li>
-            <li>
-              <a
-                href="security.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Security</a
-              >
-            </li>
-            <li>
-              <a
-                href="terms.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Terms of Service</a
-              >
-            </li>
-            <li>
-              <a
-                href="contributors.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Our Contributors</a
-              >
-            </li>
-          </ul>
-        </div>
-      </div>
 
-      <!-- Stay Updated Section -->
-      <div
-        class="footer-section.newsletter"
-        style="
-          background: rgba(255, 255, 255, 0.2);
-          border-radius: 20px;
-          backdrop-filter: blur(10px);
-          padding: 10px;
-          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-          transition: transform 0.3s ease, box-shadow 0.3s ease;
-          height: 10rem;
-        "
-      >
-        <h3
-          style="
-            font-size: 18px;
-            margin-bottom: 20px;
-            text-align: center;
-            color: #ffffff;
-          "
-        >
-          Stay Updated
-        </h3>
-        <p
-          style="
-            text-align: center;
-            font-size: 14px;
-            line-height: 1.8;
-            margin-bottom: 20px;
-          "
-        >
-          Subscribe to our newsletter for the latest updates and tips on
-          mastering data structures and algorithms.
+  <footer >
+    <!-- Footer Container -->
+    <div class="footer-container" >
+
+      <!-- Left Section (Logo and Description) -->
+      <div class="footer-left" >
+        <!-- Logo -->
+        <div class="footer-logo" >
+          <div class="logo-design">
+            <h1>DSA</h1>
+          </div>
+        </div>
+        <!-- Description -->
+        <p >
+          DSA problem solutions involve step-by-step methods to solve data structure and algorithm challenges
+          efficiently.
+          They include understanding the problem, selecting the right approach, implementing optimized code, and
+          analyzing
+          time and space complexity for performance.
         </p>
-        <form
-          action="#"
-          method="POST"
-          style="max-width: 600px; margin: 0 auto; display: flex; gap: 10px"
-        >
-          <input
-            type="email"
-            placeholder="Your Email Address"
-            required
-            style="
-              flex: 1;
-              padding: 10px;
-              font-size: 14px;
-              border: 1px solid #dee2e6;
-              border-radius: 4px;
-            "
-          />
-          <button
-            type="submit"
-            style="
-              padding: 10px 20px;
-              font-size: 14px;
-              background-color: #222;
-              color: #ffffff;
-              border: none;
-              border-radius: 4px;
-              cursor: pointer;
-              transition: background-color 0.3s;
-            "
-            onmouseover="this.style.backgroundColor='rgba(255, 255, 255,0.8)'; this.style.color= 'black'"
-            onmouseout="this.style.backgroundColor='#222'; this.style.color= 'white'"
-          >
-            Subscribe
-          </button>
-        </form>
       </div>
 
-      <!-- Social Links -->
-      <div
-        class="social-links"
-        style="text-align: center; margin-top: 40px; animation: fadeInUp 2.5s"
-      >
-        <ul
-          style="
-            list-style: none;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-          "
-        >
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#13d8ff';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-facebook"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#222';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fa-brands fa-x-twitter"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#13d8ff';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-linkedin"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #fff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#e84a3cee';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-youtube"></i
-            ></a>
-          </li>
+      <!-- Quick Links Section -->
+      <div class="footer-section-services">
+        <h2>Quick Links </h2>
+        <ul >
+          <li><a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li><a href="#">Work With Us</a></li>
+          <li><a href="#">Investor Relations</a></li>
+          <li><a href="#">Contact Us</a></li>
         </ul>
       </div>
-
-      <!-- Footer Bottom -->
-      <div
-        class="footer-bottom"
-        style="
-          text-align: center;
-          margin-top: 20px;
-          padding-top: 20px;
-          background: none;
-          color: #ffffff;
-          animation: fadeInUp 3s;
-        "
-      >
-        <p style="margin: 0; font-size: 14px">
-          &copy; <span id="currentYear"></span> DSA Problem Solutions. All
-          rights reserved.
-        </p>
+      <div class="footer-section-services">
+        <h2> DSA Problem Solutions </h2>
+        <ul >
+          <li> <a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li> <a href="#">Work With Us</a></li>
+          <li> <a href="#">Investor Relations</a></li>
+          <li> <a href="contact.html">Contact Us</a> </li>
+        </ul>
       </div>
-    </footer>
-
-    <script>
-      // Set the current year dynamically
-      document.getElementById("currentYear").textContent =
-        new Date().getFullYear();
-    </script>
 
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
-      integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    ></script>
-    <script src="script.js"></script>
-    <script
-      src="//code.tidio.co/5w3m6cpl10rvqjkkmhv1nx8p0fqloyq6.js"
-      async
-    ></script>
-    <script src="scrollscript.js"></script>
-    <script src="audio.js"></script>
-    <script>
-      document
-        .querySelector(".mobile-menu-btn")
-        .addEventListener("click", function () {
-          document.querySelector(".nav-links").classList.toggle("active");
-        });
-      // Get the button element
-      const scrollBtn = document.getElementById("scrollBtn");
-
-      // Show the button when the user scrolls down 100px from the top
-      window.onscroll = function () {
-        if (
-          document.body.scrollTop > 30 ||
-          document.documentElement.scrollTop > 30
-        ) {
-          scrollBtn.style.display = "block";
-        } else {
-          scrollBtn.style.display = "none";
-        }
-      };
-
-      // Scroll to the top of the page when the button is clicked
-      scrollBtn.onclick = function () {
-        window.scrollTo({
-          top: 0,
-          behavior: "smooth",
-        });
-      };
-    </script>
-    <script>
-      // Set the current year dynamically
-      document.getElementById("currentYear").textContent =
-        new Date().getFullYear();
-    </script>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
-      integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    ></script>
-    <script src="script.js"></script>
-    <script
-      src="//code.tidio.co/5w3m6cpl10rvqjkkmhv1nx8p0fqloyq6.js"
-      async
-    ></script>
-    <script src="scrollscript.js"></script>
-    <script src="audio.js"></script>
-    <script>
-      // Get the button element
-      const scrollBtn = document.getElementById("scrollBtn");
-
-      // Show the button when the user scrolls down 100px from the top
-      window.onscroll = function () {
-        if (
-          document.body.scrollTop > 30 ||
-          document.documentElement.scrollTop > 30
-        ) {
-          scrollBtn.style.display = "block";
-        } else {
-          scrollBtn.style.display = "none";
-        }
-      };
-
-      // Scroll to the top of the page when the button is clicked
-      scrollBtn.onclick = function () {
-        window.scrollTo({
-          top: 0,
-          behavior: "smooth",
-        });
-      };
-    </script>
-
-    <script>
-      const REPO_OWNER = "PRIYESHSINGH24";
-      const REPO_NAME = "DSA_SOLUTION_PLATFORM";
-      const GITHUB_TOKEN = ""; // Optional: Add your GitHub personal access token to avoid rate limits
-
-      async function fetchContributors() {
-        const contributorsContainer = document.getElementById("contributors");
-
-        try {
-          // Fetch contributors from the GitHub API with a limit of 100 contributors per page
-          const response = await fetch(
-            `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contributors?per_page=100`,
-            {
-              headers: GITHUB_TOKEN
-                ? { Authorization: `token ${GITHUB_TOKEN}` }
-                : {},
-            }
-          );
+      <!-- Learn More Section -->
+      <div class="footer-section-services">
+        <h2> Learn More</h2>
+        <ul >
+          <li><a href="privacy.html">Privacy Policy</a></li>
+          <li><a href="security.html">Security</a></li>
+          <li><a ref="terms.html">Terms of Service</a></li>
+          <li><a href="contributors.html">Our Contributors</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Stay Updated Section -->
+    <div
+      class="footer-section-newsletter" >
+      <h3 > Stay Updated </h3>
+      <p >
+        Subscribe to our newsletter for the latest updates and tips on
+        mastering data structures and algorithms.
+      </p>
+      <form action="#" method="POST">
+        <input type="email" placeholder="Your Email Address" required />
+        <button type="submit">Subscribe</button>
+      </form>
+    </div>
+
+    <!-- Social Links -->
+    <div
+      class="social-links" >
+      <ul>
+        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+        <li><a href="#" ><i class="fab fa-twitter"></i></a></li>
+        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+      </ul>
+    </div>
+
+    <!-- Footer Bottom -->
+    <div
+      class="footer-bottom">
+      <p> &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.</p>
+    </div>
+  </footer>
+
+  
+
+  <script>
+    // Set the current year dynamically
+    document.getElementById('currentYear').textContent = new Date().getFullYear();
+  </script>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+    integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="script.js"></script>
+  <script src="//code.tidio.co/5w3m6cpl10rvqjkkmhv1nx8p0fqloyq6.js" async></script>
+  <script src="scrollscript.js"></script>
+  <script src="audio.js"></script>
+  <script>
+    document.querySelector('.mobile-menu-btn').addEventListener('click', function () {
+      document.querySelector('.nav-links').classList.toggle('active');
+    });
+    // Get the button element
+    const scrollBtn = document.getElementById('scrollBtn');
+
+    // Show the button when the user scrolls down 100px from the top
+    window.onscroll = function () {
+      if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
+        scrollBtn.style.display = "block";
+      } else {
+        scrollBtn.style.display = "none";
+      }
+    };
+
+    // Scroll to the top of the page when the button is clicked
+    scrollBtn.onclick = function () {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+    };
+
+  </script>
+  <script>
+    // Set the current year dynamically
+    document.getElementById('currentYear').textContent = new Date().getFullYear();
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+    integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="script.js"></script>
+  <script src="//code.tidio.co/5w3m6cpl10rvqjkkmhv1nx8p0fqloyq6.js" async></script>
+  <script src="scrollscript.js"></script>
+  <script src="audio.js"></script>
+  <script>
+    // Get the button element
+    const scrollBtn = document.getElementById('scrollBtn');
+
+    // Show the button when the user scrolls down 100px from the top
+    window.onscroll = function () {
+      if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
+        scrollBtn.style.display = "block";
+      } else {
+        scrollBtn.style.display = "none";
+      }
+    };
+
+    // Scroll to the top of the page when the button is clicked
+    scrollBtn.onclick = function () {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+    };
+
+  </script>
+
+  <script>
+    const REPO_OWNER = "PRIYESHSINGH24";
+    const REPO_NAME = "DSA_SOLUTION_PLATFORM";
+    const GITHUB_TOKEN = ""; // Optional: Add your GitHub personal access token to avoid rate limits
+
+    async function fetchContributors() {
+      const contributorsContainer = document.getElementById("contributors");
+
+      try {
+        // Fetch contributors from the GitHub API
+        const response = await fetch(
+          `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contributors`,
+          {
+            headers: GITHUB_TOKEN ? { Authorization: `token ${GITHUB_TOKEN}` } : {},
+          }
+        );
 
           if (!response.ok) throw new Error("Failed to fetch contributors");
 
diff --git a/footer.css b/footer.css
new file mode 100644
index 0000000..67e0d15
--- /dev/null
+++ b/footer.css
@@ -0,0 +1,187 @@
+/* Footer */
+footer {
+    background: linear-gradient(to right, #a2db2f, #12e16f);
+    padding: 40px 20px;
+    font-size: 14px;
+    border-radius: 60px 60px 0px 0px;
+    border:black 8px solid;
+  }
+
+  .footer-container{
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+    
+
+  }
+
+  .footer-container h2{
+    color: black;
+    font-size: 18px;
+    margin-bottom: 10px;
+    transition: color 0.3s ease;
+
+    
+  }
+
+  .footer-container h2:hover{
+    color:#e67e22;
+  }
+  .footer-container ul{
+    list-style: none; 
+    padding: 0;
+  }
+
+  .footer-container a{
+    color:white;
+    text-decoration: none;
+    transition: all 0.3s ease;
+  }
+
+  
+
+  .footer-container a:hover{
+    color:green; 
+    text-decoration: none;
+    padding-left:10px;
+  }
+
+  .footer-left{
+    flex: 2; 
+    min-width: 300px;
+
+    
+    
+    
+  }
+
+  .footer-left p{
+    text-align: justify;
+    color: white;
+    font-size: larger;
+    font-weight: bold;
+    
+  }
+
+.footer-logo {
+    margin-bottom: 20px;
+    
+  }
+
+  .logo-design{
+    text-align: center;
+    background: linear-gradient(to right, #deb914, #12bdec);
+    padding: 20px;
+    border-radius: 8px;
+    display: inline-block;
+    border: black 2px solid;
+   }
+
+   
+
+  
+
+  .footer-section-newsletter{
+    
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 20px;
+    backdrop-filter: blur(10px);
+    padding: 15px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: black 3px solid;
+    margin-top: 20px;
+  }
+
+  .footer-section-newsletter h3{
+    font-size: 18px;
+    margin-bottom: 20px;
+    text-align: center;
+    color: rgb(16, 16, 16);
+    
+  }
+
+  .footer-section-newsletter p{
+    text-align: center;
+    font-size: 14px;
+    line-height: 1.8;
+    margin-bottom: 20px;
+    color: white;
+  }
+
+  .footer-section-newsletter form{
+    max-width: 600px; 
+    margin: 0 auto;
+    display: flex; 
+    gap: 10px
+  }
+
+  .footer-section-newsletter input{
+    flex: 1;
+    padding: 10px;
+    font-size: 14px;
+    font-weight: bold;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    border: black 2px solid;
+  }
+
+  .footer-section-newsletter button{
+    padding: 10px 20px;
+    font-size: 14px;
+    font-weight: bold;
+    background-color: #6c757d;
+    color: #ffffff;
+    border: black 2px solid;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    
+  }
+
+  .social-links{
+    margin-top: 40px; 
+    animation: fadeInUp 2.5s;
+    text-align: center;
+    
+    
+  }
+
+  .social-links ul{
+    list-style: none;
+    padding: 0;
+    display: flex;
+    
+    gap: 20px;
+  }
+
+  .social-links a{
+    
+    color: #151414; 
+    font-size: 30px; 
+    transition: color 0.3s
+  }
+
+  .social-links a:hover{
+    color:#f7f8f5;
+
+  }
+
+  .footer-bottom{
+    text-align: center;
+    font-weight: bold;
+    margin-top: 20px;
+    padding-top: 20px;
+    background: none;
+    color: #ffffff;
+    animation: fadeInUp 3s;
+
+  }
+
+  .footer-bottom p{
+    margin: 0; 
+    font-size: 14px
+  }
+
diff --git a/index.html b/index.html
index b1bf5a1..0054d16 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,8 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="pages/navbar.css">
+    <link rel="stylesheet" href="pages/scroll.css">
   </head>
 
   <body>
diff --git a/pages/Login.css b/pages/Login.css
index 1307c64..0df9ce9 100644
--- a/pages/Login.css
+++ b/pages/Login.css
@@ -191,6 +191,7 @@ body {
 
 /* Modal */
 .modal {
+  justify-self: center;
     /* width: 80%;  */
     max-width: 500px; 
     padding: 30px;
diff --git a/pages/Login.html b/pages/Login.html
index 3316d24..ff8cb2a 100644
--- a/pages/Login.html
+++ b/pages/Login.html
@@ -20,13 +20,10 @@
     />
 
     <title>Sign In / Sign Up</title>
-    <link rel="stylesheet" href="Login.css" />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="navbar.css" />
-  </head>
+    <link rel="stylesheet" href="Login.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../footer.css">
+</head>
 
   <body>
     <nav class="navbar">
@@ -63,17 +60,17 @@
 
     <!-- Modal for Sign In / Sign Up -->
     <div id="authModal" class="modal">
-      <div class="modal-content">
-        <!-- Sign In Form -->
-        <div class="form-main">
-          <div id="signInForm" class="auth-container">
-            <div class="auth-header">
-              <div class="auth-logo">
-                <i class="fa-solid fa-user-secret"></i>
-              </div>
-              <h2 class="auth-title">Welcome back</h2>
-              <p class="auth-subtitle">Sign in to your account</p>
-            </div>
+        <div class="modal-content">
+            <!-- Sign In Form -->
+            <div class="form-main">
+                <div id="signInForm" class="auth-container">
+                    <div class="auth-header">
+                        <div class="auth-logo">
+                            <i class="fa-solid fa-user-secret"></i>
+                        </div>
+                        <h2 class="auth-title">Welcome back</h2>
+                        <p class="auth-subtitle">Sign in to your account</p>
+                    </div>
 
             <form id="signInFormSubmit">
               <div class="input-group">
diff --git a/pages/SignUp.html b/pages/SignUp.html
index 05be283..e339cce 100644
--- a/pages/SignUp.html
+++ b/pages/SignUp.html
@@ -18,6 +18,7 @@
 
     <title>SIGN UP</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../footer.css">
     <link rel="stylesheet" href="../navbar.css">
 </head>
 <Style>
@@ -27,6 +28,7 @@
     }
 </Style>
 <body>
+    
     <nav class="navbar">
         <div class="logo">
 
@@ -102,6 +104,92 @@ <h2 class="auth-title">Create an account</h2>
             </form>
         </div>
     </div>
+    <footer>
+        <!-- Footer Container -->
+        <div class="footer-container">
+          <!-- Left Section (Logo and Description) -->
+          <div class="footer-left">
+            <!-- Logo -->
+            <div class="footer-logo" >
+              <div class="footer-div" onclick="window.location.href = 'index.html'">
+                <h1>DSA</h1>
+              </div>
+            </div>
+            <!-- Description -->
+            <p>
+              DSA problem solutions involve step-by-step methods to solve data
+              structure and algorithm challenges efficiently. They include
+              understanding the problem, selecting the right approach,
+              implementing optimized code, and analyzing time and space complexity
+              for performance.
+            </p>
+          </div>
+    
+          <!-- Quick Links Section -->
+          <div class="footer-section-services">
+            <h2>Quick Links </h2>
+            <ul >
+              <li><a href="about.html">Who We Are</a></li>
+              <li> <a href="#">Blog</a></li>
+              <li><a href="#">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="#">Contact Us</a></li>
+            </ul>
+          </div>
+          <div class="footer-section-services">
+            <h2> DSA Problem Solutions </h2>
+            <ul >
+              <li> <a href="about.html">Who We Are</a></li>
+              <li> <a href="#">Blog</a></li>
+              <li> <a href="#">Work With Us</a></li>
+              <li> <a href="#">Investor Relations</a></li>
+              <li> <a href="contact.html">Contact Us</a> </li>
+            </ul>
+          </div>
+    
+          <!-- Learn More Section -->
+          <div class="footer-section-services">
+            <h2> Learn More</h2>
+            <ul >
+              <li><a href="privacy.html">Privacy Policy</a></li>
+              <li><a href="security.html">Security</a></li>
+              <li><a ref="terms.html">Terms of Service</a></li>
+              <li><a href="contributors.html">Our Contributors</a></li>
+            </ul>
+          </div>
+        </div>
+    
+        <!-- Stay Updated Section -->
+        <div
+          class="footer-section-newsletter" >
+          <h3 > Stay Updated </h3>
+          <p >
+            Subscribe to our newsletter for the latest updates and tips on
+            mastering data structures and algorithms.
+          </p>
+          <form action="#" method="POST">
+            <input type="email" placeholder="Your Email Address" required />
+            <button type="submit">Subscribe</button>
+          </form>
+        </div>
+    
+        <!-- Social Links -->
+        <div
+          class="social-links" >
+          <ul>
+            <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+            <li><a href="#" ><i class="fab fa-twitter"></i></a></li>
+            <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+            <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+          </ul>
+        </div>
+    
+        <!-- Footer Bottom -->
+        <div
+          class="footer-bottom">
+          <p> &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.</p>
+        </div>
+      </footer>
 
 </body>
 
diff --git a/pages/platform.html b/pages/platform.html
index b29081f..709c283 100644
--- a/pages/platform.html
+++ b/pages/platform.html
@@ -6,6 +6,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link rel="stylesheet" href="pages/styles.css">
+    <link rel="stylesheet" href="navbar.css">
     <style>
       #scrollBtn {
         position: fixed;
diff --git a/pages/styles.css b/pages/styles.css
index 00198d0..ff4ded8 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -1,759 +1,759 @@
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: 'Poppins', sans-serif;
-  background-color: #f4f4f4;
-}
-/* Navbar Styles */
-.navbar {
-  background: rgb(24 192 27);
-  padding: 1rem 1rem;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 2px 10px #37ff01;
-  z-index: 1000;
-  backdrop-filter: blur(10px);
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px; 
-  border: 5px rgb(144 174 172 / 0%) solid;
-}
-
-/* .logo {
-  display: flex;
-  align-items: center;
-} */
-
-.logo img {
-  height: 40px;
-  width: 8rem;
-  transition: transform 0.3s ease;
-  border-radius: 6px;
-}
-
-.logo img:hover {
-  transform: scale(1.05);
-}
-
-.logo{
-  padding-top: 8px;
-}
-.nav-links {
-  display: flex;
-  gap: 2rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.nav-links li {
-  position: relative;
-}
-
-.nav-links li a {
-  color: #ffffff;
-  font-weight: bold;
-  text-decoration: none;
-  padding: 8px 12px;
-  transition: background-color 0.3s ease-in-out;
-  font-size: 18px;
-}
-
-
-
-.nav-links a:hover {
-  color: #17ff00;
-}
-
-/* Underline animation for nav links */
-.nav-links a::after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 2px;
-  bottom: 0;
-  left: 0;
-  background-color: #ffffff;
-  transition: width 0.3s ease;
-}
-
-.nav-links a:hover::after {
-  width: 100%;
-}
-
-/* Active link style */
-.nav-links a.active {
-  color: #ffffff;
-}
-
-.nav-links a.active::after {
-  width: 100%;
-}
-
-/* Mobile menu button - Hidden by default */
-.mobile-menu-btn {
-  color:#000;
-  display: none;
-  background: none;
-  border: none;
-  padding: 0.5rem;
-  cursor: pointer;
-}
-
-/* Hero Section Styles */
-.hero-section {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4rem;
-  /* margin: -20px; */
-  background: linear-gradient(to right, #11cb2a, #19be50);
-  color: #ffffff;
-  font-family: 'Roboto', sans-serif;
-}
-
-.hero-content {
-  max-width: 70%;
-  /* margin-left: -3rem; */
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.hero-title {
-  font-size: 3rem;
-  font-weight: 700;
-  margin-bottom: 1.5rem;
-}
-
-.hero-subtitle {
-  font-size: 1.5rem;
-  width: 70%;
-  margin-bottom: 30px;
-
-}
-
-.hero-buttons {
-  /* margin-left: 4rem; */
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-  justify-content:center;
-}
-
-
-.platform-btn {
-width: max-content;
-  background-color: #fff;
-  color: #2575fc;
-  padding: 10px 20px;
-  font-size: 1rem;
-  font-weight: 600;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: transform 0.3s ease, background-color 0.3s ease;
-}
-
-.platform-btn:hover {
-  transform: scale(1.1);
-  background-color: #625ee1fa;
-  color: #fff;
-}
-
-.hero-image img {
-  max-width: 400px;
-  height: auto;
-  border-radius: 20px;
-}
-
-
-.footer-title{
-  margin: 40px; text-align: justify;
-}
-
-.footer-logo{
-  width: 100px;
-        margin-top: 20px;
-}
-
-.follow-us{
-  font-size: 18px; margin-bottom: 10px; transition: color 0.3s ease;
-}
-
-.services{
-flex: 1; 
-       min-width: 150px;
-        margin: 10px;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .navbar {
-      padding: 1rem;
-  }
-
-  .mobile-menu-btn {
-      display: block;
-  }
-
- 
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  
-  .nav-links a {
-      color: #e5e7eb;
-  }
-
-  .nav-links a:hover {
-      color: #60a5fa;
-  }
-
-  .nav-links a::after {
-      background-color: #60a5fa;
-  }
-
-  @media (max-width: 768px) {
-      .nav-links {
-          background: rgba(174, 237, 158, 0.98);
-      }
-  }
-}
-
- .nav-links {
-      display: none; /* Hide by default on mobile */
-      position: absolute;
-      top: 100%;
-      left: 0;
-      right: 0;
-      background: rgb(0 0 0 / 98%);
-      flex-direction: column;
-      padding: 1rem;
-      gap: 1rem;
-      box-shadow: 0 2px 10px rgb(24 1 255);
-  }
-
-  /* Show menu when active */
-  .nav-links.active {
-      display: flex;
-  }
-
-  .nav-links li {
-      width: 100%;
-      text-align: center;
-  }
-
-  .nav-links a {
-      display: block;
-      padding: 0.75rem 0;
-  }
-
-  .nav-links a::after {
-      display: none; /* Remove hover animation on mobile */
-  }
-}
-
-
-/* Responsive Design */
-@media screen and (max-width: 768px) {
-  .nav-links {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .nav-links li {
-    width: 100%;
-  }
-
-  .nav-links li a {
-    text-align: center;
-  }
-
-  .social-icons{
-    display: flex;justify-content: center;
-    align-items: center;
-  }
-
-  .follow-us{
-    text-align: center;
-  }
-}
-
-.content-wrapper {
-  height: 100%;
-  width: 100%;
-}
-header {
-  top: 9px;
-  position: relative;
-  /* z-index: 1; */
-  text-align: center;
-  padding: 40px 0;
-  background-color: #333;
-  color: #fff;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0; 
-}
-header h1 {
-  margin: 0;
-  font-size: 2.5em;
-}
-header p {
-  margin: 10px 0 0;
-  font-size: 1.2em;
-}
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 20px;
-  margin-top:2.8rem;
-  width: 100%;
-}
-
-.platform-card {
-  background-color: #fff;
-  border-radius: 20px; 
-  box-shadow: 0 6px 14px rgb(74 209 74); 
-  margin: 10px;
-  padding: 30px; 
-  text-align: center;
-  flex: 1 1 calc(33.33% - 40px);
-  max-width: 360px;
-  transition: transform 0.3s, box-shadow 0.3s;
-}
-
-.platform-card:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 10px 24px #F44336; 
-}
-
-.platform-card img {
-  width: 100px; 
-  height: 100px; 
-  margin-bottom: 15px;
-  object-fit: contain; 
-  border-radius: 10px; 
-  border: none; 
-  outline: none;
-  box-shadow: none; 
-}
-
-.platform-card h2 {
-  margin: 15px 0;
-  font-size: 1.6em;
-  color: #333;
-}
-
-.platform-card a {
-  display: inline-block;
-  margin-top: 15px;
-  padding: 12px 25px;
-  background-color: #2acb1e;
-  color: #fff;
-  text-decoration: none;
-  border-radius: 8px; 
-  transition: background-color 0.3s;
-}
-
-.platform-card a:hover {
-  background-color: #07670a;
-}
-
-@media(max-width:1025px) {
-  .footer-section p {
-    margin: 12px
-  }
-
-  .footer-logo{
-    width: 65px;
-    margin-top: 17px;
-  }
-}
-
-@media (max-width:426px) {
-  .services{
-    margin-left: 34px;
-  }
-}
-
-@media (max-width:376px) {
-  .services{
-  text-align: center;
-  margin-bottom: 0;
-  }
-
-  .learn-more{
-    text-align: center;
-    margin-top: 0;
-  }
-}
-
-@media(max-width: 321px) {
-  .footer-section{
-    width: 290px;
-    margin: 0;
-  }
-
-  .nav-links li a {
-    color: white;
-  }
-}
-
-/* Footer Animations */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-#cursor{
-  height: 20px;
-    width:20px;
-    background-color: rgb(125, 239, 11,0.5);
-    border-radius: 50%;
-    position: fixed;
-    font-size: 7px;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-}
-
-
-/* ========================
-   Footer Section
-   ======================== */
-.main-footer {
-  background-color: linear-gradient(to right, #11cb2a, #19be50);;
-  padding: 4rem 5%;
-  color: #333;
-  font-family: 'Arial', sans-serif;
-  /*border-top: 3px solid #aaffaf;*/
-  box-shadow: 0 2px 10px rgb(0 0 0);
-  border-top-left-radius: 30px;
-  border-top-right-radius: 30px;
-  margin-top: 50px;
-}
-
-.footer-content {
-  display: grid;
-  margin-bottom: 2rem;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-  max-width: 1200px;
-  margin: auto;
-  padding: 20px;
-}
-
-.footer-section h3 {
-  font-size: 2rem;
-  margin-bottom: 1rem;
-  color: #000;
-}
-
-.footer-section h4 {
-  font-size: 1.2rem;
-  margin-bottom: 1rem;
-  color: #000;
-}
-
-.footer-section p {
-  line-height: 1.6;
-  margin-bottom: 1rem;
-  letter-spacing: 0.2px;
-}
-
-.footer-section ul {
-  list-style: none;
-  padding: 0;
-}
-
-.footer-section ul li {
-  margin-bottom: 0.8rem;
-}
-
-.footer-section ul li a {
-  color: #333;
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.footer-section ul li a:hover {
-  color: #E5A186;
-}
-
-.social-links {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 20px;
-  margin-top: 1rem;
-}
-
-.social-links a {
-  color: #f7f5f5;
-  font-size: 1.5rem;
-  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-}
-
-.social-links a[aria-label="Facebook"]:hover {
-  color: #3b5998;
-  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
-}
-
-.social-links a[aria-label="Twitter"]:hover {
-  color: #1da1f2;
-  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
-}
-.social-links a[aria-label="Instagram"]:hover {
-  color: #e4405f;
-  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
-}
-
-.social-links a[aria-label="YouTube"]:hover {
-  color: #ff0000;
-  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
-}
-
-.social-links a[aria-label="Linkedin"]:hover {
-  color: #0077b5;
-  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
-}
-
-.contact-info li {
-  display: flex;
-  align-items: center;
-  transition: all 0.3s ease;
-  gap: 0.6rem;
-}
-
-.contact-info li span {
-  margin-left: 0.3rem;
-  transition: all 0.3s ease;
-}
-
-.contact-info li span:hover {
-  color: #E5A186;
-}
-
-.footer-bottom {
-  text-align: center;
-  margin-top: 20px;
-  padding-top: 20px;
-  font-size: 14px;
-}
-
-#cursor{
-  height: 20px;
-    width:20px;
-    background-color: rgb(125, 239, 11,0.5);
-    border-radius: 50%;
-    position: fixed;
-    font-size: 7px;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-}
-
-form {
-   padding-bottom: 199px;
-   display: flex;
-   align-items: center;
-   justify-content: space-between;
-   position: relative;  /* Add relative positioning to the form */
-   margin-bottom: 1px;
-}
-
-form::before {
-   content: "";
-   position: absolute;
-   bottom: 0;
-   left: 0%;  /* Adjust this value to control the starting point of the border */
-   width: 92%;  /* Adjust this value to control the length of the border */
-   border-bottom: 1px solid #fafafa;  /* Your border color */
-}
-
-form input{
-   width:80%;
-   padding: 10px;
-   background: transparent;
-   color: #CCC;
-   border: 0;
-   outline: none;
-}
-form button{
-   background: transparent;
-   border: 0;
-   outline: none;
-   cursor: pointer;
-}
-form button .fas{
-  font-size: 16px;
-  padding: 10px 20px;
-  color: #fafafa;
-}
-
-
-.main-footer .footer-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.main-footer .footer-section {
-  flex: 1 1 18%; /* This ensures each section takes up an equal width, you can adjust percentage as needed */
-  padding: 10px;
-}
-
-.main-footer .footer-section h4 {
-  margin-bottom: 10px;
-}
-
-.main-footer .footer-section ul,
-.main-footer .footer-section form {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.main-footer .footer-section form input {
-  margin-right: 10px;
-}
-
-h4 {
-  position: relative; /* Add relative positioning to the <h3> element */
-}
-
-.underline {
-  width: 50%; /* Adjusted to make the red line shorter */
-  height: 3px;
-  background: linear-gradient(to right, #1b5d37, #29b429, #347e0e);
-  border-radius: 3px;
-  position: absolute;
-  bottom: -8px; /* Adjusted to position the underline correctly below the text */
-  left: 10%; /* Centers the underline horizontally */
-  transform: translateX(-20%); /* This ensures that the underline is centered */
-  overflow: hidden;
-}
-
-.underline span {
-  width: 15px;
-  height: 100%;
-  background: #fff;
-  border-radius: 3px;
-  position: absolute;
-  top: 0;
-  left: -15px; /* Starting off-screen to the left */
-  animation: moving 2s linear infinite;
-}
-
-@keyframes moving {
-  0% {
-    left: -20px; /* Start animation off-screen */
-  }
-  100% {
-    left: 100%; /* Move the span across to the right */
-  }
-}
-
-
-/* Scroll to Top Button */
-#scrollButton {
-    position: fixed;
-    bottom: 120px;
-    right: 25px;
-    width: 60px;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 1000;
-    opacity: 0; /* Initially hidden */
-    pointer-events: none; /* Prevent interaction when hidden */
-    transition: opacity 0.5s ease; /* Smooth fade-in effect */
-}
-
-
-#scrollButton.visible {
-    opacity: 1; /* Fully visible */
-    pointer-events: auto; /* Enable interaction */
-}
-
-.outer-circle {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background: conic-gradient(
-        #1ad140 0deg,
-        #03730c var(--scroll-progress, 0deg),
-        #1e65d900 var(--scroll-progress, 0deg),
-        #d5e7ec00 360deg
-    );
-    transform: rotate(-90deg); /* Start animation from top */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.3s ease;
-}
-
-.inner-circle {
-    width: 45px;
-    height: 45px;
-    background: #becdbb;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 4px 6px rgb(0 0 0);
-}
-
-.arrow {
-    font-size: 20px;
-    color: #075728;
-    font-weight: bold;
-    transform: rotate(90deg); /* Fixed direction to the right */
-}
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins', sans-serif;
+  background-color: #f4f4f4;
+}
+/* Navbar Styles */
+.navbar {
+  background: rgb(24 192 27);
+  padding: 1rem 1rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 10px #37ff01;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px; 
+  border: 5px rgb(144 174 172 / 0%) solid;
+}
+
+/* .logo {
+  display: flex;
+  align-items: center;
+} */
+
+.logo img {
+  height: 40px;
+  width: 8rem;
+  transition: transform 0.3s ease;
+  border-radius: 6px;
+}
+
+.logo img:hover {
+  transform: scale(1.05);
+}
+
+.logo{
+  padding-top: 8px;
+}
+.nav-links {
+  display: flex;
+  gap: 2rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-links li {
+  position: relative;
+}
+
+.nav-links li a {
+  color: #ffffff;
+  font-weight: bold;
+  text-decoration: none;
+  padding: 8px 12px;
+  transition: background-color 0.3s ease-in-out;
+  font-size: 18px;
+}
+
+
+
+.nav-links a:hover {
+  color: #17ff00;
+}
+
+/* Underline animation for nav links */
+.nav-links a::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: #ffffff;
+  transition: width 0.3s ease;
+}
+
+.nav-links a:hover::after {
+  width: 100%;
+}
+
+/* Active link style */
+.nav-links a.active {
+  color: #ffffff;
+}
+
+.nav-links a.active::after {
+  width: 100%;
+}
+
+/* Mobile menu button - Hidden by default */
+.mobile-menu-btn {
+  color:#000;
+  display: none;
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+/* Hero Section Styles */
+.hero-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4rem;
+  /* margin: -20px; */
+  background: linear-gradient(to right, #11cb2a, #19be50);
+  color: #ffffff;
+  font-family: 'Roboto', sans-serif;
+}
+
+.hero-content {
+  max-width: 70%;
+  /* margin-left: -3rem; */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.hero-title {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+}
+
+.hero-subtitle {
+  font-size: 1.5rem;
+  width: 70%;
+  margin-bottom: 30px;
+
+}
+
+.hero-buttons {
+  /* margin-left: 4rem; */
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content:center;
+}
+
+
+.platform-btn {
+width: max-content;
+  background-color: #fff;
+  color: #2575fc;
+  padding: 10px 20px;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.platform-btn:hover {
+  transform: scale(1.1);
+  background-color: #625ee1fa;
+  color: #fff;
+}
+
+.hero-image img {
+  max-width: 400px;
+  height: auto;
+  border-radius: 20px;
+}
+
+
+.footer-title{
+  margin: 40px; text-align: justify;
+}
+
+.footer-logo{
+  width: 100px;
+        margin-top: 20px;
+}
+
+.follow-us{
+  font-size: 18px; margin-bottom: 10px; transition: color 0.3s ease;
+}
+
+.services{
+flex: 1; 
+       min-width: 150px;
+        margin: 10px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .navbar {
+      padding: 1rem;
+  }
+
+  .mobile-menu-btn {
+      display: block;
+  }
+
+ 
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  
+  .nav-links a {
+      color: #e5e7eb;
+  }
+
+  .nav-links a:hover {
+      color: #60a5fa;
+  }
+
+  .nav-links a::after {
+      background-color: #60a5fa;
+  }
+
+  @media (max-width: 768px) {
+      .nav-links {
+          background: rgba(174, 237, 158, 0.98);
+      }
+  }
+}
+
+ .nav-links {
+      display: none; /* Hide by default on mobile */
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: rgb(0 0 0 / 98%);
+      flex-direction: column;
+      padding: 1rem;
+      gap: 1rem;
+      box-shadow: 0 2px 10px rgb(24 1 255);
+  }
+
+  /* Show menu when active */
+  .nav-links.active {
+      display: flex;
+  }
+
+  .nav-links li {
+      width: 100%;
+      text-align: center;
+  }
+
+  .nav-links a {
+      display: block;
+      padding: 0.75rem 0;
+  }
+
+  .nav-links a::after {
+      display: none; /* Remove hover animation on mobile */
+  }
+}
+
+
+/* Responsive Design */
+@media screen and (max-width: 768px) {
+  .nav-links {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .nav-links li {
+    width: 100%;
+  }
+
+  .nav-links li a {
+    text-align: center;
+  }
+
+  .social-icons{
+    display: flex;justify-content: center;
+    align-items: center;
+  }
+
+  .follow-us{
+    text-align: center;
+  }
+}
+
+.content-wrapper {
+  height: 100%;
+  width: 100%;
+}
+header {
+  top: 9px;
+  position: relative;
+  /* z-index: 1; */
+  text-align: center;
+  padding: 40px 0;
+  background-color: #333;
+  color: #fff;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0; 
+}
+header h1 {
+  margin: 0;
+  font-size: 2.5em;
+}
+header p {
+  margin: 10px 0 0;
+  font-size: 1.2em;
+}
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-top:2.8rem;
+  width: 100%;
+}
+
+.platform-card {
+  background-color: #fff;
+  border-radius: 20px; 
+  box-shadow: 0 6px 14px rgb(74 209 74); 
+  margin: 10px;
+  padding: 30px; 
+  text-align: center;
+  flex: 1 1 calc(33.33% - 40px);
+  max-width: 360px;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.platform-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 10px 24px #F44336; 
+}
+
+.platform-card img {
+  width: 100px; 
+  height: 100px; 
+  margin-bottom: 15px;
+  object-fit: contain; 
+  border-radius: 10px; 
+  border: none; 
+  outline: none;
+  box-shadow: none; 
+}
+
+.platform-card h2 {
+  margin: 15px 0;
+  font-size: 1.6em;
+  color: #333;
+}
+
+.platform-card a {
+  display: inline-block;
+  margin-top: 15px;
+  padding: 12px 25px;
+  background-color: #2acb1e;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 8px; 
+  transition: background-color 0.3s;
+}
+
+.platform-card a:hover {
+  background-color: #07670a;
+}
+
+@media(max-width:1025px) {
+  .footer-section p {
+    margin: 12px
+  }
+
+  .footer-logo{
+    width: 65px;
+    margin-top: 17px;
+  }
+}
+
+@media (max-width:426px) {
+  .services{
+    margin-left: 34px;
+  }
+}
+
+@media (max-width:376px) {
+  .services{
+  text-align: center;
+  margin-bottom: 0;
+  }
+
+  .learn-more{
+    text-align: center;
+    margin-top: 0;
+  }
+}
+
+@media(max-width: 321px) {
+  .footer-section{
+    width: 290px;
+    margin: 0;
+  }
+
+  .nav-links li a {
+    color: white;
+  }
+}
+
+/* Footer Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+#cursor{
+  height: 20px;
+    width:20px;
+    background-color: rgb(125, 239, 11,0.5);
+    border-radius: 50%;
+    position: fixed;
+    font-size: 7px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+}
+
+
+/* ========================
+   Footer Section
+   ======================== */
+.main-footer {
+  background-color: linear-gradient(to right, #11cb2a, #19be50);;
+  padding: 4rem 5%;
+  color: #333;
+  font-family: 'Arial', sans-serif;
+  /*border-top: 3px solid #aaffaf;*/
+  box-shadow: 0 2px 10px rgb(0 0 0);
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+  margin-top: 50px;
+}
+
+.footer-content {
+  display: grid;
+  margin-bottom: 2rem;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  max-width: 1200px;
+  margin: auto;
+  padding: 20px;
+}
+
+.footer-section h3 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: #000;
+}
+
+.footer-section h4 {
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+  color: #000;
+}
+
+.footer-section p {
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  letter-spacing: 0.2px;
+}
+
+.footer-section ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-section ul li {
+  margin-bottom: 0.8rem;
+}
+
+.footer-section ul li a {
+  color: #333;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-section ul li a:hover {
+  color: #E5A186;
+}
+
+.social-links {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 20px;
+  margin-top: 1rem;
+}
+
+.social-links a {
+  color: #f7f5f5;
+  font-size: 1.5rem;
+  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.social-links a[aria-label="Facebook"]:hover {
+  color: #3b5998;
+  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+
+.social-links a[aria-label="Twitter"]:hover {
+  color: #1da1f2;
+  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+.social-links a[aria-label="Instagram"]:hover {
+  color: #e4405f;
+  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+
+.social-links a[aria-label="YouTube"]:hover {
+  color: #ff0000;
+  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+
+.social-links a[aria-label="Linkedin"]:hover {
+  color: #0077b5;
+  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+
+.contact-info li {
+  display: flex;
+  align-items: center;
+  transition: all 0.3s ease;
+  gap: 0.6rem;
+}
+
+.contact-info li span {
+  margin-left: 0.3rem;
+  transition: all 0.3s ease;
+}
+
+.contact-info li span:hover {
+  color: #E5A186;
+}
+
+.footer-bottom {
+  text-align: center;
+  margin-top: 20px;
+  padding-top: 20px;
+  font-size: 14px;
+}
+
+#cursor{
+  height: 20px;
+    width:20px;
+    background-color: rgb(125, 239, 11,0.5);
+    border-radius: 50%;
+    position: fixed;
+    font-size: 7px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+}
+
+form {
+   padding-bottom: 199px;
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   position: relative;  /* Add relative positioning to the form */
+   margin-bottom: 1px;
+}
+
+form::before {
+   content: "";
+   position: absolute;
+   bottom: 0;
+   left: 0%;  /* Adjust this value to control the starting point of the border */
+   width: 92%;  /* Adjust this value to control the length of the border */
+   border-bottom: 1px solid #fafafa;  /* Your border color */
+}
+
+form input{
+   width:80%;
+   padding: 10px;
+   background: transparent;
+   color: #CCC;
+   border: 0;
+   outline: none;
+}
+form button{
+   background: transparent;
+   border: 0;
+   outline: none;
+   cursor: pointer;
+}
+form button .fas{
+  font-size: 16px;
+  padding: 10px 20px;
+  color: #fafafa;
+}
+
+
+.main-footer .footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.main-footer .footer-section {
+  flex: 1 1 18%; /* This ensures each section takes up an equal width, you can adjust percentage as needed */
+  padding: 10px;
+}
+
+.main-footer .footer-section h4 {
+  margin-bottom: 10px;
+}
+
+.main-footer .footer-section ul,
+.main-footer .footer-section form {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.main-footer .footer-section form input {
+  margin-right: 10px;
+}
+
+h4 {
+  position: relative; /* Add relative positioning to the <h3> element */
+}
+
+.underline {
+  width: 50%; /* Adjusted to make the red line shorter */
+  height: 3px;
+  background: linear-gradient(to right, #1b5d37, #29b429, #347e0e);
+  border-radius: 3px;
+  position: absolute;
+  bottom: -8px; /* Adjusted to position the underline correctly below the text */
+  left: 10%; /* Centers the underline horizontally */
+  transform: translateX(-20%); /* This ensures that the underline is centered */
+  overflow: hidden;
+}
+
+.underline span {
+  width: 15px;
+  height: 100%;
+  background: #fff;
+  border-radius: 3px;
+  position: absolute;
+  top: 0;
+  left: -15px; /* Starting off-screen to the left */
+  animation: moving 2s linear infinite;
+}
+
+@keyframes moving {
+  0% {
+    left: -20px; /* Start animation off-screen */
+  }
+  100% {
+    left: 100%; /* Move the span across to the right */
+  }
+}
+
+
+/* Scroll to Top Button */
+#scrollButton {
+    position: fixed;
+    bottom: 120px;
+    right: 25px;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 1000;
+    opacity: 0; /* Initially hidden */
+    pointer-events: none; /* Prevent interaction when hidden */
+    transition: opacity 0.5s ease; /* Smooth fade-in effect */
+}
+
+
+#scrollButton.visible {
+    opacity: 1; /* Fully visible */
+    pointer-events: auto; /* Enable interaction */
+}
+
+.outer-circle {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: conic-gradient(
+        #1ad140 0deg,
+        #03730c var(--scroll-progress, 0deg),
+        #1e65d900 var(--scroll-progress, 0deg),
+        #d5e7ec00 360deg
+    );
+    transform: rotate(-90deg); /* Start animation from top */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s ease;
+}
+
+.inner-circle {
+    width: 45px;
+    height: 45px;
+    background: #becdbb;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 6px rgb(0 0 0);
+}
+
+.arrow {
+    font-size: 20px;
+    color: #075728;
+    font-weight: bold;
+    transform: rotate(90deg); /* Fixed direction to the right */
+}
\ No newline at end of file
diff --git a/work.html b/work.html
index 4de7015..6a90e8e 100644
--- a/work.html
+++ b/work.html
@@ -12,196 +12,344 @@
     />
     <meta property="og:type" content="website" />
 
-    <link rel="icon" href="img/lightlogo.png" type="image/png" />
-    <link rel="icon" href="img/lightlogo.png" sizes="16x16" type="image/png" />
-
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
-    />
-    <link rel="stylesheet" href="styles.css" />
-    <link rel="stylesheet" href="navbar.css" />
-    <title>Work With Us - DSA Problem Solutions</title>
-    <style>
-      /* Reset some default styles */
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-        font-family: "Poppins", sans-serif;
+  <link rel="icon" href="/img/logo2.png" type="image/png" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" />
+  
+  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="footer.css">
+  
+  <title>Work With Us - DSA Problem Solutions</title>
+  <style>
+
+ /* Reset some default styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins', sans-serif;
+}
+
+body {
+  background-color: #f4f4f4;
+  color: #333;
+  line-height: 1.6;
+}
+
+/* Navbar Styles */
+.navbar {
+      background: rgb(250, 249, 249);
+      padding: 1rem 2rem;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      z-index: 1000;
+      backdrop-filter: blur(10px);
+      border-radius: 5px;
+      border: 5px rgb(173, 186, 74) solid;
+    }
+
+    .logo {
+      display: flex;
+      align-items: center;
+    }
+
+    .logo img {
+      height: 40px;
+      width: 5rem;
+      transition: transform 0.3s ease;
+    }
+
+    .logo img:hover {
+      transform: scale(1.05);
+    }
+
+    .logo {
+      padding-top: 8px;
+    }
+
+    .nav-links {
+      display: flex;
+      gap: 2rem;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .nav-links li {
+      position: relative;
+    }
+
+    .nav-links li a {
+      /* color: #000; */
+      color: #000;
+      font-weight: bold;
+      text-decoration: none;
+      padding: 8px 12px;
+      transition: background-color 0.3s ease-in-out;
+      font-size: 18px;
+    }
+
+    .nav-links a {
+      color: #333;
+      text-decoration: none;
+      font-weight: 500;
+      font-size: 1rem;
+      padding: 0.5rem 0;
+      transition: color 0.3s ease;
+    }
+
+    .nav-links a:hover {
+      color: #007bff;
+    }
+
+    /* Underline animation for nav links */
+    .nav-links a::after {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 2px;
+      bottom: 0;
+      left: 0;
+      background-color: #007bff;
+      transition: width 0.3s ease;
+    }
+
+    .nav-links a:hover::after {
+      width: 100%;
+    }
+
+    /* Active link style */
+    .nav-links a.active {
+      color: #007bff;
+    }
+
+    .nav-links a.active::after {
+      width: 100%;
+    }
+
+    /* Mobile menu button - Hidden by default */
+    .mobile-menu-btn {
+      color: #000;
+      display: none;
+      background: none;
+      border: none;
+      padding: 0.5rem;
+      cursor: pointer;
+    }
+
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .navbar {
+        padding: 1rem;
       }
 
-      body {
-        background-color: #f4f4f4;
-        color: #333;
-        line-height: 1.6;
+      .mobile-menu-btn {
+        display: block;
       }
 
-      /* Hero Section */
-      .hero-section {
-        background: linear-gradient(to right, #11cb2a, #19be50);
-        color: white;
-        padding: 100px 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+      .nav-links {
+        display: none;
+        /* Hide by default on mobile */
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: rgba(255, 255, 255, 0.98);
         flex-direction: column;
-        text-align: center;
-      }
-
-      .hero-title {
-        font-size: 40px;
-        margin-bottom: 10px;
-      }
-
-      .hero-subtitle {
-        font-size: 20px;
+        padding: 1rem;
+        gap: 1rem;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       }
 
-      /* Content Section */
-      .container {
-        max-width: 1200px;
-        margin: 40px auto;
-        padding: 20px;
-      }
-
-      /* Work With Us Content */
-      .work-with-us-content {
-        background-color: #ffffff;
-        padding: 40px 20px;
-        border-radius: 8px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        margin-bottom: 40px;
-      }
-
-      .work-with-us-content h2 {
-        color: #333;
-        margin-bottom: 20px;
-      }
-
-      /* Job Openings */
-      .job-openings {
+      /* Show menu when active */
+      .nav-links.active {
         display: flex;
-        flex-wrap: wrap;
-        gap: 20px;
-      }
-
-      .job-card {
-        background-color: white;
-        padding: 20px;
-        flex: 1;
-        min-width: 300px;
-        border-radius: 8px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       }
 
-      .job-card h3 {
-        color: #11cb2a;
-        margin-bottom: 14px;
-      }
-
-      .job-card p {
-        color: #555;
-        margin-bottom: 15px;
-      }
-
-      /* Apply Now Button */
-      .apply-btn {
-        background-color: #11cb2a;
-        color: white;
-        border: none;
-        padding: 10px 15px;
-        cursor: pointer;
-        border-radius: 4px;
-        text-decoration: none;
-      }
-
-      .apply-btn:hover {
-        background-color: #19be50;
-      }
-
-      /* Contact Section */
-      .get-in-touch {
-        background-color: #ffffff;
-        padding: 40px 20px;
-        border-radius: 8px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        margin-bottom: 40px;
-      }
-
-      .get-in-touch h2 {
-        color: #333;
-        margin-bottom: 20px;
-      }
-
-      .contact-form input,
-      .contact-form textarea {
+      .nav-links li {
         width: 100%;
-        padding: 12px;
-        margin-bottom: 15px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-
-      .contact-form button {
-        background-color: #11cb2a;
-        color: white;
-        border: none;
-        padding: 12px 20px;
-        cursor: pointer;
-        border-radius: 4px;
-        text-transform: uppercase;
-      }
-
-      .contact-form button:hover {
-        background-color: #19be50;
-      }
-
-      /* Footer */
-      footer {
-        background: linear-gradient(to right, #11cb2a, #19be50);
-        color: white;
-        padding: 40px 20px;
         text-align: center;
-        font-size: 14px;
       }
 
-      footer .footer-logo {
-        margin-bottom: 20px;
+      .nav-links a {
+        display: block;
+        padding: 0.75rem 0;
       }
 
-      footer p {
-        margin-bottom: 10px;
+      .nav-links a::after {
+        display: none;
+        /* Remove hover animation on mobile */
       }
+    }
 
-      footer a {
-        color: white;
-        text-decoration: none;
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+
+      .nav-links a {
+        color: #f9fafd;
       }
 
-      footer a:hover {
-        text-decoration: underline;
+      .nav-links a:hover {
+        color: #60a5fa;
       }
 
-      #successMessage {
-        display: none;
-        background-color: #dff0d8;
-        color: #3c763d;
-        padding: 10px;
-        border: 1px solid #d6e9c6;
-        border-radius: 4px;
-        margin-top: 20px;
+      .nav-links a::after {
+        background-color: #60a5fa;
       }
 
-      .hidden {
-        display: none;
+      @media (max-width: 768px) {
+        .nav-links {
+          background: rgba(174, 237, 158, 0.98);
+        }
       }
-    </style>
-  </head>
+    }
+
+
+
+/* Hero Section */
+.hero-section {
+  background: linear-gradient(to right, #11cb2a, #19be50);
+  color: white;
+  padding: 100px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 40px;
+  margin-bottom: 10px;
+}
+
+.hero-subtitle {
+  font-size: 20px;
+}
+
+/* Content Section */
+.container {
+  max-width: 1200px;
+  margin: 40px auto;
+  padding: 20px;
+}
+
+/* Work With Us Content */
+.work-with-us-content {
+  background-color: #ffffff;
+  padding: 40px 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  margin-bottom: 40px;
+}
+
+.work-with-us-content h2 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+/* Job Openings */
+.job-openings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.job-card {
+  background-color: white;
+  padding: 20px;
+  flex: 1;
+  min-width: 300px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.job-card h3 {
+  color: #11cb2a;
+  margin-bottom: 14px;
+}
+
+.job-card p {
+  color: #555;
+  margin-bottom: 15px;
+}
+
+/* Apply Now Button */
+.apply-btn {
+  background-color: #11cb2a;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  cursor: pointer;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.apply-btn:hover {
+  background-color: #19be50;
+}
+
+/* Contact Section */
+.get-in-touch {
+  background-color: #ffffff;
+  padding: 40px 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  margin-bottom: 40px;
+}
+
+.get-in-touch h2 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.contact-form input,
+.contact-form textarea {
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 15px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.contact-form button {
+  background-color: #11cb2a;
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  cursor: pointer;
+  border-radius: 4px;
+  text-transform: uppercase;
+}
+
+.contact-form button:hover {
+  background-color: #19be50;
+}
+
+
+
+#successMessage {
+  display: none;
+  background-color: #dff0d8;
+  color: #3c763d;
+  padding: 10px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  margin-top: 20px;
+}
+
+.hidden {
+  display: none;
+}
+
+  </style>
+</head>
 
 <body>
   <header>
@@ -238,505 +386,134 @@ <h1 class="hero-title">Join Our Team</h1>
         </div>
       </header>
 
-      <section class="container">
-        <div class="work-with-us-content">
-          <h2>Why Work With Us?</h2>
-          <p>
-            At DSA Problem Solutions, we believe in fostering an environment
-            where creativity, collaboration, and continuous learning thrive. Our
-            team is made up of talented individuals from diverse backgrounds who
-            are dedicated to creating a platform that helps learners master data
-            structures and algorithms.
-          </p>
-          <p>
-            Join us to work on exciting projects, contribute to open-source
-            initiatives, and make a real difference in the tech community.
-          </p>
-        </div>
+    <section class="container">
+      <div class="work-with-us-content">
+        <h2>Why Work With Us?</h2>
+        <p>
+          At DSA Problem Solutions, we believe in fostering an environment where creativity, collaboration, and continuous learning thrive. Our team is made up of talented individuals from diverse backgrounds who are dedicated to creating a platform that helps learners master data structures and algorithms.
+        </p>
+        <p>
+          Join us to work on exciting projects, contribute to open-source initiatives, and make a real difference in the tech community.
+        </p>
+      </div>
 
-        <div class="job-openings">
-          <h2>Current Job Openings</h2>
-          <div class="job-card">
-            <h3>Frontend Developer</h3>
-            <p>Location: Remote | Full-time</p>
-            <p>
-              We are looking for a passionate Frontend Developer with experience
-              in modern web technologies like HTML5, CSS3, JavaScript, and
-              frameworks such as React or Vue.js. You’ll be building user
-              interfaces that are engaging and scalable.
-            </p>
-            <a href="#" class="apply-btn">Apply Now</a>
-          </div>
-          <div class="job-card">
-            <h3>Backend Developer</h3>
-            <p>Location: Remote | Full-time</p>
-            <p>
-              Looking for a Backend Developer with expertise in building robust
-              APIs using Node.js, Python, or Ruby. You’ll work on our
-              server-side architecture to ensure smooth data processing and
-              integration.
-            </p>
-            <a href="#" class="apply-btn">Apply Now</a>
-          </div>
-          <div class="job-card">
-            <h3>Content Writer</h3>
-            <p>Location: Remote | Part-time</p>
-            <p>
-              We need a Content Writer who can create high-quality technical
-              content related to DSA, tutorials, blogs, and articles that help
-              our community stay updated and engaged.
-            </p>
-            <a href="#" class="apply-btn">Apply Now</a>
-          </div>
+      <div class="job-openings">
+        <h2>Current Job Openings</h2>
+        <div class="job-card">
+          <h3>Frontend Developer</h3>
+          <p>Location: Remote | Full-time</p>
+          <p>We are looking for a passionate Frontend Developer with experience in modern web technologies like HTML5, CSS3, JavaScript, and frameworks such as React or Vue.js. You’ll be building user interfaces that are engaging and scalable.</p>
+          <a href="#" class="apply-btn">Apply Now</a>
         </div>
-
-        <div class="get-in-touch">
-          <h2>Interested? Get in Touch!</h2>
-          <p>
-            If you're excited about the opportunity to work with us and make an
-            impact, feel free to reach out. You can connect with us through the
-            form below or directly email us at
-            <a href="mailto:careers@dsa-solutions.com"
-              >careers@dsa-solutions.com</a
-            >.
-          </p>
-          <form action="#" method="POST" class="contact-form">
-            <input type="text" placeholder="Your Full Name" required />
-            <input type="email" placeholder="Your Email" required />
-            <textarea placeholder="Your Message" rows="5" required></textarea>
-            <button type="submit">Send Message</button>
-          </form>
+        <div class="job-card">
+          <h3>Backend Developer</h3>
+          <p>Location: Remote | Full-time</p>
+          <p>Looking for a Backend Developer with expertise in building robust APIs using Node.js, Python, or Ruby. You’ll work on our server-side architecture to ensure smooth data processing and integration.</p>
+          <a href="#" class="apply-btn">Apply Now</a>
         </div>
-      </section>
-    </div>
-
-    <footer
-      style="
-        background: linear-gradient(to right, #11cb2a, #19be50);
-        color: #ffffff;
-        padding: 40px 20px;
-        font-family: 'Arial', sans-serif;
-        overflow: hidden;
-      "
-    >
-      <!-- Footer Container -->
-      <div
-        class="footer-container"
-        style="
-          max-width: 1200px;
-          margin: 0 auto;
-          display: flex;
-          flex-wrap: wrap;
-          gap: 40px;
-        "
-      >
-        <!-- Left Section (Logo and Description) -->
-        <div class="footer-left" style="flex: 2; min-width: 300px">
-          <!-- Logo -->
-          <div
-            class="footer-logo"
-            style="margin-bottom: 20px; animation: fadeInLeft 1s"
-          >
-            <div
-              style="
-                background-color: #8cc152;
-                padding: 20px;
-                border-radius: 8px;
-                display: inline-block;
-              "
-            >
-              <h1 style="margin: 0; font-size: 36px; font-weight: bold">DSA</h1>
-            </div>
-          </div>
-          <!-- Description -->
-          <p
-            style="
-              font-size: 16px;
-              line-height: 1.6;
-              animation: fadeInLeft 1.5s;
-            "
-          >
-            DSA problem solutions involve step-by-step methods to solve data
-            structure and algorithm challenges efficiently. They include
-            understanding the problem, selecting the right approach,
-            implementing optimized code, and analyzing time and space complexity
-            for performance.
-          </p>
+        <div class="job-card">
+          <h3>Content Writer</h3>
+          <p>Location: Remote | Part-time</p>
+          <p>We need a Content Writer who can create high-quality technical content related to DSA, tutorials, blogs, and articles that help our community stay updated and engaged.</p>
+          <a href="#" class="apply-btn">Apply Now</a>
         </div>
+      </div>
 
-        <!-- Quick Links Section -->
+      <div class="get-in-touch">
+        <h2>Interested? Get in Touch!</h2>
+        <p>If you're excited about the opportunity to work with us and make an impact, feel free to reach out. You can connect with us through the form below or directly email us at <a href="mailto:careers@dsa-solutions.com">careers@dsa-solutions.com</a>.</p>
+        <form action="#" method="POST" class="contact-form">
+          <input type="text" placeholder="Your Full Name" required />
+          <input type="email" placeholder="Your Email" required />
+          <textarea placeholder="Your Message" rows="5" required></textarea>
+          <button type="submit">Send Message</button>
+        </form>
+      </div>
+    </section>
+  </div>
+
+  <footer >   <!-- Footer Container -->
+    <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+      <div class="footer-left"><!-- Logo -->
+        <div class="footer-logo" >
+          <div class="logo-design"> <h1>DSA</h1></div>
+        </div>
+        <!-- Description -->
+        <p >
+          DSA problem solutions involve step-by-step methods to solve data
+          structure and algorithm challenges efficiently. They include
+          understanding the problem, selecting the right approach,
+          implementing optimized code, and analyzing time and space complexity
+          for performance.
+        </p>
+      </div>
+      
+      <!-- Quick Links Section -->
         <div class="footer-section services">
-          <h2
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Quick Links
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="about.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Who We Are</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Blog</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Work With Us</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Investor Relations</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Contact Us</a
-              >
-            </li>
+          <h2>  Quick Links </h2>
+          <ul>
+            <li><a href="about.html" >Who We Are</a></li>
+            <li><a href="#">Blog</a ></li>
+            <li><a href="#">Work With Us</a></li>
+            <li><a href="#">Investor Relations</a></li>
+            <li><a href="#" >Contact Us</a></li>
           </ul>
         </div>
-        <div class="footer-section services">
-          <h2
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            DSA Problem Solutions
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="about.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Who We Are</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Blog</a
-              >
-            </li>
-            <li>
-              <a
-                href="work.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Work With Us</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Investor Relations</a
-              >
-            </li>
-            <li>
-              <a
-                href="contact.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Contact Us</a
-              >
-            </li>
+        <div class="footer-section services" >
+          <h2> DSA Problem Solutions </h2>
+          <ul>
+            <li><a href="about.html">Who We Are</a></li>
+            <li><a href="#">Blog</a></li>
+            <li><a href="work.html">Work With Us</a></li>
+            <li><a href="#">Investor Relations</a></li>
+            <li><a href="contact.html">Contact Us</a></li>
           </ul>
         </div>
 
         <!-- Learn More Section -->
         <div class="footer-section services">
-          <h2
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Learn More
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="privacy.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Privacy Policy</a
-              >
-            </li>
-            <li>
-              <a
-                href="security.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Security</a
-              >
-            </li>
-            <li>
-              <a
-                href="terms.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Terms of Service</a
-              >
-            </li>
-            <li>
-              <a
-                href="contributors.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Our Contributors</a
-              >
-            </li>
+          <h2> Learn More</h2>
+          <ul>
+            <li><a href="privacy.html">Privacy Policy</a></li>
+            <li><a href="security.html">Security</a></li>
+            <li><a href="terms.html">Terms of Service</a></li>
+            <li><a href="contributors.html">Our Contributors</a></li>
           </ul>
         </div>
-      </div>
-
-      <!-- Stay Updated Section -->
-      <div
-        class="footer-section.newsletter"
-        style="
-          background: rgba(255, 255, 255, 0.2);
-          border-radius: 20px;
-          backdrop-filter: blur(10px);
-          padding: 10px;
-          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-          transition: transform 0.3s ease, box-shadow 0.3s ease;
-        "
-      >
-        <h3
-          style="
-            font-size: 18px;
-            margin-bottom: 20px;
-            text-align: center;
-            color: #ffffff;
-          "
-        >
-          Stay Updated
-        </h3>
-        <p
-          style="
-            text-align: center;
-            font-size: 14px;
-            line-height: 1.8;
-            margin-bottom: 20px;
-          "
-        >
-          Subscribe to our newsletter for the latest updates and tips on
-          mastering data structures and algorithms.
-        </p>
-        <form
-          action="#"
-          method="POST"
-          style="max-width: 600px; margin: 0 auto; display: flex; gap: 10px"
-        >
-          <input
-            type="email"
-            placeholder="Your Email Address"
-            required
-            style="
-              flex: 1;
-              padding: 10px;
-              font-size: 14px;
-              border: 1px solid #dee2e6;
-              border-radius: 4px;
-            "
-          />
-          <button
-            type="submit"
-            style="
-              padding: 10px 20px;
-              font-size: 14px;
-              background-color: #6c757d;
-              color: #ffffff;
-              border: none;
-              border-radius: 4px;
-              cursor: pointer;
-              transition: background-color 0.3s;
-            "
-          >
-            Subscribe
-          </button>
-        </form>
-      </div>
-
-      <!-- Social Links -->
-      <div
-        class="social-links"
-        style="text-align: center; margin-top: 40px; animation: fadeInUp 2.5s"
-      >
-        <ul
-          style="
-            list-style: none;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-          "
-        >
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#8cc152';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-facebook"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#8cc152';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-twitter"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#8cc152';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-linkedin"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#8cc152';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-youtube"></i
-            ></a>
-          </li>
-        </ul>
-      </div>
+    </div>
+    
+
+    <!-- Stay Updated Section -->
+    <div class="footer-section-newsletter">
+      <h3>Stay Updated</h3>
+      <p>Subscribe to our newsletter for the latest updates and tips on
+         mastering data structures and algorithms.
+      </p>
+      <form action="#" method="POST" >
+        <input type="email" placeholder="Your Email Address" required />
+        <button type="submit" >Subscribe</button>
+      </form>
+    </div>
 
-      <!-- Footer Bottom -->
-      <div
-        class="footer-bottom"
-        style="
-          text-align: center;
-          margin-top: 20px;
-          padding-top: 20px;
-          background: none;
-          color: #ffffff;
-          animation: fadeInUp 3s;
-        "
-      >
-        <p style="margin: 0; font-size: 14px">
-          &copy; 2025 DSA Problem Solutions. All rights reserved.
-        </p>
-      </div>
-    </footer>
+    <!-- Social Links -->
+    <div
+      class="social-links">
+      <ul>
+        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+      </ul>
+    </div>
 
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+    <!-- Footer Bottom -->
+    <div class="footer-bottom">
+      <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+    </div>
+  </footer>
+  
+  
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
       integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
       crossorigin="anonymous"
       referrerpolicy="no-referrer"