{{-- history --}}
    <section class="process-section" id="history">
        <div class="auto-container rm-auto-container">
            <div class="row clearfix">
                <div class="images-column col-lg-4 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="auto-container row text-center">
                            <div class="image-list mb-2 col-4 col-lg-12">
                                <img src="{{ asset('images/resource/about-us/Historia1.jpg') }}" alt="">
                            </div>
                            <div class="image-list mb-2 col-4 col-lg-12">
                                <img src="{{ asset('images/resource/about-us/Historia2.png') }}" alt="">
                            </div>
                            <div class="image-list mb-2 col-4 col-lg-12">
                                <img src="{{ asset('images/resource/about-us/Historia3.png') }}" alt="">
                            </div>
                        </div>
                    </div>
                </div><!-- Content Column -->
                <div class="content-column col-lg-7 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <!-- Sec Title -->
                        <!-- Blocks Outer -->
                        <div class="blocks-outer">
                            <!-- Process Block -->
                            <div class="process-block">
                                <div>
                                    <div class="sec-title alternate text-center">
                                        <h2 class="text-capitalize">{{ __('messages.about-title-history') }} </h2>
                                    </div>
                                    <div class="text-justify">
                                        <p>{{ __('messages.history-text1') }} </p>
                                        <p>{{ __('messages.history-text2') }} </p>
                                        <p>{{ __('messages.history-text3') }} </p>
                                        <p>{!! nl2br(__('messages.history-text4'))!!} </p>
                                        <p>{{ __('messages.history-text5') }} </p>
                                        <p>{{ __('messages.history-text6') }} </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Blocks Outer -->
                    </div>
                </div>
                <!-- Images Column -->
            </div>
        </div>
    </section>
    {{-- TIMELINE --}}
    <section>
        <div class="auto-container rm-auto-container">
            <section class="h--timeline js-h--timeline">
                <div class="h--timeline-container">
                    <div class="h--timeline-dates">
                        <div class="h--timeline-line">
                            <ol>
                                @foreach ($util->timeLine as $key => $date)
                                    <li><a href="#0" data-date="{{$key}}"
                                            class="h--timeline-date @if ($key == 0) h--timeline-date--selected @endif">{{$date}}</a></li>
                                @endforeach
                            </ol>
                            <span class="h--timeline-filling-line" aria-hidden="true"></span>
                        </div> <!-- .h--timeline-line -->
                    </div> <!-- .h--timeline-dates -->
                    <nav class="h--timeline-navigation-container">
                        <ul>
                            <li><a href="#0"
                                    class="text-replace h--timeline-navigation h--timeline-navigation--prev h--timeline-navigation--inactive">Prev</a>
                            </li>
                            <li><a href="#0"
                                    class="text-replace h--timeline-navigation h--timeline-navigation--next">Next</a>
                            </li>
                        </ul>
                    </nav>
                </div> <!-- .h--timeline-container -->
                <div class="h--timeline-events">
                    <ol>
                        @foreach ($util->timeLine as $key => $date)
                            <li
                                class="h--timeline-event text-component @if ($key == 0) h--timeline-event--selected @endif ">
                                <div class="h--timeline-event-content container">
                                    {{-- <h3 class="h--timeline-event-title">Horizontal Timeline</h3> --}}
                                    <div class="bg-text-timeline ">
                                        <p>{{__('messages.data-' . $date)}} </p>
                                    </div>
                            </li>
                        @endforeach

                    </ol>
                </div> <!-- .h--timeline-events -->
            </section>
        </div>
    </section>
    {{-- VIDEO --}}
    <section>
        <div class="auto-container d-flex justify-content-center mt-5">
            <div class="video-column col-lg-8 col-md-8 col-sm-12">
                <!-- Video Box -->
                <div class="video-box-two">
                    <figure class="video-image">
                        <img class="transition-500ms" src="{{ asset('images/resource/about-us/image-video.jpg') }}"
                            alt="">
                    </figure>
                    <a href="https://www.youtube.com/watch?v=FlzExrwUUVA" class="lightbox-video overlay-box"><span
                            class="flaticon-media-play-symbol transition-900ms"><i class="ripple"></i></span></a>
                </div>
            </div>
    </section>