diff --git a/Css-files/content.css b/Css-files/content.css
index 4b2a42e..90effa7 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/login-register.css b/Css-files/login-register.css
index dd8344e..cb20ba2 100644
--- a/Css-files/login-register.css
+++ b/Css-files/login-register.css
@@ -1,184 +1,190 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
-
-body {
-  margin: 0;
-  font-family: 'Noto Sans', sans-serif;
-  overflow: hidden;
-  display: flex;
-  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 {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2rem; /* Add spacing between sections */
-}
-
-.left-login {
-  width: 50vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  position: relative;
-}
-
-.home-btn {
-  position: absolute;
-  top: 32px;
-  left: 30px;
-}
-
-.home-btn a {
-  font-size: 30px;
-  text-decoration: none;
-  color: rgb(134, 78, 112);
-  position: relative;
-  transition: color 0.3s ease; /* Smooth color transition */
-}
-
-.home-btn a:hover {
-  color: rgb(141, 108, 108); /* Darken color on hover */
-}
-
-.home-btn a::after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 1.5px;
-  bottom: -5px;
-  left: 0;
-  background-color: transparent;
-  transition: background-color 0.3s ease; /* Smooth transition */
-}
-
-.home-btn a:hover::after {
-  background-color: rgb(141, 108, 108);
-}
-
-.left-login > h1 {
-  color: #e13838;
-  font-size: 2.5vw;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Soft text shadow */
-}
-
-.left-login-image {
-  width: 40vw;
-  animation: float 6s ease-in-out infinite;
-}
-
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-}
-
-.right-login {
-  width: 50vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items:  center;
-  animation: fadeIn 2s ease-in-out;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.card-login {
-  width: 60%;
-  display: flex;
-  justify-content: center;
-  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); /* Soft background blur effect */
-}
-
-.card-login > h1 {
-  color: #de6c6c;
-  font-size: 2.2vw;
-  margin-bottom: 20px;
-}
-
-.textfield {
-  width: 100%;
-  margin-bottom: 15px;
-}
-
-.textfield > input {
-  width: 95%;
-  height: 45px;
-  border-radius: 15px;
-  border: 1px solid #b38484;
-  padding-left: 10px;
-  outline: none;
-  transition: border 0.3s ease; /* Smooth border transition */
-}
-
-.textfield > input:focus {
-  border: 2px solid #a76666; /* Highlight border on focus */
-}
-
-.btn-login,
-#google-login {
-  width: 100%;
-  height: 45px;
-  border-radius: 15px;
-  border: none;
-  margin: 10px;   /*Margin added so that they do not overlap*/
-  background-color: #be367a;
-  color: rgb(190, 135, 135);
-  font-size: 16px;
-  cursor: pointer;
-  transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions for hover and active states */
-}
-
-.btn-login:hover,
-#google-login:hover {
-  background-color: #c3709a; /* Darker shade on hover */
-  transform: translateY(-3px); /* Lift effect on hover */
-}
-
-.btn-login:active,
-#google-login:active {
-  transform: translateY(1px); /* Slight press effect */
-}
-
-/* Accessibility: Adding focus styles for inputs and buttons */
-.textfield > input:focus {
-  outline: 2px solid #a45b5b; /* Red outline for focused input */
-}
-
-.btn-login:focus,
-#google-login:focus {
-  outline: 2px solid #bc8a8a; /* Red outline for focused button */
-}
-
-/* Loading state for buttons */
-.loading {
-  pointer-events: none; /* Prevent interactions */
-  opacity: 0.6; /* Slightly fade the button */
-}
+@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;
+  overflow: hidden;
+  display: flex;
+  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 {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem; /* Add spacing between sections */
+}
+
+.left-login {
+  width: 50vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  z-index: 1000;
+}
+
+.home-btn {
+  position: absolute;
+  top: 32px;
+  left: 30px;
+}
+
+.home-btn a {
+  font-size: 30px;
+  text-decoration: none;
+  color: rgb(134, 78, 112);
+  position: relative;
+  transition: color 0.3s ease; /* Smooth color transition */
+}
+
+.home-btn a:hover {
+  color: rgb(141, 108, 108); /* Darken color on hover */
+}
+
+.home-btn a::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 1.5px;
+  bottom: -5px;
+  left: 0;
+  background-color: transparent;
+  transition: background-color 0.3s ease; /* Smooth transition */
+}
+
+.home-btn a:hover::after {
+  background-color: rgb(141, 108, 108);
+}
+
+.left-login > h1 {
+  color: #e13838;
+  font-size: 2.5vw;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Soft text shadow */
+}
+
+.left-login-image {
+  width: 40vw;
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.right-login {
+  width: 50vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items:  center;
+  animation: fadeIn 2s ease-in-out;
+  z-index: 1000;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.card-login {
+  width: 60%;
+  display: flex;
+  justify-content: center;
+  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); /* Soft background blur effect */
+}
+
+.card-login > h1 {
+  color: #de6c6c;
+  font-size: 2.2vw;
+  margin-bottom: 20px;
+}
+
+.textfield {
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+.textfield > input {
+  width: 95%;
+  height: 45px;
+  border-radius: 15px;
+  border: 1px solid #b38484;
+  padding-left: 10px;
+  outline: none;
+  transition: border 0.3s ease; /* Smooth border transition */
+}
+
+.textfield > input:focus {
+  border: 2px solid #a76666; /* Highlight border on focus */
+}
+
+.btn-login,
+#google-login {
+  width: 100%;
+  height: 45px;
+  border-radius: 15px;
+  border: none;
+  margin: 10px;   /*Margin added so that they do not overlap*/
+  background-color: #be367a;
+  color: rgb(190, 135, 135);
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions for hover and active states */
+}
+
+.btn-login:hover,
+#google-login:hover {
+  background-color: #c3709a; /* Darker shade on hover */
+  transform: translateY(-3px); /* Lift effect on hover */
+}
+
+.btn-login:active,
+#google-login:active {
+  transform: translateY(1px); /* Slight press effect */
+}
+
+/* Accessibility: Adding focus styles for inputs and buttons */
+.textfield > input:focus {
+  outline: 2px solid #a45b5b; /* Red outline for focused input */
+}
+
+.btn-login:focus,
+#google-login:focus {
+  outline: 2px solid #bc8a8a; /* Red outline for focused button */
+}
+
+/* Loading state for buttons */
+.loading {
+  pointer-events: none; /* Prevent interactions */
+  opacity: 0.6; /* Slightly fade the button */
+}
\ No newline at end of file
diff --git a/Html-files/about.html b/Html-files/about.html
index 79e09c0..1054308 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,785 @@
     <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>
