diff --git a/index.html b/index.html
index 6865ad4..3cf5594 100644
--- a/index.html
+++ b/index.html
@@ -1,334 +1,343 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Project Vault</title>
-    <link rel="icon" href="assets/favicon_project-vault.png" type="image/png" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
-    />
-    <link rel="stylesheet" href="./style.css" />
-  </head>
-  <body>
-<!-- Mobile Menu -->
-
-    <div class="mobile-menu" id="mobileMenu">
-      <div class="mobile-menu-header">
-        <div class="nav-logo">Project Vault</div>
-        <div class="mobile-menu-close" id="mobileMenuClose">&times;</div>
-      </div>
-      <div class="mobile-menu-items">
-        <a href="./index.html" class="mobile-menu-link"
-          ><i class="fa-solid fa-house"></i> Home</a
-        >
-        <a href="./assets/html_files/aboutus.html" class="mobile-menu-link"
-          ><i class="fa-solid fa-circle-info"></i> About Us</a
-        >
-        <div class="mobile-submenu">
-          <div class="mobile-menu-link submenu-toggle">
-            <i class="fa-solid fa-icons"></i> Components
-            <i class="fa-solid fa-chevron-down arrow-icon"></i>
-          </div>
-
-          <div class="submenu-items">
-            <a href="./assets/html_files/website.html" class="mobile-menu-link"
-              >Webfolio</a
-            >
-            <a href="./assets/html_files/games.html" class="mobile-menu-link"
-              >Games</a
-            >
-            <a href="./assets/html_files/ml.html" class="mobile-menu-link"
-              >ML Projects</a
-            >
-          </div>
-        </div>
-        <a href="./faq.html" class="mobile-menu-link"
-          ><i class="fa-solid fa-question-circle"></i> FAQ</a
-        >
-        <a href="./assets/html_files/discussion.html" class="mobile-menu-link"
-          ><i class="fa-solid fa-comment"></i> Forum</a
-        >
-        <a href="./assets/html_files/contact.html" class="mobile-menu-link"
-          ><i class="fa-solid fa-phone"></i> Contact Us</a
-        >
-      </div>
-    </div>
-
-    <!-- Desktop Navigation -->
-
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Project Vault - Student Project Repository</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- Navigation -->
     <nav>
-      <div class="nav-container">
-        <div class="nav-logo">Project Vault</div>
-        <div class="mobile-menu-toggle" id="mobileMenuToggle">
-          <span></span>
-          <span></span>
-          <span></span>
+        <div class="nav-container">
+            <div class="nav-logo">Project Vault</div>
+            <div class="nav-right">
+                <div class="navbar">
+                    <a href="#home" class="nav-link">Home</a>
+                    <a href="#about" class="nav-link">About</a>
+                    <div class="dropdown">
+                        <a href="#projects" class="nav-link dropdown-toggle">Browse Projects <i class="fas fa-chevron-down"></i></a>
+                        <div class="dropdown-content">
+                            <a href="#websites"><i class="fas fa-globe"></i> Websites</a>
+                            <a href="#games"><i class="fas fa-gamepad"></i> Games</a>
+                            <a href="#ml"><i class="fas fa-robot"></i> ML Projects</a>
+                        </div>
+                    </div>
+                    <a href="#upload" class="nav-link btn-upload">Upload Project</a>
+                    <a href="#contact" class="nav-link">Contact</a>
+                </div>
+            </div>
+            <!-- Mobile Menu Toggle -->
+            <div class="mobile-menu-toggle" id="mobileMenuToggle">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
         </div>
-        <div class="nav-right">
-<a href="./index.html" class="nav-link" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25)">
-  <i class="fa-solid fa-house"></i> Home
-</a>
-
-<a href="./assets/html_files/aboutus.html" class="nav-link" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25)">
-  <i class="fa-solid fa-circle-info"></i> About Us
-</a>
-
-<div class="dropdown">
-  <div class="dropdown-toggle nav-link" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25)">
-    <i class="fa-solid fa-icons"></i> Components ▾
-  </div>
-</div>
 
-            <div class="dropdown-content">
-              <a href="./assets/html_files/website.html">Webfolio</a>
-              <a href="./assets/html_files/games.html">Games</a>
-              <a href="./assets/html_files/ml.html">ML Projects</a>
+        <!-- Mobile Menu -->
+        <div class="mobile-menu" id="mobileMenu">
+            <div class="mobile-menu-header">
+                <div class="nav-logo">Project Vault</div>
+                <div class="mobile-menu-close" id="mobileMenuClose">&times;</div>
+            </div>
+            <div class="mobile-menu-items">
+                <a href="#home" class="mobile-menu-link">Home</a>
+                <a href="#about" class="mobile-menu-link">About</a>
+                <div class="mobile-submenu">
+                    <div class="submenu-toggle">
+                        <span>Browse Projects</span>
+                        <i class="fas fa-chevron-down arrow-icon"></i>
+                    </div>
+                    <div class="submenu-items">
+                        <a href="#websites" class="mobile-menu-link">Websites</a>
+                        <a href="#games" class="mobile-menu-link">Games</a>
+                        <a href="#ml" class="mobile-menu-link">ML Projects</a>
+                    </div>
+                </div>
+                <a href="#upload" class="mobile-menu-link">Upload Project</a>
+                <a href="#contact" class="mobile-menu-link">Contact</a>
             </div>
-          </div>
-<a href="./faq.html" class="nav-link" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25)">
-  <i class="fa-solid fa-question-circle"></i> FAQ
-</a>
-
-<a href="./assets/html_files/discussion.html" class="nav-link" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25)">
-  <i class="fa-solid fa-comment"></i> Forum
-</a>
-
-<a href="./assets/html_files/contact.html" class="nav-link" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25)">
-  <i class="fa-solid fa-phone"></i> Contact Us
-</a>
-
         </div>
-      </div>
     </nav>
 
-   <header>
-  <div class="header-text">
-    <h1>Project Vault</h1>
-    <p>
-      Discover amazing projects across web development, gaming, and machine learning.
-    </p>
-    <p style="margin-top: 1rem; font-size: 1.1rem; opacity: 0.92;">
-      Whether you're a beginner looking for inspiration or a developer seeking reference projects, Project Vault is your one-stop solution.
-    </p>
-  </div>
-</header>
+    <!-- Header -->
+    <header id="home">
+        <div class="header-content">
+            <h1>Project Vault</h1>
+            <p class="hero-description">
+                Discover amazing projects across web development, gaming, and machine learning.<br>
+                Whether you're a beginner looking for inspiration or a developer seeking reference projects, Project Vault is your one-stop solution.
+            </p>
+            <div class="header-buttons">
+                <a href="#projects" class="btn btn-primary">Browse Projects</a>
+                <a href="#upload" class="btn btn-secondary">Upload Your Project</a>
+            </div>
+        </div>
+    </header>
 
+    <!-- Main Content -->
     <main>
-      <div class="category-container">
-        <a class="category-card fade-in" href="#" style="animation-delay: 0.1s">
-          <h2>🌐 Static Websites</h2>
-          <p>
-            Explore beautiful, responsive websites built with modern web
-            technologies and best practices
-          </p>
-        </a>
-        <a class="category-card fade-in" href="#" style="animation-delay: 0.2s">
-          <h2>🎮 Games</h2>
-          <p>
-            Interactive games and entertainment projects showcasing creative
-            programming and user experience
-          </p>
-        </a>
-        <a class="category-card fade-in" href="#" style="animation-delay: 0.3s">
-          <h2>🤖 ML Projects</h2>
-          <p>
-            Cutting-edge machine learning applications and AI-powered solutions
-            for real-world problems
-          </p>
-        </a>
-      </div>
-
-      <div class="add-project-section send-message">
-        <div class="add-project-card">
-          <h2>Want to add your project?</h2>
-          <p>
-            If you have an amazing project that you would like to showcase,
-            please reach out to us!
-          </p>
-          <form
-            action="https://formsubmit.co/pavitraagopi@gmail.com"
-            method="POST"
-            class="add-project-form"
-          >
-            <div class="form-group">
-              <input
-                type="text"
-                name="projectName"
-                placeholder="Project Name"
-                required
-              />
-            </div>
-            <div class="form-group">
-              <input
-                type="url"
-                name="githubLink"
-                placeholder="GitHub Link"
-                required
-              />
+        <!-- About Section -->
+        <section id="about" class="section">
+            <div class="container">
+                <h2 class="section-title">About Project Vault</h2>
+                <div class="about-content">
+                    <div class="about-text">
+                        <p class="lead">A collaborative platform where students showcase their innovative projects and learn from each other.</p>
+                        <p>Project Vault serves as a comprehensive repository for student projects across various domains. From web applications to machine learning models, our platform enables students to share their work, get feedback, and discover inspiration from peer projects.</p>
+                        <div class="features">
+                            <div class="feature-item">
+                                <i class="fas fa-upload"></i>
+                                <div>
+                                    <h4>Upload Projects</h4>
+                                    <p>Share your work with the community</p>
+                                </div>
+                            </div>
+                            <div class="feature-item">
+                                <i class="fas fa-search"></i>
+                                <div>
+                                    <h4>Discover & Learn</h4>
+                                    <p>Find inspiration from peer projects</p>
+                                </div>
+                            </div>
+                            <div class="feature-item">
+                                <i class="fas fa-comments"></i>
+                                <div>
+                                    <h4>Get Feedback</h4>
+                                    <p>Receive constructive feedback from community</p>
+                                </div>
+                            </div>
+                            <div class="feature-item">
+                                <i class="fas fa-star"></i>
+                                <div>
+                                    <h4>Rate & Review</h4>
+                                    <p>Help others discover quality projects</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="form-group">
-              <input
-                type="url"
-                name="liveLink"
-                placeholder="Live Project Link"
-              />
-            </div>
-            <div class="form-group">
-              <input
-                type="text"
-                name="techStack"
-                placeholder="Tech Stack (e.g. React, Python)"
-                required
-              />
-            </div>
-            <div class="form-group">
-              <textarea
-                name="description"
-                placeholder="Project Description"
-                rows="3"
-                required
-              ></textarea>
-            </div>
-            <button type="submit" class="add-project-btn">Submit</button>
-          </form>
+        </section>
 
