/* Hero hero */

.home-hero-slider-wrapper {
	.big-service-search {
		position: absolute;
		left: 0;
		top: -96px;
		transform: translateY(-50%);
		z-index: 99;

		@include medium-desktop() {
			top: -40px;
		}

		@include small-desktop {
			width: 100%;
			top: 0;
		}

		@include tablet {
			left: 0;
		}

		@include mobile {
			width: calc(100% - 60px);
			left: 50%;
			overflow: hidden;
			transform: translate(-50%, -50%);
		}
	}
}

.home-hero-slider {
	position: relative;

	&:before {
		content: '';
		position: absolute;
		right: 0;
		bottom: -1px;
		z-index: 10;
		pointer-events: none;
		height: 96px;
		width: 100%;
		background-position: left bottom;
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-image: url("../images/homepage/home_slider_decoration.svg");

		@include small-desktop {
			display: none;
		}

		@include medium-desktop() {
			background-size: auto 60px;
		}

		@include tablet() {
			background-size: auto 40px;
		}
	}

	.owl-stage {
		display: flex;
		align-items: stretch;
	}

	.owl-nav.owl-nav {
		.owl-prev {
			transform: translate(0, -50%);
			left: 20px;

			@include tablet {
				left: 15px;
			}
		}

		.owl-next {
			transform: translate(0, -50%);
			right: 20px;

			@include tablet {
				right: 15px;
			}
		}

		button {
			background-color: rgba(255, 255, 255, 0.1);
			transition: background-color 0.3s ease-in-out;

			i {
				color: $whiteColor;
				opacity: 0.5;
			}

			&:hover {
				background-color: rgba(255, 255, 255, 0.2);

				i {
					opacity: 0.8;
				}
			}
		}
	}
}

.home-hero-slide {
	position: relative;
	height: 100vh;
	max-height: 800px;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;

	@include small-desktop() {
		max-height: 600px;
	}

	@include mobile {
		background-position: left bottom;
		padding-bottom: 100px;
		max-height: none;
		height: auto;
		min-height: 100%;
	}

	.main-content {
		height: 100%;
		padding-top: calc(110px + 3%);

		@include mobile {
			padding-top: calc(60px + 10%);
		}
	}

	.slide-content {
		max-width: 640px;

		@include mobile {
			text-align: center;
		}
	}

	.slide-title {
		font-weight: 600;
		font-size: 40px;
		color: $whiteColor;
		margin-bottom: 20px;

		@include mobile {
			font-size: 32px;
		}
	}

	.slide-description {
		font-weight: 400;
		font-size: 20px;
		line-height: 30px;
		color: $mainTextColorOnDark;
		margin-bottom: 32px;

		@include mobile {
			font-size: 18px;
			line-height: 26px;
			margin-bottom: 20px;
		}
	}

	.categories-wrapper {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.category {
			@include default-shape();

			border: 2px solid $headlinesColor2;
			margin-right: 6px;
			margin-bottom: 6px;
			padding: 5px 10px;
			font-weight: 600;
			font-size: 14px;
		}

		@include mobile {
			justify-content: center;
			text-align: center;
		}
	}

	.category {
		border-color: $mainTextColorOnDark;
		color: $mainTextColorOnDark;
	}

	.category-extender {
		color: $whiteColor;
		font-size: 14px;
		font-weight: 600;
		margin-bottom: 6px;
	}

	.slide-review {
		@include default-shape();

		background-color: rgba(0, 0 , 0, 0.1);
		padding: 20px;
		width: 300px;
		margin-top: 5%;

		@include mobile {
			display: inline-block;
		}

		.review-rating {
			margin-bottom: 10px;
			display: flex;

			@include mobile {
				display: inline-flex;
			}

			img {
				height: 20px;
				margin-right: 5px;
				display: inline;
				width: auto;

				@include mobile {
					height: 16px;
					margin-right: 3px;
				}
			}
		}

		p {
			font-size: 16px;
			line-height: 24px;
			color: $whiteColor;
			margin-top: 0;
			margin-bottom: 0;

			@include mobile {
				font-size: 14px;
				line-height: 20px;
			}
		}

		.review-author {
			display: flex;
			align-items: flex-end;

			img {
				border-radius: 50%;
				margin-right: 15px;
				width: 50px;
				height: 50px;
				display: inline;
				overflow: hidden;
			}

			h6 {
				color: $mainColor;
				font-size: 16px;
				font-weight: 600;
				margin-bottom: 5px;
			}

			span {
				font-size: 14px;
				color: $mainTextColorOnDark;
			}
		}
	}

	.message-bubble {
		@include default-shape();

		background-color: rgba(0, 0 , 0, 0.1);
		padding: 20px;
		width: 250px;
		position: absolute;

		@include small-desktop {
			display: none;
		}

		&:before {
			content: '';
			position: absolute;
			top: 100%;
			right: 35px;
			width: 22px;
			height: 35px;
			opacity: 0.1;
			background-image: url("../images/homepage/message-bubble-arrow.svg");
			background-repeat: no-repeat;
			background-position: center center;
		}

		.user {
			display: flex;
			align-items: center;
			margin-bottom: 5px;

			img {
				border-radius: 50px;
				margin-right: 15px;
				width: 50px;
				display: inline;
				overflow: hidden;
			}

			span {
				color: $mainColor;
				font-size: 14px;
				font-weight: 600;
			}
		}

		.text {
			color: $whiteColor;
			font-size: 14px;
			line-height: 20px;
		}

		.category-text {
			color: $whiteColor;
			margin-bottom: 15px;

			span {
				color: $mainColor;
			}
		}

		.title {
			color: $mainColor;
			font-size: 16px;
			line-height: 20px;
			margin-bottom: 10px;
			font-weight: 600;
		}

		.bottom {
			display: flex;
			align-items: center;
		}

		.perks {
			display: flex;
			flex-wrap: wrap;

			.perk {
				font-size: 13px;
				color: $mainTextColorOnDark;
				position: relative;

				&:not(:last-child) {
					margin-right: 20px;

					&:before {
						content: "";
						width: 5px;
						height: 5px;
						position: absolute;
						border-radius: 3px;
						background: $mainTextColorOnDark;
						right: -12px;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}

		.price {
			color: $whiteColor;
			margin-left: auto;
			font-size: 20px;
		}

		&.message-bubble-left {
			left: 48%;
			top: 30%;
		}

		&.message-bubble-right {
			right: -11%;
			top: 15%;

			@include big-desktop() {
				right: -5%;
			}

			@include medium-desktop {
				display: none;
			}

			&:before {
				right: auto;
				left: 35px;
				transform: scale(-1, 1);
			}
		}
	}
}