.nav-icon {
  width: 24px;
  height: 24px;
}

.nav-item-custom {
 
  padding: 8px 10px;
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.nav-item-custom a {
  text-decoration: none;
  color: inherit;
}

.nav-item-custom:hover {
  background-color:rgba(57, 145, 247, 0.5);
  color: black;
   box-shadow: 0 0 20px #fc8423; border-radius: 8px;
}

.nav-item-custom.active {
  background-color: rgba(57, 145, 247, 0.5);
   box-shadow: 0 0 20px #fc8423; border-radius: 8px;
}

.nav-item-custom.active .icon-text,
.nav-item-custom.active img {
  filter: brightness(0) invert(1); /* white icon and image */

}


    .icon-text {
      font-size: 12px;
    }