-          <!-- Action Buttons for Toasts -->
-          <div class="action-buttons">
-            <button class="action-btn" onclick="showToast('project')">New Project</button>
-            <button class="action-btn" onclick="showToast('comment')">New Comment</button>
-            <button class="action-btn" onclick="showToast('favorite')">Favorite / Like</button>
-          </div>
+        <!-- Projects Section -->
+        <section id="projects" class="section">
+            <div class="container">
+                <h2 class="section-title">Browse Project Categories</h2>
+                <div class="category-container">
+                    <!-- Static Websites Card -->
+                    <div class="category-card">
+                        <div class="card-icon">
+                            <i class="fas fa-globe"></i>
+                        </div>
+                        <h3>
+                          <i class="fa-solid fa-globe"></i>
+                           Static Websites</h3>
+                        <p>Explore beautiful, responsive websites built with modern web technologies and best practices</p>
+                        <div class="project-stats">
+                            <span><i class="fas fa-project-diagram"></i> 150+ Projects</span>
+                        </div>
+                        <div class="card-footer">
+                            <a href="#websites" class="btn btn-outline">Browse Websites</a>
+                        </div>
+                    </div>
 
-        
-          <!-- Toast container (right-top corner) -->
-          <div id="toast-container" class="toast-container"></div>
+                    <!-- Games Card -->
+                    <div class="category-card">
+                        <div class="card-icon">
+                            <i class="fas fa-gamepad"></i>
+                        </div>
+                        <h3><i class="fa-solid fa-gamepad"></i>
+                           Games</h3>
+                        <p>Interactive games and entertainment projects showcasing creative programming and user experience</p>
+                        <div class="project-stats">
+                            <span><i class="fas fa-project-diagram"></i> 85+ Projects</span>
+                        </div>
+                        <div class="card-footer">
+                            <a href="#games" class="btn btn-outline">Browse Games</a>
+                        </div>
+                    </div>
 
-         </div> 
-        </div>
-      </div>
-    </main>
+                    <!-- ML Projects Card -->
+                    <div class="category-card">
+                        <div class="card-icon">
+                            <i class="fas fa-robot"></i>
+                        </div>
+                        <h3>
+                          <i class="fa-solid fa-robot"></i>
+                           ML Projects</h3>
+                        <p>Cutting-edge machine learning applications and AI-powered solutions for real-world problems</p>
+                        <div class="project-stats">
+                            <span><i class="fas fa-project-diagram"></i> 120+ Projects</span>
+                        </div>
+                        <div class="card-footer">
+                            <a href="#ml" class="btn btn-outline">Browse ML Projects</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
 
-    <footer>
-      <div class="footer-container">
-        <div class="footer-section company-info">
-          <h1 class="heading">Project Vault</h1>
-          <p>
-            Project Vault is a curated collection of diverse projects ranging
-            from stunning websites and interactive games to intelligent machine
-            learning applications.
-          </p>
-          <div class="social">
-            <a
-              class="message"
-              href="mailto:pavitraagopi@gmail.com"
-              target="_blank"
-              aria-label="Email"
-            >
-              <i class="fa-solid fa-envelope"></i>
-            </a>
-            <a
-              class="linkedin"
-              href="https://www.linkedin.com/in/pavitraa-g/"
-              target="_blank"
-              aria-label="LinkedIn"
-            >
-              <i class="fab fa-linkedin"></i>
-            </a>
-            <a
-              class="github"
-              href="https://www.github.com/pavitraag"
-              target="_blank"
-              aria-label="GitHub"
-            >
-              <i class="fab fa-github"></i>
-            </a>
-          </div>
-        </div>
+        <!-- Upload Project Section -->
+        <section id="upload" class="section upload-section">
+            <div class="container">
+                <h2 class="section-title">Upload Your Project</h2>
+                <div class="upload-content">
+                    <div class="upload-info">
+                        <h3>Share Your Work with the Community</h3>
+                        <p>Ready to showcase your project? Upload it to Project Vault and let other students discover, learn from, and get inspired by your work.</p>
+                        <div class="upload-benefits">
+                            <div class="benefit-item">
+                                <i class="fas fa-eye"></i>
+                                <span>Get visibility for your work</span>
+                            </div>
+                            <div class="benefit-item">
+                                <i class="fas fa-users"></i>
+                                <span>Connect with fellow developers</span>
+                            </div>
+                            <div class="benefit-item">
+                                <i class="fas fa-trophy"></i>
+                                <span>Build your project portfolio</span>
+                            </div>
+                        </div>
+                    </div>
+                    <form id="upload-form" class="upload-form">
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label for="project-title">Project Title</label>
+                                <input type="text" id="project-title" name="title" placeholder="Enter your project title" required>
+                            </div>
+                            <div class="form-group">
+                                <label for="project-category">Category</label>
+                                <select id="project-category" name="category" required>
+                                    <option value="">Select Category</option>
+                                    <option value="website">Website</option>
+                                    <option value="game">Game</option>
+                                    <option value="ml">Machine Learning</option>
+                                    <option value="mobile">Mobile App</option>
+                                    <option value="other">Other</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="project-description">Project Description</label>
+                            <textarea id="project-description" name="description" placeholder="Describe your project, technologies used, and key features..." rows="4" required></textarea>
+                        </div>
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label for="github-link">GitHub Repository</label>
+                                <input type="url" id="github-link" name="github" placeholder="https://github.com/username/project">
+                            </div>
+                            <div class="form-group">
+                                <label for="live-demo">Live Demo URL</label>
+                                <input type="url" id="live-demo" name="demo" placeholder="https://yourproject.com">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="technologies">Technologies Used</label>
+                            <input type="text" id="technologies" name="technologies" placeholder="HTML, CSS, JavaScript, Python, React..." required>
+                        </div>
+                        <button type="submit" class="btn btn-primary">
+                            <span class="button-text"><i class="fas fa-upload"></i> Upload Project</span>
+                            <span class="loading" style="display: none;">
+                                <i class="fas fa-spinner fa-spin"></i> Uploading...
+                            </span>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </section>
 
-        <div class="footer-section quick-links">
-          <h1 class="heading">Quick Links</h1>
-          <ul class="footer-ul">
-            <li>
-              <a href="./index.html"><i class="fa-solid fa-house"></i> Home</a>
-            </li>
-            <li>
-              <a href="./assets/html_files/aboutus.html"
-                ><i class="fa-solid fa-circle-info"></i> About</a
-              >
-            </li>
-            <li>
-              <a href="#"><i class="fa-solid fa-icons"></i> Components</a>
-            </li>
-            <li>
-              <a href="./faq.html"
-                ><i class="fa-solid fa-question-circle"></i> FAQ</a
-              >
-            </li>
-            <li>
-              <a href="#"><i class="fa-solid fa-phone"></i> Contact</a>
-            </li>
-          </ul>
-        </div>
+        <!-- Contact Section -->
+        <section id="contact" class="section">
+            <div class="container">
+                <h2 class="section-title">Get In Touch</h2>
+                <div class="contact-content">
+                    <div class="contact-info">
+                        <h3>Have Questions?</h3>
+                        <p>Need help with uploading your project or have suggestions for improving Project Vault? We'd love to hear from you!</p>
+                        <div class="contact-items">
+                            <div class="contact-item">
+                                <i class="fas fa-envelope"></i>
+                                <span>support@projectvault.com</span>
+                            </div>
+                            <div class="contact-item">
+                                <i class="fas fa-question-circle"></i>
+                                <span>FAQ & Help Center</span>
+                            </div>
+                            <div class="contact-item">
+                                <i class="fab fa-discord"></i>
+                                <span>Join our Discord Community</span>
+                            </div>
+                        </div>
+                    </div>
+                    <form id="contact-form" class="contact-form">
+                        <div class="form-group">
+                            <input type="text" id="name" name="name" placeholder="Your Name" required>
+                        </div>
+                        <div class="form-group">
+                            <input type="email" id="email" name="email" placeholder="Your Email" required>
+                        </div>
+                        <div class="form-group">
+                            <textarea id="message" name="message" placeholder="Your Message" rows="5" required></textarea>
+                        </div>
+                        <button type="submit" class="btn btn-primary">
+                            <span class="button-text">Send Message</span>
+                            <span class="loading" style="display: none;">
+                                <i class="fas fa-spinner fa-spin"></i>
+                            </span>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </section>
+    </main>
 
