@extends('layouts.front')

@section('search')
@include('partials.search')
@endsection

@section('content')

<main id="main">

    <section id="clients" class="clients styler1">
        <div class="container">
            <div class="section-title">
                <h2 class="animate__animated animate__fadeInDown">{!! $settings->title !!}</h2>
                <p class="animate__animated animate__fadeInUp">{!! $settings->description !!}</p>
            </div>
        </div>
    </section>
    
    @if ($settings->section_1_check == 1)
    <!-- ======= Featured Section ======= -->
    <section id="featured" class="featured">
        <div class="container">
            <div class="section-title" data-aos="fade-up">
                <h2>{{ $settings->section_1_title }}</h2>
            </div>
            <div class="row">
                <!-- {!! $settings->section_1 !!} -->
                <div class="col-lg-4">
                    <div class="icon-box">
                        <i class="{{ $settings->box_1_icon }}"></i>
                        <h3><a href="">{{ $settings->box_1_heading }}</a></h3>
                        {!! $settings->box_1_content !!}
                    </div>
                </div>
                <div class="col-lg-4 mt-4 mt-lg-0">
                    <div class="icon-box">
                        <i class="{{ $settings->box_2_icon }}"></i>
                        <h3><a href="">{{ $settings->box_2_heading }}</a></h3>
                        {!! $settings->box_2_content !!}
                    </div>
                </div>
                <div class="col-lg-4 mt-4 mt-lg-0">
                    <div class="icon-box">
                        <i class="{{ $settings->box_3_icon }}"></i>
                        <h3><a href="">{{ $settings->box_3_heading }}</a></h3>
                        {!! $settings->box_3_content !!}
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- End Featured Section -->
    @endif
    
    @if ($settings->section_2_check == 1)
    <!-- ======= About Section ======= -->
    <section id="about" class="about">
        <div class="container">
            <div class="section-title" data-aos="fade-up">
                <h2>{{ $settings->section_2_title }}</h2>
            </div>
            <div class="row">
                <!-- {!! $settings->section_2 !!} -->
                <div class="col-lg-6">
                    <img src="{{ $settings->getSection2ImageAttribute()->url ?? '' }}" class="img-fluid" alt="">
                </div>
                <div class="col-lg-6 pt-4 pt-lg-0 content">
                    {!! $settings->section_2_content !!}
                </div>
            </div>
        </div>
    </section>
    <!-- End About Section -->
    @endif

    @if ($settings->section_3_check == 1)
    <!-- service sections -->
    <section id="services" class="services">
        <div class="container">

            <div class="section-title" data-aos="fade-up">
                <h2>{{ $settings->section_3_title }}</h2>
            </div>

            <div class="row">
                <!-- {!! $settings->section_3 !!} -->
                <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
                    <div class="icon-box">
                        <div class="icon"><i class="{{ $settings->section_3_box_1_icon }}"></i></div>
                        <h4>{{ $settings->section_3_box_1_heading }}</h4>
                        {!! $settings->section_3_box_1_content !!}
                    </div>
                </div>

                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
                    <div class="icon-box">
                        <div class="icon"><i class="{{ $settings->section_3_box_2_icon }}"></i></div>
                        <h4>{{ $settings->section_3_box_2_heading }}</h4>
                        {!! $settings->section_3_box_2_content !!}
                    </div>
                </div>

                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
                    <div class="icon-box">
                        <div class="icon"><i class="{{ $settings->section_3_box_3_icon }}"></i></div>
                        <h4>{{ $settings->section_3_box_3_heading }}</h4>
                        {!! $settings->section_3_box_3_content !!}
                    </div>
                </div>

                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
                    <div class="icon-box">
                        <div class="icon"><i class="{{ $settings->section_3_box_4_icon }}"></i></div>
                        <h4>{{ $settings->section_3_box_4_heading }}</h4>
                        {!! $settings->section_3_box_4_content !!}
                    </div>
                </div>

                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
                    <div class="icon-box">
                        <div class="icon"><i class="{{ $settings->section_3_box_5_icon }}"></i></div>
                        <h4>{{ $settings->section_3_box_5_heading }}</h4>
                        {!! $settings->section_3_box_5_content !!}
                    </div>
                </div>

                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
                    <div class="icon-box">
                        <div class="icon"><i class="{{ $settings->section_3_box_6_icon }}"></i></div>
                        <h4>{{ $settings->section_3_box_6_heading }}</h4>
                        {!! $settings->section_3_box_6_content !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End service section -->
    @endif

    @if ($settings->section_4_check == 1)
    <div class="container mt-5 mb-5">
        <div class="section-title" data-aos="fade-up">
            <h2>{{ $settings->section_4_title }}</h2>
        </div>
        <div class="p-x-15 blur">
            <div class="row">
                <!-- {!! $settings->section_4 !!} -->
                <div class="col-md-6 bg-img" style="margin-top: 80px">
                    <img src="{{ $settings->getSection4ImageAttribute()->url ?? '' }}" alt="" width="100%" height="70%">

                </div>
                <div class="col-md-6  p-30 text-center bg-white mt-5">
                    <h4 class="mb-50 fw-bold">{{ $settings->section_4_heading }}</h4>
                    <ul class="timeline">
                        <li class="timeline">
                            <div class="timeline-badge"></div>
                            <div class="timeline-panel">
                                {!! $settings->section_4_text_1 !!}
                            </div>
                        </li>

                        <li class="timeline-inverted">
                            <div class="timeline-badge"></div>
                            <div class="timeline-panel">
                                {!! $settings->section_4_text_2 !!}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    @endif

</main>

@endsection