.background-hero-banner {
	background-image: linear-gradient(
			rgba(0, 0, 0, 0.5),
			rgba(0, 0, 0, 0.5)
		),
		url('../img/tours/tours-banner.avif');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	display: flex;
	align-items: center;

	height: 600px;

	@media screen and (max-width: 768px) {
		height: 100%;
		padding: 30px 0;
	}
}

.container-hero-banner {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1;

	.column-1 {
		flex: 2;

		h1 {
			font-family: var(--title-font);
			font-size: 46px;
			font-weight: 500;
			color: #fff;
			margin-bottom: 20px;
			width: 80%;
		}

		p {
			color: #eee;
			font-size: 18px;
			line-height: 1.7;
			font-weight: 300;
			width: 80%;
		}
	}

	.column-2 {
		flex: 1;
	}

	.container-form {
		padding: 20px;
		background-color: #fff;
		border-radius: 5px;
		box-shadow: var(--shadow);

		.form {
			display: flex;
			flex-direction: column;
			gap: 15px;

			.title {
				font-size: 26px;
				font-weight: 500;
				margin-bottom: 20px;
				display: flex;
				align-items: center;
				gap: 5px;
				font-family: var(--title-font);
			}

			.form-group {
				display: flex;
				flex-direction: column;
				gap: 5px;

				label {
					font-size: 14px;
					margin-bottom: 5px;
				}
			}

			select,
			input[type='date'] {
				padding: 10px;
				font-size: 14px;
				border: 1px solid #ccc;
				border-radius: 5px;
				font-family: inherit;
			}

			.btn-search {
				background-color: var(--primary-color);
				color: #fff;
				padding: 15px 0;
				font-size: 16px;
				font-weight: 600;
				border: none;
				border-radius: 5px;
				cursor: pointer;

				&:hover {
					background-color: var(--primary-color);
				}
			}

			select:focus,
			input[type='date']:focus {
				border-color: var(--primary-color);
				outline: none;
			}
		}
	}

	@media screen and (max-width: 768px) {
		flex-direction: column;

		.column-1 {
			flex: auto;

			h1 {
				font-size: 36px;
			}

			p {
				font-size: 16px;
			}
		}

		.container-form {
			width: 100%;

			.form {
				.title {
					font-size: 22px;
					margin-bottom: 10px;
				}

				.btn-search {
					font-size: 14px;
				}
			}
		}
	}
}

/*? ------------------------------ TOURS FILTROS ----------------------------- */

main.container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 100px;
	margin-bottom: 70px;
}

.main-tours {
	display: flex;
	gap: 20px;

	.container-select {
		display: none;
		align-items: center;
		gap: 10px;
		background-color: #fff;
		border: 1px solid var(--primary-color);
		border-radius: 5px;
		padding: 10px 20px;

		i {
			color: #ccc;
			font-size: 18px;
		}

		select {
			border: none;
			outline: none;
			background: none;
			font-size: 14px;
			font-family: inherit;
			width: 100%;
		}
	}

	@media screen and (max-width: 768px) {
		flex-direction: column;

		.container-select {
			display: flex;
		}
	}
}

.container-filters {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;

	.container-filter {
		background-color: #fff;
		box-shadow: var(--shadow);
		border-radius: 10px;
		padding: 20px 30px;
		position: relative;

		h3 {
			font-size: 18px;
			font-family: var(--title-font);
			color: var(--text-color-dark);
			margin-bottom: 20px;
			font-weight: 500;
		}

		.filter-group {
			display: flex;
			flex-direction: column;
			margin-bottom: 20px;

			span {
				font-size: 14px;
				font-weight: 500;
				color: #000;
				margin-bottom: 10px;
				font-weight: 600;
			}
		}

		.filter-checkbox-group {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 10px;

			label {
				margin: 0;
				font-size: 14px;
				font-weight: 500;
				cursor: pointer;
				user-select: none;
			}

			input[type='checkbox'] {
				accent-color: var(--primary-color);
				width: 20px;
				height: 20px;
			}
		}

		.stars {
			display: flex;
			gap: 5px;
			margin-bottom: 10px;

			i {
				color: #fcc714;
				font-size: 18px;
			}

			i.gray {
				color: #ccc;
			}
		}

		.decoration {
			position: absolute;
			top: 0;
			right: 0;
			width: 10%;
			height: 100px;
			background-color: #ffb905;
			border-bottom-left-radius: 10px;
			border-top-right-radius: 10px;
		}
	}

	@media screen and (max-width: 768px) {
		.container-filter {
			padding: 20px;
			display: none;

			&.active {
				display: block;
			}
		}
	}
}

