@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Ibarra+Real+Nova&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two&display=swap');

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
body{
	max-width: 100%;
	overflow-x: hidden;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

/*--Header--*/
.grid-container {
	display: grid;
	width: 100%;
	box-sizing: border-box;
}
/*Navigation*/
		#nav-logo {
		width: 70px; 
		height: 70px;
		animation: rotation 10s infinite linear;
		}
		.tab{
			width: 100%;
			background-color: rgba(0,0,0,0.5);
			padding: 10px;
		}
		.tab li{
			list-style: none;
			display: inline-block;
			vertical-align: top;
		}
		.tab li a{
			text-decoration: none;
			display: block;
			color: #fff;
			font-size: 15px;
			font-family: 'Assistant', sans-serif;
			font-weight: 600;
			padding: 25px;
			transition: all ease 0.5s;
		}
		.tab li a:hover{
			background-color: orangered;
		}
/*--Modal--*/
	.modal-social{
		width: 25px;
		height: 25px;  
	}
/*--Banner--*/
	.item1 {
		background: url("img/banner.gif") no-repeat;
		background-size: cover;
		height: 100vh;
		max-width: 100%;
		box-sizing: border-box;
	}
	.fade-in-image { 
		animation: fadeIn 2.5s; 
	}
	@keyframes fadeIn {
		0% { opacity: 0; }
		100% { opacity: 1; }
	  }
	#banner-logo{
		max-width: 100%;
		height: 20%;
		width: 20%;
		margin: auto;
		display: block;
		position: relative;
		top: 70px;
	}

/*Divider*/
.item2{
	width: 100%;
	height: 175vh;
	background-size: cover;
	background-image: url("./img/divider-bg2.jpg");
	padding: 50px;
}
/*--Welcome-text--*/
	.welcome{
		margin: 25px auto 100px auto;
		padding: 50px 10px;
		width: 885px;
		background-color:cornsilk;
		border-radius: 50px;
	}
	#welcome-title{
		text-align: center;
		font-family: 'Dancing Script', cursive;
		font-size: 50px;
		margin: 30px auto;
	}
	#welcome-para{
		text-indent: 25px;
		font-family: 'Ibarra Real Nova', serif;
		font-size: 24px;
		line-height: 25px;
		text-align: justify;
		padding: 20px 0px;
		letter-spacing: -1px;
	}

/*Content*/
.item3{
	background-image: url(img/welcome1.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0px;
}
/*--Menu--*/
	.flexbox-container{
		margin: auto 100px 0px 100px;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.897);	
	}
	.flexbox1 {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.flexbox1 > div {
		background-color:blanchedalmond;
		width: 100%;
	}
/*--Menu-img--*/
		.o1 {
			box-sizing: border-box;
			padding: 100px 100px 50px 100px;
		}
		.o1 > .img-container1 {
			height: 500px;
			width: 500px;
			overflow: hidden;
			border-radius: 25px;
		}
		.img-container1 > img {
			max-width:100%;
			box-sizing: border-box;
			transform: scale(1);
			transition: 0.3s ease-in-out;
		}
		.img-container1 > img:hover {
			transform: scale(1.2);
		}
/*--Menu-txt--*/
		.txt-container1 {
			padding: 50px 10px;
			margin: 150px 100px 100px 0px;
			width: 525px;
			background-color:cornsilk;
			border-radius: 50px;
		}
		#title1 {
			font-family: 'Abril Fatface', cursive;
			font-size: 30px;
			text-align: center;
		}
		#para1 {
			text-indent: 25px;
			font-family: 'Ibarra Real Nova', serif;
			font-size: 24px;
			line-height: 25px;
			text-align: justify;
			padding: 20px 0px;
			letter-spacing: -1px;
		}
		a#menu-link {
			font-family: 'Assistant', sans-serif;
			font-weight: 600;
			text-align: center;
			text-decoration: none;
			padding: 10px;
			color: white;
			display: block;
			width: 250px;
			margin: auto;
			background-color: orangered;
		}
