From bb37685a72258573c22d435f7c98c7145148542b Mon Sep 17 00:00:00 2001
From: sanayamahajan-23 <monagupta9086287092@gmail.com>
Date: Sat, 20 Jul 2024 22:26:59 +0530
Subject: [PATCH 1/5] enhance navbar

---
 index.html | 214 +++++++++++++++++++----------------------------------
 1 file changed, 78 insertions(+), 136 deletions(-)

diff --git a/index.html b/index.html
index 108620d3..606c92f6 100644
--- a/index.html
+++ b/index.html
@@ -53,143 +53,85 @@
         <div class="loader-section section-right"></div>
     </div>
     <nav class="navbar navbar-expand-lg fixed-top">
-        <div class="container-fluid">
-            <!-- Brand Logo -->
-            <a href="index.html" class="navbar-brand opacity-75 flex-fill">
-
-
-                <img src="/Images/logo/Foodielogo.png" height="30" alt="Brand Logo">
-
-                
-
-
-                
-
+    <div class="container-fluid">
+      <!-- Brand Logo -->
+      <a href="index.html" class="navbar-brand opacity-75 flex-fill">
+        <img src="./Images/logo/Foodielogo.png" height="30" alt="Brand Logo">
+      </a>
+      <!-- Navbar Toggler -->
+      <button class="navbar-toggler order-1" type="button" data-bs-toggle="collapse" data-bs-target=".hamburgeritems" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <!-- Centered Navbar Links -->
+      <div class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
+        <ul class="navbar-nav center-links">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="index.html">
+              <i class="fa-solid fa-house"></i> Home
             </a>
-            <!-- Navbar Toggler -->
-            <button class="navbar-toggler order-1" type="button" data-bs-toggle="collapse" data-bs-target=".hamburgeritems" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <!-- Centered Navbar Links -->
-            <div class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
-                <ul class="navbar-nav center-links">
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="index.html">
-
-
-                            <i class="fa-solid fa-house"></i> Home
-
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/menu.html">
-
-                            <i class="fa-solid fa-bars"></i> Menu
-                        </a>
-                    </li>
-                    <li class="nav-item dropdown">
-
-                        <a class="nav-link dropdown-toggle" href="Html-files/services.html" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <i class="fa-solid fa-gear"></i> Services
-                        </a>
-                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                            <li><a class="dropdown-item" href="#">Ordering options</a></li>
-                            <li><a class="dropdown-item" href="#">Order Tracking</a></li>
-                            <li><a class="dropdown-item" href="#">Customer Support</a></li>
-                            <li><a class="dropdown-item" href="#">FAQS</a></li>
-                        </ul>
-                    </li>
-
-
-                        
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="#FAQ">FAQS</a>
-                    </li>
-                    <li class="nav-item">
-
-                        <a class="nav-link" href="Html-files/contact.html">
-                            <i class="fa-solid fa-phone"></i> Contact Us
-
-                            
-                        </a>
-                    </li>
-                    
-                  
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/offers.html">
-
-                            <i class="fa-solid fa-tag"></i> Offers
-
-
-                        
-
-
-                            
-
-                        </a>
-                    </li>
-
-                 
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/RateUs.html">
-                            <i class="fa-solid fa-star"></i> Rate Us
-                        </a>
-                    </li>
-                    
-                </ul>
-            </div>
-            <!-- Theme Toggle Icon -->
-            <div class="order-0 ml-auto p-2">
-
-                <img class="nav-link" src="Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
-
-                <img class="nav-link" src="Images/navbar/sun.png" id="theme-toggle-icon" alt="Theme Toggler Button">
-
-            </div>
-
-            <!-- End Navbar Links -->
-
-
-            <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
-                <ul class="navbar-nav end-links">
-
-                    
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/login.html">
-
-                            
-
-                            <i class="fa-solid fa-sign-in"></i> Login
-
-                        </a>
-                    </li>
-
-                    
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/signup.html">
-
-                            <i class="fa-solid fa-user"></i> Sign-Up
-
-                            
-
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/cart.html">
-
-                            Cart <i class="fa-solid fa-cart-shopping"></i>
-
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="Html-files/menu.html">
+              <i class="fa-solid fa-bars"></i> Menu
+            </a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="Html-files/services.html" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="fa-solid fa-gear"></i> Services
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <li><a class="dropdown-item" href="#">Ordering options</a></li>
+              <li><a class="dropdown-item" href="#">Order Tracking</a></li>
+              <li><a class="dropdown-item" href="#">Customer Support</a></li>
+              <li><a class="dropdown-item" href="#">FAQS</a></li>
+            </ul>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#FAQ">FAQS</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="Html-files/contact.html">
+              <i class="fa-solid fa-phone"></i> Contact Us
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="Html-files/offers.html">
+              <i class="fa-solid fa-tag"></i> Offers
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="Html-files/RateUs.html">
+              <i class="fa-solid fa-star"></i> Rate Us
+            </a>
+          </li>
+        </ul>
+      </div>
+      <!-- Theme Toggle Icon -->
+      <div class="order-0 ml-auto p-2">
+        <img class="nav-link" src="Images/navbar/sun.png" id="theme-toggle-icon" alt="Theme Toggler Button" height="40px" width="40px">
+      </div>
+      <!-- End Navbar Links -->
+      <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
+        <ul class="navbar-nav end-links">
+          <li class="nav-item">
+            <a class="nav-link" href="Html-files/login.html">
+              <i class="fa-solid fa-sign-in"></i> Login
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="Html-files/signup.html">
+              <i class="fa-solid fa-user"></i> Sign-Up
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="Html-files/cart.html">
+              Cart <i class="fa-solid fa-cart-shopping"></i>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
     
 
     <section id="homeSlider" class="carousel slide carousel-fade bg-black" data-bs-ride="carousel" data-bs-interval="5000">

