@extends('layouts.frontend.master')
@section('title') {{ $menu->transtitle }} @endsection
@section('keyword') {{ $menu->transkeywords }} @endsection
@section('description') {{ $menu->transdescription  }} @endsection
@section('content')
    @include('frontend.includes.breadcrumbs',['title'=> $menu->transtitle])
    <!-- service-appoinment-area start -->
    <div class="rts-service-area bg-light rts-section-gap service-bg_shape service-inner">
        <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>
            @if($services->count() > 0)
                <div class="row g-24 mt--5">
                    @foreach($services as $service)
                        <div class="col-lg-3" 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">
                                    {!! $service->transtext !!}
                                </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>
            @endif
        </div>
    </div>
    <!-- service-appoinment-area End -->

    <!-- start call to action area -->
    <div class="rts-callto-acation-area rts-callto-acation-area4 bg-call-to-action-two">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="cta-two-wrapper">
                        <div class="title-area">
                            <span data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">@lang('frontend.service_contact')</span>
                            <h3 class="title" data-sal-delay="250" data-sal="slide-up" data-sal-duration="800">@lang('frontend.service_mind')</h3>
                        </div>
                        <div class="cta-contact-box">
                            <div class="left-side">
                                <p data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">@lang('frontend.mail_us')</p>
                                <a href="#" class="email" data-sal-delay="250" data-sal="slide-up" data-sal-duration="800">{{settings('email')}}</a>
                            </div>
                            <div class="right-side">
                                <p data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">@lang('frontend.call_us'))</p>
                                <a href="#" class="phone" data-sal-delay="250" data-sal="slide-up" data-sal-duration="800">{{settings('phone')}}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end call to action area -->
@endsection