.hodgroup {
    position: relative; /* CRUCIAL: Establishes positioning context for the dropdown */
    /* Add any other styling for your main nav items here (padding, font, etc.) */
}
/* Custom CSS to hide and show dropdown on hover */
.hodgroup:hover .hodgroup-hover-dropdown {
    display: flex; /* Use flex to enable column layout */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; /* Ensure events are captured when visible */
}

.hodgroup-hover-dropdown {
    position: absolute; /* CRUCIAL: Positions it relative to its parent .hodgroup */
    top: 100%;          /* Places it directly below the parent */
    left: 0;            /* Aligns its left edge with the parent */

    /* Animation and visibility */
    display: none;      /* Hidden by default, managed by JS or CSS hover */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(10px); /* Slight initial offset for animation */
    pointer-events: none;

    /* Background and visual styles */
    background-color: #002147; /* Dark blue background */
    color: #ffffff; /* White text color */
    border-radius: 5px; /* Optional: slight border-radius */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Optional: subtle shadow */

    /* --- Multi-Column Layout for the Dropdown Box Itself --- */
    /* This will make the entire dropdown box a flex container for its columns */
    display: flex;       /* Use flex to enable column layout */
    flex-wrap: wrap;     /* Allow items/columns to wrap to the next line */
    align-items: flex-start; /* Align columns to the top */

    /* CRUCIAL: Define the width of the entire dropdown box */
    /* Adjust this width based on how many columns you want and their content */
    /* width: 450px; */
    /* Or use max-content if you want it to shrink-wrap its widest column */
    width: max-content;

    padding: 15px; /* Padding inside the dropdown box for content */
    box-sizing: border-box; /* Include padding in width calculation */
}
/* Style for dropdown items */
.hodgroup-hover-dropdown a {
    color: #ffffff; /* White text for links */
    padding: 8px 8px 16px 0px; /* Adjust padding for better spacing */
    border-bottom: 1px solid rgba(255, 255, 255, 0.637); /* Subtle separator */
    margin-right: 10px;
    min-width: 100px;
} 
/* .hodgroup-hover-dropdown a:last-child {
    border-bottom: none; /* No border for the last item
}
*/
.hodgroup-hover-dropdown a:hover {
    color: #fcd900;
}
/* Make the menu item itself a larger hover target */
.hodgroup > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1rem;
}
.arrowdown > a::after {
    position: absolute;
    display: block;
    right:3px;
    top:40%;
    content: "\f107";
    font-family: "Font Awesome 5 Free" !important;
    font-weight:900 !important;
    opacity:.5;
}
.hodgroup:hover > .hodgroup-hover-dropdown { /* Use direct child selector for specificity */
    display: flex; /* Show as flex container */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.hodgroup-hover-dropdown ul { /* If you have an inner UL */
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Make the UL a flex container for its LIs */
    flex-wrap: wrap;
    width: 100%; /* Take full width of parent hodgroup-hover-dropdown */
}
.hodgroup-hover-dropdown ul li { /* Each individual item */
    /* Calculate width for 2 columns with gaps */
    width: calc(50% - 20px); /* 50% width minus 20px for horizontal gap */
    margin: 10px; /* 10px top/bottom, 10px left/right for spacing */
    box-sizing: border-box;

    /* No borders around individual items */
    border: none;
    background-color: transparent; /* Ensure no background from LI itself */
    padding: 0; /* Remove padding from LI if link handles it */
}
/* Style for dropdown links */
.hodgroup-hover-dropdown ul li a { /* Target the links */
    display: block; /* Make the entire link clickable and allow padding/border */
    color: #ffffff;
    padding: 8px 0; /* Adjust padding for better spacing (vertical only) */
    text-decoration: none;
    white-space: normal; /* Allow text to wrap if too long */

    /* Subtle separator at the bottom of each link */
    border-bottom: 1px solid rgba(255, 255, 255, 0.637);
}
/* Remove bottom border for the last item in each column (for 2 columns) */
.hodgroup-hover-dropdown ul li:nth-last-child(-n + 2) a {
    border-bottom: none;
}
.hodgroup-hover-dropdown ul li a:hover {
    color: #fcd900;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle hover background */
}