.header-navigation .menu {
    gap: 28px !important;
}

/* Base styles for menu items */
.primary-menu-container ul li a {
    position: relative;
    display: inline-block;
    padding-bottom: 5px; /* Space for the border animation */
    transition: all 0.3s ease; /* Smooth transition for text and border */
    padding: 0 0 4px 0 !important;
    color: #333 !important;
}

/* On hover: add border and move text up */
.primary-menu-container ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px; /* Height of the bottom border */
    background-color: #B30013; /* Border color */
    transform: scaleY(0); /* Start with no visible border */
    transition: transform 0.3s ease; /* Smoothly scale the border */
    transform-origin: bottom;
}

.primary-menu-container ul li a:hover::after {
    transform: scaleY(1); /* Full height on hover */
}

.primary-menu-container ul li a:hover {
    transform: translateY(-4px); /* Move the text up slightly */
    box-shadow: none; /* Prevent shadow on hover */
    color: #B30013 !important;
}

/* For active/current menu item */
.primary-menu-container ul li.current-menu-item a {
    transform: translateY(-4px); /* Keep text up for active item */
    box-shadow: 0px -3px 0px #B30013 inset; /* Static bottom border for active item */
    transition: all 0.3s ease;
    color: #B30013 !important;
}

/* Consistent animation for submenu items */
ul.sub-menu li:hover>a {
    transform: translateY(0); /* No text movement for submenu items */
    box-shadow: none;
    transition: all 0.3s ease;
}