<div class="faq-section">
    <div class="faq-text-col">
        <h2>{{ $applynowInfo->faq_title }}</h2>
    </div>
    <div class="faq-items-col">
        @foreach ($applynowInfo->faq_items as $item)
            <div class="faq-item">
                <div class="faq-header">
                    <span><span class="faq-number"> {{ $loop->iteration }}</span> {{ $item['question'] }}</span>
                    <i class="fas fa-chevron-down"></i>
                </div>

                <div class="faq-body">
                    <p>{{ $item['answer'] }}</p>
                </div>
            </div>
        @endforeach
            {{-- <div class="faq-item">
            <div class="faq-header">
                <span><span class="faq-number">02</span> Lorem ipsum lorem ipsum lorem ipsum ?</span>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="faq-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-header">
                <span><span class="faq-number">03</span> Lorem ipsum lorem ipsum lorem ipsum ?</span>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="faq-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-header">
                <span><span class="faq-number">04</span> Lorem ipsum lorem ipsum lorem ipsum ?</span>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="faq-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-header">
                <span><span class="faq-number">05</span> Lorem ipsum lorem ipsum lorem ipsum ?</span>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="faq-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-header">
                <span><span class="faq-number">06</span> Lorem ipsum lorem ipsum lorem ipsum ?</span>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="faq-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-header">
                <span><span class="faq-number">07</span> Lorem ipsum lorem ipsum lorem ipsum ?</span>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="faq-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
            </div>
        </div> --}}
    </div>
</div>

<!-- Footer Text Section -->
@if ($applynowInfo->text)
    <div class="apply-text-section">
        <p>{{ $applynowInfo->text }}</p>
    </div>
