<style>
  .bg_white {
    background-color: #fff;
    padding: 2rem;
    margin-top: 3rem;
  }

  .pointer a {
    color: var(--color-primary);
    font-family: poppins;
    font-size: 14px;
  }

  .ml-2 {
    margin-left: 2rem;
  }

  .ml-1 {
    margin-left: 1.4rem;
  }

  .to_cent {
    margin-left: 3.5rem;
  }

  .contactTitle {
    text-align: center;
    color: var(--color-primary);
    font-family: philosopher;
    font-size: 28px;
  }

  .btn-dark,
  .btn-dark:hover {
    background-color: var(--color-primary);
  }

  .bg_white p {
    color: var(--color-primary);
    font-family: poppins;
    font-size: 14px;
  }

  .bg_white i {
    font-size: 1.5rem;
  }
  @media only screen and (max-width: 700px) {
    .to_cent {
      margin-left: 0px;
    }
  }
</style>
<div class="container bg_white">
  <br />
  <h3 class="contactTitle text-center">Contact Arusuvai Arasu</h3>
  <br />
  <div class="row align-items-center justify-content-evenly">
    <div class="col-sm to_cent">
      <p class="pointer">
        <i class="fa fa-phone-alt"></i>
        <a href="tel:+91 98410 24446" class="text-decoration-none ml-1">
          +91 98410 24446
        </a>
      </p>
      <p class="pointer">
        <i class="fas fa-envelope"></i>
        <a
          href="mailto:arusuvaiarasu@yahoo.com"
          class="text-decoration-none ml-1"
        >
          arusuvaiarasu@yahoo.com
        </a>
      </p>
      <br />
      <div class="d-flex align-items-center">
        <div>
          <i class="fas fa-map-marker-alt"></i>
        </div>
        <div class="ml-2 pointer">
          <p>New No.4 Old No.39,</p>
          <p>Rajabadher Street,</p>
          <p>near Rathina Fan house,</p>
          <p>T.Nagar, Chennai,</p>
          <p>Tamil Nadu 600017</p>
        </div>
      </div>
    </div>
    <div class="col-sm">
      <form method="post" action="/contact">
        <div class="mb-3">
          <label for="Name" class="form-label">Name</label>
          <input
            name="name"
            type="text"
            id="Name"
            class="form-control"
            placeholder="Name"
            required
          />
        </div>
        <div class="row">
          <div class="col">
            <div class="mb-3">
              <label for="phone" class="form-label">Contact Number</label>
              <input
                name="phone"
                type="text"
                id="phone"
                class="form-control"
                placeholder="+91 98765 43210"
                required
              />
            </div>
          </div>
          <div class="col">
            <div class="mb-3">
              <label for="email" class="form-label">Email</label>
              <input
                name="email"
                type="email"
                required
                id="email"
                class="form-control"
                placeholder="email@gmail.com"
              />
            </div>
          </div>
        </div>

        <div class="mb-3">
          <label for="Message" class="form-label">Your Message</label>
          <textarea
            name="message"
            class="form-control"
            id="Message"
            rows="5"
            placeholder="Enter Your Message"
            required
          ></textarea>
        </div>
        <div class="d-grid gap-2">
          <button type="submit" class="btn btn-dark">SUBMIT</button>
        </div>
      </form>
    </div>
  </div>
</div>
