<header id="header">

        <div class="top-bar">

            <div class="container">

                <div class="row">

                    <div class="col-sm-6 col-xs-4">

                        <div class="top-number"><p><i class="fa fa-phone-square"></i>  +0123 456 70 90</p></div>

                    </div>

                    <div class="col-sm-6 col-xs-8">

                       <div class="social">

                            <ul class="social-share">

                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>

                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>

                                <li><a href="#"><i class="fa fa-linkedin"></i></a></li> 

                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>

                                <li><a href="#"><i class="fa fa-skype"></i></a></li>

                            </ul>

                            <div class="search">

                                <form role="form">

                                    <input type="text" class="search-form" autocomplete="off" placeholder="Search">

                                    <i class="fa fa-search"></i>

                                </form>

                           </div>

                       </div>

                    </div>

                </div>

            </div><!--/.container-->

        </div><!--/.top-bar-->

        <nav class="navbar navbar-inverse" role="banner">

            <div class="container">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                        <span class="sr-only">Toggle navigation</span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

                    <a class="navbar-brand" href="index.html"><img src="http://shapebootstrap.net/demo/html/corlate/images/logo.png" alt="logo"></a>

                </div>

                <div class="collapse navbar-collapse navbar-right">

                    <ul class="nav navbar-nav">

                        <li class="active"><a href="index.html">Home</a></li>

                        <li><a href="about-us.html">About Us</a></li>

                        <li><a href="services.html">Services</a></li>

                        <li><a href="portfolio.html">Portfolio</a></li>

                        <li class="dropdown">

                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="fa fa-angle-down"></i></a>

                            <ul class="dropdown-menu">

                                <li><a href="blog-item.html">Blog Single</a></li>

                                <li><a href="pricing.html">Pricing</a></li>

                                <li><a href="404.html">404</a></li>

                                <li><a href="shortcodes.html">Shortcodes</a></li>

                            </ul>

                        </li>

                        <li><a href="blog.html">Blog</a></li> 

                        <li><a href="contact-us.html">Contact</a></li>                        

                    </ul>

                </div>

            </div><!--/.container-->

        </nav><!--/nav-->

    </header><!--/header-->

    <section id="main-slider" class="no-margin">

        <div class="carousel slide">

            <ol class="carousel-indicators">

                <li data-target="#main-slider" data-slide-to="0" class="active"></li>

                <li data-target="#main-slider" data-slide-to="1"></li>

                <li data-target="#main-slider" data-slide-to="2"></li>

            </ol>

            <div class="carousel-inner">

                <div class="item active" style="background-image: url(images/slider/bg1.jpg)">

                    <div class="container">

                        <div class="row slide-margin">

                            <div class="col-sm-6">

                                <div class="carousel-content">

                                    <h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>

                                    <h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>

                                    <a class="btn-slide animation animated-item-3" href="#">Read More</a>

                                </div>

                            </div>

                            <div class="col-sm-6 hidden-xs animation animated-item-4">

                                <div class="slider-img">

                                    <img src="http://shapebootstrap.net/demo/html/corlate/images/slider/img1.png" class="img-responsive">

                                </div>

                            </div>

                        </div>

                    </div>

                </div><!--/.item-->

                <div class="item" style="background-image: url(http://shapebootstrap.net/demo/html/corlate/images/slider/bg2.jpg)">

                    <div class="container">

                        <div class="row slide-margin">

                            <div class="col-sm-6">

                                <div class="carousel-content">

                                    <h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>

                                    <h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>

                                    <a class="btn-slide animation animated-item-3" href="#">Read More</a>

                                </div>

                            </div>

                            <div class="col-sm-6 hidden-xs animation animated-item-4">

                                <div class="slider-img">

                                    <img src="http://shapebootstrap.net/demo/html/corlate/images/slider/img2.png" class="img-responsive">

                                </div>

                            </div>

                        </div>

                    </div>

                </div><!--/.item-->

                <div class="item" style="background-image: url(http://shapebootstrap.net/demo/html/corlate/images/slider/bg3.jpg)">

                    <div class="container">

                        <div class="row slide-margin">

                            <div class="col-sm-6">

                                <div class="carousel-content">

                                    <h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>

                                    <h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>

                                    <a class="btn-slide animation animated-item-3" href="#">Read More</a>

                                </div>

                            </div>

                            <div class="col-sm-6 hidden-xs animation animated-item-4">

                                <div class="slider-img">

                                    <img src="http://shapebootstrap.net/demo/html/corlate/images/slider/img3.png" class="img-responsive">

                                </div>

                            </div>

                        </div>

                    </div>

                </div><!--/.item-->

            </div><!--/.carousel-inner-->

        </div><!--/.carousel-->

        <a class="prev hidden-xs" href="#main-slider" data-slide="prev">

            <i class="fa fa-chevron-left"></i>

        </a>

        <a class="next hidden-xs" href="#main-slider" data-slide="next">

            <i class="fa fa-chevron-right"></i>

        </a>

    </section><!--/#main-slider-->

    <section id="feature" >

        <div class="container">

           <div class="center wow fadeInDown">

                <h2>Features</h2>

                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>

            </div>

            <div class="row">

                <div class="features">

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">

                        <div class="feature-wrap">

                            <i class="fa fa-bullhorn"></i>

                            <h2>Fresh and Clean</h2>

                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>

                        </div>

                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">

                        <div class="feature-wrap">

                            <i class="fa fa-comments"></i>

                            <h2>Retina ready</h2>

                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>

                        </div>

                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">

                        <div class="feature-wrap">

                            <i class="fa fa-cloud-download"></i>

                            <h2>Easy to customize</h2>

                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>

                        </div>

                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">

                        <div class="feature-wrap">

                            <i class="fa fa-leaf"></i>

                            <h2>Adipisicing elit</h2>

                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>

                        </div>

                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">

                        <div class="feature-wrap">

                            <i class="fa fa-cogs"></i>

                            <h2>Sed do eiusmod</h2>

                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>

                        </div>

                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">

                        <div class="feature-wrap">

                            <i class="fa fa-heart"></i>

                            <h2>Labore et dolore</h2>

                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>

                        </div>

                    </div><!--/.col-md-4-->

                </div><!--/.services-->

            </div><!--/.row-->    

        </div><!--/.container-->

    </section><!--/#feature-->

    <section id="recent-works">

        <div class="container">

            <div class="center wow fadeInDown">

                <h2>Recent Works</h2>

                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>

            </div>

            <div class="row">

                <div class="col-xs-12 col-sm-4 col-md-3">

                    <div class="recent-work-wrap">

                        <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/portfolio/recent/item1.png" alt="">

                        <div class="overlay">

                            <div class="recent-work-inner">

                                <h3><a href="#">Business theme</a> </h3>

                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>

                                <a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>

                            </div> 

                        </div>

                    </div>

                </div>   

                <div class="col-xs-12 col-sm-4 col-md-3">

                    <div class="recent-work-wrap">

                        <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/portfolio/recent/item2.png" alt="">

                        <div class="overlay">

                            <div class="recent-work-inner">

                                <h3><a href="#">Business theme</a></h3>

                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>

                                <a class="preview" href="images/portfolio/full/item2.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>

                            </div> 

                        </div>

                    </div>

                </div> 

                <div class="col-xs-12 col-sm-4 col-md-3">

                    <div class="recent-work-wrap">

                        <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/portfolio/recent/item3.png" alt="">

                        <div class="overlay">

                            <div class="recent-work-inner">

                                <h3><a href="#">Business theme </a></h3>

                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>

                                <a class="preview" href="images/portfolio/full/item3.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>

                            </div> 

                        </div>

                    </div>

                </div>   

                <div class="col-xs-12 col-sm-4 col-md-3">

                    <div class="recent-work-wrap">

                        <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/portfolio/recent/item4.png" alt="">

                        <div class="overlay">

                            <div class="recent-work-inner">

                                <h3><a href="#">Business theme </a></h3>

                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>

                                <a class="preview" href="images/portfolio/full/item4.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>

                            </div> 

                        </div>

                    </div>

                </div>   

                <div class="col-xs-12 col-sm-4 col-md-3">

                    <div class="recent-work-wrap">

                        <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/portfolio/recent/item5.png" alt="">

                        <div class="overlay">

                            <div class="recent-work-inner">

                                <h3><a href="#">Business theme</a></h3>

                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>

                                <a class="preview" href="images/portfolio/full/item5.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>

                            </div> 

                        </div>

                    </div>

                </div>   

                <div class="col-xs-12 col-sm-4 col-md-3">

                    <div class="recent-work-wrap">

                        <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/portfolio/recent/item6.png" alt="">

                        <div class="overlay">

                            <div class="recent-work-inner">

                                <h3><a href="#">Business theme </a></h3>

                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>

                                <a class="preview" href="images/portfolio/full/item6.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>

                            </div> 

                        </div>

                    </div>

                </div> 

                <div class="col-xs-12 col-sm-4 col-md-3">

                    <div class="recent-work-wrap">

                        <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/portfolio/recent/item7.png" alt="">

                        <div class="overlay">

                            <div class="recent-work-inner">

                                <h3><a href="#">Business theme </a></h3>

                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>

                                <a class="preview" href="images/portfolio/full/item7.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>

                            </div> 

                        </div>

                    </div>

                </div>   

                <div class="col-xs-12 col-sm-4 col-md-3">

                    <div class="recent-work-wrap">

                        <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/portfolio/recent/item8.png" alt="">

                        <div class="overlay">

                            <div class="recent-work-inner">

                                <h3><a href="#">Business theme </a></h3>

                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>

                                <a class="preview" href="images/portfolio/full/item8.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>

                            </div> 

                        </div>

                    </div>

                </div>   

            </div><!--/.row-->

        </div><!--/.container-->

    </section><!--/#recent-works-->

    <section id="services" class="service-item">

  <div class="container">

            <div class="center wow fadeInDown">

                <h2>Our Service</h2>

                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>

            </div>

            <div class="row">

                <div class="col-sm-6 col-md-4">

                    <div class="media services-wrap wow fadeInDown">

                        <div class="pull-left">

                            <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/services/services1.png">

                        </div>

                        <div class="media-body">

                            <h3 class="media-heading">SEO Marketing</h3>

                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>

                        </div>

                    </div>

                </div>

                <div class="col-sm-6 col-md-4">

                    <div class="media services-wrap wow fadeInDown">

                        <div class="pull-left">

                            <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/services/services2.png">

                        </div>

                        <div class="media-body">

                            <h3 class="media-heading">SEO Marketing</h3>

                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>

                        </div>

                    </div>

                </div>

                <div class="col-sm-6 col-md-4">

                    <div class="media services-wrap wow fadeInDown">

                        <div class="pull-left">

                            <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/services/services3.png">

                        </div>

                        <div class="media-body">

                            <h3 class="media-heading">SEO Marketing</h3>

                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>

                        </div>

                    </div>

                </div>  

                <div class="col-sm-6 col-md-4">

                    <div class="media services-wrap wow fadeInDown">

                        <div class="pull-left">

                            <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/services/services4.png">

                        </div>

                        <div class="media-body">

                            <h3 class="media-heading">SEO Marketing</h3>

                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>

                        </div>

                    </div>

                </div>

                <div class="col-sm-6 col-md-4">

                    <div class="media services-wrap wow fadeInDown">

                        <div class="pull-left">

                            <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/services/services5.png">

                        </div>

                        <div class="media-body">

                            <h3 class="media-heading">SEO Marketing</h3>

                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>

                        </div>

                    </div>

                </div>

                <div class="col-sm-6 col-md-4">

                    <div class="media services-wrap wow fadeInDown">

                        <div class="pull-left">

                            <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/services/services6.png">

                        </div>

                        <div class="media-body">

                            <h3 class="media-heading">SEO Marketing</h3>

                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>

                        </div>

                    </div>

                </div>                                                

            </div><!--/.row-->

        </div><!--/.container-->

    </section><!--/#services-->

    <section id="middle">

        <div class="container">

            <div class="row">

                <div class="col-sm-6 wow fadeInDown">

                    <div class="skill">

                        <h2>Our Skills</h2>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                        <div class="progress-wrap">

                            <h3>Graphic Design</h3>

                            <div class="progress">

                              <div class="progress-bar  color1" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 85%">

                                <span class="bar-width">85%</span>

                              </div>

                            </div>

                        </div>

                        <div class="progress-wrap">

                            <h3>HTML</h3>

                            <div class="progress">

                              <div class="progress-bar color2" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 95%">

                               <span class="bar-width">95%</span>

                              </div>

                            </div>

                        </div>

                        <div class="progress-wrap">

                            <h3>CSS</h3>

                            <div class="progress">

                              <div class="progress-bar color3" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%">

                                <span class="bar-width">80%</span>

                              </div>

                            </div>

                        </div>

                        <div class="progress-wrap">

                            <h3>Wordpress</h3>

                            <div class="progress">

                              <div class="progress-bar color4" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 90%">

                                <span class="bar-width">90%</span>

                              </div>

                            </div>

                        </div>

                    </div>

                </div><!--/.col-sm-6-->

                <div class="col-sm-6 wow fadeInDown">

                    <div class="accordion">

                        <h2>Why People like us?</h2>

                        <div class="panel-group" id="accordion1">

                          <div class="panel panel-default">

                            <div class="panel-heading active">

                              <h3 class="panel-title">

                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">

                                  Lorem ipsum dolor sit amet

                                  <i class="fa fa-angle-right pull-right"></i>

                                </a>

                              </h3>

                            </div>

                            <div id="collapseOne1" class="panel-collapse collapse in">

                              <div class="panel-body">

                                  <div class="media accordion-inner">

                                        <div class="pull-left">

                                            <img class="img-responsive" src="http://shapebootstrap.net/demo/html/corlate/images/accordion1.png">

                                        </div>

                                        <div class="media-body">

                                             <h4>Adipisicing elit</h4>

                                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>

                                        </div>

                                  </div>

                              </div>

                            </div>

                          </div>

                          <div class="panel panel-default">

                            <div class="panel-heading">

                              <h3 class="panel-title">

                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1">

                                  Lorem ipsum dolor sit amet

                                  <i class="fa fa-angle-right pull-right"></i>

                                </a>

                              </h3>

                            </div>

                            <div id="collapseTwo1" class="panel-collapse collapse">

                              <div class="panel-body">

                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.

                              </div>

                            </div>

                          </div>

                          <div class="panel panel-default">

                            <div class="panel-heading">

                              <h3 class="panel-title">

                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1">

                                  Lorem ipsum dolor sit amet

              &am