From 5d960b54140f6b3f3fd82629e05cd724d132e9df Mon Sep 17 00:00:00 2001
From: Poushmita <poushmitap@gmail.com>
Date: Thu, 17 Oct 2024 01:33:57 +0530
Subject: [PATCH 1/7] adding Dark Mode/ Light Mode Toggle for every page

---
 Css-files/content.css    |    4 +-
 Css-files/login1.css     |    2 -
 Css-files/signup1.css    |    4 +-
 Html-files/about.html    | 1573 +++++++++++++++++++++-----------------
 Html-files/cart.html     |  382 ++++++---
 Html-files/contact.html  |  236 +++++-
 Html-files/login.html    |   92 +++
 Html-files/menu.html     |  191 ++++-
 Html-files/services.html |  749 +++++++++++-------
 Html-files/signup.html   |  370 +++++----
 index.html               |  119 +--
 script.js                |   19 +
 style.css                |  122 +++
 13 files changed, 2507 insertions(+), 1356 deletions(-)
 create mode 100644 script.js

diff --git a/Css-files/content.css b/Css-files/content.css
index 7dbdf3be..f8548031 100644
--- a/Css-files/content.css
+++ b/Css-files/content.css
@@ -3,9 +3,7 @@
   padding: 0px;
 
 }
-p{
-  color: hsl(208, 7%,46%);
-}
+
 body {
   background-color:black;
   background-attachment: fixed;
diff --git a/Css-files/login1.css b/Css-files/login1.css
index 3ba147a6..ca881644 100644
--- a/Css-files/login1.css
+++ b/Css-files/login1.css
@@ -8,8 +8,6 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-  background-size: cover;
 }
 
 .main-login {
diff --git a/Css-files/signup1.css b/Css-files/signup1.css
index 11321066..1d6df082 100644
--- a/Css-files/signup1.css
+++ b/Css-files/signup1.css
@@ -16,9 +16,7 @@
 body {
   margin: 0;
   font-family: 'Noto Sans', sans-serif;
-  background: linear-gradient(135deg, #ffb6c1, #ff69b4); 
-  background-size: cover;
-  background-attachment: fixed;
+  
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/Html-files/about.html b/Html-files/about.html
index 83f0fe9a..f7326bb1 100644
--- a/Html-files/about.html
+++ b/Html-files/about.html
@@ -5,6 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Retro</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
         integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -26,538 +29,684 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
-        #sr {
-display: none; 
-position: fixed; 
-bottom: 70px; 
-right: 15px; 
-z-index: 99; 
-font-size: 18px;
-border: none;
-outline: none;
-background-color: transparent; 
-color: rgb(17, 17, 17); 
-cursor: pointer; 
-padding: 15px; 
-border-radius: 4px; 
-}
-#sr:hover {
-background-color: transparent; 
-color: black;
-border-radius: 100px;
-}
-.circle{
-   z-index: 10000;
-   width: 20px;
-   height: 20px;
-   border-radius: 50%;
-   pointer-events: none;
-    animation: colors 5s infinite;
-    position: fixed;
-  transform: translate(-50%,-50%);
-}
-.circle::before {
-    content: "";
-    position: fixed;
-  width: 50px;
-  height: 50px;
-  opacity: 0.2;
-  transform: translate(-30%,-30%);
-  border-radius: 50%;
-}
-body{
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-            background-size: cover;
-}
-::-webkit-scrollbar {
-  width: 10px; 
-}
-::-webkit-scrollbar-track {
-  background-color: #feaea5; 
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: linear-gradient(
-    to bottom,
-    hsl(357, 37%, 62%),
-    hsl(304, 14%, 46%)
-  );
-  border-radius: 6px; 
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(172, 38, 94); 
-}
-
-* {
-  scrollbar-width: thick; 
-}
-::-webkit-scrollbar-button {
-  display: none;
-}
-
-:root{
-    --ff-philosopher: "Philosopher", sans-serif;
-    --ff-poppins: "Poppins", sans-serif;
-}
-
-#preloader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: hsl(20, 43%, 93%); 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: opacity 2s ease-out, visibility 2s ease-out;
-    opacity: 1;
-    visibility: visible;
-    z-index: 9999; 
-}
-
-
-#preloader.hidden {
-    opacity: 0;
-    visibility: hidden;
-}
-
-#loader {
-    display: block;
-    position: relative;
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: hsl(304, 14%, 46%);
-    animation: spin 3s linear infinite;
-}
-
-#loader:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: hsl(357, 37%, 62%);
-    animation: spin 3s linear infinite;
-}
-
-#loader:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: hsl(357, 93%, 84%);
-    animation: spin 1.5s linear infinite;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-.header {
-    background: radial-gradient(circle at bottom left, #FED6D6, #FFE4E1 60%, transparent 80%);
-    /* padding: 2rem; */
-    text-align: center;
-    font-family: 'Philosopher', sans-serif;
-}
-
-.animated-header {
-    font-family: Arial, sans-serif; /* Use a basic font for testing */
-    color: #dc3545;
-    display: inline-block; /* Allow individual letters to be styled separately */
-    overflow: hidden; /* Ensures text appears only when animated */
-}
-
-/* Animation for each letter */
-.letter {
-    display: inline-block; /* Allows each letter to be animated individually */
-    opacity: 0; /* Start invisible */
-    transform: translateY(20px); /* Start slightly below */
-    animation: appear 1.0s forwards; /* Animation for appearance */
-}
-
-/* Keyframes for letter appearance */
-@keyframes appear {
-    0% {
-        opacity: 0;
-        transform: translateY(20px);
+  <style>
+
+    /*  */
+    /* body{
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+      background-size: cover;
+    } */
+    .form-check{
+      margin-right:1rem ;
+    }
+    .section {
+      transition: background-color 0.3s ease; /* Smooth transition for sections */
+    }
+    section{
+      background-color: white;
+      color: black;
+    }
+    .section h2{
+      color: hsl(357, 82%,35%) ;
+    }
+    .section p{
+      color:  hsl(208, 7%,46%);
+    }
+    .navbar a{
+      color: black;
+    }
+    #headConatiner{
+      background-color:hsl(20, 43%, 93%);
+    }
+    h1, h2, h3, h4, h5, h6 {
+        color: #4b505e;
+    }
+    .new_footer_top .f_widget.about-widget .f_list li a {
+        color: #6a7695;
+    }
+    .darkP{
+      color: hsl(203, 30%, 26%);
+    }
+        
+    body {
+      transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+    }
+        
+
+
+    
+    [data-bs-theme='light'] {
+      background-color: #ffffff; /* Light background */
+      color: #000000; /* Light text color */
+    } 
+
+    [data-bs-theme='light'] body{
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+      background-size: cover;
+      color: #ffffff; /* Light text color */
+    } 
+    /* for navbar */
+    [data-bs-theme='light'] .navbar {
+      background-color: #FFFFF5CC; 
+      a{
+        color: #000;
+      }
+      label{
+        color: #000;
+      }
+    }
+    /* [data-bs-theme='light'] #headContainer{
+      background-color: hsl(20, 43%, 93%);
+    } */
+    /* for footer */
+    [data-bs-theme='light'] #footer{
+      background-color: hsl(20, 43%, 93%);
+    }
+
+
+    [data-bs-theme='light'] .section {
+      background-color: hsl(203, 30%, 96%); /* Light section background */
+      h2{
+        color: hsl(357, 82%, 35%);
+      }
+    }
+
+
+
+
+    [data-bs-theme='dark'] {
+      background-color: #000000; /* Dark background */
+      color: #ffffff; /* Light text color */
+    } 
+
+    [data-bs-theme='dark'] body{
+      background-color: #232323;
+      color: #ffffff;
+      p{
+        color: #fde6e6;
+      }
+    }  
+
+    /* for navbar */
+    [data-bs-theme='dark'] .navbar {
+      background-color:rgb(70, 70, 70); 
+      a{
+        color: #fff;
+      }
+    }
+   
+    /* [data-bs-theme='dark'] #headContainer{
+      background-color: rgb(136, 136, 136);
+      color: #ffffff;
+    } */
+    /* for footer */
+    [data-bs-theme='dark'] .footer{
+      background-color: rgb(101, 100, 100);
+      color: #fde6e6;
+      p{
+        color: #fde6e6;
+      }
+      .darkP{
+          color: #ffffff;
+          font-weight: bold;
+      }
+    }
+    [data-bs-theme='dark'] .footer{
+      .new_footer_top .f_widget.about-widget .f_list li a {
+        color: #fde6e6;
+      }
+      h3{
+        color: #6d92e9;
+      }
+      .retro a{
+        color: #6d92e9;
+        font-weight: bold;
+      }
+    }
+
+    [data-bs-theme='dark'] .section {
+      background-color: rgb(65, 64, 64); /* Dark section background */
+      p{
+        color: #e6e5e5
+      }
+      h2{
+        color: hsl(357, 81%, 61%);
+      }
+    }
+    
+        
+
+
+
+
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
+    #sr {
+      display: none; 
+      position: fixed; 
+      bottom: 70px; 
+      right: 15px; 
+      z-index: 99; 
+      font-size: 18px;
+      border: none;
+      outline: none;
+      background-color: transparent; 
+      color: rgb(17, 17, 17); 
+      cursor: pointer; 
+      padding: 15px; 
+      border-radius: 4px; 
+    }
+    #sr:hover {
+      background-color: transparent; 
+      color: black;
+      border-radius: 100px;
     }
-    100% {
+    .circle{
+      z-index: 10000;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      pointer-events: none;
+        animation: colors 5s infinite;
+        position: fixed;
+      transform: translate(-50%,-50%);
+    }
+    .circle::before {
+        content: "";
+        position: fixed;
+      width: 50px;
+      height: 50px;
+      opacity: 0.2;
+      transform: translate(-30%,-30%);
+      border-radius: 50%;
+    }
+   
+    ::-webkit-scrollbar {
+      width: 10px; 
+    }
+    ::-webkit-scrollbar-track {
+      background-color: #feaea5; 
+      border-radius: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: linear-gradient(
+        to bottom,
+        hsl(357, 37%, 62%),
+        hsl(304, 14%, 46%)
+      );
+      border-radius: 6px; 
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: rgb(172, 38, 94); 
+    }
+
+    * {
+      scrollbar-width: thick; 
+    }
+    ::-webkit-scrollbar-button {
+      display: none;
+    }
+
+    :root{
+        --ff-philosopher: "Philosopher", sans-serif;
+        --ff-poppins: "Poppins", sans-serif;
+    }
+
+    #preloader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: hsl(20, 43%, 93%); 
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: opacity 2s ease-out, visibility 2s ease-out;
         opacity: 1;
-        transform: translateY(0);
-    }
-}
-.spacer {
-    display: inline-block; /* Allows it to take up space */
-    width: 40px; /* Adjust the width for more or less space */
-}
-
-/* Add animation delay for each letter */
-.letter:nth-child(1) { animation-delay: 0s; }
-.letter:nth-child(2) { animation-delay: 0.2s; }
-.letter:nth-child(3) { animation-delay: 0.4s; }
-.letter:nth-child(4) { animation-delay: 0.6s; }
-.letter:nth-child(5) { animation-delay: 0.8s; }
-.letter:nth-child(6) { animation-delay: 01.0s; }
-.letter:nth-child(7) { animation-delay: 01.2s; }
-.letter:nth-child(8) { animation-delay: 01.4s; }
-.letter:nth-child(9) { animation-delay: 01.6s; }
-.letter:nth-child(10) { animation-delay: 01.8s; }
-.letter:nth-child(11) { animation-delay: 2.0s; }
-.letter:nth-child(12) { animation-delay: 2.1s; }
-/* .letter:nth-child(13) { animation-delay: 1.2s; } */
-
-
-.social-icons a {
-  font-size: 1.2rem;
-  padding: 8px;
-  margin: 15px;
-  text-decoration: none;
-  color: rgb(18, 16, 16);
-}
-
-.social-icons a:hover {
-  color: brown;
-  background-color: hsl(22, 76%, 85%);
-  border-radius: 10px;
-  transform: scale(1.5); /* Increase size */
-  transition: transform 0.3s ease; /* Smooth transition effect */
-}
-
-
-
- .about_container {
-    max-width: 1200px; 
-    margin: 0 auto; 
-    padding: 40px 20px; 
-    background-color: hsl(203, 30%, 96%); 
-    border-radius: 10px; 
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-} 
-/* .aboutcontainer {
-    max-width: 1200px; 
-    margin: 0 auto; 
-    padding: 40px 20px; 
-    background-color: hsl(203, 30%, 96%); 
-    border-radius: 10px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
-} */
-.about_container:hover {
-  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3); /* Adds a shadow to the outer container */
-  transform: scale(1.05); /* Slightly enlarges the outer box */
-  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
-}
-
-.about_container > * { 
-  /* Prevent hover effect on inner elements */
-  transition: none; 
-  transform: none;
-}
-
-
-.about1 {
-    font-family: var(--ff-poppins); /* Use your defined font */
-    color: hsl(208, 7%, 46%); /* Text color */
-    line-height: 1.6; /* Increase line height for readability */
-    margin-bottom: 20px; /* Spacing below this paragraph */
-}
-
-
-.about2,
-.about3 {
-    margin-bottom: 40px; /* Spacing between sections */
-}
-
-.section__title {
-    font-family: var(--ff-philosopher); /* Use your defined font */
-    color: hsl(357, 82%, 35%); /* Title color */
-    font-size: 1.8rem; /* Font size for headings */
-    margin-bottom: 15px; /* Spacing below headings */
-    border-bottom: 2px solid hsl(357, 82%, 35%); /* Underline for headings */
-    padding-bottom: 5px; /* Padding below the heading */
-}
-.section__titlestyle{
-  font-family: var(--ff-philosopher); /* Use your defined font */
-    color: hsl(357, 82%, 35%); /* Title color */
-    font-size: 1.8rem; /* Font size for headings */
-    margin-bottom: 15px; /* Spacing below headings */
-    border-bottom: 2px solid hsl(357, 82%, 35%); /* Underline for headings */
-    padding-bottom: 5px; 
-    text-align: center;
-}
-
-.about2 p,
-.about3 p {
-    font-family: var(--ff-poppins); /* Use your defined font */
-    color: hsl(208, 7%, 46%); /* Paragraph color */
-    line-height: 1.6; /* Increase line height for readability */
-    margin-bottom: 20px; /* Spacing below paragraphs */
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
+        visibility: visible;
+        z-index: 9999; 
+    }
+
+
+    #preloader.hidden {
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    #loader {
+        display: block;
+        position: relative;
+        width: 150px;
+        height: 150px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: hsl(304, 14%, 46%);
+        animation: spin 3s linear infinite;
+    }
+
+    #loader:before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: hsl(357, 37%, 62%);
+        animation: spin 3s linear infinite;
+    }
+
+    #loader:after {
+        content: "";
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        right: 15px;
+        bottom: 15px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: hsl(357, 93%, 84%);
+        animation: spin 1.5s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+    .header {
+        background: radial-gradient(circle at bottom left, #FED6D6, #FFE4E1 60%, transparent 80%);
+        /* padding: 2rem; */
+        text-align: center;
+        font-family: 'Philosopher', sans-serif;
+    }
+
+    .animated-header {
+        font-family: Arial, sans-serif; /* Use a basic font for testing */
+        color: #dc3545;
+        display: inline-block; /* Allow individual letters to be styled separately */
+        overflow: hidden; /* Ensures text appears only when animated */
+    }
+
+    /* Animation for each letter */
+    .letter {
+        display: inline-block; /* Allows each letter to be animated individually */
+        opacity: 0; /* Start invisible */
+        transform: translateY(20px); /* Start slightly below */
+        animation: appear 1.0s forwards; /* Animation for appearance */
+    }
+
+    /* Keyframes for letter appearance */
+    @keyframes appear {
+        0% {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        100% {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+    .spacer {
+        display: inline-block; /* Allows it to take up space */
+        width: 40px; /* Adjust the width for more or less space */
+    }
+
+    /* Add animation delay for each letter */
+    .letter:nth-child(1) { animation-delay: 0s; }
+    .letter:nth-child(2) { animation-delay: 0.2s; }
+    .letter:nth-child(3) { animation-delay: 0.4s; }
+    .letter:nth-child(4) { animation-delay: 0.6s; }
+    .letter:nth-child(5) { animation-delay: 0.8s; }
+    .letter:nth-child(6) { animation-delay: 01.0s; }
+    .letter:nth-child(7) { animation-delay: 01.2s; }
+    .letter:nth-child(8) { animation-delay: 01.4s; }
+    .letter:nth-child(9) { animation-delay: 01.6s; }
+    .letter:nth-child(10) { animation-delay: 01.8s; }
+    .letter:nth-child(11) { animation-delay: 2.0s; }
+    .letter:nth-child(12) { animation-delay: 2.1s; }
+    /* .letter:nth-child(13) { animation-delay: 1.2s; } */
+
+
+    .social-icons a {
+      font-size: 1.2rem;
+      padding: 8px;
+      margin: 15px;
+      text-decoration: none;
+      color: rgb(18, 16, 16);
+    }
+
+    .social-icons a:hover {
+      color: brown;
+      background-color: hsl(22, 76%, 85%);
+      border-radius: 10px;
+      transform: scale(1.5); /* Increase size */
+      transition: transform 0.3s ease; /* Smooth transition effect */
+    }
+
+
+
     .about_container {
-        padding: 20px; /* Adjust padding for smaller screens */
+        max-width: 1200px; 
+        margin: 0 auto; 
+        padding: 40px 20px; 
+        background-color: hsl(203, 30%, 96%); 
+        border-radius: 10px; 
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    } 
+    /* .aboutcontainer {
+        max-width: 1200px; 
+        margin: 0 auto; 
+        padding: 40px 20px; 
+        background-color: hsl(203, 30%, 96%); 
+        border-radius: 10px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
+    } */
+    .about_container:hover {
+      box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3); /* Adds a shadow to the outer container */
+      transform: scale(1.05); /* Slightly enlarges the outer box */
+      transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+    }
+
+    .about_container > * { 
+      /* Prevent hover effect on inner elements */
+      transition: none; 
+      transform: none;
+    }
+
+
+    .about1 {
+        font-family: var(--ff-poppins); /* Use your defined font */
+        color: hsl(208, 7%, 46%); /* Text color */
+        line-height: 1.6; /* Increase line height for readability */
+        margin-bottom: 20px; /* Spacing below this paragraph */
+    }
+
+
+    .about2,
+    .about3 {
+        margin-bottom: 40px; /* Spacing between sections */
     }
 
     .section__title {
-        font-size: 1.5rem; /* Adjust heading size for smaller screens */
+        font-family: var(--ff-philosopher); /* Use your defined font */
+        color: hsl(357, 82%, 35%); /* Title color */
+        font-size: 1.8rem; /* Font size for headings */
+        margin-bottom: 15px; /* Spacing below headings */
+        border-bottom: 2px solid hsl(357, 82%, 35%); /* Underline for headings */
+        padding-bottom: 5px; /* Padding below the heading */
+    }
+    .section__titlestyle{
+      font-family: var(--ff-philosopher); /* Use your defined font */
+        color: hsl(357, 82%, 35%); /* Title color */
+        font-size: 1.8rem; /* Font size for headings */
+        margin-bottom: 15px; /* Spacing below headings */
+        border-bottom: 2px solid hsl(357, 82%, 35%); /* Underline for headings */
+        padding-bottom: 5px; 
+        text-align: center;
     }
 
-    .about1, .about2 p, .about3 p {
-        font-size: 0.9rem; /* Adjust font size for paragraphs */
+    .about2 p,
+    .about3 p {
+        font-family: var(--ff-poppins); /* Use your defined font */
+        color: hsl(208, 7%, 46%); /* Paragraph color */
+        line-height: 1.6; /* Increase line height for readability */
+        margin-bottom: 20px; /* Spacing below paragraphs */
     }
-}
 
-   
+    /* Responsive design */
+    @media (max-width: 768px) {
+        .about_container {
+            padding: 20px; /* Adjust padding for smaller screens */
+        }
+
+        .section__title {
+            font-size: 1.5rem; /* Adjust heading size for smaller screens */
+        }
+
+        .about1, .about2 p, .about3 p {
+            font-size: 0.9rem; /* Adjust font size for paragraphs */
+        }
+    }
+
+      
+
+
+    .new_footer_area {
+        background: hsl(203, 30%, 96%);
+        margin-top: 20px;
+    }
+
+    .new_footer_top {
+        padding: 80px 0px 150px;
+        position: relative;
+        overflow-x: hidden;
+    }
+
+    /* Footer Bottom */
+    .new_footer_area .footer_bottom {
+        padding-top: 5px;
+        padding-bottom: 50px;
+    }
+    .footer_bottom {
+        font-size: 14px;
+        font-weight: 300;
+        line-height: 20px;
+        color: #7f88a6;
+        padding: 27px 0px;
+    }
+
+    /* Company Widget Styling */
+    .new_footer_top .company_widget p {
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 28px;
+        color: #6a7695;
+        margin-bottom: 20px;
+    }
+    .new_footer_top .company_widget .f_subscribe_two .btn_get {
+        border-width: 1px;
+        margin-top: 20px;
+    }
 
+    /* Contact Form Styling */
+    .f_subscribe_two {
+        display: flex;
+        flex-direction: column;
+        gap: 15px; /* Ensure enough space between input fields */
+    }
+
+    .f_subscribe_two input[type="email"],
+    .f_subscribe_two textarea {
+        width: 100%;
+        padding: 12px;
+        border: 1px solid #e2e2eb;
+        border-radius: 5px;
+        font-size: 14px;
+        color: #333;
+        background-color: #f7f7f7;
+        margin-bottom: 10px; /* Spacing between inputs */
+    }
 
-.new_footer_area {
-    background: hsl(203, 30%, 96%);
-    margin-top: 20px;
-}
-
-.new_footer_top {
-    padding: 80px 0px 150px;
-    position: relative;
-    overflow-x: hidden;
-}
-
-/* Footer Bottom */
-.new_footer_area .footer_bottom {
-    padding-top: 5px;
-    padding-bottom: 50px;
-}
-.footer_bottom {
-    font-size: 14px;
-    font-weight: 300;
-    line-height: 20px;
-    color: #7f88a6;
-    padding: 27px 0px;
-}
-
-/* Company Widget Styling */
-.new_footer_top .company_widget p {
-    font-size: 16px;
-    font-weight: 300;
-    line-height: 28px;
-    color: #6a7695;
-    margin-bottom: 20px;
-}
-.new_footer_top .company_widget .f_subscribe_two .btn_get {
-    border-width: 1px;
-    margin-top: 20px;
-}
-
-/* Contact Form Styling */
-.f_subscribe_two {
-    display: flex;
-    flex-direction: column;
-    gap: 15px; /* Ensure enough space between input fields */
-}
-
-.f_subscribe_two input[type="email"],
-.f_subscribe_two textarea {
-    width: 100%;
-    padding: 12px;
-    border: 1px solid #e2e2eb;
-    border-radius: 5px;
-    font-size: 14px;
-    color: #333;
-    background-color: #f7f7f7;
-    margin-bottom: 10px; /* Spacing between inputs */
-}
-
-.f_subscribe_two input[type="email"]::placeholder,
-.f_subscribe_two textarea::placeholder {
-    color: #b3b3b3;
-}
-
-.f_subscribe_two textarea {
-    height: 120px;
-    resize: none;
-}
-
-/* Button Styling */
-.f_subscribe_two button#butt {
-    background-color: #5e2ced;
-    color: white;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.f_subscribe_two button#butt:hover {
-    background-color: #3d1bb0;
-}
-
-/* General Hover Effects */
-a:hover, a:focus, .btn:hover, .btn:focus, button:hover, button:focus {
-    text-decoration: none;
-    outline: none;
-}
-
-/* Widget and List Styling */
-.new_footer_top .f_widget.about-widget .f_list li a:hover {
-    color: #5e2ced;
-}
-.new_footer_top .f_widget.about-widget .f_list li {
-    margin-bottom: 11px;
-}
-.f_widget.about-widget .f_list li:last-child {
-    margin-bottom: 0px;
-}
-.f_widget.about-widget .f_list li {
-    margin-bottom: 15px;
-}
-.f_widget.about-widget .f_list {
-    margin-bottom: 0px;
-}
-
-/* Social Icon Styling */
-.new_footer_top .f_social_icon a {
-    width: 44px;
-    height: 44px;
-    line-height: 43px;
-    background: transparent;
-    border: 1px solid #e2e2eb;
-    font-size: 24px;
-}
-.f_social_icon a {
-    width: 46px;
-    height: 46px;
-    border-radius: 50%;
-    font-size: 14px;
-    line-height: 45px;
-    color: #858da8;
-    display: inline-block;
-    background: #ebeef5;
-    text-align: center;
-    transition: all 0.2s linear;
-}
-.new_footer_top .f_social_icon a:hover {
-    background: #5e2ced;
-    border-color: #5e2ced;
-    color: white;
-}
-.new_footer_top .f_social_icon a + a {
-    margin-left: 4px;
-}
-
-/* Heading and Title Styling */
-.new_footer_top .f-title {
-    margin-bottom: 30px;
-    color: #263b5e;
-}
-.f_600 {
-    font-weight: 600;
-}
-.f_size_18 {
-    font-size: 18px;
-}
-h1, h2, h3, h4, h5, h6 {
-    color: #4b505e;
-}
-.new_footer_top .f_widget.about-widget .f_list li a {
-    color: #6a7695;
-}
-
-/* Background Animations */
-.new_footer_top .footer_bg {
-    position: absolute;
-    bottom: 0;
-    /* background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigB8iI5tb8WSVBuVUGc9UjjB8O0708X7Fdic_4O1LT4CmLHoiwhanLXiRhe82yw0R7LgACQ2IhZaTY0hhmGi0gYp_Ynb49CVzfmXtYHUVKgXXpWvJ_oYT8cB4vzsnJLe3iCwuzj-w6PeYq_JaHmy_CoGoa6nw0FBo-2xLdOPvsLTh_fmYH2xhkaZ-OGQ/s16000/footer_bg.png") no-repeat scroll center 0; */
-    width: 100%;
-    height: 266px;
-}
-
-/* Background Animations */
-.new_footer_top .footer_bg {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 266px;
-    overflow: hidden; /* Ensure animations don't cause scrollbars */
-}
-
-.new_footer_top .footer_bg .footer_bg_one {
-    width: 330px;
-    height: 105px;
-    background-size: 100%;
-    position: absolute;
-    bottom: 0;
-    right: -330px; /* Start off-screen to the right */
-    animation: moveRightToLeft 22s linear infinite;
-}
-
-.new_footer_top .footer_bg .footer_bg_two {
-    background: url("https://cdn.pixabay.com/animation/2023/02/07/13/30/13-30-08-292_512.gif") no-repeat center center;
-    width: 330px;
-    height: 105px;
-    background-size: 100%;
-    bottom: 0;
-    right: -330px; /* Start off-screen to the right */
-    position: absolute;
-    animation: moveRightToLeft 30s linear infinite;
-}
-
-/* Animation Keyframes */
-@keyframes moveRightToLeft {
-    0% {
-        right: -330px; /* Start from right, off-screen */
-    }
-    100% {
-        right: 100%; /* End at left side of the container */
-    }
-}
-
-.social-icons a {
-  font-size: 1.2rem;
-  padding: 8px;
-  margin: 15px;
-  text-decoration: none;
-  color: brown !important;
-}
-
-.social-icons a:hover {
-  color: brown;
-  background-color: hsl(22, 76%, 85%);
-  border-radius: 10px;
-  transform: scale(1.5); /* Increase size */
-  transition: transform 0.3s ease; /* Smooth transition effect */
-}
-.fa-brands.fa-facebook:hover {
-  color: #3B5998 !important;
-}
-
-.fa-brands.fa-instagram:hover {
-  color: #D62976 !important;
-}
-
-.fa-brands.fa-x-twitter:hover {
-  color: #181e20 !important;
-}
+    .f_subscribe_two input[type="email"]::placeholder,
+    .f_subscribe_two textarea::placeholder {
+        color: #b3b3b3;
+    }
+
+    .f_subscribe_two textarea {
+        height: 120px;
+        resize: none;
+    }
+
+    /* Button Styling */
+    .f_subscribe_two button#butt {
+        background-color: #5e2ced;
+        color: white;
+        padding: 12px 20px;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+
+    .f_subscribe_two button#butt:hover {
+        background-color: #3d1bb0;
+    }
+
+    /* General Hover Effects */
+    a:hover, a:focus, .btn:hover, .btn:focus, button:hover, button:focus {
+        text-decoration: none;
+        outline: none;
+    }
+
+    /* Widget and List Styling */
+    .new_footer_top .f_widget.about-widget .f_list li a:hover {
+        color: #5e2ced;
+    }
+    .new_footer_top .f_widget.about-widget .f_list li {
+        margin-bottom: 11px;
+    }
+    .f_widget.about-widget .f_list li:last-child {
+        margin-bottom: 0px;
+    }
+    .f_widget.about-widget .f_list li {
+        margin-bottom: 15px;
+    }
+    .f_widget.about-widget .f_list {
+        margin-bottom: 0px;
+    }
+
+    /* Social Icon Styling */
+    .new_footer_top .f_social_icon a {
+        width: 44px;
+        height: 44px;
+        line-height: 43px;
+        background: transparent;
+        border: 1px solid #e2e2eb;
+        font-size: 24px;
+    }
+    .f_social_icon a {
+        width: 46px;
+        height: 46px;
+        border-radius: 50%;
+        font-size: 14px;
+        line-height: 45px;
+        color: #858da8;
+        display: inline-block;
+        background: #ebeef5;
+        text-align: center;
+        transition: all 0.2s linear;
+    }
+    .new_footer_top .f_social_icon a:hover {
+        background: #5e2ced;
+        border-color: #5e2ced;
+        color: white;
+    }
+    .new_footer_top .f_social_icon a + a {
+        margin-left: 4px;
+    }
+
+    /* Heading and Title Styling */
+    .new_footer_top .f-title {
+        margin-bottom: 30px;
+        color: #263b5e;
+    }
+    .f_600 {
+        font-weight: 600;
+    }
+    .f_size_18 {
+        font-size: 18px;
+    }
+    /* h1, h2, h3, h4, h5, h6 {
+        color: #4b505e;
+    }
+    .new_footer_top .f_widget.about-widget .f_list li a {
+        color: #6a7695;
+    } */
+
+    /* Background Animations */
+    .new_footer_top .footer_bg {
+        position: absolute;
+        bottom: 0;
+        /* background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigB8iI5tb8WSVBuVUGc9UjjB8O0708X7Fdic_4O1LT4CmLHoiwhanLXiRhe82yw0R7LgACQ2IhZaTY0hhmGi0gYp_Ynb49CVzfmXtYHUVKgXXpWvJ_oYT8cB4vzsnJLe3iCwuzj-w6PeYq_JaHmy_CoGoa6nw0FBo-2xLdOPvsLTh_fmYH2xhkaZ-OGQ/s16000/footer_bg.png") no-repeat scroll center 0; */
+        width: 100%;
+        height: 266px;
+    }
+
+    /* Background Animations */
+    .new_footer_top .footer_bg {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 266px;
+        overflow: hidden; /* Ensure animations don't cause scrollbars */
+    }
+
+    .new_footer_top .footer_bg .footer_bg_one {
+        width: 330px;
+        height: 105px;
+        background-size: 100%;
+        position: absolute;
+        bottom: 0;
+        right: -330px; /* Start off-screen to the right */
+        animation: moveRightToLeft 22s linear infinite;
+    }
+
+    .new_footer_top .footer_bg .footer_bg_two {
+        background: url("https://cdn.pixabay.com/animation/2023/02/07/13/30/13-30-08-292_512.gif") no-repeat center center;
+        width: 330px;
+        height: 105px;
+        background-size: 100%;
+        bottom: 0;
+        right: -330px; /* Start off-screen to the right */
+        position: absolute;
+        animation: moveRightToLeft 30s linear infinite;
+    }
+
+    /* Animation Keyframes */
+    @keyframes moveRightToLeft {
+        0% {
+            right: -330px; /* Start from right, off-screen */
+        }
+        100% {
+            right: 100%; /* End at left side of the container */
+        }
+    }
+
+    .social-icons a {
+      font-size: 1.2rem;
+      padding: 8px;
+      margin: 15px;
+      text-decoration: none;
+      color: #f14b67 !important;
+    }
+
+    .social-icons a:hover {
+      color: brown;
+      background-color: hsl(22, 76%, 85%);
+      border-radius: 10px;
+      transform: scale(1.5); /* Increase size */
+      transition: transform 0.3s ease; /* Smooth transition effect */
+    }
+    .fa-brands.fa-facebook:hover {
+      color: #3B5998 !important;
+    }
+
+    .fa-brands.fa-instagram:hover {
+      color: #D62976 !important;
+    }
+
+    .fa-brands.fa-x-twitter:hover {
+      color: #181e20 !important;
+    }
 
     </style>
 </head>
@@ -590,206 +739,220 @@
       <div id="loader"></div>
     </div>
 
-<div class="head_container_about" style="color: black;font-family: var(--ff-philosopher);">
-  <header style="font-family: var(--ff-philosopher);">
-    <nav class="navbar navbar-expand-lg fixed-top" id="top">
-      <div class="container-fluid">
-        <a class="navbar-brand" href="/index.html" style="font-family: var(--ff-philosopher); color: black;">
-          <b>Retro</b>
-        </a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-            <li class="nav-item">
-              <a class="nav-link" href="../index.html" style="color: black;">Home</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#" style="color: black;">About Us</a>
-            <li class="nav-item">
-              <a class="nav-link" href="menu.html" style="color: black;">Collections</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="services.html" style="color: black;">Services</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="contact.html" style="color: black;">Contact us</a>
-            </li>
-          <li class="nav-item" style="list-style-type: none;">
-            <a class="nav-link" href="cart.html" style="color: black;">
-              <i class="fa-solid fa-cart-shopping"></i>Cart<span class="badge-count" id="badgeCount"></span>
+    <div class="head_container_about" style="font-family: var(--ff-philosopher);">
+      <header style="font-family: var(--ff-philosopher);">
+        <nav class="navbar navbar-expand-lg fixed-top" id="top">
+          <div class="container-fluid">
+            <!-- Bootstrap 5 switch -->
+            <div class="form-check form-switch">
+              <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+              <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+              <script src="../script.js"></script> <!-- Link to your JavaScript -->
+              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
+            </div>
+            <a class="navbar-brand" href="/index.html" style="font-family: var(--ff-philosopher);">
+              <b>Retro</b>
             </a>
-          </li>
-          </ul>
-      <!--    <div class="nav-right ms-auto">
-            <li class="nav-item"><a class="nav-link" href="login.html" style="color: black;">Login</a></li>
-            <li class="nav-item"><a class="nav-link" href="signup.html" style="color: black;">Signup</a></li>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <!-- <li>
+                </li> -->
+                <li class="nav-item">
+                  <a class="nav-link" href="../index.html">Home</a>
+                  <!-- style="color: black;" -->
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#">About Us</a>
+                <li class="nav-item">
+                  <a class="nav-link" href="menu.html">Collections</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="services.html">Services</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="contact.html">Contact us</a>
+                </li>
+              <li class="nav-item" style="list-style-type: none;">
+                <a class="nav-link" href="cart.html">
+                  <i class="fa-solid fa-cart-shopping"></i>Cart<span class="badge-count" id="badgeCount"></span>
+                </a>
+              </li>
+              </ul>
+              <!-- <div class="nav-right ms-auto">
+                <li class="nav-item"><a class="nav-link" href="login.html" style="color: black;">Login</a></li>
+                <li class="nav-item"><a class="nav-link" href="signup.html" style="color: black;">Signup</a></li>
+              </div>
+              -->
+            </div>
           </div>
-      -->
+        </nav>
+      </header>
+
+        <br><br><br><br>
+        <div class="mainhead" >
+          <h1 class="animated-header" style="color: #dc3545;">
+            <span class="letter">A</span>
+            <span class="letter">B</span>
+            <span class="letter">O</span>
+            <span class="letter">U</span>
+            <span class="letter">T</span>
+            <span class="letter"> </span>
+            <span class="spacer">&nbsp;</span>
+            <span class="letter">R</span>
+            <span class="letter">E</span>
+            <span class="letter">T</span>
+            <span class="letter">R</span>
+            <span class="letter">O</span>
+          </h1>
         </div>
-      </div>
-    </nav>
-  </header>
-
-  <br><br><br><br>
-  <div class="mainhead" >
-    <h1 class="animated-header" style="color: #dc3545;">
-    <span class="letter">A</span>
-    <span class="letter">B</span>
-    <span class="letter">O</span>
-    <span class="letter">U</span>
-    <span class="letter">T</span>
-    <span class="letter"> </span>
-    <span class="spacer">&nbsp;</span>
-    <span class="letter">R</span>
-    <span class="letter">E</span>
-    <span class="letter">T</span>
-    <span class="letter">R</span>
-    <span class="letter">O</span>
-    </h1>
-  </div>
-</div>
-
-<p style="margin: 0px 50px;font-size: medium;" class="about1" >At Retro, we celebrate the essence of timeless moments, where the charm of vintage design meets the warmth of nostalgia. Our love for the past inspires us to create an experience that connects the beauty of bygone eras with today’s world. Whether it's 60s-style floral patterns or classic tech from yesteryear, Retro brings back the simplicity, elegance, and innovation of those unforgettable days.
-</p>
-
-
-    <section class="about_container" style="width:80vw;margin-top: 80px;">
-     
-        
-        <div class="about2">
-            <h2 class=section__titlestyle style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);">Our Story</h2>
-            <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Retro was born from a desire to relive and share the joy of the past. We believe that every era has something special to offer, whether it’s the bold designs of the 60s, the innovative spirit of the 70s, or the tech revolutions of the 80s and 90s. Our journey began with a passion for collecting vintage items and a dream to create a space where people could immerse themselves in a world that captures the essence of different generations.</p>
-        </div>
-        
+    </div>
 
