html, body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }	

.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 3rem !important;
}


/* Base nav link style */
.nav-link {
  color: #000000;
  font-size:16px !important;
  text-decoration: none;
  border-bottom: 4px solid transparent; /* reserve space to avoid jump */
  transition: color 0.3s ease, border-color 0.3s ease;
  padding-bottom: 2px; /* ensure clickable area looks even */
  padding: 2px 30px !important;
}

/* Hover + focus state */
.nav-link:hover,
.nav-link:focus {
  color: #000000;
  border-bottom-color: #198FD9;
}

/* Active/current page */
.nav-link.active,
.nav-link[aria-current="page"] {
  color: #000000;
  border-bottom-color: #198FD9 !important;
}

/* Optional: reduce underline flash when clicked */
.nav-link:active {
  color: #198FD9;
}
/* make underline visible for active link */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  border-bottom: 4px solid #198FD9 !important;
  color: #000000;
}

/* optional: show an underline on hover as you had */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  border-bottom-color: #198FD9;
  color: #000000;
}

/* (optional) If you want underline to wrap just the text, not the full block: */
.navbar .nav-link { display: inline-block; }

.shadeback {
  background-color: rgba(0,0,0,0.3); /* optional subtle background */
  padding: 15px;
  color:#ffffff;
  border-radius: 4px;
}
.col-md-6.bg-cat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* pushes children to the bottom */
  padding: 20px; /* optional */
  color: #fff;
}