Added dark mode to Travel Service page

service.html

@@ -13,6 +13,50 @@
             <h1 class="display-4">Travel Services</h1>
             <p class="lead">Discover our range of travel services</p>
         </div>
+        <style>
+            /* dark mode */
+body {
+    background-color: white;
+    color: black;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+header.dark-mode {
+    background-color: #1f1f1f;
+}
+
+.mode-toggle {
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    outline: none;
+    padding: 10px;
+}
+
+.mode-toggle img {
+    width: 24px;
+    height: 24px;
+}
+
+.navbar {
+    background-color: #f0f0f0;
+    transition: background-color 0.3s;
+}
+
+body.dark-mode .navbar {
+    background-color: #333;
+}
+
+body.dark-mode .navbar a:hover {
+    color: #4C51BF;
+    transform: translateY(-2px);
+}
+        </style>
     </header>
 
     <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
@@ -25,6 +69,12 @@ <h1 class="display-4">Travel Services</h1>
                     <li class="nav-item"><a class="nav-link" href="#hotels">Hotels</a></li>
                     <li class="nav-item"><a class="nav-link" href="#flights">Flights</a></li>
                     <li class="nav-item"><a class="nav-link" href="#cars">Car Rentals</a></li>
+                     <li>
+                    <button class="mode-toggle" id="modeToggle">
+                        <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
+                        <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
+                      </button>
+                    </li>
                 </ul>
             </div>
         </div>
@@ -215,5 +265,63 @@ <h5>Follow Us</h5>
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          const hamburger = document.getElementById("hamburger");
+          const navList = document.getElementById("nav-links");
+          const closeBtn = document.getElementById("closeBtn");
+
+          hamburger.addEventListener("click", function () {
+            navList.classList.toggle("active");
+          });
+
+          closeBtn.addEventListener("click", function () {
+            navList.classList.remove("active");
+          });
+        });
+
+       document.addEventListener("DOMContentLoaded", function() {
+         const modeToggle = document.getElementById("modeToggle");
+         const sunIcon = document.querySelector(".sun-icon");
+         const moonIcon = document.querySelector(".moon-icon");
+
+         // Check saved theme in localStorage and apply it
+         const currentTheme = localStorage.getItem("theme") || "light";
+          if (currentTheme === "dark") {
+            document.body.classList.add("dark-mode");
+            sunIcon.style.display = "none";
+            moonIcon.style.display = "inline-block";
+         } else {
+            sunIcon.style.display = "inline-block";
+            moonIcon.style.display = "none";
+        }
+
+    // Toggle between light and dark mode on button click
+    modeToggle.addEventListener("click", () => {
+        const isDarkMode = document.body.classList.toggle("dark-mode");
+
+        // Apply dark mode styles to relevant sections
+        const sections = document.querySelectorAll('.about, .core-values, .team');
+        sections.forEach(section => {
+            if (isDarkMode) {
+                section.classList.add('dark-mode');
+            } else {
+                section.classList.remove('dark-mode');
+            }
+        });
+
+        // Update icons and local storage
+        if (isDarkMode) {
+            sunIcon.style.display = "none";
+            moonIcon.style.display = "inline-block";
+            localStorage.setItem("theme", "dark");
+        } else {
+            sunIcon.style.display = "inline-block";
+            moonIcon.style.display = "none";
+            localStorage.setItem("theme", "light");
+        }
+    });
+    });
+      </script>
 </body>
-</html>
+</html>