@php
    $businessContent = getContent('business.content', true);
    $businessElement = getContent('business.element', orderById: true);
@endphp
<section class="perfect-business-section my-120">
    <div class="container">
        <div class="row gy-5">
            <div class="col-lg-6">
                <div class="section-title">
                    <span class="btn btn--base btn--section animate" data-direction="down">{{ __($businessContent?->data_values?->heading ?? '') }}</span>
                    <h2 class="main-title animate" data-direction="down">{{ __($businessContent?->data_values?->subheading ?? '') }}</h2>
                    <p class="sub-title animate" data-direction="down">{{ __($businessContent?->data_values?->short_details ?? '') }}</p>
                </div>
                <div class="business-card mt-60">
                    <div class="business-card__wrapper">
                        @foreach ($businessElement as $business)
                            <div class="business-card__item animate">
                                <img src="{{ frontendImage('business', $business?->data_values?->image ?? '', '60x60') }}" alt="business icon">
                                <h5>{{ __($business?->data_values?->title ?? '') }}</h5>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-lg-6 align-self-end">
                <div class="perfect-business__img">
                    <img src="{{ frontendImage('business', $businessContent?->data_values?->image ?? '', '620x675') }}" alt="perfect business" class="animate" data-direction="right">
                    <img src="{{ getImage(activeTemplate(true) . 'images/business/business-icon.png') }}" alt="perfect business" class="perfect-business-icon">
                    <div class="perfect-business-shape"></div>
                </div>
            </div>
        </div>
    </div>
</section>