@extends('layout.main')

@push('title')
    <title>Our Services - {{$data->title}}</title>
@endpush

@section('main-section')
    <div class="subheader normal-bg section-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="text-custom-white">Our Services</h1>
                    <ul class="custom-flex justify-content-center">
                        <li class="fw-500"> <a href="{{url('/')}}" class="text-custom-white">Home</a> </li>
                        <li class="active fw-500"> Services </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <section class="section-padding service-symptoms parallax  bg-light-white">
        <div class="overlay overlay-bg-theme"></div>
        <div class="container">
            <div class="section-header text-center">
                <div class="section-heading">
                    <h3 class="text-custom-black">Our <span class="text-custom-blue">Services</span></h3>
                    <div class="section-description">
                        {{-- <p class="text-light-dark">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry. Lorem Ipsum has been the industry's standard dummy text.</p> --}}
                    </div>
                </div>
            </div>
            <div class="row">
                
                @foreach ($serviceData as $serviceRow)
                <div class="col-lg-3 col-md-6">
                    <div class="service-sy-grid mb-xl-30">
                        <div class="img-wrap">
                            <img src="{{asset('storage/'.$serviceRow->image)}}" class="image-fit" alt="{{$serviceRow->name}}">
                        </div>
                        <div class="caption">
                            <h5 class="no-margin fw-600">
                                <a href="{{url('service/'.$serviceRow->url)}}" class="text-custom-black">{{$serviceRow->name}}</a>
                            </h5>
                        </div>
                        <div class="hover-wrap">
                            <div class="text-wrap">
                                <h5 class="fw-600">
                                    <a href="{{url('service/'.$serviceRow->url)}}" class="text-custom-black">{{$serviceRow->name}}</a>
                                </h5>
                                <p class="text-light-white mb-xl-20">{{ strip_tags(substr($serviceRow->description,0,250)) }}</p>
                                <a href="{{url('service/'.$serviceRow->url)}}" class="btn-second btn-small">See All</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection