Put URLs in separate lines, different spacing and appropriate colors

Based on the code below, how can I have the URLs in a new line as shown in the screenshot below with similar spacing?

Please note that I don’t do HTML coding on a daily basis so I am fairly layman in it.

This is a related product link if needed.

HTML code:

<div class="footer-background">
  <div class="container-fluid">
    <div class="col-xs-12">
    </div>
    <div class="col-xs-6 center-block">
      <ul class="nav nav-pills">

        <li><a href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>

        <li><a href="https://www.b.org/AgenciesAndServices/Pages/Default.aspx">Contact Us</a>;</li>

        <li><a href="https://www.b.org/ReportAComplaint/Pages/Default.aspx">Report a Complaint</a></li>

      </ul>
    </div>
    <div class="col-xs-6 center-block">
      <ul class="nav nav-pills" style="float:right;">
        <li><a href="https://www.b.org/Terms/Pages/Default.aspx">Terms of Service</a></li>
      </ul>
    </div>
    <div class="col-xs-12">
      <div class="text-white" style="padding-top: 3rem; text-align: center;">
      </div>
    </div>
  </div>
  
</div>

Also how can I change the color to that shown in the screenshot? I did add the correct hex value in the CSS code but it didn’t work.

CSS code:

  .footer-background {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #000077c;
  }

  .logo, .nav {
    margin-bottom: 10px;
  }

  .nav-pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }

Desired output:

1. I am having trouble putting the URLs in a new line
2. Having trouble adding Watch Meetings (URL) centered as shown in the screenshot
3. Adding Copyright 2022, [Government](URL) at the bottom center as shown in the screenshot
4. Having trouble changing footer background color
5. Change text color to light blue

>Solution :

Try this:

  .footer-background {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #00077c;
  }

  .logo, .nav {
    margin-bottom: 10px;
  }

  .nav-pills {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="footer-background container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">

        <li><a href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>

        <li><a href="https://www.b.org/AgenciesAndServices/Pages/Default.aspx">Contact Us</a>;</li>

        <li><a href="https://www.b.org/ReportAComplaint/Pages/Default.aspx">Report a Complaint</a></li>

      </ul>
    </div>
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a href="3">watch meetings</a></li>
      </ul>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="text-white" style="padding-top: 3rem; text-align: center;">
      <ul class="nav nav-pills">
        <li><a href="3">facebook</a></li>
      </ul>
      </div>
    </div>
  </div>
  
</div>