@use '../utils' as *;

/*----------------------------------------*/
/*  15. FEATURE CSS
/*----------------------------------------*/


.tpfeature {
    &__thumb {
        text-align: right;
        margin-right: -16px;
        @media #{$md,$xs,$sm} {
            text-align: center;
            margin-right: 0;
        }
        & img {
            max-width: 100%;
            &:hover {
                transform: translateY(-8px)
            }
        }
    }
    &__content {
        & p {
            font-size: 16px;
            line-height: 1.4;
            & br {
                @media #{$xs} {
                    display: none;
                }
            }
        }
    }
    &__title {
        font-size: 40px;
        line-height: 1.1;
        @media #{$lg} {
            font-size: 33px;
        }
        @media #{$xs} {
            font-size: 28px;
            line-height: 1.4;
        }
        & br {
            @media #{$lg,$xs} {
                display: none;
            }
        }
        & span {
            color: var(--tp-heading-secondary);
        }
    }
    &__product {
        &-title {
            font-family: 'Jost', sans-serif;
            color: var(--tp-heading-primary);
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            line-height: 20px;
            padding: 0px 0px 5px 0px;
            border-style: dashed;
            border-width: 0px 0px 1px 0px;
            border-color: #C2C2D3;
        }
        &-info {
            font-size: 16px;
            color: var(--tp-text-body);
            @media #{$xl} {
                font-size: 15px;
            }
        }
        &-item {
            @media #{$xs,$sm} {
                margin-bottom: 20px;
            }
        }
    }
    &__shape {
        &-one {
            position: absolute;
            top: 30px;
            left: 0;
            &:hover {
                @include tp-animation-key;
            }
        }
        &-two {
            position: absolute;
            bottom: 320px;
            right: -53px;
            @media #{$md} {
                right: 0px;
            }
            &:hover {
                @include tp-animation-key;
            }
        }
        &-three {
            position: absolute;
            top: 0px;
            right: -95px;
            @media #{$xl,$md} {
                right: 0px;
            }
            @media #{$lg} {
                top: 100px;
                right: 420px;
            }
            &:hover {
                @include tp-animation-key;
            }
        }
    }
    &__box {
        @media #{$xs,$sm} {
            margin-bottom: 30px;
        }
    }
    &__price-red {
        font-size: 16px;
        color: var(--tp-text-body);
        font-family: var(--tp-ff-jost);
        & span {
            color: var(--tp-theme-2);
            font-weight: 600;
            font-size: 20px;
        }
    }
}
.tpproduct-feature {
    margin-left: 75px;
    margin-right: 90px;
    @media #{$xl,$md,$xs,$sm} {
        margin-left: 0;
        margin-right: 0;
    }
    @media #{$lg} {
        margin-left: 0;
        margin-right: 0;
        padding-top: 0;
    }
}
.mainfeature {
    &__item{
        &:hover {
            & .mainfeature__icon{
                & img {
                    animation: animation-plus 1s infinite linear alternate;
                }
            }
        }
    }
    &__bg {
        background-repeat: repeat-x;
    }
    &__icon {
        margin-bottom: 10px;
        & img {
            height: 25px;
            width: 25px;
        }
    }
    &__content {
        & p {
            color: var(--tp-grey-10);
            font-size: 14px;
            margin-bottom: 0;
        }
    }
    &__title {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 12px;
        color: var(--tp-common-white);
        margin-bottom: 2px;
    }
    &__border {
        border-bottom: 1px solid #484492;
    }
}
.whight-feature {
    & .mainfeature__title {
        color: var(--tp-heading-primary);
    }
    & .mainfeature__content p {
        color: var(--tp-text-body);
    }
}
.feature-bg-round {
    border-radius: 20px 20px 0 0;
    padding: 50px 50px;
    & .tpfeature-border {
        border-bottom: 1px solid var(--tp-border-1);
    }
}
.feature-top {
    margin-top: -220px;
    position: relative;
    z-index: 9;
    @media #{$xl,$lg,$md,$sm,$xs} {
        margin-top: 0;
    }
}
.tpinsta {
    &__item {
        border-radius: 10px;
        position: relative;
        &:hover {
            &::before {
                opacity: 1;
                transform: scale(1);
            }
            & .tpinsta__links {
                opacity: 1;
                visibility: visible;
            }
        }
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 2;
            opacity: 0;
            width: 100%;
            height: 100%;
            transform: scale(.1);
        }
        & img {
            width: 100%;
        }
    }
    &__links {
        position: absolute;
        top: 50%;
        z-index: 3;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        & i {
            background-color: var(--tp-common-white);
            height: 80px;
            width: 80px;
            line-height: 80px;
            text-align: center;
            border-radius: 50px;
            font-size: 20px;
            @include transition(.2s);
            &:hover {
                background-color: var(--tp-heading-secondary);
                color: var(--tp-common-white);
            }
        }
    }
}