@php
    $aboutSetting = App\Models\AboutSetting::first();
@endphp
<section class="about-us v2 pt-50 pt-md-70 pt-xl-100">
    <div class="container">
        <div class="row">
            <div class="col-xl-7 order-xl-1">
                <div class="about-right">
                    <div class="about-small-img wow animate__fadeInUp" data-wow-delay="0.2s" data-wow-offset="20"
                        data-wow-duration="0.8s">
                        <img src="{{ asset('uploads/site/about/' . $aboutSetting->side_image) }}" alt="about-img">
                    </div>
                    <div class="experience wow animate__fadeInUp" data-wow-delay="0.4s" data-wow-offset="0"
                        data-wow-duration="0.8s">
                        <h3 class="text-3 text-xl-2 text-bold">{{ $aboutSetting->project_completed }}+</h3>
                        <h6 class="text-6 text-bold text-capital">Project Complete</h6>
                    </div>
                    <div class="about-big-img wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="0"
                        data-wow-duration="0.8s">
                        <img src="{{ asset('uploads/site/about/' . $aboutSetting->main_image) }}" alt="about-img">
                    </div>
                </div>
            </div>
            <div class="col-xl-5">
                <div class="about-content">
                    <div class="section-title v1">
                        <h6 class="text-para-1 text-xl-6 text-upper text-medium">About Us</h6>
                        <h2 class="text-5 text-xl-3 text-bold">{{ $aboutSetting->title }}</h2>
                        <p class="text-para-2 text-para-xl-1 text-reguler">{!! Str::limit($aboutSetting->content, 200, '...') !!}</p>
                    </div>
                    <ul class="all-btns">
                        <li><a href="{{ route('about') }}" class="link-anime v5 text-upper round-border-full">Discover
                                More <i class="my-icon icon-arrow-top-right"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>