/* ********************************** */
/*            SECTION HERO            */
/* ********************************** */
.hero-banner {
	background-image: url(../images/home/hero-bgb.jpg);
	background-size: cover;
	background-position: center;
	height: 100vh;
	background-attachment: fixed;
	position: relative;

	display: flex;
	align-items: center;
	z-index: 1;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: -1;
	}

	& > div {
		display: flex;
		align-items: center;
		gap: 100px;
	}

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

		h1 {
			width: 90%;
			font-size: 60px;
			text-transform: uppercase;
			letter-spacing: -1px;
			line-height: 1.1;
			font-weight: 800;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
			color: var(--color-light);

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

		p {
			font-size: 18px;
			line-height: 1.5;
		}

		.container-button {
			margin-top: 40px;
			align-self: flex-start;
		}
	}

	.container-images {
		flex: 1;
		position: relative;
		margin-top: 50px;

		.main-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 999px;
		}

		.img-banner-1,
		.img-banner-2 {
			position: absolute;
			width: 170px;
			height: 170px;
			object-fit: cover;
			border-radius: 999px;
			border: 7px solid var(--color-light);
		}

		.img-banner-1 {
			bottom: 10%;
			left: -12%;
			transform: translateY(-50%);
		}

		.img-banner-2 {
			top: 25%;
			right: 8%;
			transform: translateY(-50%) translateX(50%);
		}
	}

	@media (max-width: 992px) {
		height: auto;
		padding-top: 140px;

		& > div {
			flex-direction: column;
			gap: 30px;
		}

		.content {
			h1 {
				font-size: 50px;
			}

			p {
				font-size: 18px;
			}

			.container-button {
				margin-top: 20px;
			}
		}

		.container-images {
			margin-top: 0;

			.main-image {
				height: 100%;
			}

			.img-banner-1,
			.img-banner-2 {
				width: 140px;
				height: 140px;
			}

			.img-banner-1 {
				left: -10%;
			}

			.img-banner-2 {
				right: 5%;
				top: 20%;
			}
		}
	}

	@media (max-width: 768px) {
		.content {
			h1 {
				font-size: 30px;
			}

			p {
				font-size: 16px;
			}
		}

		.container-images {
			padding: 0 20px;

			.main-image {
				height: 600px;
			}

			.img-banner-1,
			.img-banner-2 {
				width: 100px;
				height: 100px;
				border-width: 4px;
			}

			.img-banner-1 {
				bottom: 10%;
				left: -2%;
				transform: translateY(-50%);
			}

			.img-banner-2 {
				right: 10%;
				top: 25%;
				transform: translateY(-50%) translateX(50%);
			}
		}
	}
}

/* ********************************** */
/*              ABOUT US              */
/* ********************************** */
.section-about {
	& > div {
		display: flex;
		align-items: center;
		gap: 120px;
	}

	.container-images {
		flex: 1;
		position: relative;

		.main-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 999px;
		}

		.alt-image {
			position: absolute;
			bottom: 12%;
			left: -22%;

			width: 170px;
			height: 170px;
			object-fit: cover;
			border-radius: 999px;
			border: 7px solid var(--color-light);
		}

		.card-info {
			border-radius: 15px;
			background-color: var(--color-primary);
			position: absolute;
			top: 20%;
			right: -20%;
			width: 170px;

			display: flex;
			flex-direction: column;
			gap: 15px;
			padding: 20px;

			i {
				color: var(--color-light);
				font-size: 26px;
			}

			h3 {
				color: var(--color-light);
				font-size: 18px;
				font-weight: 700;
			}
		}
	}

	.content {
		flex: 2;

		display: flex;
		flex-direction: column;
		gap: 10px;

		p {
			font-size: 18px;
			line-height: 1.4;
		}

		ul {
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin: 30px 0;

			li {
				list-style: none;
				display: flex;
				gap: 10px;
				align-items: center;

				i {
					font-size: 18px;
					color: #333;
					background-color: var(--color-primary);
					padding: 5px;
					border-radius: 999px;
				}

				span {
					font-size: 18px;
				}
			}
		}

		.container-buttons {
			display: flex;
			gap: 20px;
			align-items: center;
		}
	}

	@media (max-width: 992px) {
		& > div {
			flex-direction: column;
			gap: 30px;
		}

		.container-images {
			order: 1;

			.main-image {
				height: 600px;
			}

			.alt-image {
				width: 140px;
				height: 140px;
				left: -18%;
			}

			.card-info {
				padding: 15px;
				h3 {
					font-size: 16px;
				}
			}
		}

		.content {
			order: -1;
			ul {
				li {
					span {
						font-size: 16px;
					}
				}
			}
		}
	}

	@media (max-width: 768px) {
		.container-images {
			padding: 0 20px;

			.main-image {
				height: 100%;
			}

			.alt-image {
				width: 100px;
				height: 100px;
				left: 2%;
				bottom: 5%;
				border-width: 4px;
			}

			.card-info {
				top: 10%;
				right: 0;
			}
		}

		.content {
			p {
				font-size: 16px;
			}
		}
	}
}

