<div class="section-resources np-max-width">
  <hr />
  <div class="np-section-title">
    Resources
  </div>
  <div class="resources-list-container">
    <div class="resource">
      <div class="resource-title">How to Book an Appointment</div>
      <a class="np-button download-btn" href="https://drive.google.com/file/d/1O8-IWXb2Rni5iM1QDVDfZjPQo9g34kzM/view?usp=sharing" target="_blank">
        Download PDF
        <i class="far fa-file-download"></i>
      </a>
    </div>
    <div class="resource">
      <div class="resource-title">How to Batch</div>
      <a class="np-button download-btn" href="https://drive.google.com/file/d/1up_2ObeUPmrLUN7WRV9-6eZpj5QQzSSC/view?usp=sharing" target="_blank">
        Download PDF
        <i class="far fa-file-download"></i>
      </a>
    </div>
  </div>
</div>


<style>
  .section-resources {
    padding:32px 0;
  }

  .np-section-title {
    font-size:40px;
    font-weight:500;
    text-align:center;
    margin-top:48px;
    margin-bottom:48px;
  }

  .resources-list-container {
    display:flex;
  }

  .resource {
    width:100%;
    padding: 12px 18px;
    margin-bottom:32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgb(89 105 123 / 50%);
    margin: 16px;
    width: 50%;
  }

  .fa-file-download {
    margin-left:12px;
    font-size:16px;
  }

</style>