Merge pull request #585 from saumyayadav25/user-saumya

faq arrow and smooth transition

index.html

@@ -644,8 +644,11 @@
       }
 
       .faq-question {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
         width: 100%;
-        padding: 15px;
+        padding: 10px;
         text-align: left;
         background-color: var(--ternary-color);
         border: none;
@@ -656,7 +659,17 @@
         outline: none;
         transition: background-color 0.3s ease;
       }
-
+      .arrow{
+        width:12px;
+        height:12px;
+        border:solid black;
+        border-width: 0 3px 3px 0;
+        transform: rotate(45deg);
+        transition: transform 0.3s ease;
+      }
+      [aria-expanded="true"] .arrow {
+        transform: rotate(-135deg); /* Rotation when expanded */
+      }
       .faq-question:hover {
         background-color: #e6e6e6;
       }
@@ -1108,6 +1121,7 @@ <h2 class="faq-heading">Frequently Asked Questions</h2>
         <div class="faq-item">
           <button class="faq-question" aria-expanded="false">
             Who is Lord Sri Krishna?
+            <span class="arrow"></span>
           </button>
           <div class="faq-answer">
             <p>
@@ -1120,6 +1134,7 @@ <h2 class="faq-heading">Frequently Asked Questions</h2>
         <div class="faq-item">
           <button class="faq-question" aria-expanded="false">
             What are the teachings of Sri Krishna in the Bhagavad Gita?
+            <span class="arrow"></span>
           </button>
           <div class="faq-answer">
             <p>
@@ -1132,6 +1147,7 @@ <h2 class="faq-heading">Frequently Asked Questions</h2>
         <div class="faq-item">
           <button class="faq-question" aria-expanded="false">
             What is the significance of the name ‘Krishna’?
+            <span class="arrow"></span>
           </button>
           <div class="faq-answer">
             <p>
@@ -1146,6 +1162,7 @@ <h2 class="faq-heading">Frequently Asked Questions</h2>
           <button class="faq-question" aria-expanded="false">
             How can we incorporate the teachings of Lord Krishna into our daily
             life?
+            <span class="arrow"></span>
           </button>
           <div class="faq-answer">
             <p>
@@ -1161,6 +1178,7 @@ <h2 class="faq-heading">Frequently Asked Questions</h2>
         <div class="faq-item">
           <button class="faq-question" aria-expanded="false">
             What is the significance of the Krishna Janmashtami festival?
+            <span class="arrow"></span>
           </button>
           <div class="faq-answer">
             <p>
@@ -1175,6 +1193,7 @@ <h2 class="faq-heading">Frequently Asked Questions</h2>
         <div class="faq-item">
           <button class="faq-question" aria-expanded="false">
             What is the concept of Krishna Leela?
+            <span class="arrow"></span>
           </button>
           <div class="faq-answer">
             <p>