.pricing-section {
	background-color: $__white;
    padding: 60px 0 36px;
    @include respond-below(lg) {
        padding: 40px 0 16px;
    }
}
.pricing-inner-header {
	margin-bottom: 80px;
    @include respond-below(lg) {
        margin-bottom: 40px;
    }
}
.plan-choose-info {
	@extend %flex-align-center;
	padding-top: 8px;
	label {
		margin-bottom: 0;
	}
	.monthly-plan {
		color: $__black_shade;
	}
	.yearly-plan {
		color: $__bodycolor;
	}
	.status-toggle, .form-switch {
        margin: 0 16px;
	}
	.checktoggle {
		background-color: $primary;
		border: 1px solid $__blue__14;
	}
	.check {
		&:checked {
			& + .checktoggle {
				background-color: $__white;
				border: 1px solid $__blue__14;
				&:after {
					background-color: $primary;
				}
			}
		}
	}
    .monthly-plan, .yearly-plan {
        font-weight: $font-weight-medium;
        font-size: $font-size-16;
        @include respond-below(custom767) {
            font-size: $font-size-16;
        }
    }
}
.pricing-card {
	background: $light-300;
	border: 1px solid $border-color;
	border-radius: 24px;
    @include transition(0.7s);
	&:hover, &.active {
		background: $primary;
        @include transition(0.7s);
		.pricing-icon {
			span {
				background: $__white;
                @include transition(0.7s);
                @include transform(rotate(90deg));
				img {
                    @include transform(rotate(-90deg));
                    @include transition(0.7s);
				}
			}
		}
		.pricing-title {
			p {
				color: $__flash_color;
                @include transition(0.7s);
			}
			h4 {
				color: $__white;
                @include transition(0.7s);
			}
		}
		.pricing-header {			
			.badge {
				background: rgba($white, 0.2);
				color: $white;
			}
		}
		.pricing-header-text {
			p {
				color: $__white;
                @include transition(0.7s);
			}
		}
		.pricing-amount {
			h2 {
				color: $__white;
                @include transition(0.7s);
				span {
					color: $__fog_color;
                    @include transition(0.7s);
				}
			}
			h6 {
				color: $__white;
                @include transition(0.7s);
			}
		}
		.pricing-list {
			ul {
				li {
					color: $__white;
                    @include transition(0.7s);
					&:before {
						color: $__white;
                        @include transition(0.7s);
					}
				}
			}
		}
		.pricing-btn {
			.btn {
				color: $gray-900 !important;
				background: $gray-transparent !important;
			}
		}
	}
	.card-body {
        padding: 30px;
        @include respond-below(lg) {
            @include margin-padding(0, 20px);
        }
        @include respond-below(custom767) {
            @include margin-padding(0, 15px);
        }
	}
}
.pricing-card-active {
	background: $primary;
	.pricing-icon {
		span {
			background: $__white;
            @include transition(0.7s);
            @include transform(rotate(90deg));
			img {
                @include transform(rotate(-90deg));
                @include transition(0.7s);
			}
		}
	}
	.pricing-title {
		p {
			color: $__flash_color;
            @include transition(0.7s);
		}
		h4 {
			color: $__white;
            @include transition(0.7s);
		}
	}
	.pricing-tag {
	    margin-left: $__auto;
		span {
			background: $__tag__blue;
			color: $__white;
			font-weight: $font-weight-medium;
			border-radius: 10px;
			padding: 12px 13px;
		}
	}
	.pricing-header-text {
		p {
			color: $__white;
            @include transition(0.7s);
		}
	}
	.pricing-amount {
		h2 {
			color: $__white;
            @include transition(0.7s);
			span {
				color: $__fog_color;
                @include transition(0.7s);
			}
		}
		h6 {
			color: $__white;
            @include transition(0.7s);
		}
	}
	.pricing-list {
		ul {
			li {
				color: $__white;
                @include transition(0.7s);
				&:before {
					color: $__white;
                    @include transition(0.7s);
				}
			}
		}
	}
	.pricing-btn {
		.btn {
			color: $__white;
			border: 1px solid $__broken_blue;
			box-shadow: inset 0 0 0 50px $__broken_blue;
		}
	}
}
.pricing-header {
	padding-bottom: 10px;
	display: flex;
	justify-content: space-between;
	.badge {
		background: rgba($dark, 0.2);
		@include rounded(10px);
		padding: 13px 14px;
		color: $gray-900;
		font-size: $font-size-14;
	}
}
.pricing-header-info {
	@extend %flex__center;
	padding-bottom: 8px;
	.badge {
		margin-bottom: 8px;
	}
}
.pricing-icon {
	margin-right: 16px;
	span {
		min-width: 70px;
		height: 70px;
		background: $__white;
		border-radius: 16px;
		@extend %flex-align-center;
        @include transition(0.7s);
        @include transform(rotate(0));
		img {
            @include transform(rotate(0));
            @include transition(0.7s);
			@include respond-below(custom767) {
				width: 24px;
			}
		}
		@include respond-below(custom767) {
			min-width: 60px;
			height: 60px;
		}
	}
}
.pricing-title {
	p {
		font-size: $font-size-16;
		margin-bottom: 0;
        @include transition(0.7s);
        @include respond-below(custom767) {
            font-size: $__font__size__15;
        }
	}
	h4 {
		margin-bottom: 0;
        @include transition(0.7s);
	}
}
.pricing-header-text {
	p {
		color: $__bodycolor;
		margin-bottom: 0;
        @include transition(0.7s);
	}
}
.pricing-amount {
	padding-bottom: 20px;
	h2 {
		margin-bottom: 20px;
        @include transition(0.7s);
		span {
			font-weight: $font-weight-normal;
			font-size: $font-size-14;
			color: $gray-300;
            @include transition(0.7s);
		}
	}
	h6 {
		font-weight: $font-weight-semibold;
		font-size: $__font__size__20;
		margin-bottom: 0;
        @include transition(0.7s);
        @include respond-below(custom767) {
            font-size: $font-size-16;
        }
	}
}
.pricing-list {
	padding-bottom: 20px;
	ul {
        @include margin-padding(0, 0);
		list-style: $__none;
		li {
			position: $__relative;
			font-size: $font-size-16;
			color: $gray-600;
			padding-left: 25px;
			margin-bottom: 14px;
            @include transition(0.7s);
			&:last-child {
				margin-bottom: 0;
			}
			&:before {
                @include position($__absolute, 50%, null, null, 0);
                @include transform(translateY(-50%));
				content: "\f058";
				font-family: $font-awesome;
				font-size: $font-size-16;
				font-weight: 900;
				color: $primary;
				border: 0;
                @include transition(0.7s);
			}
            @include respond-below(custom767) {
                font-size: $font-size-14;
            }
		}
	}
    @include respond-below(lg) {
        padding-bottom: 30px;
    }
    @include respond-below(custom767) {
        padding-bottom: 20px;
    }
}
.pricing-btn {
	text-align: $__center;
	.btn {
		font-weight: $font-weight-medium;
		font-size: $font-size-16;
        @include margin-padding(0, 9px 15px);
		min-width: $__full__width;
		display: $__inline__block;
		border: 0;
		@include rounded(44px);
        @include respond-below(md) {
            @include margin-padding(0, 8px 15px);
            font-size: $font-size-14;
        }
	}
}

