@extends('layouts.app')
@section('stylesheets')
    {!! Html::style('css/tours.list.css') !!}
    {!! Html::style('css/details.css') !!}
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
	<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
@endsection
@section('title')
    {!! $about->meta_title !!}
@stop
@section('keywords',$about->meta_key)
@section('description',$about->meta_description)
@section('content')

<section class="page-banner tour-result about-banner">
    <div>
		<div class="slideAbout">
			@foreach ($aboutimage as $element)
				<img src="{{ env('URL_APPLICATION').$element->name }}">
			@endforeach			
		</div>
        <div class="page-title-wrapper">
            <div class="page-title-content">
                <div class="clearfix"></div>
                <img id="imgCategoryPage" src="">
                <div class="container" style="position: relative;"><h1 class="captions aboutcaptions" style="bottom: 11px;    margin: 0px;">About Us</h1></div>
            </div>
        </div>
    </div>
</section>
<div class="page-main">
    <div class="trip-info termetrip-info">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="label-route-widget bike-breadcrumb">
                        <span class="departure">
                            <a href="{{url('/')}}">
                                <span class="city">Home</span>
                            </a>
                        </span>
                        <i class="fa fa-long-arrow-right"></i>
                        <span class="arrival">                        
                            <a href="{{url('about')}}">
                                <span class="city">About Us</span>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="height-32"></div>
    <div class="tour-result-main padding-bottom aboutpadding">
        <div class="container">
			<div class="aboutdesc">{!! $about->description !!}</div>
		</div>
	</div>
		
    <div class="tour-result-main padding-bottom aboutpadding">
        <div class="container">
			@foreach ($team as $element)
				<div class="row member">
					<div class="col-sm-1"></div>
					<div class="col-sm-3"><img  src="{{ env('URL_APPLICATION').$element->image }}" class="Member_image" alt=""></div>
					<div class="col-sm-7">
						<div>{!! $element->description !!}</div>
					</div>
					<div class="col-sm-1"></div>
				</div>
			@endforeach
        </div>
    </div>
</div>
<script>
	$(document).ready(function(){
		$('.slideAbout').slick({
			autoplay: true,
			autoplaySpeed: 2000,
		});
	});
</script>	
@endsection