/home/moonrcjl/template.moontelict.com/maxfy/assets/scss/components/_section-title.scss
@use '../utils' as *;

/*----------------------------------------*/
/*  2.15 Section Title
/*----------------------------------------*/

.mt-section {
    &-subtitle {
        color: #FFF;
        font-size: 16px;
        font-weight: 700;
        line-height: 26px;
        text-transform: capitalize;
        display: inline-block;
        position: relative;
        z-index: 2;

        &-border {
            border-radius: 50px;
            border: 1px solid var(--212121, #212121);
            padding: 15px 35px;
        }

        & i {
            height: 10px;
            width: 10px;
            border-radius: 30px;
            background: var(--mt-theme-color);
            display: inline-block;
            transform: translateY(0px);
            margin-right: 10px;

            &.sub-dot-color {
                background: var(--Linear, linear-gradient(266deg, #CCFF02 7.19%, #68FFB3 98.22%));
            }

        }

        @media #{$md,$xs} {
            font-size: 14px;
        }

        & span {
            display: inline-block;
            padding-left: 0px;
        }

        & strong {
            background: var(--mt-common-black);
            color: #fff;
            padding: 3px 12px;
            border-radius: 30px;
            font-weight: 500;
            margin-right: 6px;
        }

        &.subtitle-color {
            border: none;
            padding: 0;
            // margin-bottom: 0;
        }

        &.text-color-2 {
            color: #989899;
        }

        &-black {
            color: var(--mt-common-black);
        }

        &-white {
            color: var(--mt-common-white);
        }

        & cite {
            -webkit-text-stroke: 1px rgb(61, 61, 61);
            -webkit-text-fill-color: transparent;
            font-size: 156px;
            margin-right: -30px;
        }
    }

    &-title {
        color: var(--mt-common-white);
        font-size: 52px;
        font-weight: 700;
        text-transform: capitalize;
        line-height: 1.1;
        z-index: 2;
        position: relative;

        & span {
            background: var(--Linear, linear-gradient(266deg, #CCFF02 7.19%, #68FFB3 98.22%));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        @media #{$xxl,$xl} {
            font-size: 42px;
        }

        @media #{$lg} {
            font-size: 40px;

            & br {
                display: none;
            }
        }

        @media #{$md} {
            font-size: 38px;

            & br {
                display: none;
            }
        }

        @media #{$xs} {
            font-size: 28px;

            & br {
                display: none;
            }
        }

        &-2 {
            font-size: 48px;

            @media #{$xxl} {
                font-size: 40px;
            }

            @media #{$lg} {
                font-size: 38px;
            }

            @media #{$md} {
                font-size: 40px;

                & br {
                    display: none;
                }
            }

            @media #{$xs} {
                font-size: 28px;

                & br {
                    display: none;
                }
            }
        }

        &-black {
            color: var(--mt-common-black);
        }
    }
}