@extends('master')


@section('title','Services')

@section('meta_description','Discover our comprehensive service offerings.')



@section('content')
    <div class="services-page">
        <div class="mobile-menu-container fixed mobile transparent">
            <a href="#" class="open-mobile-menu">
                <span></span>
            </a>
        </div>

        <section class="page-header header-style-4 collapse-circles">
            <div class="title">
                <h2>Our Services</h2>
                <h1><span>We fuse insights with strategy, design and communications for</span> immediate business impact.</h1>
            </div>
            <ul class="social fixed desktop">
                <li>
                    <a href="https://fb.me/upbound.studio" target="_blank">
                        <i class="fa fa-facebook"></i>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <i class="fa fa-twitter"></i>
                    </a>
                </li>
                <li>
                    <a href="https://www.instagram.com/upbound.studio/" target="_blank">
                        <i class="fa fa-instagram"></i>
                    </a>
                </li>
                <li>
                    <a href="https://www.behance.net/jackwisley" target="_blank">
                        <i class="fa fa-behance"></i>
                    </a>
                </li>
                <li>
                    <a href="https://www.youtube.com/channel/UCrww2Wj4P2QVWPEfjcFAiow" target="_blank">
                        <i class="fa fa-youtube-play"></i>
                    </a>
                </li>
                <li>
                    <a href="https://www.linkedin.com/company/upbound-studio/" target="_blank">
                        <i class="fa fa-linkedin"></i>
                    </a>
                </li>
            </ul> <a href="#" class="scroll-down">
                <p class="hide">See what we have to offer</p>
            </a>
        </section>

        <section class="services scroll-to">
            @php $flag=false; @endphp
            @foreach($serviceArr as $service)
            @if($flag==false)
            <div class="service">
                <div class="container-left info-container">
                    <div class="description">
                        <div class="animation-sequence-1">
                            <h2>{{$service->service_name}}</h2>
                           {!! $service->service_des !!}
                        </div>

                       

                        
                        <a href="{{Route('services.details',[$service->slug])}}" class="btn black">View Case Studies</a>
                    </div>
                </div>
                <div class="container-right">
                    <div class="img-block">
                        <figure style="background: url('assets/images/services/{{$service->service_image}}') no-repeat center; background-size: contain"></figure>
                    </div>
                </div>
            </div>
            @php $flag=true; @endphp

            @elseif($flag==true)
           

            <div class="service">
                <div class="container-left">
                    <div class="img-block">
                        <figure style="background: url('assets/images/services/{{$service->service_image}}') no-repeat center; background-size: contain"></figure>
                    </div>
                </div>
                <div class="container-right info-container">
                    <div class="description">
                        <div class="animation-sequence-1">
                            <h2>{{$service->service_name}}</h2>
                            {!! $service->service_des !!}
                        </div>
                      

                        
                        <a href="{{Route('services.details',[$service->slug])}}" class="btn black">View Case Studies</a>
                    </div>
                </div>
            </div>

            @php $flag=false; @endphp

            @endif
            @endforeach


            
        </section>

        <section class="faq">
            <div class="animation-sequence-1">
                <h2>Frequently Asked Questions</h2>
                <p>Can’t find the answer you’re looking for? Here are the most asked questions to help you!</p>
            </div>
            <ul class="animation-sequence-2">
                <li class="active">
                    <h3>I&rsquo;d love to work with you, how do we get started?</h3>
                    <div class="answer active">
                        <p><span style="font-weight: 400;">It&rsquo;s as easy as chatting with a friend. All you have to do is shoot us a message at </span><a href="mailto:hello@upbound.studio"><span style="font-weight: 400;">hello@upbound.studio</span></a><span style="font-weight: 400;"> or </span><a href="contact"><span style="font-weight: 400;">https://upbound.studio/contact</span></a><span style="font-weight: 400;"> or give us a quick call to discuss what you have in mind:</span></p>
                        @foreach($contactArr as $contact)
                        <p><span style="font-weight: 400;"> </span><span style="font-weight: 400;"><br /></span><span style="font-weight: 400;">{{$contact->country_code}} <a href="tel:{{$contact->contact}}">{{$contact->phone}}</a></span></p>
                        @endforeach
                        
                       
                    </div>
                </li>
                <li>
                    <h3>How much does a website cost?</h3>
                    <div class="answer">
                        <p><span style="font-weight: 400;">Website costs vary greatly, largely based on the type of site you need, the development type, the designs implemented in it, its copywriting, its intended use. How about sending us a message or hello@upbound.studio or </span><a href="contact"><span style="font-weight: 400;">https://upbound.studio/contact</span></a> or give us a quick call to discuss what suits you and your brand. </span></p>
                    </div>
                </li>
                <li>
                    <h3>Do you require upfront payment?</h3>
                    <div class="answer">
                        <p><span style="font-weight: 400;">To ensure you get the best results and the most value of our services we do ask for an upfront payment. The type of payment depends on the project we will be working on, the timeline, and of course, it&rsquo;s always backed up with a written guarantee from both parties. </span></p>
                    </div>
                </li>
                <li>
                    <h3>How does strategy impact creativity?</h3>
                    <div class="answer">
                        <p><span style="font-weight: 400;">Creativity runs in our blood, and we depend on it in every project we work on. A crucial element of every strategy is creativity, but also creativity can sometimes run wild without a strategy. At Upbound Studio, we believe that they both go hand in hand to deliver the best results in a timely manner. </span></p>
                    </div>
                </li>
            </ul>
        </section>

        <section class="call-to-action main-section style-2">
            <div class="container-right">
                <p>Want to be part of this experience?</p>
                <h2 class="add-fade-from-bottom">Let's work together</h2>
                <a href="contact" class="btn yellow large">Get in Touch</a>
            </div>
        </section>

        <section class="awards main-section">
            <div class="content">
                <div>
                    <h2>Awards</h2>
                    <p>We are humbled and honored by the recognition from our peers</p>
                </div>
                <ul>
                    <li class="cannes">
                        <figure style="background: url('assets/images/cannes-lions-1.png') no-repeat center; background-size: contain"></figure>
                    </li>
                    <li class="awwards">
                        <figure style="background: url('assets/images/awwards.png') no-repeat center; background-size: contain"></figure>
                    </li>
                    <li class="adesign">
                        <figure style="background: url('assets/images/adesign-award.png') no-repeat center; background-size: contain"></figure>
                    </li>
                </ul>
            </div>
        </section>
    </div>


<script type="text/javascript">
    $(document).ready(function(){
        $(".services-page .services .service ul li").css({"opacity": "1","visibility":"unset"});
    });
</script>
@endsection