-    </section>
+    <p style="margin: 0px 50px;font-size: medium;" class="about1" >At Retro, we celebrate the essence of timeless moments, where the charm of vintage design meets the warmth of nostalgia. Our love for the past inspires us to create an experience that connects the beauty of bygone eras with today’s world. Whether it's 60s-style floral patterns or classic tech from yesteryear, Retro brings back the simplicity, elegance, and innovation of those unforgettable days.
+    </p>
 
-    <section class="about_container" style="width:80vw;margin-top: 80px;margin-bottom: 30px;">
-      <div class="about3">
-        <h2 class=section__title>Why Choose Retro?</h2>
-        <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">We’re not just about products – we’re about creating a lifestyle that honors the beauty and inspiration of the past. Each item we offer is carefully selected to bring nostalgia to life, allowing you to embrace the timeless designs, flavors, and stories that have shaped history. Whether you're a vintage enthusiast or simply love the look and feel of classic designs, Retro is your gateway to a world that values tradition as much as it does innovation.</p>
-      </div>
-    </section>
-    
-                
-    <footer class="new_footer_area bg_color">
-      <div class="new_footer_top">
-        <div class="container">
-          <div class="row">
-            <!-- Get in Touch Section -->
-            <div class="col-lg-3 col-md-6">
-              <div class="f_widget company_widget">
-                  <h3 class="f-title f_600 t_color f_size_18">Contact Us</h3>
-                  <form action="#" class="f_subscribe_two mailchimp" method="post" style="position: relative;">
-                      <div style="position: relative; margin-bottom: 15px;">
-                          <i class="fas fa-envelope" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: gray;"></i>
-                          <input type="email" id="email" name="email" placeholder="Your Email" required 
-                                 style="padding-left: 30px; width: 100%;">
-                      </div>
-          
-                      <div style="position: relative; margin-bottom: 15px;">
-                          <i class="fas fa-comment" style="position: absolute; left: 10px; top: 10px; font-size: 14px; color: gray;"></i>
-                          <textarea id="message" name="message" placeholder="Your Message" required 
-                                    style="padding-left: 30px; width: 100%;"></textarea>
-                      </div>
+
+        <section id="section1" class="section about_container" style="width:80vw;margin-top: 80px;">
           
-                      <button id="butt" type="submit">Send Message</button>
-                  </form>
-              </div>
+              
+          <div class="about2">
+            <h2 class=section__titlestyle style="font-family: var(--ff-philosopher);">Our Story</h2>
+            <!-- color: hsl(357, 82%,35%); -->
+            <p style="font-family: var(--ff-poppins);">Retro was born from a desire to relive and share the joy of the past. We believe that every era has something special to offer, whether it’s the bold designs of the 60s, the innovative spirit of the 70s, or the tech revolutions of the 80s and 90s. Our journey began with a passion for collecting vintage items and a dream to create a space where people could immerse themselves in a world that captures the essence of different generations.</p>
+            <!-- color: hsl(208, 7%,46%); -->
           </div>
-          
-            
-            <!-- Our Pages Section -->
-            <div class="col-lg-3 col-md-6">
-              <div class="f_widget about-widget">
-                <h3 class="f-title f_600 t_color f_size_18">Our Pages</h3>
-                <ul class="list-unstyled f_list">
-                  <li><a href="../index.html">Home</a></li>
-                  <li><a href="menu.html">About</a></li>
-                  <li><a href="#">Services</a></li>
-                  <li><a href="contact.html">Contact</a></li>
-                  <li><a href="cart.html">Cart</a></li>
-                  <li><a href="contributor.html">Contributors</a></li>
-                </ul>
-              </div>
-            </div>
+              
+
+        </section>
+
+        <section id="section2" class="section about_container" style="width:80vw;margin-top: 80px;margin-bottom: 30px;">
+          <div class="about3">
+            <h2 class=section__title>Why Choose Retro?</h2>
+            <p style="font-family: var(--ff-poppins);">We’re not just about products – we’re about creating a lifestyle that honors the beauty and inspiration of the past. Each item we offer is carefully selected to bring nostalgia to life, allowing you to embrace the timeless designs, flavors, and stories that have shaped history. Whether you're a vintage enthusiast or simply love the look and feel of classic designs, Retro is your gateway to a world that values tradition as much as it does innovation.</p>
+          </div>
+        </section>
     
-            <!-- Exclusive Offers Section -->
-            <div class="col-lg-3 col-md-6">
-              <div class="f_widget about-widget">
-                <h3 class="f-title f_600 t_color f_size_18">Exclusive Offers</h3>
-                <ul class="list-unstyled f_list">
-                  <li><a>Retro Discounts</a></li>
-                  <li><a>Limited-Time Promotions</a></li>
-                  <li><a>Special Event Packages</a></li>
-                  <li><a>Membership Benefits</a></li>
-                  <li><a>Early Access to New Collections</a></li>
-                  <li><a>VIP Retro Events</a></li>
-                  <li><a>Personalized Culinary Experiences</a></li>
-                </ul>
+                
+        <footer class="footer new_footer_area bg_color">
+          <div class="new_footer_top">
+            <div class="container">
+              <div class="row">
+                <!-- Get in Touch Section -->
+                <div class="col-lg-3 col-md-6">
+                  <div class="f_widget company_widget">
+                      <h3 class="f-title f_600 t_color f_size_18">Contact Us</h3>
+                      <form action="#" class="f_subscribe_two mailchimp" method="post" style="position: relative;">
+                          <div style="position: relative; margin-bottom: 15px;">
+                              <i class="fas fa-envelope" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: gray;"></i>
+                              <input type="email" id="email" name="email" placeholder="Your Email" required 
+                                    style="padding-left: 30px; width: 100%;">
+                          </div>
+              
+                          <div style="position: relative; margin-bottom: 15px;">
+                              <i class="fas fa-comment" style="position: absolute; left: 10px; top: 10px; font-size: 14px; color: gray;"></i>
+                              <textarea id="message" name="message" placeholder="Your Message" required 
+                                        style="padding-left: 30px; width: 100%;"></textarea>
+                          </div>
+              
+                          <button id="butt" type="submit">Send Message</button>
+                      </form>
+                  </div>
               </div>
-            </div>
-    
-            <!-- Follow Us Section -->
-            <div class="col-lg-3 col-md-6">
-              <div class="f_widget social-widget">
-                <h3 class="f-title f_600 t_color f_size_18">Follow Us</h3>
-                <div class="social-icons">
-
-                    
-
-
-                        <a class="fa-brands fa-facebook" href="https://facebook.com" style="color: hsl(203, 30%, 26%);"></a>
-                        <a class="fa-brands fa-instagram" href="https://instagram.com" style="color: hsl(203, 30%, 26%);"></a>
-                        <a class="fa-brands fa-x-twitter" href="https://twitter.com" style="color: hsl(203, 30%, 26%);"></a>
-                        <a class="fa-brands fa-youtube"
-                        href="https://www.youtube.com" style="color: hsl(203, 30%, 26%);" ></a>
-                        <a class="fa-brands fa-snapchat" 
-                        href="https://www.snapchat.com" style="color: hsl(203, 30%, 26%);" ></a>
-                    </div>
+              
+                
+                <!-- Our Pages Section -->
+                <div class="col-lg-3 col-md-6">
+                  <div class="f_widget about-widget">
+                    <h3 class="f-title f_600 t_color f_size_18">Our Pages</h3>
+                    <ul class="list-unstyled f_list">
+                      <li><a href="../index.html">Home</a></li>
+                      <li><a href="menu.html">About</a></li>
+                      <li><a href="#">Services</a></li>
+                      <li><a href="contact.html">Contact</a></li>
+                      <li><a href="cart.html">Cart</a></li>
+                      <li><a href="contributor.html">Contributors</a></li>
+                    </ul>
+                  </div>
                 </div>
-                <p style="margin-bottom:0;font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
-                </p>
-               
-                <div>
-                    <button id="sr" style="z-index: 1000;">
-                    <div class="circle1">
-                      <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
-                        <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"></path>
-                      </svg>
-                    </div>
-                    </button>
+        
+                <!-- Exclusive Offers Section -->
+                <div class="col-lg-3 col-md-6">
+                  <div class="f_widget about-widget">
+                    <h3 class="f-title f_600 t_color f_size_18">Exclusive Offers</h3>
+                    <ul class="list-unstyled f_list">
+                      <li><a>Retro Discounts</a></li>
+                      <li><a>Limited-Time Promotions</a></li>
+                      <li><a>Special Event Packages</a></li>
+                      <li><a>Membership Benefits</a></li>
+                      <li><a>Early Access to New Collections</a></li>
+                      <li><a>VIP Retro Events</a></li>
+                      <li><a>Personalized Culinary Experiences</a></li>
+                    </ul>
+                  </div>
                 </div>
+        
+                <!-- Follow Us Section -->
+                <div class="col-lg-3 col-md-6">
+                  <div class="f_widget social-widget">
+                    <h3 class="f-title f_600 t_color f_size_18">Follow Us</h3>
+                    <div class="social-icons">
+
+                        
+
+
+                            <a class="fa-brands fa-facebook" href="https://facebook.com"></a>
+                            <!-- style="color: hsl(203, 30%, 26%);" -->
+                            <a class="fa-brands fa-instagram" href="https://instagram.com"></a>
+                            <a class="fa-brands fa-x-twitter" href="https://twitter.com"a>
+                            <a class="fa-brands fa-youtube"
+                            href="https://www.youtube.com"></a>
+                            <a class="fa-brands fa-snapchat" 
+                            href="https://www.snapchat.com"></a>
+                        </div>
+                    </div>
+                    <p class="darkP" style="margin-bottom:0;font-family: var(--ff-philosopher);">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
+                      <!--color: hsl(203, 30%, 26%);  -->
+                    </p>
+                  
+                    <div>
+                        <button id="sr" style="z-index: 1000;">
+                        <div class="circle1">
+                          <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+                            <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"></path>
+                          </svg>
+                        </div>
+                        </button>
+                    </div>
 
-               
-                <p>Stay connected with us on social media for the latest updates and vintage adventures.</p>
-              </div>
-            
-    
-        <!-- Decorative Backgrounds -->
-        <div class="footer_bg">
-          <div class="footer_bg_one"></div>
-          <div class="footer_bg_two"></div>
-        </div>
-      </div>
-    
-      <!-- Footer Bottom -->
-      <div class="footer_bottom">
-        <div class="container">
-          <div class="row align-items-center">
-            <div class="col-lg-6 col-sm-7">
-              <p class="mb-0 f_400">&copy; 2024 Retro. All Rights Reserved.</p>
+                  
+                    <p>Stay connected with us on social media for the latest updates and vintage adventures.</p>
+                  </div>
+                
+        
+            <!-- Decorative Backgrounds -->
+            <div class="footer_bg">
+              <div class="footer_bg_one"></div>
+              <div class="footer_bg_two"></div>
             </div>
-            <div class="col-lg-6 col-sm-5 text-right">
-              <p>Made with ❤️ by <a href="https://www.linkedin.com" target="_blank">Retro Team</a></p>
+          </div>
+        
+          <!-- Footer Bottom -->
+          <div class="footer_bottom">
+            <div class="container">
+              <div class="row align-items-center">
+                <div class="col-lg-6 col-sm-7">
+                  <p class="mb-0 f_400">&copy; 2024 Retro. All Rights Reserved.</p>
+                </div>
+                <div class="retro col-lg-6 col-sm-5 text-right">
+                  <p>Made with ❤️ by <a href="https://www.linkedin.com" target="_blank">Retro Team</a></p>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-    </footer>
+        </footer>
     
 
     <script>
diff --git a/Html-files/cart.html b/Html-files/cart.html
index 354536db..ac151886 100644
--- a/Html-files/cart.html
+++ b/Html-files/cart.html
@@ -4,6 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Retro</title>
+
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
   <link
     href="https://fonts.googleapis.com/css2?family=Fuggles&amp;family=Mooli&amp;family=Oswald:wght@600&amp;family=Roboto:wght@100;300&amp;display=swap"
     rel="stylesheet">
@@ -28,105 +31,267 @@
     href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
     rel="stylesheet">
   <style>
-    /*Preloader CSS*/
-#preloader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: hsl(20, 43%, 93%); /* Light background color */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: opacity 2s ease-out, visibility 2s ease-out;
-    opacity: 1;
-    visibility: visible;
-    z-index: 9999; /* Ensure the preloader is above all other content */
-}
+
+     /*  */
+            /*  body {
+                  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                  background-size: cover;
+                }
+            */
+            .form-check{
+                margin-right:1rem ;
+            }
+            section {
+                background-color: white;
+                color: black;
+            }
+            #headConatiner{
+                background-color:hsl(20, 43%, 93%);
+            }
+            .navbar a{
+                color: black;
+            }
+            .footer{
+                background-color:hsl(20, 43%, 93%);
+            }
+            footer .text{
+                color: hsl(208, 7%,46%);
+            }
+            
+            body {
+                transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+            }
+            
+            [data-bs-theme='light'] {
+                background-color: #ffffff; /* Light background */
+                color: #000000; /* Light text color */
+            }
+            
+            [data-bs-theme='dark'] {
+                background-color: #000000; /* Dark background */
+                color: #ffffff; /* Light text color */
+            }
+            
+            .section {
+                transition: background-color 0.3s ease; /* Smooth transition for sections */
+            }
+            
+
+            [data-bs-theme='light'] body{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                background-size: cover;
+            }
+            /* for navbar */
+            [data-bs-theme='light'] .navbar{
+                background-color: hsl(20, 43%, 93%);
+                a{
+                    color: #000000;
+                }
+            
+            }
+            [data-bs-theme='light'] .mainhead {
+                background-color: transparent; /* Light section background */
+                h1{
+                    color: hsl(203, 30%, 26%);
+                }
+            }
+            /* for navbar */
+            /* [data-bs-theme='light'] #headContainer{
+                background-color: hsl(20, 43%, 93%);
+            } */
+            /* for footer */
+            [data-bs-theme='light'] .footer{
+                background-color: transparent;
+                .copyright{
+                  color: hsl(203, 30%, 26%);
+                }
+            }
+            [data-bs-theme='light'] .footer{
+                h4{
+                    color: hsl(304, 14%, 46%);
+                }
+                p{
+                  color: hsl(208, 7%,46%);
+                }
+                h3{
+                    color: hsl(357, 82%,35%);
+                }
+                input{
+                    color: white;
+                }
+            }
+
+            /* [data-bs-theme='light'] .section {
+                background-color: transparent;
+                h2{
+                    color: hsl(203, 30%, 26%);
+                }
+            } */
+
+
+
+
+            [data-bs-theme='dark'] body{
+                background-color: rgb(100, 99, 99);
+            }
+            /* for navbar */
+            [data-bs-theme='dark'] .navbar{
+                background-color: rgb(70, 70, 70);
+                color: #ffffff;
+                a{
+                    color: #ffffff;
+                }
+            }
+            /* for navbar */
+            /* [data-bs-theme='dark'] #headContainer{
+                background-color: rgb(136, 136, 136);
+                color: #ffffff;
+            } */
+            /* for footer */
+            [data-bs-theme='dark'] .footer{
+                background-color: rgb(100, 99, 99);
+                .text{
+                    color: #ffffff;
+                }
+            }
+            [data-bs-theme='dark'] .mainhead {
+                background-color: rgb(100, 99, 99); /* Dark section background */
+                h1{
+                    color: #fde6e6;
+                }
+            }
+            [data-bs-theme='dark'] .footer{
+                h4{
+                    color: white;
+                }
+                h3{
+                    color: white;
+                }
+                p{
+                    color: white;
+                }
+                input{
+                    color: white;
+                }
+            }
+
+            /* [data-bs-theme='dark'] .section {
+                background-color: rgb(100, 99, 99); 
+                h2{
+                    color: #fde6e6
+                }
+            } */
+            /*  */
+
+
 
 
-/* When hidden, preloader transitions out */
-#preloader.hidden {
-    opacity: 0;
-    visibility: hidden;
-}
 
