.header-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .header-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(26, 30, 33, 1), rgba(26, 30, 33, 0.3) 20%, transparent);
  }

  /* Default header image for desktop */
  .header-image-container .header-image.desktop {
    display: block;
  }

  .header-image-container .header-image.mobile {
    display: none;
  }

  /* Header image for mobile devices */
  @media (max-width: 768px) {
    .header-image-container .header-image.desktop {
      display: none;
    }

    .header-image-container .header-image.mobile {
      display: block;
    }
  }
  
  



/* Make the entire dropdown item clickable */
.navbar .dropdown-menu > li > a {
    display: block;
    width: 100%;
    padding: 10px 20px; /* Adjust padding as needed */
    text-align: left; /* Keep text aligned to the left */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.navbar .dropdown-menu > li {
    position: relative; /* Ensure proper alignment */
}


/* Ensure dropdowns only open on hover for PC (not mobile) */
@media (min-width: 768px) {
    .navbar .dropdown-menu {
        display: block !important; /* Ensure the element is always part of the layout */
        visibility: hidden; /* Start hidden */
        opacity: 0; /* Fully transparent */
        transform: translateY(-10px); /* Start slightly above */
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
        position: absolute !important; /* Ensure dropdown is absolutely positioned */
        border-radius: 10px !important; /* Make the corners rounded */
    }
    
    .navbar .dropdown:hover .dropdown-menu {
        visibility: visible; /* Make it visible */
        opacity: 1; /* Fade in */
        transform: translateY(0); /* Slide to original position */
    }
}