@font-face {
	font-family: Samurai;
	src: url("../resources/CFSamuraiBob.ttf");
}

body {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 100%;
}


/*---Navigatie---*/
.navbar {
	background: transparent;
}

.navbar-shrink {
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-brand {
	font-size: 2em;
	font-weight: bolder;
}


.navbar a:not(.navbar-brand) {
	font-weight: bolder;
	font-size: 1.4em;
	color: #ffffff !important;
}

.navbar a:not(.navbar-brand):hover {
	color: red !important;
}

/* Vestigingen */
.grid-container-vestigingen {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding: 20px;
}

.grid-item {
	flex: 1;
	max-width: calc(50% - 10px);
	padding: 10px;
	background-color: #c50000;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.grid-item h1 {
	font-family: Samurai;
	font-size: 50px;
	margin-bottom: -20px;
	margin-top: -20px;
}

.grid-item h2 {
	font-family: Samurai;
	font-size: 30px;
	margin-top: 10px;
	color: white;
}

.grid-item p {
	text-align: center;
	font-weight: bolder;
	color: white;
}

.button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #212529;
	color: white;
	border-radius: 5px;
	text-decoration: none !important;
	font-weight: bold;
}

.button:hover {
	background-color: white;
	color: #212529;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
	.grid-container {
		flex-direction: column;
	}

	.grid-item {
		max-width: 100%;
		margin-bottom: 10px;
	}
}


/* Startscherm */
.hero-container-startscherm {
	position: relative;
	width: 100%;
	max-height: 100vh;
	overflow: hidden;
}

.background-image {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.overlay-kyoto {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 100%;
	color: white;
}

.Kyoto {
	margin-bottom: 10px;
	font-size: 5rem;
	font-family: Samurai;
	color: white;
	letter-spacing: 5px;
	margin: 0;
}


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

/* Media query for smaller screens */
@media (max-width: 768px) {
	.hero-container {
		min-height: 50vh;
	}


	.button {
		font-size: 16px;
	}
}


/* 	<!-- Kyoto-Text --> */
.features-container-Kyoto {
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
	max-height: calc(100vh - 70px);
	overflow: hidden;
}

.feature-Kyoto {
	position: relative;
	flex-basis: 50%;
	background-color: #f0f0f0;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.feature-image-Kyoto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-overlay-Kyoto {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(128, 128, 128, 0.7);
}

.feature-content-Kyoto {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px;
	text-align: center;
	color: white;
	background-color: rgba(128, 128, 128, 0.7);
	z-index: 2;
}

.fill-width-Kyoto {
	width: 100%;
	text-align: justify;
	text-justify: inter-word;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
	.hero-container {
		max-height: 70vh;
	}

	.features-container-Kyoto {
		padding: 10px;
	}

	.feature-Kyoto {
		flex-basis: 100%;
	}

	.feature-image-Kyoto {
		width: 100%;
		height: auto;
	}

	.image-overlay-Kyoto,
	.feature-content-Kyoto {
		text-align: left;
	}
}


/* Parallax Kyoto */
.parallax-text-Kyoto {
	padding-top: 7rem;
	padding-bottom: 7rem;
	color: white;
	text-justify: inter-word;
}

.parallax {
	position: relative;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("../resources/bloem.jpg") no-repeat center center scroll;
	background-size: cover;
}

@media (max-width: 768px) {
	.parallax-text-Kyoto {
		height: 60vh;
	}
}

/*Kyoto Maps*/
.grid-container-kyotomaps {
	display: flex;
	flex-wrap: nowrap;
	background-color: black;
	justify-content: space-between;
	/* Space between columns */
	padding: 20px;
}

.grid-item-maps {
	flex: 1;
	max-width: calc(50% - 10px);
	padding: 10px;
	background-color: #c50000;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.grid-item-maps h1 {
	font-family: Samurai;
	font-size: 50px;
	margin-bottom: -20px;
	margin-top: -20px;
}

.grid-item-maps h2 {
	font-family: Samurai;
	font-size: 25px;
	/* margin-bottom: -20px; */
	margin-top: 5px;
	color: #212529;
}

.restaurant-info {
	text-align: center;
	color: white;
}

.kop-titel {
	font-family: Samurai;
	font-size: 30px;
	color: #212529;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
	.grid-container-kyotomaps {
		flex-direction: column;
	}

	.grid-item-maps {
		max-width: 100%;
		margin-bottom: 10px;
	}
}

iframe {
	width: 100%;
	height: 400px;
}


/* Footer */
.footer {
	background-color: black;
	color: white;
	padding: 20px;
	text-align: center;
}

.footer-columns {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
	gap: 20px;
}

.footer-column {
	flex: 1;
	min-width: 180px;
	padding: 10px;
	text-align: left;
}

.footer-column h4 {
	margin-bottom: 10px;
	font-size: 1.2em;
}

.footer-column p {
	margin: 0;
	line-height: 1.5;
}

.footer-column a {
	color: white;
	text-decoration: underline;
}


/* Berichtje */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
	background-color: white;
	border-radius: 10px;
	width: 60%;
	max-width: 400px;
	padding: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}


.hidden {
	display: none;
}

/* Berichten */

.button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #212529;
	color: white;
	border-radius: 5px;
	text-decoration: none !important;
	font-weight: bold;
}

.button:hover {
	background-color: white;
	color: #212529;
}


/* Aangepaste Tijden */

.let-op {
	color: white;
	font-size: larger;
	font-weight: bolder;
}

.let-op2 {
	color: white;
	font-weight: bolder;
}

.data {
	background-color: #212529;
	font-weight: bold;
	border-radius: 3px;
	padding: 3px;
	margin: 1px;
}

.timings-container {
	display: flex;
	justify-content: space-between;
}

.column {
	margin: 0 auto;
	text-align: left;
	max-width: 600px;
}

.column p {
	font-size: 1vw;
	margin: 0;
}

@media screen and (max-width: 600px) {
	.column p {
		font-size: 1.5vw;
	}

	.timings-container {
		flex-direction: column;
	}

	.column {
		flex: 100%;
		margin: 0;
	}
}