-#loader {
-    display: block;
-    position: relative;
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: hsl(304, 14%, 46%);
-    animation: spin 3s linear infinite;
-}
 
-#loader:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: hsl(357, 37%, 62%);
-    animation: spin 2s linear infinite;
-}
 
-#loader:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: hsl(357, 93%, 84%);
-    animation: spin 1.5s linear infinite;
-}
 
-#badgeCount {
-  position: relative;
-  top: -7px;
-  right: 1px;
-  background-color: red;
-  color: white;
-  border-radius: 50%;
-  padding: 5px 8px;
-  font-size: 12px;
-}
 
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
+
+
+    /*Preloader CSS*/
+    #preloader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: hsl(20, 43%, 93%); /* Light background color */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: opacity 2s ease-out, visibility 2s ease-out;
+        opacity: 1;
+        visibility: visible;
+        z-index: 9999; /* Ensure the preloader is above all other content */
     }
 
-      100% {
-        transform: rotate(360deg);
-      }
+
+    /* When hidden, preloader transitions out */
+    #preloader.hidden {
+        opacity: 0;
+        visibility: hidden;
     }
 
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-    #sr {
-display: none; 
-position: fixed; 
-bottom: 70px; 
-right: 15px; 
-z-index: 99; 
-font-size: 18px;
-border: none;
-outline: none;
-background-color: transparent; 
-color: rgb(17, 17, 17); 
-cursor: pointer; 
-padding: 15px; 
-border-radius: 4px; 
-}
+    #loader {
+        display: block;
+        position: relative;
+        width: 150px;
+        height: 150px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: hsl(304, 14%, 46%);
+        animation: spin 3s linear infinite;
+    }
+
+    #loader:before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: hsl(357, 37%, 62%);
+        animation: spin 2s linear infinite;
+    }
+
+    #loader:after {
+        content: "";
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        right: 15px;
+        bottom: 15px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: hsl(357, 93%, 84%);
+        animation: spin 1.5s linear infinite;
+    }
+
+    #badgeCount {
+      position: relative;
+      top: -7px;
+      right: 1px;
+      background-color: red;
+      color: white;
+      border-radius: 50%;
+      padding: 5px 8px;
+      font-size: 12px;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+          transform: rotate(360deg);
+        }
+    }
+
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+        #sr {
+          display: none; 
+          position: fixed; 
+          bottom: 70px; 
+          right: 15px; 
+          z-index: 99; 
+          font-size: 18px;
+          border: none;
+          outline: none;
+          background-color: transparent; 
+          color: rgb(17, 17, 17); 
+          cursor: pointer; 
+          padding: 15px; 
+          border-radius: 4px; 
+        }
     #sr:hover {
       background-color: transparent;
       color: black;
@@ -154,10 +319,7 @@
       border-radius: 50%;
     }
 
-    body {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-      background-size: cover;
-    }
+  
 
     ::-webkit-scrollbar {
       width: 10px;
@@ -323,7 +485,15 @@
     <header>
       <nav class="navbar navbar-expand-lg fixed-top">
         <div class="container-fluid">
-          <a class="navbar-brand" href="../index.html" style="color: black;">
+          <!-- Bootstrap 5 switch -->
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+            <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+            <script src="../script.js"></script> <!-- Link to your JavaScript -->
+            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
+          </div>
+          <a class="navbar-brand" href="../index.html">
+            <!-- style="color: black;" -->
             <b>Retro</b>
           </a>
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
@@ -333,21 +503,21 @@
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
               <li class="nav-item">
-                <a class="nav-link" href="../index.html" style="color: black;">Home</a>
+                <a class="nav-link" href="../index.html">Home</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="about.html" style="color: black;">About Us</a>
+                <a class="nav-link" href="about.html">About Us</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="menu.html" style="color: black;">Collections</a>
+                <a class="nav-link" href="menu.html">Collections</a>
               <li class="nav-item">
-                <a class="nav-link" href="services.html" style="color: black;">Services</a>
+                <a class="nav-link" href="services.html">Services</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="contact.html" style="color: black;">Contact us</a>
+                <a class="nav-link" href="contact.html">Contact us</a>
               </li>
               <li class="nav-item" style="list-style-type: none;">
-                <a class="nav-link" href="#" style="color: black;">
+                <a class="nav-link" href="#">
                   <i class="fa-solid fa-cart-shopping"></i><span class="badge-count" id="badgeCount"></span>
                 </a>
               </li>
@@ -359,7 +529,8 @@
   </div>
   <br><br><br><br>
         <div class="mainhead">
-            <h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
+            <h1 style="font-family: var(--ff-philosopher);">C A R T</h1>
+            <!-- color: black; -->
         </div>
     </div>
 
@@ -408,8 +579,8 @@ <h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
       style="font-family: var(--ff-philosopher);">Order Now</button>
   </section>
 
-  <footer>
-    <div class="foot-panel2">
+  <footer class="footer">
+    <div class="footer foot-panel2">
       <ul class="footer-colums">
         <p style="font-family: var(--ff-philosopher);">Our Pages</p>
         <a href="../index.html" style="text-decoration: none;color: black;font-family: var(--ff-poppins);">Home</a>
@@ -459,9 +630,10 @@ <h3 style="font-family: var(--ff-philosopher);">Contact Us!</h3>
       </form>
     </div>
 
-    <div class="foot_panel4">
+    <div class="footer foot_panel4">
       <div class="pages">
-        <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow Us</h4>
+        <h4 style="font-family: var(--ff-philosopher);">Follow Us</h4>
+        <!-- color: hsl(203, 30%,26%); -->
         <div class="social-icons">
 
           
@@ -482,7 +654,7 @@ <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow
         <p style="margin-bottom:0;font-family: var(--ff-philosopher);">Stay connected with us on social media for the
           latest updates, latest collection, and vintage adventures.
         </p>
-        <div class="copyright" style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">
+        <div class="copyright" style="font-family: var(--ff-philosopher);">
           © 2024 Retro . All Rights Reserved. | <span id="author">
             <a href="https://www.linkedin.com" target="_blank" style="text-decoration: none;">Retro Team</a>
           </span>
diff --git a/Html-files/contact.html b/Html-files/contact.html
index d01a6289..18ce703e 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -5,6 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Retro</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
     <link rel="stylesheet" href="/Css-files/navbarstyles.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -34,6 +37,173 @@
         href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
         rel="stylesheet">
     <style>
+
+        /*  */
+            /* body{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                background-size: cover;
+                background-attachment: fixed;
+            } */
+            .form-check{
+                margin-right:1rem ;
+            }
+            section {
+                background-color: transparent;
+                color: black;
+            }
+            #headConatiner{
+                background-color:hsl(20, 43%, 93%);
+            }
+            .navbar a{
+                color: black;
+            }
+            .footer{
+                background-color:hsl(20, 43%, 93%);
+            }
+            footer .text{
+                color: hsl(208, 7%,46%);
+            }
+            
+            body {
+                transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+            }
+            
+            [data-bs-theme='light'] {
+                background-color: #ffffff; /* Light background */
+                color: #000000; /* Light text color */
+            }
+            
+            [data-bs-theme='dark'] {
+                background-color: #000000; /* Dark background */
+                color: #ffffff; /* Light text color */
+            }
+            
+            .section {
+                transition: background-color 0.3s ease; /* Smooth transition for sections */
+            }
+            
+
+            [data-bs-theme='light'] body{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                background-size: cover;
+            }
+            /* for navbar */
+            [data-bs-theme='light'] .navbar{
+                background-color: hsl(20, 43%, 93%);
+                a{
+                    color: #000000;
+                }
+            
+            }
+            [data-bs-theme='light'] .mainhead {
+                background-color: transparent; /* Light section background */
+                h1{
+                    color: hsl(203, 30%, 26%);
+                }
+            }
+            /* for navbar */
+            [data-bs-theme='light'] #headContainer{
+                background-color: transparent;
+            }
+            /* for footer */
+            [data-bs-theme='light'] .footer{
+                background-color: hsl(20, 43%, 93%);
+            }
+            [data-bs-theme='light'] .footer{
+                h4{
+                    color: hsl(304, 14%, 46%);
+                }
+                p{
+                    color: hsl(357, 82%,35%);
+                }
+                h3{
+                    color: hsl(357, 82%,35%);
+                }
+                input{
+                    color: white;
+                }
+            }
+
+            [data-bs-theme='light'] section {
+                background-color: transparent; /* Light section background */
+                h1{
+                    color: hsl(357, 53%, 8%);
+                }
+            }
+
+
+
+
+            [data-bs-theme='dark'] body{
+                background-color: rgb(48, 48, 48);
+            }
+            /* for navbar */
+            [data-bs-theme='dark'] .navbar{
+                background-color: rgb(70, 70, 70);
+                color: #ffffff;
+                a{
+                    color: #ffffff;
+                }
+            }
+            /* for navbar */
+            [data-bs-theme='dark'] #headContainer{
+                background-color: rgb(136, 136, 136);
+                color: #ffffff;
+            }
+            /* for footer */
+            [data-bs-theme='dark'] .footer{
+                background-color: rgb(136, 136, 136);
+                .text{
+                    color: #ffffff;
+                }
+            }
+            [data-bs-theme='dark'] .mainhead {
+                background-color: rgb(100, 99, 99); /* Dark section background */
+                h1{
+                    color: #fde6e6;
+                }
+            }
+            [data-bs-theme='dark'] .footer{
+                h4{
+                    color: white;
+                }
+                h3{
+                    color: white;
+                }
+                p{
+                    color: white;
+                }
+                input{
+                    color: white;
+                }
+            }
+
+            [data-bs-theme='dark'] section {
+                background-color: rgb(48, 48, 48); /* Dark section background */
+                h1{
+                    color: #fde6e6
+                }
+            }
+            [data-bs-theme='dark'] .section {
+                .card{
+                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                    background-size: cover;
+                    background-attachment: fixed;
+                    label{
+                        color: black;
+                    }
+                    /* input, textarea{
+                        background-color: white;
+                    } */
+                }
+            }
+            /*  */
+
+
+
+
+
+
         @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
         @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
@@ -99,10 +269,7 @@
             border-image: initial;
         }
 
-        body {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-            background-size: cover;
-        }
+
 
         ::-webkit-scrollbar {
             width: 10px;
@@ -384,10 +551,7 @@
     border-image: initial;
 }
 
-body{
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-  background-size: cover;
-}
+
 ::-webkit-scrollbar {
   width: 10px; 
 }
@@ -540,11 +704,19 @@
         <div id="loader"></div>
     </div>
 
-    <div class="head_container" style="background-color: transparent; font-family: var(--ff-philosopher);">
+    <div id="headContainer" class="head_container" style="background-color: transparent; font-family: var(--ff-philosopher);">
         <header>
             <nav class="navbar navbar-expand-lg fixed-top">
                 <div class="container-fluid">
-                    <a class="navbar-brand" href="../index.html" style="color: black;">
+                    <!-- Bootstrap 5 switch -->
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+                        <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+                        <script src="../script.js"></script> <!-- Link to your JavaScript -->
+                        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
+                    </div>
+                    <a class="navbar-brand" href="../index.html">
+                        <!-- style="color: black;" -->
                         <b>Retro</b>
                     </a>
                     <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -555,21 +727,22 @@
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
                         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                             <li class="nav-item">
-                                <a class="nav-link" href="../index.html" style="color: black;">Home</a>
+                                <a class="nav-link" href="../index.html">Home</a>
+                                <!-- style="color: black;" -->
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="about.html" style="color: black;">About Us</a>
+                                <a class="nav-link" href="about.html">About Us</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="menu.html" style="color: black;">Collections</a>
+                                <a class="nav-link" href="menu.html">Collections</a>
                             <li class="nav-item">
-                                <a class="nav-link" href="services.html" style="color: black;">Services</a>
+                                <a class="nav-link" href="services.html">Services</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="#" style="color: black;">Contact us</a>
+                                <a class="nav-link" href="#">Contact us</a>
                             </li>
                             <li class="nav-item" style="list-style-type: none;">
-                                <a class="nav-link" href="cart.html" style="color: black;">
+                                <a class="nav-link" href="cart.html">
                                     <i class="fa-solid fa-cart-shopping"></i><span class="badge-count" id="badgeCount"></span>
                                 </a>
                             </li>
@@ -664,11 +837,12 @@ <h1 style="color: hsl(357, 82%,35%);font-family: Georgia;">Feel Free to Contact
 <br><br><br>
 <br><br><br>
     <section>
-        <section class="contact-section" style="background-color: transparent;">
-            <div class="container">
+        <section id="section1" class="section contact-section" style="background-color: transparent;">
+            <div class="section container">
                 <!-- Header -->
                 <div class="text-center mt-5">
-                    <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">
+                    <h1 style="font-family: Tahoma, sans-serif;">
+                        <!-- color: hsl(357, 53%, 8%); -->
                         Feel Free to Contact Us!
                     </h1>
                 </div>
@@ -762,11 +936,12 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">
         </section>
         
     <!-- CSS for the icon and border radius -->
-    <div class="footer" style="background-color: hsl(20, 43%, 93%);">
-        <footer>
-            <div class="foot-panel2" style="background-color:hsl(20, 43%, 93%);font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
+    <div class="footer">
+        <footer class="footer">
+            <div class="footer text foot-panel2" style="font-family: var(--ff-poppins);">
                 <ul>
-                    <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align: left;">Our Pages</p>
+                    <p style="font-family: var(--ff-philosopher);text-align: left;">Our Pages</p>
+                    <!-- color: hsl(357, 82%,35%); -->
                     <a href="#" style="color: black;">Home</a>
                     <a href="Html-files/menu.html" style="color: black;">About</a>
                     <a href="Html-files/services.html" style="color: black;">Services</a>
@@ -775,7 +950,7 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">
                     <a href="contributor.html" style="color: black;">Contributors</a>
                 </ul>
                 <ul>
-                    <p style="color: rgb(162, 16, 23);font-family: var(--ff-philosopher); text-align:left"> Exclusive Offers</p>
+                    <p style="font-family: var(--ff-philosopher); text-align:left"> Exclusive Offers</p>
                     <a href="#" style="color: black;">Retro Discounts</a>
                     <a href="#" style="color: black;">Limited-Time Promotions</a>
                     <a href="#" style="color: black;">Special Event Packages</a>
@@ -786,7 +961,7 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">
 
                 </ul>
                 <ul>
-                    <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align:left">Payment Products</p>
+                    <p style="font-family: var(--ff-philosopher);text-align:left">Payment Products</p>
                     <a href="./Html-files/payment2.html" style="color: black;">Secure Checkout</a>
                     <a href="./Html-files/payment2.html" style="color: black;">Credit/Debit Cards</a>
                     <a href="./Html-files/payment2.html" style="color: black;">Online Payment</a>
@@ -819,9 +994,10 @@ <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%, 35%);">Conta
             </div>
 
 
-            <div class="foot_panel4" style="background-color: transparent;">
+            <div class="footer foot_panel4" style="background-color: transparent;">
                 <div class="pages">
-                    <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow Us</h4>
+                    <h4 style="font-family: var(--ff-philosopher);">Follow Us</h4>
+                    <!-- color: hsl(203, 30%, 26%); -->
 
                     <div class="social-icons">
 
@@ -833,9 +1009,11 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
                         <a class="fa-brands fa-snapchat"  href="https://www.snapchat.com" ></a>
 
                     </div>
-                    <p style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);color: hsl(203, 30%, 26%);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
+                    <p style="font-family: var(--ff-philosopher);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
                     </p>
-                    <div class="copyright" style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);color: black;">
+                    <!-- background-color: hsl(20, 43%, 93%);color: hsl(203, 30%, 26%); -->
+                    <div class="copyright" style="font-family: var(--ff-philosopher);">
+                        <!-- background-color: hsl(20, 43%, 93%);color: black; -->
 
                         &copy; 2024 Retro . All Rights Reserved. | Developed by <span id="author">
                             <a href="https://www.linkedin.com" target="_blank" style="text-decoration: none;">Retro Team</a>
diff --git a/Html-files/login.html b/Html-files/login.html
index 420fec1f..31e569c1 100644
--- a/Html-files/login.html
+++ b/Html-files/login.html
@@ -5,6 +5,9 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="scriptlogin.js" defer type="module"></script>
+
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
   <link rel="shortcut icon" type="image/x-icon" href="../Favicon image/favicon-32x32.png">
   <link rel="stylesheet" href="../Css-files/login1.css">
   <title>Retro</title>
@@ -17,6 +20,88 @@
     <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <style>
 
+
+       /*  */
+            /* body{
+                  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                  background-size: cover;
+                  background-attachment: fixed;
+                } */
+            .form-check{
+                margin-right:0.5rem ;
+            }
+            /* section {
+                background-color: white;
+                color: black;
+            } */
+    
+            body {
+                transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+            }
+            
+            [data-bs-theme='light'] {
+                background-color: #ffffff; /* Light background */
+                color: #000000; /* Light text color */
+            }
+            
+            [data-bs-theme='dark'] {
+                background-color: #000000; /* Dark background */
+                color: #ffffff; /* Light text color */
+            }
+            
+
+
+            [data-bs-theme='light'] body{
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+              background-size: cover;
+            }
+            /* for navbar */
+            [data-bs-theme='light'] .home-btn{
+                a{
+                  color: rgb(134, 78, 112);
+                }
+            }
+            [data-bs-theme='light'] .card{
+              background-color: transparent;
+            }
+            [data-bs-theme='light'] .card-login{
+              background: rgba(236, 236, 236, 0.8);
+            }
+  
+
+
+
+            [data-bs-theme='dark'] body{
+                /* background-color: rgb(53, 25, 25); */
+                background: linear-gradient(135deg, #985475, #483337); 
+                background-size: cover;
+                background-attachment: fixed;
+            }
+            /* for navbar */
+            [data-bs-theme='dark'] .home-btn{
+                a{
+                  color: #fde6e6;
+                }
+            }
+            [data-bs-theme='dark'] .card{
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+              background-size: cover;
+            }
+            [data-bs-theme='dark'] .card-login{
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+              background-size: cover;
+              span{
+                color: black;
+              }
+            }
+            
+           
+            /*  */
+
+
+
+
+
       .circle{
       z-index: 998;
       width: 20px;
@@ -144,6 +229,13 @@
   </div>
   <div class="main-login">
     <div class="left-login" style="background-color: transparent;">
+      <!-- Bootstrap 5 switch -->
+      <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+        <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+        <script src="../script.js"></script> <!-- Link to your JavaScript -->
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
+      </div>
       <div class="home-btn"><a href="../index.html" style="font-family: var(--ff-philosopher);"><b>Retro</b></a></div>
       <div class="container">
         <div class="card">
diff --git a/Html-files/menu.html b/Html-files/menu.html
index 3a035e55..c7896c44 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Retro</title>
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
     <link rel="stylesheet" href="/Css-files/navbarstyles.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@@ -29,6 +31,140 @@
         rel="stylesheet">
     <link rel="stylesheet" href="../Css-files/content.css">
     <style>
+
+         /*  */
+        /* section {
+            background-color: white;
+            color: black;
+        } */
+        .form-check{
+            margin-right:1rem ;
+        }
+        #headConatiner{
+            background-color:hsl(20, 43%, 93%);
+        }
+        .navbar{
+            background-color:hsl(20, 43%, 93%) ;
+            color: black;
+        }
+        /* .footer{
+            background-color:hsl(20, 43%, 93%);
+        }
+         */
+        body {
+            transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+        }
+        
+        [data-bs-theme='light'] {
+            background-color: #ffffff; /* Light background */
+            color: #000000; /* Light text color */
+        }
+        
+        [data-bs-theme='dark'] {
+            background-color: #000000; /* Dark background */
+            color: #ffffff; /* Light text color */
+        }
+        
+        .section {
+            transition: background-color 0.3s ease; /* Smooth transition for sections */
+            background-color: hsl(20, 43%, 93%); 
+        }
+        
+
+        [data-bs-theme='light'] body{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+            background-size: cover;
+        }
+        /* for navbar */
+        [data-bs-theme='light'] .navbar{
+            background-color: hsl(20, 43%, 93%);
+            a{
+                color: #000000;
+            }
+        }
+        [data-bs-theme='light'] #headContainer{
+            background-color: hsl(20, 43%, 93%);
+        }
+        /* for footer */
+        [data-bs-theme='light'] .footer{
+            background-color: hsl(20, 43%, 93%);
+        }
+        [data-bs-theme='light'] .footer{
+            h4{
+                color: hsl(304, 14%, 46%);
+            }
+            p{
+                color: hsl(357, 82%,35%);
+            }
+            h3{
+                color: hsl(357, 82%,35%);
+            }
+            input{
+                color: white;
+            }
+        }
+        [data-bs-theme='light'] .mainhead {
+            background-color: transparent; /* Light section background */
+            h1{
+                color: hsl(203, 30%, 26%);
+            }
+        }
+        [data-bs-theme='light'] .section {
+            background-color: hsl(20, 43%, 93%); /* Light section background */
+        }
+
+
+
+        [data-bs-theme='dark'] body{
+           background-color: rgb(100, 99, 99);
+           
+        }
+        /* for navbar */
+        [data-bs-theme='dark'] .navbar{
+            background-color: rgb(70, 70, 70);
+            color: #ffffff;
+        }
+        [data-bs-theme='dark'] #headContainer{
+            background-color: rgb(136, 136, 136);
+            color: #ffffff;
+        }
+        /* for footer */
+        [data-bs-theme='dark'] .footer{
+            background-color: rgb(136, 136, 136);
+            color: #ffffff;
+        }
+        [data-bs-theme='dark'] .footer{
+            h4{
+                color: white;
+            }
+            h3{
+                color: white;
+            }
+            p{
+                color: white;
+            }
+            input{
+                color: white;
+            }
+        }
+        [data-bs-theme='dark'] .mainhead {
+            background-color: rgb(100, 99, 99); /* Dark section background */
+            h1{
+                color: #fde6e6;
+            }
+        }
+        [data-bs-theme='dark'] .section {
+            background-color: rgb(44, 43, 43); /* Dark section background */
+            h2{
+                color: #fde6e6;
+            }
+        }
+
+
+
+
+
+
         /* Initial styling for the image */
         .menu {
             transition: transform 0.3s ease;
@@ -70,10 +206,7 @@
         }
     </style>
     <style>
