@use '../utils' as *;

/*=============================
    	27. Features
===============================*/
.features {
    &__area {
        margin-top: -110px;
        &-three {
            background: var(--tg-color-gray-1);
        }
    }
    &__item {
        border: 1px solid #E0E1E9;
        background: var(--tg-color-white-default);
        padding: 40px 40px;
        @include transition(.3s);
        @media #{$lg} {
            padding: 30px 25px;
        }
        @media #{$md} {
            padding: 35px 35px;
        }
        &-top {
            @include flexbox();
            align-items: center;
            gap: 18px;
            margin-bottom: 20px;
            & .title {
                margin-bottom: 0;
                font-size: 20px;
                font-weight: 600;
                text-transform: capitalize;
            }
        }
        &:hover {
            transform: translateY(-5px);
            & .features__icon {
                & i {
                    transform: rotateY(180deg);
                }
            }
        }
        &-two {
            background: var(--tg-color-white-default);
            border: 1px solid #CFD5ED;
            @include border-radius(10px);
            padding: 30px 28px 25px;
            height: 100%;
            @include transition(.4s);
            &:hover {
                transform: translateY(-5px);
                & .features__icon-two {
                    transform: rotateY(180deg);
                }
            }
        }
    }
    &__icon {
        width: 70px;
        height: 70px;
        @include flexbox();
        align-items: center;
        justify-content: center;
        font-size: 40px;
        color: var(--tg-theme-primary);
        background: var(--tg-color-gray-1);
        flex: 0 0 auto;
        & i {
            @include transition(.5s);
        }
        &-two {
            width: 52px;
            height: 52px;
            @include flexbox();
            align-items: center;
            background: linear-gradient(180deg, #f1efff 0%, rgba(244, 242, 255, 0) 100%);
            justify-content: center;
            @include border-radius(50%);
            font-size: 30px;
            color: var(--tg-theme-primary);
            margin-bottom: 20px;
            @include transition(.5s);
        }
    }
    &__img {
        @media #{$md} {
            margin-bottom: 50px;
        }
        & img {
            @include border-radius(15px);
            width: 100%;
        }
        &-two {
            & img {
                @include border-radius(15px);
            }
        }
    }
    &__content {
        & p {
            margin-bottom: 0;
        }
        &-two {
            margin-right: 35px;
            @media #{$lg} {
                margin-right: 0;
            }
            & p {
                margin-bottom: 25px;
            }
            & .list-wrap {
                margin-bottom: 50px;
                @media #{$xs} {
                    margin-bottom: 30px;
                }
            }
        }
        &-three {
            margin-left: 60px;
            @media #{$lg} {
                margin-left: 0;
            }
            & p {
                margin-bottom: 30px;
            }
            & .services__details-client-wrap {
                justify-content: flex-start;
                margin-bottom: 40px;
            }
            & .client__box-two {
                padding: 20px 35px;
            }
            & .list-wrap {
                margin-bottom: 0;
            }
        }
        &-four {
            & .title {
                margin-bottom: 12px;
                font-weight: 600;
                font-size: 20px;
            }
            & p {
                margin-bottom: 0;
            }
        }
        &-five {
            margin-left: 105px;
            @media #{$lg} {
                margin-left: 0;
            }
            @media #{$md} {
                margin-bottom: 50px;
            }
        }
    }
    &__divider {
        width: 100%;
        height: 1px;
        background: #D9D9D9;
        display: block;
        margin: 80px 0;
        @media #{$xs} {
            margin: 60px 0;
        }
    }
}