From 7107f859340e0b30f77a882c74f74528135b60b9 Mon Sep 17 00:00:00 2001
From: AswaniBolisetti <aswanibolisetti@gmail.com>
Date: Wed, 30 Oct 2024 21:13:27 +0530
Subject: [PATCH] enhanced faq section

---
 index.html | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 74 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 746ee41..e182ca3 100644
--- a/index.html
+++ b/index.html
@@ -183,7 +183,80 @@
             align-items: center;
             text-align: center;
         }
-
+        #faq {
+        background-color: #f9f9f9;
+        padding: 3rem 0;
+    }
+
+    .faq-container {
+        max-width: 800px;
+        margin: auto;
+        padding: 2rem;
+        border-radius: 8px;
+    }
+
+    /* Heading styling */
+    #faq h2 {
+        text-align: center;
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 2rem;
+        color: #333;
+    }
+
+    /* FAQ item styling */
+    .faq-item {
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        margin-bottom: 1rem;
+        overflow: hidden;
+    }
+
+    /* Question button styling */
+    .faq-question {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        background-color: #f1f1f1;
+        padding: 1rem;
+        font-size: 1.25rem;
+        font-weight: 500;
+        color: #333;
+        cursor: pointer;
+        border: none;
+        outline: none;
+        transition: background-color 0.3s;
+    }
+
+    .faq-question:hover {
+        background-color: #e1e1e1;
+    }
+
+    /* Answer text styling */
+    .faq-answer {
+        padding: 1rem;
+        font-size: 1rem;
+        line-height: 1.6;
+        color: #555;
+        display: none;
+    }
+
+    /* Toggle icon styling */
+    .expand-toggle {
+        font-size: 1.5rem;
+        transition: transform 0.3s;
+    }
+
+    /* Toggle open state */
+    .faq-item.active .expand-toggle {
+        transform: rotate(45deg); /* Rotate the plus to form an "X" */
+    }
+
+    .faq-item.active .faq-answer {
+        display: block;
+    }
         #next,
         #prev {
             position: absolute;