I have made changes in FAQ section

index.html

@@ -387,8 +387,7 @@ <h3>Wireless Gaming Headset</h3>
 
         <!-- Gaming Chair Section -->
         <div class="row">
-            <div class="col-1" data-aos="fade-right">
-                <h2 class="card-heading">Secretlab Omega</h2>
+            <div class="col-1" class="card-heading">Secretlab Omega</h2>
                 <h3>Ergonomic Gaming Chair</h3>
                 <p>(Adjustable)</p>
                 <div class="price">
@@ -458,7 +457,8 @@ <h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>
                 </div>
             </div>
         </div>
-    </section>
+    </section>data-aos="fade-right">
+                <h2 
 
     <!-- testimonial -->
 

style.css

@@ -1662,24 +1662,42 @@ button {
 }
 
 #faq {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding-top: 100px;
 }
 
 .faq-container {
+
   max-width: 800px;
   margin: 40px auto;
   padding: 20px;
   background-color: rgb(71, 61, 61);
   border: 1px solid #ddd;
   border-radius: 10px;
   box-shadow: 2 10px 8px rgba(255, 254, 254, 0.1);
+  background: linear-gradient(to right, #d72e7b, #f2994a);
 }
 
 .faq-title {
   text-align: center;
+
+
   font-size: 1.8em;
-  color: #ffffff;
+  color: #000;
   margin-bottom: 20px;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+
+
+
+  /* Text shadow */
+  text-shadow: 5px 5px 9px #fcfbfb;
+
+  /* Add padding and display properties */
+  display: inline-block;
+  padding: 10px 20px;
+  border-radius: 5px;
 }
 
 .faq {
@@ -1693,7 +1711,7 @@ button {
 .faq-question {
   padding: 15px;
   font-size: 1.2em;
-  background-color: #f6763f;
+  background-color: #2e1104;
   color: #fff;
   border: none;
   border-radius: 5px;
@@ -1706,7 +1724,7 @@ button {
 }
 
 .faq-question:hover {
-  background-color: #ff6b6b;
+  background-color: #450e0e;
 }
 
 .faq-answer {
@@ -1740,6 +1758,28 @@ button {
   transform: rotate(225deg);
 }
 
+
+/* hover effect */
+.faq:hover {
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
+  transform: scale(1.02); /* Slightly increases the size */
+  transition: all 0.3s ease; /* Smooth transition */
+}
+
+.faq-question:hover {
+  background-color: #450e0e; /* Change background color */
+  color: #fff; /* Keeps the text color consistent */
+}
+
+.faq-answer:hover {
+  background-color: #ffd1a1; /* Slightly darker background on hover */
+  border-left-color: #ff6b6b; /* Changes border color */
+}
+
+
+
+
+
 /* Body styles for consistency */
 #review-body {
   text-align: center;