diff --git a/index.html b/index.html
index 0d8d5e8..703ae29 100644
--- a/index.html
+++ b/index.html
@@ -822,6 +822,8 @@
       color: #007bff;
     }
 
+    /* footer styling from here (nav) */
+
     .footer-nav {
       display: flex;
       gap: 20px;
@@ -1029,6 +1031,8 @@
     }
 
     /* Dark Mode Search Bar */
+
+    /* this section classes are duplicate of same type for diiferent stylings of same div */
     .dark-mode .search-container,
     .dark .search-container {
       background: linear-gradient(135deg,
@@ -1556,9 +1560,7 @@
     </div>
 
   </nav>
-  <!-- Navbar ends here -->
-
-  <!-- Training and Internship program section starts here  -->
+  
 
   <div class="bg-body-tertiary mt-4 py-2 mb-4 ">
     <div class="container-fluid d-flex flex-wrap justify-content-center align-items-center px-2 px-sm-5 mt-3 mb-4">
diff --git a/services.html b/services.html
deleted file mode 100644
index 7fd5bad..0000000
--- a/services.html
+++ /dev/null
@@ -1,822 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>GrowCraft</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT"
-      crossorigin="anonymous"
-    />
-    <script
-      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
-      integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
-      crossorigin="anonymous"
-    ></script>
-    <link rel="stylesheet" href="src/style.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
-    />
-    <link rel="shortcut icon" href="Favicon.ico" type="image/x-icon" />
-
-    <!-- Added custom view all works button class with hover effects and smooth transitions
-    <style>
-    body {
-  background: #fefefe;
-  font-family: 'Segoe UI', sans-serif;
-}
-
-.service-box {
-  border-radius: 15px;
-  transition: transform 0.4s ease, background 0.4s ease;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
-  background: #ffffff;
-}
-
-.service-box:hover {
-  transform: translateY(-8px);
-  background: linear-gradient(135deg, #e8f0ff, #f8e8ff);
-}
-
-.icon {
-  font-size: 2.5rem;
-}
-
-.read-more {
-  background: linear-gradient(to right, #9fdfff, #e4c1f9);
-  border: none;
-  color: #222;
-  padding: 5px 15px;
-  transition: all 0.3s ease-in-out;
-  border-radius: 8px;
-}
-
-.read-more:hover {
-  background: linear-gradient(to right, #b8f5f0, #eecdf9);
-  transform: scale(1.05);
-}
-
-.fade-in {
-  opacity: 0;
-  animation: fadeIn 0.8s ease-out forwards;
-}
-
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-}
-        .btn-custom-purple {
-            background-color: #463896;
-            border-color: #291987;
-            color: white;
-        }
-
-        .btn-custom-purple:hover {
-            background-color: #1f0d66;
-            border-color: #1f0d66;
-            color: white;
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(41, 25, 135, 0.4);
-            transition: all 0.3s ease;
-        }
-
-        .btn-custom-purple:focus,
-        .btn-custom-purple:active {
-            background-color: #1f0d66 !important;
-            border-color: #1f0d66 !important;
-            color: white !important;
-            box-shadow: 0 0 0 0.2rem rgba(41, 25, 135, 0.25) !important;
-        }
-
-        /* === Navbar Custom Styling === */
-
-       /* Navbar Styling */
-.navbar {
-  background: #fff;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-  padding: 0.7rem 1rem;
-}
-
-.navbar-brand img {
-  max-height: 55px;
-}
-
-/* Menu Links */
-.navbar-nav .nav-link {
-  font-weight: 600;
-  color: #f9a825; /* golden */
-  position: relative;
-  transition: all 0.3s ease;
-  margin: 0 15px; /* Add horizontal spacing between nav links */
-}
-
-/* Additional spacing for better visual separation */
-.navbar-nav .nav-item {
-  margin: 0 5px;
-}
-
-/* Responsive spacing */
-@media (max-width: 991.98px) {
-  .navbar-nav .nav-link {
-    margin: 10px 0; /* Vertical spacing on mobile */
-  }
-  
-  .navbar-nav .nav-item {
-    margin: 5px 0;
-  }
-}
-
-/* Underline animation */
-.navbar-nav .nav-link::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: -4px;
-  width: 0%;
-  height: 2px;
-  background: #007c91; /* teal underline */
-  transition: width 0.3s ease;
-}
-
-
-
-/* Toggle Button */
-.theme-toggle .toggle-btn {
-  border: 2px solid #000;
-  background: transparent;
-  border-radius: 50%;
-  width: 42px;
-  height: 42px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-/* search bar */
-
-    .search-container {
-  display: flex;
-  align-items: center;
-  background-color: white;
-  border-radius: 25px;
-  padding: 5px 10px;
-  width: 100%;
-  max-width: 300px;
-  margin-left: auto;
-  margin-right: 20px;
-}
-
-.search-input {
-  border: none;
-  outline: none;
-  padding: 8px;
-  font-size: 16px;
-  flex: 1;
-  color: #333;
-}
-
-.search-input::placeholder {
-  color: #aaa;
-}
-
-.search-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: #555;
-  font-size: 18px;
-}
-
-@media screen and (max-width: 600px) {
-  .search-container {
-    max-width: 200px;
-  }
-
-  .search-input {
-    font-size: 14px;
-  }
-}
-    
-.theme-toggle .toggle-btn:hover {
-  transform: rotate(20deg) scale(1.1);
-  border-color: #007c91;
-  color: #007c91;
-}
-
-
-        /* Responsive logo alignment fix */
-  
-        .card img {
-      height: 200px;
-      object-fit: cover;
-      width: 100%;
-    }
-    </style>
-     END: Custom CSS changes -->
-
-    <style>
-      .h {
-        transition: transform 0.3s ease-in-out;
-      }
-      .h:hover {
-        transform: scale(1.01);
-      }
-      .flex-column {
-        margin: 0.1rem;
-        transition: box-shadow 0.2s ease-in-out;
-      }
-      .flex-column:hover {
-        box-shadow: 0 0 18px grey;
-      }
-      .icon {
-        transition: transform 0.3s ease-in-out;
-      }
-      .card-title {
-        transition: font-size 0.3s ease-in;
-      }
-      .card-title:hover {
-        font-size: 22px;
-      }
-      .icon:hover {
-        transform: scale(1.01);
-        box-shadow: 0 0 18px grey;
-      }
-      .custom-footer-green {
-  background: linear-gradient(180deg, #4be04b 0%, #6eea6e 100%);
-  color: #222;
-  font-family: 'Segoe UI', sans-serif;
-}
-body.dark-mode .custom-footer-green{
-  background: #222;
-  color: #222;
-  font-family: 'Segoe UI', sans-serif;
-}
-      /* Dark mode styles */
-body.dark-mode {
-  background-color: #121212 !important;
-  color: #ffffff !important;
-}
-
-body.dark-mode .navbar {
-  background-color: #1f1f1f !important;
-}
-
-body.dark-mode .custom-footer-green {
-  background-color: #1f1f1f !important;
-  color: #ffffff;
-}
-
-body.dark-mode .card {
-  background-color: #1f1f1f !important;
-  color: #ffffff;
-}
-
-body.dark-mode a {
-  color: #bb86fc !important;
-}
-
-body.dark-mode .btn-outline-secondary {
-  border-color: #bb86fc !important;
-  color: #bb86fc !important;
-}
-
-body.dark-mode .search-container {
-  background-color: #333 !important;
-}
-
-body.dark-mode .search-input {
-  background-color: #222 !important;
-  color: #fff !important;
-}
-
-body.dark-mode .footer-list a {
-  color: #bb86fc !important;
-}
-
-body.dark-mode .theme-aware-logo {
-  content: url('images/Logo.png');
-}
-/* Dark mode read more button fix */
-body.dark-mode .read-more {
-    background: linear-gradient(to right, #5a5a5a, #777);
-    color: #fff;
-}
-
-/* Circular Dark Mode Toggle Button Styling */
-.theme-toggle .toggle-btn {
-    border: 2px solid #cbc9cc;
-    background-color: #2b2d2e;
-    color: #ffffff;
-    border-radius: 50%;
-    width: 45px;
-    height: 45px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-size: 1.25rem;
-}
-
-.theme-toggle .toggle-btn:hover {
-    background-color: #bb86fc;
-    transform: scale(1.1);
-}
-
-/* Footer dark mode */
-/* Dark mode footer */
-body.dark-mode .custom-footer-green {
-    background-color: #1a1a1a;
-    color: #e0e0e0 !important; /* default text color */
-}
-.custom-footer-green{
-  color:black;
-}
-
-body.dark-mode .custom-footer-green a {
-    color: #a6abd3 !important; /* links color */
-    transition: color 0.3s;
-}
-.custom-footer-green a {
-    color: #b604fd !important; /* links color */
-    transition: color 0.3s;
-}
-
-body.dark-mode .custom-footer-green a:hover {
-    color: #ffb74d !important; /* hover color */
-}
-.custom-footer-green a:hover {
-    color: #faf9f7 !important; /* hover color */
-}
-
-body.dark-mode .custom-footer-green h5,
-body.dark-mode .custom-footer-green p,
-body.dark-mode .custom-footer-green span,
-body.dark-mode .custom-footer-green li {
-    color: #ffffff !important; /* all text in footer */
-}
-.custom-footer-green h5,
-.custom-footer-green p,
-.custom-footer-green span,
-.custom-footer-green li {
-    color: #090808 !important; /* all text in footer */
-}
-
-body.dark-mode .custom-footer-green i {
-    color: #e0e0e0 !important; /* icons */
-}
-
-
-
-/* Footer bottom bar */
-body.dark-mode .footer-bottom-bar,
-body.dark-mode .footer-bottom-bar-text,
-body.dark-mode .footer-bottom-bar-text .footer-brand {
-    background-color: #1a1a1a !important;
-    color: #e0e0e0 !important;
-}
-.footer-bottom-bar,
-.footer-bottom-bar-text,
-.footer-bottom-bar-text .footer-brand {
-    background-color: #f3eded !important;
-    color: green !important;
-}
-
-body.dark-mode .footer-bottom-bar a {
-    color: #a6abd3 !important;
-}
-.footer-bottom-bar a {
-    color: #01020b !important;
-}
-.footer-bottom-bar a:hover {
-    color: green !important;
-}
-
-body.dark-mode .footer-bottom-bar a:hover {
-    color: #ffb74d !important;
-}
-/* Make all main containers dark in dark mode */
-
-
-/* Optional: for Bootstrap cards that still show white */
-body.dark-mode .card {
-    background-color: #1f1f1f !important;
-    color: #fff !important;
-}
-
-
-
-
-
-    </style>
-  </head>
-
-  <body id="main-body">
-    <nav class="navbar navbar-expand-lg">
-      <div class="container-fluid d-flex justify-content-between align-items-center px-3 px-lg-5">
-        <!-- Logo -->
-        <a class="navbar-brand" href="./index.html">
-          <img
-            src="images/Logo_new.png"
-            alt="GrowCraft"
-            width="160"
-            class="theme-aware-logo"
-            data-light-src="images/Logo_new.png"
-            data-dark-src="images/Logo.png"
-          />
-        </a>
-
-        <!-- Toggle (for mobile) -->
-        <button
-          class="navbar-toggler"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarNav"
-          aria-controls="navbarNav"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
-          <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <!-- Menu -->
-        <div
-          class="collapse navbar-collapse justify-content-center"
-          id="navbarNav"
-        >
-          <ul class="navbar-nav mx-auto gap-4">
-            <li class="nav-item">
-              <a class="nav-link" href="./index.html">Home</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link active" href="./services.html">Services</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="blogListing.html">Blogs</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html#about">About Us</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./work.html">Our Work</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="src/contact.html">Contact Us</a>
-            </li>
-          </ul>
-        </div>
-        
-
-        <!-- Dark/Light toggle button 
-    <div class="theme-toggle">
-      <button onclick="toggleDarkMode()" class="toggle-btn">
-        <i class="fa-solid fa-sun"></i>
-      </button>
-    </div> -->
-
-        <!-- Responsive Search Bar -->
-        <div class="d-flex align-items-center gap-3">
-  <div class="search-container">
-    <input type="text" placeholder="Search..." class="search-input" />
-    <button class="search-button">
-      <i class="fas fa-search"></i>
-    </button>
-  </div>
-
-  <div class="theme-toggle">
-    <button id="themeToggleBtn" class="toggle-btn">
-      <i class="fa-solid fa-moon"></i>
-    </button>
-  </div>
-</div>
-
-    </nav>
-
-    <div class="container py-5">
-      <div class="row g-4">
-        <!-- Card Template -->
-        <div
-          class="col-md-6 col-lg-4 service-card fade-in h"
-          style="animation-delay: 0s"
-        >
-          <div class="card h-100 service-box">
-            <div class="card-body d-flex flex-column">
-              <img
-                src="./images/DigitalMarketing.png"
-                alt="Digital Marketing Icon"
-                class="icon mb-3"
-              />
-              <h5 class="card-title">Digital Marketing</h5>
-              <p class="card-text summary">
-                In today's digital-driven age, Marketing means Digital
-                Marketing. For any size of business, Digital Marketing plays a
-                vital role...
-              </p>
-              <p class="card-text extra d-none">
-                It helps reach target customers and enhances brand visibility
-                through SEO, PPC, social media, email, and content strategies.
-              </p>
-              <div class="mt-auto">
-                <button class="btn btn-sm read-more">Read More</button>
-                <a
-                  href="./src/digital-marketing.html"
-                  class="btn btn-sm btn-outline-secondary"
-                  >Explore</a
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Add more cards below with updated delays -->
-        <div
-          class="col-md-6 col-lg-4 service-card fade-in h"
-          style="animation-delay: 0.2s"
-        >
-          <div class="card h-100 service-box">
-            <div class="card-body d-flex flex-column">
-              <img
-                src="./images/WebDev.png"
-                alt="Website Development Icon"
-                class="icon mb-3"
-              />
-              <h5 class="card-title">Website Development</h5>
-              <p class="card-text summary">
-                A website is often the first impression. Our services ensure
-                your site is attractive, functional, and aligned with your
-                business needs...
-              </p>
-              <p class="card-text extra d-none">
-                We build responsive, fast-loading, SEO-optimized websites using
-                modern frameworks to give you the best online presence.
-              </p>
-              <div class="mt-auto">
-                <button class="btn btn-sm read-more">Read More</button>
-                <a
-                  href="./learn/webdev.html"
-                  class="btn btn-sm btn-outline-secondary"
-                  >Explore</a
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          class="col-md-6 col-lg-4 service-card fade-in h"
-          style="animation-delay: 0.4s"
-        >
-          <div class="card h-100 service-box">
-            <div class="card-body d-flex flex-column">
-              <img
-                src="./images/GraphicDesign.png"
-                alt="Graphic Design Icon"
-                class="icon mb-3"
-              />
-              <h5 class="card-title">Graphic Design</h5>
-              <p class="card-text summary">
-                In a visually driven world, stunning designs can define your
-                brand. We create logos, graphics, and materials that truly stand
-                out...
-              </p>
-              <p class="card-text extra d-none">
-                From social media creatives to full branding kits, our designers
-                make your vision come to life with bold, clean visuals.
-              </p>
-              <div class="mt-auto">
-                <button class="btn btn-sm read-more">Read More</button>
-                <a
-                  href="./learn/graphic.html"
-                  class="btn btn-sm btn-outline-secondary"
-                  >Explore</a
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          class="col-md-6 col-lg-4 service-card fade-in h"
-          style="animation-delay: 0.6s"
-        >
-          <div class="card h-100 service-box">
-            <div class="card-body d-flex flex-column">
-              <img
-                src="./images/SocialMediaManagement3.png"
-                alt="Social Media Management Icon"
-                class="icon mb-3"
-              />
-              <h5 class="card-title">Social Media Management</h5>
-              <p class="card-text summary">
-                Social platforms are key to modern brand engagement. Our team
-                manages, grows, and maintains your presence on all major
-                channels...
-              </p>
-              <p class="card-text extra d-none">
-                Through content planning, community engagement, and real-time
-                analytics, we drive measurable growth.
-              </p>
-              <div class="mt-auto">
-                <button class="btn btn-sm read-more">Read More</button>
-                <a
-                  href="./learn/socialmedia.html"
-                  class="btn btn-sm btn-outline-secondary"
-                  >Explore</a
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          class="col-md-6 col-lg-4 service-card fade-in h"
-          style="animation-delay: 0.8s"
-        >
-          <div class="card h-100 service-box">
-            <div class="card-body d-flex flex-column">
-              <img
-                src="./images/ContentWriting3.png"
-                alt="Content Writing"
-                class="icon mb-3"
-              />
-              <h5 class="card-title">Content Writing</h5>
-              <p class="card-text summary">
-                Quality content builds trust and authority. We offer compelling
-                blog posts, product descriptions, and ad copy that drive
-                action...
-              </p>
-              <p class="card-text extra d-none">
-                Our team ensures clarity, engagement, and SEO-optimization to
-                attract readers and retain customers.
-              </p>
-              <div class="mt-auto">
-                <button class="btn btn-sm read-more">Read More</button>
-                <a
-                  href="./learn/contentwriting.html"
-                  class="btn btn-sm btn-outline-secondary"
-                  >Explore</a
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <footer class="custom-footer-green" style="
-  background-color: #1a1a1a;
-  color: #e0e0e0;">
-      <div class="container py-5">
-        <div class="row align-items-center">
-          <div class="col-lg-4 text-center text-lg-start mb-4 mb-lg-0">
-            <img
-              src="images/Logo_new.png"
-              alt="GrowCraft"
-              style="height: 60px"
-            />
-            <!-- <h2 class="fw-bold mt-2 mb-3" style="color: #222;">GrowCraft</h2> -->
-            <p class="mb-3 fw-semibold" style="font-size: 1.15rem">
-              Empowering businesses with innovative digital<br />
-              solutions and creative excellence.
-            </p>
-            <div
-              class="d-flex justify-content-center justify-content-lg-start gap-4 mb-2"
-            >
-              <div>
-                <span class="fw-bold" style="font-size: 1.5rem">500+</span
-                ><br />
-                <span class="footer-label">PROJECTS</span>
-              </div>
-              <div>
-                <span class="fw-bold" style="font-size: 1.5rem">150+</span
-                ><br />
-                <span class="footer-label">CLIENTS</span>
-              </div>
-              <div>
-                <span class="fw-bold" style="font-size: 1.5rem">5+</span><br />
-                <span class="footer-label">YEARS</span>
-              </div>
-            </div>
-          </div>
-          <!-- Services -->
-          <div class="col-lg-2 mb-4 mb-lg-0">
-            <h5 class="fw-bold mb-3 footer-underline">Services</h5>
-            <ul class="list-unstyled footer-list">
-              <li><a href="./learn/webdev.html">Web Development</a></li>
-              <li><a href="./learn/graphic.html">Graphic Design</a></li>
-              <li>
-                <a href="./src/digital-marketing.html">Digital Marketing</a>
-              </li>
-              <li><a href="./learn/contentwriting.html">Content Writing</a></li>
-              <li><a href="./learn/socialmedia.html">Social Media</a></li>
-              <li><a href="#">Cyber Analyst</a></li>
-            </ul>
-          </div>
-          <!-- Quick Links -->
-          <div class="col-lg-2 mb-4 mb-lg-0">
-            <h5 class="fw-bold mb-3 footer-underline">Quick Links</h5>
-            <ul class="list-unstyled footer-list quick-links-list">
-              <li><a href="#../index.html#about">About Us</a></li>
-              <li><a href="./work.html">Portfolio</a></li>
-              <li><a href="src/contact.html">Contact</a></li>
-              <li><a href="#">Careers</a></li>
-              <li><a href="blogListing.html">Blog</a></li>
-            </ul>
-          </div>
-          <!-- Get In Touch -->
-          <div class="col-lg-4">
-            <h5 class="fw-bold mb-3 footer-underline">Get In Touch</h5>
-            <ul class="list-unstyled footer-list">
-              <li>
-                <i class="fa-solid fa-envelope me-2"></i>
-                <a href="mailto:info@growcraft.com">info@growcraft.com</a>
-              </li>
-              <li>
-                <i class="fa-solid fa-phone me-2" ></i>
-                <a href="tel:+91999999999">+91 999 999 999</a>
-              </li>
-              <li>
-                <i
-                  class="fa-solid fa-location-dot me-2"
-                ></i>
-                <a
-                  href="https://maps.google.com/?q=ABC+Street,+XYZ+City,+India"
-                  target="_blank"
-                  >ABC Street, XYZ City, India</a
-                >
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div class="footer-bottom-bar mt-4 py-3">
-        <div
-          class="container d-flex flex-column flex-md-row justify-content-between align-items-center"
-        >
-          <div class="small">
-            © 2025
-            <span style="font-weight: 600">GrowCraft</span>. All
-            rights reserved.
-          </div>
-          <div>
-            <a href="#" class="footer-link">Privacy</a>
-            <a href="#" class="footer-link">Terms</a>
-            <a href="#" class="footer-link">Sitemap</a>
-          </div>
-        </div>
-      </div>
-    </footer>
-    <!-- ...existing code... -->
-    <script>
-      document.querySelectorAll(".read-more").forEach((btn) => {
-        btn.addEventListener("click", () => {
-          const extra = btn.closest(".card-body").querySelector(".extra");
-          extra.classList.toggle("d-none");
-          btn.textContent = extra.classList.contains("d-none")
-            ? "Read More"
-            : "Read Less";
-        });
-      });
-    </script>
-    <script src="script.js"></script>
-    <script src="/src/darkMode.js"></script>
-    <script>
-      const toggleBtn = document.getElementById('themeToggleBtn');
-const body = document.body;
-
-// Apply saved theme on page load
-if (localStorage.getItem('theme') === 'dark') {
-  body.classList.add('dark-mode');
-}
-
-toggleBtn.addEventListener('click', () => {
-  body.classList.toggle('dark-mode');
-
-  if (body.classList.contains('dark-mode')) {
-    localStorage.setItem('theme', 'dark');
-    toggleBtn.innerHTML = '<i class="fa-solid fa-sun"></i>';
-  } else {
-    localStorage.setItem('theme', 'light');
-    toggleBtn.innerHTML = '<i class="fa-solid fa-moon"></i>';
-  }
-});
-
-    </script>
-  </body>
-</html>
