// HOME

.home-intro-section{
	.ht-wrapper{
		padding: 84px 0;
		@media (min-width: $screen-sm-min){
			padding: 96px 0;
		}
		@media (min-width: $screen-md-min){
			padding: 112px 0;
		}
		@media (min-width: $screen-lg-min){
			padding: 120px 0;
		}
	}
	.home-intro__content{
		.home-intro__content__title{
			margin: 0;
			line-height: 1.2;
			font-size: 24px;
			font-weight: 400;
			color: #fff;
			@media (min-width: $screen-sm-min){
				font-size: 36px;
			}
			@media (min-width: $screen-md-min){
				font-size: 42px;
			}
			@media (min-width: $screen-lg-min){
				font-size: 48px;
			}
		}
		.home-intro__content__subtitle{
			margin: 12px 0 0;
			font-size: 14px;
			color: $grey300;
			@media (min-width: $screen-sm-min){
				font-size: 16px;
			}
			@media (min-width: $screen-md-min){
				font-size: 18px;
			}
			@media (min-width: $screen-lg-min){
				font-size: 20px;
			}
		}
	}
	.home-intro__search{
		margin: 36px 0 0;
		.home-intro__search-form{
			padding: 12px;
			background-color: rgba(#fff,.4);
			border-radius: 2px;
			.search-input{
				height: 48px;
				font-size: 18px;
				border-color: transparent;
				@media (max-width: $screen-sm-max){
					margin-bottom: 8px;
				}
			}
			.search-submit{
				height: 48px;
				font-size: 18px;
			}
		}
	}	
}
.home-featured-properties-carousel-container{
	// margin: 24px 0 0;
	background-color: rgba(#000,.1);
	.featured-properties-carousel{
		max-width: 1440px;
		margin: 0 auto;
		padding: 24px 0;
		.single-col{
			padding: 0 12px;
		}	
		.single-property{
			position: relative;
			border-radius: 12px;
			.property__photo{
				.ht-inner{
					border-radius: 6px;
					overflow: hidden;
				}
			}
			.property__badges{
				position: absolute;
				top: 6px; left: 6px;
				font-size: 0;
				max-width: 100%;
				.single-badge{
					display: inline-block;
					vertical-align: top;
					line-height: 18px;
					font-size: 12px;
					font-weight: 500;
					padding: 2px 5px 1px;
					font-size: 0;
					border-radius: 4px;
					margin: 0 8px 0 0;
					&:last-child{
						margin: 0;
					}
					.single-badge__icon{
						display: inline-block;
						vertical-align: top;
						line-height: 18px;
						font-size: 12px;
					}
					.single-badge__text{
						display: inline-block;
						vertical-align: top;
						margin: 0 0 0 5px;
						line-height: 18px;
						font-size: 10px;
					}
					&.single-badge--verified{
						background-color: rgba(#fff,.8);
						.single-badge__icon{
							color: $color-primary;
						}
						.single-badge__text{
							color: $grey800;
						}
					}
					&.single-badge--featured{
						background-color: rgba($color-primary,.9);
						.single-badge__icon{
							color: #fff;
						}
						.single-badge__text{
							color: #fff;
						}
					}
				}
			}
			.property__content{
				position: absolute;
				bottom: 0; left: 0; right: 0;
				padding: 8px 12px;
				color: #fff;
				background-color: rgba(#000,.6);
				border-radius: 0 0 6px 6px;
			}
			.property__title{
				margin: 0 0 5px;
				line-height: 19px;
				font-size: 14px;
				font-weight: 500;
			}
			.property__meta{
				margin: 3px 0 0;
				line-height: 16px;
				font-size: 0;
				span{
					display: inline-block;
					vertical-align: top;
					line-height: 16px;
					font-size: 12px;
					font-weight: 400;
					color: $grey200;
					&:after{
						content: "\2022";
						display: inline-block;
						vertical-align: top;
						padding: 0 5px;
						line-height: 16px;
						font-size: 8px;
						color: $grey200;
					}
					&:last-child{
						&:after{
							display: none;
						}
					}
				}
			}
			.property__address{
				margin: 3px 0 0;
				line-height: 16px;
				font-size: 12px;
				@extend .ht-oneline;
			}
		}
	}
}

.home-featured-properties-section{
	padding: 24px 0 48px;
	@media (min-width: $screen-md-min){
		padding: 32px 0 64px 0;
	}
	.section-header{
		margin: 0 0 24px;
		@media (min-width: $screen-md-min){
			margin: 0 0 48px;
		}
		.section-header__title{
			margin: 0 0 16px;
			line-height: 24px;
			font-size: 18px;
			font-weight: 500;
			@media (min-width: $screen-md-min){
				margin: 0 0 24px;
				line-height: 30px;
				font-size: 24px;
			}
			&.has-bdb{
				position: relative;
				padding: 0 0 16px;
				@media (min-width: $screen-md-min){
					padding: 0 0 24px;
				}
				&:after{
					content: "";
					display: block;
					position: absolute;
					bottom: -1px;
					left: 50%; margin-left: -48px;
					width: 96px;
					height: 2px;
					background-color: $color-primary;
				}
			}
		}
		.section-header__actions{
			a{
				line-height: 18px;
				font-size: 13px;
				@media (min-width: $screen-sm-min){
					line-height: 20px;
					font-size: 15px;
				}
				@media (min-width: $screen-sm-min){
					line-height: 24px;
					font-size: 18px;
				}
			}
		}
	}
	.section-content{
		//
	}
	.section-footer{
		.section-footer__text{
			line-height: 21px;
			font-size: 15px;
			font-weight: 500;
			color: $grey800;
			@media (min-width: $screen-md-min){
				line-height: 24px;
				font-size: 18px;
			}
			p{
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
}

.home-why-choose-us-section{
	padding: 48px 0;
	@media (min-width: $screen-md-min){
		padding: 72px 0;
	}
	.section-header{
		margin: 0 0 24px;
		@media (min-width: $screen-md-min){
			margin: 0 0 48px;
		}
		.section-header__title{
			margin: 0 0 8px;
			line-height: 22px;
			font-size: 16px;
			font-weight: 500;
			color: #fff;
			@media (min-width: $screen-md-min){
				margin: 0 0 12px;
				line-height: 24px;
				font-size: 18px;
			}
			&.has-bdb{
				position: relative;
				padding: 0 0 12px;
				@media (min-width: $screen-md-min){
					padding: 0 0 16px;
				}
				&:after{
					content: "";
					display: block;
					position: absolute;
					bottom: -1px;
					left: 50%; margin-left: -36px;
					width: 72px;
					height: 2px;
					background-color: #fff;
				}
			}
		}
		.section-header__actions{
			a{
				line-height: 18px;
				font-size: 13px;
				@media (min-width: $screen-md-min){
					line-height: 20px;
					font-size: 15px;
				}
			}
		}
	}
	.section-content{
		.row{
			@media (max-width: $screen-xs-max){
				[class^="col"]{
					margin-bottom: 24px;
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
	}
	.single-reason{
		padding: 8px 24px;
		.single-reason__icon{
			margin: 0 0 24px;
			img{
				display: inline-block;
				max-height: 96px;
				width: auto;
				max-width: 100%;
			}
		}
		.single-reason__title{
			line-height: 24px;
			font-size: 18px;
			color: #fff;
		}
		.single-reason__subtitle{
			margin: 8px 0 0;
			line-height: 20px;
			font-size: 14px;
			color: $grey100;
		}
	}
}

.home-customer-feedbacks-section{
	padding: 48px 0;
	@media (min-width: $screen-md-min){
		padding: 72px 0;
	}
	.section-header{
		margin: 0 0 24px;
		@media (min-width: $screen-md-min){
			margin: 0 0 48px;
		}
		.section-header__title{
			margin: 0 0 8px;
			line-height: 22px;
			font-size: 16px;
			font-weight: 500;
			@media (min-width: $screen-md-min){
				margin: 0 0 12px;
				line-height: 24px;
				font-size: 18px;
			}
			&.has-bdb{
				position: relative;
				padding: 0 0 12px;
				@media (min-width: $screen-md-min){
					padding: 0 0 16px;
				}
				&:after{
					content: "";
					display: block;
					position: absolute;
					bottom: -1px;
					left: 50%; margin-left: -36px;
					width: 72px;
					height: 2px;
					background-color: $color-primary;
				}
			}
		}
		.section-header__actions{
			a{
				line-height: 18px;
				font-size: 13px;
				@media (min-width: $screen-md-min){
					line-height: 20px;
					font-size: 15px;
				}
			}
		}
	}
	.section-content{
		font-size: 18px;
		line-height: 24px;

	}
	.customer-feedback-carousel{
		position: relative;
		.carousel-inner{
			.item{
				padding: 0 15%;
				.item-inner{
					min-height: 24px * 8;
					display: flex;
					align-items: center;
					justify-content: center;
					@media (min-width: $screen-md-min){
						min-height: 34px * 5;
					}
					.feedback-content{
						position: relative;
						min-width: 0;
						min-height: 0;
						line-height: 24px;
						padding: 0 0 0 0;
						font-size: 16px;
						// font-weight: 500;
						font-style: italic;
						text-align: center;
						@media (min-width: $screen-md-min){
							padding: 0 0 0 36px;
							line-height: 34px;
							font-size: 24px;
						}
						&:before{
							display: none;
							position: absolute;
							top: -12px; left: 0px;
							content: "\f347";
							font-family: "Ionicons";
							color: material-color('orange','400');
							font-size: 28px;
							@media (min-width: $screen-md-min){
								display: block;
							}
						}
					}
				}
			}
		}
				
		.carousel-indicators{
			display: none;
			position: static;
			text-align: center;
			font-size: 0;
			bottom: 10px;
		  left: auto;
		  width: auto;
		  margin: 12px 0 0;
		  padding: 0;
		  list-style: none;
		  text-align: center;
			li{
				width: auto !important;
				height: auto !important;
				margin: 0 !important;
				padding: 0 !important;
				background-color: transparent;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				text-indent: 0;
				border: 0;
				border-radius: 0;
				background-color: transparent;
				.feedback-user{
					position: relative;
					padding: 24px 12px 68px;
					text-align: center;
					.feedback-user__avatar{
						display: inline-block;
						border: 2px solid #eee;
						background: $grey200;
						border-radius: 50%;
						opacity: .5;
						@include transition(transform .2s ease-in-out, opacity .2s ease-in-out);
						.image-wrap{
							display: block;
							width: 48px;
							height: 48px;
							border-radius: 50%;
						}
					}
					.feedback-user__info{
						position: absolute;
						bottom: 12px; left: 50%;
						opacity: 0;
						@include translateX(-50%);
						@include transition(opacity .2s ease-in-out);
					}
					.feedback-user__title{
						margin: 0 0;
						line-height: 18px;
						font-size: 13px;
						font-weight: 500;
						color: $grey700;
						whitespace: nowrap;
					}
					.feedback-user__subtitle{
						margin: 2px 0 0;
						line-height: 22px;
						font-size: 16px;
						font-weight: 500;
						white-space: nowrap;
						color: $color-primary_text;
					}
				}
				&:hover{
					.feedback-user{
						.feedback-user__avatar{
							opacity: .8;
						}	
					}
				}
				&.active{
					.feedback-user{
						.feedback-user__avatar{
							opacity: 1;
							@include scale(1.5);
						}					
						.feedback-user__info{
							opacity: 1;
						}
					}
				}
			}
			@media (min-width: $screen-sm-min){
				display: block;
			}
		}
			
		.ht-carousel-control{
			display: block;
			position: absolute;
			top: 50%;
			margin-top: -24px;
			padding: 0 8px;
			line-height: 48px;
			font-size: 36px;
			color: $grey400;
			&.left{
				left: 0;
			}
			&.right{
				right: 0;
			}
			&:hover{
				color: $color-primary;
			}
			&:active{
				color: $color-primary_text;
			}
		}
	}
}

.home-download-apps-section{
	padding: 96px 0;
	@media (min-width: $screen-sm-min){
		padding: 128px 0;
	}
	@media (min-width: $screen-md-min){
		padding: 144px 0;
	}
	@media (min-width: $screen-lg-min){
		padding: 168px 0;
	}
	.download-apps__title{
		margin: 0 0 0;
		line-height: 32px;
		font-size: 24px;
		font-weight: 400;
		color: #fff;
	}
	.download-apps__actions{
		margin-top: 36px;
		.download-now-btn{
			color: #fff;
			background-color: transparent;
			border-color: #fff;
			&:hover{
				color: #fff;
				background-color: $color-primary;
				border-color: $color-primary;
			}
		}
	}
}


// ====================================

.section-filters{
	margin: 0 0 36px;
	&__toggle{
		display: block;
		display: flex;
		width: 100%;
		margin: 0 0 12px;
		padding: 6px 12px;
		background-color: #fff;
		border: 1px solid $grey300;
		border-radius: 4px;
		box-shadow: 0 0 0;
		text-align: left;
		@media (min-width: $screen-md){
			display: none;
		}
		&:focus{
			outline: none;
		}
		.toggle{
			&-label{
				display: block;
				flex: 1 1 auto;
				line-height: 24px;
			}
			&-icon{
				display: block;
				width: 24px;
				text-align: center;
				line-height: 24px;
				font-size: 16px;
				&:before{
					content: "\f2d7";
				}
			}
		}
		&.collapsed{
			.toggle{
				&-icon{
					font-size: 22px;
					&:before{
						content: "\f20e";
					}
				}
			}
		}
	}
	&__collapse{
		@media (min-width: $screen-md){
			display: block !important;
			height: auto !important;
		}
	}
	&__menu{
		margin: 0 0 8px 0;
		padding: 0 0 0;
		border-bottom: 1px solid $grey300;
		@media (min-width: $screen-md){
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.list-filters{
			flex: 1 1 auto;
			min-width: 0;
		}
	}
	.list-filters{
		@media (min-width: $screen-md){
			display: flex;
			align-items: center;
		}
		.single-filter{
			flex: 0 1 auto;
			display: block;
			min-width: 0;
			margin: 0;
			@media (min-width: $screen-md){
				margin: 0 8px 0 0;
			}
			.dropdown{
				@media (min-width: $screen-md){
					position: static;
				}
				&__toggle{
					display: block;
					padding: 12px 0;
					color: $grey900;
					@media (max-width: $screen-sm-max){
						display: flex;
						align-items: center;
						border-bottom: 1px solid $grey300;
					}
					@media (min-width: $screen-md){
						text-align: center;
						padding: 8px 12px;
					}
					&:hover,
					&:focus{
						text-decoration: none;
					}
					.toggle{
						// xx
						&-label{
							line-height: 16px;
							font-size: 14px;
							@media (max-width: $screen-sm-max){
								flex: 1 1 auto;
								min-width: 0;
							}
						}
						&-icon{
							line-height: 16px;
							font-size: 14px;
							color: $grey500;
							@include transition(transform .1s ease-in-out);
							@media (max-width: $screen-sm-max){
								flex: 0 0 auto;
								min-width: 0;
							}
						}
					}
				}
				&-menu{
					margin: 0;
					border: 1px solid #eee;
					box-shadow: 0 1px 5px 0 rgba(#000, .12);
					&--filter-areas{
						padding: 0;
						width: 100%;
						@media (min-width: $screen-md){
							max-width: 280px;
						}
					}
					&--filter-properties{
						width: 100%;
						max-width: 800px;
						min-height: 240px;
						padding: 16px 16px 24px 16px;
					}
				}
				&.open{
					.dropdown{
						&__toggle{
							.toggle{
								&-icon{
									@include rotate(180deg);
								}
							}
						}
					}
				}
			}
		}
		.single-filter-area{
			&__link{
				display: block;
				display: flex;
				align-items: center;
				padding: 12px 16px;
				border-bottom: 1px solid #eee;
				&:hover{
					background-color: $grey100;
				}
			}
			.area-title{
				flex: 1 1 auto;
				min-width: 0;
				padding: 0 16px 0 0;
				line-height: 19px;
				font-size: 15px;
				color: $grey900;
				white-space: normal;
			}
			.area-count{
				line-height: 16px;
				font-size: 12px;
				color: $grey500;
			}
			&:last-child{
				.single-filter-area{
					&__link{
						border-bottom: 0;
					}
				}
			}
			&.active{
				.single-filter-area{
					&__link{
						background-color: $grey50;
					}
				}
			}
		}
		.single-filter-cat{
			padding: 4px 0;
			margin: 0 0 20px;
			&:last-child{
				margin-bottom: 0;
			}
			&__header{
				margin: 0 0 8px;
			}
			&__title{
				margin: 0 0 0;
				line-height: 20px;
				font-size: 16px;
				font-weight: 500;
				color: $grey700;
			}
		}
		.single-filter-property{
			margin: 6px 0;
			padding: 0 12px 0 0;
		}
		.filter-properties-wrap{
			display: flex;
			align-items: top;
			flex-wrap: wrap;
			.single-filter-property{
				flex: 0 0 50%;
				min-width: 0;
				@media (min-width: $screen-md){
					flex: 0 0 30%;
				}
			}
		}
		
	}

	&__selected{
		@media (min-width: $screen-md){
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	.list-selected-filters{
		cursor: pointer;
		.single-selected-filters{
			display: inline-flex;
			vertical-align: top;
			margin: 0 4px 6px 0;
			vertical-align: top;
			align-items: center;
			background-color: $grey300;
			border-radius: 4px;
			@media (min-width: $screen-md){
				//
			}
			.filter{
				// xx
				&-label{
					padding: 4px 2px 4px 6px;
					font-size: 12px;
					line-height: 18px;
					@media (min-width: $screen-md){
						padding: 6px 4px 6px 8px;
						font-size: 15px;
						line-height: 20px;
					}
				}
				&-count{
					padding: 0 2px;
					font-weight: 700;
				}
				&-action{
					margin: 0 0 0;
					&__delete{
						display: inline-block;
						vertical-align: top;
						line-height: 28px;
						padding: 0 8px;
						font-size: 18px;
						text-align: center;
						color: material-color('red', '600');
						&:hover{
							color: material-color('red', '300');
						}
					}
				}
			}
		}
	}
	.sort-order{
		padding: 4px 0;
		.form-group{
			margin: 0;
			@media (max-width: $screen-sm-max){
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 4px 0;
			}
		}
		&__label{
			margin: 0 4px 0 0;
			@media (max-width: $screen-sm-max){
				//
			}
		}
		&__input{
			display: inline-block;
			position: relative;
			@media (max-width: $screen-sm-max){
				display: block;
				flex: 0 0 auto;
				min-width: 40%;
			}
			.form-control{
				padding-right: 48px;
				@media (max-width: $screen-sm-max){
					display: block;
					width: 100%;
				}
				&:focus + .sort-order:after{
					@include rotate(180deg);
				}
			}
			&:after{
				content: "\f3d0";
				display: block;
				position: absolute;
				top: 50%; right: 8px;
				line-height: 40px;
				margin-top: -20px;
				color: $grey400;
				font-family: "Ionicons";
			  font-size: 18px;
			  font-style: normal;
			  font-weight: normal;
			  font-variant: normal;
			  text-transform: none;
			  text-rendering: auto;
			  -webkit-font-smoothing: antialiased;
			  z-index: 40;
			}
		}
	}
	.filter-result-count{
		@media (max-width: $screen-sm-max){
			margin: 12px 0 0;
		}
	}
}