/*--Reservation--*/
		.flexbox2 {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		.flexbox2 > div {
			background-color: cornsilk;
			width: 100%;
		}
/*--Reservation-txt--*/
			.txt-container2 {
				position: relative;
				padding: 75px 10px;
				margin: 100px 0px 100px 100px;
				width: 525px;
				background-color: blanchedalmond;
				border-radius: 50px;
			}
			#title2 {
				font-family: 'Abril Fatface', serif;
				font-size: 30px;
				text-align: center;
				letter-spacing: -1px;
			}
			#para2 {
				text-indent: 25px;
				font-family: 'Ibarra Real Nova', serif;
				font-size: 24px;
				line-height: 25px;
				text-align: justify;
				padding: 20px 0px;
				letter-spacing: -1px;
			}
			a#reserve-link {
				font-family: 'Assistant', sans-serif;
				font-weight: 600;
				text-align: center;
				text-decoration: none;
				padding: 10px;
				color: white;
				display: block;
				width: 250px;
				margin: auto;
				background-color: orangered;
			}
/*--Reservation-img--*/
			.o3 {
				box-sizing: border-box;
				padding: 50px 100px 100px 100px;
				position: relative;
			}
			.o3 > .img-container2 {
					height: 500px;
					width: 500px;
					overflow: hidden;
					border-radius: 50px;
				}
			.img-container2 > img {
				max-width:100%;
				max-height:100%;
				width: auto;
				height: 100%;
				box-sizing: border-box;
				transform: scale(1);
				transition: 0.3s ease-in-out;
			}
			.img-container2 > img:hover {
				transform: scale(1.2);
			}
/*About*/
		.flexbox3 {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		.flexbox3 > div {
			background-color:blanchedalmond;
			width: 100%;
		}
		#about-headline{
			text-align: center;
			font-family: 'Dancing Script', cursive;
			padding: 25px;
			font-size: 50px;
		}
/*About-ctr*/
		.about-ctr {
			background: url("./img/about\ us.jpg");
			padding: 50px;
		}
/*About-img*/
		.about-img-ctr{
			padding: auto 25% auto 50%;
			width: 100%;
			margin: auto;
		}
		#about-img {
			width: 350px;
			height: 350px;
			display: block;
			margin: auto;
			padding: 25px;
		}
/*About-txt*/
		.about-txt-ctr {
			background-color: white;
			margin: auto;
			padding: 50px;
			width: 525px;
			border-radius: 50px;
			
		}
		#about-title {
			font-size: 35px;
			text-align: center;
		}
		#about-para {
			text-align: justify;
		}
/*Testimonials*/
#feedback-headline {
	background-color: cornsilk;
	text-align: center;
	font-family: 'Dancing Script', cursive;
	padding: 25px;
	font-size: 50px;
}
.card {
	margin: 10px;
}
.feedback-ctr {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: cornsilk;
	padding-bottom: 50px;
}
.card-title {
	text-align: center;
}

	
/*--Footer--*/
.item4{
		max-height: 100%;
		bottom:0;
		width:100%;
		padding: 50px 50px 25px 50px;
		height:auto;   
		background-color: orangered;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: center;
}
/*--Customer Support--*/
	.customer{
		width: 100%;
	}
	#customer-title{
			font-family: 'Assistant', sans-serif;
			font-weight: 500;
			color: white;
			padding: 10px;
	}
	.customer-list{
		color: white;
		list-style-type: none;
		font-family: 'Assistant', sans-serif;
		font-weight: 400;
		padding: 5px;
	}
	.customer-txt{
		text-decoration: none;
		color: white;
		font-family: 'Assistant', sans-serif;
		font-weight: 400;
		list-style-type: none;
		margin-left: 50px;
	}
	.customer-txt:hover {
		color: blanchedalmond;
	}
