diff --git a/css/common.css b/css/common.css
new file mode 100644
index 0000000..d925181
--- /dev/null
+++ b/css/common.css
@@ -0,0 +1,256 @@
+/* ===================================================
+   ===== Global Styles =====
+=================================================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+html {
+    scroll-behavior: smooth;
+    /* ✅ smooth scroll */
+}
+
+body {
+    background: #f4f4f4;
+    color: #333;
+    line-height: 1.6;
+    transition: background-color 0.6s ease, color 0.6s ease;
+    scroll-behavior: smooth;
+}
+
+/* Headings */
+h1,
+h2,
+h3 {
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+/* ===================================================
+   ===== Navbar =====
+=================================================== */
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #333;
+    padding: 10px 20px;
+    color: white;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+}
+
+.logo {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.nav-links {
+    list-style: none;
+    display: flex;
+    gap: 20px;
+}
+
+.nav-links li a {
+    text-decoration: none;
+    color: white;
+    transition: color 0.3s;
+}
+
+.nav-links li a:hover,
+.nav-links li a.active {
+    color: #ff6347;
+}
+
+/* Hamburger menu */
+.hamburger {
+    display: none;
+    font-size: 28px;
+    cursor: pointer;
+    user-select: none;
+    transition: transform 0.3s ease;
+}
+
+.hamburger.active {
+    transform: rotate(180deg);
+}
+
+@media (max-width: 768px) {
+    .nav-links {
+        position: absolute;
+        top: 60px;
+        right: 0;
+        background-color: #333;
+        flex-direction: column;
+        width: 200px;
+        display: none;
+        padding: 10px;
+        border-radius: 5px;
+    }
+
+    .nav-links li {
+        margin: 10px 0;
+    }
+
+    .hamburger {
+        display: block;
+    }
+
+    .nav-links.active {
+        display: flex;
+    }
+}
+
+/* ===================================================
+   ===== Containers & Animations =====
+=================================================== */
+.container {
+    width: 85%;
+    margin: auto;
+    padding: 3rem 0;
+}
+
+/* Fade-in animation */
+.fade-in {
+    opacity: 0;
+    transform: translateY(30px);
+    animation: fadeInUp 1s forwards;
+}
+
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ===================================================
+   ===== Footer =====
+=================================================== */
+footer {
+    text-align: center;
+    padding: 1.2rem;
+    background: #222;
+    color: #fff;
+    margin-top: 2rem;
+    font-size: 0.9rem;
+}
+
+/* ===================================================
+   ===== Contact Section =====
+=================================================== */
+#contact {
+    text-align: center;
+    background-color: #929599;
+}
+
+body.dark #contact {
+    background-color: #467db4;
+    color: #000;
+}
+
+.contact-links a {
+    display: inline-block;
+    margin: 10px;
+    padding: 12px 20px;
+    background: #ff9800;
+    color: #fff;
+    border-radius: 30px;
+    text-decoration: none;
+    font-weight: 500;
+    transition: background 0.3s, transform 0.3s;
+}
+
+.contact-links a:hover {
+    background: #e68900;
+    transform: translateY(-3px);
+}
+
+/* ===================================================
+   ===== Floating Dark Mode Toggle =====
+=================================================== */
+#darkModeToggle {
+    position: fixed;
+    bottom: 65px;
+    right: 20px;
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    border: none;
+    background: #000000;
+    color: #fff;
+    font-size: 22px;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transition: background 0.3s, transform 0.3s;
+    z-index: 1000;
+}
+
+/* Hover effect */
+#darkModeToggle:hover {
+    transform: rotate(20deg) scale(1.1);
+}
+
+/* ===== Scroll to Top Button ===== */
+#scrollTopBtn {
+    position: fixed;
+    bottom: 65px;
+    left: 20px;
+    z-index: 2000;
+    width: 50px;
+    height: 50px;
+    border: none;
+    outline: none;
+    background-color: #ff9800;
+    color: white;
+    cursor: pointer;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
+    transition: opacity 0.4s, transform 0.3s, background 0.3s, box-shadow 0.3s;
+    opacity: 0;
+    pointer-events: none;
+    animation: pulse 2s infinite ease-in-out;
+}
+
+/* Show when scrolling (with pulse glow) */
+#scrollTopBtn.show {
+    opacity: 1;
+    pointer-events: auto;
+    animation: pulse 2s infinite ease-in-out;
+}
+
+/* Stop pulse on hover and add stronger glow */
+#scrollTopBtn:hover {
+    background-color: #e68900;
+    transform: scale(1.1);
+    animation: none;
+    /* stop pulsing */
+    box-shadow: 0 0 18px rgba(255, 152, 0, 0.8);
+}
+
+/* Pulse animation */
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
+    }
+
+    50% {
+        transform: scale(1.1);
+        box-shadow: 0 0 16px rgba(255, 152, 0, 0.6);
+    }
+
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
+    }
+}
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..3402554
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,215 @@
+/* ===================================================
+   ===== Hero Section =====
+=================================================== */
+.hero {
+  background: url('/images/hero.png') no-repeat center/cover;
+  height: 70vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: #fff;
+  position: relative;
+}
+
+.hero::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  max-width: 800px;
+  padding: 20px;
+}
+
+.hero h1 {
+  font-size: 3rem;
+}
+
+.hero p {
+  font-size: 1.2rem;
+  margin: 1rem 0;
+}
+
+.hero .btn {
+  display: inline-block;
+  padding: 12px 25px;
+  border-radius: 30px;
+  background: #ff9800;
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  transition: background 0.3s, transform 0.3s;
+}
+
+.hero .btn:hover {
+  background: #e68900;
+  transform: translateY(-3px);
+}
+
+/* ===================================================
+   ===== About Section =====
+=================================================== */
+#about {
+  /* background: #fff; */
+  background-color: #e9ecef;
+  padding: 3rem 2rem;
+  border-radius: 12px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+/* ===================================================
+   ===== Teck Stack Section =====
+=================================================== */
+#tech-stack {
+  text-align: center;
+  /* height: 20vh; */
+}
+
+.tech-stack .btn {
+  display: inline-block;
+  padding: 12px 25px;
+  border-radius: 30px;
+  background: #ff9800;
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  transition: background 0.3s, transform 0.3s;
+}
+
+.tech-stack .btn:hover {
+  background: #e68900;
+  transform: translateY(-3px);
+}
+
+/* ===================================================
+   ===== Skills Section =====
+=================================================== */
+#skills {
+  text-align: center;
+  background-color: #dee2e6;
+}
+
+.skills-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1.2rem;
+}
+
+.skill-card {
+  background: #fff;
+  padding: 1.5rem;
+  text-align: center;
+  border-radius: 12px;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.skill-card i {
+  font-size: 2rem;
+  margin-bottom: 10px;
+  color: #ff9800;
+}
+
+.skill-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* ===================================================
+   ===== Projects Section =====
+=================================================== */
+#projects {
+  text-align: center;
+  background-color: #ced4da;
+}
+
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.project-card {
+  background: #fff;
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.project-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* ===================================================
+   ===== Dark Mode =====
+=================================================== */
+body.dark {
+  background: #181818;
+  color: #e0e0e0;
+}
+
+body.dark header.navbar {
+  background: #111;
+}
+
+body.dark nav ul li a {
+  color: #e0e0e0;
+}
+
+body.dark nav ul li a:hover {
+  color: #ff9800;
+}
+
+body.dark #about,
+body.dark #skills,
+body.dark #projects {
+  background-color: #467db4;
+  color: #000;
+}
+
+body.dark .skill-card,
+body.dark .project-card {
+  background: #242424;
+  color: #e0e0e0;
+}
+
+body.dark footer {
+  background: #111;
+}
+
+body.dark .hero::after {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+/* ===== Dark Mode Override ===== */
+body.dark #scrollTopBtn {
+  background-color: #ff9800;
+  color: #fff;
+}
+
+body.dark #scrollTopBtn:hover {
+  background-color: #e68900;
+}
+
+/* Dark mode appearance */
+body.dark #darkModeToggle {
+  background: #00bcd4;
+  /* Cyan glow in dark mode */
+  color: #000;
+  box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
+}
+
+body.dark #darkModeToggle:hover {
+  background: #3ce8ff;
+}
\ No newline at end of file
diff --git a/mini-services.css b/css/mini-services.css
similarity index 100%
rename from mini-services.css
rename to css/mini-services.css
diff --git a/services.css b/css/services.css
similarity index 92%
rename from services.css
rename to css/services.css
index 051704c..4320385 100644
--- a/services.css
+++ b/css/services.css
@@ -182,13 +182,13 @@ body.dark canvas {
    ===== Dark Mode =====
 =================================================== */
 body.dark {
-  background: #181818;
-  color: #e0e0e0;
+    background: #181818;
+    color: #e0e0e0;
 }
 
-body.dark .service-card{
-  background: #181818;
-  color: #e0e0e0;
+body.dark .service-card {
+    background: #181818;
+    color: #e0e0e0;
 }
 
 body.dark .service-card:hover {
@@ -248,4 +248,20 @@ body.dark .service-card:hover p {
     50% {
         transform: translateY(-5px);
     }
+}
+
+/* Services Offer Section */
+#services-offer {
+    text-align: center;
+    background-color: #ced4da;
+}
+
+/* Live Projects Section */
+#live-projects {
+    text-align: center;
+}
+
+body.dark #services-offer {
+    background-color: #467db4;
+    color: #000;
 }
