From 20cb07ec2ba63abd24a9867d8b10b52fd33020d9 Mon Sep 17 00:00:00 2001
From: Munnuri-Vaishnavi <vanivaishu49@gmail.com>
Date: Sun, 24 Aug 2025 19:57:02 +0530
Subject: [PATCH 1/4] Add files via upload

Moved dark/light toggler above Home link in mobile view and also matched its length to desktop.
---
 header.css  | 423 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 header.html | 211 ++++++++++++++++++++++++++
 2 files changed, 634 insertions(+)
 create mode 100644 header.css
 create mode 100644 header.html

diff --git a/header.css b/header.css
new file mode 100644
index 00000000..0e87ca29
--- /dev/null
+++ b/header.css
@@ -0,0 +1,423 @@
+
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  background-color: var(--bg-primary);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  padding: 1.5rem 0;
+}
+
+.navbar.scrolled {
+  background-color: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  padding: 0;
+}
+
+[data-theme='dark'] .navbar.scrolled {
+  background-color: rgba(10, 10, 10, 0.98);
+}
+
+.navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 2rem;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+/* Logo */
+.navbar-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--primary-400) !important;
+  text-decoration: none;
+}
+
+.navbar-logo:hover {
+  color: var(--primary-400) !important;
+  transform: none;
+}
+
+.navbar-logo img {
+  height: 2.5rem;
+  width: auto;
+  transition: transform 0.3s ease;
+}
+
+/* Desktop Navigation */
+.navbar-nav {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.nav-links {
+  display: flex;
+  gap: 2.5rem;
+  list-style: none;
+}
+
+.nav-link {
+  position: relative;
+  padding: 0.65rem 0;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  font-size: 1rem;
+}
+
+.nav-link::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 2px;
+  background-color: var(--primary-400);
+  border-radius: 3px;
+  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.nav-link:hover,
+.nav-link.active {
+  color: var(--primary-400);
+}
+
+.nav-link:hover::before,
+.nav-link.active::before {
+  width: 65%;
+}
+
+/* Auth Buttons */
+.auth-buttons {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+/* Theme Toggle */
+.navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.theme-toggle {
+  position: relative;
+  width: 3.5rem;
+  height: 2rem;
+  border-radius: 1.75rem;
+  background-color: var(--gray-200);
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.theme-toggle:hover {
+  transform: scale(1.05);
+}
+
+[data-theme='dark'] .theme-toggle {
+  background-color: var(--gray-700);
+}
+
+.theme-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  border-radius: 50%;
+  background-color: var(--white);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.theme-icon.sun {
+  left: 0.25rem;
+  opacity: 1;
+}
+
+.theme-icon.moon {
+  right: 0.25rem;
+  opacity: 0;
+}
+
+[data-theme='dark'] .theme-icon {
+  background-color: var(--gray-900);
+}
+
+[data-theme='dark'] .theme-icon.sun {
+  opacity: 0;
+  left: 1.75rem;
+}
+
+[data-theme='dark'] .theme-icon.moon {
+  opacity: 1;
+  right: 1.75rem;
+}
+
+.theme-toggle svg {
+  width: 0.9rem;
+  height: 0.9rem;
+  stroke: var(--gray-600);
+}
+
+[data-theme='dark'] .theme-toggle svg {
+  stroke: var(--gray-300);
+}
+
+/* Hamburger Menu*/
+.menu-toggle {
+  display: none;
+  position: relative;
+  width: 2.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  z-index: 1001;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.menu-toggle span {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  background-color: var(--text-primary);
+  border-radius: 3px;
+  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  transform-origin: center;
+}
+
+.menu-toggle span:nth-child(1) {
+  top: 0.5rem;
+}
+
+.menu-toggle span:nth-child(2) {
+  top: 1.1rem;
+}
+
+.menu-toggle span:nth-child(3) {
+  top: 1.7rem;
+}
+
+.menu-toggle.active span:nth-child(1) {
+  transform: translateY(0.6rem) rotate(45deg);
+  width: 100%;
+}
+
+.menu-toggle.active span:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.menu-toggle.active span:nth-child(3) {
+  transform: translateY(-0.6rem) rotate(-45deg);
+  width: 100%;
+}
+
+.menu-toggle:hover span:nth-child(1) {
+  transform: translateY(-0.1rem);
+}
+
+.menu-toggle:hover span:nth-child(3) {
+  transform: translateY(0.1rem);
+}
+
+.menu-toggle.active:hover span {
+  transform: none;
+}
+
+/* Mobile Menu */
+.mobile-nav {
+  position: fixed;
+  top: 0;
+  right: -100%;
+  width: 85%;
+  max-width: 380px;
+  height: 100vh;
+  background-color: var(--bg-primary);
+  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  transition: right 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+  padding: 6rem 2rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  overflow-y: auto;
+}
+
+.mobile-nav.active {
+  right: 0;
+}
+
+.mobile-nav-links {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+
+.mobile-nav-link {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.mobile-nav-link::before {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: var(--primary-500);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  opacity: 0;
+}
+
+.mobile-nav-link:hover,
+.mobile-nav-link.active {
+  background-color: var(--bg-secondary);
+  color: var(--primary-500);
+  padding-left: 1.5rem;
+}
+
+.mobile-nav-link:hover::before,
+.mobile-nav-link.active::before {
+  opacity: 1;
+  margin-right: 0.5rem;
+}
+
+.mobile-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--border-color);
+}
+
+/* ===== Fixed Mobile Theme Toggle ===== */
+.mobile-theme-toggle {
+  width: 3.5rem !important;
+  height: 2rem !important;
+  flex-shrink: 0;
+  padding: 0.25rem !important;
+  background-color: var(--gray-200) !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mobile-theme-toggle .theme-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.mobile-auth-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: auto;
+}
+
+/* Overlay */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.5) 30%,
+    rgba(0, 0, 0, 0.7) 100%
+  );
+  z-index: 999;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.4s ease;
+  backdrop-filter: blur(2px);
+}
+
+.overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Responsive Design */
+@media (max-width: 992px) {
+  .navbar-nav,
+  .auth-buttons {
+    display: none;
+  }
+
+  .menu-toggle {
+    display: flex;
+  }
+
+  .navbar-container {
+    padding: 0 1.5rem;
+  }
+}
+
+@media (min-width: 993px) {
+  .mobile-nav,
+  .overlay {
+    display: none !important;
+  }
+}
+
+/* Mobile adjustments */
+@media (max-width: 480px) {
+  .mobile-nav {
+    width: 90%;
+    padding: 5rem 1.5rem 2rem;
+  }
+
+  .mobile-nav-link {
+    font-size: 1.1rem;
+  }
+
+  .navbar-logo {
+    font-size: 1.3rem;
+  }
+
+  .navbar-logo img {
+    height: 2rem;
+  }
+
+  .navbar-actions {
+    display: none;
+  }
+}
+
+
+
diff --git a/header.html b/header.html
new file mode 100644
index 00000000..e6e9777a
--- /dev/null
+++ b/header.html
@@ -0,0 +1,211 @@
+<!-- Header (HTML) -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="NotesVault - Organize your academic notes and PYQs semester-wise"
+    />
+    <title>NotesVault - Header</title>
+
+    <!-- Favicon -->
+    <link rel="icon" href="assets/index/images/favicon.png" />
+    
+    <!-- Font Awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
+    />
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="../styling/variables.css" />
+    <link rel="stylesheet" href="../styling/base.css" />
+    <link rel="stylesheet" href="../styling/header.css" />
+
+  </head>
+
+  <body>
+    <header class="navbar">
+      <div class="navbar-container">
+        <a href="/index.html" class="navbar-logo">
+          <img src="#" alt="" />
+          <span>NotesVault</span>
+        </a>
+
+        <nav class="navbar-nav">
+          <ul class="nav-links">
+            <li><a href="index.html" class="nav-link">Home</a></li>
+            <li>
+              <a href="overview.html" class="nav-link">Overview</a>
+            </li>
+            <li>
+              <a href="dashboard.html" class="nav-link">Dashboard</a>
+            </li>
+            <li>
+              <a href="features.html" class="nav-link">Features</a>
+            </li>
+            <li><a href="about.html" class="nav-link">About</a></li>
+          </ul>
+        </nav>
+
+        <div class="navbar-actions">
+          <!-- Theme Toggle Button -->
+          <button class="theme-toggle" aria-label="Toggle dark mode">
+            <span class="theme-icon sun">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="5"></circle>
+                <line x1="12" y1="1" x2="12" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="23"></line>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                <line x1="1" y1="12" x2="3" y2="12"></line>
+                <line x1="21" y1="12" x2="23" y2="12"></line>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+              </svg>
+            </span>
+            <span class="theme-icon moon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+                ></path>
+              </svg>
+            </span>
+          </button>
+
+          <div class="auth-buttons">
+            <button
+              onclick="location.href='login.html'"
+              class="btn btn-secondary"
+            >
+              Login
+            </button>
+            <button
+              onclick="location.href='signup.html'"
+              class="btn btn-primary"
+            >
+              Sign Up
+            </button>
+          </div>
+        </div>
+
+        <button class="menu-toggle" aria-label="Menu">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+      </div>
+
+      <!-- Mobile Menu -->
+      <nav class="mobile-nav">
+        <div class="mobile-actions">
+          <!-- Mobile Theme Toggle -->
+          <button
+            class="theme-toggle mobile-theme-toggle"
+            aria-label="Toggle dark mode"
+          >
+            <span class="theme-icon sun">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="5"></circle>
+                <line x1="12" y1="1" x2="12" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="23"></line>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                <line x1="1" y1="12" x2="3" y2="12"></line>
+                <line x1="21" y1="12" x2="23" y2="12"></line>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+              </svg>
+            </span>
+            <span class="theme-icon moon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+                ></path>
+              </svg>
+            </span>
+          </button>
+          </div>
+        <ul class="mobile-nav-links">
+          <li>
+            <a href="index.html" class="mobile-nav-link">Home</a>
+          </li>
+          <li>
+            <a href="overview.html" class="mobile-nav-link"
+              >Overview</a
+            >
+          </li>
+          <li>
+            <a href="dashboard.html" class="mobile-nav-link"
+              >Dashboard</a
+            >
+          </li>
+          <li>
+            <a href="features.html" class="mobile-nav-link"
+              >Features</a
+            >
+          </li>
+          <li>
+            <a href="about.html" class="mobile-nav-link">About</a>
+          </li>
+        </ul>
+
+        
+
+          <div class="mobile-auth-buttons">
+            <button class="btn btn-secondary">Login</button>
+            <button class="btn btn-primary">Sign Up</button>
+          </div>
+        </div>
+      </nav>
+
+      <div class="overlay"></div>
+    </header>
+
+    <!-- JavaScript -->
+    <script src="../scripts/script.js" defer></script>
+  </body>
+</html>

From c35d60ad3f62012c07775546a9a51dd9b72fb349 Mon Sep 17 00:00:00 2001
From: Munnuri-Vaishnavi <vanivaishu49@gmail.com>
Date: Sun, 24 Aug 2025 20:37:24 +0530
Subject: [PATCH 2/4] Delete header.html

---
 header.html | 211 ----------------------------------------------------
 1 file changed, 211 deletions(-)
 delete mode 100644 header.html

diff --git a/header.html b/header.html
deleted file mode 100644
index e6e9777a..00000000
--- a/header.html
+++ /dev/null
@@ -1,211 +0,0 @@
-<!-- Header (HTML) -->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      name="description"
-      content="NotesVault - Organize your academic notes and PYQs semester-wise"
-    />
-    <title>NotesVault - Header</title>
-
-    <!-- Favicon -->
-    <link rel="icon" href="assets/index/images/favicon.png" />
-    
-    <!-- Font Awesome -->
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
-    />
-
-    <!-- CSS -->
-    <link rel="stylesheet" href="../styling/variables.css" />
-    <link rel="stylesheet" href="../styling/base.css" />
-    <link rel="stylesheet" href="../styling/header.css" />
-
-  </head>
-
-  <body>
-    <header class="navbar">
-      <div class="navbar-container">
-        <a href="/index.html" class="navbar-logo">
-          <img src="#" alt="" />
-          <span>NotesVault</span>
-        </a>
-
-        <nav class="navbar-nav">
-          <ul class="nav-links">
-            <li><a href="index.html" class="nav-link">Home</a></li>
-            <li>
-              <a href="overview.html" class="nav-link">Overview</a>
-            </li>
-            <li>
-              <a href="dashboard.html" class="nav-link">Dashboard</a>
-            </li>
-            <li>
-              <a href="features.html" class="nav-link">Features</a>
-            </li>
-            <li><a href="about.html" class="nav-link">About</a></li>
-          </ul>
-        </nav>
-
-        <div class="navbar-actions">
-          <!-- Theme Toggle Button -->
-          <button class="theme-toggle" aria-label="Toggle dark mode">
-            <span class="theme-icon sun">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <circle cx="12" cy="12" r="5"></circle>
-                <line x1="12" y1="1" x2="12" y2="3"></line>
-                <line x1="12" y1="21" x2="12" y2="23"></line>
-                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-                <line x1="1" y1="12" x2="3" y2="12"></line>
-                <line x1="21" y1="12" x2="23" y2="12"></line>
-                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-              </svg>
-            </span>
-            <span class="theme-icon moon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path
-                  d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
-                ></path>
-              </svg>
-            </span>
-          </button>
-
-          <div class="auth-buttons">
-            <button
-              onclick="location.href='login.html'"
-              class="btn btn-secondary"
-            >
-              Login
-            </button>
-            <button
-              onclick="location.href='signup.html'"
-              class="btn btn-primary"
-            >
-              Sign Up
-            </button>
-          </div>
-        </div>
-
-        <button class="menu-toggle" aria-label="Menu">
-          <span></span>
-          <span></span>
-          <span></span>
-        </button>
-      </div>
-
-      <!-- Mobile Menu -->
-      <nav class="mobile-nav">
-        <div class="mobile-actions">
-          <!-- Mobile Theme Toggle -->
-          <button
-            class="theme-toggle mobile-theme-toggle"
-            aria-label="Toggle dark mode"
-          >
-            <span class="theme-icon sun">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <circle cx="12" cy="12" r="5"></circle>
-                <line x1="12" y1="1" x2="12" y2="3"></line>
-                <line x1="12" y1="21" x2="12" y2="23"></line>
-                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-                <line x1="1" y1="12" x2="3" y2="12"></line>
-                <line x1="21" y1="12" x2="23" y2="12"></line>
-                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-              </svg>
-            </span>
-            <span class="theme-icon moon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path
-                  d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
-                ></path>
-              </svg>
-            </span>
-          </button>
-          </div>
-        <ul class="mobile-nav-links">
-          <li>
-            <a href="index.html" class="mobile-nav-link">Home</a>
-          </li>
-          <li>
-            <a href="overview.html" class="mobile-nav-link"
-              >Overview</a
-            >
-          </li>
-          <li>
-            <a href="dashboard.html" class="mobile-nav-link"
-              >Dashboard</a
-            >
-          </li>
-          <li>
-            <a href="features.html" class="mobile-nav-link"
-              >Features</a
-            >
-          </li>
-          <li>
-            <a href="about.html" class="mobile-nav-link">About</a>
-          </li>
-        </ul>
-
-        
-
-          <div class="mobile-auth-buttons">
-            <button class="btn btn-secondary">Login</button>
-            <button class="btn btn-primary">Sign Up</button>
-          </div>
-        </div>
-      </nav>
-
-      <div class="overlay"></div>
-    </header>
-
-    <!-- JavaScript -->
-    <script src="../scripts/script.js" defer></script>
-  </body>
-</html>

From 32bf73201b9e16f456922b2e8452e31a71dac11e Mon Sep 17 00:00:00 2001
From: Munnuri-Vaishnavi <vanivaishu49@gmail.com>
Date: Sun, 24 Aug 2025 20:37:40 +0530
Subject: [PATCH 3/4] Delete header.css

---
 header.css | 423 -----------------------------------------------------
 1 file changed, 423 deletions(-)
 delete mode 100644 header.css

diff --git a/header.css b/header.css
deleted file mode 100644
index 0e87ca29..00000000
--- a/header.css
+++ /dev/null
@@ -1,423 +0,0 @@
-
-.navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  background-color: var(--bg-primary);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-  padding: 1.5rem 0;
-}
-
-.navbar.scrolled {
-  background-color: rgba(255, 255, 255, 0.98);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  padding: 0;
-}
-
-[data-theme='dark'] .navbar.scrolled {
-  background-color: rgba(10, 10, 10, 0.98);
-}
-
-.navbar-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 2rem;
-  max-width: 1440px;
-  margin: 0 auto;
-}
-
-/* Logo */
-.navbar-logo {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  text-transform: uppercase;
-  font-size: 1.4rem;
-  font-weight: 700;
-  color: var(--primary-400) !important;
-  text-decoration: none;
-}
-
-.navbar-logo:hover {
-  color: var(--primary-400) !important;
-  transform: none;
-}
-
-.navbar-logo img {
-  height: 2.5rem;
-  width: auto;
-  transition: transform 0.3s ease;
-}
-
-/* Desktop Navigation */
-.navbar-nav {
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-}
-
-.nav-links {
-  display: flex;
-  gap: 2.5rem;
-  list-style: none;
-}
-
-.nav-link {
-  position: relative;
-  padding: 0.65rem 0;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-decoration: none;
-  transition: color 0.3s ease;
-  font-size: 1rem;
-}
-
-.nav-link::before {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0;
-  height: 2px;
-  background-color: var(--primary-400);
-  border-radius: 3px;
-  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.nav-link:hover,
-.nav-link.active {
-  color: var(--primary-400);
-}
-
-.nav-link:hover::before,
-.nav-link.active::before {
-  width: 65%;
-}
-
-/* Auth Buttons */
-.auth-buttons {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-/* Theme Toggle */
-.navbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 1.5rem;
-}
-
-.theme-toggle {
-  position: relative;
-  width: 3.5rem;
-  height: 2rem;
-  border-radius: 1.75rem;
-  background-color: var(--gray-200);
-  border: none;
-  cursor: pointer;
-  padding: 0.25rem;
-  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.theme-toggle:hover {
-  transform: scale(1.05);
-}
-
-[data-theme='dark'] .theme-toggle {
-  background-color: var(--gray-700);
-}
-
-.theme-icon {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
-  border-radius: 50%;
-  background-color: var(--white);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.theme-icon.sun {
-  left: 0.25rem;
-  opacity: 1;
-}
-
-.theme-icon.moon {
-  right: 0.25rem;
-  opacity: 0;
-}
-
-[data-theme='dark'] .theme-icon {
-  background-color: var(--gray-900);
-}
-
-[data-theme='dark'] .theme-icon.sun {
-  opacity: 0;
-  left: 1.75rem;
-}
-
-[data-theme='dark'] .theme-icon.moon {
-  opacity: 1;
-  right: 1.75rem;
-}
-
-.theme-toggle svg {
-  width: 0.9rem;
-  height: 0.9rem;
-  stroke: var(--gray-600);
-}
-
-[data-theme='dark'] .theme-toggle svg {
-  stroke: var(--gray-300);
-}
-
-/* Hamburger Menu*/
-.menu-toggle {
-  display: none;
-  position: relative;
-  width: 2.5rem;
-  height: 2.5rem;
-  cursor: pointer;
-  z-index: 1001;
-  background: transparent;
-  border: none;
-  padding: 0;
-}
-
-.menu-toggle span {
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 3px;
-  background-color: var(--text-primary);
-  border-radius: 3px;
-  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
-  transform-origin: center;
-}
-
-.menu-toggle span:nth-child(1) {
-  top: 0.5rem;
-}
-
-.menu-toggle span:nth-child(2) {
-  top: 1.1rem;
-}
-
-.menu-toggle span:nth-child(3) {
-  top: 1.7rem;
-}
-
-.menu-toggle.active span:nth-child(1) {
-  transform: translateY(0.6rem) rotate(45deg);
-  width: 100%;
-}
-
-.menu-toggle.active span:nth-child(2) {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.menu-toggle.active span:nth-child(3) {
-  transform: translateY(-0.6rem) rotate(-45deg);
-  width: 100%;
-}
-
-.menu-toggle:hover span:nth-child(1) {
-  transform: translateY(-0.1rem);
-}
-
-.menu-toggle:hover span:nth-child(3) {
-  transform: translateY(0.1rem);
-}
-
-.menu-toggle.active:hover span {
-  transform: none;
-}
-
-/* Mobile Menu */
-.mobile-nav {
-  position: fixed;
-  top: 0;
-  right: -100%;
-  width: 85%;
-  max-width: 380px;
-  height: 100vh;
-  background-color: var(--bg-primary);
-  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  transition: right 0.5s cubic-bezier(0.22, 1, 0.36, 1);
-  padding: 6rem 2rem 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 2.5rem;
-  overflow-y: auto;
-}
-
-.mobile-nav.active {
-  right: 0;
-}
-
-.mobile-nav-links {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 1.75rem;
-}
-
-.mobile-nav-link {
-  font-size: 1.4rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  text-decoration: none;
-  transition: all 0.3s ease;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.mobile-nav-link::before {
-  content: '';
-  width: 0.5rem;
-  height: 0.5rem;
-  background-color: var(--primary-500);
-  border-radius: 50%;
-  transition: all 0.3s ease;
-  opacity: 0;
-}
-
-.mobile-nav-link:hover,
-.mobile-nav-link.active {
-  background-color: var(--bg-secondary);
-  color: var(--primary-500);
-  padding-left: 1.5rem;
-}
-
-.mobile-nav-link:hover::before,
-.mobile-nav-link.active::before {
-  opacity: 1;
-  margin-right: 0.5rem;
-}
-
-.mobile-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  margin-top: 2rem;
-  padding-top: 2rem;
-  border-top: 1px solid var(--border-color);
-}
-
-/* ===== Fixed Mobile Theme Toggle ===== */
-.mobile-theme-toggle {
-  width: 3.5rem !important;
-  height: 2rem !important;
-  flex-shrink: 0;
-  padding: 0.25rem !important;
-  background-color: var(--gray-200) !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.mobile-theme-toggle .theme-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.mobile-auth-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: auto;
-}
-
-/* Overlay */
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    to right,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.5) 30%,
-    rgba(0, 0, 0, 0.7) 100%
-  );
-  z-index: 999;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.4s ease;
-  backdrop-filter: blur(2px);
-}
-
-.overlay.active {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* Responsive Design */
-@media (max-width: 992px) {
-  .navbar-nav,
-  .auth-buttons {
-    display: none;
-  }
-
-  .menu-toggle {
-    display: flex;
-  }
-
-  .navbar-container {
-    padding: 0 1.5rem;
-  }
-}
-
-@media (min-width: 993px) {
-  .mobile-nav,
-  .overlay {
-    display: none !important;
-  }
-}
-
-/* Mobile adjustments */
-@media (max-width: 480px) {
-  .mobile-nav {
-    width: 90%;
-    padding: 5rem 1.5rem 2rem;
-  }
-
-  .mobile-nav-link {
-    font-size: 1.1rem;
-  }
-
-  .navbar-logo {
-    font-size: 1.3rem;
-  }
-
-  .navbar-logo img {
-    height: 2rem;
-  }
-
-  .navbar-actions {
-    display: none;
-  }
-}
-
-
-

From 43e785e32a298405885f8f4f252ce375c4b7b748 Mon Sep 17 00:00:00 2001
From: Munnuri-Vaishnavi <vanivaishu49@gmail.com>
Date: Sun, 24 Aug 2025 20:39:11 +0530
Subject: [PATCH 4/4] Add files via upload

---
 header.css  | 417 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 header.html | 211 ++++++++++++++++++++++++++
 2 files changed, 628 insertions(+)
 create mode 100644 header.css
 create mode 100644 header.html

diff --git a/header.css b/header.css
new file mode 100644
index 00000000..d11f0be2
--- /dev/null
+++ b/header.css
@@ -0,0 +1,417 @@
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  background-color: var(--bg-primary);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  padding: 1.5rem 0;
+}
+
+.navbar.scrolled {
+  background-color: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  padding: 0;
+}
+
+[data-theme='dark'] .navbar.scrolled {
+  background-color: rgba(10, 10, 10, 0.98);
+}
+
+.navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 2rem;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+/* Logo */
+.navbar-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--primary-400) !important;
+  text-decoration: none;
+}
+
+.navbar-logo:hover {
+  color: var(--primary-400) !important;
+}
+
+.navbar-logo img {
+  height: 2.5rem;
+  width: auto;
+  transition: transform 0.3s ease;
+}
+
+/* Desktop Navigation */
+.navbar-nav {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.nav-links {
+  display: flex;
+  gap: 2.5rem;
+  list-style: none;
+}
+
+.nav-link {
+  position: relative;
+  padding: 0.65rem 0;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  font-size: 1rem;
+}
+
+.nav-link::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 2px;
+  background-color: var(--primary-400);
+  border-radius: 3px;
+  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.nav-link:hover,
+.nav-link.active {
+  color: var(--primary-400);
+}
+
+.nav-link:hover::before,
+.nav-link.active::before {
+  width: 65%;
+}
+
+/* Auth Buttons */
+.auth-buttons {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+/* Theme Toggle */
+.navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.theme-toggle {
+  position: relative;
+  width: 3.5rem;
+  height: 2rem;
+  border-radius: 1.75rem;
+  background-color: var(--gray-200);
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.theme-toggle:hover {
+  transform: scale(1.05);
+}
+
+[data-theme='dark'] .theme-toggle {
+  background-color: var(--gray-700);
+}
+
+.theme-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  border-radius: 50%;
+  background-color: var(--white);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.theme-icon.sun {
+  left: 0.25rem;
+  opacity: 1;
+}
+
+.theme-icon.moon {
+  right: 0.25rem;
+  opacity: 0;
+}
+
+[data-theme='dark'] .theme-icon {
+  background-color: var(--gray-900);
+}
+
+[data-theme='dark'] .theme-icon.sun {
+  opacity: 0;
+  left: 1.75rem;
+}
+
+[data-theme='dark'] .theme-icon.moon {
+  opacity: 1;
+  right: 1.75rem;
+}
+
+.theme-toggle svg {
+  width: 0.9rem;
+  height: 0.9rem;
+  stroke: var(--gray-600);
+}
+
+[data-theme='dark'] .theme-toggle svg {
+  stroke: var(--gray-300);
+}
+
+/* Hamburger Menu*/
+.menu-toggle {
+  display: none;
+  position: relative;
+  width: 2.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  z-index: 1001;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.menu-toggle span {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  background-color: var(--text-primary);
+  border-radius: 3px;
+  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  transform-origin: center;
+}
+
+.menu-toggle span:nth-child(1) {
+  top: 0.5rem;
+}
+
+.menu-toggle span:nth-child(2) {
+  top: 1.1rem;
+}
+
+.menu-toggle span:nth-child(3) {
+  top: 1.7rem;
+}
+
+.menu-toggle.active span:nth-child(1) {
+  transform: translateY(0.6rem) rotate(45deg);
+  width: 100%;
+}
+
+.menu-toggle.active span:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.menu-toggle.active span:nth-child(3) {
+  transform: translateY(-0.6rem) rotate(-45deg);
+  width: 100%;
+}
+
+.menu-toggle:hover span:nth-child(1) {
+  transform: translateY(-0.1rem);
+}
+
+.menu-toggle:hover span:nth-child(3) {
+  transform: translateY(0.1rem);
+}
+
+.menu-toggle.active:hover span {
+  transform: none;
+}
+
+/* Mobile Menu */
+.mobile-nav {
+  position: fixed;
+  top: 0;
+  right: -100%;
+  width: 85%;
+  max-width: 380px;
+  height: 100vh;
+  background-color: var(--bg-primary);
+  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  transition: right 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+  padding: 6rem 2rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  overflow-y: auto;
+}
+
+.mobile-nav.active {
+  right: 0;
+}
+
+.mobile-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.mobile-theme-toggle {
+  width: 3.5rem !important;
+  height: 2rem !important;
+  flex-shrink: 0;
+  padding: 0.25rem !important;
+  background-color: var(--gray-200) !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mobile-theme-toggle .theme-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Mobile Nav Links */
+.mobile-nav-links {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+
+.mobile-nav-link {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.mobile-nav-link::before {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: var(--primary-500);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  opacity: 0;
+}
+
+.mobile-nav-link:hover,
+.mobile-nav-link.active {
+  background-color: var(--bg-secondary);
+  color: var(--primary-500);
+  padding-left: 1.5rem;
+}
+
+.mobile-nav-link:hover::before,
+.mobile-nav-link.active::before {
+  opacity: 1;
+  margin-right: 0.5rem;
+}
+
+/* Mobile Auth Buttons */
+.mobile-auth-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 2rem; /* Visible near top, not bottom */
+}
+
+/* Overlay */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.5) 30%,
+    rgba(0, 0, 0, 0.7) 100%
+  );
+  z-index: 999;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.4s ease;
+  backdrop-filter: blur(2px);
+}
+
+.overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Responsive Design */
+@media (max-width: 992px) {
+  .navbar-nav,
+  .auth-buttons {
+    display: none;
+  }
+
+  .menu-toggle {
+    display: flex;
+  }
+
+  .navbar-container {
+    padding: 0 1.5rem;
+  }
+}
+
+@media (min-width: 993px) {
+  .mobile-nav,
+  .overlay {
+    display: none !important;
+  }
+}
+
+/* Mobile adjustments */
+@media (max-width: 480px) {
+  .mobile-nav {
+    width: 90%;
+    padding: 5rem 1.5rem 2rem;
+  }
+
+  .mobile-nav-link {
+    font-size: 1.1rem;
+  }
+
+  .navbar-logo {
+    font-size: 1.3rem;
+  }
+
+  .navbar-logo img {
+    height: 2rem;
+  }
+
+  /* Hide desktop actions */
+  .navbar-actions {
+    display: none;
+  }
+}
diff --git a/header.html b/header.html
new file mode 100644
index 00000000..d42587dc
--- /dev/null
+++ b/header.html
@@ -0,0 +1,211 @@
+<!-- Header (HTML) -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="NotesVault - Organize your academic notes and PYQs semester-wise"
+    />
+    <title>NotesVault - Header</title>
+
+    <!-- Favicon -->
+    <link rel="icon" href="assets/index/images/favicon.png" />
+    
+    <!-- Font Awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
+    />
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="../styling/variables.css" />
+    <link rel="stylesheet" href="../styling/base.css" />
+    <link rel="stylesheet" href="../styling/header.css" />
+
+  </head>
+
+  <body>
+    <header class="navbar">
+      <div class="navbar-container">
+        <a href="/index.html" class="navbar-logo">
+          <img src="#" alt="" />
+          <span>NotesVault</span>
+        </a>
+
+        <nav class="navbar-nav">
+          <ul class="nav-links">
+            <li><a href="index.html" class="nav-link">Home</a></li>
+            <li>
+              <a href="overview.html" class="nav-link">Overview</a>
+            </li>
+            <li>
+              <a href="dashboard.html" class="nav-link">Dashboard</a>
+            </li>
+            <li>
+              <a href="features.html" class="nav-link">Features</a>
+            </li>
+            <li><a href="about.html" class="nav-link">About</a></li>
+          </ul>
+        </nav>
+
+        <div class="navbar-actions">
+          <!-- Theme Toggle Button -->
+          <button class="theme-toggle" aria-label="Toggle dark mode">
+            <span class="theme-icon sun">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="5"></circle>
+                <line x1="12" y1="1" x2="12" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="23"></line>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                <line x1="1" y1="12" x2="3" y2="12"></line>
+                <line x1="21" y1="12" x2="23" y2="12"></line>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+              </svg>
+            </span>
+            <span class="theme-icon moon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+                ></path>
+              </svg>
+            </span>
+          </button>
+
+          <div class="auth-buttons">
+            <button
+              onclick="location.href='login.html'"
+              class="btn btn-secondary"
+            >
+              Login
+            </button>
+            <button
+              onclick="location.href='signup.html'"
+              class="btn btn-primary"
+            >
+              Sign Up
+            </button>
+          </div>
+        </div>
+
+        <button class="menu-toggle" aria-label="Menu">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+      </div>
+
+      <!-- Mobile Menu -->
+      <nav class="mobile-nav">
+        <div class="mobile-actions">
+          <!-- Mobile Theme Toggle -->
+          <button
+            class="theme-toggle mobile-theme-toggle"
+            aria-label="Toggle dark mode"
+          >
+            <span class="theme-icon sun">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="5"></circle>
+                <line x1="12" y1="1" x2="12" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="23"></line>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                <line x1="1" y1="12" x2="3" y2="12"></line>
+                <line x1="21" y1="12" x2="23" y2="12"></line>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+              </svg>
+            </span>
+            <span class="theme-icon moon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+                ></path>
+              </svg>
+            </span>
+          </button>
+          </div>
+        <ul class="mobile-nav-links">
+          <li>
+            <a href="index.html" class="mobile-nav-link">Home</a>
+          </li>
+          <li>
+            <a href="overview.html" class="mobile-nav-link"
+              >Overview</a
+            >
+          </li>
+          <li>
+            <a href="dashboard.html" class="mobile-nav-link"
+              >Dashboard</a
+            >
+          </li>
+          <li>
+            <a href="features.html" class="mobile-nav-link"
+              >Features</a
+            >
+          </li>
+          <li>
+            <a href="about.html" class="mobile-nav-link">About</a>
+          </li>
+        </ul>
+
+        
+
+          <div class="mobile-auth-buttons">
+  <a href="login.html" class="btn btn-secondary">Login</a>
+  <a href="signup.html" class="btn btn-primary">Sign Up</a>
+</div>
+
+      </nav>
+
+      <div class="overlay"></div>
+    </header>
+
+    <!-- JavaScript -->
+    <script src="../scripts/script.js" defer></script>
+  </body>
+</html>