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

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

.mt-section {
    &-subtitle {
        color: var(--mt-common-black);
        font-size: 16px;
        font-weight: 700;
        text-transform: capitalize;
        display: inline-block;
        position: relative;
        z-index: 2;

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

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

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

        & cite {
            background: var(--mt-common-black);
            color: #fff;
            padding: 3px 12px;
            border-radius: 30px;
        }

        &.substyletwo {
            color: var(--mt-theme-4);
            display: block;
        }

        &.substylethree {
            border: 1px solid #206DB5;
            color: #206DB5;
            display: inline-block;
            border-radius: 30px;
            padding: 9px 20px;
            text-transform: uppercase;
            font-weight: 500;
        }

        &.substylefour {
            background-color: #206DB5;
            color: #fff;
            display: inline-block;
            border-radius: 50px;
            line-height: 30px;
            height: 30px;
            padding: 0px 20px;
            font-weight: 700;
            font-size: 16px;
        }

    }

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

        @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;
            }
        }

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

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

        &.styletwo {
            color: var(--mt-common-black-3);
            display: inline-block;

            & span {
                font-size: 45px;
                font-weight: 400;

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

            & cite {
                font-size: 12px;
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: -1;
            }
        }

        &.stylethree {
            font-size: 38px;

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

                & br {
                    display: none;
                }
            }
        }

        &.stylefour {
            & span {
                color: var(--mt-theme-6);
            }
        }

        & b {
            position: relative;

            &::before {
                content: "";
                width: 100%;
                height: 8px;
                position: absolute;
                background: #FFA319;
                bottom: 0px;
                left: 0;
                z-index: -1;
                border-radius: 0px 100px 0px 100px;
            }
        }
    }

    &-content {
        & p {
            @media #{$md,$xs} {

                & br {
                    display: none;
                }
            }
        }
    }

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

            & br {
                display: none;
            }
        }
    }
}