.dnxt-text-stroke-fill-main {
    cursor: pointer;
    -webkit-text-stroke-width: 4px;
    transition: background-size .5s cubic-bezier(0.67, 0.01, 0.15, 0.98);
    font-size: 100px;
    font-weight: 700;
    line-height: 100px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    display: inline-block;
    border-style: solid;
    border-color: #2857b6;
}
/*============ dnxt-text-common-fill-to-stroke-hover-NONE================== */
.dnxt-text-stroke-fill-without-hover{
    -webkit-background-clip: text;
    -webkit-text-stroke-color: transparent;
    -webkit-text-fill-color: #fff;
}
/*============ dnxt-text-common-fill-to-stroke-hover-color================== */
.dnxt-text-stroke-to-fill-hover{
    -webkit-background-clip: text;
    background-position: 100% 0%;
}
.dnxt-text-stroke-to-fill-hover:hover{
    /* -webkit-text-fill-color: #fff; */
    -webkit-text-fill-color: transparent;
    background-size: 100% 200%;
}
/*============ dnxt-text-stroke-top ================== */
.dnxt-text-stroke-top {
    background-image: linear-gradient(180deg, #000 0%, #f00 50%, transparent 50.1%);
    background-position: 100% 0%;
    background-size: 100% 0%;
}
.dnxt-text-stroke-top:hover {
    background-size: 100% 200%;
}
/*============ dnxt-text-stroke-right================== */
.dnxt-text-stroke-right {
    background-image: linear-gradient(270deg, rgb(243, 183, 183) 0%, rgb(62, 131, 196) 50%, transparent 50.1%);
    background-position: 100% 0%;
    background-size: 0% 100%;
}
.dnxt-text-stroke-right:hover {
    background-size: 200% 100%;
}
/*============ dnxt-text-stroke-bottom================== */
.dnxt-text-stroke-bottom {
    background-image: linear-gradient(0deg, rgb(139, 120, 190) 0%, rgb(124, 242, 253) 50%, transparent 50.1%);
    background-position: 100% 100%;
    background-size: 100% 0%;
}
.dnxt-text-stroke-bottom:hover {
    background-size: 100% 200%;
}
/*============ dnxt-text-stroke-left================== */
.dnxt-text-stroke-left {
    background-image: linear-gradient(90deg, rgb(139, 120, 190) 0%, rgb(124, 242, 253) 50%, transparent 50.1%);
    background-position: 0% 100%;
    background-size: 0% 100%;
}
.dnxt-text-stroke-left:hover {
    background-size: 200% 100%;
}
/*============ dnxt-text-stroke-angle================== */
.dnxt-text-stroke-angle {
    background-image: linear-gradient(135deg, rgb(139, 120, 190) 0%, rgb(124, 242, 253) 50%, transparent 50.1%);
    background-size: 0% 100%;
}
.dnxt-text-stroke-angle:hover {
    background-size: 220% 100%;
}
/*============ dnxt-text-stroke-redial================== */
.dnxt-text-stroke-radial {
    background-image: radial-gradient(circle farthest-corner at center center, rgb(139, 120, 190) 0%, rgb(124, 242, 253) 40%, transparent 50.1%);
    background-position: 50% 50%;
    background-size: 0% 0%;
}
.dnxt-text-stroke-radial:hover {
    background-size: 180% 400%;
}