@extends('website.layouts.app')
@section('page-title')
    {{__('website.title')}}
@endsection
@section('bootstrap')
    @if(app()->getLocale()=='ar')
        <link rel="stylesheet" id="brk-direction-bootstrap" href="{{asset('website/css/assets/bootstrap-rtl.css')}}">
    @else
        <link rel="stylesheet" id="brk-direction-bootstrap" href="{{asset('website/css/assets/bootstrap.css')}}">

    @endif
{{--    <link rel="stylesheet" id="brk-direction-bootstrap"--}}
{{--          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">--}}

@endsection
@section('slider-css')
    <link rel="stylesheet" href="{{asset('website/vendor/revslider/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css')}}">
    <link rel="stylesheet" href="{{asset('website/vendor/revslider/fonts/font-awesome/css/font-awesome.css')}}">
    <link rel="stylesheet" href="{{asset('website/vendor/revslider/css/settings.css')}}">
    <link rel="stylesheet" href="{{asset('website/css/components/style-video.css')}}">
@endsection

@section('content')
    @if(count($sliders))
        <div  class="rev_slider_wrapper fullscreen-container"
              data-source="gallery" style="background:transparent;padding:0px; ">
            <div id="rev_slider_65_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.8.1">
                <ul>
                    @foreach($sliders as $i=>$slider)

                        <li data-index="rs-266{{$i}}" data-transition="fade" data-slotamount="default" data-hideafterloop="0"
                            data-hideslideonmobile="off" data-easein="default" data-easeout="default"
                            data-masterspeed="800"
                            data-rotate="0" data-saveperformance="off" data-title="Paris" data-param1="" data-param2=""
                            data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8=""
                            data-param9="" data-param10="" data-description="">
                            <img src="{{$slider->image()}}" alt=""
                                 data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"
                                 class="rev-slidebg" data-no-retina>
                            <div class="tp-caption rev_group" id="slide-263-layer-{{$slider->id}}"
                                 data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                 data-y="['top','top','top','top']" data-voffset="['500','385','352','352']"
                                 data-width="['320','320','320','260']" data-height="['80','80','80','79']"
                                 data-whitespace="nowrap" data-type="group" data-responsive_offset="on" data-responsive="off"
                                 data-frames='[{"delay":0,"speed":20,"frame":"0","to":"o:1;","ease":"Power3.easeInOut"},{"speed":20,"frame":"999","ease":"Power3.easeInOut"}]'
                                 data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                                 data-marginleft="[0,0,0,0]" data-textalign="['inherit','inherit','inherit','inherit']"
                                 data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                                 data-paddingleft="[0,0,0,0]"
                                 style="z-index: 7; min-width: 320px; max-width: 320px; max-width: 80px; max-width: 80px; white-space: nowrap; font-size: 20px; line-height: 22px; font-weight: 400; color: #ffffff; letter-spacing: 0px;">



                                <a id="slide-263-layer-4"
                                   class="icon__btn icon__btn_reverse icon__btn-anim icon__btn-sm fancybox brk-hosted-video__btn tp-caption"
                                   href="{{$slider->video}}" data-x="['left','left','left','left']"
                                   data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']"
                                   data-voffset="['0','0','0','0']"
                                   data-frames='[{"delay":"+0","speed":800,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power2.easeOut"},{"delay":"wait","speed":800,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                   data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                                   data-marginleft="[0,0,0,0]" data-textalign="['center','center','center','center']"
                                   data-paddingtop="[22,22,22,22]" data-paddingright="[23,23,23,23]"
                                   data-paddingbottom="[20,20,20,20]" data-paddingleft="[25,25,25,25]"
                                   style="z-index: 8; min-width: 60px; min-height: 60px; max-width: 60px;  max-width: 60px; white-space: nowrap; font-size: 16px; line-height: 16px; font-weight: 400; color: #f27123; letter-letter-spacing: 0px ;font-family:'tajwal-med',sans-serif;background-color:rgb(255,255,255);border-radius:50px 50px 50px 50px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">
                                    <span class="before"></span>
                                    <i class="fa fa-play" aria-hidden="true" style="font-size: 11px;"></i>
                                    <span class="after"></span>
                                </a>


                                <span class="tp-caption" id="slide-263-layer-{{$slider->id+1}}" data-x="['left','left','left','left']"
                                      data-hoffset="['110','110','110','80']"
                                      data-y="['middle','middle','middle','middle']"
                                      data-voffset="['-7','-7','-7','-8']" data-fontsize="['28','28','28','22']"
                                      data-lineheight="['28','28','28','22']" data-width="none" data-height="none"
                                      data-whitespace="nowrap" data-type="text" data-responsive_offset="off"
                                      data-responsive="off"
                                      data-frames='[{"delay":"+0","speed":800,"frame":"0","from":"x:-50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":800,"frame":"999","to":"x:50px;opacity:0;","ease":"Power3.easeInOut"}]'
                                      data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]"
                                      data-marginbottom="[0,0,0,0]"
                                      data-marginleft="[0,0,0,0]"
                                      data-textalign="['inherit','inherit','inherit','inherit']"
                                      data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
                                      data-paddingbottom="[0,0,0,0]"
                                      data-paddingleft="[0,0,0,0]"
                                      style="z-index: 9; white-space: nowrap; font-size: 28px; line-height: 28px; font-weight: 700; color: #ffffff; letter-spacing: 0px;font-family:'tajwal-med',sans-serif;text-transform:uppercase;">{{$slider->description}}
								 </span>
                                <span class="tp-caption" id="slide-263-layer-{{$slider->id+2}}" data-x="['left','left','left','left']"
                                      data-hoffset="['110','110','110','80']"
                                      data-y="['middle','middle','middle','middle']"
                                      data-voffset="['18','18','18','15']" data-width="none" data-height="none"
                                      data-whitespace="nowrap" data-type="text" data-responsive_offset="off"
                                      data-responsive="off"
                                      data-frames='[{"delay":"+0","speed":800,"frame":"0","from":"x:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":800,"frame":"999","to":"x:-50px;opacity:0;","ease":"Power3.easeInOut"}]'
                                      data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]"
                                      data-marginbottom="[0,0,0,0]"
                                      data-marginleft="[0,0,0,0]"
                                      data-textalign="['inherit','inherit','inherit','inherit']"
                                      data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
                                      data-paddingbottom="[0,0,0,0]"
                                      data-paddingleft="[0,0,0,0]"
                                      style="z-index: 10; white-space: nowrap; font-size: 16px; line-height: 18px; font-weight: 400; color: #f27123; letter-spacing: 0px;font-family:'tajwal-med',sans-serif;">{{$slider->caption}} </span>
                            </div>
                            <div class="tp-caption tp-shape tp-shapewrapper" id="slide-263-layer-{{$slider->id+1}}"
                                 data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                 data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                                 data-width="full" data-height="full" data-whitespace="nowrap" data-type="shape"
                                 data-basealign="slide" data-responsive_offset="off" data-responsive="off"
                                 data-frames='[{"delay":10,"speed":10,"frame":"0","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":10,"frame":"999","ease":"Power3.easeInOut"}]'
                                 data-textalign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
                                 data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                                 data-paddingleft="[0,0,0,0]"
                                 style="z-index: 5;background-color:rgba(0,2,67,0.60); "></div>
                            <div class="tp-caption" id="slide-263-layer-{{$slider->id+2}}"
                                 data-x="['center','center','center','center']"
                                 data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']"
                                 data-voffset="['275','200','185','185']" data-fontsize="['55','50','40','30']"
                                 data-lineheight="['220','170','120','80']" data-width="none" data-height="none"
                                 data-whitespace="nowrap" data-type="text" data-responsive_offset="off"
                                 data-frames='[{"delay":300,"speed":1500,"frame":"0","from":"x:[-175%];y:0px;z:0;rX:0;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:1;","mask":"x:[100%];y:0;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeOut"},{"delay":"wait","speed":800,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                                 data-textalign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
                                 data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                                 data-paddingleft="[0,0,0,0]"
                                 style="z-index: 6; white-space: nowrap; font-size: 196px; line-height: 196px; font-weight: 700; color: #ffffff; letter-spacing: 0px; font-family:'tajwal-med',sans-serif;">
                                {{$slider->title}}
                            </div>
                            <div class="tp-caption tp-svg-layer" id="slide-263-layer-{{$slider->id+3}}"
                                 data-x="['right','right','right','right']" data-hoffset="['150','30','0','15']"
                                 data-y="['top','top','top','bottom']" data-voffset="['340','225','200','15']"
                                 data-width="['100','100','100','70']" data-height="['170','150','100','70']"
                                 data-whitespace="nowrap" data-type="svg"
                                 data-actions='[{"event":"click","action":"jumptoslide","slide":"next","delay":"100"}]'
                                 data-svg_src="{{asset('website/img/demo_travel_agency/images/ic_chevron_right_36px.svg')}}"
                                 data-svg_idle="sc:transparent;sw:0;sda:0;sdo:0;"
                                 data-svg_hover="sc:transparent;sw:0;sda:0;sdo:0;" data-responsive_offset="off"
                                 data-responsive="off"
                                 data-frames='[{"delay":10,"speed":10,"frame":"0","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":10,"frame":"999","ease":"Power3.easeInOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);"}]'
                                 data-textalign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
                                 data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                                 data-paddingleft="[0,0,0,0]"
                                 style="z-index: 15; min-width: 170px; max-width: 170px; max-width: 170px; max-width: 170px; color: #ffffff;cursor:pointer;">
                            </div>
                            <div class="tp-caption tp-svg-layer" id="slide-263-layer-{{$slider->id+4}}"
                                 data-x="['left','left','left','left']" data-hoffset="['150','30','0','15']"
                                 data-y="['top','top','top','bottom']" data-voffset="['340','225','200','15']"
                                 data-width="['100','100','100','70']" data-height="['170','150','100','70']"
                                 data-whitespace="nowrap" data-type="svg"
                                 data-actions='[{"event":"click","action":"jumptoslide","slide":"previous","delay":"100"}]'
                                 data-svg_src="{{asset('website/img/demo_travel_agency/images/ic_chevron_left_24px.svg')}}"
                                 data-svg_idle="sc:transparent;sw:0;sda:0;sdo:0;"
                                 data-svg_hover="sc:transparent;sw:0;sda:0;sdo:0;" data-responsive_offset="off"
                                 data-responsive="off"
                                 data-frames='[{"delay":10,"speed":10,"frame":"0","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":10,"frame":"999","ease":"Power3.easeInOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);"}]'
                                 data-textalign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]"
                                 data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                                 data-paddingleft="[0,0,0,0]"
                                 style="z-index: 16; min-width: 170px; max-width: 170px; max-width: 170px; max-width: 170px; color: #ffffff;cursor:pointer;">
                            </div>
                        </li>
                    @endforeach

                </ul>
                <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
            </div>
        </div>
    @endif

    <section style="margin-top: -170px;">
        <div class="container">
            <div class="brk-wided-container mb-80 rtl">
                <div
                        class="cfa-lined pl-20 pr-20 pl-md-60 pr-md-60 pt-50 pb-50 pl-lg-90 position-relative d-flex flex-column flex-lg-row align-items-center justify-content-between bg__style"
                        style="background-image: url({{asset('website/img/demo_travel_agency/1250x160_1.jpg')}})"
                        data-brk-library="component__call_to_action">
                    <div class="brk-abs-bg-overlay brk-base-bg-gradient-90deg"></div>
                    <span class="cfa-lined__line z-index-2 brk-base-bg-9 d-none d-lg-block"></span>
                    <span
                            class="brk-white-font-color p-l-custom  font__weight-semibold font__size-40 text-uppercase z-index-2 pl-lg-10 text-center text-lg-left line__height-60">


