@extends('frontend.layout.main')

@section('title')
    About us
@endsection

@section('styles')
    
@endsection

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

    <div class="breadcrumb-wrap bg-spring">
        <img src="{{ asset('assets/img/breadcrumb/br-shape-1.png')}}" alt="Image" class="br-shape-one xs-none">
        <img src="{{ asset('assets/img/breadcrumb/br-shape-2.png')}}" alt="Image" class="br-shape-two xs-none">
        <img src="{{ asset('assets/img/breadcrumb/br-shape-3.png')}}" alt="Image" class="br-shape-three moveHorizontal sm-none">
        <img src="{{ asset('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>Service Details</h2>
                        <ul class="breadcrumb-menu list-style">
                            <li><a href="index.html">Home </a></li>
                            <li><a href="service-one.html">Service </a></li>
                            <li>Service Details</li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-5 col-md-4 col-sm-4 xs-none">
                    <div class="breadcrumb-img">
                        <img src="{{ asset('assets/img/breadcrumb/br-shape-5.png')}}" alt="Image" class="br-shape-five animationFramesTwo">
                        <img src="{{ asset('assets/img/breadcrumb/br-shape-6.png')}}" alt="Image" class="br-shape-six bounce">
                        <img src="{{ asset('assets/img/breadcrumb/breadcrumb-1.png')}}" alt="Image">
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <!-- Breadcrumb End -->

    <!-- Service Details Section Start -->
    <div class="service-details-wrap ptb-100">
        <div class="container">
            <div class="row gx-5">
                <div class="col-xl-8 col-lg-12">
                    <div class="service-desc">
                        <a class="service-img mb-25 d-block" data-fancybox="gallery" href="assets/img/service/single-service-1.jpg">
                            <img src="{{ asset('images/'.$services->picture_large) }}" alt="Image">
                        </a>
                        <h2>{{ $services->title }}</h2>
                            {!! $services->description !!}
                     
                   
                    </div>
                </div>
                <div class="col-xl-4 col-lg-12">
                    <div class="sidebar">
                        <div class="sidebar-widget style2">
                            <h4>All Services</h4>
                            <div class="category-box style2">
                                <ul class="list-style">
                                    @if ($services_)
                                        @foreach ($services_ as $item)
                                        <li>
                                            <a href="{{ route('service_single',$item->id) }}">
                                             {{   $item->title }}
                                                <span><i class="flaticon-next"></i></span>
                                            </a>
                                        </li>
                                        @endforeach
                                    @endif
                              
                                </ul>
                            </div>
                        </div>
                        <div class="sidebar-widget style2">
                            <h4>Business Hours </h4>
                            <div class="schedule-widget">
                                <ul class="list-style">
                                    <li>
                                        <h6>Mon-Fri</h6>
                                        <p>8:00 AM - 5:00 PM</p>
                                    </li>
                                    
                                </ul>
                            </div>    
                        </div>
                   
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
    
@endsection