/*--------------------------
        pricing
--------------------------*/
.pricing-item {
    position: relative;
    background-color: $color-white;
    padding: 50px 40px 60px;
    @include prefix(transition, all .3s ease, webkit moz ms o);
    box-shadow: 0px 5px 83px 0px rgba(40, 40, 40, 0.12);
    border-radius: 4px;
    margin-bottom: 30px;


    &:hover {
        @include prefix(transform, translateY(-4px), webkit moz ms o);
    }

    .pricing__title {
        font-size: 17px;
        margin-bottom: 17px;
    }

    .pricing__desc {
        margin-bottom: 45px;
    }

    .pricing__price {
        font-family: $font-heading;
        font-size: 40px;
        font-weight: 500;
        line-height: 1;
        color: $color-heading;
    }

    .pricing__list {
        padding-top: 40px;
        padding-bottom: 30px;
        margin-bottom: 55px;
        border-bottom: 2px solid #eaeaea;

        li {
            position: relative;
            padding-left: 27px;
            font-size: 14px;
            margin-bottom: 11px;
            text-transform: capitalize;

            &:after {
                content: "\f00c";
                font-family: FontAwesome;
                position: absolute;
                top: 0;
                left: 0;
                color: $color-theme;
            }
        }
    }

    .btn {
        height: 55px;
        line-height: 55px;
        border-radius: 1px;

        span {
            margin-right: 10px;
        }
    }
}

.pricing-item-theme {
    background-color: $color-theme;
}

.pricing-item-dark {
    background-color: $color-dark;
}

.pricing-item-gray {
    background-color: $color-gray;
}

.pricing-item-theme,
.pricing-item-dark {

    .pricing__title,
    .pricing__desc,
    .pricing__price,
    .pricing__list li,
    .pricing__list li::after {
        color: $color-white;
    }

    .btn:not(.btn__link) {
        &:hover {
            color: $color-theme;
        }

        &:before {
            background-color: $color-white;
        }
    }
}

/* Medium Size Screens */
@include md-screens {
    .pricing-item {
        padding: 30px;

        .pricing__list {
            padding-top: 20px;
            padding-bottom: 20px;
            margin-bottom: 25px;
        }

        .pricing__title {
            margin-bottom: 10px;
        }

        .pricing__price {
            font-size: 30px;
            margin-bottom: 0;
        }

        .pricing__title,
        .pricing__desc {
            margin-bottom: 10px;
        }
    }
}

/* Mobile Phones and tablets */
@include xs-sm-screens {
    .pricing-item {
        padding: 30px 20px;

        .pricing__desc {
            margin-bottom: 20px;
        }

        .pricing__list {
            padding-top: 15px;
            padding-bottom: 15px;
            margin-bottom: 15px;
        }

        .pricing__price {
            font-size: 30px;
            margin-bottom: 0;
        }
    }
}