/* Ensure the nav wraps its children in a centered row */
.main-pagination {
  display: flex;
  flex-direction: row;      /* row layout */
  justify-content: center;  /* center horizontally */
  align-items: center;      /* center vertically (if needed) */
  margin-top: 1rem;         /* optional spacing above */
}

/* Make sure the UL doesn’t disrupt centering */
.pagination-ul {
  display: flex;
  justify-content: center;  /* center the LI elements inside */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 3) Style the page numbers */
.page-item-number {
  margin: 0 0.25rem;         /* spacing between */
  padding: 0.25rem 0.5rem;   /* more clickable area */
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 4) Link appearance, override the blue */
.page-item-number > a {
  color: red;                /* your original red */
  font-size: 1.1rem;         /* bump up size */
  font-weight: bold;         /* make it stand out */
  text-decoration: none;
}

/* 5) Active page background */
.page-item-number.page-active {
  background-color: red;
}

.page-item-number.page-active > a {
  color: white;              /* contrast on red bg */
}