-        body {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-            background-size: cover;
-        }
+       
 
         :root {
             --ff-philosopher: "Philosopher", sans-serif;
@@ -298,12 +431,21 @@
     <div id="preloader">
         <div id="loader"></div>
     </div>
-    <div class="head_container" style="background-color: hsl(20, 43%, 93%);">
+    <div id="headContainer" class="head_container">
+        <!-- style="background-color: hsl(20, 43%, 93%);" -->
         <header>
 
             <nav class="navbar navbar-expand-lg fixed-top" id="top">
                 <div class="container-fluid">
-                    <a class="navbar-brand" href="../index.html" style="font-family: var(--ff-philosopher); color: black;">
+                    <!-- Bootstrap 5 switch -->
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+                        <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+                        <script src="../script.js"></script> <!-- Link to your JavaScript -->
+                        <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
+                    </div>
+                    <a class="navbar-brand" href="../index.html" style="font-family: var(--ff-philosopher);">
+                        <!-- color: black; -->
                         <b>Retro</b>
                     </a>
                     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
@@ -313,21 +455,21 @@
                     <div class="collapse navbar-collapse" id="navbarContent">
                         <ul class="navbar-nav me-auto mb-2 mb-lg-0" id="header-items">
                             <li class="nav-item">
-                                <a class="nav-link" href="../index.html" style="color: black;">Home</a>
+                                <a class="nav-link" href="../index.html">Home</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="about.html" style="color: black;">About Us</a>
+                                <a class="nav-link" href="about.html">About Us</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="#" style="color: black;">Collections</a>
+                                <a class="nav-link" href="#">Collections</a>
                             <li class="nav-item">
-                                <a class="nav-link" href="services.html" style="color: black;">Services</a>
+                                <a class="nav-link" href="services.html">Services</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="contact.html" style="color: black;">Contact us</a>
+                                <a class="nav-link" href="contact.html">Contact us</a>
                             </li>
                             <li class="nav-item" style="list-style-type: none;">
-                                <a class="nav-link" href="cart.html" style="color: black;">
+                                <a class="nav-link" href="cart.html">
                                     <i class="fa-solid fa-cart-shopping"></i><span class="badge-count" id="badgeCount"></span>
                                 </a>
                             </li>
@@ -353,7 +495,7 @@
 
 <br><br><br><br>
         <div class="mainhead">
-            <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">O U R &nbsp; C O L L E C T I O N
+            <h1 style="font-family: var(--ff-philosopher);">O U R &nbsp; C O L L E C T I O N
             </h1>
             <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">
                 <!--a href="https://rawcdn.githack.com/Anjaliavv51/Vintage-Retro-Books/294e5203b6a5b02ad6b135148d684ea993c4f5a5/index.html" 
@@ -363,7 +505,7 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">
         </div>
     </div>
 
-    <section class="menu_container">
+    <section id="section1" class="section menu_container">
 
         <h2 style="font-family: var(--ff-philosopher);">Entertainment</h2>
         <div class="menu_items">
@@ -529,7 +671,7 @@ <h3 style="font-family: var(--ff-philosopher);">Drinks</h3>
         </div>
 
     </section>
-    <section class="menu_container">
+    <section id="section2" class="section menu_container">
         <a href="Electronic.html" style="color: black;"><button class="butt"
                 style="font-family:var(--ff-philosopher);">Latest Vintage Electronics Explore Now>></button></a>
         <br><br><br><br><br>
@@ -616,7 +758,7 @@ <h3 style="font-family: var(--ff-philosopher);">Type Writer</h3>
             </div>
     </section>
 
-    <section class="menu_container">
+    <section id="section3" class="section menu_container">
         <h2>Weapons & Transport</h2>
         <div class="menu_items">
             <div class="items">
@@ -697,12 +839,13 @@ <h3 style="font-family:var(--ff-philosopher);">Palsnkin</h3>
     </section>
 
     <!-- footer -->
-    <footer style="background-color: hsl(20, 43%, 93%);">
+    <footer class="footer">
+        <!-- style="background-color: hsl(20, 43%, 93%);" -->
         <br><br><br>
 
-        <div class="foot-panel2">
+        <div class="footer foot-panel2">
             <ul class="footer-colums">
-                <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);">Our Pages</p>
+                <p style="font-family: var(--ff-philosopher);">Our Pages</p>
                 <a href="../index.html"
                     style="text-decoration: none;font-family: var(--ff-poppins);color: black;">Home</a>
                 <a href="#" style="text-decoration: none;font-family: var(--ff-poppins);color: black;">About</a>
@@ -715,7 +858,7 @@ <h3 style="font-family:var(--ff-philosopher);">Palsnkin</h3>
             </ul>
 
             <ul class="footer-colums">
-                <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);"> Exclusive Offers</p>
+                <p style="font-family: var(--ff-philosopher);"> Exclusive Offers</p>
                 <a style="font-family: var(--ff-poppins);color: black;">Retro Discounts</a>
                 <a style="font-family: var(--ff-poppins);color: black;">Limited-Time Promotions</a>
                 <a style="font-family: var(--ff-poppins);color: black;">Special Event Packages</a>
@@ -727,7 +870,7 @@ <h3 style="font-family:var(--ff-philosopher);">Palsnkin</h3>
             </ul>
 
             <ul class="footer-colums">
-                <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);">Payment Products</p>
+                <p style="font-family: var(--ff-philosopher);">Payment Products</p>
                 <a style="font-family: var(--ff-poppins);color: black;">Secure Checkout</a>
                 <a style="font-family: var(--ff-poppins);color: black;">Credit/Debit Cards</a>
                 <a style="font-family: var(--ff-poppins);color: black;">Online Payment</a>
@@ -739,7 +882,7 @@ <h3 style="font-family:var(--ff-philosopher);">Palsnkin</h3>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 
 <form id="contactForm">
-    <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%,35%); font-size: 26px; margin-bottom: 3px;">
+    <h3 style="font-family: var(--ff-philosopher); font-size: 26px; margin-bottom: 3px;">
         Contact Us!
     </h3>
 
@@ -766,9 +909,9 @@ <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%,35%); font-si
         </div>
 
 
-        <div class="foot_panel4">
+        <div class="footer foot_panel4">
             <div class="pages">
-                <h4 style="font-family: var(--ff-philosopher);color: hsl(304, 14%, 46%);">Follow Us</h4>
+                <h4 style="font-family: var(--ff-philosopher);">Follow Us</h4>
 
                 <div class="social-icons">
 
diff --git a/Html-files/services.html b/Html-files/services.html
index 519e7817..da3a9598 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -5,6 +5,9 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Retro</title>
+
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
         <link rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
             integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
@@ -35,263 +38,410 @@
             href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
             rel="stylesheet">
         <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
-        #sr {
-display: none; 
-position: fixed; 
-bottom: 70px; 
-right: 15px; 
-z-index: 99; 
-font-size: 18px;
-border: none;
-outline: none;
-background-color: transparent; 
-color: rgb(17, 17, 17); 
-cursor: pointer; 
-padding: 15px; 
-border-radius: 4px; 
-}
-#sr:hover {
-background-color: transparent; 
-color: black;
-border-radius: 100px;
-}
-.circle{
-   z-index: 10000;
-   width: 20px;
-   height: 20px;
-   border-radius: 50%;
-   pointer-events: none;
-    animation: colors 5s infinite;
-    position: fixed;
-  transform: translate(-50%,-50%);
-}
-.circle::before {
-    content: "";
-    position: fixed;
-  width: 50px;
-  height: 50px;
-  opacity: 0.2;
-  transform: translate(-30%,-30%);
-  border-radius: 50%;
-}
-body{
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-  background-size: cover;
-  background-attachment: fixed;
-}
-::-webkit-scrollbar {
-  width: 10px; 
-}
-::-webkit-scrollbar-track {
-  background-color: #feaea5; 
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: linear-gradient(
-    to bottom,
-    hsl(357, 37%, 62%),
-    hsl(304, 14%, 46%)
-  );
-  border-radius: 6px; 
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(172, 38, 94); 
-}
-
-* {
-  scrollbar-width: thick; 
-}
-::-webkit-scrollbar-button {
-  display: none;
-}
-
-:root{
-    --ff-philosopher: "Philosopher", sans-serif;
-    --ff-poppins: "Poppins", sans-serif;
-}
-
-#preloader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: hsl(20, 43%, 93%); 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: opacity 2s ease-out, visibility 2s ease-out;
-    opacity: 1;
-    visibility: visible;
-    z-index: 9999; 
-}
-
-
-#preloader.hidden {
-    opacity: 0;
-    visibility: hidden;
-}
-
-#loader {
-    display: block;
-    position: relative;
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: hsl(304, 14%, 46%);
-    animation: spin 3s linear infinite;
-}
-
-#loader:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: hsl(357, 37%, 62%);
-    animation: spin 3s linear infinite;
-}
-
-#loader:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: hsl(357, 93%, 84%);
-    animation: spin 1.5s linear infinite;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.deals:hover {
-    background-color: hsl(203, 30%, 95%); /* Optional: change background on hover */
-}
-
-.deals:hover p {
-    color: hsl(203, 30%, 50%); /* Change to a darker color for contrast on hover */
- color: hsl(203, 30%, 50%); 
-}
-
-.social-icons a {
-  font-size: 1.2rem;
-  padding: 8px;
-  margin: 15px;
-  text-decoration: none;
-  color: brown !important;
-}
-
-.social-icons a:hover {
-  color: brown;
-  background-color: hsl(22, 76%, 85%);
-  border-radius: 10px;
-  transform: scale(1.5); /* Increase size */
-  transition: transform 0.3s ease; /* Smooth transition effect */
-}
-.fa-brands.fa-facebook:hover {
-  color: #3B5998 !important;
-}
-
-.fa-brands.fa-instagram:hover {
-  color: #D62976 !important;
-}
-
-.fa-brands.fa-x-twitter:hover {
-  color: #181e20 !important;
-}
-/* Testimonial Container */
-.testimonal__container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 1rem;
-    padding: 1rem;
-}
-
-/* Testimonial Card */
-.testimonal__card {
-    background-color: #fff;
-    border-radius: 12px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
-    max-width: 300px;
-    text-align: center;
-    transition: transform 0.3s ease-in-out;
-}
-
-.testimonal__card:hover {
-    transform: translateY(-10px);
-    background-color: #ffaba1;
-}
-
-
-
-/* Testimonial Title */
-.testimonal__title {
-    font-family: var(--ff-philosopher);
-    font-size: 1.5rem;
-    color: hsl(203, 30%, 26%);
-    margin-top: 1rem;
-}
-
-/* Testimonial Description */
-.testimonal__description {
-    font-family: var(--ff-poppins);
-    font-size: 1rem;
-    color: hsl(208, 7%, 46%);
-    padding: 0.75rem 1rem;
-}
-
-/* Testimonial Stars */
-.testimonal__stars {
-    margin-top: 0.5rem;
-    color: #ffcc00; 
-    font-size: 1.4rem; 
-}
-
-.testimonal__stars i {
-    margin-right: 0.15rem; 
-}
-
-.testimonal__swiper {
-    display: flex;
-    justify-content: center;
-}
-
-/* Cards Wrapper */
-.cards {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    padding: 1rem;
-}
-
-.items {
-    transition: transform 0.3s ease;
-}
-
-.items:hover {
-    transform: scale(1.1);
-}
+
+            /*  */
+            /* body{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                background-size: cover;
+                background-attachment: fixed;
+            } */
+            .form-check{
+                margin-right:1rem ;
+            }
+            section {
+                background-color: white;
+                color: black;
+            }
+            #headConatiner{
+                background-color:hsl(20, 43%, 93%);
+            }
+            .navbar a{
+                color: black;
+            }
+            .footer{
+                background-color:hsl(20, 43%, 93%);
+            }
+            footer .text{
+                color: hsl(208, 7%,46%);
+            }
+            
+            body {
+                transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+            }
+            
+            [data-bs-theme='light'] {
+                background-color: #ffffff; /* Light background */
+                color: #000000; /* Light text color */
+            }
+            
+            [data-bs-theme='dark'] {
+                background-color: #000000; /* Dark background */
+                color: #ffffff; /* Light text color */
+            }
+            
+            .section {
+                transition: background-color 0.3s ease; /* Smooth transition for sections */
+            }
+            
+
+            [data-bs-theme='light'] body{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                background-size: cover;
+            }
+            /* for navbar */
+            [data-bs-theme='light'] .navbar{
+                background-color: hsl(20, 43%, 93%);
+                a{
+                    color: #000000;
+                }
+            
+            }
+            [data-bs-theme='light'] .mainhead {
+                background-color: transparent; /* Light section background */
+                h1{
+                    color: hsl(203, 30%, 26%);
+                }
+            }
+            /* for navbar */
+            [data-bs-theme='light'] #headContainer{
+                background-color: hsl(20, 43%, 93%);
+            }
+            /* for footer */
+            [data-bs-theme='light'] .footer{
+                background-color: hsl(20, 43%, 93%);
+            }
+            [data-bs-theme='light'] .footer{
+                h4{
+                    color: hsl(304, 14%, 46%);
+                }
+                p{
+                    color: hsl(357, 82%,35%);
+                }
+                h3{
+                    color: hsl(357, 82%,35%);
+                }
+                input{
+                    color: white;
+                }
+            }
+
+            [data-bs-theme='light'] .section {
+                background-color: transparent; /* Light section background */
+                h2{
+                    color: hsl(203, 30%, 26%);
+                }
+            }
+
+
+
+
+            [data-bs-theme='dark'] body{
+                background-color: rgb(48, 48, 48);
+            }
+            /* for navbar */
+            [data-bs-theme='dark'] .navbar{
+                background-color: rgb(70, 70, 70);
+                color: #ffffff;
+                a{
+                    color: #ffffff;
+                }
+            }
+            /* for navbar */
+            [data-bs-theme='dark'] #headContainer{
+                background-color: rgb(136, 136, 136);
+                color: #ffffff;
+            }
+            /* for footer */
+            [data-bs-theme='dark'] .footer{
+                background-color: rgb(136, 136, 136);
+                .text{
+                    color: #ffffff;
+                }
+            }
+            [data-bs-theme='dark'] .mainhead {
+                background-color: rgb(100, 99, 99); /* Dark section background */
+                h1{
+                    color: #fde6e6;
+                }
+            }
+            [data-bs-theme='dark'] .footer{
+                h4{
+                    color: white;
+                }
+                h3{
+                    color: white;
+                }
+                p{
+                    color: white;
+                }
+                input{
+                    color: white;
+                }
+            }
+
+            [data-bs-theme='dark'] .section {
+                background-color: rgb(48, 48, 48); /* Dark section background */
+                h2{
+                    color: #fde6e6
+                }
+            }
+            /*  */
+
+
+
+
+            @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
+            @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
+            #sr {
+            display: none; 
+            position: fixed; 
+            bottom: 70px; 
+            right: 15px; 
+            z-index: 99; 
+            font-size: 18px;
+            border: none;
+            outline: none;
+            background-color: transparent; 
+            color: rgb(17, 17, 17); 
+            cursor: pointer; 
+            padding: 15px; 
+            border-radius: 4px; 
+            }
+            #sr:hover {
+            background-color: transparent; 
+            color: black;
+            border-radius: 100px;
+            }
+            .circle{
+            z-index: 10000;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            pointer-events: none;
+                animation: colors 5s infinite;
+                position: fixed;
+            transform: translate(-50%,-50%);
+            }
+            .circle::before {
+                content: "";
+                position: fixed;
+            width: 50px;
+            height: 50px;
+            opacity: 0.2;
+            transform: translate(-30%,-30%);
+            border-radius: 50%;
+            }
+            ::-webkit-scrollbar {
+            width: 10px; 
+            }
+            ::-webkit-scrollbar-track {
+            background-color: #feaea5; 
+            border-radius: 10px;
+            }
+
+            ::-webkit-scrollbar-thumb {
+                border-radius: 10px;
+                background: linear-gradient(
+                to bottom,
+                hsl(357, 37%, 62%),
+                hsl(304, 14%, 46%)
+            );
+            border-radius: 6px; 
+            }
+
+            ::-webkit-scrollbar-thumb:hover {
+            background-color: rgb(172, 38, 94); 
+            }
+
+            * {
+            scrollbar-width: thick; 
+            }
+            ::-webkit-scrollbar-button {
+            display: none;
+            }
+
+            :root{
+                --ff-philosopher: "Philosopher", sans-serif;
+                --ff-poppins: "Poppins", sans-serif;
+            }
+
+            #preloader {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: hsl(20, 43%, 93%); 
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                transition: opacity 2s ease-out, visibility 2s ease-out;
+                opacity: 1;
+                visibility: visible;
+                z-index: 9999; 
+            }
+
+
+            #preloader.hidden {
+                opacity: 0;
+                visibility: hidden;
+            }
+
+            #loader {
+                display: block;
+                position: relative;
+                width: 150px;
+                height: 150px;
+                border-radius: 50%;
+                border: 3px solid transparent;
+                border-top-color: hsl(304, 14%, 46%);
+                animation: spin 3s linear infinite;
+            }
+
+            #loader:before {
+                content: "";
+                position: absolute;
+                top: 5px;
+                left: 5px;
+                right: 5px;
+                bottom: 5px;
+                border-radius: 50%;
+                border: 3px solid transparent;
+                border-top-color: hsl(357, 37%, 62%);
+                animation: spin 3s linear infinite;
+            }
+
+            #loader:after {
+                content: "";
+                position: absolute;
+                top: 15px;
+                left: 15px;
+                right: 15px;
+                bottom: 15px;
+                border-radius: 50%;
+                border: 3px solid transparent;
+                border-top-color: hsl(357, 93%, 84%);
+                animation: spin 1.5s linear infinite;
+            }
+
+            @keyframes spin {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+
+            .deals:hover {
+                background-color: hsl(203, 30%, 95%); /* Optional: change background on hover */
+            }
+
+            .deals:hover p {
+                color: hsl(203, 30%, 50%); /* Change to a darker color for contrast on hover */
+            color: hsl(203, 30%, 50%); 
+            }
+
+            .social-icons a {
+            font-size: 1.2rem;
+            padding: 8px;
+            margin: 15px;
+            text-decoration: none;
+            color: brown !important;
+            }
+
+            .social-icons a:hover {
+            color: brown;
+            background-color: hsl(22, 76%, 85%);
+            border-radius: 10px;
+            transform: scale(1.5); /* Increase size */
+            transition: transform 0.3s ease; /* Smooth transition effect */
+            }
+            .fa-brands.fa-facebook:hover {
+            color: #3B5998 !important;
+            }
+
+            .fa-brands.fa-instagram:hover {
+            color: #D62976 !important;
+            }
+
+            .fa-brands.fa-x-twitter:hover {
+            color: #181e20 !important;
+            }
+            /* Testimonial Container */
+            .testimonal__container {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                gap: 1rem;
+                padding: 1rem;
+            }
+
+            /* Testimonial Card */
+            .testimonal__card {
+                background-color: #fff;
+                border-radius: 12px;
+                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+                overflow: hidden;
+                max-width: 300px;
+                text-align: center;
+                transition: transform 0.3s ease-in-out;
+            }
+
+            .testimonal__card:hover {
+                transform: translateY(-10px);
+                background-color: #ffaba1;
+            }
+
+
+
+            /* Testimonial Title */
+            .testimonal__title {
+                font-family: var(--ff-philosopher);
+                font-size: 1.5rem;
+                color: hsl(203, 30%, 26%);
+                margin-top: 1rem;
+            }
+
+            /* Testimonial Description */
+            .testimonal__description {
+                font-family: var(--ff-poppins);
+                font-size: 1rem;
+                color: hsl(208, 7%, 46%);
+                padding: 0.75rem 1rem;
+            }
+
+            /* Testimonial Stars */
+            .testimonal__stars {
+                margin-top: 0.5rem;
+                color: #ffcc00; 
+                font-size: 1.4rem; 
+            }
+
+            .testimonal__stars i {
+                margin-right: 0.15rem; 
+            }
+
+            .testimonal__swiper {
+                display: flex;
+                justify-content: center;
+            }
+
+            /* Cards Wrapper */
+            .cards {
+                flex: 1;
+                display: flex;
+                justify-content: center;
+                padding: 1rem;
+            }
+
+            .items {
+                transition: transform 0.3s ease;
+            }
+
+            .items:hover {
+                transform: scale(1.1);
+            }
 
     </style>
 
@@ -326,10 +476,18 @@
     </div>
 
    
-        <header>
+        <header id="headContainer">
             <nav class="navbar navbar-expand-lg fixed-top">
                 <div class="container-fluid">
-                    <a class="navbar-brand" href="../index.html" style="color: black;">
+                    <!-- Bootstrap 5 switch -->
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+                        <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+                        <script src="../script.js"></script> <!-- Link to your JavaScript -->
+                        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
+                    </div>
+                    <a class="navbar-brand" href="../index.html">
+                        <!-- style="color: black;" -->
                         <b>Retro</b>
                     </a>
                     <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -340,21 +498,22 @@
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
                         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                             <li class="nav-item">
-                                <a class="nav-link" href="../index.html" style="color: black;">Home</a>
+                                <a class="nav-link" href="../index.html">Home</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="about.html" style="color: black;">About Us</a>
+                                <a class="nav-link" href="about.html">About Us</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="menu.html" style="color: black;">Collections</a>
+                                <a class="nav-link" href="menu.html">Collections</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="#" style="color: black;">Services</a>
+                                <a class="nav-link" href="#">Services</a>
                             <li class="nav-item">
-                                <a class="nav-link" href="contact.html" style="color: black;">Contact us</a>
+                                <a class="nav-link" href="contact.html">Contact us</a>
                             </li>
                             <li class="nav-item" style="list-style-type: none;">
-                                <a class="nav-link" href="cart.html" style="color: black;">
+                                <a class="nav-link" href="cart.html">
+                                    <!-- style="color: black;" -->
                                     <i class="fa-solid fa-cart-shopping"></i><span class="badge-count" id="badgeCount"></span>
                                 </a>
                             </li>
@@ -367,10 +526,10 @@
 
 
         <div class="mainhead">
-            <h1  style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%); margin-top: 10vh;">S E R V I C E S</h1>
+            <h1  style="font-family: var(--ff-philosopher); margin-top: 10vh;">S E R V I C E S</h1>
 
         </div>
-        <div class="first_cont">
+        <div id="section1" class="section first_cont">
             <!-- First Item -->
             <div class="items" style="text-align: center;">
                 <img src="../Images/customer-service.png" alt="Vintage Vibe" style="width: 100px; height: 100px; margin-bottom: 10px;">
@@ -400,11 +559,11 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Retro
         </div>
         </div>
 
-        <section class="service_container">
+        <section id="section2" class="section service_container">
 
             
                 <h2 class=section__title 
-                  style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%); margin-top: 10vh;">CUSTOMER OPINIONS</h2>
+                  style="font-family: var(--ff-philosopher); margin-top: 10vh;">CUSTOMER OPINIONS</h2>
                 <!-- <div class="main-cards"> -->
                 <div class="testimonal__container">
                     <div class="testimonal__swiper">
@@ -540,73 +699,73 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Retro
         </section>
 
         <!-- footer -->
-        <footer>
+        <footer class="footer">
 
-            <div class="foot-panel2" style="font-family: Garamond;">
+            <div class="footer foot-panel2" style="font-family: Garamond;">
                 <ul class="footer-colums">
                     <p
-                        style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Our
+                        style="font-family: var(--ff-philosopher);">Our
                         Pages</p>
                     <a href="../index.html"
-                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Home</a>
+                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(180, 1%, 25%);">Home</a>
                     <a href="menu.html"
-                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">About</a>
+                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">About</a>
                     <a href="#"
-                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Services</a>
+                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Services</a>
                     <a href="contact.html"
-                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Contact</a>
+                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Contact</a>
                     <a href="cart.html"
-                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Cart</a>
+                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Cart</a>
                         <a href="contributor.html"
-                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Contributors</a>
+                        style="text-decoration: none;font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Contributors</a>
                 </ul>
 
                 <ul class="footer-colums">
                     <p
-                        style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">
+                        style="font-family: var(--ff-philosopher);">
                         Exclusive Offers</p>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Retro
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Retro
                         Discounts</a>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Limited-Time
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Limited-Time
                         Promotions</a>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Special
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Special
                         Event Packages</a>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Membership
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Membership
                         Benefits</a>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Early
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Early
                         Access to New Collections</a>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">VIP
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">VIP
                         Retro Events</a>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Personalized
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Personalized
                         Culinary Experiences</a>
 
                 </ul>
 
                 <ul class="footer-colums">
                     <p
-                        style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Payment
+                        style="font-family: var(--ff-philosopher);">Payment
                         Products</p>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Secure
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Secure
                         Checkout</a>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Credit/Debit
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Credit/Debit
                         Cards</a>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Online
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Online
                         Payment</a>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Mobile
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Mobile
                         Wallets</a>
                     <a
-                        style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Contactless
+                        style="font-family: var(--ff-poppins);color: hsl(180, 1%,25%);">Contactless
                         Payments</a>
                 </ul>
 
@@ -637,7 +796,7 @@ <h3 style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Conta
             <div class="foot_panel4" style="font-family: Garamond;">
                 <div class="pages">
                     <h4
-                        style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
+                        style="font-family: var(--ff-philosopher);">Follow
                         Us</h4>
 
                         <div class="social-icons">
@@ -656,13 +815,13 @@ <h3 style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Conta
 
                         </div>
                     <p
-                        style="margin-bottom:0;font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Stay
+                        style="margin-bottom:0;font-family: var(--ff-philosopher);color: hsl(180, 1%,25%);">Stay
                         connected with us on social media for the latest
                         updates, latest collection, and vintage adventures.
                     </p>
                     <div class="copyright">
                         <p
-                            style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">
+                            style="font-family: var(--ff-philosopher);color: hsl(180, 1%,25%);">
                             &copy; 2024 Retro . All Rights Reserved. | <span
                                 id="author">
                                 <a href="https://www.linkedin.com"
diff --git a/Html-files/signup.html b/Html-files/signup.html
index 1bfe11cd..8ff27269 100644
--- a/Html-files/signup.html
+++ b/Html-files/signup.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sign up</title>
     <script src="scriptsignup.js" defer type="module"></script>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
     <link rel="stylesheet" href="../Css-files/signup1.css">
     <link rel="shortcut icon" type="image/x-icon" href="../Favicon image/favicon-32x32.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -15,159 +18,235 @@
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <style>
+
+       /*  */
+            /* body{
+                  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                  background-size: cover;
+                  background-attachment: fixed;
+                } */
+                .form-check{
+                margin-right:0.5rem ;
+            }
+    
+            body {
+                transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+            }
+            
+            [data-bs-theme='light'] {
+                background-color: #ffffff; /* Light background */
+                color: #000000; /* Light text color */
+            }
+            
+            [data-bs-theme='dark'] {
+                background-color: #000000; /* Dark background */
+                color: #ffffff; /* Light text color */
+            }
+            
+
+
+            [data-bs-theme='light'] body{
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+              background-size: cover;
+            }
+            /* for navbar */
+             [data-bs-theme='light'] .homebtn{
+                a{
+                  color: rgb(149, 15, 95);
+                }
+            } 
+            /* [data-bs-theme='light'] .card{
+              background-color: transparent;
+            } */ 
+            /* [data-bs-theme='light'] .card-login{
+              background: rgba(236, 236, 236, 0.8);
+            }*/
+   
+
+
+
+            [data-bs-theme='dark'] body{
+                /* background-color: rgb(53, 25, 25); */
+                background: linear-gradient(135deg, #985475, #483337); 
+                background-size: cover;
+                background-attachment: fixed;
+            }
+            /* for navbar */
+            [data-bs-theme='dark'] .homebtn{
+                a{
+                  color: #fde6e6;
+                }
+            }
+            [data-bs-theme='dark'] .box{
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+              background-size: cover;
+            }
+            [data-bs-theme='dark'] .card-login{
+              /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+              background-size: cover; */
+              span{
+                color: rgb(79, 77, 77);
+              }
+            }
+            
+           
+            /*  */
+
+
+
+
+
+
       @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
       #sr {
-display: none; 
-position: fixed; 
-bottom: 70px; 
-right: 15px; 
-z-index: 99; 
-font-size: 18px;
-border: none;
-outline: none;
-background-color: transparent; 
-color: rgb(17, 17, 17); 
-cursor: pointer; 
-padding: 15px; 
-border-radius: 4px; 
-}
+        display: none; 
+        position: fixed; 
+        bottom: 70px; 
+        right: 15px; 
+        z-index: 99; 
+        font-size: 18px;
+        border: none;
+        outline: none;
+        background-color: transparent; 
+        color: rgb(17, 17, 17); 
+        cursor: pointer; 
+        padding: 15px; 
+        border-radius: 4px; 
+      }
 
