@extends('frontend::layouts.master')
@section('content')

    <x-frontend::herobanner type="about" />

    <!-- Page Title -->
    <x-frontend::breadcrumb :items="$breadcrumb" current="{{ $about['name'] ?? '' }}" />

    <!-- Company Overview -->
    <section class="sect-about">
        <div class="container">
            <div class="row">
                {!! $about['detail'] ?? '' !!}
            </div>
        </div>
    </section>
    <section class="sect-about-b1">
        <div class="container">
            <div class="row">
                {!! $about['text'] ?? '' !!}
            </div>
        </div>
    </section>
    @if (!empty($services['list']))
        <section class="cta1 section-spacing-120 rr-ov-hidden">
            <div class="container rr-container-1350">
                @if (!empty($services['dt']))
                    <div class="col-md-12 headbar m-b-20 text-center">
                        <h2 class="h-title m-b-0 text-light animated fadeInUp visible" data-animate="fadeInUp" data-animate-delay="100">{!! $services['dt']['name'] ?? '' !!}</h2>
                        <div class="products-list-head__desc text-white">{!! $services['dt']['detail'] ?? '' !!}</div>
                    </div>
                @endif

                <div class="row gy-5 d-flex justify-content-center justify-content-between">
                    @foreach ($services['list'] as $ls)
                        <div class="col-xl-4 col-lg-6 col-md-6">
                            <div class="cta1-card">
                                <div class="cta1-card__icon">
                                    @if (!empty($ls['image']))
                                        <img src="{{ asset($ls['image']) }}" alt="">
                                    @endif
                                </div>
                                <h3 class="cta1-card__title">{!! $ls['name'] ?? '' !!}</h3>
                                <p class="cta1-card__subtitle">{!! $ls['desc'] ?? '' !!}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection