I’m currently working on a Laravel project where I have a FAQ page with accordion text. The accordion functionality works perfectly fine on Android devices, but I’m encountering an issue specifically on iOS iPhones where the text inside the accordion items doesn’t wrap properly.

<section class="faq-section section-gap-bottom">
        <div class="w-layout-blockcontainer container w-container">

            <div class="accordion-wrapper">


                @if (count($questions) > 0)
                    @foreach ($questions as $key => $question)
                        <div data-delay="0" data-hover="false">
                            <div class="accordion-heading-block w-dropdown-toggle close-acc"
                                data-target=".dropdown-list-{{ $key }}">
                                <div class="accordion-image w-embed">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                        version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 363 363"
                                        style="enable-background: new 0 0 363 363" xml:space="preserve" width="100%"
                                        height="100%">
                                        <g>
                                            <path
                                                d="M277.73,94.123c0,10.997-8.006,17.685-13.852,22.593c-2.214,1.859-6.335,5.251-6.324,6.518  c0.04,4.97-3.956,8.939-8.927,8.939c-0.025,0-0.05,0-0.075,0c-4.936,0-8.958-3.847-8.998-8.792  c-0.079-9.747,7.034-15.584,12.75-20.383c4.485-3.766,7.426-6.416,7.426-8.841c0-4.909-3.994-8.903-8.903-8.903  c-4.911,0-8.906,3.994-8.906,8.903c0,4.971-4.029,9-9,9s-9-4.029-9-9c0-14.834,12.069-26.903,26.904-26.903  C265.661,67.253,277.73,79.288,277.73,94.123z M248.801,140.481c-4.971,0-8.801,4.029-8.801,9v0.069  c0,4.971,3.831,8.966,8.801,8.966s9-4.064,9-9.035S253.772,140.481,248.801,140.481z M67.392,203.174c-4.971,0-9,4.029-9,9  s4.029,9,9,9h0.75c4.971,0,9-4.029,9-9s-4.029-9-9-9H67.392z M98.671,203.174c-4.971,0-9,4.029-9,9s4.029,9,9,9h0.749  c4.971,0,9-4.029,9-9s-4.029-9-9-9H98.671z M363,59.425v101.301c0,23.985-19.232,43.448-43.217,43.448H203.066  c-2.282,0-4.161-0.013-5.733-0.046c-1.647-0.034-3.501-0.047-4.224,0.033c-0.753,0.5-2.599,2.191-4.378,3.83  c-0.705,0.649-1.503,1.363-2.364,2.149l-33.022,30.098c-2.634,2.403-6.531,3.025-9.793,1.587c-3.262-1.439-5.552-4.669-5.552-8.234  v-95.417H43.72c-14.062,0-25.72,11.523-25.72,25.583v101.301c0,14.061,11.659,25.116,25.72,25.116h130.374  c2.245,0,4.345,1.031,6.003,2.545L207,317.523v-85.539c0-4.971,4.029-9,9-9s9,4.029,9,9v105.938c0,3.565-2.04,6.747-5.303,8.186  c-1.167,0.515-2.339,0.718-3.566,0.718c-2.204,0-4.378-0.905-6.069-2.449l-39.457-36.204H43.72c-23.986,0-43.72-19.13-43.72-43.116  V163.757c0-23.985,19.734-43.583,43.72-43.583H138V59.425c0-23.986,19.885-43.251,43.871-43.251h137.913  C343.768,16.174,363,35.439,363,59.425z M345,59.425c0-14.061-11.157-25.251-25.217-25.251H181.871  C167.81,34.174,156,45.364,156,59.425v69.833v83.934l18.095-16.353c0.838-0.765,1.777-1.465,2.462-2.097  c8.263-7.614,10.377-8.831,21.155-8.609c1.47,0.031,3.221,0.042,5.354,0.042h116.717c14.06,0,25.217-11.388,25.217-25.448V59.425z"
                                                data-original="#000000" class="active-path" data-old_color="#000000"
                                                fill="#ffffff" />
                                        </g>
                                    </svg>
                                </div>
                                <div class="accordion-heading">
                                    <strong>
                                        @if (Session::get('lang') == 'en')
                                            {{ $question->question_en }}
                                        @else
                                            {{ $question->question_es }}
                                        @endif
                                    </strong>
                                </div>
                                <div data-is-ix2-target="1" class="accordion-icon" data-animation-type="lottie"
                                    data-src="{{ asset('js/plus-to-x-white.json') }}" data-loop="0" data-direction="1"
                                    data-autoplay="0" data-renderer="svg" data-default-duration="1" data-duration="0"
                                    data-ix2-initial-state="0"></div>
                            </div>
                            <nav class="accordion-body w-dropdown-list dropdown-list-{{ $key }}"
                                style=" background-color: white !important; display:none;">
                                <div class="accordion-body-content">
                                    @if (Session::get('lang') == 'en')
                                        {!! $question->answer_en !!}
                                    @else
                                        {!! $question->answer_es !!}
                                    @endif
                                </div>
                            </nav>
                        </div>
                    @endforeach
                @endif


            </div>
        </div>
    </section>

.accordion-heading-block {
    width: 100%;
    color: var(--white-smoke);
    /* white-space: break-spaces; */
    background-image: linear-gradient(
        275deg,
        #4450f2 0.45%,
        rgb(80 90 217) 89.25%
    );
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 50px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    min-height: 121px;
    border-radius: 10px 10px 10px 10px !important;
}

.accordion-heading {
    z-index: 2;
    position: relative;
    font-size: 16px;
}

.faq-section .accordion-heading strong {
    text-wrap: wrap;
}

Iphone version
enter image description here

Laptop version
enter image description here

Despite trying text-wrap: wrap; and white-space: normal; on .accordion-content, the issue persists on iOS iPhones.