@extends('web.layouts.container')

@section('content')
    <section class="inner_header">
        <img src="{{asset('assets/web/images/icons/inner.svg')}}" alt="" class="inner_shap">
        <div class="container">
            <ul class="links">
                <li>
                    <a href="{{LaravelLocalization::getLocalizedURL($lang, route('home'), [], true)}}">الرئيسية</a>
                </li>
                <li>
                    <a href="#"> من نحن </a>
                </li>
            </ul>
            <h4>من نحن</h4>
        </div>
    </section>
    <section class="about about-pg section_padding bg-white">
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="col-lg-7">
                    <div class="section_head wow fadeInUp">
                        <h6> <img src="{{asset('assets/web/images/sec_head_sh.svg')}}" alt=""> من نحن</h6>
                        <h2>{{$aboutTitle1}} <br>{{$aboutTitle2}}</h2>
                        <div class="text">{{$aboutDescription1}} </div>
                        <div class="text">{{$aboutDescription2}} </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="img wow fadeInUp" data-wow-delay="0.2s">
                        <img src="{{asset($about->about_image_1)}}" alt="" class="main_img">
                        <img src="{{asset($about->about_image_2)}}" alt="" class="sub_img wow zoomIn" data-wow-delay="0.5s">
                    </div>
                </div>
            </div>
            <div class="row mt-5 pt-5">
                <div class="col-md-5">
                    <div class="img-box wow fadeInUp">
                        <img src="{{asset('assets/web/images/serv2.png')}}" alt="" class="sec-img"/>
                        <a href="{{$about->video_url}}" class="play-btn" data-fancybox >
                            <i class="bi bi-play-circle"></i>
                        </a>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="section_head wow fadeInUp mt-5">
                        <h2>{{$about->video_title}}</h2>
                        <ul class="custom-list">
                            <li class="li">
                                <img src="{{asset('assets/web/images/icons/f1.svg')}}" alt="" class="icon"/>
                                {{$aboutVideoDescription1}}
                            </li>
                            <li class="li">
                                <img src="{{asset('assets/web/images/icons/f1.svg')}}" alt="" class="icon"/>
                                {{$aboutVideoDescription2}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="vision about-pg section_padding">
        <div class="container">
            <div class="row bx-5">
                <div class="col-lg-4">
                    <div class="items wow fadeInUp">
                        <div class="icon">
                            <i class="bi bi-eye"></i>
                        </div>
                        <div class="info">
                            <h5>{{$about->vision_title}}</h5>
                            <div class="text">{{$about->vision_description}} </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="items wow fadeInUp" data-wow-delay="0.2s">
                        <div class="icon">
                            <i class="bi bi-chat"></i>
                        </div>
                        <div class="info">
                            <h5>{{$about->message_title}}</h5>
                            <div class="text">{{$about->message_description}} </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="items wow fadeInUp" data-wow-delay="0.4s">
                        <div class="icon">
                            <i class="bi bi-bullseye"></i>
                        </div>
                        <div class="info">
                            <h5>{{$about->mission_title}}</h5>
                            <div class="text">{{$about->mission_description}} </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('inner_js')

@endsection