.nav {
  padding: 0px clamp(1rem, 0.286rem + 1.905vw, 2rem);
  z-index: 1000;
  position: relative;
  background-color: #fff;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%:
}


.nav-logo {
  width: 100% !important;
  max-width: clamp(7.5rem, 5.714rem + 4.762vw, 10rem);
  margin: 0;
  height: 80px; 
  display: flex; 
  align-items: center; 
}

.nav-content {
  display: flex; 
  height: 80px;
  gap: clamp(1rem, -0.6rem + 6.4vw, 3rem);
  align-items: center;
}

.nav-content-links {
  display: flex; 
  gap: 48px;
}



.nav-content a {
  font-size: 18px; 
  font-weight: 700;
}

.button {
  font-size: 16px; 
  font-weight: 700; 
  background-color: #16A553; 
  padding: 12px clamp(1rem, 0rem + 4vw, 1.5rem);
  letter-spacing: normal; 
  text-transform: none;
  border-radius: 8px;
  margin: 0;
  border: none;
}

.button:hover {
background-color: #09793E; 
 border: none;
}

/* Existing styles... */

.dropdown-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.dropdown-wrapper > a {
  position: relative;
  z-index: 2;
}

.dropdown {
  display: none;
  flex-direction: column;
  position: relative;
  background: white;
  padding: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  margin-top: 12px;
  animation: dropdownFade 0.3s ease;
  z-index: 1;
}

.dropdown a {
  padding: 8px 0;
  text-decoration: none;
  color: #222;
  font-weight: 500;
}

.dropdown a:hover {
  color: #16A553;
}

.dropdown-wrapper:hover .dropdown {
  display: flex;
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile behavior: dropdown content stacks inside nav */
@media (max-width: 768px) {
  .dropdown-wrapper {
    width: 100%;
  }

  .dropdown {
    display: none;
    margin-top: 0;
    box-shadow: none;
    padding: 8px 0;
  }

  .dropdown-wrapper.open .dropdown {
    display: flex;
  }

  .dropdown a {
    padding: 8px 0;
  }
}

.hover-trigger {
  height: 100%;
  display: flex; 
  align-items: center;
}

.nav-hover-div {
   position: absolute; /* or fixed/relative depending on your layout */
  top: 100%; /* or wherever you want it to appear */
  left: 0;
  width: 100%;
  opacity: 100%;
  display: flex;
  transform: translateY(-500px);
  pointer-events: none; /* prevents accidental hover when invisible */
  transition: opacity 0.7S ease, transform 0.8s ease;
  background-color: #fff;
  z-index: 1;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);

  
}

.nav-hover-div.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: flex; /* if needed; avoid toggling display often */
}

.nav-hover-element {
  width: 20%; 
  padding: 16px;
  border-radius: 8px; 
   opacity: 0;
  transform: translateX(0px) scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: 0s; /* will be overridden via JavaScript */

}

.nav-hover-div.visible .nav-hover-element {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.nav-hover-element:hover {
  background-color: #fafafa;
  cursor: pointer;
}

.nav-hover-element img {
  width: 100%; 
  max-height: 160px; 
  border-radius: 1; 
  object-fit: cover;
}

.nav-hover-element a {
  font-size: 20px; 
  font-weight: bold
}

.nav-menu-button {
    display: none;
  }

@media (max-width: 960px) {
  .nav-content-links {
    display: none;
  }
  
  .nav-menu-button {
    display: block;
  }
}

.nav-mobileNav {
  width: 100%; 
  height: 100vh; 
  background-color: #fff;
  position: fixed;
  top: 0; 
  left: 0;
  z-index: 1000;
  padding: 32px; 
   transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto
  
}

.nav-mobileNav a {
  font-size: 24px; 
  font-weight: bold;

}

.nav-mobileNav.nav-open {
  transform: translateX(0);
}

.close-toggle {
  position: fixed; 
  top: 16px; 
  right: 16px; 
}

  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* space between grid items */
    max-width: 600px; /* optional max width */
    margin-bottom: 32px;
  }
  .grid-item {
    text-align: left;
  }
  .grid-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
  }
  .grid-item p {
    text-decoration: none;
    font-weight: bold;
    color: #000;
    font-size: 18px; 
  }


.hover-trigger-mobile {
display: flex; 
  justify-content: space-between;
  cursor: pointer; 
  align-items: center;
}

.hide-mobile-drowdown-content {
  display: none;
}


.dropdown-flip {
  transform: rotateX(180deg);
}

.marginBottom32px {
  margin-bottom: 32px;
}