@extends('layouts.front.app')
@section('meta')
    <title>Making Difference | {{ env('APP_NAME') }}</title>
    <meta name="description" content="Providing high-quality workforce and hosted services to Quanta Operating units" />

@stop
@section('css')
    <style>
        /* CSS for the modal */
        .modal-content {
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            width: max-content;
        }

        .modal-header {
            border-bottom: none;
        }

        .modal-title {
            font-weight: 600;
        }

        .modal-body {
            text-align: justify;
        }

        .modal-footer {
            border-top: none;
        }

        /* Custom CSS for the modern button */
        .btn-modern {
            background-color: var(--thm-primary);
            /* Use a variable for your primary theme color */
            color: #fff;
            border: 2px solid var(--thm-primary);
            padding: 10px 25px;
            font-size: 16px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .btn-modern:hover {
            background-color: transparent;
            color: var(--thm-primary);
            border-color: var(--thm-primary);
        }
    </style>
@endsection
@section('content')
    <div class="primary-content position-relative">

        <section class="page-header"
            style="background-position:center; background-size: cover; background-image: url({{ asset('/images/backgrounds/vission-mission-banner-1894x818.png') }});">


            <div class="container">
                <div class="offset-md-3 page-header__inner">
                    {{-- <ul class="thm-breadcrumb list-unstyled">
                     <li><a href="index.html">Home</a></li>
                     <li><span>/</span></li>
                     <li>Making Difference</li>
                </ul> --}}
                </div>
            </div>
        </section>
        {{-- <section class="about-page">
            <div class="container">
                <div class="row">
                    <div class="col offset-md-3">
                        <div class="row">
                            <div class="col-xl-6">
                                <div class="about-page__images-box">
                                    <ul class="list-unstyled about-page__img-list">
                                        <li>
                                            <div class="about-page__img">
                                                <img class="img-fluid" src="{{ asset('/images/md/sq1.png') }}"
                                                    alt="">
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div class="about-page__right">
                                    <div class="section-title text-left">
                                        <h2 class="section-title__title">BUSINESS DEVELOPMENT</h2>
                                    </div>
                                    <p class="about-page__right-text">" Your Presence is a gift "</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section> --}}
    </div>


    {{-- <section class="we-building-two">
    <div class="we-building-two-bg jarallax" data-jarallax data-speed="0.2" data-imgPosition="50% 0%"
        style="background-image: url({{asset('/images/backgrounds/we-building-2-bg.jpg')}})"></div>
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="we-building-two__inner">
                    <div class="we-building__video-link">
                        <a href="https://youtu.be/8ObUH-4uUlU" class="video-popup">
                            <div class="we-building__video-icon">
                                <span class="icon-play-button"></span>
                                <i class="ripple"></i>
                            </div>
                        </a>
                    </div>
                    <h2 class="we-building__video-title">We’re Building the Future <br> and Restoring the Past
                    </h2>
                </div>
            </div>
        </div>
    </div>
</section> --}}
    <!--<section class="team-one about-page-team">-->
    <!--    <div class="team-one__container">-->
    <!--        <div class="section-title text-center">-->
    <!--            <br>-->
    <!--            {{-- <span class="section-title__tagline">Meet the team</span>-->
    <!--            <h2 class="section-title__title">The Professionals</h2> --}}-->
    <!--        </div>-->
    <!--        <div class="row" style="display:flex; justify-content: center; align-items: center;">-->
    <!--            <div class="col-xl-4 col-lg-4 col-sm-6 wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1000ms">-->
    <!--                <div class="team-one__single">-->
    <!--                    <div class="team-one__img" style="border-radius: 16px;">-->
    <!--                        <img src="{{ asset('/images/DE Wit Wynand.png') }}" alt="">-->
    <!--                        {{-- <div class="team-one__social">-->
    <!--                            <a href="#"><i class="fab fa-twitter"></i></a>-->
    <!--                            <a href="#"><i class="fab fa-facebook"></i></a>-->
    <!--                            <a href="#"><i class="fab fa-pinterest-p"></i></a>-->
    <!--                            <a href="#"><i class="fab fa-instagram"></i></a>-->
    <!--                        </div> --}}-->
    <!--                    </div>-->
    <!--                    <div style="cursor: pointer;" class="team-one__content" class="btn btn-modern" data-toggle="modal"-->
    <!--                        data-target="#wynandModal">-->
    <!--                        <h3 class="team-one__name" style="color:#aa062c;">Wynand De Wit</h3>-->
    <!--                        <p class="team-one__title">Vice President Operations <span style="color:red;">→</span></p>-->
    <!--                        {{-- <p class="team-one__title">Wdewit@QuantaServices.com<br>-->
    <!--                            Manila Cell: +63 9542615971 <br>-->
    <!--                            Manila Landline: +63 8 635 6692-->
    <!--                        </p> --}}-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div class="modal fade" id="wynandModal" tabindex="-1" role="dialog" aria-labelledby="wynandModalLabel"-->
    <!--                aria-hidden="true">-->
    <!--                <div class="modal-dialog modal-dialog-centered" role="document">-->
    <!--                    <div class="modal-content">-->
    <!--                        <div class="modal-header">-->
    <!--                            <h5 class="modal-title" id="wynandModalLabel">Wynand De Wit - Vice President Operations</h5>-->
    <!--                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
    <!--                                <span aria-hidden="true">&times;</span>-->
    <!--                            </button>-->
    <!--                        </div>-->
    <!--                        <div class="modal-body">-->
    <!--                            <div class="w-100 overflow-hidden rounded" style="height: 450px;">-->
    <!--                                <img src="{{ asset('/images/DE Wit Wynand.png') }}" alt="Wynand De Wit"-->
    <!--                                    class="img-fluid h-100"-->
    <!--                                    style="object-fit: cover; object-position: 20% 20%; width: 100%; ">-->
    <!--                            </div>-->

    <!--                            <h4 style="margin-top: 16px;">SUMMARY</h4>-->
    <!--                            <p>The Vice-President - Operations is responsible for planning the long-term future of the-->
    <!--                                Company's operations, guiding and growing these operations in a sustainable manner-->
    <!--                                whilst maintaining the Company's reputation at all times. The incumbent is also-->
    <!--                                responsible for business development and managing operations such that projects are-->
    <!--                                delivered safely and in accordance with quality, time and cost objectives.</p>-->
    <!--                            <h4>ESTABLISH AND GROW THE COMPANY:</h4>-->
    <!--                            <ul>-->
    <!--                                <li>Lead the management team of the Company.</li>-->
    <!--                                <li>Coordinate the long-term strategic planning and business plan development.</li>-->
    <!--                                <li>Participate in enterprise, market and opportunity risk identification and mitigation-->
    <!--                                    and ensure this is continually reviewed.</li>-->
    <!--                                <li>Manage the development of budgets for the Company, including operational, project-->
    <!--                                    and departmental budgets.</li>-->
    <!--                                <li>Manage the business development, growing a strong customer base and strong-->
    <!--                                    relationships with customers.</li>-->
    <!--                                <li>Interact with other Quanta operating units to ensure that group capabilities are-->
    <!--                                    leveraged to best effect.</li>-->
    <!--                            </ul>-->
    <!--                            <h4>OPERATIONAL:</h4>-->
    <!--                            <ul>-->
    <!--                                <li>Drive revenue growth including growth driven by repeat business.</li>-->
    <!--                                <li>Participate in preparation of proposals such that competitive, well-structured-->
    <!--                                    offers, that meet business plan and risk tolerance requirements are submitted to-->
    <!--                                    customers.</li>-->
    <!--                                <li>Implement and manage the business plan.</li>-->
    <!--                                <li>Create and maintain a safe and healthy work environment Maximisation of profit-->
    <!--                                    generation and positive cash-flow.</li>-->
    <!--                                <li>Manage staff utilisation to achieve budget.</li>-->
    <!--                                <li>Participate in monthly forecast reviews and preparation of financial reporting.</li>-->
    <!--                                <li>Compliance with all laws and engineering standards.</li>-->
    <!--                                <li>Establish and maintain high performance culture of personal responsibility,-->
    <!--                                    accountability, and pride in the quality of the work.</li>-->
    <!--                                <li>Satisfaction levels of staff result in low turnover.</li>-->
    <!--                                <li>Oversee the care and maintenance of all physical assets and facilities.</li>-->
    <!--                            </ul>-->
    <!--                            <h4>CUSTOMER RELATIONSHIPS:</h4>-->
    <!--                            <ul>-->
    <!--                                <li>Ensure that the company can provide innovative and efficient products that meet the-->
    <!--                                    customers' needs.</li>-->
    <!--                                <li>With the management team and other senior staff, foster customer relationships,-->
    <!--                                    engage and support them, with high levels of technical expertise and interpersonal-->
    <!--                                    skills.</li>-->
    <!--                                <li>Develop strong relationships with customers and a deep understanding of the-->
    <!--                                    customer's requirements.</li>-->
    <!--                                <li>Provide opportunities for customer feedback.</li>-->
    <!--                                <li>Customers report a high level of satisfaction with services provided.</li>-->
    <!--                                <li>Identify opportunities for building stronger relationships and added value to the-->
    <!--                                    customer.</li>-->
    <!--                                <li>Seek opportunities for repeat business.</li>-->
    <!--                            </ul>-->
    <!--                        </div>-->
    <!--                        <div class="modal-footer">-->
    <!--                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->

    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->
    <section class="brand-one about-page-brand">
        <div class="container">
            <div class="thm-swiper__slider swiper-container"
                data-swiper-options='{"spaceBetween": 100, "slidesPerView": 5, "autoplay": { "delay": 5000 }, "breakpoints": {
            "0": {
                "spaceBetween": 30,
                "slidesPerView": 2
            },
            "375": {
                "spaceBetween": 30,
                "slidesPerView": 2
            },
            "575": {
                "spaceBetween": 30,
                "slidesPerView": 3
            },
            "767": {
                "spaceBetween": 50,
                "slidesPerView": 4
            },
            "991": {
                "spaceBetween": 50,
                "slidesPerView": 5
            },
            "1199": {
                "spaceBetween": 100,
                "slidesPerView": 5
            }
        }}'>
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="{{ asset('/images/brand/brand-1-1.png') }}" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('/images/brand/brand-1-2.png') }}" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('/images/brand/brand-1-3.png') }}" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('/images/brand/brand-1-4.png') }}" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('/images/brand/brand-1-5.png') }}" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('/images/brand/brand-1-1.png') }}" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('/images/brand/brand-1-2.png') }}" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('/images/brand/brand-1-3.png') }}" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('/images/brand/brand-1-4.png') }}" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('/images/brand/brand-1-5.png') }}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="cta-one">
        <div class="cta-one-bg jarallax" data-jarallax data-speed="0.2" data-imgPosition="50% 0%"
            style="background-image: url({{ asset('/images/backgrounds/cta-one-bg.jpg') }})"></div>
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="cta-one__inner wow fadeInUp" data-wow-delay="100ms" data-wow-duration="1500ms">
                        <div class="cta-one__title">
                            <h2>Provide You Quality Work that <br> Meets Your Expectation</h2>
                        </div>
                        <div class="cta-one__btn-box">
                            <a href="{{ url('our-company/about-quanta') }}" class="btn-style-one cta-one__btn">
                                <i class="btn-curve"></i>
                                <span class="btn-title">Discover More</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection