@extends('layout.front.master')

@section('content')

<div>

    <section class="section section-height-3 border-0 m-0">
        <div class="container position-relative pt-5 pb-5-5 mt-5 mb-5">
            <div class="row justify-content-end pt-1 mt-lg-5">
                <div class="col-7 col-md-5 position-relative">
                    <ul class="breadcrumb d-block ps-2 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="200">
                        <li><a href="{{ front_homepage_url() }}">{{ __('Inicio') }}</a></li>
                        <li class="active">{{ __('Nosotros') }}</li>
                    </ul>
                    <h1 class="position-absolute top-100 left-0 text-color-light font-weight-bold text-6 line-height-3 text-end mt-5-5">
                        <span class="d-block position-relative z-index-1 pb-5 ps-lg-3 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="800">Company</span>
                        <span class="custom-svg-position-1 custom-svg-position-1-variation">
                            <svg class="svg-fill-color-dark mt-1 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 859.45 88.44" xml:space="preserve" preserveAspectRatio="none">
                                <polyline points="7.27,84.78 855.17,84.78 855.17,4.79 84.74,4.79 "/>
                            </svg>
                        </span>
                    </h1>
                </div>
            </div>
        </div>
    </section>

    <div class="container custom-margin-1">
        <div class="row gy-5 gy-lg-0">
            <div class="col-lg-8 order-lg-2 mt-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1200">
                <div id="who-we-are" class="row">
                    <div class="col">
                        <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-4">Who We Are</h2>
                        <img src="{{ asset('cd-project/img/demos/construction/generic/generic-8-wide.jpg') }}" class="img-fluid mb-4" alt="Engineer Man" />
                        <p class="font-weight-medium text-4">{!! config('site.about.intro_paragraph', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin, lorem quis bibendum auctor, <span class="highlight highlight-primary highlight-bg-opacity highlight-animated" data-appear-animation="highlight-animated-start" data-appear-animation-delay="2000" data-plugin-options="{\'flagClassOnly\': true}">nisi elit consequat ipsum</span>, nec sagittis sem nibh id elit.') !!}</p>
                        <p class="font-weight-light text-3-5 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ultricies nunc, eu interdum enim convallis pretium. Quisque eu neque augue. Aliquam egestas nunc at efficitur faucibus. Praesent mauris eros, tincidunt id enim sodales, rhoncus malesuada ligula. </p>
                        <div class="row justify-content-center counters gy-4 gy-md-0 my-5-5">
                            <div class="col-md-auto mt-0">
                                <div class="counter">
                                    <strong class="text-color-primary text-13" data-to="50" data-append="+" data-plugin-options="{'accY': -200}">0</strong>
                                    <span class="text-color-primary font-weight-bold text-4">Business Year</span>
                                </div>
                            </div>
                            <div class="col-md-auto px-xl-5 mx-md-5">
                                <div class="counter">
                                    <strong class="text-color-primary text-13" data-to="240" data-append="+" data-plugin-options="{'accY': -200}">0</strong>
                                    <span class="text-color-primary font-weight-bold text-4">Satisfied Clients</span>
                                </div>
                            </div>
                            <div class="col-md-auto">
                                <div class="counter">
                                    <strong class="text-color-primary text-13" data-to="2000" data-append="+" data-plugin-options="{'accY': -200}">0</strong>
                                    <span class="text-color-primary font-weight-bold text-4">Successfull Cases</span>
                                </div>
                            </div>
                        </div>
                        <p class="font-weight-light text-3-5 pb-4-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ultricies nunc, eu interdum enim convallis pretium. Quisque eu neque augue. Aliquam egestas nunc at efficitur faucibus. Praesent mauris eros, tincidunt id enim sodales, rhoncus malesuada ligula. </p>
                    </div>
                </div>
                <div id="history" class="row pb-4-5 mb-5">
                    <div class="col">
                        <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-4">History</h2>
                        <div class="bg-color-grey p-5">
                            <div class="owl-carousel owl-theme dots-horizontal-center nav-style-diamond nav-with-transparency nav-dark nav-sm nav-font-size-sm mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'nav': false, 'dots': true}, '576': {'items': 1}, '768': {'items': 1}, '992': {'items': 1}, '1200': {'items': 1}}, 'loop': true, 'nav': true, 'dots': false, 'autoplay': false, 'autoplayTimeout': 5000, 'autoHeight': true}">
                                <div class="text-center">
                                    <strong class="d-block text-color-primary text-7 line-height-1">2010</strong>
                                    <strong class="d-block text-color-dark text-4 mb-4">Foundation</strong>
                                    <p class="font-weight-light text-color-dark text-3-5 px-sm-5 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ultricies nunc, eu interdum enim convallis pretium. Quisque eu neque augue. Aliquam egestas nunc at efficitur faucibus. </p>
                                </div>
                                <div class="text-center">
                                    <strong class="d-block text-color-primary text-7 line-height-1">2012</strong>
                                    <strong class="d-block text-color-dark text-4 mb-4">50+ Employers</strong>
                                    <p class="font-weight-light text-color-dark text-3-5 px-sm-5 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ultricies nunc, eu interdum enim convallis pretium. Quisque eu neque augue. Aliquam egestas nunc at efficitur faucibus. </p>
                                </div>
                                <div class="text-center">
                                    <strong class="d-block text-color-primary text-7 line-height-1">2015</strong>
                                    <strong class="d-block text-color-dark text-4 mb-4">New Headquarter</strong>
                                    <p class="font-weight-light text-color-dark text-3-5 px-sm-5 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ultricies nunc, eu interdum enim convallis pretium. Quisque eu neque augue. Aliquam egestas nunc at efficitur faucibus. </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="mission-vision" class="row">
                    <div class="col">
                        <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-4">Mission & Vision</h2>
                        <div class="tabs tabs-bottom tabs-simple pb-2 mb-5">
                            <ul class="nav nav-tabs justify-content-start">
                                <li class="nav-item mb-3">
                                    <a class="nav-link font-weight-bold text-4 border-width-2 pb-3-5 px-1 active" href="#tabsMissionVision1" data-bs-toggle="tab">Manifesto</a>
                                </li>
                                <li class="nav-item mb-3 mx-4">
                                    <a class="nav-link font-weight-bold text-4 border-width-2 pb-3-5 px-1" href="#tabsMissionVision2" data-bs-toggle="tab">Vision</a>
                                </li>
                                <li class="nav-item mb-3">
                                    <a class="nav-link font-weight-bold text-4 border-width-2 pb-3-5 px-1" href="#tabsMissionVision3" data-bs-toggle="tab">Mission</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tabsMissionVision1">
                                    <p class="text-3-5 font-weight-light mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ultricies nunc, eu interdum enim convallis pretium. Quisque eu neque augue. Aliquam egestas nunc at efficitur faucibus. Praesent mauris eros, tincidunt id enim sodales, rhoncus malesuada ligula. <span class="highlight highlight-primary highlight-bg-opacity highlight-animated" data-appear-animation="highlight-animated-start" data-appear-animation-delay="1200" data-plugin-options="{'flagClassOnly': true}">Vivamus quis purus</span> nec sapien pellentesque imperdiet. Nullam porttitor augue mi, sit amet luctus est tincidunt sed ex, nec vehicula elit. Nullam porttitor augue mi, sit amet luctus est tincidunt sed.  </p>
                                </div>
                                <div class="tab-pane" id="tabsMissionVision2">
                                    <p class="text-3-5 font-weight-light mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ultricies nunc, eu interdum enim convallis pretium. Quisque eu neque augue. Aliquam egestas nunc at efficitur faucibus. Praesent mauris eros, tincidunt id enim sodales, rhoncus malesuada ligula. Sit amet luctus est tincidunt sed ex, nec vehicula elit. Nullam porttitor augue mi, sit amet luctus est tincidunt sed. Donec tempus bibendum ex, nec vehicula elit. </p>
                                </div>
                                <div class="tab-pane" id="tabsMissionVision3">
                                    <p class="text-3-5 font-weight-light mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ultricies nunc, eu interdum enim convallis pretium. Quisque eu neque augue. Aliquam egestas nunc at efficitur faucibus. Praesent mauris eros, tincidunt id enim sodales, rhoncus malesuada ligula. Nullam porttitor augue mi, sit amet luctus est tincidunt sed ex, nec vehicula elit. Nullam porttitor augue mi, sit amet luctus est tincidunt sed. Donec tempus bibendum ex, nec vehicula elit. </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="leadership" class="row mb-3">
                    <div class="col">
                        <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-4">Leadership</h2>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="card border-0 border-radius-0">
                                    <img src="{{ asset('cd-project/img/defaults/team/team-1.jpg') }}" class="card-img-top border-radius-0" alt="{{ __('Miembro del equipo') }}" />
                                    <div class="card-body text-center px-4 py-5-5">
                                        <h2 class="card-title alternative-font-4 text-color-dark font-weight-bold line-height-1 text-5 mb-1">{{ __('Nombre Apellido') }}</h2>
                                        <p class="text-color-grey text-2-5 mb-3">{{ __('CEO & FUNDADOR') }}</p>
                                        <p class="font-weight-light text-color-dark line-height-7 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci, ac auctor lacus tincidunt ut...</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card border-0 border-radius-0">
                                    <img src="{{ asset('cd-project/img/defaults/team/team-2.jpg') }}" class="card-img-top border-radius-0" alt="{{ __('Miembro del equipo') }}" />
                                    <div class="card-body text-center px-4 py-5-5">
                                        <h2 class="card-title alternative-font-4 text-color-dark font-weight-bold line-height-1 text-5 mb-1">{{ __('Nombre Apellido') }}</h2>
                                        <p class="text-color-grey text-2-5 mb-3">{{ __('DIRECTORA') }}</p>
                                        <p class="font-weight-light text-color-dark line-height-7 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci, ac auctor lacus tincidunt ut...</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="partners" class="row">
                    <div class="col">
                        <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-5">Partners</h2>
                        <div class="row align-items-center justify-content-between text-center my-3 g-5 g-md-0">
                            <div class="col-sm-6 col-md-auto mt-0">
                                <img src="{{ asset('cd-project/img/demos/construction/logos/logo-8.png') }}" alt class="img-fluid" style="max-width: 90px;" />
                            </div>
                            <div class="col-sm-6 col-md-auto mt-0">
                                <img src="{{ asset('cd-project/img/demos/construction/logos/logo-9.png') }}" alt class="img-fluid" style="max-width: 140px;" />
                            </div>
                            <div class="col-sm-6 col-md-auto">
                                <img src="{{ asset('cd-project/img/demos/construction/logos/logo-10.png') }}" alt class="img-fluid" style="max-width: 140px;" />
                            </div>
                            <div class="col-sm-6 col-md-auto">
                                <img src="{{ asset('cd-project/img/demos/construction/logos/logo-11.png') }}" alt class="img-fluid" style="max-width: 140px;" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4 order-lg-1 position-relative">
                <aside class="sidebar" id="sidebar" data-plugin-sticky data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}">
                    <ul class="nav list flex-column text-3-5 font-weight-medium mb-5-5">
                        <li class="nav-item border border-color-grey-1 border-top-0 border-end-0 border-start-0 mb-0">
                            <a class="d-inline-flex align-items-center nav-link text-color-dark text-color-hover-primary py-3 ps-0 active" data-hash data-hash-offset="0" data-hash-offset-lg="110" href="#who-we-are">
                                <i class="fas fa-chevron-right text-1 position-relative top-1 pe-3-5"></i>
                                Who We Are
                            </a>
                        </li>
                        <li class="nav-item border border-color-grey-1 border-top-0 border-end-0 border-start-0 mb-0">
                            <a class="nav-link text-color-dark text-color-hover-primary py-3 ps-0" data-hash data-hash-offset="0" data-hash-offset-lg="110" href="#history">
                                <i class="fas fa-chevron-right text-1 position-relative top-1 pe-3-5"></i>
                                History
                            </a>
                        </li>
                        <li class="nav-item border border-color-grey-1 border-top-0 border-end-0 border-start-0 mb-0">
                            <a class="nav-link text-color-dark text-color-hover-primary py-3 ps-0" data-hash data-hash-offset="0" data-hash-offset-lg="110" href="#mission-vision">
                                <i class="fas fa-chevron-right text-1 position-relative top-1 pe-3-5"></i>
                                Mission &amp; Vision
                            </a>
                        </li>
                        <li class="nav-item border border-color-grey-1 border-top-0 border-end-0 border-start-0 mb-0">
                            <a class="nav-link text-color-dark text-color-hover-primary py-3 ps-0" data-hash data-hash-offset="0" data-hash-offset-lg="110" href="#leadership">
                                <i class="fas fa-chevron-right text-1 position-relative top-1 pe-3-5"></i>
                                Leadership
                            </a>
                        </li>
                        <li class="nav-item mb-0">
                            <a class="nav-link text-color-dark text-color-hover-primary py-3 ps-0" data-hash data-hash-offset="0" data-hash-offset-lg="110" href="#partners">
                                <i class="fas fa-chevron-right text-1 position-relative top-1 pe-3-5"></i>
                                Partners
                            </a>
                        </li>
                    </ul>

                    <h3 class="text-color-dark font-weight-bold text-transform-none text-5-5 line-height-1 mb-3-5">Contact Us</h3>
                    <p class="text-2 line-height-9">Contact us sending a message or give us a call to discover how we can help. </p>

                    <form class="contact-form form-style-3" action="php/contact-form.php" method="POST">
                        <div class="contact-form-success alert alert-success d-none mt-4">
                            <strong>Success!</strong> Your message has been sent to us.
                        </div>

                        <div class="contact-form-error alert alert-danger d-none mt-4">
                            <strong>Error!</strong> There was an error sending your message.
                            <span class="mail-error-message text-1 d-block"></span>
                        </div>

                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control text-2 h-auto py-2-5" name="name" placeholder="Your Name" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control text-2 h-auto py-2-5" name="email" placeholder="Your E-mail Address" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control text-2 h-auto py-2-5" name="subject" placeholder="Subject" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <textarea maxlength="5000" data-msg-required="Please enter your message." rows="4" class="form-control text-2 h-auto py-2-5" name="message" placeholder="Message" required></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col">
                                <button type="submit" class="custom-view-more d-inline-flex align-items-center btn btn-primary font-weight-semibold rounded-0 text-2 btn-px-4 btn-py-1" data-loading-text="Loading...">
                                    Submit
                                    <img width="27" height="27" src="{{ asset('cd-project/img/demos/construction/icons/arrow-right.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light ms-2'}" />
                                </button>
                            </div>
                        </div>
                    </form>
                </aside>
            </div>
        </div>
    </div>

</div>

@endsection