diff --git a/index.html b/index.html
index b5cd982..d364306 100644
--- a/index.html
+++ b/index.html
@@ -568,8 +568,11 @@
       border: 1px solid #ccc;
       border-radius: 10px;
       overflow: hidden;
+      transition: background-color 0.3s ease;
+    }
+    .faq:hover {
+      background-color: #f0f8ff; /* Slight hover effect for FAQs */
     }
-
     .faq-question {
       background-color: #e7ffe7;
       color: #333;
@@ -581,12 +584,14 @@
       cursor: pointer;
       font-size: 16px;
       font-weight: 600;
-
       display: flex;
       justify-content: space-between;
       align-items: center;
+      transition: background-color 0.3s ease;
+    }
+    .faq-question:hover {
+      background-color: #d5f0d5; /* Lighter green on hover */
     }
-
     .faq-question::after {
       content: '';
       display: inline-block;
@@ -602,20 +607,16 @@
     }
 
     .faq.active .faq-question::after {
-      border-top: none;
-      border-bottom: 8px solid #333;
-      /* Upward pointing wide "V" */
+      transform: rotate(180deg);
     }
 
     .faq-answer {
-      max-height: 0;
-      /* Initially hidden */
-      overflow: hidden;
-      /* Hide content when not visible */
+      opacity: 0;
+      max-height: 0; /* Initially hidden */
+      overflow: hidden; /* Hide content when not visible */
       padding: 0 10px;
       background-color: #fff;
-      transition: max-height 0.3s ease;
-      /* Smooth transition */
+      transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition */
       border-top: 1px solid #ccc;
     }
 
@@ -624,12 +625,15 @@
     }
 
     .faq.active .faq-answer {
+      opacity: 1;
       max-height: 200px;
       /* Set to a sufficient height to display content */
       padding: 10px;
       /* Adds padding when expanded */
     }
-
+    .faq.active .faq-answer p {
+      transition: opacity 0.3s ease-in-out;
+    }
     /* Back to Top Button Styles */
     #backToTopBtn {
       position: fixed;
@@ -1144,30 +1148,28 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
   </script>
 
 
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const faqButtons = document.querySelectorAll('.faq-question');
+ <script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const faqButtons = document.querySelectorAll('.faq-question');
 
-      faqButtons.forEach(button => {
-        button.addEventListener('click', function () {
-          const faq = button.parentElement;
-          const answer = faq.querySelector('.faq-answer');
+    faqButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const faq = button.parentElement;
+            const answer = faq.querySelector('.faq-answer');
 
-          // Toggle active class
-          faq.classList.toggle('active');
+            // Toggle active class
+            faq.classList.toggle('active');
 
-          // Control the max-height for slide effect
-          if (faq.classList.contains('active')) {
-            answer.style.maxHeight = answer.scrollHeight + 'px'; // Set the height based on content
-          } else {
-            answer.style.maxHeight = null; // Remove max-height to hide
-          }
+            // Control the max-height for slide effect
+            if (faq.classList.contains('active')) {
+                answer.style.maxHeight = answer.scrollHeight + 'px'; // Set height based on content
+            } else {
+                answer.style.maxHeight = '0'; // Set height to zero to collapse
+            }
         });
-      });
     });
-
-
-  </script>
+});
+</script>
 
   <script>
     //enabling the Dark mode toggle button added
@@ -1257,4 +1259,4 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
 
 </body>
 
-</html>
\ No newline at end of file
+</html>