+
+    /*  */
+
+    /* */
+    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: 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 */
+    }
+    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;
+      }
     }
-    100% {
+
+    [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;
+    }
+    .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_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;
-}
+    .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: #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 +840,232 @@
       <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">
+            <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>
-      -->
-        </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>
+          <!-- 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>
+
+        <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>
 
-    </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 e02cfc7..badf1b0 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,369 @@
     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 */
-}
-
-
-/* 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);
-    }
-
-      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; 
-}
+     /*  */
+
+        /* */
+        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: 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;
+                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
+                }
+            } */
+            /*  */
+
+
+
+
+
+
+
+
+
+
+
+    /*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 */
+    }
+
+
+    /* 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);
+        }
+
+        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 +421,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;
@@ -371,7 +635,8 @@
     <header>
       <nav class="navbar navbar-expand-lg fixed-top">
         <div class="container-fluid">
-          <a class="navbar-brand" href="../index.html" style="color: black;">
+          <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"
@@ -381,33 +646,53 @@
           <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>
             </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>
   <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>
 
@@ -456,8 +741,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="font-family: var(--ff-poppins);">Home</a>
@@ -507,9 +792,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">
 
           
@@ -530,7 +816,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 c526176..263e9d0 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,275 @@
         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{
+        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: 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;
+                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 +371,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;
@@ -426,10 +695,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; 
 }
@@ -582,11 +848,12 @@
         <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;">
+                    <a class="navbar-brand" href="../index.html">
+                        <!-- style="color: black;" -->
                         <b>Retro</b>
                     </a>
                     <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -597,27 +864,47 @@
                     <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>
                         </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>
@@ -706,11 +993,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>
@@ -804,11 +1092,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" >About</a>
                     <a href="Html-files/services.html" >Services</a>
@@ -817,6 +1106,7 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">
                     <a href="contributor.html" ">Contributors</a>
                 </ul>
                 <ul>
+
                     <p style="color: rgb(162, 16, 23);font-family: var(--ff-philosopher); text-align:left"> Exclusive Offers</p>
                     <a href="#" >Retro Discounts</a>
                     <a href="#" >Limited-Time Promotions</a>
@@ -834,6 +1124,7 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">
                     <a href="./Html-files/payment2.html" >Online Payment</a>
                     <a href="./Html-files/payment2.html" >Mobile Wallets</a>
                     <a href="./Html-files/payment2.html" >Contactless Payments</a>
+
                 </ul>
             </div>
 
@@ -856,8 +1147,11 @@ <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%, 35%);">Conta
                 
                     <button id="butt" type="submit" style="font-family: ui-serif;">Send Message</button>
                 </form>
+
+
                 <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">
 
@@ -869,9 +1163,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 d7760b6..5f8a9ff 100644
--- a/Html-files/login.html
+++ b/Html-files/login.html
@@ -6,6 +6,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/login-register.css">
   <title>Retro</title>
@@ -19,6 +22,277 @@
     rel="stylesheet">
   <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: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;  */