From a3a1051833e256574643962793e17cd38b2b0147 Mon Sep 17 00:00:00 2001
From: sanayamahajan-23 <monagupta9086287092@gmail.com>
Date: Sat, 20 Jul 2024 22:28:26 +0530
Subject: [PATCH 2/5] enhance navbar styles

---
 Css-files/navbar.css | 142 ++++++++++++-------------------------------
 1 file changed, 38 insertions(+), 104 deletions(-)

diff --git a/Css-files/navbar.css b/Css-files/navbar.css
index 945ca29c..4da930cb 100644
--- a/Css-files/navbar.css
+++ b/Css-files/navbar.css
@@ -1,6 +1,5 @@
-/* Variables */
+/* General Styles */
 :root {
-  /* General Colors */
   --primary-bg-color: #ffffff;
   --primary-text-color: #333335;
   --secondary-bg-color: #f2f2f2;
@@ -10,14 +9,6 @@
   --navbar-bg-color: #f2f2f2;
   --navbar-hover-color: #e5e5e5;
 
-  /* Card Colors */
-  --card-bg-color: #ffffff;
-  --card-hover-color: #f5f5f5;
-
-  /* Footer Colors */
-  --footer-bg-color: #f2f2f2;
-  --footer-hover-color: #e5e5e5;
-
   /* Additional Colors */
   --container-bg: black;
   --drop-bg: #212123;
@@ -27,29 +18,15 @@
 }
 
 .dark-theme {
-
   --a: rgb(183, 175, 175);
   --drop-bg: #ffffff;
   --nav: white;
-  /* General Colors */
   --primary-bg-color: #212123;
   --primary-text-color: #ffffff;
   --secondary-bg-color: #333335;
   --accent-color: #9e5c48;
-
-  /* Navbar Colors */
   --navbar-bg-color: #333335;
   --navbar-hover-color: #474749;
-
-  /* Card Colors */
-  --card-bg-color: #2c2c2e;
-  --card-hover-color: #373739;
-
-  /* Footer Colors */
-  --footer-bg-color: #28282a;
-  --footer-hover-color: #333335;
-
-  /* Additional Colors */
   --container-bg: rgb(224, 224, 252);
   --drop-bg: #ffffff;
   --a: black;
@@ -80,20 +57,22 @@
   flex-grow: 0;
 }
 