/*--Menu-footer--*/
	.menufoot{
		width: 100%;
	}
	#menufoot-title{
		font-family: 'Assistant', sans-serif;
		font-weight: 500;
		color: white;
		padding: 10px;
		visibility: hidden;
	}
	.menufoot-list{
		color: white;
		list-style-type: none;
		font-family: 'Assistant', sans-serif;
		font-weight: 400;
		padding: 5px;
	}
	.menufoot-txt{
		text-decoration: none;
		color: white;
		font-family: 'Assistant', sans-serif;
		font-weight: 400;
		list-style-type: none;
		margin-left: 100px;
	}
	.menufoot-txt:hover {
		color: blanchedalmond;
	}
/*--Logofoot--*/
	.logofoot{
		padding-top: 25px;
		padding-right: 90px;
		padding-left: 90px;
		padding-bottom: 25px;
	}
	#logofoot-img{
		width: 150px;
		height: 150px;
		vertical-align: middle;
		margin: auto;
		animation: rotation 10s infinite linear;
	}
	@keyframes rotation {
		from {
		  transform: rotate(0deg);
		}
		to {
		  transform: rotate(359deg);
		}
	  }
/*--Social--*/
	.social{
		width: 100%;
	}
	#social-title{
		font-family: 'Assistant', sans-serif;
		font-weight: 500;
		color: white;
		padding: 10px;
	}
	img.social-img{
		width: 30px;
		height: 30px;
		padding: 3px;
	}
	.social-txt{
		text-decoration: none;
		color: white;
		font-family: 'Assistant', sans-serif;
		font-weight: 400;
	}
	.social-txt:hover {
		color: blanchedalmond;
	}
	table{
		padding-left: 50px;
	}
/*--Contacts--*/
	.contacts{
		width: 100%;
	}
	#contacts-title{
		font-family: 'Assistant', sans-serif;
		font-weight: 500;
		color: white;
		padding: 10px;
	}
	.contacts-list{
		color: white;
		list-style-type: none;
		font-family: 'Assistant', sans-serif;
		font-weight: 400;
		padding-bottom: 10px;
	}
	.contacts-txt{
		text-decoration: none;
		font-family: 'Assistant', sans-serif;
		font-weight: 400;
		color: white;
	}
	.contacts-txt:hover {
		color: navajowhite;
	}
/*--Copyright--*/
#copyright{
	font-family: 'Assistant', sans-serif;
	font-weight: 500;
	color: white;
	background-color: orangered;
	text-align: center;
	padding: 10px;
	margin-bottom: 0px;
}

/*--Responsiveness--*/
@media screen and (max-width: 745px) {
	/*--Navigation--*/
	.tab li{
		list-style: none;
		display: block;
		text-align: center;
	}
	.item1 {
		height: fit-content;
		max-width: 100%;
		box-sizing: content-box;
		position: relative;
	}
	#nav-logo{
		width: 300px; 
		height: 300px;
		display: inline-block;
		padding: 50px;
		vertical-align: bottom;
	}
	#banner-logo{
		display: none;
	}

	/*--Content--*/
	.flexbox1, .flexbox2, .flexbox3{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.flexbox1 .o1{
		order: 1;
	}
	.img-container1{
		margin: auto;
	}
	.txt-container1{
		margin: auto auto auto auto;
	}
	.flexbox1 .o2{
		order: 2
	}
	.o4{
		order: 4
	}
	.txt-container2 {
		margin: auto auto 50px auto;
	}
	.img-container2 {
		margin: auto;
	}
	.item3{
		background-position: center;
	}
	.o1{
		order: 1
	}
	.o5{
		order: 5
	}
	/*--Footer--*/
	.item4{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	#customer-title, #menufoot-title, #social-title, #contacts-title{
		margin: auto;
		padding: 10px;
		display: block;
		text-align:center;
	}
	.customer-txt, .menufoot-txt, .social-txt, .contacts-list, .contacts-txt {
		margin: auto;
		padding: 10px;
		display: block;
		text-align:center;
	}
	.logofoot, #logofoot-img{
		display: none;
	}
	table{
		margin: auto;
	}
}