.navbar-nav .nav-link a {
          font-family: 'Nunito Sans', sans-serif !important;
          line-height: 36px !important;
      }

      .navbar .nav-link,
      .navbar .dropdown-toggle {
          position: relative;
          display: inline-block;
          padding-left: 0.75rem;
          /* match your px-3 (px-3 = 1rem left+right, so 0.75rem left and right approx) */
          padding-right: 0.75rem;
      }

      /* Underline base */
      .navbar .nav-link::after,
      .navbar .dropdown-toggle::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          /* stretch full width */
          bottom: 0;
          height: 2px;
          background-color: var(--bs-primary);
          width: auto;
          /* let left + right control width */
          transition: width 0.3s ease;
          border: none !important;
          transform-origin: left;
          transform: scaleX(0);
          /* start hidden with scale */
          transition: transform 0.3s ease;
      }

      /* On hover/focus, scale underline to full */
      .navbar .nav-link:hover::after,
      .navbar .nav-link:focus::after,
      .navbar .dropdown-toggle:hover::after,
      .navbar .dropdown-toggle:focus::after {
          transform: scaleX(1);
      }

      /* Smooth dropdown for desktop */
      .custom-dropdown .dropdown-menu {
          padding: 0.5rem 0;
          transition: all 0.25s ease;
          min-width: 220px;
      }

      .custom-dropdown .dropdown-item {
          padding: 0.6rem 1rem;
          font-weight: 500;
          color: #555;
          transition: background-color 0.2s ease, color 0.2s ease;
      }

      .custom-dropdown .dropdown-item:hover {
          background-color: var(--bs-primary);
          color: #fff;
          /* border-radius: 6px; */
      }

      /* Divider style */
      .custom-dropdown .dropdown-divider {
          margin: 0.4rem 0;
          opacity: 0.15;
      }

      /* Offcanvas dropdown looks cleaner */
      .offcanvas .dropdown-menu {
          position: static;
          box-shadow: none !important;
          border-radius: 0;
          min-width: 100%;
          padding: 0;
      }

      .offcanvas .dropdown-item {
          padding: 0.8rem 1.2rem;
          font-size: 1rem;
          border-bottom: 1px solid #f1f1f1;
      }

      .offcanvas .dropdown-item:hover {
          background-color: #f8f9fa;
          color: var(--bs-primary) !important;
      }

      .offcanvas .nav-link.active {
          color: var(--bs-primary) !important;
      }


      .dropdown:hover>.dropdown-menu {
          display: block;
          margin-top: 0;
          /* optional, remove if you want the gap */
      }

      .navbar .nav-link.active,
      .navbar .dropdown-toggle.active {
          color: var(--bs-primary) !important;
          font-weight: bold !important;
      }

      .navbar .nav-link.active::after,
      .navbar .dropdown-toggle.active::after,
      .custom-dropdown.active>.dropdown-toggle::after {
          transform: scaleX(1) !important;
          /* keep underline visible */
          background-color: var(--bs-primary) !important;
      }

      /* If you want the entire nav-item with active class to affect the link */
      .custom-dropdown.active>.dropdown-toggle {
          color: var(--bs-primary) !important;
      }

      .custom-dropdown.active>.dropdown-toggle::after {
          transform: scaleX(1) !important;
          background-color: var(--bs-primary) !important;
      }