index.html

<!DOCTYPE html>
<html lang="en">
<title>SwapReads</title>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon_package_v0.16/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon_package_v0.16/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon_package_v0.16/favicon-16x16.png">
  <link rel="manifest" href="./assets/favicon_package_v0.16/site.webmanifest">
  <link rel="mask-icon" href="./assets/favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="./assets/css/rate.css">
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="./assets/css/litrary_realms.css">
  <link rel="stylesheet" href="./assets/font-6/css/all.css">
  <link rel="stylesheet" href="header.css">
  <link rel="stylesheet" href="./assets/css/MenuClick.css">


  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600&display=swap"
    rel="stylesheet">

  <link rel="preload" as="image" href="./assets/images/hero-banner.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.27/bundled/lenis.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

  <script src="./assets/js/rateUsModal.js" defer></script>
  <script src="https://unpkg.com/scrollreveal"></script>
  <script src="./assets/js/faq.js"></script>
  <script src="./assets/js/tilt.js"></script>
  <script src="./assets/js/scroll.js"></script>
  <link rel="stylesheet" href="./scrollbar.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="modals(privacy policy).css">

  <!-- Swiper CSS -->
  <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="assets/css/test-style.css">

  <!-- Preloader CSS-->
  <link rel="stylesheet" href="assets/css/preloader.css">
  <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%;
      height: 75%;
    }


    /* Theme Change Button Style */
    @media (max-width: 990px) {
      .switch-container {
        margin-top: 3.2rem;
        margin-right: -0.5rem;
      }
    }
    @media (max-width: 575px) {
      .switch-container {
        margin-top: 2.4rem;
        margin-right: -0.5rem;
      }
      /* Navbar Toggle Button placed in center */
      .nav-toggle-btn{
        margin-top: -2rem;
        margin-left: 2.2rem;
      }
    }

/* testimonal card fix by harshcodesit */
    swiper-slide {
      text-align: center;
      font-size: 15;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 50px;
    }
    /* ########### */

    swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      color: hsl(357, 37%, 62%);
    }

    swiper-container {

       margin: auto;

    }

    .flip-card {
      background-color: transparent;
      width: 400px;
      height: 370px;
      /* margin: 2px; */
      /* border: 1px solid #f1f1f1; */
      perspective: 1000px;
      /* Remove this if you don't want the 3D effect */
    }

    /* This container is needed to position the front and back side */
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.7s;
      transform-style: preserve-3d;
      padding: 10px;
    }

    /* Do an horizontal flip when you move the mouse over the flip box container */
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }

    /* Position the front and back side */
    .flip-card-front,
    .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      /* Safari */
      backface-visibility: hidden;
    }

    /* Style the front side (fallback if image is missing) */
    .light-mode .flip-card-front {
      background-color: white;
      color: black;
    }
    .dark-mode .flip-card-front {
      background-color: black;
      color: white;
    }

    /* Style the back side */
    .flip-card-back {
      background-color: white;
      color: black;
      transform: rotateY(180deg);
    }

    /* Light mode styles */
    .light-mode .readmore-anim {
      font-size: 18px;
      letter-spacing: 0;
      color: hsl(357, 37%, 62%);
    }

    .light-mode .readmore-anim:hover {
      color: red;
      letter-spacing: 1px;
      transition: ease-in-out;
    }
    .cta1{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: auto;
  padding: 20px 24px;
  color:  hsl(357, 37%, 62%);
  font-family: Avenir, sans-serif;
  text-decoration: none;
  transition: all 0.2s ease;
  &:before {
    content: "";
    position: absolute;
    top: 27px;
    left: 0;
    display: block;
    border-radius: 28px;
    background: rgba(255, 171, 157, 0.5);
    width: 56px;
    height: 56px;
    transition: all 0.3s ease;
  }
  span {
    position: relative;
    font-size: 8px;
    line-height: 18px;
    font-weight: 900;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--charcoal);
  }
  svg {
    position: relative;
    top: 27px;
    margin-left: 5px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: hsl(357, 37%, 62%);
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all 0.3s ease;
  }
  &:hover {
    &:before {
      width: 9%;
      background: #ffab9d;
    }
    svg {
      transform: translateX(0);
    }
    .active {
      transform: scale(0.96);
    }
  }
}

.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: auto;
  padding: 20px 24px;
  color:  hsl(357, 37%, 62%);
  font-family: Avenir, sans-serif;
  text-decoration: none;
  transition: all 0.2s ease;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    background: rgba(255, 171, 157, 0.5);
    width: 56px;
    height: 56px;
    transition: all 0.3s ease;
  }
  span {
    position: relative;
    font-size: 8px;
    line-height: 18px;
    font-weight: 900;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--charcoal);
  }
  svg {
    position: relative;
    top: 0;
    margin-left: 5px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: hsl(357, 37%, 62%);
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all 0.3s ease;
  }
  &:hover {
    &:before {
      width: 9%;
      background: #ffab9d;
    }
    svg {
      transform: translateX(0);
    }
    .active {
      transform: scale(0.96);
    }
  }
}


    /* Dark Mode Styles */
    .dark-mode .readmore-anim {
      font-size: 18px;
      letter-spacing: 0;
      color: hsl(357, 37%, 62%);
    }

    .readmore-anim .icon:hover {
      color: red;
    }

    .dark-mode .readmore-anim:hover {
      color: red;
      letter-spacing: 1px;
      transition: ease-in-out;
    }

    .dark-mode .header.scrolled {
      background-color: #232222; /* Change to a darker color when scrolled */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
    }

    #cookie-consent {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background-color: #f1f1f1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  height: fit-content;
  z-index: 10000;
  border-radius: 10px;
  margin-bottom: 5px;
  margin: 20px;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: border-color 0.3s;
}

#cookie-consent:hover {
  border-right-color: #A30F17;
  border-bottom-color: #A30F17;
}

#cookie-consent p {
  color: black;  /* Make the text black for better visibility */
  text-align: center;  /* Center align the text */
}

.accept-cookies,
.reject-cookies {
  width: 260px;  /* Decrease the button width */
  height: 35px;  /* Decrease the button height */
  color: white;
  background-color: #A30F17;
  border: none;
  border-radius: 5px;  /* Add rounded corners */
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s;  /* Smooth transition for effects */
}

.dark-mode #cookie-consent{
  background-color: #252423;
}

.dark-mode #cookie-consent p{
  color: white;
}

.reject-cookies {
  margin-top: 10px;
}

.accept-cookies:hover,
.reject-cookies:hover {
  transform: scale(0.95);
  box-shadow: 0 0 15px rgb(249, 212, 212);  /* Reduce the shadow size */
}

.accept-cookies:hover {
  background-color: rgb(245, 202, 202);
  color: #A30F17;
}

.reject-cookies:hover {
  background-color: rgb(250, 192, 192);
  color: #A30F17;
}

#learn-more-link,
#show-less-link {
  color: #A30F17;  
  text-decoration: none;
  cursor: pointer;
  font-size: 20px;
}

#learn-more-link:hover,
#show-less-link:hover {
  text-decoration: underline; 
}

#cookie-content {
  display: none;
  margin-top: 10px;
}


#back-to-top-container {
  position: fixed;
}


    /* Basic navbar styling */
.header {
  position: fixed;
  width: 100%;
  top: 10;
  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: #efefef; /* Change to a darker color when scrolled */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
}
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

.action {
  position: fixed;
  top: 20px;
  right: 30px;
}

.action .profile {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.action .profile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.action .menu {
  position: absolute;
  top: 120px;
  right: -10px;
  padding: 10px 20px;
  background: #fff;
  width: 200px;
  box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
}

.action .menu.active {
  top: 80px;
  visibility: visible;
  opacity: 1;
}

.action .menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 28px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
}

.action .menu h3 {
  width: 100%;
  text-align: center;
  font-size: 18px;
  padding: 20px 0;
  font-weight: 500;
  color: #555;
  line-height: 1.5em;
}

.action .menu h3 span {
  font-size: 14px;
  color: #cecece;
  font-weight: 300;
}

