/* Sub Dropdown (for subcategories) */
.sub-dropdown {
  position: absolute;
  top: 0;
  left: 100%; /* Align sub-dropdown next to parent */
  background-color: white;
  width: 40vw;
  max-height: 60vh;
  overflow-y: auto;
  border-radius: 10px;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
  z-index: 1000;
}
 .dropdown li:hover > .sub-dropdown {
     display: grid;
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }
 
 .dropdown .category-toggle{
     padding:1rem 1rem;
     width:100%;
 }

 /* Individual sub-items */
 .sub-dropdown li {
     list-style: none;
     padding: 0;
     overflow: hidden;
 }
 
 .sub-dropdown a {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-decoration: none;
     color: #333;
     padding: 0.5rem;
     border-radius: 10px;
     background-color: #f9f9f9;
     transition: background-color 0.3s ease;
 }
 
 .sub-dropdown a:hover {
     background-color: #eee;
 }
 
 .sub-dropdown img {
  width: 100%;
  height: 100px;
     border-radius: 10px;
     object-fit: cover;
     margin-bottom: 0.5rem;
     transition: transform 0.3s ease;
 }
 
 .sub-dropdown a:hover img {

     transform: scale(1.3);
 }
 @media (max-width: 768px) {
     .dropdown {
         position: static;
         width: 100%;
     }
 
     .sub-dropdown {
         position: static;
         width: 100%;
         height: auto;
         max-height: 50vh;
         overflow-y: auto;
         grid-template-columns: repeat(2, 1fr);
         padding: 1rem;
     }
 }
 
.menu-item:hover .dropdown{
     display: inline-block;
}



 .dropdown{
     display: none;
     border-radius: 0.5rem;
     position: absolute;
 }

 .dropdown li:hover .category-toggle{
     background-color: black;
     color:white;
 }


 


.navbarr,.dropDownLabel {
     padding: 1rem;
     z-index: 100;
   }

   


  .select-container {
    background: #ffffff;
    padding: 25px 30px;
    border-radius: 12px;
    max-width: 420px;
    margin: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }


  select {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
    transition: border-color 0.3s ease;
    cursor: pointer;
  }

  select:focus {
    border-color: #007bff;
    outline: none;
  }

  option {
    padding: 10px;
  }


  input[type="submit"]:hover {
    background-color: #0056b3;
  }

  .output {
    margin-top: 20px;
    font-weight: bold;
    color: #007bff;
    text-align: center;
  }