From f96a955469df11bf477e3acf40fb03e94724de0a Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Tue, 30 Jul 2024 21:29:50 +0530
Subject: [PATCH] added FAQ section to literary realms pages

---
 Mystical-fantaies.html     | 117 +++++++++++++++++++++++++++++++-----
 biographies.html           | 117 +++++++++++++++++++++++++++++++-----
 historical-chronicals.html | 117 +++++++++++++++++++++++++++++++-----
 lol.html                   | 117 +++++++++++++++++++++++++++++++-----
 mindful-living.html        | 117 +++++++++++++++++++++++++++++++-----
 romantic-esc.html          | 117 +++++++++++++++++++++++++++++++-----
 scifi.html                 | 117 +++++++++++++++++++++++++++++++-----
 thrilling-adventures.html  | 118 ++++++++++++++++++++++++++++++++-----
 8 files changed, 825 insertions(+), 112 deletions(-)

diff --git a/Mystical-fantaies.html b/Mystical-fantaies.html
index eab63c348..cecbd1bc4 100644
--- a/Mystical-fantaies.html
+++ b/Mystical-fantaies.html
@@ -489,15 +489,15 @@ <h2 style="font-size: 20px;">Sonal K</h2>
 <!-- Testimonials -->
 
 
-  <div class="faq-section">
-    <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
+  <div class="faqsection">
+    <h1 class="faqheading" id="faqh1">Some Frequently Asked Questions</h1>
   </br>
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads work ?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>SwapReads is a global book exchange platform where users can create profiles,
           list the books they're willing to swap, and can find other users collections.
           When you find a book you're interested in, you can find suitable offers and can read that book. It's that
@@ -505,12 +505,12 @@ <h4>How does SwapReads work ?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads contribute to sustainability?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>
           By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
           reducing the demand for new book production. This helps minimize the environmental impact
@@ -519,28 +519,117 @@ <h4>How does SwapReads contribute to sustainability?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I join the SwapReads community?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
           books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
           our servers. </p>
       </div>
     </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>Can I read the books online without downloading them?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p> Yes, many of the free books available on our website can be read online</p>
+      </div>
+    </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>How can I download a free  book?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p>  To download a free book, simply click on the "Download" button next to the book you are interested in. You may need to sign up or log in to access the download link.</p>
+      </div>
+    </div>
   </div>
+  <style>
+    .faqcontainer {
+      width: 80%;
+      max-width: 600px;
+      border-radius: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-left:450px;
+      margin-bottom: 20px;
+    }
+
+   .faqheading{
+    color:darkred;;
+    margin-left:525px;
+    font-family: var(--ff-philosopher);
+    font-size:30px;
+   }
+
+    .questions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      padding: 10px;
+      background-color: hsl(0deg 100% 80.49%);
+      color: #fff;
+      border-radius: 5px;
+      transition: background-color 0.3s ease;
+      color: var(--sonic-silver);
+      font-weight: bold;
+      justify-content: space-between;
+    }
+
+    .questions:hover {
+      background-color:#FFB2A8;
+    }
+
+    .questions h4 {
+      margin: 0;
+    }
+
+    .answer {
+      display: none;
+      padding: 10px;
+      background-color:#FFB2A8;
+      border-left: 3px solid darkred;
+      border-radius: 5px;
+      margin-top: 5px;
+      color:var(--sonic-silver);
+    }
+    .answer:hover{
+      background-color:#FFB2A8;
+    }
+  </style>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const faqContainers = document.querySelectorAll('.faqcontainer');
+
+      faqContainers.forEach(container => {
+        const question = container.querySelector('.questions');
+        const answer = container.querySelector('.answer');
+        const icon = container.querySelector('.icon');
+
+        question.addEventListener('click', () => {
+          answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+          icon.classList.toggle('fa-caret-down');
+          icon.classList.toggle('fa-caret-up');
+        });
+      });
+    });
+  </script>
   <br /><br />
 
   <!--
diff --git a/biographies.html b/biographies.html
index 285eb8af2..9cf4a1056 100644
--- a/biographies.html
+++ b/biographies.html
@@ -777,15 +777,15 @@ <h2 style="font-size: 20px;">Sonal K</h2>
 <!-- Testimonials -->
 
 
