.fancify-elementor-titlebuilder {

    // Defines style type 1 for default of widget
    &.fancify-title-builder-style-type-1 {
        display: initial;

        .fancify-elementor-titlebuilder-title-container {
            text-align: center;

            .fancify-elementor-titlebuilder-shape {
                @include gradient(84deg, $default-green, $default-light-green);
                border-radius: 3px;
                height: 15px;
                top: 12px;
                margin-left: -6px;
                left: 0;
                z-index: -1;
                transition: 700ms ease-out $tr-very-slow;
                display: block;
                width: calc(100% + 12px);

                @include for-desktop {
                    height: 13px;
                }

                @include for-phone {
                    height: 11px;
                    top: 11px;
                }
            }

            .fancify-elementor-titlebuilder-title {
                @include font-family-quicksand;
                @include font-weight(semi-bold);
                @include font-size(20);
                color: $black-color-2;
                position: relative;
                margin-left: 7px;
                z-index: 1;
                display: inline-flex;
            }
        }

        .fancify-elementor-titlebuilder-subtitle {
            @include font-family-quicksand;
            @include font-size(48);
            @include font-weight(bold);
            color: $black-color-2;
            position: relative;
            margin-top: 29px;
            text-align: center;
            line-height: 3.5rem;

            @include for-tablet {
                @include font-size(42);
                margin-top: 18px;
            }

            @include for-small-phone {
                @include font-size(32);
                line-height: 2.5rem;
            }

            &::after {
                //content: " ";
                position: relative;
                width: 90px;
                height: 4px;
                border-radius: 10px;
                background: #DEDEDE;
                box-shadow: 0 3px 10px rgba($black-color, 0.1);
                left: 50%;
                transform: translateX(-50%);
                margin-top: 31px;
                display: block;

                @include for-desktop {
                    margin-top: 27px;
                }

                @include for-tablet {
                    margin-top: 27px;
                }

                @include for-phone {
                    margin-top: 24px;
                }
            }
        }

        &.fancify-style-type-2 {
            .fancify-elementor-titlebuilder-title {
                color: $white-color;
                z-index: 1;
            }

            .fancify-elementor-titlebuilder-subtitle {
                color: $white-color;
            }
        }
    }

    // Defines style azure for default of widget
    &.fancify-title-builder-style-azure {
        display: initial;

        .fancify-elementor-titlebuilder-title-container {
            text-align: center;

            .fancify-elementor-titlebuilder-shape {
                @include gradient(84deg, $default-green, $default-light-green);
                border-radius: 3px;
                height: 15px;
                width: 0px;
                top: 12px;
                margin-left: -6px;
                left: 0;
                z-index: -1;
                transition: 700ms ease-out $tr-very-slow;
                display: block;

                @include for-desktop {
                    top: 9px;
                    height: 13px;
                }

                @include for-phone {
                    height: 11px;
                    top: 8px;
                }
            }

            .fancify-elementor-titlebuilder-title {
                @include font-family-lato;
                @include font-weight(bold);
                @include font-size(15);
                color: #323FFF;
                position: relative;
                //margin-left: 7px;
                z-index: 1;
                display: inline-flex;
                letter-spacing: 4.35px;
                text-transform: uppercase;
            }
        }

        .fancify-elementor-titlebuilder-subtitle {
            @include font-family-poppins;
            @include font-size(37);
            @include font-weight(semi-bold);
            color: #191919;
            position: relative;
            margin-top: 20px;
            text-align: center;

            @include for-desktop {
                margin-top: 18px;
            }

            @include for-tablet {
                @include font-size(42);
                margin-top: 18px;
            }

            &::after {
                //content: " ";
                position: relative;
                width: 60px;
                height: 2px;
                border-radius: 10px;
                background: #323FFF;
                left: 0;
                margin-top: 22px;
                display: block;

                @include for-desktop {
                    margin-top: 27px;
                }

                @include for-tablet {
                    margin-top: 27px;
                }

                @include for-phone {
                    margin-top: 24px;
                }
            }
        }
    }
}

.elementor-widget-title-builder.animated {
    @keyframes fancifyTitleShape {
        from {
            width: 0;
        }

        to {
            max-width: calc(100% + 12px);
        }
    }

    .fancify-elementor-titlebuilder .fancify-elementor-titlebuilder-title-container .fancify-elementor-titlebuilder-shape {
        animation: fancifyTitleShape;
        animation-delay: 600ms;
        animation-duration: 2s;
        animation-fill-mode: both;
    }

}