/* ------------------------------------------- */
/* CONTACT MENU ITEM HOVER EFFECT              */
/* ------------------------------------------- */

/* FIX: Increased specificity by targeting the link inside its parent li wrapper. */
/* The parent li wrapper often has a class like .et_pb_menu_item or similar. 
   We will target the link using its ID, but ensure we use !important aggressively 
   to override conflicting theme styles.
*/

/* Target the specific "Contact" link using its unique ID */
/* We target the link (#a.nav-link.menu-button-6218) with maximum specificity */
#a.nav-link.menu-button-6218 {
    /* Define the initial state of the border (transparent or existing color) */
    border: 2px solid transparent !important; 
    padding: 8px 12px !important; /* Adjust padding to make space for the border without shifting the menu */
    transition: border-color 0.3s ease !important; /* Smooth transition for the color change */
    border-radius: 4px !important; /* Optional: adds subtle rounded corners */
}

/* Apply the border color on hover */
#a.nav-link.menu-button-6218:hover {
    /* Set the border color to yellow on hover */
    border-color: #FFD700 !important; /* Gold/Yellow color. !important is crucial here */
}

/* If the element is currently active/selected, maintain the yellow border */
/* (Optional, but good practice if the Contact page is currently viewed) */
#a.nav-link.menu-button-6218.current-menu-item {
    border-color: #FFD700 !important;
}