@if($services->count() > 0)
    <!-- service-appoinment-area start -->
    <div class="rts-service-area bg-light rts-section-gap service-bg_shape">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="title-area text-center">
                        <span data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">@lang('frontend.our_services')</span>
                        <h3 class="title" data-sal-delay="250" data-sal="slide-up" data-sal-duration="800">@lang('frontend.our_services_slogan')</h3>
                    </div>
                </div>
            </div>
            <div class="row g-24 mt--5">
                @foreach($services as $service)
                    <div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 col-12" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <!-- single service area start -->
                    <div class="rts-single-service-one">
                        <div class="icon">
                            <img src="{{ $service->getFirstMediaUrl('service_icons') }}" alt="axela_service">
                        </div>
                            <h5 class="title">
                                {{$service->transname}}
                            </h5>
                        <p class="disc">
                            {{ strip_tags(substr($service->transtext, 0, 50)) }}
                        </p>
                        <a href="{{$service->appUrl}}" class="rts-read-more">@lang('frontend.learn_more')<i class="far fa-chevron-double-right"></i></a>
                    </div>
                    <!-- single service area end -->
                </div>
                @endforeach
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="appoinment-area-one mt--120 mt_sm--60">
                        <div class="row">
                            <div class="col-lg-6">
                                <!-- appoinment left area -->
                                <div class="appoinment-left">
                                    <div class="title-area">
                                            <span data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                                                @lang('frontend.get_in_touch')
                                            </span>
                                        <h3 class="title" data-sal-delay="250" data-sal="slide-up" data-sal-duration="800">
                                            @lang('frontend.plan_in_mind')
                                        </h3>
                                        <p class="disc" data-sal-delay="350" data-sal="slide-up" data-sal-duration="800">
                                            @lang('frontend.touch_text')
                                        </p>
                                        <div class="communicate-area" data-sal-delay="450" data-sal="slide-up" data-sal-duration="800">
                                            <img src="{{ asset('frontend/images/appoinment/icon/01.svg') }}" alt="creative_icon">
                                            <div class="details-area">
                                                <span>@lang('frontend.email')</span>
                                                <a href="mailto:{{settings('email')}}">{{settings('email')}}</a>
                                            </div>
                                        </div>
                                        <div class="communicate-area mt--30" data-sal-delay="550" data-sal="slide-up" data-sal-duration="800">
                                            <img src="{{ asset('frontend/images/appoinment/icon/02.svg') }}" alt="creative_icon">
                                            <div class="details-area">
                                                <span>@lang('frontend.phone')</span>
                                                <a href="tel:{{settings('phone')}}">{{settings('phone')}}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- appoinment left area End -->
                            </div>
                            <div class="col-lg-6">
                                <!-- appoinment-right -->
                                <div class="appoinment-right">
                                    <form action="#">
                                        <div class="single-input" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                                            <label for="name">@lang('frontend.your_name')*</label>
                                            <input type="text" id="name" required>
                                        </div>
                                        <div class="single-input mt--20" data-sal-delay="250" data-sal="slide-up" data-sal-duration="800">
                                            <label for="Email">@lang('frontend.your_email')*</label>
                                            <input type="text" id="Email" required>
                                        </div>
                                        <div class="single-input mt--20" data-sal-delay="350" data-sal="slide-up" data-sal-duration="800">
                                            <label for="message">@lang('frontend.message')</label>
                                            <textarea id="message"></textarea>
                                        </div>
                                        <button class="rts-btn btn-primary mt--30">@lang('frontend.submit')</button>
                                    </form>
                                </div>
                                <!-- appoinment-right End -->
                            </div>
                        </div>
                    </div>
                    <div class="appoinment-shape">
                        <img class="shape-1 shape" src="{{ asset('frontend/images/appoinment/shape/01.png') }}" alt="appoinmtnt_shape" data-sal-delay="250" data-sal="slide-right" data-sal-duration="600">
                        <img class="shape shape-2" src="{{ asset('frontend/images/appoinment/shape/02.png') }}" alt="appoinmtnt_shape" data-sal-delay="150" data-sal="slide-right" data-sal-duration="800">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- service-appoinment-area End -->
@endif