<div class="container p-4 context-main-bg my-4">
    <h1 class="mb-4">Frequently Asked Questions</h1>
    <hr>

    <!-- Table of Contents -->
    <div class="mb-5">
        <h2 class="h4">Table of Contents</h2>
        <ul class="list-unstyled">
            <li><a href="#question1" class="text-decoration-none context-main">Does this work on mobile?</a></li>
            <li><a href="#question2" class="text-decoration-none context-main">Does this work on Mac/PC/Linux?</a></li>
            <li><a href="#question3" class="text-decoration-none context-main">How do I use the extension on my mobile device?</a></li>
            <li><a href="#question4" class="text-decoration-none context-main">How do I add this to my phone like an app?</a></li>
        </ul>
    </div>

    <!-- Accordion for Questions -->
    <div class="accordion" id="faqAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header context-second-bg" id="heading1">
                <button class="accordion-button context-main context-main-bg" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
                    Does this work on mobile?
                </button>
            </h2>
            <div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#faqAccordion">
                <div class="ml-5 accordion-body context-main context-main-bg" id="question1">
                    Yes, this works seamlessly on mobile devices.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header context-main context-second-bg" id="heading2">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                    Does this work on Mac/PC/Linux?
                </button>
            </h2>
            <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#faqAccordion">
                <div class="accordion-body context-main context-main-bg" id="question2">
                    Yes, it is compatible with Mac, PC, and Linux platforms.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header context-main context-second-bg" id="heading3">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                    How do I use the extension on my mobile device?
                </button>
            </h2>
            <div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#faqAccordion">
                <div class="accordion-body context-main context-main-bg" id="question3">
                    To use the extension on mobile, open your browser, install the extension, and follow the setup instructions.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header context-main context-second-bg" id="heading4">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
                    How do I add this to my phone like an app?
                </button>
            </h2>
            <div id="collapse4" class="accordion-collapse collapse" aria-labelledby="heading4" data-bs-parent="#faqAccordion">
                <div class="accordion-body context-main context-main-bg" id="question4">
                    You can add it to your phone by installing the app or creating a shortcut from your browser to your home screen.
                </div>
            </div>
        </div>
    </div>
</div>