@php
    $aboutContent = getContent('about_us.content', true);
    $aboutElement = getContent('about_us.element', false, null, true);
@endphp
<section class="about-section my-120">
    <div class="container">
        <div class="row gy-4">
            <div class="col-xl-6">
                <div class="about-image">
                    <img src="{{ frontendImage('about_us', $aboutContent?->data_values?->image_one ?? '', '310x160') }}" alt="about" class="animate">
                    <img src="{{ frontendImage('about_us', $aboutContent?->data_values?->image_two ?? '', '315x285') }}" alt="about" class="animate">
                    <img src="{{ frontendImage('about_us', $aboutContent?->data_values?->image_three ?? '', '310x290') }}" alt="about" class="animate">
                    <img src="{{ frontendImage('about_us', $aboutContent?->data_values?->image_four ?? '', '310x165') }}" alt="about" class="animate">
                    <svg xmlns="http://www.w3.org/2000/svg" width="110" height="107" viewBox="0 0 110 107" fill="none" class="animate" data-direction="right">
                        <path d="M175 19.5C175 39.7436 167.981 59.3609 155.138 75.0094C142.296 90.6579 124.425 101.369 104.57 105.319C84.7158 109.268 64.106 106.211 46.2528 96.6681C28.3995 87.1254 14.4074 71.6874 6.66054 52.9848C-1.08634 34.2822 -2.10868 13.472 3.76772 -5.8999C9.64412 -25.2718 22.0557 -42.0068 38.8876 -53.2536C55.7195 -64.5003 75.9304 -69.5629 96.0765 -67.5787C116.223 -65.5944 135.057 -56.6862 149.372 -42.3719L128.351 -21.3512C118.9 -30.8024 106.464 -36.6841 93.1627 -37.9942C79.8611 -39.3043 66.5168 -35.9617 55.4034 -28.536C44.29 -21.1102 36.0952 -10.0608 32.2153 2.72957C28.3354 15.52 29.0104 29.26 34.1253 41.6085C39.2402 53.9571 48.4786 64.15 60.2663 70.4507C72.054 76.7513 85.6617 78.7699 98.7708 76.1623C111.88 73.5547 123.679 66.4824 132.159 56.1504C140.638 45.8184 145.272 32.8659 145.272 19.5H175Z" fill="currentColor"></path>
                    </svg>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="about-content ms-xxl-5">
                    <div class="section-title">
                        <span class="btn btn--base btn--section animate" data-direction="down">{{ __($aboutContent?->data_values?->heading ?? '') }}</span>
                        <h2 class="main-title animate" data-direction="down">{{ __($aboutContent?->data_values?->subheading ?? '') }}</h2>
                        <p class="sub-title animate" data-direction="down">{{ __($aboutContent?->data_values?->short_details ?? '') }}</p>
                    </div>
                    <div class="row gy-4 mt-4 mb-5">
                        @foreach ($aboutElement as $about)
                            <div class="col-sm-6 animate" data-direction="down">
                                <div class="about-content__item">
                                    <div class="d-flex align-items-center gap-3 mb-3">
                                        <img src="{{ frontendImage('about_us', $about?->data_values?->image ?? '', '60x60') }}" alt="img">
                                        <h5 class="mb-0">{{ __($about?->data_values?->title ?? '') }}</h5>
                                    </div>
                                    <p>{{ __($about?->data_values?->short_description ?? '') }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="animate" data-direction="up">
                        <a href="{{ url($aboutContent?->data_values?->button_url ?? '') }}" class="btn btn--base">{{ __($aboutContent?->data_values?->button_name ?? '') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>