/* Make the black nav stick to the top and overlap all page content */

/* Ensure dropdowns and other nav-related overlays remain visible above hero content */

#black-nav .dropdown-menu {
  z-index: 2100;
}

/* Highlight active navbar link */

.nav-link.navbar-active {
  color: var(--brand-accent) !important;
  font-weight: 600;
  border-bottom: 3px solid var(--brand-accent);
  padding-bottom: 3px;
}

.nav-link.navbar-active i {
  color: var(--brand-accent) !important;
}

/* Highlight active navbar button (for dropdown menus like Products) */

.btn[data-bs-toggle="dropdown"].navbar-active {
  color: var(--brand-accent) !important;
  font-weight: 600 !important;
}

.btn[data-bs-toggle="dropdown"].navbar-active::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2.5px;
  background-color: var(--brand-accent);
}

.btn[data-bs-toggle="dropdown"].navbar-active i {
  color: var(--brand-accent) !important;
}

/* Ensure the dropdown button container has position relative for the pseudo-element */

.nav-item .btn[data-bs-toggle="dropdown"] {
  position: relative;
}

.page-category-title {
  color: var(--search-accent);
  letter-spacing: 3px;
  font-size: 24px;
}

.page-configurations-text {
  max-width: 800px;
  color: var(--search-secondary);
}