.action .menu ul li {
  list-style: none;
  padding: 16px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.action .menu ul li img {
  max-width: 20px;
  margin-right: 10px;
  opacity: 0.5;
  transition: 0.5s;
}

.action .menu ul li:hover img {
  opacity: 1;
}

.action .menu ul li a {
  display: inline-flex;
  text-align: center;
  padding-left: 5%;
  font-weight: 300;
  font-size: 19px;
  text-decoration: none;
  color: #555;
  font-weight: 500;
  transition: 0.5s;
}

.action .menu ul li:hover a {
  color: #ff5d94;
  font-size: 21px;

}
.hamburger{
    display: none;
    cursor: pointer;
    position: absolute;
    top: 24px;
    left: 1.5%;
}
.line{
    width: 36px;
    height: 5px;
    margin: 4px 4px;
    background-color: rgb(240, 15, 15);
}
@media only screen and (max-width:1063px){
    .nav{
        flex-direction: column;
    }
    .header{
        flex-direction: column;
        height: 53.8rem;
        transition: 0.55s all ease-out;
        padding-top: 5px;
    }
    .navbar-item{
        margin-right: 40px;
    }
    .navbar-list{
      position: relative;
      top: 200px;
    }
    .hamburger{
        display: block;
    }
    .nav-h{
        height: 78px;
        width: 100vw;
    }
    .vis-h{
        opacity: 0;
    }
    .logo img{
      position: relative;
      top: 17px;
      left: 350px;
    }
}
@media only screen and (max-width:990px){
  .header{
    height: 0;
  }
  .navbar-list{
    top: 0;
  }
  .logo img{
    top: -9px;
    left: 50px;
  }
}
.navbar-item {
  margin-top: 10px; /* Increase the top margin of each item */
}

  </style>
</head>


<body>
  <div class="nav-wrapper">
    <div class="progress-bar"></div>
  </div>


  <div id="cookie-consent">
    <button class="close-btn" id="closeBtn">&times;</button>
    <p>
        We use cookies to improve your experience. By using our website, you consent to all cookies in accordance with our Cookie Policy.
        <a href="#" id="learn-more-link">Learn More</a>

    </p>
    <div id="learn-more-content" style="display: none;">
        <p>Cookies are small text files that can be used by websites to make a user's experience more efficient. The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission.</p>
        <p>This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.</p>
    </div>

    <a href="#" id="show-less-link" style="display: none;">Show Less</a>
    <button class="accept-cookies">Accept</button>
    <button class="reject-cookies">Reject</button>
  </div>

  <script src="script.js"></script>

<script>


  document.addEventListener('DOMContentLoaded', function() {
  const cookieConsent = document.getElementById('cookie-consent');
  const acceptButton = document.querySelector('.accept-cookies');
  const rejectButton = document.querySelector('.reject-cookies');
  const learnMoreLink = document.getElementById('learn-more-link');
  const learnMoreContent = document.getElementById('learn-more-content');

  // Hide preloader after page load
  window.addEventListener('load', function() {
    const preloader = document.getElementById('preloader');
    if (preloader) {
      preloader.style.display = 'none';
    }
    cookieConsent.style.display = 'block';
  });

  // Check if localStorage is available
  function localStorageAvailable() {
    try {
      const test = '__localStorage_test__';
      localStorage.setItem(test, test);
      localStorage.removeItem(test);
      return true;
    } catch (e) {
      return false;
    }
  }

  if (localStorageAvailable()) {
    // Check if the user has already made a choice
    if (localStorage.getItem('cookieConsent')) {
      cookieConsent.style.display = 'none';
    }

    // Function to handle cookie consent choice
    function handleConsent(choice) {
      localStorage.setItem('cookieConsent', choice);
      cookieConsent.style.display = 'none';
    }

    // Add event listeners to buttons
    acceptButton.addEventListener('click', function() {
      handleConsent('accepted');
    });

    rejectButton.addEventListener('click', function() {
      handleConsent('rejected');
    });
  } else {
    // Hide consent if localStorage is not available
    cookieConsent.style.display = 'none';
  }

  // Add event listener to "Learn More" link
  learnMoreLink.addEventListener('click', function(event) {
    event.preventDefault();
    learnMoreContent.style.display = 'block';
    learnMoreLink.style.display = 'none';
  });
});
</script>
  <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">
          <a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
            <img src="./assets/images/final.png" class="logopic" style=" width: 150px;">
          </a>
          <li class="navbar-item">
            <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">
                <a href="./assets/html/about.html"  class="navbar-link" data-nav-link><i
                    class="ri-home-fill"></i> About Us </a>
              </li>
              
          <li class="navbar-item">
            <a href="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
                class="ri-bar-chart-fill"></i> Benefits</a>
          </li>

          <li class="navbar-item">
            <a href="#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i
                class="ri-bar-chart-fill"></i> Genre</a>
          </li>

          <li class="navbar-item">
            <a href="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
                class="ri-customer-service-2-fill"></i> Contact</a>
            </li>
            <li class="navbar-item">
              <a href="#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
                  <i class="ri-questionnaire-fill"></i> FAQ
              </a>
          </li>

          <li class="navbar-item">
            <a href="#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a></li>
           
          <li class="navbar-item" id="login-signup-link">
            <a href="./assets/html/login.html" class="navbar-link">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"
                viewBox="0 0 24 24">
                <path fill="currentcolor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z" />
              </svg></a>
            <div class="dropdown-menu" id="dropdown-menu">

              <ul class="dropdown-menu-list">
                <li>
                  <a href="chat.html" class="navbar-link" style="font-family: sans-serif; color: black; margin-bottom: 5px;">
                    Community chat
                </a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/literaryrealms.html" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i
                      class="ri-medal-fill"></i> Literary Realms</a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
                      class="ri-price-tag-3-fill"></i> Pricing</a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/book_recommend.html" class="navbar-link" data-nav-link>
                    <i class="ri-customer-service-2-fill"></i> Book Recommendation
                  </a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
                    data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/read_later.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Read Later</a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/ConnReader.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Reader Connection</a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/about.html" class="navbar-link">About</a>
                </li>
              </ul>
            </div>
          </li>
          <li>
          <div class="action">
            <div class="profile" onclick="menuToggle();">
              <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
            </div>
            <div class="menu">
              <h3>XYZ<br /><span>Book Lover</span></h3>
              <ul>
                <li>
                  <img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a>
                </li>
                <li>
                  <img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a>
                </li>
                <li>
                  <img src="./assets/images/inbox.png" /><a href="#">Inbox</a>
                </li>
                <li>
                  <img src="./assets/images/settings.png" /><a href="#">Settings</a>
                </li>
                <li><img src="./assets/images/help.png" /><a href="#">Help</a></li>
                <li>
                  <img src="./assets/images/logout.png" /><a href="#">Logout</a>
                </li>
              </ul>
            </li>
              </div>
            </ul>
              </div>
              <script>
               document.addEventListener("DOMContentLoaded", () => {
    const savedAvatar = localStorage.getItem("selectedAvatar");
    if (savedAvatar) {
        document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
    }
});

        
                function menuToggle() {
                    const toggleMenu = document.querySelector(".menu");
                    toggleMenu.classList.toggle("active");
                }
            </script>
          <!-- Google Translate Element -->
          <!-- <li class="navbar-item">
            <div id="google_element"></div>
          </li> -->
        </ul>
        <!-- <div class="hamburger">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div> -->
      </nav>
      <div id="mobile_View_Menu">
        <span id="menu_lines"></span>
       </div>
    <script>
        let menu=document.getElementById('mobile_View_Menu')
        let navbar_con=document.querySelector('.navbar')
        menu.addEventListener('click',()=>{
          if(menu.classList.contains('open_menu')){
            menu.classList.remove('open_menu')
            navbar_con.classList.add('nav_activated')
          }
          else{
            menu.classList.add('open_menu')
            navbar_con.classList.remove('nav_activated')
          }
        })
      </script>
    <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
    <script>
      function loadGoogleTranslate() {
        new google.translate.TranslateElement({
          pageLanguage: 'en'
        }, 'google_element');
      }
    </script>
    <script>
      // const hamburger=document.querySelector('.hamburger');
      // const head=document.querySelector('.header');
      // const nav=document.querySelector('.nav');
      // hamburger.addEventListener('click',()=>{
      //   head.classList.toggle('nav-h');
      //   nav.classList.toggle('vis-h');
      // })
      // let lastScrollTop = 0;
      // function onScroll() {
      //     let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
      //     const header = document.querySelector('.header');

      //     if (currentScroll > lastScrollTop) {
      //         header.classList.add('hidden');
      //     } else {
      //         header.classList.remove('hidden');
      //     }
      //     lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
      // }


  window.addEventListener("scroll", onScroll);
</script>


    <!-- <div class="switch-toggle-container">


      window.addEventListener("scroll", onScroll);
    </script>
    <div class="switch-toggle-container">

      <div class="switch-container switch-container-mobile">
        <input type="checkbox" id="switch" class="switch-checkbox">
        <label for="switch" class="switch-label">
          <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> -->

      <!-- <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler id="nav-toggle-button">
        <ion-icon name="menu-outline" aria-hidden="true" class="md hydrated open"></ion-icon>

        <ion-icon name="close-outline" aria-hidden="true" class="md hydrated close"></ion-icon>
      </button> -->
      <div class="switch-container" style="top: 15px;">
        <input type="checkbox" id="switch" class="switch-checkbox">
        <label for="switch" class="switch-label">
          <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>
    </div>


    </div>
  </header>


  <main>

    <!-- Rate Us Modal Pop up
    <div class="rate-us-modal-wrapper">
      <div class="rate-us-modal">
        <a onclick="closeRateUsModal()" class="home_button"></a>
        <h1 class="rating_heading">Rate Us</h1>
        <div class="star_rating">
          <p>How was your experience?</p>
          <button class="star">&#9734;</button>
          <button class="star">&#9734;</button>
          <button class="star">&#9734;</button>
          <button class="star">&#9734;</button>
          <button class="star">&#9734;</button>
          <p class="current_rating"> 0 of 5</p>
        </div>
        <button id="submit_rating" class="submit_button">Submit Rating</button>
        <p class="thank_you_message">Thank you for rating us!</p>
      </div>
    </div> -->
    <article>
      <!-- Book Exchange Hub -->
      <section class="section hero" id="home" aria-label="home">
        <div class="container">

          <div class="hero-content">
            <p class="section-subtitle"> Let's Exchange Old Books and Discover New Stories Together!</p>

            <h1 class="h1 hero-title" style="color: rgb(255, 255, 255);">SwapReads.com - Where Books Find New Adventures!</h1>

            <p class="section-text " >
              Join SwapReads.com, the ultimate online community for book enthusiasts! Create your profile, list your
              favorite reads, and embark on literary journeys by swapping books with fellow passionate readers. Discover
              a world where books find new adventures and readers connect through the joy of sharing stories.
            </p>
            <div class="container hero-button">
              <button class="play-btn" aria-label="play video" onclick="window.location.href='#'">
                <ion-icon name="play-outline" aria-hidden="true"></ion-icon>
                <h2>Play Now</h2>
              </button>
            </div>


          </div>

          <div class="hero-banner has-before" data-tilt="">
            <img src="./assets/images/hero-banner.png" width="431" height="700"
              alt="things i never said, a novel by claudia wilson" class="w-100">


          </div>

        </div>
      </section>


      <!--
        - #BENEFITS
      -->

      <section class="section benefits" id="benefits" aria-label="benefits">
        <div class="container">
          <div class="flex">
            <div class="benefits-content">
              <h2 class="h2 section-title" style="text-align: center; margin-top: 79px; padding-top: 20px">Unleash the Magic of Book Swapping!</h2>
              <p class="section-text" style="text-align: center;">"SwapReads.com - Where Every Book is a Portal to a New
                Adventure!"</p>
            </div>

            <ul class="benefits-canvas-container">
            <li class="canvas">
              <div class="benefits-card has-before has-after ">
                <div class="card-icon">
                  <img src="./assets/images/benefits-1.svg" width="40" height="40" loading="lazy" alt="Experience">
                </div>
                <h3 class="h3 card-title"   >Diverse Literary Adventures</h3>
                <p class="card-text" >
                  Explore a vast array of genres and titles by exchanging books with our diverse community, opening
                  doors
                  to new and exciting literary adventures.
                </p>

                <!-- <a href="#" class="btn-link">
                  <span class="span readmore-anim">Read more</span>
                  <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
                </a> -->
              
                <a href="#" class="cta1 style-9">
                  <span style="position: relative; top: 27px;">Read More</span>
                  <svg width="13px" height="10px" viewBox="0 0 13 10">
                    <path d="M1,5 L11,5"></path>
                    <polyline points="8 1 12 5 8 9"></polyline>
                  </svg>
                </a>
            
              </div>
            </li>

            <li class="canvas">
              <div class="benefits-card has-before has-after">

                <div class="card-icon">
                  <img src="./assets/images/benefits-2.svg" width="40" height="40" loading="lazy" alt="Motivation">
                </div>

                <h3 class="h3 card-title"   >Cost-Efficient Reading</h3>

                <p class="card-text">
                  Save money on your reading habit by swapping books instead of purchasing new ones, making your reading
                  journey more economical and sustainable.
                </p>
                <br>

                <!-- <a href="#" class="btn-link">
                  <span class="span readmore-anim">Read more</span>

                  <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
                </a> -->
                <a href="costefficient.html" class="cta style-9">
                  <span>Read More</span>
                  <svg width="13px" height="10px" viewBox="0 0 13 10">
                    <path d="M1,5 L11,5"></path>
                    <polyline points="8 1 12 5 8 9"></polyline>
                  </svg>
                </a>

              </div>
            </li>

            <li class="canvas">
              <div class="benefits-card has-before has-after">

                <div class="card-icon">
                  <img src="./assets/images/benefits-3.svg" width="40" height="40" loading="lazy" alt="Goals">
                </div>

                <h3 class="h3 card-title"  >Connect with Like-Minded Readers</h3>

                <p class="card-text">
                  Build meaningful connections with fellow book enthusiasts, sharing recommendations, insights, and
                  forming a community bonded by a love for literature.
                </p>

                <!-- <a href="#" class="btn-link">
                  <span class="span readmore-anim">Read more</span>

                  <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
                </a> -->
                <a href="#" class="cta style-9">
                  <span>Read More</span>
                  <svg width="13px" height="10px" viewBox="0 0 13 10">
                    <path d="M1,5 L11,5"></path>
                    <polyline points="8 1 12 5 8 9"></polyline>
                  </svg>
                </a>
              </div>
            </li>

            <li class="canvas">
              <div class="benefits-card has-before has-after">

                <div class="card-icon">
                  <img src="./assets/images/benefits-4.svg" width="40" height="40" loading="lazy" alt="Vision">
                </div>

                <h3 class="h3 card-title"  >Revitalize Your Bookshelf</h3>

                <p class="card-text">
                  Keep your home library fresh and dynamic by constantly swapping books, ensuring a rotating collection
                  that reflects your evolving tastes and interests.
                </p>
                <br>

                <!-- <a href="#" class="btn-link">
                  <span class="span readmore-anim">Read more</span>

                  <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
                </a> -->
                <a href="#" class="cta style-9">
                  <span>Read More</span>
                  <svg width="13px" height="10px" viewBox="0 0 13 10">
                    <path d="M1,5 L11,5"></path>
                    <polyline points="8 1 12 5 8 9"></polyline>
                  </svg>
                </a>
              </div>
            </li>

            <li class="canvas">
              <div class="benefits-card has-before has-after">

                <div class="card-icon">
                  <img src="./assets/images/benefits-5.svg" width="40" height="40" loading="lazy" alt="Mission">
                </div>

                <h3 class="h3 card-title"  >Environmental Impact</h3>

                <p class="card-text">
                  Contribute to eco-friendly practices by participating in book swaps, reducing the demand for new
                  prints and promoting a greener approach to reading.
                </p>
                <br>

                <!-- <a href="#" class="btn-link">
                  <span class="span readmore-anim">Read more</span>

                  <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
                </a> -->
                <a href="environmental-impact.html" class="cta style-9">
                  <span>Read More</span>
                  <svg width="13px" height="10px" viewBox="0 0 13 10">
                    <path d="M1,5 L11,5"></path>
                    <polyline points="8 1 12 5 8 9"></polyline>
                  </svg>
                </a>
              </div>
            </li>

            <li class="canvas">
              <div class="benefits-card has-before has-after">

                <div class="card-icon">
                  <img src="./assets/images/benefits-6.svg" width="40" height="40" loading="lazy" alt="Strategy">
                </div>

                <h3 class="h3 card-title"  >Personalized Reading Experience</h3>

                <p class="card-text">
                  Tailor your reading list to your preferences by selecting books from other users' collections,
                  creating a personalized and curated reading experience that suits you.
                </p>

                <!-- <a href="#" class="btn-link">
                  <span class="span readmore-anim">Read more</span>
                  <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
                </a> -->

                <a href="#" class="cta style-9">
                  <span>Read More</span>
                  <svg width="13px" height="10px" viewBox="0 0 13 10">
                    <path d="M1,5 L11,5"></path>
                    <polyline points="8 1 12 5 8 9"></polyline>
                  </svg>
                </a>
              </div>
            </li>

          </ul>
          </div>

        </div>
      </section>


      <!--Chapters-->

      <section class="section chapters" id="chapters">
        <div class="litrealms_conatiner">
          <p class="section-subtitle">Literary Realms</p>
          <h1 class="h1 section-title has-underline" id="section-title2" style="padding-bottom: 20px;">
            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"> 
                  <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">
                    <div class="go-arrow">→</div>
                  </div>
                </a>
              </div>
              <div class="litrealms_card">
                <a class="cardo" href="thrilling-adventures.html">
                  <h3 class="lithead"> &nbsp;Thrilling Adventures</h3>
                  <p class="small">Dive into heart-pounding tales and gripping narratives that will keep you on the edge of your seat.</p>
                  <div class="go-corner">
                    <div class="go-arrow">→</div>
                  </div>
                </a>
              </div>
              <div class="litrealms_card">
                <a class="cardo" href="mindful-living.html">
                  <h3 class="lithead"> &nbsp;Mindful Living</h3>
                  <p class="small">Discover the secrets to a fulfilling life with our collection of insightful and empowering self-help books.</p>
                  <div class="go-corner">
                    <div class="go-arrow">→</div>
                  </div>
                </a>
              </div>
              <div class="litrealms_card">
                <a class="cardo" href="Mystical-fantaies.html">
                  <h3 class="lithead"> &nbsp;Mystical Fantasies</h3>
                  <p class="small">Embark on fantastical journeys to magical realms with our captivating fantasy fiction picks.</p>
                  <div class="go-corner">
                    <div class="go-arrow">→</div>
                  </div>
                </a>
              </div>
              <div class="litrealms_card">
                <a class="cardo" href="historical-chronicals.html">
                  <h3 class="lithead"> &nbsp;Historical Chronicles</h3>
                  <p class="small">Travel back in time and explore the rich tapestry of history through our curated historical fiction selection.</p>
                  <div class="go-corner">
                    <div class="go-arrow">→</div>
                  </div>
                </a>
              </div>
              <div class="litrealms_card">
                <a class="cardo" href="scifi.html">
                  <h3 class="lithead"> &nbsp;Science Fiction Wonders</h3>
                  <p class="small">Ignite your imagination with mind-bending concepts and futuristic worlds in our science fiction.</p>
                  <div class="go-corner">
                    <div class="go-arrow">→</div>
                  </div>
                </a>
              </div>
              <div class="litrealms_card">
                <a class="cardo" href="lol.html">
                  <h3 class="lithead"> &nbsp;Laugh Out Loud Comedy</h3>
                  <p class="small">Find joy and laughter in our comedy section, featuring witty and humorous tales that will brighten your day.</p>
                  <div class="go-corner">
                    <div class="go-arrow">→</div>
                  </div>
                </a>
              </div>
              <div class="litrealms_card">
                <a class="cardo" href="intriguing-mysteries.html">
                  <h3 class="lithead"> &nbsp;Intriguing Mysteries</h3>
                  <p class="small">Unravel gripping mysteries and suspenseful plots that will keep you guessing until the last page.</p>
                  <div class="go-corner">
                    <div class="go-arrow">→</div>
                  </div>
                </a>
              </div>
              <div class="litrealms_card">
                <a class="cardo" href="biographies.html">
                  <h3 class="lithead"> &nbsp;Inspiring Biographies</h3>
                  <p class="small">Gain insights into the lives of remarkable individuals through our collection of inspiring biographies and memoirs.</p>
                  <div class="go-corner">
                    <div class="go-arrow">→</div>
                  </div>
                </a>
              </div>
            </div>
            
            <i id="right-arrow" class="fa-solid fa-angle-right"></i>
          </div>
        </div>
      </section>

      <script>
       document.addEventListener("DOMContentLoaded", function () {
    const carousel = document.querySelector(".carousell");
    const firstCardWidth = carousel.querySelector(".litrealms_card").offsetWidth;
    const arrowBtns = document.querySelectorAll(".carousell-wrapper i");
    const carouselChildrens = [...carousel.children];

    let isDragging = false, startX, startScrollLeft;

    let cardPerView = 3; 

    // Insert copies of the last few cards to beginning of carousel for infinite scrolling
    carouselChildrens.slice(-cardPerView).reverse().forEach(card => {
        carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
    });

    // Insert copies of the first few cards to end of 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", () => {
            carousel.scrollLeft += btn.id === "left-arrow" ? -firstCardWidth : firstCardWidth;
        });
    });

    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) {
            carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
        }
        // If at the end, scroll to the beginning
        else if (Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) {
            carousel.scrollLeft = carousel.offsetWidth;
        }
    }

    carousel.addEventListener("mousedown", dragStart);
    carousel.addEventListener("mousemove", dragging);
    document.addEventListener("mouseup", dragStop);
    carousel.addEventListener("scroll", infiniteScroll);
});
      </script>

      <!-- <section class="section chapters" id="chapters">
        <div class="container">

          <p class="section-subtitle"   >Literary Realms</p>

          <h2 class="h2 section-title has-underline" id="section-title2">
            Literary Realms we've covered
            <span class="span has-before"></span>
          </h2>

          <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
                  selection of romance
                  fiction.</p>
                <div class="go-corner" href="#">
                  <div class="go-arrow">
                    →
                  </div>
                </div>
              </a>
            </li>
            <li>

              <a class="cardo" href="thrilling-adventures.html">
                <h3 class="lithead">02. &nbsp;Thrilling Adventures</h3>
                <p class="small"> Dive into heart-pounding tales and gripping narratives that will keep you on the edge
                  of your seat.</p>
                <div class="go-corner" href="#">
                  <div class="go-arrow">
                    →
                  </div>
                </div>
              </a>
            </li>

            <li>

              <a class="cardo" href="mindful-living.html">
                <h3 class="lithead">03. &nbsp;Mindful Living</h3>
                <p class="small"> Discover the secrets to a fulfilling life with our collection of insightful and
                  empowering self-help
                  books.</p>
                <div class="go-corner" href="#">
                  <div class="go-arrow">
                    →
                  </div>
                </div>
              </a>
            </li>

            <li>

              <a class="cardo" href="Mystical-fantaies.html">
                <h3 class="lithead">04. &nbsp;Mystical Fantasies</h3>
                <p class="small"> Embark on fantastical journeys to magical realms with our captivating fantasy fiction
                  picks.</p>
                <div class="go-corner" href="#">
                  <div class="go-arrow"> →
                  </div>
                </div>
              </a>


            </li>
            <li>

              <a class="cardo" href="historical-chronicals.html">
                <h3 class="lithead">05. &nbsp;Historical Chronicles</h3>
                <p class="small"> Travel back in time and explore the rich tapestry of history through our curated
                  historical fiction
                  selection.</p>
                <div class="go-corner" href="#">
                  <div class="go-arrow">
                    →
                  </div>
                </div>
              </a>


            </li>
            <li>

              <a class="cardo" href="scifi.html">
                <h3 class="lithead">06. &nbsp;Science Fiction Wonders</h3>
                <p class="small"> Ignite your imagination with mind-bending concepts and futuristic worlds in our
                  science fiction.</p>
                <div class="go-corner" href="#">
                  <div class="go-arrow">
                    →
                  </div>
                </div>
              </a>


            </li>
            <li>

              <a class="cardo" href="lol.html">
                <h3 class="lithead">07. &nbsp;Laugh Out Loud Comedy</h3>
                <p class="small"> Find joy and laughter in our comedy section, featuring witty and humorous tales that
                  will brighten
                  your day.</p>
                <div class="go-corner" href="#">
                  <div class="go-arrow">
                    →
                  </div>
                </div>
              </a>
            </li>
            <li>

              <a class="cardo" href="intriguing-mysteries.html">
                <h3 class="lithead">08. &nbsp;Intriguing Mysteries</h3>
                <p class="small"> Unravel gripping mysteries and suspenseful plots that will keep you guessing until the
                  last page.</p>
                <div class="go-corner" href="#">
                  <div class="go-arrow">
                    →
                  </div>
                </div>
              </a>
            </li>

            <li>

              <a class="cardo" href="biographies.html">
                <h3 class="lithead">09. &nbsp;Inspiring Biographies</h3>
                <p class="small"> Gain insights into the lives of remarkable individuals through our collection of
                  inspiring biographies
                  and memoirs.</p>
                <div class="go-corner" href="#">
                  <div class="go-arrow">
                    →
                  </div>
                </div>
              </a>

            </li>
          </ul>
        </div>
      </section>
 -->