-#sr:hover {
-background-color: #333; 
-border-radius: 100px;
-}
-.circle{
- z-index: 998;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- pointer-events: none;
-  animation: colors 5s infinite;
-  position: fixed;
-transform: translate(-50%,-50%);
-}
-.circle::before {
-  content: "";
-  position: fixed;
-width: 50px;
-height: 50px;
-opacity: 0.2;
-transform: translate(-30%,-30%);
-border-radius: 50%;
-}
-body{
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-  background-size: cover;
-}
-:root{
-            --ff-philosopher: "Philosopher", sans-serif;
-            --ff-poppins: "Poppins", sans-serif;
+      #sr:hover {
+        background-color: #333; 
+        border-radius: 100px;
+      }
+      .circle{
+        z-index: 998;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        pointer-events: none;
+          animation: colors 5s infinite;
+          position: fixed;
+        transform: translate(-50%,-50%);
+      }
+      .circle::before {
+          content: "";
+          position: fixed;
+        width: 50px;
+        height: 50px;
+        opacity: 0.2;
+        transform: translate(-30%,-30%);
+        border-radius: 50%;
+      }
+        
+        :root{
+                    --ff-philosopher: "Philosopher", sans-serif;
+                    --ff-poppins: "Poppins", sans-serif;
+                }
+          </style>
+          <!--Tilted Text-->
+          <style>
+            .area{
+            width: 400px;
+            height: 400px;
+            position: relative;
+            display: flex;
+            flex-wrap: wrap;
+            perspective: 1000px;
+            transition: all 0.5s;
+            box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
+            border-radius: 10px;
         }
-  </style>
-  <!--Tilted Text-->
-  <style>
-    .area{
-    width: 400px;
-    height: 400px;
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    perspective: 1000px;
-    transition: all 0.5s;
-    box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
-    border-radius: 10px;
-}
-.area:hover{
-    transform: scale(1.1);
-}
-.area .way{
-    width: 33.33%;
-    height: 33.33%;
-    z-index: 1;
-}
-.area .box{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background-color: transparent;
-    transform-style: preserve-3d;
-    transition: all 0.5s ease-out;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 10px;
-}
-.area .box::before{
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    transform: translateZ(-80px);
-    background-color: transparent;
-    filter: blur(10px);
-}
-.area .box span{
-    width: 80%;
-    text-align: center;
-    font-family: var(--ff-philosopher);
-    font-weight: 500;
-    font-size: 50px;
-    color: hsl(357, 82%,35%);
-    transform-style: preserve-3d;
-    transform: translateZ(50px);
-}
-.area .box span::before{
-    content: 'Retro Vibe is Good Vibe';
-    top: 0px;
-    left: 0px;
-    position: absolute;
-    color: transparent;
-    text-shadow: 0px 0px 2px rgb(90, 90, 90), 0px 0px 5px gray;
-    transform: translateZ(-40px);
-}
-.error-message {
-            color: red;
-            font-size: 0.9em;
+        .area:hover{
+            transform: scale(1.1);
         }
-        .textfield {
-            margin-bottom: 15px;
+        .area .way{
+            width: 33.33%;
+            height: 33.33%;
+            z-index: 1;
         }
-        /* Tooltip styling */
-        .tooltip {
-            position: relative;
-            display: inline-block;
+        .area .box{
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            background-color: transparent;
+            transform-style: preserve-3d;
+            transition: all 0.5s ease-out;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 10px;
         }
-        .tooltip .tooltiptext {
-            visibility: hidden;
-            width: 200px;
-            background-color: #555;
-            color: #fff;
-            text-align: center;
-            border-radius: 5px;
-            padding: 5px;
+        .area .box::before{
+            content: '';
             position: absolute;
-            z-index: 1;
-            bottom: 125%; /* Position above the input field */
-            left: 50%;
-            margin-left: -100px; /* Center the tooltip */
-            opacity: 0;
-            transition: opacity 0.3s;
+            width: 100%;
+            height: 100%;
+            transform: translateZ(-80px);
+            background-color: transparent;
+            filter: blur(10px);
         }
-        .tooltip:hover .tooltiptext {
-            visibility: visible;
-            opacity: 1;
+        .area .box span{
+            width: 80%;
+            text-align: center;
+            font-family: var(--ff-philosopher);
+            font-weight: 500;
+            font-size: 50px;
+            color: hsl(357, 82%,35%);
+            transform-style: preserve-3d;
+            transform: translateZ(50px);
         }
-.area .way:nth-child(1):hover ~ .box{transform: rotateX(-20deg) rotateY(20deg);}
-.area .way:nth-child(2):hover ~ .box{transform: rotateX(-20deg) rotateY(0deg);}
-.area .way:nth-child(3):hover ~ .box{transform: rotateX(-20deg) rotateY(-20deg);}
+        .area .box span::before{
+            content: 'Retro Vibe is Good Vibe';
+            top: 0px;
+            left: 0px;
+            position: absolute;
+            color: transparent;
+            text-shadow: 0px 0px 2px rgb(90, 90, 90), 0px 0px 5px gray;
+            transform: translateZ(-40px);
+        }
+        .error-message {
+                    color: red;
+                    font-size: 0.9em;
+                }
+                .textfield {
+                    margin-bottom: 15px;
+                }
+                /* Tooltip styling */
+                .tooltip {
+                    position: relative;
+                    display: inline-block;
+                }
+                .tooltip .tooltiptext {
+                    visibility: hidden;
+                    width: 200px;
+                    background-color: #555;
+                    color: #fff;
+                    text-align: center;
+                    border-radius: 5px;
+                    padding: 5px;
+                    position: absolute;
+                    z-index: 1;
+                    bottom: 125%; /* Position above the input field */
+                    left: 50%;
+                    margin-left: -100px; /* Center the tooltip */
+                    opacity: 0;
+                    transition: opacity 0.3s;
+                }
+                .tooltip:hover .tooltiptext {
+                    visibility: visible;
+                    opacity: 1;
+                }
+        .area .way:nth-child(1):hover ~ .box{transform: rotateX(-20deg) rotateY(20deg);}
+        .area .way:nth-child(2):hover ~ .box{transform: rotateX(-20deg) rotateY(0deg);}
+        .area .way:nth-child(3):hover ~ .box{transform: rotateX(-20deg) rotateY(-20deg);}
 
-.area .way:nth-child(4):hover ~ .box{transform: rotateX(0deg) rotateY(20deg);}
-.area .way:nth-child(5):hover ~ .box{transform: rotateX(0deg) rotateY(0deg);}
-.area .way:nth-child(6):hover ~ .box{transform: rotateX(0deg) rotateY(-20deg);}
+        .area .way:nth-child(4):hover ~ .box{transform: rotateX(0deg) rotateY(20deg);}
+        .area .way:nth-child(5):hover ~ .box{transform: rotateX(0deg) rotateY(0deg);}
+        .area .way:nth-child(6):hover ~ .box{transform: rotateX(0deg) rotateY(-20deg);}
 
-.area .way:nth-child(7):hover ~ .box{transform: rotateX(20deg) rotateY(20deg);}
-.area .way:nth-child(8):hover ~ .box{transform: rotateX(20deg) rotateY(0deg);}
-.area .way:nth-child(9):hover ~ .box{transform: rotateX(20deg) rotateY(-20deg);}
+        .area .way:nth-child(7):hover ~ .box{transform: rotateX(20deg) rotateY(20deg);}
+        .area .way:nth-child(8):hover ~ .box{transform: rotateX(20deg) rotateY(0deg);}
+        .area .way:nth-child(9):hover ~ .box{transform: rotateX(20deg) rotateY(-20deg);}
   </style>
   <style>
     /* Styles for the switch link */
@@ -215,7 +294,14 @@
   </div>
     <div class="main-login">
       <div class="homebtn">
-        <a href="../index.html" style="font-family: var(--ff-philosopher); color: rgb(149, 15, 95);"><b>Retro</b></a>
+        <!-- Bootstrap 5 switch -->
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+          <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+          <script src="../script.js"></script> <!-- Link to your JavaScript -->
+          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
+        </div>
+        <a href="../index.html" style="font-family: var(--ff-philosopher);"><b>Retro</b></a>
       </div>
         <div class="left-login">
           <div class="area">
diff --git a/index.html b/index.html
index a79a756a..5c67813b 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,9 @@
             }
         }
     </style>
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -371,9 +374,16 @@
     
     <!--Navbar Start-->
     <nav class="navbar navbar-expand-lg fixed-top" id="top">
+         <!-- Bootstrap 5 switch -->
+         <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+            <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
+            <script src="script.js"></script> <!-- Link to your JavaScript -->
+        </div>
         <div class="container-fluid">
-            <a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher); color: black;">
+            <a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher);">
                 <b>Retro</b>
+                <!-- color: black; -->
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -383,29 +393,30 @@
                 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                     <li class="nav-item">
                         <a class="nav-link" aria-current="page" href="#"
-                            style="color: black; font-family: var(--ff-philosopher);">Home</a>
+                            style=" font-family: var(--ff-philosopher);">Home</a>
+                            <!-- color: black; -->
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="Html-files/about.html"
-                            style="font-family: var(--ff-philosopher); color: black;">About Us</a>
+                            style="font-family: var(--ff-philosopher);">About Us</a>
                     </li>
                     
                     <li class="nav-item">
                         <a class="nav-link" href="Html-files/menu.html"
-                            style="font-family: var(--ff-philosopher);color: black;">Collections</a>
+                            style="font-family: var(--ff-philosopher);">Collections</a>
                     </li>
 
                     <li class="nav-item">
                         <a class="nav-link" href="Html-files/services.html"
-                            style="font-family: var(--ff-philosopher);color: black;">Services</a>
+                            style="font-family: var(--ff-philosopher);">Services</a>
                     </li>
 
                     <li class="nav-item">
-                        <a class="nav-link" href="Html-files/contact.html" style="font-family: var(--ff-philosopher); color: black">Contact Us</a>
+                        <a class="nav-link" href="Html-files/contact.html" style="font-family: var(--ff-philosopher);">Contact Us</a>
                     </li>
                     
                     <li class="nav-item">
-                    <a class="nav-link" href="#" style="font-family: var(--ff-philosopher); color: black;">More</a>
+                    <a class="nav-link" href="#" style="font-family: var(--ff-philosopher);">More</a>
                     </li>
 
                 </ul>
@@ -414,14 +425,15 @@
                     <ul class="navbar-nav">
                         <li class="nav-item">
                             <a class="nav-link" onclick="redirectLogin()"
-                                style="color: black; font-family: var(--ff-philosopher);">Login</a>
+                                style=" font-family: var(--ff-philosopher);">Login</a>
+                                <!-- color: black; -->
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" onclick="redirectSignup()"
-                                style="color: black; font-family: var(--ff-philosopher);">Signup</a>
+                                style=" font-family: var(--ff-philosopher);">Signup</a>
                         </li>
                         <li class="nav-item" style="list-style-type: none;">
-                            <a class="nav-link" href="Html-files/cart.html" style="color: black;"><i
+                            <a class="nav-link" href="Html-files/cart.html"><i
                                     class="fa-solid fa-cart-shopping"></i>Cart</a>
                         </li>
                     </ul>
@@ -490,16 +502,20 @@ <h1>Discover the Past!</h1>
         </div>
     </nav>
 -->
+    <!-- Bootstrap Bundle JS (includes Popper) -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
+
     <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
-<script>
-function loadGoogleTranslate() {
-new google.translate.TranslateElement({
-  pageLanguage: 'en'
-}, 'google_element');
-}
-</script>
+    <script>
+    function loadGoogleTranslate() {
+    new google.translate.TranslateElement({
+    pageLanguage: 'en'
+    }, 'google_element');
+    }
+    </script>
 
-    <section class="intro_container">
+    <section id="section1" class="section intro_container">
         <h1 class="retro-heading" style="font-family: var(--ff-philosopher);color: brown;z-index: 99;">Welcome to Retro!</h1>
         <p style="font-family: cursive;z-index: 99;color: white;font-size: x-large;">Step back in time and experience the nostalgic charm of days gone by. 
             Immerse yourself in the world of vintage tech, classic designs, and timeless memories. 
@@ -519,7 +535,7 @@ <h1 class="retro-heading" style="font-family: var(--ff-philosopher);color: brown
     window.open('Html-files/menu.html', '_blank');
 });
     </script>
-    <section class="about_us">
+    <section id="section2" class="section about_us">
         <div class="move">
             <div id="marque">
                  <a href="Html-files/cart.html"> <h1 class="poppins-light"  style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1></a>
@@ -556,33 +572,33 @@ <h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whims
         
     </section>
 
- <section class="service_container">
-    <div class="service">
-        <!-- Text Column - 60% Width -->
-        <div class="service_text column"  style="margin-left: auto; margin-right: auto;"><br>
-            <h1>Bringing happiness to you</h1>
-            <p>Order your favourite vintage collections!</p>
-        </div>
+    <section id="section3" class="section service_container">
+        <div class="service">
+            <!-- Text Column - 60% Width -->
+            <div class="service_text column"  style="margin-left: auto; margin-right: auto;"><br>
+                <h1>Bringing happiness to you</h1>
+                <p>Order your favourite vintage collections!</p>
+            </div>
 
-        <!-- Buttons Column - 40% Width -->
+            <!-- Buttons Column - 40% Width -->
 
-        <div class="service_buttons column" style="margin-left: auto; margin-right: auto;">
-            <div class="button_row" data-aos="fade-down">
-                <div class="service_item box" data-aos="fade-down" style="height: 200px;">
-                    <h2>Online Delivery</h2><br>
-                    <a href="./Html-files/menu.html" class="order_btn">Order Online</a>
-                </div>
-                <div class="service_item box" data-aos="fade-down" style="height: 200px;">
-                    <h2>Click & Collect</h2><br>
-                    <a href="./Html-files/cart.html" class="order_btn">Take out Order</a>
+            <div class="service_buttons column" style="margin-left: auto; margin-right: auto;">
+                <div class="button_row" data-aos="fade-down">
+                    <div class="service_item box" data-aos="fade-down" style="height: 200px;">
+                        <h2>Online Delivery</h2><br>
+                        <a href="./Html-files/menu.html" class="order_btn">Order Online</a>
+                    </div>
+                    <div class="service_item box" data-aos="fade-down" style="height: 200px;">
+                        <h2>Click & Collect</h2><br>
+                        <a href="./Html-files/cart.html" class="order_btn">Take out Order</a>
+                    </div>
                 </div>
             </div>
-        </div>
-          
+            
 
-</section>
+    </section>
 
-    <section class="menu_container">
+    <section id="section4" class="section menu_container">
         <div class="mainhead">
             <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">"Get ready to explore our vintage collections!"</h1>
             <p style="font-family: var(--ff-poppins);">"Free on Order above $5000"</p>
@@ -620,7 +636,7 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Juices
         </div>
     </section>
 
-    <section class="section-meals" data-aos="fade-in" data-aos-duration="2000">
+    <section id="section5" class="section section-meals" data-aos="fade-in" data-aos-duration="2000">
         <ul class="meals-showcase clearfix">
             <li>
                 <figure class="meal-photo">
@@ -921,7 +937,8 @@ <h2 style="display: flex; justify-content: center; align-items: center; margin-t
 
     </section>
 
-    <div class="app_download" style="background-color: hsl(20, 43%, 93%);">
+    <div class="footer app_download">
+        <!-- style="background-color: hsl(20, 43%, 93%);" -->
         <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Free Delivery!</h4>
         <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Download the App now!</h2>
         <br>
@@ -933,9 +950,12 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
 
     </div>
 
-    <div class="footer" style="background-color: hsl(20, 43%, 93%);">
+    <div class="footer">
+        <!-- style="background-color: hsl(20, 43%, 93%);" -->
         <footer>
-            <div class="foot-panel2" style="background-color:hsl(20, 43%, 93%);font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
+            <div class="footer foot-panel2" style="font-family: var(--ff-poppins);">
+                <!-- background-color:hsl(20, 43%, 93%);
+                color: hsl(208, 7%,46%); -->
                 <ul>
                     <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align: left;">Our Pages</p>
                     <a href="#" style="color: black;">Home</a>
@@ -1004,12 +1024,14 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
                         <a class="fa-brands fa-snapchat"  href="https://www.snapchat.com" ></a>
 
                     </div>
-                    <p style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);color: hsl(203, 30%, 26%);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
+                    <p class="footer" style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
+                        <!-- background-color: hsl(20, 43%, 93%); -->
                     </p>
-                    <div class="copyright" style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);color: black;">
+                    <div class="footer copyright" style="font-family: var(--ff-philosopher);color: black;">
+                        <!-- background-color: hsl(20, 43%, 93%); -->
 
                         &copy; 2024 Retro . All Rights Reserved. | Developed by <span id="author">
-                            <a href="https://www.linkedin.com" target="_blank" style="text-decoration: none;">Retro Team</a>
+                            <a class="retroItem" href="https://www.linkedin.com" target="_blank" style="text-decoration: none;">Retro Team</a>
                     </div>
                     <div>
                         <button id="sr" style="z-index: 1000; display: block;">
@@ -1022,7 +1044,8 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
                     </div>
                 </div>
         </footer>
-        <button onclick="window.print()" style="font-family:Georgia; font-size:medium; line-height: inherit;border-radius:5px ;background-color: #f9e2c4;padding:5px 5px;">Print this page</button>
+        <button class="print" onclick="window.print()" style="font-family:Georgia; font-size:medium; line-height: inherit;border-radius:5px ;padding:5px 5px;">Print this page</button>
+        <!-- background-color: #f9e2c4; -->
     </div>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
diff --git a/script.js b/script.js
new file mode 100644
index 00000000..01bd326e
--- /dev/null
+++ b/script.js
@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+    const htmlElement = document.documentElement;
+    const switchElement = document.getElementById('darkModeSwitch');
+
+    // Set the default theme to dark if no setting is found in local storage
+    const currentTheme = localStorage.getItem('bsTheme') || 'dark';
+    htmlElement.setAttribute('data-bs-theme', currentTheme);
+    switchElement.checked = currentTheme === 'dark';
+
+    switchElement.addEventListener('change', function () {
+        if (this.checked) {
+            htmlElement.setAttribute('data-bs-theme', 'dark');
+            localStorage.setItem('bsTheme', 'dark');
+        } else {
+            htmlElement.setAttribute('data-bs-theme', 'light');
+            localStorage.setItem('bsTheme', 'light');
+        }
+    });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index e7549cae..34a6a514 100644
--- a/style.css
+++ b/style.css
@@ -13,6 +13,128 @@
 body {
   background-color: black;
 }
