From 5b6829588f6034e37512244c328abc5586381dfc Mon Sep 17 00:00:00 2001
From: alolika bhowmik <152315710+alo7lika@users.noreply.github.com>
Date: Sat, 9 Nov 2024 22:55:53 +0530
Subject: [PATCH 01/13] Create config.yml

---
 .github/ISSUE_TEMPLATE/config.yml | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/config.yml

diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 000000000..af1975fee
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Questions or need suggestions?
+    url: https://github.com/anuragverma108/SwapReads/discussions/new?category=q-a
+    about: You can create a Q&A discussion and ask for clarifications 

From 994a69aec6ad138de1583d4b6c1741d8d52e3375 Mon Sep 17 00:00:00 2001
From: alolika bhowmik <152315710+alo7lika@users.noreply.github.com>
Date: Sat, 9 Nov 2024 23:01:28 +0530
Subject: [PATCH 02/13] Create custom.yml

---
 .github/ISSUE_TEMPLATE/custom.yml | 70 +++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/custom.yml

diff --git a/.github/ISSUE_TEMPLATE/custom.yml b/.github/ISSUE_TEMPLATE/custom.yml
new file mode 100644
index 000000000..15d896ab3
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/custom.yml
@@ -0,0 +1,70 @@
+name: "⚙️ Custom Issue"
+description: "Submit a custom issue or suggestion for SwapReads."
+title: "[Custom]: <Brief description of the issue>"
+labels: ["custom", "status: needs triage"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for submitting a custom issue for **SwapReads**! This template is intended for any requests or suggestions that don't fit into the bug report, feature request, or documentation categories.
+
+  - type: input
+    id: issue_summary
+    attributes:
+      label: "Issue Summary"
+      description: "Provide a summary of the custom issue."
+      placeholder: "E.g., Enhancement suggestion for search functionality"
+    validations:
+      required: true
+
+  - type: textarea
+    id: issue_description
+    attributes:
+      label: "Issue Description"
+      description: "Describe the issue or suggestion in detail."
+      placeholder: "Provide a detailed description of the custom issue, including the context, use case, or scenario in which this issue occurs or would be relevant..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: proposed_solution
+    attributes:
+      label: "Proposed Solution (Optional)"
+      description: "If you have any ideas or suggestions for how to address this issue, describe them here."
+      placeholder: "Describe your proposed solution or approach..."
+
+  - type: dropdown
+    id: priority
+    attributes:
+      label: "Priority"
+      description: "How important is this issue to you?"
+      options:
+        - "High - Requires urgent attention"
+        - "Medium - Should be addressed soon"
+        - "Low - Can be addressed later"
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: category
+    attributes:
+      label: "Category"
+      description: "Select the category that best describes the issue."
+      options:
+        - label: "Enhancement"
+        - label: "Refactor"
+        - label: "Security"
+        - label: "Design"
+        - label: "Other"
+
+  - type: textarea
+    id: additional_context
+    attributes:
+      label: "Additional Context (Optional)"
+      description: "Add any other context or information that might be relevant to this issue."
+      placeholder: "Provide any extra details, screenshots, or references that could help with understanding the issue..."
+
+  - type: markdown
+    attributes:
+      value: |
+        **Thank you for your suggestion!** We appreciate your input and will review your custom issue promptly. 📝

From 73dbe5d4a87918a722c38d49466eb92005e7e987 Mon Sep 17 00:00:00 2001
From: KapuluruBhuvaneswariVspdbct <kapulurubhuvaneeswarivspdbct@gmail.com>
Date: Sun, 10 Nov 2024 11:13:32 +0530
Subject: [PATCH 03/13] solved #4887 and #4883

---
 assets/html/classic.html  |  24 ++++-
 assets/html/classicq.html | 186 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 209 insertions(+), 1 deletion(-)
 create mode 100644 assets/html/classicq.html

diff --git a/assets/html/classic.html b/assets/html/classic.html
index 08bebf7dd..ee726df4c 100644
--- a/assets/html/classic.html
+++ b/assets/html/classic.html
@@ -1257,7 +1257,29 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
   </header>
 
 
-
+  <style>
+    .butt{
+      margin-top:150px;
+      width:400px;
+      justify-content: center;
+    }
+    .buttt{
+      margin-top:10px;
+      width:400px;
+      justify-content: center;
+    }
+    a {
+      text-decoration: none; /* Default state */
+  }
+  
+  a:hover {
+      text-decoration: none; /* Remove underline on hover */
+  }
+  
+  </style>
+  <a href="classicq.html" onclick="lenis.scrollTo('#classicq')" data-nav-link>
+    <button class="butt">Quiz</button>
+  </a>
   <!-- Changes here -->
 
   <!-- Card Container -->
diff --git a/assets/html/classicq.html b/assets/html/classicq.html
new file mode 100644
index 000000000..867d956d9
--- /dev/null
+++ b/assets/html/classicq.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Classic Literature Quiz</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #ffd2d3;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .quiz-container {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 300px;
+            text-align: center;
+        }
+
+        button {
+            padding: 10px 20px;
+            margin-top: 20px;
+            cursor: pointer;
+            background-color: #b00000;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            display: block;
+            width: 100%;
+        }
+
+        button:hover {
+            background-color: #0056b3;
+        }
+
+        h4 {
+            margin: 10px 0;
+        }
+
+        .option {
+            margin: 5px 0;
+        }
+
+        .solution {
+            margin-top: 10px;
+            text-align: left;
+        }
+    </style>
+</head>
+<body>
+
+<div class="quiz-container">
+    <h1>Classic Literature Quiz</h1>
+    <div id="quiz-questions">
+        <!-- Questions will be inserted here -->
+    </div>
+    <button id="submit-button" onclick="submitQuiz()">Submit</button>
+    <div id="quiz-result" style="display: none;"></div>
+    <button id="home-button" style="display: none;" onclick="window.location.href='index.html';">Return to Home</button>
+    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
+</div>
+
+<script>
+    const quizData = [
+        {
+            question: "Who is the author of 'Pride and Prejudice'?",
+            options: ["Charles Dickens", "Jane Austen", "George Orwell", "Leo Tolstoy"],
+            answer: "Jane Austen"
+        },
+        {
+            question: "In 'Moby-Dick', what is the name of Captain Ahab’s ship?",
+            options: ["The Beagle", "The Pequod", "The Bounty", "The Adventure"],
+            answer: "The Pequod"
+        },
+        {
+            question: "Which novel takes place in a dystopian world with surveillance by 'Big Brother'?",
+            options: ["Brave New World", "Fahrenheit 451", "1984", "Animal Farm"],
+            answer: "1984"
+        },
+        {
+            question: "Who is the main protagonist in 'To Kill a Mockingbird'?",
+            options: ["Scout Finch", "Huck Finn", "Elizabeth Bennet", "Pip"],
+            answer: "Scout Finch"
+        },
+        {
+            question: "Which character says 'It is a far, far better thing that I do, than I have ever done' in 'A Tale of Two Cities'?",
+            options: ["Charles Darnay", "Sydney Carton", "Pip", "Jay Gatsby"],
+            answer: "Sydney Carton"
+        }
+    ];
+
+    let currentQuestionIndex = 0;
+    let score = 0;
+
+    function loadQuestion() {
+        const questionElement = document.getElementById('quiz-questions');
+        questionElement.innerHTML = '';
+
+        const currentQuestion = quizData[currentQuestionIndex];
+        const questionText = document.createElement('h4');
+        questionText.innerText = currentQuestion.question;
+        questionElement.appendChild(questionText);
+
+        currentQuestion.options.forEach(option => {
+            const optionButton = document.createElement('button');
+            optionButton.classList.add('option');
+            optionButton.innerText = option;
+            optionButton.onclick = () => selectAnswer(option);
+            questionElement.appendChild(optionButton);
+        });
+    }
+
+    function selectAnswer(selectedOption) {
+        const currentQuestion = quizData[currentQuestionIndex];
+        if (selectedOption === currentQuestion.answer) {
+            score++;
+        }
+        currentQuestionIndex++;
+
+        if (currentQuestionIndex < quizData.length) {
+            loadQuestion();
+        } else {
+            showResult();
+        }
+    }
+
+    function showResult() {
+        const quizContainer = document.querySelector('.quiz-container');
+        quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
+
+        const homeButton = document.createElement('button');
+        homeButton.onclick = () => window.location.href = 'classic.html';
+        homeButton.innerText = 'Return to home';
+        quizContainer.appendChild(homeButton);
+
+        const solutionsButton = document.createElement('button');
+        solutionsButton.onclick = showSolutions;
+        solutionsButton.innerText = 'See Solutions';
+        quizContainer.appendChild(solutionsButton);
+    }
+
+    function showSolutions() {
+        const quizContainer = document.querySelector('.quiz-container');
+        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+
+        quizData.forEach((question, index) => {
+            const solutionElement = document.createElement('div');
+            solutionElement.classList.add('solution');
+
+            const questionText = document.createElement('h4');
+            questionText.innerText = `${index + 1}. ${question.question}`;
+            solutionElement.appendChild(questionText);
+
+            const correctAnswer = document.createElement('p');
+            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+            solutionElement.appendChild(correctAnswer);
+
+            quizContainer.appendChild(solutionElement);
+        });
+
+        const homeButton = document.createElement('button');
+        homeButton.onclick = () => window.location.href = 'quizzes.html';
+        homeButton.innerText = 'Return to Home';
+        quizContainer.appendChild(homeButton);
+    }
+
+    function submitQuiz() {
+        if (currentQuestionIndex < quizData.length) {
+            alert("Please answer all questions before submitting!");
+        } else {
+            showResult();
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', loadQuestion);
+</script>
+
+</body>
+</html>

From ee1c35cba4e7c92028bc577b9e7604d9fa523206 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 10 Nov 2024 05:44:00 +0000
Subject: [PATCH 04/13] Update repo structure

---
 README.md          | 1 +
 repo_structure.txt | 1 +
 2 files changed, 2 insertions(+)

diff --git a/README.md b/README.md
index e8df2dfe6..a1b89fa09 100644
--- a/README.md
+++ b/README.md
@@ -178,6 +178,7 @@
 │   │   ├── boy.html
 │   │   ├── checkout.html
 │   │   ├── classic.html
+│   │   ├── classicq.html
 │   │   ├── comedy.html
 │   │   ├── custom.html
 │   │   ├── cyberpunk.html
diff --git a/repo_structure.txt b/repo_structure.txt
index 4485b6fd0..d46e1b273 100644
--- a/repo_structure.txt
+++ b/repo_structure.txt
@@ -123,6 +123,7 @@
 │   │   ├── boy.html
 │   │   ├── checkout.html
 │   │   ├── classic.html
+│   │   ├── classicq.html
 │   │   ├── comedy.html
 │   │   ├── custom.html
 │   │   ├── cyberpunk.html

From d8719687a9f4e6d269dd215cfdaf06e2a8fa31fc Mon Sep 17 00:00:00 2001
From: KapuluruBhuvaneswariVspdbct <kapulurubhuvaneeswarivspdbct@gmail.com>
Date: Sun, 10 Nov 2024 11:28:47 +0530
Subject: [PATCH 05/13] solved #4886

---
 assets/html/classic.html  |  3 ++
 assets/html/classica.html | 96 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 assets/html/classica.html

diff --git a/assets/html/classic.html b/assets/html/classic.html
index ee726df4c..2e40eabb0 100644
--- a/assets/html/classic.html
+++ b/assets/html/classic.html
@@ -1280,6 +1280,9 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
   <a href="classicq.html" onclick="lenis.scrollTo('#classicq')" data-nav-link>
     <button class="butt">Quiz</button>
   </a>
+  <a href="classica.html" onclick="lenis.scrollTo('#classica')" data-nav-link>
+    <button class="buttt">Approach</button>
+  </a>
   <!-- Changes here -->
 
   <!-- Card Container -->
diff --git a/assets/html/classica.html b/assets/html/classica.html
new file mode 100644
index 000000000..569297d45
--- /dev/null
+++ b/assets/html/classica.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Approach to Reading Classic Literature</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #ffd2d3;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .content-container {
+            background: white;
+            padding: 15px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 70%;
+            max-width: 800px;
+            text-align: center;
+            margin-top: 150px;
+        }
+
+        h2 {
+            margin-bottom: 15px;
+        }
+
+        h3 {
+            text-align: left;
+            margin-top: 20px;
+        }
+
+        p, ul {
+            text-align: left;
+        }
+
+        ul {
+            margin: 10px 0;
+            padding-left: 20px;
+        }
+
+        ul li {
+            margin: 8px 0;
+        }
+
+        button {
+            padding: 10px 20px;
+            margin-top: 20px;
+            cursor: pointer;
+            background-color: #b00000;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+
+        button:hover {
+            background-color: #870000;
+        }
+    </style>
+</head>
+<body>
+
+<div class="content-container">
+    <h2>How to Approach Reading Classic Literature</h2>
+    <p>Reading classic literature can be a rewarding experience, but it often requires a thoughtful approach. Here are some tips to help you get started:</p>
+    <ul>
+        <li><strong>Start with the Right Book:</strong> Choose a classic that matches your interests. For adventure, try <em>Treasure Island</em>; for romance, consider <em>Pride and Prejudice</em>.</li>
+        <li><strong>Understand the Context:</strong> Learning about the historical and cultural background can enrich your understanding. Try reading an introduction or summary beforehand.</li>
+        <li><strong>Take Your Time:</strong> Classics are often dense and richly layered. Read slowly, take breaks, and savor the details.</li>
+        <li><strong>Annotate and Take Notes:</strong> Jotting down thoughts, questions, or new words can deepen your engagement with the text.</li>
+        <li><strong>Discuss with Others:</strong> Joining a book club or discussing with friends can offer new perspectives and make the experience more enjoyable.</li>
+        <li><strong>Use Supplemental Resources:</strong> Online resources like SparkNotes or study guides can provide summaries and analyses to aid comprehension.</li>
+    </ul>
+
+    <h3>Examples of Classic Literature</h3>
+    <ul>
+        <li><strong>Pride and Prejudice</strong> by Jane Austen – A tale of love, society, and class in Regency-era England.</li>
+        <li><strong>Moby-Dick</strong> by Herman Melville – An adventurous quest on the high seas, exploring obsession and revenge.</li>
+        <li><strong>1984</strong> by George Orwell – A dystopian novel about totalitarianism and the dangers of a controlled society.</li>
+        <li><strong>Great Expectations</strong> by Charles Dickens – A story of ambition, social class, and personal growth in Victorian England.</li>
+        <li><strong>To Kill a Mockingbird</strong> by Harper Lee – A powerful narrative on racial injustice and moral integrity in the American South.</li>
+        <li><strong>War and Peace</strong> by Leo Tolstoy – A sprawling tale of Russian society, war, and personal fate during the Napoleonic era.</li>
+        <li><strong>The Great Gatsby</strong> by F. Scott Fitzgerald – A critique of the American Dream set in the Jazz Age.</li>
+    </ul>
+
+    <button onclick="window.location.href='classic.html';">Return to Home</button>
+</div>
+
+</body>
+</html>

From e3b391f9b4600cd9ed6f12eb84a20cb54edcc87d Mon Sep 17 00:00:00 2001
From: KapuluruBhuvaneswariVspdbct <kapulurubhuvaneeswarivspdbct@gmail.com>
Date: Sun, 10 Nov 2024 12:49:16 +0530
Subject: [PATCH 06/13] solved #4885 #4884 #4891

---
 assets/html/romance.html  |  31 ++++++-
 assets/html/romancea.html |  95 +++++++++++++++++++
 assets/html/romanceq.html | 186 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 309 insertions(+), 3 deletions(-)
 create mode 100644 assets/html/romancea.html
 create mode 100644 assets/html/romanceq.html

diff --git a/assets/html/romance.html b/assets/html/romance.html
index 43b7bc074..61bdfab80 100644
--- a/assets/html/romance.html
+++ b/assets/html/romance.html
@@ -1277,12 +1277,37 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
     </div>
   </header>
 
-
+  
+  <h1 class="heading">Romance Books</h1>
+  <style>
+    .butt{
+      margin-top:10px;
+      width:400px;
+      justify-content: center;
+    }
+    .buttt{
+      margin-top:10px;
+      width:400px;
+      justify-content: center;
+    }
+    a {
+      text-decoration: none; /* Default state */
+  }
+  
+  a:hover {
+      text-decoration: none; /* Remove underline on hover */
+  }
+  
+  </style>
+  <a href="romanceq.html" onclick="lenis.scrollTo('#romanceq')" data-nav-link>
+    <button class="butt">Quiz</button>
+  </a>
+  <a href="romancea.html" onclick="lenis.scrollTo('#romancea')" data-nav-link>
+    <button class="buttt">Approach</button>
+  </a>
 
   <!-- Changes here -->
 
-  <h1 class="heading">Romance Books</h1>
-
   <!-- Card Container -->
   <div class="card-container" style="margin-top: -20px;">
     <div class="card" onclick="this.classList.toggle('flip')">
diff --git a/assets/html/romancea.html b/assets/html/romancea.html
new file mode 100644
index 000000000..7f5e488a0
--- /dev/null
+++ b/assets/html/romancea.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Approach to Reading Romance Literature</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #ffd2d3;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .content-container {
+            background: white;
+            padding: 15px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 70%;
+            max-width: 800px;
+            text-align: center;
+            margin-top: 150px;
+        }
+
+        h2 {
+            margin-bottom: 15px;
+        }
+
+        h3 {
+            text-align: left;
+            margin-top: 20px;
+        }
+
+        p, ul {
+            text-align: left;
+        }
+
+        ul {
+            margin: 10px 0;
+            padding-left: 20px;
+        }
+
+        ul li {
+            margin: 8px 0;
+        }
+
+        button {
+            padding: 10px 20px;
+            margin-top: 20px;
+            cursor: pointer;
+            background-color: #b00000;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+
+        button:hover {
+            background-color: #870000;
+        }
+    </style>
+</head>
+<body>
+
+<div class="content-container">
+    <h2>How to Approach Reading Romance Literature</h2>
+    <p>Diving into romance novels can be an enjoyable and heartwarming experience. Here are some tips to enhance your reading journey:</p>
+    <ul>
+        <li><strong>Pick a Genre You Love:</strong> Romance is broad, covering contemporary, historical, fantasy, and more. Choose a theme that resonates with you to start.</li>
+        <li><strong>Get to Know the Tropes:</strong> Romance novels often follow familiar tropes like enemies-to-lovers, second-chance romance, or friends-to-lovers. Recognizing these can add to your enjoyment.</li>
+        <li><strong>Immerse Yourself in the Characters:</strong> Romance is character-driven. Take your time getting to know the main characters and their journeys.</li>
+        <li><strong>Keep an Open Heart:</strong> Romance literature often explores vulnerability and personal growth, so be open to the emotional ups and downs.</li>
+        <li><strong>Join a Book Community:</strong> Book clubs, online forums, or social media groups dedicated to romance can add to your experience and help you discover new favorites.</li>
+    </ul>
+
+    <h3>Popular Romance Novels</h3>
+    <ul>
+        <li><strong>Pride and Prejudice</strong> by Jane Austen – A classic romance with sharp wit and timeless social commentary.</li>
+        <li><strong>Outlander</strong> by Diana Gabaldon – A time-traveling adventure romance with historical depth and epic love.</li>
+        <li><strong>Me Before You</strong> by Jojo Moyes – A contemporary romance that’s as heartwarming as it is heartbreaking.</li>
+        <li><strong>The Hating Game</strong> by Sally Thorne – An enemies-to-lovers story that’s both fun and emotionally engaging.</li>
+        <li><strong>The Kiss Quotient</strong> by Helen Hoang – A unique and refreshing love story featuring diverse characters and perspectives.</li>
+        <li><strong>It Ends with Us</strong> by Colleen Hoover – A raw, emotional romance that tackles real-life issues and love’s complexities.</li>
+        <li><strong>Beach Read</strong> by Emily Henry – A romance between two writers with a beautiful setting and heartfelt storytelling.</li>
+    </ul>
+
+    <button onclick="window.location.href='romance.html';">Return to Home</button>
+</div>
+
+</body>
+</html>
diff --git a/assets/html/romanceq.html b/assets/html/romanceq.html
new file mode 100644
index 000000000..a56726817
--- /dev/null
+++ b/assets/html/romanceq.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Romance Books Quiz</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #ffd2d3;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .quiz-container {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 300px;
+            text-align: center;
+        }
+
+        button {
+            padding: 10px 20px;
+            margin-top: 20px;
+            cursor: pointer;
+            background-color: #b00000;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            display: block;
+            width: 100%;
+        }
+
+        button:hover {
+            background-color: #870000;
+        }
+
+        h4 {
+            margin: 10px 0;
+        }
+
+        .option {
+            margin: 5px 0;
+        }
+
+        .solution {
+            margin-top: 10px;
+            text-align: left;
+        }
+    </style>
+</head>
+<body>
+
+<div class="quiz-container">
+    <h1>Romance Books Quiz</h1>
+    <div id="quiz-questions">
+        <!-- Questions will be inserted here -->
+    </div>
+    <button id="submit-button" onclick="submitQuiz()">Submit</button>
+    <div id="quiz-result" style="display: none;"></div>
+    <button id="home-button" style="display: none;" onclick="window.location.href='index.html';">Return to Home</button>
+    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
+</div>
+
+<script>
+    const quizData = [
+        {
+            question: "Who wrote 'Pride and Prejudice'?",
+            options: ["Jane Austen", "Louisa May Alcott", "Diana Gabaldon", "Jojo Moyes"],
+            answer: "Jane Austen"
+        },
+        {
+            question: "In 'Outlander', which historical period does Claire time-travel to?",
+            options: ["18th-century Scotland", "Victorian England", "Medieval France", "Ancient Rome"],
+            answer: "18th-century Scotland"
+        },
+        {
+            question: "In 'Me Before You', who is the main male character with a life-changing injury?",
+            options: ["Will Traynor", "Jamie Fraser", "Mr. Darcy", "Christian Grey"],
+            answer: "Will Traynor"
+        },
+        {
+            question: "Who are the two main characters in 'The Hating Game' by Sally Thorne?",
+            options: ["Lucy and Josh", "Emma and Dexter", "Hazel and Augustus", "Claire and Jamie"],
+            answer: "Lucy and Josh"
+        },
+        {
+            question: "In 'The Kiss Quotient' by Helen Hoang, what does the main character, Stella, do for a living?",
+            options: ["Econometrician", "Artist", "Writer", "Doctor"],
+            answer: "Econometrician"
+        }
+    ];
+
+    let currentQuestionIndex = 0;
+    let score = 0;
+
+    function loadQuestion() {
+        const questionElement = document.getElementById('quiz-questions');
+        questionElement.innerHTML = '';
+
+        const currentQuestion = quizData[currentQuestionIndex];
+        const questionText = document.createElement('h4');
+        questionText.innerText = currentQuestion.question;
+        questionElement.appendChild(questionText);
+
+        currentQuestion.options.forEach(option => {
+            const optionButton = document.createElement('button');
+            optionButton.classList.add('option');
+            optionButton.innerText = option;
+            optionButton.onclick = () => selectAnswer(option);
+            questionElement.appendChild(optionButton);
+        });
+    }
+
+    function selectAnswer(selectedOption) {
+        const currentQuestion = quizData[currentQuestionIndex];
+        if (selectedOption === currentQuestion.answer) {
+            score++;
+        }
+        currentQuestionIndex++;
+
+        if (currentQuestionIndex < quizData.length) {
+            loadQuestion();
+        } else {
+            showResult();
+        }
+    }
+
+    function showResult() {
+        const quizContainer = document.querySelector('.quiz-container');
+        quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
+
+        const homeButton = document.createElement('button');
+        homeButton.onclick = () => window.location.href = 'classic.html';
+        homeButton.innerText = 'Return to Home';
+        quizContainer.appendChild(homeButton);
+
+        const solutionsButton = document.createElement('button');
+        solutionsButton.onclick = showSolutions;
+        solutionsButton.innerText = 'See Solutions';
+        quizContainer.appendChild(solutionsButton);
+    }
+
+    function showSolutions() {
+        const quizContainer = document.querySelector('.quiz-container');
+        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+
+        quizData.forEach((question, index) => {
+            const solutionElement = document.createElement('div');
+            solutionElement.classList.add('solution');
+
+            const questionText = document.createElement('h4');
+            questionText.innerText = `${index + 1}. ${question.question}`;
+            solutionElement.appendChild(questionText);
+
+            const correctAnswer = document.createElement('p');
+            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+            solutionElement.appendChild(correctAnswer);
+
+            quizContainer.appendChild(solutionElement);
+        });
+
+        const homeButton = document.createElement('button');
+        homeButton.onclick = () => window.location.href = 'quizzes.html';
+        homeButton.innerText = 'Return to Home';
+        quizContainer.appendChild(homeButton);
+    }
+
+    function submitQuiz() {
+        if (currentQuestionIndex < quizData.length) {
+            alert("Please answer all questions before submitting!");
+        } else {
+            showResult();
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', loadQuestion);
+</script>
+
+</body>
+</html>

From dada6a1ad58a2fe217996c9c1aff639ac688e1d7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 10 Nov 2024 07:20:02 +0000
Subject: [PATCH 07/13] Update repo structure

---
 README.md          | 3 +++
 repo_structure.txt | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/README.md b/README.md
index a1b89fa09..a7b3c54f5 100644
--- a/README.md
+++ b/README.md
@@ -178,6 +178,7 @@
 │   │   ├── boy.html
 │   │   ├── checkout.html
 │   │   ├── classic.html
+│   │   ├── classica.html
 │   │   ├── classicq.html
 │   │   ├── comedy.html
 │   │   ├── custom.html
@@ -224,6 +225,8 @@
 │   │   ├── read.html
 │   │   ├── read_later.html
 │   │   ├── romance.html
+│   │   ├── romancea.html
+│   │   ├── romanceq.html
 │   │   ├── satire.html
 │   │   ├── school.html
 │   │   ├── science-fiction.html
diff --git a/repo_structure.txt b/repo_structure.txt
index d46e1b273..c39fffecf 100644
--- a/repo_structure.txt
+++ b/repo_structure.txt
@@ -123,6 +123,7 @@
 │   │   ├── boy.html
 │   │   ├── checkout.html
 │   │   ├── classic.html
+│   │   ├── classica.html
 │   │   ├── classicq.html
 │   │   ├── comedy.html
 │   │   ├── custom.html
@@ -169,6 +170,8 @@
 │   │   ├── read.html
 │   │   ├── read_later.html
 │   │   ├── romance.html
+│   │   ├── romancea.html
+│   │   ├── romanceq.html
 │   │   ├── satire.html
 │   │   ├── school.html
 │   │   ├── science-fiction.html

From fd00a57ad31871b262c10d0da8a5612677606ab8 Mon Sep 17 00:00:00 2001
From: KapuluruBhuvaneswariVspdbct <kapulurubhuvaneeswarivspdbct@gmail.com>
Date: Sun, 10 Nov 2024 13:46:07 +0530
Subject: [PATCH 08/13] solved #4911 #4912 #4913

---
 assets/html/suspense-thriller.html |  31 ++++-
 assets/html/suspensea.html         |  94 +++++++++++++++
 assets/html/suspenseq.html         | 186 +++++++++++++++++++++++++++++
 3 files changed, 309 insertions(+), 2 deletions(-)
 create mode 100644 assets/html/suspensea.html
 create mode 100644 assets/html/suspenseq.html

diff --git a/assets/html/suspense-thriller.html b/assets/html/suspense-thriller.html
index bca93da6d..359a41741 100644
--- a/assets/html/suspense-thriller.html
+++ b/assets/html/suspense-thriller.html
@@ -1260,10 +1260,37 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
   <!-- Changes here --> 
    
   <h1 class="heading">Suspense Thriller</h1>
+<h3>Explore each book further by clicking on the covers!</h3></div>
+
+  <style>
+    .butt{
+      margin-top:10px;
+      width:400px;
+      justify-content: center;
+    }
+    .buttt{
+      margin-top:10px;
+      width:400px;
+      justify-content: center;
+    }
+    a {
+      text-decoration: none; /* Default state */
+  }
+  
+  a:hover {
+      text-decoration: none; /* Remove underline on hover */
+  }
+  
+  </style>
+  <a href="suspenseq.html" onclick="lenis.scrollTo('#romanceq')" data-nav-link>
+    <button class="butt">Quiz</button>
+  </a>
+  <a href="suspensea.html" onclick="lenis.scrollTo('#romancea')" data-nav-link>
+    <button class="buttt">Approach</button>
+  </a>
 
   <!-- Card Container -->
-  <h3>Explore each book further by clicking on the covers!</h3></div>
-  <div class="card-container" style="margin-top: -20px;">
+    <div class="card-container" style="margin-top: -20px;">
 
     <div class="card" onclick="this.classList.toggle('flip')">
       <div class="card-inner">
diff --git a/assets/html/suspensea.html b/assets/html/suspensea.html
new file mode 100644
index 000000000..c0b1a611f
--- /dev/null
+++ b/assets/html/suspensea.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Approach to Reading Suspense Thriller Literature</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #ffd2d3;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .content-container {
+            background: white;
+            padding: 15px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 70%;
+            max-width: 800px;
+            text-align: center;
+            margin-top: 150px;
+        }
+
+        h2 {
+            margin-bottom: 15px;
+        }
+
+        h3 {
+            text-align: left;
+            margin-top: 20px;
+        }
+
+        p, ul {
+            text-align: left;
+        }
+
+        ul {
+            margin: 10px 0;
+            padding-left: 20px;
+        }
+
+        ul li {
+            margin: 8px 0;
+        }
+
+        button {
+            padding: 10px 20px;
+            margin-top: 20px;
+            cursor: pointer;
+            background-color: #b00000;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+
+        button:hover {
+            background-color: #870000;
+        }
+    </style>
+</head>
+<body>
+
+<div class="content-container">
+    <h2>How to Approach Reading Suspense Thriller Literature</h2>
+    <p>Delving into suspense thrillers can be an intense and exciting journey. Here are some tips to make the most of your reading experience:</p>
+    <ul>
+        <li><strong>Choose a Theme You’re Intrigued By:</strong> Suspense thrillers span psychological thrillers, crime, mystery, and more. Select a subgenre that piques your curiosity.</li>
+        <li><strong>Pay Attention to Details:</strong> Suspense stories often rely on subtle clues and foreshadowing. Keep track of details as they may play a crucial role in the plot.</li>
+        <li><strong>Engage with the Characters’ Mindsets:</strong> Many thrillers dive deep into psychological aspects. Understanding character motivations can add to the thrill.</li>
+        <li><strong>Be Prepared for Twists:</strong> Thrillers are known for their twists. Expect the unexpected and enjoy the suspense as it unfolds.</li>
+        <li><strong>Join a Book Club:</strong> Discussing thrillers with others can enhance your experience and offer new perspectives on plot twists and themes.</li>
+    </ul>
+
+    <h3>Popular Suspense Thriller Novels</h3>
+    <ul>
+        <li><strong>Gone Girl</strong> by Gillian Flynn – A dark and twisted tale of marriage, secrets, and manipulation.</li>
+        <li><strong>The Girl with the Dragon Tattoo</strong> by Stieg Larsson – A gripping mystery with complex characters and intense suspense.</li>
+        <li><strong>Big Little Lies</strong> by Liane Moriarty – A blend of thriller and social commentary with secrets unraveling in a small town.</li>
+        <li><strong>The Woman in the Window</strong> by A.J. Finn – A psychological thriller full of unreliable narration and shocking twists.</li>
+        <li><strong>The Couple Next Door</strong> by Shari Lapena – A fast-paced thriller about secrets and betrayals between neighbors.</li>
+        <li><strong>The Silent Patient</strong> by Alex Michaelides – A captivating psychological thriller about silence, trauma, and secrets.</li>
+    </ul>
+
+    <button onclick="window.location.href='thriller.html';">Return to Home</button>
+</div>
+
+</body>
+</html>
diff --git a/assets/html/suspenseq.html b/assets/html/suspenseq.html
new file mode 100644
index 000000000..33a84d5ad
--- /dev/null
+++ b/assets/html/suspenseq.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Suspense Thriller Books Quiz</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #fbcaca;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .quiz-container {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 300px;
+            text-align: center;
+        }
+
+        button {
+            padding: 10px 20px;
+            margin-top: 20px;
+            cursor: pointer;
+            background-color: #003366;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            display: block;
+            width: 100%;
+        }
+
+        button:hover {
+            background-color: #002244;
+        }
+
+        h4 {
+            margin: 10px 0;
+        }
+
+        .option {
+            margin: 5px 0;
+        }
+
+        .solution {
+            margin-top: 10px;
+            text-align: left;
+        }
+    </style>
+</head>
+<body>
+
+<div class="quiz-container">
+    <h1>Suspense Thriller Books Quiz</h1>
+    <div id="quiz-questions">
+        <!-- Questions will be inserted here -->
+    </div>
+    <button id="submit-button" onclick="submitQuiz()">Submit</button>
+    <div id="quiz-result" style="display: none;"></div>
+    <button id="home-button" style="display: none;" onclick="window.location.href='index.html';">Return to Home</button>
+    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
+</div>
+
+<script>
+    const quizData = [
+        {
+            question: "Who is the author of 'Gone Girl'?",
+            options: ["Gillian Flynn", "Paula Hawkins", "Agatha Christie", "Stephen King"],
+            answer: "Gillian Flynn"
+        },
+        {
+            question: "In 'The Girl with the Dragon Tattoo', what is the name of the investigator?",
+            options: ["Mikael Blomkvist", "Harry Bosch", "Jack Reacher", "Robert Langdon"],
+            answer: "Mikael Blomkvist"
+        },
+        {
+            question: "'The Woman in the Window' is inspired by which classic thriller?",
+            options: ["Rear Window", "Psycho", "Vertigo", "Dial M for Murder"],
+            answer: "Rear Window"
+        },
+        {
+            question: "Who is the main character in 'Big Little Lies' by Liane Moriarty?",
+            options: ["Madeline", "Emma", "Rachel", "Holly"],
+            answer: "Madeline"
+        },
+        {
+            question: "'The Silent Patient' by Alex Michaelides revolves around which profession?",
+            options: ["Therapist", "Detective", "Teacher", "Writer"],
+            answer: "Therapist"
+        }
+    ];
+
+    let currentQuestionIndex = 0;
+    let score = 0;
+
+    function loadQuestion() {
+        const questionElement = document.getElementById('quiz-questions');
+        questionElement.innerHTML = '';
+
+        const currentQuestion = quizData[currentQuestionIndex];
+        const questionText = document.createElement('h4');
+        questionText.innerText = currentQuestion.question;
+        questionElement.appendChild(questionText);
+
+        currentQuestion.options.forEach(option => {
+            const optionButton = document.createElement('button');
+            optionButton.classList.add('option');
+            optionButton.innerText = option;
+            optionButton.onclick = () => selectAnswer(option);
+            questionElement.appendChild(optionButton);
+        });
+    }
+
+    function selectAnswer(selectedOption) {
+        const currentQuestion = quizData[currentQuestionIndex];
+        if (selectedOption === currentQuestion.answer) {
+            score++;
+        }
+        currentQuestionIndex++;
+
+        if (currentQuestionIndex < quizData.length) {
+            loadQuestion();
+        } else {
+            showResult();
+        }
+    }
+
+    function showResult() {
+        const quizContainer = document.querySelector('.quiz-container');
+        quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
+
+        const homeButton = document.createElement('button');
+        homeButton.onclick = () => window.location.href = 'suspense.html';
+        homeButton.innerText = 'Return to Home';
+        quizContainer.appendChild(homeButton);
+
+        const solutionsButton = document.createElement('button');
+        solutionsButton.onclick = showSolutions;
+        solutionsButton.innerText = 'See Solutions';
+        quizContainer.appendChild(solutionsButton);
+    }
+
+    function showSolutions() {
+        const quizContainer = document.querySelector('.quiz-container');
+        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+
+        quizData.forEach((question, index) => {
+            const solutionElement = document.createElement('div');
+            solutionElement.classList.add('solution');
+
+            const questionText = document.createElement('h4');
+            questionText.innerText = `${index + 1}. ${question.question}`;
+            solutionElement.appendChild(questionText);
+
+            const correctAnswer = document.createElement('p');
+            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+            solutionElement.appendChild(correctAnswer);
+
+            quizContainer.appendChild(solutionElement);
+        });
+
+        const homeButton = document.createElement('button');
+        homeButton.onclick = () => window.location.href = 'quizzes.html';
+        homeButton.innerText = 'Return to Home';
+        quizContainer.appendChild(homeButton);
+    }
+
+    function submitQuiz() {
+        if (currentQuestionIndex < quizData.length) {
+            alert("Please answer all questions before submitting!");
+        } else {
+            showResult();
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', loadQuestion);
+</script>
+
+</body>
+</html>

From 6efdbda5477632af1e63c1ba627307171e123cb0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 10 Nov 2024 08:17:20 +0000
Subject: [PATCH 09/13] Update repo structure

---
 README.md          | 2 ++
 repo_structure.txt | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/README.md b/README.md
index a7b3c54f5..809f96d03 100644
--- a/README.md
+++ b/README.md
@@ -234,6 +234,8 @@
 │   │   ├── settings.html
 │   │   ├── social.html
 │   │   ├── suspense-thriller.html
+│   │   ├── suspensea.html
+│   │   ├── suspenseq.html
 │   │   ├── tips.html
 │   │   ├── top10.html
 │   │   ├── true-crime.html
diff --git a/repo_structure.txt b/repo_structure.txt
index c39fffecf..82c77d9fc 100644
--- a/repo_structure.txt
+++ b/repo_structure.txt
@@ -179,6 +179,8 @@
 │   │   ├── settings.html
 │   │   ├── social.html
 │   │   ├── suspense-thriller.html
+│   │   ├── suspensea.html
+│   │   ├── suspenseq.html
 │   │   ├── tips.html
 │   │   ├── top10.html
 │   │   ├── true-crime.html

From b2988c81bacd236a598019bbe540c5d5b472312f Mon Sep 17 00:00:00 2001
From: SrijaVuppala295 <srijavuppala295@gmail.com>
Date: Sun, 10 Nov 2024 14:00:46 +0530
Subject: [PATCH 10/13] done

---
 assets/html/classic.html | 210 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 210 insertions(+)

diff --git a/assets/html/classic.html b/assets/html/classic.html
index 2e40eabb0..89a0cbba9 100644
--- a/assets/html/classic.html
+++ b/assets/html/classic.html
@@ -1275,6 +1275,216 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
   a:hover {
       text-decoration: none; /* Remove underline on hover */
   }
+     /* Added: Image for J.K. Rowling */
+     .pride {
+      background-image: url("../images/pride.jpg");
+      background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    .moby {
+        background-image: url("../images/moby.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+    }
+
+    .war {
+        background-image: url("../images/war.jpeg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+    }
+
+    .orwell {
+        background-image: url("../images/1984.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+    }
+
+    .dickens {
+        background-image: url("../images/great-expectations.jpeg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+    }
+
+    .mockingbird {
+        background-image: url("../images/to_kill_a_mockingbird.png");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+    }
+
+    /* Added: Image for Mark Twain */
+    .Twain {
+        background-image: url("../images/great_gatsby.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for George Orwell */
+    .Orwell {
+        background-image: url("../images/crime_and_punishment.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Agatha Christie */
+    .Christie {
+        background-image: url("../images/catcher_in_the_rye.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Dr. Seuss */
+    .Seuss {
+        background-image: url("../images/jane_eyre.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Jane Austen */
+    .Austen {
+        background-image: url("../images/odyssey.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Charles Dickens */
+    .Dickens {
+        background-image: url("../images/brothers_karamazov.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for William Shakespeare */
+    .Shakespeare {
+        background-image: url("../images/anna_karenina.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for H.G. Wells */
+    .Wells {
+        background-image: url("../images/frankenstein.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Leo Tolstoy */
+    .Tolstoy {
+        background-image: url("../images/wuthering_heights.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Fyodor Dostoevsky */
+    .Dostoevsky {
+        background-image: url("../images/scarlet.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Virginia Woolf */
+    .Woolf {
+        background-image: url("../images/dracula.webp");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for James Joyce */
+    .Joyce {
+        background-image: url("../images/les.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Oscar Wilde */
+    .Wilde {
+        background-image: url("../images/Madame Bovary.webp");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
+    /* Added: Image for Ernest Hemingway */
+    .Hemingway {
+        background-image: url("../images/The Picture of Dorian Gray.jpg");
+        background-size: cover;
+      /* Ensures the image covers the div */
+      background-position: center;
+      /* Centers the image */
+      background-repeat: no-repeat;
+      /* Prevents repeating */
+    }
+
   
   </style>
   <a href="classicq.html" onclick="lenis.scrollTo('#classicq')" data-nav-link>

From 53e68d7fec31238febe2a046dfae524c950ff8a1 Mon Sep 17 00:00:00 2001
From: SrijaVuppala295 <140592148+SrijaVuppala295@users.noreply.github.com>
Date: Sun, 10 Nov 2024 14:04:28 +0530
Subject: [PATCH 11/13] Deleted

---
 aaa | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 aaa

diff --git a/aaa b/aaa
deleted file mode 100644
index e69de29bb..000000000

From bae2829b3bc75052a94bb505debbedb93c645ee8 Mon Sep 17 00:00:00 2001
From: SrijaVuppala295 <140592148+SrijaVuppala295@users.noreply.github.com>
Date: Sun, 10 Nov 2024 14:04:59 +0530
Subject: [PATCH 12/13] Update book_recommend.html

---
 assets/html/book_recommend.html | 543 ++++++++++++++++++--------------
 1 file changed, 308 insertions(+), 235 deletions(-)

diff --git a/assets/html/book_recommend.html b/assets/html/book_recommend.html
index 7a4d62d78..dde77d217 100644
--- a/assets/html/book_recommend.html
+++ b/assets/html/book_recommend.html
@@ -39,53 +39,16 @@
     <script src="https://cdn.lordicon.com/lordicon.js"></script>
      
     <style>
-      /* Ensure the navbar is centered */
-.navbar {
-  display: flex;
-  justify-content: center;  /* Centers the navbar items horizontally */
-  align-items: center;      /* Centers the navbar items vertically */
-  width: 100%;              /* Ensure it takes the full width of the page */
-}
-
-.navbar-list {
-  display: flex;            /* Use flexbox for navbar items */
-  justify-content: center;  /* Center the navbar items horizontally */
-  gap: 20px;                /* Optional: adjust spacing between navbar items */
-}
-
-.navbar-item {
-  list-style: none;         /* Remove the default list styles */
-}
-
-/* Mobile responsive behavior */
-@media (max-width: 768px) {
-  .navbar-list {
-    flex-direction: column;  /* Stack items vertically on smaller screens */
-    align-items: center;     /* Center items horizontally */
-    gap: 10px;               /* Optional: adjust vertical spacing */
-  }
-}
-
-/* Optional: add some margin to the logo to keep it from sticking to the left edge */
-.logo {
-  margin-left: 10px;   /* Adjust the left margin to center the logo properly */
-}
-
-/* Optional: Styling for the switch container to ensure proper alignment */
-.switch-container {
-  margin-left: auto;    /* Push the switch to the far right */
-}
-
       @media (max-width: 575px) {
         .switch-container {
           margin-top: 4.2rem;
-          margin-right: 1.5rem;
+          margin-right: 1rem;
         }
   
         /* Navbar Toggle Button placed in center */
         .nav-toggle-btn {
           margin-top: -2rem;
-          margin-left: 1.2rem;
+          margin-left: 2.2rem;
         }
   
         .switch-label {
@@ -590,212 +553,335 @@
       </div>
       <header class="header header-anim nav-h" data-header>
 
-        <div class="container mobile-container-styles">
+        <div class="container mobile-container-styles" style="padding-left: 0;">
     
           <nav class="navbar nav_activated" data-navbar>
     
     
             <ul class="navbar-list nav">
-              <a href="/" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
-                <img src="../images/final.png" class="logopic" style=" width: 150px; margin-left: 50px;">
+              <a href="../../index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
+                <img src="../images/final.png" class="logopic" style=" width: 150px;">
               </a>
               <li class="navbar-item">
-                <a href="/" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link>
-                  Home</a>
+                <a href="../../index.html" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link>
+                  <lord-icon
+                  src="https://cdn.lordicon.com/qeltvbrs.json"
+                  trigger="hover"
+                  colors="primary:#e88c30,secondary:#a30f17"
+                  style="width:25px;height:25px">
+                </lord-icon>  Home</a>
               </li>
-    
+              
+                  
               <li class="navbar-item">
-                <a href="/#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link"
-                  data-nav-link>Benefits</a>
+                <a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link>
+                  <lord-icon
+              src="https://cdn.lordicon.com/jibxifeu.json"
+              trigger="hover"
+              state="hover-up"
+              colors="primary:#a30f17,secondary:#e88c30"
+              style="width:25px;height:25px">
+          </lord-icon> Benefits</a>
               </li>
     
               <li class="navbar-item">
-                <a href="/#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link>
-                   Genre</a>
+                <a href="../../index.html#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link>
+                  <lord-icon
+                  src="https://cdn.lordicon.com/bhmovrlt.json"
+                  trigger="hover"
+                  state="morph-open"
+                  colors="primary:#a30f17,secondary:#e88c30"
+                  style="width:25px;height:25px">
+              </lord-icon> Genre</a>
               </li>
-              </li>
-        
-    
+              
               <li class="navbar-item">
-                <a href="../../index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
-                    class="ri-customer-service-2-fill"></i>
-                  Contact</a>
-              </li>
+                <a href="../../index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link"><lord-icon
+                src="https://cdn.lordicon.com/jxjfjyri.json"
+                trigger="morph"
+                stroke="bold"
+                state="morph-select"
+                colors="primary:#eeaa66,secondary:#e88c30"
+                style="width:25px;height:25px">
+            </lord-icon>RateUs</a></li>
+              
     
               <li class="navbar-item">
-                <a href="../../index.html#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
-                  FAQ
-                </a>
+                <a href="../../index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link>
+                  <img src="../images/telephone.png" height="25px" width="25px"/> Contact</a>
+                </li>
+                <li class="navbar-item">
+                  <a href="../../index.html#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
+                    <lord-icon
+                    src="https://cdn.lordicon.com/motnbmtz.json"
+                    trigger="hover"
+                    stroke="bold"     
+                    colors="primary:#a30f17,secondary:#e88c30"
+                    style="width:25px;height:25px">
+                </lord-icon>  FAQ
+                  </a>
               </li>
-    
-    
               <li class="navbar-item">
-                <a href="../html/about.html" class="navbar-link" data-nav-link>
-                   About Us </a>
+                <a href="../html/about.html"  class="navbar-link" data-nav-link>
+                  <lord-icon
+                  src="https://cdn.lordicon.com/fozsorqm.json"
+                  trigger="hover"
+                  stroke="bold"
+                  state="hover-up"
+                  colors="primary:#a30f17,secondary:#e88c30"
+                  style="width:30px;height:30px"></lord-icon> AboutUs </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 class="dropdown-menu-item">
-                      <a href="../../chatt.html" class="navbar-link" style="font-family: sans-serif;  margin-bottom: 5px;">
-                        Community chat
-                      </a>
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href="tips.html" class="navbar-link" style="font-family: sans-serif;  margin-bottom: 5px;">
-                        Tips
-                      </a>
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href="bookpref.html" class="navbar-link" style="font-family: sans-serif;  margin-bottom: 5px;">
-                        Book Prefer Quiz
-                      </a>
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href="../html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link"
-                        data-nav-link><i class="ri-price-tag-3-fill"></i> Pricing</a>
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href="../html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href="../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="../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="../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="./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="../html/about.html" class="navbar-link">About</a>
-                    </li>
-                  </ul>
-                </div>
+     
+              <li class="navbar-item" id="login-signup-link">
+                <a href="../html/login.html" class="navbar-link"><lord-icon
+                  src="https://cdn.lordicon.com/xfzuyvam.json"
+                  trigger="morph"
+                  state="morph-group"
+                  colors="primary:#a30f17,secondary:#e88c30"
+                  style="width:25px;height:25px">
+              </lord-icon>Login/Signup</a>
               </li>
-           
-              <!-- Theme switcher -->
-              <div class="switch-container">
-                <input type="checkbox" id="switch" class="switch-checkbox">
-                <label for="switch" class="switch-label" style="margin-left: 120px;">
-                  <div class="switch-button">
-                    <span class="material-icons sun-icon">wb_sunny</span>
-                    <span class="material-icons moon-icon">brightness_2</span>
-                  </div>
-                </label>
+
+            <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="../../chatt.html" class="navbar-link" style="font-family: sans-serif; color: white; margin-bottom: 5px;">
+                    Community chat
+                </a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="author.html" class="navbar-link"
+                    style="font-family: sans-serif;  margin-bottom: 5px;">
+                    Authors
+                  </a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="../html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
+                      class="ri-price-tag-3-fill"></i> Pricing</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="../html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="../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="../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="../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="../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="../html/about.html" class="navbar-link">About</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+
+          <style>
+            .darkmode{
+                white-space: nowrap;
+                display: inline-block;
+                background-color: none;
+                border: none;
+                text-decoration: none;
+                color: rebeccapurple;
+                padding: 0;
+
+                transition: all 0.3s ease;
+                padding-left: 5px;
+                padding-right: 10px;
+                padding-top: 3px;
+                text-decoration: none;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                color: var(--charcoal);
+                padding: 8px 12px;
+                line-height: 2;
+                transition: var(--transition-1);
+
+                .container {
+            width: 100%;
+        }
+        .main {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+        .login {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .input {
+            margin: 10px 0;
+        }
+        .input-box {
+            position: relative;
+        }
+        .input-box img {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+        }
+        .p1 {
+            margin: 10px;
+            padding: 10px;
+            display: flex;
+            align-items: center;
+        }
+        .social-buttons {
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+        }
+            }
+            .dropdown-menu {
+      display: none;
+  }
+  .dropdown-menu.show {
+      display: block;
+  }
+          </style>
+          
+          <li>
+            <div class="action">
+              <div class="profile" onclick="menuToggle();">
+                <img id="profile-avatar" src="../images/avatar1.jpg" />
               </div>
-    
-              <li>
-                <div class="action">
-    
-                  <!-- <div class="menu">
-                    <h3>XYZ<br /><span>Book Lover</span></h3>
-                    <ul>
-                      <li>
-                        <img src="../images/user.jpg" /><a href="../../profile.html">My profile</a>
-                      </li>
-                      <li>
-                        <img src="../images/edit profile.jpg" /><a href="../html/profileedit.html">Edit profile</a>
-                      </li>
-                      <li>
-                        <img src="../images/inbox.png" /><a href="#">Inbox</a>
-                      </li>
-                      <li>
-                        <img src="../images/settings.png" /><a href="#">Settings</a>
-                      </li>
-                      <li><img src="../images/help.png" /><a href="#">Help</a></li>
-                      <li>
-                        <img src="../images/logout.png" /><a href="#">Logout</a>
-                      </li>
-                    </ul>
-                  </div> -->
+              <div class="menu">
+                <h3 id="profileNameDisplay">XYZ<br /><span>Book Lover</span></h3>
+                <ul>
+                  <li>
+                    <img src="../images/user.jpg" /><a href="../../profile.html">My profile</a>
+                  </li>
+                  <li>
+                    <img src="../images/edit profile.jpg" /><a href="../html/profileedit.html">Edit profile</a>
+                  </li>
+                  <li>
+                    <img src="../images/inbox.png" /><a href="#">Inbox</a>
+                  </li>
+                  <li>
+                    <img src="../images/settings.png" /><a href="#">Settings</a>
+                  </li>
+                  <li><img src="../images/help.png" /><a href="#">Help</a></li>
+                  <li>
+                    <img src="../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}`;
-            }
-          });
-    
-            // Theme switcher
-            document.addEventListener('DOMContentLoaded', function () {
-              const toggleSwitch = document.querySelector('.switch-container input[type="checkbox"]');
-              const bodyElement = document.body;
-        
-              const currentTheme = localStorage.getItem('theme') || 'light';
-              if (currentTheme === 'dark') {
-                bodyElement.classList.add('dark-mode');
-                toggleSwitch.checked = true;
-              } else {
-                bodyElement.classList.add('light-mode');
-              }
-        
-              toggleSwitch.addEventListener('change', function (event) {
-                if (event.target.checked) {
-                  bodyElement.classList.remove('light-mode');
-                  bodyElement.classList.add('dark-mode');
-                  localStorage.setItem('theme', 'dark');
-                } else {
-                  bodyElement.classList.remove('dark-mode');
-                  bodyElement.classList.add('light-mode');
-                  localStorage.setItem('theme', 'light');
-                }
-              });
-            });
-    
-          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> -->
+                </div>
+              </ul>
+                </div>
+                <script>
+                  document.addEventListener("DOMContentLoaded", function () {
+                      const moreLink = document.getElementById("more-link");
+                      const dropdownMenu = document.getElementById("dropdown-menu");
+              
+                      moreLink.addEventListener("click", function (event) {
+                          event.preventDefault();
+                          dropdownMenu.classList.toggle("show");
+                      });
+                  });
+              </script>
+                <script>
+                  
+                 document.addEventListener("DOMContentLoaded", () => {
+      const savedAvatar = localStorage.getItem("selectedAvatar");
+      const savedName = localStorage.getItem("profileName");
+      if (savedAvatar) {
+          document.getElementById("profile-avatar").src = `../images/${savedAvatar}`;
+      }
+
+      if (savedName) {
+            document.getElementById("profileNameDisplay").textContent = `${savedName}`;
+        } else {
+            document.getElementById("profileNameDisplay").textContent = "Welcome, Guest!";
+        }
+  });
+  
+          
+                  function menuToggle() {
+                      const toggleMenu = document.querySelector(".menu");
+                      toggleMenu.classList.toggle("active");
+                  }
+              </script>
+          </ul>
         </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')) {
+         </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 {
+            else{
               menu.classList.add('open_menu')
               navbar_con.classList.remove('nav_activated')
             }
           })
         </script>
+        
+  <script>
+    document.getElementById("more-link").addEventListener("click", function (event) {
+    event.preventDefault();  // Prevent the default behavior of the link
+    const dropdownMenu = document.getElementById("dropdown-menu");
+    dropdownMenu.classList.toggle("active");  // Toggle the visibility of the dropdown menu
+  });
+  </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 src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
         <script>
           function loadGoogleTranslate() {
@@ -824,20 +910,22 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
           //     }
           //     lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
           // }
-          window.addEventListener("scroll", onScroll);
-        </script>
     
     
+      window.addEventListener("scroll", onScroll);
+    </script>
     
     
-        <!-- <div class="switch-toggle-container">
     
+        
+      
     
-          window.addEventListener("scroll", onScroll);
-        </script>
-        <div class="switch-toggle-container">
+          <!-- <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>
     
-          <div class="switch-container switch-container-mobile">
+            <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">
@@ -845,22 +933,7 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
                 <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: 25px;">
-          <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>
     
     

From f2edc5b680bc8fecff9a5d3646300dfb2f87b2a3 Mon Sep 17 00:00:00 2001
From: SrijaVuppala295 <140592148+SrijaVuppala295@users.noreply.github.com>
Date: Sun, 10 Nov 2024 14:05:19 +0530
Subject: [PATCH 13/13] Update diverseLiteracy.html

---
 diverseLiteracy.html | 3303 +++++++++++++++++++++---------------------
 1 file changed, 1628 insertions(+), 1675 deletions(-)

diff --git a/diverseLiteracy.html b/diverseLiteracy.html
index ec621f721..695c92601 100644
--- a/diverseLiteracy.html
+++ b/diverseLiteracy.html
@@ -1,66 +1,67 @@
 <!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">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Philosopher&display=swap">
-  <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/MenuClick.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-    integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
-    crossorigin="anonymous" referrerpolicy="no-referrer" />
-
-  <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>
-
-
-  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/>
-
-  <link href="https://fonts.googleapis.com/css?family=Work+Sans:200,400&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="./assets/css/style.css">
-  <link rel="stylesheet" href="./assets/css/styles.css">
-  <link rel="stylesheet" href="./assets/css/Available.css">
-
-  <script src="./assets/js/rateUsModal.js" defer></script>
-
-</head>
-<script src="https://unpkg.com/scrollreveal"></script>
-<script src="./assets/js/faq.js"></script>
-
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-
-<!-- Swiper CSS -->
-<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
-
-<!-- Custom CSS -->
-<link rel="stylesheet" href="assets/css/test-style.css">
-<style>
-      .header {
+   <head>
+       <meta charset="UTF-8">
+       <meta http-equiv="X-UA-Compatible" content="IE=edge">
+       <title>Cost Efficient - SwapReads</title>
+       <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/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>
+        
+        .header {
   position: fixed;
   top: 0;
   width: 100%;
@@ -68,815 +69,706 @@
    margin-top: 45px;
    margin-left: 9rem;
 }
-        .navbar-link {
-  color: black !important;
-}
-
-.dark-mode .navbar-link {
-  color: white !important;
-}
-  .menu {
-    display: none;
-    position: absolute;
-    top: 80px; 
-    right: 0;
-    background-color: white;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    width: 200px; 
-    z-index: 1000;
-    margin-right:200px;
-  }
-  
-  .menu.active {
-    display: block;
-  }
-  
-  .menu h3 {
-    padding: 10px;
-    text-align: center;
-  }
-  
-  .menu ul {
-    list-style: none;
-    padding: 10px 0;
-  }
-  
-  .menu ul li {
-    padding: 10px;
-    display: flex;
-    align-items: center;
-  }
-  
-  .menu ul li img {
-    width: 20px;
-    height: 20px;
-    margin-right: 10px;
-  }
-  .profile img {
-    width: 50px; 
-    height: 50px; 
-    border-radius: 50%; 
-    object-fit: cover;
-    border: 2px solid #fff; 
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
-  }
-
-  .book-item {
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    width: 200px;
-    padding: 0;
-    margin-left: auto; 
-    margin-right: auto; 
-    background-color: #ffe3e0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .book-item .btn{
-    display: block;
-    width: 90%;
-    margin: auto;
-    padding: 10px; 
-    text-align: center;
-  }
-  .book-item .read_later_button {
-    display: block;
-    width: 90%;
-    margin: 1px 10px 30px 30px; /* Center align the button */
-    padding: 10px;
-    text-align: center;
-  }
-
-  .book-cover {
-    padding: 0; 
-    margin-top: 20px;
-    margin-left: auto; 
-    margin-right: auto; 
-    display: block; 
-  }
-  
-</style>
-
-<body>
-
-          <!-- Circles -->
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div> 
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-          <div class="circle"></div>
-
-
-
-          <style>
-        
-            .header {
-      position: fixed;
-      top: 0;
-      width: 100%;
-      z-index: 1000; /* Ensures it stays on top of other content */
-       margin-top: 45px;
-       margin-left: 9rem;
-    }
-             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) */
-             .flip-card-front {
-               background-color: white;
-               color: black;
-             }
-         
-             /* 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);
-             }
-           }
+         swiper-container {
+           width: 100%;
+           height: 75%;
          }
-         /* CSS to make navbar item text color black */
-    .navbar-link {
-      color: black !important;
-    }
-    
-         .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);
+     
+       
+         /* Theme Change Button Style */
+         @media (max-width: 990px) {
+           .switch-container {
+             margin-top: 3.2rem;
+             margin-right: -0.5rem;
            }
-           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;
+         }
+         @media (max-width: 575px) {
+           .switch-container {
+             margin-top: 2.4rem;
+             margin-right: -0.5rem;
            }
-           &:hover {
-             &:before {
-               width: 9%;
-               background: #ffab9d;
-             }
-             svg {
-               transform: translateX(0);
-             }
-             .active {
-               transform: scale(0.96);
-             }
+           /* Navbar Toggle Button placed in center */
+           .nav-toggle-btn{
+             margin-top: -2rem;
+             margin-left: 2.2rem;
            }
          }
-         
-         
-         
-             /* 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;
+     
+     /* testimonal card fix by harshcodesit */
+         swiper-slide {
+           text-align: center;
+           font-size: 15;
+           background: transparent;
            display: flex;
-           flex-direction: column;
-           justify-content: space-between;
+           justify-content: center;
            align-items: center;
-           width: 300px;
-           height: fit-content;
-           z-index: 100;
-           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 */
-         }
-         
-          .menu {
-            display: none;
-            position: absolute;
-            top: 80px; 
-            right: 0;
-            background-color: white;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            width: 200px; 
-            z-index: 1000;
-            margin-right:10px;
-          }
-          
-          .menu.active {
-            display: block;
-          }
-          
-          .menu h3 {
-            padding: 10px;
-            text-align: center;
-          }
-          
-          .menu ul {
-            list-style: none;
-            padding: 10px 0;
-          }
-          
-          .menu ul li {
-            padding: 10px;
-            display: flex;
-            align-items: center;
-          }
-          
-          .menu ul li img {
-            width: 20px;
-            height: 20px;
-            margin-right: 10px;
-          }
-          .profile img {
-            width: 50px; 
-            height: 50px; 
-            border-radius: 50%; 
-            object-fit: cover;
-            border: 2px solid #fff; 
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
-          }
-        
-         .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 */
-         }
-         
-         .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;
+           margin-bottom: 50px;
          }
-         
-         #cookie-content {
-           display: none;
-           margin-top: 10px;
-         }
-         
-         
-         #back-to-top-container {
-           position: fixed;
-         }
-         
-         
-         
-             /* Basic navbar styling */
-         .header {
-           position: fixed;
+         /* ########### */
+     
+         swiper-slide img {
+           display: block;
            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 */
+           height: 100%;
+           object-fit: cover;
+           color: hsl(357, 37%, 62%);
          }
-         * {
-           margin: 0;
-           padding: 0;
-           font-family: "Poppins", sans-serif;
+     
+         swiper-container {
+     
+            margin: auto;
+     
          }
-         
-        
-         
-         .action {
-           position: fixed;
-           top: 43px;
-           right: 83px;
+     
+         .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 */
          }
-         
-         .action .profile {
+     
+         /* This container is needed to position the front and back side */
+         .flip-card-inner {
            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;
+           text-align: center;
+           transition: transform 0.7s;
+           transform-style: preserve-3d;
+           padding: 10px;
          }
-         
-         .action .menu {
+     
+         /* 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;
-           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;
+           width: 100%;
+           height: 100%;
+           -webkit-backface-visibility: hidden;
+           /* Safari */
+           backface-visibility: hidden;
          }
-         
-         .action .menu.active {
-           top: 80px;
-           visibility: visible;
-           opacity: 1;
+     
+         /* Style the front side (fallback if image is missing) */
+         .flip-card-front {
+           background-color: white;
+           color: black;
          }
-         
-         .action .menu::before {
-           content: "";
-           position: absolute;
-           top: -5px;
-           right: 28px;
-           width: 20px;
-           height: 20px;
-           background: #fff;
-           transform: rotate(45deg);
+     
+         /* Style the back side */
+         .flip-card-back {
+           background-color: white;
+           color: black;
+           transform: rotateY(180deg);
          }
-         
-         .action .menu h3 {
-           width: 100%;
-           text-align: center;
+     
+         /* Light mode styles */
+         .light-mode .readmore-anim {
            font-size: 18px;
-           padding: 20px 0;
-           font-weight: 500;
-           color: #555;
-           line-height: 1.5em;
+           letter-spacing: 0;
+           color: hsl(357, 37%, 62%);
          }
-         
-         .action .menu h3 span {
-           font-size: 14px;
-           color: #cecece;
-           font-weight: 300;
+     
+         .light-mode .readmore-anim:hover {
+           color: red;
+           letter-spacing: 1px;
+           transition: ease-in-out;
          }
-         
-         .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;
+         .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;
          }
-         
-         .action .menu ul li img {
-           max-width: 20px;
-           margin-right: 10px;
-           opacity: 0.5;
-           transition: 0.5s;
+         svg {
+           transform: translateX(0);
          }
-         
-         .action .menu ul li:hover img {
-           opacity: 1;
+         .active {
+           transform: scale(0.96);
          }
-         
-         .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;
+       }
+     }
+     /* CSS to make navbar item text color black */
+.navbar-link {
+  color: black !important;
+}
+
+     .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;
          }
-         
-         .action .menu ul li:hover a {
-           color: #ff5d94;
-           font-size: 21px;
-         
+         svg {
+           transform: translateX(0);
          }
-         .hamburger{
-             display: none;
-             cursor: pointer;
-             position: absolute;
-             top: 24px;
-             left: 1.5%;
+         .active {
+           transform: scale(0.96);
          }
-         .line{
-             width: 36px;
-             height: 5px;
-             margin: 4px 4px;
-             background-color: rgb(240, 15, 15);
+       }
+     }
+     
+     
+     
+         /* Dark Mode Styles */
+         .dark-mode .readmore-anim {
+           font-size: 18px;
+           letter-spacing: 0;
+           color: hsl(357, 37%, 62%);
+           
          }
-         @media only screen and (max-width:1063px){
-             .nav{
-                 flex-direction: column;
-                 position: fixed;
-                 top: 0;
-                 width: 100%;
-             }
-             .header{
-                 flex-direction: column;
-                 height: 53.8rem;
-                 transition: 0.55s all ease-out;
-                 padding-top: 5px;
-                 padding-top: 60px;
-             }
-             .navbar-item{
-                 margin-right: 40px;
-             }
-             .navbar-list{
-               position: relative;
-               top: 400px;
-             }
-             .hamburger{
-                 display: block;
-             }
-             .nav-h{
-                 height: 78px;
-                 width: 100vw;
-             }
-             .vis-h{
-                 opacity: 0;
-             }
-             .logo img{
-               position: relative;
-               top: 17px;
-               left: 350px;
-             }
+     
+         .readmore-anim .icon:hover {
+           color: red;
          }
-         @media only screen and (max-width:990px){
-           .header{
-             height: 0;
-           }
-           .navbar-list{
-             top: 0;
-           }
-           .logo img{
-             top: -9px;
-             left: 50px;
-             
-           }
+     
+         .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 */
          }
-         @media (min-width: 990px){
+     
+         #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: 100;
+       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 */
+     }
+     
+      .menu {
+        display: none;
+        position: absolute;
+        top: 80px; 
+        right: 0;
+        background-color: white;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+        width: 200px; 
+        z-index: 1000;
+        margin-right:10px;
+      }
+      
+      .menu.active {
+        display: block;
+      }
+      
+      .menu h3 {
+        padding: 10px;
+        text-align: center;
+      }
+      
+      .menu ul {
+        list-style: none;
+        padding: 10px 0;
+      }
+      
+      .menu ul li {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+      }
+      
+      .menu ul li img {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+      .profile img {
+        width: 50px; 
+        height: 50px; 
+        border-radius: 50%; 
+        object-fit: cover;
+        border: 2px solid #fff; 
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+      }
     
-         .grid-list {
-        grid-template-columns: repeat(2, 1fr);
-    }
+     .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 */
+     }
+     
+     .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;
+     }
+     
+     body {
+       background: #ffccbc;
+      
+     }
+     
+     .action {
+       position: fixed;
+       top: 43px;
+       right: 83px;
+     }
+     
+     .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;
+             position: fixed;
+             top: 0;
+             width: 100%;
          }
-         .chapter-card{
-            width: 30vw;
-            height: 400px;
+         .header{
+             flex-direction: column;
+             height: 53.8rem;
+             transition: 0.55s all ease-out;
+             padding-top: 5px;
+             padding-top: 60px;
          }
-    
-         .chapter-card {
-           transition: transform 0.3s ease, box-shadow 0.3s ease; 
+         .navbar-item{
+             margin-right: 40px;
          }
-    
-    .chapter-card:hover {
-        transform: scale(1.05); 
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); 
-    }  
-         .genre{
-            margin-top: 200px;
+         .navbar-list{
+           position: relative;
+           top: 400px;
          }
-         .light-mode .switch-container {
-        right: 140px;
-        top: 10px;
-    }
-    .switch-checkbox:checked + .switch-label .switch-button {
-        transform: translateX(13px);
-        /* background-color: #34495e; */
-    }
-    .ben {
-        color: var(--sonic-silver);
-        font-size: 24px;
-        font-weight: bold;
-        margin-bottom: 20px;
-        text-align: center;
-       
-    }
-    .chapter-card:hover .ben{
-    color: #d26d6d;
-    }
-           </style>
-          <style>
-            /* Circle styles */
-            .circle {
-              height: 24px;
-              width: 24px;
-              border-radius: 50%;
-              background-color: black;
-              position: fixed;
-              top: 0;
-              left: 0;
-              pointer-events: none;
-              z-index: 99999999;
-              transition: transform 0.1s ease-out;
-            }
-    
-            
-          </style>
-
-
+         .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;
+         
+       }
+     }
+     @media (min-width: 990px){
 
+     .grid-list {
+    grid-template-columns: repeat(2, 1fr);
+}
+     }
+     .chapter-card{
+        width: 30vw;
+        height: 400px;
+     }
+
+     .chapter-card {
+       transition: transform 0.3s ease, box-shadow 0.3s ease; 
+     }
+
+.chapter-card:hover {
+    transform: scale(1.05); 
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); 
+}  
+     .genre{
+        margin-top: 200px;
+     }
+     .light-mode .switch-container {
+    right: 140px;
+    top: 10px;
+}
+.switch-checkbox:checked + .switch-label .switch-button {
+    transform: translateX(13px);
+    /* background-color: #34495e; */
+}
+.ben {
+    color: var(--sonic-silver);
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    text-align: center;
+   
+}
+.chapter-card:hover .ben{
+color: #d26d6d;
+}
+       </style>
+      <style>
+        /* Circle styles */
+        .circle {
+          height: 24px;
+          width: 24px;
+          border-radius: 50%;
+          background-color: black;
+          position: fixed;
+          top: 0;
+          left: 0;
+          pointer-events: none;
+          z-index: 99999999;
+          transition: transform 0.1s ease-out;
+        }
 
+        
+      </style>
+     </head>
+<body> 
+      <!-- Circles -->
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+   <script>
+   
+     document.addEventListener('DOMContentLoaded', function() {
+    
+     const learnMoreLink = document.getElementById('learn-more-link');
+     const learnMoreContent = document.getElementById('learn-more-content');
+   
+    
+   
+     // 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">
-     
+      <button class="hamburger" id="hamburger-button" aria-label="Menu">
         <span></span>
         <span></span>
         <span></span>
@@ -1026,614 +918,861 @@
               }
                 </script>
               </header>
-              <style>
-                .work-sans {
-                  font-family: 'Work Sans', sans-serif;
-                }
-          
-                #menu-toggle:checked+#menu {
-                  display: block;
-                }
-          
-                .hover\:grow {
-                  transition: all 0.3s;
-                  transform: scale(1);
-                }
-          
-                .hover\:grow:hover {
-                  transform: scale(1.02);
-              }
-          
-          
-          
-          </style>
-
 
-
-  <main>
-
-
-    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
-    <section class="genre" id="genre">
-      <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
-          Diverse Literary Adventures
-          <span class="span has-before"></span>
-        </h2>
-         <div class="container">
-             <h2 class="h2 section-title has-underline" id="section-title1">
-                 Introduction to swap reads
-               <span class="span has-before"></span>
-             </h2>
-   
-             <ul class="grid-list">
-               <li>
-                 <div class="chapter-card">
-                   <p class="card-subtitle"></p>
-                   <p class="card-text" >
-                    <div class="ben">Connecting Book Lovers and Promoting Reading Culture</div> 
-                    SwapReads is an online platform designed to connect book enthusiasts and facilitate the exchange of books. It aims to promote a vibrant reading culture by making it easier for users to discover new titles, share their favorite books, and connect with fellow readers through discussions and reviews.
-                   </p>
-                 </div>
-               </li>
-               <li>
-                 <div class="chapter-card">
-                   <p class="card-subtitle"></p>
-                   <p class="card-text" >
-                    <div class="ben">Personalized Recommendations and Eco-Friendly Practices</div> 
-                    SwapReads offers personalized book recommendations to help users find their next great read. By encouraging sustainable reading habits and reducing the need for new book purchases, the platform supports eco-friendly practices, fostering a community that celebrates the joy of reading while promoting environmental consciousness.
-                   </p>
-                 </div>
-               </li>
-              
-                                   
-             </ul>
-           </div>
-         <div class="container">
-             <h2 class="h2 section-title has-underline" id="section-title1">
-              Maximizing Book Swapping on SwapReads
-               <span class="span has-before"></span>
-             </h2>
    
-             <ul class="grid-list">
-               <li>
-                 <div class="chapter-card">
-                   <p class="card-subtitle"></p>
-                   <p class="card-text" >
-                    <div class="ben">Joining SwapReads</div> 
-                    Join SwapReads by creating an account and setting up your profile. Fill out your reading preferences and interests to enhance your swapping experience.
-                   </p>
-                 </div>
-               </li>
-               <li>
-                 <div class="chapter-card">
-                   <p class="card-subtitle"></p>
-                   <p class="card-text" >
-                    <div class="ben">Building Your Book Collection
-                  </div> 
-                  Explore SwapReads' extensive library to discover new titles and classics alike. Add books to your virtual shelf to showcase your collection and attract swap offers. Keep your wishlist updated with books you're eager to read, signaling to others what you're looking for and increasing your chances of successful swaps.
-                   </p>
-                 </div>
-               </li>
-               <li>
-                 <div class="chapter-card">
-                   <p class="card-subtitle"></p>
-                   <p class="card-text" >
-                    <div class="ben">Initiating Swaps</div>
-                    Initiating swaps on SwapReads is simple and interactive. Browse through other users' collections or search for specific titles. When you find a book of interest, send a swap request detailing what you're offering in return. Engage in friendly communication to finalize the swap and expand your reading options.
-                   </p>
-                 </div>
-               </li>
-               <li>
-                 <div class="chapter-card">
-                   <p class="card-subtitle"></p>
-                   <p class="card-text" >
-                    <div class="ben">Rating and Reviewing</div>
-                    After completing a swap, contribute to the community by rating and reviewing the books you've received. Your insights help others make informed decisions and build trust within the SwapReads community. Share your thoughts on the book's plot, characters, and overall reading experience. Participate in discussions and book reviews to foster connections and enrich the swapping experience for everyone involved.
-                   </p>
-                 </div>
-               </li>                    
-             </ul>
-           </div>
-           <div class="container">
-             <h2 class="h2 section-title has-underline" id="section-title1">
-              Budget-Friendly Reading Habits
-               <span class="span has-before"></span>
-             </h2>
    
-             <ul class="grid-list">
-               <li>
-                 <div class="chapter-card">
-                   <p class="card-subtitle"></p>
-                   <p class="card-text" >
-                    <div class="ben">Leveraging Public Libraries</div>
-                    Many communities organize book swap events at libraries, community centers, or local cafes. Keep an eye on community bulletin boards, local event listings, and social media groups to find upcoming events. Attending these events is a great way to meet fellow book lovers and exchange books.
-                   </p>
-                 </div>
-               </li>
-               <li>
-                 <div class="chapter-card">
-                   <p class="card-subtitle"></p>
-                   <p class="card-text" >
-                    <div class="ben">Participating in Book Sales and Discounts</div>
-                    Stay informed about book sales and discounts from retailers and online platforms. Follow publishers on social media, subscribe to newsletters, and join loyalty programs for exclusive offers. Utilize discount codes and seasonal promotions to maximize savings on your book purchases.
-                 </div>
-               </li>
-               <li>
-                 <div class="chapter-card">
-                   <p class="card-subtitle"></p>
-                   <p class="card-text" >
-                    <div class="ben">Exploring E-books</div>
-                    Discover affordable reading options through e-books . Many platforms offer free or discounted titles, especially classics and indie publications. Subscribe to newsletters and follow platforms like Kindle and Audible for promotional offers.
-                   </p>
-                 </div>
-               </li>
-               <li>
-                 <div class="chapter-card">
-                   <p class="card-subtitle"></p>
-                   <p class="card-text" >
-                    <div class="ben">Secondhand Bookstores and Online Markets</div>
-                    Find budget-friendly reads at secondhand bookstores and online marketplaces. Explore diverse selections and uncover hidden gems at discounted prices. Consider selling or trading books you've finished to refresh your collection economically.
-                   </p>
-                 </div>
-               </li>                    
-             </ul>
-           </div>
-       </section>
-
-
-
-
-
-
-
-  </main>
-  <footer class="ff">
-    <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'
-                  );
+   <section class="genre" id="genre">
+    <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
+        Diverse Literary Adventures
+        <span class="span has-before"></span>
+      </h2>
+       <div class="container">
+           <h2 class="h2 section-title has-underline" id="section-title1">
+               Introduction to swap reads
+             <span class="span has-before"></span>
+           </h2>
+ 
+           <ul class="grid-list">
+             <li>
+               <div class="chapter-card">
+                 <p class="card-subtitle"></p>
+                 <p class="card-text" >
+                  <div class="ben">Connecting Book Lovers and Promoting Reading Culture</div> 
+                  SwapReads is an online platform designed to connect book enthusiasts and facilitate the exchange of books. It aims to promote a vibrant reading culture by making it easier for users to discover new titles, share their favorite books, and connect with fellow readers through discussions and reviews.
+                 </p>
+               </div>
+             </li>
+             <li>
+               <div class="chapter-card">
+                 <p class="card-subtitle"></p>
+                 <p class="card-text" >
+                  <div class="ben">Personalized Recommendations and Eco-Friendly Practices</div> 
+                  SwapReads offers personalized book recommendations to help users find their next great read. By encouraging sustainable reading habits and reducing the need for new book purchases, the platform supports eco-friendly practices, fostering a community that celebrates the joy of reading while promoting environmental consciousness.
+                 </p>
+               </div>
+             </li>
+            
+                                 
+           </ul>
+         </div>
+       <div class="container">
+           <h2 class="h2 section-title has-underline" id="section-title1">
+            Maximizing Book Swapping on SwapReads
+             <span class="span has-before"></span>
+           </h2>
+ 
+           <ul class="grid-list">
+             <li>
+               <div class="chapter-card">
+                 <p class="card-subtitle"></p>
+                 <p class="card-text" >
+                  <div class="ben">Joining SwapReads</div> 
+                  Join SwapReads by creating an account and setting up your profile. Fill out your reading preferences and interests to enhance your swapping experience.
+                 </p>
+               </div>
+             </li>
+             <li>
+               <div class="chapter-card">
+                 <p class="card-subtitle"></p>
+                 <p class="card-text" >
+                  <div class="ben">Building Your Book Collection
+                </div> 
+                Explore SwapReads' extensive library to discover new titles and classics alike. Add books to your virtual shelf to showcase your collection and attract swap offers. Keep your wishlist updated with books you're eager to read, signaling to others what you're looking for and increasing your chances of successful swaps.
+                 </p>
+               </div>
+             </li>
+             <li>
+               <div class="chapter-card">
+                 <p class="card-subtitle"></p>
+                 <p class="card-text" >
+                  <div class="ben">Initiating Swaps</div>
+                  Initiating swaps on SwapReads is simple and interactive. Browse through other users' collections or search for specific titles. When you find a book of interest, send a swap request detailing what you're offering in return. Engage in friendly communication to finalize the swap and expand your reading options.
+                 </p>
+               </div>
+             </li>
+             <li>
+               <div class="chapter-card">
+                 <p class="card-subtitle"></p>
+                 <p class="card-text" >
+                  <div class="ben">Rating and Reviewing</div>
+                  After completing a swap, contribute to the community by rating and reviewing the books you've received. Your insights help others make informed decisions and build trust within the SwapReads community. Share your thoughts on the book's plot, characters, and overall reading experience. Participate in discussions and book reviews to foster connections and enrich the swapping experience for everyone involved.
+                 </p>
+               </div>
+             </li>                    
+           </ul>
+         </div>
+         <div class="container">
+           <h2 class="h2 section-title has-underline" id="section-title1">
+            Budget-Friendly Reading Habits
+             <span class="span has-before"></span>
+           </h2>
+ 
+           <ul class="grid-list">
+             <li>
+               <div class="chapter-card">
+                 <p class="card-subtitle"></p>
+                 <p class="card-text" >
+                  <div class="ben">Leveraging Public Libraries</div>
+                  Many communities organize book swap events at libraries, community centers, or local cafes. Keep an eye on community bulletin boards, local event listings, and social media groups to find upcoming events. Attending these events is a great way to meet fellow book lovers and exchange books.
+                 </p>
+               </div>
+             </li>
+             <li>
+               <div class="chapter-card">
+                 <p class="card-subtitle"></p>
+                 <p class="card-text" >
+                  <div class="ben">Participating in Book Sales and Discounts</div>
+                  Stay informed about book sales and discounts from retailers and online platforms. Follow publishers on social media, subscribe to newsletters, and join loyalty programs for exclusive offers. Utilize discount codes and seasonal promotions to maximize savings on your book purchases.
+               </div>
+             </li>
+             <li>
+               <div class="chapter-card">
+                 <p class="card-subtitle"></p>
+                 <p class="card-text" >
+                  <div class="ben">Exploring E-books</div>
+                  Discover affordable reading options through e-books . Many platforms offer free or discounted titles, especially classics and indie publications. Subscribe to newsletters and follow platforms like Kindle and Audible for promotional offers.
+                 </p>
+               </div>
+             </li>
+             <li>
+               <div class="chapter-card">
+                 <p class="card-subtitle"></p>
+                 <p class="card-text" >
+                  <div class="ben">Secondhand Bookstores and Online Markets</div>
+                  Find budget-friendly reads at secondhand bookstores and online marketplaces. Explore diverse selections and uncover hidden gems at discounted prices. Consider selling or trading books you've finished to refresh your collection economically.
+                 </p>
+               </div>
+             </li>                    
+           </ul>
+         </div>
+     </section>
+     
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
+    <footer class="ff">
+      <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" style="margin: 0px 40px">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" style="padding: 20px; ">
+          <h2 style="font-size: 24px; margin-bottom: 15px; ">Quick Links</h2>
+          <div id="quicklinks" class="row" style="display: flex; gap: 20px;">
+            <!-- First Column -->
+            <div class="col-md-6" style="flex: 1;">
+              <ul style="list-style: none; padding: 0; margin: 0;">
+                <li class="foot-quick" style="margin-bottom: 10px;">
+                  <a href="/index.html#home" onclick="lenis.scrollTo('#home')" style="display: flex; align-items: center;  text-decoration: none;">
+                    <i class="fas fa-home" style="margin-right: 8px;"></i>
+                    <p class="flinks" style="margin: 0;">Home</p>
+                  </a>
+                </li>
+                <li class="foot-quick" style="margin-bottom: 10px;">
+                  <a href="/index.html#benefits" onclick="lenis.scrollTo('#benefits')" style="display: flex; align-items: center;  text-decoration: none;">
+                    <i class="fas fa-book" style="margin-right: 8px;"></i>
+                    <p class="flinks" style="margin: 0;">Benefits</p>
+                  </a>
+                </li>
+                <li class="foot-quick" style="margin-bottom: 10px;">
+                  <a href="/index.html#chapters" onclick="lenis.scrollTo('#chapters')" style="display: flex; align-items: center;  text-decoration: none;">
+                    <i class="fas fa-globe" style="margin-right: 8px;"></i>
+                    <p class="flinks" style="margin: 0;">Literary</p>
+                  </a>
+                </li>
+                <li class="foot-quick" style="margin-bottom: 10px;">
+                  <a href="/index.html#pricing" onclick="lenis.scrollTo('#pricing')" style="display: flex; align-items: center;  text-decoration: none;">
+                    <i class="fas fa-dollar-sign" style="margin-right: 8px;"></i>
+                    <p class="flinks" style="margin: 0;">Pricing</p>
+                  </a>
+                </li>
+                <li class="foot-quick" style="margin-bottom: 10px;">
+                  <a href="book_recommend.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;  text-decoration: none;">
+                    <i class="fas fa-bookmark" style="margin-right: 8px;"></i>
+                    <p class="flinks" style="margin: 0;">Recommend</p>
+                  </a>
+                </li>
+              </ul>
+            </div>
+        
+            <!-- Second Column -->
+            <div class="col-md-6" style="flex: 1;">
+              <ul style="list-style: none; padding: 0; margin: 0;">
+                <li class="foot-quick" style="margin-bottom: 10px;">
+                  <a href="/assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;  text-decoration: none;">
+                    <i class="fas fa-exchange-alt" style="margin-right: 8px;"></i>
+                    <p class="flinks" style="margin: 0;">Swap</p>
+                  </a>
+                </li>
+                <li class="foot-quick" style="margin-bottom: 10px;">
+                  <a href="/assets/html/freeBooks.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;  text-decoration: none;">
+                    <i class="fas fa-file-pdf" style="margin-right: 8px;"></i>
+                    <p class="flinks" style="margin: 0;">E-Book</p>
+                  </a>
+                </li>
+                <li class="foot-quick" style="margin-bottom: 10px;">
+                  <a href="/assets/html/about.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;  text-decoration: none;">
+                    <i class="fas fa-info-circle" style="margin-right: 8px;"></i>
+                    <p class="flinks" style="margin: 0;">About</p>
+                  </a>
+                </li>
+                <li class="foot-quick" style="margin-bottom: 10px;">
+                  <a href="/index.html#contact" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;  text-decoration: none;">
+                    <i class="fas fa-envelope" style="margin-right: 8px;"></i>
+                    <p class="flinks" style="margin: 0;">Contact</p>
+                  </a>
+                </li>
+                <li class="foot-quick" style="margin-bottom: 10px;">
+                  <a href="/index.html#faqq" onclick="lenis.scrollTo('#faqq')" style="display: flex; align-items: center;  text-decoration: none;">
+                    <i class="fas fa-question-circle" style="margin-right: 8px;"></i>
+                    <p class="flinks" style="margin: 0;">FAQ</p>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        
+          <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;
               }
-          </script>
-  
-          <script type="text/javascript"
-                  src=
-      "https://translate.google.com/translate_a/element.js?
-      cb=googleTranslateElementInit">
-          </script> -->
-          <div class="SwapReads" ><a href="#" class="logo" style="margin: 0px 40px">SwapReads</a></div>
-          <div>
-            <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>
+          }
+          </style>
+          <style>
+            #confirmationmessage {
+      position: fixed;
+      top: 42rem;
+      right: 10px;
+      background-color: green;
+      color: white;
+      padding: 10px;
+      border-radius: 5px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      z-index: 1000;
+      display: none;
+    }
+    
+          </style>
+    
+       <form id="newsform" onsubmit="return showConfirmationMessage();">
+        <label for="new-email" class="news-form">Subscribe to our Newsletter</label>
+        <div class="row-flex display-flex">
+            <input class="finput" type="email" id="new-email" name="email" placeholder="Email address"
+                   pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\.com$"
+                   title="Please enter a valid email address that ends with '.com'" required>
+            <input type="submit" value="Subscribe" name="subscribe" class="subscribe" id="subs">
+        </div>
+    </form>
+    
+    <div id="confirmationmessage" style="display: none;">Thank you for subscribing!</div>
+      
+    <script>
+    function showConfirmationMessage() {
+    
+    const form = document.getElementById('newsform');
+    const confirmationMessage = document.getElementById('confirmationmessage');
+    
+    
+    confirmationMessage.style.display = 'block';
+    setTimeout(function() {
+      location.reload(); 
+    }, 3000);
+    
+    
+    
+    }
+    
+    
+    
+    </script>
+    <style>
+    .finput:hover{
+      border:0.2rem solid #A30F17;
+      margin-bottom:-0.2rem;
+    }
+    form {
+      width: 500px;
+      height:300px;
+      font-size: larger;
+    }
+    
+    .subscribe {
+    background-color: #A30F17;
+    color: white; 
+    border: none; 
+    padding: 10px 20px; 
+    font-size: 16px; 
+    font-family: Arial, sans-serif;
+    border-radius: 5px; 
+    cursor: pointer; 
+    transition: background-color 0.3s, transform 0.2s;
+    }
+    
+    .subscribe:hover {
+    background: linear-gradient(hwb(357 6% 36%), #d26d6d);
+    transform: scale(1.1);
+    }
+    
+    .subscribe:active {
+    transform: scale(0.98); 
+    }
+    
+    .subscribe:focus {
+    outline: none; 
+    }
+    
+    .icons{
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      width: 150px;
+    }
+    
+    
+    </style>
+    
+    <!-- <script>
+    function showConfirmationMessage() 
+    {
+      // Show confirmation message
+      const confirmationMessage = document.getElementById('confirmationMessage');
+      confirmationMessage.innerHTML = "Thank you for subscribing!";
+      confirmationMessage.style.display = 'block';
+    
+      // Reset the form after 3 seconds
+      setTimeout(function() 
+      {
+          document.getElementById('newsletterForm').reset();
+          confirmationMessage.style.display = 'none';
+          
+      }, 3000);
+    
+      return false; 
+    }
+    </script>-->
+          <div class="icons">
+            <a href="https://www.discord.com/" target="_blank">
+              <div class="icon">
+                <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
+              </div>
+             </a>
+    
+            <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
+              <div class="icon">
+                <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
+              </div>
+            </a>
+    
+            <a href="https://www.facebook.com/" target="_blank">
+              <div class="icon">
+                <i class="fab fa-facebook" title="Facebook" 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="https://www.instagram.com/">
+              <div class="icon" id="insta-icon">
+                <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
+              </div>
+            </a>
+    
+    
+            <a href="https://www.youtube.com/@anuragbytes" target="_blank" title="YouTube">
+              <div class="icon">
+                <i class="fab fa-youtube" style="cursor: pointer;"></i>
+              </div>
+            </a>
+    
+    
+    
+            <a href="https://github.com/anuragverma108">
+              <div class="icon">
+                <i class="fab fa-github" title="Github"></i>
+              </div>
+            </a>
+           
+    
           </div>
-  
+         </div>
+    
+         <div>
+          <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
+            <button class="Btn">
+              <svg height="1.2em" class="arrow" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path></svg>
+              <p class="text">Back to Top</p>
+            </button>
+          </div>
+          <!-- <div>
+            <button id="translateButton" style="background-color: #A30F17; transition:all 1s ease 0.1s;">Translate</button>
+          </div> -->
+        </div>
+    
+        </div>
+      </div>
+    <!-- <style>
+      #translateButton:hover{
+        background: linear-gradient(hwb(357 6% 36%), #d26d6d);
+        transform:scale(1.1);
+      }
+    </style> -->
+    
+      <!-- adding privacy policy and copyright popup-->
+      <div class="footer-f" style="text-align: center; align-items: center;">
+        <p style="text-align: center">
+          &copy;
+          <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
+        </p>
+        <div class="row-copy">
+    
+    
+        <a href="/copyrightpolicy.html" id="copyrightPolicyLink">Copyright Policy</a> |
+        <a href="/privacynotice.html" id="privacyNoticeLink">Privacy Notice</a> |
+        <a href="/our-vision.html" id="ourvisionLink">Our Vision</a></li> |
+        <a href="\SwapReads\refundpolicy.html">Refund Policy</a>
+      </div>
+      </div>
+      <style>
+        #copyrightPolicyLink:hover{
+          color: rgb(126, 0, 21);
+          transition: 0.5s ease;
+          text-decoration: none;
+        }
+        #privacyNoticeLink:hover{
+          color: rgb(126, 0, 21);
+          transition: 0.5s ease;
+          text-decoration: none;
+        }
+        #ourvisionLink:hover{
+          color: rgb(126, 0, 21);
+          transition: 0.5s ease;
+          text-decoration: none;
+        }
+      </style>
+    
+      <!-- Copyright Policy Modal -->
+      <div id="copyrightPolicyModal" class="modal">
+        <div class="modal-content">
+          <span class="close" id="closeCopyright">&times;</span>
+          <h1>Copyright Policy</h1>
+          <p>Welcome to SwapReads. Here is our copyright policy:</p>
+          <ul>
+            <li>All content on this website is owned by SwapReads unless otherwise stated.</li>
+            <li>You may not reproduce, distribute, or use the content without prior written permission.</li>
+            <li>Users may download and print content for personal use only.</li>
+            <li>Unauthorized use of any content may violate copyright, trademark, and other laws.</li>
+            <li>If you believe your copyrighted work is being infringed upon, please contact us with detailed information.</li>
+          </ul>
         </div>
-      </div>
-      <div class="foot-middle" style="padding: 20px; ">
-        <h2 style="font-size: 24px; margin-bottom: 15px; ">Quick Links</h2>
-        <div id="quicklinks" class="row" style="display: flex; gap: 20px;">
-          <!-- First Column -->
-          <div class="col-md-6" style="flex: 1;">
-            <ul style="list-style: none; padding: 0; margin: 0;">
-              <li class="foot-quick" style="margin-bottom: 10px;">
-                <a href="/index.html#home" onclick="lenis.scrollTo('#home')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
-                  <i class="fas fa-home" style="margin-right: 8px;"></i>
-                  <p class="flinks" style="margin: 0;">Home</p>
-                </a>
-              </li>
-              <li class="foot-quick" style="margin-bottom: 10px;">
-                <a href="/index.html#benefits" onclick="lenis.scrollTo('#benefits')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
-                  <i class="fas fa-book" style="margin-right: 8px;"></i>
-                  <p class="flinks" style="margin: 0;">Benefits</p>
-                </a>
-              </li>
-              <li class="foot-quick" style="margin-bottom: 10px;">
-                <a href="/index.html#chapters" onclick="lenis.scrollTo('#chapters')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
-                  <i class="fas fa-globe" style="margin-right: 8px;"></i>
-                  <p class="flinks" style="margin: 0;">Literary</p>
-                </a>
-              </li>
-              <li class="foot-quick" style="margin-bottom: 10px;">
-                <a href="/index.html#pricing" onclick="lenis.scrollTo('#pricing')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
-                  <i class="fas fa-dollar-sign" style="margin-right: 8px;"></i>
-                  <p class="flinks" style="margin: 0;">Pricing</p>
-                </a>
-              </li>
-              <li class="foot-quick" style="margin-bottom: 10px;">
-                <a href="book_recommend.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
-                  <i class="fas fa-bookmark" style="margin-right: 8px;"></i>
-                  <p class="flinks" style="margin: 0;">Recommend</p>
-                </a>
-              </li>
-            </ul>
-          </div>
-      
-          <!-- Second Column -->
-          <div class="col-md-6" style="flex: 1;">
-            <ul style="list-style: none; padding: 0; margin: 0;">
-              <li class="foot-quick" style="margin-bottom: 10px;">
-                <a href="/assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
-                  <i class="fas fa-exchange-alt" style="margin-right: 8px;"></i>
-                  <p class="flinks" style="margin: 0;">Swap</p>
-                </a>
-              </li>
-              <li class="foot-quick" style="margin-bottom: 10px;">
-                <a href="/assets/html/freeBooks.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
-                  <i class="fas fa-file-pdf" style="margin-right: 8px;"></i>
-                  <p class="flinks" style="margin: 0;">E-Book</p>
-                </a>
-              </li>
-              <li class="foot-quick" style="margin-bottom: 10px;">
-                <a href="/assets/html/about.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
-                  <i class="fas fa-info-circle" style="margin-right: 8px;"></i>
-                  <p class="flinks" style="margin: 0;">About</p>
-                </a>
-              </li>
-              <li class="foot-quick" style="margin-bottom: 10px;">
-                <a href="/index.html#contact" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
-                  <i class="fas fa-envelope" style="margin-right: 8px;"></i>
-                  <p class="flinks" style="margin: 0;">Contact</p>
-                </a>
-              </li>
-              <li class="foot-quick" style="margin-bottom: 10px;">
-                <a href="/index.html#faqq" onclick="lenis.scrollTo('#faqq')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
-                  <i class="fas fa-question-circle" style="margin-right: 8px;"></i>
-                  <p class="flinks" style="margin: 0;">FAQ</p>
-                </a>
-              </li>
-            </ul>
-          </div>
+      </div> 
+    
+      <!-- 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>
-      
-        <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 */
+      </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";
           }
-          #confirmationMessage
-          {
-            margin-left: 50px;
-            font-size: 23px;
-            color: green;
-  
+          if (event.target == privacyModal) {
+            privacyModal.style.display = "none";
           }
-         /* for small screen */
-          @media (max-width: 768px) 
-          {
-            #confirmationMessage 
-            {
-                margin-left: 0;
-                text-align: center;
-                font-size: 18px;
-            }
         }
-        </style>
-        <style>
-          #confirmationmessage {
-    position: fixed;
-    top: 42rem;
-    right: 10px;
-    background-color: green;
-    color: white;
-    padding: 10px;
-    border-radius: 5px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    z-index: 1000;
-    display: none;
-  }
-  
-        </style>
-  
-  <form id="newsform" onsubmit="return showConfirmationMessage();">
-    <label for="new-email" class="news-form">Subscribe to our Newsletter</label>
-    <div class="row-flex display-flex">
-        <input class="finput" type="email" id="new-email" name="email" 
-               placeholder="Email address" 
-               pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\.com$"
-               title="Please enter a valid email address that ends with '.com'" required>
-        <input type="submit" value="Subscribe" name="subscribe" class="subscribe" id="subs">
+      </script>
+      
+    </footer>
+    
+     <div>
+      <button id="translateButton">Translate</button>
     </div>
-</form>
-
-<div id="confirmationmessage" style="display: none;">Thank you for subscribing!</div>
-
-<script>
-function showConfirmationMessage() {
-    const form = document.getElementById('newsform');
-    const confirmationMessage = document.getElementById('confirmationmessage');
-
-    confirmationMessage.style.display = 'block';
-    setTimeout(function() {
-        location.reload(); 
-    }, 3000);
-}
-</script>
-
-<style>
-.finput:hover {
-    border: 0.2rem solid #A30F17;
-    margin-bottom: -0.2rem;
-}
-form {
-    width: 500px;
-    height: 300px;
-    font-size: larger;
-}
-
-.subscribe {
-    background-color: #A30F17;
-    color: white; 
-    border: none; 
-    padding: 10px 20px; 
-    font-size: 16px; 
-    font-family: Arial, sans-serif;
-    border-radius: 5px; 
-    cursor: pointer; 
-    transition: background-color 0.3s, transform 0.2s;
-}
-
-.subscribe:hover {
-    background: linear-gradient(hwb(357 6% 36%), #d26d6d);
-    transform: scale(1.1);
-}
-
-.subscribe:active {
-    transform: scale(0.98); 
+    <style>
+      /* Quick Links Grid Styling */
+footer .footer-column ul {
+  list-style: none; /* Remove bullet points */
+  padding: 0; /* Remove default padding */
+  margin: 0; /* Remove default margin */
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 2 columns */
+  gap: 10px 20px; /* Space between items */
 }
 
-.subscribe:focus {
-    outline: none; 
+footer .footer-column ul li {
+  margin: 0; /* Reset default margin */
 }
 
-.icons {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    width: 150px;
+footer .footer-column ul li a {
+  color: inherit; /* Keep the color as in original code */
+  text-decoration: none;
+  display: block;
+  transition: color 0.3s ease;
 }
 
-/* Add this to change the placeholder text color */
-input::placeholder {
-    color: rgb(58, 56, 56); /* Set placeholder text color to black */
+footer .footer-column ul li a:hover {
+  color: inherit; /* Keep the hover color as in original code */
 }
-</style>
 
-  
-  <!-- <script>
-  function showConfirmationMessage() 
-  {
-    // Show confirmation message
-    const confirmationMessage = document.getElementById('confirmationMessage');
-    confirmationMessage.innerHTML = "Thank you for subscribing!";
-    confirmationMessage.style.display = 'block';
-  
-    // Reset the form after 3 seconds
-    setTimeout(function() 
-    {
-        document.getElementById('newsletterForm').reset();
-        confirmationMessage.style.display = 'none';
-        
-    }, 3000);
-  
-    return false; 
-  }
-  </script>-->
-        <div class="icons">
-          <a href="https://www.discord.com/" target="_blank">
-            <div class="icon">
-              <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
-            </div>
-           </a>
-  
-          <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
-            <div class="icon">
-              <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
-            </div>
-          </a>
-  
-          <a href="https://www.facebook.com/" target="_blank">
-            <div class="icon">
-              <i class="fab fa-facebook" title="Facebook" 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="https://www.instagram.com/">
-            <div class="icon" id="insta-icon">
-              <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
-            </div>
-          </a>
-  
-  
-          <a href="https://www.youtube.com/@anuragbytes" target="_blank" title="YouTube">
-            <div class="icon">
-              <i class="fab fa-youtube" style="cursor: pointer;"></i>
-            </div>
-          </a>
-  
-  
-  
-          <a href="https://github.com/anuragverma108">
-            <div class="icon">
-              <i class="fab fa-github" title="Github"></i>
-            </div>
-          </a>
-         
-  
-        </div>
-       </div>
-  
-       <div>
-        <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
-          <button class="Btn">
-            <svg height="1.2em" class="arrow" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path></svg>
-            <p class="text">Back to Top</p>
-          </button>
-        </div>
-        <!-- <div>
-          <button id="translateButton" style="background-color: #A30F17; transition:all 1s ease 0.1s;">Translate</button>
-        </div> -->
-      </div>
-  
-      </div>
-    </div>
-  <!-- <style>
-    #translateButton:hover{
-      background: linear-gradient(hwb(357 6% 36%), #d26d6d);
-      transform:scale(1.1);
+      /* Fixed translate button */
+    #translateButton {
+      position: fixed;
+      /* bottom: 20px; */
+      top:-15rem;
+      right: 4.4rem;
+      z-index: 1000;
+      width: 53px;  
+      height: 53px;
+      border-radius: 50%; 
+      border: none; 
+      background:linear-gradient(hwb(357 6% 36%),#d26d6d); 
+      color: white; 
+      text-align: center; 
+      display: inline-block; 
+      font-size: 16px; 
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      line-height: 1;
+      text-align: center;
+      white-space: nowrap;
+      transition: transform 0.3s ease;
+      margin-top: 75.8vh;
+      margin-right:opx;
+    }
+    #translateButton:hover {
+      transform: scale(1.2); 
+    }
+    /* The popup modal */
+    .popup {
+      display: none; 
+      position: fixed;
+      z-index: 1000;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgb(0,0,0); 
+      background-color: rgba(0,0,0,0.4); 
+    }
+    /* Popup content */
+    .popup-content {
+    background:linear-gradient(hwb(357 6% 36%),#d26d6d);
+      margin-top: 600px;
+      padding: 20px;
+      border: 1px solid #888;
+      width: 300px;
+      border-radius: 10px;
+      position: relative;
+      margin-left: 1160px;
+      /* margin-right: 0px; */
+    }
+    /* Close button */
+    .close {
+      color: #073725;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+      cursor: pointer;
+    }
+    .close:hover,
+    .close:focus {
+      color: black;
+      text-decoration: none;
+    }
+    /* Hide the default Google Translate widget */
+    .goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon {
+      display: none !important;
+    }
+    body {
+      top: 0px !important;
+    }
+    /* Hide the "Powered by Google" branding */
+    .goog-logo-link {
+      display: none !important;
+    }
+    .goog-te-gadget {
+      height: 28px !important;
+      overflow: hidden;
+    }
+    /* Hide Google Translate notifications */
+    .goog-te-spinner-pos,
+    .goog-te-spinner,
+    .goog-te-balloon-frame,
+    .goog-te-banner-frame,
+    .goog-te-banner,
+    .goog-te-balloon {
+      display: none !important;
+    }
+    /* Custom styles for the Google Translate dropdown */
+    #google_translate_element select {
+      background: #ffffff; 
+      border: 1px solid #ccc; 
+      color: #d26d6d; 
+      padding: 5px; 
+      font-size: 14px; 
+      border-radius: 5px; 
+    }
+    /* Hide the Google Translate bar */
+    body > .skiptranslate {
+      display: none !important;
+    }
+    .goog-te-banner-frame.skiptranslate {
+      display: none !important;
+    }
+    .goog-te-banner-frame {
+      display: none !important;
+    }
+    .goog-te-banner {
+      display: none !important;
     }
-  </style> -->
-  
-    <!-- adding privacy policy and copyright popup-->
-    <div class="footer-f" style="text-align: center; align-items: center;">
-      <p style="text-align: center">
-        &copy;
-        <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
-      </p>
-      <div class="row-copy">
-  
-  
-      <a href="/copyrightpolicy.html" id="copyrightPolicyLink">Copyright Policy</a> |
-      <a href="/privacynotice.html" id="privacyNoticeLink">Privacy Notice</a> |
-      <a href="/our-vision.html" id="ourvisionLink">Our Vision</a></li> |
-      <a href="\SwapReads\refundpolicy.html">Refund Policy</a>
-    </div>
-    </div>
-    <style>
-      #copyrightPolicyLink:hover{
-        color: rgb(126, 0, 21);
-        transition: 0.5s ease;
-        text-decoration: none;
-      }
-      #privacyNoticeLink:hover{
-        color: rgb(126, 0, 21);
-        transition: 0.5s ease;
-        text-decoration: none;
-      }
-      #ourvisionLink:hover{
-        color: rgb(126, 0, 21);
-        transition: 0.5s ease;
-        text-decoration: none;
-      }
     </style>
-  
-    <!-- Copyright Policy Modal -->
-    <div id="copyrightPolicyModal" class="modal">
-      <div class="modal-content">
-        <span class="close" id="closeCopyright">&times;</span>
-        <h1>Copyright Policy</h1>
-        <p>Welcome to SwapReads. Here is our copyright policy:</p>
-        <ul>
-          <li>All content on this website is owned by SwapReads unless otherwise stated.</li>
-          <li>You may not reproduce, distribute, or use the content without prior written permission.</li>
-          <li>Users may download and print content for personal use only.</li>
-          <li>Unauthorized use of any content may violate copyright, trademark, and other laws.</li>
-          <li>If you believe your copyrighted work is being infringed upon, please contact us with detailed information.</li>
-        </ul>
-      </div>
-    </div> 
-  
-    <!-- Privacy Notice Modal -->
-    <div id="privacyNoticeModal" class="modal">
-      <div class="modal-content">
-        <span class="close" id="closePrivacy">&times;</span>
-        <h1>Privacy Notice</h1>
-        <p>Welcome to SwapReads. Here is our privacy notice:</p>
-        <ul>
-          <li>We collect personal information when you register, buy, or sell books.</li>
-          <li>We use this information to provide and improve our services.</li>
-          <li>We do not share your personal information with third parties without your consent.</li>
-          <li>We take reasonable measures to protect your data from unauthorized access.</li>
-          <li>You can contact us to update or delete your personal information.</li>
-          <li>By using our site, you consent to our privacy practices.</li>
-        </ul>
-      </div>
-    </div> 
-  
     <script>
-      // Get the modal elements
-      var copyrightModal = document.getElementById("copyrightPolicyModal");
-      var privacyModal = document.getElementById("privacyNoticeModal");
-  
-      // Get the link elements
-      var copyrightLink = document.getElementById("copyrightPolicyLink");
-      var privacyLink = document.getElementById("privacyNoticeLink");
-  
-      // Get the <span> elements that close the modals
-      var closeCopyright = document.getElementById("closeCopyright");
-      var closePrivacy = document.getElementById("closePrivacy");
-  
-      // When the user clicks the link, open the modal
-      copyrightLink.onclick = function() {
-        copyrightModal.style.display = "block";
+      document.addEventListener('DOMContentLoaded', function() {
+      // Get the popup
+      var popup = document.getElementById('translatePopup');
+      // Get the button that opens the popup
+      var btn = document.getElementById('translateButton');
+      // Get the <span> element that closes the popup
+      var span = document.getElementsByClassName('close')[0];
+      // When the user clicks the button, open the popup 
+      btn.onclick = function() {
+          popup.style.display = 'block';
       }
-      privacyLink.onclick = function() {
-        privacyModal.style.display = "block";
+      // When the user clicks on <span> (x), close the popup
+      span.onclick = function() {
+          popup.style.display = 'none';
       }
-  
-      // 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
+      // When the user clicks anywhere outside of the popup, close it
       window.onclick = function(event) {
-        if (event.target == copyrightModal) {
-          copyrightModal.style.display = "none";
-        }
-        if (event.target == privacyModal) {
-          privacyModal.style.display = "none";
-        }
+          if (event.target == popup) {
+              popup.style.display = 'none';
+          }
+      }
+    });
+    </script>
+    <!-- Popup for Google Translate -->
+    <div id="translatePopup" class="popup">
+        <div class="popup-content">
+            <span class="close">&times;</span>
+            <div id="google_translate_element"></div>
+        </div>
+    </div>
+    <script type="text/javascript">
+      function googleTranslateElementInit() {
+          new google.translate.TranslateElement({
+              pageLanguage: 'en',
+          }, 'google_translate_element');
       }
     </script>
+    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     
-  </footer>
-  
-
-       
+    <!-- Your custom JavaScript -->
+    <script src="script.js"></script>
 
-   
-  <!--Dark Mode-->
+     <script>
 
+        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>
+       <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>
+      
   <script>
-    //function to toggle the like button
-    document.addEventListener("DOMContentLoaded", ()=>{
-      let hearts= document.querySelectorAll(".heart-icon");
-      hearts.forEach((heart)=>{
-        heart.addEventListener("click", ()=>{
-          heart.classList.toggle("text-blue-500");
-        })
-      })
-    });
 
+    //   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();
@@ -1646,295 +1785,109 @@ <h1>Privacy Notice</h1>
       const isDarkMode = isDarkModePreferred();
       if (isDarkMode) {
         document.body.classList.add('dark-mode');
-        document.getElementById('theme-icon').src = 'assets/images/icons8-sun.svg';
+        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.getElementById('theme-icon').src = './assets/images/moon_solid.svg';
       }
     }
 
-    // Function to set dark mode preference
     document.addEventListener('DOMContentLoaded', () => {
       const currentTheme = localStorage.getItem('theme');
-      const switchCheckbox = document.getElementById('switch'); // Define switchCheckbox here
-
-      if (switchCheckbox) { // Check if switchCheckbox is not null
-        function applyDarkModeStyles() {
-          document.body.classList.remove('light-mode');
-          document.body.classList.add('dark-mode');
-        }
-
-        function applyLightModeStyles() {
-          document.body.classList.remove('dark-mode');
-          document.body.classList.add('light-mode');
+      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();
         }
-
-        if (currentTheme) {
-          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');
         }
-
-        switchCheckbox.addEventListener('change', () => {
-          if (switchCheckbox.checked) {
-            applyDarkModeStyles();
-            localStorage.setItem('theme', 'dark-mode');
-          } else {
-            applyLightModeStyles();
-            localStorage.setItem('theme', 'light-mode');
-          }
-        });
-      } else {
-      console.error("Switch checkbox not found!"); // Log an error if switchCheckbox is null
-    }
-  });
-  </script>
-
-
-
-  <!--
-    - custom js link
-  -->
-  <script src="./assets/js/script.js" defer></script>
-
-  <!--
-    - 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>
-    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 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 < chaptersSection) {
-        setActiveLink("benefits");
-      } 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-link").style.display = "block";
-      } else {
-        document.getElementById("login-signup-link").style.display = "block";
-        document.getElementById("logout-link").style.display = "none";
-      }
-    });
-
-    // Logout function
-    document.getElementById("logout").addEventListener("click", (e) => {
-      e.preventDefault();
-      signOut(auth).then(() => {
-        alert("Logged out successfully.");
-      }).catch((error) => {
-        console.error("Logout error:", error);
-      });
+      };
+    
+      initializeTheme();
+      switchCheckbox.addEventListener('change', handleThemeChange);
     });
+    
   </script>
-
-  <script src="vanilla-tilt.js"></script>
-  <script type="text/javascript">
-    (function (d, t) {
-      var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
-      v.onload = function () {
-        window.voiceflow.chat.load({
-          verify: { projectID: '66448ea9c63c08981233b8f1' },
-          url: 'https://general-runtime.voiceflow.com',
-          versionID: 'production'
+      <script>
+        // Coordinates for the cursor
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+
+        // Colors for the circles
+        const colors = [
+          "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
+          "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
+          "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
+          "#680060", "#60005f", "#48005f", "#3d005e"
+        ];
+
+        // Assign colors and initial position to each circle
+        circles.forEach(function (circle, index) {
+          circle.x = 0;
+          circle.y = 0;
+          circle.style.backgroundColor = colors[index % colors.length];
         });
-      }
-      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
-    })(document, 'script');
-
-
 
-  </script>
-  <!-- Swiper JS -->
-<script src="assets/js/swiper-bundle.min.js"></script>
-<!-- Custom JavaScript -->
-
-<script src="assets/js/test-script.js"></script>
-<script src="scroll.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>
-
-<script>
-
-  // Coordinates for the cursor
-  const coords = { x: 0, y: 0 };
-  const circles = document.querySelectorAll(".circle");
-
-  // Colors for the circles
-  const colors = [
-    "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
-    "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
-    "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
-    "#680060", "#60005f", "#48005f", "#3d005e"
-  ];
-
-  // Assign colors and initial position to each circle
-  circles.forEach(function (circle, index) {
-    circle.x = 0;
-    circle.y = 0;
-    circle.style.backgroundColor = colors[index % colors.length];
-  });
-
-  // Update the coordinates when the mouse moves
-  window.addEventListener("mousemove", function (e) {
-    coords.x = e.clientX;
-    coords.y = e.clientY;
-  });
-
-  // Animation function to move the circles
-  function animateCircles() {
-    let x = coords.x;
-    let y = coords.y;
+        // Update the coordinates when the mouse moves
+        window.addEventListener("mousemove", function (e) {
+          coords.x = e.clientX;
+          coords.y = e.clientY;
+        });
 
-    circles.forEach(function (circle, index) {
-      // Update the position and scale of each circle
-      circle.style.left = x - 12 + "px";
-      circle.style.top = y - 12 + "px";
-      circle.style.scale = (circles.length - index) / circles.length;
+        // Animation function to move the circles
+        function animateCircles() {
+          let x = coords.x;
+          let y = coords.y;
 
-      circle.x = x;
-      circle.y = y;
+          circles.forEach(function (circle, index) {
+            // Update the position and scale of each circle
+            circle.style.left = x - 12 + "px";
+            circle.style.top = y - 12 + "px";
+            circle.style.scale = (circles.length - index) / circles.length;
 
-      // Get the next circle in the sequence
-      const nextCircle = circles[index + 1] || circles[0];
-      x += (nextCircle.x - x) * 0.15;
-      y += (nextCircle.y - y) * 0.15;
-    });
+            circle.x = x;
+            circle.y = y;
 
-    // Repeat the animation
-    requestAnimationFrame(animateCircles);
-  }
+            // Get the next circle in the sequence
+            const nextCircle = circles[index + 1] || circles[0];
+            x += (nextCircle.x - x) * 0.3;
+            y += (nextCircle.y - y) * 0.3;
+          });
 
-  // Start the animation
-  animateCircles();
+          // Repeat the animation
+          requestAnimationFrame(animateCircles);
+        }
 
-</script>
+        // Start the animation
+        animateCircles();
+      </script>
 </body>
+</html>
 
-</html>
\ No newline at end of file