@if ($services)
    <div>
        <section class="ftco-section bg-light ftco-no-pt">
            @php
                $numberOfColumns = 3;
                $bootstrapColWidth = 12 / $numberOfColumns;

                $fontAwesomeIcons = [
                    'flaticon-tax',
                    'flaticon-wealth',
                    'flaticon-loan',
                    'flaticon-budget',
                ];

                $arrayChunks = array_chunk($services, $numberOfColumns);
            @endphp


            <div class="container">
                @foreach ($arrayChunks as $items)
                <div class="row">
                    @foreach ($items as $item)
                        <div
                            class="col-md-{{ $bootstrapColWidth }} col-lg-{{ $bootstrapColWidth }} d-flex services align-self-stretch px-4 ftco-animate">
                            <div class="d-block">
                                <div class="icon d-flex mr-2">
                                    <span
                                        class="{{ $fontAwesomeIcons[random_int(0, count($fontAwesomeIcons) - 1)] }}"></span>
                                </div>
                                <div class="media-body">
                                    <h3 class="heading ml-5">{{ $item['service_name'] }}</h3>
                                    <p class="ml-5">{{ $item['service_description'] }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                @endforeach
            </div>
        </section>
    </div>
@endif