/* ----------- */
 
 .college {background-color: #eee;}
 
 nav {
    background-color: #eee;
    border-bottom: 2px solid #eee;
    /*padding: 15px 40px;*/
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;  
  }

  
  .menu {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .menu-item {
    position: relative;
  }

  .menu-item > a {
    text-decoration: none;
    color: black;
    font-size: 15px;
    padding: 8px 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: 0.3s;
    
  }

  .menu-item > a:hover {
  
     color: white;
     background-color: #FFC107; 
     border-radius: 0px;
  }

  .icon {
    font-weight: bold;
  }
  
  .menu-item a.active {
  font-weight: bold;
  color: white; background-color:#ffc107;
  
}
  
  .dropdown {
    display: none;
    position: absolute;
   /* top: 35px;*/
    left: 0;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 180px;
	max-height: 100vh; /* Adjust as needed */
	
	
  }
  
 

  .dropdown a {
    display: block;
    padding: 7px 5px;
    text-decoration: none;
    color: #333;
    transition: 0.2s;
	font-size:14px;
	
  }

  .dropdown a:hover {
    background-color: #FFC107;
    color: #ffffff;
	max-height: 80vh; /* Adjust as needed */
  overflow: visible;
  }

  .dropdown.show {
    display: block;
    position:absolute;
  }

  .toggle-btn {
    display: none;
    font-size: 24px;
    cursor: pointer;
  }
  
/* THIRD-LEVEL DROPDOWN POSITIONING */

.dropdown .menu-item {
  position: relative;
  
}

.dropdown .menu-item > .dropdown {
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: 0;
  margin-left: 0;
  min-width: 180px;
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 1000;
  
}



/* Show third-level on hover (desktop) */
.dropdown .menu-item:hover > .dropdown {
  display: block;
}

/* Adjust padding for inner links if needed */
.dropdown .dropdown .dropdown a {
  padding-left: 5px;
}


.dropdown .menu-item > .dropdown {
  /* ... styles ... */
  display: none;
}

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





  @media (max-width: 768px) {
    .toggle-btn {
      display: block;
        border: 1px solid #eee;
        padding: 5px;
        
    }
  
    .menu {
      flex-direction: column;
      width: 100%;
      display: none; 
      gap:5px;
    }
  
    .menu.show {
      display: flex;
      gap:5px;
    }


    .menu-item > a {
      padding: 4px 5px;
    }
  
  /* Mobile-specific override for third-level dropdown */
 

  .dropdown .menu-item > .dropdown {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin-left: 0 !important;
    display: none;
    box-shadow: none;
    border: none;
  }

  .dropdown .menu-item > .dropdown.show {
    display: block;
    
  }


  }