diff --git a/assets/html/horror.html b/assets/html/horror.html
index 444112ac..4c35d622 100644
--- a/assets/html/horror.html
+++ b/assets/html/horror.html
@@ -36,14 +36,10 @@
   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
   <link rel="stylesheet" href="../css/styles.css">
-  <title>Authors</title>
+  <link href="https://fonts.googleapis.com/css2?family=Georgia&display=swap" rel="stylesheet">
+  
+  <title>Horror Books</title>
   <style>
-    :root {
-      --charcoal: hsl(203, 30%, 26%);
-
-  --ff-philosopher: "Philosopher", sans-serif;
-
-}
     /* Circle styles */
     .circle {
       height: 24px;
@@ -57,88 +53,76 @@
       z-index: 99999999;
       transition: transform 0.1s ease-out;
     }
-    .card-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  margin: 20px;
-}
-
-.card {
-  perspective: 1000px;
-  margin: 20px;
-}
-
-.card-inner {
-  position: relative;
-  width: 200px;
-  height: 300px;
-  transition: transform 0.6s;
-  transform-style: preserve-3d;
-}
+    /* Container for the switch */
+  .switch-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
 
-.card.flip .card-inner {
-  transform: rotateY(180deg);
-}
+  /* Hide default checkbox */
+  .switch-checkbox {
+    display: none;
+  }
 
-.card-front, .card-back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  border-radius: 10px;
-  overflow: hidden;
-}
+  /* Style the label */
+  .switch-label {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 50px;
+    height: 24px;
+    border-radius: 50px;
+    background-color: #ccc;
+    transition: background-color 0.3s ease;
+    position: relative;
+  }
 
-.card-front {
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #ccc;
-}
+    /* Style the toggle button */
+  .switch-button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 5px;
+    position: absolute; /* Fixes the position */
+    left: 0; /* Keeps the button fixed */
+  }
 
-.card-back {
-  background-color: #4a4a4a;
-  color: white;
-  transform: rotateY(180deg);
-  padding: 10px;
-}
+  /* Sun and moon icon styles */
+  .sun-icon,
+  .moon-icon {
+    font-size: 16px;
+    transition: opacity 0.3s ease;
+  }
 
-.card-image {
-  width: 75%;
-  height: auto;
-  border-radius: 12px;
-  border-bottom: 1px solid #ccc;
-}
+  /* Color the icons */
+  .sun-icon {
+    color: orange; /* Sun icon color */
+  }
 
-.dark-mode {
-  background-color: #121212;
-  color: #e0e0e0;
-}
+  .moon-icon {
+    color: lightblue; /* Moon icon color */
+    opacity: 0; /* Initially hidden */
+  }
 
-.dark-mode .card-front {
-  background-color: #1e1e1e;
-  border: 1px solid #333;
-}
+  /* Style for checked state */
+  .switch-checkbox:checked + .switch-label {
+    background-color: #333;
+  }
 
-.dark-mode .card-front h1 {
-  background-color: rgb(87, 1, 50);
-  border: 1px solid #333;
-  color: #e0e0e0;
-}
+  .switch-checkbox:checked + .switch-label .sun-icon {
+    opacity: 0; /* Hide sun icon in dark mode */
+  }
 
-.dark-mode .card-back {
-  background-color: #2e2e2e;
-}
-.dark-mode .card-back p{
-  color:whitesmoke;
-}
+  .switch-checkbox:checked + .switch-label .moon-icon {
+    opacity: 1; /* Show moon icon in dark mode */
+  }
+  .switch-checkbox:checked + .switch-label {
+    left:100px;
+  }
 
-.dark-mode .card-image {
-  filter: brightness(0.8);
-}
   </style>
 </head>
 
@@ -149,7 +133,7 @@
   <div class="circle"></div>
   <div class="circle"></div>
   <div class="circle"></div>
-  <div class="circle"></div> 
+  <div class="circle"></div>
   <div class="circle"></div>
   <div class="circle"></div>
   <div class="circle"></div>
@@ -190,17 +174,27 @@
       top: 20px;
       right: 30px;
     }
- 
+    .heading {
+  text-align: center; /* Center the text */
+  font-size: 3.5em; /* Increase the size of the heading */
+  color: #2c3e50; /* A darker shade for better contrast */
+  margin-top: 18rem; /* Maintain the top margin */
+  font-family: 'Georgia', serif; /* Change to a serif font for a classic look */
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow for depth */
+  letter-spacing: 0.05em; /* Slightly increase space between letters */
+}
+
+
     .action .profile {
-       
+
       position: relative;
-      width:  60px;
-      height:  60px;
-      border-radius:  50%;
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
       overflow: hidden;
       cursor: pointer;
     }
-  
+
     /* profile section*/
 
     .action .profile img {
@@ -473,7 +467,10 @@
         flex-wrap: wrap;
       }
 
-      .about-us-block .about-us-community, .about-us-product, .about-us-location, .about-us-event {
+      .about-us-block .about-us-community,
+      .about-us-product,
+      .about-us-location,
+      .about-us-event {
         width: 80% !important;
       }
     }
@@ -484,20 +481,14 @@
     }
 
 
-
-
-
-
-
-
     .card-container {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 20px;
+      gap: 100px;
       /* Increased padding from 30px to 80px to seperate the navbar with the cards */
       padding: 80px;
       margin-top: 70px;
-      max-width: 1200px;
+      max-width: 1600px;
     }
 
     .card {
@@ -513,11 +504,10 @@
       height: 100%;
       transition: transform 0.6s;
       transform-style: preserve-3d;
-      
-      justify-content: center;
     }
 
