Dark Mode Accordion (Finance/Banking)

<div class="max-w-3xl mx-auto p-4 sm:p-6 lg:p-8 bg-gray-900 dark:bg-gray-950 text-gray-100 min-h-screen">
  <h2 class="text-3xl font-bold text-center mb-8 text-blue-300 dark:text-blue-500">FAQs about Your Account</h2>

  <div class="space-y-4">

    <!-- Accordion Item 1 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">How do I check my account balance?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </summary>
      <div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        You can check your account balance by logging into your online banking portal, using our mobile app, or by visiting any of our ATM locations. Balances are updated in real-time.
      </div>
    </details>

    <!-- Accordion Item 2 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">What are the fees associated with my account?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </summary>
      <div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        Fees vary depending on your account type. Please refer to your account agreement for a detailed list of charges, or you can find a comprehensive fee schedule on our website under the 'Pricing' section.
      </div>
    </details>

    <!-- Accordion Item 3 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">How do I transfer funds between accounts?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </summary>
      <div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        You can easily transfer funds via our online banking platform or mobile app. Simply navigate to the 'Transfers' section, select your 'from' and 'to' accounts, enter the amount, and confirm the transaction.
      </div>
    </details>

    <!-- Accordion Item 4 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">Can I set up recurring payments?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </summary>
      <div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        Yes, our online banking system allows you to set up recurring payments for bills and transfers. Go to the 'Bill Pay' or 'Transfers' section and look for the option to schedule future or recurring transactions.
      </div>
    </details>

  </div>
</div>