@extends('layouts.master')
@section('content')
@section('title', 'About Us')


<style>
    #section {
        padding: 0px 10px;
    }

    .hyperlink:hover {
        text-decoration: underline;
    }

</style>

@foreach ($page_content as $key=>$item)
@if( $layouts->attachment )
@if($lang == 'english')
<section class="heading-section" style="background-image: url(./assets/images/page/{{ $layouts->attachment }});">
    @else
    <section class="heading-section" style="background-image: url(../assets/images/page/{{ $layouts->attachment }});">
    @endif
@else
<section class="heading-section">
@endif
    <div data-aos="fade-right">
        @if($lang == 'english')
            <h1 class="text">{{$key}}</h1>
            @else
            <h1 class="text-right pr-3 text-white" style="font-family: Nafees">{{$key}}</h1>
            @endif
    </div>
    <div>

</section>

@include('layouts.breadcrumbs')

<div class="container">
    <section class="row  justify-content-center">
        <div class="col-md-12 col-md-12 col-sm-12">
            @foreach ($item as $content)
            @if(!$content->attachment)
            <div class="tm-section-top ">
                <div class="tm-section-2-text-top">
                    <h2 class="tm-section-2-header tm-mb-45 text-center text-bold">
                        @if($lang == 'english')
                        {{ $content->english_title }}
                        @else
                        <span style="font-family: Nafees">
                        {{ $content->urdu_title }}
                        </span>
                        @endif
                    </h2>
                    <p class="text-justify">
                        @if($lang == 'english')
                        {!! $content->english_content !!}
                        @else
                        {!! $content->urdu_content !!}
                        @endif
                    </p>

                </div>
            </div>
            @else
            <div class="row mt-4">
                @if($loop->index % 2 != 0)
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="tm-section-left ">
                        <div class="tm-section-2-text">
                            <h2 class="tm-section-2-header-m tm-mb-45 text-center text-bold">
                                @if($lang == 'english')
                                {{$content->english_title}}
                                @else
                                <span style="font-family: Nafees">
                                {{$content->urdu_title}}
                                </span>
                                @endif
                            </h2>
                            <p class="text-justify text-white">
                                @if($lang == 'english')
                                {!! $content->english_content !!}
                                @else
                                {!! $content->urdu_content !!}
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 col-sm-12">
                    @if($lang == 'english')
                    <div class="tm-img-container" style="background-image: url(./assets/images/page/{{$content->attachment}});
                        background-position: center;
                        background-size: 100% 100%;" id="image-1"></div>
                    @else
                    <div class="tm-img-container" style="background-image: url(../assets/images/page/{{$content->attachment}});
                            background-position: center;
                            background-size: 100% 100%;" id="image-1"></div>
                    @endif
                </div>
                @else

                <div class="col-lg-6 col-md-12 col-sm-12 mt-4">
                    @if($lang == 'english')
                    <div class="tm-img-container" style="background-image: url(./assets/images/page/{{$content->attachment}});
                            background-position: center;
                            background-size: 100% 100%;" id="image-2"></div>
                    @else
                    <div class="tm-img-container" style="background-image: url(../assets/images/page/{{$content->attachment}});
                                background-position: center;
                                background-size: 100% 100%;" id="image-2"></div>
                    @endif


                </div>
                <div class="col-lg-6 col-md-12 col-sm-12 mt-4">
                    <div class="tm-section-right ">
                        <div class="tm-section-2-text">

                            <h2 class="tm-section-2-header-m tm-mb-45 text-center text-bold">
                                @if($lang == 'english')
                                {{ $content->english_title }}
                                @else
                                <span style="font-family: Nafees">
                                {{ $content->urdu_title }}
                                </span>
                                @endif
                            </h2>
                            <p class="text-justify text-white">
                                @if($lang == 'english')
                                {!! $content->english_content !!}
                                @else
                                {!! $content->urdu_content !!}
                                @endif
                            </p>

                        </div>

                    </div>

                </div>
                @endif
            </div>
            @endif
            @endforeach
        </div>
    </section>




</div>

@endforeach


<!-- ======= Counts Section ======= -->

<div class="container" data-aos="fade-down" data-aos-delay='50'>
    <div class="section-title">
        <h3>Our Clients</h3>
        <p></p>
    </div>
</div>

<!-- ======= Counts Section ======= -->
<section id="counts" class="counts" style="display: none">
    <div class="container-fluid d-block" data-aos="fade-up">
        <div class="row justify-content-center">
            <div class="col-lg-3 col-md-6">
                <div class="count-box">
                    <i class="far fa-smile"></i>
                    <span data-purecounter-start="0" data-purecounter-end="20000" data-purecounter-duration="1"
                        class="purecounter"></span>
                    <p>Happy Clients</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mt-5 mt-md-0">
                <div class="count-box">
                    <i class="fas fa-tasks"></i>
                    <span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="1"
                        class="purecounter"></span>
                    <p>Projects</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
                <div class="count-box">
                    <i class="fas fa-headset"></i>
                    <span data-purecounter-start="0" data-purecounter-end="1463" data-purecounter-duration="1"
                        class="purecounter"></span>
                    <p>Hours Of Support</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
                <div class="count-box">
                    <i class="fas fa-hard-hat"></i>
                    <span data-purecounter-start="0" data-purecounter-end="50" data-purecounter-duration="1"
                        class="purecounter"></span>
                    <p>Hard Workers</p>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- ======= Clients Section ======= -->

<section id="clients" class="clients">
    <div class="container-fluid" data-aos="zoom-in">
        <div class="clients-slider swiper-container">
            <div class="swiper-wrapper align-items-center">
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client1.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client2.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client3.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client4.png')}}" class="img-fluid"
                        alt=""></div>

                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client5.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client6.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client7.jpg')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client8.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client9.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client10.jpg')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client11.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client12.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client13.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client14.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client15.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client16.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client17.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client18.png')}}" class="img-fluid"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="{{asset('assets/vendor/clientslider/assets/img/clients/client19.jpg')}}" class="img-fluid"
                        alt=""></div>

            </div>
            <div class="swiper-pagination"></div>
        </div>

    </div>
</section>


<script>
    $(document).ready(function () {
        $(window).bind('scroll', function () {
            if ($(this).scrollTop() > 1000) {
                $('#counts').fadeIn(250);
            }
        });

    });

</script>

@endsection