.animated_heading {
    line-height: 1;
    margin: 0;
    padding: 0;
}

h1.animated_heading span{
    font-family: Roboto;
    font-weight: 600;
    font-size: 40px;
    line-height: 40px;
    color: #1467ff;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;  
}


h2.animated_heading span{
    font-family: Roboto;
    font-weight: 600;
    font-size: 32px;
    line-height: 32px;
    color: #1467ff;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}


h3.animated_heading span{
    font-family: Roboto;
    font-weight: 600;
    font-size: 28px;
    line-height: 28px;
    color: #1467ff;
}

h4.animated_heading span{
    font-family: Roboto;
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    color: #1467ff;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

h5.animated_heading span{
    font-family: Roboto;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    color: #1467ff;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

h6.animated_heading span{
    font-family: Roboto;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #1467ff;
    padding: 0px 0px 0px 0px;
    mmargin: 0px 0px 0px 0px;
}

div.animated_heading span{
    font-family: Roboto;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #1467ff;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}


span.animated_heading span{
    font-family: Roboto;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #1467ff;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}


p.animated_heading span{
    font-family: Roboto;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #1467ff;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

span.animated_heading {
    position: relative;
    width: 100%;    
}


.animate_text {
    position: relative;
    z-index: 1;
    margin: 0px 10px 0px 10px !important; 
     
}

.shape-svg svg {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
}

.shape-svg path {
    fill: none;
    stroke:#e31719; 
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;        
    stroke-dasharray: var(--svg-length, 2000);
    stroke-dashoffset: var(--svg-length, 2000);        
    transition: opacity 0.5s ease;
    opacity: 1;
}

@keyframes drawEffect {
    from { stroke-dashoffset: var(--svg-length, 2000); }
    to { stroke-dashoffset: 0; }
}

.draw-now path {
    animation-name: drawEffect;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.fade-out path { opacity: 0; }

.pos-top svg { top: 0%; bottom: 0%; top: 0%; right: 0%; height: 100%; width: 100%; transform: translateX(0%); transform: translateY(0%);}
.pos-bottom svg { top: 10%; bottom: -50%; left: 0%%; right: 0%; height: 100%; width: 100%; transform: translateX(0%); transform: translateY(40%);}
.pos-center svg { top: 50%; bottom: 0%; left: 0%%; right: 0%; height: 100%; width: 100%; transform: translateX(0%); transform: translateY(-50%); }
.pos-surround svg { top: -5%; bottom: 0%; left: -10%; right: 0%; height: 100%; width: 120%; transform: translateX(0%); transform: translateY(0%);}
.highlighter-path path { top: 50%; bottom: 0%; left: 0%; height: 100%; stroke-width: 20% !important; transform: translateX(0%); transform: translateY(60%); opacity: 1;}