-
 /* Navbar Links */
 .nav-link {
-  transition: color 0.3s, background-color 0.3s;
+  position: relative;
+  color: var(--a);
+  text-shadow: 0 0 5px rgba(0, 255, 0, 0.75), 0 0 10px rgba(0, 255, 0, 0.75), 0 0 15px rgba(0, 255, 0, 0.75), 0 0 20px rgba(0, 255, 0, 0.75);
+  transition: color 0.3s, background-color 0.3s, text-shadow 0.3s;
 }
 
 .nav-link:hover {
   color: #fff;
   transform: scale(1.1);
   border-radius: 5px;
+  text-shadow: 0 0 20px rgba(0, 255, 0, 1), 0 0 30px rgba(0, 255, 0, 1), 0 0 40px rgba(0, 255, 0, 1), 0 0 50px rgba(0, 255, 0, 1);
 }
 
 /* Center Links */
-
 ul {
   gap: 5px;
 }
@@ -104,7 +83,6 @@ ul {
   align-items: center;
 }
 
-
 .center-links .nav-item .nav-link:hover {
   color: #f13800e4;
 }
@@ -125,20 +103,19 @@ ul {
 .navbar-nav.center-links .active {
   color: #dc3545;
   border-bottom: 2px solid #dc3545;
-  gap:10px;
+  gap: 10px;
 }
 
 .navbar-nav.end-links .active {
   color: rgba(255, 183, 0, 0.705);
   border-bottom: 2px solid rgba(255, 183, 0, 0.705);
-  gap:10px;
+  gap: 10px;
 }
 
-
 /* Dropdown Items */
-
 #theme-toggle-icon {
   width: 30px;
+  height:30px;
   cursor: pointer;
 }
 
@@ -154,92 +131,49 @@ ul {
   padding: 4px 8px;
   color: var(--a);
   font-size: 15px;
-
   background-color: var(--background-color);
-
   transition: background-color 0.3s, transform 0.3s;
-
 }
 
 .dropdown-item:active {
   background-color: #dc3545;
 }
 
