/*------------------------------------*\
    #Features
\*------------------------------------*/
.features {
	padding-top   : 130px;
	padding-bottom: 100px;
	overflow      : visible;

	@media #{$maxSmall} {
		padding-top   : 70px;
		padding-bottom: 70px;
	}

	.feature-panel-holder {
		transition: 0.3s ease-in-out;

		&:hover {
			.feature-panel {
				background-color: var(--global--color-white);

				.feature-icon {
					animation: bounce 0.5s ease-in-out;
				}

				a {
					background-color: var(--global--color-primary);
					padding-left    : 15px;
					padding-right   : 15px;

					i {
						color: var(--global--color-white);
					}

					span {
						font-size  : 14px;
						opacity    : 1;
						margin-left: 10px;
					}
				}

				&.feature-panel-2 {
					box-shadow: 0px 5px 83px 0px rgba(40, 40, 40, 0.21);
				}
			}
		}

		.feature-panel {
			position        : relative;
			padding         : 39px 35px 40px;
			display         : flex;
			flex-direction  : column;
			align-items     : center;
			text-align      : center;
			overflow        : hidden;
			background-color: var(--global--color-white);
			border-radius   : 8px;
			box-shadow      : 0px 5px 83px 0px rgba(40, 40, 40, 0.21);
			cursor          : pointer;
			margin-bottom   : 30px;
			transition      : 0.3s ease-in-out;

			@media #{$noteBook} {
				padding: 39px 19px 40px;
			}

			@media #{$maxTablet} {
				max-width: 370px;
				margin   : 0 auto 30px;
			}

			.feature-icon {
				margin-bottom: 17px;

				i {
					&::before {
						color      : var(--global--color-primary);
						margin-left: 0;
						font-size  : 65px;
						transition : 0.3s ease-in-out;
					}
				}
			}

			.feature-content {
				display       : flex;
				flex-direction: column;
				align-items   : center;
				text-align    : center;

				h4 {
					font-family   : var(--global--font-heading);
					font-weight   : 600;
					font-size     : 19px;
					line-height   : 27px;
					text-transform: capitalize;
					margin-bottom : 16px;
					color         : var(--global--color-secondary);
					transition    : 0.3s ease-in-out;
				}

				p {
					font-family  : var(--global--font-body);
					font-size    : 15px;
					line-height  : 25px;
					margin-bottom: 20px;
					color        : var(--global--color-body);
					transition   : 0.3s ease-in-out;
				}
			}

			a {
				display         : flex;
				justify-content : center;
				align-items     : center;
				padding         : 10px;
				height          : 32px;
				border-radius   : 16px;
				background-color: var(--global--color-heading);
				font-size       : 12px;
				color           : var(--global--color-white);
				transition      : 0.3s ease-in-out;
				box-shadow      : 0px 3px 63px 0px rgba(40, 40, 40, 0.11);

				i {
					transition: 0.3s ease-in-out;
				}

				span {
					font-size     : 0;
					opacity       : 0;
					transition    : 0.3s ease-in-out;
					display       : inline-flex;
					text-transform: capitalize;
					font-family   : var(--global--font-body);
					font-weight   : 700;
					font-size     : 0px;
					color         : var(--global--color-white);
				}
			}

			&.feature-panel-2 {
				box-shadow: 0px 5px 83px 0px rgba(40, 40, 40, 0.11);
			}
		}
	}

	.actions-holder {
		display    : flex;
		align-items: center;

		@media #{$maxTablet} {
			justify-content: center;
		}

		@media #{$maxSmall} {
			flex-direction: column;
		}

		.btn {
			margin-right: 30px;

			&:first-child {
				width: 170px;
			}

			&:last-child {
				width       : 180px;
				margin-right: 0;
				padding     : 0 28px;
			}

			@media #{$maxSmall} {
				margin-right : 0;
				margin-bottom: 20px;
			}
		}
	}

	.carousel-dots {
		.owl-dots {
			margin-top   : 10px;
			margin-bottom: 70px;
		}
	}

	&.features-1 {
		padding-bottom: 0;
	}

	&.features-2 {
		padding-bottom: 0;
		position      : relative;
		z-index       : 2;

		.feature-panel-holder {
			.feature-panel {
				margin-bottom: 32px;
			}
		}
	}

	&.features-3 {
		padding-top   : 0;
		padding-bottom: 0;
	}

	&.features-4 {
		padding-top   : 130px;
		padding-bottom: 110px;
		position      : relative;

		@media #{$maxTablet} {
			padding-top   : 70px;
			padding-bottom: 70px;
		}

		.features-overlay {
			position     : absolute;
			top          : 0;
			left         : 50%;
			transform    : translateX(-50%);
			height       : 100%;
			width        : calc(100% - 7%);
			border-radius: 12px;

			@media #{$maxTablet} {
				width: calc(100% - 4%);
			}
		}

		.heading {
			position: relative;
			z-index : 1;
		}

		.owl-carousel {
			.owl-dots {
				margin-bottom: 0;
			}
		}
	}
}

