@extends('web.layouts.container')

@section('content')
    <section class="ugc-det">
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <div class="text-box center-vr wow text-focus-in">
                        <h2 class="title mb-4">{{$title}}</h2>
                        <p class="p">{!! stripText($guc->description) !!}</p>
                    </div>
                </div>
                <div class="col-md-5">
                    <img src="{{asset($guc->image)}}" alt="" class="sec-img wow fadeInUp"/>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/ugc-1.png')}}" alt="" class="bg"/>
    </section>
    <!--Start statics-sec -->
    <section class="statics-sec">
        <div class="container">
            <div class="swiper-container statics-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="statics_card wow zoomIn"  >
                            <img src="{{asset('assets/web/images/icons/statics-2.svg')}}" alt="" class="icon mb-3"/>
                            <h1 class="counter">{{$guc->civil_engineers_no}}</h1>
                            <h6 class="label">{{__('gucs.civil_engineers')}}</h6>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="statics_card wow zoomIn"  >
                            <img src="{{asset('assets/web/images/icons/statics-2.svg')}}" alt="" class="icon mb-3"/>
                            <h1 class="counter">{{$guc->architects_engineers_no}}</h1>
                            <h6 class="label">{{__('gucs.architects_engineers')}}</h6>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="statics_card wow zoomIn"  >
                            <img src="{{asset('assets/web/images/icons/statics-2.svg')}}" alt="" class="icon mb-3"/>
                            <h1 class="counter">{{$guc->general_engineers_no}}</h1>
                            <h6 class="label">{{__('gucs.general_engineers')}}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

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