diff --git a/index.html b/index.html
index 4a3e857..31a3b0c 100644
--- a/index.html
+++ b/index.html
@@ -157,10 +157,177 @@ <h3>FOSS Hack Delhi-NCR</h3>
                 </div>
             </section>
 
-            <section id="team" class="section">
-                <h2>Our Team</h2>
-                <div class="team-grid">
-                    <!-- Team members will be dynamically added here -->
+
+            <section id="team">
+                <h2>Core Team</h2>
+                <div class="member-grid">
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Gautam Kumar">
+                        <h3>Ms. Eirty Telang Kapoor</h3>
+                        <p class="role">Convenor</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Vaibhav Pratap Singh">
+                        <h3>Vaibhav Pratap Singh</h3>
+                        <p class="role">President</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Suryansh Sharma">
+                        <h3>Suryansh Sharma</h3>
+                        <p class="role">Vice President</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Sachin Singh Adhikari">
+                        <h3>Sachin Singh Adhikari</h3>
+                        <p class="role">Secretary</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Ashwany Kumar Sharma">
+                        <h3>Ashwany Kumar Sharma</h3>
+                        <p class="role">Secretary</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Riyansh Varshney">
+                        <h3>Riyansh Varshney</h3>
+                        <p class="role">Event Coordinator</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Harshvardhan">
+                        <h3>Harshvardhan</h3>
+                        <p class="role">Event Coordinator</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Diksha Chauhan">
+                        <h3>Diksha Chauhan</h3>
+                        <p class="role">Event Coordinator</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Shresth Gupta">
+                        <h3>Shresth Gupta</h3>
+                        <p class="role">Event Coordinator</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Nishchal Anurag">
+                        <h3>Nishchal Anurag</h3>
+                        <p class="role">PR & Outreach</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Satyam Mishra">
+                        <h3>Satyam Mishra</h3>
+                        <p class="role">PR & Outreach</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Diti Vashisht">
+                        <h3>Diti Vashisht</h3>
+                        <p class="role">PR & Outreach</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Jayesh Bisht">
+                        <h3>Jayesh Bisht</h3>
+                        <p class="role">PR & Outreach</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Arul S Bharadwaj">
+                        <h3>Arul S Bharadwaj</h3>
+                        <p class="role">Graphic Designer</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Lovish Kukreja">
+                        <h3>Ayush Kukreja</h3>
+                        <p class="role">Graphic Designer</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Tiya Jain">
+                        <h3>Tiya Jain</h3>
+                        <p class="role">Social Media</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Vanya Raman">
+                        <h3>Vanya Raman</h3>
+                        <p class="role">Social Media</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Srijan Ranjan">
+                        <h3>Srijan Ranjan</h3>
+                        <p class="role">Social Media</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Vinay Chauhan">
+                        <h3>Vinay Chauhan</h3>
+                        <p class="role">Video Editor</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Gautam Kumar">
+                        <h3>Gautam Kumar</h3>
+                        <p class="role">Treasurer</p>
+                    </div>
+                </div>
+            </section>
+            
+            <section id="mentors">
+                <h2>Our Mentors</h2>
+                <div class="member-grid">
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Dr. Sarah Johnson">
+                        <h3>Inzemam ul haq</h3>
+                        <p class="role">Senior</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Prof. David Chen">
+                        <h3>Kilari teja</h3>
+                        <p class="role">Industry Mentor</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Prof. David Chen">
+                        <h3>Ravpreet Maini</h3>
+                        <p class="role">Cloud Expert</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Lisa Wong">
+                        <h3>Shristi Pandey</h3>
+                        <p class="role">Researcher</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Lisa Wong">
+                        <h3>Palak</h3>
+                        <p class="role">Graphics Designer</p>
+                    </div>
+                </div>
+            </section>
+            
+            <section id="active-members">
+                <h2>Active Members</h2>
+                <div class="member-grid">
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Alex Turner">
+                        <h3>Hilal Ahmad</h3>
+                        <p class="role">AI Guy</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Alex Turner">
+                        <h3>Tanmay</h3>
+                        <p class="role">Low Level</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Maria Garcia">
+                        <h3>Mayank Chaubey</h3>
+                        <p class="role">DSA Guy</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Tom Lee">
+                        <h3>TSR</h3>
+                        <p class="role">UI/UX Designer</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Sophia Chen">
+                        <h3>AK</h3>
+                        <p class="role">Friendly Spiderman</p>
+                    </div>
+                    <div class="member-card">
+                        <img src="/api/placeholder/150/150" alt="Sophia Chen">
+                        <h3>Avneesh</h3>
+                        <p class="role">Designer</p>
+                    </div>
                 </div>
             </section>
 