<!--
        - #PRICING
      -->
      <section class="section pricing" id="pricing" aria-label="pricing">
        <div class="container">

          <p class="section-subtitle">Pricing</p>

          <h2 class="h2 section-title has-underline" style="padding-top: 100px;">
            Pricing based on their version
            <span class="span has-before"></span>
          </h2>

          <ul class="grid-list">

            <li>
              <div class="pricing-card">

                <h3 class="h3 card-title">Fresh Pages - New Releases</h3>

                <data class="price" value="5">75% Off</data>

                <ul class="pricing-card-list">

                  <li class="card-item">
                    <p class="card-text">Exchange any recently released or gently used books, less than a year old, at
                      75% of the original cost (Limited Offer)</p>
                  </li>
                </ul>

                <button class="btn btn-secondary">BUY NOW</button>
              </div>
            </li>
            <li>
              <div class="pricing-card">
                <h3 class="h3 card-title">Timeless Classics - Aged Wonders</h3>
                <data class="price" value="15">50% Off</data>
                <ul class="pricing-card-list">

                  <li class="card-item">
                    <p class="card-text">beloved classics or books aged 1 to 5 years at 50% of the original cost,
                      preserving the magic of timeless stories.</p>
                  </li>
                </ul>

                <button class="btn btn-secondary">BUY NOW</button>

              </div>
            </li>

            <li>
              <div class="pricing-card">
                <h3 class="h3 card-title">Hidden Treasures - Vintage Editions</h3>
                <data class="price" value="10">25% Off</data>
                <ul class="pricing-card-list">


                  <li class="card-item">
                    <p class="card-text"> into the past with vintage editions or books over 5 years old, available
                      for exchange at 25% of their original cost.</p>
                  </li>
                </ul>

                <button class="btn btn-secondary">BUY NOW</button>

              </div>
            </li>

          </ul>

        </div>
        </section>

      <!-- Genre -->

      <section class="genre" id="genre">
        <div class="container">

          <p class="section-subtitle">Genre</p>

          <h2 class="h2 section-title has-underline" id="section-title1">
            Explore Different Genres
            <span class="span has-before"></span>
          </h2>

          <ul class="grid-list">

            <li>
              <div class="chapter-card">

                <p class="card-subtitle">01</p>

                <h3 class="h3 card-title">Classic Literature</h3>

                <p class="card-text" >
                  The category of classic literature contains literature that is worthy of being read through the ages.
                  Classic literature is timeless and well-written. Sophocles,Charles Dickens, Jane Austen and Virgil are
                  all writers whose works are considered classical literature.
                </p>

              </div>
            </li>

            <li>
              <div class="chapter-card">

                <p class="card-subtitle">02</p>

                <h3 class="h3 card-title">Romance</h3>
                <p class="card-text">
                  A romance is understood to be 'love stories,' which are primarily focused on the relationship between
                  the main characters of the story. The biggest defining characteristic of the romance genre is that a
                  happy ending is always guaranteed, perhaps living 'happily ever after.
                </p>

              </div>
            </li>

            <li>
              <div class="chapter-card">

                <p class="card-subtitle">03</p>

                <h3 class="h3 card-title">Suspense Thriller</h3>

                <p class="card-text">
                  Readers are taken on a rollercoaster ride of tension and intrigue. These gripping tales are filled
                  with twists and turns, keeping readers guessing until the very last page as protagonists navigate
                  dangerous situations.
                </p>

              </div>
            </li>

            <li>
              <div class="chapter-card">

                <p class="card-subtitle">04</p>

                <h3 class="h3 card-title">Science Fiction</h3>

                <p class="card-text">
                  Embarking on voyages across the cosmos and exploring the possibilities of future technology, science
                  fiction books ignite the imagination with visions of advanced civilizations, space exploration, and
                  speculative science.
                </p>

              </div>
            </li>

            <li>
              <div class="chapter-card">

                <p class="card-subtitle">05</p>

                <h3 class="h3 card-title">Fantasy</h3>

                <p class="card-text">
                  Immersed in magical realms and mythical creatures, fantasy books transport readers to worlds where
                  anything is possible, weaving tales of epic quests, ancient prophecies, and battles between good and
                  evil.
                </p>

              </div>
            </li>

            <li>
              <div class="chapter-card">

                <p class="card-subtitle">06</p>

                <h3 class="h3 card-title">Horror</h3>

                <p class="card-text">
                  Sending shivers down readers' spines, horror books delve into the macabre and the supernatural,
                  exploring fear, dread, and the unknown through chilling tales of monsters, ghosts, and psychological
                  terror.
                </p>

              </div>
            </li>

            <li>
              <div class="chapter-card">

                <p class="card-subtitle">07</p>

                <h3 class="h3 card-title">Biography</h3>

                <p class="card-text">
                  Providing insight into real lives and experiences, biography books recount the journeys, triumphs, and
                  struggles of notable individuals, offering inspiration and understanding through their personal
                  stories and achievements.
                </p>

              </div>
            </li>

            <li>
              <div class="chapter-card">

                <p class="card-subtitle">08</p>

                <h3 class="h3 card-title">Self Help</h3>

                <p class="card-text">
                  Empowering readers to improve their lives and well-being, self-help books offer practical advice,
                  strategies, and insights for personal growth, happiness, and success, covering topics such as
                  relationships, productivity, and mental health.
                </p>

              </div>
            </li>
            <div class="chapter-card">

              <p class="card-subtitle">09</p>

              <h3 class="h3 card-title">Historical Fiction</h3>

              <p class="card-text">
                Offering a glimpse into the past, historical fiction books blend real events with fictional
                narratives, transporting readers to different eras and cultures, bringing history to life through
                vivid characters and immersive storytelling.
              </p>

            </div>
            </li>

            <li>
              <div class="chapter-card">

                <p class="card-subtitle">10</p>

                <h3 class="h3 card-title">Poetry</h3>

                <p class="card-text">
                  Distilling emotions into rhythmic language, they inspire reflection, evoke vivid imagery, and offer
                  solace.
                  From ancient epics to modern verses, they celebrate the power of words and the timeless beauty of
                  human expression.
                </p>

              </div>
            </li>

            <li>
              <div class="chapter-card">

                <p class="card-subtitle">11</p>

                <h3 class="h3 card-title">Philosophy</h3>

                <p class="card-text">
                  Delve into life's fundamental questions, exploring existence, ethics,
                  and knowledge, they provoke deep thought, challenge assumptions, and offer
                  diverse perspectives, fostering critical thinking and a deeper understanding of the human condition.
                </p>

              </div>
            </li>

            <li>
              <div class="chapter-card">

                <p class="card-subtitle">12</p>

                <h3 class="h3 card-title">Adventure Fiction</h3>

                <p class="card-text">
                  Captivates with thrilling journeys, daring heroes, and unexpected twists,
                  transports readers to exotic locales, ignites the imagination, and offers escapism,
                  excitement, and a sense of discovery and wonder.
                </p>

              </div>
            </li>
          </ul>

        </div>
      </section>


      <!--
        - #CHAPTERS
      -->

      <!--Book Exchange Hub-->
      <section class="section preview" aria-label="preview">
        <div class="container1">
          <h2 class="h2 section-title has-underline">
            Book Exchange Hub
            <span class="span has-before"></span>
          </h2>
          <p class="section-text booktext">
            Connect with fellow readers in our Book Exchange Hub. Sell your old books at half price and give your
            favorite reads a new home. Fill out the form below to get started!
          </p>
      
          <div class="exchange-form">
            <div class="form-fields">
              <label class="form-label" for="bookTitle">Book Title:</label>
              <input type="text" id="bookTitle" name="bookTitle" placeholder="Enter the title of your book" required class="input-field">
              <span id="bookTitle-error" class="error"></span>
      
              <label class="form-label" for="bookAuthor">Author:</label>
              <input type="text" id="bookAuthor" name="bookAuthor" placeholder="Enter the author's name" required class="input-field">
              <span id="bookAuthor-error" class="error"></span>
      
              <label class="form-label" for="yourPrice">Your Price (50% Off):</label>
              <div class="currency-container">
                <label class="currency-label" for="currency">Currency: </label>
                <select id="currency" name="currency" class="input-field currency-select">
                  <option value="INR">INR</option>
                  <option value="USD">USD</option>
                  <option value="EUR">EUR</option>
                  <option value="GBP">GBP</option>
                </select>
              </div>
              <input type="number" min="1" id="yourPrice" name="yourPrice" placeholder="Enter your desired selling price" required class="input-field">
              <span id="yourPrice-error" class="error"></span>
            </div>
      
            <button type="button" class="btn btn-primary" id="connectReaderBtn">Connect with a Reader</button>
          </div>
      
          <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
          <script>
            function submitForm() {
              // Get form elements
              const bookTitle = document.getElementById("bookTitle").value.trim();
              const bookAuthor = document.getElementById("bookAuthor").value.trim();
              const yourPrice = document.getElementById("yourPrice").value.trim();
              const currency = document.getElementById("currency").value.trim();
      
              // Perform form validation
              if (bookTitle === "") {
                Swal.fire({
                  icon: "error",
                  title: "Oops...",
                  text: "Please enter the title of your book.",
                  customClass: {
                    popup: "swal-popup",
                    title: "swal-title",
                    content: "swal-content",
                    confirmButton: "swal-confirm-button",
                  },
                });
                return;
              }
      
              if (bookAuthor === "") {
                Swal.fire({
                  icon: "error",
                  title: "Oops...",
                  text: "Please enter the author's name.",
                  customClass: {
                    popup: "swal-popup",
                    title: "swal-title",
                    content: "swal-content",
                    confirmButton: "swal-confirm-button",
                  },
                });
                return;
              }
      
              if (yourPrice === "" || isNaN(parseFloat(yourPrice)) || parseFloat(yourPrice) < 1) {
                Swal.fire({
                  icon: "error",
                  title: "Oops...",
                  text: "Please enter a valid selling price greater than or equal to 1.",
                  customClass: {
                    popup: "swal-popup",
                    title: "swal-title",
                    content: "swal-content",
                    confirmButton: "swal-confirm-button",
                  },
                });
                return;
              }
      
              // Show success message
              Swal.fire({
                icon: "success",
                title: "Success!",
                text: "Your book details have been submitted.",
                customClass: {
                  popup: "swal-popup",
                  title: "swal-title",
                  content: "swal-content",
                  confirmButton: "swal-confirm-button",
                },
              }).then((result) => {
                if (result.isConfirmed || result.isDismissed) {
                  resetForm(); // Reset form after successful submission
                }
              });
            }
      
            // Function to reset form fields
            function resetForm() {
              document.getElementById("bookTitle").value = "";
              document.getElementById("bookAuthor").value = "";
              document.getElementById("yourPrice").value = "";
              document.getElementById("currency").value = "INR"; // Reset currency select to default
              document.getElementById("bookTitle-error").textContent = "";
              document.getElementById("bookAuthor-error").textContent = "";
              document.getElementById("yourPrice-error").textContent = "";
              document.getElementById("connectReaderBtn").disabled = true; // Disable submit button after reset
            }
      
            // Event listener for the submit button
            document.getElementById("connectReaderBtn").addEventListener("click", submitForm);
          </script>
        </div>
      </section>
      <!-- rate us -->
       <!-- Rate Us Component -->
       <div id="rate-us">
        <div class="heading">
            <h3>Rate Us!</h3>
            <p>Tell us your experience</p>
            <br><br><br>
        </div>
        <div class="wrapper">
          <div class="footer-2">
            <label for="feedback">Enter your Feedback</label> <br>
            <textarea style="resize:none" id="feedback" cols="40" rows="4"></textarea>
        </div>
            <input type="radio" name="rate" id="star-1">
            <input type="radio" name="rate" id="star-2">
            <input type="radio" name="rate" id="star-3">
            <input type="radio" name="rate" id="star-4">
            <input type="radio" name="rate" id="star-5">
            <div class="content">
                <div class="stars">
                    <label for="star-1" class="star-1 fas fa-star"></label>
                    <label for="star-2" class="star-2 fas fa-star"></label>
                    <label for="star-3" class="star-3 fas fa-star"></label>
                    <label for="star-4" class="star-4 fas fa-star"></label>
                    <label for="star-5" class="star-5 fas fa-star"></label>
                </div>
            </div>
            <div class="footer">
                <span class="text"></span>
                <span class="numb"></span>
            </div>
            <div class="button">
                <a href="#" id="submit-btn">Submit</a>
            </div> 
        </div>
    </div>

    <!-- Confirmation Message Popup -->
    <div id="confirmationModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeConfirmationModal()">&times;</span>
            <p id="confirmationMessage"></p>
        </div>
    </div>

    <script src="/assets/js/rate.js"></script>
     

      <!-- - #CONTACT -->

      <section class="section contact" id="contact" aria-label="contact">
        <div class="container">
          <p class="section-subtitle">Contact Us</p>
          <h2 class="h2 section-title has-underline">
            Have a Question ?
            <span class="span has-before"></span>
          </h2>
          <div class="wrapper">
            <div class="contact-card">

              <form action="http://localhost:3000/contact" method="POST" id="contact-form">
                <div class="contact_head_wrapper">
                  <div class="contact_head">Get in touch</div>
                </div><br><br>      

                <input type="text" name="name" id="name" placeholder="Your Name" required class="input-field" size="60px">
                <input type="email" name="email_address" id="email" placeholder="Your Email" required class="input-field">
                <input type="text" name="subject" id="subject" placeholder="Subject" required class="input-field" maxlength=100>
                <div id="subject-count" class="character-count">0/100</div>
                <textarea name="message" id="message" placeholder="Your Message" class="input-field" maxlength=250></textarea>
                <div id="message-count" class="character-count">0/250</div>
                <button type="submit" id="sendMessageBtn" class="btn btn-primary">Send Now</button>
                <div id="success-message" style="display:none">Message sent successfully!</div>
              </form>
            </div>
            <script>
              document.addEventListener('DOMContentLoaded', function() {
                var form = document.getElementById('contact-form');
                var message = document.getElementById('message');
      
                form.addEventListener('submit', function(event) {
                  if (message.value.length < 50) {
                    alert("Message length can't be less than 50 characters.");
                    event.preventDefault();
                  } else {
                    event.preventDefault();
                    var formData = new FormData(form);
      
                    fetch(form.action, {
                      method: form.method,
                      body: JSON.stringify(Object.fromEntries(formData)),
                      headers: {
                        'Content-Type': 'application/json'
                      }
                    }).then(response => response.json())
                      .then(data => {
                        if (data.error) {
                          alert(data.error);
                        } else {
                          document.getElementById('success-message').style.display = 'block';
                          form.reset();
                        }
                      }).catch(error => {
                        alert('Failed to send message');
                      });
                  }
                });
              });
            </script>
      
            <ul class="contact-card">
              <li>
                <p class="card-title address-title">
                  <lord-icon class="invert-col" src="https://cdn.lordicon.com/iikoxwld.json" trigger="hover" colors="primary:#000000" style="width:25px;height:25px"></lord-icon>
                  Address :
                </p><br>
                <address class="address">
                  12, Nayabad <br>
                  Kolkata, India 700054
                </address>
              </li>
              <li>
                <p class="card-title phone-title">
                  <lord-icon class="invert-col" src="https://cdn.lordicon.com/srsgifqc.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
                  Phone :
                </p><br>
                <a href="tel:1234567890" class="card-link">+91 9124421980</a>
              </li>
              <li>
                <p class="card-title email-title">
                  <lord-icon class="invert-col" src="https://cdn.lordicon.com/xtzvywzp.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
                  Email :
                </p><br>
                <a href="mailto:support@support.com" class="card-link">support@swapreads.com</a>
              </li>
            </ul>
          </div>
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3686.5834653201455!2d88.40974607348684!3d22.482281936278092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0273c5411d60d7%3A0x5d6e57763593194b!2sSouthern%20Cleve%20Housing%2C%2012%2C%20Bhagat%20Singh%20Nagar%2C%20Nayabad%2C%20Kolkata%2C%20West%20Bengal%20700150!5e0!3m2!1sen!2sin!4v1716043813992!5m2!1sen!2sin"
            style="border:0; margin-bottom:30px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
          </iframe>
        </div>
      </section>
      

    </article>
  </main>

  <!-- --Testimonials -->

  <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
    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">
        <div class="flip-card-inner">
          <div class="flip-card-front fronts dark-mode">
            <div class="">

              <div class="image-content">


                <div class="card-image">
                  <img src="./assets/images/testimonials-4.jpg" alt="" class="card-img">
                </div>
                <h2 style="font-size: 20px;">Sonal K</h2>
              </div>

              <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <div class="flip-card-back backs">
            SwapReads has completely transformed my reading experience! Not only have I discovered new books I never
            would have picked up otherwise, but I've also connected with fellow book lovers who share my passion. It's
            like having a personalized library with endless possibilities. Highly recommend!
          </div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front fronts dark-mode">
            <div class="">

              <div class="image-content">


                <div class="card-image">
                  <img src="./assets/images/testimonials-2.jpg" alt="" class="card-img">
                </div>
                <h2 style="font-size: 20px;">Prem Sampath</h2>
              </div>

              <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <div class="flip-card-back backs">
            SwapReads has transformed my reading habits. Beyond swapping books, it's about fostering a community of
            passionate readers. I've made friends, broadened my literary horizons, and unearthed hidden gems. Thank you,
          </div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front fronts dark-mode">
            <div class="">

              <div class="image-content">


                <div class="card-image">
                  <img src="./assets/images/testimonials-3.jpg" alt="" class="card-img">
                </div>
                <h2 style="font-size: 20px;">Aron Loes</h2>
              </div>

              <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <div class="flip-card-back backs">
            SwapReads is a bookworm's paradise! With its user-friendly interface, welcoming community, and vast variety
            of books for swapping, I've embarked on countless new literary adventures. It's like an ever-active book
            club where I've connected with fellow literature lovers. I'm completely hooked!
          </div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front fronts dark-mode">
            <div class="">

              <div class="image-content">


                <div class="card-image">
                  <img src="./assets/images/testimonials-1.jpg" alt="" class="card-img">
                </div>
                <h2 style="font-size: 20px;">B.Sharmila</h2>
              </div>

              <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <div class="flip-card-back backs">
            SwapReads revolutionized my reading life! I've decluttered my shelf, discovered hidden gems, and connected
            with a passionate community. Thank you, SwapReads, for stealing my heart!
          </div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front fronts dark-mode">
            <div class="">

              <div class="image-content">


                <div class="card-image">
                  <img src="./assets/images/testimonials-5.jpg" alt="" class="card-img">
                </div>
                <h2 style="font-size: 20px;">Jane Doe</h2>
              </div>

              <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <div class="flip-card-back backs">
            I love SwapReads! It's a fantastic way to keep my reading list dynamic and engaging. The platform is
            easy to use, and the community is incredibly supportive and passionate about books. SwapReads has
            definitely enriched my reading experience.
          </div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front fronts dark-mode">
            <div class="">

              <div class="image-content">


                <div class="card-image">
                  <img src="./assets/images/testimonials-6.jpg" alt="" class="card-img">
                </div>
                <h2 style="font-size: 20px;">Maya Verma</h2>
              </div>

              <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <div class="flip-card-back backs">
            SwapReads has completely changed the way I read and discover books. The swapping system is seamless,
            and I've found so many new favorites. Plus, the community is amazing – it's like having a book club at
            my fingertips!
          </div>
        </div>
      </div>
    </swiper-slide>
  </swiper-container>
