@extends('layout.front.master')

@section('content')

<div role="main" class="main">

    {{-- Hero Section --}}
    <section id="home" class="p-relative border-0 bg-dark overflow-hidden m-0 p-0">
        <div class="custom-hero-heading appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500">
            <strong>{{ config('site.welcome.hero_badge', 'Solutions') }}</strong>
        </div>
        <div class="custom-hero-bg">
            <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
                <defs>
                    <radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
                        <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate>
                        <stop offset="0%" class="custom-stop-color-1"></stop>
                        <stop offset="100%" class="custom-stop-color-1" stop-opacity="0"></stop>
                    </radialGradient>
                </defs>
                <rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)">
                    <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite"></animate>
                    <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite"></animate>
                    <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite"></animateTransform>
                </rect>
            </svg>
        </div>
        <div class="container p-relative z-index-3">
            <div class="row min-vh-100 align-items-center">
                <div class="col-lg-8 text-center text-lg-start">
                    <div class="overflow-hidden mb-1">
                        <h2 class="font-weight-semi-bold text-color-grey text-uppercase positive-ls-3 text-4-5 line-height-2 line-height-sm-7 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="100">{{ config('site.welcome.hero_subtitle', 'A creative solutions company') }}</h2>
                    </div>
                    <h1 class="text-color-light font-weight-bold custom-hero-font-1 pb-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.welcome.hero_heading', 'Helping you to meet the goals of the digital age') }}</h1>
                    <div class="d-block appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                        <a href="{{ route('front.about') }}" class="btn btn-modern btn-primary text-capitalize text-dark text-3 px-2 py-1 anim-hover-translate-top-5px transition-2ms">{{ __('Learn More') }} <i class="fas fa-arrow-right rotate-l-45 ms-2"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-absolute custom-el-1 custom-el-pos-1">
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
            </div>
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
            </div>
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
            </div>
        </div>
        <div class="p-absolute custom-el-2 custom-el-pos-2">
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="70" alt="">
            </div>
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="70" alt="">
            </div>
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="70" alt="">
            </div>
        </div>
    </section>

    {{-- Services Grid Section --}}
    @if(is_module_active('services'))
    <section id="grid">
        <div class="custom-grid-1">
            <div class="container">
                <div class="row">
                    @forelse($services->take(8) ?? [] as $index => $service)
                        <div class="col-6 col-lg-3">
                            <div class="custom-grid-1-item h-100">
                                <div class="custom-grid-1-img">
                                    <img class="p-relative" src="{{ asset($service->image ?? "cd-project/img/demos/creative-agency-2/services/services-" . ($index + 1) . ".jpg") }}" loading="lazy" alt="{{ $service->title }}">
                                </div>
                                <div class="custom-grid-1-text d-flex align-items-center h-100">
                                    <div class="ps-4">
                                        <div class="divider divider-small divider-small-lg mt-0 mb-3 text-center appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $index * 50 }}">
                                            <hr class="bg-color-grey-200">
                                        </div>
                                        <div class="overflow-hidden">
                                            <a href="{{ route('frontend.services.detail', $service->slug) }}" class="stretched-link text-decoration-none">
                                                <h3 class="font-weight-semi-bold text-capitalize text-6 line-height-2 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="{{ $index * 50 + 50 }}">{{ $service->title }}</h3>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        {{-- Servicios por defecto --}}
                        @php
                            $defaultServices = [
                                ['title' => __('Brand') . "\n" . __('Development'), 'img' => 1],
                                ['title' => __('Content') . "\n" . __('Marketing'), 'img' => 2],
                                ['title' => __('Graphic') . "\n" . __('Design'), 'img' => 3],
                                ['title' => __('Web') . "\n" . __('Development'), 'img' => 4],
                                ['title' => __('UX') . "\n" . __('Design'), 'img' => 5],
                                ['title' => __('App') . "\n" . __('Development'), 'img' => 6],
                                ['title' => __('Logo') . "\n" . __('Design'), 'img' => 7],
                                ['title' => __('Creative') . "\n" . __('Advertising'), 'img' => 8],
                            ];
                        @endphp
                        @foreach($defaultServices as $index => $service)
                            <div class="col-6 col-lg-3">
                                <div class="custom-grid-1-item h-100">
                                    <div class="custom-grid-1-img">
                                        <img class="p-relative" src="{{ asset("cd-project/img/demos/creative-agency-2/services/services-{$service['img']}.jpg") }}" loading="lazy" alt="">
                                    </div>
                                    <div class="custom-grid-1-text d-flex align-items-center h-100">
                                        <div class="ps-4">
                                            <div class="divider divider-small divider-small-lg mt-0 mb-3 text-center appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $index * 50 }}">
                                                <hr class="bg-color-grey-200">
                                            </div>
                                            <div class="overflow-hidden">
                                                <a href="{{ route('frontend.services.index') }}" class="stretched-link text-decoration-none">
                                                    <h3 class="font-weight-semi-bold text-capitalize text-6 line-height-2 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="{{ $index * 50 + 50 }}">{!! nl2br(e($service['title'])) !!}</h3>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    @endif

    {{-- Concept Section --}}
    <section id="concept">
        <div class="container bg-color-light p-relative z-index-2 py-1 mt-3">
            <div class="row py-5 my-5">
                <div class="col-lg-6 text-center">
                    <div class="d-flex mb-3">
                        <div class="p-2 flex-fill">
                            <div class="custom-el-3 bg-color-tertiary custom-border-radius-1 mx-auto appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="100">
                                <div class="custom-el-3-img">
                                    <img class="p-relative" src="{{ asset('cd-project/img/demos/creative-agency-2/concept/concept-1.jpg') }}" loading="lazy" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="p-2 flex-fill">
                            <div class="custom-el-3 bg-color-primary custom-border-radius-2 mx-auto appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="200"></div>
                        </div>
                        <div class="p-2 flex-fill">
                            <div class="custom-el-3 custom-el-3-pos-1 bg-color-dark custom-border-radius-3 mx-auto appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="300">
                                <div class="custom-el-3-img">
                                    <img class="p-relative" src="{{ asset('cd-project/img/demos/creative-agency-2/concept/concept-2.jpg') }}" loading="lazy" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex mb-3 custom-el-4-pos">
                        <div class="p-2 flex-fill">
                            <div class="custom-el-3 custom-el-3-pos-2 bg-color-dark custom-border-radius-4 ms-auto appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="400"></div>
                        </div>
                        <div class="p-2 flex-fill">
                            <div class="custom-el-3 bg-color-tertiary custom-border-radius-5 me-auto appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="500">
                                <div class="custom-el-3-img">
                                    <img class="p-relative" src="{{ asset('cd-project/img/demos/creative-agency-2/concept/concept-3.jpg') }}" loading="lazy" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h3 class="text-9 text-xl-11 line-height-3 text-transform-none font-weight-semibold mb-4 mb-lg-3 mb-xl-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250">{{ config('site.welcome.about_heading', 'Innovation to transform your organization.') }}</h3>
                    <p class="text-4-5 line-height-7 text-dark pb-1 mb-4 mb-lg-2 mb-xl-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">{{ config('site.welcome.about_text', 'Cras a elit sit amet leo accumsan volutpat. Suspendisse hendreriast ehicula leo, vel efficitur felis ultrices non. Cras a elit sit amet leo acun volutpat. Suspendisse hendrerit vehicula leo, vel efficitur fel.') }}</p>

                    <div class="d-block appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">
                        <div class="toggle toggle-minimal toggle-dark" data-plugin-toggle>
                            <section class="toggle">
                                <a class="toggle-title text-dark text-4">{{ config('site.welcome.about_section1_title', 'What We Do') }}</a>
                                <div class="toggle-content">
                                    <p>{{ config('site.welcome.about_section1_content', 'We provide comprehensive creative solutions including brand development, graphic design, web development, and digital marketing strategies tailored to your business needs.') }}</p>
                                </div>
                            </section>
                            <section class="toggle">
                                <a class="toggle-title text-dark text-4">{{ config('site.welcome.about_section2_title', 'Pro Experience') }}</a>
                                <div class="toggle-content">
                                    <p>{{ config('site.welcome.about_section2_content', 'With over 10 years of experience in the creative industry, our team brings expertise and innovation to every project, ensuring exceptional results for our clients.') }}</p>
                                </div>
                            </section>
                            <section class="toggle">
                                <a class="toggle-title text-dark text-4">{{ config('site.welcome.about_section3_title', 'Partners and Investors') }}</a>
                                <div class="toggle-content">
                                    <p>{{ config('site.welcome.about_section3_content', 'We work with leading companies and investors, building strong partnerships that drive growth and success in the digital marketplace.') }}</p>
                                </div>
                            </section>
                        </div>
                    </div>

                    <div class="d-block appear-animation pt-4" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                        <a href="{{ route('front.about') }}" class="btn btn-modern btn-primary text-capitalize text-dark text-3 px-2 py-1 anim-hover-translate-top-5px transition-2ms">{{ __('Learn More') }} <i class="fas fa-arrow-right rotate-l-45 ms-2"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- About Section --}}
    <section id="about">
        <div class="bg-color-dark p-relative z-index-1 custom-section-1 bg-position-center bg-size-cover" style="background-image: url({{ asset('cd-project/img/demos/creative-agency-2/backgrounds/background-1.jpg') }});">
            <div class="container py-4">
                <div class="row align-items-center py-5 my-5">
                    <div class="col-lg-5">
                        <h3 class="text-9 text-xl-11 line-height-3 text-light text-transform-none font-weight-semibold mb-4 mb-lg-3 mb-xl-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250">{{ config('site.welcome.split_heading', "Let's take your business to the next level!") }}</h3>
                        <p class="text-4-5 line-height-7 pb-1 mb-4 mb-lg-2 mb-xl-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">{{ config('site.welcome.split_text', 'Cras a elit sit amet leo accumsan volutpat. Suspendisse hendreriast ehicula leo, vel efficitur felis ultrices non.') }}</p>

                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="450">
                            <span class="badge bg-dark--100 font-weight-normal text-3-5 badge-md anim-hover-translate-top-5px transition-2ms me-2 mb-2">{{ config('site.welcome.split_badge_1', '10+ years experience') }}</span>
                            <span class="badge bg-dark--100 font-weight-normal text-3-5 badge-md anim-hover-translate-top-5px transition-2ms me-2 mb-2">{{ config('site.welcome.split_badge_2', 'Market-Focused') }}</span>
                            <span class="badge bg-dark--100 font-weight-normal text-3-5 badge-md anim-hover-translate-top-5px transition-2ms me-2 mb-2">{{ config('site.welcome.split_badge_3', 'Top expertise') }}</span>
                            <span class="badge bg-dark--100 font-weight-normal text-3-5 badge-md anim-hover-translate-top-5px transition-2ms me-2 mb-2">{{ config('site.welcome.split_badge_4', 'Corporate Investors') }}</span>
                            <span class="badge bg-dark--100 font-weight-normal text-3-5 badge-md anim-hover-translate-top-5px transition-2ms me-2 mb-2">{{ config('site.welcome.split_badge_5', 'Integrity & Innovation') }}</span>
                        </div>
                    </div>
                    <div class="col-lg-7 text-center">
                        <div class="d-block appear-animation pt-4" data-appear-animation="blurIn" data-appear-animation-delay="300">
                            <a href="{{ route('front.contact') }}" class="btn btn-modern btn-primary text-dark text-4 text-capitalize custom-btn-1 py-1 anim-hover-translate-top-5px transition-2ms">{{ __('Let\'s Talk') }} <i class="fas fa-arrow-right rotate-l-45 ms-2 p-relative bottom-12 right-7"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Client Logos --}}
        <div class="container py-1">
            <div class="row pt-5 mt-3">
                <div class="col text-center">
                    <h3 class="text-7 text-transform-none font-weight-semibold my-4 pt-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250">{{ __('Trusted by great companies like') }}</h3>
                </div>
            </div>
        </div>
        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="350">
            <div class="marquee custom-marquee-1 pt-4 d-flex" data-duration="40000" data-gap="10" data-duplicated="true" data-startVisible="true">
                <span class="d-flex align-items-center" data-clone-element="2">
                    @if(isset($clientLogos) && count($clientLogos) > 0)
                        @foreach($clientLogos as $logo)
                            <div class="px-5 py-1">
                                <img src="{{ asset($logo) }}" alt="" class="img-fluid" style="max-width: 140px;">
                            </div>
                        @endforeach
                    @else
                        @php
                            $logoNumbers = [8, 9, 10, 11, 12, 13];
                        @endphp
                        @foreach($logoNumbers as $logoNum)
                            <div class="px-5 py-1">
                                <img src="{{ asset("cd-project/img/logos/logo-{$logoNum}.png") }}" alt="" class="img-fluid" style="max-width: 140px;">
                            </div>
                        @endforeach
                    @endif
                </span>
            </div>
        </div>

        {{-- Featured Projects --}}
        @if(is_module_active('projects'))
        <div class="px-3 px-lg-0">
            <div class="container py-1">
                <div class="row py-5 my-3">
                    <div class="col text-center pt-5">
                        <h3 class="text-9 text-xl-11 line-height-3 text-transform-none font-weight-semibold mb-4 mb-lg-3 mb-xl-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250">{{ __('Loved by people') }} {{ __('check out how we help') }}<br>{{ __('customers across the') }} {{ __('globe.') }}</h3>
                    </div>
                </div>
                <div class="row py-5 my-3">
                    <div class="col text-center custom-projects-1">
                        @forelse(($featuredProjects ?? collect())->take(3) as $index => $project)
                            <div class="row {{ $index > 0 ? 'border-top' : '' }} {{ $loop->last ? 'border-bottom' : '' }}">
                                <div class="col-lg-2 order-3 order-lg-0 py-4 border-end ps-0 pe-0 pe-lg-4 m-0 text-start">
                                    <a href="{{ route('frontend.projects.show', $project->slug) }}" class="btn btn-modern btn-dark w-100 font-weight-semibold text-capitalize text-3 py-3 anim-hover-translate-top-5px transition-2ms mb-5 mb-lg-0">
                                        <span class="px-4 d-block ws-nowrap">{{ __('View Online') }} <i class="fas fa-arrow-right rotate-l-45 ms-2"></i></span>
                                    </a>
                                </div>
                                <div class="col-lg-6 py-4 border-end px-0 px-lg-4 m-0 text-start">
                                    <h3 class="text-8 text-transform-none font-weight-semibold mb-4 mt-5 mt-lg-3 pt-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250">{{ $project->title }}</h3>
                                    <p class="text-4-5 line-height-7 text-dark pb-1 mb-4 mb-lg-2 mb-xl-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">{{ Str::limit($project->description ?? $project->excerpt, 150) }}</p>
                                </div>
                                <div class="col-lg-4 p-0 ps-lg-4">
                                    <a href="{{ route('frontend.projects.show', $project->slug) }}">
                                        <img src="{{ asset($project->featured_image ?? "cd-project/img/demos/creative-agency-2/projects/project-" . ($index + 1) . ".jpg") }}" loading="lazy" class="img-fluid my-lg-4" alt="{{ $project->title }}">
                                    </a>
                                </div>
                            </div>
                        @empty
                            {{-- Proyectos por defecto --}}
                            @php
                                $defaultProjects = [
                                    ['title' => config('site.welcome.project_1_title', __('Proyecto destacado')), 'desc' => config('site.welcome.project_1_desc', __('Una breve descripción del proyecto, lo que se hizo y los resultados obtenidos.')), 'img' => 1],
                                    ['title' => config('site.welcome.project_2_title', __('Caso de éxito')), 'desc' => config('site.welcome.project_2_desc', __('Una breve descripción del proyecto, lo que se hizo y los resultados obtenidos.')), 'img' => 2],
                                    ['title' => config('site.welcome.project_3_title', __('Trabajo creativo')), 'desc' => config('site.welcome.project_3_desc', __('Una breve descripción del proyecto, lo que se hizo y los resultados obtenidos.')), 'img' => 3],
                                ];
                            @endphp
                            @foreach($defaultProjects as $index => $project)
                                <div class="row {{ $index > 0 ? 'border-top' : '' }} {{ $loop->last ? 'border-bottom' : '' }}">
                                    <div class="col-lg-2 order-3 order-lg-0 py-4 border-end ps-0 pe-0 pe-lg-4 m-0 text-start">
                                        <a href="{{ route('frontend.projects.index') }}" class="btn btn-modern btn-dark w-100 font-weight-semibold text-capitalize text-3 py-3 anim-hover-translate-top-5px transition-2ms mb-5 mb-lg-0">
                                            <span class="px-4 d-block ws-nowrap">{{ __('View Online') }} <i class="fas fa-arrow-right rotate-l-45 ms-2"></i></span>
                                        </a>
                                    </div>
                                    <div class="col-lg-6 py-4 border-end px-0 px-lg-4 m-0 text-start">
                                        <h3 class="text-8 text-transform-none font-weight-semibold mb-4 mt-5 mt-lg-3 pt-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250">{{ $project['title'] }}</h3>
                                        <p class="text-4-5 line-height-7 text-dark pb-1 mb-4 mb-lg-2 mb-xl-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">{{ $project['desc'] }}</p>
                                    </div>
                                    <div class="col-lg-4 p-0 ps-lg-4">
                                        <a href="{{ route('frontend.projects.index') }}">
                                            <img src="{{ asset("cd-project/img/demos/creative-agency-2/projects/project-{$project['img']}.jpg") }}" loading="lazy" class="img-fluid my-lg-4" alt="{{ $project['title'] }}">
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
        @endif
    </section>

    {{-- Numbers Section --}}
    <section id="numbers">
        <div class="container bg-color-light p-relative z-index-2 py-1">
            <div class="row pt-5 pb-3">
                <div class="col-lg-9">
                    <h3 class="text-9 text-xl-11 line-height-3 text-transform-none font-weight-semibold mb-4 mb-lg-3 mb-xl-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250">{{ config('site.welcome.numbers_heading', 'Excellent results for over more than 10 years in the creative market.') }}</h3>
                </div>
            </div>
            <div class="row">
                <div class="col pb-5">
                    <div class="carousel-half-full-width-wrapper carousel-half-full-width-right custom-carousel-1 pb-5 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="450">
                        <div class="owl-carousel owl-theme carousel-half-full-width-right mb-5" data-plugin-options="{'responsive': {'0': {'items': 1}, '768': {'items': 3}, '992': {'items': 4}, '1200': {'items': 4}}, 'nav': false, 'dots': false, 'margin': 20, 'autoplay': true, 'autoplayTimeout': 4000, 'loop': true}">
                            <div>
                                <div class="card border-0 border-radius-0 bg-color-dark">
                                    <div class="card-body">
                                        <h4 class="card-title mb-1 custom-font-size-1 font-weight-semi-bold text-light">{{ config('site.welcome.stat_1_value', '345+') }}</h4>
                                        <p class="text-4-5 line-height-7 text-light pb-0 mt-5 mb-0">{{ config('site.welcome.stat_1_label', 'Projects Completed') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="card border-0 border-radius-0 bg-color-dark">
                                    <div class="card-body">
                                        <h4 class="card-title mb-1 custom-font-size-1 font-weight-semi-bold text-light">{{ config('site.welcome.stat_2_value', '1000+') }}</h4>
                                        <p class="text-4-5 line-height-7 text-light pb-0 mt-5 mb-0">{{ config('site.welcome.stat_2_label', 'Satisfied Clients') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="card border-0 border-radius-0 bg-color-dark">
                                    <div class="card-body">
                                        <h4 class="card-title mb-1 custom-font-size-1 font-weight-semi-bold text-light">{{ config('site.welcome.stat_3_value', '123+') }}</h4>
                                        <p class="text-4-5 line-height-7 text-light pb-0 mt-5 mb-0">{{ config('site.welcome.stat_3_label', 'Awards Won') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="card border-0 border-radius-0 bg-color-dark">
                                    <div class="card-body">
                                        <h4 class="card-title mb-1 custom-font-size-1 font-weight-semi-bold text-light">{{ config('site.welcome.stat_4_value', '15+') }}</h4>
                                        <p class="text-4-5 line-height-7 text-light pb-0 mt-5 mb-0">{{ config('site.welcome.stat_4_label', 'Years Experience') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="card border-0 border-radius-0 bg-color-dark">
                                    <div class="card-body">
                                        <h4 class="card-title mb-1 custom-font-size-1 font-weight-semi-bold text-light">{{ config('site.welcome.stat_5_value', '45+') }}</h4>
                                        <p class="text-4-5 line-height-7 text-light pb-0 mt-5 mb-0">{{ config('site.welcome.stat_5_label', 'Team Members') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

@endsection