{{__('website.grand-slogan')}}
						</span>
                    <a href="{{route('website.contact')}}"
                       class="btn btn-inside-out btn-lg  btn-inside-out_blue font__size-16 font__weight-normal letter-spacing-40 border-radius-5 mt-20 mt-lg-0 mb-0 pl-20 pr-20 mr-0 ml-0 ml-lg-25 z-index-2"
                       data-brk-library="component__button">
                        <span class="before">{{__('website.call-us-now')}}</span><span class="text">{{__('website.call-us-now')}}</span><span
                                class="after">{{__('website.call-us-now')}}</span>
                    </a>
                </div>
            </div>
        </div>

    </section>

    <section class="pt-35 pb-35 pb-lg-0 rtl">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-5">
                    <div class="mb-10 mt-30">
                        <img src="{{asset('website/img/grand/20.png')}}" class="img-fluid mx-w-50 center-mobile">
                        <h2 class=" font__weight-bold  line__height-60 mt-10" data-brk-library="component__title">
                            <span class="brk-base-font-color">{{__('website.grand')}} </span>
                            {{__('website.20-year-of-experience')}}

                        </h2>

                    </div>
                    <p class="brk-dark-font-color font__size-16 font__weight-normal line__height-26 mb-10">
                        {{__('website.slider-under-text')}}
                    </p>

                </div>
                <div class="col-12 col-lg-7">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="laptop-wrapper">
                                    <iframe width="560" height="315" src="https://www.youtube.com/embed/hqoYljUjAQ8"
                                            frameborder="0" allowfullscreen></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    @if(count($projects)>0)

        <section class="pt-35 pb-35 position-relative  ">
            <div class="main-wrapper mb-70">
                <div class="container">
                    <div class="text-center mb-50">
                        <h2 class=" font__weight-bold font__size-48 line__height-52 mt-30 text-uppercase mb-25 brk-color-base-3 brk-library-rendered"
                            data-brk-library="component__title">
                            {{__('website.applications-of')}}
                            <span class="brk-base-font-color"> {{__('website.our-works')}}</span>
                        </h2>
                        <div class="divider-cross wow zoomIn brk-library-rendered" data-brk-library="component__title"
                             style="visibility: visible; animation-name: zoomIn;">
                            <span></span>
                            <span></span>
                        </div>
                        <h5 class="brk-color-base-3  font__size-18  line__height-26 opacity-50 letter-spacing-20 brk-library-rendered"
                            data-brk-library="component__title">
                            {{__('website.our-works-desc')}}


                        </h5>
                    </div>

                </div>
                <div class=" brk-border-btn pb-110" data-brk-library="component__portfolio_masonry"
                     style="margin-bottom: -150px;">

                    <div class="container">
                        <div class="brk-grid row">
                            <div class="brk-grid__sizer"></div>
                            @foreach($projects as $i=>$project)
                                @if($i<3)

                                    <a href="{{route('website.projects.show',$project->slug)}}">
                                    <div class="@if($i == 0 || $i == 1) col-xl-3 col-lg-4 col-md-6 brk-grid__item brk-grid__item_height-370 magazines design
