/* Doodler Handwritten Text for WPBakery */

.dht-overlay-parent {
    position: relative !important;
}

.dht-overlay-parent > .doodler-handwritten-text {
    position: absolute !important;
    left: 50%;
    top: 50%;
    width: var(--dht-width, 90%);
    max-width: none;
    height: 1px;
    z-index: var(--dht-z, 999);
    pointer-events: none;
    overflow: visible;
    transform:
        translate(
            calc(-50% + var(--dht-offset-x, 0px)),
            calc(-50% + var(--dht-offset-y, 0px))
        )
        rotate(var(--dht-rotation, 0deg));
    transform-origin: center center;
}

.doodler-handwritten-text .dht-svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: auto;
    overflow: visible;
    transform: translate(-50%, -50%);
    display: block;
}

.doodler-handwritten-text .dht-text {
    font-family: var(--dht-font, 'Allura'), cursive;
    font-size: var(--dht-size, 150px);
    font-weight: 400;
    text-anchor: middle;
    dominant-baseline: middle;
    fill: transparent;
    stroke: var(--dht-color, #eff000);
    stroke-width: 1.7px;
    stroke-linecap: round;
    stroke-linejoin: round;
    paint-order: stroke fill;
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    opacity: 0;
}

.doodler-handwritten-text.dht-run .dht-text {
    opacity: 1;
    animation: dht-draw var(--dht-duration, 2.8s) cubic-bezier(.36,.08,.22,1) var(--dht-delay, .35s) forwards;
}

.doodler-handwritten-text[data-dht-fill="yes"].dht-run .dht-text {
    animation:
        dht-draw var(--dht-duration, 2.8s) cubic-bezier(.36,.08,.22,1) var(--dht-delay, .35s) forwards,
        dht-fill .65s ease calc(var(--dht-delay, .35s) + var(--dht-duration, 2.8s) - .25s) forwards;
}

@keyframes dht-draw {
    0% {
        stroke-dashoffset: 2400;
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes dht-fill {
    from { fill: transparent; }
    to   { fill: var(--dht-color, #eff000); }
}

@media (max-width: 999px) {
    .doodler-handwritten-text .dht-text {
        font-size: var(--dht-size-tablet, 110px);
    }
}

@media (max-width: 690px) {
    .dht-overlay-parent > .doodler-handwritten-text {
        width: min(var(--dht-width, 90%), 96%);
    }

    .doodler-handwritten-text .dht-text {
        font-size: var(--dht-size-mobile, 72px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .doodler-handwritten-text .dht-text,
    .doodler-handwritten-text.dht-run .dht-text,
    .doodler-handwritten-text[data-dht-fill="yes"].dht-run .dht-text {
        animation: none !important;
        stroke-dashoffset: 0;
        opacity: 1;
        fill: var(--dht-color, #eff000);
    }
}