+            }
+            
+
+
+
+
+            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'] .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); */
+              }
+            }
+  
+            
+            /* */
+
+
+
+
+           
+            /*  */
+
+
+
     .circle {
       z-index: 998;
       width: 20px;
@@ -41,6 +315,7 @@
     }
 
     .container {
+      background: transparent;
       width: 350px;
       height: 500px;
       perspective: 800px;
@@ -55,6 +330,7 @@
       height: 100%;
       width: 100%;
       position: relative;
+      background: transparent;
       transition: transform 1500ms;
       transform-style: preserve-3d;
       border-radius: 40px;
@@ -304,8 +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">
-    <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">
@@ -353,6 +649,7 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</
       </div>
     </form>
   </div>
+
   <script>
     const coords = { x: 0, y: 0 };
     const circles = document.querySelectorAll(".circle");
diff --git a/Html-files/menu.html b/Html-files/menu.html
index 52a9989..d007f0a 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,23 +31,273 @@
         rel="stylesheet">
     <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: 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%);
+        }
+        .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;
+            /* Smooth transition for the zoom effect */
+        }
+
+        /* Zoom effect on hover */
+        .menu:hover {
+            transform: scale(1.1);
+            /* Scale the image to 110% of its original size */
+        }
+
        /* Initial styling for the image */
-.menu {
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    /* Smooth transition for zoom and shadow effect */
-    transform-origin: center center;
-    /* Ensures zoom originates from the center of the image */
-    backface-visibility: hidden;
-    /* Prevents flickering */
-}
-
-/* Zoom effect on hover */
-.menu:hover {
-    transform: scale(1.1);
-    /* Scale the image to 110% of its original size */
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-    /* Adds a shadow for better visual feedback */
-}
+        .menu {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            /* Smooth transition for zoom and shadow effect */
+            transform-origin: center center;
+            /* Ensures zoom originates from the center of the image */
+            backface-visibility: hidden;
+            /* Prevents flickering */
+        }
+
+        /* Zoom effect on hover */
+        .menu:hover {
+            transform: scale(1.1);
+            /* Scale the image to 110% of its original size */
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+            /* Adds a shadow for better visual feedback */
+        }
+
 
 
         @media (max-width: 768px) {
@@ -117,10 +369,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;
@@ -345,12 +594,13 @@
     <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;">
+                    <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"
@@ -360,27 +610,27 @@
                     <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>
 
                         </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>
@@ -389,18 +639,35 @@
                                     <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>
 
 <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" 
@@ -410,7 +677,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">
@@ -576,7 +843,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>
@@ -663,7 +930,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">
@@ -744,12 +1011,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="font-family: var(--ff-poppins);">Home</a>
                 <a href="#" style="font-family: var(--ff-poppins);">About</a>
@@ -762,6 +1030,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>
                 <a style="font-family: var(--ff-poppins);">Retro Discounts</a>
                 <a style="font-family: var(--ff-poppins);">Limited-Time Promotions</a>
@@ -771,15 +1040,18 @@ <h3 style="font-family:var(--ff-philosopher);">Palsnkin</h3>
                 <a style="font-family: var(--ff-poppins);">VIP Retro Events</a>
                 <a style="font-family: var(--ff-poppins);">Personalized Culinary Experiences</a>
 
+
             </ul>
 
             <ul class="footer-colums">
+
                 <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);">Payment Products</p>
                 <a style="font-family: var(--ff-poppins);">Secure Checkout</a>
                 <a style="font-family: var(--ff-poppins);">Credit/Debit Cards</a>
                 <a style="font-family: var(--ff-poppins);">Online Payment</a>
                 <a style="font-family: var(--ff-poppins);">Mobile Wallets</a>
                 <a style="font-family: var(--ff-poppins);">Contactless Payments</a>
+
             </ul>
             <form id="contactForm">
                 <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%,35%); font-size: 26px; margin-bottom: 3px;">
@@ -807,13 +1079,38 @@ <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%,35%); font-si
 <!-- Include Font Awesome -->
 <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); font-size: 26px; margin-bottom: 3px;">
