<section class="delivery-info pt-5 pb-5">
  <div class="container">
    <form>
      <div class="row">
        <div class="col-md-12">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
            <label class="form-check-label" for="exampleRadios1">Delivery</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
            <label class="form-check-label" for="exampleRadios2">Pickup</label>
          </div>
        </div>
      </div>
      <h4 class="form-title">Recipient's Information</h4>
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label>Select past reciepient</label>
            <select class="form-control">
              <option selected disabled hidden>Eg: Krishan Silva, 34/A, Trans Lane, Nugegoda</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label>First Name</label>
            <input type="text" class="form-control" placeholder="Eg: Roshan Fernando">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label>Last Name</label>
            <input type="text" class="form-control" placeholder="Eg: Roshan Fernando">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label>Phone</label>
            <input type="text" class="form-control" placeholder="Eg: 07X-XXX-XXXX">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label>Address</label>
            <input type="text" class="form-control" placeholder="Eg: No: 24/2, Fairline Rd, Dehiwala">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label>Nearest City</label>
            <select class="form-control">
              <option selected disabled hidden>Eg: Kandalama</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </div>
      </div>
      <h4 class="form-title">Delivery Information</h4>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Location Type</label>
            <select class="form-control">
              <option selected disabled hidden>Eg: Office</option>
              <option>Office</option>
              <option>House</option>
              <option>Function</option>
              <option>Funeral</option>
            </select>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label>Delivery Date</label>
            <input type="date" class="form-control">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label>Preferred Delivery Time</label>
            <select class="form-control">
              <option selected disabled hidden>Eg: Morning (7am - 10am)</option>
              <option>Anytime (7am - 8pm)</option>
              <option>Morning (7am - 10am)</option>
              <option>Noon (12pm - 5pm)</option>
              <option>Evening (5pm - 8pm)</option>
            </select>
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-group">
            <label>Delivery Instructions</label>
            <textarea class="form-control text-area" placeholder="Ex: Ring the bell once & wait"></textarea>
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-group">
            <label>Greeting Message</label>
            <textarea class="form-control text-area" rows="3" placeholder="Ex: Wish you all the best for your success. Love you!"></textarea>
          </div>
        </div>
      </div>
      <h4 class="form-title">Sender's Information</h4>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" placeholder="Eg: Kasun Silva">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label>Phone</label>
            <input type="text" class="form-control" placeholder="Eg: 07X-XXX-XXXX">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label>Email</label>
            <input type="date" class="form-control" placeholder="Eg: sasun.s@gmail.com">
          </div>
        </div>
        <div class="col-md-12 flex space-between">
          <button class="btn btn-primary btn-cart">Go Back</button>
          <button class="btn btn-primary btn-cart">Next</button>
        </div>
      </div>
    </form>
  </div>
</section>

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.form-title {
  font-size: 16px;
  font-weight: 600;
  color: #007bff;
  margin-bottom: 20px;
  margin-top: 20px;
}

.form-group {
  label {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 600;
  }

  .form-control {
    padding: 10px 15px;
    font-size: 14px;
    line-height: 22px;
    min-height: 45px;
    color: #313030;
    border-radius: 3px;
    border-color: #ddd;
    height: 45px !important;
  }

  .text-area {
    height: auto !important;
  }
}

.btn-cart {
  border: none;
  padding: 12px 15px 8px 15px;
  font-weight: 600;
  min-width: 140px;
}

.space-between {
  justify-content: space-between;
}
.flex {
  display: flex;
}