<section class="section-gap">
    <div class="hero-img bg-overlay rounded overflow-hidden" data-overlay="2" style="background-image: url(assets/img/cards/14b.jpg);"></div>
    <div class="container">
        <div class="row justify-content-center align-items-center text-center">
            <div class="col-md-8">
                <!-- heading -->
                <h2 class="text-white mb-4">
                    Image Background
                </h2>

                <!-- subheading -->
                <p class="text-white mb-4">
                    This components based blocks are ready to use as well as customize easily
                    in any template instantly. Just copy the code and paste. Simple
                </p>
            </div>
        </div>
    </div>
</section>

<section class="section-gap">
    <div class="hero-img bg-overlay rounded overflow-hidden" data-overlay="0" style="background-image: url(assets/img/cards/14a.jpg);"></div>
    <div class="container">
        <div class="row justify-content-center align-items-center ">
            <div class="col-md-10">
                <!-- heading -->
                <h4 class=" mb-4">
                    Image Background
                </h4>

                <!-- subheading -->
                <p class=" mb-4">
                    This components based blocks are ready to use as well as customize easily.
                </p>
            </div>
        </div>
    </div>
</section>