@endif
<style>
    /* FAQ Section */
    .faq-section {
        background-color: #ededed;
        padding: 70px;
        box-sizing: border-box;
        display: flex;
        gap: 40px;
        align-items: center;
    }

    .faq-text-col {
        flex: 0.8;
        padding-top: 20px;
        margin-top:20%;

    }

    .faq-text-col h2 {
        font-size: 1.8rem;
        color: #1e8dd2;
        font-weight: 700;
    }

    .faq-items-col {
        flex: 1.2;
        /* FAQ items column takes more space */
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .faq-item {
        background-color: #1e8dd2;
        /* Blue background for FAQ item */
        color: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .faq-item:hover {
        background-color: #0056b3;
        /* Darker blue on hover */
    }

    .faq-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: 600;
    }

    .faq-number {
        background-color: rgba(255, 255, 255, 0.2);
        /* Semi-transparent white for number background */
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 15px;
        flex-shrink: 0;
    }

    .faq-header span:first-child {
        display: flex;
        align-items: center;
    }

    .faq-header .fas {
        /* Icon for dropdown */
        font-size: 1.2rem;
    }

    .faq-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0 20px;
    }
    .faq-body p{
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;

    }

    .faq-header i {
        transition: transform 0.3s ease;
    }

    .faq-item.active .faq-body {
        padding: 20px;
    }

    /* Footer Text */
    .apply-text-section {
        background-color: #f8f8f8;
        /* Light grey background */
        padding: 40px 70px 70px 70px;
        text-align: center;
        font-size: 0.9rem;
        color: #777;
        line-height: 1.6;
        box-sizing: border-box;
    }

    /* Enhanced responsive styles */
    @media (max-width: 1200px) {
        .faq-section {
            padding: 60px 50px;
            gap: 35px;
        }
        .faq-text-col h2 {
            font-size: 1.7rem;
        }
        .faq-header {
            font-size: 15px;
        }
        .apply-text-section {
            padding: 35px 50px 60px 50px;
        }
    }

    @media (max-width: 1024px) {
        .faq-section,
        .apply-text-section {
            padding-left: 40px;
            padding-right: 40px;
        }

        .faq-section {
            flex-direction: column;
            /* Stack FAQ columns */
            gap: 30px;
            padding: 50px 40px;
        }

        .faq-text-col,
        .faq-items-col {
            flex: none;
            width: 100%;
            padding-top: 0;
        }

        .faq-text-col h2 {
            text-align: center;
            font-size: 1.6rem;
        }
        .faq-text-col {
            margin-top: 0;
        }
        .apply-text-section {
            padding: 30px 40px 50px 40px;
        }
    }

    @media (max-width: 900px) {
        .faq-section {
            padding: 40px 30px;
            gap: 25px;
        }
        .faq-text-col h2 {
            font-size: 1.5rem;
        }
        .faq-items-col {
            gap: 12px;
        }
        .faq-header {
            font-size: 14px;
            padding: 12px 18px;
        }
        .faq-number {
            width: 28px;
            height: 28px;
            margin-right: 12px;
        }
        .apply-text-section {
            padding: 25px 30px 40px 30px;
            font-size: 0.85rem;
        }
    }

    @media (max-width: 768px) {
        .faq-section,
        .footer-text-section {
            padding-left: 20px;
            padding-right: 20px;
        }
        .faq-section {
            padding: 30px 20px;
            gap: 20px;
        }
        .faq-text-col{
            margin-top:0;
        }
        .faq-text-col h2 {
            font-size: 1.4rem;
        }
        .faq-item {
            font-size: 0.9rem;
        }

        .faq-header {
            padding: 12px 15px;
            font-size: 13px;
        }

        .faq-number {
            width: 25px;
            height: 25px;
            font-size: 0.9em;
            margin-right: 10px;
        }

        .faq-header .fas {
            font-size: 1rem;
        }

        .faq-body p {
            font-size: 13px;
            line-height: 1.4;
        }

        .faq-item.active .faq-body {
            padding: 15px;
        }

        .apply-text-section {
            padding-left: 20px;
            padding-right: 20px;
            font-size: 0.8em;
            padding: 20px 20px 30px 20px;
        }
    }

    @media (max-width: 600px) {
        .faq-section {
            padding: 25px 15px;
            gap: 18px;
        }
        .faq-text-col h2 {
            font-size: 1.3rem;
        }
        .faq-header {
            padding: 10px 12px;
            font-size: 12px;
        }
        .faq-number {
            width: 22px;
            height: 22px;
            font-size: 0.8em;
            margin-right: 8px;
        }
        .faq-header .fas {
            font-size: 0.9rem;
        }
        .faq-body p {
            font-size: 12px;
            line-height: 1.3;
        }
        .faq-item.active .faq-body {
            padding: 12px;
        }
        .apply-text-section {
            padding: 18px 15px 25px 15px;
            font-size: 0.75rem;
        }
    }

    @media (max-width: 480px) {
        .faq-section {
            padding: 20px 10px;
            gap: 15px;
        }
        .faq-text-col h2 {
            font-size: 1.2rem;
        }
        .faq-header {
            padding: 8px 10px;
            font-size: 11px;
        }
        .faq-number {
            width: 20px;
            height: 20px;
            font-size: 0.75em;
            margin-right: 6px;
        }
        .faq-header .fas {
            font-size: 0.8rem;
        }
        .faq-body p {
            font-size: 11px;
            line-height: 1.2;
        }
        .faq-item.active .faq-body {
            padding: 10px;
        }
        .apply-text-section {
            padding: 15px 10px 20px 10px;
            font-size: 0.7rem;
        }
    }

    @media (max-width: 360px) {
        .faq-section {
            padding: 15px 8px;
            gap: 12px;
        }
        .faq-text-col h2 {
            font-size: 1.1rem;
        }
        .faq-header {
            padding: 6px 8px;
            font-size: 10px;
        }
        .faq-number {
            width: 18px;
            height: 18px;
            font-size: 0.7em;
            margin-right: 5px;
        }
        .faq-header .fas {
            font-size: 0.75rem;
        }
        .faq-body p {
            font-size: 10px;
            line-height: 1.1;
        }
        .faq-item.active .faq-body {
            padding: 8px;
        }
        .apply-text-section {
            padding: 12px 8px 18px 8px;
            font-size: 0.65rem;
        }
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const faqItems = document.querySelectorAll('.faq-item');

        faqItems.forEach(item => {
            const header = item.querySelector('.faq-header');
            const body = item.querySelector('.faq-body');
            const chevron = item.querySelector('.faq-header i');

            // Add error checking to ensure elements exist
            if (!header || !body || !chevron) {
                console.warn('FAQ elements not found, skipping...');
                return;
            }

            header.addEventListener('click', function() {
                // Toggle the active class on the FAQ item
                const isActive = item.classList.contains('active');

                // Close all other FAQ items
                faqItems.forEach(otherItem => {
                    const otherBody = otherItem.querySelector('.faq-body');
                    const otherChevron = otherItem.querySelector('.faq-header i');

                    // Add error checking for other items too
                    if (otherBody && otherChevron) {
                        otherItem.classList.remove('active');
                        otherBody.style.maxHeight = '0';
                        otherChevron.style.transform = 'rotate(0deg)';
                    }
                });

                // Toggle current item
                if (!isActive) {
                    item.classList.add('active');
                    body.style.maxHeight = body.scrollHeight + 'px';
                    chevron.style.transform = 'rotate(180deg)';
                } else {
                    item.classList.remove('active');
                    body.style.maxHeight = '0';
                    chevron.style.transform = 'rotate(0deg)';
                }
            });
        });
    });
</script>
