@extends('website.layouts.app')

@section('css')
    @if(app()->getLocale() == 'ar')
        <link rel="stylesheet" href="{{ url('website/css/elementor/frontend-rtl.min.css') }}" type="text/css">
    @else
        <link rel="stylesheet" href="{{ url('website/css/elementor/frontend.min.css') }}" type="text/css">
    @endif
    <link rel="stylesheet" href="{{ url('website/css/elementor/global.css') }}" type="text/css">
@endsection


@section('content')

    @include('website.pages.layouts.page_title', [
        'title' => __('translate.about')
    ])

    <div id="post-2018" class="post-2018 page type-page status-publish hentry">

        <div class="entry-content">
            <div data-elementor-type="wp-page" data-elementor-id="2018" class="elementor elementor-2018">
                <div class="elementor-inner">
                    <div class="elementor-section-wrap">
                        <section class="elementor-section elementor-top-section elementor-element elementor-element-a37f1ae elementor-section-full_width about-area ptb-80 elementor-section-height-default elementor-section-height-default" data-id="a37f1ae" data-element_type="section">
                            <div class="elementor-container elementor-column-gap-no">
                                <div class="elementor-row">
                                    <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9f342c8" data-id="9f342c8" data-element_type="column">
                                        <div class="elementor-column-wrap elementor-element-populated">
                                            <div class="elementor-widget-wrap">
                                                <div class="elementor-element elementor-element-9d39e94 elementor-widget elementor-widget-StartNext_About_Us" data-id="9d39e94" data-element_type="widget" data-widget_type="StartNext_About_Us.default">
                                                    <div class="elementor-widget-container">
                                                        <div class="container">
                                                            <div class="row">
                                                                <div class="col-lg-6 col-md-12">
                                                                    <div class="about-image">
                                                                        <img decoding="async" src="{{ url('website/assets/images/uploads/2019/04/1-1-1-1-3.png') }}" alt="About us">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-6 col-md-12">
                                                                    <div class="about-content">
                                                                        <div class="section-title">
                                                                            <h2>{{ __('translate.about_us') }}</h2>
                                                                            <div class="bar"></div>

                                                                            <p>{{ config('settings.about_us_'.app()->getLocale()) }}</p>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="about-inner-area">
                                                                    <div class="row">
                                                                        @foreach ($sections as $section)
                                                                            <div class="col-lg-4 col-md-6">
                                                                                <div class="about-text">
                                                                                    <h3>{{ app()->getLocale() == 'ar' ? $section->title_ar : $section->title_en  }}</h3>
                                                                                    <p>{{ app()->getLocale() == 'ar' ? $section->description_ar : $section->description_en  }}</p>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section class="elementor-section elementor-top-section elementor-element elementor-element-4782e45b elementor-section-full_width team-area ptb-80 bg-f9f6f6 elementor-section-height-default elementor-section-height-default" data-id="4782e45b" data-element_type="section">
                            <div class="elementor-container elementor-column-gap-default">
                                <div class="elementor-row">
                                    <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3dbd16a4" data-id="3dbd16a4" data-element_type="column">
                                        <div class="elementor-column-wrap elementor-element-populated">
                                            <div class="elementor-widget-wrap">
                                                <div class="elementor-element elementor-element-6245ccd3 elementor-widget elementor-widget-Section" data-id="6245ccd3" data-element_type="widget" data-widget_type="Section.default">
                                                    <div class="elementor-widget-container">
                                                        <div class="section-title">
                                                            <h2>{{ __('translate.our_team') }}</h2>
                                                            <div class="bar"></div>
        
                                                            <p>{{ __('translate.our_team_desc') }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="elementor-element elementor-element-5b94308 elementor-widget elementor-widget-StartNext_Team" data-id="5b94308" data-element_type="widget" data-widget_type="StartNext_Team.default">
                                                    <div class="elementor-widget-container">
                                                        <div class="container">
                                                            <div class="row">

                                                                @foreach($teams as $team)
                                                                    <div class="col-lg-3 col-md-6">
                                                                        <div class="single-team">
                                                                            <div class="team-image">
                                                                                <img decoding="async" src="{{ asset('storage/'.$team->image) }}" alt="{{ $team->name_en }}" class="wow fadeInDown bannerrightimg">
                                                                            </div>

                                                                            <div class="team-content">
                                                                                <div class="team-info">
                                                                                    <h3>{{ app()->getLocale() == 'ar' ? $team->name_ar : $team->name_en }}</h3>
                                                                                    <span>{{ app()->getLocale() == 'ar' ? $team->title_ar : $team->title_en }}</span>
                                                                                </div>
                                                                                <ul>
                                                                                    @foreach($team->links as $key => $link)
                                                                                        @if($link)
                                                                                            <li>
                                                                                                <a href="{{ $link }}">
                                                                                                    <i class="
                                                                                                        @if($key == 'facebook')
                                                                                                            fab fa-{{ $key }}-f
                                                                                                        @else
                                                                                                            fa-brands fa-{{ $key }}
                                                                                                        @endif
                                                                                                    "></i>
                                                                                                </a>
                                                                                            </li>
                                                                                        @endif
                                                                                    @endforeach
                                                                                </ul>
                                                                                <p>{{ app()->getLocale() == 'ar' ? $team->description_ar : $team->description_en }}</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section class="elementor-section elementor-top-section elementor-element elementor-element-43cbcc29 elementor-section-full_width funfacts-area ptb-80 elementor-section-height-default elementor-section-height-default" data-id="43cbcc29" data-element_type="section">
                            <div class="elementor-container elementor-column-gap-default">
                                <div class="elementor-row">
                                    <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2fae4102" data-id="2fae4102" data-element_type="column">
                                        <div class="elementor-column-wrap elementor-element-populated">
                                            <div class="elementor-widget-wrap">
                                                <div class="elementor-element elementor-element-5f6c0ffe elementor-widget elementor-widget-Section" data-id="5f6c0ffe" data-element_type="widget" data-widget_type="Section.default">
                                                    <div class="elementor-widget-container">
                                                        <div class="section-title">
                                                            <h2>{{ __('translate.about_understand') }}</h2>
                                                            <div class="bar"></div>
                            
                                                            <p>{{ __('translate.about_understand_desc') }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <section class="elementor-section elementor-inner-section elementor-element elementor-element-3936c5da elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="3936c5da" data-element_type="section">
                                                    <div class="elementor-container elementor-column-gap-default">
                                                        <div class="elementor-row">
                                                            <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-2bae0a3e" data-id="2bae0a3e" data-element_type="column">
                                                                <div class="elementor-column-wrap elementor-element-populated">
                                                                    <div class="elementor-widget-wrap">
                                                                        <div class="elementor-element elementor-element-2f8403c4 elementor-widget elementor-widget-FunFacts" data-id="2f8403c4" data-element_type="widget" data-widget_type="FunFacts.default">
                                                                            <div class="elementor-widget-container">
                                                                                <div class="funfact">
                                                                                    <h3>1<span class="odometer odometer-auto-theme" data-count="250"><div class="odometer-inside"><span class="odometer-digit"><span class="odometer-digit-spacer">8</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner"><span class="odometer-value">0</span></span></span></span></span></div></span>+</h3>
                                                                                    <p>Customer</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-23b0d3f0" data-id="23b0d3f0" data-element_type="column">
                                                                <div class="elementor-column-wrap elementor-element-populated">
                                                                    <div class="elementor-widget-wrap">
                                                                        <div class="elementor-element elementor-element-60a19626 elementor-widget elementor-widget-FunFacts" data-id="60a19626" data-element_type="widget" data-widget_type="FunFacts.default">
                                                                            <div class="elementor-widget-container">
                                                                                <div class="funfact">
                                                                                    <h3>90
                                                                                        <span class="odometer odometer-auto-theme" data-count="230">
                                                                                            <div class="odometer-inside">
                                                                                                <span class="odometer-digit">
                                                                                                    <span class="odometer-digit-spacer">8</span>
                                                                                                    <span class="odometer-digit-inner">
                                                                                                        <span class="odometer-ribbon">
                                                                                                            <span class="odometer-ribbon-inner">
                                                                                                                <span class="odometer-value">0</span>
                                                                                                            </span>
                                                                                                        </span>
                                                                                                    </span>
                                                                                                </span>
                                                                                            </div>
                                                                                        </span>+
                                                                                    </h3>
                                                                                    <p>Working hours</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-3013f19c" data-id="3013f19c" data-element_type="column">
                                                                <div class="elementor-column-wrap elementor-element-populated">
                                                                    <div class="elementor-widget-wrap">
                                                                        <div class="elementor-element elementor-element-5d291ffe elementor-widget elementor-widget-FunFacts" data-id="5d291ffe" data-element_type="widget" data-widget_type="FunFacts.default">
                                                                            <div class="elementor-widget-container">
                                                                                <div class="funfact">
                                                                                    <h3>5
                                                                                        <span class="odometer odometer-auto-theme" data-count="0">
                                                                                            <div class="odometer-inside">
                                                                                                <span class="odometer-digit">
                                                                                                    <span class="odometer-digit-spacer">8</span>
                                                                                                    <span class="odometer-digit-inner">
                                                                                                        <span class="odometer-ribbon">
                                                                                                            <span class="odometer-ribbon-inner">
                                                                                                                <span class="odometer-value">0</span>
                                                                                                            </span>
                                                                                                        </span>
                                                                                                    </span>
                                                                                                </span>
                                                                                            </div>
                                                                                        </span>+
                                                                                    </h3>
                                                                                    <p>Workers</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-58ea5b85" data-id="58ea5b85" data-element_type="column">
                                                                <div class="elementor-column-wrap elementor-element-populated">
                                                                    <div class="elementor-widget-wrap">
                                                                        <div class="elementor-element elementor-element-2d02d118 elementor-widget elementor-widget-FunFacts" data-id="2d02d118" data-element_type="widget" data-widget_type="FunFacts.default">
                                                                            <div class="elementor-widget-container">
                                                                                <div class="funfact">
                                                                                    <h3>5
                                                                                        <span class="odometer odometer-auto-theme" data-count="70">
                                                                                            <div class="odometer-inside">
                                                                                                <span class="odometer-digit">
                                                                                                    <span class="odometer-digit-spacer">8</span>
                                                                                                    <span class="odometer-digit-inner">
                                                                                                        <span class="odometer-ribbon">
                                                                                                            <span class="odometer-ribbon-inner">
                                                                                                                <span class="odometer-value">0</span>
                                                                                                            </span>
                                                                                                        </span>
                                                                                                    </span>
                                                                                                </span>
                                                                                            </div>
                                                                                        </span>+
                                                                                    </h3>
                                                                                    <p>Service provided</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </section>
                                                <div class="elementor-element elementor-element-54bae6e0 map-bg elementor-widget elementor-widget-image" data-id="54bae6e0" data-element_type="widget" data-widget_type="image.default">
                                                    <div class="elementor-widget-container">
                                                        <div class="elementor-image">
                                                            <img decoding="async" width="640" height="312" src="{{ asset('website/assets/images/uploads/2019/04/map-1-1-1-3-1.png') }}" class="attachment-large size-large wp-image-31" alt="" loading="lazy" sizes="(max-width: 640px) 100vw, 640px">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section class="elementor-section elementor-top-section elementor-element elementor-element-8549326 iot-partner-area bg-f9fafb elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="8549326" data-element_type="section">
                            <div class="elementor-container elementor-column-gap-no">
                                <div class="elementor-row">
                                    <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dd20f26" data-id="dd20f26" data-element_type="column">
                                        <div class="elementor-column-wrap elementor-element-populated">
                                            <div class="elementor-widget-wrap">
                                                <div class="elementor-element elementor-element-485c742 elementor-widget elementor-widget-Partner_Logo" data-id="485c742" data-element_type="widget" data-widget_type="Partner_Logo.default">
                                                    <div class="elementor-widget-container">
                                                        <div class="partner-slides owl-carousel owl-theme owl-loaded">
                                                            <div class="owl-stage-outer">
                                                                <div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 760px;">
                                                                    
                                                                    @foreach($parteners as $partener)
                                                                        <div class="owl-item active" style="width: 190px; margin-right: 0px;">
                                                                            <div class="col-lg-12 col-md-12">
                                                                                <div class="single-iot-partner">
                                                                                    <a href="{{ $partener->link }}">
                                                                                        <img decoding="async" src="{{ asset('storage/'.$partener->image) }}" alt="{{ $partener->name_en }}">
                                                                                        <img decoding="async" src="{{ asset('storage/'.$partener->image_hover) }}" alt="{{ $partener->name_en }}">
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    @endforeach

                                                                </div>
                                                            </div>
                                                            <div class="owl-controls">
                                                                <div class="owl-nav">
                                                                    <div class="owl-prev" style="display: none;">prev</div>
                                                                    <div class="owl-next" style="display: none;">next</div>
                                                                </div>
                                                                <div class="owl-dots" style="display: none;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div><!-- .entry-content -->
    </div>

@endsection