@page "/contact"
@inject Services.GlobalService gloService

<CanvasHomePage />
<PageTitle>Contact Us - @gloService.WebsiteName</PageTitle>

<!-- Document Wrapper
============================================= -->
<div id="wrapper">

  <!-- Header
  ============================================= -->
  <Header1 ActiveChoice=Header1.enuChoice.Nothing/>

  <!-- Page Title
  ============================================= -->
  <section class="page-title bg-color dark py-6">
    <div class="container">
      <div class="page-title-row">

        <div class="page-title-content">
          <h1>Contact Us</h1>
          <span>Get In Touch</span>
        </div>

      </div>
    </div>
  </section><!-- .page-title end -->
  <!-- Content
  ============================================= -->
  <section id="content">

    <div class="content-wrap pb-0">

      <div class="container mb-5">
        <div class="row justify-content-between">
          <div class="col-lg-4 mb-5 mb-lg-0">
            <h3>Send us an Email</h3>

            <div class="form-widget">

              <div class="form-result"></div>

              <form class="mb-0" id="template-contactform" name="template-contactform" action="include/form.php" method="post">

                <div class="form-process">
                  <div class="css3-spinner">
                    <div class="css3-spinner-scaler"></div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-12 form-group">
                    <label for="template-contactform-name">Name <small>*</small></label>
                    <input type="text" autofocus="autofocus" id="template-contactform-name" name="template-contactform-name" value="" class="form-control required">
                  </div>

                  <div class="col-12 form-group">
                    <label for="template-contactform-email">Email <small>*</small></label>
                    <input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email form-control">
                  </div>

                  <div class="col-12 form-group">
                    <label for="template-contactform-phone">Phone</label>
                    <input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="form-control">
                  </div>

                  <div class="col-12 form-group">
                    <label for="template-contactform-service">Services</label>
                    <select id="template-contactform-service" name="template-contactform-service" class="form-select">
                      <option value="">-- Select One --</option>
                      <option value="Sales">Sales</option>
                      <option value="Billing">Billing</option>
                      <option value="Support">Support</option>
                      <option value="Would Like More Info">Would Like More Info</option>
                    </select>
                  </div>

                  <div class="col-12 form-group">
                    <label for="template-contactform-message">Message <small>*</small></label>
                    <textarea class="required form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
                  </div>

                  <div class="col-12 form-group d-none">
                    <input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="form-control">
                  </div>

                  <div class="col-12 form-group">
                    <button class="button button-rounded m-0 w-100 button-large" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Send Message</button>
                  </div>
                </div>

                <input type="hidden" name="prefix" value="template-contactform-">

              </form>
            </div>
          </div>
          <div class="col-lg-7">
            <h3>Contact Us</h3>
            <div class="row">
              <div class="col-md-4 col-6 text-smaller">
                <h5 class="fw-semibold mb-2">KeyMail Specials</h5>
                <address class="mb-2">
                  c/o KeyMotive LLC<br>
                  40503 Koppernick Rd, Canton MI 48187<br>
                </address>
                Phone: <a href="#" class="text-dark">(888) 422-7390</a><br>
              </div>
            </div>
            <div class="line my-5"></div>
          </div>
        </div>
      </div>

      <div class="clear"></div>


      <div class="section dark pt-0 mb-0 bg-color" style="background: url('demos/movers/images/bg-2.png') no-repeat center bottom / 100%; overflow: visible">
        <svg viewBox="0 0 1960 206.8" class="bg-white">
          <path class="svg-themecolor" style="opacity:0.2;" d="M0,142.8A2337.49,2337.49,0,0,1,297.5,56.3C569.33-3.53,783.89.22,849.5,2.3c215.78,6.86,382.12,45.39,503.25,73.45,158.87,36.8,283.09,79.13,458.75,54.55A816.49,816.49,0,0,0,1983,86.8v110H0Z"></path>
          <path class="svg-themecolor" d="M.5,152.8s498-177,849-150,1031,238,1134,94v110H.5Z"></path>
        </svg>
        <div class="container">
          <div class="row align-items-center justify-content-center text-center my-4">

            <div class="col-sm-8">
              <div class="heading-block border-bottom-0 mb-4">
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section><!-- #content end -->
  <!-- Footer
  ============================================= -->
  <footer id="footer" class="bg-transparent border-0">

    <!-- Copyrights
    ============================================= -->
    <div id="copyrights" class="bg-transparent">

      <div class="container">

        <div class="row justify-content-between align-items-center">
          <div class="col-md-6 text-black-50">
            Copyright &copy; 2010 - @gloService.YearInFooter All Rights Reserved by KeyMotive LLC.
          </div>
        </div>

      </div>

    </div><!-- #copyrights end -->

  </footer><!-- #footer end -->

</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>