diff --git a/scripts.js b/scripts.js
index 008c058..79fef97 100644
--- a/scripts.js
+++ b/scripts.js
@@ -8,117 +8,85 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // Dark mode toggle
   darkModeToggle.addEventListener("click", () => {
-    body.classList.toggle("light-mode");
-    const isLightMode = body.classList.contains("light-mode");
-    localStorage.setItem("lightMode", isLightMode);
-    updateModeIcon(isLightMode);
+      body.classList.toggle("light-mode");
+      const isLightMode = body.classList.contains("light-mode");
+      localStorage.setItem("lightMode", isLightMode);
+      updateModeIcon(isLightMode);
   });
 
   const savedLightMode = localStorage.getItem("lightMode");
   if (savedLightMode === "true") {
-    body.classList.add("light-mode");
-    updateModeIcon(true);
+      body.classList.add("light-mode");
+      updateModeIcon(true);
   }
 
   function updateModeIcon(isLightMode) {
-    const icon = darkModeToggle.querySelector("i");
-    icon.className = isLightMode ? "fas fa-sun" : "fas fa-moon";
+      const icon = darkModeToggle.querySelector("i");
+      icon.className = isLightMode ? "fas fa-sun" : "fas fa-moon";
   }
 
   // Mobile navigation toggle
   navToggle.addEventListener("click", () => {
-    navLinks.classList.toggle("active");
+      navLinks.classList.toggle("active");
   });
 
   // Smooth scrolling
   document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
-    anchor.addEventListener("click", function (e) {
-      e.preventDefault();
-      document.querySelector(this.getAttribute("href")).scrollIntoView({
-        behavior: "smooth",
+      anchor.addEventListener("click", function (e) {
+          e.preventDefault();
+          document.querySelector(this.getAttribute("href")).scrollIntoView({
+              behavior: "smooth",
+          });
       });
-    });
   });
 
   // Glitch effect on main title
-  mainTitle.addEventListener("click", glitchEffect);
   mainTitle.addEventListener("mouseover", glitchEffect);
 
   function glitchEffect() {
-    const glitchText = "Welcome to the FOSS Club!";
-    const glitchChars = "!<>-_\\/[]{}—=+*^?#________";
-    let iterations = 0;
-
-    const interval = setInterval(() => {
-      mainTitle.textContent = glitchText
-        .split("")
-        .map((char, index) => {
-          if (index < iterations) {
-            return glitchText[index];
+      const glitchText = "Welcome to the FOSS Club!";
+      const glitchChars = "!<>-_\\/[]{}—=+*^?#________";
+      let iterations = 0;
+
+      const interval = setInterval(() => {
+          mainTitle.textContent = glitchText
+              .split("")
+              .map((char, index) => {
+                  if (index < iterations) {
+                      return glitchText[index];
+                  }
+                  return glitchChars[Math.floor(Math.random() * glitchChars.length)];
+              })
+              .join("");
+
+          if (iterations >= glitchText.length) {
+              clearInterval(interval);
+              mainTitle.textContent = glitchText;
           }
-          return glitchChars[Math.floor(Math.random() * glitchChars.length)];
-        })
-        .join("");
-
-      if (iterations >= glitchText.length) {
-        clearInterval(interval);
-        mainTitle.textContent = glitchText;
-      }
 
-      iterations += 1 / 3;
-    }, 30);
+          iterations += 1 / 3;
+      }, 30);
   }
 
   // Join form submission
-  joinForm.addEventListener("submit", (e) => {
-    e.preventDefault();
-    alert("Thanks for your interest! We'll get back to you soon.");
-    joinForm.reset();
-  });
+  if (joinForm) {
+      joinForm.addEventListener("submit", (e) => {
+          e.preventDefault();
+          alert("Thanks for your interest! We'll get back to you soon.");
+          joinForm.reset();
+      });
+  }
 
-  // Team members data
-  const teamMembers = [
-    { name: "John Doe", role: "President", image: "/api/placeholder/150/150" },
-    {
-      name: "Jane Smith",
-      role: "Vice President",
-      image: "/api/placeholder/150/150",
-    },
-    {
-      name: "Mike Johnson",
-      role: "Secretary",
-      image: "/api/placeholder/150/150",
-    },
-    {
-      name: "Emily Brown",
-      role: "Treasurer",
-      image: "/api/placeholder/150/150",
-    },
-  ];
+  // Intersection Observer for animations
+  const animateOnScroll = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+          if (entry.isIntersecting) {
+              entry.target.classList.add('animate');
+          }
+      });
+  }, { threshold: 0.1 });
 