@else
                                            col-xl-6 col-lg-8 col-md-6 brk-grid__item brk-grid__item_height-370 logotypes magazines
@endif
                                            "
                                         data-brk-hover3d='{"imgWrapper": ".post-filmstrip", "caption": ".post-filmstrip__content"}'>
                                        <div class="post-filmstrip text-center brk-base-box-shadow lazyload"
                                             data-bg="{{$project->image()}}"
                                             data-brk-library="component__content_slider,fancybox,anime">
                                            <div class="post-filmstrip__overlay brk-base-bg-gradient-50deg"></div>
                                            <div class="post-filmstrip__content text-center">
{{--                                                <a href="{{route('website.projects.show',$project->slug)}}">--}}
                                                    <h3 class=" font__weight-semibold font__size-21 line__height-24">
                                                    {{$project->title}}
                                                    </h3>
{{--                                                </a>--}}
                                                <div
                                                        class="post-filmstrip__excerpt font__family-open-sans font__size-16 line__height-26">
                                                    {{$project->brief_description}}                                                </div>
                                                <div class="links">
                                                    <a href="{{route('website.projects.show',$project->slug)}}"
                                                       class="links__permalink bg-white-20">
                                                        <i class="fas fa-link"></i>
                                                    </a>
                                                    <a href="{{$project->image()}}" class="links__view fancybox">
                                                        <i class="fas fa-image"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    </a>

                                @else
                                    <a href="{{route('website.projects.show',$project->slug)}}">

                                    <div class="
                          @if($i==4)
                                            col-xl-6 col-lg-8 col-md-6 brk-grid__item brk-grid__item_height-370 logotypes magazines
@else
                                            col-xl-3 col-lg-4 col-md-6 brk-grid__item brk-grid__item_height-370 magazines design

