@php
    $aboutContent = getContent('about.content', true);
    $aboutElements = getContent('about.element', false, orderById: true);
@endphp

<section class="about-section pt-120 pb-120 bg_img overlay--two"
    style="background-image: url('{{ frontendImage('about', @$aboutContent->data_values->background_image, '1600x680') }}');">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="section-header">
                    <h2 class="section-title text--base">{{ __(@$aboutContent->data_values->heading) }}</h2>
                    <p>{{ __(@$aboutContent->data_values->subheading) }}</p>
                </div>
                <div class="row mb-none-30">
                    @foreach (@$aboutElements ?? [] as $element)
                        <div class="col-xl-8 mb-30 wow fadeInUp" data-wow-duration="0.5s" data-wow-delay="0.3s">
                            <div class="info-card">
                                <div class="info-card__icon">
                                    @php echo @$element->data_values->icon @endphp
                                </div>
                                <div class="info-card__content">
                                    <h3 class="title">{{ __(@$element->data_values->title) }}</h3>
                                    <p class="mt-2">{{ __(@$element->data_values->description) }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="col-lg-6">
                <div class="abount-video text-center">
                    <a href="{{ __(@$aboutContent->data_values->youtube_embed_url) }}" data-rel="lightcase:myCollection"
                        class="video-button"><i class="las la-play"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>


@push('style-lib')
    <link rel="stylesheet" href="{{ asset($activeTemplateTrue . 'css/lightcase.css') }} ">
@endpush

@push('script-lib')
    <script src="{{ asset($activeTemplateTrue . 'js/vendor/lightcase.min.js') }}"></script>
    <script>
        $('a[data-rel^=lightcase]').lightcase();
    </script>
@endpush
