<div class="rounded-lg shadow-lg overflow-hidden my-2 border border-gray-200">
            <input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
            <label for="{{ id_accordion }}" class="accordion flex items-center justify-between p-4 cursor-pointer transition-colors">
                <span class="text-lg font-semibold">{{ question }}</span>
                <svg class="w-6 h-6 transition-transform peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
            </label>
            <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-screen">
                <div class="p-4">
                    {% if description %} 
                    <p class="semigray font-normal leading-relaxed">{{ description }} </p>
                    {% endif %}
                </div>
            </div>
        </div>

        <style>

            body .accordion:hover {
                background-color: rgb(240, 240, 240) !important;
             }

            body.dark-mode .accordion:hover {
               background-color: #2e2e2e !important;
            }
        </style>

        

   

     

     


     
   




   
