.elementor-1185 .elementor-element.elementor-element-36bbff25{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-66653a85 *//* Define your logo color as a CSS variable for easy management */
:root {
    --f2e-logo-color: #007bff; /* Replace with your actual logo's hex color */
    --f2e-logo-color-darker: #0056b3; /* A slightly darker shade for active/focus if desired */
}

/* Target the specific preview button by its ID */
#f2e-preview-button {
    /* Optional: Base styles for the button if not already defined by .f2e-button */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#f2e-preview-button:hover {
    background-color: var(--f2e-logo-color); /* Background color on hover */
    border-color: var(--f2e-logo-color);     /* Border color on hover */
    color: #fff; /* Text/icon color on hover (e.g., white for contrast) */
}

#f2e-preview-button:focus,
#f2e-preview-button:active {
    background-color: var(--f2e-logo-color-darker); /* A slightly darker shade for active/focus */
    border-color: var(--f2e-logo-color-darker);     /* Border color on active/focus */
    color: #fff; /* Text/icon color on active/focus */
    outline: none; /* Remove default browser outline if you're providing your own visual feedback */
}

/* If the SVG's stroke is set to 'currentColor', it will automatically inherit the 'color' property */
#f2e-preview-button svg {
    stroke: currentColor;
}/* End custom CSS */