@extends('front.layouts.master')
@section('main_content')
<!--==============================
Breadcrumb Area
==============================-->
<section class="breadcrumb__area fix" data-background="{{ asset('uploads/'.$global_setting->banner) }}">
    <div class="breadcrumb__bg-shape"></div>
    <div class="container">
        <div class="row">
            <div class="col-xl-12 d-flex justify-content-center">
                <div class="breadcrumb__content">
                    <h3 class="title">{{ $global_page_item->about_page_title }}</h3>
                </div>
            </div>
            <div class="col-xl-12 d-flex justify-content-center">
                <div class="breadcrumb-wrap">
                    <nav class="breadcrumb">
                        <span property="itemListElement" typeof="ListItem">
                            <a href="{{ url('/') }}">{{ __('Home') }}</a>
                        </span>
                        <span class="breadcrumb-separator">/</span>
                        <span property="itemListElement" typeof="ListItem">{{ $global_page_item->about_page_title }}</span>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- breadcrumb-area-end -->

<!--==============================
About Area
==============================-->
@if($global_page_item->about_about_status == 'Show')
<section class="about-area-2 pt-120 pb-120 overflow-hidden">
    <div class="container">
        <div class="about-wrap2">
            <div class="row gx-60 gy-5 align-items-center">
                <div class="col-xl-6">
                    <div class="about-thumb2-1">
                        <div class="img2">
                            <div class="thumb image-anim">
                                <img src="{{ asset('uploads/'.$global_page_item->about_about_photo2) }}" alt="img">
                            </div>
                        </div>
                        <div class="about-bg-shape2-1">
                            <div class="shape1"></div>
                            <div class="shape2"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="section__title">
                        <span class="sub-title text-anim">{{ $global_page_item->about_about_subheading }}</span>
                        <h2 class="title text-anim2">
                            {!! nl2br($global_page_item->about_about_heading) !!}
                        </h2>
                    </div>
                    @if($global_page_item->about_about_text != '')
                    <p class="mt-30 mb-40">
                        {!! nl2br($global_page_item->about_about_text) !!}
                    </p>
                    @endif
                    <div class="checklist-wrap">
                        <ul class="list-wrap">
                            {!! $global_page_item->about_about_list_items !!}
                        </ul>
                    </div>
                    @if($global_page_item->about_about_phone != '')
                    <div class="cta-link"><i class="fas fa-phone-alt"></i> <a href="tel:{{ $global_page_item->about_about_phone }}">{{ $global_page_item->about_about_phone }}</a></div>
                    @endif
                    <div class="tg-button-wrap mt-30">
                        <a href="{{ route('appointment') }}" class="btn">
                            <span class="btn-text" data-text="{{ $global_page_item->about_about_button_text }}"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif
<!--======== / About Section ========-->


<!--==============================
Why Choose Us Area
==============================-->
@if($global_page_item->home_feature_status == 'Show')
<section class="wcu-area-1 pt-120 pb-120 smoke5-bg">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-8 col-lg-10">
                <div class="section__title text-center mb-50">
                    <span class="sub-title text-anim">{{ $global_page_item->home_feature_subheading }}</span>
                    <h2 class="title text-anim2">
                        {{ $global_page_item->home_feature_heading }}
                    </h2>
                </div>
            </div>
        </div>
        <div class="row gy-40">
            @foreach($features as $feature)
            <div class="col-xl-3 col-md-6">
                <div class="wcu-card">
                    <div class="box-icon">
                        {!! $feature->icon_code !!}
                    </div>
                    <h4 class="box-title">{{ $feature->name }}</h4>
                    <p class="box-text">
                        {!! nl2br($feature->content) !!}
                    </p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
<!--======== / Why Choose Us Section ========-->

<!--==============================
Counter Area
==============================-->
@if($global_page_item->about_counter_status == 'Show')
<section class="counter-area-1 pb-120 pt-120">
    <div class="container">

        <!-- Section Heading -->
        <div class="row justify-content-center text-center mb-50">
            <div class="col-lg-8">
                <div class="section-title">
                    <span class="sub-title">Our Achievements</span>
                    <h2 class="sec-title">Why Choose Us</h2>
                    <p>We take pride in our accomplishments and strive to deliver the best services for our clients.</p>
                </div>
            </div>
        </div>

        <!-- Counters -->
        <div class="row gy-30 justify-content-center">
            <div class="col-lg-4 col-md-6">
                <div class="counter-card">
                    <h3 class="counter-card_title"><span class="counter-number">{{ $counter_item->item1_number }}</span>+</h3>
                    <p class="counter-card_subtitle">{{ $counter_item->item1_title }}</p>
                    <p class="counter-card_text">
                        {!! nl2br($counter_item->item1_content) !!}
                    </p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="counter-card">
                    <h3 class="counter-card_title"><span class="counter-number">{{ $counter_item->item2_number }}</span>+</h3>
                    <p class="counter-card_subtitle">{{ $counter_item->item2_title }}</p>
                    <p class="counter-card_text">
                        {!! nl2br($counter_item->item2_content) !!}
                    </p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="counter-card">
                    <h3 class="counter-card_title"><span class="counter-number">{{ $counter_item->item3_number }}</span>+</h3>
                    <p class="counter-card_subtitle">{{ $counter_item->item3_title }}</p>
                    <p class="counter-card_text">
                        {!! nl2br($counter_item->item3_content) !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
@endif
<!--======== / Counter Section ========-->
@endsection