-        <div class="footer-section send-message">
-          <h1 class="heading">Keep In Touch</h1>
-          <form
-            id="contact-form"
-            name="Project Vault Contact"
-            autocomplete="off"
-          >
-            <div class="form-group group1">
-              <input
-                type="text"
-                id="name"
-                name="name"
-                placeholder="Your name"
-                autocomplete="name"
-                required
-              />
-              <input
-                type="email"
-                id="email"
-                name="email"
-                placeholder="Your email"
-                autocomplete="email"
-                required
-              />
+    <!-- Footer -->
+    <footer>
+        <div class="footer-container">
+            <div class="footer-section">
+                <h3>Project Vault</h3>
+                <p>Empowering students to share, discover, and learn from innovative projects across various domains of technology.</p>
+                <div class="social-links">
+                    <a href="#" aria-label="Discord"><i class="fab fa-discord"></i></a>
+                    <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
+                    <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                </div>
+            </div>
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <ul class="footer-links">
+                    <li><a href="#home">Home</a></li>
+                    <li><a href="#projects">Browse Projects</a></li>
+                    <li><a href="#upload">Upload Project</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                </ul>
             </div>
-            <div class="form-group">
-              <textarea
-                id="message"
-                name="message"
-                placeholder="Your message"
-                required
-              ></textarea>
-              <button type="submit">
-                <span class="button-text">SEND MESSAGE</span>
-                <div class="loading" style="display: none"></div>
-              </button>
-              <p style="color: white; margin-top: 10px">
-                We do not store your data. It will only be used to contact you
-                regarding your message.
-              </p>
+            <div class="footer-section">
+                <h3>Categories</h3>
+                <ul class="footer-links">
+                    <li><a href="#websites">Web Development</a></li>
+                    <li><a href="#games">Games</a></li>
+                    <li><a href="#ml">Machine Learning</a></li>
+                    <li><a href="#mobile">Mobile Apps</a></li>
+                </ul>
             </div>
-          </form>
         </div>
-      </div>
-
-      <div class="copyright">
-        Created By Pavitraa ❤️ | © <span id="currentYear">2024</span> All Rights
-        Reserved
-      </div>
+        <div class="footer-bottom">
+            <p>&copy; <span id="currentYear">2025</span> Project Vault. Built by students, for students.</p>
+        </div>
     </footer>
 
-    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
+    <!-- Toast Container -->
+    <div id="toast-container"></div>
 
+    <!-- Scripts -->
     <script src="script.js"></script>
-  </body>
+</body>
 </html>
diff --git a/script.js b/script.js
index cb58f1a..d9317ad 100644
--- a/script.js
+++ b/script.js
@@ -1,224 +1,570 @@
-document.addEventListener("DOMContentLoaded", () => {
-  // --- Mobile Menu Functionality ---
-  const mobileMenuToggle = document.getElementById("mobileMenuToggle");
-  const mobileMenu = document.getElementById("mobileMenu");
-  const mobileMenuClose = document.getElementById("mobileMenuClose");
-  const mobileMenuLinks = document.querySelectorAll(".mobile-menu a");
-  const submenuToggle = document.querySelector(".submenu-toggle");
-  const mobileSubmenu = document.querySelector(".mobile-submenu");
-
-  function toggleMobileMenu() {
-    mobileMenu.classList.toggle("active");
-    const spans = mobileMenuToggle.querySelectorAll("span");
-    if (mobileMenu.classList.contains("active")) {
-      spans[0].style.transform = "rotate(45deg) translate(5px, 5px)";
-      spans[1].style.opacity = "0";
-      spans[2].style.transform = "rotate(-45deg) translate(7px, -6px)";
-    } else {
-      spans[0].style.transform = "none";
-      spans[1].style.opacity = "1";
-      spans[2].style.transform = "none";
-    }
-  }
-
-  function closeMobileMenu() {
-    mobileMenu.classList.remove("active");
-    const spans = mobileMenuToggle.querySelectorAll("span");
-    spans[0].style.transform = "none";
-    spans[1].style.opacity = "1";
-    spans[2].style.transform = "none";
-  }
-  function closeMobileMenu() {
-    mobileMenu.classList.remove("active");
-    const spans = mobileMenuToggle.querySelectorAll("span");
-    spans[0].style.transform = "none";
-    spans[1].style.opacity = "1";
-    spans[2].style.transform = "none";
-  }
-  if (mobileMenuToggle) {
-    mobileMenuToggle.addEventListener("click", toggleMobileMenu);
-  }
-
-  if (mobileMenuClose) {
-    mobileMenuClose.addEventListener("click", closeMobileMenu);
-  }
-
-  mobileMenuLinks.forEach((link) => {
-    link.addEventListener("click", closeMobileMenu);
-  });
-
-  if (submenuToggle && mobileSubmenu) {
-    submenuToggle.addEventListener("click", (e) => {
-      e.preventDefault();
-      mobileSubmenu.classList.toggle("open");
-    });
-  }
-
-  document.addEventListener("click", (e) => {
-    if (
-      mobileMenu &&
-      mobileMenu.classList.contains("active") &&
-      !mobileMenu.contains(e.target) &&
-      !mobileMenuToggle.contains(e.target)
-    ) {
-      closeMobileMenu();
-    }
-  });
-
-  if (mobileMenu) {
-    mobileMenu.addEventListener("click", (e) => {
-      e.stopPropagation();
-    });
-  }
-
-  // --- Contact Form Handling ---
-  const contactForm = document.getElementById("contact-form");
-  if (contactForm) {
-    contactForm.addEventListener("submit", function (e) {
-      e.preventDefault();
-      if (!this.checkValidity()) {
-        this.reportValidity();
-        return;
-      }
-      const button = this.querySelector('button[type="submit"]');
-      const buttonText = button.querySelector(".button-text");
-      const loading = button.querySelector(".loading");
-
-      buttonText.style.display = "none";
-      loading.style.display = "inline-block";
-      button.disabled = true;
-
-      setTimeout(() => {
-        this.reset();
-        buttonText.style.display = "inline";
-        loading.style.display = "none";
-        button.disabled = false;
-        alert("Thank you for your message! We'll get back to you soon.");
-      }, 2000);
-    });
-  }
-
-  // --- Snake Cursor Effect ---
-  const NUM_TRAILS = 30;
-  const snakeDots = [];
-  for (let i = 0; i < NUM_TRAILS; i++) {
-    const dot = document.createElement("div");
-    dot.classList.add("snake-dot");
-    document.body.appendChild(dot);
-    snakeDots.push({
-      el: dot,
-      x: window.innerWidth / 2,
-      y: window.innerHeight / 2,
-      scale: 1 - i * 0.02,
-      opacity: 1 - i * 0.02
-    });
-  }
-
-  let mouseX = window.innerWidth / 2;
-  let mouseY = window.innerHeight / 2;
-
-  document.addEventListener("mousemove", (e) => {
-    mouseX = e.clientX;
-    mouseY = e.clientY;
-  });
-
-  function animateSnakeCursor() {
-    let x = mouseX;
-    let y = mouseY;
-    snakeDots.forEach((dot, i) => {
-      const next = snakeDots[i + 1] || { x, y };
-      dot.x += (x - dot.x) * 0.35;
-      dot.y += (y - dot.y) * 0.35;
-      dot.el.style.left = `${dot.x}px`;
-      dot.el.style.top = `${dot.y}px`;
-      dot.el.style.transform = `translate(-50%, -50%) scale(${dot.scale})`;
-      dot.el.style.opacity = dot.opacity;
-      x = dot.x;
-      y = dot.y;
-    });
-    requestAnimationFrame(animateSnakeCursor);
-  }
-  animateSnakeCursor();
-
-  // --- Set Current Year ---
-  const currentYearElement = document.getElementById("currentYear");
-  if (currentYearElement) {
-    currentYearElement.textContent = new Date().getFullYear();
-  }
-
-  // --- Navbar Highlight ---
-  const currentPath = window.location.pathname.split("/").pop();
-  document
-    .querySelectorAll(".nav-link, .mobile-menu-link, .footer-ul li a")
-    .forEach((link) => {
-      if (link.getAttribute("href") && link.getAttribute("href").includes(currentPath)) {
-        link.classList.add("active");
-      }
-      // Highlight dropdown 'Components' if any of its child pages is active
-      const componentPages = ["website.html", "games.html", "ml.html"];
-      const dropdownToggle = document.querySelector(".dropdown-toggle");
-      if (componentPages.includes(currentPath) && dropdownToggle) {
-        dropdownToggle.classList.add("active");
-      }
-    });
-    // --- Typing Animation for Main Title (<h1>) ---
-const titleOptions = {
-  strings: ["Project Vault"],
-  typeSpeed: 70,
-  backSpeed: 40,
-  backDelay: 2000,
-  showCursor: false,
-  loop: true
-};
-const typedTitle = new Typed('#animated-title', titleOptions);
-
-// --- Typing Animation for Subtitle (<p>) ---
-const subtitleOptions = {
-  strings: [
-    "Discover amazing projects in Web Dev",
-    "Explore creative Games and Designs",
-    "Dive into innovative Machine Learning",
-  ],
-  typeSpeed: 50,
-  backSpeed: 25,
-  backDelay: 1500,
-  loop: true
-};
-const typedSubtitle = new Typed('#animated-text', subtitleOptions);
-});
+// Modern Portfolio JavaScript
+class PortfolioApp {
+    constructor() {
+        this.initializeApp();
+    }
+
+    initializeApp() {
+        this.setupMobileMenu();
+        this.setupContactForm();
+        this.setupSmoothScrolling();
+        this.setupNavbarHighlight();
+        this.setupToastSystem();
+        this.setCurrentYear();
+        this.setupScrollEffects();
+    }
+
+    // Mobile Menu System
+    setupMobileMenu() {
+        const toggle = document.getElementById('mobileMenuToggle');
+        const menu = document.getElementById('mobileMenu');
+        const close = document.getElementById('mobileMenuClose');
+        const links = document.querySelectorAll('.mobile-menu-link');
+        const submenuToggle = document.querySelector('.submenu-toggle');
+        const submenu = document.querySelector('.mobile-submenu');
+
+        if (!toggle || !menu) return;
+
+        const toggleMenu = () => {
+            menu.classList.toggle('active');
+            document.body.style.overflow = menu.classList.contains('active') ? 'hidden' : '';
+            this.animateToggleIcon(toggle, menu.classList.contains('active'));
+        };
+
+        const closeMenu = () => {
+            menu.classList.remove('active');
+            document.body.style.overflow = '';
+            this.animateToggleIcon(toggle, false);
+        };
+
+        toggle.addEventListener('click', toggleMenu);
+        close?.addEventListener('click', closeMenu);
+        
+        links.forEach(link => {
+            link.addEventListener('click', closeMenu);
+        });
+
+        if (submenuToggle && submenu) {
+            submenuToggle.addEventListener('click', (e) => {
+                e.preventDefault();
+                submenu.classList.toggle('open');
+            });
+        }
+
+        // Close menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (menu.classList.contains('active') && 
+                !menu.contains(e.target) && 
+                !toggle.contains(e.target)) {
+                closeMenu();
+            }
+        });
+    }
+
+    animateToggleIcon(toggle, isOpen) {
+        const spans = toggle.querySelectorAll('span');
+        if (isOpen) {
+            spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
+            spans[1].style.opacity = '0';
+            spans[2].style.transform = 'rotate(-45deg) translate(7px, -6px)';
+        } else {
+            spans.forEach(span => {
+                span.style.transform = 'none';
+                span.style.opacity = '1';
+            });
+        }
+    }
+
+    // Contact Form Handler
+    setupContactForm() {
+        const form = document.getElementById('contact-form');
+        if (!form) return;
 
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            if (!form.checkValidity()) {
+                form.reportValidity();
+                return;
+            }
 
-function showToast(type) {
-  const container = document.getElementById('toast-container');
-  let message = '';
+            const button = form.querySelector('button[type="submit"]');
+            const buttonText = button.querySelector('.button-text');
+            const loading = button.querySelector('.loading');
 
-  if(type === 'project') message = '✅ New Project Added!';
-  if(type === 'comment') message = '💬 Comment Posted Successfully!';
-  if(type === 'favorite') message = '❤️ Added to Favorites!';
+            // Show loading state
+            this.setFormLoading(button, buttonText, loading, true);
 
-  const toast = document.createElement('div');
-  toast.classList.add('toast', type);
-  toast.innerText = message;
+            try {
+                // Simulate form submission
+                await this.simulateFormSubmission();
+                
+                form.reset();
+                this.showToast('Message sent successfully!', 'success');
+            } catch (error) {
+                this.showToast('Failed to send message. Please try again.', 'warning');
+            } finally {
+                this.setFormLoading(button, buttonText, loading, false);
+            }
+        });
+    }
 
