<!-- HTML  -->
<section class="hero_area">
                <div id="hero_area_slider" class="carousel slide" data-ride="carousel">

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">

                        <!-- First slide -->
                        <div class="item active" style="background: url(img/hero_area_bg_1.jpg) no-repeat scroll 0 0 / cover;">
                            <div class="carousel-caption">
                                <div class="hero_table">
                                    <div class="hero_table_cell">
                                        <h3 class="hero_area_top_text" data-animation="animated bounceInLeft">
                                            Best Financial Wordpress Theme
                                        </h3>
                                        <h3 class="hero_bold_text" data-animation="animated bounceInRight">
                                            Great way to get success <br> in Financial service
                                        </h3>
                                        <div class="hero_btn_wrapper" data-animation="animated zoomInUp">
                                            <button class="hero_area_btn">
                                                Free consultation
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- item end -->

                        <!-- Second slide -->
                        <div class="item" style="background: url(img/hero_area_bg_2.jpg) no-repeat scroll 0 0 / cover;">
                            <div class="carousel-caption">
                                <div class="hero_table">
                                    <div class="hero_table_cell">
                                        <h3 class="hero_area_top_text" data-animation="animated bounceInDown">
                                            Best Financial Wordpress Theme
                                        </h3>
                                        <h3 class="hero_bold_text" data-animation="animated bounceInUp">
                                            Great way to get success <br> in Financial service
                                        </h3>
                                        <div class="hero_btn_wrapper" data-animation="animated zoomInRight">
                                            <button class="hero_area_btn">
                                                Free consultation
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- item end -->

                        <!-- Third slide -->
                        <div class="item" style="background: url(img/hero_area_bg_3.jpg) no-repeat scroll 0 0 / cover;">
                            <div class="carousel-caption">
                                <div class="hero_table">
                                    <div class="hero_table_cell">
                                        <h3 class="hero_area_top_text" data-animation="animated zoomInLeft">
                                            Best Financial Wordpress Theme
                                        </h3>
                                        <h3 class="hero_bold_text" data-animation="animated flipInX">
                                            Great way to get success <br> in Financial service
                                        </h3>
                                        <div class="hero_btn_wrapper" data-animation="animated lightSpeedIn">
                                            <button class="hero_area_btn">
                                                Free consultation
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- item end -->

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

                    <!-- Controls -->
                    <a class="left hero_area_control" href="#hero_area_slider" role="button" data-slide="prev">
                        <i class="fa fa-angle-left"></i>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right hero_area_control" href="#hero_area_slider" role="button" data-slide="next">
                        <i class="fa fa-angle-right"></i>
                        <span class="sr-only">Next</span>
                    </a>

                </div><!-- /.carousel -->
            </section>
           <!-- ============= hero_area end ============== -->