.sticky-top {
  position: sticky !important;
  top: 0;
}

.navbar .form-control:focus {
  box-shadow: none;
  border-color: #0d6efd;
}

.nav-item {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s, border-bottom 0.3s;
}

.nav-item:hover {
  background-color: #f8f9faa6;
  border-bottom: 2px solid #1a1a1b;
}

.navbar-nav .nav-link {
  transition: color 0.3s ease, transform 0.2s ease;
}

.navbar-nav .nav-link:hover {
  color: #12151a;
  transform: scale(1.1);
}

.btn {
  transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
  transform: scale(1.05);
}
.btn-read {
  background-color: #6590e09d;
  color: #131313;
}
.btn-read:hover {
  background-color: #6590e09d;
}

.form-control + .btn i {
  transition: transform 0.2s ease, color 0.3s ease;
}

.form-control + .btn:hover i {
  color: #1c1d1f;
  transform: scale(1.2);
}

.navbar.scrolled {
  background-color: #f8f9fa;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.nav-link i {
  font-size: 1.1rem;
  margin-right: 0.5rem;
  color: black;
}
.separator-card {
      background-color: #f8f9fa; /* container background */
      border: none;
      text-align: center;
      margin: 30px 0;
      position: relative;
    }
    .separator-card::before,
    .separator-card::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 15%;
      height: 1px;
      background-color: #dee2e6;
    }
     .separator-card::before { left: 0; }
    .separator-card::after { right: 0; }
     /* Text with background color */
    .separator-card h5 {
      display: inline-block;
      padding: 5px 20px;
      margin: 0;
      background-color: #0d6efd; /* text background color */
      color: #fff;               /* text color */
      font-weight: bold;
      border-radius: 5px;        /* optional rounded corners */
    }
    .search-input{
      border: 1px solid #0d6efd;
    }

    .search-input:focus {
      border-color: #748296;
      outline: none;
    }
  
  /*Category Collapsable*/
  /* Card styling */
  .category-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  .anatomy {
    background: #f8d7da;
    color: #0d6efd;
    font-weight: bold;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .physiology{
    background: #d1ecf1;
    color: #0d6efd;
    font-weight: bold;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .biochemistry{
    background: #90EE90;
    color: #0d6efd;
    font-weight: bold;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .community-medicine{
    background: #FFFFE0;
    color: #0d6efd;
    font-weight: bold;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .category-header i:first-child {
    margin-right: 8px;
  }

  /* Arrow styling */
  .toggle-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
  }
  .collapsed .toggle-arrow {
    transform: rotate(-90deg); /* arrow points right when collapsed */
  }

  .category-list {
    list-style: none;
    padding: 12px 16px;
    margin: 0;
  }
  .category-list li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
  }
  .show-all {
    display: block;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    color: #0d6efd;
    text-decoration: none;
  }

  /* === Desktop overrides === */
  @media (min-width: 769px) {
    /* Always show collapse content */
    .category-collapse {
      display: block !important;
      height: auto !important;
      visibility: visible !important;
    }
    /* Hide arrow on desktop */
    .toggle-arrow {
      display: none;
    }
    /* Header not clickable on desktop */
    .category-header {
      cursor: default;
    }
  }

@media (max-width: 991.98px) {
  .navbar .navbar-nav {
    text-align: left;
  }
  .navbar .input-group {
    min-width: 100%;
  }
  .navbar .form-control {
    font-size: 0.2rem;
    padding: 0.4rem 1rem;
  }
  .navbar .btn {
    font-size: 0.9rem;
    padding: 0.35rem 1rem;
  }
  .navbar .d-flex.align-items-center {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem;
    width: 100%;
  }
  .navbar .d-flex.gap-2 {
    justify-content: flex-start;
  }
  /* Dropdown full width on mobile 
  .dropdown-menu {
    width: 100%;
  }*/
}