-  <div class="faq-section">
-    <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
+  <div class="faqsection">
+    <h1 class="faqheading" id="faqh1">Some Frequently Asked Questions</h1>
   </br>
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads work ?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>SwapReads is a global book exchange platform where users can create profiles,
           list the books they're willing to swap, and can find other users collections.
           When you find a book you're interested in, you can find suitable offers and can read that book. It's that
@@ -793,12 +793,12 @@ <h4>How does SwapReads work ?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads contribute to sustainability?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>
           By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
           reducing the demand for new book production. This helps minimize the environmental impact
@@ -807,28 +807,117 @@ <h4>How does SwapReads contribute to sustainability?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I join the SwapReads community?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
           books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
           our servers. </p>
       </div>
     </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>Can I read the books online without downloading them?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p> Yes, many of the free books available on our website can be read online</p>
+      </div>
+    </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>How can I download a free  book?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p>  To download a free book, simply click on the "Download" button next to the book you are interested in. You may need to sign up or log in to access the download link.</p>
+      </div>
+    </div>
   </div>
+  <style>
+    .faqcontainer {
+      width: 80%;
+      max-width: 600px;
+      border-radius: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-left:450px;
+      margin-bottom: 20px;
+    }
+
+   .faqheading{
+    color:darkred;;
+    margin-left:525px;
+    font-family: var(--ff-philosopher);
+    font-size:30px;
+   }
+
+    .questions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      padding: 10px;
+      background-color: hsl(0deg 100% 80.49%);
+      color: #fff;
+      border-radius: 5px;
+      transition: background-color 0.3s ease;
+      color: var(--sonic-silver);
+      font-weight: bold;
+      justify-content: space-between;
+    }
+
+    .questions:hover {
+      background-color:#FFB2A8;
+    }
+
+    .questions h4 {
+      margin: 0;
+    }
+
+    .answer {
+      display: none;
+      padding: 10px;
+      background-color:#FFB2A8;
+      border-left: 3px solid darkred;
+      border-radius: 5px;
+      margin-top: 5px;
+      color:var(--sonic-silver);
+    }
+    .answer:hover{
+      background-color:#FFB2A8;
+    }
+  </style>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const faqContainers = document.querySelectorAll('.faqcontainer');
+
+      faqContainers.forEach(container => {
+        const question = container.querySelector('.questions');
+        const answer = container.querySelector('.answer');
+        const icon = container.querySelector('.icon');
+
+        question.addEventListener('click', () => {
+          answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+          icon.classList.toggle('fa-caret-down');
+          icon.classList.toggle('fa-caret-up');
+        });
+      });
+    });
+  </script>
   <br /><br />
 
   <!--
diff --git a/historical-chronicals.html b/historical-chronicals.html
index 4df2f26fb..2fd4354e4 100644
--- a/historical-chronicals.html
+++ b/historical-chronicals.html
@@ -489,15 +489,15 @@ <h2 style="font-size: 20px;">Sonal K</h2>
 <!-- Testimonials -->
 
 
-  <div class="faq-section">
-    <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
+  <div class="faqsection">
+    <h1 class="faqheading" id="faqh1">Some Frequently Asked Questions</h1>
   </br>
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads work ?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>SwapReads is a global book exchange platform where users can create profiles,
           list the books they're willing to swap, and can find other users collections.
           When you find a book you're interested in, you can find suitable offers and can read that book. It's that
@@ -505,12 +505,12 @@ <h4>How does SwapReads work ?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads contribute to sustainability?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>
           By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
           reducing the demand for new book production. This helps minimize the environmental impact
@@ -519,28 +519,117 @@ <h4>How does SwapReads contribute to sustainability?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I join the SwapReads community?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
           books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
           our servers. </p>
       </div>
     </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>Can I read the books online without downloading them?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p> Yes, many of the free books available on our website can be read online</p>
+      </div>
+    </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>How can I download a free  book?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p>  To download a free book, simply click on the "Download" button next to the book you are interested in. You may need to sign up or log in to access the download link.</p>
+      </div>
+    </div>
   </div>
