@extends('layout.front.master')

@section('title', config('site.name') . ' | ' . config('site.tagline', __('Welcome')))
@section('description', config('site.seo.description'))
@section('keywords', config('site.seo.keywords'))

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.og.title'))
@section('og_description', config('site.og.description'))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.name'))
@section('twitter_description', config('site.twitter.description'))
@section('twitter_image', brand_twitter_image())

@section('content')

<div>

    {{-- ============================================ --}}
    {{-- 1. HERO SLIDER SECTION --}}
    {{-- ============================================ --}}
    <section class="section bg-primary border-0 position-relative z-index-1 py-0 m-0">
        <div class="custom-slider-background overflow-hidden">
            <div class="custom-slider-background-image-stage-outer appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1600" data-plugin-options="{'forceAnimation': true}">
                <div class="custom-slider-background-image-stage">
                    <div class="custom-slider-background-image-item overlay overlay-show overlay-op-6" style="background-image: url({{ asset('cd-project/img/demos/architecture-2/slides/slide-1-1.jpg') }}); background-size: cover; background-position: center;"></div>
                    <div class="custom-slider-background-image-item overlay overlay-show overlay-op-6" style="background-image: url({{ asset('cd-project/img/demos/architecture-2/slides/slide-1-2.jpg') }}); background-size: cover; background-position: center;"></div>
                    <div class="custom-slider-background-image-item overlay overlay-show overlay-op-6" style="background-image: url({{ asset('cd-project/img/demos/architecture-2/generic/generic-1.jpg') }}); background-size: cover; background-position: center;"></div>
                    <div class="custom-slider-background-image-item overlay overlay-show overlay-op-6" style="background-image: url({{ asset('cd-project/img/demos/architecture-2/generic/generic-2.jpg') }}); background-size: cover; background-position: center;"></div>
                </div>
            </div>
            <div class="custom-slider-background-image-stage-outer appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1600" data-plugin-options="{'forceAnimation': true}">
                <div class="custom-slider-background-image-stage reverse">
                    <div class="custom-slider-background-image-item overlay overlay-show overlay-op-6" style="background-image: url({{ asset('cd-project/img/demos/architecture-2/generic/generic-2.jpg') }}); background-size: cover; background-position: center;"></div>
                    <div class="custom-slider-background-image-item overlay overlay-show overlay-op-6" style="background-image: url({{ asset('cd-project/img/demos/architecture-2/generic/generic-1.jpg') }}); background-size: cover; background-position: center;"></div>
                    <div class="custom-slider-background-image-item overlay overlay-show overlay-op-6" style="background-image: url({{ asset('cd-project/img/demos/architecture-2/slides/slide-1-1.jpg') }}); background-size: cover; background-position: center;"></div>
                    <div class="custom-slider-background-image-item overlay overlay-show overlay-op-6" style="background-image: url({{ asset('cd-project/img/demos/architecture-2/slides/slide-1-2.jpg') }}); background-size: cover; background-position: center;"></div>
                </div>
            </div>
        </div>
        <div class="owl-carousel-wrapper appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1600" style="height: 800px;">
            <div id="slider" class="owl-carousel dots-inside dots-horizontal-center show-dots-xs custom-dots-position nav-style-1 nav-inside nav-inside-plus nav-light nav-lg nav-font-size-lg mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'dots': true, 'nav': false}, '479': {'items': 1}, '768': {'items': 1}, '979': {'items': 1}, '1199': {'items': 1, 'nav': true, 'navVerticalOffset': '-100px', 'dots': false}}, 'loop': false, 'autoHeight': false, 'margin': 0, 'dots': true, 'dotsVerticalOffset': '-115px', 'nav': false, 'animateIn': 'fadeIn', 'animateOut': 'fadeOut', 'mouseDrag': false, 'touchDrag': false, 'pullDrag': false, 'autoplay': false, 'autoplayTimeout': 9000, 'autoplayHoverPause': true, 'rewind': true}">
                {{-- Carousel Slide 1 --}}
                <div class="position-relative overflow-hidden" data-dynamic-height="['800px','800px','800px','550px','500px']" style="height: 800px;">
                    <div class="container container-xl-custom custom-container-style-2 position-relative z-index-3 h-100 pt-5 mt-5 mt-sm-3">
                        <div class="row align-items-center h-100">
                            <div class="col">
                                <div class="overflow-hidden mb-2 mb-sm-1 mb-md-0">
                                    <h1 class="text-color-light font-weight-black line-height-1 text-10 text-md-13 text-lg-15 ls-0 mb-0 appear-animation" data-appear-animation="maskUp">{{ config('site.welcome.hero_title', 'Arch Design Studio') }}</h1>
                                </div>
                                <div class="overflow-hidden opacity-8 mb-1">
                                    <h2 class="text-color-light line-height-6 line-height-md-2 text-5 text-md-6 positive-ls-3 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">{{ config('site.welcome.hero_subtitle', 'A Very Personal Approach to Every Client') }}</h2>
                                </div>
                                <div class="overflow-hidden opacity-6 mb-5">
                                    <p class="text-color-light text-3-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="500">{{ config('site.welcome.hero_tagline', 'Elegant Solutions to Complex Problems') }}</p>
                                </div>
                                <a href="#start" data-hash data-hash-offset="0" data-hash-offset-lg="140" class="btn btn-primary custom-btn-style-1 font-weight-bold text-3 px-5 py-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="750">{{ __('GET STARTED') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- Carousel Slide 2 --}}
                <div class="position-relative overflow-hidden" data-dynamic-height="['800px','800px','800px','550px','500px']" style="height: 800px;">
                    <div class="container container-xl-custom custom-container-style-2 position-relative z-index-3 h-100 pt-5 mt-5 mt-sm-3">
                        <div class="row align-items-center justify-content-end h-100">
                            <div class="col text-end">
                                <div class="overflow-hidden mb-2 mb-sm-1 mb-md-0">
                                    <h1 class="text-color-light font-weight-black line-height-1 text-10 text-md-13 text-lg-15 ls-0 mb-0 appear-animation d-none" data-appear-animation="maskUp">{{ config('site.welcome.hero_title', 'Arch Design Studio') }}</h1>
                                </div>
                                <div class="overflow-hidden opacity-8 mb-1">
                                    <h2 class="text-color-light line-height-6 line-height-md-2 text-5 text-md-6 positive-ls-3 mb-0 appear-animation d-none" data-appear-animation="maskUp" data-appear-animation-delay="250">{{ config('site.welcome.hero_subtitle', 'A Very Personal Approach to Every Client') }}</h2>
                                </div>
                                <div class="overflow-hidden opacity-6 mb-5">
                                    <p class="text-color-light text-3-5 mb-0 appear-animation d-none" data-appear-animation="maskUp" data-appear-animation-delay="500">{{ config('site.welcome.hero_tagline', 'Elegant Solutions to Complex Problems') }}</p>
                                </div>
                                <a href="#start" data-hash data-hash-offset="0" data-hash-offset-lg="140" class="btn btn-primary custom-btn-style-1 custom-btn-style-1-right font-weight-bold text-3 px-5 py-3 appear-animation d-none" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="750">{{ __('GET STARTED') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="position-relative">
        <img src="{{ asset('cd-project/img/demos/architecture-2/backgrounds/arch-plan-1.jpg') }}" class="img-fluid position-absolute top-0 right-0" alt="" />
    </div>

    <div class="custom-page-wrapper">

        {{-- ============================================ --}}
        {{-- 2. SERVICES CAROUSEL + 3. ABOUT + 4. LOGOS + 5. PROCESS + 6. SKILLS --}}
        {{-- ============================================ --}}
        <section class="section bg-transparent border-0 position-relative py-0 m-0">

            {{-- 2. SERVICES CAROUSEL --}}
            @if(is_module_active('services'))
            <div class="container container-xl-custom custom-container-style custom-margin-top">
                <div class="row mb-5">
                    <div class="col">
                        <div class="overflow-hidden">
                            <div class="owl-carousel-wrapper position-relative z-index-1 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1000" style="height: 373px;">
                                <div class="owl-carousel owl-theme dots-horizontal-center custom-dots-style-1 mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 1}, '992': {'items': 2}, '1200': {'items': 3}}, 'margin': 25, 'loop': true, 'nav': false, 'dots': true, 'autoplay': true, 'autoplayTimeout': 7000}">
                                    @forelse(($services ?? collect())->take(4) as $service)
                                        <div>
                                            <a href="{{ route('frontend.services.detail', $service->slug) }}" class="text-decoration-none">
                                                <div class="card custom-card-style-1 border-radius-0">
                                                    <div class="card-body text-center p-5 mb-4">
                                                        <img width="75" height="75" src="{{ asset($service->icon ?? 'cd-project/img/demos/architecture-2/icons/house-plant.svg') }}" alt="{{ $service->title }}" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-3 mb-4 pb-3'}" />
                                                        <h2 class="text-color-dark font-weight-bold line-height-1 text-6-5 mb-3">{{ $service->title }}</h2>
                                                        <p class="mb-0">{{ Str::limit($service->description ?? '', 100, '...') }}</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @empty
                                        @php
                                            $defaultServices = [
                                                ['title' => 'Design & Planning', 'icon' => 'house-plant.svg'],
                                                ['title' => 'Interior Design', 'icon' => 'sofa.svg'],
                                                ['title' => 'Exterior Design', 'icon' => 'wallpaper.svg'],
                                                ['title' => 'Construction Drawings', 'icon' => 'house-plant.svg'],
                                            ];
                                        @endphp
                                        @foreach($defaultServices as $ds)
                                            <div>
                                                <a href="{{ route('frontend.services.index') }}" class="text-decoration-none">
                                                    <div class="card custom-card-style-1 border-radius-0">
                                                        <div class="card-body text-center p-5 mb-4">
                                                            <img width="75" height="75" src="{{ asset('cd-project/img/demos/architecture-2/icons/' . $ds['icon']) }}" alt="{{ $ds['title'] }}" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-3 mb-4 pb-3'}" />
                                                            <h2 class="text-color-dark font-weight-bold line-height-1 text-6-5 mb-3">{{ $ds['title'] }}</h2>
                                                            <p class="mb-0">{{ $ds['description'] ?? __('Cargá la descripción de este servicio desde el panel de administración.') }}</p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endforeach
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            {{-- 3. ABOUT "YOUR PLACE" SECTION --}}
            <div class="container container-xl-custom custom-container-style">
                <div id="start" class="row align-items-center pb-xl-5 mb-xl-5">
                    <div class="col-9 col-lg-4 col-xl-5 pb-5 pb-lg-0 mb-5 mb-lg-0">
                        <div class="position-relative">
                            <img src="{{ asset('cd-project/img/demos/architecture-2/backgrounds/arch-plan-2.jpg') }}" class="img-fluid position-absolute left-0 z-index-0 appear-animation" alt="" data-appear-animation="fadeIn" data-appear-animation-delay="850" style="bottom: -168px;" />
                            <div class="overflow-hidden position-relative z-index-1">
                                <img src="{{ asset('cd-project/img/demos/architecture-2/generic/generic-1.jpg') }}" class="img-fluid appear-animation" alt="{{ config('site.name') }}" data-appear-animation="maskLeft" data-appear-animation-delay="250" />
                            </div>
                            <div class="overflow-hidden position-absolute z-index-2" style="bottom: -75px; right: -17%;">
                                <img src="{{ asset('cd-project/img/demos/architecture-2/generic/generic-2.jpg') }}" class="img-fluid appear-animation" alt="{{ config('site.name') }}" data-appear-animation="maskRight" data-appear-animation-delay="550" />
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-xl-5 offset-lg-1 position-relative pt-5 pt-lg-0">
                        <div class="position-absolute z-index-0 left-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="2000" style="top: 190px;">
                            <h2 class="text-color-dark custom-stroke-text-effect-1 custom-big-font-size-1 font-weight-black opacity-1 mb-0">{{ config('site.welcome.about_stroke_text', 'YOUR PLACE') }}</h2>
                        </div>
                        <div class="pt-lg-5 ps-lg-5 mt-lg-5">
                            <div class="overflow-hidden mb-2">
                                <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="800">{{ config('site.welcome.about_eyebrow', 'WE\'RE HERE TO HELP') }}</h2>
                            </div>
                            <div class="overflow-hidden mb-3">
                                <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1000">{{ config('site.welcome.about_heading', 'You need space for better living.') }}</h3>
                            </div>
                            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1200">
                                <img src="{{ asset('cd-project/img/demos/architecture-2/divider.jpg') }}" class="img-fluid opacity-5 mb-4" alt="" />
                            </div>
                            <p class="custom-font-tertiary text-5 line-height-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1400">{{ config('site.welcome.about_lead', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero id nisi euismod, sed porta est consectetur.') }}</p>
                            <p class="text-3-5 pb-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1600">{{ config('site.welcome.about_text', 'Vestibulum auctor felis eget orci semper vestibulum. Pellentesque ultricies nibh gravida, accumsan libero luctus, molestie nunc. In nibh ipsum, blandit id faucibus ac, finibus.') }}</p>
                            <a href="{{ route('front.contact') }}" class="btn btn-primary custom-btn-style-1 font-weight-bold text-3 px-5 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1800">{{ __('CONTACT US') }}</a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 4. CLIENT LOGOS --}}
            <div class="container-fluid">
                <div class="row pt-5">
                    <div class="col pt-4">
                        <hr>
                    </div>
                </div>
            </div>
            <div class="container container-xl-custom pb-3">
                <div class="row align-items-center text-center py-5 my-3">
                    @if(isset($companyLogos) && $companyLogos->count() > 0)
                        @foreach($companyLogos->take(6) as $logo)
                            @php
                                $logoSrc = filter_var($logo->image_path, FILTER_VALIDATE_URL) ? $logo->image_path : asset($logo->image_path);
                            @endphp
                            <div class="col-sm-4 col-xl-2 mb-5 mb-xl-0">
                                <img src="{{ $logoSrc }}" alt="{{ $logo->name ?? '' }}" class="img-fluid" style="max-width: 140px;" />
                            </div>
                        @endforeach
                    @else
                        @for($i = 8; $i <= 13; $i++)
                            <div class="col-sm-4 col-xl-2 mb-5 {{ $i <= 10 ? 'mb-xl-0' : ($i <= 12 ? 'mb-lg-0' : '') }}">
                                <img src="{{ asset("cd-project/img/logos/logo-{$i}.png") }}" alt="" class="img-fluid" style="max-width: {{ in_array($i, [8, 12, 13]) ? ($i == 8 ? '90px' : '100px') : '140px' }};" />
                            </div>
                        @endfor
                    @endif
                </div>
            </div>

            {{-- 5. PROCESS SECTION (Parallax + Carousel Steps) --}}
            <div class="custom-section">
                <div class="custom-section-left-content parallax p-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'fadeIn': true}" data-image-src="{{ asset('cd-project/img/demos/architecture-2/generic/generic-3.jpg') }}" style="min-height: 400px"></div>
                <div class="custom-section-middle-content bg-primary p-5">
                    <div class="owl-carousel owl-theme nav-style-1 nav-svg-arrows-1 nav-light custom-hide-prev-nav custom-dots-style-1 custom-dots-style-1-light mb-0" data-plugin-options="{'responsive': {'0': { 'items': 1}, '576': {'items': 1}, '768': {'items': 1, 'dots': true, 'nav': false}, '992': {'items': 1}, '1200': {'items': 1}}, 'loop': true, 'nav': true, 'dots': false, 'margin': 20, 'refresh': true}">
                        <div class="pt-4 pb-3">
                            <h2 class="custom-heading-style-1 text-4-5 mb-4">
                                <span class="custom-heading-style-1-step">01</span>
                                <span class="custom-heading-style-1-text">{{ config('site.welcome.process_step1_title', 'RESEARCH') }}</span>
                            </h2>
                            <p class="text-3-5 text-color-light opacity-4 pe-5 pe-md-0 pe-lg-5 me-3 me-md-0 me-lg-3 mb-0">{{ config('site.welcome.process_step1_text', 'Vestibulum auctor felis eget orci semper vestibulum. Pellentesque ultricies nibh gravida, accumsan libero luctus, molestie nunc. In nibh ipsum, blandit id faucibus ac.') }}</p>
                        </div>
                        <div class="pt-4 pb-3">
                            <h2 class="custom-heading-style-1 text-4-5 mb-4">
                                <span class="custom-heading-style-1-step">02</span>
                                <span class="custom-heading-style-1-text">{{ config('site.welcome.process_step2_title', 'WORK') }}</span>
                            </h2>
                            <p class="text-3-5 text-color-light opacity-4 pe-5 pe-md-0 pe-lg-5 me-3 me-md-0 me-lg-3 mb-0">{{ config('site.welcome.process_step2_text', 'Vestibulum auctor felis eget orci semper vestibulum. Pellentesque ultricies nibh gravida, accumsan libero luctus, molestie nunc. In nibh ipsum, blandit id faucibus ac.') }}</p>
                        </div>
                        <div class="pt-4 pb-3">
                            <h2 class="custom-heading-style-1 text-4-5 mb-4">
                                <span class="custom-heading-style-1-step">03</span>
                                <span class="custom-heading-style-1-text">{{ config('site.welcome.process_step3_title', 'DELIVERY') }}</span>
                            </h2>
                            <p class="text-3-5 text-color-light opacity-4 pe-5 pe-md-0 pe-lg-5 me-3 me-md-0 me-lg-3 mb-0">{{ config('site.welcome.process_step3_text', 'Vestibulum auctor felis eget orci semper vestibulum. Pellentesque ultricies nibh gravida, accumsan libero luctus, molestie nunc. In nibh ipsum, blandit id faucibus ac.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="custom-section-right-content parallax p-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 3, 'parallaxDirection': 'bottom', 'fadeIn': true}" data-image-src="{{ asset('cd-project/img/demos/architecture-2/generic/generic-4.jpg') }}" style="min-height: 400px"></div>
            </div>

            {{-- 6. CUSTOM SERVICES & SKILLS --}}
            @if(is_module_active('services'))
            <div class="container container-xl-custom py-5 mt-5 mb-4">
                <div class="row py-4">
                    <div class="col-lg-5 col-xl-4 position-relative mb-4">
                        <div class="position-absolute z-index-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="500" style="top: 102px; left: -64px;">
                            <h2 class="text-color-dark custom-stroke-text-effect-1 custom-big-font-size-2 font-weight-black opacity-1 mb-0">{{ config('site.welcome.skills_stroke_text', 'IDEAS') }}</h2>
                        </div>
                        <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-2">{{ config('site.welcome.skills_eyebrow', 'CUSTOM SERVICES') }}</h2>
                        <h3 class="text-transform-none text-color-dark font-weight-black text-9 line-height-2 mb-4">{{ config('site.welcome.skills_heading', 'Design. Build. Better.') }}</h3>
                        <img src="{{ asset('cd-project/img/demos/architecture-2/divider.jpg') }}" class="img-fluid opacity-5 mb-4 mt-2" alt="" />
                        <p class="custom-font-tertiary text-5 line-height-4 mb-4 mt-2">{{ config('site.welcome.skills_lead', 'Discover how our unique process improves your building experience.') }}</p>
                    </div>
                    <div class="col-lg-6 col-xl-7 offset-lg-1">
                        <h2 class="text-color-default positive-ls-3 line-height-3 text-4 pb-2 mb-4">{{ config('site.welcome.skills_label', 'OUR SKILLS') }}</h2>
                        <div class="progress-bars custom-progress-bars-style-1">
                            @php
                                $skills = [
                                    ['name' => config('site.welcome.skill1_name', 'SAMPLE SKILL 1'), 'value' => config('site.welcome.skill1_value', '85')],
                                    ['name' => config('site.welcome.skill2_name', 'SAMPLE SKILL 2'), 'value' => config('site.welcome.skill2_value', '90')],
                                    ['name' => config('site.welcome.skill3_name', 'SAMPLE SKILL 3'), 'value' => config('site.welcome.skill3_value', '85')],
                                ];
                            @endphp
                            @foreach($skills as $index => $skill)
                                <div class="progress-label d-flex justify-content-between {{ $index > 0 ? 'pt-2' : '' }}">
                                    <span class="text-color-dark text-2">{{ $skill['name'] }}</span>
                                    <span class="text-color-dark text-2">{{ $skill['value'] }}%</span>
                                </div>
                                <div class="progress progress-xs progress-no-border-radius bg-color-grey-300 mb-4">
                                    <div class="progress-bar progress-bar-primary" data-appear-progress-animation="{{ $skill['value'] }}%"></div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            @endif

        </section>

        {{-- ============================================ --}}
        {{-- 7. STATS / COUNTERS --}}
        {{-- ============================================ --}}
        <section class="section section-height-3 border-0 m-0">
            <div class="container py-2">
                <div class="row counters counters-sm">
                    <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                        <div class="counter">
                            <strong class="text-color-dark font-weight-bold line-height-1 text-12 mb-2" data-to="{{ config('site.welcome.counter1_value', '15') }}" data-append="+">0</strong>
                            <label class="text-color-default positive-ls-3 font-weight-normal text-3-5 mb-0">{{ config('site.welcome.counter1_label', 'YEARS OF EXPERIENCE') }}</label>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                        <div class="counter">
                            <strong class="text-color-dark font-weight-bold line-height-1 text-12 mb-2" data-to="{{ config('site.welcome.counter2_value', '350') }}" data-append="+">0</strong>
                            <label class="text-color-default positive-ls-3 font-weight-normal text-3-5 mb-0">{{ config('site.welcome.counter2_label', 'SATISFIED CLIENTS') }}</label>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3 mb-5 mb-sm-0">
                        <div class="counter">
                            <strong class="text-color-dark font-weight-bold line-height-1 text-12 mb-2" data-to="{{ config('site.welcome.counter3_value', '20') }}" data-append="+">0</strong>
                            <label class="text-color-default positive-ls-3 font-weight-normal text-3-5 mb-0">{{ config('site.welcome.counter3_label', 'TEAM MEMBERS') }}</label>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="counter">
                            <strong class="text-color-dark font-weight-bold line-height-1 text-12 mb-2" data-to="{{ config('site.welcome.counter4_value', '45') }}" data-append="+">0</strong>
                            <label class="text-color-default positive-ls-3 font-weight-normal text-3-5 mb-0">{{ config('site.welcome.counter4_label', 'AWARDS WINNING') }}</label>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- ============================================ --}}
        {{-- 8. MASONRY GALLERY --}}
        {{-- ============================================ --}}
        @if(is_module_active('gallery'))
        <div class="container container-xl-custom py-4 my-3">
            <div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
                <div class="masonry-loader masonry-loader-showing">
                    <div class="masonry row" data-plugin-masonry data-plugin-options="{'layoutMode': 'packery', 'itemSelector': '.masonry-item', 'sortBy': 'original-order'}">
                        @if(isset($galleryImages) && $galleryImages->count() > 0)
                            @php
                                $galleryAnimations = ['maskDown', 'maskRight', 'maskLeft', 'maskUp', 'maskRight', 'maskLeft'];
                                $galleryDelays = [500, 250, 750, 500, 750, 250];
                                $galleryCols = ['col-6', 'col-6 col-lg-3', 'col-6 col-lg-3', 'col-6', 'col-6 col-lg-3', 'col-6 col-lg-3'];
                            @endphp
                            @foreach($galleryImages->take(6) as $index => $gallery)
                                @php
                                    $imageUrl = !empty($gallery->img) ? (filter_var($gallery->img, FILTER_VALIDATE_URL) ? $gallery->img : asset($gallery->img)) : asset('cd-project/img/demos/architecture-2/generic/generic-' . ($index + 5) . '.jpg');
                                    $imageAlt = $gallery->title ?? '';
                                    $colClass = $galleryCols[$index % 6] ?? 'col-6 col-lg-3';
                                    $animation = $galleryAnimations[$index % 6] ?? 'maskUp';
                                    $delay = $galleryDelays[$index % 6] ?? 500;
                                @endphp
                                <div class="masonry-item no-default-style {{ $colClass }} overflow-hidden px-0">
                                    <a class="d-inline-block custom-img-thumbnail-style-1 img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon rounded-0 appear-animation" href="{{ $imageUrl }}" data-appear-animation="{{ $animation }}" data-appear-animation-delay="{{ $delay }}">
                                        <img src="{{ $imageUrl }}" class="img-fluid rounded-0" alt="{{ $imageAlt }}" />
                                    </a>
                                </div>
                            @endforeach
                        @else
                            @php
                                $defaultGallery = [
                                    ['img' => 'generic-5.jpg', 'col' => 'col-6', 'anim' => 'maskDown', 'delay' => 500],
                                    ['img' => 'generic-6.jpg', 'col' => 'col-6 col-lg-3', 'anim' => 'maskRight', 'delay' => 250],
                                    ['img' => 'generic-7.jpg', 'col' => 'col-6 col-lg-3', 'anim' => 'maskLeft', 'delay' => 750],
                                    ['img' => 'generic-10.jpg', 'col' => 'col-6', 'anim' => 'maskUp', 'delay' => 500],
                                    ['img' => 'generic-8.jpg', 'col' => 'col-6 col-lg-3', 'anim' => 'maskRight', 'delay' => 750],
                                    ['img' => 'generic-9.jpg', 'col' => 'col-6 col-lg-3', 'anim' => 'maskLeft', 'delay' => 250],
                                ];
                            @endphp
                            @foreach($defaultGallery as $gItem)
                                <div class="masonry-item no-default-style {{ $gItem['col'] }} overflow-hidden px-0">
                                    <a class="d-inline-block custom-img-thumbnail-style-1 img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon rounded-0 appear-animation" href="{{ asset('cd-project/img/demos/architecture-2/generic/' . $gItem['img']) }}" data-appear-animation="{{ $gItem['anim'] }}" data-appear-animation-delay="{{ $gItem['delay'] }}">
                                        <img src="{{ asset('cd-project/img/demos/architecture-2/generic/' . $gItem['img']) }}" class="img-fluid rounded-0" alt="" />
                                    </a>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- ============================================ --}}
        {{-- 9. CTA SECTION --}}
        {{-- ============================================ --}}
        <section class="section section-height-3 bg-primary border-0 m-0">
            <div class="container container-xl-custom">
                <div class="row align-items-center justify-content-center text-center text-xl-start">
                    <div class="col-md-8 col-xl-9 mb-4 mb-xl-0 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="250">
                        <h2 class="text-color-default font-weight-semibold positive-ls-3 text-4 mb-0">{{ config('site.welcome.cta_eyebrow', 'WE\'RE HERE TO HELP') }}</h2>
                        <h3 class="text-transform-none text-color-light font-weight-black line-height-2 text-9 mb-0">{{ config('site.welcome.cta_heading', 'Let\'s Talk About Your New Project, We Can Do It!') }}</h3>
                    </div>
                    <div class="col-xl-3 text-xl-end appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="500">
                        <a href="{{ route('front.contact') }}" class="btn btn-light custom-btn-style-1 font-weight-bold text-color-dark text-3 px-5 py-3">{{ __('CONTACT US') }}</a>
                    </div>
                </div>
            </div>
        </section>

        {{-- ============================================ --}}
        {{-- 10. FAQ ACCORDION --}}
        {{-- ============================================ --}}
        @if(is_module_active('faqs'))
        <div class="container container-xl-custom">
            <div class="row py-5 my-5">
                <div class="col-lg-5 col-xl-4 position-relative mb-5 mb-lg-0 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="250" data-plugin-options="{'accY': -400}">
                    <div class="position-absolute z-index-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="500" style="top: 102px; left: -246px;">
                        <h2 class="text-color-dark custom-stroke-text-effect-1 custom-big-font-size-3 font-weight-black opacity-1 mb-0">{{ config('site.welcome.faq_stroke_text', 'SOLUTIONS') }}</h2>
                    </div>
                    <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-2">{{ config('site.welcome.faq_eyebrow', 'COMMON QUESTIONS') }}</h2>
                    <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-4">{{ config('site.welcome.faq_heading', 'Frequent Questions') }}</h3>
                    <img src="{{ asset('cd-project/img/demos/architecture-2/divider.jpg') }}" class="img-fluid opacity-5 mb-4 mt-2" alt="" />
                    <p class="custom-font-tertiary text-5 line-height-4 mb-4 mt-2">{{ config('site.welcome.faq_lead', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero') }}</p>
                    <p class="text-3-5 pb-2 mb-4">{{ config('site.welcome.faq_text', 'Vestibulum auctor felis eget orci semper vestibulum. Pellentesque ultricies nibh gravida, accumsan libero luctus, molestie nunc.') }}</p>
                    <a href="{{ route('front.contact') }}" class="btn btn-primary custom-btn-style-1 font-weight-bold text-3 px-5 py-3">{{ __('CONTACT US') }}</a>
                </div>
                <div class="col-lg-7 col-xl-8 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="500" data-plugin-options="{'accY': -400}">
                    <div class="custom-accordion-style-1 accordion accordion-modern" id="FAQAccordion">
                        @forelse(($featuredFaqs ?? collect())->take(5) as $index => $faq)
                            @php
                                $faqId = 'collapseFAQ' . ($index + 1);
                                $isFirst = $index === 0;
                            @endphp
                            <div class="card card-default">
                                <div class="card-header">
                                    <h4 class="card-title m-0">
                                        <a class="accordion-toggle text-color-dark font-weight-bold" data-bs-toggle="collapse" href="#{{ $faqId }}">
                                            {{ $faq->question }}
                                        </a>
                                    </h4>
                                </div>
                                <div id="{{ $faqId }}" class="collapse {{ $isFirst ? 'show' : '' }}" data-bs-parent="#FAQAccordion">
                                    <div class="card-body ps-4 {{ $isFirst ? 'w-md-75pct' : '' }}">
                                        <p class="mb-0">{{ $faq->answer }}</p>
                                    </div>
                                </div>
                            </div>
                        @empty
                            @php
                                $defaultFaqs = [
                                    ['question' => 'What does an architect actually do?', 'id' => 'collapseFAQOne', 'show' => true],
                                    ['question' => 'Why do I need an architect?', 'id' => 'collapseFAQTwo', 'show' => false],
                                    ['question' => 'What\'s the largest project you\'ve ever worked on?', 'id' => 'collapseFAQFour', 'show' => false],
                                    ['question' => 'What is the structure of your architecture practice?', 'id' => 'collapseFAQFive', 'show' => false],
                                    ['question' => 'Can you work with clients long distance?', 'id' => 'collapseFAQSix', 'show' => false],
                                ];
                            @endphp
                            @foreach($defaultFaqs as $faq)
                                <div class="card card-default">
                                    <div class="card-header">
                                        <h4 class="card-title m-0">
                                            <a class="accordion-toggle text-color-dark font-weight-bold" data-bs-toggle="collapse" href="#{{ $faq['id'] }}">
                                                {{ $faq['question'] }}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="{{ $faq['id'] }}" class="collapse {{ $faq['show'] ? 'show' : '' }}" data-bs-parent="#FAQAccordion">
                                        <div class="card-body ps-4 {{ $faq['show'] ? 'w-md-75pct' : '' }}">
                                            <p class="mb-0">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endforelse
                    </div>
                </div>
            </div>
            <hr class="my-0">
        </div>
        @endif

        {{-- ============================================ --}}
        {{-- 11. TEAM CAROUSEL --}}
        {{-- ============================================ --}}
        @if(is_module_active('team'))
        <div class="container container-xl-custom">
            <div class="row py-5 my-5">
                <div class="col-lg-6 col-xl-7 mx-auto mb-5 mb-lg-0 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="500">
                    <div class="owl-carousel owl-theme nav-style-1 nav-outside nav-font-size-lg custom-nav-grey mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 2}, '992': {'items': 1}, '1200': {'items': 2}}, 'loop': true, 'nav': true, 'dots': false, 'margin': 20}">
                        @forelse(($teamMembers ?? collect())->take(3) as $index => $member)
                            <div>
                                <div class="card border-radius-0">
                                    <img class="card-img-top border-radius-0" src="{{ asset($member->photo ?? 'cd-project/img/demos/architecture-2/authors/author-' . (($index % 2) + 1) . '.jpg') }}" alt="{{ $member->name }}" />
                                    <div class="card-body text-center">
                                        <h4 class="card-title font-weight-extra-bold text-color-dark text-5 mb-1">{{ $member->name }}</h4>
                                        <h3 class="text-color-default text-3-5 ls-0 font-weight-normal mb-2 pb-1">{{ $member->position ?? '' }}</h3>
                                        <p class="card-text font-weight-light">{{ Str::limit($member->bio ?? '', 100, '...') }}</p>
                                    </div>
                                </div>
                            </div>
                        @empty
                            @php
                                $defaultTeam = [
                                    ['name' => __('Nombre Apellido'), 'position' => __('CEO & FUNDADOR'), 'img' => 1],
                                    ['name' => __('Nombre Apellido'), 'position' => __('ARQUITECTA'), 'img' => 2],
                                    ['name' => __('Nombre Apellido'), 'position' => __('DIRECTOR'), 'img' => 1],
                                ];
                            @endphp
                            @foreach($defaultTeam as $tm)
                                <div>
                                    <div class="card border-radius-0">
                                        <img class="card-img-top border-radius-0" src="{{ asset('cd-project/img/demos/architecture-2/authors/author-' . $tm['img'] . '.jpg') }}" alt="{{ $tm['name'] }}" />
                                        <div class="card-body text-center">
                                            <h4 class="card-title font-weight-extra-bold text-color-dark text-5 mb-1">{{ $tm['name'] }}</h4>
                                            <h3 class="text-color-default text-3-5 ls-0 font-weight-normal mb-2 pb-1">{{ $tm['position'] }}</h3>
                                            <p class="card-text font-weight-light">{{ __('Cargá la biografía de este integrante desde el panel de administración.') }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endforelse
                    </div>
                </div>
                <div class="col-lg-5 col-xl-4 text-end position-relative appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="250">
                    <div class="position-absolute z-index-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="500" style="top: 102px; right: -50px;">
                        <h2 class="text-color-dark custom-stroke-text-effect-1 custom-big-font-size-3 font-weight-black opacity-1 mb-0">{{ config('site.welcome.team_stroke_text', 'ARCHLIFE') }}</h2>
                    </div>
                    <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-2">{{ config('site.welcome.team_eyebrow', 'THE BEST PROFESSIONALS') }}</h2>
                    <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-4">{{ config('site.welcome.team_heading', 'Meet Our Team') }}</h3>
                    <img src="{{ asset('cd-project/img/demos/architecture-2/divider.jpg') }}" class="img-fluid opacity-5 mb-4 mt-2" alt="" />
                    <p class="custom-font-tertiary text-5 line-height-4 mb-4 mt-2">{{ config('site.welcome.team_lead', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero') }}</p>
                    <p class="text-3-5 pb-3 mb-4">{{ config('site.welcome.team_text', 'Vestibulum auctor felis eget orci semper vestibulum. Pellentesque ultricies nibh gravida, accumsan libero luctus, molestie nunc.') }}</p>
                    <a href="{{ route('front.contact') }}" class="btn btn-primary custom-btn-style-1 custom-btn-style-1-right font-weight-bold text-3 px-5 py-3">{{ __('CONTACT US') }}</a>
                </div>
            </div>
        </div>
        @endif

        {{-- ============================================ --}}
        {{-- 12. TESTIMONIALS PARALLAX --}}
        {{-- ============================================ --}}
        @if(is_module_active('references'))
        <section class="section parallax bg-transparent border-0 py-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'scrollableParallax': true, 'scrollableParallaxMinWidth': 991, 'startOffset': 13, 'cssProperty': 'width', 'cssValueStart': 40, 'cssValueEnd': 100, 'cssValueUnit': 'vw'}">
            <div class="d-flex justify-content-center">
                <div class="scrollable-parallax-wrapper bg-primary overflow-hidden">
                    <div class="container container-xl-custom custom-container-style-3 custom-container-position-1 py-5 my-5 mx-0">
                        <div class="row justify-content-center pt-3 mb-5">
                            <div class="col-sm-8 col-md-12 text-center">
                                <h2 class="text-color-light opacity-6 positive-ls-3 line-height-3 text-4 mb-3">{{ config('site.welcome.testimonials_eyebrow', 'HAPPY CLIENTS') }}</h2>
                                <h3 class="text-transform-none text-color-light font-weight-black line-height-2 text-10 negative-ls-1 mb-0">{{ config('site.welcome.testimonials_heading', 'See What Clients Are Saying') }}</h3>
                            </div>
                        </div>
                        <div class="row justify-content-center pb-3">
                            <div class="col-lg-9">
                                <div class="owl-carousel owl-theme nav-style-1 nav-light nav-outside nav-font-size-lg custom-dots-style-1 custom-dots-style-1-light mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'nav': false, 'dots': true}, '576': {'items': 1, 'nav': false, 'dots': true}, '768': {'items': 1, 'nav': false, 'dots': true}, '992': {'items': 1}, '1200': {'items': 1}}, 'loop': false, 'nav': true, 'dots': false}">
                                    @forelse(($featuredReferences ?? collect())->take(3) as $reference)
                                        <div>
                                            <div class="testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote custom-testimonial-quote mb-0">
                                                <blockquote>
                                                    <p class="custom-font-secondary text-color-light opacity-8 font-weight-light line-height-6 text-4-5 px-2 px-lg-3 mb-0"><em>{{ $reference->testimonial ?? $reference->description ?? __('Testimonio del cliente.') }}</em></p>
                                                </blockquote>
                                                <div class="testimonial-author">
                                                    <p class="text-color-light font-weight-bold text-4 mb-0">{{ $reference->name ?? __('Cliente Satisfecho') }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        @for($i = 0; $i < 2; $i++)
                                            <div>
                                                <div class="testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote custom-testimonial-quote mb-0">
                                                    <blockquote>
                                                        <p class="custom-font-secondary text-color-light opacity-8 font-weight-light line-height-6 text-4-5 px-2 px-lg-3 mb-0"><em>{{ __('Sumá testimonios de tus clientes desde /admin/references para que aparezcan en esta sección.') }}</em></p>
                                                    </blockquote>
                                                    <div class="testimonial-author">
                                                        <p class="text-color-light font-weight-bold text-4 mb-0">{{ __('Cliente Satisfecho') }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif

        {{-- ============================================ --}}
        {{-- 13. BLOG SECTION --}}
        {{-- ============================================ --}}
        @if(is_module_active('blog'))
        <section class="section bg-transparent border-0 position-relative m-0">
            <div class="container container-xl-custom py-5">
                <div class="row">
                    <div class="col text-center position-relative">
                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                            <div class="position-absolute transform3dx-n50 left-50pct z-index-0" style="top: 56px;">
                                <h2 class="text-color-dark custom-stroke-text-effect-1 custom-big-font-size-1 font-weight-black opacity-1 mb-0">{{ config('site.welcome.blog_stroke_text', 'WHAT\'S HAPPENING') }}</h2>
                            </div>
                        </div>
                        <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-2">{{ config('site.welcome.blog_eyebrow', 'OUR BLOG') }}</h2>
                        <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-3">{{ config('site.welcome.blog_heading', 'Recent News') }}</h3>
                        <img src="{{ asset('cd-project/img/demos/architecture-2/divider.jpg') }}" class="img-fluid opacity-5 mt-3 mb-5" alt="" />
                    </div>
                </div>
                <div class="row row-gutter-sm">
                    @forelse(($recentPosts ?? collect())->take(3) as $index => $post)
                        @php
                            $postImage = null;
                            if (!empty($post->header)) {
                                if (filter_var($post->header, FILTER_VALIDATE_URL)) {
                                    $postImage = $post->header;
                                } else {
                                    $headerPath = $post->header;
                                    if (file_exists(public_path($headerPath))) {
                                        $postImage = asset($headerPath);
                                    } else {
                                        $postImage = asset('cd-project/img/demos/architecture-2/blog/blog-thumb-' . ($index + 1) . '.jpg');
                                    }
                                }
                            } else {
                                $postImage = asset('cd-project/img/demos/architecture-2/blog/blog-thumb-' . ($index + 1) . '.jpg');
                            }
                        @endphp
                        <div class="col-lg-4 mb-4 mb-lg-0">
                            <article>
                                <div class="card border-0 border-radius-0">
                                    <div class="card-body bg-color-grey p-4 z-index-1">
                                        <a href="{{ route('blog.post', $post->slug) }}">
                                            <img class="card-img-top border-radius-0 hover-effect-2" src="{{ $postImage }}" alt="{{ $post->title }}">
                                        </a>
                                        <p class="text-uppercase text-1 mb-3 pt-1 text-color-default">
                                            <time pubdate datetime="{{ $post->created_at->format('Y-m-d') }}">{{ $post->created_at->format('d M Y') }}</time>
                                            <span class="opacity-3 d-inline-block px-2">|</span>
                                            {{ $post->comments_count ?? 0 }} {{ __('Comments') }}
                                            <span class="opacity-3 d-inline-block px-2">|</span>
                                            {{ $post->user->name ?? 'Admin' }}
                                        </p>
                                        <div class="card-body p-0">
                                            <h4 class="card-title mb-3 text-5 font-weight-semibold"><a class="text-color-dark text-color-hover-primary text-decoration-none font-weight-bold text-3-5" href="{{ route('blog.post', $post->slug) }}">{{ $post->title }}</a></h4>
                                            <p class="card-text mb-2">{{ Str::limit($post->excerpt ?? $post->content, 100, '...') }}</p>
                                            <a href="{{ route('blog.post', $post->slug) }}" class="custom-read-more d-inline-flex align-items-center font-weight-semibold text-3 text-decoration-none ps-0">
                                                {{ __('READ MORE') }} +
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                    @empty
                        @for($i = 1; $i <= 3; $i++)
                            <div class="col-lg-4 mb-4 mb-lg-0">
                                <article>
                                    <div class="card border-0 border-radius-0">
                                        <div class="card-body bg-color-grey p-4 z-index-1">
                                            <a href="{{ route('blog.index') }}">
                                                <img class="card-img-top border-radius-0 hover-effect-2" src="{{ asset('cd-project/img/demos/architecture-2/blog/blog-thumb-' . $i . '.jpg') }}" alt="Card Image">
                                            </a>
                                            <p class="text-uppercase text-1 mb-3 pt-1 text-color-default">
                                                <time pubdate datetime="2025-01-10">10 Jan 2025</time>
                                                <span class="opacity-3 d-inline-block px-2">|</span>
                                                3 {{ __('Comentarios') }}
                                                <span class="opacity-3 d-inline-block px-2">|</span>
                                                {{ __('Autor') }}
                                            </p>
                                            <div class="card-body p-0">
                                                <h4 class="card-title mb-3 text-5 font-weight-semibold"><a class="text-color-dark text-color-hover-primary text-decoration-none font-weight-bold text-3-5" href="{{ route('blog.index') }}">{{ __('Sumá tu primer artículo') }}</a></h4>
                                                <p class="card-text mb-2">{{ __('Publicá artículos desde /admin/blog para que aparezcan en esta sección.') }}</p>
                                                <a href="{{ route('blog.index') }}" class="custom-read-more d-inline-flex align-items-center font-weight-semibold text-3 text-decoration-none ps-0">
                                                    {{ __('LEER MÁS') }} +
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>
                        @endfor
                    @endforelse
                </div>
            </div>
        </section>
        @endif

    </div>

    <div class="position-relative" style="margin-top: 50px;">
        <img src="{{ asset('cd-project/img/demos/architecture-2/backgrounds/arch-plan-3.jpg') }}" class="img-fluid position-absolute bottom-0 left-0" alt="" />
    </div>

</div>

@endsection