diff --git a/assets/css/login.css b/assets/css/login.css
index 858afb4d..ae2bbc18 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -55,14 +55,14 @@ body {
   position: relative;
 }
 
- 
+
 p {
 
   font-size:  15px;
   color:  #6231ff;
 
 }
- 
+
 .navbar {
   width: 100%;
   background-color: #000000;
@@ -71,7 +71,7 @@ p {
 .navbar-link {
   text-decoration: none;
   background-color: none;
-  
+
 }
 .navbar-list a{
   width: 100%;
@@ -80,7 +80,7 @@ p {
   position: relative;
   font-size: 1.55rem;
   color: var(--charcoal);
-  padding: 8px 12px;
+  padding: 8px 6px;
   line-height: 2;
   transition: var(--transition-1);
 }
@@ -153,7 +153,7 @@ p {
 .message {
     color: red;
 } */
- 
+
 .form {
 
 	display:  flex;
@@ -162,9 +162,9 @@ p {
   padding:  35px;
   padding-bottom: 0px;
   margin-top:  -16px;
-   
+
 }
- 
+
 #login-form{
   display: flex;
   flex-direction: column;
@@ -186,9 +186,9 @@ p {
   text-align: center;
   font-family: var(--ff-philosopher);
 }
- 
+
 .note h2 {
-   
+
   font-size: 2rem;
  /* font-weight: bold;*/
   color: #67a5eb;
@@ -198,7 +198,7 @@ p {
   margin-bottom:  15px;
 
 }
- 
+
 .note div {
   padding-top: 0.1rem;
   font-size: 2.5rem;
@@ -256,7 +256,7 @@ p {
 .light-mode label{
   color: black;
 }
- 
+
 label {
 
   color:  white;
@@ -269,7 +269,7 @@ label {
   text-align:  center;
 
 }
- 
+
 input[type="password"]::-webkit-textfield-decoration-container {
   display: none;
 }
@@ -359,7 +359,7 @@ input[type="password"]::-ms-reveal {
   margin-left: 120px;
   /* margin-left: 132px; */
   z-index: 1;
-  
+
   overflow: hidden;
 }
 
@@ -384,7 +384,7 @@ input[type="password"]::-ms-reveal {
 
 #google-sign-in::before,
 #google-sign-in::after {
-  
+
 	content: "";
 	position: absolute;
 	z-index: -1;
@@ -442,7 +442,7 @@ input[type="password"]::-ms-reveal {
   background-color: var(--old-rose);
 }
 
- 
+
 .register label {
 
   color:  #3434cc;
@@ -451,13 +451,13 @@ input[type="password"]::-ms-reveal {
   margin-top:  -1px;
 
 }
- 
+
 .register label:hover {
 
   color:  #000000;
 
 }
- 
+
 #chk:checked ~ .register {
   transform: translateY(-60%);
 }
@@ -657,7 +657,7 @@ input[type="password"]::-ms-reveal {
   width:  25px;
 
 }
- 
+
 .progress {
     height: 3px !important;
 }
@@ -730,18 +730,18 @@ input[type="password"]::-ms-reveal {
   z-index: 1000;
   transition: top 0.3s;
   }
-  
+
   /* Hide the navbar */
   .header.hidden {
   top: -93px; /* Adjust according to your header height */
   }
-  
+
   /* Navbar styling when scrolled */
   .header.scrolled {
   background-color: #222; /* Change to a darker color when scrolled */
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
   }
-  
+
 
 /**
 * Dark Mode
@@ -821,7 +821,7 @@ body.dark-mode {
   color:  rgb(208, 153, 160);
 
 }
- 
+
 .light-mode .input{
   background: #e6e6e6;
   color: rgb(143, 55, 84);
@@ -882,7 +882,7 @@ body.dark-mode {
 .form button
 {
 
-  color:  #fbf7f7;   
+  color:  #fbf7f7;
   background:  rgb(103 165 235);
   box-shadow:  0 0 10px rgba(143, 55, 84, 0.5);
 
@@ -1104,7 +1104,7 @@ background: transparent !important;
   color: rgb(201, 168, 168);
 
 }
-  
+
 .foot-middle ul {
   padding: 0;
   margin: 0;
@@ -1131,7 +1131,7 @@ background: transparent !important;
 
 .nav-links ul li {
   margin-bottom: 10px;
-  
+
   /* Add some spacing between list items */
 }
 
@@ -1236,7 +1236,7 @@ input[type="news"] {
 input[type="news"]:focus {
   border: 2px solid #c27a7e;
 }
- 
+
 input[type="submit"] {
 
   width: 100%;
@@ -1257,7 +1257,7 @@ input[type="submit"] {
   cursor: pointer;
 
 }
- 
+
 input[type="submit"]:hover {
   background: linear-gradient(to right, #000 50%, #36363b 50%);
   background-size: 200% 100%;
@@ -1396,7 +1396,7 @@ input[type="submit"]:hover {
   color:grey;
   margin-bottom: 10px;
   text-align: center; /* center the text */
-  width: 100%; 
+  width: 100%;
   display: inline-block;
   font-weight: bold;
   font-family: var(--ff-philosopher)
@@ -1454,7 +1454,7 @@ input[type="submit"]:hover {
   .navbar-item{
       /* margin-right: 40px; */
       left: auto;
-      
+
   }
   .navbar-list{
     position: relative;
@@ -1488,4 +1488,4 @@ input[type="submit"]:hover {
     top: -9px;
     left: 50px;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/html/login.html b/assets/html/login.html
index 2ea64d7f..9e07af97 100644
--- a/assets/html/login.html
+++ b/assets/html/login.html
@@ -86,10 +86,8 @@
 
 /* Switch Label */
 .switch-label {
-  margin-left: -30px;
-  margin-right: 40px;
+  margin-left: -120px;
   margin-bottom: 20px;
-  margin-top: 92px;
 }
 
 /* Button Image */
@@ -120,10 +118,10 @@
 }
 
 .action .profile {
-  margin-top: 24px;
+  margin-top: 44px;
   position: relative;
   top: -40px;
-  right: 510px;
+  right: 750px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
@@ -268,9 +266,6 @@
     transition: 0.55s all ease-out;
     padding-top: 5px;
   }
-  .navbar-item {
-    margin-right: 40px;
-  }
   .navbar-list {
     position: relative;
     top: 200px;
@@ -320,7 +315,6 @@
 .navbar-list{
   display: flex;
   gap: 10px;
-  justify-content: center;
 }
 
 /* footer  */
@@ -334,7 +328,7 @@
     margin-top: 120px;;
     width: 40px;
     height: 150px;
-  
+
 }#quicklinks {
   display: flex;
   justify-content: space-between; /* Ensures columns are evenly spaced */
@@ -367,7 +361,7 @@
   color:white;
 }
 
-.dark-mode .flinks{ 
+.dark-mode .flinks{
   color: #80ddf4;
 
 }
@@ -380,13 +374,13 @@
 
 .dark-mode .finput{
       color: white;
-      background-color: transparent; 
-      padding: 10px; 
+      background-color: transparent;
+      padding: 10px;
       border: 1px solid white;
-      
+
 }
 .dark-mode .finput::placeholder {
-      color: rgba(255, 255, 255, 0.6); 
+      color: rgba(255, 255, 255, 0.6);
     }
 .socialmediaicons a {
     display: inline;
@@ -399,32 +393,32 @@
 
   .socialmediaicons .fa-instagram {
   display: inline-block;
-  width: 30px; 
-  height: 30px; 
+  width: 30px;
+  height: 30px;
   text-align: center;
-  line-height: 30px; 
+  line-height: 30px;
   border-radius: 10px;
   background: transparent;
   color: #000000;
-  transition: background 0.3s, transform 0.3s; 
+  transition: background 0.3s, transform 0.3s;
 }
 
 .socialmediaicons .fa-instagram:hover {
-  background: radial-gradient(circle at 30% 110%, 
-                               #ffdb8b 0%, 
-                               #ee653d 25%, 
-                               #d42e81 50%, 
-                               #a237b6 75%, 
+  background: radial-gradient(circle at 30% 110%,
+                               #ffdb8b 0%,
+                               #ee653d 25%,
+                               #d42e81 50%,
+                               #a237b6 75%,
                                #3e57bc 100%);
   background-clip: padding-box;
-  border-radius: 10px; 
-  color: white; 
-  transform: scale(1.1); 
-  
-}  
+  border-radius: 10px;
+  color: white;
+  transform: scale(1.1);
+
+}
 .socialmediaicons .fa-facebook:hover{
   color: blue;
-}   
+}
 .socialmediaicons .fa-youtube:hover{
   color: red;
 }
@@ -443,19 +437,19 @@
 }
 
   .instagram {
-    
+
     margin: 5px;
-    
+
   }
 
 
   .facebook {
-    
+
     margin: 5px;
   }
-  
+
   .youtube {
-   
+
     margin: 5px;
   }
 
@@ -487,13 +481,13 @@
   <div class="nav-wrapper">
     <div class="progress-bar"></div>
   </div>
-  
+
 
   <header class="header header-anim nav-h" data-header>
 
     <div class="container mobile-container-styles" style="padding-left: 0;">
       <nav class="navbar nav_activated" data-navbar>
-        
+
         <ul class="navbar-list nav" style="border-radius: 5px;">
           <a href="../../index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex; background-color: none;">
             <img src="../images/final.png" class="logopic" style=" width: 150px;">
@@ -507,7 +501,7 @@
               style="width:25px;height:25px">
             </lord-icon>  Home</a>
           </li>
-              
+
           <li class="navbar-item">
             <a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link>
               <lord-icon
@@ -530,7 +524,7 @@
               style="width:25px;height:25px">
           </lord-icon> Genre</a>
           </li>
-        
+
           <li class="navbar-item">
             <a href="../../index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link">
               <lord-icon
@@ -554,7 +548,7 @@
               <lord-icon
               src="https://cdn.lordicon.com/motnbmtz.json"
               trigger="hover"
-              stroke="bold"     
+              stroke="bold"
               colors="primary:#a30f17,secondary:#e88c30"
               style="width:25px;height:25px">
           </lord-icon> FAQ</a>
@@ -568,13 +562,13 @@
               state="hover-up"
               colors="primary:#a30f17,secondary:#e88c30"
               style="width:30px;height:30px"></lord-icon>About Us</a>
-         
 
 
-         
-           
+
+
+
           <li class="navbar-item" id="login-signup-link">
-            <a href="..//html/login.html" class="navbar-link"> 
+            <a href="..//html/login.html" class="navbar-link">
               <lord-icon
               src="https://cdn.lordicon.com/xfzuyvam.json"
               trigger="morph"
@@ -583,8 +577,8 @@
               style="width:25px;height:25px">
           </lord-icon>Login/Signup</a>
           </li>
-          
-          
+
+
           <li class="navbar-item dropdown" id="more-dropdown">
             <a href="#" class="navbar-link" id="more-link">More
               <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em"
@@ -599,7 +593,7 @@
                     Community chat
                 </a>
                 </li>
-                
+
                 <li class="dropdown-menu-item">
                   <a href="../html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
                       class="ri-price-tag-3-fill"></i> Pricing</a>
@@ -645,7 +639,7 @@
                 text-decoration: none;
 
                 display: flex;
-                justify-content: center;
+                /* justify-content: center; */
                 align-items: center;
                 position: relative;
                 color: var(--charcoal);
@@ -702,7 +696,7 @@
             outline: none;
             text-align: center;
             position: relative; /* Important for the hover effect */
-            overflow: hidden; 
+            overflow: hidden;
         }
         .social-buttons {
             display: flex;
@@ -728,7 +722,7 @@
               </label>
             </div>
           </li>
-          
+
           <li>
           <div class="action">
             <div class="profile" onclick="menuToggle();">
@@ -762,7 +756,7 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
                 document.addEventListener("DOMContentLoaded", function () {
                     const moreLink = document.getElementById("more-link");
                     const dropdownMenu = document.getElementById("dropdown-menu");
-            
+
                     moreLink.addEventListener("click", function (event) {
                         event.preventDefault();
                         dropdownMenu.classList.toggle("show");
@@ -770,7 +764,7 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
                 });
             </script>
               <script>
-                
+
                document.addEventListener("DOMContentLoaded", () => {
     const savedAvatar = localStorage.getItem("selectedAvatar");
     if (savedAvatar) {
@@ -778,7 +772,7 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
     }
 });
 
-        
+
                 function menuToggle() {
                     const toggleMenu = document.querySelector(".menu");
                     toggleMenu.classList.toggle("active");
@@ -803,7 +797,7 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
           }
         })
       </script>
-      
+
 <script>
   document.getElementById("more-link").addEventListener("click", function (event) {
   event.preventDefault();  // Prevent the default behavior of the link
@@ -869,23 +863,23 @@ <h2>Join us by creating an account or log in if you already have an account</h2>
                   </style>
                   <div class="button-container">
                     <button class="p1" id="google-sign-in" style="
-                        
-                        display: flex; 
-                        align-items: center; 
-                        justify-content: center; 
-                        width: 200px;  
+
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 200px;
                         height: 45px;
                         margin-left: 20px;
-                        background-color: #4285F4; 
-                        color: white; 
-                        border: none; 
-                        border-radius: 24px; 
-                        font-size: 13px; 
-                        font-weight: bold; 
-                        cursor: pointer; 
-                        outline: none; 
+                        background-color: #4285F4;
+                        color: white;
+                        border: none;
+                        border-radius: 24px;
+                        font-size: 13px;
+                        font-weight: bold;
+                        cursor: pointer;
+                        outline: none;
                         text-align: center;
-                         position: relative; 
+                         position: relative;
                         overflow: hidden;
                     ">
                         <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 48 48" style="fill: currentColor; margin-right: 8px;">
@@ -897,29 +891,29 @@ <h2>Join us by creating an account or log in if you already have an account</h2>
                         Sign In With Google
                     </button>
                     <button class="p1" id="facebook-sign-in" style="
-                        display: flex; 
-                        align-items: center; 
-                        justify-content: center; 
-                        width: 200px; 
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 200px;
                         height: 45px;
                         margin-left: 20px;
-                        background-color: #3b5998; 
-                        color: white; 
-                        border: none; 
-                        border-radius: 24px; 
-                        font-size: 13px; 
-                        font-weight: bold; 
-                        cursor: pointer; 
-                        outline: none; 
+                        background-color: #3b5998;
+                        color: white;
+                        border: none;
+                        border-radius: 24px;
+                        font-size: 13px;
+                        font-weight: bold;
+                        cursor: pointer;
+                        outline: none;
                         text-align: center;
                         position: relative;
-                        overflow: hidden; 
+                        overflow: hidden;
                     ">
                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 48 48" style="fill: currentColor;">
                         <path fill="#4267B2" d="M24,4C12.954,4,4,12.954,4,24c0,9.854,7.262,18.002,16.657,19.705V30.94h-5.012v-6.014h5.012v-3.815c0-4.961,2.96-7.698,7.51-7.698c2.176,0,4.451,0.388,4.451,0.388v4.895h-2.505c-2.469,0-3.242,1.531-3.242,3.103v3.126h5.518l-0.881,6.014h-4.637v12.765C36.738,42.002,44,33.854,44,24C44,12.954,35.046,4,24,4z"></path>
                         <path fill="#FFFFFF" d="M33.273,30.94l0.881-6.014h-5.518v-3.126c0-1.571,0.773-3.103,3.242-3.103h2.505v-4.895c0,0-2.275-0.388-4.451-0.388c-4.549,0-7.51,2.737-7.51,7.698v3.815h-5.012v6.014h5.012v12.765c1.011,0.176,2.045,0.265,3.091,0.265s2.081-0.089,3.091-0.265V30.94H33.273z"></path>
                     </svg>
-                    
+
                         Sign In With Facebook
                     </button>
                 </div>
@@ -944,7 +938,7 @@ <h2>Join us by creating an account or log in if you already have an account</h2>
         #facebook-sign-in:hover::before {
             left: 100%;
         }
-       
+
         </style>
       <div class="register" style="z-index: 2;">
         <form class="form" id="registerForm">
@@ -967,21 +961,21 @@ <h2>Join us by creating an account or log in if you already have an account</h2>
               <li class="list-item" ><i class="fa-solid fa-check" id="specialCheck" style="display: none;" ></i><span class="one-special-char fade ">Special Character (!@#$%^&*)</span></li>
               <li class="list-item" ><i class="fa-solid fa-check" id="eightCharacter" style="display: none;" ></i><span class="eight-character fade ">At least 8 Character</span></li>
             </ul>
-            
+
           </div>
           <br>
           <button type="submit" name="register" id="register">Register</button>
           <div id="or">Or</div>
           <br>
-        
+
           <button id="google-signup"> Sign Up with Google </button>
-          
+
         </form>
       </div>
     </div>
   </div>
   <hr/>
-  
+
   <footer class="ff">
     <div class="foot-top">
       <div class="foot-left">
@@ -1043,10 +1037,10 @@ <h2>Quick Links</h2>
           </div>
         </div>
       </div>
-      
+
 
         <style>
-          .social-icons input[type="email"] 
+          .social-icons input[type="email"]
           {
               border: 2px solid #ccc; /* Gray border */
               border-radius: 4px; /* Rounded corners */
@@ -1061,9 +1055,9 @@ <h2>Quick Links</h2>
 
           }
          /* for small screen */
-          @media (max-width: 768px) 
+          @media (max-width: 768px)
           {
-            #confirmationMessage 
+            #confirmationMessage
             {
                 margin-left: 0;
                 text-align: center;
@@ -1097,37 +1091,37 @@ <h2>Quick Links</h2>
       </div>
   </form>
   <div id="confirmationmessage" style="display: none;">Thank you for subscribing!</div>
-    
+
   <script>
  function showConfirmationMessage() {
 
   const form = document.getElementById('newsform');
   const confirmationMessage = document.getElementById('confirmationmessage');
 
-  
+
   confirmationMessage.style.display = 'block';
   setTimeout(function() {
-    location.reload(); 
+    location.reload();
   }, 3000);
 
 
- 
+
 }
 
 
 
 </script>
 <style>
-  
+
 .subscribe {
   background-color: #A30F17;
-  color: white; 
-  border: none; 
-  padding: 10px 20px; 
-  font-size: 16px; 
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
   font-family: Arial, sans-serif;
-  border-radius: 5px; 
-  cursor: pointer; 
+  border-radius: 5px;
+  cursor: pointer;
   transition: background-color 0.3s, transform 0.2s;
 }
 
@@ -1137,17 +1131,17 @@ <h2>Quick Links</h2>
 }
 
 .subscribe:active {
-  transform: scale(0.98); 
+  transform: scale(0.98);
 }
 
 .subscribe:focus {
-  outline: none; 
+  outline: none;
 }
 
 </style>
 
 <!-- <script>
-  function showConfirmationMessage() 
+  function showConfirmationMessage()
   {
     // Show confirmation message
     const confirmationMessage = document.getElementById('confirmationMessage');
@@ -1155,14 +1149,14 @@ <h2>Quick Links</h2>
     confirmationMessage.style.display = 'block';
 
     // Reset the form after 3 seconds
-    setTimeout(function() 
+    setTimeout(function()
     {
         document.getElementById('newsletterForm').reset();
         confirmationMessage.style.display = 'none';
-        
+
     }, 3000);
 
-    return false; 
+    return false;
 }
 </script>-->
         <div class="icons">
@@ -1653,22 +1647,22 @@ <h1>Privacy Notice</h1>
     document.addEventListener('DOMContentLoaded', () => {
       const currentTheme = localStorage.getItem('theme');
       const switchCheckbox = document.getElementById('switch');
-    
+
       if (!switchCheckbox) {
         console.error("Switch checkbox not found!");
         return;
       }
-    
+
       const applyDarkModeStyles = () => {
         document.body.classList.remove('light-mode');
         document.body.classList.add('dark-mode');
       };
-    
+
       const applyLightModeStyles = () => {
         document.body.classList.remove('dark-mode');
         document.body.classList.add('light-mode');
       };
-    
+
       const initializeTheme = () => {
         if (currentTheme === 'dark-mode') {
           applyDarkModeStyles();
@@ -1677,7 +1671,7 @@ <h1>Privacy Notice</h1>
           applyLightModeStyles();
         }
       };
-    
+
       const handleThemeChange = () => {
         if (switchCheckbox.checked) {
           applyDarkModeStyles();
@@ -1687,11 +1681,11 @@ <h1>Privacy Notice</h1>
           localStorage.setItem('theme', 'light-mode');
         }
       };
-    
+
       initializeTheme();
       switchCheckbox.addEventListener('change', handleThemeChange);
     });
-    
+
   </script>
 
   <script>
@@ -1727,7 +1721,7 @@ <h1>Privacy Notice</h1>
 close=document.querySelector('.close');
 let count=0
 NavButton.addEventListener('click',()=>{
-      
+
 if(count===0){
 navbar.classList.remove('nav_activated')
 open.classList.add('close')
@@ -1893,7 +1887,7 @@ <h1>Privacy Notice</h1>
     // Password visibility toggle for registration
     const eyeIconRegister = document.getElementById("eyeicon-register");
     const passwordRegister = document.getElementById("registerPassword");
-  
+
     if (eyeIconRegister && passwordRegister) {
       eyeIconRegister.addEventListener("click", () => {
         if (passwordRegister.type === "password") {
@@ -1907,11 +1901,11 @@ <h1>Privacy Notice</h1>
     } else {
       console.error('Register icon or password field not found.');
     }
-  
+
     // Password visibility toggle for login
     const eyeIconLogin = document.getElementById("eyeicon-login");
     const passwordLogin = document.getElementById("loginPassword");
-  
+
     if (eyeIconLogin && passwordLogin) {
       eyeIconLogin.addEventListener("click", () => {
         if (passwordLogin.type === "password") {
@@ -1927,8 +1921,7 @@ <h1>Privacy Notice</h1>
     }
   });
   </script>
-  
+
 
 </body>
 </html>
-
diff --git a/index.html b/index.html
index 4abd7127..aef0e853 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
     :root {
     --text-color-light: #333; /* Dark text for light mode */
     --text-color-dark: #fff; /* White text for dark mode */
-   
+
 }
 </style>
   <!-- <script type="text/javascript">
@@ -127,7 +127,7 @@
   <script src="https://cdn.lordicon.com/lordicon.js"></script>
   <script src="./assets/js/preloader.js" defer></script>
   <script src="./script.js"></script>
-  
+
   <style>
     swiper-container {
       width: 100%;
@@ -137,18 +137,18 @@
      background-color: #ffb2a8 !important;
     }
 
-    
+
   .nav {
   display: flex;
   position: sticky !important;
   align-items: center;
   justify-content: space-between;
-  margin-left: -18rem; 
+  margin-left: -18rem;
   /* margin-left: 5rem; */
 }
 
 
-    
+
 
     /* Position the toggle button to the right */
     .switch-container {
@@ -180,7 +180,7 @@
     margin-top: 12rem;;
     width: 4rem;
     height: 15rem;
-  
+
 }#quicklinks {
   display: flex;
   justify-content:space-between; /* Ensures columns are evenly spaced */
@@ -228,10 +228,10 @@
       background-color: transparent;
       padding: 1rem;
       border: 0.1rem solid white;
-      
+
 }
 .dark-mode .finput::placeholder {
-      color: rgba(255, 255, 255, 0.6); 
+      color: rgba(255, 255, 255, 0.6);
     }
     .socialmediaicons a {
   display: inline-block; /* For better control of icons */
@@ -264,11 +264,11 @@
 }
 
 .socialmediaicons .fa-instagram:hover {
-  background: radial-gradient(circle at 30% 110%, 
-                               #ffdb8b 0%, 
-                               #ee653d 25%, 
-                               #d42e81 50%, 
-                               #a237b6 75%, 
+  background: radial-gradient(circle at 30% 110%,
+                               #ffdb8b 0%,
+                               #ee653d 25%,
+                               #d42e81 50%,
+                               #a237b6 75%,
                                #3e57bc 100%) !important;
   color: white !important; /* Change icon color to white on hover */
   transform: scale(1.1);
@@ -318,7 +318,7 @@
   border: none; /* No border */
 }
 
-.socialmediaicons a:focus, 
+.socialmediaicons a:focus,
 .socialmediaicons a:active {
   outline: none;
   background-color: transparent !important;
@@ -593,7 +593,7 @@
   transition: border-color 0.3s;
   font-size: 12px;
 }
-    
+
 
 
 #cookie-consent:hover {
@@ -725,7 +725,7 @@
     .navbar-item{
 
         margin :  0
-        
+
     }
 
     .hamburger{
@@ -759,7 +759,7 @@
 
 .navbar-item {
   margin-top: 1rem; /* Increase the top margin of each item */
-  
+
 }
 
 .card-sty {
@@ -768,7 +768,7 @@
 .button-container {
   text-align: center;
     margin-top: 1rem;
-    
+
 }
 
 .donate-button {
@@ -894,10 +894,10 @@
     #285aeb 90%
   );
   background-clip: text;
-  -webkit-background-clip: text; 
-  color: transparent; 
+  -webkit-background-clip: text;
+  color: transparent;
   border-radius: 20%;
-  transform: scale(1.1); 
+  transform: scale(1.1);
   transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
 }
 
@@ -917,40 +917,40 @@
   display: flex;
   gap: 1rem;
   align-items: center;
-  justify-content: center; 
+  justify-content: center;
 }
 
 .icon i {
-  font-size: 2.4rem; 
-  color: #ffffff; 
+  font-size: 2.4rem;
+  color: #ffffff;
   cursor: pointer;
-  margin: 0; 
-  padding: 0; 
+  margin: 0;
+  padding: 0;
 }
 
 .icon i:hover {
-  color: #555; 
+  color: #555;
 }
 /* Styling for the email input */
 .finput {
     width: 100%;
     padding: 1rem;
     font-size: 1rem;
-    border: 0.2rem solid #ccc; 
-    border-radius: 0.5rem; 
-    outline: none; 
-    transition: border-color 0.3s ease; 
+    border: 0.2rem solid #ccc;
+    border-radius: 0.5rem;
+    outline: none;
+    transition: border-color 0.3s ease;
     margin-top: 2px;
 }
 
 /* Hover effect to change the border color */
 .finput:hover {
-    border-color: #3498db; 
+    border-color: #3498db;
 }
 
 
 .finput:focus {
-    border-color: #2980b9; 
+    border-color: #2980b9;
 }
 
 
@@ -977,10 +977,10 @@
   padding: 1rem;
   font-size: 1rem;
   border: 2rem solid #000000;
-  border-radius: 0.5rem; 
-  outline: none; 
-  transition: border-color 0.3s ease; 
-  
+  border-radius: 0.5rem;
+  outline: none;
+  transition: border-color 0.3s ease;
+
 }
 
 /* Hover effect to change the border color */
@@ -1082,7 +1082,7 @@
     <div class="circle"></div>
     <div class="circle"></div>
 
-  
+
   <style>
 
     /* Fixed translate button */
@@ -1103,15 +1103,15 @@
     top: -15rem;
     right: 4.4rem;
     z-index: 1000;
-    width: 5.3rem;  
+    width: 5.3rem;
     height: 5.3rem;
-    border-radius: 50%; 
-    border: none; 
-    background:linear-gradient(hwb(357 6% 36%),#d26d6d); 
-    color: white; 
-    text-align: center; 
-    display: inline-block; 
-    font-size: 1.6rem; 
+    border-radius: 50%;
+    border: none;
+    background:linear-gradient(hwb(357 6% 36%),#d26d6d);
+    color: white;
+    text-align: center;
+    display: inline-block;
+    font-size: 1.6rem;
     cursor: pointer;
     display: flex;
     justify-content: center;
@@ -1125,12 +1125,12 @@
     margin-right: 0px;
 }
 #translateButton:hover {
-    transform: scale(1.2); 
+    transform: scale(1.2);
 }
 
 /* The popup modal */
 .popup {
-    display: none; 
+    display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
@@ -1138,8 +1138,8 @@
     width: 100%;
     height: 100%;
     overflow: auto;
-    background-color: rgb(0,0,0); 
-    background-color: rgba(0,0,0,0.4); 
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
 }
 
 /* Popup content */
@@ -1202,13 +1202,13 @@
 
 /* Custom styles for the Google Translate dropdown */
 #google_translate_element select {
-    background: #ffffff; 
-    border: 0.1rem solid #ccc; 
-    color: #d26d6d; 
-    padding: 0.5rem; 
-    font-size: 1.4rem; 
-    border-radius: 0.5rem; 
-    
+    background: #ffffff;
+    border: 0.1rem solid #ccc;
+    color: #d26d6d;
+    padding: 0.5rem;
+    font-size: 1.4rem;
+    border-radius: 0.5rem;
+
 }
 
 /* Hide the Google Translate bar */
@@ -1244,13 +1244,13 @@
     // Get the popup
     var popup = document.getElementById('translatePopup');
 
-    // Get the button that opens the popup 
+    // Get the button that opens the popup
     var btn = document.getElementById('translateButton');
 
     // Get the <span> element that closes the popup
     var span = document.getElementsByClassName('close')[0];
 
-    // When the user clicks the button, open the popup 
+    // When the user clicks the button, open the popup
     btn.onclick = function() {
         popup.style.display = 'block';
     }
@@ -1296,7 +1296,7 @@
 
   <div class="socialmediaicons" style="z-index: 99;" >
 
-    
+
     <a class="active instagram" href="https://www.instagram.com/" class="" style="font-size: 2.5rem;" >
       <i class="fa-brands fa-instagram"></i>
     </a>
@@ -1317,7 +1317,7 @@
     </a>
     <a class="active twitter" href="https://twitter.com/" style="font-size: 2.5rem; margin: 0 10px;">
       <i class="fa-brands fa-x-twitter"></i>
-    </a> 
+    </a>
 </div>
 
   <script src="script.js"></script>
@@ -1404,7 +1404,7 @@
     --text-color-light: #333; /* Dark text for light mode */
     --text-color-dark: #fff; /* White text for dark mode */
 
-   
+
 }
 </style>
   <!-- <script type="text/javascript">
@@ -1476,7 +1476,7 @@
   <script src="https://cdn.lordicon.com/lordicon.js"></script>
   <script src="./assets/js/preloader.js" defer></script>
   <script src="./script.js"></script>
-  
+
   <style>
     body {
     margin: 0;
@@ -1493,11 +1493,11 @@
 }
 
     body::-webkit-scrollbar {
-        width: 16px; 
+        width: 16px;
     }
 
     body::-webkit-scrollbar-track {
-        background: var(--grey-white); 
+        background: var(--grey-white);
     }
 
     body::-webkit-scrollbar-thumb {
@@ -1505,13 +1505,13 @@
             to bottom,
             hsl(357, 37%, 62%),
             hsl(304, 14%, 46%)
-        ); 
+        );
         border-radius: 10px; /* Keeps the rounded thumb */
-        border: 3px solid var(--grey-white); 
+        border: 3px solid var(--grey-white);
     }
 
     body::-webkit-scrollbar-thumb:hover {
-        background: hsl(357, 60%, 45%); 
+        background: hsl(357, 60%, 45%);
     }
     swiper-container {
       width: 60%;
@@ -1521,18 +1521,18 @@
      background-color: #ffb2a8 !important;
     }
 
-    
+
   .nav {
   display: flex;
   position: sticky !important;
   align-items: center;
   justify-content: space-between;
-  margin-left: -5rem; 
+  margin-left: -5rem;
   /* margin-left: 5rem; */
 }
 
 
-    
+
 
     /* Position the toggle button to the right */
     .switch-container {
@@ -1569,7 +1569,7 @@
 }
 #quicklinks {
   display: flex;
-  justify-content: space-between; 
+  justify-content: space-between;
   /* Ensures columns are evenly spaced */
 }
 
@@ -1622,17 +1622,17 @@
       background-color: transparent;
       padding: 1rem;
       border: 0.1rem solid white;
-      
+
 }
 .dark-mode .finput::placeholder {
-      color: rgba(255, 255, 255, 0.6); 
+      color: rgba(255, 255, 255, 0.6);
     }
 
 
 
 
 
-    
+
 .socialmediaicons a {
   display: inline-block; /* To control dimensions of the icons */
   text-align: center;
@@ -1664,11 +1664,11 @@
 }
 
 .socialmediaicons .fa-instagram:hover {
-  background: radial-gradient(circle at 30% 110%, 
-                               #ffdb8b 0%, 
-                               #ee653d 25%, 
-                               #d42e81 50%, 
-                               #a237b6 75%, 
+  background: radial-gradient(circle at 30% 110%,
+                               #ffdb8b 0%,
+                               #ee653d 25%,
+                               #d42e81 50%,
+                               #a237b6 75%,
                                #3e57bc 100%) !important;
   color: white;
   transform: scale(1.1);
@@ -1739,7 +1739,7 @@
   border: none; /* No border */
 }
 
-.socialmediaicons a:focus, 
+.socialmediaicons a:focus,
 .socialmediaicons a:active {
   outline: none;
   background-color: transparent !important; /* Ensure no background during focus/active */
@@ -2016,7 +2016,7 @@
   transition: border-color 0.3s;
   font-size: 12px;
 }
-    
+
 
 
 #cookie-consent:hover {
@@ -2151,7 +2151,7 @@
     .navbar-item{
 
         margin :  0
-        
+
     }
 
     .hamburger{
@@ -2185,7 +2185,7 @@
 
 .navbar-item {
   margin-top: 1rem; /* Increase the top margin of each item */
-  
+
 }
 
 .card-sty {
@@ -2193,7 +2193,7 @@
 }
 .button-container {
   text-align: center;
-    
+
 }
 
 .card-body {
@@ -2318,10 +2318,10 @@
     #285aeb 90%
   );
   background-clip: text;
-  -webkit-background-clip: text; 
-  color: transparent; 
+  -webkit-background-clip: text;
+  color: transparent;
   border-radius: 20%;
-  transform: scale(1.1); 
+  transform: scale(1.1);
   transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
 }
 
@@ -2343,7 +2343,7 @@
   display: flex;
   gap: 2rem;
   align-items: center;
-  justify-content: center; 
+  justify-content: center;
 }
 
 
@@ -2351,39 +2351,39 @@
   display: flex;
   gap: 2rem;
   align-items: center;
-  justify-content: center; 
+  justify-content: center;
 }
 
 .icon i {
-  font-size: 2.4rem; 
+  font-size: 2.4rem;
   color: #8e6165;
   cursor: pointer;
-  margin: 0; 
-  padding: 0; 
+  margin: 0;
+  padding: 0;
 }
 
 .icon i:hover {
-  color: #555; 
+  color: #555;
 }
 /* Styling for the email input */
 .finput {
     width: 100%;
     padding: 1rem;
     font-size: 1rem;
-    border: 0.2rem solid #ccc; 
-    border-radius: 0.5rem; 
-    outline: none; 
-    transition: border-color 0.3s ease; 
+    border: 0.2rem solid #ccc;
+    border-radius: 0.5rem;
+    outline: none;
+    transition: border-color 0.3s ease;
 }
 
 /* Hover effect to change the border color */
 .finput:hover {
-    border-color: #3498db; 
+    border-color: #3498db;
 }
 
 
 .finput:focus {
-    border-color: #2980b9; 
+    border-color: #2980b9;
 }
 
 
@@ -2408,9 +2408,9 @@
   padding: 1rem;
   font-size: 1rem;
   border: 2px solid #000000; /* Made the box-border thinner */
-  border-radius: 0.5rem; 
-  outline: none; 
-  transition: border-color 0.3s ease; 
+  border-radius: 0.5rem;
+  outline: none;
+  transition: border-color 0.3s ease;
 }
 
 /* Hover effect to change the border color */
@@ -2490,11 +2490,11 @@
               .then(function(response) {
                   console.log('Email sent successfully:', response);
                   alert('Successfully subscribed to our newsletter!');
-                  location.reload(); 
+                  location.reload();
               }, function(error) {
                   console.error('Error sending email:', error);
                   alert('Failed to send email. Please try again later.');
-                  location.reload(); 
+                  location.reload();
               });
       });
   });
@@ -2541,7 +2541,7 @@
     <div class="circle"></div>
     <div class="circle"></div>
 
-  
+
   <style>
     /* Fixed translate button */
     *{
@@ -2552,15 +2552,15 @@
     top: -15rem;
     right: 4.4rem;
     z-index: 1000;
-    width: 5.3rem;  
+    width: 5.3rem;
     height: 5.3rem;
-    border-radius: 50%; 
-    border: none; 
-    background:linear-gradient(hwb(357 6% 36%),#d26d6d); 
-    color: white; 
-    text-align: center; 
-    display: inline-block; 
-    font-size: 1.6rem; 
+    border-radius: 50%;
+    border: none;
+    background:linear-gradient(hwb(357 6% 36%),#d26d6d);
+    color: white;
+    text-align: center;
+    display: inline-block;
+    font-size: 1.6rem;
     cursor: pointer;
     display: flex;
     justify-content: center;
@@ -2574,12 +2574,12 @@
     margin-right: 0px;
 }
 #translateButton:hover {
-    transform: scale(1.2); 
+    transform: scale(1.2);
 }
 
 /* The popup modal */
 .popup {
-    display: none; 
+    display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
@@ -2587,8 +2587,8 @@
     width: 100%;
     height: 100%;
     overflow: auto;
-    background-color: rgb(0,0,0); 
-    background-color: rgba(0,0,0,0.4); 
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
 }
 
 /* Popup content */
@@ -2651,13 +2651,13 @@
 
 /* Custom styles for the Google Translate dropdown */
 #google_translate_element select {
-    background: #ffffff; 
-    border: 0.1rem solid #ccc; 
-    color: #d26d6d; 
-    padding: 0.5rem; 
-    font-size: 1.4rem; 
-    border-radius: 0.5rem; 
-    
+    background: #ffffff;
+    border: 0.1rem solid #ccc;
+    color: #d26d6d;
+    padding: 0.5rem;
+    font-size: 1.4rem;
+    border-radius: 0.5rem;
+
 }
 
 /* Hide the Google Translate bar */
@@ -2706,7 +2706,7 @@
     // Get the <span> element that closes the popup
     var span = document.getElementsByClassName('close')[0];
 
-    // When the user clicks the button, open the popup 
+    // When the user clicks the button, open the popup
     btn.onclick = function() {
         popup.style.display = 'block';
     }
@@ -2752,7 +2752,7 @@
 
   <div class="socialmediaicons" style="z-index: 99;" >
 
-    
+
     <a class="active instagram" href="https://www.instagram.com/" class="" style="font-size: 2.5rem;" target="_blank">
       <i class="fa-brands fa-instagram"></i>
     </a>
@@ -2773,7 +2773,7 @@
     </a>
     <a class="active twitter" href="https://twitter.com/" style="font-size: 2.5rem; margin: 0 10px;" target="_blank">
       <i class="fa-brands fa-x-twitter"></i>
-    </a> 
+    </a>
 </div>
 
   <div id="cookie-consent">
@@ -2885,16 +2885,16 @@
         padding: 20px;
         width: 100%;
         display: flex;
-        flex-direction: column; 
+        flex-direction: column;
         align-items: center;
         justify-content: center;
     }
 
     .popup-nl h1 {
         font-size: 24px;
-        background: linear-gradient(to right, #ff3527, #fb5283, #ffd700); 
-        -webkit-text-fill-color: transparent; 
-        -webkit-background-clip: text; 
+        background: linear-gradient(to right, #ff3527, #fb5283, #ffd700);
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
         text-align: center;
         margin-bottom: 12px;
         margin-top: 35px;
@@ -2999,7 +2999,7 @@ <h2 class="h2-nl">Receive weekly books recommendation</h2>
     </div>
 </div>
 <script src="popup.js"></script>
-  
+
 
   <script src="script.js"></script>
 
@@ -3064,7 +3064,7 @@ <h2 class="h2-nl">Receive weekly books recommendation</h2>
   }
 });
 
-</script> 
+</script>
 <style>
   .dropdown {
       position: relative;
@@ -3099,7 +3099,7 @@ <h2 class="h2-nl">Receive weekly books recommendation</h2>
   }
   .arrow {
     transition: transform 0.3s; /* Smooth transition for arrow */
-} 
+}
 </style>
 <!--my code-->
 
@@ -3114,20 +3114,20 @@ <h2 class="h2-nl">Receive weekly books recommendation</h2>
         <a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
           <img src="./assets/images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px -10px;">
         </a>
-        
+
         <li class="navbar-item" style="margin-right: 10px;">
           <a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link>
             <i class="ri-home-fill"></i> Home
           </a>
         </li>
-        
-        
+
+
         <li class="navbar-item" style="margin-right: 10px;">
           <a href="./assets/html/about.html" class="navbar-link" data-nav-link>
             <i class="ri-information-fill"></i> AboutUs
           </a>
         </li>
-     
+
        <li class="navbar-item" style="margin-right: 10px;">
           <a href="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
               class="ri-bar-chart-fill"></i> Benefits</a>
@@ -3144,19 +3144,19 @@ <h2 class="h2-nl">Receive weekly books recommendation</h2>
             </a>
         </li>
 
-        
+
         <li class="navbar-item" style="margin-right: 10px;">
           <a href="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link>
             <i class="ri-contacts-fill"></i> Contact
           </a>
         </li>
-        
+
         <li class="navbar-item" id="login-signup-link" style="margin-right: 10px;">
           <a href="login-signup.html" class="navbar-link">
             <i class="ri-login-box-fill"></i> Login/Signup
           </a>
         </li>
-        
+
         <li class="navbar-item" style="margin-right: 10px;">
           <a href="#about-books" onclick="lenis.scrollTo('#about-books')" class="navbar-link" data-nav-link>
             <i class="ri-book-fill"></i> AboutBooks
@@ -3167,8 +3167,8 @@ <h2 class="h2-nl">Receive weekly books recommendation</h2>
             <i class="ri-community-fill"></i> Community
           </a>
         </li>
-    
-          
+
+
         <li>
         <div class="action" >
           <!-- <div class="profile" onclick="menuToggle();">
@@ -3195,8 +3195,8 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
               </li>
             </ul>
             </div>
-            </header>           
-            
+            </header>
+
             <script>
               document.addEventListener("DOMContentLoaded", () => {
                   const savedAvatar = localStorage.getItem("selectedAvatar");
@@ -3204,27 +3204,27 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
                       document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
                   }
               });
-      
+
               function menuToggle() {
                   const toggleMenu = document.querySelector(".menu");
                   toggleMenu.classList.toggle("active");
               }
-      
+
               document.addEventListener("click", function(event) {
                   const profile = document.querySelector(".profile");
                   const menu = document.querySelector(".menu");
-      
+
                   if (!profile.contains(event.target) && !menu.contains(event.target)) {
                       menu.classList.remove("active");
                   }
               });
-              
+
               // let lastScrollTop = 0;
               // const header = document.querySelector('.header');
-      
+
               // window.addEventListener('scroll', function() {
               //     let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      
+
               //     if (scrollTop > lastScrollTop) {
               //         // Downscroll
               //         header.style.transform = 'translateY(-120%)';
@@ -3232,11 +3232,11 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
               //         // Upscroll
               //         header.style.transform = 'translateY(0)';
               //     }
-      
+
               //     lastScrollTop = scrollTop;
               // });
           </script>
-    
+
   </div>
       <style>
         .dropdown:hover .arrow {
@@ -3301,9 +3301,9 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
             </li>
         </ul>
     </nav>
-     
-          
-           
+
+
+
               <script>
                 function toggleDropdown(event) {
                     event.preventDefault();
@@ -3318,27 +3318,27 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
                         document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
                     }
                 });
-        
+
                 function menuToggle() {
                     const toggleMenu = document.querySelector(".menu");
                     toggleMenu.classList.toggle("active");
                 }
-        
+
                 document.addEventListener("click", function(event) {
                     const profile = document.querySelector(".profile");
                     const menu = document.querySelector(".menu");
-        
+
                     if (!profile.contains(event.target) && !menu.contains(event.target)) {
                         menu.classList.remove("active");
                     }
                 });
-                
+
                 // let lastScrollTop = 0;
                 // const header = document.querySelector('.header');
-        
+
                 // window.addEventListener('scroll', function() {
                 //     let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        
+
                 //     if (scrollTop > lastScrollTop) {
                 //         // Downscroll
                 //         header.style.transform = 'translateY(-120%)';
@@ -3346,7 +3346,7 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
                 //         // Upscroll
                 //         header.style.transform = 'translateY(0)';
                 //     }
-        
+
                 //     lastScrollTop = scrollTop;
                 // });
             </script>
@@ -3384,16 +3384,16 @@ <h1>Logout Account</h1>
        <script>
         let menu = document.getElementById('mobile_View_Menu');
         let navbar_con = document.querySelector('.navbar');
-      
+
         menu.addEventListener('click', () => {
           // Toggle 'open_menu' on menu and 'nav_activated' on navbar container
           menu.classList.toggle('open_menu');
           navbar_con.classList.toggle('nav_activated');
         });
-        
+
       </script>
-      
-   
+
+
     <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
     <div className="wrapper col-md-3 col-12" style= "justify-Content: 'center'; display: 'flex'">
 
@@ -3528,7 +3528,7 @@ <h1 class="h1 hero-title" id="h1-hero-title-1" style="color: var(--text-color);"
                 }
                 }
                 typing();
-                
+
                 // Add CSS for blinking cursor
                 const style = document.createElement('style');
                 style.innerHTML = `
@@ -3572,7 +3572,7 @@ <h2>Play Now</h2>
 
               <h2 class="h2 section-title" style="text-align: center; margin-top: 7.9rem; padding-top: 2rem">ㅤㅤㅤㅤㅤUnleash the Magic of Book Swapping!</h2>
               <p class="section-text" style="width:100%;text-align:center;margin-left: 70px;">"SwapReads.com - Where Every Book is a Portal to a New
-                
+
                 Adventure!"</p>
             </div>
 
@@ -3593,7 +3593,7 @@ <h3 class="h3 card-title"   >Diverse Literary Adventures</h3>
                   <span class="span readmore-anim">Read more</span>
                   <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
                 </a> -->
-              
+
                 <a href="diverseLiteracy.html" class="cta1 style-9">
                   <span style="position: relative; top: 2.7rem;">Read More</span>
                   <svg width="1.3rem" height="1rem" viewBox="0 0 13 10">
@@ -3601,10 +3601,10 @@ <h3 class="h3 card-title"   >Diverse Literary Adventures</h3>
                     <polyline points="8 1 12 5 8 9"></polyline>
                   </svg>
                 </a>
-            
+
               </div>
             </li>
-            
+
 
             <li class="canvas">
               <div class="benefits-card has-before has-after">
@@ -3771,13 +3771,13 @@ <h1 class="h1 section-title has-underline" id="section-title2" style="padding-bo
             Literary Realms we've covered
             <span class="span has-before"></span>
           </h1>
- 
+
           <div class="carousell-wrapper">
             <i id="left-arrow" class="fa-solid fa-angle-left"></i>
-            
+
             <div class="carousell">
               <div class="litrealms_card">
-                <a class="cardo" href="romantic-esc.html"> 
+                <a class="cardo" href="romantic-esc.html">
                   <h3 class="lithead"> &nbsp;Romantic Escapes</h3>
                   <p class="small">Immerse yourself in the enchanting world of love and passion with our curated selection of romance fiction.</p>
                   <div class="go-corner">
@@ -3858,7 +3858,7 @@ <h3 class="lithead"> &nbsp;Inspiring Biographies</h3>
                 </a>
               </div>
             </div>
-            
+
             <i id="right-arrow" class="fa-solid fa-angle-right"></i>
           </div>
         </div>
@@ -3870,31 +3870,31 @@ <h3 class="lithead"> &nbsp;Inspiring Biographies</h3>
             let firstCardWidth = carousel.querySelector(".litrealms_card").offsetWidth;
             const arrowBtns = document.querySelectorAll(".carousell-wrapper i");
             const carouselChildrens = [...carousel.children];
-            
+
             const cardMargin = parseInt(window.getComputedStyle(carousel.querySelector(".litrealms_card")).marginRight);
-        
+
             let isDragging = false, startX, startScrollLeft;
-        
+
             const updateCardPerView = () => {
                 firstCardWidth = carousel.querySelector(".litrealms_card").offsetWidth + cardMargin;
                 return Math.floor(carousel.offsetWidth / firstCardWidth);
             }
-        
+
             let cardPerView = updateCardPerView();
-        
+
             // Insert copies of the last few cards to the beginning of the carousel for infinite scrolling
             carouselChildrens.slice(-cardPerView).reverse().forEach(card => {
                 carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
             });
-        
+
             // Insert copies of the first few cards to the end of the carousel for infinite scrolling
             carouselChildrens.slice(0, cardPerView).forEach(card => {
                 carousel.insertAdjacentHTML("beforeend", card.outerHTML);
             });
-        
+
             // Scroll the carousel to hide the duplicates and position it correctly
             carousel.scrollLeft = carousel.offsetWidth * cardPerView;
-        
+
             // Add event listeners for the arrow buttons to scroll the carousel left and right
             arrowBtns.forEach(btn => {
                 btn.addEventListener("click", () => {
@@ -3902,22 +3902,22 @@ <h3 class="lithead"> &nbsp;Inspiring Biographies</h3>
                     carousel.scrollLeft += btn.id === "left-arrow" ? -scrollAmount : scrollAmount;
                 });
             });
-        
+
             const dragStart = (e) => {
                 isDragging = true;
                 startX = e.pageX;
                 startScrollLeft = carousel.scrollLeft;
             }
-        
+
             const dragging = (e) => {
                 if (!isDragging) return;
                 carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
             }
-        
+
             const dragStop = () => {
                 isDragging = false;
             }
-        
+
             const infiniteScroll = () => {
                 // If at the beginning, scroll to the end
                 if (carousel.scrollLeft === 0) {
@@ -3928,12 +3928,12 @@ <h3 class="lithead"> &nbsp;Inspiring Biographies</h3>
                     carousel.scrollLeft = carousel.offsetWidth;
                 }
             }
-        
+
             carousel.addEventListener("mousedown", dragStart);
             carousel.addEventListener("mousemove", dragging);
             document.addEventListener("mouseup", dragStop);
             carousel.addEventListener("scroll", infiniteScroll);
-        
+
             // Adjust the carousel layout on window resize
             window.addEventListener("resize", () => {
                 cardPerView = updateCardPerView();
@@ -3941,9 +3941,9 @@ <h3 class="lithead"> &nbsp;Inspiring Biographies</h3>
             });
         });
         </script>
-        
-        
-        
+
+
+
 
       <!-- <section class="section chapters" id="chapters">
         <div class="container">
@@ -3958,7 +3958,7 @@ <h2 class="h2 section-title has-underline" id="section-title2">
           <ul class="grid-list">
 
             <li>
-              
+
               <a class="cardo" href="romantic-esc.html">
                 <h3 class="lithead">01. &nbsp;Romantic Escapes</h3>
                 <p class="small"> Immerse yourself in the enchanting world of love and passion with our curated
@@ -4164,7 +4164,7 @@ <h2 class="h2 section-title has-underline" id="section-title1">
                   <h3 class="h3 card-title">Classic Literature</h3>
                   <span style='font-size: 5rem;filter: grayscale(100%);'>&#128395;</span>
                 </div>
-                
+
 
                 <p class="card-text" >
                   The category of classic literature contains literature that is worthy of being read through the ages.
@@ -4172,7 +4172,7 @@ <h3 class="h3 card-title">Classic Literature</h3>
                   all writers whose works are considered classical literature.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Pride and Prejudice by Jane Austen</li>
@@ -4198,7 +4198,7 @@ <h3 class="h3 card-title">Romance</h3>
                   happy ending is always guaranteed, perhaps living 'happily ever after.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Pride and Prejudice by Jane Austen</li>
@@ -4225,7 +4225,7 @@ <h3 class="h3 card-title">Suspense Thriller</h3>
                   dangerous situations.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Gone Girl by Gillian Flynn</li>
@@ -4252,7 +4252,7 @@ <h3 class="h3 card-title">Science Fiction</h3>
                   speculative science.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Dune by Frank Herbert</li>
@@ -4278,7 +4278,7 @@ <h3 class="h3 card-title">Fantasy</h3>
                   evil.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. The Hobbit by J.R.R. Tolkien </li>
@@ -4304,7 +4304,7 @@ <h3 class="h3 card-title">Horror</h3>
                   terror.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Dracula by Bram Stoker </li>
@@ -4330,7 +4330,7 @@ <h3 class="h3 card-title">Biography</h3>
                   stories and achievements.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. The Diary of a Young Girl by Anne Frank</li>
@@ -4356,7 +4356,7 @@ <h3 class="h3 card-title">Self Help</h3>
                   relationships, productivity, and mental health.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. The 7 Habits of Highly Effective People by Stephen R. Covey </li>
@@ -4381,7 +4381,7 @@ <h3 class="h3 card-title">Historical Fiction</h3>
                 vivid characters and immersive storytelling.
               </p>
               <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
               </p>
               <ul class="book-list">
                 <li>1. The Book Thief by Markus Zusak </li>
@@ -4390,7 +4390,7 @@ <h3 class="h3 card-title">Historical Fiction</h3>
               </ul>
 
             </div>
-          </li> 
+          </li>
 
             <li>
               <div class="chapter-card">
@@ -4409,7 +4409,7 @@ <h3 class="h3 card-title">Poetry</h3>
                   human expression.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. The Waste Land by T.S. Eliot</li>
@@ -4436,7 +4436,7 @@ <h3 class="h3 card-title">Philosophy</h3>
                   diverse perspectives, fostering critical thinking and a deeper understanding of the human condition.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Meditations by Marcus Aurelius</li>
@@ -4462,7 +4462,7 @@ <h3 class="h3 card-title">Adventure</h3>
                   excitement, and a sense of discovery and wonder.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Treasure Island by Robert Louis Stevenson</li>
@@ -4487,7 +4487,7 @@ <h3 class="h3 card-title">Non-Fiction</h3>
                  Dive into the mysteries and secrets of the world surrounding us, and gain a deeper knowledge and history behind the wisdom of our correspondants and predecessors, through non-fiction.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Sapiens: A Brief History of Humankind by Yuval Noah Harari</li>
@@ -4511,7 +4511,7 @@ <h3 class="h3 card-title">Comedy</h3>
                   Are you feeling blue and want a good laugh? Well then, Comedy is the right genre for you! Grab a cup of coffee, lean back and dive into a world of humour, smiles and all sun!
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. The Hitchhiker's Guide to the Galaxy by Douglas Adams</li>
@@ -4536,7 +4536,7 @@ <h3 class="h3 card-title">Detective Fiction</h3>
                   Engage in exhillerating and challenging obstacles, unusual plot twists, and purposed setbacks to reach your end-goal with secret agents. Put your investigative and observative skills to the test, in the land of Detective Fiction.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. The Hound of the Baskervilles by Arthur Conan Doyle</li>
@@ -4553,12 +4553,12 @@ <h3 class="h3 card-title">Detective Fiction</h3>
                   <h3 class="h3 card-title">Fairy Tales</h3>
                     <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F9DA;</span>
                   </div>
-               
+
                 <p class="card-text">
                   A fairy tale is a whimsical story set in a magical world where heroes overcome obstacles and evil is vanquished. The essence of fairy tales is their promise of a happy ending, with characters finding their "happily ever after."
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Grimm's Fairy Tales by Jacob and Wilhelm Grimm</li>
@@ -4574,12 +4574,12 @@ <h3 class="h3 card-title">Fairy Tales</h3>
                   <h3 class="h3 card-title">Mythology</h3>
                     <span style='font-size:5rem;filter: grayscale(100%);'> &#x1F31F;</span>
                   </div>
-                
+
                 <p class="card-text">
                   Mythology encompasses the rich tapestry of stories and legends that have been passed down through generations. These tales often feature gods, heroes, and mythical creatures, exploring themes of creation, morality, and the human condition.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Mythology: Timeless Tales of Gods and Heroes by Edith Hamilton </li>
@@ -4595,13 +4595,13 @@ <h3 class="h3 card-title">Mythology</h3>
                   <h3 class="h3 card-title">Noir</h3>
                     <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F312;</span>
                   </div>
-                
+
                 <p class="card-text">
                   Noir fiction delves into the darker aspects of human nature, often featuring cynical characters, moral ambiguity, and a sense of impending doom. These stories are typically set in gritty urban environments and explore themes of crime, corruption, and existential despair.
                 </p>
               </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Double Indemnity by James M. Cain</li>
@@ -4617,12 +4617,12 @@ <h3 class="h3 card-title">Noir</h3>
                   <h3 class="h3 card-title">True Crime</h3>
                     <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F575; </span>
                   </div>
-                
+
                 <p class="card-text">
                   True Crime captivates audiences with real-life stories of crime, exploring motives, methods, and the justice system through detailed and factual narratives. These stories often provide deep insights into criminal minds and the complex pursuit of justice.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. In Cold Blood by Truman Capote</li>
@@ -4631,35 +4631,35 @@ <h3 class="h3 card-title">True Crime</h3>
                   </ul>
               </div>
 
-            </li>      
-            
+            </li>
+
             <li>
               <div class="chapter-card">
-            
+
                 <p class="card-subtitle">20</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Dystopian</h3>
                     <span style='font-size:5rem;filter: grayscale(100%);'>&#128740;</span>
                   </div>
-                
+
                 <p class="card-text">
                   Dystopian fiction explores grim and often nightmarish futures where society is characterized by oppression, deprivation, and despair. These stories challenge readers to reflect on current social and political issues by presenting exaggerated consequences of modern-day problems.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. 1984 by George Orwell</li>
                   <li>2. Fahrenheit 451 by Ray Bradbury</li>
                   <li>3. The Handmaid's Tale by Margaret Atwood</li>
                   </ul>
-            
+
               </div>
             </li>
-            
+
             <li>
               <div class="chapter-card">
-            
+
                 <p class="card-subtitle">21</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Magical Realism</h3>
@@ -4670,69 +4670,69 @@ <h3 class="h3 card-title">Magical Realism</h3>
                   Magical Realism blends magical elements with the real world, presenting extraordinary events as part of everyday life. This genre often explores the boundaries between reality and imagination, weaving fantastical occurrences into the fabric of the mundane.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. The Chronicles of Narnia by C.S. Lewis</li>
                   <li>2. Alice's Adventures in Wonderland by Lewis Carroll</li>
                   <li>3. The Night Circus by Erin Morgenstern</li>
                   </ul>
-            
+
               </div>
             </li>
-             
-            
+
+
             <li>
               <div class="chapter-card">
-            
+
                 <p class="card-subtitle">22</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Cyberpunk</h3>
                     <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F310;</span>
                   </div>
-            
+
                 <p class="card-text">
                   Cyberpunk delves into futuristic, dystopian societies where advanced technology intersects with societal decay. Featuring high-tech, low-life themes, these stories often explore the impacts of technology on human life, including issues of cybernetics, artificial intelligence, and corporate control.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Neuromancer by William Gibson</li>
                   <li>2. Snow Crash by Neal Stephenson</li>
                   <li>3. Altered Carbon by Richard K. Morgan</li>
                   </ul>
-            
+
               </div>
             </li>
-            
+
             <li>
               <div class="chapter-card">
-            
+
                 <p class="card-subtitle">23</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Utopian</h3>
                     <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F3DD;</span>
                   </div>
-            
+
                 <p class="card-text">
                   Utopian fiction presents idealized societies where social, political, and economic conditions are perfect. These stories often explore theoretical models of how human society might function in an ideal state, offering a contrast to real-world issues and inspiring visions of a better future.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Utopia by Thomas More</li>
                   <li>2. Brave New World by Aldous Huxley</li>
                   <li>3. The Dispossessed by Ursula K. Le Guin</li>
                   </ul>
-            
+
               </div>
             </li>
-            
+
             <li>
               <div class="chapter-card">
-            
+
                 <p class="card-subtitle">24</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Experimental Fiction</h3>
@@ -4743,17 +4743,17 @@ <h3 class="h3 card-title">Experimental Fiction</h3>
                   Experimental Fiction challenges conventional narrative structures and storytelling techniques. This genre is known for its innovative approaches, including fragmented narratives, unconventional formats, and metafictional elements, pushing the boundaries of traditional storytelling.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. House of Leaves by Mark Z. Danielewski</li>
                   <li>2. Ulysses by James Joyce</li>
                   <li>3. If on a winter's night a traveler by Italo Calvino</li>
                   </ul>
-            
+
               </div>
             </li>
-            
+
             <li>
               <div class="chapter-card">
                 <p class="card-subtitle">25</p>
@@ -4761,12 +4761,12 @@ <h3 class="h3 card-title">Experimental Fiction</h3>
                   <h3 class="h3 card-title">Satire</h3>
                     <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F3AD;</span>
                   </div>
-               
+
                 <p class="card-text">
                   A tribute to the visual, literary and performing arts, Satire books can give you a good laugh through verbal ingenuity, swift perception and the human understanding of sarcasm and irony in real-life.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Animal Farm by George Orwell</li>
@@ -4774,14 +4774,14 @@ <h3 class="h3 card-title">Satire</h3>
                   <li>3. The Hitchhiker's Guide to the Galaxy by Douglas Adams</li>
                   </ul>
               </div>
-            </li>          
+            </li>
 
-            </li> 
+            </li>
             <li>
               <div class="chapter-card">
-            
+
                 <p class="card-subtitle">26</p>
-                <div class="iconrow">                   
+                <div class="iconrow">
                 <h3 class="h3 card-title">Psychological Thriller</h3>
                     <span style='font-size:5rem;filter: grayscale(100%);'>&#x23F3;</span>
                   </div>
@@ -4790,36 +4790,36 @@ <h3 class="h3 card-title">Psychological Thriller</h3>
                   Psychological thrillers delve into the human psyche, creating suspense through mind games and unreliable narrators. They keep you guessing with twists and explore complex, often dark, motivations.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. Gone Girl by Gillian Flynn</li>
                   <li>2. The Girl on the Train by Paula Hawkins</li>
                   <li>3. Shutter Island by Dennis Lehane</li>
                   </ul>
-            
+
               </div>
             </li>
-             
+
             <li>
               <div class="chapter-card">
-            
+
                 <p class="card-subtitle">27</p>
-            
+
                 <h3 class="h3 card-title">Autobiography</h3>
-            
+
                 <p class="card-text">
                   A non-fiction account of a person's life written by that person, offering personal insight and reflection on their experiences.It serves as a means for the author to share their unique narrative, including the challenges they've faced and the lessons they've learned along the way.
                 </p>
                 <p class="book-recommendation">
-                  Book Recommendations: 
+                  Book Recommendations:
                 </p>
                 <ul class="book-list">
                   <li>1. The Story of My Life by Helen Keller</li>
                   <li>2. Becoming by Michelle Obama</li>
                   <li>3. Educated by Tara Westover</li>
                   </ul>
-            
+
               </div>
             </li>
           </ul>
@@ -4934,7 +4934,7 @@ <h2 class="h2 section-title has-underline" style="margin-bottom: 0px;">
             });
           }
         });
-         
+
 
         // Form submission
         document.getElementById("connectReaderBtn").addEventListener("click", function () {
@@ -4993,14 +4993,14 @@ <h2 class="h2 section-title has-underline" style="margin-bottom: 0px;">
 
           document.getElementById("predictedPrice").textContent = "Predicted Price: "; // Reset predicted price display
         }
-        
+
           document.getElementById("connectReaderBtn").addEventListener("click", submitForm);   // Event listener for the submit button
-          
+
       });
     </script>
   </div>
 </section>
-      
+
 
 <!-- Donation of Books -->
 <br>
@@ -5109,7 +5109,7 @@ <h1>Donate Books</h1>
   <div class="container">
 
 
-    
+
     <!-- Card 1 -->
     <div class="card" onmouseover="hoverCard(this)" onmouseout="unhoverCard(this)">
       <img src="./assets/images/images/lib.jpg" alt="Library Image" loading="lazy" >
@@ -5121,7 +5121,7 @@ <h3 class="card-sty">Library</h3>
         </div>
       </div>
     </div>
-  
+
 
     <!-- Card 2 -->
     <div class="card" onmouseover="hoverCard(this)" onmouseout="unhoverCard(this)">
@@ -5134,7 +5134,7 @@ <h3 class="card-sty">Schools</h3>
         </div>
       </div>
     </div>
-    
+
     <!-- Card 3 -->
     <div class="card" onmouseover="hoverCard(this)" onmouseout="unhoverCard(this)">
       <img src="./assets/images/images/ngo.jpeg" alt="Organization Image" loading="lazy" >
@@ -5215,7 +5215,7 @@ <h3>Rate Us</h3>
             <h3>Rateus</h3>
             <p>Tell us about your experience!</p>
         </div>
-    
+
         <div class="stars">
             <input type="radio" id="star5" name="rate" value="5" />
             <label for="star5">😭</label>
@@ -5228,17 +5228,17 @@ <h3>Rateus</h3>
             <input type="radio" id="star1" name="rate" value="1" />
             <label for="star1">😍</label>
         </div>
-    
+
         <div class="feedback-container">
             <textarea id="feedback" placeholder="Enter your feedback..." rows="4"></textarea>
         </div>
-    
+
         <div class="button">
-          
+
             <center><button id="submit-btn">Submit</button></center>
         </div>
     </div>
-    
+
     <div id="toastMessage" class="toast-message"></div>
     <script>
      document.addEventListener("DOMContentLoaded", function() {
@@ -5256,7 +5256,7 @@ <h3>Rateus</h3>
         toastMessage.textContent = "Feedback submitted successfully!";
         toastMessage.style.backgroundColor = "green";
         showToastMessage();
-        
+
         // Reset form fields
         document.getElementById("feedback").value = "";
         let starInputs = document.querySelectorAll('input[name="rate"]');
@@ -5309,20 +5309,20 @@ <h3>Rateus</h3>
 
 
   <!-- --Contact Us -->
-                                    
+
 <section class="section-contact" id="contact" aria-label="contact">
   <h1 class="h1 section-title has-underline" style="margin-top: 15px;">
     Contact Us!
     <span class="span has-before"></span>
   </h1>
-  <p class="p" style="color:#e7a7e8">Have a Question?</p> 
+  <p class="p" style="color:#e7a7e8">Have a Question?</p>
   <h3 style="text-align: center; color: #4f1316;">GET IN TOUCH</h3>
   <div class="flexi">
     <div class="contact" >
       <div class="contact-container">
         <form class="contact-form" id="contactForm" >
           <label for="name" class="label">Name</label>
-          <input type="text" id="name" name="name" placeholder="Your Name" required required pattern="[a-zA-Z ]+" oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')" 
+          <input type="text" id="name" name="name" placeholder="Your Name" required required pattern="[a-zA-Z ]+" oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
           oninput="this.setCustomValidity('')">
 
           <label for="email" class="label">Email</label>
@@ -5411,19 +5411,19 @@ <h3 style="text-align: center; color: #4f1316;">GET IN TOUCH</h3>
 });
   </script>
 
-      
+
 
     </article>
   </main>
 
-  
+
 
   <h2 class="h2 section-title has-underline" style="margin-top: 10.5rem;">
     Testimonials
     <span class="span has-before"></span>
   </h2>
   <p class="section-subtitle" style="text-align: center;">Know what our customers say</p>
-  
+
   <swiper-container class="mySwiper" pagination="true" pagination-clickable="true" navigation="true" space-between="40" loop="true">
     <swiper-slide>
       <div class="flip-card">
@@ -5500,9 +5500,9 @@ <h2>Aron Loes</h2>
           </div>
         </div>
       </div>
-      <div class="swiper-pagination" 
+      <div class="swiper-pagination"
      style="width: 100%; display: flex; justify-content: center;">
-  <span class="swiper-pagination-bullet" 
+  <span class="swiper-pagination-bullet"
         style="width: 15px; height: 15px; background-color: #aaa;"></span>
 </div>
 
@@ -5593,7 +5593,7 @@ <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
     </br>
     <div class="faq-container">
       <div class="question">
-        
+
         <h4>How does SwapReads work?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
@@ -5672,8 +5672,8 @@ <h4>What if I receive a damaged book?</h4>
 
 
   </div>
-  
-  
+
+
   <style>
     @import url('https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css');
 
@@ -5737,7 +5737,7 @@ <h4>What if I receive a damaged book?</h4>
 }
 
 </style>
-        
+
 <script>
   function showSuccessMessage() {
     // Show success message
@@ -5751,20 +5751,20 @@ <h4>What if I receive a damaged book?</h4>
     successMessage.style.borderRadius = '8px';
     successMessage.style.marginTop = '20px';
     successMessage.style.textAlign = 'center';
-    
+
     // Append the success message to the form container
     const formContainer = document.querySelector('.newsletter-container');
     formContainer.appendChild(successMessage);
-    
+
     // Reset the form after 3 seconds
     setTimeout(function() {
       document.getElementById('newsletterForm').reset();
       successMessage.style.display = 'none';
     }, 3000);
-    
-    return false; 
+
+    return false;
   }
-  
+
   // Attach the function to the form submission
   document.getElementById('newsletterForm').addEventListener('submit', function(e) {
     e.preventDefault();
@@ -5773,7 +5773,7 @@ <h4>What if I receive a damaged book?</h4>
 </script>
 
 <style>
-  
+
   #name{
     margin-top: 1.2rem;
   }
@@ -5784,7 +5784,7 @@ <h4>What if I receive a damaged book?</h4>
     margin-top: 1.2rem;
   }
 </style>
-   
+
 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
@@ -5794,7 +5794,7 @@ <h4>What if I receive a damaged book?</h4>
       const question = faq.querySelector('.question');
 
       question.addEventListener('click', () => {
-        
+
         faqContainers.forEach(otherFaq => {
           if (otherFaq !== faq) {
             const otherAnswers = otherFaq.querySelector('.answers');
@@ -5840,7 +5840,7 @@ <h4>What if I receive a damaged book?</h4>
   </div>
   <script src="path/to/visitorCounter.js"></script>
   <script src="./assets/css/visitors.css"></script>
- 
+
     <script src="./assets/js/visitors.js"></script>
 
 
@@ -5927,7 +5927,7 @@ <h2 style="margin-left: 0rem; margin-top: 0rem;">Quick Links</h2>
           #quicklinks:hover{
             text-decoration: none;
           }
-          .social-icons input[type="email"] 
+          .social-icons input[type="email"]
           {
               border: 0.2rem solid #ccc; /* Gray border */
               border-radius: 0.4rem; /* Rounded corners */
@@ -5942,9 +5942,9 @@ <h2 style="margin-left: 0rem; margin-top: 0rem;">Quick Links</h2>
 
           }
          /* for small screen */
-          @media (max-width: 768px) 
+          @media (max-width: 768px)
           {
-            #confirmationMessage 
+            #confirmationMessage
             {
                 margin-left: 0;
                 text-align: center;
@@ -5967,22 +5967,22 @@ <h2 style="margin-left: 0rem; margin-top: 0rem;">Quick Links</h2>
 }
 
         </style>
- 
-    
+
+
   <script>
   function showConfirmationMessage() {
 
   const form = document.getElementById('newsform');
   const confirmationMessage = document.getElementById('confirmationmessage');
 
-  
+
   confirmationMessage.style.display = 'block';
   setTimeout(function() {
-    location.reload(); 
+    location.reload();
   }, 3000);
 
 
- 
+
 }
 
 
@@ -5991,13 +5991,13 @@ <h2 style="margin-left: 0rem; margin-top: 0rem;">Quick Links</h2>
 <style>
   .subscribe {
     background-color: #A30F17;
-    color: white; 
-    border: none; 
-    padding: 1rem 2rem; 
-    font-size: 1.6rem; 
+    color: white;
+    border: none;
+    padding: 1rem 2rem;
+    font-size: 1.6rem;
     font-family: Arial, sans-serif;
-    border-radius: 0.5rem; 
-    cursor: pointer; 
+    border-radius: 0.5rem;
+    cursor: pointer;
     margin-top: 5px;
   }
 
@@ -6027,9 +6027,9 @@ <h2 style="margin-left: 0rem; margin-top: 0rem;">Quick Links</h2>
   }
 </style>
 
-        
+
 <!--<script>
-  function showSuccessMessage() 
+  function showSuccessMessage()
   {
     // Show success message
     const successMessage = document.getElementById('successMessage');
@@ -6037,20 +6037,20 @@ <h2 style="margin-left: 0rem; margin-top: 0rem;">Quick Links</h2>
     successMessage.style.display = 'block';
 
     // Reset the form after 3 seconds
-    setTimeout(function() 
+    setTimeout(function()
     {
         document.getElementById('newsletterForm').reset();
         successMessage.style.display = 'none';
-        
+
     }, 3000);
 
-    return false; 
+    return false;
 }
 
 function showSuccessMessage() {
     var name = document.getElementById('name').value;
     var email = document.getElementById('email').value;
-    
+
     if (name && email) {
         document.getElementById('successmessage').style.display = 'block';
         document.getElementById('newsform').reset();
@@ -6061,17 +6061,17 @@ <h2 style="margin-left: 0rem; margin-top: 0rem;">Quick Links</h2>
 </script>-->
 
 
-<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> 
+<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
 
 <div class="newsletter">
     <h1>Subscribe to Our Newsletter</h1>
     <p>Stay updated with our latest news and offers</p>
-    
+
     <form id="newsform" onsubmit="return showSuccessMessage();">
         <div class="input-group">
             <i class="fas fa-user"></i>
-            <input type="text" id="name" placeholder="Your Name" required pattern="[a-zA-Z ]+" 
-            oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')" 
+            <input type="text" id="name" placeholder="Your Name" required pattern="[a-zA-Z ]+"
+            oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
 
             oninput="this.setCustomValidity('')">
         </div>
@@ -6088,8 +6088,8 @@ <h1>Subscribe to Our Newsletter</h1>
 
 
 
-        
-        
+
+
        </div>
        <div>
         <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
@@ -6116,12 +6116,12 @@ <h1>Subscribe to Our Newsletter</h1>
         <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
       </p>
       <div class="row-copy">
- 
+
       <a href="copyrightpolicy.html" id="copyrightPolicyLink">Copyright Policy</a> |
       <a href="privacynotice.html" id="privacyNoticeLink">Privacy Notice</a>  |
       <a href="our-vision.html" id="ourvisionlink">Our Vision</a></li> |
       <a href="./contributors/contributor.html" id="ourvisionlink">Our Contributors </a></li>
-    
+
     </div>
     </div>
     <style>
@@ -6235,7 +6235,7 @@ <h1>Privacy Notice</h1>
   <script src="./assets/js/script.js" defer></script>
 
 
-  
+
   <script>
     document.addEventListener('DOMContentLoaded', (event) => {
       let subject_full= document.getElementById("subject-full");
@@ -6280,7 +6280,7 @@ <h1>Privacy Notice</h1>
   */
 
   document.getElementById("subs_btn").addEventListener("submit", function(event) {
-  event.preventDefault(); 
+  event.preventDefault();
 
   // const email_input = document.getElementById("newsletter-email").value;
 
@@ -6304,7 +6304,7 @@ <h1>Privacy Notice</h1>
 
   <script>
 
-  
+
     function toggleDarkMode() {
       const isDarkMode = isDarkModePreferred();
       setDarkModePreference(!isDarkMode);
@@ -6326,22 +6326,22 @@ <h1>Privacy Notice</h1>
     document.addEventListener('DOMContentLoaded', () => {
       const currentTheme = localStorage.getItem('theme');
       const switchCheckbox = document.getElementById('switch');
-    
+
       if (!switchCheckbox) {
         console.error("Switch checkbox not found!");
         return;
       }
-    
+
       const applyDarkModeStyles = () => {
         document.body.classList.remove('light-mode');
         document.body.classList.add('dark-mode');
       };
-    
+
       const applyLightModeStyles = () => {
         document.body.classList.remove('dark-mode');
         document.body.classList.add('light-mode');
       };
-    
+
       const initializeTheme = () => {
         if (currentTheme === 'dark-mode') {
           applyDarkModeStyles();
@@ -6350,7 +6350,7 @@ <h1>Privacy Notice</h1>
           applyLightModeStyles();
         }
       };
-    
+
       const handleThemeChange = () => {
         if (switchCheckbox.checked) {
           applyDarkModeStyles();
@@ -6360,11 +6360,11 @@ <h1>Privacy Notice</h1>
           localStorage.setItem('theme', 'light-mode');
         }
       };
-    
+
       initializeTheme();
       switchCheckbox.addEventListener('change', handleThemeChange);
     });
-    
+
   </script>
 
 
@@ -6753,7 +6753,7 @@ <h1>Privacy Notice</h1>
     document.getElementById("scrollBtn").addEventListener("click", function() {
         // Get the height of the viewport
         const viewportHeight = window.innerHeight;
-        
+
         // Scroll down by one viewport height
         window.scrollBy({
             top: viewportHeight,