+  <style>
+    .faqcontainer {
+      width: 80%;
+      max-width: 600px;
+      border-radius: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-left:450px;
+      margin-bottom: 20px;
+    }
+
+   .faqheading{
+    color:darkred;;
+    margin-left:525px;
+    font-family: var(--ff-philosopher);
+    font-size:30px;
+   }
+
+    .questions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      padding: 10px;
+      background-color: hsl(0deg 100% 80.49%);
+      color: #fff;
+      border-radius: 5px;
+      transition: background-color 0.3s ease;
+      color: var(--sonic-silver);
+      font-weight: bold;
+      justify-content: space-between;
+    }
+
+    .questions:hover {
+      background-color:#FFB2A8;
+    }
+
+    .questions h4 {
+      margin: 0;
+    }
+
+    .answer {
+      display: none;
+      padding: 10px;
+      background-color:#FFB2A8;
+      border-left: 3px solid darkred;
+      border-radius: 5px;
+      margin-top: 5px;
+      color:var(--sonic-silver);
+    }
+    .answer:hover{
+      background-color:#FFB2A8;
+    }
+  </style>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const faqContainers = document.querySelectorAll('.faqcontainer');
+
+      faqContainers.forEach(container => {
+        const question = container.querySelector('.questions');
+        const answer = container.querySelector('.answer');
+        const icon = container.querySelector('.icon');
+
+        question.addEventListener('click', () => {
+          answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+          icon.classList.toggle('fa-caret-down');
+          icon.classList.toggle('fa-caret-up');
+        });
+      });
+    });
+  </script>
   <br /><br />
 
   <!--
diff --git a/lol.html b/lol.html
index ed0c948b2..49a2bff90 100644
--- a/lol.html
+++ b/lol.html
@@ -490,15 +490,15 @@ <h2 style="font-size: 20px; text-align: center;">Sonal K</h2>
 <!-- Testimonials -->
 
 
-  <div class="faq-section">
-    <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
+  <div class="faqsection">
+    <h1 class="faqheading" id="faqh1">Some Frequently Asked Questions</h1>
   </br>
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads work ?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>SwapReads is a global book exchange platform where users can create profiles,
           list the books they're willing to swap, and can find other users collections.
           When you find a book you're interested in, you can find suitable offers and can read that book. It's that
@@ -506,12 +506,12 @@ <h4>How does SwapReads work ?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads contribute to sustainability?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>
           By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
           reducing the demand for new book production. This helps minimize the environmental impact
@@ -520,28 +520,117 @@ <h4>How does SwapReads contribute to sustainability?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I join the SwapReads community?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
           books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
           our servers. </p>
       </div>
     </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>Can I read the books online without downloading them?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p> Yes, many of the free books available on our website can be read online</p>
+      </div>
+    </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>How can I download a free  book?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p>  To download a free book, simply click on the "Download" button next to the book you are interested in. You may need to sign up or log in to access the download link.</p>
+      </div>
+    </div>
   </div>
+  <style>
+    .faqcontainer {
+      width: 80%;
+      max-width: 600px;
+      border-radius: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-left:450px;
+      margin-bottom: 20px;
+    }
+
+   .faqheading{
+    color:darkred;;
+    margin-left:525px;
+    font-family: var(--ff-philosopher);
+    font-size:30px;
+   }
+
+    .questions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      padding: 10px;
+      background-color: hsl(0deg 100% 80.49%);
+      color: #fff;
+      border-radius: 5px;
+      transition: background-color 0.3s ease;
+      color: var(--sonic-silver);
+      font-weight: bold;
+      justify-content: space-between;
+    }
+
+    .questions:hover {
+      background-color:#FFB2A8;
+    }
+
+    .questions h4 {
+      margin: 0;
+    }
+
+    .answer {
+      display: none;
+      padding: 10px;
+      background-color:#FFB2A8;
+      border-left: 3px solid darkred;
+      border-radius: 5px;
+      margin-top: 5px;
+      color:var(--sonic-silver);
+    }
+    .answer:hover{
+      background-color:#FFB2A8;
+    }
+  </style>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const faqContainers = document.querySelectorAll('.faqcontainer');
+
+      faqContainers.forEach(container => {
+        const question = container.querySelector('.questions');
+        const answer = container.querySelector('.answer');
+        const icon = container.querySelector('.icon');
+
+        question.addEventListener('click', () => {
+          answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+          icon.classList.toggle('fa-caret-down');
+          icon.classList.toggle('fa-caret-up');
+        });
+      });
+    });
+  </script>
   <br /><br />
 
   <!--