\ No newline at end of file
diff --git a/whatsapp-floating.css b/css/whatsapp-floating.css
similarity index 100%
rename from whatsapp-floating.css
rename to css/whatsapp-floating.css
diff --git a/images/hero.png b/images/hero.png
new file mode 100644
index 0000000..957f8a2
Binary files /dev/null and b/images/hero.png differ
diff --git a/index.html b/index.html
index 7975392..46bcb5d 100644
--- a/index.html
+++ b/index.html
@@ -10,13 +10,15 @@
   <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
   <!-- Main Stylesheet -->
-  <link rel="stylesheet" href="main.css">
-  <link rel="stylesheet" href="mini-services.css">
-  <link rel="stylesheet" href="whatsapp-floating.css">
+  <link rel="stylesheet" href="/css/main.css">
+  <link rel="stylesheet" href="/css/common.css">
+  <link rel="stylesheet" href="/css/mini-services.css">
+  <link rel="stylesheet" href="/css/whatsapp-floating.css">
   <!-- Font Awesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <!-- <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script> -->
 </head>
+
 <style>
   a {
     color: sandybrown;
@@ -36,10 +38,10 @@
       <li><a href="#hero" class="active">Home</a></li>
       <li><a href="#about">About</a></li>
       <li><a href="#tech-stack">Tech Stack</a></li>
+      <li><a href="services.html">Services</a></li> <!-- New Services link -->
       <li><a href="#skills">Skills</a></li>
       <li><a href="#projects">Projects</a></li>
       <li><a href="#contact">Contact</a></li>
-      <li><a href="services.html" target="_blank"">Services</a></li> <!-- New Services link -->
     </ul>
     <!-- hamburger icon -->
     <div style="display: flex; align-items: center;">
@@ -62,7 +64,8 @@ <h2>About Me</h2>
     <p>
       I am a Java Developer with hands-on experience in building backend systems, REST APIs, and enterprise
       applications.
-      Skilled in <strong>Java, Spring Boot, Hibernate, Spring Framework, SQL, NoSQL</strong>, and <strong>Cloud Technologies</strong>.
+      Skilled in <strong>Java, Spring Boot, Hibernate, Spring Framework, SQL, NoSQL</strong>, and <strong>Cloud
+        Technologies</strong>.
       Passionate about writing clean, maintainable, and efficient code.
     </p>
   </section>
@@ -70,7 +73,7 @@ <h2>About Me</h2>
   <!-- Tech Stack Section -->
   <section id="tech-stack" class="container fade-in tech-stack">
     <h2>Tech Stack Dashboard</h2>
-      <a href="https://vimal-java-dev.github.io/" target="_blank" class="btn">Tap to read Overview</a>
+    <a href="https://vimal-java-dev.github.io/" target="_blank" class="btn">Tap to read Overview</a>
   </section>
 
   <!-- Mini Services Preview Section -->
@@ -102,7 +105,7 @@ <h3>Project Consulting</h3>
     </div>
 
     <div class="services-preview" style="margin-top:20px">
-      <a href="services.html" target="_blank" class="btn">View All Services</a><br/><br/>
+      <a href="services.html" target="_blank" class="btn">View All Services</a><br /><br />
       <a href="https://alexfoodcorner.netlify.app/" target="_blank" class="btn">Alex Food Corner Live Project</a>
     </div>
   </section>
@@ -174,7 +177,7 @@ <h3>Jira</h3>
       <div class="skill-card"><a href="https://vimal-java-dev.github.io/#links" target="_blank">
           <i class="fab fa-github"></i><br>GitHub</a></div>
     </div>
-  </section>
+  </section><br />
 
   <!-- Projects Section -->
   <section id="projects" class="container fade-in">
@@ -213,7 +216,7 @@ <h3>Desktop Chat Application (Local Area Network)</h3>
         <p>Java Remote Method Invocation + Stubs + Skeletons, Swing Framework.</p>
       </div>
     </div>
-  </section>
+  </section><br />
 
   <!-- Contact Section -->
   <section id="contact" class="container fade-in">
@@ -239,7 +242,7 @@ <h2>Contact Me</h2>
 
   <!-- Dark Mode Toggle -->
   <button id="darkModeToggle" class="tooltip">🌙
-    <!-- <span class="tooltiptext" id="toggleTooltip">Switch to dark mode</span> -->
+    <span class="tooltiptext" id="toggleTooltip">Switch to dark mode</span>
   </button>
 
   <!-- Scroll to Top Button -->
@@ -247,7 +250,9 @@ <h2>Contact Me</h2>
     <i class="fas fa-arrow-up"></i>
   </button>
 
-  <script src="script.js"></script>
+  <!-- JS -->
+  <script src="/js/common.js"></script>
+  <script src="/js/main.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/js/common.js b/js/common.js
new file mode 100644
index 0000000..9997b14
--- /dev/null
+++ b/js/common.js
@@ -0,0 +1,114 @@
+/* ===== common.js ===== */
+document.addEventListener("DOMContentLoaded", () => {
+  /* ============================
+     Hamburger Menu (☰ / ✖)
+  ============================ */
+  const hamburger = document.getElementById("hamburger");
+  const navLinks = document.getElementById("nav-links");
+  const navItems = document.querySelectorAll("nav ul li a");
+
+  if (hamburger && navLinks) {
+    hamburger.addEventListener("click", () => {
+      navLinks.classList.toggle("active");
+      hamburger.classList.toggle("active");
+      hamburger.textContent = navLinks.classList.contains("active") ? "✖" : "☰";
+    });
+
+    // Close the menu when any nav link is clicked
+    navItems.forEach(link => {
+      link.addEventListener("click", () => {
+        if (navLinks.classList.contains("active")) {
+          navLinks.classList.remove("active");
+          hamburger.classList.remove("active");
+          hamburger.textContent = "☰";
+        }
+      });
+    });
+
+    /* ✅ NEW: Close the menu when clicking outside */
+    document.addEventListener("click", (event) => {
+      const isClickInside = navLinks.contains(event.target) || hamburger.contains(event.target);
+      if (!isClickInside && navLinks.classList.contains("active")) {
+        navLinks.classList.remove("active");
+        hamburger.classList.remove("active");
+        hamburger.textContent = "☰";
+      }
+    });
+
+  }
+
+  /* ============================
+     Scroll-to-Top Button
+  ============================ */
+  const scrollTopBtn = document.getElementById("scrollTopBtn");
+
+  if (scrollTopBtn) {
+    window.addEventListener("scroll", () => {
+      if (document.documentElement.scrollTop > 150) {
+        scrollTopBtn.classList.add("show");
+      } else {
+        scrollTopBtn.classList.remove("show");
+      }
+    });
+
+    scrollTopBtn.addEventListener("click", () => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    });
+  }
+
+  // ============================
+  // Fade-In Animation on Scroll with Perfect Cascade & Staggered Delay
+  // ============================
+  const faders = document.querySelectorAll(".fade-in");
+
+  if (faders.length) {
+    const appearOptions = {
+      threshold: 0.2,
+      rootMargin: "0px 0px -50px 0px",
+    };
+
+    const appearOnScroll = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) return;
+
+        // Get the index of this element in the NodeList
+        const i = Array.from(faders).indexOf(entry.target);
+
+        // Set animation delay dynamically for cascading effect
+        entry.target.style.animationDelay = `${i * 150}ms`;
+        entry.target.classList.add("visible");
+
+        observer.unobserve(entry.target); // stop observing once visible
+      });
+    }, appearOptions);
+
+    // Observe each .fade-in element
+    faders.forEach(fader => appearOnScroll.observe(fader));
+  }
+
+  /* ============================
+     ScrollSpy: Highlight Active Nav Link
+  ============================ */
+  const sections = document.querySelectorAll("section");
+
+  if (sections.length && navItems.length) {
+    window.addEventListener("scroll", () => {
+      let current = "";
+
+      sections.forEach(section => {
+        const sectionTop = section.offsetTop - 100;
+        const sectionHeight = section.clientHeight;
+        if (pageYOffset >= sectionTop && pageYOffset < sectionTop + sectionHeight) {
+          current = section.getAttribute("id");
+        }
+      });
+
+      navItems.forEach(link => {
+        link.classList.remove("active");
+        if (link.getAttribute("href") === `#${current}`) {
+          link.classList.add("active");
+        }
+      });
+    });
+  }
+});
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..00723d2
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,33 @@
+// ===== localStorage theme handling =====
+const darkModeToggle = document.getElementById("darkModeToggle");
+const body = document.body;
+
+// Apply saved theme on load
+if (localStorage.getItem("theme") === "dark") {
+  document.documentElement.classList.add("dark");
+  body.classList.add("dark");
+  darkModeToggle.textContent = "☀️"; // show sun icon if dark mode is active
+} else {
+  darkModeToggle.textContent = "🌙"; // show moon icon if light mode is active
+}
+
+// ===== Dark Mode Persist Across Pages =====
+darkModeToggle.addEventListener("click", () => {
+  const isDark = body.classList.toggle("dark");
+  darkModeToggle.textContent = isDark ? "☀️" : "🌙";
+  localStorage.setItem("theme", isDark ? "dark" : "light");
+
+  // ===== Optional for Services Page =====
+  if (typeof updateOverlayGradient === "function") updateOverlayGradient();
+
+  // Rebuild particles only if available
+  if (typeof initParticles === "function") {
+    setTimeout(() => {
+      if (window.pJSDom && pJSDom.length) {
+        pJSDom[0].pJS.fn.vendors.destroypJS();
+        document.getElementById("particles-js").innerHTML = "";
+      }
+      initParticles();
+    }, 300);
+  }
+});
diff --git a/services.js b/js/services.js
similarity index 75%
rename from services.js
rename to js/services.js
index 6ffc269..80cdf9a 100644
--- a/services.js
+++ b/js/services.js
@@ -120,56 +120,8 @@ function updateToggleIcon() {
     } else {
         darkModeToggle.textContent = "🌙"; // Dark mode icon
         darkModeToggle.title = "Switch to dark mode";
-        darkModeToggle.style.background = "#ff9800";
+        darkModeToggle.style.background = "#000000";
         darkModeToggle.style.color = "#fff";
     }
 }
 
