<section class="section-gap section-full">
    <div class="hero-img bg-overlay" data-overlay="5"
         style="background-image: url(assets/img/hero/img-1.jpg);"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-7">
                <div class="bg-primary p-md-5 p-3 rounded">
                    <!-- heading -->
                    <h1 class="text-white mb-4">
                        Set your goal and run towards
                    </h1>

                    <!-- subheading -->
                    <p class="text-white mb-4">
                        Ad alias architecto consequuntur, dolorum expedita illum itaque labore libero minima minus
                        mollitia officiis saepe sunt suscipit tempora tenetur ullam veritatis voluptate
                    </p>

                    <!-- button -->
                    <p class=" mb-0">
                        <a href="#" class="btn btn-pill btn-outline-light">
                            Purchase Clab
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-gap section-full">
    <div class="hero-img bg-overlay" data-overlay="5"
         style="background-image: url(assets/img/hero/img-2.jpg);"></div>
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-md-7 text-center">
                <!-- heading -->
                <h1 class="text-white font-size-72">
                    Solving Problem
                </h1>

                <!-- subheading -->
                <h5 class="text-white mb-5 font-weight-normal">
                    Beautiful front-end components built for
                    modern startups.
                </h5>

                <!-- button -->
                <div class=" mb-0">
                    <a href="#" class="btn btn-pill btn-outline-light mr-3 mb-md-0 mb-3">
                        Purchase Now
                    </a>

                    <div class="video-btn d-inline-block">
                        <a href="https://www.youtube.com/watch?v=kuceVNBTJio"
                           class="video-play-icon popup-youtube v-Center">
                            <i class="fa fa-play"></i>
                        </a>
                        <span class="text-white">Watch success stories</span>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-gap border-bottom p-md-0 section-full">
    <div class="container">
        <div class="row align-items-center justify-content-around">
            <div class="col-md-6">
                <!-- heading -->
                <h1 class="font-weight-normal mb-md-5 mb-3">
                    Grow your online
                    Community with <strong>Clăb</strong>
                </h1>

                <!-- subheading -->
                <h5 class="font-weight-normal text-muted pr-lg-4 mb-md-5 mb-3">Beautiful front-end components built
                    for
                    modern startups.
                </h5>

                <!-- button -->
                <p class=" mb-0">
                    <a href="#" class="btn btn-pill btn-theme">
                        Try your demo
                    </a>
                </p>

            </div>
            <div class="col-md-6">
                <img class="hero-avatar-bottom" src="assets/img/hero/img-avatar.jpg" alt="image">
            </div>
        </div>
    </div>

</section>

<section class="section-gap section-full">
    <div class="hero-img" style="background-image: url(assets/img/hero/img-3.jpg);"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <!-- heading -->
                <h2 class="text-white mb-lg-5 mb-2">
                    Component Laboratory
                </h2>

                <!-- subheading -->
                <h4 class="text-white mb-md-5 mb-3 font-weight-normal text-uppercase ls-2 lh-45">
                    Creativity <br>
                    meets technology
                </h4>
            </div>
        </div>
    </div>
    <!--scroll down-->
    <div class="scroll-down position-absolute text-white text-center">
        <a href="#go-next-section"><i class="fa fa-angle-double-down"></i></a>
        <span>We would love you to scroll down</span>
    </div>
</section>

<section class="section-gap section-top- section-full">
    <div class="hero-img bg-overlay" data-overlay="7"
         style="background-image: url(assets/img/hero/img-4.jpg);"></div>
    <div class="container">
        <div class="row align-items-center justify-content-around">
            <div class="col-md-6">
                <!-- heading -->
                <h1 class="font-weight-normal text-white mb-md-5 mb-3">
                    Define your strategy
                    with our <strong>Clăb</strong>
                </h1>

                <!-- subheading -->
                <h5 class="font-weight-normal text-white pr-lg-4 mb-md-5 mb-3">
                    Beautiful front-end components built for
                    modern startups.
                </h5>

                <!-- button -->
                <p class="mb-md-0 mb-3">
                    <a href="#" class="btn btn-pill btn-theme">
                        Try your demo
                    </a>
                </p>

            </div>
            <div class="col-md-6">
                <div class="position-relative">
                    <img class="rounded" src="assets/img/img-1.jpg" alt="">
                    <div class="video-btn video-play-btn-align-center">
                        <a href="https://www.youtube.com/watch?v=kuceVNBTJio"
                           class="video-play-icon popup-youtube v-Center">
                            <i class="fa fa-play"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-gap section-full">
    <div class="hero-img bg-overlay" data-overlay="5"
         style="background-image: url(assets/img/hero/img-5.jpg);"></div>
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class=" col-md-10 text-center">
                <!-- heading -->
                <h1 class="font-weight-normal font-size-72 text-white mb-md-5 mb-3">
                    Welcome to <strong>Clăb</strong>
                </h1>

                <!-- subheading -->
                <h5 class="text-white mb-5 font-weight-normal lh-35">
                    Over 120+ components and huge block are created to ensure the modern design
                    and bug free functional interface for your upcoming web project
                </h5>

            </div>
        </div>
    </div>