-    .card-front, .card-back {
+    .card-front,
+    .card-back {
       position: absolute;
       width: 100%;
       height: 100%;
@@ -532,32 +522,188 @@
 
     /* Changes required here */
     .card-front {
-    background-color: #f59595;
-    color: rgb(189, 7, 86);
-    font-size: 1.8em;
-    text-align: center;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex; /* Use flexbox to center content */
-    align-items: center; /* Center vertically */
-    justify-content: center; /* Center horizontally */
-}
+      background-color: #f59595;
+      /* Changed color of text to match current UI and also make it visible */
 
-.card-front h1 {
-    background: #e97070;
-    margin: 0; /* Remove default margin */
-}
+      font-size: 1.8em;
+      text-align: center;
+      position: absolute;
+    }
+
+    .card-front h1 {
+      position: relative;
+      bottom: -230px;
+      font-size: 25px;
+
+    }
 
-    
     /* Added: Image for J.K. Rowling */
-    .children{
-      background-image: url("");
-      background-size: cover;           /* Ensures the image covers the div */
-      background-position: center;      /* Centers the image */
-      background-repeat: no-repeat;     /* Prevents repeating */
+    .a {
+      background-image: url("../images/it.jpeg");
+      background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    .b{
+        background-image: url("../images/shining.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+    }
+
+    .c {
+        background-image: url("../images/dracula.jpeg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+    }
+
+    .d{
+        background-image: url("../images/haunting.jpeg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+    }
+
+    .e {
+        background-image: url("../images/birdbox.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+    }
+
+    .f {
+        background-image: url("../images/exorcist.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+    }
+
+    /* Added: Image for Mark Twain */
+    .g{
+        background-image: url("../images/petsematory.jpeg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for George Orwell */
+    .h{
+        background-image: url("../images/mist.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Agatha Christie */
+    .i {
+        background-image: url("../images/silence.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Dr. Seuss */
+    .j {
+        background-image: url("../images/houses.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Jane Austen */
+    .k{
+        background-image: url("../images/coraline.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Charles Dickens */
+    .l {
+        background-image: url("../images/girlwith.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for William Shakespeare */
+    .m {
+        background-image: url("../images/wwz.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for H.G. Wells */
+    .n{
+        background-image: url("../images/cabinet.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    .o{
+        background-image: url("../images//institute.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    .p{
+        background-image: url("../images/ghost.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
     }
 
+   
+
+
     .card-back {
       background-color: #ffffff;
       color: #333;
@@ -567,8 +713,9 @@
       font-size: 1em;
       line-height: 1.6em;
       border: 2px solid #f1bb63;
-      
+
     }
+
     .card-back h3 {
       color: #ff4ff9;
       font-size: 1.2em;
@@ -585,203 +732,194 @@
       transform: rotateY(180deg);
     }
 
-#page-title {
- 
-    visibility: visible;
-    opacity: 1;
-    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-    transition: 0.3s ease-in-out, opacity 2s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0.1s;
-    font-family: var(--ff-philosopher);
-    
 
-}
 
-#page-title h3 {
+    /* footer  */
 
-    color: var(--charcoal);
-    font-family: var(--ff-philosopher);
-    line-height: 1.2;
-   
+    .socialmediaicons {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      position: fixed;
+      margin-top: 120px;
+      ;
+      width: 40px;
+      height: 150px;
+
+    }
+
+    #quicklinks {
+      display: flex;
+      justify-content: space-between;
+      /* Ensures columns are evenly spaced */
+    }
 
+    #quicklinks .col-md-6 ul {
+      list-style-type: none;
+      padding: 0;
+    }
 
+    #quicklinks .foot-quick {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      /* Adjust spacing between list items */
+    }
 
-}
+    #quicklinks .foot-quick a {
+      text-decoration: none;
+      color: rgb(83, 74, 74);
+      /* Adjust link color as needed */
+      display: flex;
+      align-items: center;
+    }
 
+    #quicklinks .foot-quick a i {
+      margin-right: 5px;
+      /* Adjust spacing between icon and text */
+    }
 
+    .dark-mode .fas {
+      color: white;
+    }
 
+    .dark-mode .flinks {
 
+      color: #80ddf4;
 
+    }
 
+    .dark-mode .finput {
+      color: white;
+      background-color: transparent;
+      padding: 10px;
+      border: 1px solid white;
 
-    /* footer  */
+    }
 
-.socialmediaicons {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    margin-top: 120px;;
-    width: 40px;
-    height: 150px;
-  
-}#quicklinks {
-  display: flex;
-  justify-content: space-between; /* Ensures columns are evenly spaced */
-}
+    .dark-mode .finput::placeholder {
+      color: rgba(255, 255, 255, 0.6);
+    }
 
-#quicklinks .col-md-6 ul {
-  list-style-type: none;
-  padding: 0;
-}
+    .socialmediaicons a {
+      display: inline;
+      text-align: center;
+      padding: 5px;
+      transition: all 0.3s ease;
+      color: rgb(0, 0, 0);
+      font-size: 20px;
+    }
 
-#quicklinks .foot-quick {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px; /* Adjust spacing between list items */
-}
+    .socialmediaicons .fa-instagram {
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+      border-radius: 10px;
+      background: transparent;
+      color: #000000;
+      transition: background 0.3s, transform 0.3s;
+    }
 
-#quicklinks .foot-quick a {
-  text-decoration: none;
-  color: rgb(83, 74, 74); /* Adjust link color as needed */
-  display: flex;
-  align-items: center;
-}
+    .socialmediaicons .fa-instagram:hover {
+      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);
 
-#quicklinks .foot-quick a i {
-  margin-right: 5px; /* Adjust spacing between icon and text */
-}
-.dark-mode .fas{
-  color:white;
-}
+    }
 
-.dark-mode .flinks{
-  
-  color: #80ddf4;
+    .socialmediaicons .fa-facebook:hover {
+      color: blue;
+    }
+
+    .socialmediaicons .fa-youtube:hover {
+      color: red;
+    }
 
-}
 
-.dark-mode .finput{
+    .dark-mode .socialmediaicons a {
       color: white;
-      background-color: transparent; 
-      padding: 10px; 
-      border: 1px solid white;
-      
-}
-.dark-mode .finput::placeholder {
-      color: rgba(255, 255, 255, 0.6); 
-    }
-.socialmediaicons a {
-    display: inline;
-    text-align: center;
-    padding: 5px;
-    transition: all 0.3s ease;
-    color: rgb(0, 0, 0);
-    font-size: 20px;
-  }
+    }
 
-  .socialmediaicons .fa-instagram {
-  display: inline-block;
-  width: 30px; 
-  height: 30px; 
-  text-align: center;
-  line-height: 30px; 
-  border-radius: 10px;
-  background: transparent;
-  color: #000000;
-  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%, 
-                               #3e57bc 100%);
-  background-clip: padding-box;
-  border-radius: 10px; 
-  color: white; 
-  transform: scale(1.1); 
-  
-}  
-.socialmediaicons .fa-facebook:hover{
-  color: blue;
-}   
-.socialmediaicons .fa-youtube:hover{
-  color: red;
-}
+    .dark-mode .socialmediaicons .fa-facebook:hover {
+      color: #425d9b
+    }
 
+    .dark-mode .socialmediaicons .fa-youtube:hover {
+      color: #f70000;
+    }
 
-.dark-mode .socialmediaicons a {
-  color: white;
-}
+    .instagram {
 
+      margin: 5px;
 
-.dark-mode .socialmediaicons .fa-facebook:hover {
-  color: #425d9b
-}
-.dark-mode .socialmediaicons .fa-youtube:hover {
-  color: #f70000;
-}
+    }
 
-  .instagram {
-    
-    margin: 5px;
-    
-  }
 
+    .facebook {
 
-  .facebook {
-    
-    margin: 5px;
-  }
-  
-  .youtube {
-   
-    margin: 5px;
-  }
+      margin: 5px;
+    }
 
-  .input-box {
-    position: relative;
-    width: 100%;
-}
+    .youtube {
 
-.input {
-    width: 100%;
-    padding-right: 40px; /* Space for the eye icon */
-}
+      margin: 5px;
+    }
 
-#eyeicon-register {
-    position: absolute;
-    top: 70%;
-    right: 10px; /* Adjust as needed */
-    transform: translateY(-50%);
-    cursor: pointer;
-    width: 35px; /* Adjust the size of the icon */
-    height: 30px;
-}
-.but{
-  font-size: x-large;
-}
+    .input-box {
+      position: relative;
+      width: 100%;
+    }
 
-.navbar-item {
-  list-style: none;
-}
+    .input {
+      width: 100%;
+      padding-right: 40px;
+      /* Space for the eye icon */
+    }
 
-.navbar-link {
-  display: inline-flex;
-  align-items: center;
-  text-decoration: none;
-  color: inherit;
-}
+    #eyeicon-register {
+      position: absolute;
+      top: 70%;
+      right: 10px;
+      /* Adjust as needed */
+      transform: translateY(-50%);
+      cursor: pointer;
+      width: 35px;
+      /* Adjust the size of the icon */
+      height: 30px;
+    }
 
-.navbar-link lord-icon {
-  display: inline-block;
-  margin-right: 8px;
-  vertical-align: middle;
-}
-body.dark-mode {
+    .but {
+      font-size: x-large;
+    }
+
+    .navbar-item {
+      list-style: none;
+    }
+
+    .navbar-link {
+      display: inline-flex;
+      align-items: center;
+      text-decoration: none;
+      color: inherit;
+    }
+
+    .navbar-link lord-icon {
+      display: inline-block;
+      margin-right: 8px;
+      vertical-align: middle;
+    }
+    body.dark-mode {
       background-color: #121212;
       color: #ffffff;
     background-image: url('../images/darkmode_bg.png'); /* Add your dark mode image */
@@ -789,101 +927,54 @@
     background-position: center; /* Centers the background image */
     background-repeat: no-repeat; /* Prevents the image from repeating */
   }
-
-
-.top10{
-    margin-top: 150px;
-}
   </style>
   <header class="header header-anim nav-h" data-header>
 
-    <div class="container mobile-container-styles" >
+    <div class="container mobile-container-styles">
 
       <nav class="navbar nav_activated" data-navbar>
 
 
         <ul class="navbar-list nav">
-          <a href="../../index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
-            <img src="../images/final.png" class="logopic" style=" width: 150px;">
+          <a href="/" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
+            <img src="../images/final.png" class="logopic" style=" width: 150px; margin-left: 50px;">
           </a>
           <li class="navbar-item">
             <a href="../../index.html" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link>
-              <lord-icon
-              src="https://cdn.lordicon.com/qeltvbrs.json"
-              trigger="hover"
-              colors="primary:#e88c30,secondary:#a30f17"
-              style="width:25px;height:25px">
-            </lord-icon> Home</a>
+              Home</a>
           </li>
-         
+
           <li class="navbar-item">
             <a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link"
-              data-nav-link><lord-icon
-              src="https://cdn.lordicon.com/jibxifeu.json"
-              trigger="hover"
-              state="hover-up"
-              colors="primary:#a30f17,secondary:#e88c30"
-              style="width:25px;height:25px">
-          </lord-icon>Benefits</a>
+              data-nav-link>Benefits</a>
           </li>
 
           <li class="navbar-item">
             <a href="../../index.html#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link>
-              <lord-icon
-              src="https://cdn.lordicon.com/bhmovrlt.json"
-              trigger="hover"
-              state="morph-open"
-              colors="primary:#a30f17,secondary:#e88c30"
-              style="width:25px;height:25px">
-          </lord-icon>   Genre</a>
+               Genre</a>
           </li>
-        </li>
-        <li class="navbar-item">
-          <a href="../../index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link"> <lord-icon
-            src="https://cdn.lordicon.com/jxjfjyri.json"
-            trigger="morph"
-            stroke="bold"
-            state="morph-select"
-            colors="primary:#eeaa66,secondary:#e88c30"
-            style="width:25px;height:25px">
-        </lord-icon> Rate Us</a>
-        </li>
+          </li>
+    
 
           <li class="navbar-item">
             <a href="../../index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
-                class="ri-customer-service-2-fill"></i><img src="../images/telephone.png" height="25px" width="25px"/> Contact</a>
+                class="ri-customer-service-2-fill"></i>
+              Contact</a>
           </li>
-          
+
           <li class="navbar-item">
             <a href="../../index.html#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
-              <lord-icon
-              src="https://cdn.lordicon.com/motnbmtz.json"
-              trigger="hover"
-              stroke="bold"     
-              colors="primary:#a30f17,secondary:#e88c30"
-              style="width:25px;height:25px">
-          </lord-icon> FAQ
+              FAQ
             </a>
-            </li>
-         
+          </li>
+
 
           <li class="navbar-item">
             <a href="../html/about.html" class="navbar-link" data-nav-link>
-              <lord-icon
-              src="https://cdn.lordicon.com/fozsorqm.json"
-              trigger="hover"
-              stroke="bold"
-              state="hover-up"
-              colors="primary:#a30f17,secondary:#e88c30"
-              style="width:30px;height:30px"></lord-icon> About Us   </a>
+               About Us </a>
           </li>
-           
-          <li class="navbar-item" id="login-signup-link">
-            <a href="top10.html" class="navbar-link" style="left: -30px;">Top10<br>Books</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"
@@ -894,20 +985,19 @@
 
               <ul class="dropdown-menu-list">
                 <li class="dropdown-menu-item">
-                  <a href="../../chatt.html" class="navbar-link"
-                    style="font-family: sans-serif;  margin-bottom: 5px;">
+
+        <a href="../../chat.html" class="navbar-link" style="font-family: sans-serif;  margin-bottom: 5px;">
+
                     Community chat
                   </a>
                 </li>
                 <li class="dropdown-menu-item">
-                  <a href="tips.html" class="navbar-link"
-                    style="font-family: sans-serif;  margin-bottom: 5px;">
-                   Tips
+                  <a href="tips.html" class="navbar-link" style="font-family: sans-serif;  margin-bottom: 5px;">
+                    Tips
                   </a>
                 </li>
                 <li class="dropdown-menu-item">
-                  <a href="bookpref.html" class="navbar-link"
-                    style="font-family: sans-serif;  margin-bottom: 5px;">
+                  <a href="bookpref.html" class="navbar-link" style="font-family: sans-serif;  margin-bottom: 5px;">
                     Book Prefer Quiz
                   </a>
                 </li>
@@ -941,33 +1031,26 @@
               </ul>
             </div>
           </li>
-          <li class="navbar-item" id="login-signup-link">
-            <a href="../html/login.html" class="navbar-link"> <lord-icon
-              src="https://cdn.lordicon.com/xfzuyvam.json"
-              trigger="morph"
-              state="morph-group"
-              colors="primary:#a30f17,secondary:#e88c30"
-              style="width:25px;height:25px">
-          </lord-icon>Login/Signup</a>
-          </li>
+       
+          <!-- Theme switcher -->
           <div class="switch-container">
             <input type="checkbox" id="switch" class="switch-checkbox">
-            <label for="switch" class="switch-label" style="margin-left: 120px; left: 200px;
-    margin-top: -30px;">
+            <label for="switch" class="switch-label" style="margin-left: 120px;">
               <div class="switch-button">
                 <span class="material-icons sun-icon">wb_sunny</span>
                 <span class="material-icons moon-icon">brightness_2</span>
               </div>
             </label>
           </div>
+
           <li>
             <div class="action">
-              
+
               <!-- <div class="menu">
-                <h3 id="profileNameDisplay">XYZ<br /><span>Book Lover</span></h3>
+                <h3>XYZ<br /><span>Book Lover</span></h3>
                 <ul>
                   <li>
-                    <img src="../images/user.jpg" /><a href="../../profile.html">My profile</a>
+                    <img src="../images/user.jpeg" /><a href="../../profile.html">My profile</a>
                   </li>
                   <li>
                     <img src="../images/edit profile.jpg" /><a href="../html/profileedit.html">Edit profile</a>
@@ -991,17 +1074,12 @@ <h3 id="profileNameDisplay">XYZ<br /><span>Book Lover</span></h3>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         const savedAvatar = localStorage.getItem("selectedAvatar");
-        const savedName = localStorage.getItem("profileName");
         if (savedAvatar) {
           document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
         }
-        if (savedName) {
-            document.getElementById("profileNameDisplay").textContent = `${savedName}`;
-        } else {
-            document.getElementById("profileNameDisplay").textContent = "Welcome, Guest!";
-        }
       });
-// Theme switcher
+
+        // Theme switcher
         document.addEventListener('DOMContentLoaded', function () {
           const toggleSwitch = document.querySelector('.switch-container input[type="checkbox"]');
           const bodyElement = document.body;
@@ -1027,7 +1105,6 @@ <h3 id="profileNameDisplay">XYZ<br /><span>Book Lover</span></h3>
           });
         });
 
-
       function menuToggle() {
         const toggleMenu = document.querySelector(".menu");
         toggleMenu.classList.toggle("active");
@@ -1117,7 +1194,7 @@ <h3 id="profileNameDisplay">XYZ<br /><span>Book Lover</span></h3>
 
         <ion-icon name="close-outline" aria-hidden="true" class="md hydrated close"></ion-icon>
       </button> -->
-     <!-- <div class="switch-container" style="top: 25px;">
+    <!-- <div class="switch-container" style="top: 25px;">
       <input type="checkbox" id="switch" class="switch-checkbox">
       <label for="switch" class="switch-label">
         <div class="switch-button">
@@ -1135,19 +1212,18 @@ <h3 id="profileNameDisplay">XYZ<br /><span>Book Lover</span></h3>
 
 
 
-<!-- Changes here -->
- 
-<!-- Card Container -->
-<div class="top10">
-  <div id="page-title" >
-  <h1 >HORROR BOOKS</h1>
-</div>
+  <!-- Changes here --> 
+   
+  <h1 class="heading">Horror Books</h1>
+
+  <!-- Card Container -->
+
   <h3>Explore each book further by clicking on the covers!</h3></div>
   <div class="card-container" style="margin-top: -20px;">
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>It</h1></div>
+      <div class="card-front a"><h1>It</h1></div>
       <div class="card-back">
         <h3>Author: Stephen King</h3>
         <p><strong>Summary:</strong> A group of friends confronts a shape-shifting entity that takes the form of their worst fears, especially a monstrous clown.</p>
@@ -1158,7 +1234,7 @@ <h3>Author: Stephen King</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>The Shining</h1></div>
+      <div class="card-front b"><h1>The Shining</h1></div>
       <div class="card-back">
         <h3>Author: Stephen King</h3>
         <p><strong>Summary:</strong> A family wintering at an isolated hotel encounters supernatural forces that push them to the edge of sanity.</p>
@@ -1169,7 +1245,7 @@ <h3>Author: Stephen King</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>Dracula</h1></div>
+      <div class="card-front c"><h1>Dracula</h1></div>
       <div class="card-back">
         <h3>Author: Bram Stoker</h3>
         <p><strong>Summary:</strong> Count Dracula's attempt to move from Transylvania to England brings terror to the blood of the living.</p>
@@ -1180,7 +1256,7 @@ <h3>Author: Bram Stoker</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>Frankenstein</h1></div>
+      <div class="card-front d"><h1>Frankenstein</h1></div>
       <div class="card-back">
         <h3>Author: Mary Shelley</h3>
         <p><strong>Summary:</strong> A scientist's creation of life leads to horrific consequences as he battles with his creature and his own guilt.</p>
@@ -1191,7 +1267,7 @@ <h3>Author: Mary Shelley</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>The Haunting of Hill House</h1></div>
+      <div class="card-front e"><h1>The Haunting of Hill House</h1></div>
       <div class="card-back">
         <h3>Author: Shirley Jackson</h3>
         <p><strong>Summary:</strong> A chilling exploration of a haunted mansion where strange occurrences test reality and madness.</p>
@@ -1202,7 +1278,7 @@ <h3>Author: Shirley Jackson</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>Bird Box</h1></div>
+      <div class="card-front f"><h1>Bird Box</h1></div>
       <div class="card-back">
         <h3>Author: Josh Malerman</h3>
         <p><strong>Summary:</strong> In a world overtaken by unseen creatures that drive people insane on sight, a mother tries to protect her children.</p>
@@ -1213,7 +1289,7 @@ <h3>Author: Josh Malerman</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>The Exorcist</h1></div>
+      <div class="card-front g"><h1>The Exorcist</h1></div>
       <div class="card-back">
         <h3>Author: William Peter Blatty</h3>
         <p><strong>Summary:</strong> The harrowing tale of a young girl possessed by a demon, and her mother's desperate fight for her daughter's salvation.</p>
@@ -1224,7 +1300,7 @@ <h3>Author: William Peter Blatty</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>Pet Sematary</h1></div>
+      <div class="card-front h"><h1>Pet Sematary</h1></div>
       <div class="card-back">
         <h3>Author: Stephen King</h3>
         <p><strong>Summary:</strong> A family discovers the terrifying power of a pet cemetery that brings dead animals back to life.</p>
@@ -1235,7 +1311,7 @@ <h3>Author: Stephen King</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>The Silence of the Lambs</h1></div>
+      <div class="card-front i"><h1>The Silence of the Lambs</h1></div>
       <div class="card-back">
         <h3>Author: Thomas Harris</h3>
         <p><strong>Summary:</strong> An FBI trainee seeks help from an incarcerated serial killer to catch another killer.</p>
@@ -1246,7 +1322,7 @@ <h3>Author: Thomas Harris</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>House of Leaves</h1></div>
+      <div class="card-front j"><h1>House of Leaves</h1></div>
       <div class="card-back">
         <h3>Author: Mark Z. Danielewski</h3>
         <p><strong>Summary:</strong> A family discovers that their house contains seemingly infinite spaces, leading to unsettling consequences.</p>
@@ -1257,7 +1333,7 @@ <h3>Author: Mark Z. Danielewski</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>Coraline</h1></div>
+      <div class="card-front k"><h1>Coraline</h1></div>
       <div class="card-back">
         <h3>Author: Neil Gaiman</h3>
         <p><strong>Summary:</strong> A young girl finds an eerie alternate version of her home, with sinister secrets waiting within.</p>
@@ -1268,7 +1344,7 @@ <h3>Author: Neil Gaiman</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>The Girl with All the Gifts</h1></div>
+      <div class="card-front l"><h1>The Girl with All the Gifts</h1></div>
       <div class="card-back">
         <h3>Author: M.R. Carey</h3>
         <p><strong>Summary:</strong> In a post-apocalyptic world, a young girl holds the key to humanity's survival amidst a zombie-like plague.</p>
@@ -1279,7 +1355,7 @@ <h3>Author: M.R. Carey</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>World War Z</h1></div>
+      <div class="card-front m"><h1>World War Z</h1></div>
       <div class="card-back">
         <h3>Author: Max Brooks</h3>
         <p><strong>Summary:</strong> An oral history of the global struggle to survive a zombie pandemic.</p>
@@ -1290,7 +1366,7 @@ <h3>Author: Max Brooks</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>The Cabin at the End of the World</h1></div>
+      <div class="card-front n"><h1>The Cabin at the End of the World</h1></div>
       <div class="card-back">
         <h3>Author: Paul Tremblay</h3>
         <p><strong>Summary:</strong> A family vacation at a remote cabin is interrupted by strangers with an ominous message.</p>
@@ -1301,7 +1377,7 @@ <h3>Author: Paul Tremblay</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>The Institute</h1></div>
+      <div class="card-front o"><h1>The Institute</h1></div>
       <div class="card-back">
         <h3>Author: Stephen King</h3>
         <p><strong>Summary:</strong> Children with special abilities are abducted and held captive by a sinister institution.</p>
@@ -1313,7 +1389,7 @@ <h3>Author: Stephen King</h3>
 
   <div class="card" onclick="this.classList.toggle('flip')">
     <div class="card-inner">
-      <div class="card-front"><h1>Ghost Story</h1></div>
+      <div class="card-front p"><h1>Ghost Story</h1></div>
       <div class="card-back">
         <h3>Author: Peter Straub</h3>
         <p><strong>Summary:</strong> Four friends are haunted by a supernatural event from their past, with terrifying consequences.</p>
@@ -1322,395 +1398,760 @@ <h3>Author: Peter Straub</h3>
     </div>
   </div>
 </div>
+  
 
-<footer>
+  <div class="pagination">
+    <button id="prevPage" onclick="prevPage()">Previous</button>
+    <span id="pageIndicator">Page 1</span>
+    <button id="nextPage" onclick="nextPage()">Next</button>
+  </div>
+
+  <footer class="ff">
     <div class="foot-top">
       <div class="foot-left">
+  
         <div class="desc">
-
-          <a href="#" class="logo">SwapReads</a>
-          <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book lovers
-            seeking to swap and
-
-            discover new literary gems.
-            Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in the
-            world of literature—all on one convenient platform. Join us and dive into a universe of endless
-            possibilities!
-          </p>
-        </div>
-      </div>
-      <div class="foot-middle">
-        <h2>Quick Links</h2>
-        <div id="quicklinks">
+  <!--google translate-->
+          <!-- <div id="google_translate_element"></div>
+  
+          <script type="text/javascript">
+              function googleTranslateElementInit() {
+                  new google.translate.TranslateElement(
+                      {pageLanguage: 'en'},
+                      'google_translate_element'
+                  );
+              }
+          </script>
+  
+          <script type="text/javascript"
+                  src=
+      "https://translate.google.com/translate_a/element.js?
+      cb=googleTranslateElementInit">
+          </script> -->
+          <div class="SwapReads" ><a href="#" class="logo" style="margin: 0px 40px">SwapReads</a></div>
           <div>
-          <ul>
-            <li class="foot-quick"><a href="../../index.html" onclick="lenis.scrollTo('#home')">Home</a></li>
-            <li class="foot-quick"><a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
-            <li class="foot-quick"><a href="../../index.html#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
-            <li class="foot-quick"><a href="../../index.html#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
-            <li class="foot-quick"><a href="book_recommend.html"
-              onclick="lenis.scrollTo('#contact')">Recommended Book</a></li>
-          </ul>
-        </div>
-        <div>
-          <ul>
-            <li class="foot-quick"><a href="addremovebook.html" onclick="lenis.scrollTo('#contact')">Swap
-                BookList</a></li>
-            <li class="foot-quick"><a href="freeBooks.html"
-                onclick="lenis.scrollTo('#contact')">E-Book</a></li>
-            <li class="foot-quick"><a href="../../index.html#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
-          </ul>
+            <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
+              lovers
+              seeking to swap and
+  
+              discover new literary gems.
+              Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
+              the
+              world of literature—all on one convenient platform. Join us and dive into a universe of endless
+              possibilities!
+            </p>
+          </div>
+  
         </div>
+      </div>
+      <div class="foot-middle" style="padding: 20px; ">
+        <h2 style="font-size: 24px; margin-bottom: 15px; ">Quick Links</h2>
+        <div id="quicklinks" class="row" style="display: flex; gap: 20px;">
+          <!-- First Column -->
+          <div class="col-md-6" style="flex: 1;">
+            <ul style="list-style: none; padding: 0; margin: 0;">
+              <li class="foot-quick" style="margin-bottom: 10px;">
+                <a href="/index.html#home" onclick="lenis.scrollTo('#home')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                  <i class="fas fa-home" style="margin-right: 8px;"></i>
+                  <p class="flinks" style="margin: 0;">Home</p>
+                </a>
+              </li>
+              <li class="foot-quick" style="margin-bottom: 10px;">
+                <a href="/index.html#benefits" onclick="lenis.scrollTo('#benefits')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                  <i class="fas fa-book" style="margin-right: 8px;"></i>
+                  <p class="flinks" style="margin: 0;">Benefits</p>
+                </a>
+              </li>
+              <li class="foot-quick" style="margin-bottom: 10px;">
+                <a href="/index.html#chapters" onclick="lenis.scrollTo('#chapters')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                  <i class="fas fa-globe" style="margin-right: 8px;"></i>
+                  <p class="flinks" style="margin: 0;">Literary</p>
+                </a>
+              </li>
+              <li class="foot-quick" style="margin-bottom: 10px;">
+                <a href="/index.html#pricing" onclick="lenis.scrollTo('#pricing')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                  <i class="fas fa-dollar-sign" style="margin-right: 8px;"></i>
+                  <p class="flinks" style="margin: 0;">Pricing</p>
+                </a>
+              </li>
+              <li class="foot-quick" style="margin-bottom: 10px;">
+                <a href="book_recommend.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                  <i class="fas fa-bookmark" style="margin-right: 8px;"></i>
+                  <p class="flinks" style="margin: 0;">Recommend</p>
+                </a>
+              </li>
+            </ul>
+          </div>
+      
+          <!-- Second Column -->
+          <div class="col-md-6" style="flex: 1;">
+            <ul style="list-style: none; padding: 0; margin: 0;">
+              <li class="foot-quick" style="margin-bottom: 10px;">
+                <a href="/assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                  <i class="fas fa-exchange-alt" style="margin-right: 8px;"></i>
+                  <p class="flinks" style="margin: 0;">Swap</p>
+                </a>
+              </li>
+              <li class="foot-quick" style="margin-bottom: 10px;">
+                <a href="/assets/html/freeBooks.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                  <i class="fas fa-file-pdf" style="margin-right: 8px;"></i>
+                  <p class="flinks" style="margin: 0;">E-Book</p>
+                </a>
+              </li>
+              <li class="foot-quick" style="margin-bottom: 10px;">
+                <a href="/assets/html/about.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                  <i class="fas fa-info-circle" style="margin-right: 8px;"></i>
+                  <p class="flinks" style="margin: 0;">About</p>
+                </a>
+              </li>
+              <li class="foot-quick" style="margin-bottom: 10px;">
+                <a href="/index.html#contact" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                  <i class="fas fa-envelope" style="margin-right: 8px;"></i>
+                  <p class="flinks" style="margin: 0;">Contact</p>
+                </a>
+              </li>
+              <li class="foot-quick" style="margin-bottom: 10px;">
+                <a href="/index.html#faqq" onclick="lenis.scrollTo('#faqq')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                  <i class="fas fa-question-circle" style="margin-right: 8px;"></i>
+                  <p class="flinks" style="margin: 0;">FAQ</p>
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
-      <div class="social-icons">
-        <!-- <h5>Newsletter</h5> -->
-        <!-- <div class="input-newletter">
-          <label for="newsletter"><h5>Newsletter</h5></label>
-          <input placeholder="Enter your email" type="email" ></input>
-          <button class="btn-subs">Subscribe</button>
-        </div> -->
-
+      
         <style>
-          input[type="email"] {
+          .social-icons input[type="email"] 
+          {
               border: 2px solid #ccc; /* Gray border */
               border-radius: 4px; /* Rounded corners */
               padding: 10px; /* Inner padding */
               font-size: 16px; /* Font size */
           }
-        </style>
+          #confirmationMessage
+          {
+            margin-left: 50px;
+            font-size: 23px;
+            color: green;
   
-        <form type="newsletter">
-          <label for="newsletter-email">Subscribe to our Newsletter</label>
-          <div class="row-flex">
-              <!-- Email input -->
-              <input type="email" id="newsletter-email" name="email" placeholder="email address" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\.com$" 
-              title="Please enter a valid email address that ends with '.com'" required>
-              <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn">
-          </div>
-        </form>
-
-        <style>
-          .icons .icon i {
-            font-size: 24px;
-            /* Set the default font size for icons */
-            transition: all 0.3s ease;
-            /* Add transition for smooth animation */
           }
+         /* for small screen */
+          @media (max-width: 768px) 
+          {
+            #confirmationMessage 
+            {
+                margin-left: 0;
+                text-align: center;
+                font-size: 18px;
+            }
+        }
+        </style>
+        <style>
+          #confirmationmessage {
+    position: fixed;
+    top: 42rem;
+    right: 10px;
+    background-color: green;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    display: none;
+  }
   
-          .icons .icon:hover i {
-            transform: scale(1.2);
-            /* Scale the icon on hover */
-          }
+        </style>
   
-          .icons .icon:hover .fab.fa-linkedin {
-            color: #3B5998;
-            /* Change to linkedin color on hover */
-          }
-          .icon:hover .fab.fa-discord {
-             color: #7289da; /* Slightly lighter color on hover, adjust as needed */
-          }
+  <form id="newsform" onsubmit="return showConfirmationMessage();">
+    <label for="new-email" class="news-form">Subscribe to our Newsletter</label>
+    <div class="row-flex display-flex">
+        <input class="finput" type="email" id="new-email" name="email" 
+               placeholder="Email address" 
+               pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\.com$"
+               title="Please enter a valid email address that ends with '.com'" required>
+        <input type="submit" value="Subscribe" name="subscribe" class="subscribe" id="subs">
+    </div>
+  </form>
   
-          .icons .icon:hover .fab.fa-twitter{
-            color: #090e11;
-            /* Change to Twitter color on hover */
-          }
+  <div id="confirmationmessage" style="display: none;">Thank you for subscribing!</div>
   
-          .icons .icon:hover .fab.fa-instagram {
-            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
-            background-clip: text;
-            border-radius: 20%;
-            transform: scale(1.5);
-            color:transparent;
-            /* Change to Instagram color on hover */
-          }
+  <script>
+  function showConfirmationMessage() {
+    const form = document.getElementById('newsform');
+    const confirmationMessage = document.getElementById('confirmationmessage');
   
-          .icons .icon:hover .fab.fa-youtube {
-            color: #C31A1E;
-            /* Change to YouTube color on hover */
-          }
-          .icons .icon:hover .fab.fa-github {
-                    color: #333;
-                }
-        </style>
+    confirmationMessage.style.display = 'block';
+    setTimeout(function() {
+        location.reload(); 
+    }, 3000);
+  }
+  </script>
+  
+  <style>
+  .finput:hover {
+    border: 0.2rem solid #A30F17;
+    margin-bottom: -0.2rem;
+  }
+  form {
+    width: 500px;
+    height: 300px;
+    font-size: larger;
+  }
+  
+  .subscribe {
+    background-color: #A30F17;
+    color: white; 
+    border: none; 
+    padding: 10px 20px; 
+    font-size: 16px; 
+    font-family: Arial, sans-serif;
+    border-radius: 5px; 
+    cursor: pointer; 
+    transition: background-color 0.3s, transform 0.2s;
+  }
+  
+  .subscribe:hover {
+    background: linear-gradient(hwb(357 6% 36%), #d26d6d);
+    transform: scale(1.1);
+  }
+  
+  .subscribe:active {
+    transform: scale(0.98); 
+  }
+  
+  .subscribe:focus {
+    outline: none; 
+  }
+  
+  .icons {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 150px;
+  }
+  
+  /* Add this to change the placeholder text color */
+  input::placeholder {
+    color: rgb(58, 56, 56); /* Set placeholder text color to black */
+  }
+  </style>
+  
+  
+  <!-- <script>
+  function showConfirmationMessage() 
+  {
+    // Show confirmation message
+    const confirmationMessage = document.getElementById('confirmationMessage');
+    confirmationMessage.innerHTML = "Thank you for subscribing!";
+    confirmationMessage.style.display = 'block';
+  
+    // Reset the form after 3 seconds
+    setTimeout(function() 
+    {
+        document.getElementById('newsletterForm').reset();
+        confirmationMessage.style.display = 'none';
+        
+    }, 3000);
+  
+    return false; 
+  }
+  </script>-->
         <div class="icons">
           <a href="https://www.discord.com/" target="_blank">
-             <div class="icon">
-                <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
+            <div class="icon">
+              <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
+            </div>
+           </a>
+  
+          <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
+            <div class="icon">
+              <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
             </div>
           </a>
-
-          <a href="https://www.linkedin.com/in/anurag-verma-b91417253/">
+  
+          <a href="https://www.facebook.com/" target="_blank">
             <div class="icon">
-              <i class="fab fa-linkedin title="linkedin style="cursor: pointer;"></i>
+              <i class="fab fa-facebook" title="Facebook" style="cursor: pointer;"></i>
             </div>
           </a>
   
-          <a href="https://x.com/anuragverma_108">
+          <a href="https://x.com/anuragverma_108" target="_blank">
             <div class="icon">
               <i class="fab fa-twitter" title="X"style="cursor: pointer;"></i>
             </div>
           </a>
   
-          <a href="#">
-            <div class="icon">
+          <a href="https://www.instagram.com/">
+            <div class="icon" id="insta-icon">
               <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
             </div>
           </a>
   
-          <a href="https://www.youtube.com/@anuragbytes" title="YouTube">
+  
+          <a href="https://www.youtube.com/@anuragbytes" target="_blank" title="YouTube">
             <div class="icon">
               <i class="fab fa-youtube" style="cursor: pointer;"></i>
             </div>
           </a>
-          <a href="https://github.com/anuragverma108" title="GitHub">
+  
+  
+  
+          <a href="https://github.com/anuragverma108">
             <div class="icon">
-                <i class="fab fa-github" style="cursor: pointer;"></i>
+              <i class="fab fa-github" title="Github"></i>
             </div>
           </a>
+         
+  
         </div>
-
-        <div id="back-to-top-container" onclick="lenis.scrollTo('#home')">
-          <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" />
-            </svg>
-          </div>
+       </div>
+  
+       <div>
+        <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
+          <button class="Btn">
+            <svg height="1.2em" class="arrow" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path></svg>
+            <p class="text">Back to Top</p>
+          </button>
         </div>
+        <!-- <div>
+          <button id="translateButton" style="background-color: #A30F17; transition:all 1s ease 0.1s;">Translate</button>
+        </div> -->
       </div>
+  
+      
     </div>
-
-      <div style="text-align: center; align-items: center;">
-        <p style="text-align: center">
-          &copy;
-          <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
-          Hackers.
-        </p>
+  <!-- <style>
+    #translateButton:hover{
+      background: linear-gradient(hwb(357 6% 36%), #d26d6d);
+      transform:scale(1.1);
+    }
+  </style> -->
+  
+    <!-- adding privacy policy and copyright popup-->
+    <div class="footer-f" style="text-align: center; align-items: center;">
+      <p style="text-align: center">
+        &copy;
+        <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="\SwapReads\refundpolicy.html">Refund Policy</a>
+    </div>
+    </div>
+    <style>
+      #copyrightPolicyLink:hover{
+        color: rgb(126, 0, 21);
+        transition: 0.5s ease;
+        text-decoration: none;
+      }
+      #privacyNoticeLink:hover{
+        color: rgb(126, 0, 21);
+        transition: 0.5s ease;
+        text-decoration: none;
+      }
+      #ourvisionLink:hover{
+        color: rgb(126, 0, 21);
+        transition: 0.5s ease;
+        text-decoration: none;
+      }
+    </style>
   
+    <!-- Copyright Policy Modal -->
+    <div id="copyrightPolicyModal" class="modal">
+      <div class="modal-content">
+        <span class="close" id="closeCopyright">&times;</span>
+        <h1>Copyright Policy</h1>
+        <p>Welcome to SwapReads. Here is our copyright policy:</p>
+        <ul>
+          <li>All content on this website is owned by SwapReads unless otherwise stated.</li>
+          <li>You may not reproduce, distribute, or use the content without prior written permission.</li>
+          <li>Users may download and print content for personal use only.</li>
+          <li>Unauthorized use of any content may violate copyright, trademark, and other laws.</li>
+          <li>If you believe your copyrighted work is being infringed upon, please contact us with detailed information.</li>
+        </ul>
       </div>
+    </div> 
+  
+    <!-- Privacy Notice Modal -->
+    <div id="privacyNoticeModal" class="modal">
+      <div class="modal-content">
+        <span class="close" id="closePrivacy">&times;</span>
+        <h1>Privacy Notice</h1>
+        <p>Welcome to SwapReads. Here is our privacy notice:</p>
+        <ul>
+          <li>We collect personal information when you register, buy, or sell books.</li>
+          <li>We use this information to provide and improve our services.</li>
+          <li>We do not share your personal information with third parties without your consent.</li>
+          <li>We take reasonable measures to protect your data from unauthorized access.</li>
+          <li>You can contact us to update or delete your personal information.</li>
+          <li>By using our site, you consent to our privacy practices.</li>
+        </ul>
+      </div>
+    </div> 
+  
+    <script>
+      // Get the modal elements
+      var copyrightModal = document.getElementById("copyrightPolicyModal");
+      var privacyModal = document.getElementById("privacyNoticeModal");
+  
+      // Get the link elements
+      var copyrightLink = document.getElementById("copyrightPolicyLink");
+      var privacyLink = document.getElementById("privacyNoticeLink");
+  
+      // Get the <span> elements that close the modals
+      var closeCopyright = document.getElementById("closeCopyright");
+      var closePrivacy = document.getElementById("closePrivacy");
+  
+      // When the user clicks the link, open the modal
+      copyrightLink.onclick = function() {
+        copyrightModal.style.display = "block";
+      }
+      privacyLink.onclick = function() {
+        privacyModal.style.display = "block";
+      }
+  
+      // When the user clicks on <span> (x), close the modal
+      closeCopyright.onclick = function() {
+        copyrightModal.style.display = "none";
+      }
+      closePrivacy.onclick = function() {
+        privacyModal.style.display = "none";
+      }
+  
+      // When the user clicks anywhere outside of the modal, close it
+      window.onclick = function(event) {
+        if (event.target == copyrightModal) {
+          copyrightModal.style.display = "none";
+        }
+        if (event.target == privacyModal) {
+          privacyModal.style.display = "none";
+        }
+      }
+    </script>
+    
   </footer>
-  <div>
-    <button id="translateButton">Translate</button>
-  </div>
-  <style>
-    /* Fixed translate button */
-#translateButton {
-    position: fixed;
-    /* bottom: 20px; */
-    top:-15rem;
-    right: 4.4rem;
-    z-index: 1000;
-    width: 53px;  
-    height: 53px;
-    border-radius: 50%; 
-    border: none; 
-    background:linear-gradient(hwb(357 6% 36%),#d26d6d); 
-    color: white; 
-    text-align: center; 
-    display: inline-block; 
-    font-size: 16px; 
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
-    line-height: 1;
-    text-align: center;
-    white-space: nowrap;
-    transition: transform 0.3s ease;
-    margin-top: 75.8vh;
-    margin-right:opx;
-}
-#translateButton:hover {
-    transform: scale(1.2); 
-}
-/* The popup modal */
-.popup {
-    display: none; 
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0,0,0); 
-    background-color: rgba(0,0,0,0.4); 
-}
-/* Popup content */
-.popup-content {
-  background:linear-gradient(hwb(357 6% 36%),#d26d6d);
-    margin-top: 600px;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 300px;
-    border-radius: 10px;
-    position: relative;
-    margin-left: 1160px;
-    /* margin-right: 0px; */
-}
-/* Close button */
-.close {
-    color: #073725;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-    cursor: pointer;
-}
-.close:hover,
-.close:focus {
-    color: black;
-    text-decoration: none;
-}
-/* Hide the default Google Translate widget */
-.goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon {
-    display: none !important;
-}
-body {
-    top: 0px !important;
-}
-/* Hide the "Powered by Google" branding */
-.goog-logo-link {
-    display: none !important;
-}
-.goog-te-gadget {
-    height: 28px !important;
-    overflow: hidden;
-}
-/* Hide Google Translate notifications */
-.goog-te-spinner-pos,
-.goog-te-spinner,
-.goog-te-balloon-frame,
-.goog-te-banner-frame,
-.goog-te-banner,
-.goog-te-balloon {
-    display: none !important;
-}
-/* Custom styles for the Google Translate dropdown */
-#google_translate_element select {
-    background: #ffffff; 
-    border: 1px solid #ccc; 
-    color: #d26d6d; 
-    padding: 5px; 
-    font-size: 14px; 
-    border-radius: 5px; 
-}
-/* Hide the Google Translate bar */
-body > .skiptranslate {
-    display: none !important;
-}
-.goog-te-banner-frame.skiptranslate {
-    display: none !important;
-}
-.goog-te-banner-frame {
-    display: none !important;
-}
-.goog-te-banner {
-    display: none !important;
-}
-  </style>
-  <script>
-    document.addEventListener('DOMContentLoaded', function() {
-    // Get the popup
-    var popup = document.getElementById('translatePopup');
-    // 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 
-    btn.onclick = function() {
-        popup.style.display = 'block';
-    }
-    // When the user clicks on <span> (x), close the popup
-    span.onclick = function() {
-        popup.style.display = 'none';
-    }
-    // When the user clicks anywhere outside of the popup, close it
-    window.onclick = function(event) {
-        if (event.target == popup) {
+  
+
+    <div>
+      <button id="translateButton">Translate</button>
+    </div>
+    <style>
+      /* Fixed translate button */
+  
+      #translateButton {
+        position: fixed;
+        /* bottom: 20px; */
+        top: -15rem;
+        right: 4.4rem;
+        z-index: 1000;
+        width: 53px;
+        height: 53px;
+        border-radius: 50%;
+        border: none;
+        background: linear-gradient(hwb(357 6% 36%), #d26d6d);
+        color: white;
+        text-align: center;
+        display: inline-block;
+        font-size: 16px;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+        line-height: 1;
+        text-align: center;
+        white-space: nowrap;
+        transition: transform 0.3s ease;
+        margin-top: 75.8vh;
+        margin-right: opx;
+      }
+  
+      #translateButton:hover {
+        transform: scale(1.2);
+      }
+  
+      /* The popup modal */
+      .popup {
+        display: none;
+        position: fixed;
+        z-index: 1000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgb(0, 0, 0);
+        background-color: rgba(0, 0, 0, 0.4);
+      }
+  
+      /* Popup content */
+      .popup-content {
+        background: linear-gradient(hwb(357 6% 36%), #d26d6d);
+        margin-top: 600px;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 300px;
+        border-radius: 10px;
+        position: relative;
+        margin-left: 1160px;
+        /* margin-right: 0px; */
+      }
+  
+      /* Close button */
+      .close {
+        color: #073725;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+        cursor: pointer;
+      }
+  
+      .close:hover,
+      .close:focus {
+        color: black;
+        text-decoration: none;
+      }
+  
+      /* Hide the default Google Translate widget */
+      .goog-te-banner-frame.skiptranslate,
+      .goog-te-gadget-icon {
+        display: none !important;
+      }
+  
+      body {
+        top: 0px !important;
+      }
+  
+      /* Hide the "Powered by Google" branding */
+      .goog-logo-link {
+        display: none !important;
+      }
+  
+      .goog-te-gadget {
+        height: 28px !important;
+        overflow: hidden;
+      }
+  
+      /* Hide Google Translate notifications */
+      .goog-te-spinner-pos,
+      .goog-te-spinner,
+      .goog-te-balloon-frame,
+      .goog-te-banner-frame,
+      .goog-te-banner,
+      .goog-te-balloon {
+        display: none !important;
+      }
+  
+      /* Custom styles for the Google Translate dropdown */
+      #google_translate_element select {
+        background: #ffffff;
+        border: 1px solid #ccc;
+        color: #d26d6d;
+        padding: 5px;
+        font-size: 14px;
+        border-radius: 5px;
+      }
+  
+      /* Hide the Google Translate bar */
+      body>.skiptranslate {
+        display: none !important;
+      }
+  
+      .goog-te-banner-frame.skiptranslate {
+        display: none !important;
+      }
+  
+      .goog-te-banner-frame {
+        display: none !important;
+      }
+  
+      .goog-te-banner {
+        display: none !important;
+      }
+  
+      .pagination {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        margin-top: 20px;
+      }
+  
+      .pagination button {
+        color: #000000;
+        padding: 8px 16px;
+        font-size: 16px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        background-color: #f4f4f4;
+        cursor: pointer;
+        transition: background-color 0.3s ease, color 0.3s ease;
+      }
+  
+      .pagination button:hover {
+        background-color: #ddd;
+        color: #333;
+      }
+  
+      .pagination button:disabled {
+        background-color: #e0e0e0;
+        color: #999;
+        cursor: not-allowed;
+      }
+  
+      .pagination #pageIndicator {
+        font-size: 16px;
+        font-weight: bold;
+        color: #333;
+      }
+  
+    </style>
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        // Get the popup
+        var popup = document.getElementById('translatePopup');
+        // 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 
+        btn.onclick = function () {
+          popup.style.display = 'block';
+        }
+        // When the user clicks on <span> (x), close the popup
+        span.onclick = function () {
+          popup.style.display = 'none';
+        }
+        // When the user clicks anywhere outside of the popup, close it
+        window.onclick = function (event) {
+          if (event.target == popup) {
             popup.style.display = 'none';
+          }
         }
-    }
-});
-  </script>
-  <!-- Popup for Google Translate -->
-  <div id="translatePopup" class="popup">
+      });
+    </script>
+    <!-- Popup for Google Translate -->
+    <div id="translatePopup" class="popup">
       <div class="popup-content">
-          <span class="close">&times;</span>
-          <div id="google_translate_element"></div>
+        <span class="close">&times;</span>
+        <div id="google_translate_element"></div>
       </div>
-  </div>
-  <script type="text/javascript">
-    function googleTranslateElementInit() {
+    </div>
+    <script type="text/javascript">
+      function googleTranslateElementInit() {
         new google.translate.TranslateElement({
-            pageLanguage: 'en',
+          pageLanguage: 'en',
         }, 'google_translate_element');
-    }
-</script>
-<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-
-<!-- Your custom JavaScript -->
-<script src="script.js"></script>
-
+      }
+    </script>
+    <script type="text/javascript"
+      src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
   
-
-  <script>
-
-    // Coordinates for the cursor
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    // Colors for the circles
-    const colors = [
-      "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
-      "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
-      "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
-      "#680060", "#60005f", "#48005f", "#3d005e"
-    ];
-
-    // Assign colors and initial position to each circle
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-
-    // Update the coordinates when the mouse moves
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
-
-    // Animation function to move the circles
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
-
+    <!-- Your custom JavaScript -->
+    <script src="script.js"></script>
+  
+    <script>
+      const cards = document.querySelectorAll('.card'); 
+      const cardsPerPage = 6; 
+      let currentPage = 1;
+      let totalPages = Math.ceil(cards.length / cardsPerPage);
+  
+      function showPage(page) {
+        cards.forEach(card => card.style.display = 'none');
+  
+        const start = (page - 1) * cardsPerPage;
+        const end = start + cardsPerPage;
+  
+        for (let i = start; i < end && i < cards.length; i++) {
+          cards[i].style.display = 'block';
+        }
+  
+        document.getElementById('pageIndicator').innerText = `Page ${currentPage}`;
+        document.getElementById('prevPage').disabled = page === 1;
+        document.getElementById('nextPage').disabled = page === totalPages;
+      }
+  
+      function prevPage() {
+        if (currentPage > 1) {
+          currentPage--;
+          showPage(currentPage);
+        }
+      }
+  
+      function nextPage() {
+        if (currentPage < totalPages) {
+          currentPage++;
+          showPage(currentPage);
+        }
+      }
+  
+      showPage(currentPage);
+    </script>
+  
+  
+  
+    <script>
+  
+      // Coordinates for the cursor
+      const coords = { x: 0, y: 0 };
+      const circles = document.querySelectorAll(".circle");
+  
+      // Colors for the circles
+      const colors = [
+        "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
+        "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
+        "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
+        "#680060", "#60005f", "#48005f", "#3d005e"
+      ];
+  
+      // Assign colors and initial position to each circle
       circles.forEach(function (circle, index) {
-        // Update the position and scale of each circle
-        circle.style.left = x - 12 + "px";
-        circle.style.top = y - 12 + "px";
-        circle.style.scale = (circles.length - index) / circles.length;
-
-        circle.x = x;
-        circle.y = y;
-
-        // Get the next circle in the sequence
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.15;
-        y += (nextCircle.y - y) * 0.15;
+        circle.x = 0;
+        circle.y = 0;
+        circle.style.backgroundColor = colors[index % colors.length];
       });
-
-      // Repeat the animation
-      requestAnimationFrame(animateCircles);
-    }
-
-    // Start the animation
-    animateCircles();
-
-  </script>
-
-</body>
-</html>
\ No newline at end of file
+  
+      // Update the coordinates when the mouse moves
+      window.addEventListener("mousemove", function (e) {
+        coords.x = e.clientX;
+        coords.y = e.clientY;
+      });
+  
+      // Animation function to move the circles
+      function animateCircles() {
+        let x = coords.x;
+        let y = coords.y;
+  
+        circles.forEach(function (circle, index) {
+          // Update the position and scale of each circle
+          circle.style.left = x - 12 + "px";
+          circle.style.top = y - 12 + "px";
+          circle.style.scale = (circles.length - index) / circles.length;
+  
+          circle.x = x;
+          circle.y = y;
+  
+          // Get the next circle in the sequence
+          const nextCircle = circles[index + 1] || circles[0];
+          x += (nextCircle.x - x) * 0.15;
+          y += (nextCircle.y - y) * 0.15;
+        });
+  
+        // Repeat the animation
+        requestAnimationFrame(animateCircles);
+      }
+  
+      // Start the animation
+      animateCircles();
+  
+    </script>
+  
+  </body>
+  
+  </html>
+  
\ No newline at end of file