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

@section('breadcrumb')
    <div class="breadcrumbs__section breadcrumbs__section-thin brk-bg-center-cover lazyload"
         data-bg="{{asset('website/img/contact-us/1920x260_1.jpg')}}" data-brk-library="component__breadcrumbs_css">
        <span class="brk-abs-bg-overlay brk-base-bg-gradient-right-100 opacity-90"></span>
        <div class="breadcrumbs__wrapper rtl">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 col-lg-12">
                        <div
                            class=" justify-content-lg-center  pr-40 pr-xs-0 breadcrumbs__title center">
                            <h2
                                class="brk-white-font-color font__weight-semibold font__size-48 line__height-68 font__family-montserrat">
                                {{__('website.about-us')}}
                            </h2>

                            <ol
                                class="breadcrumb font__family-montserrat font__size-15 mt-10 line__height-16 brk-white-font-color">
                                <li>
                                    <a href="{{route('website.home')}}">{{__('website.home')}}</a>

                                    @if(app()->getLocale() == 'ar')
                                        &nbsp;&nbsp;&nbsp;&nbsp;<i class="fal fa-chevron-left icon"></i>
                                    @else
                                        <i class="fal fa-chevron-right icon"></i>&nbsp;&nbsp;&nbsp;
                                    @endif
                                </li>
                                <li class="active"> {{__('website.about-us')}}</li>
                            </ol>

                        </div>

                    </div>

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

@endsection
@section('content')


            <section class="position-relative  mt-lg-50 mt-120 rtl">

                <div class="container">

                    <div class="row">

                        <div class="col-12 col-md-6">
                            <div class="extra__heading-3 mt-xl-200 mb-50 mb-xl-0" data-brk-library="component__title_section">
                                <div class="heading">
{{--                                    <h2 class="font__family-montserrat font__weight-ultralight font__size-40 text-uppercase"> {{__('website.quality')}}</h2>--}}
                                    <h2 class="font__family-montserrat font__weight-bold font__size-40 text-uppercase brk-base-font-color"> {{__('website.grand')}}
                                        <br>
                                        <span class="brk-color-base-3"> {{__('website.founders')}}</span>
                                    </h2>
                                </div>
                                <h2 class="font__family-montserrat font__weight-semibold letter-spacing-20 after-heading">
                                    {{__('website.grand')}}
                                </h2>
                                <p class="font__family-open-sans font__size-16 line__height-30">
                                    {{__('website.quality-founders')}}
                                </p>

                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="h-100 w-100 position-relative">
                                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                     data-src="{{asset('website/img/demo_shop_clothes/357x634_2.png')}}"
                                     class="position-relative position-md-absolute lazyload" alt="alt"
                                     style="left: 50%; transform: translateX(-50%); bottom: -53px; ">
                            </div>
                        </div>

                    </div>
                </div>
            </section>
            <section class=" mt-50 mb-50 rtl">
                <div class="brk-paraxify overflow-hid pb-20 " 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">


                            <div class="col-md-6">
                                <div class="all-light text-md-left  pt-md-70 pb-md-70 pt-10 pb-10 pl-30">
                                    <div class="ml-md-30 t-right ">
                                        <h4 class="font__family-montserrat font__weight-bold font__size-50  mt-20">
                                            {{__('website.grand-strategy')}}

                                        </h4>
                                        <p
                                            class="font__family-montserrat font__weight-medium font__size-18 line__height-30 brk-white-font-color mt-lg-40 mb-lg-40 mt-0 mb-0 ">
                                            {{__('website.grand-strategy-desc')}}

                                        </p>


                                    </div>


                                </div>
                            </div>
                            <div class="col-md-6">

                                <div class="container ">
                                    <div class="maxw-770">

                                        <div class="progress__wrapper progress__wide mt-lg-130 mt-0"
                                             data-brk-library="component__progress_bar">
                                            <div class="progress">
                                                <div data-valuemax="100" data-valuemin="0" data-valuenow="100"
                                                     class="progress__bar">
												<span
                                                        class="font__family-montserrat font__size-16 font__weight-semibold progress__bar-counter hide">100</span>
                                                </div>
                                                <h5
                                                        class="font__family-montserrat font__size-16 font__weight-medium progress__title">
                                                    {{__('website.ksa')}}
                                                </h5>
                                            </div>
                                        </div>
                                        <div class="progress__wrapper progress__wide"
                                             data-brk-library="component__progress_bar">
                                            <div class="progress">
                                                <div data-valuemax="100" data-valuemin="0" data-valuenow="80"
                                                     class="progress__bar">
												<span
                                                        class="font__family-montserrat font__size-16 font__weight-semibold progress__bar-counter hide">80</span>
                                                </div>
                                                <h5
                                                        class="font__family-montserrat font__size-16 font__weight-medium progress__title">
                                                    {{__('website.egypt')}}
                                                </h5>
                                            </div>
                                        </div>
                                        <div class="progress__wrapper progress__wide"
                                             data-brk-library="component__progress_bar">
                                            <div class="progress">
                                                <div data-valuemax="100" data-valuemin="0" data-valuenow="40"
                                                     class="progress__bar">
												<span
                                                        class="font__family-montserrat font__size-16 font__weight-semibold progress__bar-counter hide">40</span>
                                                </div>
                                                <h5
                                                        class="font__family-montserrat font__size-16 font__weight-medium progress__title">
                                                    {{__('website.kuwait')}}
                                                </h5>
                                            </div>
                                        </div>
                                        <div class="progress__wrapper progress__wide"
                                             data-brk-library="component__progress_bar">
                                            <div class="progress">
                                                <div data-valuemax="100" data-valuemin="0" data-valuenow="90"
                                                     class="progress__bar">
												<span
                                                        class="font__family-montserrat font__size-16 font__weight-semibold progress__bar-counter hide">90</span>
                                                </div>
                                                <h5
                                                        class="font__family-montserrat font__size-16 font__weight-medium progress__title">
                                                    {{__('website.uea')}}
                                                </h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
{{--                            <div class="col-md-6">--}}

