.ova-pricing {
	@include transaction( all, .3s, ease);
	position: relative;
	overflow: hidden;
    padding: 40px 35px;
    background-color: #fff;
    box-shadow: 0px 1px 45px rgba(0, 0, 0, 0.07);
    border-radius: 40px;
    text-align: center;

    @media (max-width: 767px) {
		padding: 35px 20px;
	}

	&:hover {
		@include transaction( all, .3s, ease);
	}
    
    &.ova-pricing-active {
    	background-color: var(--heading);
    	.pricing-btn {
    		color: #fff;
    		border: 1px solid transparent;
    		background-color: var(--primary);
    		&:hover {
    			border: 1px solid #E9E9E9;
    			background-color: transparent;
    		}
    	}

        .icon {
        	top: -1px;
        	left: -1px;
	    }

    	.pricing-title, .pricing-description,  .price {
	    	color: #fff;
	    }

	    .shape {
	    	background-color: #7b7b7b;
	    }

	    .pricing-service {
	    	.pricing-service-list {
	    		li {
	    			.text_service {
			            color: #fff;
	    			}
	    		}
	    	}
	    }
    }

    .icon {
    	@include transaction( all, .5s, ease );
        display: inline-flex;
        align-items: center;
        justify-content: center;
	    position: absolute;
	    top: -30%;
	    left: -30%;
	    background-color: var(--primary);
	    width: 100px;
	    height: 100px;
	    clip-path: polygon(100% 0, 0% 0%, 0 100%);
	    border-radius: 40px 0 0 0;
    	i {
    		@include transaction( all, .5s, ease);
			display: inline-flex;
			font-size: 25px;
			color: #fff;
			transform: translate(-18px, -18px);
    	}
    }

    .pricing-title {
    	@include transaction( all, .5s, ease);
    	margin: 0 0 25px 0;
    	font-size: 24px;
    	line-height: 1.5;
    }

    .pricing-description {
    	@include transaction( all, .5s, ease);
    	margin: 0;
    	line-height: 1.5;
    	color: var(--text);
    	padding-bottom: 25px;
    }

    .shape {
	    width: 150%;
	    height: 1px;
	    background-color: #e9e9e9;
	    margin: 0 -35px;
	    @media (max-width: 767px) {
			margin: 0 -20px;
		}
	}

    .price {
    	@include transaction( all, .5s, ease);
    	color: var(--heading);
    	font-weight: 700;
    	padding-bottom: 15px;
    	.ova-price {
    		display: inline-block;
    	    font-size: 48px;
    	}
    	.period {
    	    font-size: 18px;
    	}
    }

    .pricing-service {
    	text-align: left;
    	
    	.pricing-service-list {
    		margin: 30px 0;
    		padding: 0;
    		list-style-type: none;
    		li {
    			display: flex;
    			justify-content: space-between;
    			column-gap: 10px;
    			align-items: center;
    			padding-bottom: 18px;
    			i {
    				@include transaction( all, .5s, ease);
    				font-size: 15px;
    				display: inline-flex;
    				color: #3BC13B;
    				margin-right: 13px;
    			}
    			.text_service {
    				@include transaction( all, .5s, ease);
		    	    font-size: 16px;
		    	    line-height: 1.3;
		    	    color: var(--heading);
    			}
    			&.text-service-disable {
    				.text_service {
    					color: #7B7B7B;
    				}
    				i {
    					color: #FE4037;
    				}
    			}
    		}
    	}
    }

    .pricing-btn {
    	@include transaction( all, .5s, ease );
    	padding: 18px 40px;
    	font-size: 16px;
    	font-weight: 600;
    	line-height: 1;
	    display: inline-flex;
	    justify-content: center;
	    align-items: center;
	    color: var(--heading);
	    background-color: transparent;
	    border-radius: 100px;
	    border: 1px solid #E9E9E9;
	    &:hover {
            @include transaction( all, .5s, ease );
    		color: #fff;
    		border: 1px solid transparent;
    		background-color: var(--primary);
		}
    }
}

.rtl {
	.ova-pricing {
		.pricing-service {
			text-align: right;
		}
	} 
}