@extends('reachassuree_agent_web/theme-4/layouts.main')
@section('title', $data['title'])
@section('content')

<!-- PAGE TITLE ================================================== -->
<section class="page-title-section top-position1 bg-img cover-background left-overlay-dark" data-overlay-dark="6" data-background="{{ asset('assets-theme4/img/banner/page-title.png')}}">
    <div class="container">
        <div class="page-title">
            <div class="row">
                <div class="col-md-12">
                    <h1>About Us</h1>
                </div>
                <div class="col-md-12">
                    <ul class="ps-0">
                        <li><a href="{{ route('home.page') }}" class="text-white">Home</a></li>
                        <li><a href="{{route('about.us')}}" class="text-white">About Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="d-inline-block p-2 border border-width-2 border-white top-20 right-10 ani-move position-absolute rounded-circle z-index-1"></div>
    <div class="d-inline-block p-2 border border-width-2 border-white bottom-10 left-10 ani-left-right position-absolute z-index-1"></div>
    <img src="{{ asset('assets-theme4/img/content/shape5.png')}}" class="position-absolute top-20 left-5 ani-top-bottom z-index-1" alt="...">
</section>

<!-- ABOUT US ================================================== -->
<section>
    <div class="container">
        <div class="row align-items-center about-style3">
            <div class="col-lg-7 col-xl-6 mb-1-9 mb-sm-6 mb-lg-0 wow fadeIn" data-wow-delay="200ms">
                <div class="pe-md-6 pe-lg-1-9 position-relative text-center text-sm-start">
                    <img src="{{ asset('assets-theme4/img/content/about-07.png')}}" class="mb-sm-15 border-radius-5" alt="...">
                    <img src="{{ asset('assets-theme4/img/content/about-06.png')}}" class="position-absolute bottom-0 end-0 bg-white p-2 border-radius-5 d-none d-sm-block" alt="...">
                    <img src="{{ asset('assets-theme4/img/content/about-08.png')}}" class="position-absolute top-5 right-5 border-radius-5 d-none d-sm-block" alt="...">
                    <div class="bg-white border-primary-color border border-width-3 p-4 border-radius-10 about-quote ani-left-right d-none d-sm-block">
                        <p class="mb-0 text-dark">"That responsibility guides our work. Our singular goal is to help our customers and the people they care about." <span class="fw-bold"></span></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 col-xl-6 wow fadeIn" data-wow-delay="400ms">
                <div class="ps-xl-7">
                    <span class="text-muted text-uppercase small letter-spacing-4 d-block mb-3 font-weight-600">About Us</span>
                    <h2 class="display-22 display-sm-18 display-md-16 display-lg-14 display-xl-10 mb-lg-1-6">We're here to help you with exploring <span class="title-sm">protection.</span></h2>
                    <p class="mb-1-9 font-weight-600">With Very long more then 20 + Years of experience.</p>

                    <div class="horizontaltab tab-style1 clearfix">
                        <ul class="resp-tabs-list hor_1">
                            @php
                                $counter = 1;
                            @endphp
                            
                            @foreach($data['PageContent'] as $key => $value)
                                <li><span>{{ str_pad($counter, 2, '0', STR_PAD_LEFT) }}.</span> {{$value->topic_name}}</li>

                                @php
                                    $counter++;
                                @endphp
                            @endforeach
                        </ul>

                        <div class="resp-tabs-container hor_1 p-0">
                            @foreach($data['PageContent'] as $key => $value)
                                <div>
                                    {{$value->description}}
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection