/* ============ desktop view ============ */

.navbar {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  }

  /* Adjust the padding between navbar links */
  .navbar-dark .navbar-nav .nav-item {
    margin-right: 0px;
    /* Increases spacing between links */
  }

  .navbar-dark .navbar-nav .nav-link {
    color: white;
    background-color: transparent;
    padding: 10px 15px;
    /* Box padding */
    border-radius: 8px;
    /* Rounded corners */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth transition */
  }

  /* Change the background to pink with rounded corners on hover */
  .navbar-dark .navbar-nav .nav-link:hover {
    background-color: #7b0567;
    /* Pink background on hover */
    color: white;
    /* Ensure text stays white on hover */
  }

  /* Dropdown items styling */
  .navbar-dark .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.5) !important;
    /* Semi-transparent black background */
    border: none;
    /* Optional: remove border */
  }

  /* Make dropdown text white */
  .navbar-dark .dropdown-menu .dropdown-item {
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth transition */
  }

  /* Hover effect for dropdown items */
  .navbar-dark .dropdown-menu .dropdown-item:hover {
    background-color: #7b0567;
    /* Pink background on hover */
    color: white;
    /* Keep text white */
  }

  /* Open the dropdown on hover */
  @media (min-width: 992px) {
    .navbar-dark .dropdown:hover .dropdown-menu {
      display: block;
      /* Show the dropdown when hovered */
      margin-top: 0;
      /* Align the dropdown properly */
    }

    .navbar-dark .dropdown-toggle::after {
      display: none;
      /* Optionally hide the dropdown caret */
    }
  }

  /* Dropdown items styling */
  .navbar-dark .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background */
    border: none;
    transition: all 0.3s ease;
    /* Smooth opening */
  }

  /* Make dropdown text white */
  .navbar-dark .dropdown-menu .dropdown-item {
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth transition */
  }

  /* Hover effect for dropdown items */
  .navbar-dark .dropdown-menu .dropdown-item:hover {
    background-color: #7b0567;
    /* Pink background on hover */
    color: white;
  }

  @media all and (min-width: 1200px) {

    .nav-item {
      padding-right: 40px;

    }

    .dropdown-menu li {
      position: relative;

    }

    .dropdown-menu .submenu {
      display: none;
      position: absolute;
      left: 100%;
      top: -7px;
    }

    .dropdown-menu .submenu-left {
      right: 100%;
      left: auto;
    }

    .dropdown-menu>li:hover {
      background-color: #ffffff
    }

    .dropdown-menu>li:hover>.submenu {
      display: block;
    }
  }

  /* ============ desktop view .end// ============ */

  /* ============ small devices ============ */
  @media (max-width: 1000px) {

    .dropdown-menu .dropdown-menu {
      margin-left: 0.7rem;
      margin-right: 0.7rem;
      margin-bottom: .5rem;

    }

  }