diff --git a/mindful-living.html b/mindful-living.html
index 015a2e388..3d064ca63 100644
--- a/mindful-living.html
+++ b/mindful-living.html
@@ -490,15 +490,15 @@ <h2 style="font-size: 20px;">Sonal K</h2>
 <!-- Testimonials -->
 
 
-  <div class="faq-section">
-    <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
+  <div class="faqsection">
+    <h1 class="faqheading" id="faqh1">Some Frequently Asked Questions</h1>
   </br>
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads work ?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>SwapReads is a global book exchange platform where users can create profiles,
           list the books they're willing to swap, and can find other users collections.
           When you find a book you're interested in, you can find suitable offers and can read that book. It's that
@@ -506,12 +506,12 @@ <h4>How does SwapReads work ?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads contribute to sustainability?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>
           By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
           reducing the demand for new book production. This helps minimize the environmental impact
@@ -520,28 +520,117 @@ <h4>How does SwapReads contribute to sustainability?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I join the SwapReads community?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
           books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
           our servers. </p>
       </div>
     </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>Can I read the books online without downloading them?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p> Yes, many of the free books available on our website can be read online</p>
+      </div>
+    </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>How can I download a free  book?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p>  To download a free book, simply click on the "Download" button next to the book you are interested in. You may need to sign up or log in to access the download link.</p>
+      </div>
+    </div>
   </div>
+  <style>
+    .faqcontainer {
+      width: 80%;
+      max-width: 600px;
+      border-radius: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-left:450px;
+      margin-bottom: 20px;
+    }
+
+   .faqheading{
+    color:darkred;;
+    margin-left:525px;
+    font-family: var(--ff-philosopher);
+    font-size:30px;
+   }
+
+    .questions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      padding: 10px;
+      background-color: hsl(0deg 100% 80.49%);
+      color: #fff;
+      border-radius: 5px;
+      transition: background-color 0.3s ease;
+      color: var(--sonic-silver);
+      font-weight: bold;
+      justify-content: space-between;
+    }
+
+    .questions:hover {
+      background-color:#FFB2A8;
+    }
+
+    .questions h4 {
+      margin: 0;
+    }
+
+    .answer {
+      display: none;
+      padding: 10px;
+      background-color:#FFB2A8;
+      border-left: 3px solid darkred;
+      border-radius: 5px;
+      margin-top: 5px;
+      color:var(--sonic-silver);
+    }
+    .answer:hover{
+      background-color:#FFB2A8;
+    }
+  </style>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const faqContainers = document.querySelectorAll('.faqcontainer');
+
+      faqContainers.forEach(container => {
+        const question = container.querySelector('.questions');
+        const answer = container.querySelector('.answer');
+        const icon = container.querySelector('.icon');
+
+        question.addEventListener('click', () => {
+          answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+          icon.classList.toggle('fa-caret-down');
+          icon.classList.toggle('fa-caret-up');
+        });
+      });
+    });
+  </script>
   <br /><br />
 
   
diff --git a/romantic-esc.html b/romantic-esc.html
index e4dfc4d1b..ca4079a5b 100644
--- a/romantic-esc.html
+++ b/romantic-esc.html
@@ -492,15 +492,15 @@ <h2 style="font-size: 20px; text-align: center;">Sonal K</h2>
 <!-- Testimonials -->
 
 
-  <div class="faq-section">
-    <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
+  <div class="faqsection">
+    <h1 class="faqheading" id="faqh1">Some Frequently Asked Questions</h1>
   </br>
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads work ?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>SwapReads is a global book exchange platform where users can create profiles,
           list the books they're willing to swap, and can find other users collections.
           When you find a book you're interested in, you can find suitable offers and can read that book. It's that
@@ -508,12 +508,12 @@ <h4>How does SwapReads work ?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads contribute to sustainability?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>
           By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
           reducing the demand for new book production. This helps minimize the environmental impact
