From cc1b5a328b548dec4143f8307c56b6bb3d2c838e Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Sat, 10 Aug 2024 10:58:30 +0530
Subject: [PATCH] Faq enhancement

Changed light mode styles as well as dark mode styles
---
 css/faq.css    | 41 +++++++++++++++++++++++++++++++++++------
 pages/faq.html | 34 ++--------------------------------
 2 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/css/faq.css b/css/faq.css
index ce40020..3959ed1 100644
--- a/css/faq.css
+++ b/css/faq.css
@@ -83,37 +83,66 @@ body {
     background-color: #5e0b0b;
 }
 
+.arrow {
+    transition: transform 0.2s;
+}
+
+.rotate {
+    transform: rotate(180deg);
+}
 .faqBox {
-    background: #1c1c1c;
+    background: #180410f2;
     border-radius: 10px;
     margin: 20px;
     padding: 20px;
     transition: background 0.3s;
+    border: 1px solid #ddd;
+    margin: 10px 0;
+    padding: 10px;
+    border-radius: 5px;
 }
 
 .faqBox:hover {
-    background: #292929;
+    box-shadow: 2px 2px 12px 0 #f09819;
+    background: #2e202087;
+}
+.light-mode .faqBox{
+    background: rgba(156, 102, 110, 0);
+}
+.light-mode .faqBox:hover{
+    border-right: 2px orange ;
+    box-shadow: 2px 2px 12px 0 #f09819;
+    background: #e0dfdff4;
 }
-
 .faqBox .question {
-    font-size: 24px;
+    font-size: 1.3rem;
     font-weight: bold;
     margin-bottom: 10px;
     color: #f09819;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.faqBox .question:hover {
+    color: #f09819;
 }
 
 .faqBox .answer {
     font-size: 18px;
     line-height: 1.5;
     color: #ddd;
+    display: none;
+    padding: 10px 0;
+}
+.light-mode .faqBox .answer{
+    color: rgb(32, 30, 30);
 }
-
 .footer {
     text-align: center;
     padding: 20px;
     position: relative;
     bottom: 0;
-    width: 100%;
     margin-top: 30px;
 }
 
diff --git a/pages/faq.html b/pages/faq.html
index 3f4b6d5..d23d095 100644
--- a/pages/faq.html
+++ b/pages/faq.html
@@ -19,37 +19,7 @@
         <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <style>
-        .faqBox {
-            border: 1px solid #ddd;
-            margin: 10px 0;
-            padding: 10px;
-            border-radius: 5px;
-            box-shadow: 7px 7px 20px 0 #f09819;
-        }
-
-        .question {
-            cursor: pointer;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .question:hover {
-            color: #f09819;
-        }
-
-        .answer {
-            display: none;
-            padding: 10px 0;
-        }
-
-        .arrow {
-            transition: transform 0.2s;
-        }
-
-        .rotate {
-            transform: rotate(180deg);
-        }
+        
 
     </style>
     <style>
@@ -206,7 +176,7 @@
         <a href="../index.html" class="back-button" aria-label="Back to Home">
             <img src="../assets/images/BackToHome Btn.png" style="width: 70px; height: 70px;" class="back" alt="Back to Home Button">
         </a>
-        <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 40px; color: #f09819; display: block;">
+        <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 40px; color: #f09819; display: block; margin: 1rem auto;">
             FAQ
         </h1>