</br>

  <!-- Testimonials -->

  <!-- FAQ section start-->


  <div class="faq-section">
    <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>
      <div class="answers">
        <p>SwapReads is a global book exchange platform where users can create profiles,
          list the books they're willing to swap, and can find other users collections.
          When you find a book you're interested in, you can find suitable offers and can read that book. It's that
          easy!</p>
      </div>
    </div>

    <div class="faq-container">
      <div class="question .dark">
        <h4>How does SwapReads contribute to sustainability?</h4>
        <i class="icon fa-solid fa-caret-down"></i>
      </div>
      <div class="answers">
        <p>
          By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
          reducing the demand for new book production. This helps minimize the environmental impact
          associated with book manufacturing, including paper usage and carbon emissions.
        </p>
      </div>
    </div>

    <div class="faq-container">
      <div class="question">
        <h4>How do I join the SwapReads community?</h4>
        <i class="icon fa-solid fa-caret-down"></i>
      </div>
      <div class="answers">
        <p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
          books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
      </div>
    </div>

    <div class="faq-container">
      <div class="question">
        <h4>How do I ensure the safety and security of my personal information on SwapReads?</h4>
        <i class="icon fa-solid fa-caret-down"></i>
      </div>
      <div class="answers">
        <p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
          our servers. </p>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
  const faqContainers = document.querySelectorAll('.faq-container');

  const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  };

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry, index) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        entry.target.style.animation = `slideIn 1s ease-in-out ${index * 0.3}s forwards`; // Adjusted for slower animation
        if (index % 2 === 1) {
          entry.target.querySelector('.question').style.animation = `slideInFromRight 1s ease-in-out ${index * 0.3}s forwards`; // Adjusted for slower animation
        }
        observer.unobserve(entry.target);
      }
    });
  }, observerOptions);

  faqContainers.forEach(faq => {
    observer.observe(faq);
  });
});

  </script>
  <br /><br />
  <div style="
    background-color: #ffb2a8 ;
    height:150px;
    width: 100%;
    color: white;
    font-weight: 700;
    font-size: 45px;
  text-align: center;
  ">
  <div>Visitor</div>
  <div class="website-counter" >

    <script>
