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

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

.mt-section {
    &-subtitle {
        display: inline-block;
        border-radius: 100px;
        background: linear-gradient(90deg, #4C9100 0%, #8BB351 100%);
        color: var(--mt-common-white);
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        position: relative;
        padding: 10px 16px;

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

        & span {
            margin-right: 7px;
        }

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

    }

    &-title {
        color: var(--mt-common-black);
        font-size: 50px;
        font-weight: 800;
        position: relative;
        z-index: 2;

        & span {
            color: #4C9100;
            font-style: italic;
        }

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

        &.small {
            font-size: 36px;
        }

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

    }

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

            &.mtwhite {
                color: rgba(255, 255, 255, 0.8);
            }
        }
    }
}