:root {
    --grey: #f6f0e8;
    --orange: #f59632;
    --purple: #3e1320;
    --teal: #47969a;
}

.py-animated-heading .py-animated-heading__main {
    display: inline-block;
    position: relative;
    overflow: visible;
}

.py-animated-heading .type-underline svg {
    overflow: visible;
    position: absolute;
    width: calc(100% + 20px);
    /* height: calc(100% + 20px); */
    height: 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 15px));
}

.py-animated-heading .type-double svg {
    overflow: visible;
    position: absolute;
    width: calc(100% + 20px);
    height: 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 25px));
}

.py-animated-heading .type-circle svg {
    overflow: visible;
    position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 10px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 5px));
}

.py-animated-heading svg path {
    fill: none;
    stroke: #3e1320;
    stroke-width: 8px;
    stroke-linecap: round;
    stroke-linejoin: round;

    /* animation: elementor-headline-dash forwards; */
    animation-duration: 2s;
    animation-iteration-count: 1;
}

.py-animated-heading .py-animated-heading__main-text {
    position: relative;
    display: inline-block;
    font-style: italic;
}

.py-animated-heading .type-circle {
    margin-inline: 8px;
}

.py-animated-heading .style-grey .py-animated-heading__main-text {
    color: var(--grey);
}
.py-animated-heading .style-orange .py-animated-heading__main-text {
    color: var(--orange);
}
.py-animated-heading .style-purple .py-animated-heading__main-text {
    color: var(--purple);
}
.py-animated-heading .style-teal .py-animated-heading__main-text {
    color: var(--teal);
}

.py-animated-heading .style-grey svg path {
    stroke: var(--grey);
}
.py-animated-heading .style-orange svg path {
    stroke: var(--orange);
}
.py-animated-heading .style-purple svg path {
    stroke: var(--purple);
}
.py-animated-heading .style-teal svg path {
    stroke: var(--teal);
}

/* Animation */
@keyframes elementor-headline-dash {
    0% {
        stroke-dasharray: 0 1500;
        opacity: 1
    }

    to {
        stroke-dasharray: 1500 1500;
        opacity: 1
    }
}

@keyframes hide-highlight {
    0% {
        opacity: 1;
        stroke-dasharray: 1500 1500
    }

    to {
        filter: blur(10px);
        opacity: 0
    }
}