/*
-----------------------------------------------------------------------
	Department CSS
-----------------------------------------------------------------------
*/
.department-area {
	padding: 42px 0 140px;
	@media #{$lg-device} {
		padding: 42px 0 100px;
	}
	@media #{$md-device} {
		padding: 15px 0 100px;
	}
	@media #{$sm-device} {
		padding: 15px 0 90px;
	}
	@media #{$xs-device} {
		padding: 15px 0 80px;
	}
	.container {
		@media #{$lg-device} {
			max-width: none;
			padding-left: 15px;
			padding-right: 15px;
		}
	}
}

.department-wrpp {
	display: flex;
	justify-content: space-between;
	@media #{$lg-device} {
		justify-content: center;
	}
	@media #{$md-device} {
		justify-content: normal;
		flex-direction: column-reverse;
	}

	.department-content {
		max-width: 800px;
		width: 100%;
		@media #{$lg-device} {
			max-width: 700px;
		}
		@media (max-width:1023px) {
			max-width: 669px;
		}
		@media #{$md-device} {
			margin-bottom: 80px;
			max-width: none;
		}
	}

	.sidebar-wrapper {
		margin-top: 20px;
		max-width: 300px;
		width: 100%;
		@media #{$lg-device} {
			margin-right: 30px;
			max-width: 265px;
		}
		@media #{$md-device} {
			max-width: none;
		}
		.widget-item {
			.widget-side-nav {
				margin-bottom: 50px;
				ul {
					margin-bottom: 0;
					li {
						margin-bottom: 10px;
						a {
							background-color: $white-f8;
							border-radius: 3px;
							color: #747474;
							display: block;
							font-size: 16px;
							letter-spacing: 0;
							padding: 11.5px 33px 11.5px 63px;
							position: relative;
							&:hover, &.active {
								background-color: $theme-color;
								color: $white;
								&:before {
									color: $white;
								}
							}
							&:before {
								color: #747474;
								content: "\eab8";
								font-family: "IcoFont";
								font-size: 16px;
								position: absolute;
								right: 30px;
								@include transition(.3s);
							}
						}
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
			.widget-work-hours {
				background-color: $theme-color;
				border-radius: 3px;
				letter-spacing: 0;
				margin-bottom: 50px;
				padding: 48px 30px 45px;
				.title {
					color: $white;
					font-size: 18px;
					margin-bottom: 31px;
					text-transform: uppercase;
				}
				ul {
					margin-bottom: 41px;
					li {
						color: $white;
						display: flex;
						font-size: 14px;
						justify-content: space-between;
						margin-bottom: 10px;
						position: relative;
						&:before {
							border-bottom: 1px dashed $white;
							bottom: 7px;
							content: "";
							left: 0;
							position: absolute;
							width: 100%;
							z-index: 0;
						}
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
				.work-day {
					background-color: $theme-color;
					position: relative;
					z-index: 1;
				}
				.work-hours {
					background-color: $theme-color;
					position: relative;
					z-index: 1;
				}
				.btn-theme {
					&.btn-white {
						background-color: $white;
						border-radius: 3px;
						color: $black;
						display: block;
						font-size: 14px;
						font-weight: $font-weight-bold;
						letter-spacing: 0;
						min-height: auto;
						padding: 8px 20px;
						text-align: center;
						text-transform: uppercase;
						@media #{$lg-device} {
							font-size: 13px;
							padding: 8px 6px;
						}
						&:hover {
							background-color: $black;
							border-color: $black;
							color: $white;
						}
					}
				}
			}
			.widget-appointment-form {
				background-color: $white-f2;
				padding: 48px 30px 50px;
				.title {
					color: $black;
					font-size: 18px;
					margin-bottom: 37px;
					text-transform: uppercase;
					@media #{$lg-device} {
						font-size: 16px;
					}
				}
				form {
					.form-group {
						font-size: 14px;
						letter-spacing: 0;
						margin-bottom: 15px;
						.form-control {
							background-color: $white;
							border: none;
							border-radius: 3px;
							color: $black;
							font-size: 14px;
							height: 46px;
							padding: 12px 20px;
							width: 100%;
							@include placeholder {
				        color: $black-888;
				        font-size: 13px;
				      }
				      &:focus {
				        border: none;
				        box-shadow: none;
				        outline: none;
				      }
						}
						textarea {
							background-color: $white;
							border: none;
							border-radius: 3px;
							font-size: 14px;
							min-height: 150px;
							padding: 12px 20px;
							width: 100%;
						}
						.btn-theme {
							border-radius: 3px;
							font-size: 14px;
							font-weight: $font-weight-bold;
							letter-spacing: .25px;
							line-height: 32px;
							margin-top: 22px;
							padding: 8px 30px;
							text-transform: uppercase;
							width: 100%;
						}
						&.datepicker-group {
				      position: relative;
				      label {
				        bottom: 8px;
				        color: #888888;
				        cursor: pointer;
				        font-size: 14px;
				        position: absolute;
				        right: 20px;
				      }
				    }
					}
				}
			}
		}
	}
}

.department-content {
	.title {
    font-size: 48px;
    font-weight: $font-weight-bold;
    letter-spacing: -1.377px;
    line-height: 1.1;
    margin-bottom: 34px;
    display: inline-block;
    @media #{$lg-device} {
    	font-size: 40px;
    }
    @media #{$sm-device} {
    	font-size: 36px;
    }
    @media #{$xs-device} {
    	font-size: 30px;
    }
    span {
    	font-weight: $font-weight-light;
    	color: $theme-color;
    }
	}
	.department-gallery {
		margin-bottom: 53px;
		@media #{$sm-device} {
			margin-bottom: 30px;
		}
		.gallery-slider {
			.swiper-slide {
				img {
					border-radius: 2px;
					width: 100%;
				}
			}
		}
		.swiper-button-next,
		.swiper-button-prev {
			background-color: rgba($black, .2);
			border-radius: 3px;
			color: $white;
			font-size: 18px;
			height: 38px;
			line-height: 38px;
			text-align: center;
			width: 38px;
			@include transition(.3s);
			&:after {
				display: none;
			}
			&:hover {
				background-color: $theme-color;
			}
		}
		.swiper-button-prev {
			left: 30px;
			@media #{$xs-device} {
				left: 15px;
			}
		}
		.swiper-button-next {
			right: 30px;
			@media #{$xs-device} {
				right: 15px;
			}
		}
	}
	.content {
		margin-bottom: 43px;
		padding: 0 18px 0 2px;
		p {
			color: $black-888;
			margin-bottom: 24px;
		}
		ul {
			margin-bottom: 0;
			li {
				color: $black-888;
				line-height: 36px;
			}
			&.list-style1 {
				padding-top: 1px;
				li {
					padding-left: 32px;
					position: relative;
					&:before {
						color: $black-888;
						content: "\ea6d";
						font-family: "IcoFont";
						left: 0;
						position: absolute;
						top: 2px;
					}
				}
			}
		}
	}
	.price-list-col2 {
		border-bottom: 1px solid #eaeaea;
		display: flex;
		justify-content: space-between;
		margin-bottom: 79px;
		padding-bottom: 67px;
		@media #{$md-device} {
			justify-content: flex-start;
		}
		@media #{$sm-device} {
			margin-bottom: 49px;
			padding-bottom: 37px;
		}
		@media #{$xs-device} {
			display: block;
		}
		.price-list {
			max-width: 373px;
			width: 100%;
			&:last-child {
				max-width: 362px;
				@media #{$lg-device} {
					margin-left: 30px;
				}
				@media #{$xs-device} {
					margin-left: 0;
					margin-top: 50px;
				}
			}
		}
	}
	.price-list {
		h4 {
			color: $black;
			font-size: 24px;
			font-weight: $font-weight-normal;
			letter-spacing: -.25px;
			margin-bottom: 40px;
		}
		ul {
			li {
				color: $body-color;
		    display: flex;
		    font-size: 14px;
		    justify-content: space-between;
		    letter-spacing: 0;
		    line-height: 1;
		    margin-bottom: 26px;
		    position: relative;
		    &:before {
		    	border-bottom: 1px dashed $body-color;
			    bottom: 2px;
			    content: "";
			    left: 0;
			    position: absolute;
			    width: 100%;
			    z-index: 0;
		    }
		    &:last-child {
		    	margin-bottom: 0;
		    }
				.service {
					&-name {
						background-color: $white;
				    position: relative;
				    z-index: 1;
					}
					&-price {
						background-color: $white;
						color: $theme-color5;
				    position: relative;
				    z-index: 1;							
					}
				}
			}
		}
	}
	.team-single {
		border-bottom: 1px solid #eaeaea;
		margin-bottom: 69px;
		padding-bottom: 83px;
		@media (max-width:702px) {
			margin-bottom: 49px;
			padding-bottom: 63px;
		}
	}
	.faq-area {
		border-bottom: 1px solid #eaeaea;
		margin-bottom: 69px;
		padding-bottom: 64px;
		@media #{$sm-device} {
			margin-bottom: 59px;
			padding-bottom: 54px;
		}
		.title {
			font-size: 36px;
			letter-spacing: -1.04px;
			margin-bottom: 65px;
			@media #{$sm-device} {
				font-size: 30px;
				margin-bottom: 30px;
			}
		}
	}
	.case-area {
		.section-title {
			align-items: center;
			display: flex;
			justify-content: space-between;
			margin-bottom: 63px;
			@media #{$sm-device} {
				margin-bottom: 35px;
			}
			.title {
		    font-size: 36px;
		    letter-spacing: -1.04px;
		    margin-bottom: 0;
		    @media #{$sm-device} {
		    	font-size: 30px;
		    }
			}
			.btn-link {
				color: $theme-color;
				font-size: 14px;
				font-weight: $font-weight-bold;
				letter-spacing: 0;
				line-height: 1;
				position: relative;
				text-transform: uppercase;
				top: -1px;
				@media #{$xxs-device} {
					font-size: 11px;
				}
				&:before {
					background-color: #94c3c3;
					bottom: -2px;
					content: "";
					height: 1px;
					left: 0;
					position: absolute;
					width: 100%;
				}
				&:after {
					background-color: $theme-color5;
					bottom: -4px;
					content: "";
					height: 1px;
					left: 3px;
					position: absolute;
					width: calc(100% - 3px);
				}
			}
		}
		.case-col2 {
			display: flex;
			justify-content: space-between;
			.case-item {
				max-width: 385px;
				width: 100%;
			}
		}
	}
}

