<div class="is-box is-section is-section-fixed banner-19 is-align-center is-light-text" style="height: 700px;">

    <div class="is-overlay">
        <div class="is-overlay-bg"
             style="background-image: url('{{ config('builder.frontend_asset_path') }}/placeholders/landscape.jpg');"
             data-quality="80"
        >
            <div class="is-overlay-color" style="opacity:0.1"></div>
        </div>
    </div>

    <div class="is-boxes">
        <div class="is-box-centered">
            <div class="is-container container-fluid">

                <div class="row">
                    <div class="col-md-12">
                        <div class="spacer height-60"></div>
                    </div>
                </div>

                <div class="row">
                    <div class="align-items-center col-md-12 d-flex flex-column justify-content-center">
                        <h1 class="display-3 banner-text" style=" font-weight: 600;">Heading 1</h1>
                        <hr class="border border-1 border-white my-2 opacity-100 w-40">
                        <h4>Heading 2 goes here, idealy wider than the above</h4>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="spacer height-80"></div>
                    </div>
                </div>

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

    <div class="is-arrow-down bounce">
        <a href="#">
            <i class="icon fas fa-arrow-down"></i>
        </a>
    </div>
</div>
