@extends('frontend.layout.main')

@section('title')
    About us
@endsection

@section('styles')
    
@endsection

@section('content')
<div class="content-wrapper">

   <!-- Breadcrumb Start -->
   <div class="breadcrumb-wrap bg-spring">
    <img src="assets/img/breadcrumb/br-shape-1.png" alt="Image" class="br-shape-one xs-none">
    <img src="assets/img/breadcrumb/br-shape-2.png" alt="Image" class="br-shape-two xs-none">
    <img src="assets/img/breadcrumb/br-shape-3.png" alt="Image" class="br-shape-three moveHorizontal sm-none">
    <img src="assets/img/breadcrumb/br-shape-4.png" alt="Image" class="br-shape-four moveVertical sm-none">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7 col-md-8 col-sm-8">
                <div class="breadcrumb-title">
                    <h2>Services</h2>
                    <ul class="breadcrumb-menu list-style">
                        <li><a href="index.html">Home </a></li>
                        <li>Services</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-5 col-md-4 col-sm-4 xs-none">
                <div class="breadcrumb-img">
                    <img src="assets/img/breadcrumb/br-shape-5.png" alt="Image" class="br-shape-five animationFramesTwo">
                    <img src="assets/img/breadcrumb/br-shape-6.png" alt="Image" class="br-shape-six bounce">
                    <img src="assets/img/breadcrumb/breadcrumb-2.png" alt="Image">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Breadcrumb End -->

 <!-- Service Section Start -->
<section class="service-wrap ptb-100">
    <div class="container">
        <div class="row justify-content-center">
            @if ($services)
                @foreach ($services as $item)
                    <div class="col-xl-4 col-lg-6 col-md-6">
                        <div class="service-card style4">
                            <div class="service-info">
                                <div class="service-title">
                                    <span><i class="flaticon-payment-method"></i></span>
                                    <h3><a href="{{ route('service_single',$item->id) }}">{{ $item->title }}</a></h3>
                                </div>
                                
                                {!! substr($item->description,0,200) !!} <br>
                                <a href="{{ route('service_single',$item->id) }}" class="link style1">Read More <i class="flaticon-right-arrow-1"></i></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
         
        </div>
        {{-- <ul class="page-nav list-style mt-20">
            <li><a href="service-two.html"><i class="flaticon-back"></i></a></li>
            <li><a class="active" href="service-two.html">1</a></li>
            <li><a href="service-two.html">2</a></li>
            <li><a href="service-two.html">3</a></li>
            <li><a href="service-two.html"><i class="flaticon-next-1"></i></a></li>
        </ul> --}}
    </div>
</section>

</div>
@endsection

@section('scripts')
    
@endsection