+
+.form-check{
+  margin-right:1rem ;
+}
+.black{
+  color: black;
+}
+section {
+  background-color: white;
+  color: black;
+}
+#section6, #section7{
+  background-color:hsl(20, 43%, 93%) ;
+}
+.footer{
+  background-color: hsl(20, 43%, 93%);
+}
+.navbar a{
+  color: black;
+}
+.print{
+  background-color: #f9e2c4; 
+  color: #000;
+  border: 2px solid black;
+}
+
+
+
+
+[data-bs-theme='light'] {
+  background-color: #ffffff; 
+  color: #000000; 
+}
+[data-bs-theme='dark'] {
+  background-color: #000000; 
+  color: #ffffff; 
+}
+
+
+.section {
+  transition: background-color 0.3s ease; 
+}
+
+
+
+
+/* for navbar */
+[data-bs-theme='light'] .navbar {
+  background-color: #FFFFF5CC; 
+}
+/* for section */
+[data-bs-theme='light'] .section {
+  /* background:linear-gradient(to bottom, #feaea5, #a65961);  */
+  background: transparent;
+}
+[data-bs-theme='light'] #section1 {
+  background:linear-gradient(to bottom, #feaea5, #a65961); 
+}
+[data-bs-theme='light'] #section3{
+  background-color: hsl(20, 43%, 93%);
+}
+[data-bs-theme='light'] #section4 {
+  background-color: hsl(20, 43%, 93%);
+}
+/* for footer */
+[data-bs-theme='light'] .footer {
+  background-color: hsl(20, 43%, 93%); 
+}
+
+
+
+/* for navbar */
+[data-bs-theme='dark'] .navbar {
+  background-color:rgb(70, 70, 70); 
+  a{
+    color: #fff;
+  }
+}
+/* for section */
+[data-bs-theme='dark'] .section {
+  background-color: rgb(126, 125, 125); /* Dark section background */
+  h2{
+    color: #A21017;
+  }
+  p{
+    color: white;
+  }
+  .faq-container{
+    background-color: #000;
+  }
+}
+[data-bs-theme='dark'] #section1 {
+  background:linear-gradient(to bottom, #945b55, #83444d); 
+}
+[data-bs-theme='dark'] #section3{
+  background-color: rgb(193, 188, 188);
+  .service_item{
+    /* box-shadow: 10px 5px 5px black; */
+    box-shadow: 3px 3px rgb(65, 65, 65), -1em 0 .4em rgb(110, 109, 109);
+  }
+}
+[data-bs-theme='dark'] #section4 {
+  background-color: rgb(193, 188, 188);
+}
+/* for footer */
+[data-bs-theme='dark'] .footer {
+  background-color: rgb(193, 188, 188); 
+}
+[data-bs-theme='dark'] .retroItem {
+  color: #f2f2f2;
+  font-weight: bold;
+}
+[data-bs-theme='dark'] .print {
+  background-color:#000 ; 
+  color: #f9e2c4;
+  border: 2px solid #f9e2c4;
+}
+
+
+
+
+
 /*
 .navbar {
   padding: fixed;

From 265ca632a7c2beb40ca58aed56c10976f6035510 Mon Sep 17 00:00:00 2001
From: Poushmita <poushmitap@gmail.com>
Date: Tue, 22 Oct 2024 15:37:10 +0530
Subject: [PATCH 2/7] Added styles in Toggle

---
 Css-files/login1.css     |   3 +-
 Css-files/signup1.css    |   4 ++
 Html-files/about.html    | 129 ++++++++++++++++++++++++++++++++---
 Html-files/cart.html     | 130 ++++++++++++++++++++++++++++++++---
 Html-files/contact.html  | 130 ++++++++++++++++++++++++++++++++---
 Html-files/login.html    | 144 ++++++++++++++++++++++++++++++++++++---
 Html-files/menu.html     | 138 +++++++++++++++++++++++++++++++++----
 Html-files/services.html | 130 ++++++++++++++++++++++++++++++++---
 Html-files/signup.html   | 135 +++++++++++++++++++++++++++++++++---
 index.html               |  26 +++++--
 script.js                |  24 ++++++-
 style.css                | 115 ++++++++++++++++++++++++++++++-
 12 files changed, 1032 insertions(+), 76 deletions(-)

diff --git a/Css-files/login1.css b/Css-files/login1.css
index ca881644..e61f96e3 100644
--- a/Css-files/login1.css
+++ b/Css-files/login1.css
@@ -16,7 +16,8 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 2rem; /* Add spacing between sections */
+  /* gap: 0.2rem;  */
+  /* Add spacing between sections */
 }
 
 .left-login {
diff --git a/Css-files/signup1.css b/Css-files/signup1.css
index 1d6df082..6b589696 100644
--- a/Css-files/signup1.css
+++ b/Css-files/signup1.css
@@ -28,6 +28,10 @@ body {
 
 .main-login {
   display: flex;
+  .form-check{
+    /* justify-self: center; */
+    align-self: flex-start;
+  }
   justify-content: center;
   align-items: center;
   width: 100%;
diff --git a/Html-files/about.html b/Html-files/about.html
index f7326bb1..cf1b6d8c 100644
--- a/Html-files/about.html
+++ b/Html-files/about.html
@@ -32,12 +32,113 @@
   <style>
 
     /*  */
+
+    /* */
+    input{
+      display: none;
+    }
+    .display{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      /* transition: 0.5s; */
+      /* background: white; */
+    }
+    label{
+      width: 50px;
+      height: 24px;
+      border-radius: 999px;
+      background: #f0a2a2;
+      box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
+      cursor: pointer;
+      position: relative;
+      /* transition: 0.5s; */
+    }
+    .circle_mode{
+      border: solid 1px rgb(249, 246, 246);
+      width: 20px;
+      height: 20px;
+      border-radius: 99px;
+      background: white;
+      box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
+      -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
+      position: absolute;
+      top: 50%;
+      left: 0%;
+      transform: translate(10%, -50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      transition: 0.5s;
+    }
+    .circle_mode svg{
+      width: 20px;
+      position: absolute;
+    }
+    .sun{
+      color: #FFD600;
+      margin-top: 0%;
+      opacity: 1;
+    }
+    .moon{
+      margin-top: -150%;
+      color: white;
+      opacity: 0;
+    }
+
+
+    /* input[type=checkbox]:checked + .display{
+      background: black;
+    } */
+    input[type=checkbox]:checked + .display label{
+      background: #70000f;
+      box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
+    }
+    input[type=checkbox]:checked + .display label .circle_mode{
+      border: solid 1px rgb(12, 12, 12);
+      left:100%;
+      transform: translate(-110%, -50%);
+      /* background: #2C2C2F; */
+      background: #c14e5ee8;
+      box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
+      -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
+    }
+    input[type=checkbox]:checked + .display label .circle_mode .sun{
+      margin-top: 150%;
+      opacity: 0;
+    }
+    input[type=checkbox]:checked + .display label .circle_mode .moon{
+      margin-top: 0%;
+      opacity: 1;
+    }
+    label:active .circle_mode{
+      width: 50px;
+    }
+    /* */
+
+
     /* body{
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
       background-size: cover;
     } */
     .form-check{
-      margin-right:1rem ;
+      /* margin: 0 0 0 0;
+      padding: 0 0 0 0; */
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0 0 0 10px;
+      margin-right:2rem ;
+
+      background-color: #f8f9fa;
+      /* color: black; */
+      border: none;
+      border-radius: 5px;
+      padding: 6px 10px;
+      transition: background-color 0.3s, color 0.3s;
     }
     .section {
       transition: background-color 0.3s ease; /* Smooth transition for sections */
@@ -743,13 +844,6 @@
       <header style="font-family: var(--ff-philosopher);">
         <nav class="navbar navbar-expand-lg fixed-top" id="top">
           <div class="container-fluid">
-            <!-- Bootstrap 5 switch -->
-            <div class="form-check form-switch">
-              <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
-              <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
-              <script src="../script.js"></script> <!-- Link to your JavaScript -->
-              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
-            </div>
             <a class="navbar-brand" href="/index.html" style="font-family: var(--ff-philosopher);">
               <b>Retro</b>
             </a>
@@ -789,6 +883,25 @@
               -->
             </div>
           </div>
+          <!-- Bootstrap 5 switch -->
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+            <div class="display">
+                <label class="form-check-label" for="darkModeSwitch">
+                    <div class="circle_mode">
+                        <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                        </svg>   
+                        <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                            <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                        </svg>                            
+                    </div>
+                </label>
+                <span></span>
+            </div>            
+            <script src="../script.js"></script> <!-- Link to your JavaScript -->
+            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
+          </div> 
         </nav>
       </header>
 
diff --git a/Html-files/cart.html b/Html-files/cart.html
index ac151886..1ac0ea8c 100644
--- a/Html-files/cart.html
+++ b/Html-files/cart.html
@@ -33,13 +33,115 @@
   <style>
 
      /*  */
+
+        /* */
+        input{
+          display: none;
+        }
+        .display{
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          /* transition: 0.5s; */
+          /* background: white; */
+        }
+        label{
+          width: 50px;
+          height: 24px;
+          border-radius: 999px;
+          background: #f0a2a2;
+          box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
+          cursor: pointer;
+          position: relative;
+          /* transition: 0.5s; */
+        }
+        .circle_mode{
+          border: solid 1px rgb(249, 246, 246);
+          width: 20px;
+          height: 20px;
+          border-radius: 99px;
+          background: white;
+          box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
+          -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
+          position: absolute;
+          top: 50%;
+          left: 0%;
+          transform: translate(10%, -50%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          transition: 0.5s;
+        }
+        .circle_mode svg{
+          width: 20px;
+          position: absolute;
+        }
+        .sun{
+          color: #FFD600;
+          margin-top: 0%;
+          opacity: 1;
+        }
+        .moon{
+          margin-top: -150%;
+          color: white;
+          opacity: 0;
+        }
+
+
+        /* input[type=checkbox]:checked + .display{
+          background: black;
+        } */
+        input[type=checkbox]:checked + .display label{
+          background: #70000f;
+          box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
+        }
+        input[type=checkbox]:checked + .display label .circle_mode{
+          border: solid 1px rgb(12, 12, 12);
+          left:100%;
+          transform: translate(-110%, -50%);
+          /* background: #2C2C2F; */
+          background: #c14e5ee8;
+          box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
+          -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
+        }
+        input[type=checkbox]:checked + .display label .circle_mode .sun{
+          margin-top: 150%;
+          opacity: 0;
+        }
+        input[type=checkbox]:checked + .display label .circle_mode .moon{
+          margin-top: 0%;
+          opacity: 1;
+        }
+        label:active .circle_mode{
+          width: 50px;
+        }
+        /* */
+
+
+
             /*  body {
                   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
                   background-size: cover;
                 }
             */
             .form-check{
-                margin-right:1rem ;
+                /* margin: 0 0 0 0;
+                padding: 0 0 0 0; */
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 0 0 0 10px;
+                margin-right:2rem ;
+
+                background-color: #f8f9fa;
+                /* color: black; */
+                border: none;
+                border-radius: 5px;
+                padding: 6px 10px;
+                transition: background-color 0.3s, color 0.3s;
             }
             section {
                 background-color: white;
@@ -485,13 +587,6 @@
     <header>
       <nav class="navbar navbar-expand-lg fixed-top">
         <div class="container-fluid">
-          <!-- Bootstrap 5 switch -->
-          <div class="form-check form-switch">
-            <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
-            <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
-            <script src="../script.js"></script> <!-- Link to your JavaScript -->
-            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
-          </div>
           <a class="navbar-brand" href="../index.html">
             <!-- style="color: black;" -->
             <b>Retro</b>
@@ -524,6 +619,25 @@
             </ul>
           </div>
         </div>
+        <!-- Bootstrap 5 switch -->
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+          <div class="display">
+              <label class="form-check-label label_button" for="darkModeSwitch">
+                  <div class="circle_mode">
+                      <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                          <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                      </svg>   
+                      <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                          <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                      </svg>                            
+                  </div>
+              </label>
+              <span></span>
+          </div>            
+          <script src="../script.js"></script> <!-- Link to your JavaScript -->
+          <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
+        </div>
       </nav>
     </header>
   </div>
diff --git a/Html-files/contact.html b/Html-files/contact.html
index 18ce703e..7e7879f9 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -39,13 +39,115 @@
     <style>
 
         /*  */
+
+         /* */
+        input{
+        display: none;
+        }
+        .display{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /* transition: 0.5s; */
+        /* background: white; */
+        }
+        .label_button{
+        width: 50px;
+        height: 24px;
+        border-radius: 999px;
+        background: #f0a2a2;
+        box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
+        cursor: pointer;
+        position: relative;
+        /* transition: 0.5s; */
+        }
+        .circle_mode{
+        border: solid 1px rgb(249, 246, 246);
+        width: 20px;
+        height: 20px;
+        border-radius: 99px;
+        background: white;
+        box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
+        -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
+        position: absolute;
+        top: 50%;
+        left: 0%;
+        transform: translate(10%, -50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        transition: 0.5s;
+        }
+        .circle_mode svg{
+        width: 20px;
+        position: absolute;
+        }
+        .sun{
+        color: #FFD600;
+        margin-top: 0%;
+        opacity: 1;
+        }
+        .moon{
+        margin-top: -150%;
+        color: white;
+        opacity: 0;
+        }
+
+
+        /* input[type=checkbox]:checked + .display{
+        background: black;
+        } */
+        input[type=checkbox]:checked + .display label{
+        background: #70000f;
+        box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
+        }
+        input[type=checkbox]:checked + .display label .circle_mode{
+        border: solid 1px rgb(12, 12, 12);
+        left:100%;
+        transform: translate(-110%, -50%);
+        /* background: #2C2C2F; */
+        background: #c14e5ee8;
+        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
+        -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
+        }
+        input[type=checkbox]:checked + .display label .circle_mode .sun{
+        margin-top: 150%;
+        opacity: 0;
+        }
+        input[type=checkbox]:checked + .display label .circle_mode .moon{
+        margin-top: 0%;
+        opacity: 1;
+        }
+        .label_button:active .circle_mode{
+        width: 50px;
+        }
+        /* */
+
+
+
             /* body{
                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
                 background-size: cover;
                 background-attachment: fixed;
             } */
             .form-check{
-                margin-right:1rem ;
+                /* margin: 0 0 0 0;
+                padding: 0 0 0 0; */
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 0 0 0 10px;
+                margin-right:2rem ;
+
+                background-color: #f8f9fa;
+                /* color: black; */
+                border: none;
+                border-radius: 5px;
+                padding: 6px 10px;
+                transition: background-color 0.3s, color 0.3s;
             }
             section {
                 background-color: transparent;
@@ -708,13 +810,6 @@
         <header>
             <nav class="navbar navbar-expand-lg fixed-top">
                 <div class="container-fluid">
-                    <!-- Bootstrap 5 switch -->
-                    <div class="form-check form-switch">
-                        <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
-                        <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
-                        <script src="../script.js"></script> <!-- Link to your JavaScript -->
-                        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
-                    </div>
                     <a class="navbar-brand" href="../index.html">
                         <!-- style="color: black;" -->
                         <b>Retro</b>
@@ -749,6 +844,25 @@
                         </ul>
                     </div>
                 </div>
+                <!-- Bootstrap 5 switch -->
+                <div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+                    <div class="display">
+                        <label class="form-check-label label_button" for="darkModeSwitch">
+                            <div class="circle_mode">
+                                <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                                </svg>   
+                                <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                                </svg>                            
+                            </div>
+                        </label>
+                        <span></span>
+                    </div>            
+                    <script src="../script.js"></script> <!-- Link to your JavaScript -->
+                    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
+                </div> 
             </nav>
         </header>
     </div>
diff --git a/Html-files/login.html b/Html-files/login.html
index 31e569c1..ee48416b 100644
--- a/Html-files/login.html
+++ b/Html-files/login.html
@@ -22,14 +22,126 @@
 
 
        /*  */
+
+      #loginForm{
+        display: flex;
+        .form-check{
+          /* justify-self: start; */
+          align-self: flex-start;
+        }
+      }
+
+
+        /* */
+        .input_button{
+          display: none;
+        }
+        .display{
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          /* transition: 0.5s; */
+          /* background: white; */
+        }
+        .label_button{
+          width: 50px;
+          height: 24px;
+          border-radius: 999px;
+          background: #f0a2a2;
+          box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
+          cursor: pointer;
+          position: relative;
+          /* transition: 0.5s; */
+        }
+        .circle_mode{
+          border: solid 1px rgb(249, 246, 246);
+          width: 20px;
+          height: 20px;
+          border-radius: 99px;
+          background: white;
+          box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
+          -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
+          position: absolute;
+          top: 50%;
+          left: 0%;
+          transform: translate(10%, -50%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          transition: 0.5s;
+        }
+        .circle_mode svg{
+          width: 20px;
+          position: absolute;
+        }
+        .sun{
+          color: #FFD600;
+          margin-top: 0%;
+          opacity: 1;
+        }
+        .moon{
+          margin-top: -150%;
+          color: white;
+          opacity: 0;
+        }
+
+
+        /* input[type=checkbox]:checked + .display{
+          background: black;
+        } */
+        .input_button[type=checkbox]:checked + .display label{
+          background: #70000f;
+          box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
+        }
+        .input_button[type=checkbox]:checked + .display label .circle_mode{
+          border: solid 1px rgb(12, 12, 12);
+          left:100%;
+          transform: translate(-110%, -50%);
+          /* background: #2C2C2F; */
+          background: #c14e5ee8;
+          box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
+          -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
+        }
+        .input_button[type=checkbox]:checked + .display label .circle_mode .sun{
+          margin-top: 150%;
+          opacity: 0;
+        }
+        .input_button[type=checkbox]:checked + .display label .circle_mode .moon{
+          margin-top: 0%;
+          opacity: 1;
+        }
+        .label_button:active .circle_mode{
+          width: 50px;
+        }
+        /* */
+
+
+
+
             /* body{
                   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
                   background-size: cover;
                   background-attachment: fixed;
                 } */
-            .form-check{
-                margin-right:0.5rem ;
-            }
+                .form-check{
+                  /* margin: 0 0 0 0;
+                  padding: 0 0 0 0; */
+                  display: inline-flex;
+                  justify-content: center;
+                  align-items: center;
+                  margin: 10px 0 0 10px;
+                  margin-right:2rem ;
+
+                  background-color: #f8f9fa;
+                  /* color: black; */
+                  border: none;
+                  border-radius: 5px;
+                  padding: 6px 10px;
+                  transition: background-color 0.3s, color 0.3s;
+                }
             /* section {
                 background-color: white;
                 color: black;
@@ -229,13 +341,6 @@
   </div>
   <div class="main-login">
     <div class="left-login" style="background-color: transparent;">
-      <!-- Bootstrap 5 switch -->
-      <div class="form-check form-switch">
-        <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
-        <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
-        <script src="../script.js"></script> <!-- Link to your JavaScript -->
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
-      </div>
       <div class="home-btn"><a href="../index.html" style="font-family: var(--ff-philosopher);"><b>Retro</b></a></div>
       <div class="container">
         <div class="card">
@@ -272,6 +377,25 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</
         <p class="switch-link">Don’t have an account? <a href="signup.html">Sign Up</a></p>
       </div>
     </div>
+    <!-- Bootstrap 5 switch -->
+    <div class="form-check form-switch">
+      <input class="form-check-input input_button" type="checkbox" id="darkModeSwitch" checked>
+      <div class="display">
+          <label class="form-check-label label_button" for="darkModeSwitch">
+              <div class="circle_mode">
+                  <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                  </svg>   
+                  <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                      <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                  </svg>                            
+              </div>
+          </label>
+          <span></span>
+      </div>            
+      <script src="../script.js"></script> <!-- Link to your JavaScript -->
+      <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
+    </div>
 </form>
 
   <script>
diff --git a/Html-files/menu.html b/Html-files/menu.html
index c7896c44..cd318102 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -32,13 +32,114 @@
     <link rel="stylesheet" href="../Css-files/content.css">
     <style>
 
-         /*  */
+        /*  */
+
+        /* */
+        input{
+        display: none;
+        }
+        .display{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /* transition: 0.5s; */
+        /* background: white; */
+        }
+        label{
+        width: 50px;
+        height: 24px;
+        border-radius: 999px;
+        background: #f0a2a2;
+        box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
+        cursor: pointer;
+        position: relative;
+        /* transition: 0.5s; */
+        }
+        .circle_mode{
+        border: solid 1px rgb(249, 246, 246);
+        width: 20px;
+        height: 20px;
+        border-radius: 99px;
+        background: white;
+        box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
+        -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
+        position: absolute;
+        top: 50%;
+        left: 0%;
+        transform: translate(10%, -50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        transition: 0.5s;
+        }
+        .circle_mode svg{
+        width: 20px;
+        position: absolute;
+        }
+        .sun{
+        color: #FFD600;
+        margin-top: 0%;
+        opacity: 1;
+        }
+        .moon{
+        margin-top: -150%;
+        color: white;
+        opacity: 0;
+        }
+
+
+        /* input[type=checkbox]:checked + .display{
+        background: black;
+        } */
+        input[type=checkbox]:checked + .display label{
+        background: #70000f;
+        box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
+        }
+        input[type=checkbox]:checked + .display label .circle_mode{
+        border: solid 1px rgb(12, 12, 12);
+        left:100%;
+        transform: translate(-110%, -50%);
+        /* background: #2C2C2F; */
+        background: #c14e5ee8;
+        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
+        -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
+        }
+        input[type=checkbox]:checked + .display label .circle_mode .sun{
+        margin-top: 150%;
+        opacity: 0;
+        }
+        input[type=checkbox]:checked + .display label .circle_mode .moon{
+        margin-top: 0%;
+        opacity: 1;
+        }
+        label:active .circle_mode{
+        width: 50px;
+        }
+        /* */
+
+
         /* section {
             background-color: white;
             color: black;
         } */
         .form-check{
-            margin-right:1rem ;
+            /* margin: 0 0 0 0;
+            padding: 0 0 0 0; */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0 0 0 10px;
+            margin-right:2rem ;
+
+            background-color: #f8f9fa;
+            /* color: black; */
+            border: none;
+            border-radius: 5px;
+            padding: 6px 10px;
+            transition: background-color 0.3s, color 0.3s;
         }
         #headConatiner{
             background-color:hsl(20, 43%, 93%);
@@ -434,16 +535,8 @@
     <div id="headContainer" class="head_container">
         <!-- style="background-color: hsl(20, 43%, 93%);" -->
         <header>
-
             <nav class="navbar navbar-expand-lg fixed-top" id="top">
                 <div class="container-fluid">
-                    <!-- Bootstrap 5 switch -->
-                    <div class="form-check form-switch">
-                        <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
-                        <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
-                        <script src="../script.js"></script> <!-- Link to your JavaScript -->
-                        <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
-                    </div>
                     <a class="navbar-brand" href="../index.html" style="font-family: var(--ff-philosopher);">
                         <!-- color: black; -->
                         <b>Retro</b>
@@ -475,7 +568,7 @@
                             </li>
 
                         </ul>
-<!--                        <div class="nav-right ms-auto">
+                        <!--  <div class="nav-right ms-auto">
                             <ul class="navbar-nav">
                                 <li class="nav-item">
                                     <a class="nav-link" href="login.html" style="color: black;">Login</a>
@@ -484,11 +577,28 @@
                                     <a class="nav-link" href="signup.html" style="color: black;">Signup</a>
                                 </li>
                             </ul>
--->
-                        </div>
+                        -->
                     </div>
                 </div>
-
+                <!-- Bootstrap 5 switch -->
+                <div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+                    <div class="display">
+                        <label class="form-check-label" for="darkModeSwitch">
+                            <div class="circle_mode">
+                                <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                                </svg>   
+                                <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                                </svg>                            
+                            </div>
+                        </label>
+                        <span></span>
+                    </div>            
+                    <script src="../script.js"></script> <!-- Link to your JavaScript -->
+                    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
+                </div> 
             </nav>
         </header>
     </div>
diff --git a/Html-files/services.html b/Html-files/services.html
index da3a9598..a9bf4424 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -40,13 +40,115 @@
         <style>
 
             /*  */
+
+            /* */
+            input{
+            display: none;
+            }
+            .display{
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            /* transition: 0.5s; */
+            /* background: white; */
+            }
+            label{
+            width: 50px;
+            height: 24px;
+            border-radius: 999px;
+            background: #f0a2a2;
+            box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
+            cursor: pointer;
+            position: relative;
+            /* transition: 0.5s; */
+            }
+            .circle_mode{
+            border: solid 1px rgb(249, 246, 246);
+            width: 20px;
+            height: 20px;
+            border-radius: 99px;
+            background: white;
+            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
+            -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
+            position: absolute;
+            top: 50%;
+            left: 0%;
+            transform: translate(10%, -50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            transition: 0.5s;
+            }
+            .circle_mode svg{
+            width: 20px;
+            position: absolute;
+            }
+            .sun{
+            color: #FFD600;
+            margin-top: 0%;
+            opacity: 1;
+            }
+            .moon{
+            margin-top: -150%;
+            color: white;
+            opacity: 0;
+            }
+
+
+            /* input[type=checkbox]:checked + .display{
+            background: black;
+            } */
+            input[type=checkbox]:checked + .display label{
+            background: #70000f;
+            box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
+            }
+            input[type=checkbox]:checked + .display label .circle_mode{
+            border: solid 1px rgb(12, 12, 12);
+            left:100%;
+            transform: translate(-110%, -50%);
+            /* background: #2C2C2F; */
+            background: #c14e5ee8;
+            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
+            -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
+            }
+            input[type=checkbox]:checked + .display label .circle_mode .sun{
+            margin-top: 150%;
+            opacity: 0;
+            }
+            input[type=checkbox]:checked + .display label .circle_mode .moon{
+            margin-top: 0%;
+            opacity: 1;
+            }
+            label:active .circle_mode{
+            width: 50px;
+            }
+            /* */
+
+
+
             /* body{
                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
                 background-size: cover;
                 background-attachment: fixed;
             } */
             .form-check{
-                margin-right:1rem ;
+                /* margin: 0 0 0 0;
+                padding: 0 0 0 0; */
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 0 0 0 10px;
+                margin-right:2rem ;
+
+                background-color: #f8f9fa;
+                /* color: black; */
+                border: none;
+                border-radius: 5px;
+                padding: 6px 10px;
+                transition: background-color 0.3s, color 0.3s;
             }
             section {
                 background-color: white;
@@ -479,13 +581,6 @@
         <header id="headContainer">
             <nav class="navbar navbar-expand-lg fixed-top">
                 <div class="container-fluid">
-                    <!-- Bootstrap 5 switch -->
-                    <div class="form-check form-switch">
-                        <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
-                        <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
-                        <script src="../script.js"></script> <!-- Link to your JavaScript -->
-                        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
-                    </div>
                     <a class="navbar-brand" href="../index.html">
                         <!-- style="color: black;" -->
                         <b>Retro</b>
@@ -520,6 +615,25 @@
                         </ul>
                     </div>
                 </div>
+                <!-- Bootstrap 5 switch -->
+                <div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+                    <div class="display">
+                        <label class="form-check-label" for="darkModeSwitch">
+                            <div class="circle_mode">
+                                <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                                </svg>   
+                                <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                                </svg>                            
+                            </div>
+                        </label>
+                        <span></span>
+                    </div>            
+                    <script src="../script.js"></script> <!-- Link to your JavaScript -->
+                    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
+                </div> 
             </nav>
         </header>
     
diff --git a/Html-files/signup.html b/Html-files/signup.html
index 8ff27269..e6372c3e 100644
--- a/Html-files/signup.html
+++ b/Html-files/signup.html
@@ -20,14 +20,117 @@
     <style>
 
        /*  */
+
+        /* */
+        .input_button{
+          display: none;
+        }
+        .display{
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          /* transition: 0.5s; */
+          /* background: white; */
+        }
+        .label_button{
+          width: 50px;
+          height: 24px;
+          border-radius: 999px;
+          background: #f0a2a2;
+          box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
+          cursor: pointer;
+          position: relative;
+          /* transition: 0.5s; */
+        }
+        .circle_mode{
+          border: solid 1px rgb(249, 246, 246);
+          width: 20px;
+          height: 20px;
+          border-radius: 99px;
+          background: white;
+          box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
+          -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
+          position: absolute;
+          top: 50%;
+          left: 0%;
+          transform: translate(10%, -50%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          transition: 0.5s;
+        }
+        .circle_mode svg{
+          width: 20px;
+          position: absolute;
+        }
+        .sun{
+          color: #FFD600;
+          margin-top: 0%;
+          opacity: 1;
+        }
+        .moon{
+          margin-top: -150%;
+          color: white;
+          opacity: 0;
+        }
+
+
+        /* input[type=checkbox]:checked + .display{
+          background: black;
+        } */
+        .input_button[type=checkbox]:checked + .display label{
+          background: #70000f;
+          box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
+        }
+        .input_button[type=checkbox]:checked + .display label .circle_mode{
+          border: solid 1px rgb(12, 12, 12);
+          left:100%;
+          transform: translate(-110%, -50%);
+          /* background: #2C2C2F; */
+          background: #c14e5ee8;
+          box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
+          -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
+        }
+        .input_button[type=checkbox]:checked + .display label .circle_mode .sun{
+          margin-top: 150%;
+          opacity: 0;
+        }
+        .input_button[type=checkbox]:checked + .display label .circle_mode .moon{
+          margin-top: 0%;
+          opacity: 1;
+        }
+        .label_button:active .circle_mode{
+          width: 50px;
+        }
+        /* */
+
+
+
+
             /* body{
                   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
                   background-size: cover;
                   background-attachment: fixed;
                 } */
                 .form-check{
-                margin-right:0.5rem ;
-            }
+                  /* margin: 0 0 0 0;
+                  padding: 0 0 0 0; */
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  margin: 3% 0 0 10px;
+                  margin-right:2rem ;
+
+                  background-color: #f8f9fa;
+                  /* color: black; */
+                  border: none;
+                  border-radius: 5px;
+                  padding: 6px 10px;
+                  transition: background-color 0.3s, color 0.3s;
+                }
     
             body {
                 transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
@@ -294,13 +397,6 @@
   </div>
     <div class="main-login">
       <div class="homebtn">
-        <!-- Bootstrap 5 switch -->
-        <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
-          <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
-          <script src="../script.js"></script> <!-- Link to your JavaScript -->
-          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
-        </div>
         <a href="../index.html" style="font-family: var(--ff-philosopher);"><b>Retro</b></a>
       </div>
         <div class="left-login">
@@ -351,7 +447,26 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">SIGN U
 
           <p class="switch-link">Already have an account? <a href="login.html">Login</a></p>
         </div>
-      </div>
+        <!-- Bootstrap 5 switch -->
+        <div class="form-check form-switch">
+          <input class="form-check-input input_button" type="checkbox" id="darkModeSwitch" checked>
+          <div class="display">
+              <label class="form-check-label label_button" for="darkModeSwitch">
+                  <div class="circle_mode">
+                      <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                          <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                      </svg>   
+                      <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                          <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                      </svg>                            
+                  </div>
+              </label>
+              <span></span>
+          </div>            
+          <script src="../script.js"></script> <!-- Link to your JavaScript -->
+          <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
+        </div>
+    </div>
       <script>
         const coords = { x: 0, y: 0 };
         const circles = document.querySelectorAll(".circle");
diff --git a/index.html b/index.html
index 5c67813b..13429bb1 100644
--- a/index.html
+++ b/index.html
@@ -374,13 +374,25 @@
     
     <!--Navbar Start-->
     <nav class="navbar navbar-expand-lg fixed-top" id="top">
-         <!-- Bootstrap 5 switch -->
-         <div class="form-check form-switch">
-            <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
-            <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
-            <script src="script.js"></script> <!-- Link to your JavaScript -->
-        </div>
         <div class="container-fluid">
+            <!-- Bootstrap 5 switch -->
+            <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+                <div class="display">
+                    <label class="form-check-label" for="darkModeSwitch">
+                        <div class="circle_mode">
+                            <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                            </svg>   
+                            <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                            </svg>                            
+                        </div>
+                    </label>
+                    <span></span>
+                </div>            
+                <script src="../script.js"></script> <!-- Link to your JavaScript -->
+            </div> 
             <a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher);">
                 <b>Retro</b>
                 <!-- color: black; -->
@@ -437,7 +449,7 @@
                                     class="fa-solid fa-cart-shopping"></i>Cart</a>
                         </li>
                     </ul>
-                </div>
+                </div>           
             </div>
         </div>
     </nav>
diff --git a/script.js b/script.js
index 01bd326e..f12cfbba 100644
--- a/script.js
+++ b/script.js
@@ -16,4 +16,26 @@ document.addEventListener('DOMContentLoaded', (event) => {
             localStorage.setItem('bsTheme', 'light');
         }
     });
-});
\ No newline at end of file
+});
+
+
+
+// document.addEventListener('DOMContentLoaded', (event) => {
+//         const htmlElement = document.documentElement;
+//         const switchElement = document.getElementById('darkModeToggle');
+    
+//         // Set the default theme to dark if no setting is found in local storage
+//         const currentTheme = localStorage.getItem('bsTheme') || 'dark';
+//         htmlElement.setAttribute('data-bs-theme', currentTheme);
+//         switchElement.checked = currentTheme === 'dark';
+    
+//         switchElement.addEventListener('change', function () {
+//             if (this.checked) {
+//                 htmlElement.setAttribute('data-bs-theme', 'dark');
+//                 localStorage.setItem('bsTheme', 'dark');
+//             } else {
+//                 htmlElement.setAttribute('data-bs-theme', 'light');
+//                 localStorage.setItem('bsTheme', 'light');
+//             }
+//         });
+//     });
\ No newline at end of file
diff --git a/style.css b/style.css
index 34a6a514..c16bb97d 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,8 @@
 * {
   margin: 0px;
   padding: 0px;
+  box-sizing: border-box;
+  /* transition: 0.5s; */
 }
 
 .poppins-light {
@@ -9,14 +11,125 @@
   font-style: normal;
 }
 
+/* */
+input{
+  display: none;
+}
+.display{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* transition: 0.5s; */
+  /* background: white; */
+}
+label{
+  width: 50px;
+  height: 24px;
+  border-radius: 999px;
+  background: #f0a2a2;
+  box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
+  cursor: pointer;
+  position: relative;
+  /* transition: 0.5s; */
+}
+.circle_mode{
+  border: solid 1px rgb(249, 246, 246);
+  width: 20px;
+  height: 20px;
+  border-radius: 99px;
+  background: white;
+  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
+  -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  transform: translate(10%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: 0.5s;
+}
+.circle_mode svg{
+  width: 20px;
+  position: absolute;
+}
+.sun{
+  color: #FFD600;
+  margin-top: 0%;
+  opacity: 1;
+}
+.moon{
+  margin-top: -150%;
+  color: white;
+  opacity: 0;
+}
+
+
+/* input[type=checkbox]:checked + .display{
+  background: black;
+} */
+input[type=checkbox]:checked + .display label{
+  background: #70000f;
+  box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
+}
+input[type=checkbox]:checked + .display label .circle_mode{
+  border: solid 1px rgb(12, 12, 12);
+  left:100%;
+  transform: translate(-110%, -50%);
+  /* background: #2C2C2F; */
+  background: #c14e5ee8;
+  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
+  -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
+}
+input[type=checkbox]:checked + .display label .circle_mode .sun{
+  margin-top: 150%;
+  opacity: 0;
+}
+input[type=checkbox]:checked + .display label .circle_mode .moon{
+  margin-top: 0%;
+  opacity: 1;
+}
+label:active .circle_mode{
+  width: 50px;
+}
+/* */
 
 body {
   background-color: black;
 }
 
 .form-check{
-  margin-right:1rem ;
+  /* margin: 0 0 0 0;
+  padding: 0 0 0 0; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 0 0 10px;
+  margin-right:2rem ;
+
+  background-color: #f8f9fa;
+  /* color: black; */
+  border: none;
+  border-radius: 5px;
+  padding: 6px 10px;
+  transition: background-color 0.3s, color 0.3s;
 }
+
+/* #darkModeToggle {
+  display: flex;
+  align-items: center;
+  background-color: #f8f9fa;
+  color: black;
+  border: none;
+  border-radius: 5px;
+  padding: 8px 12px;
+  transition: background-color 0.3s, color 0.3s;
+} */
+
+
 .black{
   color: black;
 }

From 2a3151e54f9993481d6006d3550e7035e217ed98 Mon Sep 17 00:00:00 2001
From: Poushmita <poushmitap@gmail.com>
Date: Tue, 22 Oct 2024 15:53:45 +0530
Subject: [PATCH 3/7] final styling

---
 index.html | 38 ++++++++++++++++++--------------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 94a8c766..ebb4d854 100644
--- a/index.html
+++ b/index.html
@@ -436,24 +436,6 @@
     <!--Navbar Start-->
     <nav class="navbar navbar-expand-lg fixed-top" id="top">
         <div class="container-fluid">
-            <!-- Bootstrap 5 switch -->
-            <div class="form-check form-switch">
-                <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
-                <div class="display">
-                    <label class="form-check-label" for="darkModeSwitch">
-                        <div class="circle_mode">
-                            <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                                <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
-                            </svg>   
-                            <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                                <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
-                            </svg>                            
-                        </div>
-                    </label>
-                    <span></span>
-                </div>            
-                <script src="../script.js"></script> <!-- Link to your JavaScript -->
-            </div> 
             <a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher);">
                 <b>Retro</b>
                 <!-- color: black; -->
@@ -515,10 +497,26 @@
                 </div>           
 
                 </div>
-                
-
             </div>
         </div>
+        <!-- Bootstrap 5 switch -->
+        <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+            <div class="display">
+                <label class="form-check-label" for="darkModeSwitch">
+                    <div class="circle_mode">
+                        <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                        </svg>   
+                        <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                            <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                        </svg>                            
+                    </div>
+                </label>
+                <span></span>
+            </div>            
+            <script src="../script.js"></script> <!-- Link to your JavaScript -->
+        </div> 
     </nav>
 <style>
     .navbar {

From 4d4803051f9be6614d31aafabee9fdb711667c05 Mon Sep 17 00:00:00 2001
From: Poushmita <poushmitap@gmail.com>
Date: Tue, 22 Oct 2024 16:00:15 +0530
Subject: [PATCH 4/7] login page changed

---
 Html-files/login.html | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/Html-files/login.html b/Html-files/login.html
index 997a3217..93d2cb5a 100644
--- a/Html-files/login.html
+++ b/Html-files/login.html
@@ -519,26 +519,26 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</
           <p class="switch-link">Don’t have an account? <a href="signup.html">Sign Up</a></p>
         </div>
       </div>
+      <!-- Bootstrap 5 switch -->
+      <div class="form-check form-switch">
+        <input class="form-check-input input_button" type="checkbox" id="darkModeSwitch" checked>
+        <div class="display">
+            <label class="form-check-label label_button" for="darkModeSwitch">
+                <div class="circle_mode">
+                    <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                    </svg>   
+                    <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                    </svg>                            
+                </div>
+            </label>
+            <span></span>
+        </div>            
+        <script src="../script.js"></script> <!-- Link to your JavaScript -->
+        <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
+      </div>
     </form>
-    <!-- Bootstrap 5 switch -->
-    <div class="form-check form-switch">
-      <input class="form-check-input input_button" type="checkbox" id="darkModeSwitch" checked>
-      <div class="display">
-          <label class="form-check-label label_button" for="darkModeSwitch">
-              <div class="circle_mode">
-                  <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                      <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
-                  </svg>   
-                  <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                      <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
-                  </svg>                            
-              </div>
-          </label>
-          <span></span>
-      </div>            
-      <script src="../script.js"></script> <!-- Link to your JavaScript -->
-      <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
-    </div>
   </div>
 
   <script>

From c4053e33fe02de78cc4c4b50b51520e74f754b3f Mon Sep 17 00:00:00 2001
From: Poushmita <poushmitap@gmail.com>
Date: Mon, 4 Nov 2024 16:42:50 +0530
Subject: [PATCH 5/7] removed toggle button from two pages

---
 Css-files/login1.css   |   2 +-
 Css-files/signup1.css  |  28 +++---
 Html-files/login.html  | 196 ++++++++--------------------------------
 Html-files/signup.html | 198 ++---------------------------------------
 4 files changed, 52 insertions(+), 372 deletions(-)

diff --git a/Css-files/login1.css b/Css-files/login1.css
index e9ac84ef..e61f96e3 100644
--- a/Css-files/login1.css
+++ b/Css-files/login1.css
@@ -128,7 +128,7 @@ body {
 }
 
 .textfield > input {
-  width: 95%;
+  width: 100%;
   height: 45px;
   border-radius: 15px;
   border: 1px solid #b38484;
diff --git a/Css-files/signup1.css b/Css-files/signup1.css
index 26cc3fb6..c9b375e0 100644
--- a/Css-files/signup1.css
+++ b/Css-files/signup1.css
@@ -27,15 +27,11 @@ body {
 
 .main-login {
   display: flex;
-  .form-check{
-    /* justify-self: center; */
-    align-self: flex-start;
-  }
   justify-content: center;
   align-items: center;
   width: 100%;
   overflow: hidden; /* Ensure nothing overflows from the flexbox */
-  gap: 20px; /* Spacing between the card and image */
+  gap: 2rem; /* Spacing between the card and image */
   
 }
 .homebtn{
@@ -63,20 +59,16 @@ body {
 }
 
 .card-login {
-  width: calc(100% - 40px); /* Full width minus padding */
-  max-width: 400px; /* Max width for better layout */
-  padding: 30px;
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
-  background-color: var(--card-bg);
-  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
-  display: flex; /* Flex to stack elements */
-  flex-direction: column; /* Column layout for the card */
-  overflow: hidden; /* Added to ensure no content spills out */
-  border-radius: 50px;
-  align-items: center;
+  width: 60%;
+  display: flex;
   justify-content: center;
-  gap: 20px;
+  align-items: center;
+  flex-direction: column;
+  padding: 30px 35px;
+  border-radius: 20px;
+  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.15);
+  background: rgba(236, 236, 236, 0.8);
+  backdrop-filter: blur(10px);
 }
 
 .card-login:hover {
diff --git a/Html-files/login.html b/Html-files/login.html
index 93d2cb5a..034a7762 100644
--- a/Html-files/login.html
+++ b/Html-files/login.html
@@ -19,129 +19,36 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <style>
 
-
-
-       /*  */
-
-      #loginForm{
-        display: flex;
-        .form-check{
-          /* justify-self: start; */
-          align-self: flex-start;
-        }
-      }
-
-
         /* */
-        .input_button{
-          display: none;
-        }
-        .display{
-          width: 100%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          /* transition: 0.5s; */
-          /* background: white; */
-        }
-        .label_button{
-          width: 50px;
-          height: 24px;
-          border-radius: 999px;
-          background: #f0a2a2;
-          box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
-          cursor: pointer;
-          position: relative;
-          /* transition: 0.5s; */
-        }
-        .circle_mode{
-          border: solid 1px rgb(249, 246, 246);
-          width: 20px;
-          height: 20px;
-          border-radius: 99px;
-          background: white;
-          box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
-          -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
-          position: absolute;
-          top: 50%;
-          left: 0%;
-          transform: translate(10%, -50%);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          overflow: hidden;
-          transition: 0.5s;
-        }
-        .circle_mode svg{
-          width: 20px;
-          position: absolute;
-        }
-        .sun{
-          color: #FFD600;
-          margin-top: 0%;
-          opacity: 1;
-        }
-        .moon{
-          margin-top: -150%;
-          color: white;
-          opacity: 0;
-        }
 
-
-        /* input[type=checkbox]:checked + .display{
-          background: black;
-        } */
-        .input_button[type=checkbox]:checked + .display label{
-          background: #70000f;
-          box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
-        }
-        .input_button[type=checkbox]:checked + .display label .circle_mode{
-          border: solid 1px rgb(12, 12, 12);
-          left:100%;
-          transform: translate(-110%, -50%);
-          /* background: #2C2C2F; */
-          background: #c14e5ee8;
-          box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
-          -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
-        }
-        .input_button[type=checkbox]:checked + .display label .circle_mode .sun{
-          margin-top: 150%;
-          opacity: 0;
-        }
-        .input_button[type=checkbox]:checked + .display label .circle_mode .moon{
-          margin-top: 0%;
-          opacity: 1;
-        }
-        .label_button:active .circle_mode{
-          width: 50px;
-        }
         /* */
 
+    
+
 
 
 
-            /* body{
+            body{
                   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
                   background-size: cover;
                   background-attachment: fixed;
-                } */
-                .form-check{
+                }
+                /* .form-check{ */
                   /* margin: 0 0 0 0;
                   padding: 0 0 0 0; */
-                  display: inline-flex;
+                  /* display: inline-flex;
                   justify-content: center;
                   align-items: center;
                   margin: 10px 0 0 10px;
                   margin-right:2rem ;
 
-                  background-color: #f8f9fa;
+                  background-color: #f8f9fa; */
                   /* color: black; */
-                  border: none;
+                  /* border: none;
                   border-radius: 5px;
                   padding: 6px 10px;
                   transition: background-color 0.3s, color 0.3s;
-                }
+                } */
             /* section {
                 background-color: white;
                 color: black;
@@ -151,61 +58,7 @@
                 transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
             }
             
-            [data-bs-theme='light'] {
-                background-color: #ffffff; /* Light background */
-                color: #000000; /* Light text color */
-            }
             
-            [data-bs-theme='dark'] {
-                background-color: #000000; /* Dark background */
-                color: #ffffff; /* Light text color */
-            }
-            
-
-
-            [data-bs-theme='light'] body{
-              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-              background-size: cover;
-            }
-            /* for navbar */
-            [data-bs-theme='light'] .home-btn{
-                a{
-                  color: rgb(134, 78, 112);
-                }
-            }
-            [data-bs-theme='light'] .card{
-              background-color: transparent;
-            }
-            [data-bs-theme='light'] .card-login{
-              background: rgba(236, 236, 236, 0.8);
-            }
-  
-
-
-
-            [data-bs-theme='dark'] body{
-                /* background-color: rgb(53, 25, 25); */
-                background: linear-gradient(135deg, #985475, #483337); 
-                background-size: cover;
-                background-attachment: fixed;
-            }
-            /* for navbar */
-            [data-bs-theme='dark'] .home-btn{
-                a{
-                  color: #fde6e6;
-                }
-            }
-            [data-bs-theme='dark'] .card{
-              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-              background-size: cover;
-            }
-            [data-bs-theme='dark'] .card-login{
-              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-              background-size: cover;
-              span{
-                color: black;
-              }
-            }
             
            
             /*  */
@@ -232,6 +85,7 @@
       border-radius: 50%;
     }
     .container {
+      background: transparent;
       width: 350px;
       height: 500px;
       perspective: 800px;
@@ -244,6 +98,7 @@
       height: 100%;
       width: 100%;
       position: relative;
+      background: transparent;
       transition: transform 1500ms;
       transform-style: preserve-3d;
       border-radius: 40px;
@@ -479,6 +334,27 @@
     <!-- Circle elements -->
   </div>
   <div class="main-login">
+    <!-- <nav class="navbar"> -->
+      <!-- Bootstrap 5 switch -->
+      <!-- <div class="form-check form-switch">
+        <input class="form-check-input input_button" type="checkbox" id="darkModeSwitch" checked>
+        <div class="display">
+            <label class="form-check-label label_button" for="darkModeSwitch">
+                <div class="circle_mode">
+                    <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                    </svg>   
+                    <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                    </svg>                            
+                </div>
+            </label>
+            <span></span>
+        </div>            
+        <script src="../script.js"></script> 
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
+      </div> -->
+    <!-- </nav> -->
     <div class="left-login" style="background-color: transparent;">
       <div class="home-btn"><a href="../index.html" style="font-family: var(--ff-philosopher);"><b>Retro</b></a></div>
       <div class="container">
@@ -520,7 +396,7 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</
         </div>
       </div>
       <!-- Bootstrap 5 switch -->
-      <div class="form-check form-switch">
+      <!-- <div class="form-check form-switch">
         <input class="form-check-input input_button" type="checkbox" id="darkModeSwitch" checked>
         <div class="display">
             <label class="form-check-label label_button" for="darkModeSwitch">
@@ -535,9 +411,9 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</
             </label>
             <span></span>
         </div>            
-        <script src="../script.js"></script> <!-- Link to your JavaScript -->
-        <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
-      </div>
+        <script src="../script.js"></script> 
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
+      </div> -->
     </form>
   </div>
 
diff --git a/Html-files/signup.html b/Html-files/signup.html
index 31f34ca9..0d3eae77 100644
--- a/Html-files/signup.html
+++ b/Html-files/signup.html
@@ -19,184 +19,15 @@
         <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <style>
 
-       /*  */
 
-        /* */
-        .input_button{
-          display: none;
-        }
-        .display{
-          width: 100%;
-          height: 100%;
+      .right-login {
+          width: 50vw;
+          height: 100vh;
           display: flex;
-          align-items: center;
           justify-content: center;
-          /* transition: 0.5s; */
-          /* background: white; */
-        }
-        .label_button{
-          width: 50px;
-          height: 24px;
-          border-radius: 999px;
-          background: #f0a2a2;
-          box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
-          cursor: pointer;
-          position: relative;
-          /* transition: 0.5s; */
-        }
-        .circle_mode{
-          border: solid 1px rgb(249, 246, 246);
-          width: 20px;
-          height: 20px;
-          border-radius: 99px;
-          background: white;
-          box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
-          -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
-          position: absolute;
-          top: 50%;
-          left: 0%;
-          transform: translate(10%, -50%);
-          display: flex;
           align-items: center;
-          justify-content: center;
-          overflow: hidden;
-          transition: 0.5s;
-        }
-        .circle_mode svg{
-          width: 20px;
-          position: absolute;
-        }
-        .sun{
-          color: #FFD600;
-          margin-top: 0%;
-          opacity: 1;
-        }
-        .moon{
-          margin-top: -150%;
-          color: white;
-          opacity: 0;
-        }
-
-
-        /* input[type=checkbox]:checked + .display{
-          background: black;
-        } */
-        .input_button[type=checkbox]:checked + .display label{
-          background: #70000f;
-          box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
-        }
-        .input_button[type=checkbox]:checked + .display label .circle_mode{
-          border: solid 1px rgb(12, 12, 12);
-          left:100%;
-          transform: translate(-110%, -50%);
-          /* background: #2C2C2F; */
-          background: #c14e5ee8;
-          box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
-          -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
-        }
-        .input_button[type=checkbox]:checked + .display label .circle_mode .sun{
-          margin-top: 150%;
-          opacity: 0;
-        }
-        .input_button[type=checkbox]:checked + .display label .circle_mode .moon{
-          margin-top: 0%;
-          opacity: 1;
-        }
-        .label_button:active .circle_mode{
-          width: 50px;
-        }
-        /* */
-
-
-
-
-            /* body{
-                  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-                  background-size: cover;
-                  background-attachment: fixed;
-                } */
-                .form-check{
-                  /* margin: 0 0 0 0;
-                  padding: 0 0 0 0; */
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  margin: 3% 0 0 10px;
-                  margin-right:2rem ;
-
-                  background-color: #f8f9fa;
-                  /* color: black; */
-                  border: none;
-                  border-radius: 5px;
-                  padding: 6px 10px;
-                  transition: background-color 0.3s, color 0.3s;
-                }
-    
-            body {
-                transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
-            }
-            
-            [data-bs-theme='light'] {
-                background-color: #ffffff; /* Light background */
-                color: #000000; /* Light text color */
-            }
-            
-            [data-bs-theme='dark'] {
-                background-color: #000000; /* Dark background */
-                color: #ffffff; /* Light text color */
-            }
-            
-
-
-            [data-bs-theme='light'] body{
-              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-              background-size: cover;
-            }
-            /* for navbar */
-             [data-bs-theme='light'] .homebtn{
-                a{
-                  color: rgb(149, 15, 95);
-                }
-            } 
-            /* [data-bs-theme='light'] .card{
-              background-color: transparent;
-            } */ 
-            /* [data-bs-theme='light'] .card-login{
-              background: rgba(236, 236, 236, 0.8);
-            }*/
-   
-
-
-
-            [data-bs-theme='dark'] body{
-                /* background-color: rgb(53, 25, 25); */
-                background: linear-gradient(135deg, #985475, #483337); 
-                background-size: cover;
-                background-attachment: fixed;
-            }
-            /* for navbar */
-            [data-bs-theme='dark'] .homebtn{
-                a{
-                  color: #fde6e6;
-                }
-            }
-            [data-bs-theme='dark'] .box{
-              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-              background-size: cover;
-            }
-            [data-bs-theme='dark'] .card-login{
-              /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-              background-size: cover; */
-              span{
-                color: rgb(79, 77, 77);
-              }
-            }
-            
-           
-            /*  */
-
-
-
+          animation: fadeIn 2s ease-in-out;
+      }
 
 
 
@@ -449,25 +280,6 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">SIGN U
 
           <p class="switch-link">Already have an account? <a href="login.html">Login</a></p>
         </div>
-        <!-- Bootstrap 5 switch -->
-        <div class="form-check form-switch">
-          <input class="form-check-input input_button" type="checkbox" id="darkModeSwitch" checked>
-          <div class="display">
-              <label class="form-check-label label_button" for="darkModeSwitch">
-                  <div class="circle_mode">
-                      <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                          <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
-                      </svg>   
-                      <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                          <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
-                      </svg>                            
-                  </div>
-              </label>
-              <span></span>
-          </div>            
-          <script src="../script.js"></script> <!-- Link to your JavaScript -->
-          <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>  -->
-        </div>
     </div>
       <script>
         const coords = { x: 0, y: 0 };

From f88dcfc6d44b4b7d3e8e4bf90b1ac74fab435107 Mon Sep 17 00:00:00 2001
From: Poushmita <poushmitap@gmail.com>
Date: Mon, 4 Nov 2024 17:08:07 +0530
Subject: [PATCH 6/7] removed

---
 Css-files/login-register.css |  22 +-
 Html-files/signup.html       | 385 ++++++++++-------------------------
 2 files changed, 117 insertions(+), 290 deletions(-)

diff --git a/Css-files/login-register.css b/Css-files/login-register.css
index 007266c0..dcba9385 100644
--- a/Css-files/login-register.css
+++ b/Css-files/login-register.css
@@ -1,4 +1,3 @@
-
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
 
 body {
@@ -9,6 +8,8 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+  background-size: cover;
 }
 
 .main-login {
@@ -17,8 +18,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  /* gap: 0.2rem;  */
-  /* Add spacing between sections */
+  gap: 2rem; /* Add spacing between sections */
 }
 
 .left-login {
@@ -129,7 +129,7 @@ body {
 }
 
 .textfield > input {
-  width: 100%;
+  width: 95%;
   height: 45px;
   border-radius: 15px;
   border: 1px solid #b38484;
@@ -149,7 +149,7 @@ body {
   border-radius: 15px;
   border: none;
   margin: 10px;   /*Margin added so that they do not overlap*/
-  background-color: #aa6a6a;
+  background-color: #be367a;
   color: rgb(190, 135, 135);
   font-size: 16px;
   cursor: pointer;
@@ -158,7 +158,7 @@ body {
 
 .btn-login:hover,
 #google-login:hover {
-  background-color: #ac7070; /* Darker shade on hover */
+  background-color: #c3709a; /* Darker shade on hover */
   transform: translateY(-3px); /* Lift effect on hover */
 }
 
@@ -167,14 +167,6 @@ body {
   transform: translateY(1px); /* Slight press effect */
 }
 
-#google-login {
-  background-color: #ad6660; /* Google red color */
-}
-
-#google-login:hover {
-  background-color: #b8938f; /* Darker Google color on hover */
-}
-
 /* Accessibility: Adding focus styles for inputs and buttons */
 .textfield > input:focus {
   outline: 2px solid #a45b5b; /* Red outline for focused input */
@@ -189,4 +181,4 @@ body {
 .loading {
   pointer-events: none; /* Prevent interactions */
   opacity: 0.6; /* Slightly fade the button */
-}
+}
\ No newline at end of file
diff --git a/Html-files/signup.html b/Html-files/signup.html
index a3d90bd3..2d5f3674 100644
--- a/Html-files/signup.html
+++ b/Html-files/signup.html
@@ -2,187 +2,22 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sign up</title>
-    <script src="scriptsignup.js" defer type="module"></script>
-
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-
-    <link rel="stylesheet" href="../Css-files/signup1.css">
-    <link rel="shortcut icon" type="image/x-icon" href="../Favicon image/favicon-32x32.png">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <style>
-
-
-      .right-login {
-          width: 50vw;
-          height: 100vh;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          animation: fadeIn 2s ease-in-out;
-      }
-
-
-
-      @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
-      #sr {
-        display: none; 
-        position: fixed; 
-        bottom: 70px; 
-        right: 15px; 
-        z-index: 99; 
-        font-size: 18px;
-        border: none;
-        outline: none;
-        background-color: transparent; 
-        color: rgb(17, 17, 17); 
-        cursor: pointer; 
-        padding: 15px; 
-        border-radius: 4px; 
-      }
-
-      #sr:hover {
-        background-color: #333; 
-        border-radius: 100px;
-      }
-      .circle{
-        z-index: 998;
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        pointer-events: none;
-          animation: colors 5s infinite;
-          position: fixed;
-        transform: translate(-50%,-50%);
-      }
-      .circle::before {
-          content: "";
-          position: fixed;
-        width: 50px;
-        height: 50px;
-        opacity: 0.2;
-        transform: translate(-30%,-30%);
-        border-radius: 50%;
-      }
-        
-        :root{
-                    --ff-philosopher: "Philosopher", sans-serif;
-                    --ff-poppins: "Poppins", sans-serif;
-                }
-          </style>
-          <!--Tilted Text-->
-          <style>
-            .area{
-            width: 400px;
-            height: 400px;
-            position: relative;
-            display: flex;
-            flex-wrap: wrap;
-            perspective: 1000px;
-            transition: all 0.5s;
-            box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
-            border-radius: 10px;
-        }
-        .area:hover{
-            transform: scale(1.1);
-        }
-        .area .way{
-            width: 33.33%;
-            height: 33.33%;
-            z-index: 1;
-        }
-        .area .box{
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            background-color: transparent;
-            transform-style: preserve-3d;
-            transition: all 0.5s ease-out;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 10px;
-        }
-        .area .box::before{
-            content: '';
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            transform: translateZ(-80px);
-            background-color: transparent;
-            filter: blur(10px);
-        }
-        .area .box span{
-            width: 80%;
-            text-align: center;
-            font-family: var(--ff-philosopher);
-            font-weight: 500;
-            font-size: 50px;
-            color: hsl(357, 82%,35%);
-            transform-style: preserve-3d;
-            transform: translateZ(50px);
-        }
-        .area .box span::before{
-            content: 'Retro Vibe is Good Vibe';
-            top: 0px;
-            left: 0px;
-            position: absolute;
-            color: transparent;
-            text-shadow: 0px 0px 2px rgb(90, 90, 90), 0px 0px 5px gray;
-            transform: translateZ(-40px);
-        }
-        .error-message {
-                    color: red;
-                    font-size: 0.9em;
-                }
-                .textfield {
-                    margin-bottom: 15px;
-                }
-                /* Tooltip styling */
-                .tooltip {
-                    position: relative;
-                    display: inline-block;
-                }
-                .tooltip .tooltiptext {
-                    visibility: hidden;
-                    width: 200px;
-                    background-color: #555;
-                    color: #fff;
-                    text-align: center;
-                    border-radius: 5px;
-                    padding: 5px;
-                    position: absolute;
-                    z-index: 1;
-                    bottom: 125%; /* Position above the input field */
-                    left: 50%;
-                    margin-left: -100px; /* Center the tooltip */
-                    opacity: 0;
-                    transition: opacity 0.3s;
-                }
-                .tooltip:hover .tooltiptext {
-                    visibility: visible;
-                    opacity: 1;
-                }
-                .area .way:nth-child(1):hover ~ .box{transform: rotateX(-20deg) rotateY(20deg);}
-                .area .way:nth-child(2):hover ~ .box{transform: rotateX(-20deg) rotateY(0deg);}
-                .area .way:nth-child(3):hover ~ .box{transform: rotateX(-20deg) rotateY(-20deg);}
-
-                .area .way:nth-child(4):hover ~ .box{transform: rotateX(0deg) rotateY(20deg);}
-                .area .way:nth-child(5):hover ~ .box{transform: rotateX(0deg) rotateY(0deg);}
-                .area .way:nth-child(6):hover ~ .box{transform: rotateX(0deg) rotateY(-20deg);}
-
-                .area .way:nth-child(7):hover ~ .box{transform: rotateX(20deg) rotateY(20deg);}
-                .area .way:nth-child(8):hover ~ .box{transform: rotateX(20deg) rotateY(0deg);}
-                .area .way:nth-child(9):hover ~ .box{transform: rotateX(20deg) rotateY(-20deg);}
-          </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sign up</title>
+  <script src="scriptsignup.js" defer type="module"></script>
+  <link rel="stylesheet" href="../Css-files/login-register.css">
+  <link rel="shortcut icon" type="image/x-icon" href="../Favicon image/favicon-32x32.png">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+    rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@@ -351,7 +186,6 @@
     .area .way:nth-child(9):hover~.box {
       transform: rotateX(20deg) rotateY(-20deg);
     }
-
   </style>
   <style>
     /* Styles for the switch link */
@@ -409,6 +243,7 @@
     <div class="circle" style="background-color: rgb(104, 0, 96); left: 504px; top: 59px; scale: 0.1;"></div>
     <div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
   </div>
+
   <div class="main-login">
     <div class="home-btn">
       <a href="../index.html" style="font-family: var(--ff-philosopher); color: rgb(149, 15, 95);"><b>Retro</b></a>
@@ -463,100 +298,100 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">SIGN UP
           <p class="switch-link">Already have an account ? <a href="login.html">Login</a></p>
         </div>
       </div>
-      <script>
-        const coords = { x: 0, y: 0 };
-        const circles = document.querySelectorAll(".circle");
-    
-        const colors = [
-          "#ffb56b",
-          "#fdaf69",
-          "#f89d63",
-          "#f59761",
-          "#ef865e",
-          "#ec805d",
-          "#e36e5c",
-          "#df685c",
-          "#d5585c",
-          "#d1525c",
-          "#c5415d",
-          "#c03b5d",
-          "#b22c5e",
-          "#ac265e",
-          "#9c155f",
-          "#950f5f",
-          "#830060",
-          "#7c0060",
-          "#680060",
-          "#60005f",
-          "#48005f",
-          "#3d005e"
-        ];
-    
-        circles.forEach(function (circle, index) {
-          circle.x = 0;
-          circle.y = 0;
-          circle.style.backgroundColor = colors[index % colors.length];
-        });
-    
-        window.addEventListener("mousemove", function (e) {
-          coords.x = e.clientX;
-          coords.y = e.clientY;
-    
-        });
-    
-        function animateCircles() {
-    
-          let x = coords.x;
-          let y = coords.y;
-    
-          circles.forEach(function (circle, index) {
-            circle.style.left = x - 12 + "px";
-            circle.style.top = y - 12 + "px";
-    
-            circle.style.scale = (circles.length - index) / circles.length;
-    
-            circle.x = x;
-            circle.y = y;
-    
-            const nextCircle = circles[index + 1] || circles[0];
-            x += (nextCircle.x - x) * 0.3;
-            y += (nextCircle.y - y) * 0.3;
-          });
-    
-          requestAnimationFrame(animateCircles);
-        }
-    
-        animateCircles();
-      </script>
-      <script>
-        window.embeddedChatbotConfig = {
-        chatbotId: "dGlQ5bP-F7GodLWzgrVAx",
-        domain: "www.chatbase.co"
-        }
-        </script>
-        <script
-        src="https://www.chatbase.co/embed.min.js"
-        chatbotId="dGlQ5bP-F7GodLWzgrVAx"
-        domain="www.chatbase.co"
-        defer>
-        </script>
-        <script>
-          // JavaScript to toggle password visibility
-          const passwordField = document.getElementById('password');
-          const showPasswordCheckbox = document.getElementById('showPassword');
-      
-          showPasswordCheckbox.addEventListener('change', () => {
-              if (showPasswordCheckbox.checked) {
-                  passwordField.type = 'text';  // Show password
-              } else {
-                  passwordField.type = 'password';  // Hide password
-              }
-          });
-      </script>
-    <div class="gtranslate_wrapper"></div>
-    <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
-    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+    </form>
+  </div>
+  <script>
+    const coords = { x: 0, y: 0 };
+    const circles = document.querySelectorAll(".circle");
+
+    const colors = [
+      "#ffb56b",
+      "#fdaf69",
+      "#f89d63",
+      "#f59761",
+      "#ef865e",
+      "#ec805d",
+      "#e36e5c",
+      "#df685c",
+      "#d5585c",
+      "#d1525c",
+      "#c5415d",
+      "#c03b5d",
+      "#b22c5e",
+      "#ac265e",
+      "#9c155f",
+      "#950f5f",
+      "#830060",
+      "#7c0060",
+      "#680060",
+      "#60005f",
+      "#48005f",
+      "#3d005e"
+    ];
+
+    circles.forEach(function (circle, index) {
+      circle.x = 0;
+      circle.y = 0;
+      circle.style.backgroundColor = colors[index % colors.length];
+    });
+
+    window.addEventListener("mousemove", function (e) {
+      coords.x = e.clientX;
+      coords.y = e.clientY;
+
+    });
+
+    function animateCircles() {
+
+      let x = coords.x;
+      let y = coords.y;
+
+      circles.forEach(function (circle, index) {
+        circle.style.left = x - 12 + "px";
+        circle.style.top = y - 12 + "px";
+
+        circle.style.scale = (circles.length - index) / circles.length;
+
+        circle.x = x;
+        circle.y = y;
+
+        const nextCircle = circles[index + 1] || circles[0];
+        x += (nextCircle.x - x) * 0.3;
+        y += (nextCircle.y - y) * 0.3;
+      });
+
+      requestAnimationFrame(animateCircles);
+    }
 
+    animateCircles();
+  </script>
+  <script>
+    window.embeddedChatbotConfig = {
+      chatbotId: "dGlQ5bP-F7GodLWzgrVAx",
+      domain: "www.chatbase.co"
+    }
+  </script>
+  <script src="https://www.chatbase.co/embed.min.js" chatbotId="dGlQ5bP-F7GodLWzgrVAx" domain="www.chatbase.co" defer>
+  </script>
+  <script>
+    // JavaScript to toggle password visibility
+    function togglePasswordVisibility() {
+      const passwordField = document.getElementById('password');
+      const toggleIcon = document.getElementById('togglePasswordIcon');
+      if (passwordField.type === 'password') {
+        passwordField.type = 'text';
+        toggleIcon.classList.remove('fa-eye');
+        toggleIcon.classList.add('fa-eye-slash');
+      } else {
+        passwordField.type = 'password';
+        toggleIcon.classList.remove('fa-eye-slash');
+        toggleIcon.classList.add('fa-eye');
+      }
+    }
+  </script>
+  <div class="gtranslate_wrapper"></div>
+  <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
+  <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 </body>
 
 </html>
\ No newline at end of file

From 06c73ef05a312d9a2585e6ce706542175f08c9b7 Mon Sep 17 00:00:00 2001
From: Poushmita <poushmitap@gmail.com>
Date: Thu, 21 Nov 2024 16:53:05 +0530
Subject: [PATCH 7/7] alignment of Dark Mode Button

---
 Css-files/login-register.css |   8 +-
 Html-files/login.html        | 330 ++++++++++++++++++++++++++++-------
 Html-files/services.html     |   2 +-
 Html-files/signup.html       | 281 +++++++++++++++++++++++++++++
 4 files changed, 556 insertions(+), 65 deletions(-)

diff --git a/Css-files/login-register.css b/Css-files/login-register.css
index dcba9385..cb20ba2a 100644
--- a/Css-files/login-register.css
+++ b/Css-files/login-register.css
@@ -1,5 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
 
+*{
+  box-sizing: content-box;
+}
+
 body {
   margin: 0;
   font-family: 'Noto Sans', sans-serif;
@@ -18,7 +22,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 2rem; /* Add spacing between sections */
+  gap: 1rem; /* Add spacing between sections */
 }
 
 .left-login {
@@ -29,6 +33,7 @@ body {
   align-items: center;
   flex-direction: column;
   position: relative;
+  z-index: 1000;
 }
 
 .home-btn {
@@ -91,6 +96,7 @@ body {
   justify-content: center;
   align-items:  center;
   animation: fadeIn 2s ease-in-out;
+  z-index: 1000;
 }
 
 @keyframes fadeIn {
diff --git a/Html-files/login.html b/Html-files/login.html
index 0d36877e..5f8a9ffd 100644
--- a/Html-files/login.html
+++ b/Html-files/login.html
@@ -24,10 +24,146 @@
   <style>
 
         /* */
+            .form-check-input{
+                display: none;
+            }
+            .display{
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: 0.5s;
+            /* background: white; */
+            }
+            .form-check-label{
+            width: 50px;
+            height: 24px;
+            border-radius: 999px;
+            background: #f0a2a2;
+            box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
+            cursor: pointer;
+            position: relative;
+            transition: 0.5s;
+            }
+            .circle_mode{
+            border: solid 1px rgb(249, 246, 246);
+            width: 20px;
+            height: 20px;
+            border-radius: 99px;
+            background: white;
+            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
+            -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
+            position: absolute;
+            top: 50%;
+            left: 0%;
+            transform: translate(10%, -50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            transition: 0.5s;
+            }
+            .circle_mode svg{
+            width: 20px;
+            position: absolute;
+            }
+            .sun{
+            color: #FFD600;
+            margin-top: 0%;
+            opacity: 1;
+            }
+            .moon{
+            margin-top: -150%;
+            color: white;
+            opacity: 0;
+            }
+
 
+            /* input[type=checkbox]:checked + .display{
+            background: black;
+            } */
+            .form-check-input[type=checkbox]:checked + .display .form-check-label{
+            background: #70000f;
+            box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
+            }
+            .form-check-input[type=checkbox]:checked + .display .form-check-label .circle_mode{
+            border: solid 1px rgb(12, 12, 12);
+            left:100%;
+            transform: translate(-110%, -50%);
+            /* background: #2C2C2F; */
+            background: #c14e5ee8;
+            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
+            -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
+            }
+            .form-check-input[type=checkbox]:checked + .display .form-check-label .circle_mode .sun{
+            margin-top: 150%;
+            opacity: 0;
+            }
+            .form-check-input[type=checkbox]:checked + .display .form-check-label .circle_mode .moon{
+            margin-top: 0%;
+            opacity: 1;
+            }
+            .form-check-label:active .circle_mode{
+            width: 50px;
+            }
+        
         /* */
 
-    
+
+      /* Navbar Styling */
+      .navbar {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 60px;
+        background-color: transparent; 
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 20px;
+        /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
+        /* z-index: 1000; */
+      }
+
+
+
+            .form-check{
+               /* margin: 0 0 0 0;
+                padding: 0 0 0 0; */
+                display: flex;
+                /* justify-content: center; */
+                align-items: center;
+                margin: 0 0 0 10px;
+                margin-right:2rem ;
+                position: fixed; 
+                right: 0;
+
+                background-color: #f8f9fa;
+                /* color: black; */
+                border: none;
+                border-radius: 5px;
+                padding: 6px 10px;
+                transition: background-color 0.3s, color 0.3s;
+                /* margin: 0 0 0 0;
+                padding: 0 0 0 0; */
+                /* display: flex;
+                align-items: center;
+                margin: 0 0 0 10px;
+                margin-right:2rem ;
+                width: 60px;
+                height: 40px;
+                position: absolute; 
+                right: 0;
+                top: 20px; 
+                background-color: #f8f9fa;
+                /* color: black; */
+                /* border: none;
+                border-radius: 5px;
+                padding: 6px 10px;
+                transition: background-color 0.3s, color 0.3s;  */
+            }
+            
 
 
 
@@ -37,33 +173,121 @@
                   background-size: cover;
                   background-attachment: fixed;
                 }
-                /* .form-check{ */
-                  /* margin: 0 0 0 0;
-                  padding: 0 0 0 0; */
-                  /* display: inline-flex;
-                  justify-content: center;
-                  align-items: center;
-                  margin: 10px 0 0 10px;
-                  margin-right:2rem ;
-
-                  background-color: #f8f9fa; */
-                  /* color: black; */
-                  /* border: none;
-                  border-radius: 5px;
-                  padding: 6px 10px;
-                  transition: background-color 0.3s, color 0.3s;
-                } */
-            /* section {
-                background-color: white;
-                color: black;
-            } */
-    
             body {
                 transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
             }
+            .left-login{
+              background-color: transparent;
+            }
+            #loginForm{
+              background-color: transparent;
+            }
+            
+            
+            /* */
+            [data-bs-theme='light'] {
+                background-color: #ffffff; /* Light background */
+                color: #000000; /* Light text color */
+            }
+            
+            [data-bs-theme='dark'] {
+                background-color: #000000; /* Dark background */
+                color: #ffffff; /* Light text color */
+            }
+            
+            
+
+            [data-bs-theme='light'] body{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                background-size: cover;
+            }
+            /* for navbar */
+            [data-bs-theme='light'] .navbar{
+                /* background-color: hsl(20, 43%, 93%); */
+                a{
+                    color: #000000;
+                }
+            
+            }
+            [data-bs-theme='light'] .main-login{
+                background-color: transparent;
+            }
+            [data-bs-theme='light'] .left-login{
+                background-color:transparent ;
+                a{
+                    color: #000000;
+                }
+            
+            }
+            [data-bs-theme='light'] #loginForm{
+                background-color: transparent;
+                a{
+                    color: #000000;
+                }
             
+            }
+  
+
+          
+
+
+
+            [data-bs-theme='dark'] body{
+              background: linear-gradient(to right,#812553 , #5a1f3c);
+                /* background-color: transparent; */
+            }
+            /* for navbar */
+            [data-bs-theme='dark'] .navbar{
+                background-color: transparent;
+                color: #ffffff;
+                a{
+                    color: #ffffff;
+                }
+            }
+            [data-bs-theme='dark'] .main-login{
+                background-color: transparent;
+            }
+            [data-bs-theme='dark'] .left-login{
+                background-color:transparent ;
+                a{
+                    color: #000000;
+                }
+            }
+            [data-bs-theme='dark'] .card{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                background-size: cover;
+            }
+            .home-btn{
+              b{
+                color: #f0a2a2;
+              }
+            }
+
+            [data-bs-theme='dark'] #loginForm{
+              background-color: transparent;
+                a{
+                    color: #000000;
+                }
+                span{
+                  color: black;
+                }
             
+            }
+            [data-bs-theme='dark'] .card-login{
+              box-shadow: 5px 20px 40px rgba(0, 0, 0, 0.15);
+              background: rgb(247, 247, 247);
+              input{
+                background-color: #f6dcdc;
+                /* background-color: rgb(255, 209, 234); */
+              }
+            }
+  
             
+            /* */
+
+
+
+
            
             /*  */
 
@@ -356,29 +580,28 @@
   <div class="circle-container">
     <!-- Circle elements -->
   </div>
+  <!-- Navbar -->
+  <nav class="navbar">
+    <!-- Bootstrap 5 switch -->
+    <div class="form-check form-switch">
+      <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+      <div class="display">
+        <label class="form-check-label" for="darkModeSwitch">
+            <div class="circle_mode">
+                <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                </svg>   
+                <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                    <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                </svg>                            
+            </div>
+        </label>
+      </div>            
+      <script src="../script.js"></script> 
+    </div> 
+  </nav>
   <div class="main-login">
-    <!-- <nav class="navbar"> -->
-      <!-- Bootstrap 5 switch -->
-      <!-- <div class="form-check form-switch">
-        <input class="form-check-input input_button" type="checkbox" id="darkModeSwitch" checked>
-        <div class="display">
-            <label class="form-check-label label_button" for="darkModeSwitch">
-                <div class="circle_mode">
-                    <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
-                    </svg>   
-                    <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                        <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
-                    </svg>                            
-                </div>
-            </label>
-            <span></span>
-        </div>            
-        <script src="../script.js"></script> 
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
-      </div> -->
-    <!-- </nav> -->
-    <div class="left-login" style="background-color: transparent;">
+    <div class="left-login" >
       <div class="home-btn"><a href="../index.html" style="font-family: var(--ff-philosopher);"><b>Retro</b></a></div>
       <div class="container">
         <div class="card">
@@ -424,25 +647,6 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</
           <p class="switch-link">Don’t have an account? <a href="signup.html">Sign Up</a></p>
         </div>
       </div>
-      <!-- Bootstrap 5 switch -->
-      <!-- <div class="form-check form-switch">
-        <input class="form-check-input input_button" type="checkbox" id="darkModeSwitch" checked>
-        <div class="display">
-            <label class="form-check-label label_button" for="darkModeSwitch">
-                <div class="circle_mode">
-                    <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
-                    </svg>   
-                    <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                        <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
-                    </svg>                            
-                </div>
-            </label>
-            <span></span>
-        </div>            
-        <script src="../script.js"></script> 
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> 
-      </div> -->
     </form>
   </div>
 
diff --git a/Html-files/services.html b/Html-files/services.html
index e4eca13c..1cb75bec 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -139,7 +139,7 @@
                 /* margin: 0 0 0 0;
                 padding: 0 0 0 0; */
                 display: flex;
-                justify-content: center;
+                /* justify-content: center; */
                 align-items: center;
                 margin: 0 0 0 10px;
                 margin-right:2rem ;
diff --git a/Html-files/signup.html b/Html-files/signup.html
index 2d5f3674..20011d7e 100644
--- a/Html-files/signup.html
+++ b/Html-files/signup.html
@@ -6,6 +6,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sign up</title>
   <script src="scriptsignup.js" defer type="module"></script>
+
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
   <link rel="stylesheet" href="../Css-files/login-register.css">
   <link rel="shortcut icon" type="image/x-icon" href="../Favicon image/favicon-32x32.png">
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -20,6 +23,264 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
   <style>
+
+     /* */
+            .form-check-input{
+                display: none;
+            }
+            .display{
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: 0.5s;
+            /* background: white; */
+            }
+            .form-check-label{
+            width: 50px;
+            height: 24px;
+            border-radius: 999px;
+            background: #f0a2a2;
+            box-shadow: 10px 10px 30px rgba(241, 102, 158, 0.916) inset;
+            cursor: pointer;
+            position: relative;
+            transition: 0.5s;
+            }
+            .circle_mode{
+            border: solid 1px rgb(249, 246, 246);
+            width: 20px;
+            height: 20px;
+            border-radius: 99px;
+            background: white;
+            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05),
+            -20px -20px 30px rgba(0, 0, 0, 0.05) inset;
+            position: absolute;
+            top: 50%;
+            left: 0%;
+            transform: translate(10%, -50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            transition: 0.5s;
+            }
+            .circle_mode svg{
+            width: 20px;
+            position: absolute;
+            }
+            .sun{
+            color: #FFD600;
+            margin-top: 0%;
+            opacity: 1;
+            }
+            .moon{
+            margin-top: -150%;
+            color: white;
+            opacity: 0;
+            }
+
+
+            /* input[type=checkbox]:checked + .display{
+            background: black;
+            } */
+            .form-check-input[type=checkbox]:checked + .display .form-check-label{
+            background: #70000f;
+            box-shadow: 10px 10px 30px rgba(233, 117, 130, 0.957) inset;
+            }
+            .form-check-input[type=checkbox]:checked + .display .form-check-label .circle_mode{
+            border: solid 1px rgb(12, 12, 12);
+            left:100%;
+            transform: translate(-110%, -50%);
+            /* background: #2C2C2F; */
+            background: #c14e5ee8;
+            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
+            -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
+            }
+            .form-check-input[type=checkbox]:checked + .display .form-check-label .circle_mode .sun{
+            margin-top: 150%;
+            opacity: 0;
+            }
+            .form-check-input[type=checkbox]:checked + .display .form-check-label .circle_mode .moon{
+            margin-top: 0%;
+            opacity: 1;
+            }
+            .form-check-label:active .circle_mode{
+            width: 50px;
+            }
+        
+        /* */
+
+
+      /* Navbar Styling */
+      .navbar {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 60px;
+        background-color: transparent; 
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 20px;
+        /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
+        /* z-index: 1000; */
+      }
+
+
+
+            .form-check{
+               /* margin: 0 0 0 0;
+                padding: 0 0 0 0; */
+                display: flex;
+                /* justify-content: center; */
+                align-items: center;
+                margin: 0 0 0 10px;
+                margin-right:0.5rem ;
+                position: fixed; 
+                right: 0;
+
+                background-color: #f8f9fa;
+                /* color: black; */
+                border: none;
+                border-radius: 5px;
+                padding: 6px 10px;
+                transition: background-color 0.3s, color 0.3s;
+            }
+            
+
+
+
+
+            body{
+                  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                  background-size: cover;
+                  background-attachment: fixed;
+                }
+            body {
+                transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+            }
+            .left-login{
+              background-color: transparent;
+            }
+            #loginForm{
+              background-color: transparent;
+            }
+            
+            
+            /* */
+            [data-bs-theme='light'] {
+                background-color: #ffffff; /* Light background */
+                color: #000000; /* Light text color */
+            }
+            
+            [data-bs-theme='dark'] {
+                background-color: #000000; /* Dark background */
+                color: #ffffff; /* Light text color */
+            }
+            
+            
+
+            [data-bs-theme='light'] body{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                background-size: cover;
+            }
+            /* for navbar */
+            [data-bs-theme='light'] .navbar{
+                /* background-color: hsl(20, 43%, 93%); */
+                a{
+                    color: #000000;
+                }
+            
+            }
+            [data-bs-theme='light'] .main-login{
+                background-color: transparent;
+            }
+            [data-bs-theme='light'] .left-login{
+                background-color:transparent ;
+                a{
+                    color: #000000;
+                }
+            
+            }
+            [data-bs-theme='light'] #loginForm{
+                background-color: transparent;
+                a{
+                    color: #000000;
+                }
+            
+            }
+  
+
+          
+
+
+
+            [data-bs-theme='dark'] body{
+              background: linear-gradient(to right,#812553 , #5a1f3c);
+                /* background-color: transparent; */
+            }
+            /* for navbar */
+            [data-bs-theme='dark'] .navbar{
+                background-color: transparent;
+                color: #ffffff;
+                a{
+                    color: #ffffff;
+                }
+            }
+            [data-bs-theme='dark'] .main-login{
+                background-color: transparent;
+            }
+            [data-bs-theme='dark'] .left-login{
+                background-color:transparent ;
+                a{
+                    color: #000000;
+                }
+            }
+            [data-bs-theme='dark'] .area{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+                background-size: cover;
+            }
+            .home-btn{
+              b{
+                color: #f0a2a2;
+              }
+            }
+
+            [data-bs-theme='dark'] #loginForm{
+              background-color: transparent;
+                a{
+                    color: #000000;
+                }
+                span{
+                  color: black;
+                }
+            
+            }
+            [data-bs-theme='dark'] .card-login{
+              box-shadow: 5px 20px 40px rgba(0, 0, 0, 0.15);
+              background: rgb(247, 247, 247);
+              input{
+                background-color: #f6dcdc;
+                /* background-color: rgb(255, 209, 234); */
+              }
+            }
+  
+            
+            /* */
+
+
+
+
+           
+            /*  */
+
+
+
+
+
+
+
     @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
     .circle {
@@ -244,6 +505,26 @@
     <div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
   </div>
 
+  <!-- Navbar -->
+  <nav class="navbar">
+    <!-- Bootstrap 5 switch -->
+    <div class="form-check form-switch">
+      <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
+      <div class="display">
+        <label class="form-check-label" for="darkModeSwitch">
+          <div class="circle_mode">
+              <svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+              </svg>   
+              <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                  <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+              </svg>                            
+          </div>
+        </label>
+      </div>            
+      <script src="../script.js"></script> 
+    </div> 
+  </nav>
   <div class="main-login">
     <div class="home-btn">
       <a href="../index.html" style="font-family: var(--ff-philosopher); color: rgb(149, 15, 95);"><b>Retro</b></a>