@extends('layouts.start')
@section('title')
    Partner Referral
@endsection
@section('css')
    {{-- Css Files here --}}
@endsection
@section('content')
    <!-- start page title section -->
    <section class="wow fadeIn bg-light-gray padding-35px-tb page-title-small top-space top-space">
        <div class="container">
            <div class="row equalize xs-equalize-auto">
                <div class="col-lg-8 col-md-6 col-sm-6 col-xs-12 display-table">
                    <div class="display-table-cell vertical-align-middle text-left xs-text-center">
                        <!-- start page title -->
                        <h1 class="alt-font text-extra-dark-gray font-weight-500 no-margin-bottom text-uppercase">Partner Referral</h1>
                        <!-- end page title -->
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 display-table text-right xs-text-left xs-margin-10px-top">
                    <div class="display-table-cell vertical-align-middle breadcrumb text-small alt-font">
                        <!-- start breadcrumb -->
                        <ul class="xs-text-center">
                            <li><a href="#" class="text-dark-gray">Pages</a></li>
                            <li class="text-dark-gray">Partner Referral</li>
                        </ul>
                        <!-- end breadcrumb -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end page title section -->
    <!-- start section -->
    <section class="no-padding wow fadeIn bg-extra-dark-gray" id="services">
        <div class="container-fluid no-padding">
            <div class="row equalize no-margin">
                <div class="col-md-6 col-sm-12 col-xs-12 position-relative sm-height-500px xs-height-350px cover-background wow fadeInLeft" style="background-image: url('http://placehold.it/960x850');">
                    <div class="opacity-extra-medium bg-extra-dark-gray"></div>
                    <div class="bg-deep-pink width-50 text-center text-white padding-ten-all absolute-middle-center z-index-5 md-width-70 xs-width-85 xs-padding-twelve-tb xs-padding-five-lr">
                        <span class="special-char-medium text-white absolute-middle-center top-0 position-absolute fa fa-quote-left"></span>
                        <h6 class="font-weight-300 no-margin-bottom">We design brand, digital experience & marketing campaigns that engage the right customers.</h6>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 col-xs-12 display-table wow fadeInRight last-paragraph-no-margin">
                    <div class="display-table-cell vertical-align-middle padding-fifteen-all md-padding-ten-all xs-text-center xs-no-padding-lr xs-padding-40px-tb">
                        <span class="text-medium margin-10px-bottom display-block alt-font">We create premium designs and technology</span>
                        <h4 class="alt-font text-light-gray">A digital studio crafting beautiful experiences.</h4>
                        <p class="text-extra-large width-85 md-width-100">We always stay on the cutting edge of digital, so that our clients maintain their competitive advantage online.</p>
                        <p class="width-85 md-width-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry. Lorem Ipsum is simply dummy text of the printing and industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry. Lorem Ipsum is simply dummy text.</p>
                        <a href="#" class="btn btn-small margin-35px-top btn-white">Start Your Business</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end section -->
    <!-- start feature box section -->
    <section class="wow fadeIn">
        <div class="container">
            <div class="row">
                <!-- start feature box item -->
                <div class="col-md-4 col-sm-4 col-xs-12 xs-margin-five-bottom last-paragraph-no-margin wow fadeInUp">
                    <div class="feature-box">
                        <div class="content">
                            <i class="icon-browser text-medium-gray icon-large margin-25px-bottom sm-margin-15px-bottom"></i>
                            <div class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom sm-margin-5px-bottom">Live Website Builder</div>
                            <p class="width-85 margin-lr-auto sm-width-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </div>
                    </div>
                </div>
                <!-- end feature box item -->
                <!-- start feature box item -->
                <div class="col-md-4 col-sm-4 col-xs-12 xs-margin-five-bottom last-paragraph-no-margin wow fadeInUp" data-wow-delay="0.2s">
                    <div class="feature-box">
                        <div class="content">
                            <i class="icon-book-open text-medium-gray icon-large margin-25px-bottom sm-margin-15px-bottom"></i>
                            <div class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom sm-margin-5px-bottom">Live Content Creator</div>
                            <p class="width-85 margin-lr-auto sm-width-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </div>
                    </div>
                </div>
                <!-- end feature box item -->
                <!-- start feature box item -->
                <div class="col-md-4 col-sm-4 col-xs-12 xs-margin-five-bottom last-paragraph-no-margin wow fadeInUp" data-wow-delay="0.4s">
                    <div class="feature-box">
                        <div class="content">
                            <i class="icon-wallet text-medium-gray icon-large margin-25px-bottom sm-margin-15px-bottom"></i>
                            <div class="text-medium alt-font text-capitalize text-extra-dark-gray margin-10px-bottom sm-margin-5px-bottom">Create Unique Demos</div>
                            <p class="width-85 margin-lr-auto sm-width-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </div>
                    </div>
                </div>
                <!-- end feature box item -->
            </div>
        </div>
    </section>
    <!-- end feature box section -->
    <!-- start parallax section -->
    <section class="wow fadeIn bg-extra-dark-gray">
        <div class="container position-relative">
            <div class="row equalize sm-equalize-auto">
                <!-- start feature box item -->
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 display-table md-margin-15px-top sm-no-margin-top sm-margin-ten-bottom xs-padding-five-lr xs-margin-ten-bottom wow fadeIn last-paragraph-no-margin">
                    <div class="display-table-cell vertical-align-middle padding-fourteen-right sm-no-padding-right sm-text-center">
                        <p class="width-85 md-width-100 xs-width-100 sm-margin-lr-auto text-medium-gray">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                        <a href="about-us-modern.html" class="margin-35px-top btn btn-small btn-white sm-margin-30px-top">About Company</a>
                    </div>
                </div>
                <!-- end feature box item -->
                <!-- start feature box item -->
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center display-table xs-margin-ten-bottom wow fadeIn" data-wow-delay="0.2s">
                    <div class="display-table-cell vertical-align-middle">
                        <a class="popup-youtube" href="https://www.youtube.com/watch?v=nrJtHemSPW4">
                            <img src="http://placehold.it/800x1022" alt="" class="width-100">
                            <div class="icon-play">
                                <div class="absolute-middle-center width-80">
                                    <img src="images/icon-play.png" alt="">
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- end feature box item -->
                <!-- start feature box item -->
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center display-table wow fadeIn" data-wow-delay="0.4s">
                    <div class="display-table-cell vertical-align-middle">
                        <img src="http://placehold.it/800x1022" alt="" class="width-100">
                    </div>
                </div>
                <!-- end feature box item -->
            </div>
        </div>
    </section>
    <!-- end parallax section -->
    <!-- start counters section -->
    <section class="wow fadeIn">
        <div class="container">
            <div class="row">
                <!-- start counter item -->
                <div class="col-md-3 col-sm-6 col-xs-12 sm-padding-twelve-left sm-margin-ten-bottom xs-margin-50px-bottom xs-padding-15px-left wow fadeInRight">
                    <div class="feature-box-5 position-relative">
                        <i class="icon-desktop text-medium-gray icon-extra-medium top-6"></i>
                        <div class="feature-content">
                            <h6 class="display-block text-extra-dark-gray font-weight-500 alt-font no-margin-bottom timer xs-margin-5px-bottom" data-speed="2000" data-to="350">350</h6>
                            <span class="text-small text-uppercase position-relative top-minus4">Happy Clients</span>
                        </div>
                    </div>
                </div>
                <!-- end counter item -->
                <!-- start counter item -->
                <div class="col-md-3 col-sm-6 col-xs-12 sm-padding-twelve-left sm-margin-ten-bottom xs-margin-50px-bottom xs-padding-15px-left wow fadeInRight" data-wow-delay="0.2s">
                    <div class="feature-box-5 position-relative">
                        <i class="icon-camera text-medium-gray icon-extra-medium top-6"></i>
                        <div class="feature-content">
                            <h6 class="display-block text-extra-dark-gray font-weight-500 alt-font no-margin-bottom timer xs-margin-5px-bottom" data-speed="2000" data-to="780">780</h6>
                            <span class="text-small text-uppercase position-relative top-minus4">Photo Capture</span>
                        </div>
                    </div>
                </div>
                <!-- end counter item -->
                <!-- start counter item -->
                <div class="col-md-3 col-sm-6 col-xs-12 sm-padding-twelve-left xs-margin-50px-bottom xs-padding-15px-left wow fadeInRight" data-wow-delay="0.4s">
                    <div class="feature-box-5 position-relative">
                        <i class="icon-laptop text-medium-gray icon-extra-medium top-6"></i>
                        <div class="feature-content">
                            <h6 class="display-block text-extra-dark-gray font-weight-500 alt-font no-margin-bottom timer xs-margin-5px-bottom" data-speed="2000" data-to="850">850</h6>
                            <span class="text-small text-uppercase position-relative top-minus4">Work Completed</span>
                        </div>
                    </div>
                </div>
                <!-- end counter item -->
                <!-- start counter item -->
                <div class="col-md-3 col-sm-6 col-xs-12 sm-padding-twelve-left xs-padding-15px-left wow fadeInRight" data-wow-delay="0.6s">
                    <div class="feature-box-5 position-relative">
                        <i class="icon-chat text-medium-gray icon-extra-medium top-6"></i>
                        <div class="feature-content">
                            <h6 class="display-block text-extra-dark-gray font-weight-500 alt-font no-margin-bottom timer xs-margin-5px-bottom" data-speed="2000" data-to="650">650</h6>
                            <span class="text-small text-uppercase position-relative top-minus4">Telephonic Talk</span>
                        </div>
                    </div>
                </div>
                <!-- end counter item -->
            </div>
        </div>
    </section>
    <!-- end counters section -->
@endsection

@section('js')
    {{-- Js Files here --}}
@endsection