.container-tours {
	flex: 2;

	.card-tour {
		display: flex;
		gap: 10px;

		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: var(--shadow);
		margin-bottom: 20px;

		.container-img {
			position: relative;
			flex: 1.5;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 10px;
			}

			.container-icon {
				position: absolute;
				top: 10px;
				right: 10px;

				background-color: #f5f5f5;
				width: 30px;
				height: 30px;
				display: grid;
				place-items: center;

				border-radius: 999px;
				cursor: pointer;
				transition: all 0.3s;

				i {
					color: var(--primary-color);
				}

				&:hover {
					background-color: var(--primary-color);
					i {
						color: #fff;
					}
				}
			}
		}

		.content-card-tour {
			flex: 2;
			display: flex;
			flex-direction: column;
			gap: 10px;

			padding: 20px 20px 20px 10px;

			.container-location-price {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.location {
					font-size: 14px;
					font-weight: 500;
					color: var(--text-color);

					i {
						margin-right: 5px;
						color: var(--primary-color);
					}
				}

				.price {
					font-size: 20px;
					font-weight: 700;
					color: var(--primary-color);
				}
			}

			.container-title {
				display: flex;
				gap: 10px;
				align-items: flex-end;

				h3 {
					font-size: 18px;
					font-family: var(--title-font);
					color: var(--text-color-dark);
					font-weight: 500;
				}

				span {
					font-size: 14px;
					color: var(--text-color);
				}
			}

			.details {
				display: flex;
				gap: 30px;
				align-items: center;
				margin: 8px 0;

				.capacity-person,
				.time {
					display: flex;
					align-items: center;
					gap: 5px;
					font-size: 14px;
					color: var(--text-color);
					line-height: 0;
				}

				i {
					color: var(--primary-color);
					font-size: 12px;
				}
			}

			.description {
				font-size: 14px;
				color: var(--text-color);
				line-height: 1.7;
			}

			.reviews {
				display: flex;
				align-items: center;
				gap: 5px;

				.stars {
					display: flex;
					gap: 2px;
				}

				i {
					color: #fcc714;
					font-size: 14px;
				}

				.count-reviews {
					font-size: 12px;
					color: var(--text-color);
				}
			}

			.footer-card-tour {
				margin-top: 20px;
				border-top: 1px solid #ccc;
				padding-top: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.btn {
					color: #fff;
					padding: 8px 20px;
					font-size: 14px;
					font-weight: 500;
					border-radius: 5px;
					text-decoration: none;
					border: 2px solid transparent;
				}

				.btn-outline {
					border: 2px solid var(--primary-color);
					color: #333;
				}

				.btn-solid {
					background-color: var(--primary-color);
				}
			}
		}
	}

	@media (max-width: 480px) {
		.card-tour {
			flex-direction: column;
		}

		.container-img {
			flex: 1;
		}

		.content-card-tour {
			flex: 1;
		}
	}
}

.container-pagination {
	margin-top: 30px;
	align-self: center;

	display: flex;
	gap: 15px;

	a {
		text-decoration: none;
		width: 40px;
		height: 40px;
		border-radius: 5px;
		font-weight: 700;
		color: var(--text-color);
		border: 1px solid var(--primary-color);

		display: flex;
		justify-content: center;
		align-items: center;

		&.active,
		&.next {
			background-color: var(--primary-color);
			color: #fff;
			border: 1px solid transparent;
		}
	}
}