@@ -522,28 +522,117 @@ <h4>How does SwapReads contribute to sustainability?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I join the SwapReads community?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
           books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
           our servers. </p>
       </div>
     </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>Can I read the books online without downloading them?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p> Yes, many of the free books available on our website can be read online</p>
+      </div>
+    </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>How can I download a free  book?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p>  To download a free book, simply click on the "Download" button next to the book you are interested in. You may need to sign up or log in to access the download link.</p>
+      </div>
+    </div>
   </div>
+  <style>
+    .faqcontainer {
+      width: 80%;
+      max-width: 600px;
+      border-radius: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-left:450px;
+      margin-bottom: 20px;
+    }
+
+   .faqheading{
+    color:darkred;;
+    margin-left:525px;
+    font-family: var(--ff-philosopher);
+    font-size:30px;
+   }
+
+    .questions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      padding: 10px;
+      background-color: hsl(0deg 100% 80.49%);
+      color: #fff;
+      border-radius: 5px;
+      transition: background-color 0.3s ease;
+      color: var(--sonic-silver);
+      font-weight: bold;
+      justify-content: space-between;
+    }
+
+    .questions:hover {
+      background-color:#FFB2A8;
+    }
+
+    .questions h4 {
+      margin: 0;
+    }
+
+    .answer {
+      display: none;
+      padding: 10px;
+      background-color:#FFB2A8;
+      border-left: 3px solid darkred;
+      border-radius: 5px;
+      margin-top: 5px;
+      color:var(--sonic-silver);
+    }
+    .answer:hover{
+      background-color:#FFB2A8;
+    }
+  </style>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const faqContainers = document.querySelectorAll('.faqcontainer');
+
+      faqContainers.forEach(container => {
+        const question = container.querySelector('.questions');
+        const answer = container.querySelector('.answer');
+        const icon = container.querySelector('.icon');
+
+        question.addEventListener('click', () => {
+          answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+          icon.classList.toggle('fa-caret-down');
+          icon.classList.toggle('fa-caret-up');
+        });
+      });
+    });
+  </script>
   <br /><br />
 
   <!--
diff --git a/scifi.html b/scifi.html
index 29799a302..a44cd242d 100644
--- a/scifi.html
+++ b/scifi.html
@@ -490,15 +490,15 @@ <h2 style="font-size: 20px; text-align: center;">Sonal K</h2>
 <!-- Testimonials -->
 
 
-  <div class="faq-section">
-    <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
+  <div class="faqsection">
+    <h1 class="faqheading" id="faqh1">Some Frequently Asked Questions</h1>
   </br>
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads work ?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>SwapReads is a global book exchange platform where users can create profiles,
           list the books they're willing to swap, and can find other users collections.
           When you find a book you're interested in, you can find suitable offers and can read that book. It's that
@@ -506,12 +506,12 @@ <h4>How does SwapReads work ?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads contribute to sustainability?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>
           By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
           reducing the demand for new book production. This helps minimize the environmental impact
@@ -520,28 +520,117 @@ <h4>How does SwapReads contribute to sustainability?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I join the SwapReads community?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
           books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
           our servers. </p>
       </div>
     </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>Can I read the books online without downloading them?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p> Yes, many of the free books available on our website can be read online</p>
+      </div>
+    </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>How can I download a free  book?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p>  To download a free book, simply click on the "Download" button next to the book you are interested in. You may need to sign up or log in to access the download link.</p>
+      </div>
+    </div>
   </div>
+  <style>
+    .faqcontainer {
+      width: 80%;
+      max-width: 600px;
+      border-radius: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-left:450px;
+      margin-bottom: 20px;
+    }
+
+   .faqheading{
+    color:darkred;;
+    margin-left:525px;
+    font-family: var(--ff-philosopher);
+    font-size:30px;
+   }
+
+    .questions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      padding: 10px;
+      background-color: hsl(0deg 100% 80.49%);
+      color: #fff;
+      border-radius: 5px;
+      transition: background-color 0.3s ease;
+      color: var(--sonic-silver);
+      font-weight: bold;
+      justify-content: space-between;
+    }
+
+    .questions:hover {
+      background-color:#FFB2A8;
+    }
+
+    .questions h4 {
+      margin: 0;
+    }
+
+    .answer {
+      display: none;
+      padding: 10px;
+      background-color:#FFB2A8;
+      border-left: 3px solid darkred;
+      border-radius: 5px;
+      margin-top: 5px;
+      color:var(--sonic-silver);
+    }
+    .answer:hover{
+      background-color:#FFB2A8;
+    }
+  </style>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const faqContainers = document.querySelectorAll('.faqcontainer');
+
+      faqContainers.forEach(container => {
+        const question = container.querySelector('.questions');
+        const answer = container.querySelector('.answer');
+        const icon = container.querySelector('.icon');
+
+        question.addEventListener('click', () => {
+          answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+          icon.classList.toggle('fa-caret-down');
+          icon.classList.toggle('fa-caret-up');
+        });
+      });
+    });
+  </script>
   <br /><br />
 
   <!--
