@extends('web.layouts.front')
@section('title')
    {{ __('messages.services') }}
@endsection
@section('content')
    <!--
                                               =============================================
                                                Feature Section Thirty One
                                               ==============================================
                                               -->
    <div class="fancy-feature-thirtyOne position-relative bg-white zn2 pt-225 pb-140 lg-pt-200 lg-pb-50">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 col-lg-9 m-auto">
                    <div class="title-style-ten text-center pb-40 lg-pb-20 wow fadeInUp">
                        <h2 class="main-title font-recoleta fw-normal tx-dark">Get <span class="position-relative">Quality<img
                                    src="images/shape/shape_122.svg" alt=""></span> Leads</h2>
                        <p class="fs-20 mt-20">Our digital advertising approach focuses on capturing the essential
                            information you need to be able to generate a real ROI. </p>
                    </div> <!-- /.title-style-ten -->
                </div>
            </div>
            <div class="container pt-120 lg-pt-80 md-pt-60">
                <div class="row gx-xxl-5">
                    @foreach ($frontServices as $frontService)
                        <div class="col-lg-4 col-sm-6 wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
                            <div class="card-style-one pe-xxl-5 position-relative mb-90 md-mb-70">
                                <div class="icon d-flex align-items-center justify-content-center"
                                    style="background-color: rgba(255, 171, 51, 0.18);"><img src="images/icon/icon_156.svg"
                                        alt="" class="lazy-img" style=""></div>
                                <h5 class="fw-500 mt-35 mb-25"><a href="service-details.html"
                                        class="tran3s tx-dark">{{ \Illuminate\Support\Str::limit($frontService->name, 16) }}</a>
                                </h5>
                                <p class="mb-25">
                                    {{ \Illuminate\Support\Str::limit($frontService->short_description, 123) }}</p>
                                <a href="#"><img src="images/icon/icon_05.svg" alt="" class="lazy-img"
                                        style=""></a>
                            </div> <!-- /.card-style-one -->
                        </div>
                    @endforeach
                </div>
                <nav aria-label="Page navigation example">
                    {{ $frontServices->links() }}
                </nav>
            </div>
        </div> <!-- /.container -->
        <img src="images/lazy.svg" data-src="images/shape/shape_125.svg" alt=""
            class="lazy-img shapes shape-two d-none d-sm-inline-block">
    </div> <!-- /.fancy-feature-thirtyOne -->



    <!--
                                               =============================================
                                                Feature Section Thirty Eight
                                               ==============================================
                                               -->
    <div class="fancy-feature-thirtyEight mt-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="block-style-seven wow fadeInLeft">
                        <div class="title-style-six">
                            <div class="sc-title-two text-uppercase">SOLUTION</div>
                            <h2 class="main-title fw-500 tx-dark">Digital solutions for businss.</h2>
                        </div> <!-- /.title-style-ten -->
                        <p class="fs-20 pt-10 pb-30 lg-pb-20">Do you have more question about our solution? Just
                            send us a message for help</p>
                        <div class="btn-eighteen position-relative d-inline-block tx-dark"><a href="/about-us"
                                class="fw-500 tran3s"> More About solution <i class="fa-solid fa-angle-right"></i></a>
                        </div>
                    </div> <!-- /.block-style-seven -->
                </div>

                <div class="col-lg-6 ms-auto wow fadeInRight">
                    <div class="accordion accordion-style-two md-mt-60" id="accordionOne">
                        <div class="accordion-item">
                            <div class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                    Google ads setup & management
                                </button>
                            </div>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                                data-bs-parent="#accordionOne">
                                <div class="accordion-body">
                                    <p>Our founders Dustin Moskovitz and Justin Rosenstein met while leading
                                        Engineering teams at Facebook. </p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <div class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    Web Design & Development
                                </button>
                            </div>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                                data-bs-parent="#accordionOne">
                                <div class="accordion-body">
                                    <p>Our founders Dustin Moskovitz and Justin Rosenstein met while leading
                                        Engineering teams at Facebook. </p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <div class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                                    Reputation management
                                </button>
                            </div>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                                data-bs-parent="#accordionOne">
                                <div class="accordion-body">
                                    <p>Our founders Dustin Moskovitz and Justin Rosenstein met while leading
                                        Engineering teams at Facebook. </p>
                                </div>
                            </div>
                        </div>
                    </div> <!-- /.accordion-style-two -->
                </div>
            </div>
        </div> <!-- /.container -->
    </div> <!-- /.fancy-feature-thirtyEight -->




    <!--
                                               =============================================
                                                Feedback Section Ten
                                               ==============================================
                                               -->
    <div class="feedback-section-ten position-relative zn2 pt-110 pb-150 mt-180 lg-mt-120 lg-pt-80 lg-pb-80"
        style="background:#FAFAFA;">
        <div class="container">
            <div class="position-relative">
                <div class="row">
                    <div class="col-lg-5">
                        <div class="title-style-ten text-center text-lg-start wow fadeInLeft">
                            <div class="sc-title">FEEDBACK</div>
                            <h2 class="main-title font-recoleta fw-normal tx-dark">What <span
                                    class="position-relative">client <img src="images/shape/shape_129.svg"
                                        alt=""></span> think about us.</h2>
                        </div> <!-- /.title-style-ten -->
                    </div>
                </div>

                <div class="slider-wrapper pt-70 lg-pt-40 wow fadeInUp">
                    <div class="feedback_slider_ten">
                        <div class="item">
                            <div class="feedback-block-ten" style="background:#FFED4E;">
                                <div class="cmp-name fw-500 tx-dark">Linkedin</div>
                                <div class="fs-18 tx-dark">From Google, Engineer</div>
                                <p class="tx-dark mt-40 mb-70 lg-mt-30 lg-mb-50">One should not hesitate to ask for
                                    the unlikely as they might think.</p>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="fw-500 tx-dark fs-18">Qulaity & Cost: 5.00</div>
                                    <img src="images/icon/icon_98.svg" alt="">
                                </div>
                            </div> <!-- /.feedback-block-ten -->
                        </div>
                        <div class="item">
                            <div class="feedback-block-ten" style="background:#00FCFC;">
                                <div class="cmp-name fw-500 tx-dark">Google.</div>
                                <div class="fs-18 tx-dark">Giant search engine</div>
                                <p class="tx-dark mt-40 mb-70 lg-mt-30 lg-mb-50">One should not hesitate to ask for
                                    the unlikely as they might think.</p>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="fw-500 tx-dark fs-18">Qulaity & Cost: 5.00</div>
                                    <img src="images/icon/icon_98.svg" alt="">
                                </div>
                            </div> <!-- /.feedback-block-ten -->
                        </div>
                        <div class="item">
                            <div class="feedback-block-ten" style="background:#F27AFF;">
                                <div class="cmp-name fw-500 tx-dark">Gravity inc.</div>
                                <div class="fs-18 tx-dark">From Google</div>
                                <p class="tx-dark mt-40 mb-70 lg-mt-30 lg-mb-50">One should not hesitate to ask for
                                    the unlikely as they might think.</p>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="fw-500 tx-dark fs-18">Qulaity & Cost: 5.00</div>
                                    <img src="images/icon/icon_98.svg" alt="">
                                </div>
                            </div> <!-- /.feedback-block-ten -->
                        </div>
                        <div class="item">
                            <div class="feedback-block-ten" style="background:#52C1FF;">
                                <div class="cmp-name fw-500 tx-dark">Google.</div>
                                <div class="fs-18 tx-dark">Giant search engine</div>
                                <p class="tx-dark mt-40 mb-70 lg-mt-30 lg-mb-50">One should not hesitate to ask for
                                    the unlikely as they might think.</p>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="fw-500 tx-dark fs-18">Qulaity & Cost: 5.00</div>
                                    <img src="images/icon/icon_98.svg" alt="">
                                </div>
                            </div> <!-- /.feedback-block-ten -->
                        </div>
                    </div> <!-- /.feedback_slider_ten -->
                </div> <!-- /.slider-wrapper -->

                <ul class="slider-arrows slick-arrow-five d-flex justify-content-center style-none wow fadeInRight">
                    <li class="prev_f5 slick-arrow text-center tran3s" style=""><i class="bi bi-arrow-left"></i>
                    </li>
                    <li class="next_f5 slick-arrow text-center tran3s" style=""><i class="bi bi-arrow-right"></i>
                    </li>
                </ul>
            </div>
        </div>
        <img src="images/shape/shape_130.svg" alt="" class="lazy-img shapes shape-one">
        <img src="images/shape/shape_131.svg" alt="" class="lazy-img shapes shape-two d-none d-sm-inline-block">
    </div> <!-- /.feedback-section-ten -->



    <!--
                                               =====================================================
                                                Fancy Short Banner Twelve
                                               =====================================================
                                               -->
    <div class="fancy-short-banner-twelve position-relative zn2 pt-160 pb-150 lg-pt-120 lg-pb-120">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 m-auto text-center">
                    <div class="title-style-ten wow fadeInUp">
                        <h2 class="main-title font-recoleta fw-normal tx-dark">Have Any Project? <br> <span
                                class="position-relative">Let’s Talk <img src="images/shape/shape_132.svg"
                                    alt=""></span> & Grow your Business</h2>
                    </div> <!-- /.title-style-ten -->
                    <p class="text-lg mt-45 mb-55 lg-mb-30 lg-mt-40 wow fadeInUp" data-wow-delay="0.2s">We’r ready
                        to help you. Our expert is here, just send a message.</p>

                    <a href="/contact-us" class="btn-twenty fw-500 tran3s wow fadeInUp" data-wow-delay="0.3s">Send
                        Message</a>
                </div>
            </div>
        </div>
        <div class="shapes shape-one"></div>
    </div> <!-- /.fancy-short-banner-twelve -->



    <button class="scroll-top">
        <i class="bi bi-arrow-up-short"></i>
    </button>
@endsection