@extends('web.layouts.container')

@section('content')
    <!--Start page-heading -->
    <div class="page-heading" style="background: url({{asset('assets/web/images/page-heading-1.png')}});">
        <div class="container">
            <div class="text-box text-center">
                <h1 class="sec-title"> {{$pageTitle[0]}} <b> {{$pageTitle[1]}}</b> </h1>
            </div>
        </div>
    </div>
    <!--Start about-cards -->
    <section class="services-pg projects-sec pt-0">
        <div class="container">
            <div class="inner-sec">
                <div class="heading text-center mb-5 pb-3 wow fadeInUp"  >
                    <h1 class="pg-title">{{$servicesDetails->first_title}}</h1>
                    <p class="heading-p mt-3 col-md-9 m-auto">
                        <b>{{$servicesDetails->second_title}}</b>
                        <br>
                        {{stripText($servicesDetails->description)}}
                    </p>
                </div>
                <div class="row justify-content-center">
                    @if(count($services))
                        @foreach($services as $service)
                            <div class="col-md-6 col-lg-4">
                                <div class="proj_card">
                                    <img src="{{asset($service->image)}}" alt="" class="main-img">
                                    <div class="card-body">
                                        <h6 class="title">{{$service->title}}</h6>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')

@endsection