diff --git a/thrilling-adventures.html b/thrilling-adventures.html
index 45975bc9e..0655f20c3 100644
--- a/thrilling-adventures.html
+++ b/thrilling-adventures.html
@@ -489,15 +489,15 @@ <h2 style="font-size: 20px;">Sonal K</h2>
 <!-- Testimonials -->
 
 
-  <div class="faq-section">
-    <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
+  <div class="faqsection">
+    <h1 class="faqheading" id="faqh1">Some Frequently Asked Questions</h1>
   </br>
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads work ?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>SwapReads is a global book exchange platform where users can create profiles,
           list the books they're willing to swap, and can find other users collections.
           When you find a book you're interested in, you can find suitable offers and can read that book. It's that
@@ -505,12 +505,12 @@ <h4>How does SwapReads work ?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How does SwapReads contribute to sustainability?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>
           By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
           reducing the demand for new book production. This helps minimize the environmental impact
@@ -519,28 +519,118 @@ <h4>How does SwapReads contribute to sustainability?</h4>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I join the SwapReads community?</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
           books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
       </div>
     </div>
 
-    <div class="faq-container">
-      <div class="question">
+    <div class="faqcontainer">
+      <div class="questions">
         <h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
         <i class="icon fa-solid fa-caret-down"></i>
       </div>
-      <div class="answers">
+      <div class="answer">
         <p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
           our servers. </p>
       </div>
     </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>Can I read the books online without downloading them?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p> Yes, many of the free books available on our website can be read online</p>
+      </div>
+    </div>
+    <div class="faqcontainer">
+      <div class="questions">
+        <h4>How can I download a free  book?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answer">
+        <p>  To download a free book, simply click on the "Download" button next to the book you are interested in. You may need to sign up or log in to access the download link.</p>
+      </div>
+    </div>
+    
   </div>
+  <style>
+    .faqcontainer {
+      width: 80%;
+      max-width: 600px;
+      border-radius: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-left:450px;
+      margin-bottom: 20px;
+    }
+
+   .faqheading{
+    color:darkred;;
+    margin-left:525px;
+    font-family: var(--ff-philosopher);
+    font-size:30px;
+   }
+
+    .questions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      padding: 10px;
+      background-color: hsl(0deg 100% 80.49%);
+      color: #fff;
+      border-radius: 5px;
+      transition: background-color 0.3s ease;
+      color: var(--sonic-silver);
+      font-weight: bold;
+      justify-content: space-between;
+    }
+
+    .questions:hover {
+      background-color:#FFB2A8;
+    }
+
+    .questions h4 {
+      margin: 0;
+    }
+
+    .answer {
+      display: none;
+      padding: 10px;
+      background-color:#FFB2A8;
+      border-left: 3px solid darkred;
+      border-radius: 5px;
+      margin-top: 5px;
+      color:var(--sonic-silver);
+    }
+    .answer:hover{
+      background-color:#FFB2A8;
+    }
+  </style>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const faqContainers = document.querySelectorAll('.faqcontainer');
+
+      faqContainers.forEach(container => {
+        const question = container.querySelector('.questions');
+        const answer = container.querySelector('.answer');
+        const icon = container.querySelector('.icon');
+
+        question.addEventListener('click', () => {
+          answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+          icon.classList.toggle('fa-caret-down');
+          icon.classList.toggle('fa-caret-up');
+        });
+      });
+    });
+  </script>
   <br /><br />
 
   <!--