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

.section-title {
    &.text-left {
        text-align: left;
    }
    &.white-color {
        color: $white;
        .title {
            color: $white;
        }
    }
    &.center-text {
        text-align: center;
        max-width: 650px;
        margin: auto;
    }
    &.section-border-bottom {
        border-bottom: 1px solid rgba($steam-color, .4);
        padding-bottom: 30px;
        @include responsive(allPhone) {
            padding-bottom: 20px;
        }
    }
    &-shapes {
        position: relative;
        height: 20px;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            background-image: url(../img/section-shapes1.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            height: 18px;
            width: auto;
        }
    }
    &-line {
        position: relative;
        height: 20px;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            background-image: url(../img/section-shapes2.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            height: 18px;
            width: auto;
        }
    }
    .title {
        font-size: 42px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--heading-color);
        font-family: var(--heading-font);
        position: relative;
        margin: -6px 0 0;
        @include responsive(xxl) {
            font-size: 45px;
        }
        @include responsive(xl) {
            font-size: 42px;
        }
        @include responsive(lg) {
            font-size: 36px;
        }
        @include responsive(allPhone) {
            font-size: 32px;
        }
        @include responsive(xs) {
            font-size: 28px;
            line-height: 32px;
        }
        @include responsive(vxxs) {
            font-size: 25px;
            line-height: 28px;
        }
    }
    .section-para {
        font-size: 18px;
        line-height: 28px;
        margin-top: 20px;
    }
    .btn-wrapper {
        .view-all {
            @include responsive(xxs) {
                font-size: 15px;
            }
        }
    }
}

.section-title-three {
    .title {
        font-size: 36px;
        line-height: 42px;
        font-weight: 600;
        position: relative;
        z-index: 1;
        @include responsive(xl) {
            font-size: 32px;
            line-height: 36px;
        }
        @include responsive(lg) {
            font-size: 32px;
            line-height: 36px;
        }
        @include responsive(allPhone) {
            font-size: 32px;
            line-height: 36px;
        }
        @include responsive(sm) {
            font-size: 28px;
        }
        @include responsive(xs) {
            font-size: 26px;
        }
        @include responsive(vxxs) {
            font-size: 24px;
            line-height: 32px;
        }
        &:hover {
            &::before {
                background-color: var(--main-color-one);
            }
        }
        &::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -25px;
            height: 50px;
            width: 50px;
            background-color: var(--secondary-color);
            border-radius: 50%;
            z-index: -1;
            @include transition(.3s);
            @include responsive(lg) {
                left: -10px;
                top: -10px;
            }
            @include responsive(allPhone) {
                left: 5px;
                top: 0;
            }
        }
        &::after {
            content: "";
            position: absolute;
            left: -45px;
            top: -25px;
            height: 30px;
            width: 30px;
            background-image: url(../img/section-shapes4.svg);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            @include responsive(lg) {
                left: -25px;
                top: -25px;
            }
            @include responsive(allPhone) {
                left: -10px;
                top: -10px;
            }
        }
    }
    .section-para {
        margin-top: 20px;
    }
}

.section-title-btn {
    .view-all {
        padding: 10px 30px;
        font-size: 16px;
        font-weight: 400;
        color: var(--light-color);
        border: 1px solid var(--light-color);
        @include transition(300ms);
        &:hover {
            background-color: var(--light-color);
            color: $white;
        }
    }
}