.elementor-16 .elementor-element.elementor-element-0026451{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-eaf2c98 *//* 1. Base State: Remove fill and set primary stroke */
.ca-service-card-icon svg {
    fill: none !important;
    stroke: var(--ca-primary) !important;
    transition: stroke 0.3s ease; /* Keeps the color change smooth */
}

/* 2. Hover State: Change stroke to white when the card is hovered */
/* This assumes '.ca-service-card' is the parent container being hovered */
.ca-service-card:hover .ca-service-card-icon svg {
    stroke: #ffffff !important;
    fill: none !important; /* Ensures the black fill doesn't return on hover */
}/* End custom CSS */