var counterContainer = document.querySelector(".website-counter");
var resetButton = document.querySelector("#reset");
var visitCount = localStorage.getItem("page_view");

// Check if page_view entry is present
if (visitCount) {
  visitCount = Number(visitCount) + 1;
  localStorage.setItem("page_view", visitCount);
} else {
  visitCount = 1;
  localStorage.setItem("page_view", 1);
}
counterContainer.innerHTML = visitCount;

// Adding onClick event listener
resetButton.addEventListener("click", () => {
  visitCount = 1;
  localStorage.setItem("page_view", 1);
  counterContainer.innerHTML = visitCount;
});
    </script></div>
</div>
 
    <script src="./assets/js/rate.js"></script>


  <!-- FAQ section end -->

  <!--
    - #FOOTER
  -->

  <footer>
    <div class="foot-top">
      <div class="foot-left">

        <div class="desc">
<!--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">SwapReads</a></div>
          <div>
            <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">
        <h2>Quick Links</h2>
        <div id="quicklinks">
          <div>
          <ul>
            <li class="foot-quick"><a href="#home" onclick="lenis.scrollTo('#home')">Home</a></li>
            <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
            <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
            <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
            <li class="foot-quick"><a href="./assets/html/bookrecommend.html"
              onclick="lenis.scrollTo('#contact')">Recommended Book</a></li>
          </ul>
        </div>
        <div>
          <ul>
            <li class="foot-quick"><a href="./assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')">Swap
                BookList</a></li>
            <li class="foot-quick"><a href="./assets/html/freeBooks.html"
                onclick="lenis.scrollTo('#contact')">E-Book</a></li>
            <li class="foot-quick"><a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')">About</a>
            </li>
            <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
            <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')">FAQ</a></li>
          </ul>
        </div>
        </div>
      </div>
      <div class="social-icons">

        <style>
          .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 */
          }
          #confirmationMessage
          {
            margin-left: 50px;
            font-size: 23px;
            color: green;

          }
         /* for small screen */
          @media (max-width: 768px) 
          {
            #confirmationMessage 
            {
                margin-left: 0;
                text-align: center;
                font-size: 18px;
            }
        }
        </style>

        <form id="newsletterForm" type="newsletter" onsubmit="return showConfirmationMessage()">
          <label for="newsletter-email" class="newsletter-form">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" id="subs_btn">
          </div>
      </form>
     <div id="confirmationMessage" style="display: none;">Thank you for subscribing!</div>