-// Hamburger Menu
-const hamburger = document.getElementById("hamburger");
-const navLinks = document.getElementById("nav-links");
-
-if (hamburger && navLinks) {
-    hamburger.addEventListener("click", () => {
-        navLinks.classList.toggle("active");
-    });
-}
-
-// Scroll Fade-in Animation with staggered delay
-document.addEventListener("DOMContentLoaded", function () {
-    const faders = document.querySelectorAll(".fade-in");
-
-    const appearOptions = {
-        threshold: 0.2,
-        rootMargin: "0px 0px -50px 0px",
-    };
-
-    const appearOnScroll = new IntersectionObserver(function (entries, observer) {
-        entries.forEach(entry => {
-            if (!entry.isIntersecting) return;
-            entry.target.classList.add("visible");
-            observer.unobserve(entry.target);
-        });
-    }, appearOptions);
-
-    faders.forEach(fader => {
-        appearOnScroll.observe(fader);
-    });
-});
-
-/* ===== Scroll-to-Top Button ===== */
-const scrollTopBtn = document.getElementById("scrollTopBtn");
-
-window.addEventListener("scroll", () => {
-    if (document.documentElement.scrollTop > 150) {
-        scrollTopBtn.classList.add("show");
-    } else {
-        scrollTopBtn.classList.remove("show");
-    }
-});
-
-scrollTopBtn.addEventListener("click", () => {
-    window.scrollTo({ top: 0, behavior: "smooth" });
-});
-
-
diff --git a/main.css b/main.css
deleted file mode 100644
index a1c63ea..0000000
--- a/main.css
+++ /dev/null
@@ -1,480 +0,0 @@
-/* ===================================================
-   ===== Global Styles =====
-=================================================== */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-body {
-  background: #f4f4f4;
-  color: #333;
-  line-height: 1.6;
-  transition: background-color 0.6s ease, color 0.6s ease;
-  scroll-behavior: smooth;
-}
-
-/* Headings */
-h1,
-h2,
-h3 {
-  font-weight: 600;
-  margin-bottom: 1rem;
-}
-
-/* ===================================================
-   ===== Navbar =====
-=================================================== */
-.navbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #333;
-  padding: 10px 20px;
-  color: white;
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 1000;
-}
-
-.logo {
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.nav-links {
-  list-style: none;
-  display: flex;
-  gap: 20px;
-}
-
-.nav-links li a {
-  text-decoration: none;
-  color: white;
-  transition: color 0.3s;
-}
-
-.nav-links li a:hover,
-.nav-links li a.active {
-  color: #ff6347;
-}
-
-/* Hamburger menu */
-.hamburger {
-  display: none;
-  font-size: 28px;
-  cursor: pointer;
-}
-
-@media (max-width: 768px) {
-  .nav-links {
-    position: absolute;
-    top: 60px;
-    right: 0;
-    background-color: #333;
-    flex-direction: column;
-    width: 200px;
-    display: none;
-    padding: 10px;
-    border-radius: 5px;
-  }
-
-  .nav-links li {
-    margin: 10px 0;
-  }
-
-  .hamburger {
-    display: block;
-  }
-
-  .nav-links.active {
-    display: flex;
-  }
-}
-
-/* ===================================================
-   ===== Hero Section =====
-=================================================== */
-.hero {
-  background: url('https://source.unsplash.com/1600x800/?technology,programming') no-repeat center/cover;
-  height: 70vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  color: #fff;
-  position: relative;
-}
-
-.hero::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.55);
-}
-
-.hero-content {
-  position: relative;
-  z-index: 1;
-  max-width: 800px;
-  padding: 20px;
-}
-
-.hero h1 {
-  font-size: 3rem;
-}
-
-.hero p {
-  font-size: 1.2rem;
-  margin: 1rem 0;
-}
-
-.hero .btn {
-  display: inline-block;
-  padding: 12px 25px;
-  border-radius: 30px;
-  background: #ff9800;
-  color: #fff;
-  text-decoration: none;
-  font-weight: bold;
-  transition: background 0.3s, transform 0.3s;
-}
-
-.hero .btn:hover {
-  background: #e68900;
-  transform: translateY(-3px);
-}
-
-/* ===================================================
-   ===== Containers & Animations =====
-=================================================== */
-.container {
-  width: 85%;
-  margin: auto;
-  padding: 3rem 0;
-}
-
-/* Fade-in animation */
-.fade-in {
-  opacity: 0;
-  transform: translateY(30px);
-  animation: fadeInUp 1s forwards;
-}
-
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ===================================================
-   ===== About Section =====
-=================================================== */
-#about {
-  background: #fff;
-  padding: 3rem 2rem;
-  border-radius: 12px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-}
-
-/* ===================================================
-   ===== Teck Stack Section =====
-=================================================== */
-#tech-stack {
-  text-align: center;
-  height: 20vh;
-}
-
-.tech-stack .btn {
-  display: inline-block;
-  padding: 12px 25px;
-  border-radius: 30px;
-  background: #ff9800;
-  color: #fff;
-  text-decoration: none;
-  font-weight: bold;
-  transition: background 0.3s, transform 0.3s;
-}
-
-.tech-stack .btn:hover {
-  background: #e68900;
-  transform: translateY(-3px);
-}
-
-/* ===================================================
-   ===== Skills Section =====
-=================================================== */
-#skills {
-  text-align: center;
-}
-
-.skills-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1.2rem;
-}
-
-.skill-card {
-  background: #fff;
-  padding: 1.5rem;
-  text-align: center;
-  border-radius: 12px;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s, box-shadow 0.3s;
-}
-
-.skill-card i {
-  font-size: 2rem;
-  margin-bottom: 10px;
-  color: #ff9800;
-}
-
-.skill-card:hover {
-  transform: translateY(-6px);
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-}
-
-/* ===================================================
-   ===== Projects Section =====
-=================================================== */
-#projects {
-  text-align: center;
-}
-
-.projects-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
-}
-
-.project-card {
-  background: #fff;
-  padding: 1.5rem;
-  border-radius: 12px;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s, box-shadow 0.3s;
-}
-
-.project-card:hover {
-  transform: translateY(-6px);
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-}
-
-/* ===================================================
-   ===== Contact Section =====
-=================================================== */
-#contact {
-  text-align: center;
-}
-
-.contact-links a {
-  display: inline-block;
-  margin: 10px;
-  padding: 12px 20px;
-  background: #ff9800;
-  color: #fff;
-  border-radius: 30px;
-  text-decoration: none;
-  font-weight: 500;
-  transition: background 0.3s, transform 0.3s;
-}
-
-.contact-links a:hover {
-  background: #e68900;
-  transform: translateY(-3px);
-}
-
-/* ===================================================
-   ===== Footer =====
-=================================================== */
-footer {
-  text-align: center;
-  padding: 1.2rem;
-  background: #222;
-  color: #fff;
-  margin-top: 2rem;
-  font-size: 0.9rem;
-}
-
-/* ===================================================
-   ===== Dark Mode =====
-=================================================== */
-body.dark {
-  background: #181818;
-  color: #e0e0e0;
-}
-
-body.dark header.navbar {
-  background: #111;
-}
-
-body.dark nav ul li a {
-  color: #e0e0e0;
-}
-
-body.dark nav ul li a:hover {
-  color: #ff9800;
-}
-
-body.dark #about,
-body.dark .skill-card,
-body.dark .project-card {
-  background: #242424;
-  color: #e0e0e0;
-}
-
-body.dark footer {
-  background: #111;
-}
-
-body.dark .hero::after {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-/* ===== Dark Mode Override ===== */
-body.dark #scrollTopBtn {
-  background-color: #ff9800;
-  color: #fff;
-}
-
-body.dark #scrollTopBtn:hover {
-  background-color: #e68900;
-}
-
-/* ===================================================
-   ===== Floating Dark Mode Toggle =====
-=================================================== */
-#darkModeToggle {
-  position: fixed;
-  bottom: 65px;
-  right: 20px;
-  width: 55px;
-  height: 55px;
-  border-radius: 50%;
-  border: none;
-  background: #000000;
-  color: #fff;
-  font-size: 22px;
-  cursor: pointer;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  transition: background 0.3s, transform 0.3s;
-  z-index: 1000;
-}
-
-/* Hover effect */
-#darkModeToggle:hover {
-  transform: rotate(20deg) scale(1.1);
-}
-
-/* Dark mode appearance */
-body.dark #darkModeToggle {
-  background: #00bcd4;
-  /* Cyan glow in dark mode */
-  color: #000;
-  box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
-}
-
-body.dark #darkModeToggle:hover {
-  background: #00acc1;
-}
-
-/* Tooltip */
-.tooltip .tooltiptext {
-  visibility: hidden;
-  width: 130px;
-  background: #333;
-  color: #fff;
-  text-align: center;
-  padding: 6px;
-  border-radius: 6px;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%;
-  left: 50%;
-  margin-left: -65px;
-  opacity: 0;
-  transition: opacity 0.4s;
-  font-size: 0.8rem;
-}
-
-.tooltip .tooltiptext::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: #333 transparent transparent transparent;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
-
-/* ===== Scroll to Top Button ===== */
-#scrollTopBtn {
-  position: fixed;
-  bottom: 65px;
-  left: 20px;
-  z-index: 2000;
-  width: 50px;
-  height: 50px;
-  border: none;
-  outline: none;
-  background-color: #ff9800;
-  color: white;
-  cursor: pointer;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 22px;
-  box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
-  transition: opacity 0.4s, transform 0.3s, background 0.3s, box-shadow 0.3s;
-  opacity: 0;
-  pointer-events: none;
-  animation: pulse 2s infinite ease-in-out;
-}
-
-/* Show when scrolling (with pulse glow) */
-#scrollTopBtn.show {
-  opacity: 1;
-  pointer-events: auto;
-  animation: pulse 2s infinite ease-in-out;
-}
-
-/* Stop pulse on hover and add stronger glow */
-#scrollTopBtn:hover {
-  background-color: #e68900;
-  transform: scale(1.1);
-  animation: none;
-  /* stop pulsing */
-  box-shadow: 0 0 18px rgba(255, 152, 0, 0.8);
-}
-
-/* Pulse animation */
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-    box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
-  }
-
-  50% {
-    transform: scale(1.1);
-    box-shadow: 0 0 16px rgba(255, 152, 0, 0.6);
-  }
-
-  100% {
-    transform: scale(1);
-    box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
-  }
-}
diff --git a/script.js b/script.js
deleted file mode 100644
index c616171..0000000
--- a/script.js
+++ /dev/null
@@ -1,93 +0,0 @@
-// ===== localStorage theme handling =====
-if (localStorage.getItem("theme") === "dark") {
-  document.documentElement.classList.add("dark");
-  document.body.classList.add("dark");
-}
-
-// ===== Dark Mode Persist Across Pages =====
-const darkModeToggle = document.getElementById("darkModeToggle");
-const body = document.body;
-
-// Apply saved theme immediately
-// if (localStorage.getItem("theme") === "dark") {
-//   body.classList.add("dark");
-//   darkModeToggle.textContent = "☀️";
-// } else {
-//   darkModeToggle.textContent = "🌙";
-// }
-
-// Toggle + Save preference
-darkModeToggle.addEventListener("click", () => {
-  const isDark = body.classList.toggle("dark");
-  darkModeToggle.textContent = isDark ? "☀️" : "🌙";
-  localStorage.setItem("theme", isDark ? "dark" : "light");
-
-  // ===== Optional for Services Page =====
-  if (typeof updateOverlayGradient === "function") updateOverlayGradient();
-
-  // Rebuild particles only if available
-  if (typeof initParticles === "function") {
-    setTimeout(() => {
-      if (window.pJSDom && pJSDom.length) {
-        pJSDom[0].pJS.fn.vendors.destroypJS();
-        document.getElementById("particles-js").innerHTML = "";
-      }
-      initParticles();
-    }, 300);
-  }
-});
-
-
-/* ===== Scroll-to-Top Button ===== */
-const scrollTopBtn = document.getElementById("scrollTopBtn");
-
-window.addEventListener("scroll", () => {
-  if (document.documentElement.scrollTop > 150) {
-    scrollTopBtn.classList.add("show");
-  } else {
-    scrollTopBtn.classList.remove("show");
-  }
-});
-
-scrollTopBtn.addEventListener("click", () => {
-  window.scrollTo({ top: 0, behavior: "smooth" });
-});
-
-/* ===== Hamburger Menu & ScrollSpy ===== */
-document.addEventListener("DOMContentLoaded", () => {
-  const hamburger = document.getElementById('hamburger');
-  const navLinks = document.getElementById('nav-links');
-  const navItems = document.querySelectorAll("nav ul li a");
-  const sections = document.querySelectorAll("section");
-
-  hamburger.addEventListener('click', () => {
-    navLinks.classList.toggle('active');
-  });
-
-  navItems.forEach(link => {
-    link.addEventListener('click', () => {
-      if (navLinks.classList.contains('active')) {
-        navLinks.classList.remove('active');
-      }
-    });
-  });
-
-  window.addEventListener("scroll", () => {
-    let current = "";
-
-    sections.forEach(section => {
-      const sectionTop = section.offsetTop - 100;
-      const sectionHeight = section.clientHeight;
-      if (pageYOffset >= sectionTop && pageYOffset < sectionTop + sectionHeight) {
-        current = section.getAttribute("id");
-      }
-    });
-
-    navItems.forEach(link => {
-      link.classList.remove("active");
-      if (link.getAttribute("href") === `#${current}`) {
-        link.classList.add("active");
-      }
-    });
-  });
-});
\ No newline at end of file
diff --git a/services.html b/services.html
index 97b598d..9449eff 100644
--- a/services.html
+++ b/services.html
@@ -10,15 +10,25 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
     <!-- CSS -->
