@extends('web.layouts.container')

@section('content')
    <div class="about_head about-sec about-pg">
        <div class="container">
            <div class="content">
                <div class="row">
                    <div class="col-lg-7 valign">
                        <div class="cont">
                            <div class="sec-heading mb-5 wow fadeInDown" data-wow-duration="2s">
                                <span class="text-dark">{{__('abouts.who_we_are')}}</span>
                                <h1>{{__('abouts.call_handy')}}</h1>
                            </div>
                            <div class="text-box wow fadeInUp" data-wow-duration="2s">

                                <p>{!! $about->description !!}</p>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 ">
                        <div class="img">
                            <img src="{{getAgentPhotos($about->image)}}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Start about-sec-->
    <section class="about-sec about-pg main_back mt-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="image-box">
                        <img src="{{getAgentPhotos($about->who_are_image)}}" alt="">
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="sec-heading mb-5 wow fadeInDown" data-wow-duration="2s">
                        <span>{{__('abouts.who_we_are')}}</span>
                        <h1>{{$about->who_are_title}}</h1>
                    </div>
                    <div class="text-box wow fadeInUp" data-wow-duration="2s">

                        <p>{!! $about->who_are_description !!}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--start about-goals-->
    <section class="vision_misson">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="items">
                        <div class="icon">
                            <img src="{{asset('assets/web//images/icons/about-vision.svg')}}" alt="">
                        </div>
                        <div class="info">
                            <h6>{{__('abouts.vision')}}</h6>
                            <p>{!! $about->vision !!}</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="items">
                        <div class="icon">
                            <img src="{{asset('assets/web/images/icons/about-mission.svg')}}" alt="">
                        </div>
                        <div class="info">
                            <h6>{{__('abouts.mission')}}</h6>
                            <p>{!! $about->mission !!}</p>
                        </div>

                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="items">
                        <div class="icon">
                            <img src="{{asset('assets/web/images/icons/about-value.svg')}}" alt="">
                        </div>
                        <div class="info">
                            <h6>{{__('abouts.value')}}</h6>
                            <p>{!! $about->value !!}</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $('.counter').countUp({
            delay: 10,
            time: 2000
        });
    </script>
@endsection