-  // Populate team members
-  const teamGrid = document.querySelector(".team-grid");
-  teamMembers.forEach((member) => {
-    const memberElement = document.createElement("div");
-    memberElement.className = "team-member";
-    memberElement.innerHTML = `
-            <img src="${member.image}" alt="${member.name}">
-            <h3>${member.name}</h3>
-            <p>${member.role}</p>
-        `;
-    teamGrid.appendChild(memberElement);
+  document.querySelectorAll('.project-card, .event-item, .blog-post, .tool-card, .member-card').forEach(el => {
+      animateOnScroll.observe(el);
   });
-});
-
-const darkModeToggle = document.getElementById("darkModeToggle");
-const body = document.body;
-
-darkModeToggle.addEventListener("click", () => {
-  body.classList.toggle("dark-mode");
-  localStorage.setItem("darkMode", body.classList.contains("dark-mode"));
-});
-
-// Check for saved dark mode preference
-if (localStorage.getItem("darkMode") === "true") {
-  body.classList.add("dark-mode");
-}
+});
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 6edcac8..e6451ca 100644
--- a/styles.css
+++ b/styles.css
@@ -1,100 +1,111 @@
-/* FOSS Club Website - Dark Theme with All Elements */
-
+/* Base theme colors - Dark mode */
 :root {
-    --primary-color: #00ff00;
+    --primary-color: #00ff9d;
     --secondary-color: #1a1a1a;
     --background-color: #0a0a0a;
-    --text-color: #f0f0f0;
+    --text-color: #ffffff;
     --accent-color: #ff00ff;
-    --card-bg: rgba(255, 255, 255, 0.05);
-    --header-bg: rgba(0, 0, 0, 0.8);
-}
-
-body.light-mode {
-    --primary-color: #008000;
-    --secondary-color: #e5e5e5;
+    --card-bg: rgba(0, 255, 157, 0.05);
+    --header-bg: rgba(10, 10, 10, 0.9);
+    --border-color: rgba(0, 255, 157, 0.2);
+    --hover-color: rgba(0, 255, 157, 0.1);
+    --card-shadow: 0 4px 20px rgba(0, 255, 157, 0.2);
+  }
+  
+  /* Light mode colors with better contrast */
+  body.light-mode {
+    --primary-color: #008060;
+    --secondary-color: #f5f5f5;
     --background-color: #ffffff;
-    --text-color: #333333;
-    --accent-color: #ff00ff;
-    --card-bg: rgba(0, 0, 0, 0.05);
-    --header-bg: rgba(255, 255, 255, 0.8);
-}
-
-body {
-    font-family: "Inter", monospace;
+    --text-color: #1a1a1a;
+    --accent-color: #6b00b3;
+    --card-bg: rgba(0, 128, 96, 0.05);
+    --header-bg: rgba(255, 255, 255, 0.9);
+    --border-color: rgba(0, 128, 96, 0.2);
+    --hover-color: rgba(0, 128, 96, 0.1);
+    --card-shadow: 0 4px 20px rgba(0, 128, 96, 0.1);
+  }
+  
+  body {
+    font-family: "Inter", sans-serif;
     line-height: 1.6;
     background-color: var(--background-color);
     color: var(--text-color);
     margin: 0;
     padding: 0;
-    transition:
-        background-color 0.3s,
-        color 0.3s;
-}
-
-header {
+    transition: background-color 0.3s, color 0.3s;
+  }
+  
+
+  @keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+    100% { transform: translateY(0px); }
+  }
+  
+  @keyframes glow {
+    0% { box-shadow: 0 0 5px var(--primary-color); }
+    50% { box-shadow: 0 0 20px var(--primary-color); }
+    100% { box-shadow: 0 0 5px var(--primary-color); }
+  }
+  
+  @keyframes scanline {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(100%); }
+  }
+  
+  /* Enhanced header styles */
+  header {
     background-color: var(--header-bg);
     backdrop-filter: blur(10px);
     position: fixed;
     width: 100%;
     z-index: 1000;
-    box-shadow: 0 2px 10px rgba(0, 255, 0, 0.2);
-}
-
-nav {
+    border-bottom: 1px solid var(--border-color);
+    transition: all 0.3s ease;
+  }
+  
+  nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0.5rem 5%;
-}
-
-.logo a {
+  }
+  
+  .logo a {
     font-size: 1.2rem;
     font-weight: bold;
     color: var(--primary-color);
     text-decoration: none;
-}
-
-nav ul {
+  }
+  
+  nav ul {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
-}
-
-nav ul li {
+  }
+  
+  nav ul li {
     margin-left: 1rem;
-}
-
-nav ul li a {
+  }
+  
+  nav ul li a {
     color: var(--text-color);
     text-decoration: none;
     font-weight: 500;
-    transition: color 0.3s;
-    position: relative;
-    font-size: 0.9rem;
-}
-
-nav ul li a::after {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -5px;
-    left: 0;
-    background-color: var(--primary-color);
-    transition: width 0.3s;
-}
-
-nav ul li a:hover::after {
-    width: 100%;
-}
-
-main {
-    padding-top: 70px;
-}
-
-.hero {
+    transition: all 0.3s ease;
+    font-size: 0.95rem;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+  }
+  
+  nav ul li a:hover {
+    background-color: var(--hover-color);
+    transform: translateY(-2px);
+  }
+  
+  .hero {
     background: linear-gradient(
         135deg,
         var(--secondary-color),
@@ -144,339 +155,309 @@ main {
     font-size: 1.2rem;
     margin-bottom: 2rem;
 }
+  
 
-.cta-button {
-    background-color: var(--primary-color);
-    color: var(--background-color);
-    border: none;
-    padding: 0.8rem 1.6rem;
-    font-size: 1rem;
-    font-weight: bold;
-    cursor: pointer;
-    text-decoration: none;
-    border-radius: 5px;
-    transition:
-        background-color 0.3s,
-        transform 0.3s;
-    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
-}
-
-.cta-button:hover {
-    background-color: var(--accent-color);
-    transform: scale(1.05);
-}
-
-section {
-    padding: 4rem 5%;
-}
-
-section h2 {
-    font-size: 2.5rem;
-    margin-bottom: 2rem;
-    text-align: center;
-    color: var(--primary-color);
-}
-
-.project-grid,
-.event-list,
-.team-grid,
-.blog-grid,
-.tools-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-}
-
-.project-card,
-.event-item,
-.blog-post,
-.tool-card {
-    background-color: var(--card-bg);
-    border-radius: 10px;
-    padding: 1.5rem;
-    box-shadow: 0 4px 6px rgba(0, 255, 0, 0.1);
-    transition:
-        transform 0.3s,
-        box-shadow 0.3s;
-    border: 1px solid rgba(0, 255, 0, 0.2);
-}
-
-.project-card:hover,
-.event-item:hover,
-.blog-post:hover,
-.tool-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 6px 12px rgba(0, 255, 0, 0.2);
+body.light-mode .hero h1 {
+    text-shadow: 0 0 10px rgba(0, 128, 96, 0.3);
 }
 
-.project-card h3,
-.event-item h3,
-.blog-post h3,
-.tool-card h3 {
+  /* Enhanced card styles */
+  .project-card, .event-item, .blog-post, .tool-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 2rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    animation: float 6s ease-in-out infinite;
+  }
+  
+  .project-card:hover, .event-item:hover, .blog-post:hover, .tool-card:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: var(--card-shadow);
+  }
+  
+  .project-card h3, .event-item h3, .blog-post h3, .tool-card h3 {
     font-size: 1.5rem;
     margin-bottom: 1rem;
     color: var(--primary-color);
-}
-
-.github-link,
-.read-more {
+  }
+  
+  .github-link, .read-more {
     display: inline-block;
     margin-top: 1rem;
     color: var(--primary-color);
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s;
-}
-
-.github-link:hover,
-.read-more:hover {
+  }
+  
+  .github-link:hover, .read-more:hover {
     color: var(--accent-color);
-}
-
-.team-grid {
+  }
+  
+  /* Sections */
+  section {
+    padding: 4rem 5%;
+  }
+  
+  section h2 {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    color: var(--primary-color);
+  }
+  
+  .project-grid, .event-list, .team-grid, .blog-grid, .tools-grid, .member-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
-    margin-top: 2rem;
-}
-
-.team-member {
+  }
+  
+  /* New sections for mentors and active members */
+  .member-grid {
+    padding: 2rem 0;
+  }
+  
+  .member-card {
+    background: var(--card-bg);
+    border-radius: 12px;
+    padding: 2rem;
     text-align: center;
-}
-
-.team-member img {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    object-fit: cover;
+    border: 1px solid var(--border-color);
+    transition: all 0.3s ease;
+  }
+  
+  .member-card img {
+    width: 120px;
+    height: 120px;
+    border-radius: 60px;
+    margin-bottom: 1rem;
     border: 3px solid var(--primary-color);
-    transition: transform 0.3s;
-}
-
-.team-member img:hover {
+    transition: all 0.3s ease;
+  }
+  
+  .member-card:hover img {
     transform: scale(1.1);
-}
-
-.team-member h3 {
-    margin-top: 1rem;
-    font-size: 1.2rem;
+    box-shadow: 0 0 20px var(--primary-color);
+  }
+  
+  .member-card h3 {
     color: var(--primary-color);
-}
-
-.team-member p {
+    margin-bottom: 0.5rem;
+  }
+  
+  .member-card .role {
     font-size: 0.9rem;
     color: var(--text-color);
-}
-
-#join-form {
-    max-width: 500px;
-    margin: 0 auto;
-}
-
-#join-form input,
-#join-form textarea {
-    width: 100%;
-    padding: 0.8rem;
-    margin-bottom: 1rem;
-    background-color: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(0, 255, 0, 0.2);
-    border-radius: 5px;
-    color: var(--text-color);
-    font-family: "Inter", monospace;
-}
-
-#join-form input:focus,
-#join-form textarea:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
-}
-
-#join-form button {
-    background-color: var(--primary-color);
+    opacity: 0.8;
+  }
+  
+/* Enhanced buttons */
+.cta-button, button[type="submit"] {
+    background: var(--primary-color);
     color: var(--background-color);
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
     border: none;
-    padding: 0.8rem 1.6rem;
-    font-size: 1rem;
-    font-weight: bold;
     cursor: pointer;
-    border-radius: 5px;
-    transition:
-        background-color 0.3s,
-        transform 0.3s;
-    font-family: "Inter", monospace;
-}
-
-#join-form button:hover {
-    background-color: var(--accent-color);
-    transform: scale(1.05);
-}
-
-.resource-list {
-    list-style: none;
-    padding: 0;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1rem;
-}
-
-.resource-list li a {
-    display: block;
-    background-color: var(--card-bg);
-    padding: 1rem;
-    border-radius: 5px;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    font-size: 1rem;
     text-decoration: none;
-    color: var(--text-color);
-    transition:
-        background-color 0.3s,
-        transform 0.3s;
-    border: 1px solid rgba(0, 255, 0, 0.2);
-}
-
-.resource-list li a:hover {
-    background-color: rgba(0, 255, 0, 0.1);
-    transform: translateY(-3px);
-}
-
-.faq-list {
-    max-width: 800px;
-    margin: 0 auto;
-}
-
-.faq-list details {
-    background-color: var(--card-bg);
-    margin-bottom: 1rem;
-    padding: 1rem;
-    border-radius: 5px;
-    border: 1px solid rgba(0, 255, 0, 0.2);
+    display: inline-block;
+    box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
 }
 
