/* -------------------------------- 
rt-hovertext ONE
-------------------------------- */
.rt-hover-heading {
    margin-right: 10px;
    display: block;
    word-wrap: break-word;
    position:relative;
}

.rt-subheading {
    position: relative;
    display: inline-block;
    width: auto;
    color: #2893f5;
    margin-right: 15px;
}

.rt-subheading svg {
    fill: #5db2ff;
    margin: 0;
}

.rt-highlight-txt {
    color:inherit;
    padding: 0 5px;
}
.banner-gradient-text .rt-highlight-txt {
    color:inherit;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.head-txt {
    position: relative;
    z-index: 3;
}

.rt-underline-txt {
    position: absolute;
    left: 0;
    right: 0;
    top: 22px;
    z-index: -1;
}
.underline-animation-text-second .rt-underline-txt {
    top: 15px;
}
.rt-eclipse-text .rt-underline-txt svg {
    fill: none;
}
.rt-eclipse-text .rt-underline-txt {
    top: 0px;
    height: auto;
}

.rt-eclipse-text .head-txt {
    position: relative;
    display: inline-flex;
}

@keyframes my-animation {
    0% {
        opacity: 0;
        left: 0;
        transform: translateX(0);
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0)
    }

    100% {
        opacity: 1;
        left: 0;
        transform: translateX(0);
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0)
    }
}


.highlight-after-text {
    display: inline;
    margin-left: 0;
}

@media only screen and (max-width: 776px) {

    .head-txt {
        position: relative;
        /* width: 100%;
        display: flex; */
        padding: 0;
    }

    .rt-highlight-txt {
        padding: 0;
    }
    .banner-gradient-text .rt-highlight-txt {
        color:inherit;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: unset !important;
    }

}

/* -------------------------------- 

rt-hovertext TWO

-------------------------------- */

.ml1 {
    position: relative;
}

.rt-heading-div {
    position: relative;
    display: inline-block;
    width: auto;
    color: #2893f5;
}

.before-text,
.first-text,
    {
    display: inline-block;
    color: #000;
}

.after-text {
    display: inline;
}

.ml1 .rt-heading-div {
    background: none !important;
}

.letters {
    z-index: 9999;
    position: relative;
}

h1.letters {
    z-index: 9999;
    position: relative;
    text-transform: capitalize;
}

