@php
    $featureContent = getContent('feature.content', true);
    $featureElement = getContent('feature.element');
@endphp
<section class="features-section my-120">
    <div class="container">
        <div class="row gy-5">
            <div class="col-lg-6 align-self-center">
                <div class="features-content">
                    <div class="section-title">
                        <span class="btn btn--base btn--section animate" data-direction="left">{{ __($featureContent?->data_values?->heading ?? '') }}</span>
                        <h2 class="main-title animate" data-direction="left">{{ __($featureContent?->data_values?->subheading ?? '') }}t</h2>
                        <p class="sub-title animate" data-direction="left">{{ __($featureContent?->data_values?->short_details ?? '') }}</p>
                    </div>
                    <div class="feature-list mt-60 animate" data-direction="left">
                        <div class="indicator"></div>
                        @foreach ($featureElement as $feature)
                            <div class="feature-list__item active">
                                <h6>{{ __($feature?->data_values?->title ?? '') }}</h6>
                                <p>{{ __($feature?->data_values?->description ?? '') }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-lg-6  align-self-end">
                <div class="features-image">
                    @foreach ($featureElement as $feature)
                        <img src="{{ frontendImage('feature', $feature?->data_values?->image ?? '', '640x805') }}" alt="feature image" class="{{ $loop->first ? 'active' : '' }}">
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>