/* Home */

:root {
	--main_color: #b46731;
}

body {
	background: #17181a;
	color: #e0e0e0;
	overflow-x: hidden;
	font-family: "Poppins", sans-serif;
	position: relative;
}

/* ---HEADER---- */

header {
	position: absolute;
	top: 0;
	width: 100%;
	height: 95vh;
	transition: 0.5s ease-in-out;
	border-bottom: 0.01rem solid #d1d1d178;
}

.heading {
	position: absolute;
	top: calc(50% - 18vh);
	left: calc(50% - 25vw);
	z-index: 1;
	width: 50vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: white;
}

.heading_content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: 0.5s ease-in-out;
}

.heading_content > h1 {
	filter: drop-shadow(2px 2px 5px #5c3214);
}

.heading_content > p {
	padding-block: 1rem;
	font-size: 1.2rem;
}

.btn_wrapper {
	margin-top: 1.7rem;
	display: flex;
	gap: 3rem;
}

.btn_w {
	border: 2px solid var(--main_color);
	color: var(--main_color);
}

.linkrefs_btn a {
	color: #e0e0e0;
	font-weight: 600;
	font-family: "Poppins", sans-serif;
}

.linkrefs_btn {
	padding-inline: 4rem;
	transform: scale(1);
	transition: transform 0.6s;
}

.linkrefs_btn:hover {
	transform: scale(1.06);
}

.linkrefs_btn:first-child {
	border: 2px solid var(--main_color);
}

.linkrefs_btn:last-child {
	background: var(--main_color);
}

.linkrefs_btn:last-child a {
	color: #17181a;
}

.linkrefs_btn:hover:first-child {
	box-shadow: 0px 0px 7px var(--main_color);
}

.linkrefs_btn:hover:last-child {
	box-shadow: 0px 0px 7px #17a3ad;
}

.slider {
	overflow: hidden;
	height: 100%;
}

.slider figure {
	position: relative;
	width: 500%;
	height: 100%;
	animation: imageSlider 25s infinite;
	transition: 0.5s ease-in-out both;
}

.slider .image-slider {
	width: 20%;
	float: left;
	height: 100%;
}

.img-1 {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url(../imgs/gallery/gallery_1.jpg) no-repeat center;

	background-size: cover;
}
.img-2 {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url(../imgs/gallery/gallery_2.jpg) no-repeat center;

	background-size: cover;
}
.img-3 {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url(../imgs/gallery/gallery_3.jpg) no-repeat center;

	background-size: cover;
}

@keyframes imageSlider {
	0% {
		left: 0%;
	}
	20% {
		left: 0%;
	}
	25% {
		left: -100%;
	}
	45% {
		left: -100%;
	}
	50% {
		left: -200%;
	}
	70% {
		left: -200%;
	}
	75% {
		left: -300%;
	}
	95% {
		left: -300%;
	}
	100% {
		left: -300%;
	}
}

.separate_header {
	position: relative;
}

.separate_header p {
	position: absolute;
	top: -1rem;
	left: 0;
	right: 0;
	text-align: center;
}
.separate_header i {
	font-size: 2.8rem;
	background: #17181a;
	border-radius: 50%;
}

/*----MAIN CONTENT----*/

main {
	padding-top: 95vh;
	padding-bottom: 0 !important;
	padding-inline: 0;
	z-index: 1;
}

/* -1e section- */

.discoverUs_section {
	padding: 3.5rem 2.5rem;
}

.discoverUs_section h2 {
	padding-bottom: 1rem;
}

.discoverUs_section > .container {
	position: relative;
}

.overview {
	padding: 4rem 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	position: relative;
}

.restaurant_description {
	padding: 1rem;
	background-color: #dcdddfa2;
	backdrop-filter: blur(10px);
	color: #3a3c3f;
	font-weight: 600;
	height: 350px;
	width: 50%;
	position: absolute;
	right: 40%;
}

.restaurant_description > div {
	position: relative;
	text-align: justify;
}

.overview_img {
	display: flex;
	align-items: center;
	justify-content: end;
	gap: 0.7rem;
	width: 80%;
}

.overview_img img:first-child {
	width: 300px;
	height: 100%;
}

.overview_img img:last-child {
	width: 230px;
	height: 80%;
}

.overview .bx-heart {
	margin-top: 1.5rem;
	font-size: 2rem;
}

/* 2e section */

.special_services {
	padding: 2rem 4rem;
	background: #202124;
}

.underlined_subtitle {
	padding-bottom: 0.5rem;
	margin-bottom: 3rem;
	border-bottom: 2px solid var(--main_color);
}

.services {
	padding-block: 3rem;
	display: flex;
	gap: 2rem;
	justify-content: center;
}

.services > div:first-child {
	width: 40%;
	padding: 1rem;
}

.y {
	display: flex;
	justify-content: center;
	padding-bottom: 1rem;
}

.y.type.type::before {
	border-top-color: #d2d2d2;
	border-left-color: #d2d2d2;
}

.y.type.type::after {
	border-bottom-color: #d2d2d2;
	border-right-color: #d2d2d2;
}

.services > div:first-child img {
	padding-top: 1rem;
	width: 90%;
}

.services > div:last-child {
	flex: 2;
	display: flex;
	flex-direction: column;
	height: fit-content;
}

.first_serviceContainer,
.second_serviceContainer {
	display: flex;
	gap: 2rem;
	justify-content: center;
	height: fit-content;
}

.first_serviceContainer .serviceCard:nth-child(1) {
	margin-top: 2rem;
}

.second_serviceContainer .serviceCard:nth-child(1) {
	margin-top: 2rem;
}

.serviceCard {
	width: 280px;
	height: 280px;
	border: 2px solid #17a3ad;
	box-shadow: 1px 1px 3px #17a3ad;
	padding: 1rem 2rem;
	border-radius: 15px;
	cursor: pointer;
	transition: 0.5s;
	overflow: hidden;
	position: relative;
}

.serviceCard:hover {
	transform: scale(1.05);
	transition: all 0.4s ease-in-out;
}

.serviceCard::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to bottom,
		rgba(17, 17, 17, 0.075) 0%,
		rgba(46, 117, 121, 0.868) 100%
	);
	z-index: -2;
	bottom: -100%;
	left: 0;
	border-radius: 15px;
	transition: 0.4s ease-in;
}
.serviceCard:hover::before {
	bottom: 0;
}

