<div class="fui-container">
  <div class="row">
    <div class="col-md-8 py-5 mx-auto">
      
      <!-- CONTACT FORM -->
      <form action="">
        <p class="text-center text-muted h4 mb-4 weight-500">Feel free to contact us</p>
        <div class="row mb-4">
          
          <!-- SINGLE INPUT -->
          <div class="col-md-6 magical" data-animate="fadeIn">
            <div class="group">
              <input type="text" name="f-name" class="fui-input" placeholder="First Name">
            </div>
          </div>
          
          <!-- SINGLE INPUT -->
          <div class="col-md-6 magical" data-animate="fadeIn">
            <div class="group">
              <input type="text" name="l-name" class="fui-input" placeholder="Last Name">
            </div>
          </div>
          
          <!-- SINGLE INPUT -->
          <div class="col-md-6 magical" data-animate="fadeIn">
            <div class="group">
              <input type="email" name="email" class="fui-input" placeholder="Email">
            </div>
          </div>
          
          <!-- SINGLE INPUT -->
          <div class="col-md-6 magical" data-animate="fadeIn">
            <div class="group">
              <input type="tel" name="phone" class="fui-input" placeholder="Phone No">
            </div>
          </div>
          
          <!-- SINGLE INPUT -->
          <div class="col-md-12 magical" data-animate="fadeIn">
            <div class="group">
              <textarea name="message" class="fui-input" placeholder="Message"></textarea>
            </div>
          </div>
          
          <!-- SUBMIT -->
          <div class="col-md-12 magical" data-animate="fadeIn">
            <div class="group">
              <button class="fui-btn fui-btn-primary btn-lg uppercase">Submit</button>
            </div>
          </div>
          
        </div>
      </form>
      
      
    </div>
  </div>
</div>