/* Style for the OPEN menu icon (hamburger) */
.elementor-menu-toggle .elementor-menu-toggle__icon--open.eicon-menu-bar:before {
    content: ""; /* Remove the default font icon character */
    display: inline-block; /* Or block, depending on layout needs */
    width: 24px;  /* Set the desired width of your icon */
    height: 24px; /* Set the desired height of your icon */
    background-color: transparent; /* Ensure no background color interferes */

    /* Set the SVG background */
    background-image: url('/images/icons/menu-open.svg'); /* Adjust path if needed */
    background-repeat: no-repeat;
    background-size: contain; /* Or cover, or specific dimensions */
    background-position: center;

    /* Optional: Ensure font properties don't interfere */
    font-family: initial;
    font-weight: normal;
}

/* Style for the CLOSE menu icon (X) */
.elementor-menu-toggle .elementor-menu-toggle__icon--close.eicon-close:before {
    content: ""; /* Remove the default font icon character */
    display: inline-block; /* Or block, depending on layout needs */
    width: 24px;  /* Set the desired width of your icon */
    height: 24px; /* Set the desired height of your icon */
    background-color: transparent; /* Ensure no background color interferes */

    /* Set the SVG background */
    background-image: url('/images/icons/menu-close.svg'); /* Adjust path if needed */
    background-repeat: no-repeat;
    background-size: contain; /* Or cover, or specific dimensions */
    background-position: center;

    /* Optional: Ensure font properties don't interfere */
    font-family: initial;
    font-weight: normal;
}

/* Optional: Hide the original <i> tag content if necessary, though :before should cover it */
/*
.elementor-menu-toggle .elementor-menu-toggle__icon--open.eicon-menu-bar,
.elementor-menu-toggle .elementor-menu-toggle__icon--close.eicon-close {
    font-size: 0;
}
*/