/* ********************************** */
/*             MAIN DISHES            */
/* ********************************** */
.section-main-dishes {
	.content { 
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;

		h2 {
			text-align: center;
			width: 70%;
		}

		.container-dishes {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20px;
			margin: 50px 0;
		}

		.container-dish {
			padding: 15px;
			display: flex;
			flex-direction: column;

			img {
				width: 70%;
				margin-bottom: 20px;
				border-radius: 999px;
				align-self: center;
			}

			.dish-info {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20px;

				h3 {
					color: var(--color-light);
					font-size: 22px;
				}

				p {
					text-align: center;
					line-height: 1.4;
					font-size: 18px;
				}
			}
		}

		.dish-link {
			color: var(--color-light);
			font-size: 18px;

			a {
				text-decoration: underline;
				color: var(--color-primary);
				transition: color 0.3s;

				&:hover {
					color: var(--color-light);
				}
			}
		}
	}

	@media (max-width: 992px) {
		.content {
			.container-dishes {
				grid-template-columns: repeat(2, 1fr);
				margin: 20px 0;
			}

			.container-dish {
				img {
					width: 160px;
					height: 160px;
				}

				.dish-info {
					h3 {
						font-size: 20px;
					}
				}
			}
		}
	}

	@media (max-width: 768px) {
		.content {
			.container-dishes {
				grid-template-columns: 1fr;
				gap: 0;
				margin: 0;
			}

			.container-dish {
				img {
					width: 120px;
					height: 120px;
				}

				.dish-info {
					h3 {
						font-size: 18px;
					}

					p {
						font-size: 16px;
					}
				}
			}
		}
	}
}