{{--                                <div class="container ">--}}
{{--                                    <div class="maxw-770">--}}

{{--                                        <div class="progress__wrapper progress__wide mt-lg-130 mt-0"--}}
{{--                                             data-brk-library="component__progress_bar">--}}
{{--                                            <div class="progress">--}}
{{--                                                <div data-valuemax="100" data-valuemin="0" data-valuenow="100"--}}
{{--                                                     class="progress__bar">--}}
{{--												<span--}}
{{--                                                    class="font__family-montserrat font__size-16 font__weight-semibold progress__bar-counter hide">100</span>--}}
{{--                                                </div>--}}
{{--                                                <h5--}}
{{--                                                    class="font__family-montserrat font__size-16 font__weight-medium progress__title">--}}
{{--                                                    {{__('website.ksa')}}--}}
{{--                                                </h5>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <div class="progress__wrapper progress__wide"--}}
{{--                                             data-brk-library="component__progress_bar">--}}
{{--                                            <div class="progress">--}}
{{--                                                <div data-valuemax="100" data-valuemin="0" data-valuenow="80"--}}
{{--                                                     class="progress__bar">--}}
{{--												<span--}}
{{--                                                    class="font__family-montserrat font__size-16 font__weight-semibold progress__bar-counter hide">80</span>--}}
{{--                                                </div>--}}
{{--                                                <h5--}}
{{--                                                    class="font__family-montserrat font__size-16 font__weight-medium progress__title">--}}
{{--                                                    {{__('website.egypt')}}--}}

{{--                                                </h5>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <div class="progress__wrapper progress__wide"--}}
{{--                                             data-brk-library="component__progress_bar">--}}
{{--                                            <div class="progress">--}}
{{--                                                <div data-valuemax="100" data-valuemin="0" data-valuenow="40"--}}
{{--                                                     class="progress__bar">--}}
{{--												<span--}}
{{--                                                    class="font__family-montserrat font__size-16 font__weight-semibold progress__bar-counter hide">40</span>--}}
{{--                                                </div>--}}
{{--                                                <h5--}}
{{--                                                    class="font__family-montserrat font__size-16 font__weight-medium progress__title">--}}
{{--                                                    {{__('website.kuwait')}}--}}

{{--                                                </h5>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <div class="progress__wrapper progress__wide"--}}
{{--                                             data-brk-library="component__progress_bar">--}}
{{--                                            <div class="progress">--}}
{{--                                                <div data-valuemax="100" data-valuemin="0" data-valuenow="90"--}}
{{--                                                     class="progress__bar">--}}
{{--												<span--}}
{{--                                                    class="font__family-montserrat font__size-16 font__weight-semibold progress__bar-counter hide">90</span>--}}
{{--                                                </div>--}}
{{--                                                <h5--}}
{{--                                                    class="font__family-montserrat font__size-16 font__weight-medium progress__title">--}}
{{--                                                    {{__('website.uea')}}--}}

