layout: page


{% assign contact = site.data.contact-us %}

<style>

.bg-contact{
  background: url('{{site.baseurl}}{{contact.image-url}}') no-repeat left 50%;
  -webkit-background-size: cover;
  background-size: cover;
}

</style>

<section class=“bp-section”>

<div class="bp-container">
    <div class="row is-inverted">
        <div class="col is-8 is-offset-2">
            {% include header-breadcrumb.html %}
        </div>
    </div>
    <div class="row">
        <div class="col is-8 is-offset-2">
            <h1 class="display has-text-weight-semibold">Get in touch with<br><span class="has-text-secondary">{{site.title-abbreviated}}</span></h1>
        </div>
    </div>
</div>

</section>

<section class=“bp-section is-small padding–bottom–lg”>

<div class="bp-container">
    <div class="row">
        <div class="col is-8 is-offset-2">
            <div class="row is-multiline margin--bottom--xl">
                <div class="col is-6 padding--bottom--none">
                    <p></p>
                    <h5 class="has-text-secondary"><b>HQ Address</b></h5>
                </div>
                <div class="col is-6 padding--bottom--none">
                    <h5 class="has-text-secondary"><b>Operating Hours</b></h5>
                </div>

                <div class="col is-6">
                    <div>
                        <p class="margin--top--none margin--bottom--none"><b>{{site.title}}</b></p>
                        <p class="content margin--top--none">{{site.data.contact-us.address}}</p>
                        <a href="{{contact.find-directions}}" target="_blank" class="bp-sec-button has-text-secondary">
                            <div>
                                <span>FIND DIRECTIONS</span>
                                <i class="bp-icon bp-icon-arrow-right" aria-hidden="true"></i>
                            </div>
                        </a>
                    </div>

                </div>

                {% assign operating-hours = contact.operating-hours %}
                <div class="col is-6">
                    <div>
                        {% for operation in operating-hours%}
                        <p class="margin--top--none">
                            <b>{{operation.days}}</b>:&nbsp;{{operation.time}}<br>
                            {{operation.description}}
                        </p>
                        {% endfor %}
                    </div>

                </div>
            </div>
            <div class="row is-multiline margin--bottom--xl">
                <div class="col is-12 padding--bottom--none">
                    <h5 class="has-text-secondary"><b>Contact Us</b></h5>
                </div>
                {% for column in site.data.contact-us.column %}
                <div class="col is-6">
                    <div>
                        <p class="has-text-weight-semibold margin--top--none margin--bottom--none">{{column.title}}</p>
                        {% for content in column.content %}
                            <p class="margin--top--none margin--bottom--none">
                                {% if content.line contains '(email)' %}
                                    <a href="mailto:{{content.line | replace: '(email)' , '' }}">
                                        <u>{{content.line | replace: '(email)' , '' }}</u>
                                    </a>
                                {% else %}
                                    {{content.line}}
                                {% endif %}
                            </p>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}

            </div>
            <div class="row is-multiline margin--bottom--lg">
                <div class="col is-12 padding--bottom--none">
                    <h5 class="has-text-secondary has-text-weight-semibold">Send us your feedback</h5>
                </div>
                <div class="col is-8">
                    <p>
                        If you have a query, feedback or wish to report a problem related to this website,
                        please fill in the <a href="https://form.sg/#!/forms/govtech/5a9ce876b3a3b6006e6b8335" target="_blank"><u>online form</u></a>.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

</section>

<section class=“bp-section is-vh-60 bg-contact”>

</section>