@extends('front.layout.app')
@section('content')
    <section class="innerbanner">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Our Services</h2>
                </div>
            </div>
        </div>
    </section>
    @foreach($services as $index => $service)
        <section class="@if($index % 2 == 0) about-sec @else partner-sec @endif about-page services{{$index+1}}">
            <div class="container">
                <div class="row align-items-center">
                    @if($index % 2 == 0)
                        <div class="col-md-6" data-aos="fade-right" data-duration="3000">
                            <figure class="about-img">
                                <img
                                    src="{{ $service->image ? asset('uploads/services/'.$service->image) : asset('uploads/defaults/no-image.jpg') }}"
                                    class="img-fluid" alt="">

                            </figure>
                        </div>
                        <div class="col-md-6" data-aos="fade-left" data-duration="3000">
                            <div class="about-content">
                                <h3 class="subHead">{{$service->sub_header ?? ''}}</h3>
                                <h4 class="subText">{{$service->sub_text ?? ''}}</h4>
                                <h2 class="mainHead">{!! $service->header ?? '' !!}</h2>
                                <p>{!! $service->description ?? '' !!}</p>
                            </div>
                        </div>
                    @else
                        <div class="col-md-6" data-aos="fade-right" data-duration="3000">
                            <div class="partner-content">
                                <h3 class="subHead">{{$service->sub_header ?? ''}}</h3>
                                <h4 class="subText">{{$service->sub_text ?? ''}}</h4>
                                <h2 class="mainHead">{!! $service->header ?? '' !!}</h2>
                                <p>{!! $service->description ?? '' !!}</p>

                            </div>
                        </div>
                        <div class="col-md-6" data-aos="fade-left" data-duration="3000">
                            <figure class="partner-img">
                                <img
                                    src="{{ $service->image ? asset('uploads/services/'.$service->image) : asset('uploads/defaults/no-image.jpg') }}"
                                    class="img-fluid" alt="">
                            </figure>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endforeach

@endsection