.elementor .swirl-accent{/* Apply this class to your heading element in Elementor */
.swirl-accent {
display: inline-block; /* Crucial so the swirl wraps tightly around the word */
position: relative;
font-family: 'Open Sans', sans-serif; /* Example font */
font-size: 100px; /* Example size */
font-weight: 700;
color: #1e3a2b; /* The specific dark green from the image */
text-transform: lowercase;
line-height: 1; /* Helps the tight fit */
padding: 0 0.4em; /* Give the text some breathing room on the sides */
isolation: isolate; /* Ensures the SVG layering works correctly in all browsers */
}

.swirl-accent::before {
content: "";
position: absolute;
/* Stretch to fill the whole text box with some overbleed */
top: -30%;
left: -70%;
right: -30%;
bottom: -50%;
z-index: -1; /* Place it behind the text */

/* The swirl pattern as an SVG Data URI */
background-image: url("https://uproc.co/wp-content/uploads/2026/04/swirl-1.svg");

background-repeat: no-repeat;
background-size: contain; /* Shrinks/stretches the swirl to fit the text box */
background-position: center;
opacity: 1; /* Adjust if the overall swirl is too dark */
}\n}