-.faq-list summary {
-    font-weight: bold;
-    cursor: pointer;
-    color: var(--primary-color);
+.cta-button:hover, button[type="submit"]:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0 30px rgba(0, 255, 157, 0.5);
+    background: #00cc7d; /* Slightly darker shade of the primary color */
 }
 
-.faq-list p {
-    margin-top: 1rem;
+.cta-button::after, button[type="submit"]::after {
+    display: none;
 }
-
-footer {
+  /* Footer styles */
+  footer {
     background-color: var(--header-bg);
     color: var(--text-color);
     padding: 2rem 5%;
     text-align: center;
-}
-
-.footer-content {
+  }
+  
+  .footer-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
-}
-
-.social-links a {
+  }
+  
+  .social-links a {
     color: var(--primary-color);
-    margin: 0 0.5rem;
+    margin: 0 1rem;
     font-size: 1.5rem;
-    transition: color 0.3s;
-}
-
-.social-links a:hover {
+    transition: all 0.3s ease;
+    position: relative;
+    display: inline-block;
+  }
+  
+  .social-links a:hover {
+    transform: translateY(-3px) scale(1.1);
     color: var(--accent-color);
-}
-
-footer ul {
+  }
+  
+  .social-links a::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    bottom: -5px;
+    left: 0;
+    background-color: var(--primary-color);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+  }
+  
+  .social-links a:hover::after {
+    transform: scaleX(1);
+  }
+  
+  footer ul {
     list-style: none;
     padding: 0;
     display: flex;
     justify-content: center;
     margin-top: 1rem;
-}
-
-footer ul li {
+  }
+  
+  footer ul li {
     margin: 0 1rem;
-}
-
-footer ul li a {
+  }
+  
+  footer ul li a {
     color: var(--text-color);
     text-decoration: none;
     transition: color 0.3s;
-}
-
-footer ul li a:hover {
+  }
+  
+  footer ul li a:hover {
     color: var(--primary-color);
-}
-
-#darkModeToggle {
+  }
+  
+  /* Dark mode toggle */
+  #darkModeToggle {
     background: none;
     border: none;
     color: var(--text-color);
     font-size: 1.2rem;
     cursor: pointer;
     transition: color 0.3s;