-    <link rel="stylesheet" href="main.css">
-    <link rel="stylesheet" href="services.css">
-    <link rel="stylesheet" href="whatsapp-floating.css">
+    <link rel="stylesheet" href="/css/services.css">
+    <link rel="stylesheet" href="/css/common.css">
+    <link rel="stylesheet" href="/css/whatsapp-floating.css">
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <!-- Particles.js Library -->
     <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
 </head>
 
+<style>
+    a {
+        color: sandybrown;
+    }
+
+    a:hover {
+        color: blue;
+    }
+</style>
+
 <body>
     <!-- Navbar -->
     <nav class="navbar">
@@ -26,8 +36,9 @@
         <ul class="nav-links" id="nav-links">
             <li><a href="index.html">Home</a></li>
             <li><a href="services.html" class="active">Services</a></li>
-            <li><a href="index.html#projects">Projects</a></li>
-            <li><a href="index.html#contact">Contact</a></li>
+            <li><a href="#services-offer">Offer Services</a></li>
+            <li><a href="#live-projects">Live Projects</a></li>
+            <li><a href="#contact">Contact</a></li>
         </ul>
         <!-- hamburger icon -->
         <div style="display: flex; align-items: center;">
@@ -47,7 +58,7 @@ <h1>Our <span class="highlight">Professional Services</span></h1>
     </section>
 
     <!-- Services Section -->
