Hovering over items should change the background to a color of my choice or not at all.

In both cases it magically changes to this annoying light blue color that isn't being used or defined ANYWHERE.

          <div style="padding: 0px 5% 0px 5%; margin: 0px 0px 0px; ">
        <nav aria-label="Page navigation example">
          <ul class="pagination pagination-circle pg-blue">
            <li class="page-item disabled"><a class="page-link" mdbWavesEffect>First</a></li>
            <li class="page-item disabled">
              <a class="page-link" aria-label="Previous" mdbWavesEffect>
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
              </a>
            </li>
            <li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
            <li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
            <li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
            <li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
            <li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>
            <li class="page-item">
              <a class="page-link" aria-label="Next" mdbWavesEffect>
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" mdbWavesEffect>Last</a></li>
          </ul>
        </nav>
      </div>
    </div>

.scss

//Content Manager
.pagination.pg-blue .page-item.active .page-link {
  background-color: #003767;
}
.a :hover{
  background-color: #003767;
}