@use '../utils' as *;

/*=============================
    16. Features
===============================*/
.features {
    &__area {
        position: relative;
        &-two {
            background: var(--tg-color-gray-11);
            position: relative;
            z-index: 1;
        }
    }
    &__item {
        @include flexbox();
        align-items: flex-start;
        gap: 20px;
        padding: 35px 30px 40px 42px;
        border: 1px solid #e4e4e4;
        @include border-radius(8px);
        position: relative;
        margin-bottom: 30px;
        background: var(--tg-color-white-default);
        @include transition(.3s);
        @media #{$lg} {
            padding: 35px 20px 30px 20px;
            gap: 15px;
        }
        &::before {
            content: "";
            position: absolute;
            left: 36px;
            top: 0;
            width: 60px;
            height: 6px;
            background: var(--tg-theme-primary);
        }
        &:hover {
            box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.1);
            border-color: var(--tg-theme-primary);
            & .features__icon {
                & i {
                    transform: rotateY(180deg);
                }
            }
        }
        &-wrap {
            @include flexbox();
            align-items: center;
            gap: 30px 80px;
            margin-left: 80px;
            @media #{$lg} {
                gap: 30px 30px;
                margin-left: 30px;
            }
            @media #{$md} {
                gap: 30px 40px;
                margin-left: 0;
                margin: 40px 0;
            }
            @media #{$xs} {
                gap: 30px 30px;
                flex-direction: column;
            }
            &-two {
                margin-top: -50px;
                position: relative;
                z-index: 1;
            }
        }
    }
    &__icon {
        font-size: 50px;
        color: var(--tg-theme-primary);
        line-height: 0;
        @media #{$lg} {
            font-size: 45px;
        }
        & i {
            @include transition(.4s);
            display: block;
        }
        &-two {
            font-size: 54px;
            line-height: 0;
            color: var(--tg-theme-primary);
            margin-bottom: 20px;
        }
    }
    &__content {
        & .title {
            margin-bottom: 15px;
            font-size: 22px;
            text-transform: capitalize;
        }
        & p {
            margin-bottom: 0;
            font-weight: 500;
            line-height: 1.6;
        }
        & .number {
            margin-bottom: 0;
            position: absolute;
            right: 30px;
            top: 25px;
            font-size: 36px;
            color: #ededed;
            line-height: 1;
            z-index: -1;
        }
        &-two {
            & .title {
                margin-bottom: 20px;
                padding-bottom: 15px;
                position: relative;
                font-size: 24px;
                text-transform: capitalize;
                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 1px;
                    background: var(--tg-border-6);
                }
                &::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 40px;
                    height: 4px;
                    background: var(--tg-theme-primary);
                }
            }
            & p {
                margin-bottom: 0;
                line-height: 1.5;
            }
        }
        &-wrap {
            background: var(--tg-theme-primary);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 45px 30px 55px 0;
            position: relative;
            z-index: 1;
            @media #{$lg} {
                padding: 35px 25px 40px 0;
            }
            &::before {
                content: "";
                position: absolute;
                right: 0;
                top: 0;
                width: 200%;
                height: 100%;
                background: var(--tg-theme-primary);
                z-index: -1;
                @media #{$md} {
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
            & .shape {
                position: absolute;
                z-index: -1;
                left: -88%;
                bottom: 0;
                max-width: 335px;
                @media #{$xxl} {
                    left: -68%;
                }
                @media #{$xl} {
                    max-width: 300px;
                    left: -50%;
                }
                @media #{$lg} {
                    max-width: 220px;
                    left: -36%;
                }
                @media #{$md} {
                    left: -25%;
                }
            }
        }
    }
    &__shape {
        & img {
            position: absolute;
            right: 0;
            top: -115px;
            z-index: -1;
            max-width: 244px;
            @media #{$xl} {
                top: auto;
                bottom: 20px;
                width: 180px;
            }
            @media #{$xs} {
                bottom: 10px;
                width: 100px;
            }
        }
    }
}