<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.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://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">
              <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
            </div>
          </a>


          <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="">
            <div class="icon">
              <i class="fab fa-github" title="Github"></i>
            </div>
          </a>
         

        </div>
       </div>

        <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
          <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>


    <!-- adding privacy policy and copyright popup-->
    <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>
      <div class="row-copy">


      <a href="copyrightpolicy.html" id="copyrightPolicyLink">Copyright Policy</a> |
      <a href="privacynotice.html" id="privacyNoticeLink">Privacy Notice</a>
    </div>
    </div>

    <!-- 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>

  <!-- Footer ended-->
  <script src="./assets/js/script.js" defer></script>
  <script>
    document.addEventListener('DOMContentLoaded', (event) => {
      let subject_full= document.getElementById("subject-full");
      let subject_count= document.getElementById("subject-count");
      let subject= document.getElementById("subject");
      subject.addEventListener('input', (e)=>{
        let length= e.target.value.length;
        subject_count.innerText= `${length}/100`;
        if(length==100){
          subject_full.style.display= "block";
          }
          else{
            subject_full.style.display= "none";
            }
      })
      let message_count= document.getElementById("message-count");
      let message= document.getElementById("message");
      let message_full= document.getElementById("message-full");
      message.addEventListener('input', (e)=>{
        let length= e.target.value.length;
        message_count.innerText= `${length}/250`;
        if(length==250){
          message_full.style.display= "block";
        }
        else{
          message_full.style.display= "none";
        }
      })
    })

   /* document.getElementById("newsletterForm").addEventListener("submit", function(event) {
      event.preventDefault();


      var email = document.getElementById("email").value;

      document.getElementById("confirmationMessage").style.display = "block";


      document.getElementById("email").value = '';
  });
  */

  document.getElementById("subs_btn").addEventListener("submit", function(event) {
  event.preventDefault(); 

  const email_input = document.getElementById("newsletter-email").value;

  if (!validateEmail(email_input)) {
   /* alert("Please enter a valid email address.");*/
    document.getElementById("confirmationMessage").textContent = "Please enter a valid email address." ;
  }
  else{
  document.getElementById("confirmationMessage").textContent = "Thank you for subscribing!" ;
  }
  document.getElementById("newsletter-email").value = '';
});

