@extends('website.layouts.master')

@section('title')
    {{__('website-trans.About')}}
@endsection

@section('content')
    <div style="height: 120px;"></div>

        <!-- ============================================================== -->
        <!-- About Us Container -->
        <!-- ============================================================== -->
        <div id="about-us" class="container-fluid about-us-container">
            <div class="row align-items-center">
                <div class="col-12 col-md-6 p-lg-3 p-md-2">
                    <div class="site-header">
                        <h2 class="site-blue-text">{{__('website-trans.About')}}</h2>
                        <div class="her-line"></div>
                        <div class="ver-line"></div>
                    </div>
                    <p class="text-secondary">
                        <strong>
                            {{App::getLocale() == 'ar' ? config('site.about_ar') : config('site.about_en')}}
                        </strong>
                    </p>
                </div>
                <div class="col-12 col-md-6">
                    <img
                        src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
                        style="border:rgb(239 143 0) solid .6rem; border-radius:50px;" class="w-100 h-100" alt="">
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- About Us container End -->
        <!-- ============================================================== -->

        <!-- ============================================================== -->
        <!-- Second About Us Container -->
        <!-- ============================================================== -->
    <div class="container-fluid  about-us-divs">
        <div class="row">
            <div class="col-12 col-md-6 about-us-text"
                 style="background:url('{{asset('website/assets/images/d1.jpg')}}') no-repeat ;">
                <div class="my-auto p-2 p-md-5 ">
                    <h1>
                        {{__('website-trans.ourMessage')}}
                    </h1>
                    <ul>
                        @foreach(explode('-', config('site.message_'. App::getLocale() ))  as $message)
                            <li>{{$message}}</li><br>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="col-12 col-md-6 about-us-img"
                 style=" background:url('https://images.unsplash.com/photo-1582005450386-52b25f82d9bb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80') no-repeat ;">

            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 about-us-img"
                 style="background:url('https://images.unsplash.com/photo-1556761175-b413da4baf72?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80') no-repeat ;">

            </div>
            <div class="col-12 col-md-6 about-us-text"
                 style="background:url('{{asset('website/assets/images/d2.jpg')}}') no-repeat ;">
                <div class="my-auto p-2 p-md-5  ">
                    <h1>
                        {{__('website-trans.ourVision')}}
                    </h1>
                    <ul>
                        @foreach(explode('-', config('site.vision_'. App::getLocale() ))  as $vision)
                            <li>{{$vision}}</li><br>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
        <!-- ============================================================== -->
        <!-- Second About Us Container End -->
        <!-- ============================================================== -->

    <div style="height: 120px;"></div>
@endsection