@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>