function validateEmail(email_input) {
  const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return re.test(email_input.toLowerCase());
}


  </script>

  <script>

    //   function sendMail(){
    //         let params={
    //             name:document.getElementById('name').value,
    //             email:document.getElementById('email').value,
    //             subject:document.getElementById('subject').value,
    //             message:document.getElementById('message').value,
    //             subscribe:document.getElementById('newsletter-email').value
    //         }
    //         EmailJSResponseStatus.send("service_lktb68z","template_w79vd94",params,"o6kveYmOSDrs0l1Mg")
    //         .then(alert('Email sent successfully'))
    //       }


    // document.querySelector('subscribe-btn').addEventListener('submit', sendMail());
    // Function to toggle dark mode
    function toggleDarkMode() {
      const isDarkMode = isDarkModePreferred();
      setDarkModePreference(!isDarkMode);
      applyDarkModePreference();
    }

    // Function to apply dark mode preference
    function applyDarkModePreference() {
      const isDarkMode = isDarkModePreferred();
      if (isDarkMode) {
        document.body.classList.add('dark-mode');
        document.getElementById('theme-icon').src = './assets/images/icons8-sun.svg';
      } else {
        document.body.classList.remove('dark-mode');
        document.getElementById('theme-icon').src = './assets/images/moon_solid.svg';
      }
    }

    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();
          switchCheckbox.checked = true;
        } else {
          applyLightModeStyles();
        }
      };
    
      const handleThemeChange = () => {
        if (switchCheckbox.checked) {
          applyDarkModeStyles();
          localStorage.setItem('theme', 'dark-mode');
        } else {
          applyLightModeStyles();
          localStorage.setItem('theme', 'light-mode');
        }
      };
    
      initializeTheme();
      switchCheckbox.addEventListener('change', handleThemeChange);
    });
    
  </script>


  <!--
    - custom js link
  -->

  <!--
    - ionicon link
  -->
  <script src="./assets/js/scroll-reveal.js"></script>
  <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>

  <!-- Lenis smooth scrolling -->
  <script>
    // const navbar=document.querySelector('.navbar'),
    //       NavButton=document.getElementById('nav-toggle-button'),
    //       open=document.querySelector('.open'),
    //       close=document.querySelector('.close');
    // let count=0
    // NavButton.addEventListener('click',()=>{
    //   if(count===0){
    //      navbar.classList.remove('nav_activated')
    //      open.classList.add('close')
    //   close.classList.add('open')
    //   open.classList.remove('open')
    //   close.classList.remove('close')
    //      count++
    //   }
    //   else{
    //     navbar.classList.add('nav_activated')
    //     open.classList.add('open')
    //   close.classList.add('close')
    //   open.classList.remove('close')
    //   close.classList.remove('open')
    //     count=0
    //   }
    // })
    document.addEventListener("scroll", function () {
      var scrollPosition = window.scrollY;

      // Get the top position of each section on the page
      var homeSection = document.getElementById("home").offsetTop;
      var benefitsSection = document.getElementById("benefits").offsetTop;
      var genreSection = document.getElementById("genre").offsetTop;
      var chaptersSection = document.getElementById("chapters").offsetTop;
      var pricingSection = document.getElementById("pricing").offsetTop;
      var contactSection = document.getElementById("contact").offsetTop;

      // Check which section the user has scrolled to and add the active class accordingly
      if (scrollPosition < benefitsSection) {
        setActiveLink("home");
      } else if (scrollPosition >= benefitsSection && scrollPosition < genreSection) {
        setActiveLink("benefits");
      } else if (scrollPosition >= genreSection && scrollPosition < chaptersSection) {
        setActiveLink("genre");
      } else if (scrollPosition >= chaptersSection && scrollPosition < pricingSection) {
        setActiveLink("chapters");
      } else if (scrollPosition >= pricingSection && scrollPosition < contactSection) {
        setActiveLink("pricing");
      } else {
        setActiveLink("contact");
      }
    });

    function setActiveLink(sectionId) {
      // Remove active class from all navbar links
      var navbarLinks = document.querySelectorAll(".navbar-link");
      navbarLinks.forEach(function (link) {
        link.classList.remove("active");
      });

      // Add active class to the navbar link corresponding to the current section
      var activeLink = document.querySelector('a[href="#' + sectionId + '"]');
      if (activeLink) {
        activeLink.classList.add("active");
      }
    }

    const lenis = new Lenis({
      duration: 1.8,
      easing: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
      direction: "vertical",
      gestureDirection: "vertical",
      smooth: true,
      smoothTouch: false,
      touchMultiplier: 2,
    });

    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);
    // JavaScript function to load more content when user scrolls to bottom
    function loadMoreContent() {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var windowHeight = window.innerHeight;
      var documentHeight = document.documentElement.scrollHeight;

      // Check if user has scrolled to the bottom of the page
      if (scrollTop + windowHeight >= documentHeight) {
        // Make an AJAX request to fetch more content
        // Replace 'more-content-url' with the actual URL to fetch more content
        fetch('/index.html')
          .then(response => response.text())
          .then(data => {
            // Append the fetched content to the page
            document.getElementById('content-container').insertAdjacentHTML('beforeend', data);
          })
          .catch(error => console.error('Error fetching more content:', error));
      }
    }

    // Event listener to trigger loadMoreContent function when user scrolls
    window.addEventListener('scroll', loadMoreContent);


  </script>
  <script type="module">
    import { getAuth, onAuthStateChanged, signOut } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-auth.js";
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";

    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "AIzaSyCu2WXknNce_49J5BLuR1DyHm319hu6dWc",
      authDomain: "login-13127.firebaseapp.com",
      projectId: "login-13127",
      storageBucket: "login-13127.appspot.com",
      messagingSenderId: "151656578300",
      appId: "1:151656578300:web:c67208ab6ec437c844ab79",
      measurementId: "G-L3PPD58MZ8",
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const auth = getAuth();

    // Check authentication state and update navbar
    onAuthStateChanged(auth, (user) => {
      if (user) {
        document.getElementById("login-signup-link").style.display = "none";
        document.getElementById("logout-r").style.display = "block";
      } else {
        document.getElementById("login-signup-link").style.display = "block";
        document.getElementById("logout-r").style.display = "none";
      }
    });

    // Logout function
    document.getElementById("logout-r").addEventListener("click", (e) => {
      e.preventDefault();
      signOut(auth).then(() => {
        alert("Logged out successfully.");
        window.location.href = "../../index.html";
      }).catch((error) => {
        console.error("Logout error:", error);
      });
    });
  </script>

  <script src="vanilla-tilt.js"></script>
  <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
  <script src="https://mediafiles.botpress.cloud/d1b37584-4b4e-4f3a-8937-8a06cd0d822e/webchat/config.js" defer></script>
  <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
  <script src="https://mediafiles.botpress.cloud/7f002596-82e6-4d47-a8e4-df34d38fa2d3/webchat/config.js" defer></script>

  <!-- Swiper JS -->
  <script src="./assets/js/swiper-bundle.min.js"></script>
  <!-- Custom JavaScript -->
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const backToTopButton = document.getElementById('back-to-top-container');

      function checkButtonVisibility() {
        if (window.innerWidth > 100 && window.scrollY > 100) {
          backToTopButton.style.display = 'block';
        } else {
          backToTopButton.style.display = 'none';
        }
      }

      window.addEventListener('scroll', checkButtonVisibility);
      window.addEventListener('resize', checkButtonVisibility);

      backToTopButton.addEventListener('click', function () {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });

      checkButtonVisibility();
    });

  </script>
<!-- Fot Contact Send Now Button -->
  <script>
    document.getElementById("contact-form").addEventListener("submit", function(event) {
      event.preventDefault();
      var successMessage = document.getElementById("success-message");
      successMessage.style.display = "block";
      document.getElementById("contact-form").reset();
      setTimeout(function() {
        successMessage.style.display = "none";
      }, 3000);
    });
  </script>

  <script src="./assets/js/test-script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
  <script src="./scrollbar.js"></script>
<script>
const navbar=document.querySelector('.navbar'),
NavButton=document.querySelector('.nav-toggle-btn'),
open=document.querySelector('.open'),
close=document.querySelector('.close');
let count=0
NavButton.addEventListener('click',()=>{

if(count===0){
navbar.classList.remove('nav_activated')
open.classList.add('close')
close.classList.add('open')
open.classList.remove('open')
close.classList.remove('close')
count++
}
else{
navbar.classList.add('nav_activated')
open.classList.add('open')
close.classList.add('close')
open.classList.remove('close')
close.classList.remove('open')
count=0
}
})
</script>
</body>

</html>