@php
    $featureSteps = $feature->moreRelatedData ?? null;
@endphp
<section class="pt-120 pb-120">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 order-lg-1 order-2">
                <div class="row mb-none-30">
                    <div class="col-lg-6 mb-30">
                        <div class="row mb-none-30">
                            <div class="col-lg-12 col-md-6 mb-30 wow fadeInUp" data-wow-duration="0.5s"
                                data-wow-delay="0.3s">
                                <div class="feature-card hover--effect-1">
                                    <div class="feature-card__icon">
                                        @if (!empty($featureSteps[0]->image) && Storage::exists($featureSteps[0]->image))
                                            <img src="{{ asset(Storage::url($featureSteps[0]->image)) }}"
                                                alt="image" />
                                        @else
                                            <img src="{{ asset('frontend/assets/images/icon/feature/1.png') }}"
                                                alt="image" />
                                        @endif
                                    </div>
                                    <div class="feature-card__content">
                                        <h3 class="feature-title">{{ $featureSteps[0]->title ?? 'Safe Service' }}</h3>
                                        <p>
                                            {{ $featureSteps[0]->sub_title ?? 'Nulla ultricies in nulla ac efficitur. In vel neque arcu. Donec quis' }}
                                        </p>
                                    </div>
                                </div>
                                <!-- feature-card end -->
                            </div>
                            <!-- feature-card end -->
                            <div class="col-lg-12 col-md-6 mb-30 wow fadeInUp" data-wow-duration="0.5s"
                                data-wow-delay="0.5s">
                                <div class="feature-card hover--effect-1">
                                    <div class="feature-card__icon">
                                        @if (!empty($featureSteps[2]->image) && Storage::exists($featureSteps[2]->image))
                                            <img src="{{ asset(Storage::url($featureSteps[2]->image)) }}"
                                                alt="image" />
                                        @else
                                            <img src="{{ asset('frontend/assets/images/icon/feature/3.png') }}"
                                                alt="image" />
                                        @endif
                                    </div>
                                    <div class="feature-card__content">
                                        <h3 class="feature-title">{{ $featureSteps[2]->title ?? 'Network' }}</h3>
                                        <p>
                                            {{ $featureSteps[2]->sub_title ?? 'Nulla ultricies in nulla ac efficitur. In vel neque arcu. Donec quis' }}
                                        </p>
                                    </div>
                                </div>
                                <!-- feature-card end -->
                            </div>
                            <!-- feature-card end -->
                        </div>
                    </div>
                    <div class="col-lg-6 mb-30 mt-lg-5">
                        <div class="row mb-none-30">
                            <div class="col-lg-12 col-md-6 mb-30 wow fadeInUp" data-wow-duration="0.5s"
                                data-wow-delay="0.3s">
                                <div class="feature-card hover--effect-1">
                                    <div class="feature-card__icon">
                                        @if (!empty($featureSteps[1]->image) && Storage::exists($featureSteps[1]->image))
                                            <img src="{{ asset(Storage::url($featureSteps[1]->image)) }}"
                                                alt="image" />
                                        @else
                                            <img src="{{ asset('frontend/assets/images/icon/feature/2.png') }}"
                                                alt="image" />
                                        @endif
                                    </div>
                                    <div class="feature-card__content">
                                        <h3 class="feature-title">{{ $featureSteps[1]->title ?? 'Security' }}</h3>
                                        <p>
                                            {{ $featureSteps[1]->sub_title ?? 'Nulla ultricies in nulla ac efficitur. In vel neque arcu. Donec quis' }}
                                        </p>
                                    </div>
                                </div>
                                <!-- feature-card end -->
                            </div>
                            <!-- feature-card end -->
                            <div class="col-lg-12 col-md-6 mb-30 wow fadeInUp" data-wow-duration="0.5s"
                                data-wow-delay="0.5s">
                                <div class="feature-card hover--effect-1">
                                    <div class="feature-card__icon">
                                        @if (!empty($featureSteps[3]->image) && Storage::exists($featureSteps[3]->image))
                                            <img src="{{ asset(Storage::url($featureSteps[3]->image)) }}"
                                                alt="image" />
                                        @else
                                            <img src="{{ asset('frontend/assets/images/icon/feature/4.png') }}"
                                                alt="image" />
                                        @endif
                                    </div>
                                    <div class="feature-card__content">
                                        <h3 class="feature-title">{{ $featureSteps[3]->title ?? 'Support' }}</h3>
                                        <p>
                                            {{ $featureSteps[3]->sub_title ?? 'Nulla ultricies in nulla ac efficitur. In vel neque arcu. Donec quis' }}
                                        </p>
                                    </div>
                                </div>
                                <!-- feature-card end -->
                            </div>
                            <!-- feature-card end -->
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 order-lg-2 order-1 text-lg-left text-center wow fadeInRight" data-wow-duration="0.5s"
                data-wow-delay="0.5s">
                <div class="section-header">
                    <span class="section-sub-title">{{ $feature->sub_title ?? 'An Exhaustive list of' }}</span>
                    <h2 class="section-title">{{ $feature->title ?? 'Our features.' }}</h2>
                    <div class="description_box text-white">
                        {!! $feature->description ??
                            '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, elit quis vehicula interdum, sem metus iaculis sapien, sed bibendum lectus augue eu metus.</p>' !!}
                    </div>
                    <a href="{{ $feature->value ?? route('home') }}"
                        class="d-flex align-items-center mt-3 justify-content-lg-start justify-content-center">Show all
                        features<i class="las la-angle-double-right text-danger"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>