/* Decorative Shapes - Make them outlined instead of filled */

/* SVG shapes should be stroked, not filled */
svg.decorative-shape,
.decorative-shape svg,
.shape-overlay svg {
    fill: none !important;
    stroke: var(--primary-color, #4A90E2) !important;
    stroke-width: 3px !important;
}

/* If shapes are using background colors */
.shape-circle,
.shape-oval,
.decorative-circle,
.decorative-oval {
    background: transparent !important;
    border: 3px solid var(--primary-color, #4A90E2) !important;
}

/* Specific for service detail pages */
.service-detail .shape-overlay,
.service-detail .decorative-shape {
    background: transparent !important;
    border: 3px solid var(--primary-color, #4A90E2) !important;
}

/* Make sure text inside shapes is visible */
.shape-circle *,
.shape-oval *,
.decorative-circle *,
.decorative-oval * {
    position: relative;
    z-index: 2;
}