@extends('layouts.main')

@section('content')
<!-- ============================= span Content Start =================================== -->
<span class="display-zero">{!! $Locale = LaravelLocalization::getCurrentLocale() !!}</span>
<style type="text/css">
    .banner-area{background:url('{!! asset(option('Home_background')) !!}') no-repeat;
    background-size:cover}
</style>
    <!-- ===============================  About  ======================================== -->
    <section class="banner-area relative">
        <div class="overlay overlay-bg"></div>
        <div class="container">
            <div class="row justify-content-lg-end align-items-center banner-content">
                <div class="col-lg-12">
                    <h1 class="text-white">{!! __('main.About_Us') !!}</h1>
                    <!-- ===============================  About  ======================================== -->
                     @if($Locale == 'ar')
                      <p> {!! option('Home_ar') !!}. </p>
                     @elseif($Locale == 'fr')
                      <p> {!! option('Home_fr') !!}. </p>
                     @else
                      <p> {!! option('Home_en') !!}. </p>
                     @endif
                    <!-- ===============================  About  ======================================== -->
                </div>
            </div>
        </div>
    </section>
    <!-- ===============================  About area  =================================================== -->
    <section class="about_area lite_bg">
        <style type="text/css">
            .about_area .about_bg{
                background:linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url('{!! asset(option('Help_background')) !!}');background-repeat:no-repeat;background-size:cover;
                background-size:cover;
                position:absolute;right:0;top:0;height:100%;width:50%;z-index:-1}
        </style>
        <div class="container"> 
            <div class="row align-items-end">
                <div class="col-lg-5">
                    <div class="about_details lite_bg about-rtl">
                        <!-- ===============================  Home  ======================================== -->
                        <h2>{!! __('main.Who_are') !!}</h2>
                        <!-- ===============================  Home  ======================================== -->
                        <p class="mb-0">
                         {!! __('main.The_legal_2') !!}
                        </p>
                        <!-- ===============================  Home  ======================================== -->
                        <a href="{!! url('about') !!}" class="primary-btn mt-5">
                            {!! __('main.Read_more') !!}
                            <i class="fas fa-angle-double-right ml-1"></i>
                        </a>
                        <!-- ===============================  Home  ======================================== -->
                    </div>
                </div>
                <!-- ===============================  video  =============================================== -->
                <div class="col-lg-4 offset-lg-3 col-md-6 offset-md-1 d-lg-block d-none">
                    <div class="about_right about-video">
                        <div class="video-inner justify-content-center align-items-center d-flex">
                            <a id="play-home-video" class="video-play-button" 
                               href="{!! option('video') !!}">
                                <span></span>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- ===============================  video  ================================================ -->
            </div>
            <div class="about_bg d-lg-block d-none"></div>
        </div>
    </section>
<!--================ End About Area ========================================================================== -->
<section class="callto-area section-gap relative" data-parallax="scroll"  
     style="background:url({!! asset(option('Help_background')) !!}) 
     center no-repeat;background-size:cover;">
<div class="overlay overlay-bg"></div>
<div class="container text-center">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <p class="top_text">{!! __('main.Need_help') !!}</p>
            <!-- ===============================  Home  ============================ -->
            <div class="call-wrap mx-auto">
                <h1>{!! __('main.Volunteer_Area') !!}</h1>
                <p>{!! __('main.that_Our') !!}</p>
                <!-- ===============================  Home  ======================== -->
                <a href="{!! route('register') !!}" class="primary-btn mt-5 primary-btn-log">
                  {!! __('main.Sign_In') !!} <i class="fas fa-sign-in-alt ml-1"></i>
                </a>
                <!-- ===============================  Home  ========================= -->
            </div>
            <!-- ===============================  Home  ============================= -->
        </div>
    </div>
</div>
</section>
<!-- =============================== Content Start =========================================== -->
@endsection