From 22da46c6039acdaa3d106d9aa07238b7ec7c40ce Mon Sep 17 00:00:00 2001
From: Neeru <161798182+neeru24@users.noreply.github.com>
Date: Sat, 9 Nov 2024 00:16:42 +0530
Subject: [PATCH] Update faq.html

---
 faq.html | 1038 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 994 insertions(+), 44 deletions(-)

diff --git a/faq.html b/faq.html
index c5d156cb..48130912 100644
--- a/faq.html
+++ b/faq.html
@@ -25,45 +25,435 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
     <link rel="stylesheet" href="./assets/css/about(inlines).css" />
     <link rel="stylesheet" href="navbar.css">
-    <link rel="stylesheet" href="new.css">
 
+    <style>
+
+     .circle {
+        position: absolute;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        pointer-events: none;
+        background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 0.5));
+        transition: transform 0.1s, left 0.1s, top 0.1s;
+      }
+
+      .circle-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 9999;
+      }
+
+        /* FAQ Section Styles */
+
+        .faq-section {
+            max-width: 800px;
+            margin: 20px auto;
+            padding: 50px;
+            margin-left: 11.7% !important;
+            background-color: #6d9ed2;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        /* FAQ Title */
+        .faq-title {
+            width: 100%;
+            text-align: center;
+            font-size: 34px;
+            font-weight: bold;
+            color: white;
+            margin-bottom: 30px;
+            transition: color 0.3s ease, transform 0.3s ease;
+        }
+
+        /* FAQ Intro Paragraph */
+        .faq-intro p {
+            margin-top: 10px;
+            text-align: center;
+            font-size: 1.2rem;
+            color: white;
+            margin-bottom: 30px;
+        }
+
+        /* Search Bar */
+        .faq-search {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 20px;
+        }
+
+        .faq-search-input {
+            margin-top: 30px;
+            padding: 10px;
+            font-size: 1rem;
+            width: 40%;
+            border: 2px solid #007bff;
+            border-radius: 5px;
+            transition: border-color 0.3s ease;
+        }
+
+        .faq-search-btn {
+            margin-top: 30px;
+            padding: 10px 20px;
+            font-size: 1rem;
+            margin-left: 10px;
+            border: none;
+            border-radius: 5px;
+            background-color: #007bff;
+            color: #fff;
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.3s ease;
+        }
+
+        .faq-search-btn:hover {
+            background-color: #0056b3;
+            transform: scale(1.05);
+        }
+
+        /* FAQ Progress Styles */
+        .faq-container {
+            max-width: 1000px;
+            margin: 50px auto;
+            /* Increased margin for better visibility */
+            margin-top: 8%;
+            padding: 5%;
+            background-color: #007bff;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+
+
+        /* Dark mode styles */
+        @media (prefers-color-scheme: dark) {
+            .faq-item {
+                border-color: #0000ff;
+                /* Darker border for dark mode */
+                background-color: #eee7e7;
+                /* Darker background for dark mode */
+                color: #080808;
+                /* Light text color for dark mode */
+            }
+
+            .faq-item:hover {
+                border-color: white;
+                /* Light blue on hover for dark mode */
+            }
+
+            .faq-item.read {
+                background-color: white;
+                /* Slightly lighter background for read items in dark mode */
+            }
+        }
+
+        .accordion-button {
+            background-color: #fff;
+            font-size: 18px;
+            font-weight: bold;
+            color: #333;
+            border: 1px solid #ddd;
+            border-radius: 12px;
+            padding: 20px;
+            transition: all 0.3s ease;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .accordion-button:focus {
+            box-shadow: none;
+        }
+
+        .accordion-button:not(.collapsed) {
+            color: #1565C0;
+            background-color: #f7f7ff;
+        }
+
+        .accordion-button:not(.collapsed)::after {
+            /* content: '-'; */
+            font-size: 24px;
+            color: #1565C0;
+        }
+
+        .accordion-button.collapsed::after {
+            /* content: '+'; */
+            font-size: 24px;
+            color: #333;
+        }
+
+        .accordion-item {
+            border: none;
+            margin-bottom: 10px;
+        }
+
+        .accordion-header {
+            border-radius: 12px;
+        }
+
+        .accordion-body {
+            background-color: #007bff;
+            font-size: 16px;
+            color: #666;
+            border-radius: 12px;
+            padding: 20px;
+        }
+
+        /* Hover effects for better interaction */
+        .accordion-button:hover {
+            background-color: #eef2fa;
+            border-color: white;
+            color: #1565C0;
+        }
+
+        .accordion-body {
+            border-top: 1px solid #ddd;
+        }
+
+        /* Feedback Section */
+        .feedback-btn {
+            padding: 10px 20px;
+            margin: 5px;
+            font-size: 1rem;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            background-color: #007bff;
+            color: #fff;
+            transition: background-color 0.3s ease, transform 0.3s ease;
+        }
+
+        k .feedback-btn:hover {
+            background-color: #00b374;
+            transform: scale(1.05);
+        }
+
+        /* Feedback Form Section */
+        .faq-feedback {
+            max-width: 1000px;
+            margin: auto;
+            padding: 5%;
+            background-color: #f8f9fa;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Form Group */
+        .form-group {
+            margin-bottom: 20px;
+            text-align: left;
+        }
+
+        .form-group label {
+            font-size: 1rem;
+            color: white;
+            display: block;
+            margin-bottom: 8px;
+        }
+
+        .form-input {
+            width: 100%;
+            padding: 10px;
+            font-size: 1rem;
+            border: 1px solid #ced4da;
+            border-radius: 5px;
+            box-sizing: border-box;
+            transition: border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .form-input:focus {
+            /* color: white; */
+            border-color: #007bff;
+            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+            outline: none;
+        }
+
+        .form-input:hover {
+            border-color: #0056b3;
+        }
+
+        /* Submit Button */
+        .button-container {
+            display: flex;
+            justify-content: center;
+            margin-top: 30px;
+        }
+
+        .submit-btn {
+            padding: 10px 20px;
+            text-align: center;
+            font-size: 1.2rem;
+            border: none;
+            border-radius: 5px;
+            background-color: #007bff;
+            color: #fff;
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.3s ease;
+        }
+
+        .submit-btn:hover {
+            background-color: #0056b3;
+            transform: scale(1.05);
+        }
+
+        .submit-btn:focus {
+            outline: none;
+            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+        }
+
+        /* Mobile Responsive */
+        @media (max-width: 768px) {
+            .form-input {
+                width: 100%;
+            }
+        }
+
+        /* Toggle Button Styles */
+        .toggle-button {
+            padding: 0.5em 1em;
+            cursor: pointer;
+            border: none;
+            background-color: #0c0a0a;
+            color: #fff;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+        }
+
+        .toggle-button:hover {
+            background-color: #555;
+        }
+
+        .toggle-button.dark {
+            background-color: #f1f1f1;
+            color: #333;
+        }
+
+        .toggle-button.dark:hover {
+            background-color: #ddd;
+        }
+
+        .content {
+            padding: 2em;
+            text-align: center;
+        }
+
+        body.dark-mode {
+            background-color: #222;
+            color: #f1f1f1;
+        }
+
+        .photo {
+            filter: none;
+        }
+        .star-rating {
+  display: flex;
+  justify-content: center;
+  direction: rtl; /* This reverses the order of the stars */
+}
+
+.star-rating input {
+  display: none;
+  /* Hide the radio buttons */
+}
+
+.star-rating label {
+  font-size: 3em;
+  /* Star size */
+  color: grey;
+  /* Default star color */
+  cursor: pointer;
+}
+
+.star-rating input:checked~label {
+  color: gold;
+  /* Gold color for selected stars */
+}
+
+.star-rating label:hover,
+.star-rating label:hover~label {
+  color: gold;
+  /* Change color on hover */
+}
+    </style>
 </head>
 
 <body>
 
 
-    <div class="circle-container">
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-    </div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+  </div>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const coords = { x: 0, y: 0 };
+      const circles = document.querySelectorAll(".circle");
+
+      circles.forEach(function (circle) {
+        circle.x = 0;
+        circle.y = 0;
+      });
+
+      window.addEventListener("mousemove", function (e) {
+        coords.x = e.pageX;
+        coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+      });
+
+      function animateCircles() {
+        let x = coords.x;
+        let y = coords.y;
+
+        circles.forEach(function (circle, index) {
+          circle.style.left = `${x - 12}px`;
+          circle.style.top = `${y - 12}px`;
+          circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+
+          const nextCircle = circles[index + 1] || circles[0];
+          circle.x = x;
+          circle.y = y;
+
+          x += (nextCircle.x - x) * 0.3;
+          y += (nextCircle.y - y) * 0.3;
+        });
+
+        requestAnimationFrame(animateCircles);
+      }
+
+      animateCircles();
+    });
+
+  </script>
+  
     <div id="progressBar"></div>
 
     <header class="header-area">
@@ -148,7 +538,120 @@
                           <span>🌞</span>
                         </button>
                       </li>
+                      
+                      <script>
+                        // Function to initialize theme based on localStorage
+                        function initializeTheme() {
+                          const body = document.body;
+                          const toggleButton = document.getElementById('theme-toggle');
+                          const currentTheme = localStorage.getItem('theme');
+                      
+                          // Apply saved theme
+                          if (currentTheme === 'dark') {
+                            body.classList.add('dark-mode');
+                            toggleButton.classList.add('dark');
+                            toggleButton.querySelector('span').textContent = '🌙'; // Dark mode icon
+                          } else {
+                            toggleButton.querySelector('span').textContent = '🌞'; // Light mode icon
+                          }
+                        }
+                      
+                        // Call initializeTheme on page load
+                        document.addEventListener('DOMContentLoaded', () => {
+                          initializeTheme();
+                      
+                          const toggleButton = document.getElementById('theme-toggle');
+                          const body = document.body;
+                      
+                          // Event listener for theme toggle
+                          toggleButton.addEventListener('click', () => {
+                            body.classList.toggle('dark-mode');
+                            toggleButton.classList.toggle('dark');
+                      
+                            // Update icon and save theme
+                            if (body.classList.contains('dark-mode')) {
+                              toggleButton.querySelector('span').textContent = '🌙'; // Dark mode icon
+                              localStorage.setItem('theme', 'dark');
+                            } else {
+                              toggleButton.querySelector('span').textContent = '🌞'; // Light mode icon
+                              localStorage.setItem('theme', 'light');
+                            }
+                      
+                            loadShow(); // Call any additional function if needed
+                          });
+                        });
+                      
+                        // Function placeholder for additional operations (if needed)
+                        function loadShow() {
+                          // Additional actions can go here
+                        }
+                      </script>
+                      
+                    <style>
+                        h3 {
+
+                            color: #007bff;
+                            /* text-align: center; */
+                            margin-bottom: 18px;
+                            margin-left: 20px;
+                        }
+
+                        .toggle-button {
+                            padding: 0.5em 1em;
+                            cursor: pointer;
+                            border: none;
+                            background-color: #0c0a0a;
+                            color: #fff;
+                            border-radius: 5px;
+                            transition: background-color 0.3s;
+                        }
+
+                        .toggle-button:hover {
+                            background-color: #555;
+                        }
+
+                        .content {
+                            padding: 2em;
+                            text-align: center;
+                        }
+
+                        h1 {
+                            font-size: 2.5rem;
+                            color: whitesmoke;
+                            margin-top: 130px;
+                        }
+
+                        p {
+                            font-size: 1.2rem;
+                        }
+
+                        body.dark-mode {
+                            background-color: #222;
+                            color: #f1f1f1;
+                            /* Change text color to light for dark mode */
+                        }
 
+                        .toggle-button.dark {
+                            background-color: #f1f1f1;
+                            /* Button background in dark mode */
+                            color: #333;
+                            /* Button text color in dark mode */
+                        }
+
+                        .toggle-button.dark:hover {
+                            background-color: #ddd;
+                            /* Button hover color in dark mode */
+                        }
+
+                        .images {
+                            display: flex;
+                            align-items: center;
+                        }
+
+                        /* img{
+                    margin-left:50px;
+                } */
+                    </style>
 
                     </nav>
 
@@ -203,12 +706,12 @@ <h3 class="faq-title">Frequently Asked Questions</h3>
                         how we can help you on your financial journey. Still have questions? Contact us or use our AI
                         chatbot for more assistance.</p>
                 </div>
-
+            
                 <div class="faq-search">
                     <input type="text" id="faq-search-input" style="color: #0c0a0a;" class="faq-search-input" placeholder="Type your question..." aria-label="Search FAQ" oninput="filterFAQs()">
                     <button class="faq-search-btn" onclick="filterFAQs()">Search</button>
                 </div>
-
+            
                 <div class="accordion" id="faqAccordion">
                     <div class="accordion-item">
                         <h2 class="accordion-header" id="headingOne">
@@ -224,7 +727,7 @@ <h2 class="accordion-header" id="headingOne">
                             </div>
                         </div>
                     </div>
-
+            
                     <div class="accordion-item">
                         <h2 class="accordion-header" id="headingTwo">
                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
@@ -239,7 +742,7 @@ <h2 class="accordion-header" id="headingTwo">
                             </div>
                         </div>
                     </div>
-
+            
                     <div class="accordion-item">
                         <h2 class="accordion-header" id="headingThree">
                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
@@ -254,7 +757,7 @@ <h2 class="accordion-header" id="headingThree">
                             </div>
                         </div>
                     </div>
-
+            
                     <div class="accordion-item">
                         <h2 class="accordion-header" id="headingFour">
                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
@@ -269,7 +772,7 @@ <h2 class="accordion-header" id="headingFour">
                             </div>
                         </div>
                     </div>
-
+            
                     <div class="accordion-item">
                         <h2 class="accordion-header" id="headingFive">
                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
@@ -285,7 +788,57 @@ <h2 class="accordion-header" id="headingFive">
                     </div>
                 </div>
             </div>
-</div>
+</div>            
+
+    <style>
+        .accordion-item {
+            background-color: #5776ff;
+        }
+
+        .accordion-button {
+            background: linear-gradient(135deg, #56ab2f, #a8e063, #b9f1b7);
+            color: #ffffff;
+            font-weight: bold;
+            padding: 15px;
+            border: none;
+            border-radius: 10px;
+            transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .accordion-button::before {
+            content: "";
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+            transition: opacity 0.3s ease;
+            opacity: 0;
+            border-radius: 10px;
+        }
+
+        .accordion-button:hover {
+            background: linear-gradient(135deg, #c8f8c2, #56ab2f, #a8e063);
+            transform: scale(1.03);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+        }
+
+        .accordion-button:focus {
+            outline: none;
+            border: 2px solid #ffffff;
+            box-shadow: 0 0 10px #4facfe, 0 0 20px #56ab2f;
+        }
+
+        .accordion-button:focus::before {
+            opacity: 1;
+            transform: rotate(45deg);
+        }
+    </style>
+
 
     <!-- Feedback Section -->
     <div class="faq-feedback">
@@ -315,17 +868,224 @@ <h3 class="faq-title">Submit Your Feedback or Ask a New Question</h3>
                 <label for="star2" title="2 stars">&#9733;</label>
                 <input type="radio" id="star1" name="rating" value="1" />
                 <label for="star1" title="1 stars">&#9733;</label>
-            </div>
+            </div>  
             <div class="button-container">
                 <button type="submit" class="submit-btn">Submit Feedback</button>
             </div>
         </form>
     </div>
 
+    <style>
+        /* Global body styles for dark theme */
+        body {
+            background-color: white;
+            /* Dark background */
+            color: #ffffff;
+            /* Light text color */
+            font-family: Arial, sans-serif;
+            /* Clean font */
+            margin: 0;
+            /* padding: 20px; */
+        }
+
+        /* FAQ Container styling */
+        .faq-section {
+            background-color: #007bff;
+            /* Darker container background */
+            border-radius: 10px;
+            padding: 40px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+            transition: transform 0.3s ease;
+            margin: 20px auto;
+        }
+
+        /* FAQ Item styles */
+        .accordion-button {
+            background-color: #1d45bd;
+            /* Darker background for buttons */
+            color: #ffffff;
+            /* White text */
+            border: 1px solid #4caf50;
+            /* Green border */
+            transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .accordion-button:hover {
+            background-color: white;
+            /* Slightly lighter on hover */
+            color: #007bff;
+            /* Light color on hover */
+            box-shadow: 0 0 20px rgba(76, 175, 80, 1);
+            /* Neon glow */
+        }
+
+        .accordion-item {
+            margin: 10px 0;
+            /* Spacing between items */
+        }
+
+        .accordion-body {
+            background-color: white;
+            /* Dark background for accordion body */
+            color: #007bff;
+            /* Light gray text for body */
+            border-radius: 5px;
+            padding: 15px;
+        }
+
+        /* Feedback section styles */
+        .faq-feedback {
+            border: 2px solid #4caf50;
+            /* Green border */
+            background: #007bff;
+            /* Dark gradient */
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            color: #ffffff;
+            max-width: 800px;
+
+            margin: 20px auto;
+            transition: transform 0.3s ease;
+        }
+
+        /* Title styling */
+        .faq-title {
+            margin-top: 5px;
+            margin-bottom: 35px;
+            font-size: 2.0em;
+            font-weight: bold;
+            text-align: center;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+            /* Neon glow */
+            margin-left: 0px;
+
+        }
+
+        /* Form input styles */
+        .form-input {
+            padding: 10px;
+            font-size: 1em;
+            border: 2px solid #0056b3;
+            border-radius: 5px;
+            outline: none;
+            background-color: white;
+            color: #ffffff;
+            transition: background-color 0.3s ease, border-color 0.3s ease;
+
+        }
+
+        /* New CSS to change label text color to white */
+        .form-group label {
+            color: #ffffff;
+            /* White color for labels */
+        }
+
+        .form-input:focus {
+            border-color: #4caf50;
+            /* Green border on focus */
+            background-color: rgb(0, 85, 160);
+            /* Slightly lighter background on focus */
+
+        }
+
+        /* Button styles */
+        .submit-btn {
+            background-color: white;
+            /* Green background */
+            color: #0000ff;
+            /* White text */
+            padding: 10px 15px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1.1em;
+            transition: background-color 0.3s ease;
+        }
+
+        .submit-btn:hover {
+            background-color: #0000ff;
+            color: white;
+        }
+
+        /* Search styles */
+        .faq-search {
+            display: flex;
+            justify-content: center;
+            margin: 20px 0;
+        }
+
+        .faq-search-input {
+            width: 70%;
+            /* Adjusted width */
+            padding: 10px;
+            border: 2px solid #ffffff80;
+            border-radius: 5px;
+            outline: none;
+            background-color: white;
+            /* Dark input field */
+            color: #ffffff;
+            /* Light text color */
+            transition: background-color 0.3s ease, border-color 0.3s ease;
+        }
+
+
+        .faq-search-btn {
+            background-color: white;
+            /* Green background */
+            color: #007bff;
+            /* White text */
+            border: none;
+            border-radius: 5px;
+            padding: 10px 15px;
+            margin-left: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        .faq-search-btn:hover {
+            background-color: #0000ff;
+            color: white;
+        }
+
+        /* Responsive styles */
+        @media (max-width: 768px) {
+            .faq-search {
+                flex-direction: column;
+                /* Stack elements on smaller screens */
+            }
+
+            .faq-search-input {
+                width: 100%;
+                /* Full width on small screens */
+                margin-bottom: 10px;
+            }
+        }
+    </style>
     </head>
 
     <body>
-\
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
+        <script>
+            function filterFAQs() {
+                const searchInput = document.getElementById('faq-search-input').value.toLowerCase();
+                const faqs = document.querySelectorAll('.accordion-item');
+        
+                faqs.forEach(faq => {
+                    const question = faq.querySelector('.accordion-button').textContent.toLowerCase();
+                    const answer = faq.querySelector('.accordion-body').textContent.toLowerCase();
+        
+                    // Display the FAQ item only if the search term matches either the question or answer
+                    if (question.includes(searchInput) || answer.includes(searchInput)) {
+                        faq.style.display = 'block';
+                    } else {
+                        faq.style.display = 'none';
+                    }
+                });
+            }
+        </script>
+        
     </body>
 
 
@@ -336,6 +1096,82 @@ <h3 class="faq-title">Submit Your Feedback or Ask a New Question</h3>
     </head>
 
     <body>
+        <style>
+            /* Progress bar styles */
+            /* .progress-container {
+            width: 100%;
+            background-color: #f3f3f3;
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 1000;
+        } */
+            /*         
+        .progress-bar {
+            height: 5px;
+            width: 0%;
+            background-color: #4caf50;
+            transition: width 0.3s;
+        } */
+
+            /* Footer styles */
+            .footer {
+                background-color: #007bff;
+                color: white;
+                padding: 40px 0;
+                text-align: center;
+                position: relative;
+                width: 100%;
+                margin: 0px;
+            }
+
+            .footer-container {
+                display: flex;
+                flex-direction: column;
+
+                justify-content: center;
+            }
+
+            .footer-container p {
+                margin: 5px 0;
+            }
+
+            .footer-links {
+                display: flex;
+                gap: 15px;
+                margin-top: 10px;
+            }
+
+            .footer-links a {
+                color: #4caf50;
+                text-decoration: none;
+                font-size: 14px;
+            }
+
+            .footer-links a:hover {
+                text-decoration: underline;
+            }
+
+            @media (min-width: 768px) {
+                .footer-container {
+                    flex-direction: row;
+                    justify-content: space-between;
+                    max-width: 1200px;
+                    /* margin: 0 auto; */
+                    /* padding: 0 20px; */
+                }
+
+                .footer-links {
+                    margin-top: 0;
+                }
+            }
+
+
+
+            .faq-section h2 {
+                margin-top: 30px;
+            }
+        </style>
         </head>
 
 </html>
@@ -509,6 +1345,95 @@ <h4 class="title custom-margin">Contact Us</h4>
     </footer>
 
 
+    <script>
+        // Function for the contributors section
+        const owner = 'ayush-that';
+        const repo = 'FinVeda';
+        const contributorsPerPage = 8;
+        let contributors = [];
+        let currentPage = 1;
+
+        async function fetchContributors() {
+            const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors`);
+            if (!response.ok) {
+                console.error('Failed to fetch contributors:', response.statusText);
+                return;
+            }
+            contributors = await response.json();
+            displayContributors();
+            createPaginationButtons();
+        }
+
+        function displayContributors() {
+            const container = document.getElementById('contributor-cards');
+            container.innerHTML = '';
+            const start = (currentPage - 1) * contributorsPerPage;
+            const end = start + contributorsPerPage;
+            const currentContributors = contributors.slice(start, end);
+
+            currentContributors.forEach(contributor => {
+                const card = document.createElement('div');
+                card.className = 'contributor-member';
+                card.setAttribute('data-tilt', '');
+
+                const img = document.createElement('img');
+                img.src = contributor.avatar_url;
+                img.alt = contributor.login;
+
+                const name = document.createElement('h3');
+                name.textContent = contributor.login;
+
+                const contributions = document.createElement('p');
+                contributions.textContent = `${contributor.contributions} contributions`;
+
+                const viewProfileButton = document.createElement("button");
+                viewProfileButton.textContent = "View Profile";
+                viewProfileButton.addEventListener("click", () => {
+                    window.open(contributor.html_url, "_blank");
+                });
+
+                card.appendChild(img);
+                card.appendChild(name);
+                card.appendChild(contributions);
+                container.appendChild(card);
+                card.appendChild(viewProfileButton);
+            });
+        }
+
+        function createPaginationButtons() {
+            const paginationContainer = document.getElementById('pagination');
+            paginationContainer.innerHTML = '';
+            const totalPages = Math.ceil(contributors.length / contributorsPerPage);
+
+            for (let i = 1; i <= totalPages; i++) {
+                const button = document.createElement('button');
+                button.textContent = i;
+                button.classList.add('pagination-button');
+                if (i === currentPage) {
+                    button.classList.add('active');
+                }
+                button.addEventListener('click', () => {
+                    currentPage = i;
+                    displayContributors();
+                    updatePaginationButtons();
+                });
+                paginationContainer.appendChild(button);
+            }
+        }
+
+        function updatePaginationButtons() {
+            const buttons = document.querySelectorAll('.pagination-button');
+            buttons.forEach(button => {
+                button.classList.remove('active');
+                if (parseInt(button.textContent) === currentPage) {
+                    button.classList.add('active');
+                }
+            });
+        }
+
+        fetchContributors();
+    </script>
+
 
     <div class="gtranslate_wrapper"></div>
 
@@ -516,9 +1441,34 @@ <h4 class="title custom-margin">Contact Us</h4>
     <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
     <a href="#" class="back-to-top"><i class="lni-chevron-up"></i></a>
 
+    <script src="./assets/js/about.js"></script>
+    <script src="./assets/js/subscribe.js"></script>
+    <script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
+    <script src="./assets/js/vendor/modernizr-3.7.1.min.js"></script>
+    <script src="./assets/js/popper.min.js"></script>
+    <script src="./assets/js/bootstrap.min.js"></script>
+    <script src="./assets/js/plugins.js"></script>
+    <script src="./assets/js/slick.min.js"></script>
+    <script src="./assets/js/ajax-contact.js"></script>
+    <script src="./assets/js/waypoints.min.js"></script>
+    <script src="./assets/js/jquery.counterup.min.js"></script>
+    <script src="./assets/js/jquery.magnific-popup.min.js"></script>
+    <script src="./assets/js/blogposts.js"></script>
+    <script src="./assets/js/jquery.easing.min.js"></script>
+    <script src="./assets/js/scrolling-nav.js"></script>
+    <script src="./assets/js/wow.min.js"></script>
+    <script src="./assets/js/particles.min.js"></script>
+    <script src="./assets/js/main.js"></script>
+    <script src="./assets/js/popup.js"></script>
+    <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
+    <script src="https://mediafiles.botpress.cloud/5e160793-5606-4412-ba4c-337e416f14fe/webchat/config.js"
+        defer></script>
+    <script defer src="./assets/js/arthsathi-style.js"></script>
+    <script src="./assets/js/botpress.js"></script>
+    <script src="./assets/js/blogmodals.js"></script>
+    <script src="./tools/smoothScroll.js"></script>
 
-    <script src="new.js" ></script>
     </head>
 </body>
 
-</html>
\ No newline at end of file
+</html>