/home/moonrcjl/template.moontelict.com/testorest/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;



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

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

        &.subtitle-color {
            border-radius: 50px;
            border: 1px solid #F8F8F8;
            background-color: #F8F8F8;
            padding: 12px 25px;
            color: #000;
        }

        &.subtitle-color2 {
            border-radius: 50px;
            background-color: rgb(248 248 248 / 10%);
            padding: 12px 25px;
            color: #ffffff;
        }

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

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

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

        @media #{$xl, $lg, $md} {
            & br {
                display: none;
            }
        }

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

            & br {
                display: none;
            }
        }

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

            & br {
                display: none;
            }
        }

        &.small {
            font-size: 42px;

            @media #{$xs} {
                font-size: 32px;
            }
        }
        &.small2 {
            font-size: 32px;

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

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

    &-content {
        & p {
            & b {
                color: var(--mt-common-white);
                font-size: 16px;
            }

            @media #{$xs} {
                & br {
                    display: none;
                }
            }

        }

    }
}