/***
     ***  Sub-Menu Definition Structure ***
     ***
        <li class="nav-item nav-dropdown"><a class="nav-link">Master</a>
            <ul class="nav-submenu">
              <li class="submenu-item"><a href="/materials" class="nav-link">Material</a></li>
              <li class="submenu-item"><a href="/groups" class="nav-link">Group</a></li>
              <li class="submenu-item"><a href="/categories" class="nav-link">Category</a></li>
              <li class="submenu-item"><a href="/subcategories" class="nav-link">Subcategory</a></li> 
            </ul>
        </li>
     ***
     ***/
     
    /* Dropdown Submenu styles */
    li.nav-item.nav-dropdown {
      display: inline-block;
    }

    ul.nav-submenu {
        display: none;
        text-align: center;
        padding: 0.75rem 1.25rem;
        text-decoration: none;
        position: absolute;
        background-color: white;
        min-width: 6rem;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 3;
    }

    li.submenu-item {
      color: black;
      padding: 0.5rem 0rem;
      text-decoration: none;
      display: block;
      text-align: left;  
    }

    .navbar .navbar-nav .nav-dropdown:hover .nav-submenu {
        display: inline-block;
    }

    .submenu-link {
      color: inherit;
      text-decoration: none;
      font-size: 1rem;
      padding: 0.5rem 0;
      position: relative;
      transition: color 0.3s ease-in-out;

      &.active {
        color: var(--rwx-color-orange);
        font-weight: 600;
        border-bottom: 2px solid var(--rwx-color-orange);
      }

      &::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: var(--rwx-color-orange); /* A bright accent color */
      transition: width 0.3s ease-in-out;
      }

      &:hover {
        color: var(--rwx-color-orange);
      }

      &:hover::after {
        width: 100%;
      }

    }