/*****************************
  Feature box
*****************************/
.feature-info {
	.feature-info-icon {
		background: $primary;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		width: 90px;
		height: 90px;
		line-height: 90px;
		text-align: center;
		margin: 0 auto;
		margin-bottom: 25px;

		i {
			font-size: 46px;
			color: $white;
		}

	}

	.step-number {
		span {
			margin-top: -75px;
			margin-left: 15px;
			font-size: 42px;
			font-weight: 600;
			opacity: 0.1;
			color: $gray-9;
			position: absolute;
		}

	}

	.feature-info-content {
		h5 {
			font-weight: 500;
		}

	}

}

.feature-info-02 {
	display: flex;

	.feature-icon {
		flex: 0 0 60px;
		margin-right: 30px;

		span {
			display: block;
			width: 60px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			border-radius: 50%;
			box-shadow: 0 2px 6px rgba($black, 0.1);
			font-size: 20px;
			font-weight: 500;
			color: $gray-8;
			position: relative;
			background: $white;
			transition: all 0.3s ease-in-out;

			&:before {
				position: absolute;
				content: "";
				right: -8px;
				top: 19px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 10px 0 10px 10px;
				border-color: transparent transparent transparent $white;
				transition: all 0.3s ease-in-out;
			}

		}

	}

	.feature-content {
		.feature-title {
			font-weight: 500;
		}

	}

	&:hover {
		.feature-icon {
			span {
				background: $primary;
				color: $white;

				&:before {
					border-color: transparent transparent transparent $primary;
				}

			}

		}

	}

}

/* feature-info-03 */
.feature-info-03 {
	.feature-icon {
		margin-bottom: 30px;

		i {
			display: block;
			margin: auto;
			width: 140px;
			height: 140px;
			line-height: 140px;
			text-align: center;
			border-radius: 50%;
			box-shadow: 0 2px 6px rgba($black, 0.1);
			font-size: 60px;
			font-weight: 500;
			color: $gray-8;
			position: relative;
			background: $white;
			transition: all 0.3s ease-in-out;

			&:after {
				position: absolute;
				content: "";
				bottom: -8px;
				left: 50%;
				margin-left: -10px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 10px 10px 0 10px;
				border-color: $white transparent transparent transparent;
				transition: all 0.3s ease-in-out;
			}

		}

	}

	.feature-content {
		.feature-title {
			font-weight: 500;
		}

	}

	&:hover,
	&.active {
		.feature-icon {
			i {
				background: $primary;
				color: $white;

				&:after {
					border-color: $primary transparent transparent transparent;
				}

			}

		}

	}

}