{{--                                                </h5>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
                        </div>
                    </div>
                </div>
            </section>
            @if(count($teams)>0)

                <section class="rtl">
                <div class="container  ">
                    <div class="container">
                        <div class="text-center mb-30">
                            <h2 class="font__family-montserrat 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"><span class="brk-base-font-color">{{__('website.grand')}}</span> {{__('website.team')}}
                            </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__family-montserrat font__size-18  line__height-26 opacity-50 letter-spacing-20 brk-library-rendered"
                                data-brk-library="component__title">
                                {{__('website.team-first-description')}}
                               <br> {{__('website.team-second-description')}}</h5>
                        </div>

                    </div>
                </div>
                <div class="container mb-30 mt-30 ">
                    <div class="row">
                        @foreach($teams as $team)

                        <div class="col-lg-3 col-sm-6">
                            <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>
            </section>
                @endif
            <div class="mt-50 mt-md-50 rtl">

                <div class="  bg__style overlay__gradient visible" style="background-image: url(img/bg-1920_1.jpg);">
                    <div class="container">
                        <div class="row no-gutters">
                            <div class="col-md-6 col-lg-3">
                                <div class="info-box__wrapper-shuffle text-center" data-brk-library="component__info_box">
                                    <img src="{{asset('website/img/390x370_1.jpg')}}" class="img-bottom" alt="alt">
                                    <img src="{{asset('website/img/390x370_1.jpg')}}" class="img-top" alt="alt">
                                    <div>
                                        <div class="svg-wrap">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
                                                <path fill="none" stroke="#F39C12" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M20.15,34.19L29.34,25c0,0,1.41,0,3.54,2.12S35,30.66,35,30.66l-9.19,9.19" />
                                                <path fill="none" stroke="#34495E" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M-1.06,66.72l-5.66-5.66l26.87-26.87c0,0,1.41,0,3.54,2.12s2.12,3.54,2.12,3.54L-1.06,66.72z" />
                                                <path fill="none" stroke="#34495E" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M20.15,34.19L29.34,25c0,0,1.41,0,3.54,2.12S35,30.66,35,30.66l-9.19,9.19" />
                                                <path fill="none" stroke="#34495E" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M-1.06,66.72l-5.66-5.66l26.87-26.87c0,0,1.41,0,3.54,2.12s2.12,3.54,2.12,3.54L-1.06,66.72z" />
                                                <path fill="none" stroke="#F9BF3B" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M16,22c0,0-0.4-1.2-1.6-2.4C13.2,18.4,12,18,12,18s1.2-0.4,2.4-1.6C15.6,15.2,16,14,16,14s0.4,1.2,1.6,2.4C18.8,17.6,20,18,20,18s-1.2,0.4-2.4,1.6C16.4,20.8,16,22,16,22z" />
                                                <path fill="none" stroke="#F9BF3B" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M30,9c0,0-0.1-0.3-0.4-0.6C29.3,8.1,29,8,29,8s0.3-0.1,0.6-0.4C29.9,7.3,30,7,30,7s0.1,0.3,0.4,0.6C30.7,7.9,31,8,31,8s-0.3,0.1-0.6,0.4C30.1,8.7,30,9,30,9z" />
                                                <path fill="none" stroke="#F9BF3B" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M44,22c0,0-0.6-1.8-2.4-3.6C39.8,16.6,38,16,38,16s1.8-0.6,3.6-2.4C43.4,11.8,44,10,44,10s0.6,1.8,2.4,3.6C48.2,15.4,50,16,50,16s-1.8,0.6-3.6,2.4C44.6,20.2,44,22,44,22z" />
                                                <path fill="none" stroke="#F9BF3B" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M52,31c0,0-0.1-0.3-0.4-0.6C51.3,30.1,51,30,51,30s0.3-0.1,0.6-0.4C51.9,29.3,52,29,52,29s0.1,0.3,0.4,0.6C52.7,29.9,53,30,53,30s-0.3,0.1-0.6,0.4C52.1,30.7,52,31,52,31z" />
                                                <path fill="none" stroke="#F9BF3B" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M42,48c0,0-0.4-1.2-1.6-2.4C39.2,44.4,38,44,38,44s1.2-0.4,2.4-1.6C41.6,41.2,42,40,42,40s0.4,1.2,1.6,2.4C44.8,43.6,46,44,46,44s-1.2,0.4-2.4,1.6C42.4,46.8,42,48,42,48z" />
                                            </svg>
                                        </div>
                                        <h3 class="font__family-montserrat font__weight-semibold font__size-28">{{__('website.our-vision')}}</h3>
                                        <p class="font__family-open-sans font__size-14">

                                            {{__('website.our-vision-desc')}}
                                            </p>
                                        <a href="{{route('website.projects')}}" class="btn btn-lg border-radius-25 font__family-open-sans font__weight-bold btn-inside-out btn-inside-out-invert" data-brk-library="component__button">
                                            <span class="before"> {{__('website.read-more')}}</span>
                                            <span class="text">{{__('website.read-more')}}</span>
                                            <span class="after">{{__('website.read-more')}}</span>
                                        </a>
                                        <span class="after-bg"><span class="after"></span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-3">
                                <div class="info-box__wrapper-shuffle bottom text-center" data-brk-library="component__info_box">
                                    <img src="{{asset('website/img/390x370_2.jpg')}}" class="img-bottom" alt="alt">
                                    <img src="{{asset('website/img/390x370_2.jpg')}}" class="img-top" alt="alt">
                                    <div>
                                        <div class="svg-wrap">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
                                                <path fill="none" stroke="#9CAAB9" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M42,31h1.43l0.35,2.94l2.65,1.1L49,33l2,2l-2.04,2.56l1.1,2.65L53,40.57v2.87l-2.94,0.35l-1.1,2.65L51,49l-2,2l-2.56-2.04l-2.65,1.1L43.43,53h-2.87l-0.35-2.94l-2.65-1.1L35,51l-2-2l2.04-2.56l-1.1-2.65L31,43.43v-2.87l2.94-0.35l1.1-2.65L33,35l2-2l2.56,2.04l2.65-1.1L40.57,31H42zM42,39c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3c1.66,0,3-1.34,3-3C45,40.34,43.66,39,42,39z" />
                                                <path fill="none" stroke="#95A5A6" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M23,7h1.04l1.01,4.31l2.02,0.54l3.03-3.23l1.81,1.04l-1.28,4.23l1.48,1.48l4.23-1.28l1.05,1.81l-3.22,3.03l0.54,2.02L39,21.96l0,2.08l-4.31,1.01l-0.54,2.02l3.22,3.03l-1.04,1.81l-4.23-1.28l-1.48,1.48l1.28,4.23l-1.81,1.05l-3.03-3.23l-2.02,0.54L24.04,39l-2.09,0l-1.01-4.31l-2.02-0.54l-3.02,3.23l-1.81-1.04l1.28-4.23l-1.48-1.48L9.66,31.9L8.62,30.1l3.23-3.03l-0.54-2.02L7,24.04l0-2.09l4.31-1.01l0.54-2.02L8.62,15.9l1.04-1.81l4.24,1.28l1.48-1.48L14.1,9.66l1.81-1.04l3.03,3.23l2.02-0.54L21.96,7H23zM23,17c-3.31,0-6,2.68-6,6c0,3.31,2.68,6,6,6c3.31,0,6-2.69,6-6C29,19.68,26.31,17,23,17z" />
                                            </svg>
                                        </div>
                                        <h3 class="font__family-montserrat font__weight-semibold font__size-28">{{__('website.our-customers')}}</h3>
                                        <p class="font__family-open-sans font__size-14">
                                            {{__('website.our-customers-desc')}}
                                          </p>
                                        <a href="{{route('website.projects')}}" class="btn btn-lg border-radius-25 font__family-open-sans font__weight-bold btn-inside-out btn-inside-out-invert" data-brk-library="component__button">
                                            <span class="before">{{__('website.read-more')}}</span>
                                            <span class="text">{{__('website.read-more')}}</span>
                                            <span class="after">{{__('website.read-more')}}</span>
                                        </a>
                                        <span class="after-bg"><span class="after"></span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-3">
                                <div class="info-box__wrapper-shuffle text-center" data-brk-library="component__info_box">
                                    <img src="{{asset('website/img/390x370_3.jpg')}}" class="img-bottom" alt="alt">
                                    <img src="{{asset('website/img/390x370_3.jpg')}}" class="img-top" alt="alt">
                                    <div>
                                        <div class="svg-wrap">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
                                                <path fill="none" stroke="#34495E" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M52.97,28.91C52.99,29.27,53,29.63,53,30" />
                                                <path fill="none" stroke="#34495E" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M51.55,21.96c0.26,0.7,0.48,1.4,0.67,2.11" />
                                                <path fill="none" stroke="#34495E" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M46.84,14.33c0.78,0.83,1.49,1.73,2.14,2.67" />
                                                <path fill="none" stroke="#34495E" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M49.8,42.19C45.75,48.75,38.27,53,30,53C17.3,53,7,42.7,7,30C7,17.3,17.3,7,30,7c4.17,0,8.22,1.11,11.78,3.24" />
                                                <polyline fill="none" stroke="#34495E" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points="43,41 51,41 51,49" />
                                                <line fill="none" stroke="#34495E" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="30" y1="31" x2="41" y2="24" />
                                                <line fill="none" stroke="#34495E" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="30" y1="31" x2="18" y2="19" />
                                                <path fill="none" stroke="#34495E" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" d="M52.97,28.91C52.99,29.27,53,29.63,53,30" />
                                                <path fill="none" stroke="#34495E" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" d="M51.55,21.96c0.26,0.7,0.48,1.4,0.67,2.11" />
                                                <path fill="none" stroke="#34495E" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" d="M46.84,14.33c0.78,0.83,1.49,1.73,2.14,2.67" />
                                                <path fill="none" stroke="#34495E" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" d="M49.8,42.19C45.75,48.75,38.27,53,30,53C17.3,53,7,42.7,7,30C7,17.3,17.3,7,30,7c4.17,0,8.22,1.11,11.78,3.24" />
                                                <polyline fill="none" stroke="#34495E" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" points="43,41 51,41 51,49" />
                                                <line fill="none" stroke="#34495E" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" x1="30" y1="31" x2="41" y2="24" />
                                                <line fill="none" stroke="#34495E" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" x1="30" y1="31" x2="18" y2="19" />
                                            </svg>
                                        </div>
                                        <h3 class="font__family-montserrat font__weight-semibold font__size-28">{{__('website.grand-expert')}}</h3>
                                        <p class="font__family-open-sans font__size-14">{{__('website.grand-expert-desc')}}</p>
                                        <a href="{{route('website.projects')}}" class="btn btn-lg border-radius-25 font__family-open-sans font__weight-bold btn-inside-out btn-inside-out-invert" data-brk-library="component__button">
                                            <span class="before">{{__('website.read-more')}}</span>
                                            <span class="text">{{__('website.read-more')}}</span>
                                            <span class="after">{{__('website.read-more')}}</span>
                                        </a>
                                        <span class="after-bg"><span class="after"></span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-3">
                                <div class="info-box__wrapper-shuffle text-center" data-brk-library="component__info_box">
                                    <img src="{{asset('website/img/390x370_3.jpg')}}" class="img-bottom" alt="alt">
                                    <img src="{{asset('website/img/390x370_3.jpg')}}" class="img-top" alt="alt">
                                    <div>
                                        <div class="svg-wrap">
                                            <i class="fa-solid fa-users fontawsome-icons"></i>
                                        </div>
                                        <h3 class="font__family-montserrat font__weight-semibold font__size-28">{{__('website.management')}}</h3>
                                        <p class="font__family-open-sans font__size-14">{{__('website.management-desc')}}</p>
                                        <a href="{{route('website.projects')}}" class="btn btn-lg border-radius-25 font__family-open-sans font__weight-bold btn-inside-out btn-inside-out-invert" data-brk-library="component__button">
                                            <span class="before">{{__('website.read-more')}}</span>
                                            <span class="text">{{__('website.read-more')}}</span>
                                            <span class="after">{{__('website.read-more')}}</span>
                                        </a>
                                        <span class="after-bg"><span class="after"></span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <span class="brk-abs-bg-overlay brk-base-bg-gradient-right-100  opacity-90 "></span>
                </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-24 text-uppercase main-title text-center">
                                            {{__('website.number-1')}}   </h4>
                                    </div>
                                    <p class="font__family-open-sans font__size-14 text-gray text-center">
                                        {{__('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-24 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-24 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-24 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>


        </main>
    </div>

@endsection