/* ********************************** */
/*              OUR MENU              */
/* ********************************** */
.section-menu {
	.content {
		display: flex;
		flex-direction: column;
		gap: 10px;
		align-items: center;

		h2 {
			text-align: center;
			width: 60%;
		}
	}

	.container-tabs {
		margin: 60px 0;
		background-color: #363837;
		padding: 20px 40px;
		border-radius: 30px;

		display: flex;
		align-items: center;
		gap: 40px;

		button {
			background: none;
			border: none;
			color: var(--color-light);
			font-weight: 700;
			font-size: 14px;
			position: relative;
			cursor: pointer;

			&::after {
				content: '';
				position: absolute;
				top: 50%;
				right: -20px;
				transform: translateY(-50%);

				width: 7px;
				height: 7px;
				border-radius: 999px;
				background-color: var(--color-primary);
			}

			&:last-child::after {
				display: none;
			}

			&.active {
				color: var(--color-primary);
			}
		}
	}

	.container-dishes {
		display: none;
		grid-template-columns: repeat(2, 1fr);
		gap: 50px;
		width: 100%;

		&.active {
			display: grid;
		}

		.container-img {
			display: flex;
			align-items: center;

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

		.container-dish {
			display: flex;
			align-items: center;
			gap: 20px;

			.info-dish {
				display: flex;
				flex-direction: column;
				gap: 10px;

				.row {
					display: flex;
					align-items: center;
					gap: 10px;

					h3 {
						color: var(--color-light);
						font-size: 20px;
						text-transform: uppercase;
					}

					.divider {
						width: 100%;
						height: 1px;
						background-color: var(--text-color);
					}

					span {
						background-color: var(--color-primary);
						color: var(--color-light);
						font-size: 14px;
						font-weight: 800;
						padding: 5px 25px;
						border-radius: 999px;
						text-align: center;
					}
				}

				p {
					font-size: 18px;
				}
			}
		}
	}

	@media (max-width: 992px) {
		.container-tabs {
			padding: 15px 10px;
			margin: 30px 0;
			overflow-x: auto;

			.tab {
				flex: 1;
			}
		}

		.container-dishes {
			&.active {
				grid-template-columns: 1fr;
			}

			.info-dish {
				width: 100%;

				.row {
					justify-content: space-between;

					h3 {
						font-size: 16px;
					}

					.divider {
						width: 50%;
					}
				}
			}
		}
	}

	@media (max-width: 768px) {
		.container-tabs {
			padding: 10px 15px;
			gap: 30px;

			.tab {
				font-size: 12px;
			}
		}

		.container-dishes {
			.info-dish {
				.row {
					h3 {
						font-size: 14px;
					}
				}

				P {
					font-size: 16px;
				}
			}
		}
	}
}

/* ********************************** */
/*           OUR INGREDIENTS          */
/* ********************************** */
.section-our-ingredients {
	& > div {
		display: flex;
		align-items: center;
		gap: 80px;
	}

	.container-images {
		flex: 1;
		position: relative;

		.main-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 999px;
		}

		.card-customers {
			position: absolute;
			bottom: 0;
			left: 0;

			background-color: var(--color-primary);
			width: 50%;
			height: 170px;
			padding: 20px;
			border-radius: 15px;

			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20px;

			p {
				font-size: 18px;
				color: var(--color-light);
				font-weight: 800;
				text-align: center;
			}

			.images-customers {
				position: relative;
				width: 100%;
				height: 100%;

				img {
					width: 50px;
					height: 50px;
					border-radius: 999px;
					border: 1px solid var(--color-light);
					object-fit: cover;
					position: absolute;

					&:nth-child(1) {
						left: 0;
					}

					&:nth-child(2) {
						left: 30px;
					}

					&:nth-child(3) {
						left: 60px;
					}
				}

				span {
					position: absolute;
					left: 90px;
					width: 48px;
					height: 48px;
					border-radius: 999px;
					border: 1px solid var(--color-light);
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: var(--dark-color-divider);

					i {
						font-size: 20px;
					}
				}
			}
		}
	}

	.content {
		flex: 1.5;
		display: flex;
		flex-direction: column;
		gap: 10px;

		p {
			font-size: 18px;
			line-height: 1.4;
		}

		.container-options {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
			margin: 35px 0;

			.container-option {
				display: flex;
				flex-direction: column;
				gap: 15px;
				align-items: center;

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

				h3 {
					font-size: 20px;
					color: var(--color-light);
					font-weight: 700;
					width: 65%;
					text-align: center;
				}
			}
		}

		.container-button {
			align-self: flex-start;
		}
	}

	@media (max-width: 992px) {
		& > div {
			flex-direction: column;
			gap: 50px;
		}

		.content {
			order: -1;

			p {
				font-size: 16px;
			}

			.container-options {
				.container-option {
					h3 {
						font-size: 18px;
					}
				}
			}

			.container-button {
				align-self: center;
			}
		}

		.container-images {
			order: 1;
		}
	}

	@media (max-width: 768px) {
		.content {
			.container-options {
				.container-option {
					i {
						font-size: 24px;
					}
				}
			}
		}
	}
}

