@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)}}">{{__('main.home')}}</a>
                </li>
                <li>
                    <a href="#"> {{__('abouts.head')}} </a>
                </li>
            </ul>
            <h4>{{__('abouts.head')}}</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=""> {{__('abouts.head')}}</h6>
                        <h2>{{$aboutTitle1}} <br>{{$aboutTitle2}}</h2>
                        <div class="text">{!! stripText($aboutDescription1) !!} </div>
                        <div class="text">{!! stripText($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 ?? null)}}" alt="" class="main_img">
{{--                        <img src="{{asset($about->about_image_2 ?? null)}}" 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($about->video_image ?? 'assets/web/images/serv2.png')}}" alt="" class="sec-img"/>
                        <a href="{{$about->video_url ?? null}}" 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 ?? null}}</h2>
                        <ul class="custom-list">
                            <li class="li">
                                <img src="{{asset('assets/web/images/icons/f1.svg')}}" alt="" class="icon"/>
                                {!! stripText($aboutVideoDescription1) !!}
                            </li>
                            <li class="li">
                                <img src="{{asset('assets/web/images/icons/f1.svg')}}" alt="" class="icon"/>
                                {!! stripText($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 ?? null}}</h5>
                            <div class="text">{!! stripText($about->vision_description ?? null) !!} </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 ?? null}}</h5>
                            <div class="text">{!! stripText($about->message_description ?? null) !!} </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 ?? null}}</h5>
                            <div class="text">{!! stripText($about->mission_description ?? null) !!} </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('inner_js')

@endsection