.pricing {
	position: relative;

	.animated-shape {
		position: absolute;
		z-index: -1;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}
}

.pricing-switch-wrap {
	align-items: center;
	display: block;
	position: relative;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	justify-content: space-between;


	span {
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 700;
		display: inline-block;
		width: 50%;
		text-align: center;
		z-index: 2;
		position: relative;
		line-height: 35px;
		color: #fff;

		&.beforeinput {
			&.active {
				color: $color__theme;
			}
		}

		&.afterinput {
			&.active {
				color: $color__theme;
			}
		}
	}

	.switch-icon {
		position: relative;
		width: 200px;
		height: 37px;
		border: 1px solid $color__theme;
		border-radius: 25px;
		transition: all 0.3s linear;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-between;
		margin: 0 auto 50px;

		&:after {
			content: "";
			position: absolute;
			left: 4px;
			width: 100px;
			height: 35px;
			background-color: $color__theme;
			border-radius: 25px;
			transform: translate3d(-6px, 0, 0);
			transition: all 0.2s ease-in-out;
		}
	}

	&.yearly {
		.switch-icon:after {
			transform: translate3d(95px, 0, 0);
		}
	}


}

.yearly-price {
	display: none;
}

.pricing-table {
	box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1);
	background-color: #fff;
	position: relative;
	overflow: hidden;
	z-index: 1;
	margin-bottom: 30px;
	transition: all 0.3s ease-in-out;
	border-radius: 10px;

	svg {
		position: absolute;
		left: 52%;
		z-index: -1;
		transform: translateX(-50%);
		top: -262px;

		path {
			transition: all 0.3s ease-in-out;
		}
	}

	.table-feature-image {
		padding: 26px 0 15px;
	}

	.price-content-wrapper {
		padding: 30px 30px 60px;
	}

	.pricing-header {
		padding-bottom: 10px;
		margin-bottom: 42px;
		border-bottom: 1px solid #e4e4e4;

		.price {
			font-size: 40px;
			line-height: 70px;
			font-weight: 700;
			margin-bottom: 0;

			span {
				color: $color__body;
				font-size: 16px;
				font-weight: 400;
			}
		}

		.price-title {
			font-size: 18px;
			font-weight: 700;
			color: $color__theme;
			margin-bottom: 15px;
		}
	}

	.price-feture {
		margin: 0 0 40px 0;
		padding: 0;
		list-style: none;

		text-align: center;

		li {
			position: relative;
			z-index: 1;
			margin-bottom: 10px;

			&:before {
				position: absolute;
				font-size: 15px;
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				left: 0;
			}

			&.have {
				&:before {
					content: "\f00c";
					color: #1cc941;
				}
			}

			&.not {
				&:before {
					content: "\f00d";
					color: #f72323;
				}
			}
		}
	}

	&:hover, &.featured {
		border-color: $color__theme;
		box-shadow: 0 1rem 3rem rgba(31, 45, 61, 0.125);

		svg path {
			fill: $color__theme;
		}
	}
}

.tt-pricing-table-simple {
	text-align: center;
	padding: 55px 40px;
	border-radius: 5px;
	margin-bottom: 30px;
	transition: all 0.3s ease-in-out;
	position: relative;

	.pricing__title {
		position: relative;
		z-index: 2;
		transition: all 0.3s ease-in-out;

		h5 {
			font-size: 24px;
			font-weight: 500;
			margin-bottom: 23px;
		}
	}

	.pricing__price {
		margin-bottom: 40px;

		.price {
			@include font-size(50);
			font-weight: 600;
			color: $color__heading;
			margin: 0;
			position: relative;
			z-index: 2;
			line-height: 1.1;
		}

		span {
			font-size: 18px;
		}
	}

	.pricing__feature {
		margin-top: 32px;
		padding: 0;
		list-style: none;
		position: relative;
		z-index: 2;
		text-align: center;
		margin-bottom: 0;

		li {
			font-size: 18px;
			line-height: 30px;
			position: relative;
			margin-bottom: 5px;
			color: #52525c;
		}
	}

	&.featured {
		background-color: #fff;
		box-shadow: 0px 30px 70px 0px rgba(1, 4, 45, 0.08);

		.tt-btn {
			border-color: $color__theme;
			color: #fff;

			&:before {
				background: $color__theme;
				height: 300%;
			}

			&:hover {
				color: $color__theme;

				&:before {
					height: 0;
				}
			}
		}
	}

	.tt-btn {
		display: block;
		padding: 6px 33px;
	}
}