.rt_gradient .letters {
    display: inline-block;
    z-index: 9999;
    position: relative;
    background: linear-gradient(to right, #d73365 0%, #fea063 100%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.ml1 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.1em;
    padding-right: 0.05em;
    padding-bottom: 0.15em;
}

.ml1 .line {
    opacity: 0;
    position: absolute;
    left: 0;
    height: 10px;
    width: 100%;
    /*    background-color: #000;*/
    transform-origin: 0 0;
}

.ml1 .line1 {
    top: 0;
}

.ml1 .line2 {
    bottom: 15px;
}



/* -------------------------------- 

rt-hovertext THREE

-------------------------------- */



.rt-text-appear {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

/* ================ TEXT APPEAR STYLE 1 STARTS ================ */
.rt-textappear-one {
    position: relative;
    text-transform: none;
}

.rt-textappear-one .text-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.rt-textappear-one .letter {
    transform-origin: 50% 100%;
    display: inline-block;

    text-transform: none;
}

/* ================ TEXT APPEAR STYLE 1 ENDS ================ */


/* ================ TEXT APPEAR STYLE 2 STARTS ================ */
.rt-textappear-two {
    position: relative;
    color: #30353B;
    text-transform: none;
    margin: 0;
}

.rt-textappear-two .text-wrapper {
    position: relative;
    display: inline-block;
    padding-bottom: 0;
    overflow: hidden;
}

.rt-textappear-two .letter {
    display: inline-block;

    transform-origin: 0 0;
    text-transform: none;
}

/* ================ TEXT APPEAR STYLE 2 ENDS ================ */


/* ================ TEXT APPEAR STYLE 3 STARTS ================ */
.rt-textappear-three {
    padding-bottom: 0;
    color: #30353b;
    text-transform: none;
}

.rt-textappear-three .letter {
    display: inline-block;
    line-height: normal;
}

/* ================ TEXT APPEAR STYLE 3 ENDS ================ */

/* ================ TEXT APPEAR STYLE 4 STARTS ================ */
.rt-textappear-four {
    padding: 0;
    margin: 0;
    color: #30353b;
}

/* ================ TEXT APPEAR STYLE 4 ENDS ================ */


/* ================ TEXT APPEAR STYLE 5 STARTS ================ */
.rt-textappear-five {
    margin: 0;
    padding: 0;
}

.rt-textappear-five .text-wrapper {
    position: relative;
    display: inline-block;
    padding-bottom: 0;
}

.rt-textappear-five .line {
    opacity: 0;
    position: absolute;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #000;
    transform-origin: 100% 100%;
    bottom: 0;
    display: none;
}

.rt-textappear-five .letter {
    display: inline-block;
    text-transform: none;
}

/* ================ TEXT APPEAR STYLE 5 ENDS ================ */

/* ================ TEXT APPEAR STYLE 10 Starts ================ */

.heading-style-ten {
    font-stretch: normal;
    font-style: normal;
    letter-spacing: 0;
}

.heading-style-ten b {
    color: #007BEF;
}

h2.rt-splitting .rt-words {
    opacity: 1;
    animation: slide-in 1.5s cubic-bezier(.5, 0, .5, 1) both;
    animation-delay: calc(40ms * var(--word-index));
}

/* animations */

@keyframes slide-in {
    from {
        transform: translateY(1em);
        opacity: 0;
    }
}

/*==================================== splitting ====================================*/


.rt-splitting .rt-words {
    opacity: 0;
}

.rt-splitting[data-scroll="in"] .rt-words {
    opacity: 1;
    animation: slide-in 1s cubic-bezier(0.5, 0, 0.5, 1) both;
    animation-delay: calc(40ms * var(--word-index));
}

.rt-splitting .line {
    animation: slide-in 1s cubic-bezier(0.5, 0, 0.5, 1) both;
    animation-delay: calc(40ms * var(--line-index));
}


.rt-splitting .rt-words {
    display: inline-block
}


.rt-splitting {
    --word-center: calc((var(--word-total) - 1) / 2);
    --char-center: calc((var(--char-total) - 1) / 2);
    --line-center: calc((var(--line-total) - 1) / 2)
}

.rt-splitting .rt-words {
    --word-percent: calc(var(--word-index) / var(--word-total));
    --line-percent: calc(var(--line-index) / var(--line-total))
}




/* ================ TEXT APPEAR STYLE 8 STARTS ================ */

h1.splitting {}

h1.splitting .char {
    transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear;
    transition-delay: calc(20ms * var(--char-index));
}

h1.splitting[data-scroll=out] .char {
    opacity: 0.1;
    transform: translateY(0.25em);
}

h2.splitting .char {
    transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear;
    transition-delay: calc(20ms * var(--char-index));
}

h2.splitting[data-scroll=out] .char {
    opacity: 0.1;
    transform: translateY(0.25em);
}

h3.splitting .char {
    transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear;
    transition-delay: calc(20ms * var(--char-index));
}

h3.splitting[data-scroll=out] .char {
    opacity: 0.1;
    transform: translateY(0.25em);
}

h4.splitting .char {
    transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear;
    transition-delay: calc(20ms * var(--char-index));
}

h4.splitting[data-scroll=out] .char {
    opacity: 0.1;
    transform: translateY(0.25em);
}

h5.splitting .char {
    transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear;
    transition-delay: calc(20ms * var(--char-index));
}

h5.splitting[data-scroll=out] .char {
    opacity: 0.1;
    transform: translateY(0.25em);
}

h6.splitting .char {
    transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear;
    transition-delay: calc(20ms * var(--char-index));
}

h6.splitting[data-scroll=out] .char {
    opacity: 0.1;
    transform: translateY(0.25em);
}

/* Recommended styles for Splitting */
.splitting .word,
.splitting .char {
    display: inline-block;
}

/* Psuedo-element chars */
.splitting .char {
    position: relative;
}

/**
 * Populate the psuedo elements with the character to allow for expanded effects
 * Set to `display: none` by default; just add `display: block` when you want
 * to use the psuedo elements
 */
.splitting .char::before,
.splitting .char::after {
    content: attr(data-char);
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    transition: inherit;
    user-select: none;
}

/* Expanded CSS Variables */

.splitting {
    /* The center word index */
    --word-center: calc((var(--word-total) - 1) / 2);

    /* The center character index */
    --char-center: calc((var(--char-total) - 1) / 2);

    /* The center character index */
    --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
    /* Pecent (0-1) of the word's position */
    --word-percent: calc(var(--word-index) / var(--word-total));

    /* Pecent (0-1) of the line's position */
    --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
    /* Percent (0-1) of the char's position */
    --char-percent: calc(var(--char-index) / var(--char-total));

    /* Offset from center, positive & negative */
    --char-offset: calc(var(--char-index) - var(--char-center));

    /* Absolute distance from center, only positive */
    --distance: calc((var(--char-offset) * var(--char-offset)) / var(--char-center));

    /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
    --distance-sine: calc(var(--char-offset) / var(--char-center));

    /* Distance from center where 1 is far left/far right, 0 is center */
    --distance-percent: calc((var(--distance) / var(--char-center)));
}