.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: block;
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    display: none;
  }

  .navbar-collapse.show {
    display: block;
  }
}

:root {
  --bs-primary: #42c4e3;
  --bs-secondary: #ffc107;
  --bs-tertiary: #849bff;
  --nav-color: #3a3939;
}

/* All navbar links use primary color */
.navbar .nav-link {
  color: var(--nav-color) !important;
}

/* Active nav-link (including active page) uses secondary color */
.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link.show {
  color: var(--bs-secondary) !important;
}

/* Dropdown background uses secondary color */
.navbar .dropdown-menu {
  background-color: #fff !important;
}

/* Dropdown items default text color: white for contrast */
.navbar .dropdown-menu .dropdown-item {
  color: #000 !important;
}

/* Active dropdown item: use primary color as background */
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Optional: hover effect for dropdown items */
.navbar .dropdown-menu .dropdown-item:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Submenu flyout (side dropdown) */
.dropdown-submenu {
  position: relative;
}

/* Active submenu group trigger: same primary bg as leaf items */
.navbar .dropdown-menu .dropdown-submenu > a.dropdown-item.active {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: 0;
  margin-left: 1px;
  border-radius: 0 0.375rem 0.375rem 0.375rem;
}

/* Right-arrow indicator on submenu trigger */
.dropdown-submenu > a.dropdown-toggle::after {
  display: inline-block;
  content: "";
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid currentColor;
  border-right: 0;
  margin-left: 0.5em;
  vertical-align: middle;
}

/* On mobile, sub-menu drops below instead of to the side */
@media (max-width: 991.98px) {
  .dropdown-submenu > .dropdown-menu {
    top: 100%;
    left: 0;
    margin-left: 0;
    border-radius: 0 0 0.375rem 0.375rem;
  }
}

.nav-container {
  max-width: 900px;
  /* adjust width as needed */
  margin: 0 auto;
}

.navbar {
  --bs-navbar-padding-y: 0rem;
  /* NO space between 0 and rem */
}

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.bg-tertiary {
  background-color: var(--bs-tertiary) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.text-hover-primary:hover {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-hover-secondary:hover {
  color: var(--bs-secondary) !important;
}

.text-tertiary {
  color: var(--bs-tertiary) !important;
}

.text-hover-tertiary:hover {
  color: var(--bs-tertiary) !important;
}

.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-primary:hover {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.btn-secondary:hover {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.btn-tertiary {
  background-color: var(--bs-tertiary) !important;
  border-color: var(--bs-tertiary) !important;
}

.btn-tertiary:hover {
  background-color: var(--bs-tertiary) !important;
  border-color: var(--bs-tertiary) !important;
}

.btn-success {
  background-color: #198754 !important;
  border-color: #198754 !important;
}

.shadow-primary {
  box-shadow: 0 0.125rem 0.25rem rgba(66, 196, 227, 0.5) !important;
}

.border-primary {
  border: 2px solid var(--bs-primary) !important;
}

.border-primary-top {
  border-top: 2px solid var(--bs-primary) !important;
}

.border-primary-bottom {
  border-bottom: 2px solid var(--bs-primary) !important;
}

.border-primary-left {
  border-left: 2px solid var(--bs-primary) !important;
}

.border-primary-right {
  border-right: 2px solid var(--bs-primary) !important;
}

.border-secondary {
  border: 2px solid var(--bs-secondary) !important
}

.border-secondary-top {
  border-top: 2px solid var(--bs-secondary) !important;
}

.border-secondary-bottom {
  border-bottom: 2px solid var(--bs-secondary) !important;
}

.border-secondary-left {
  border-left: 2px solid var(--bs-secondary) !important;
}

.border-secondary-right {
  border-right: 2px solid var(--bs-secondary) !important;
}
.border-tertiary {
  border: 2px solid var(--bs-tertiary) !important;
}

.border-tertiary-top {
  border-top: 2px solid var(--bs-tertiary) !important;
}

.border-tertiary-bottom {
  border-bottom: 2px solid var(--bs-tertiary) !important;
}

.border-tertiary-left {
  border-left: 2px solid var(--bs-tertiary) !important;
}

.border-tertiary-right {
  border-right: 2px solid var(--bs-tertiary) !important;
}

p a {
  color: var(--bs-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

p a:hover {
  color: var(--bs-secondary);
}

/* form lang+subject*/
.form-dropdown-item.selected {
  background-color: var(--bs-primary);
  color: #fff;
  /* optional: white text for contrast */
}

.form-dropdown-menu {
  max-height: 200px;
  /* dropdown max height */
  overflow-y: auto;
  /* vertical scroll if content exceeds height */
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: var(--bs-secondary) #f8f9fa;
  /* thumb and track colors */
}

/* Chrome, Edge, Safari */
.form-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.form-dropdown-menu::-webkit-scrollbar-thumb {
  background-color: var(--bs-secondary);
  border-radius: 3px;
}

.form-dropdown-menu::-webkit-scrollbar-track {
  background-color: #f8f9fa;
}

 /* Hover for Subjects Cards */

.hover-lift {
  transition: all 0.2s ease-in-out;
}
.hover-lift:hover {
  transform: translateY(-4px);
  border-color: var(--bs-primary) !important;
  /* Bootstrap Primary */
  background-color: #f8fbff !important;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05) !important;
}
.shadow-xs {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.tracking-wider {
  letter-spacing: 0.05em;
}

/* 1. The Container: Reserves the spot on the page */
#answer-wrapper {
  min-height: 100px;
  display: block;
}

/* 2. The Skeleton Lines: The visual "bars" injected by JS */
.skeleton-line {
  height: 15px;
  background: #ececec;
  /* Light grey so it's visible on the bg-light background */
  margin-bottom: 10px;
  border-radius: 4px;
  width: 100%;
  /* Default width */
  animation: skeleton-loading 1s linear infinite alternate;
}

/* 3. The Animation: Makes the bars "pulse" so the user knows it's active */
@keyframes skeleton-loading {
  from {
    background-color: #f0f0f0;
  }

  to {
    background-color: #d1d1d1;
  }
}

/* adsense */
.ad-container {
  width: 100%;
  max-width: 100%;
  min-height: 250px;
}

/* footer links */
.footer-link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.footer-link:hover {
  color: #ffffff;
}