.more-features {
	@media #{$maxTablet} {
		text-align   : center;
		margin-bottom: 40px;
	}

	p {
		font-family  : var(--global--font-body);
		font-weight  : 700;
		font-size    : 16px;
		color        : var(--global--color-gray);
		margin-bottom: 30px;

		a {
			position      : relative;
			color         : var(--global--color-primary);
			transition    : 0.3s ease-in-out;
			text-transform: capitalize;

			&:hover {
				color: var(--global--color-primary-70);
			}
		}
	}

	.btn {
		width: 185px;
	}

	&.more-features-2 {
		text-align     : center;
		display        : flex;
		align-items    : center;
		justify-content: center;
		padding-top    : 40px;
		padding-bottom : 40px;

		@media #{$maxTablet} {
			flex-direction: column;
			margin-bottom : 0;
		}

		p {
			margin-right : 30px;
			margin-bottom: 0;
			font-size    : 15px;

			@media #{$maxTablet} {
				margin-right : 0;
				margin-bottom: 30px;
			}
		}

		.btn {
			width  : 178px;
			height : 45px;
			padding: 0 23px;
			color  : var(--global--color-heading);
		}
	}

	&.more-features-3 {
		text-align: center;

		p {
			font-family  : var(--global--font-body);
			font-weight  : 700;
			font-size    : 15px;
			color        : var(--global--color-white);
			margin-bottom: 70px;

			a {
				position      : relative;
				font-weight   : 700;
				color         : var(--global--color-primary);
				transition    : 0.3s ease-in-out;
				text-transform: capitalize;
				padding-bottom: 6px;

				&:hover {
					&::before {
						width: calc(100% - 20%);
					}
				}

				&::before {
					content         : '';
					transition      : 0.3s ease-in-out;
					position        : absolute;
					bottom          : 0;
					left            : 50%;
					transform       : translateX(-50%);
					width           : 100%;
					height          : 2px;
					background-color: var(--global--color-primary);
				}
			}
		}
	}
}

.features-bar {
	padding-top   : 0;
	padding-bottom: 0px;
	overflow      : visible;

	.features-holder {
		position        : relative;
		z-index         : 55;
		transform       : translateY(-80px);
		margin-bottom   : -80px;
		background-color: var(--global--color-white);
		border-radius   : 4px;
		overflow        : hidden;

		@media screen and (max-width:567px) {
			max-width: 370px;
		}

		@media #{$minLarge} {
			box-shadow: 0px 5px 83px 0px rgba(9, 29, 62, 0.15);
		}

		@media #{$maxSmall} {

			margin: 0 auto -80px;
		}

		@media screen and (max-width:767px) {
			padding-bottom: 40px;

		}

		.feature-panel {
			padding: 34px 40px 40px;

			@media screen and (max-width:767px) {
				padding-bottom: 0;
			}

			@media #{$minLarge} {
				box-shadow: 0px 3px 63px 0px rgba(40, 40, 40, 0.11);
			}

			@media #{$maxTablet} {
				max-width: 370px;
				margin   : 0 auto;

			}

			@media #{$noteBook} {
				padding-left : 30px;
				padding-right: 30px;
			}

			&:hover {
				.feature-content {
					i {
						color           : var(--global--color-white);
						background-color: var(--global--color-primary);
						transform       : rotate(360deg);
					}
				}
			}

			.feature-content {
				position      : relative;
				z-index       : 3;
				text-align    : center;
				display       : flex;
				flex-direction: column;
				align-items   : center;

				i {
					margin-bottom   : 7px;
					width           : 94px;
					height          : 94px;
					display         : flex;
					justify-content : center;
					align-items     : center;
					border-radius   : 50%;
					background-color: var(--global--color-white);
					color           : var(--global--color-primary);
					position        : relative;
					overflow        : hidden;
					transition      : 0.3s ease-in-out;

					&::before {
						font-size: 65px;
						z-index  : 2;
					}
				}

				h5 {
					text-transform: capitalize;
					font-family   : var(--global--font-heading);
					font-weight   : 600;
					font-size     : 19px;
					line-height   : 28px;
					color         : var(--global--color-secondary);
					margin-bottom : 0px;
				}
			}
		}
	}

	.actions-holder {
		display    : flex;
		align-items: center;

		@media #{$maxTablet} {
			justify-content: center;
		}

		@media #{$maxSmall} {
			flex-direction: column;
		}

		.btn {
			width       : 170px;
			height      : 60px;
			margin-right: 30px;

			@media #{$maxSmall} {
				margin-right : 0;
				margin-bottom: 20px;
			}

			&:last-child {
				border-color       : #687696;
				border             : 2px solid;
				transition-property: background, color, border-color;

				&::before {
					background-color: var(--global--color-primary);
					width           : calc(100% + 4px);
					height          : calc(100% + 4px);
					top             : -2px;
					left            : -2px;
				}

				&:hover {
					border-color: var(--global--color-secondary);
				}
			}
		}
	}
}




/* Small Devices, Tablets */
@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 767px) {}