@endif
                                            "
                                         data-brk-hover3d='{"imgWrapper": ".post-filmstrip", "caption": ".post-filmstrip__content"}'>
                                        <div class="post-filmstrip text-center brk-base-box-shadow lazyload"
                                             data-bg="{{$project->image()}}"
                                             data-brk-library="component__content_slider,fancybox,anime">
                                            <div class="post-filmstrip__overlay brk-base-bg-gradient-50deg"></div>
                                            <div class="post-filmstrip__content text-center">
{{--                                                <a href="{{route('website.projects.show',$project->slug)}}">--}}
                                                    <h3 class=" font__weight-semibold font__size-21 line__height-24">
                                                    {{$project->title}}
                                                    </h3>
{{--                                    </a>--}}
                                                <div
                                                        class="post-filmstrip__excerpt font__family-open-sans font__size-16 line__height-26">
                                                    {{$project->brief_description}}
                                                </div>
                                                <div class="links">
                                                    <a href="{{route('website.projects.show',$project->slug)}}"
                                                       class="links__permalink bg-white-20">
                                                        <i class="fas fa-link"></i>
                                                    </a>
                                                    <a href="{{$project->image()}}" class="links__view fancybox">
                                                        <i class="fas fa-image"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                @endif
                                    </a>

                            @endforeach


                        </div>

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

        </section>
    @endif
    @if(count($customerOpinions)>0)
        <section class="pt-35 pb-70 position-relative rtl">
            <div>
                <div class="container">
                    <div class="text-center mb-50">
                        <h2 class=" font__weight-bold font__size-48 line__height-52 mt-30 text-uppercase mb-25 brk-color-base-3 brk-library-rendered"
                            data-brk-library="component__title"> {{__('website.opinions')}}
                            <span class="brk-base-font-color"> {{__('website.customers')}} </span>
                        </h2>
                        <div class="divider-cross wow zoomIn brk-library-rendered" data-brk-library="component__title"
                             style="visibility: visible; animation-name: zoomIn;">
                            <span></span>
                            <span></span>
                        </div>
                        <h5 class="brk-color-base-3  font__size-18  line__height-26 opacity-50 letter-spacing-20 brk-library-rendered"
                            data-brk-library="component__title">
                            {{__('website.customers-opinions-desc')}}


                        </h5>
                    </div>

                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-12 col-lg-5">
                        <div class="brk-testimonials-layered-horizontal">


                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 137.5">
                                <path d="M0,0A3421.34,3421.34,0,0,0,953,137.49,3421.46,3421.46,0,0,0,1920,0"
                                      style="fill:#fff"/>
                            </svg>
                            <div class="brk-testimonials-layered-horizontal__container"
                                 data-brk-library="component__testimonials,slider__swiper">
                                <div class="overlay-horizontal"></div>
                                <div class="layered-horizontal-slider swiper-container">
                                    <div class="swiper-wrapper">
                                        @foreach($customerOpinions as $customerOpinion)
                                            <div class="swiper-slide">
                                                <div class="brk-testimonials-layered-horizontal__item text-center">
                                                    <div class="brk-testimonials-layered-horizontal__photo lazyload"
                                                         data-bg="{{$customerOpinion->image()}}"></div>
                                                    <div
                                                            class="brk-testimonials-layered-horizontal__name  font__weight-bold">
                                                        {{$customerOpinion->name}}
                                                    </div>
                                                    <div
                                                            class="brk-testimonials-layered-horizontal__job font__family-open-sans letter-spacing-20">
                                                        {{$customerOpinion->position}}
                                                    </div>
                                                    <div
                                                            class="brk-testimonials-layered-horizontal__comment font__family-open-sans">
                                                        {{$customerOpinion->description}}
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="swiper-base-arrow-md button-prev">
                                    <i class="fas fa-long-arrow-alt-left"></i>
                                </div>
                                <div class="swiper-base-arrow-md button-next">
                                    <i class="fas fa-long-arrow-alt-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-7">
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="laptop-wrapper laptop-wrapper2">
                                        <iframe width="560" height="315" src="https://www.youtube.com/embed/5kBUMdHG5yw"
                                                frameborder="0" allowfullscreen></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    @endif


    @if(count($teams)>0)
{{--        @dd($teams)--}}
        <section class="pt-10 pb-10 position-relative brk-bg-center-cover lazyload"
                 data-bg="{{asset('website/img/demo_travel_agency/1920x820_1.jpg')}}">
            <span class="brk-abs-bg-overlay brk-base-gradient-34"></span>
            <div class="container">
                <div class="text-center maxw-770 mb-20">
                    <h2 class=" font__weight-bold font__size-48 line__height-20 mt-30 text-uppercase mb-25 text-white"
                        data-brk-library="component__title">{{__('website.team')}}</h2>
                    <div class="divider-cross wow zoomIn" data-brk-library="component__title">
                        <span></span>
                        <span></span>
                    </div>
                    <h5 class=" font__size-18 font__weight-light line__height-26 letter-spacing-20 text-white "
                        data-brk-library="component__title">
                        {{__('website.team-desc')}}


                    </h5>
                </div>
                <div class="container">
                    <div class="default-slider slick-loading arrows-classic-dark fa-req" data-slick='{"slidesToShow": 4, "slidesToScroll": 1, "arrows": true,