-  container.appendChild(toast);
+    setFormLoading(button, buttonText, loading, isLoading) {
+        if (isLoading) {
+            buttonText.style.display = 'none';
+            loading.style.display = 'inline-block';
+            button.disabled = true;
+        } else {
+            buttonText.style.display = 'inline';
+            loading.style.display = 'none';
+            button.disabled = false;
+        }
+    }
 
-  // Remove toast after 3 seconds
-  setTimeout(() => {
-    toast.remove();
-  }, 3000);
+    simulateFormSubmission() {
+        return new Promise(resolve => setTimeout(resolve, 2000));
+    }
+
+    // Smooth Scrolling
+    setupSmoothScrolling() {
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', (e) => {
+                e.preventDefault();
+                const target = document.querySelector(anchor.getAttribute('href'));
+                if (target) {
+                    const offsetTop = target.offsetTop - 80; // Account for fixed navbar
+                    window.scrollTo({
+                        top: offsetTop,
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+    }
+
+    // Navbar Active Link Highlighting
+    setupNavbarHighlight() {
+        const sections = document.querySelectorAll('section[id]');
+        const navLinks = document.querySelectorAll('.nav-link, .mobile-menu-link');
+
+        const highlightNavLink = () => {
+            let current = '';
+            const scrollPos = window.scrollY + 100;
+
+            sections.forEach(section => {
+                const sectionTop = section.offsetTop;
+                const sectionHeight = section.clientHeight;
+                
+                if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
+                    current = section.getAttribute('id');
+                }
+            });
+
+            navLinks.forEach(link => {
+                link.classList.remove('active');
+                const href = link.getAttribute('href');
+                if (href === `#${current}`) {
+                    link.classList.add('active');
+                }
+            });
+        };
+
+        window.addEventListener('scroll', this.throttle(highlightNavLink, 100));
+        highlightNavLink(); // Initial call
+    }
+
+    // Toast Notification System
+    setupToastSystem() {
+        // Create toast container if it doesn't exist
+        if (!document.getElementById('toast-container')) {
+            const container = document.createElement('div');
+            container.id = 'toast-container';
+            document.body.appendChild(container);
+        }
+    }
+
+    showToast(message, type = 'info') {
+        const container = document.getElementById('toast-container');
+        if (!container) return;
+
+        const toast = document.createElement('div');
+        toast.classList.add('toast', type);
+        toast.textContent = message;
+        
+        container.appendChild(toast);
+
+        // Auto-remove after 3 seconds
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.remove();
+            }
+        }, 3000);
+    }
+
+    // Scroll Effects
+    setupScrollEffects() {
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-in');
+                }
+            });
+        }, observerOptions);
+
+        // Observe cards and sections
+        document.querySelectorAll('.category-card').forEach(el => {
+            observer.observe(el);
+        });
+    }
+
+    // Utility function for throttling
+    throttle(func, limit) {
+        let inThrottle;
+        return function() {
+            const args = arguments;
+            const context = this;
+            if (!inThrottle) {
+                func.apply(context, args);
+                inThrottle = true;
+                setTimeout(() => inThrottle = false, limit);
+            }
+        }
+    }
+
+    // Set current year
+    setCurrentYear() {
+        const yearElement = document.getElementById('currentYear');
+        if (yearElement) {
+            yearElement.textContent = new Date().getFullYear();
+        }
+    }
 }
 
