{{ if .Site.Data.contact.enable }}
{{"<!-- Start Contact Us -->" | safeHTML}}
<section id="contact-us" class="contact-us section-bg">
    <div class="container pb-5">
        <div class="row">
            <div class="col-lg-12">
                {{"<!-- section title -->" | safeHTML}}
                <div class="title text-center wow fadeIn" data-wow-duration="500ms">
                    <h2>{{ with .Site.Data.contact.heading }} {{ . }} {{ end }} <span
                            class="color">{{ with .Site.Data.contact.headingSpan }} {{ . }} {{ end }}</span></h2>
                    <div class="border-meghna"></div>
                </div>
            </div>
            {{"<!-- /section title -->" | safeHTML}}

            {{"<!-- Contact Details -->" | safeHTML}}
            <div class="contact-info mx-auto wow fadeInUp" data-wow-duration="500ms">
                {{ with .Site.Data.contact.title }}<h3>{{ . }}</h3> {{ end }}
                {{ with .Site.Data.contact.content }} <p> {{ . }} </p> {{ end }}
                <div class="contact-details">
                    {{ range .Site.Data.contact.contactDetails }}
                    <div class="con-info clearfix">
                        <i class="{{ .icon }}"></i>
                        <span>{{ .info }}</span>
                    </div>
                    {{ end }}
                </div>
            </div>
        </div>
    </div>

    {{ if .Site.Data.contact.enable_maps }}
    {{"<!-- Google Map -->" | safeHTML}}
    <div class="google-map">
        <div id="map-canvas" {{ with .Site.Data.contact.mapLatitude }} data-latitude="{{ . }}" {{ end }} {{ with .Site.Data.contact.mapLongitude }} data-longitude="{{ . }}" {{ end }}></div>
    </div>
    {{ end }}
</section>
{{"<!-- /contact -->" | safeHTML}}
{{ end }}