/* 3.12 - Mentor - Start
================================================== */
.mentor_item {
	padding: 30px;
	text-align: center;
	border-radius: $border_radius;
	background-color: $color_white;
	border: 1px solid $color_border;
	transition: $transition;
	.mentor_image {
		margin-bottom: 20px;
		>a {
			display: block;
			overflow: hidden;
			position: relative;
			border-radius: $border_radius;
			&:before {
				top: 0;
				right: 0;
				z-index: 1;
				opacity: 0;
				width: 100px;
				height: 100px;
				line-height: 1;
				font-size: 24px;
				content: "\f178";
				font-weight: 400;
				text-align: right;
				position: absolute;
				color: $color_primary;
				padding: 20px 18px 0 0;
				transition: $transition;
				background-color: $color_dark;
				font-family: 'Font Awesome 5 Pro';
				clip-path: polygon(0 0, 100% 0, 100% 100%);
			}
		}
	}
	.mentor_name {
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 10px;
		>a {
			color: $color_dark;
			&:hover {
				opacity: .7;
			}
		}
	}
	.mentor_designation {
		margin-bottom: 15px;
	}

	&:hover {
		z-index: 1;
		border-color: $color_dark;
		transform: translate(-2px, -2px);
		box-shadow: 10px 10px 0 0 $color_dark;
		.mentor_image {
			>a {
				&:before {
					opacity: 1;
				}
			}
		}
		.mentor_name {
			>a {
				text-decoration: underline;
				text-decoration-thickness: 1px;
			}
		}
	}
}
/* 3.12 - Mentor - End
================================================== */