-:root {
-  --background-color: #fff;
-  --text-color: #000;
-  --button-bg: #D0EEB0;
-  --button-hover-bg: #59a10c;
-  --card-bg: rgba(0, 0, 0, 0.8);
-  --carousel-caption-bg: rgba(0, 0, 0, 0.7);
-}
-
-body {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-.section {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-.btn-card {
-  background-color: var(--button-bg);
-  color: var(--text-color);
-}
-
-.card-1::after {
-  background-color: var(--button-hover-bg);
-}
-
-.card-1  {
-  background-color: var(--carousel-caption-bg);
-}
-
-/* Dark mode styles */
-.about_us.dark-theme  {
-  --background-color: #000;
-  --text-color: #fff;
-  --button-bg: #555;
-  --button-hover-bg: #333;
-  --card-bg: rgba(255, 255, 255, 0.8);
-  --carousel-caption-bg: rgba(255, 255, 255, 0.7);
-}
-
-.about_us.dark-theme {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-.about_us.dark-theme  .section {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-.about_us.dark-theme  .btn-card {
-  background-color: var(--button-bg);
-  color: var(--text-color);
+.dropdown-item:hover {
+  background-color: #007bff;
+  color: #fff;
+  transform: scale(1.1);
 }
 
-.about_us.dark-theme  .btn-card:hover {
-  background-color: var(--button-hover-bg);
+/* Bubbles Animation */
+body::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://cdn.pixabay.com/photo/2015/04/17/12/20/soap-bubble-726523_960_720.png') repeat;
+  z-index: -1;
+  animation: moveBubbles 30s linear infinite;
+  opacity: 0.5;
 }
 
-.about_us.dark-theme  .carousel-caption {
-  background-color: var(--carousel-caption-bg);
+@keyframes moveBubbles {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-1000px);
+  }
 }
 
-
-.dropdown-item:hover {
-  background-color: #007bff;
-  color: #fff;
-  transform: scale(1.1);
+/* Additional Styles for Dark Theme */
+.dark-theme .nav-link {
+  color: var(--a);
+  text-shadow: 0 0 5px rgba(0, 255, 0, 0.75), 0 0 10px rgba(0, 255, 0, 0.75), 0 0 15px rgba(0, 255, 0, 0.75), 0 0 20px rgba(0, 255, 0, 0.75);
 }
 
-/* Theme Toggle Icon */
-#theme-toggle-icon {
-  width: 30px;
-  cursor: pointer;
+.dark-theme .nav-link:hover {
+  text-shadow: 0 0 20px rgba(0, 255, 0, 1), 0 0 30px rgba(0, 255, 0, 1), 0 0 40px rgba(0, 255, 0, 1), 0 0 50px rgba(0, 255, 0, 1);
 }
-

From 11a35461b9449dc2e46611891418fb65326fa556 Mon Sep 17 00:00:00 2001
From: sanayamahajan-23 <monagupta9086287092@gmail.com>
Date: Sat, 20 Jul 2024 22:30:10 +0530
Subject: [PATCH 3/5] enhance navbar

---
 Html-files/menu.html |  4 ++--
 Html-files/navbar.js | 40 ++++++++++++++++++++++++----------------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/Html-files/menu.html b/Html-files/menu.html
index bee2eeff..41660b97 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -54,7 +54,7 @@
         <div class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
             <ul class="navbar-nav center-links">
                 <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="index.html">
+                    <a class="nav-link active" aria-current="page" href="../index.html">
                         <i class="fa-solid fa-home"></i> Home
                     </a>
                 </li>
@@ -64,7 +64,7 @@
                     </a>
                 </li>
                 <li class="nav-item dropdown">
-                    <a class="nav-link services" href="/Html-files/services.html" aria-expanded="false">
+                    <a class="nav-link services" href="../Html-files/services.html" aria-expanded="false">
                         <i class="fa-solid fa-handshake"></i> Services
                     </a>
                     <ul class="dropdown-menu">
diff --git a/Html-files/navbar.js b/Html-files/navbar.js
index 25fa0e37..0b11f46a 100644
--- a/Html-files/navbar.js
+++ b/Html-files/navbar.js
@@ -1,38 +1,46 @@
-//Themechange icon toggling behaviour
-let themeToggleIcon = document.getElementById("theme-toggle-icon");
+// Theme Toggle
+const themeToggleIcon = document.getElementById("theme-toggle-icon");
 
 themeToggleIcon.addEventListener("click", function () {
   document.body.classList.toggle("dark-theme");
-  document.body.classList.toggle(":root")
   if (document.body.classList.contains("dark-theme")) {
-    themeToggleIcon.src = "../Images/navbar/sun.png";
+    themeToggleIcon.src = "Images/navbar/sun.png";
   } else {
-    themeToggleIcon.src = "../Images/navbar/moon.png";
+    themeToggleIcon.src = "Images/navbar/moon.png";
   }
 });
 
-//Services dropdown
+// Navbar Background Change on Scroll
+window.addEventListener("scroll", function () {
+  const navbar = document.querySelector(".navbar");
+  if (window.scrollY > 100) {
+    navbar.classList.add("scrolled");
+  } else {
+    navbar.classList.remove("scrolled");
+  }
+});
 
+// Services dropdown
 const dropdownli = document.querySelector(".nav-item.dropdown");
 const navlinka = document.querySelector('.nav-link.services');
 const menu = document.querySelector('.dropdown .dropdown-menu');
 
 dropdownli.addEventListener("mouseenter", () => {
-    navlinka.classList.add("show");
-    menu.classList.add("show");
-    navlinka.setAttribute('aria-expanded', 'true');
-    menu.setAttribute("data-bs-popper", 'static');
+  navlinka.classList.add("show");
+  menu.classList.add("show");
+  navlinka.setAttribute('aria-expanded', 'true');
+  menu.setAttribute("data-bs-popper", 'static');
 });
 
 menu.addEventListener("mouseleave", () => {
+  menu.classList.remove("show");
+  navlinka.classList.remove("show");
+  navlinka.setAttribute('aria-expanded', 'false');
+  menu.removeAttribute("data-bs-popper");
+  dropdownli.addEventListener("mouseleave", () => {
     menu.classList.remove("show");
     navlinka.classList.remove("show");
     navlinka.setAttribute('aria-expanded', 'false');
     menu.removeAttribute("data-bs-popper");
-    dropdownli.addEventListener("mouseleave", () => {
-        menu.classList.remove("show");
-        navlinka.classList.remove("show");
-        navlinka.setAttribute('aria-expanded', 'false');
-        menu.removeAttribute("data-bs-popper");
-    })
+  })
 });

From c95e1dc9bb58b27a487564499e1b64188336df8d Mon Sep 17 00:00:00 2001
From: sanayamahajan-23 <monagupta9086287092@gmail.com>
Date: Sat, 20 Jul 2024 22:30:50 +0530
Subject: [PATCH 4/5] change root design

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 1e0d3571..aae3c3f1 100644
--- a/style.css
+++ b/style.css
@@ -13,7 +13,7 @@ body {
 :root {
   --a: black;
   --drop-bg: #212123;
-  --nav: white;
+  --nav: grey;
   --primary-bg-color: black;
   --primary-text-color: #333335;
   --secondary-bg-color: black;

From ba6b6b5b7858ba5f5e13263f2ae1c7cfb634fa33 Mon Sep 17 00:00:00 2001
From: sanayamahajan-23 <monagupta9086287092@gmail.com>
Date: Sun, 21 Jul 2024 21:50:20 +0530
Subject: [PATCH 5/5] changed the neon color to white neon

---
 Css-files/navbar.css | 141 ++++++++---------------------
 Html-files/menu.html |   4 +-
 Html-files/navbar.js |  40 +++++----
 index.html           | 210 ++++++++++++++++---------------------------
 style.css            |   2 +-
 5 files changed, 141 insertions(+), 256 deletions(-)

diff --git a/Css-files/navbar.css b/Css-files/navbar.css
index 945ca29c..1afb36cd 100644
--- a/Css-files/navbar.css
+++ b/Css-files/navbar.css
@@ -1,6 +1,5 @@
-/* Variables */
+/* General Styles */
 :root {
-  /* General Colors */
   --primary-bg-color: #ffffff;
   --primary-text-color: #333335;
   --secondary-bg-color: #f2f2f2;
@@ -10,14 +9,6 @@
   --navbar-bg-color: #f2f2f2;
   --navbar-hover-color: #e5e5e5;
 
-  /* Card Colors */
-  --card-bg-color: #ffffff;
-  --card-hover-color: #f5f5f5;
-
-  /* Footer Colors */
-  --footer-bg-color: #f2f2f2;
-  --footer-hover-color: #e5e5e5;
-
   /* Additional Colors */
   --container-bg: black;
   --drop-bg: #212123;
@@ -27,29 +18,15 @@
 }
 
 .dark-theme {
-
   --a: rgb(183, 175, 175);
   --drop-bg: #ffffff;
   --nav: white;
-  /* General Colors */
   --primary-bg-color: #212123;
   --primary-text-color: #ffffff;
   --secondary-bg-color: #333335;
   --accent-color: #9e5c48;
-
-  /* Navbar Colors */
   --navbar-bg-color: #333335;
   --navbar-hover-color: #474749;
-
-  /* Card Colors */
-  --card-bg-color: #2c2c2e;
-  --card-hover-color: #373739;
-
-  /* Footer Colors */
-  --footer-bg-color: #28282a;
-  --footer-hover-color: #333335;
-
-  /* Additional Colors */
   --container-bg: rgb(224, 224, 252);
   --drop-bg: #ffffff;
   --a: black;
@@ -80,20 +57,22 @@
   flex-grow: 0;
 }
 
-
 /* Navbar Links */
 .nav-link {
-  transition: color 0.3s, background-color 0.3s;
+  position: relative;
+  color: var(--a);
+  text-shadow: 0 0 5px rgba(255,255,255, 0.75), 0 0 10px  rgba(255,255,255, 0.75), 0 0 15px rgba(255,255,255, 0.75), 0 0 20px rgba(255,255,255, 0.75);
+  transition: color 0.3s, background-color 0.3s, text-shadow 0.3s;
 }
 
 .nav-link:hover {
   color: #fff;
   transform: scale(1.1);
   border-radius: 5px;
+  text-shadow: 0 0 20px rgba(255, 165, 0, 1), 0 0 30px rgba(255, 165, 0, 1), 0 0 40px rgba(255, 165, 0, 1), 0 0 50px rgba(255, 165, 0, 1);
 }
 
 /* Center Links */
-
 ul {
   gap: 5px;
 }
@@ -104,7 +83,6 @@ ul {
   align-items: center;
 }
 
-
 .center-links .nav-item .nav-link:hover {
   color: #f13800e4;
 }
@@ -125,18 +103,16 @@ ul {
 .navbar-nav.center-links .active {
   color: #dc3545;
   border-bottom: 2px solid #dc3545;
-  gap:10px;
+  gap: 10px;
 }
 
 .navbar-nav.end-links .active {
   color: rgba(255, 183, 0, 0.705);
   border-bottom: 2px solid rgba(255, 183, 0, 0.705);
-  gap:10px;
+  gap: 10px;
 }
 
-
 /* Dropdown Items */
-
 #theme-toggle-icon {
   width: 30px;
   cursor: pointer;
@@ -154,92 +130,49 @@ ul {
   padding: 4px 8px;
   color: var(--a);
   font-size: 15px;
-
   background-color: var(--background-color);
-
   transition: background-color 0.3s, transform 0.3s;
-
 }
 
 .dropdown-item:active {
   background-color: #dc3545;
 }
 
-:root {
-  --background-color: #fff;
-  --text-color: #000;
-  --button-bg: #D0EEB0;
-  --button-hover-bg: #59a10c;
-  --card-bg: rgba(0, 0, 0, 0.8);
-  --carousel-caption-bg: rgba(0, 0, 0, 0.7);
-}
-
-body {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-.section {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-.btn-card {
-  background-color: var(--button-bg);
-  color: var(--text-color);
-}
-
-.card-1::after {
-  background-color: var(--button-hover-bg);
-}
-
-.card-1  {
-  background-color: var(--carousel-caption-bg);
-}
-
-/* Dark mode styles */
-.about_us.dark-theme  {
-  --background-color: #000;
-  --text-color: #fff;
-  --button-bg: #555;
-  --button-hover-bg: #333;
-  --card-bg: rgba(255, 255, 255, 0.8);
-  --carousel-caption-bg: rgba(255, 255, 255, 0.7);
-}
-
-.about_us.dark-theme {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-.about_us.dark-theme  .section {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-.about_us.dark-theme  .btn-card {
-  background-color: var(--button-bg);
-  color: var(--text-color);
+.dropdown-item:hover {
+  background-color: #007bff;
+  color: #fff;
+  transform: scale(1.1);
 }
 
-.about_us.dark-theme  .btn-card:hover {
-  background-color: var(--button-hover-bg);
+/* Bubbles Animation */
+body::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://cdn.pixabay.com/photo/2015/04/17/12/20/soap-bubble-726523_960_720.png') repeat;
+  z-index: -1;
+  animation: moveBubbles 30s linear infinite;
+  opacity: 0.5;
 }
 
-.about_us.dark-theme  .carousel-caption {
-  background-color: var(--carousel-caption-bg);
+@keyframes moveBubbles {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-1000px);
+  }
 }
 
-
-.dropdown-item:hover {
-  background-color: #007bff;
-  color: #fff;
-  transform: scale(1.1);
+/* Additional Styles for Dark Theme */
+.dark-theme .nav-link {
+  color: var(--a);
+  text-shadow: 0 0 5px rgba(0255, 255, 255, 0.75), 0 0 10px rgba(0255, 255, 255, 0.75), 0 0 15px rgba(0255, 255, 255, 0.75), 0 0 20px rgba(0255, 255, 255, 0.75);
 }
 
-/* Theme Toggle Icon */
-#theme-toggle-icon {
-  width: 30px;
-  cursor: pointer;
+.dark-theme .nav-link:hover {
+  text-shadow: 0 0 20px rgba(0, 255, 0, 1), 0 0 30px rgba(0, 255, 0, 1), 0 0 40px rgba(0, 255, 0, 1), 0 0 50px rgba(0, 255, 0, 1);
 }
-
diff --git a/Html-files/menu.html b/Html-files/menu.html
index bee2eeff..41660b97 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -54,7 +54,7 @@
         <div class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
             <ul class="navbar-nav center-links">
                 <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="index.html">
+                    <a class="nav-link active" aria-current="page" href="../index.html">
                         <i class="fa-solid fa-home"></i> Home
                     </a>
                 </li>
@@ -64,7 +64,7 @@
                     </a>
                 </li>
                 <li class="nav-item dropdown">
-                    <a class="nav-link services" href="/Html-files/services.html" aria-expanded="false">
+                    <a class="nav-link services" href="../Html-files/services.html" aria-expanded="false">
                         <i class="fa-solid fa-handshake"></i> Services
                     </a>
                     <ul class="dropdown-menu">
diff --git a/Html-files/navbar.js b/Html-files/navbar.js
index 25fa0e37..0b11f46a 100644
--- a/Html-files/navbar.js
+++ b/Html-files/navbar.js
@@ -1,38 +1,46 @@
-//Themechange icon toggling behaviour
-let themeToggleIcon = document.getElementById("theme-toggle-icon");
+// Theme Toggle
+const themeToggleIcon = document.getElementById("theme-toggle-icon");
 
 themeToggleIcon.addEventListener("click", function () {
   document.body.classList.toggle("dark-theme");
-  document.body.classList.toggle(":root")
   if (document.body.classList.contains("dark-theme")) {
-    themeToggleIcon.src = "../Images/navbar/sun.png";
+    themeToggleIcon.src = "Images/navbar/sun.png";
   } else {
-    themeToggleIcon.src = "../Images/navbar/moon.png";
+    themeToggleIcon.src = "Images/navbar/moon.png";
   }
 });
 
-//Services dropdown
+// Navbar Background Change on Scroll
+window.addEventListener("scroll", function () {
+  const navbar = document.querySelector(".navbar");
+  if (window.scrollY > 100) {
+    navbar.classList.add("scrolled");
+  } else {
+    navbar.classList.remove("scrolled");
+  }
+});
 
+// Services dropdown
 const dropdownli = document.querySelector(".nav-item.dropdown");
 const navlinka = document.querySelector('.nav-link.services');
 const menu = document.querySelector('.dropdown .dropdown-menu');
 
 dropdownli.addEventListener("mouseenter", () => {
-    navlinka.classList.add("show");
-    menu.classList.add("show");
-    navlinka.setAttribute('aria-expanded', 'true');
-    menu.setAttribute("data-bs-popper", 'static');
+  navlinka.classList.add("show");
+  menu.classList.add("show");
+  navlinka.setAttribute('aria-expanded', 'true');
+  menu.setAttribute("data-bs-popper", 'static');
 });
 
 menu.addEventListener("mouseleave", () => {
+  menu.classList.remove("show");
+  navlinka.classList.remove("show");
+  navlinka.setAttribute('aria-expanded', 'false');
+  menu.removeAttribute("data-bs-popper");
+  dropdownli.addEventListener("mouseleave", () => {
     menu.classList.remove("show");
     navlinka.classList.remove("show");
     navlinka.setAttribute('aria-expanded', 'false');
     menu.removeAttribute("data-bs-popper");
-    dropdownli.addEventListener("mouseleave", () => {
-        menu.classList.remove("show");
-        navlinka.classList.remove("show");
-        navlinka.setAttribute('aria-expanded', 'false');
-        menu.removeAttribute("data-bs-popper");
-    })
+  })
 });
diff --git a/index.html b/index.html
index 108620d3..a1e71dc6 100644
--- a/index.html
+++ b/index.html
@@ -54,141 +54,85 @@
     </div>
     <nav class="navbar navbar-expand-lg fixed-top">
         <div class="container-fluid">
-            <!-- Brand Logo -->
-            <a href="index.html" class="navbar-brand opacity-75 flex-fill">
-
-
-                <img src="/Images/logo/Foodielogo.png" height="30" alt="Brand Logo">
-
-                
-
-
-                
-
-            </a>
-            <!-- Navbar Toggler -->
-            <button class="navbar-toggler order-1" type="button" data-bs-toggle="collapse" data-bs-target=".hamburgeritems" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <!-- Centered Navbar Links -->
-            <div class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
-                <ul class="navbar-nav center-links">
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="index.html">
-
-
-                            <i class="fa-solid fa-house"></i> Home
-
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/menu.html">
-
-                            <i class="fa-solid fa-bars"></i> Menu
-                        </a>
-                    </li>
-                    <li class="nav-item dropdown">
-
-                        <a class="nav-link dropdown-toggle" href="Html-files/services.html" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <i class="fa-solid fa-gear"></i> Services
-                        </a>
-                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                            <li><a class="dropdown-item" href="#">Ordering options</a></li>
-                            <li><a class="dropdown-item" href="#">Order Tracking</a></li>
-                            <li><a class="dropdown-item" href="#">Customer Support</a></li>
-                            <li><a class="dropdown-item" href="#">FAQS</a></li>
-                        </ul>
-                    </li>
-
-
-                        
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="#FAQ">FAQS</a>
-                    </li>
-                    <li class="nav-item">
-
-                        <a class="nav-link" href="Html-files/contact.html">
-                            <i class="fa-solid fa-phone"></i> Contact Us
-
-                            
-                        </a>
-                    </li>
-                    
-                  
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/offers.html">
-
-                            <i class="fa-solid fa-tag"></i> Offers
-
-
-                        
-
-
-                            
-
-                        </a>
-                    </li>
-
-                 
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/RateUs.html">
-                            <i class="fa-solid fa-star"></i> Rate Us
-                        </a>
-                    </li>
-                    
+          <!-- Brand Logo -->
+          <a href="index.html" class="navbar-brand opacity-75 flex-fill">
+            <img src="./Images/logo/Foodielogo.png" height="30" alt="Brand Logo">
+          </a>
+          <!-- Navbar Toggler -->
+          <button class="navbar-toggler order-1" type="button" data-bs-toggle="collapse" data-bs-target=".hamburgeritems" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <!-- Centered Navbar Links -->
+          <div class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
+            <ul class="navbar-nav center-links">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="index.html">
+                  <i class="fa-solid fa-house"></i> Home
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="Html-files/menu.html">
+                  <i class="fa-solid fa-bars"></i> Menu
+                </a>
+              </li>
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="Html-files/services.html" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <i class="fa-solid fa-gear"></i> Services
+                </a>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                  <li><a class="dropdown-item" href="#">Ordering options</a></li>
+                  <li><a class="dropdown-item" href="#">Order Tracking</a></li>
+                  <li><a class="dropdown-item" href="#">Customer Support</a></li>
+                  <li><a class="dropdown-item" href="#">FAQS</a></li>
                 </ul>
-            </div>
-            <!-- Theme Toggle Icon -->
-            <div class="order-0 ml-auto p-2">
-
-                <img class="nav-link" src="Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
-
-                <img class="nav-link" src="Images/navbar/sun.png" id="theme-toggle-icon" alt="Theme Toggler Button">
-
-            </div>
-
-            <!-- End Navbar Links -->
-
-
-            <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
-                <ul class="navbar-nav end-links">
-
-                    
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/login.html">
-
-                            
-
-                            <i class="fa-solid fa-sign-in"></i> Login
-
-                        </a>
-                    </li>
-
-                    
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/signup.html">
-
-                            <i class="fa-solid fa-user"></i> Sign-Up
-
-                            
-
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/cart.html">
-
-                            Cart <i class="fa-solid fa-cart-shopping"></i>
-
-                        </a>
-                    </li>
-                </ul>
-            </div>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#FAQ">FAQS</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="Html-files/contact.html">
+                  <i class="fa-solid fa-phone"></i> Contact Us
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="Html-files/offers.html">
+                  <i class="fa-solid fa-tag"></i> Offers
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="Html-files/RateUs.html">
+                  <i class="fa-solid fa-star"></i> Rate Us
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!-- Theme Toggle Icon -->
+          <div class="order-0 ml-auto p-2">
+            <img class="nav-link" src="Images/navbar/moon.png" id="theme-toggle-icon" alt="Theme Toggler Button">
+          </div>
+          <!-- End Navbar Links -->
+          <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
+            <ul class="navbar-nav end-links">
+              <li class="nav-item">
+                <a class="nav-link" href="Html-files/login.html">
+                  <i class="fa-solid fa-sign-in"></i> Login
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="Html-files/signup.html">
+                  <i class="fa-solid fa-user"></i> Sign-Up
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="Html-files/cart.html">
+                  Cart <i class="fa-solid fa-cart-shopping"></i>
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
-    </nav>
+      </nav>
+    
 
     
 
diff --git a/style.css b/style.css
index 1e0d3571..aae3c3f1 100644
--- a/style.css
+++ b/style.css
@@ -13,7 +13,7 @@ body {
 :root {
   --a: black;
   --drop-bg: #212123;
-  --nav: white;
+  --nav: grey;
   --primary-bg-color: black;
   --primary-text-color: #333335;
   --secondary-bg-color: black;