/*
-----------------------------------------------------------------------
	Team CSS
-----------------------------------------------------------------------
*/
.team-area {
	&.team-default-area {
		padding: 137px 0 122px;
		@media #{$lg-device} {
			padding: 98px 0 92px;
		}
		@media #{$sm-device} {
			padding: 78px 0 72px;
		}
		@media #{$xs-device} {
			padding: 68px 0 62px;
		}
		.section-title {
			margin-bottom: 64px;
			@media #{$sm-device} {
				margin-bottom: 60px;
			}
			@media #{$xs-device} {
				margin-bottom: 50px;
			}
		}
	}
}

.team-member {
	border: 1px solid #e7e7e7;
	padding: 24px;
	position: relative;
	@media #{$sm-device} {
		padding: 7px;
	}
	.thumb {
		overflow: hidden;
		img {
			width: 100%;
			@include transition(all 0.8s ease-in-out);
		}
	}
	.content {
		padding: 35px 27px 24px;
		text-align: center;
		@media #{$sm-device} {
			padding: 30px 10px 24px;
		}
		.member-info {
			.name {
				color: $black;
				font-size: 24px;
				font-weight: $font-weight-normal;
				letter-spacing: -.25px;
				margin-bottom: 27px;
				@include transition(.3s);
				@media #{$sm-device} {
					font-size: 20px;
					margin-bottom: 15px;
				}
				@media #{$xs-device} {
					font-size: 16px;
				}
				a {
					color: $black;
				}
			}
			p {
				color: $black-999;
				margin-bottom: 36px;
				@media #{$sm-device} {
					margin-bottom: 20px;
				}
			}
			.btn-link {
				color: $body-color;
				font-size: 14px;
				font-weight: $font-weight-normal;
				@media #{$sm-device} {
					font-size: 13px;
				}
				@media #{$xs-device} {
					font-size: 12px;
				}
				&:hover {
					color: $theme-color;
					font-weight: $font-weight-bold;
				}
			}
			.designation {
				color: $black;
				font-size: 12px;
				margin-bottom: 5px;
			}
			.social-icons {
				a {
					color: $black;
					display: inline-block;
					font-size: 16px;
					padding: 0 10px;
					.icon {}
				}
			}
		}
	}
	&:hover {
		.thumb {
			img {
				@include scale(1.2);
			}
		}
		.content {
			.member-info {
				.name {
					color: $theme-color;
				}
			}
		}
	}
}

.team-slider-container {
	.swiper-pagination {
		align-items: center;
		display: flex;
		margin: 70px auto 0;
		min-height: 18px;
		max-width: 71px;
		position: relative;
		&.swiper-pagination-bullets {
			.swiper-pagination-bullet {
				background-color: $gray-ccc;
				border-radius: 50%;
				height: 12px;
				margin: 0 5px;
				opacity: 1;
				width: 12px;
				@include transition(.3s);
				&:hover {
					background-color: $theme-color;
				}
				&.swiper-pagination-bullet-active {
					background-color: $theme-color;
					height: 17px;
					width: 17px;
				}
			}
		}
	}
}