@extends('layouts_frontend.master')
@section('title','Service Detail')
<style>
    #header {
        background: rgba(40, 58, 90, 0.9);
    }
</style>
@section('content')
<!-- ======= Service Section ======= -->

<section id="service" class="why-us section-bg" >
    <div class="container">
        <div class="section-title" style="padding-top: 100px!important;">
            <h2>Service Detail</h2>
        </div>

        <div class="row">
            <div class="col-lg-7 d-flex flex-column justify-content-center align-items-stretch  order-2 order-lg-1">
                <div class="content">
                    <h3>{{$service->title}}</h3>
                    <p>{!! $service->description !!}</p>
                </div>
            </div>
            <div class="col-lg-5 align-items-stretch order-1 order-lg-2 img" style='background-image: url("{{url('storage/service_images').'/'.$service->image}}");' data-aos="zoom-in" data-aos-delay="150">&nbsp;</div>
        </div>
    </div>
</section><!-- End Service Section -->

<!-- ======= Services Section ======= -->
<section id="services" class="services section-bg">
    <div class="container" data-aos="fade-up">
        
        <div class="section-title">
            <h2>Our Solutions</h2>
        </div>
        
        <div class="row">
            @foreach ($solutions as $solution)
            <div class="col-xl-4 col-md-6 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100">
                <div class="icon-box">
                    <div class="icon"><img src="{{url('storage/solution_images').'/'.$solution->image}}" class="img-fluid" alt=""></div>
                    <h4>{{$solution->title}}</h4>
                    <p>{!! $solution->description !!}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section><!-- End Services Section -->

@endsection
@section('extra-script')

@endsection