Add FAQ Section on Book Page

assets/css/style.css

@@ -20,7 +20,7 @@ body {
 
 ::-webkit-scrollbar-thumb:hover {
   background: hsl(357, 37%, 62%);
-}
+} 
 .center-content {
   display: flex;
   flex-direction: column;
@@ -3238,6 +3238,10 @@ footer {
   font-family: var(--ff-philosopher);
 }
 
+#faqq{
+  font-size: 31px;
+}
+
 .faq-container {
   background-color: hsl(0deg 100% 80.49%);
   margin-bottom: 2rem;

books.html

@@ -962,6 +962,44 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
     </div>
   </div>
   <br /><br />
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+  const faqContainers = document.querySelectorAll('.faq-container');
+
+  faqContainers.forEach(faq => {
+    const question = faq.querySelector('.question');
+
+    question.addEventListener('click', () => {
+      const answers = faq.querySelector('.answers');
+
+      answers.classList.toggle('visible');
+
+      const icon = faq.querySelector('.icon');
+      icon.classList.toggle('fa-rotate-180');
+    });
+
+
+    const observerOptions = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+    };
+
+    const observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+          observer.unobserve(entry.target);
+        }
+      });
+    }, observerOptions);
+
+    observer.observe(faq);
+  });
+}); 
+
+
+  </script>
 
   <!--
     - #FOOTER
@@ -979,7 +1017,7 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
             possibilities!
           </p>
         </div>
-      </div>
+      </div> 
       <div class="foot-middle">
         <h2>Quick Links</h2>
         <ul>

index.html

@@ -5681,7 +5681,7 @@ <h2>Subscribe to Our Newsletter</h2>
 
     observer.observe(faq);
   });
-});
+}); 
 
 
   </script>
@@ -5909,8 +5909,7 @@ <h2 style="margin-left: 2rem; margin-top: 2.75rem;">Quick Links</h2>
         outline: none;
        }
 
-        .newsletter:hover {
-  // background: linear-gradient(hwb(357 68% 7%), #d26d6d);
+
 
 
 
@@ -5926,6 +5925,7 @@ <h2 style="margin-left: 2rem; margin-top: 2.75rem;">Quick Links</h2>
     .newsletter {
         padding: 20px;
     }
+  }
 </style>
 
 <!--<script>