-    <section class="container" style="text-align: center;">
+    <section id="services-offer" class="container">
         <h2 class="section-title fade-in">Services We Offer</h2>
         <p class="fade-in">Explore our expertise to scale your projects efficiently:</p>
 
@@ -83,15 +94,33 @@ <h3>Security & Optimization</h3>
                 <p>Secure, optimized, and maintainable solutions following best practices.</p>
             </div>
         </div>
+    </section><br />
 
+    <!-- Live Projects Section -->
+    <section id="live-projects">
+        <h2>Live Projects</h2>
         <div class="cta-section fade-in" style="--delay:0.6s; margin-bottom: 60px;">
             <a href="https://alexfoodcorner.netlify.app/" target="_blank" class="btn">Alex Food Corner Live Project</a>
         </div>
     </section>
 
+    <!-- Contact Section -->
+    <section id="contact" class="container fade-in">
+        <h2>Contact Me</h2>
+        <p>If you’d like to collaborate, feel free to reach out:</p>
+        <div class="contact-links">
+            <a href="tel:+919638474047"><i class="fas fa-phone"></i> Call</a>
+            <a href="mailto:vimal.patel@vimaltech.dev"><i class="fas fa-envelope"></i> Email</a>
+            <a href="https://www.linkedin.com/in/vimaltech-dev/" target="_blank"><i class="fab fa-linkedin"></i>
+                LinkedIn</a>
+        </div>
+    </section>
+
     <!-- Floating WhatsApp -->
     <a href="https://wa.me/919638474047?text=Hello%20Vimal%2C%0AI%20would%20like%20to%20know%20more%20about%20your%20tech%20services."