"responsive": [
{"breakpoint": 992, "settings": {"slidesToShow": 3}},
{"breakpoint": 768, "settings": {"slidesToShow": 2}},
{"breakpoint": 480, "settings": {"slidesToShow": 1}}
]}' data-brk-library="slider__slick">
                        @foreach($teams as $team)

                            <div class="pl-15 pr-15">
                                <article class="brk-team-persone-circle brk-base-box-shadow text-center"
                                         data-brk-library="component__team">
                                    <div class="brk-team-persone-circle__name-position">
                                        <a href="#">
                                            <h4 class=" font__weight-bold font__size-18"> {{$team->name}}</h4>
                                        </a>
                                        <span class=" font__weight-normal font__size-16 line__height-24">{{$team->position}}</span>
                                    </div>
                                    <div class="brk-team-persone-circle__bg lazyload" data-bg="{{$team->image()}}">
									<span class="brk-team-persone-circle__bg-overlay">
										<span class="before brk-base-bg-gradient-90deg"></span>
										<svg viewBox="0 0 270 37">
											<path
                                                    d="M270,37H0V0A267.6,267.6,0,0,0,135.53,36.5,267.52,267.52,0,0,0,270,0Z"
                                                    fill="rgb(255, 255, 255)"/>
										</svg>
									</span>
                                        {{--                                <ul class="brk-team-persone-circle__contacts">--}}
                                        {{--                                    <li>--}}
                                        {{--                                        <i class="fas fa-phone" aria-hidden="true"></i>--}}
                                        {{--                                        <a href="tel:88001234567">8 800 123 45 67</a>--}}
                                        {{--                                    </li>--}}
                                        {{--                                    <li>--}}
                                        {{--                                        <i class="far fa-envelope" aria-hidden="true"></i>--}}
                                        {{--                                        <a href="mailto: Sales@2Grand.net"> Sales@2Grand.net</a>--}}
                                        {{--                                    </li>--}}
                                        {{--                                    <li>--}}
                                        {{--                                        <i class="fab fa-instagram" aria-hidden="true"></i>--}}
                                        {{--                                        <a href="#">bernard.show</a>--}}
                                        {{--                                    </li>--}}
                                        {{--                                    <li>--}}
                                        {{--                                        <i class="fab fa-skype" aria-hidden="true"></i>--}}
                                        {{--                                        <a href="#">skype.show</a>--}}
                                        {{--                                    </li>--}}
                                        {{--                                </ul>--}}
                                    </div>
                                    <div class="brk-team-persone-circle__social-links">
                                        <ul>
                                            {{--                                    <li><a href="#"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>--}}
                                            {{--                                    <li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>--}}
                                            {{--                                    <li><a href="#"><i class="fab fa-google-plus-g" aria-hidden="true"></i></a></li>--}}
                                            {{--                                    <li><a href="#"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a></li>--}}
                                        </ul>
                                    </div>
                                </article>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif
    @if(count($news)>0)

        <section class="pt-30 pt-md-30 pb-40 pb-lg-80 position-relative z-index-3 overflow-hid rtl">
            <div class="container">
                <div class="text-center mb-50">
                    <h2 class=" font__weight-bold font__size-48 line__height-52 mt-30 text-uppercase mb-25 brk-color-base-3 brk-library-rendered"
                        data-brk-library="component__title"> {{__('website.newest')}}
                        <span class="brk-base-font-color"> {{__('website.news')}} </span>
                    </h2>
                    <div class="divider-cross wow zoomIn brk-library-rendered" data-brk-library="component__title"
                         style="visibility: visible; animation-name: zoomIn;">
                        <span></span>
                        <span></span>
                    </div>
                    <h5 class="brk-color-base-3  font__size-18  line__height-26 opacity-50 letter-spacing-20 brk-library-rendered"
                        data-brk-library="component__title">
                        {{__('website.news-desc')}}
                    </h5>
                </div>

            </div>
            <div class="container">
                <div class="timeline timeline--masonry-grid timeline--vertical-circles"
                     data-brk-library="component__timelines_css,component__timelines_js">
                    <div class="timeline__wrapper">
                        @foreach($news as $i=>$new)
                            @if($i==0)

                                <div class="timeline__item">

                                    <div class="timeline__box">

                                        {{--                                    <a href="{{route('website.news.show',$new->slug)}}"--}}
                                        {{--                                       class="btn btn-inside-out btn-lg ml-0 btn-shadow border-radius-25 btn-min-width-200 brk-library-rendered rendered w-40 "--}}
                                        {{--                                       data-brk-library="component__button">--}}
                                        {{--                                    </a>--}}

                                        <a href="{{route('website.news.show',$new->slug)}}">
                                        <img class="lazyload"
                                             src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                             data-src="{{$new->image()}}" alt="{{$new->title}}"></a>
                                        <div class="timeline__content text-left brk-dark-font-color">
                                            <div class="timeline__date">
                                                <div
                                                        class="timeline__date-year  font__weight-semibold font__size-18 brk-base-font-color line__height-16">
                                                    {{\Carbon\Carbon::parse($new->date)->format('Y')}}
                                                </div>
                                                <div
                                                        class="timeline__date-month  font__weight-medium font__size-15 line__height-16">
                                                    {{\Carbon\Carbon::parse($new->date)->format('M D')}}
                                                </div>
                                            </div>
                                            <a href="{{route('website.news.show',$new->slug)}}">   <h3 class="mt-15 text-center font__family-oxygen font__weight-bold font__size-18  ">
                                                    {{$new->title}}</h3></a>
                                            <a href="{{route('website.news.show',$new->slug)}}"><p
                                                    class="mt-15 text-center font__family-oxygen font__weight-medium font__size-16 letter-spacing--1 line__height-26">
                                                {{$new->description}}
                                                </p></a>
                                        </div>
                                    </div>
                                </div>

                            @elseif($i==1)
                                <div class="timeline__item news-custom">
                                    <div class="timeline__box">
                                        <a href="{{route('website.news.show',$new->slug)}}">
                                        <img class="lazyload"
                                             src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{$new->image()}}" alt="{{$new->title}}"></a>
                                        <div class="timeline__content text-left brk-dark-font-color">
                                            <div class="timeline__date">
                                                <div
                                                        class="timeline__date-year  font__weight-semibold font__size-18 brk-base-font-color line__height-16">
                                                    {{\Carbon\Carbon::parse($new->date)->format('Y')}}
                                                </div>
                                                <div
                                                        class="timeline__date-month  font__weight-medium font__size-15 line__height-16">
                                                    {{\Carbon\Carbon::parse($new->date)->format('M D')}}
                                                </div>
                                            </div>
                                            <a href="{{route('website.news.show',$new->slug)}}"><h3 class="mt-15 text-center font__family-oxygen font__weight-bold font__size-18  ">
                                                    {{$new->title}}</h3></a>
                                            <a href="{{route('website.news.show',$new->slug)}}"><p
                                                    class="mt-15 text-center font__family-oxygen font__weight-medium font__size-16 letter-spacing--1 line__height-26">
                                                {{$new->description}}
                                                </p></a>
                                        </div>
                                    </div>
                                </div>

                            @else
                                <div class="timeline__item hidden-mobile">
                                    <div class="timeline__box">
                                        <a href="{{route('website.news.show',$new->slug)}}">
                                        <img class="lazyload"
                                             src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                             data-src="{{$new->image()}}" alt="alt"></a>
                                        <div class="timeline__content text-left brk-dark-font-color">
                                            <div class="timeline__date">
                                                <div
                                                        class="timeline__date-year  font__weight-semibold font__size-18 brk-base-font-color line__height-16">
                                                    {{\Carbon\Carbon::parse($new->date)->format('Y')}}
                                                </div>
                                                <div
                                                        class="timeline__date-month  font__weight-medium font__size-15 line__height-16">
                                                    {{\Carbon\Carbon::parse($new->date)->format('M D')}}
                                                </div>
                                            </div>
                                            <a href="{{route('website.news.show',$new->slug)}}"><h3 class="mt-15 text-center font__family-oxygen font__weight-bold font__size-18  ">
                                                    {{$new->title}}</h3></a>
                                            <a href="{{route('website.news.show',$new->slug)}}"> <p
                                                    class="mt-15 text-center font__family-oxygen font__weight-medium font__size-16 letter-spacing--1 line__height-26">
                                                {{$new->description}}
                                                </p></a>
                                        </div>
                                    </div>
                                </div>

                            @endif

                        @endforeach

                    </div>
                    <div class="timeline__progress-bar">
                        <a href="{{route('website.news')}}" class="btn btn-simple btn-circle border-radius-50" data-brk-library="component__button">
                            <i class="fal fa-sync"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="brk-animated-circle brk-animated-circle-1" style="left:-70px;top:200px; right:auto; bottom:auto"
                 data-brk-library="component__backgrounds_css">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="417"
                     height="416" viewBox="0 0 417 416">
                    <defs>
                        <path id="backgrounds-id-1"
                              d="M134.56 5718.66c114.7 0 207.67 92.98 207.67 207.67 0 114.7-92.98 207.67-207.67 207.67-114.7 0-207.67-92.98-207.67-207.67 0-114.7 92.98-207.67 207.67-207.67z"/>
                        <clipPath id="backgrounds-id-2">
                            <use fill="#fff" xlink:href="#backgrounds-id-1"/>
                        </clipPath>
                    </defs>
                    <g>
                        <g opacity=".3" transform="translate(74 -5718)">
                            <use fill="#fff" fill-opacity="0" stroke="#000" stroke-dasharray="0 16"
                                 stroke-linecap="round" stroke-miterlimit="50" stroke-width="4"
                                 clip-path="url(&quot;#backgrounds-id-2&quot;)" xlink:href="#backgrounds-id-1"/>
                        </g>
                    </g>
                </svg>
                <div class="brk-animated-circle__container">
                    <span class="brk-animated-circle__dot-1"></span>
                </div>
            </div>
            <div class="brk-animated-circle brk-animated-circle-2" style="left:auto;top:30px;right:-10px; bottom:auto"
                 data-brk-library="component__backgrounds_css">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="417"
                     height="416" viewBox="0 0 417 416">
                    <defs>
                        <path id="backgrounds-id-13-2"
                              d="M134.56 5718.66c114.7 0 207.67 92.98 207.67 207.67 0 114.7-92.98 207.67-207.67 207.67-114.7 0-207.67-92.98-207.67-207.67 0-114.7 92.98-207.67 207.67-207.67z"/>
                        <clipPath id="backgrounds-id-13-1">
                            <use fill="#fff" xlink:href="#backgrounds-id-13-2"/>
                        </clipPath>
                    </defs>
                    <g>
                        <g opacity=".3" transform="translate(74 -5718)">
                            <use fill="#fff" fill-opacity="0" stroke="#000" stroke-dasharray="0 16"
                                 stroke-linecap="round" stroke-miterlimit="50" stroke-width="4"
                                 clip-path="url(&quot;#backgrounds-id-13-1&quot;)" xlink:href="#backgrounds-id-13-2"/>
                        </g>
                    </g>
                </svg>
                <div class="brk-animated-circle__container">
                    <span class="brk-animated-circle__dot-1"></span>
                </div>
            </div>
            <div class="brk-animated-circle brk-animated-circle-3" style="left:70px;top:auto;right:auto; bottom:450px"
                 data-brk-library="component__backgrounds_css">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230"
                     height="230" viewBox="0 0 230 230">
                    <defs>
                        <path id="backgrounds-id-14-2"
                              d="M188.02 6501c63.52 0 115.01 51.49 115.01 115s-51.49 115-115.01 115S73 6679.51 73 6616s51.5-115 115.02-115z"/>
                        <clipPath id="backgrounds-id-14-1">
                            <use fill="#fff" xlink:href="#backgrounds-id-14-2"/>
                        </clipPath>
                    </defs>
                    <g>
                        <g opacity=".02" transform="translate(-73 -6501)">
                            <use fill="#fff" fill-opacity="0" stroke="#000" stroke-miterlimit="50" stroke-width="24"
                                 clip-path="url(&quot;#backgrounds-id-14-1&quot;)" xlink:href="#backgrounds-id-14-2"/>
                        </g>
                    </g>
                </svg>
                <div class="brk-animated-circle__container">
					<span class="brk-animated-circle__dot-1">
						<span class="brk-animated-circle__dot-2"></span>
					</span>
                </div>
            </div>
            <div class="brk-animated-circle brk-animated-circle-4" style="left:auto;top:auto;right:0; bottom:50px"
                 data-brk-library="component__backgrounds_css">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230"
                     height="230" viewBox="0 0 230 230">
                    <defs>
                        <path id="backgrounds-id-15-1"
                              d="M188.02 6501c63.52 0 115.01 51.49 115.01 115s-51.49 115-115.01 115S73 6679.51 73 6616s51.5-115 115.02-115z"/>
                        <clipPath id="backgrounds-id-15-2">
                            <use fill="#fff" xlink:href="#backgrounds-id-15-1"/>
                        </clipPath>
                    </defs>
                    <g>
                        <g opacity=".02" transform="translate(-73 -6501)">
                            <use fill="#fff" fill-opacity="0" stroke="#000" stroke-miterlimit="50" stroke-width="24"
                                 clip-path="url(&quot;#backgrounds-id-15-2&quot;)" xlink:href="#backgrounds-id-15-1"/>
                        </g>
                    </g>
                </svg>
                <div class="brk-animated-circle__container">
					<span class="brk-animated-circle__dot-1">
						<span class="brk-animated-circle__dot-2"></span>
						<span class="brk-animated-circle__dot-3"></span>
					</span>
                </div>
            </div>
        </section>
    @endif
    <div class="brk-paraxify overflow-hid mt-30 rtl" style="background-image: url({{asset('website/img/bg-1920_1.jpg')}})"
         data-brk-library="component__parallax">
        <div class="container">
            <div class="row round__wrap scroll-show content__side-right">
                <!-- <span class="parallax__bg-shape-lg brk-parallax__bg-gradient-md">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1787 480">
                        <defs>
                            <style>
                                .b {
                                    fill-rule: evenodd;
                                    fill: url(#a2);
                                }
                            </style>
                            <linearGradient id="a2" y1="240" x2="1787" y2="240" gradientUnits="userSpaceOnUse">
                                <stop offset="0%" stop-color="var(--brand-primary)" />
                                <stop offset="50%" stop-color="var(--secondary)" />
                            </linearGradient>
                        </defs>
                        <path class="b" d="M0,480c132.55,0,240-107.45,240-240S132.55,0,0,0H1787V480Z" />
                    </svg>
                </span> -->

                <div class="col-md-12">
                    <div class="all-light text-md-left text-center pt-md-70 pb-md-70 pt-10 pb-10 pl-30">
                        <div class="row">

                            <div class="col-lg-7">
                                <div class="ml-md-30 text-center mt-50">
{{--                                    @dd(__('website.ask-for-app'))--}}
                                    <h4 class=" font__weight-bold font__size-30  mt-20">{{__('website.ask-for-app')}}</h4>
                                    <p
                                            class=" font__weight-medium font__size-18 line__height-30 brk-white-font-color mt-20 mb-20 ">
                                        {{__('website.ask-for-app-desc')}}


                                    </p>

                                    <div class="col-12 ">
                                        <a href="https://api.whatsapp.com/send?phone={{$settings['phone']}}&amp;text=أهلا بكم في شركة جراند سوف يتم الرد عليكم في اقرب فرصة "
                                           class="btn  btn-inside-out btn-lg  border-radius-25 font__family-open-sans font__weight-bold brk-library-rendered"
                                           data-brk-library="component__button" target="_blank">

												<span class="before border-btn">
                                                    {{__('website.ask-for-app')}}

                                                </span>
                                            <span class="text border-btn">
                                                {{__('website.ask-for-app')}}



                                            </span><span class="after">
													{{__('website.ask-for-app')}}</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <img src="{{asset('website/img/grand/works-mockup.png')}}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="pt-lg-30 pt-0 pb-lg-30 pb-30 rtl" id="services">
        <div class="container">
            <div class="text-center mb-50">
                <h2 class=" font__weight-bold font__size-48 line__height-52 mt-30 text-uppercase mb-25 brk-color-base-3 brk-library-rendered"
                    data-brk-library="component__title">
                    {{__('website.message')}}
                    <span class="brk-base-font-color"> {{__('website.grand')}} </span>
                </h2>
                <div class="divider-cross wow zoomIn brk-library-rendered" data-brk-library="component__title"
                     style="visibility: visible; animation-name: zoomIn;">
                    <span></span>
                    <span></span>
                </div>
                <h5 class="brk-color-base-3  font__size-18  line__height-26 opacity-50 letter-spacing-20 brk-library-rendered"
                    data-brk-library="component__title">

                    {{__('website.grand-message-desc')}}

                </h5>
            </div>

        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-xl-3 text-center">
                    <figure class="shape-box shape-box_stripe" data-brk-library="component__shape_box">
                        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                             data-src="{{asset('website/img/demo_freelance_blog/270x430_1.jpg')}}" class="lazyload" alt="alt">
                        <div class="brk-abs-overlay z-index-0 bg-black opacity-60"></div>
                        <div class="icon">
                            <i class="fas fa-laptop-code"></i>
                        </div>
                        <figcaption>
                            <div class="show-cont">
                                <h4 class=" font__weight-bold font__size-18 text-uppercase main-title text-center">
                                    {{__('website.number-1')}}
                                </h4>
                            </div>
                            <p class="font__family-open-sans font__size-14 text-gray text-center">
{{--                                @dd("__('website.number-1-desc')")--}}
{{--                                {{__('website.number-1-desc')}}--}}
                            </p>

                            <a href="#" class="btn btn-inside-out btn-lg border-radius-30 font__weight-bold"
                               data-brk-library="component__button">
                                <span class="before">{{__('website.read-more')}}</span><span class="text">{{__('website.click-me')}}</span><span
                                        class="after">{{__('website.read-more')}}</span>
                            </a>
                        </figcaption>
                        <span class="after"></span>
                    </figure>
                </div>
                <div class="col-md-6 col-xl-3 text-center">
                    <figure class="shape-box shape-box_stripe" data-brk-library="component__shape_box">
                        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                             data-src="{{asset('website/img/demo_freelance_blog/270x430_2.jpg')}}" class="lazyload" alt="alt">
                        <div class="brk-abs-overlay z-index-0 bg-black opacity-60"></div>
                        <div class="icon">
                            <i class="fas fa-layer-group"></i>
                        </div>
                        <figcaption>
                            <div class="show-cont">
                                <h4 class=" font__weight-bold font__size-18 text-uppercase main-title text-center">
                                    {{__('website.20-years-of-experience')}}</h4>
                            </div>
                            <p class="font__family-open-sans font__size-14 text-gray text-center">
{{--                                {{__('website.20-years-of-experience-desc')}}--}}
                            </p>
                            <a href="#" class="btn btn-inside-out btn-lg border-radius-30 font__weight-bold"
                               data-brk-library="component__button">
                                <span class="before">{{__('website.read-more')}}</span><span class="text">{{__('website.click-me')}}</span><span
                                        class="after">{{__('website.read-more')}}</span>
                            </a>
                        </figcaption>
                        <span class="after"></span>
                    </figure>
                </div>
                <div class="col-md-6 col-xl-3 text-center">
                    <figure class="shape-box shape-box_stripe" data-brk-library="component__shape_box">
                        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                             data-src="{{asset('website/img/demo_freelance_blog/270x430_3.jpg')}}" class="lazyload" alt="alt">
                        <div class="brk-abs-overlay z-index-0 bg-black opacity-60"></div>
                        <div class="icon">
                            <i class="fas fa-eye-dropper"></i>
                        </div>
                        <figcaption>
                            <div class="show-cont">
                                <h4 class=" font__weight-bold font__size-18 text-uppercase main-title text-center">
                                    {{__('website.protection')}} </h4>
                            </div>
                            <p class="font__family-open-sans font__size-14 text-gray text-center">
{{--                                {{__('website.protection-desc')}}--}}
                            </p>
                            <a href="#" class="btn btn-inside-out btn-lg border-radius-30 font__weight-bold"
                               data-brk-library="component__button">
                                <span class="before">{{__('website.read-more')}}</span><span class="text">{{__('website.click-me')}}</span><span
                                        class="after">{{__('website.read-more')}}</span>
                            </a>
                        </figcaption>
                        <span class="after"></span>
                    </figure>
                </div>
                <div class="col-md-6 col-xl-3 text-center">
                    <figure class="shape-box shape-box_stripe" data-brk-library="component__shape_box">
                        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                             data-src="{{asset('website/img/demo_freelance_blog/270x430_4.jpg')}}" class="lazyload" alt="alt">
                        <div class="brk-abs-overlay z-index-0 bg-black opacity-60"></div>
                        <div class="icon">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <figcaption>
                            <div class="show-cont">
                                <h4 class=" font__weight-bold font__size-18 text-uppercase main-title text-center">
                                    {{__('website.40-employee')}} </h4>
                            </div>
                            <p class="font__family-open-sans font__size-14 text-gray text-center">
{{--                                {{__('website.40-employee-desc')}}--}}
                            </p>
                            <a href="#" class="btn btn-inside-out btn-lg border-radius-30 font__weight-bold"
                               data-brk-library="component__button">
                                <span class="before">{{__('website.read-more')}}</span><span class="text">{{__('website.click-me')}}</span><span
                                        class="after">{{__('website.read-more')}}</span>
                            </a>
                        </figcaption>
                        <span class="after"></span>
                    </figure>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('slider-js')
    <script defer="defer" src="{{asset('website/vendor/revslider/js/jquery.themepunch.tools.min.js')}}"></script>
    <script defer="defer" src="{{asset('website/vendor/revslider/js/jquery.themepunch.revolution.min.js')}}"></script>
    <script defer="defer"
            src="{{asset('website/vendor/revslider/js/extensions/revolution.extension.actions.min.js')}}"></script>
    <script defer="defer"
            src="{{asset('website/vendor/revslider/js/extensions/revolution.extension.layeranimation.min.js')}}"></script>

    <script defer="defer"
            src="{{asset('website/vendor/revslider/js/extensions/revolution.extension.slideanims.min.js')}}"></script>

@endsection

@section('extra-js')
    <script type="text/javascript">
        var revapi65,
            tpj;
        (function () {
            if (!/loaded|interactive|complete/.test(document.readyState)) document.addEventListener("DOMContentLoaded",
                onLoad);
            else onLoad();

            function onLoad() {
                if (tpj === undefined) {
                    tpj = jQuery;
                    if ("off" == "on") tpj.noConflict();
                }
                if (tpj("#rev_slider_65_1").revolution == undefined) {
                    revslider_showDoubleJqueryError("#rev_slider_65_1");
                } else {
                    revapi65 = tpj("#rev_slider_65_1").show().revolution({
                        sliderType: "standard",
                        jsFileLocation: "/website/vendor/revslider/js/",
                        sliderLayout: "fullscreen",
                        dottedOverlay: "none",
                        delay: 9000,
                        navigation: {
                            onHoverStop: "off",
                        },
                        responsiveLevels: [1240,1908, 1024, 778, 480],
                        visibilityLevels: [1240,1908, 1024, 778, 480],
                        gridwidth: [1230, 992, 768, 576],
                        gridheight: [960, 768, 960, 720],
                        lazyType: "none",
                        minHeight: "720",
                        shadow: 0,
                        spinner: "off",
                        stopLoop: "off",
                        stopAfterLoops: -1,
                        stopAtSlide: -1,
                        shuffle: "off",
                        autoHeight: "off",
                        fullScreenAutoWidth: "off",
                        fullScreenAlignForce: "off",
                        fullScreenOffsetContainer: "",
                        fullScreenOffset: "",
                        disableProgressBar: "on",
                        hideThumbsOnMobile: "off",
                        hideSliderAtLimit: 0,
                        hideCaptionAtLimit: 0,
                        hideAllCaptionAtLilmit: 0,
                        debugMode: false,
                        fallbacks: {
                            simplifyAll: "off",
                            nextSlideOnWindowFocus: "off",
                            disableFocusListener: false,
                        }
                    });
                }; /* END OF revapi call */
            }; /* END OF ON LOAD FUNCTION */
        }()); /* END OF WRAPPING FUNCTION */
    </script>

@endsection