+        Contact Us!
+    </h3>
+
+    <!-- Email Input with Icon -->
+    <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: hsl(208, 7%,46%);"></i>
+        <input type="email" id="email" name="email" placeholder="Your Email" required 
+               style="padding-left: 30px; width: 100%;">
+    </div>
+
+    <!-- Message Input with Icon -->
+    <div style="position: relative; margin-bottom: 15px;">
+        <i class="fas fa-comment" style="position: absolute; left: 10px; top: 10px; font-size: 14px; color: hsl(208, 7%,46%);"></i>
+        <textarea id="message" name="message" placeholder="Your Message" required 
+                  style="padding-left: 30px; width: 100%;"></textarea>
+    </div>
+
+    <!-- Submit Button -->
+    <button id="butt" type="submit" style="font-family: var(--ff-poppins);">Send Message</button>
+</form>
+
+
+
 
         </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 720e0c4..1cb75be 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,290 +38,799 @@
             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{
+            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: 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;
+                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);
+            }
+
         @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%;
-}
-html{
-    overflow-x: hidden;
-}
-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;
-  overflow-x: hidden;
-}
-::-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 {
-    align-items: center;
-    text-align: center;
-}
-
-.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%); 
-}
-
-.dealsp {
-    margin: 0;
-}
-
-.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);
-}
-
-.foot-panel2 .footer-colums  a { 
-      /* /* color: black!important; */
-      text-decoration: none !important;
-      transition:transform 0.2s ease, text-decoration-color 0.2s ease; 
-      /* display: inline-block; */
-            
+          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%;
+      }
+      html{
+          overflow-x: hidden;
+      }
+      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;
+        overflow-x: hidden;
+      }
+      ::-webkit-scrollbar {
+        width: 10px; 
+      }
+      ::-webkit-scrollbar-track {
+        background-color: #feaea5; 
+        border-radius: 10px;
+      }
 
-      text-decoration: none;
-      color: #000;
-      position: relative;
-      padding-bottom: 2px;
-            
-    }
+      ::-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 {
+          align-items: center;
+          text-align: center;
+      }
+
+      .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%); 
+      }
+
+      .dealsp {
+          margin: 0;
+      }
+
+      .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);
+      }
+   
+
+      .foot-panel2 .footer-colums  a { 
+            /* /* color: black!important; */
+            text-decoration: none !important;
+            transition:transform 0.2s ease, text-decoration-color 0.2s ease; 
+            /* display: inline-block; */
+
+
+            text-decoration: none;
+            color: #000;
+            position: relative;
+            padding-bottom: 2px;
+
+          }
 
     .foot-panel2 .footer-colums a::after{
       content: '';
@@ -375,10 +887,11 @@
     </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;">
+                    <a class="navbar-brand" href="../index.html">
+                        <!-- style="color: black;" -->
                         <b>Retro</b>
                     </a>
                     <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -389,37 +902,57 @@
                     <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>
                         </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>
     
 
 
         <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; height: 20%;">
                 <div class="items-container" style="display: flex; flex-direction: column; align-items: center;">
@@ -458,11 +991,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">
@@ -598,12 +1131,12 @@ <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="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Home</a>
@@ -617,54 +1150,55 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Retro
                         style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Cart</a>
                         <a href="contributor.html"
                         style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">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>
             </div>
@@ -692,7 +1226,7 @@ <h3 style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Conta
                 </form>
                 <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">
@@ -711,13 +1245,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 2d5f367..20011d7 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>
diff --git a/index.html b/index.html
index e272dfa..6cca7b7 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">
@@ -433,8 +436,9 @@
     <!--Navbar Start-->
     <nav class="navbar navbar-expand-lg fixed-top" id="top">
         <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">
@@ -444,32 +448,33 @@
                 <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/blog.html" style="font-family: var(--ff-philosopher); color: black">Blog</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>
@@ -478,24 +483,43 @@
                     <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>
+
+                </div>           
+
                 </div>
-                <button id="darkModeToggle" class="btn btn-secondary" style="margin-left: 10px;">
-                    <i class="fas fa-sun" id="toggleIcon" style="font-size: 20px;"></i>
-                    <span id="toggleText">Light Mode</span>
-                </button>
             </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 {
@@ -653,16 +677,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. 
@@ -682,7 +710,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>
@@ -719,33 +747,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>
@@ -799,7 +827,7 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Bevera
         </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">
@@ -1100,7 +1128,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>
@@ -1112,9 +1141,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>
 
@@ -1186,12 +1218,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;<span id="copyright"></span> 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;">
@@ -1204,7 +1238,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 0000000..f12cfbb
--- /dev/null
+++ b/script.js
@@ -0,0 +1,41 @@
+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');
+        }
+    });
+});
+
+
+
+// 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 2e9bc4d..db69981 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,10 +11,243 @@
   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: 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;
+}
+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;