-        class="whatsapp-float" target="_blank"><i class="fab fa-whatsapp"></i></a>
+        class="whatsapp-float" target="_blank">
+        <i class="fab fa-whatsapp"></i>
+    </a>
 
     <footer>
         <p>&copy; 2025 Vimal Patel | Java Developer Portfolio</p>
@@ -105,7 +134,8 @@ <h3>Security & Optimization</h3>
     </button>
 
     <!-- JS -->
-    <script src="services.js"></script>
+    <script src="/js/common.js"></script>
+    <script src="/js/services.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
deleted file mode 100644
index 59971d1..0000000
--- a/style.css
+++ /dev/null
@@ -1,394 +0,0 @@
-/* ===== Global Styles ===== */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-body {
-  background: #f4f4f4;
-  color: #333;
-  line-height: 1.6;
-  transition: background-color 0.6s ease, color 0.6s ease;
-  scroll-behavior: smooth;
-}
-
-/* Headings */
-h1,
-h2,
-h3 {
-  font-weight: 600;
-  margin-bottom: 1rem;
-}
-
-/* ===== Navbar ===== */
-header.navbar {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  background: #222;
-  color: #fff;
-  padding: 1rem 5%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-}
-
-header .logo {
-  font-size: 1.3rem;
-  font-weight: bold;
-  letter-spacing: 1px;
-}
-
-nav ul {
-  list-style: none;
-  display: flex;
-  gap: 25px;
-}
-
-nav ul li a {
-  color: #fff;
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.3s, border-bottom 0.3s;
-}
-
-nav ul li a:hover {
-  color: #ff9800;
-  border-bottom: 2px solid #ff9800;
-}
-
-/* ===== Hero Section ===== */
-.hero {
-  background: url('https://source.unsplash.com/1600x800/?technology,programming') no-repeat center/cover;
-  height: 70vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  color: #fff;
-  position: relative;
-}
-
-.hero::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.55);
-}
-
-.hero-content {
-  position: relative;
-  z-index: 1;
-  max-width: 800px;
-  padding: 20px;
-}
-
-.hero h1 {
-  font-size: 3rem;
-}
-
-.hero p {
-  font-size: 1.2rem;
-  margin: 1rem 0;
-}
-
-.hero .btn {
-  display: inline-block;
-  padding: 12px 25px;
-  border-radius: 30px;
-  background: #ff9800;
-  color: #fff;
-  text-decoration: none;
-  font-weight: bold;
-  transition: background 0.3s, transform 0.3s;
-}
-
-.hero .btn:hover {
-  background: #e68900;
-  transform: translateY(-3px);
-}
-
-/* ===== Containers ===== */
-.container {
-  width: 85%;
-  margin: auto;
-  padding: 3rem 0;
-}
-
-/* Fade-in animation */
-.fade-in {
-  opacity: 0;
-  transform: translateY(30px);
-  animation: fadeInUp 1s forwards;
-}
-
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ===== About Section ===== */
-#about {
-  background: #fff;
-  padding: 3rem 2rem;
-  border-radius: 12px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-}
-
-/* ===== Skills Section ===== */
-.skills-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1.2rem;
-}
-
-.skill-card {
-  background: #fff;
-  padding: 1.5rem;
-  text-align: center;
-  border-radius: 12px;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s, box-shadow 0.3s;
-}
-
-.skill-card i {
-  font-size: 2rem;
-  margin-bottom: 10px;
-  color: #ff9800;
-}
-
-.skill-card:hover {
-  transform: translateY(-6px);
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-}
-
-/* ===== Projects Section ===== */
-.projects-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
-}
-
-.project-card {
-  background: #fff;
-  padding: 1.5rem;
-  border-radius: 12px;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s, box-shadow 0.3s;
-}
-
-.project-card:hover {
-  transform: translateY(-6px);
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-}
-
-/* ===== Contact Section ===== */
-#contact {
-  text-align: center;
-}
-
-.contact-links a {
-  display: inline-block;
-  margin: 10px;
-  padding: 12px 20px;
-  background: #ff9800;
-  color: #fff;
-  border-radius: 30px;
-  text-decoration: none;
-  font-weight: 500;
-  transition: background 0.3s, transform 0.3s;
-}
-
-.contact-links a:hover {
-  background: #e68900;
-  transform: translateY(-3px);
-}
-
-/* ===== Footer ===== */
-footer {
-  text-align: center;
-  padding: 1.2rem;
-  background: #222;
-  color: #fff;
-  margin-top: 2rem;
-  font-size: 0.9rem;
-}
-
-/* ===== Dark Mode ===== */
-body.dark {
-  background: #181818;
-  color: #e0e0e0;
-}
-
-body.dark header.navbar {
-  background: #111;
-}
-
-body.dark nav ul li a {
-  color: #e0e0e0;
-}
-
-body.dark nav ul li a:hover {
-  color: #ff9800;
-}
-
-body.dark #about,
-body.dark .skill-card,
-body.dark .project-card {
-  background: #242424;
-  color: #e0e0e0;
-}
-
-body.dark footer {
-  background: #111;
-}
-
-body.dark .hero::after {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-/* ===== Floating Dark Mode Toggle ===== */
-#darkModeToggle {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  border: none;
-  background: #ff9800;
-  color: #fff;
-  font-size: 22px;
-  cursor: pointer;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  transition: background 0.3s, transform 0.3s;
-  z-index: 1000;
-}
-
-#darkModeToggle:hover {
-  background: #e68900;
-  transform: rotate(20deg) scale(1.1);
-}
-
-/* Tooltip */
-.tooltip .tooltiptext {
-  visibility: hidden;
-  width: 130px;
-  background: #333;
-  color: #fff;
-  text-align: center;
-  padding: 6px;
-  border-radius: 6px;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%;
-  left: 50%;
-  margin-left: -65px;
-  opacity: 0;
-  transition: opacity 0.4s;
-  font-size: 0.8rem;
-}
-
-.tooltip .tooltiptext::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: #333 transparent transparent transparent;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
-
-/* Highlight active nav link */
-nav ul li a.active {
-  color: #ff9800;
-  border-bottom: 2px solid #ff9800;
-}
-
-/* ===== Scroll to Top Button ===== */
-#scrollTopBtn {
-  position: fixed;
-  bottom: 20px;
-  left: 20px;
-  z-index: 2000;
-  width: 50px;
-  height: 50px;
-  border: none;
-  outline: none;
-  background-color: #ff9800;
-  color: white;
-  cursor: pointer;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 22px;
-  box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
-  transition: opacity 0.4s, transform 0.3s, background 0.3s, box-shadow 0.3s;
-  opacity: 0;
-  pointer-events: none;
-  animation: pulse 2s infinite ease-in-out;
-}
-
-#scrollTopBtn:hover {
-  background-color: #e68900;
-  transform: scale(1.1);
-}
-
-/* ===== Dark Mode Override ===== */
-body.dark #scrollTopBtn {
-  background-color: #ff9800;
-  color: #fff;
-}
-
-body.dark #scrollTopBtn:hover {
-  background-color: #e68900;
-}
-
-/* Pulse animation */
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-    box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
-  }
-
-  50% {
-    transform: scale(1.1);
-    box-shadow: 0 0 16px rgba(255, 152, 0, 0.6);
-  }
-
-  100% {
-    transform: scale(1);
-    box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
-  }
-}
-
-/* Show when scrolling (with pulse glow) */
-#scrollTopBtn.show {
-  opacity: 1;
-  pointer-events: auto;
-  animation: pulse 2s infinite ease-in-out;
-}
-
-/* Stop pulse on hover and add stronger glow */
-#scrollTopBtn:hover {
-  background-color: #e68900;
-  transform: scale(1.1);
-  animation: none;
-  /* stop pulsing */
-  box-shadow: 0 0 18px rgba(255, 152, 0, 0.8);
-}
\ No newline at end of file