@extends('layouts.main')
@section('main-section')
<section class="page-banner-area pt-50  rel z-1 bgs-cover" style="background-image: url(assets/images/banner/banner.jpg);">
    <div class="container">
        <div class="banner-inner text-white">
            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">Service</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Service</li>
                </ol>
            </nav>
        </div>
    </div>
</section>
<section class="blog-area pt-100 pb-70 rel z-1">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="section-title text-center counter-text-wrap mb-70" data-aos="fade-up"
                    data-aos-duration="1500" data-aos-offset="50">
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            @foreach($service as $services)
            <div class="col-xxl-4 col-12  col-lg-3">
                <div class="blog-item style-two" data-aos="fade-up" data-aos-duration="1500"
                    data-aos-offset="50">
                    <div class="image">
                        <img style="height:300px;width:100%;object-fit:cover;" src="{{asset('uploads/post/'.$services->image)}}" alt="Blog">
                    </div>
                    <div class="content">
                        <h5><a href="services/{{ $services->id }}">{{$services->name}}</a></h5>
                        <p>{{$services->description}}</p>
                        <a href="tel:9958707662" style="text-decoration:none" class="read-more text-black">Enquire Now <i
                                class="fal fa-angle-right"></i></a>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>
@endsection