.tt-pricing {
	background-color: #fff;
	box-shadow: 0 5px 20px 0 rgba(210, 210, 245, 0.5);
	padding: 55px 50px 60px;
	border-radius: 10px;
	transition: all 0.3s ease-in-out;

	@media(max-width: 420px) {
		padding: 55px 30px 60px;
	}

	&__header {
		margin-bottom: 34px;
	}

	&__title {
		font-size: 18px;
		font-weight: 500;
		line-height: 1;
		color: $color__theme;
	}

	&__price {
		font-size: 40px;
		font-weight: 700;
		line-height: 1;
		margin-bottom: 0;
	}

	&__period {
		font-size: 16px;
		font-weight: 400;
		color: #52525c;
	}

	&__feature-list {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			font-size: 15px;
			color: #52525c;
			display: flex;
			align-items: center;

			&:not(:last-child) {
				margin-bottom: 8px;
			}

			i {
				margin-right: 7px;
			}

			.bullet {
				display: inline-block;
				height: 9px;
				width: 9px;
				border-radius: 50%;
				background-color: $color__theme;
				margin-right: 10px;
				vertical-align: 1px;
			}

			.ei-icon_check_alt2 {
				color: #21d09a;
			}
		}
	}

	&__action {
		margin-top: 35px
	}

	.tt-btn {
		&.featured_btn {
			background-color: #ffb116;
			border-color: #ffb116;

			&:hover {
				background-color: darken(#ffb116, 10%);
				border-color: darken(#ffb116, 10%);
				color: #fff;
			}
		}
	}

	&.featured {
		position: relative;
		z-index: 2;
		background: linear-gradient(90deg, #021048, #1e38a3);

		.tt-pricing__title {
			color: #ffb116;
		}

		.tt-pricing__price {
			color: #fff;
		}

		.tt-pricing__period {
			color: #d6d5e1;
		}

		.bullet {
			background-color: #ffb116;
		}

		.tt-pricing__feature-list {
			li {
				color: rgba(255, 255, 255, 0.6);
			}
		}

		.feature-star {
			display: block;
			position: absolute;
			top: -8px;
			right: 25px;
		}
	}


	&.style-two {
		.tt-pricing__header {
			padding-bottom: 30px;
			border-bottom: 1px dashed #c7c7c7;
		}

		.tt-pricing__feature-list {
			li {
				font-weight: 500;
				color: $color__heading;
				margin-bottom: 12px;
				font-size: 16px;

				&.exclude {
					color: #a7a7a7;
				}
			}
		}


		.tt-btn {
			text-align: center;

			&.featured_btn {
				background-color: $color__theme;
				border-color: $color__theme;

				&:hover {
					background-color: transparent;
					color: $color__theme;
				}
			}
		}
	}

	&.style-three {
		border-radius: 5px;
		padding: 50px 40px 55px;

		.tt-pricing__header {
			padding-bottom: 24px;
			border-bottom: 1px dashed #c7c7c7;
		}

		.tt-pricing__period {
			display: block;
			margin-top: 15px;
		}

		.tt-pricing__feature-list {
			.include {
				.ei-icon_check_alt2::before {
					content: "\4e";
				}
			}

			.exclude {
				.ei-icon_close_alt2 {
					font-size: 18px;
					&:before {
						content: "\4d";
					}
				}
			}
		}

		&.featured {
			.tt-pricing__feature-list li i {
				color: #fff;
			}

			.tt-pricing__header {
				border-bottom: 1px dashed #0025BA;
			}
		}
	}

	.tt-btn.featured_btn {
		background-color: $color__theme;
		border-color: $color__theme;
	}


}

.tt-pricing-list {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #dee2e6;
	border-radius: 15px;
	overflow: hidden;

	> div {
		width: 50%;
		padding: 40px;

		@media(max-width: 575px) {
			width: 100%;
		}
	}

	&__info {
		background-color: #ceddff;
		display: flex;
		align-items: center;
	}

	&__feature {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			font-size: 15px;
			line-height: 33px;
			display: flex;

			i {
				background-color: $color__theme;
				color: #fff;
				height: 18px;
				width: 18px;
				line-height: 18px;
				margin-right: 10px;
				border-radius: 50%;
				font-size: 10px;
				text-align: center;
				align-self: center;
				display: inline-block;
			}
		}
	}

	&__title {
		font-size: 20px;
	}

	&__description {
		margin-bottom: 0;
	}

	&__price-wrapper {
		margin-top: 40px;
	}

	&__price {
		margin-bottom: 30px;
		//display: flex;

		.price {
			font-size: 40px;
			font-weight: 700;
			line-height: 1;
			color: $color__heading;
		}
	}
}

.pricing-tab-nav {
	margin-bottom: 30px;
	display: inline-flex;
	border-radius: 6px;
	overflow: hidden;

	.nav-link {
		border: 0;
		outline: none;
		box-shadow: none;
		padding: 10px 15px;
		font-size: 14px;
		font-weight: 700;
		background-color: #f7f9fc;
		color: #071c4d;

		&.active {
			background-color: #0b163f;
			color: #fff;
		}
	}

}