@use '../utils' as *;

/*=============================
	00. Section Title
===============================*/
.section__title {
    & .sub-title {
        font-weight: 700;
        font-size: 16px;
        text-transform: capitalize;
        color: var(--tg-theme-primary);
        position: relative;
        z-index: 1;
        line-height: 1;
        margin-bottom: 15px;
        display: inline-block;
        &::before {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -2px;
            width: 50px;
            height: 8px;
            background: #CEDCFF;
            z-index: -1;
        }
    }
    & .title {
        font-size: 40px;
        margin-bottom: 0;
        @media #{$lg} {
            font-size: 36px;
        }
        @media #{$xs} {
            font-size: 32px;
        }
        @media #{$sm} {
            font-size: 36px;
        }
        & br {
            @media #{$lg} {
                display: none;
            }
        }
    }
    & p {
        margin-bottom: 0;
        margin-top: 15px;
    }
    &.white-title {
        & .sub-title {
            color: var(--tg-color-white-default);
            &::before {
                background: #3B72FD;
            }
        }
        & .title {
            color: var(--tg-color-white-default);
        }
    }
    &-two {
        & .sub-title {
            font-weight: 600;
            font-size: 16px;
            border: 1px solid var(--tg-border-7);
            @include border-radius(50px);
            padding: 7px 17px;
            &::before {
                display: none;
            }
        }
    }
}

.section__content {
    & p {
        margin-bottom: 0;
        font-weight: 500;
        text-transform: capitalize;
    }
}

.section__title.mb-70,
.section__title.mb-60 {
    @media #{$md} {
        margin-bottom: 40px;
    }
}
.section__content.mb-50,
.section__title.mb-50 {
    @media #{$xs} {
        margin-bottom: 30px;
    }
}