/* ********************************** */
/*            TESTIMONIALS            */
/* ********************************** */
.section-testimonials {
	background-image: url(../images/home/bg-testimonials2.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: -1;
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 20px;
		align-items: center;

		h2 {
			width: 60%;
			text-align: center;
		}

		.container-testimonials {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 50px;
			width: 90%;

			overflow-x: hidden;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
			position: relative;

			.testimonial {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20px;

				transition: transform 0.3s ease-in-out;
				flex: 0 0 100%;
				scroll-snap-align: center;

				.quote-icon {
					width: 50px;
					height: 50px;
				}

				p {
					text-align: center;
					font-size: 28px;
					width: 70%;
					line-height: 1.5;
				}

				img {
					width: 60px;
					height: 60px;
					border-radius: 999px;
					object-fit: cover;
				}

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

		.carousel-wrapper {
			position: relative;
			display: flex;
			justify-content: center;

			.btn-carousel {
				border: 1px solid var(--color-primary);
				background: none;
				width: 50px;
				height: 50px;
				border-radius: 999px;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				position: absolute;
				transition: background-color 0.3s;

				top: 50%;
				transform: translateY(-50%);

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

				&.btn-prev {
					left: 0;
				}

				&.btn-next {
					right: 0;
				}

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

	@media (max-width: 992px) {
		.content {
			gap: 10px;

			h2 {
				width: 80%;
			}

			.container-testimonials {
				margin-top: 10px;
				.testimonial {
					p {
						font-size: 22px;
					}

					h3 {
						font-size: 20px;
					}
				}
			}
		}
	}

	@media (max-width: 768px) {
		.content {
			h2 {
				width: 90%;
			}

			.container-testimonials {
				.testimonial {
					p {
						font-size: 16px;
						width: 100%;
					}

					h3 {
						font-size: 18px;
					}
				}
			}

			.carousel-wrapper {
				padding-bottom: 50px;

				.btn-carousel {
					width: 40px;
					height: 40px;
					bottom: -20px;
					top: auto;

					&.btn-prev {
						left: 40%;
					}

					&.btn-next {
						right: 40%;
					}
				}
			}
		}
	}

	@media (max-width: 576px) {
		.content {
			.carousel-wrapper {
				.btn-carousel {
					&.btn-prev {
						left: 35%;
					}

					&.btn-next {
						right: 35%;
					}
				}
			}
		}
	}
}

/* ********************************** */
/*                BLOG                */
/* ********************************** */
.section-blog {
	.content {
		display: flex;
		flex-direction: column;
		gap: 10px;
		align-items: center;

		h2 {
			text-align: center;
			width: 50%;
		}

		.container-blogs {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 25px;
			margin-top: 50px;
			width: 100%;

			.container-blog {
				.container-img {
					width: 100%;
					height: 100%;
					overflow: hidden;

					figure {
						overflow: hidden;
						border-radius: 20px;

						img {
							width: 100%;
							height: 300px;
							object-fit: cover;
							border-radius: 20px;
							transition: transform 0.4s ease-in-out;

							&:hover {
								transform: scale(1.05);
							}
						}
					}
				}

				.blog-info {
					margin-top: 20px;
					display: flex;
					flex-direction: column;
					gap: 15px;

					h3 {
						a {
							text-decoration: none;
							color: var(--color-light);
							font-size: 22px;
							font-weight: 700;
						}
					}

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

						.btn-read-more {
							color: var(--color-primary);
							text-decoration: none;
							font-size: 18px;
							font-weight: 500;
							transition: all 0.3s ease-in-out;
						}

						i {
							color: var(--color-primary);
							font-size: 16px;
							transition: all 0.3s ease-in-out;
						}

						&:hover {
							.btn-read-more {
								color: var(--color-light);
							}

							i {
								transform: translateX(5px);
							}
						}
					}
				}
			}
		}
	}

	@media (max-width: 992px) {
		.content {
			.container-blogs {
				grid-template-columns: repeat(2, 1fr);

				.container-blog {
					.blog-info {
						h3 {
							a {
								font-size: 20px;
							}
						}
					}
				}
			}
		}
	}

	@media (max-width: 768px) {
		.content {
			.container-blogs {
				grid-template-columns: 1fr;

				.container-blog {
					.blog-info {
						h3 {
							a {
								font-size: 18px;
							}
						}

						.container-button {
							.btn-read-more {
								font-size: 16px;
							}
						}
					}
				}
			}
		}
	}
}

/* ********************************** */
/*            BOOKING TABLE           */
/* ********************************** */
.section-booking-table {
	& > div {
		display: flex;
		align-items: center;
		position: relative;
		gap: 80px;
	}

	.content {
		flex: 1;

		.schedules {
			display: flex;
			flex-direction: column;
			gap: 10px;

			margin-top: 40px;

			h3 {
				color: var(--color-light);
				font-size: 24px;
				margin-bottom: 10px;
			}
		}
	}

	.spacer {
		flex: 1;
	}

	.contact-form {
		background-color: var(--color-light);
		height: 500px;
		width: 50%;
		border-radius: 15px;
		padding: 60px 40px;
		display: flex;
		flex-direction: column;
		gap: 20px;

		position: absolute;
		top: 0;
		right: 0;

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

			input {
				padding: 15px;
				border: 1px solid #ccc;
				border-radius: 10px;
				font-weight: 400;
				font-size: 14px;
				color: var(--text-color);
				transition: all 0.3s;

				&:focus {
					outline: none;
				}

				&::placeholder {
					color: var(--text-color);
				}
			}

			select {
				padding: 15px;
				border: 1px solid #ccc;
				border-radius: 10px;
				font-weight: 400;
				font-size: 14px;
				color: var(--text-color);
				transition: all 0.3s;
				width: 100%;

				&:focus {
					outline: none;
				}
			}
		}

		.row {
			display: flex;
			gap: 20px;

			.group-form {
				flex: 1;
			}
		}

		button {
			border: none;
			background-color: var(--color-primary);
			color: var(--color-light);
			font-weight: 700;
			padding: 20px;
			border-radius: 999px;
			cursor: pointer;
			transition: background-color 0.3s;
			margin-top: 30px;

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

	@media (max-width: 992px) {
		& > div {
			flex-direction: column;
			gap: 10px;
		}

		.spacer {
			height: 400px;
			flex: auto;
			width: 100%;
		}

		.contact-form {
			width: 100%;
			top: 45%;
			right: 0;
		}
	}

	@media (max-width: 768px) {
		.spacer {
			height: 700px;
		}

		.contact-form {
			height: auto;
			padding: 30px 20px;
			top: 35%;

			.row {
				flex-direction: column;
			}
		}
	}
}