.team-single {
	position: relative;
	.title {
		font-size: 36px;
		letter-spacing: -1.04px;
		margin-bottom: 59px;
		@media #{$sm-device} {
			font-size: 30px;
			margin-bottom: 20px;
		}
	}
	.membr-info {
		letter-spacing: 0;
		max-width: 310px;
		width: 100%;
		@media (max-width:702px) {
			max-width: none;
		}
		.name {
			color: #2b2b2b;
			font-size: 22px;
			letter-spacing: .25px;
			margin-bottom: 13px;
		}
		.designation {
			color: $black-888;
			font-size: 16px;
			font-weight: $font-weight-normal;
			margin-bottom: 40px;
		}
		.desc {
			p {
				color: $black-888;
				margin-bottom: 28px;
			}
			ul {
				margin-bottom: 52px;
				li {
					color: $black-888;
			    display: flex;
			    font-size: 13px;
			    justify-content: space-between;
			    line-height: 1;
			    margin-bottom: 22px;
			    position: relative;
			    &:before {
			    	border-bottom: 1px dashed $black-888;
				    bottom: 3px;
				    content: "";
				    left: 0;
				    position: absolute;
				    width: 100%;
				    z-index: 0;
			    }
			    &:last-child {
			    	margin-bottom: 0;
			    }
					span {
						background-color: $white;
						position: relative;
				    z-index: 1;
						&:last-child {
							color: #2b2b2b;
							font-weight: $font-weight-semi-bold;
						}
					}
				}
			}
			.btn-link {
				background-color: transparent;
				border: none;
				color: $theme-color;
				font-weight: $font-weight-bold;
				letter-spacing: 1.1371px;
				padding: 0;
				text-transform: uppercase;
				&:hover {
					color: $theme-color5;
				}
			}
		}
	}
	.thumb {
		bottom: 0;
		position: absolute;
		right: 23px;
		@media (max-width:702px) {
			display: none;
		}
		img {
			max-width: none;
		}
	}
}