<div class=“container mt-5”>

<h2 class="text-center text-uppercase my-5 pt-5 wow fadeIn" data-wow-delay="0.2s">{{site.data.contact.heading | default: site.data.default.contact_section_heading}}</h2>

<p class="text-center w-responsive mx-auto wow fadeIn my-5" data-wow-delay="0.2s">{{site.data.contact.description | default: site.data.default.contact_section_description}}</p>
<!--Section: Content-->
<section class="dark-grey-text z-depth-1">

    <div class="row pr-lg-5">
        <div class="col-md-7 ">

            <div class="view">
                <img src="{{ site.data.contact.card_image | default: site.data.default.contact_section_card_image }}" class="img-fluid" alt="smaple image">
            </div>

        </div>
        <div class="col-md-5 d-flex align-items-center">
            <div class="p-4">

                <h3 class="font-weight-bold mb-4">{{site.data.contact.card_heading | default: site.data.default.contact_section_card_heading}}</h3>

                <p>{{site.data.contact.card_description | default: site.data.default.contact_section_card_description}}</p>
                <a href="{{site.data.contact.card_button_url | default: site.data.default.contact_section_card_button_url}}" target="_blank">

                    <button type="button" class="btn btn-primary btn-rounded mx-0">{{site.data.contact.card_button_text | default: site.data.default.contact_section_card_button_text}}</button>

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

</section>
<!--Section: Content-->

</div>