@extends('website.layouts.app')
@section('page-title')
    {{__('website.projects')}}
@endsection
@section('owl-css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
@endsection
@section('bootstrap')
{{--    <link rel="stylesheet" id="brk-direction-bootstrap" href="{{asset('website/css/assets/bootstrap.css')}}">--}}
    @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">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/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('meta-deep-link')


    <link rel="icon" href="{{$project->thumbnailImage()}}" type="image/x-icon">
    <link rel="shortcut icon" href="{{$project->thumbnailImage()}}" type="image/x-icon">

    <meta property="og:title" content="{{$project->title}}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{Request::fullUrl()}}">
    <meta property="og:site_name" content="{{Request::url()}}">
    <meta property="og:description" content="{{substr(strip_tags($project->meta_description),1,50)}}">
    <meta property="og:image" itemprop="image" content="{{$project->thumbnailImage()}}">
    <meta property="og:image:secure_url" itemprop="image" content="{{$project->thumbnailImage()}}">
    <meta property="og:image:width" content="300"/>
    <meta property="og:image:height" content="170"/>
    <meta property="og:image:type" content="image/webp"/>
    <meta property="og:image:alt" content="{{$project->title}}">

    <meta property="og:updated_time" content="1440432930"/>
    <meta property="article:tag" content="{{$project->title}}">
    <meta property="article:section" content="{{$project->meta_description}}">
    <meta property="article:published_time" content="{{$project->created_at}}">
    <meta property="article:modified_time" content="{{$project->updated_at}}">

    <meta property="twitter:title" content="{{$project->title}}">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:description" content="{{$project->meta_description}}">
    <meta property="twitter:site" content="@grand">
    <meta property="twitter:creator" content="@grand">
    <meta property="twitter:image" content="{{$project->thumbnailImage()}}">
    <meta property="twitter:image:alt" content="{{$project->title}}">

@endsection

@section('content')

    <div id="rev_slider_15_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="home_page_5"
         data-source="gallery" style="background:rgba(2,2,2,0.5);padding:0px;">
        <div id="rev_slider_15_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.8.1">
            <ul>
                @foreach($project->sliderImages() as $i=>$slider)

                    <li data-index="rs-35" data-transition="fade" data-slotamount="default" data-hideafterloop="0"
                        data-hideslideonmobile="off" data-easein="default" data-easeout="default"
                        data-masterspeed="1400" data-thumb="img/home_page_5/100x50_0a8b7-brk_slide-1.jpg"
                        data-rotate="0" data-saveperformance="off" data-title="Slide" 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="{{$project->title}}" data-bgposition="center center"
                             data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg"
                             data-no-retina>
                        <div class="tp-caption rev_group" id="slide-35-layer-16"
                             data-x="['left','left','center','center']" data-hoffset="['15','16','0','0']"
                             data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                             data-width="['594','417','415','300']" data-height="['491','453','481','481']"
                             data-whitespace="nowrap" data-type="group" data-responsive_offset="on"
                             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-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; min-width: 594px; max-width: 594px; max-width: 491px; max-width: 491px; white-space: nowrap; font-size: 20px; line-height: 22px; font-weight: 400; color: #ffffff; letter-spacing: 0px;">
{{--                            <div class="tp-caption" id="slide-35-layer-3" data-x="['left','left','center','center']"--}}
{{--                                 data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']"--}}
{{--                                 data-voffset="['0','0','0','0']" data-fontsize="['26','20','20','18']"--}}
{{--                                 data-lineheight="['28','20','20','18']" data-width="none" data-height="none"--}}
{{--                                 data-whitespace="nowrap" data-type="text" data-responsive_offset="off"--}}
{{--                                 data-responsive="off"--}}
{{--                                 data-frames='[{"delay":"+0","speed":1000,"frame":"0","from":"z:0;rX:0deg;rY:0;rZ:0;sX:2;sY:2;skX:0;skY:0;opacity:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","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: 11; white-space: nowrap; font-size: 26px; line-height: 28px; font-weight: 200; color: #ffffff; letter-spacing: 0px;font-family:Montserrat;text-transform:uppercase;">--}}
{{--                                {{$project->caption}}--}}
{{--                            </div>--}}
                            <div class="tp-caption" id="slide-35-layer-4" data-x="['left','left','center','center']"
                                 data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']"
                                 data-voffset="['35','30','30','30']" data-fontsize="['60','40','40','20']"
                                 data-lineheight="['78','60','60','40']" data-width="none" data-height="none"
                                 data-whitespace="nowrap" data-type="text" data-responsive_offset="off"
                                 data-responsive="off"
                                 data-frames='[{"delay":"+0","speed":1000,"frame":"0","from":"z:0;rX:0deg;rY:0;rZ:0;sX:2;sY:2;skX:0;skY:0;opacity:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeOut"},{"delay":"wait","speed":1000,"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="['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: 12; white-space: nowrap; font-size: 76px; line-height: 78px; font-weight: 700; color: #ffffff; letter-spacing: 0px;font-family:'tajwal-med',sans-serif;text-transform:uppercase;">
                                {{$project->title}}
                            </div>
                            <div class="tp-caption tp-shape tp-shapewrapper" id="slide-35-layer-5"
                                 data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']"
                                 data-y="['top','top','top','top']" data-voffset="['145','115','107','89']"
                                 data-width="['570','400','400','300']" data-height="1" data-whitespace="nowrap"
                                 data-type="shape" data-responsive_offset="off" data-responsive="off"
                                 data-frames='[{"delay":"+0","speed":1500,"frame":"0","from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","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: 13;background-color:rgba(255,255,255,0.2);"></div>
                            <div class="tp-caption" id="slide-35-layer-7" data-x="['left','left','center','center']"
                                 data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']"
                                 data-voffset="['184','150','132','114']" data-fontsize="['16','14','13','13']"
                                 data-lineheight="['26','20','20','20']" data-width="['544','380','380','300']"
                                 data-height="['157','161','161','161']" data-whitespace="normal" data-type="text"
                                 data-responsive_offset="off" data-responsive="off"
                                 data-frames='[{"delay":"+0","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":1000,"frame":"999","to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","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','center','center']"
                                 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: 14; min-width: 544px; max-width: 544px; max-width: 157px; max-width: 157px; white-space: normal; font-size: 16px; line-height: 26px; font-weight: 400; color: #a5a3ff; letter-spacing: 0px;font-family:'tajwal-med',sans-serif;">
                                {{$project->description}}
                            </div>
                            <div class="tp-caption tp-shape tp-shapewrapper" id="slide-35-layer-6"
                                 data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']"
                                 data-y="['top','top','top','top']" data-voffset="['376','344','316','300']"
                                 data-width="['570','400','400','300']" data-height="1" data-whitespace="nowrap"
                                 data-type="shape" data-responsive_offset="off" data-responsive="off"
                                 data-frames='[{"delay":"+0","speed":1500,"frame":"0","from":"x:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","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: 15;background-color:rgba(255,255,255,0.2);"></div>
{{--                            <div class="tp-caption rev-btn rev-withicon brk-castom-btn" id="slide-35-layer-8"--}}
{{--                                 data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']"--}}
{{--                                 data-y="['top','top','top','top']" data-voffset="['416','384','343','327']"--}}
{{--                                 data-width="none" data-height="none" data-whitespace="nowrap" data-type="button"--}}
{{--                                 data-responsive_offset="off" data-responsive="off"--}}
{{--                                 data-frames='[{"delay":"+0","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","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);bg:rgb(39,117,255);bs:solid;bw:0 0 0 0;"}]'--}}
{{--                                 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="[16,16,16,16]" data-paddingright="[35,35,35,35]"--}}
{{--                                 data-paddingbottom="[16,16,16,16]" data-paddingleft="[25,25,25,25]"--}}
{{--                                 style="z-index: 16; white-space: nowrap; font-size: 16px; line-height: 20px; font-weight: 700; color: #2775ff; letter-spacing: 0px;font-family:Open Sans;text-transform:uppercase;background-color:rgb(255,255,255);border-color:rgba(0,0,0,1);border-radius:30px 30px 30px 30px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">--}}
{{--                                <i class="fa-icon-shopping-basket"></i> Add to cart--}}
{{--                            </div>--}}
{{--                            <div class="tp-caption" id="slide-35-layer-9" data-x="['left','left','center','center']"--}}
{{--                                 data-hoffset="['237','237','0','0']" data-y="['top','top','top','top']"--}}
{{--                                 data-voffset="['411','382','405','397']" data-width="none" data-height="none"--}}
{{--                                 data-whitespace="nowrap" data-type="text" data-responsive_offset="off"--}}
{{--                                 data-responsive="off"--}}
{{--                                 data-frames='[{"delay":"+0","speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"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="['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: 17; white-space: nowrap; font-size: 44px; line-height: 60px; font-weight: 200; color: #ffffff; letter-spacing: 0px;font-family:Montserrat;">--}}
{{--                                1,200$--}}
{{--                            </div>--}}
                        </div>
                        <div class="tp-caption tp-shape tp-shapewrapper tp-resizeme" id="slide-35-layer-14"
                             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="on"
                             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: linear-gradient(10deg, rgb(0, 2, 67) 0%, rgba(0, 2, 67, 0.6) 100%);"></div>
                        <div class="tp-caption tp-resizeme rs-parallaxlevel-4" id="slide-35-layer-11"
                             data-x="['left','left','left','left']" data-hoffset="['-241','-230','-230','-230']"
                             data-y="['top','top','top','top']" data-voffset="['-465','-290','-290','-290']"
                             data-width="none" data-height="none" data-whitespace="nowrap"
                             data-visibility="['on','on','off','off']" data-type="image" data-basealign="slide"
                             data-responsive_offset="on"
                             data-frames='[{"delay":10,"speed":1500,"frame":"0","from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","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;"><img
                                src="{{asset('website/img/home_page_5/97014-brk_slide_element-2.png')}}" alt=""
                                data-ww="['1328auto','850px','850px','850px']"
                                data-hh="['819px','524px','524px','524px']" data-no-retina></div>
                        <div class="tp-caption tp-resizeme rs-parallaxlevel-4" id="slide-35-layer-12"
                             data-x="['left','left','left','left']" data-hoffset="['-239','-230','-230','-230']"
                             data-y="['bottom','bottom','bottom','bottom']" data-voffset="['-468','-290','-290','-290']"
                             data-width="none" data-height="none" data-whitespace="nowrap"
                             data-visibility="['on','on','off','off']" data-type="image" data-basealign="slide"
                             data-responsive_offset="on"
                             data-frames='[{"delay":10,"speed":1500,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","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: 7;"><img
                                src="{{asset('website/img/home_page_5/97014-brk_slide_element-2.png')}}" alt=""
                                data-ww="['1328auto','850px','850px','850px']"
                                data-hh="['819px','524px','524px','524px']" data-no-retina></div>
                        <div class="tp-caption tp-resizeme rs-parallaxlevel-5" id="slide-35-layer-13"
                             data-x="['right','right','right','right']" data-hoffset="['-451','-342','-342','-342']"
                             data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                             data-width="none" data-height="none" data-whitespace="nowrap"
                             data-visibility="['on','on','off','off']" data-type="image" data-basealign="slide"
                             data-responsive_offset="on"
                             data-frames='[{"delay":10,"speed":1500,"frame":"0","from":"x:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","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: 8;"><img
                                src="{{asset('website/img/home_page_5/97014-brk_slide_element-2.png')}}" alt=""
                                data-ww="['1328auto','850px','850px','850px']"
                                data-hh="['819px','524px','524px','524px']" data-no-retina></div>
                        <div class="tp-caption" id="slide-35-layer-1" data-x="['right','right','right','right']"
                             data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']"
                             data-voffset="['-37','-37','-37','-37']" data-width="none" data-height="none"
                             data-whitespace="nowrap" data-visibility="['on','on','off','off']" data-type="image"
                             data-basealign="slide" data-responsive_offset="on"
                             data-frames='[{"delay":10,"speed":1500,"frame":"0","from":"x:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","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: 9;"><img
                                src="{{$project->projectPageImageSlider()}}" alt=""
                                data-ww="['770px','450px','450px','450px']" data-hh="['530px','368','368px','368px']"
                                data-no-retina></div>
                    </li>
                @endforeach

            </ul>
            <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
        </div>
    </div>
    <section class="pt-md-80  p-30 rtl">

        <div class="container">
            <div class="col-12">
                <div class="row">
                    <div class="col-md-5">
                        <img src="{{$project->section1Image()}}" class="img-fluid">
                    </div>
                    <div class="col-md-7">
                        <h4 class="brs-portfolio-list__subtitle font__family-montserrat font__size-14 font__weight-semibold line__height-26 text-left">{!! nl2br(e($project->caption_section_1)) !!}</h4>
                        <a href="#" class=" font__weight-blod  text-left   font__weight-semibold font__size-35 line__height-68 font__family-montserrat">{!! nl2br(e($project->title_section_1)) !!}</a>
                        <p class="brs-portfolio-list__description font__family-open-sans font__size-16 font__weight-normal line__height-26 text-left">
                            {{$project->description_section_1}}
                            {!! nl2br(e($project->description_section_1)) !!}
                        </p>

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

    </section>

    @if(count($project->mockupImages()))
        <div class="mt-100 mt-md-60">

            <div class="bg__style overlay__gradient pt-100 pb-100 lazyload"
                 data-bg="{{asset('website/img/bg-full_1.jpg')}}" data-brk-library="component__button">
                <span class="brk-abs-bg-overlay brk-bg-gradient-10deg-92"></span>
                <div class="mt-100 mt-md-130">

                    <div class="container mt-70 mt-md-150 mb--200 rtl ">
                        <div class="row">
                            <div class="col-xl-4 order-xl-1 ltr-important">

                                <div class="dm-width">
                                    <div class="dm-device">
                                        <div class="device">
                                            <div class="screen">
                                                <div class="slider">
                                                    @foreach($project->mockupImages() as $i=>$mockupImage)
                                                        <div class="slider__item slider__item--{{$i+1}}"
                                                             style="background-image:url('{{$mockupImage['image']}}')!important;">
                                                            {{$i+1}}
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-6 col-xl-4">
                                @for($i=0; $i<4; $i++)
                                    @if($i<2)
                                        <div
                                            class="text-xl-left text-center mt-50 mt-lg-140 wow fadeInLeft">
                                            <div class="app-dot-line left">
                                                <span class="dot"><span class="line"></span></span>
                                                <h2 class="font__family-montserrat font__size-124 font__weight-light white-text">
                                                    0{{$i+1}}</h2>
                                            </div>
                                            <div class="mt-10 ml-10">
                                                <h4 class="font__family-montserrat font__size-24 font__weight-light line__height-30 text-uppercase white-text">{{$project['text_number_'.$i+1]}}</h4>
                                            </div>
                                        </div>
                                    @endif
                                @endfor
                            </div>
                            <div class="col-md-6 col-xl-4 order-xl-2">
                                @for($i=0; $i<4; $i++)
                                    @if($i>=2)

                                        <div class="text-xl-right text-center mt-50 mt-xl-0 wow fadeInRight">
                                            <div class="app-dot-line right">
                                                <span class="dot"><span class="line"></span></span>
                                                <h2 class="font__family-montserrat font__size-124 font__weight-light white-text">
                                                    0{{$i+1}}</h2>
                                            </div>
                                            <div class="mt-10 ml-10">
                                                <h4 class="font__family-montserrat  font__size-24 font__weight-light line__height-30 text-uppercase white-text"
                                                    style="margin-left: 10%;"> {{$project['text_number_'.$i+1]}}</h4>
                                            </div>
                                        </div>
                                    @endif
                                @endfor

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

            </div>
        </div>

{{--<div class="mt-100 mt-md-60">--}}

{{--    <div class="bg__style overlay__gradient pt-100 pb-100 lazyload" data-bg="img/bg-full_1.jpg" data-brk-library="component__button">--}}
{{--        <span class="brk-abs-bg-overlay brk-bg-gradient-10deg-92"></span>--}}
{{--        <div class="mt-100 mt-md-130">--}}

{{--            <div class="container mt-70 mt-md-150 mb--200 rtl">--}}
{{--                <div class="row">--}}
{{--                    <div class="col-xl-4 order-xl-1 ltr-important">--}}

{{--                        <div class="dm-width">--}}
{{--                            <div class="dm-device">--}}
{{--                                <div class="device">--}}
{{--                                    <div class="screen">--}}
{{--                                        <div class="slider">--}}
{{--                                            <div class="slider__item slider__item--1">--}}
{{--                                                1--}}
{{--                                            </div>--}}
{{--                                            <div class="slider__item slider__item--2">--}}
{{--                                                2--}}
{{--                                            </div>--}}
{{--                                            <div class="slider__item slider__item--3">--}}
{{--                                                3--}}
{{--                                            </div>--}}
{{--                                            <div class="slider__item slider__item--4">--}}
{{--                                                4--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                    </div>--}}
{{--                    <div class="col-md-6 col-xl-4">--}}
{{--                        <div class="text-xl-left text-center mt-50 mt-lg-140 wow fadeInLeft">--}}
{{--                            <div class="app-dot-line left">--}}
{{--                                <span class="dot"><span class="line"></span></span>--}}
{{--                                <h2 class="font__family-montserrat font__size-124 font__weight-light white-text">01</h2>--}}
{{--                            </div>--}}
{{--                            <div class="mt-10 ml-10">--}}
{{--                                <h4 class="font__family-montserrat font__size-24 font__weight-light line__height-30 text-uppercase white-text">We Build--}}
{{--                                    Amazing</h4>--}}
{{--                                <h4 class="font__family-montserrat font__size-24 font__weight-bold line__height-30 text-uppercase white-text">--}}
{{--                                    Projects</h4>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="text-xl-left text-center mt-50 mt-lg-140 wow fadeInLeft">--}}
{{--                            <div class="app-dot-line left">--}}
{{--                                <span class="dot"><span class="line"></span></span>--}}
{{--                                <h2 class="font__family-montserrat font__size-124 font__weight-light white-text">03</h2>--}}
{{--                            </div>--}}
{{--                            <div class="mt-10 ml-10">--}}
{{--                                <h4 class="font__family-montserrat font__size-24 font__weight-light line__height-30 text-uppercase white-text">We Build--}}
{{--                                    Amazing</h4>--}}
{{--                                <h4 class="font__family-montserrat font__size-24 font__weight-bold line__height-30 text-uppercase white-text">--}}
{{--                                    Projects</h4>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="col-md-6 col-xl-4 order-xl-2">--}}
{{--                        <div class="text-xl-right text-center mt-50 mt-xl-0 wow fadeInRight">--}}
{{--                            <div class="app-dot-line right">--}}
{{--                                <span class="dot"><span class="line"></span></span>--}}
{{--                                <h2 class="font__family-montserrat font__size-124 font__weight-light white-text">02</h2>--}}
{{--                            </div>--}}
{{--                            <div class="mt-10 ml-10">--}}
{{--                                <h4 class="font__family-montserrat font__size-24 font__weight-light line__height-30 text-uppercase white-text">We Build--}}
{{--                                    Amazing</h4>--}}
{{--                                <h4 class="font__family-montserrat font__size-24 font__weight-bold line__height-30 text-uppercase white-text">--}}
{{--                                    Projects</h4>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="text-xl-right text-center mt-50 mt-lg-140 wow fadeInRight">--}}
{{--                            <div class="app-dot-line right">--}}
{{--                                <span class="dot"><span class="line"></span></span>--}}
{{--                                <h2 class="font__family-montserrat font__size-124 font__weight-light white-text">04</h2>--}}
{{--                            </div>--}}
{{--                            <div class="mt-10 ml-10">--}}
{{--                                <h4 class="font__family-montserrat font__size-24 font__weight-light line__height-30 text-uppercase white-text">We Build--}}
{{--                                    Amazing</h4>--}}
{{--                                <h4 class="font__family-montserrat font__size-24 font__weight-bold line__height-30 text-uppercase white-text">--}}
{{--                                    Projects</h4>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}

{{--    </div>--}}
{{--</div>--}}

    @endif
    <section class="pt-md-80  p-30 rtl">

        <div class="container">
            <div class="col-12">
                <div class="row">

                    <div class="col-md-7">
                        <h4 class="brs-portfolio-list__subtitle font__family-montserrat font__size-14 font__weight-semibold line__height-26 text-left">{{$project->caption_section_2}}</h4>
                        <a href="#" class=" font__weight-blod  text-left   font__weight-semibold font__size-35 line__height-68 font__family-montserrat">{{$project->title_section_2}}</a>
                        <p class="brs-portfolio-list__description font__family-open-sans font__size-16 font__weight-normal line__height-26 text-left">
                            {{$project->description_section_2}}
                            {!! nl2br(e($project->description_section_2)) !!}
                        </p>

                    </div>
                    <div class="col-md-5">
                        <img src="{{$project->section2Image()}}" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>

    </section>


    <div class="brk-paraxify overflow-hid mt-30" 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 rtl">
                    <div class="all-light text-md-left text-center pt-md-70 pb-md-70 pt-10 pb-10 pl-30">
                        <div class="ml-md-30 text-center">
                            <h4 class="font__family-montserrat font__weight-bold font__size-30  mt-20">
                                {{__('website.request-a-mobile-app-design')}}
                            </h4>
                            <p class="font__family-montserrat font__weight-medium font__size-18 line__height-30 brk-white-font-color mt-40 mb-40 ">
                            {{__('website.request-a-mobile-app-design-desc')}}
                            <div class="col-12">
                                <div class="row text-center center-align mb-5">

                                    <a href="{{$project->google_store_link}}"
                                       target="_blank"
                                       class="btn btn-prime btn-prime-white btn-lg  border-radius-0 font__family-open-sans font__weight-bold btn-min-width-200 brk-library-rendered"
                                       data-brk-library="component__button">

                                        <span class="before"></span><span class="after"></span><span
                                            class="border-btn border-btn-white"></span> <i
                                            class="fa-brands fa-android"></i> {{__('website.google-play')}}
                                    </a>


                                    <a href="{{$project->app_store_link}}"
                                       target="_blank"
                                       class="btn btn-prime btn-prime-white btn-lg  border-radius-0 font__family-open-sans font__weight-bold btn-min-width-200 brk-library-rendered"
                                       data-brk-library="component__button">


                                        <span class="before"></span><span class="after"></span><span
                                            class="border-btn border-btn-white"></span><i
                                            class="fa-brands fa-apple"></i> {{__('website.app-play')}}
                                    </a>

                                </div>
                            </div>
                            <div class="col-12 ">
                                <a href="https://api.whatsapp.com/send?phone=+0201157771069&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.request-a-mobile-app-design')}}</span><span
                                        class="text border-btn">{{__('website.request-now')}} </span><span
                                        class="after">
											{{__('website.request-a-mobile-app-design')}}</span>
                                </a>
                            </div>
                        </div>


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

@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.layeranimation.min.js')}}"></script>
    <script defer="defer"
            src="{{asset('website/vendor/revslider/js/extensions/revolution.extension.navigation.min.js')}}"></script>
    <script defer="defer"
            src="{{asset('website/vendor/revslider/js/extensions/revolution.extension.parallax.min.js')}}"></script>
    <script defer="defer"
            src="{{asset('website/vendor/revslider/js/extensions/revolution.extension.slideanims.min.js')}}"></script>
@endsection



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

            function onLoad() {
                if (tpj === undefined) {
                    tpj = jQuery;
                    if ("on" == "on") tpj.noConflict();
                }
                if (tpj("#rev_slider_15_1").revolution == undefined) {
                    revslider_showDoubleJqueryError("#rev_slider_15_1");
                } else {
                    revapi15 = tpj("#rev_slider_15_1").show().revolution({
                        sliderType: "standard",
                        jsFileLocation: "vendor/revslider/js/",
                        sliderLayout: "fullscreen",
                        dottedOverlay: "none",
                        delay: 5000,
                        navigation: {
                            keyboardNavigation: "off",
                            keyboard_direction: "vertical",
                            mouseScrollNavigation: "off",
                            mouseScrollReverse: "default",
                            onHoverStop: "off",
                            arrows: {
                                style: "custom",
                                enable: true,
                                hide_onmobile: false,
                                hide_onleave: true,
                                hide_delay: 200,
                                hide_delay_mobile: 1200,
                                tmp: '',
                                left: {
                                    h_align: "left",
                                    v_align: "center",
                                    h_offset: 10,
                                    v_offset: 0
                                },
                                right: {
                                    h_align: "right",
                                    v_align: "center",
                                    h_offset: 10,
                                    v_offset: 0
                                }
                            }
                        },
                        responsiveLevels: [1240, 1024, 778, 480],
                        visibilityLevels: [1240, 1024, 778, 480],
                        gridwidth: [1230, 992, 768, 576],
                        gridheight: [960, 800, 960, 720],
                        lazyType: "none",
                        minHeight: "720",
                        parallax: {
                            type: "mouse",
                            origo: "enterpoint",
                            speed: 400,
                            speedbg: 0,
                            speedls: 0,
                            levels: [4, 6, 8, 10, 12, 30, 35, 40, 45, 46, 47, 48, 49, 50, 51, 55],
                            disable_onmobile: "on"
                        },
                        shadow: 0,
                        spinner: "spinner2",
                        stopLoop: "off",
                        stopAfterLoops: -1,
                        stopAtSlide: -1,
                        shuffle: "off",
                        autoHeight: "off",
                        fullScreenAutoWidth: "off",
                        fullScreenAlignForce: "off",
                        fullScreenOffsetContainer: "",
                        fullScreenOffset: "",
                        disableProgressBar: "on",
                        hideThumbsOnMobile: "on",
                        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>
    <script type="application/ld+json">

    {
    "@context": "https://schema.org",
    "@type": "Product",
    "description": " {{$project->meta_description}}",
    "name": "{{$project->title}}",
    "image": "{{$project->thumbnailImage()}}",
    }

    </script>

@endsection