-document.querySelectorAll(".action-buttons button").forEach((btn) => {
-    btn.addEventListener("click", () => {
-      const typeMap = {
-        "New Project Added": "project",
-        "New Comment": "comment",
-        "Added to Favorites": "favorite",
-      };
-      const msg = btn.textContent.trim();
-      const type = typeMap[msg] || "project";
-      showToast(msg, type);
-    });
-  });
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new PortfolioApp();
+});
+
+// Add CSS animations via JavaScript
+const style = document.createElement('style');
+style.textContent = `
+    .animate-in {
+        animation: fadeInUp 0.6s ease forwards;
+    }
+    
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(30px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+`;
+document.head.appendChild(style);
+
+// Project Vault JavaScript
+class ProjectVault {
+    constructor() {
+        this.initializeApp();
+    }
+
+    initializeApp() {
+        this.setupMobileMenu();
+        this.setupContactForm();
+        this.setupUploadForm();
+        this.setupSmoothScrolling();
+        this.setupNavbarHighlight();
+        this.setupToastSystem();
+        this.setCurrentYear();
+        this.setupScrollEffects();
+    }
+
+    // Mobile Menu System (same as before)
+    setupMobileMenu() {
+        const toggle = document.getElementById('mobileMenuToggle');
+        const menu = document.getElementById('mobileMenu');
+        const close = document.getElementById('mobileMenuClose');
+        const links = document.querySelectorAll('.mobile-menu-link');
+        const submenuToggle = document.querySelector('.submenu-toggle');
+        const submenu = document.querySelector('.mobile-submenu');
+
+        if (!toggle || !menu) return;
+
+        const toggleMenu = () => {
+            menu.classList.toggle('active');
+            document.body.style.overflow = menu.classList.contains('active') ? 'hidden' : '';
+            this.animateToggleIcon(toggle, menu.classList.contains('active'));
+        };
 
+        const closeMenu = () => {
+            menu.classList.remove('active');
+            document.body.style.overflow = '';
+            this.animateToggleIcon(toggle, false);
+        };
 
+        toggle.addEventListener('click', toggleMenu);
+        close?.addEventListener('click', closeMenu);
+        
+        links.forEach(link => {
+            link.addEventListener('click', closeMenu);
+        });
+
+        if (submenuToggle && submenu) {
+            submenuToggle.addEventListener('click', (e) => {
+                e.preventDefault();
+                submenu.classList.toggle('open');
+            });
+        }
+
+        document.addEventListener('click', (e) => {
+            if (menu.classList.contains('active') && 
+                !menu.contains(e.target) && 
+                !toggle.contains(e.target)) {
+                closeMenu();
+            }
+        });
+    }
+
+    animateToggleIcon(toggle, isOpen) {
+        const spans = toggle.querySelectorAll('span');
+        if (isOpen) {
+            spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
+            spans[1].style.opacity = '0';
+            spans[2].style.transform = 'rotate(-45deg) translate(7px, -6px)';
+        } else {
+            spans.forEach(span => {
+                span.style.transform = 'none';
+                span.style.opacity = '1';
+            });
+        }
+    }
+
+    // Upload Form Handler
+    setupUploadForm() {
+        const form = document.getElementById('upload-form');
+        if (!form) return;
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            if (!form.checkValidity()) {
+                form.reportValidity();
+                return;
+            }
+
+            const button = form.querySelector('button[type="submit"]');
+            const buttonText = button.querySelector('.button-text');
+            const loading = button.querySelector('.loading');
+
+            this.setFormLoading(button, buttonText, loading, true);
+
+            try {
+                await this.simulateProjectUpload();
+                form.reset();
+                this.showToast('🎉 Project uploaded successfully! It will be reviewed and published soon.', 'success');
+            } catch (error) {
+                this.showToast('❌ Failed to upload project. Please try again.', 'warning');
+            } finally {
+                this.setFormLoading(button, buttonText, loading, false);
+            }
+        });
+    }
+
+    // Contact Form Handler
+    setupContactForm() {
+        const form = document.getElementById('contact-form');
+        if (!form) return;
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            if (!form.checkValidity()) {
+                form.reportValidity();
+                return;
+            }
+
+            const button = form.querySelector('button[type="submit"]');
+            const buttonText = button.querySelector('.button-text');
+            const loading = button.querySelector('.loading');
+
+            this.setFormLoading(button, buttonText, loading, true);
+
+            try {
+                await this.simulateFormSubmission();
+                form.reset();
+                this.showToast('✅ Message sent successfully! We\'ll get back to you soon.', 'success');
+            } catch (error) {
+                this.showToast('❌ Failed to send message. Please try again.', 'warning');
+            } finally {
+                this.setFormLoading(button, buttonText, loading, false);
+            }
+        });
+    }
+
+    setFormLoading(button, buttonText, loading, isLoading) {
+        if (isLoading) {
+            buttonText.style.display = 'none';
+            loading.style.display = 'inline-block';
+            button.disabled = true;
+        } else {
+            buttonText.style.display = 'inline';
+            loading.style.display = 'none';
+            button.disabled = false;
+        }
+    }
+
+    simulateProjectUpload() {
+        return new Promise(resolve => setTimeout(resolve, 2500));
+    }
+
+    simulateFormSubmission() {
+        return new Promise(resolve => setTimeout(resolve, 2000));
+    }
+
+    // Smooth Scrolling
+    setupSmoothScrolling() {
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', (e) => {
+                e.preventDefault();
+                const target = document.querySelector(anchor.getAttribute('href'));
+                if (target) {
+                    const offsetTop = target.offsetTop - 80;
+                    window.scrollTo({
+                        top: offsetTop,
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+    }
+
+    // Navbar Active Link Highlighting
+    setupNavbarHighlight() {
+        const sections = document.querySelectorAll('section[id]');
+        const navLinks = document.querySelectorAll('.nav-link, .mobile-menu-link');
+
+        const highlightNavLink = () => {
+            let current = '';
+            const scrollPos = window.scrollY + 100;
+
+            sections.forEach(section => {
+                const sectionTop = section.offsetTop;
+                const sectionHeight = section.clientHeight;
+                
+                if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
+                    current = section.getAttribute('id');
+                }
+            });
+
+            navLinks.forEach(link => {
+                link.classList.remove('active');
+                const href = link.getAttribute('href');
+                if (href === `#${current}`) {
+                    link.classList.add('active');
+                }
+            });
+        };
+
+        window.addEventListener('scroll', this.throttle(highlightNavLink, 100));
+        highlightNavLink();
+    }
+
+    // Toast Notification System
+    setupToastSystem() {
+        if (!document.getElementById('toast-container')) {
+            const container = document.createElement('div');
+            container.id = 'toast-container';
+            document.body.appendChild(container);
+        }
+    }
+
+    showToast(message, type = 'info') {
+        const container = document.getElementById('toast-container');
+        if (!container) return;
+
+        const toast = document.createElement('div');
+        toast.classList.add('toast', type);
+        toast.textContent = message;
+        
+        container.appendChild(toast);
+
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.remove();
+            }
+        }, 4000);
+    }
+
+    // Scroll Effects
+    setupScrollEffects() {
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-in');
+                }
+            });
+        }, observerOptions);
+
+        document.querySelectorAll('.category-card, .feature-item, .benefit-item').forEach(el => {
+            observer.observe(el);
+        });
+    }
+
+    throttle(func, limit) {
+        let inThrottle;
+        return function() {
+            const args = arguments;
+            const context = this;
+            if (!inThrottle) {
+                func.apply(context, args);
+                inThrottle = true;
+                setTimeout(() => inThrottle = false, limit);
+            }
+        }
+    }
+
+    setCurrentYear() {
+        const yearElement = document.getElementById('currentYear');
+        if (yearElement) {
+            yearElement.textContent = new Date().getFullYear();
+        }
+    }
+}
+
+// Initialize the application
+document.addEventListener('DOMContentLoaded', () => {
+    new ProjectVault();
+});
+
+// Add CSS animations
+const style = document.createElement('style');
+style.textContent = `
+    .animate-in {
+        animation: fadeInUp 0.6s ease forwards;
+    }
+    
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(30px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+`;
+document.head.appendChild(style);
diff --git a/style.css b/style.css
index 8ad2272..2c21900 100644
--- a/style.css
+++ b/style.css
@@ -1,847 +1,1103 @@
+/* CSS Custom Properties */
+:root {
+    --primary-color: #667eea;
+    --secondary-color: #764ba2;
+    --accent-color: #ff4081;
+    --text-primary: #2c3e50;
+    --text-secondary: #7f8c8d;
+    --background-light: #ffffff;
+    --background-dark: #f8f9fa;
+    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
+    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
+    --shadow-heavy: 0 10px 40px rgba(0, 0, 0, 0.2);
+    --border-radius: 12px;
+    --transition-fast: 0.2s ease;
+    --transition-medium: 0.3s ease;
+    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    --gradient-background: radial-gradient(circle at 60% 40%, #7092d3 20%, #4a4ac3 70%), linear-gradient(135deg, #667eea 0%, #030376 100%);
+}
+
+/* Reset and Base Styles */
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
 body {
-  font-family: 'Inter', sans-serif;
-  background: 
-    radial-gradient(circle at 60% 40%, #7092d3 20%, #4a4ac3 70%),
-    linear-gradient(135deg, #667eea 0%, #030376 100%);
-  color: #222;
-  line-height: 1.6;
-  overflow-x: hidden;
-  min-height: 100vh;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--gradient-background);
+    color: var(--text-primary);
+    line-height: 1.7;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
 }
 
-a {
-  text-decoration: none;
-  color: inherit;
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
 }
 
-
-/* ========== NAVIGATION ========== */
-
-nav {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 1rem 2rem;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-/* Header */
-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* gradient from main */
-  color: #ffffff;
-  padding: 4rem 2rem;
-  text-align: center;
-  margin-top: 80px; /* keep main spacing for navbar */
-  position: relative;
-  overflow: hidden;
-  height: 80px;
-  box-shadow: 0 2px 20px rgba(0,0,0,0.1); /* from your branch */
+.section {
+    padding: 5rem 0;
+    position: relative;
 }
 
-header h1,
-header p {
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
+.section-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 800;
+    text-align: center;
+    margin-bottom: 3rem;
+    color: var(--text-primary);
+    position: relative;
 }
 
-header h1 {
-  margin: 0;
-  font-size: clamp(2rem, 5vw, 4rem);
-  font-weight: 800;
-  margin-top: 8rem; /* from your branch */
-  text-shadow: 0 4px 8px rgba(0,0,0,0.3); /* from your branch */
-  background: rgba(63, 81, 181, 0.4);
-  padding: 1rem 2rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 4px;
+    background: var(--gradient-primary);
+    border-radius: 2px;
 }
 
+/* Navigation */
+nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    transition: var(--transition-medium);
 }
 
 .nav-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-.nav-logo {
-  font-size: 2.1rem;    /* from main */
-  font-weight: 800;     /* from main */
-  color: #0d1a4a;       /* keep your dark blue */
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
-
+.nav-logo {
+    font-size: 1.8rem;
+    font-weight: 800;
+    color: var(--primary-color);
+    text-decoration: none;
 }
 
 .nav-right {
-  display: flex;
-  align-items: center;
-.navbar {
-  gap: 1.5rem;      /* from main */
-  margin-left: 4rem; /* from ui-fixes-navbar */
-}
-
-.nav-link {
-  color: #fff;       /* from main */
-  font-size: 1.1rem; /* from main */
-  font-weight: 600;  /* from main */
-  padding: 0.5rem 0.8rem; /* from main */
-}
-
-  border-radius: 25px;
-  border:1px solid #000;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  white-space: nowrap;
-
+    display: flex;
+    align-items: center;
 }
 
-.nav-link::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-  transition: left 0.5s;
+.navbar {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
 }
 
-.nav-link:hover::before {
-  left: 100%;
+.nav-link {
+    color: var(--text-primary);
+    font-weight: 600;
+    font-size: 1rem;
+    text-decoration: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 50px;
+    transition: var(--transition-medium);
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
 .nav-link:hover {
-  background: #222;      /* dark grey/black background */
-  color: #fff !important; /* white text */
-  transform: translateY(-2px);
-  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    background: var(--gradient-primary);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-medium);
 }
 
-/* ========== DROPDOWN ========== */
-.dropdown {
-  position: relative;
+.nav-link.active {
+    background: var(--gradient-primary);
+    color: white;
+    box-shadow: var(--shadow-light);
 }
 
-.dropdown-toggle {
-  cursor: pointer;
-  user-select: none;
+/* Dropdown */
+.dropdown {
+    position: relative;
 }
 
 .dropdown-content {
-  display:inline;
-  position: absolute;
-  top: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-  background: linear-gradient(to right, #3f51b5, #5a55ae);
-  transform: translateX(-50%) translateY(-10px);
-  background: rgb(97, 52, 156);
-  backdrop-filter: blur(15px);
-  min-width: 220px;
-  border-radius: 15px;
-  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
-  padding: 0.75rem 0;
-  opacity: 0;
-  visibility: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  z-index: 1001;
-  flex-direction: column;
+    position: absolute;
+    top: calc(100% + 15px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: white;
+    min-width: 220px;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-heavy);
+    padding: 1rem 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--transition-medium);
+    border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .dropdown-content::before {
-  content: '';
-  position: absolute;
-  top: -8px;
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
-  width: 16px;
-  height: 16px;
-  background: rgba(255, 255, 255, 0.98);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-bottom: none;
-  border-right: none;
-  backdrop-filter: blur(15px);
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    width: 16px;
+    height: 16px;
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: none;
+    border-right: none;
 }
 
 .dropdown-content a {
-  display: block;
-  padding: 0.75rem 1.5rem;
-  color: #222; /* Always black text */
-  transition: all 0.3s ease;
-  border-radius: 10px;
-  margin: 0 0.5rem;
-  font-size: 0.95rem;
-  background: transparent;
+    display: block;
+    padding: 0.75rem 1.5rem;
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: var(--transition-fast);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
 .dropdown-content a:hover {
-  background: #fff;   /* Keep background white on hover */
-  color: #222;        /* Keep text black on hover */
-  transform: translateX(3px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
+    background: var(--background-dark);
+    color: var(--primary-color);
 }
 
-/* Only show dropdown when hovering specifically over the dropdown container */
-
 .dropdown:hover .dropdown-content {
-  display: flex;
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(-50%) translateY(0);
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
 }
 
 /* Mobile Menu */
 .mobile-menu-toggle {
-  display: none;
-  flex-direction: column;
-  cursor: pointer;
-  padding: 0.5rem;
-  z-index: 1002;
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+    padding: 0.5rem;
+    gap: 4px;
 }
+
 .mobile-menu-toggle span {
-  width: 25px;
-  height: 3px;
-  background: #fff;
-  margin: 3px 0;
-  transition: 0.3s;
-  border-radius: 2px;
+    width: 25px;
+    height: 3px;
+    background: var(--text-primary);
+    border-radius: 2px;
+    transition: var(--transition-medium);
 }
 
 .mobile-menu {
-  position: fixed;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  transition: left 0.3s ease;
-  z-index: 9999;
-  padding: 2rem;
+    position: fixed;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100vh;
+    background: white;
+    transition: left var(--transition-medium);
+    z-index: 9999;
+    padding: 2rem;
+}
+
+.mobile-menu.active {
+    left: 0;
+}
+
+.mobile-menu-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 3rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--background-dark);
+}
+
+.mobile-menu-close {
+    font-size: 2rem;
+    cursor: pointer;
+    color: var(--text-primary);
+    padding: 0.5rem;
+}
+
+.mobile-menu-items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
+
+.mobile-menu-link {
+    padding: 1rem 1.5rem;
+    color: var(--text-primary);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1.1rem;
+    border-radius: var(--border-radius);
+    transition: var(--transition-fast);
+}
+
+.mobile-menu-link:hover {
+    background: var(--background-dark);
+    color: var(--primary-color);
+}
+
 .mobile-submenu {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .submenu-toggle {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
+    padding: 1rem 1.5rem;
+    font-weight: 600;
+    font-size: 1.1rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: var(--border-radius);
+    transition: var(--transition-fast);
 }
 
-.arrow-icon {
-  transition: transform 0.3s ease;
-  }
-nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.submenu-toggle:hover {
+    background: var(--background-dark);
+}
 
-  padding: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+.arrow-icon {
+    transition: transform var(--transition-medium);
+}
 
+.mobile-submenu.open .arrow-icon {
+    transform: rotate(180deg);
 }
 
 .submenu-items {
-  display: none;
-  flex-direction: column;
-  padding-left: 1rem;
-  margin-top: 0.5rem;
+    display: none;
+    flex-direction: column;
+    padding-left: 1rem;
+    margin-top: 0.5rem;
 }
 
-
 .mobile-submenu.open .submenu-items {
-  display: flex;
+    display: flex;
 }
 
-.mobile-submenu.open .arrow-icon {
-  transform: rotate(180deg);
+/* Header */
+header {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--gradient-primary);
+    color: white;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
 }
 
-.mobile-menu.active {
-  left: 0;
+.header-content {
+    max-width: 800px;
+    padding: 2rem;
+    z-index: 1;
 }
-nav a {
-  color: #fff;
-nav .dropdown-content a {
-  color: #222;              /* from ui-fixes-navbar */
-  text-decoration: none;     /* from main */
-  margin: 0 1rem;           /* from main */
-  font-weight: 600;         /* from main */
-  transition: color 0.3s ease; /* from main */
+
+header h1 {
+    font-size: clamp(2.5rem, 6vw, 4rem);
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
 
+.header-subtitle {
+    font-size: clamp(1.1rem, 3vw, 1.5rem);
+    margin-bottom: 3rem;
+    opacity: 0.9;
+    min-height: 2em;
 }
 
-nav a:hover,
-.dropdown-content a:hover {
-  color: #222;
+.header-buttons {
+    display: flex;
+    gap: 1.5rem;
+    justify-content: center;
+    flex-wrap: wrap;
 }
 
-.mobile-menu-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
+/* Buttons */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 2rem;
+    border-radius: 50px;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1rem;
+    transition: var(--transition-medium);
+    cursor: pointer;
+    border: none;
+    position: relative;
+    overflow: hidden;
 }
 
-.mobile-menu-close {
-  color: #fff;
-  font-size: 2rem;
-  cursor: pointer;
-  padding: 0.5rem;
-  user-select: none;
+.btn-primary {
+    background: var(--accent-color);
+    color: white;
+    box-shadow: var(--shadow-medium);
 }
 
-.mobile-menu-items {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+.btn-primary:hover {
+    background: #e73370;
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-heavy);
 }
 
-.mobile-menu-link {
-  color: #fff;
-  font-size: 1.2rem;
-  padding: 1rem;
-  border-radius: 10px;
-  transition: background 0.3s ease;
-  display: block;
+.btn-secondary {
+    background: transparent;
+    color: white;
+    border: 2px solid white;
 }
 
-.mobile-menu-link:hover {
-  background: rgba(255, 255, 255, 0.1);
+.btn-secondary:hover {
+    background: white;
+    color: var(--primary-color);
+    transform: translateY(-3px);
 }
 
+.btn-outline {
+    background: transparent;
+    color: var(--primary-color);
+    border: 2px solid var(--primary-color);
+}
 
-/* ========== HEADER ========== */
+.btn-outline:hover {
+    background: var(--primary-color);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-medium);
+}
 
-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #ffffff;
-  padding: 4rem 2rem;
-  text-align: center;
-  margin-top: 80px; /* Space for fixed navbar */
-  position: relative;
-  overflow: hidden;
-}*/
+/* About Section */
+#about {
+    background: white;
+}
 
-header h1,
-header p {
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
+.about-content {
+    max-width: 800px;
+    margin: 0 auto;
+    text-align: center;
 }
 
-header h1 {
-  font-size: clamp(2rem, 5vw, 4rem);
-  font-weight: 800;
-  margin-bottom: 1rem;
-  text-shadow: 0 4px 8px rgba(0,0,0,0.3);
-  position: relative;
-  z-index: 1;
+.lead {
+    font-size: 1.3rem;
+    font-weight: 500;
+    color: var(--primary-color);
+    margin-bottom: 2rem;
 }
 
-/* ========== MOBILE MENU FIX ========== */
-.mobile-menu-toggle {
-  display: none;
+.about-content p {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    margin-bottom: 2rem;
+    color: var(--text-secondary);
 }
 
-.mobile-menu {
-  position: fixed;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  transition: left 0.3s ease;
-  z-index: 9999;
-  padding: 2rem;
+.skills {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    flex-wrap: wrap;
+    margin-top: 3rem;
 }
 
-.mobile-menu.active {
-  left: 0;
+.skill-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1.5rem;
+    background: var(--background-dark);
+    border-radius: var(--border-radius);
+    transition: var(--transition-medium);
+    min-width: 120px;
 }
 
-/* add project form */
-.add-project-section {
-  margin: 4rem 0;
+.skill-item:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-medium);
 }
 
-.add-project-card {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 4rem 2rem;
-  border-radius: 25px;
-  text-align: center;
-  color: #fff;
-  position: relative;
-  overflow: hidden;
+.skill-item i {
+    font-size: 2.5rem;
+    color: var(--primary-color);
 }
 
-.add-project-card::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="thank-pattern" width="80" height="80" patternUnits="userSpaceOnUse"><circle cx="40" cy="40" r="3" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23thank-pattern)"/></svg>');
-  opacity: 0.3;
+.skill-item span {
+    font-weight: 600;
+    color: var(--text-primary);
 }
 
-.add-project-card h2 {
-  font-size: 2.5rem;
-  font-weight: 800;
-  margin-bottom: 1.5rem;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
-  position: relative;
-  z-index: 1;
-}
-
-.add-project-card p {
-  text-align: Justify;
-  font-size: 1.2rem;
-  line-height: 1.8;
-  margin-bottom: 2.5rem;
-  opacity: 0.9;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-  z-index: 1;
+/* Projects Section */
+#projects {
+    background: var(--background-dark);
 }
 
-.add-project-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.2rem;
-  max-width: 500px;
-  margin: 0 auto;
+.category-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
-.add-project-form .form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+.category-card {
+    background: white;
+    border-radius: var(--border-radius);
+    padding: 2rem;
+    text-align: center;
+    box-shadow: var(--shadow-light);
+    transition: var(--transition-medium);
+    position: relative;
+    overflow: hidden;
 }
 
-.add-project-form input,
-.add-project-form textarea {
-  padding: 0.9rem 1rem;
-  border-radius: 8px;
-  border: none;
-  font-size: 1rem;
-  background: #f5f7fa;
-  color: #222;
-  resize: none;
-  transition: box-shadow 0.2s;
-  margin-bottom: 0.2rem;
+.category-card:hover {
+    transform: translateY(-10px);
+    box-shadow: var(--shadow-heavy);
 }
 
-.add-project-form input:focus,
-.add-project-form textarea:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #764ba2;
+.card-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    background: var(--gradient-primary);
+    border-radius: 50%;
+    margin-bottom: 1.5rem;
 }
 
-.add-project-btn {
-  background: #ff4081;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 0.9rem 2rem;
-  font-size: 1.1rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: background 0.3s;
-  margin-top: 0.5rem;
+.card-icon i {
+    font-size: 2rem;
+    color: white;
 }
 
-.add-project-btn:hover {
-  background: #e73370;
+.category-card h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
 }
 
-/* ========== FOOTER ========== */
-footer {
-footer {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* from main */
-  color: #fff;
-  padding: 3rem 1rem 1rem 1rem; /* from main */
-  margin-top: 4rem;             /* keep spacing from ui-fixes-navbar */
-  position: relative;           /* from ui-fixes-navbar */
-  overflow: hidden;             /* from ui-fixes-navbar */
-  box-shadow: 0 -4px 20px rgba(0,0,0,0.08); /* from main */
+.category-card p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    margin-bottom: 2rem;
 }
 
-footer::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); /* from ui-fixes-navbar */
+.card-footer {
+    margin-top: auto;
+}
+
+/* Contact Section */
+#contact {
+    background: white;
+}
+
+.contact-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    max-width: 1000px;
+    margin: 0 auto;
 }
 
+.contact-info h3 {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+.contact-info p {
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+    line-height: 1.7;
+}
+
+.contact-items {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.contact-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    background: var(--background-dark);
+    border-radius: var(--border-radius);
+}
+
+.contact-item i {
+    font-size: 1.2rem;
+    color: var(--primary-color);
+    width: 20px;
+}
+
+.contact-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-group input,
+.form-group textarea {
+    padding: 1rem;
+    border: 2px solid var(--background-dark);
+    border-radius: var(--border-radius);
+    font-size: 1rem;
+    font-family: inherit;
+    transition: var(--transition-fast);
+    background: white;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-group textarea {
+    resize: vertical;
+    min-height: 120px;
+}
+
+/* Footer */
+footer {
+    background: var(--gradient-primary);
+    color: white;
+    padding: 3rem 0 1rem;
 }
 
 .footer-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2rem;
-  max-width: 1200px;
-  margin: 0 auto 2rem auto;
-  justify-content: space-between;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 3rem;
 }
 
-.footer-section {
-  flex: 1 1 250px;
-  min-width: 220px;
+.footer-section h3 {
+    font-size: 1.3rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
 }
 
-.footer-section .heading {
-  font-size: 1.3rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-  color: #fff;
-  letter-spacing: 1px;
+.footer-section p {
+    opacity: 0.9;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
 }
 
-.footer-section.company-info p {
-  margin: 1rem 0;
-  font-size: 1rem;
-  color: #e0e0e0;
+.social-links {
+    display: flex;
+    gap: 1rem;
 }
 
-.footer-ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.social-links a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    color: white;
+    text-decoration: none;
+    transition: var(--transition-medium);
 }
 
-.footer-ul li {
-  margin-bottom: 0.8rem;
+.social-links a:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
 }
 
-.footer-ul li a {
-color: #fff;
-font-size: 1.05rem;
-transition: all 0.3s ease;
+.footer-links {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
 
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  transition: color 0.3s;
+.footer-links a {
+    color: white;
+    text-decoration: none;
+    opacity: 0.9;
+    transition: var(--transition-fast);
 }
 
-.footer-ul li a:hover {
-  color: #ff4081;
+.footer-links a:hover {
+    opacity: 1;
+    color: var(--accent-color);
 }
 
-.footer-section.send-message form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+.footer-bottom {
+    text-align: center;
+    padding-top: 2rem;
+    margin-top: 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    opacity: 0.8;
 }
 
-.footer-section.send-message .form-group {
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.footer-section.send-message input,
-.footer-section.send-message textarea {
-  flex: 1 1 120px;
-  padding: 0.8rem 1rem;
-  border-radius: 8px;
-  border: none;
-  font-size: 1rem;
-  background: #f5f7fa;
-  color: #222;
-  resize: none;
-  transition: box-shadow 0.2s;
-}
-
-.footer-section.send-message input:focus,
-.footer-section.send-message textarea:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #764ba2;
-}
-
-.footer-section.send-message button {
-  background: #ff4081;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 0.8rem 2rem;
-  font-size: 1rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: background 0.3s;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+/* Toast Notifications */
+#toast-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 10000;
 }
 
-.footer-section.send-message button:hover {
-  background: #e73370;
+.toast {
+    padding: 1rem 1.5rem;
+    border-radius: var(--border-radius);
+    color: white;
+    font-weight: 500;
+    min-width: 250px;
+    box-shadow: var(--shadow-medium);
+    animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
 }
 
-.footer-section .social {
-  margin-top: 1.2rem;
-  display: flex;
-  gap: 1rem;
+.toast.success {
+    background: #28a745;
 }
 
-.footer-section .social a {
-  color: #fff;
-  font-size: 1.5rem;
-  transition: color 0.3s, transform 0.3s;
+.toast.info {
+    background: #17a2b8;
 }
 
-.footer-section .social a:hover {
-  color: #ff4081;
-  transform: scale(1.15);
+.toast.warning {
+    background: #ffc107;
+    color: #212529;
 }
 
-.copyright {
-  text-align: center;
-  color: #e0e0e0;
-  font-size: 1rem;
-  margin-top: 2rem;
-  letter-spacing: 0.5px;
+/* Animations */
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
 }
 
-/* CATEGORY CARDS SECTION */
-.category-container {
-  display: flex;
-  justify-content: center;
-  align-items: stretch; /* Make cards equal height */
-  gap: 2rem;
-  margin: 3rem auto 0 auto;
-  max-width: 1100px;
-  flex-wrap: wrap;
+@keyframes fadeOut {
+    to {
+        opacity: 0;
+        transform: translateX(100%);
+    }
 }
 
-/* Copyright */
-.copyright {
-  text-align: center;
-  margin-top: 3rem;
-  padding: 2rem 1rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(0, 0, 0, 0.1);
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 0.9rem;
+/* Responsive Design */
+@media (max-width: 768px) {
+    .nav-right .navbar {
+        display: none;
+    }
+    
+    .mobile-menu-toggle {
+        display: flex;
+    }
+    
+    .header-buttons {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .contact-content {
+        grid-template-columns: 1fr;
+        gap: 3rem;
+    }
+    
+    .footer-container {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+        text-align: center;
+    }
+    
+    .skills {
+        gap: 1rem;
+    }
+    
+    .skill-item {
+        min-width: 100px;
+        padding: 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 0 1rem;
+    }
+    
+    .section {
+        padding: 3rem 0;
+    }
+    
+    .category-container {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+    
+    .btn {
+        padding: 0.75rem 1.5rem;
+    }
+}
+
+/* Smooth scrolling for older browsers */
+@media (prefers-reduced-motion: no-preference) {
+    html {
+        scroll-behavior: smooth;
+    }
+}
+/* Hero Description Styling */
+.hero-description {
+    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
+    line-height: 1.6;
+    margin-bottom: 3rem;
+    opacity: 0.95;
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+    font-weight: 400;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Adjust header content spacing */
+.header-content {
+    max-width: 900px;
+    padding: 2rem;
+    z-index: 1;
+}
+
+/* Make sure the header has proper spacing */
+header {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--gradient-primary);
+    color: white;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    padding: 6rem 2rem 4rem 2rem; /* Extra top padding for navbar */
 }
 
-.nav-link.active,
-.footer-ul li a.active,
-.mobile-menu-link.active {
-  background: rgba(255, 255, 255, 0.2);
-  color: #0d1a4a !important;
-  font-weight: 800;
+/* Responsive adjustments for hero text */
+@media (max-width: 768px) {
+    .hero-description {
+        font-size: 1.1rem;
+        margin-bottom: 2.5rem;
+    }
+    
+    header {
+        padding: 5rem 1rem 3rem 1rem;
+    }
+}
+/* Upload Button in Navigation */
+.btn-upload {
+    background: var(--accent-color) !important;
+    color: white !important;
+    border-radius: 25px;
+    padding: 0.6rem 1.2rem !important;
+    font-weight: 700;
+    margin-left: 1rem;
+}
+
+.btn-upload:hover {
+    background: #e73370 !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
+}
+
+/* Features Section */
+.features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.feature-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1.5rem;
+    background: var(--background-dark);
+    border-radius: var(--border-radius);
+    transition: var(--transition-medium);
 }
 
-/* Category cards */
-.category-card {
-  background: #fff;
-  border-radius: 20px;
-  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.13), 0 1.5px 6px rgba(0,0,0,0.07);
-  padding: 2.2rem 2rem 1.7rem 2rem;
-  min-width: 290px;
-  max-width: 340px;
-  flex: 1 1 320px; /* All cards grow/shrink equally */
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s cubic-bezier(.4,2,.6,1);
-  text-align: left;
-  margin-bottom: 1.5rem;
+.feature-item:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-medium);
 }
 
-  position: relative;
-  opacity: 0;
-  transform: translateY(30px);
-  animation: fadeInUp 0.7s forwards;
+.feature-item i {
+    font-size: 2rem;
+    color: var(--primary-color);
+    flex-shrink: 0;
 }
 
-.category-card.fade-in {
-  opacity: 1;
-  transform: translateY(0);
+.feature-item h4 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
 }
 
-.category-card h2 {
-  font-size: 1.5rem;
-  font-weight: 800;
-  margin-bottom: 0.7rem;
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
+.feature-item p {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
 }
 
-.category-card p {
-  color: #444;
-  font-size: 1.05rem;
-  margin-bottom: 0;
-  font-weight: 500;
+/* Project Stats */
+.project-stats {
+    margin: 1rem 0;
+    padding: 0.5rem 0;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
 }
 
-.category-card:hover {
-  transform: translateY(18px) scale(25);
-  box-shadow: 0 18px 32px rgba(99, 124, 232, 0.13), 0 15px 6px rgba(86, 21, 100, 0.07);
-  z-index: 2;
+.project-stats span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    font-weight: 500;
 }
 
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.project-stats i {
+    color: var(--primary-color);
+}
+
+/* Upload Section */
+.upload-section {
+    background: var(--background-dark);
+}
+
+.upload-content {
+    display: grid;
+    grid-template-columns: 1fr 1.2fr;
+    gap: 4rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.upload-info h3 {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+.upload-info p {
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+    line-height: 1.7;
+    font-size: 1.1rem;
 }
 
-/* Responsive for cards */
-@media (max-width: 900px) {
-  .category-container {
+.upload-benefits {
+    display: flex;
     flex-direction: column;
+    gap: 1rem;
+}
+
+.benefit-item {
+    display: flex;
     align-items: center;
-    gap: 1.5rem;
-  }
-  .category-card {
-    max-width: 95vw;
-    min-width: 0;
-    width: 100%;
-    height: auto;
-  }
+    gap: 1rem;
+    padding: 1rem;
+    background: white;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-light);
 }
 
-/* Responsive Footer */
-@media (max-width: 900px) {
-  .footer-container {
-    flex-direction: column;
-    gap: 2.5rem;
-    align-items: stretch;
-  }
-  .footer-section {
-    min-width: 0;
-  }
+.benefit-item i {
+    font-size: 1.2rem;
+    color: var(--primary-color);
+    width: 20px;
+    flex-shrink: 0;
 }
 
-.add-project-section,
-.add-project-card {
-  position: relative;
-  z-index: 10;
+.benefit-item span {
+    font-weight: 500;
+    color: var(--text-primary);
 }
 
-@media (max-width: 768px) {
-  .nav-right {
-    display: none;
-    /* hide desktop links on small screens */
-  }
+/* Upload Form */
+.upload-form {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-medium);
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
 
-  .mobile-menu-toggle {
+.form-group {
     display: flex;
-    /* show hamburger menu */
-  }
+    flex-direction: column;
+    margin-bottom: 1.5rem;
 }
 
-/* Card styling */
-.card {
-  width: 300px;
-  padding: 20px;
-  margin: 50px auto;
-  background: #f0f0f0;
-  border-radius: 10px;
-  text-align: center;
+.form-group label {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+    font-size: 0.95rem;
 }
 
-/* Buttons */
-button {
-  margin: 5px;
-  padding: 10px 15px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  background-color: #007bff;
-  color: white;
-  font-weight: bold;
-  transition: transform 0.2s, background-color 0.2s
+.form-group input,
+.form-group textarea,
+.form-group select {
+    padding: 1rem;
+    border: 2px solid var(--background-dark);
+    border-radius: var(--border-radius);
+    font-size: 1rem;
+    font-family: inherit;
+    transition: var(--transition-fast);
+    background: white;
 }
 
-.action-btn:hover {
-  transform: translateY(-2px)
-  background-color: #6366f1;
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
-/* Toast container */
-#toast-container {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  z-index: 9999;
+.form-group textarea {
+    resize: vertical;
+    min-height: 100px;
 }
 
-/* Toast message */
-.toast {
-  padding: 12px 20px;
-  border-radius: 8px;
-  color: white;
-  font-weight: 500;
-  min-width: 200px;
-  animation: slideIn 0.5s, fadeOut 0.5s 2.5s forwards;
+.form-group select {
+    cursor: pointer;
 }
 
-/* Toast types */
-.toast.project { background-color: #28a745; }   /* Green */
-.toast.comment { background-color: #17a2b8; }  /* Blue */
-.toast.favorite { background-color: #e83e8c; } /* Pink */
+/* Enhanced Contact Items */
+.contact-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    background: var(--background-dark);
+    border-radius: var(--border-radius);
+    transition: var(--transition-fast);
+    cursor: pointer;
+}
 
-/* Animations */
-@keyframes slideIn {
-  from { transform: translateX(100%); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
+.contact-item:hover {
+    background: #e8f2ff;
+    transform: translateX(5px);
 }
 
-@keyframes fadeOut {
-  to { opacity: 0; transform: translateX(100%); }
+.contact-item i {
+    font-size: 1.2rem;
+    color: var(--primary-color);
+    width: 20px;
+}
+
+/* Responsive Updates */
+@media (max-width: 768px) {
+    .upload-content {
+        grid-template-columns: 1fr;
+        gap: 3rem;
+    }
+    
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+    
+    .features {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+    
+    .feature-item {
+        padding: 1rem;
+    }
+}
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* Replace gradient with background image */
+  background: url("https://plus.unsplash.com/premium_photo-1671729480695-8a0505c73bb4?q=80&w=1332&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
+              no-repeat center center/cover;
+  color: #ffffff;
+  padding: 6rem 2rem;
+  text-align: center;
+  margin-top: 80px; /* keeps space for navbar */
+  position: relative;
+  overflow: hidden;
+  min-height: 90vh; /* makes it a full hero section */
+}
+
+/* Optional: dark overlay for better text visibility */
+header::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.45); /* transparent dark overlay */
+  z-index: 0;
 }
+
+header .header-text {
+  position: relative;
+  z-index: 1; /* keeps text above overlay */
+}
+
