:root {
      --pink: #EE57EF;
      --purple: #9A5CF9;
      --hover-bg: #fff;
      --hover-text: #000;
      --active-bg: #fff;
      --active-text: #000;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      padding-top: 70px; /* space for fixed navbar */
    }

    .navbar {
      background: linear-gradient(135deg, var(--pink), var(--purple));
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1030;
      transition: background-color 0.3s ease-in-out;
    }

    .navbar-brand, 
    .nav-link {
      color: #fff !important;
      transition: all 0.3s ease;
    }

    .nav-link.active {
      background-color: var(--active-bg);
      color: var(--active-text) !important;
      border-radius: 4px;
      padding: 0.5rem 1rem;
      transition: all 0.3s ease;
    }

    .nav-link:hover, 
    .nav-link:focus {
      color: var(--hover-text) !important;
      background-color: var(--hover-bg);
      border-radius: 4px;
      transform: translateY(-1px);
    }

    .dropdown-menu {
      border-radius: 10px;
      border: none;
      box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    }

    .dropdown-menu .dropdown-item {
      color: var(--purple);
      padding: 0.5rem 1rem;
      transition: background-color 0.3s, color 0.3s;
    }

    .dropdown-menu .dropdown-item:hover {
      background-color: var(--pink);
      color: #fff;
    }

    .dropdown-menu .dropdown-item.active {
      background-color: var(--purple);
      color: #000;
    }

    .dropdown-toggle:hover {
      color: var(--hover-text) !important;
      background-color: var(--hover-bg);
    }

    .btn-primary {
      background-color: #fff;
      color: var(--purple);
      font-weight: 600;
      border: none;
      transition: all 0.3s ease;
    }

    .btn-primary:hover {
      background-color: #ffd8fe;
      color: var(--pink);
    }

    .navbar-toggler {
      border: none;
    }

    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.8)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

    @media (max-width: 991.98px) {
  .navbar-nav {
    background: linear-gradient(135deg, var(--pink), var(--purple));
    border-radius: 10px;
    padding: 1rem;
  }

  .nav-item {
    margin-bottom: 0.5rem;
  }

  .navbar-nav .nav-link,
  .dropdown-toggle {
    padding: 0.75rem 1rem;
    text-align: left;
    width: 100%;
    color: #fff !important;
    background-color: transparent;
  }

  .navbar-nav .nav-link:hover,
  .dropdown-toggle:hover {
    background-color: var(--hover-bg);
    color: var(--hover-text) !important;
    border-radius: 4px;
  }

  /* ✅ ACTIVE PAGE DIFFERENTIATION ON MOBILE */
  .navbar-nav .nav-link.active,
  .dropdown-toggle.active {
    background-color: var(--active-bg);
    color: var(--active-text) !important;
    border-radius: 4px;
  }

  .dropdown-menu {
    background-color: #fff;
    width: 100%;
    border-radius: 8px;
    margin-top: 0.5rem;
  }

  .dropdown-menu .dropdown-item {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }

  .dropdown-menu .dropdown-item:hover {
    background-color: var(--pink);
    color: #fff;
  }

  .dropdown-menu .dropdown-item.active {
    background-color: var(--purple);
    color: #000;
  }

  .btn-primary {
    width: 100%;
    margin-top: 0.5rem;
    font-size: 1rem;
  }
}