-}
-
-#darkModeToggle:hover {
+  }
+  
+  #darkModeToggle:hover {
     color: var(--primary-color);
-}
-
-.nav-toggle {
+  }
+  
+  /* Mobile navigation */
+  .nav-toggle {
     display: none;
     font-size: 1.5rem;
     cursor: pointer;
     color: var(--text-color);
-}
-
-@media (max-width: 768px) {
+  }
+  
+  /* Responsive styles */
+  @media (max-width: 768px) {
+    .hero h1 {
+      font-size: clamp(2rem, 4vw, 3rem);
+    }
+  
+    .member-grid, .project-grid, .event-list, .team-grid, .blog-grid, .tools-grid {
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    }
+  
     .nav-links {
-        display: none;
-        flex-direction: column;
-        position: absolute;
-        top: 70px;
-        left: 0;
-        width: 100%;
-        background-color: var(--header-bg);
-        padding: 1rem;
+      display: none;
+      flex-direction: column;
+      position: absolute;
+      top: 70px;
+      left: 0;
+      width: 100%;
+      background: var(--header-bg);
+      backdrop-filter: blur(10px);
     }
-
+  
     .nav-links.active {
-        display: flex;
+      display: flex;
     }
-
+  
     .nav-links li {
-        margin: 0.5rem 0;
+      margin: 0.5rem 0;
     }
-
+  
     .nav-toggle {
-        display: block;
-    }
-
-    .hero h1 {
-        font-size: 2.5rem;
-    }
-
-    .hero p {
-        font-size: 1rem;
-    }
-
-    section {
-        padding: 2rem 5%;
+      display: block;
     }
-
-    .project-grid,
-    .event-list,
-    .team-grid,
-    .blog-grid,
-    .tools-grid {
-        grid-template-columns: 1fr;
-    }
-
+  
     .footer-content {
-        flex-direction: column;
+      flex-direction: column;
     }
-
+  
     .social-links {
-        margin-bottom: 0.4rem;
+      margin-bottom: 1rem;
     }
-}
+  }
+  
+  /* FAQ section */
+  .faq-list {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  
+  .faq-list details {
+    background-color: var(--card-bg);
+    margin-bottom: 1rem;
+    padding: 1rem;
+    border-radius: 5px;
+    border: 1px solid var(--border-color);
+  }
+  
+  .faq-list summary {
+    font-weight: bold;
+    cursor: pointer;
+    color: var(--primary-color);
+  }
+  
+  .faq-list p {
+    margin-top: 1rem;
+  }
+  
+  /* Resources section */
+  .resource-list {
+    list-style: none;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+  }
+  
+  .resource-list li a {
+    display: block;
+    background-color: var(--card-bg);
+    padding: 1rem;
+    border-radius: 5px;
+    text-decoration: none;
+    color: var(--text-color);
+    transition: all 0.3s ease;
+    border: 1px solid var(--border-color);
+  }
+  
+  .resource-list li a:hover {
+    background-color: var(--hover-color);
+    transform: translateY(-3px);
+  }
\ No newline at end of file