.special_services p {
	font-size: 0.9rem;
}

.special_services h4 {
	padding-block: 0.7rem;
}

/* 3e section*/

.menu_section {
	padding: 4rem;
	position: relative;
}

.dish_container {
	padding-bottom: 4rem;
}

.simple_paragraph {
	padding: 2rem;
}

.menu_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5rem;
}

.menu_container > .food_card {
	width: 250px;
	min-width: 170px;
	background-color: #28292c;
	box-shadow: 0 0 5px 5px rgb(24 21 21 / 85%);
	cursor: pointer;
	transition: 0.5s ease-in-out;
	transform: scale(1);
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}

.food_card:hover {
	background: #5a5c60;
	transform: scale(1.05);
	transition: 0.5s ease-in-out;
}

.container_img {
	position: relative;
	clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.container_img img {
	width: 100%;
	display: block;
}

.container_img::before {
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
	opacity: 0.4;
	transform: scaleY(1);
	transition: 0.5s ease-in-out;
}

.card_1 > .container_img::before {
	background: linear-gradient(135deg, #0100ec, #fb36f4);
}

.card_2 > .container_img::before {
	background-image: linear-gradient(135deg, #ff049f, #fa9805);
}

.card_3 > .container_img::before {
	background-image: linear-gradient(135deg, #fece23, #f48507);
}

.card_4 > .container_img::before {
	background-image: linear-gradient(135deg, #362157, #1b70e6);
}

.card_5 > .container_img::before {
	background: linear-gradient(135deg, #0100ec, #fb36f4);
}

.card_6 > .container_img::before {
	background-image: linear-gradient(135deg, #550717, #d85094);
}

.food_card:hover > .container_img::before {
	background: transparent;
	transition: 0.5s ease-in-out;
	transform: scaleY(0.1);
}

.details {
	padding: 0.5rem 1rem 1rem 0.5rem;
	position: relative;
}

.details h3 {
	color: #f3f2f2;
	font-size: 0.9rem;
	font-weight: 400;
}

.details > p {
	color: #a0a0a0;
	font-size: 0.8rem;
}

.details hr {
	height: 0.1rem;
	background: #565656;
	margin-bottom: 0.5rem;
}

.food-card_price {
	font-weight: 800 !important;
	color: var(--main_color);
	display: flex;
	justify-content: space-between;
}

.price {
	font-size: 0.9rem;
	display: flex;
	align-items: flex-end;
}

.buttonToBuy {
	display: flex;
	justify-content: space-between;
	padding-bottom: 1.5rem;
}

.bx-cart-download {
	font-size: 1.3rem;
	padding-block: 0.5rem;
}

.btn_buy {
	background: var(--main_color);
	font-size: 0.5rem;
	color: #e0e0e0 !important;
	padding: 0.3rem 0.9rem;
}

.btn_buy:hover {
	letter-spacing: 0.2rem;
}

.right_side {
	width: 40px;
	position: absolute;
	top: 35vh;
	right: 3vh;
	transform: translateY(-5%);
	z-index: 10;
	color: rgb(168, 178, 209);
}

.mailto {
	display: flex;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	position: relative;
}
.mailto::before {
	content: "";
	display: block;
	width: 0.05rem;
	height: 35vh;
	margin: 0px auto;
	background-color: #17a3ad;
	filter: drop-shadow(1px 1px 1px #17a3ad);
}
.mailto::after {
	content: "";
	display: block;
	width: 0.05rem;
	height: 30vh;
	margin: 0px auto;
	background-color: #17a3ad;
	filter: drop-shadow(1px 1px 1px #17a3ad);
}
.mailto a {
	color: #acafb5;
	font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono",
		"Lucida Console", Monaco, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	writing-mode: vertical-rl;
	padding: 10px;
}

/* ... 3. Categories... */

.categories_section {
	background: url(../imgs/gallery/gallery_4.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
}

.categories {
	padding: 2rem 4rem;
	background: #20212488;
}

.categories h2 {
	color: white;
}

.categories hr {
	height: 0.1rem;
	background-color: white;
}

.categories img {
	width: 100%;
}

.categories_wrapper {
	padding-block: 2rem;
}

.categories_container {
	padding-block: 2rem;
	display: flex;
	justify-content: space-between;
}

.categorie_1 {
	padding-inline: 20%;
}

.categories_section figure {
	background-color: #87a0a266;
	border-radius: 100%;
	width: 180px;
	height: 180px;
	padding: 1rem;
	position: relative;
}

.categories_section figure img {
	transition: 0.3s ease-in-out;
	transform: scale(1);
}

.categories_section figure:hover img {
	transform: scale(1.1);
	transition: 0.3s ease-in-out;
}

figcaption {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background: #17212a80;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 600;
	transition: 0.3s ease-in-out;
}

figcaption:hover {
	cursor: pointer;
	opacity: 0;
}

/*--Hours-- */

.opening_section {
	background: linear-gradient(rgba(0, 0, 0, 0.321), rgba(0, 0, 0, 0.944)),
		url(../imgs/backgrounds/bg_2.jpg) no-repeat center center;
	background-size: cover;
	padding: 5rem;
	display: flex;
	position: relative;
}

.opening_section > .container {
	width: 350px;
	padding: 1rem;
	background: #0000002b;
	backdrop-filter: blur(6px);
	box-shadow: 1px 1px 5px #9f9f9f2e;
}

.opening_section > .container > div {
	margin-block: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.opening_section h2,
h3 {
	font-weight: 100;
}

.opening_section .unederlined_paragraph > span:not(.bx-circle) {
	background: #d2dfe4;
	filter: drop-shadow(1px 1px 1px #d2dfe4);
}

.opening_section .unederlined_paragraph {
	width: 73%;
}

.opening_section .bx-circle {
	color: #d2dfe4;
}

.transition {
	z-index: 1000;
	width: 100%;
	position: absolute;
	bottom: -4rem;
	left: 0;
	right: 0;
}

textpath {
	font-size: 4rem;
}

svg {
	width: 100%;
}

text {
	letter-spacing: 20px;
	fill: var(--main_color);
	font-weight: 600;
}

.anim-texte {
	transform-origin: center center;
	animation: anim-texte 20s infinite;
}
@keyframes anim-texte {
	50% {
		transform: rotate(1turn);
	}
}

/* --- why Us section --- */

.whyUs_section {
	padding: 3rem 2rem;
	background: #202124;
}

.main__container {
	padding-block: 2rem;
}

.main__container p {
	line-height: 1.8rem;
	text-align: justify;
}

.content_1 {
	display: flex;
	justify-content: start;
}

.content_1 > div:first-child,
.content_3 > div:last-child,
.content_2 > div {
	width: 30% !important;
}

.content_1 > div,
.content_2 > div,
.content_3 > div {
	padding: 1rem;
	margin-block: 1rem;
}

.content_2 {
	display: flex;
	justify-content: center;
}

.content_3 {
	display: flex;
	justify-content: end;
}

.numbers {
	font-size: 2rem;
	font-weight: 700;
	padding-right: 0.5rem;
}

.img_gif1,
.img_gif2 {
	display: flex;
	width: 50%;
}

.img_gif1 img,
.img_gif2 img {
	width: 150px;
}

.img_gif1 {
	justify-content: end;
}

.img_gif2 {
	justify-content: start;
}

/* ------//------ */
/* --custumers -- */

.custumers_scetion {
	padding-block: 3rem;
}

.custumers_cardsContainer {
	padding: 2rem;
	display: flex;
	justify-content: center;
	gap: 3rem;
	overflow: hidden;
}

.wrapper__flip {
	padding-block: 0.8rem;
	height: 400px;
	width: 300px;
	perspective: 2500px;
	-webkit-perspective: 2500px;
	overflow: hidden;
}

.flipCard {
	height: 100%;
	width: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: 1s;
	border: 1px solid #5b5b5c;
	cursor: pointer;
}

.wrapper__flip:hover .flipCard {
	cursor: pointer;
	transform: rotateY(-180deg);
	cursor: pointer;
	transition: 1s;
}

.front {
	background: #252628;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	backface-visibility: hidden;
	flex-direction: column;
}

.back {
	background: url(../imgs/backgrounds/bg_4.jpg) no-repeat center;
	background-size: cover;
	height: 100%;
	width: 100%;
	position: absolute;
	bottom: 0;
	transform: rotateY(180deg);
	backface-visibility: hidden;
}

.container__flip {
	background: #252628;
	height: 50px;
	width: 100%;
	position: absolute;
	bottom: 0;
	padding-top: 1rem;
	padding-inline: 1rem;
	display: flex;
	justify-content: space-between;
}

.flip_details {
	background: #6494a791;
	backdrop-filter: blur(5px);
	height: 87%;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	font-size: 0.8rem;
	font-weight: 600;
	text-align: center;
	color: #1e1e20;
}

.flip_details .postDate {
	padding-top: 0.5rem;
	font-size: 0.7rem;
}

.custumer_star {
	font-size: 0.8rem;
}

.custumer figure {
	margin-block: 1.5rem;
	width: 130px;
	height: 130px;
}

.custumer figure img {
	width: 100%;
	border-radius: 100%;
}

.custumer_details h3 {
	padding-bottom: 1rem;
}

.custumer_details .cust_content {
	font-size: 0.8rem;
}

.custumer_details .index {
	color: #848d9d;
	font-size: 0.9rem;
}

.custumer_details .address {
	padding-block: 0.3rem;
}

/* ------ */

.X_btnWrapper {
	padding-block: 3rem;
	display: flex;
	justify-content: space-between;
}

.X_btn {
	color: #a0a0a0;
	padding: 1.2rem 1.5rem;
	border: none;
	border-radius: 15px;
	box-shadow: 0px 0px 3px #17a3ad;
	transition: 0.3s ease-in-out;
}

.X_btn:hover {
	transform: scale(1.1);
	box-shadow: 0px 0px 7px #17a3ad;
}

.event_section {
	position: relative;
}

.upcomming_event {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.events {
	padding: 4rem 3rem;
	display: flex;
	position: relative;
}

.events > div:first-child {
	flex: 1;
}

.events > div:last-child {
	background-color: #2c2c2c87;
	backdrop-filter: blur(15px);
	width: 50%;
	height: 65%;
	padding: 1rem;
	position: absolute;
	top: 5.2rem;
	left: 43%;
}

.events img {
	width: 60%;
}

.eventOfTheDay {
	margin-top: 2rem;
	display: flex;
	gap: 1.2rem;
}

.eventOfTheDay .date {
	width: 90px;
	padding: 1rem;
	background: #5b6a7f;
}

.date span:first-child {
	padding-inline: 1rem;
	border-bottom: 2px solid #b8b8b8;
	font-size: 1.2rem;
}

.event_details > p > span {
	padding-right: 1rem;
}

.event_details .bx {
	padding-right: 0.5rem;
}

.book_event {
	display: flex;
	justify-content: end;
}

.event_descriptions {
	padding: 0.2rem 0;
}

/* -- **8th section : Rate_us** -- */

.rate_section {
	padding: 2rem;
	background: #d1d1d1;
}

.rate_section h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.8rem;
}

.rate_us {
	margin: 2rem auto;
	padding: 1rem;
	width: 500px;
	border-radius: 5px;
	background: url(../imgs/backgrounds/bg_3.jpg) no-repeat center center;
	background-size: cover;
}

.rate_content {
	padding: 1rem;
	background-color: #cb6f0d38;
	backdrop-filter: blur(10px);
	color: #17181a;
}

.rate_content > h4,
.rate_content p {
	padding-bottom: 1rem;
}

.rate_content p {
	font-size: 0.9rem;
}

/* !-- Medias Queries -- */

@media (min-width: 1200px) {
	.menu_container {
		gap: 7rem;
	}
}

@media (max-width: 1200px) {
	.menu_section {
		padding: 2.5rem 0;
	}
	.menu_container {
		gap: 2rem;
	}
	.services {
		display: block;
	}
	.services > div:first-child {
		width: 100%;
	}
	.services > div:first-child img {
		width: 60%;
	}

	.type {
		margin: 2rem 0;
	}
}

@media (max-width: 992px) {
	.heading {
		top: calc(50% - 20vh);
		left: calc(50% - 45vw);
		z-index: 1;
		width: 95vw;
	}
	.menu_section {
		display: block;
	}

	.overview {
		margin-block: 3rem;
		padding: 0;
		display: block;
		background: url(../imgs/gallery/gallery_2.jpg) no-repeat;
	}

	.restaurant_description {
		width: 100%;
		position: initial;
		backdrop-filter: blur(15px);
		height: fit-content;
		text-align: justify;
	}

	.overview_img {
		display: none;
	}

	.categories {
		padding: 2rem 1rem;
	}

	.categories_section figure {
		width: 170px;
		height: 170px;
	}

	.categories_container {
		padding-block: 1rem;
	}

	.cards {
		padding: 4rem 1.5rem;
		gap: 2rem;
	}

	.right_side {
		display: none;
	}

	.menu_container > .food_card {
		width: 225px;
	}

	.special_services {
		padding-inline: 0;
		margin: 0;
	}

	.special_services > div {
		padding: 1rem;
	}

	.events {
		justify-content: center;
	}

	.events > div:first-child {
		display: none;
	}

	.events > div:last-child {
		position: initial;
		width: 75%;
	}

	.custumers_cardsContainer {
		padding: 0.5rem;
		gap: 1rem;
	}

	.rate_us {
		margin: 2rem auto;
		padding: 1rem;
		width: 100%;
	}

	.content_1 > div:first-child,
	.content_3 > div:last-child,
	.content_2 > div {
		width: 100% !important;
	}

	.content_3 > div:nth-child(2) {
		display: none;
	}
}

@media (min-width: 768px) {
	.opening_section {
		background-attachment: fixed;
	}
}

@media (max-width: 768px) {
	.discoverUs_section {
		padding: 4rem 1rem;
	}

	.right_side {
		right: 1vh;
	}

	.categories_section figure {
		width: 150px;
		height: 150px;
	}

	.X_btnWrapper {
		flex-direction: column;
		gap: 2rem;
		align-items: center;
	}

	.linkrefs_btn {
		padding-inline: 0.5rem;
	}

	.special_services {
		display: block;
		height: fit-content;
	}

	.special_services > div {
		display: flex;
		gap: 2rem;
	}

	.events {
		padding: 4rem 1.5rem;
	}

	.events > div:last-child {
		width: 100%;
	}

	.food_card {
		margin: 0 auto;
	}

	.custumers_cardsContainer {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
}

@media (max-width: 625px) {
	.btn_wrapper {
		gap: 0.8rem;
	}
	.first_serviceContainer,
	.second_serviceContainer {
		flex-direction: column;
		align-items: center;
	}
	.opening_section {
		padding: 4rem 0;
	}

	.categories_container {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		padding-block: 0.5rem;
	}

	.eventOfTheDay {
		display: block;
	}

	.rate_section {
		padding: 2rem 0;
	}
	.events {
		padding: 3rem 0;
	}
	.content_1,
	.content_3 {
		display: block;
	}

	.whyUs_section {
		padding: 3rem 0;
	}

	.main__container p {
		font-size: 0.8rem;
	}

	.content_1 > div,
	.content_2 > div,
	.content_3 > div {
		padding: 0;
		margin-block: 1rem;
	}
}

@media (max-width: 350px) {
	nav .logo {
		font-size: 1rem;
	}

	.discoverUs_section {
		padding: 4rem 0;
	}

	.services > div:first-child img {
		width: 90%;
	}

	.serviceCard {
		width: 95%;
		height: fit-content;
	}
}