@extends('layouts.app')
@section('title',$Title)
@section('content')

<div class="position-relative">
    <div class="iq-breadcrumb bg-primary-subtle">
        <div class="container">
            <nav aria-label="breadcrumb" class="text-center">
                <h2 class="title">Service</h2>
                <ol class="breadcrumb justify-content-center mt-2 mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{url('/')}}">Home</a>
                    </li>
                </ol>
            </nav>
        </div>
    </div>
</div>

<div class="section-padding">
    <div class="container">
        <div class="row row-cols-xl-3 row-cols-md-2 row-cols-1">
            @forelse($getServices as $list)
            <div class="col">
                <div class="service-blog p-3 p-md-5 bg-primary-subtle position-relative">
                    <div class="css_prefix-box-title">
                        <a href="{{url('services/'.$list->slug)}}">
                            <h4>{{$list->title ?? ""}}</h4>
                        </a>
                    </div>
                    <p class="text-body py-2">{!! $list->description !!}</p>
                    <div class="overflow-hidden mb-5">
                        <img src="{{asset('service/'.$list->image)}}" title="{{$list->img_title}}" alt="{{$list->img_alt}}" class="img-fluid w-100 service-img">
                    </div>
                    <div class="service-box-icon position-absolute d-inline-block text-center">
                        <img src="{{asset('service/'.$list->image)}}" alt="">
                    </div>
                    <div class="iq-btn-container">
                        <a class="iq-button iq-btn-link text-capitalize" href="{{url('services/'.$list->slug)}}">
                            read more
                            <span class="btn-link-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 8 8" fill="none">
                                    <path d="M7.32046 4.70834H4.74952V7.25698C4.74952 7.66734 4.41395 8 4 8C3.58605 8 3.25048 7.66734 3.25048 7.25698V4.70834H0.679545C0.293423 4.6687 0 4.34614 0 3.96132C0 3.5765 0.293423 3.25394 0.679545 3.21431H3.24242V0.673653C3.28241 0.290878 3.60778 0 3.99597 0C4.38416 0 4.70954 0.290878 4.74952 0.673653V3.21431H7.32046C7.70658 3.25394 8 3.5765 8 3.96132C8 4.34614 7.70658 4.6687 7.32046 4.70834Z" fill="currentColor"></path>
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
            @empty
            @endforelse

        </div>
    </div>
</div>

@endsection