</section>

<section class="section-gap section-full">
    <div class="hero-img bg-overlay curve-bottom-1" data-overlay="0"
         style="background-image: url(assets/img/hero/img-6.jpg);"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class=" col-md-6">
                <!-- heading -->
                <h1 class="text-uppercase font-weight-800 font-size-72 mb-md-5 mb-3">
                    creative <span class="d-block font-weight-300 ls-2">agency</span>
                </h1>
                <!-- button -->
                <div class=" mb-0">
                    <a href="#" class="btn btn-pill btn-outline-dark mr-3 mb-md-0 mb-3">
                        Purchase Now
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-gap section-full">
    <div class="hero-img bg-overlay" data-overlay="0"
         style="background-image: url(assets/img/hero/img-7.jpg);"></div>
    <div class="container">
        <div class="row align-items-center text-center">
            <div class=" col-md-6">
                <!-- heading -->
                <h2 class="text-uppercase text-white font-weight-800 font-size-60">Be Fit</h2>
                <h1 class="text-uppercase text-white font-weight-800 font-size-72 mb-3">
                    everyday
                </h1>
                <!-- subheading -->
                <h5 class="text-white mb-5 font-weight-normal lh-35">
                    A new way of fitness and healthy living
                </h5>
                <!-- button -->
                <div class=" mb-0">
                    <a href="#" class="btn btn-pill btn-theme mr-3 mb-md-0 mb-3">
                        Purchase Now
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-gap section-full">
    <div class="hero-img bg-theme-overlay" data-overlay="8"
         style="background-image: url(assets/img/hero/img-8.jpg);"></div>
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class=" col-md-10 text-center">
                <!-- video btn -->
                <div class="video-btn d-inline-block mb-5">
                    <a href="https://www.youtube.com/watch?v=kuceVNBTJio"
                       class="video-play-icon popup-youtube v-Center">
                        <i class="fa fa-play"></i>
                    </a>
                </div>
                <!-- heading -->
                <h1 class=" font-size-72 text-white mb-md-5 mb-3">
                    fast. fun. facile
                </h1>

                <!-- subheading -->
                <h5 class="text-white mb-5 font-weight-normal lh-35">
                    Over 120+ components and huge block are created to ensure the modern design
                    and bug free functional interface for your upcoming web project
                </h5>

            </div>
        </div>
    </div>
</section>

<section class="section-gap section-full">
    <div class="hero-img bg-navy-overlay" data-overlay="9"
         style="background-image: url(assets/img/hero/img-11.jpg);"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class=" col-md-6">
                <!-- heading -->
                <h2 class="text-uppercase text-white font-weight-800 font-size-60 font-weight-normal">UX</h2>
                <h2 class="text-uppercase text-white font-weight-800 font-size-60 ">Brand</h2>
                <h1 class="text-uppercase text-white font-weight-800 font-size-72 mb-md-5">
                    THIS IS Clăb
                </h1>
                <!-- subheading -->
                <!--<h5 class="text-white mb-5 font-weight-normal lh-35">-->
                <!--A new way of fitness and healthy living-->
                <!--</h5>-->
                <!-- button -->
                <div class=" mb-0">
                    <a href="#" class="btn btn-pill btn-outline-light mx-md-5-">Explore Story</a>
                </div>
            </div>
            <div class="col-md-6 text-md-center">
                <div class="video-btn d-inline-block">
                    <span class="text-primary pr-4">We are creative people</span>
                    <a href="https://www.youtube.com/watch?v=kuceVNBTJio"
                       class="video-play-icon popup-youtube v-Center">
                        <i class="fa fa-play"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="scroll-down position-absolute text-white text-center">
        <a href="#go-next-section" class="text-decoration-none text-white"><i class="vl-arrow-down fa-2x"></i></a>
        <div class="h1 scroll-down-circle font-weight-800 text-dark">ă</div>
    </div>
</section>