@use '../utils' as *;

/*=============================
	00. Section Title
===============================*/
.section__title {
    & .sub-title {
        display: inline-block;
        line-height: 1.62;
        background: var(--tg-common-color-gray-2);
        @include border-radius(30px);
        padding: 3px 16px;
        font-weight: var(--tg-fw-medium);
        color: var(--tg-theme-primary);
        margin: 0 0 14px;
    }
    & .title {
        font-size: 36px;
        line-height: 1.33;
        margin: 0 0;
        letter-spacing: -0.75px;
        text-transform: capitalize;
        @media #{$xs} {
            font-size: 29px;
        }
        @media #{$sm} {
            font-size: 36px;
        }
        & span:not(.svg-icon) {
            color: var(--tg-theme-primary);
            position: relative;
            color: var(--tg-common-color-white);
            padding: 0 13px 0 20px;
            font-weight: var(--tg-fw-bold);
            display: inline-block;
            z-index: 1;
            & > svg {
                position: absolute;
                left: 0;
                top: -5px;
                width: 100%;
                height: 59px;
                z-index: -1;
                color: var(--tg-theme-secondary);
                @media #{$xs} {
                    height: 45px;
                    top: -2px;
                }
                @media #{$sm} {
                    top: 0;
                }
            }
        }
        & .svg-icon {
            position: absolute;
            right: -50px;
            top: -50px;
            width: 61px;
            height: 68px;
            & svg {
                display: block;
                width: 100%;
                height: 100%;
            }
            & path {
                stroke: var(--tg-heading-color);
            }
        }
    }
    & p {
        margin-bottom: 0;
        margin-top: 15px;
        & br {
            @media #{$xs} {
                display: none;
            }
        }
    }
    &.white-title {
        & .sub-title {
            background: var(--tg-theme-primary);
            color: var(--tg-common-color-white);
        }
        & .title {
            color: var(--tg-common-color-white);
            & span:not(.svg-icon) {
                color: var(--tg-common-color-white);
            }
        }
        & p {
            color: #ACAACC;
        }
    }
    & .desc {
        margin: 10px 0 0;
    }
}