Added FAQ Section

FAQ.css

@@ -0,0 +1,60 @@
+.faq-section {
+    width: 80%;
+    margin: 40px auto 0px;
+    padding: 20px;
+    background-color: #f4f4f9;
+    border-radius: 8px;
+}
+
+.faq-section h2 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #2c3e50;
+    font-size: x-large;
+    border-bottom: 2px solid blue;
+    padding-bottom: 20px;
+}
+
+.faq-item {
+    border-bottom: 1px solid #dcdde1;
+    padding: 15px 0;
+}
+
+.question {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    font-size: 1.1em;
+    font-weight: bold;
+    color: #2980b9;
+    align-items: center;
+    padding: 20px 38px;
+    padding-bottom: 11px;
+    border: none;
+}
+
+.question:hover{
+    background-color:rgb(209, 209, 236);
+    text-decoration: underline; 
+    transform: scale(1.05);
+}
+
+.question .icon {
+    font-size: 1.5em;
+    color: #2980b9;
+}
+
+.answer {
+    display: none;
+    margin: 10px 39px 9px;
+    font-size: 1.5em;
+    color: #7f8c8d;
+}
+
+.faq-item.active .answer {
+    display: block;
+}
+
+.faq-item.active .icon {
+    transform: rotate(45deg);
+}

FAQ.js

@@ -0,0 +1,10 @@
+function toggleAnswer(question) {
+    const faqItem = question.parentElement;
+
+    // Toggle the active class for this item
+    faqItem.classList.toggle("active");
+
+    // Update the icon (+ to x)
+    const icon = faqItem.querySelector(".icon");
+    icon.textContent = faqItem.classList.contains("active") ? "×" : "+";
+}

index.html

@@ -26,6 +26,8 @@
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+    <link rel="stylesheet" href="FAQ.css">
+    <script src="FAQ.js"></script>
     <title>Swasthya Point</title>
     <style>
         body {
@@ -761,6 +763,51 @@ <h3><a class="social-icon__link" href="https://tushargupta1504.github.io/Medical
             </div>
 
         </div>
+        <div class="faq-section">
+    <h2>Frequently Asked Questions</h2>
+    <div class="faq">
+        <div class="faq-item">
+            <div class="question" onclick="toggleAnswer(this)">
+                <h3>What services does the platform offer?</h3>
+                <span class="icon">+</span>
+            </div>
+            <div class="answer">
+                <p>We offer online medical consultations, reliable health information, access to the latest diagnostic tests, stress management consultancy, and more.</p>
+            </div>
+        </div>
+
+        <div class="faq-item">
+            <div class="question" onclick="toggleAnswer(this)">
+                <h3>How can I book a medical consultation?</h3>
+                <span class="icon">+</span>
+            </div>
+            <div class="answer">
+                <p>You can easily book a consultation by signing up on our platform, selecting a specialist, and choosing an available time slot for the consultation.</p>
+            </div>
+        </div>
+
+        <div class="faq-item">
+            <div class="question" onclick="toggleAnswer(this)">
+                <h3>Are the consultations affordable?</h3>
+                <span class="icon">+</span>
+            </div>
+            <div class="answer">
+                <p>Yes, we offer a wide range of medical services at affordable prices to ensure accessibility for all.</p>
+            </div>
+        </div>
+
+        <div class="faq-item">
+            <div class="question" onclick="toggleAnswer(this)">
+                <h3>What medical fields are covered?</h3>
+                <span class="icon">+</span>
+            </div>
+            <div class="answer">
+                <p>We cover various medical fields, including Cardiology, Neurology, Hepatology, and many more.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
         </div>
         </div>
         </section>