@extends('web.layouts.container')

@section('content')
    <!-- Start pg-header -->
    <div class="pg-header">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="#"><img src="{{asset('assets/web/images/icon-2.png')}}" alt="" class="icon"/></a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{__('abouts.head')}}</li>
                </ol>
            </nav>
            <h2 class="title text-center mb-0">{{__('abouts.head')}}</h2>
        </div>
    </div>
    <!-- Start about-pg -->
    <section class="about-pg about-pg2 section">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="text-box sec-heading center-vr">
                        <img src="{{asset($about->about_logo)}}" alt="" class="logo"/>
                        <p class="det ">{!! stripText($about->about_description_1) !!}</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="animate-img-box center-vr mt-5">
                        <img src="{{asset($about->about_image_1)}}" alt="" class="sec-img"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="last-item pt-5 mt-5">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="img-box2">
                            <img src="{{asset($about->about_image_2)}}" alt="" class="sec-img"/>
                            <img src="{{asset('assets/web/images/about-bg-1.png')}}" alt="" class="bg"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-box2 sec-heading mt-5 pt-5">
                                                        <h2 class="title mb-3 wow puff-in-center">{{__('abouts.about')}} <span class="primary"> {{__('abouts.marketzy')}}  </span>   </h2>
                            <p class="det wow zoomIn">{!! stripText($about->about_description_2) !!}</p>
                            <div class="inFlex mt-4">
                                <div class="feature_item wow fadeInUp">
                                    <img src="{{asset($about->about_icon_1)}}" alt="" class="icon"/>
                                    <p class="label mb-0">{{$about->icon_1_title}}</p>
                                </div>
                                <div class="feature_item wow fadeInUp">
                                    <img src="{{asset($about->about_icon_1)}}" alt="" class="icon"/>
                                    <p class="label mb-0">{{$about->icon_2_title}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Start services-sec -->
    @if(count($sections))
    <section class="services-sec section">
        <div class="inner">
            <div class="container">
                <div class="sec-heading text-center mb-5">
                    <h2 class="title wow puff-in-center">{{__('sections.title_1')}}</h2>
                    <p class="det wow zoomIn">{{__('sections.title_2')}}</p>
                </div>
                <div class="row">
                    @foreach($sections as $section)
                        <div class="col-lg-3 col-md-6">
                            <div class="service_card text-center wow fadeInUp">
                                <div class="icon-outer m-auto">
                                    <img src="{{asset($section->image)}}" alt="" class="icon"/>
                                </div>
                                <div class="content mt-4">
                                    <h5 class="title">{{$section->name}}</h5>

                                </div>
                                <span class="hvr"></span>
                            </div>
                        </div>
                    @endforeach

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

@section('inner_js')
    <script>
        $('.navbar').toggleClass('inner-nav home-nav');
    </script>
@endsection