/**
 * setup
 *
 * @format
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/* 
font-family: "Montserrat", sans-serif;
font-family: "Open Sans", sans-serif;
*/

:root {
	--hue: 352;
	--saturation: 100%;

	--alpha-03: 0.3;
	--alpha-05: 0.5;
	--alpha-07: 0.7;

	--hue-bg: 352;
	--saturation-bg: 10%;

	--bg-dark: hsl(var(--hue-bg), var(--saturation-bg), 90%);
	--bg: hsl(var(--hue-bg), var(--saturation-bg), 95%);
	--bg-light: hsl(var(--hue-bg), var(--saturation-bg), 100%);

	--highlight: hsl(var(--hue), var(--saturation), 41.76%);
	--highlight-bright: hsl(var(--hue), var(--saturation), 60%);
	--highlight-brightest: hsl(var(--hue), var(--saturation), 70%);

	--main: hsl(0, 0%, 90%);
	--footer-color: hsl(var(--hue), 50%, 90%);
	/* --footer-color: linear-gradient(to right, var(--highlight-brightest), var(--highlight), var(--highlight-brightest)); */
	/* --footer-color: conic-gradient(from 0deg, var(--highlight-brightest), var(--highlight), var(--highlight-brightest)); */

	--shallow: hsl(0, 0%, 100%);
	--misty: hsl(0, 0%, 60%);
	--deep: hsl(0, 0%, 20%);

	--font-color-dark: hsl(0, 0%, 00%);
	--font-color-medium: hsl(0, 0%, 35%);
	--font-color-light: hsl(0, 0%, 50%);

	--shallow-op3: hsla(0, 0%, 100%, var(--alpha-03));
	--shallow-op5: hsla(0, 0%, 100%, var(--alpha-05));
	--shallow-op7: hsla(0, 0%, 100%, var(--alpha-07));

	--misty-op3: hsla(0, 0%, 50%, var(--alpha-03));
	--misty-op5: hsla(0, 0%, 50%, var(--alpha-05));
	--misty-op7: hsla(0, 0%, 50%, var(--alpha-07));

	--deep-op3: hsla(0, 0%, 0%, var(--alpha-03));
	--deep-op5: hsla(0, 0%, 0%, var(--alpha-05));
	--deep-op7: hsla(0, 0%, 0%, var(--alpha-07));

	--warning: hsl(0, 100%, 50%);
	--attention: hsl(30, 100%, 50%);
	--success: hsl(120, 100%, 50%);

	--padding-xs: 5px;
	--padding-s: 10px;
	--padding-m: 15px;
	--padding-l: 20px;
	--padding-xl: 30px;
	--padding-xxl: 40px;
	--padding-xxxl: 50px;
	--padding-xxxxl: 60px;

	--margin-xs: 5px;
	--margin-s: 10px;
	--margin-m: 15px;
	--margin-l: 20px;
	--margin-xl: 30px;
	--margin-xxl: 40px;
	--margin-xxxl: 50px;
	--margin-xxxxl: 60px;

	--border-radius-xs: 10px;
	--border-radius-s: 20px;
	--border-radius-m: 30px;
	--border-radius-l: 40px;
	--border-radius-xl: 50px;

	--font-size-xs: 0.75rem;
	--font-size-s: 1.0rem;
	--font-size-m: 1.3rem;
	--font-size-l: 1.7rem;
	--font-size-xl: 2rem;
	--font-size-xxl: 2.5rem;
	--font-size-xxxl: 3rem;

	--font-weight-xlight: 100;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-m: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extra-bold: 800;
	--font-weight-black: 900;

	--transition-short: 0.3s;
	--transition-medium: 0.5s;
	--transition-long: 1s;

	--animation-short: 0.3s;
	--animation-medium: 0.5s;
	--animation-long: 1s;
	--animation-extra-long: 2s;

	--gap-xs: 5px;
	--gap-s: 10px;
	--gap-m: 20px;
	--gap-l: 30px;
	--gap-xl: 40px;
	--gap-xxl: 50px;

	--default-box-shadow: inset 0 5px 10px var(--bg-light), 0 5px 10px var(--deep-op3);
	--calendar-box-shadow-dark: inset 0 0px 10px var(--deep-op5);
	--calendar-box-shadow-light: inset 0 0px 10px var(--bg-light);

	/* box-shadow:
				0 -4px 8px 0 var(--misty-op5),
				0 8px 16px 0 var(--deep-op5),
				inset 0 4px 8px 0 var(--misty-op5); */
}

* {
	scrollbar-width: none;
	font-size: 16px;
	font-family: "Open Sans", sans-serif;
}

h1,
h2,
h3 {
	font-family: "Montserrat", sans-serif;
}

h1 {
	font-size: var(--font-size-xxl);
}

h2 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	letter-spacing: .01rem;
}

h3 {
	font-size: var(--font-size-l);
}

p,
a {
	font-size: var(--font-size-s);
}

::selection {
	color: var(--shallow);
	background: var(--highlight-bright);
}

a {
	text-decoration: none;
}

body,
h1,
h2,
h3,
h4,
h5,
p {
	margin: 0;
}

body {
	width: 100%;
	padding: 0;
	background: var(--shallow);
}

section {
	width: 70vw;
	margin: 7vh auto;
	/* width: 100%; */
}

section h1,
section h2 {
	position: relative;
}

section h1::before {
	content: '';
	position: absolute;
	left: 0;
	top: -10px;
	width: 90px;
	height: 4px;
	background: var(--highlight);
}

section h2::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -30px;
	width: 90px;
	height: 4px;
	background: var(--highlight);
}


.current {
	display: grid !important;
}

.reserve {
	display: none !important;
}

/* gallery css */
.modal {
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}

.modal .exit {
	width: 90%;
	display: flex;
	justify-content: end;
}

.modal-content {
	max-width: 80%;
	max-height: 80%;
}

#close {
	width: 50px;
	height: 50px;

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

	color: var(--shallow);
	background-color: rgba(255, 255, 255, 0.3);

	font-size: 25px;
	font-weight: bold;

	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s;
}

#close:hover {
	color: var(--deep);
}

#largeGallery {
	display: grid;
	grid-template-columns: repeat(4, 300px);
	gap: 20px;
}

#largeGallery img {
	width: 100%;
	cursor: pointer;
	transition: all 0.3s;
}

#largeGallery img:hover {
	transform: scale(1.05);
}

.largeGalleryNoJs {
	padding: 50px 0px;
	display: grid;
	grid-template-columns: repeat(4, 300px);
	gap: 20px;
	justify-content: center;
}

.largeGalleryNoJs img {
	width: 100%;
	cursor: pointer;
	transition: all 0.3s;
	max-height: 150px;
	object-fit: cover;
	max-width: 350px;
	object-position: center;
	border-radius: 10px;
}

.largeGalleryNoJs img:hover {
	transform: scale(1.05);
}

/* Carousel */
.slideshow {
	display: flex;
	justify-content: space-around;
	width: 100%;
}

.slideshow .slide {
	transition: all 0.3s;
	display: flex;
	justify-content: center;
}

.slideshow .slide img {
	max-width: 50vw;
	max-height: 85vh;
}

.carouselWrap {
	display: flex;
	justify-content: center;
	width: 90%;
}

#prev,
#next {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: var(--shallow);
	font-weight: bold;
	font-size: 60px;
	transition: all 0.6s;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

#prev:hover,
#next:hover {
	color: #777;
}

.slideshow-dots {
	margin-top: 30px;
	display: flex;
}

.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 5px;
	background-color: #bbb;
	border-radius: 50%;
	transition: all 0.1s;
}

.currentDot {
	background-color: #444;
}

.dot:hover {
	background-color: #444;
}

/* mobile */
.navbar-mobile {
	display: none;
}

#mobileMenuIcon {
	display: none;
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-150px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeOutLeft {
	from {
		opacity: 1;
		transform: translateX(0);
	}

	to {
		opacity: 0;
		transform: translateX(-150px);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(150px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeOutRight {
	from {
		opacity: 1;
		transform: translateX(0);
	}

	to {
		opacity: 0;
		transform: translateX(150px);
	}
}

@keyframes fadeInTop {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInSimple {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes moveUnder {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		transform: translateY(400px);
	}
}

@keyframes moveOver {
	from {
		opacity: 0;
		transform: translateY(400px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes loadingRotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: rotate(5deg) translate(-200px, 0px);
	}

	to {
		opacity: 1;
		transform: rotate(0deg) translate(0, 0);
	}
}

@keyframes arrowDown {
	0% {
		transform: translate(-50%, 0) scale(1);
	}

	50% {
		transform: translate(-50%, 10px) scale(1.1);
	}

	100% {
		transform: translate(-50%, 0) scale(1);
	}
}

.inViewAnimation {
	animation: fadeInLeft 1.5s;
}

/* BUTTONS */
.ctaSectionFlex {
	gap: var(--gap-m);
	display: flex;
	justify-content: space-evenly;
}

.ctaSectionFlexCol {
	width: 100%;
	gap: var(--gap-s);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.mainButton,
.secondaryButton,
.tertiaryButton,
.quaternaryButton {
	z-index: 99;
	width: 250px;
	height: 50px;
	display: flex;
	cursor: pointer;
	border-radius: 30px;
	align-items: center;
	transition: all 0.3s;
	justify-content: center;
	background: var(--highlight);
	border: 2px solid var(--highlight);
}

.secondaryButton {
	background: var(--highlight-bright);
	border: 2px solid var(--highlight-bright);
}

.tertiaryButton {
	background: var(--shallow-op7);
	border: 2px solid var(--shallow-op5);
}

.mainButton span,
.secondaryButton span,
.tertiaryButton span,
.quaternaryButton span {
	display: flex;
	font-size: var(--font-size-m);
	user-select: none;
	text-align: center;
	align-items: center;
	transition: all 0.3s;
	color: var(--shallow);
}

.secondaryButton span {
	color: var(--shallow);
}

.tertiaryButton span {
	color: var(--deep);
}

.mainButton:hover,
.secondaryButton:hover,
.tertiaryButton:hover,
.quaternaryButton:hover {
	transform: scale(1.05);
	background-color: var(--shallow);
	border: 2px solid var(--highlight);
}

.secondaryButton:hover {
	transform: scale(1.05);
	background-color: var(--shallow);
	border: 2px solid var(--highlight-bright);
}

.tertiaryButton:hover {
	transform: scale(1.05);
	background-color: var(--bg);
	border: 2px solid var(--shallow-op5);
}


.mainButton:hover>span,
.mainButton:hover>span span,
.secondaryButton:hover>span,
.secondaryButton:hover>span span,
.tertiaryButton:hover>span,
.tertiaryButton:hover>span span,
.quaternaryButton:hover>span,
.quaternaryButton:hover>span span {
	color: var(--highlight);
}

.secondaryButton:hover span {
	color: var(--highlight-bright);
}

.smallButton {
	width: 150px;
	height: 50px;
}

.extraSmallButton {
	width: 50px;
	height: 50px;
}

.navButton {
	width: max-content;
	font-size: var(--font-size-s);
	padding: 0px 25px;
	height: 50px;
	position: relative;
}

.navButton span{
	font-size: 1.1vw;
}

.dashButton {
	display: flex;
	align-items: center;
}

.dashButton a {
	color: var(--main);
}

#backToTop {
	right: 50;
	bottom: 50;
	width: 30px;
	height: 30px;
	display: flex;
	z-index: 999999;
	cursor: pointer;
	position: fixed;
	align-items: center;
	border-radius: 30px;
	transition: all 0.3s;
	justify-content: center;
	border: 1px solid var(--deep);
	background-color: var(--main);
}

#backToTop span {
	color: var(--deep);
	font-weight: 500;
	font-size: 20px;
	transition: all 0.3s;
}

#backToTop:hover {
	width: 32px;
	height: 32px;
	box-shadow: 1px 1px var(--highlight);
}

#backToTop:hover>span {
	font-weight: 700;
	font-size: 22px;
}

/* HEADER / NAVIGATION */

nav {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fadeInTop 1.5s;
	margin-top: 20px;
}

.logo {
	height: 70%;
	transition: all 0.3s;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.logo img {
	height: 100%;
	width: 100%;
	object-fit: contain;
	background: filter;
	transition: all 0.3s;
}

.navbar {
	gap: var(--gap-l);
	height: 100%;
	display: flex;
	justify-content: space-evenly;
	padding: 0px 5px;
	align-items: center;
	background: linear-gradient(var(--shallow-op7), var(--shallow-op7));
	border-radius: 40px;
	width: 85%;
	height: 10vh;
	box-shadow: 1px 0px 2px 0px var(--deep-op5);
}

.navbar a,
#languageMenu a,
#languageButton {
	color: var(--deep);
	transition: color 0.3s;
	font-size: var(--font-size-m);
	font-weight: 500;
	font-size: 1.1vw;
	cursor: pointer;
	display: flex;
	align-items: center;
	width: max-content;
	position: relative;
	text-decoration: none;
	/* text-transform: uppercase */
	font-family: "Montserrat", sans-serif;
}

/* #languageMenu a::after, */
.navbar a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 100%;
	height: 2px;
	background-color: var(--highlight);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar a:hover,
/* #languageMenu a:hover, */
#languageButton:hover {
	color: var(--highlight);
	text-shadow: none;
}

#languageMenu a:hover::after,
.navbar a:hover::after {
	transform: scaleX(1);
}

#languageMenu {
	display: none;
	flex-direction: column;
	gap: 10px;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0px;
	padding: 10px;
	border-radius: 4px;
	z-index: 1000;
	min-width: 30px;
}

#languageMenu a {
	background: var(--bg);
	padding: 10px;
	color: var(--deep);
	transition: color 0.3s;
	font-size: 20px;
	font-weight: 300;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	text-transform: none;
}

#languageButton:hover #languageMenu {
	display: flex !important;
}

/* HOME PAGE */

#arrowDown {
	position: absolute;
	bottom: 32px;
	left: 50%;
	font-size: 48px;
	color: var(--shallow);
	animation: arrowDown 2s infinite;
	filter: drop-shadow(0 8px 16px var(--deep-op5));
}

#arrowDown:hover {
	cursor: pointer;
	color: var(--highlight-brightest);
	filter: drop-shadow(0 8px 16px var(--highlight-brightest));
}

#hero {
	background-color: var(--warning);
	/* background: url(./assets/kolumban-optika-banner.png) no-repeat center center; */
	background-size: cover;

	/* margin-top: 80px; */

	width: 100vw;
	min-height: 100vh;

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

	padding: 0px;
	margin: 0px;
}

#hero .background-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

#hero .heroLeftSide,
#hero .heroRightSide {
	width: 100%;
}

#hero .heroLeftSide {
	padding-left: 12vw;
}

#hero .heroLeftSide h1,
#hero .heroLeftSide h2{
	box-sizing: border-box;
	width: 100%;
	color: var(--shallow);
}

#hero .heroLeftSide h2:before {
	position: relative;
}

#hero .heroLeftSide .mainButton{
	margin-top: 30px;
}

#hero .heroRightSide {
	display: flex;
	align-items: flex-end;
	flex-direction: column;
}

#hero .heroRightSide a:hover * {
	fill: var(--highlight-bright);
	color: var(--highlight-bright);
}

#hero .heroRightSide svg {
	transform: scale(0.6);
}

#indexAboutUs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
	gap: var(--gap-xxl);
}

#indexAboutUs .aboutUsImage {
	/* background-color: aquamarine; */
	height: 80vh;
	width: 100%;
}

#indexAboutUs img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#indexAboutUs .aboutUsContent {
	box-sizing: border-box;
	padding: 0 var(--padding-xxxxl);

	gap: var(--gap-xxl);

	height: 80vh;
	width: 100%;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#indexAboutUs .aboutUsContent h2 {
	font-size: var(--font-size-xxl);
	font-weight: var(--font-weight-light);
	width: 100%;
	text-align: left;
}

#indexAboutUs .aboutUsContent p {
	font-size: var(--font-size-s);
}

#indexAboutUs .aboutUsContent .firstParagraph {
	color: var(--font-color-medium);
	line-height: 1.5;
}

#indexAboutUs .aboutUsContent .secondParagraph {
	color: var(--font-color-light);
	line-height: 1.5;
}

/* Newsletter */
.messageBanner {
	box-sizing: border-box;
	width: 100%;
	background: var(--bg-light);
	box-shadow: 0 0 20px 0 var(--deep-op5);
}

.messageWrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	gap: var(--gap-s);
	margin: 0 auto;
	padding: 5vh 0;
	width: 70%;
}

#subToNewsletterForm {
	box-sizing: border-box;
	width: 70%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 3fr 2fr 1fr;
	background: transparent;
	padding: 0px;
	margin-bottom: var(--gap-xxl);
	padding-bottom: var(--padding-xxl);
}

#subToNewsletterForm input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	padding: var(--padding-s);
	padding-left: var(--padding-xl);
	border-radius: var(--border-radius-s);
}

#subToNewsletterForm button {
	transition: all 0.3s;
}

#subToNewsletterForm button:hover,
.subToNewsletterButton:hover {
	color: var(--highlight) !important;
}

.messageBanner h2 {
	box-sizing: border-box;
	height: fit-content;
	color: var(--deep);
	margin-bottom: var(--margin-xxl);

}

.messageBanner p {
	text-align: justify;
	color: var(--deep);
	line-height: 1.5;
}

#indexOurServices {
	box-sizing: border-box;
	width: 100%;
	padding: 0vh 15vw;

	background: url(./assets/szolgaltatasok_hattere.webp) no-repeat center center;
	background-size: cover;

	gap: var(--gap-s);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.iconBoxWrap {
	width: 100%;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
	gap: var(--gap-l);

	margin-top: var(--margin-xxl);
	padding: var(--padding-xxxxl);

	background: var(--bg-light);
	box-shadow: 0 0 20px 0 var(--deep-op5);
}

.iconBoxWrap .iconBox {
	/* background: var(--bg); */
	width: 100%;

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

	gap: var(--gap-l);
}

.iconBoxWrap .iconBox p {
	height: calc(3 * var(--font-size-m));
	width: 100%;

	font-size: var(--font-size-s);
	line-height: 1.5;
	/* letter-spacing: 0.1rem; */
	/* text-transform: uppercase; */
	color: var(--font-color-light);


	text-wrap: wrap;
	word-break: normal;
	text-align: center;
}

#indexOurServices .iconBox img {
	width: 100px;
	aspect-ratio: 1/1;
	object-fit: contain;
}

#indexSocials {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#indexSocials h2 {
	margin-bottom: var(--margin-xxl);
}

#indexSocials h2::before {
	left: 50%;
	transform: translateX(-50%);
}

#indexSocials p {
	margin-bottom: var(--margin-xxl);
	font-size: var(--font-size-s);
	color: var(--font-color-medium);
	line-height: 1.8;
	max-width: 600px;
}

#indexSocials .homeDescriptionContact {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: var(--gap-xl);
	flex-wrap: wrap;
}

#indexSocials .homeDescriptionContact a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	width: 70px;
	height: 70px;

	border-radius: 50%;
	background: var(--bg-light);
	border: 2px solid var(--bg);

	transition: all var(--transition-short) ease;
	box-shadow: 0 4px 12px var(--deep-op3);
}

#indexSocials .homeDescriptionContact a::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--highlight), var(--highlight-bright));
	opacity: 0;
	transition: opacity var(--transition-short) ease;
	z-index: -1;
}

#indexSocials .homeDescriptionContact a:hover {
	transform: translateY(-4px) scale(1.05);
	border-color: var(--highlight);
	box-shadow: 0 8px 24px var(--deep-op5);
}

#indexSocials .homeDescriptionContact a:hover::before {
	opacity: 0.15;
}

#indexSocials .homeDescriptionContact a svg {
	width: 32px;
	height: 32px;
	transition: all var(--transition-short) ease;
}

#indexSocials .homeDescriptionContact a:hover svg {
	transform: scale(1.1);
}

#indexSocials .homeDescriptionContact a:hover svg path {
	fill: var(--highlight);
}

#indexSocials .homeDescriptionContact a span.material-symbols-outlined {
	font-size: 32px;
	color: var(--highlight);
	transition: all var(--transition-short) ease;
}

#indexSocials .homeDescriptionContact a:hover span.material-symbols-outlined {
	transform: scale(1.1);
	color: var(--highlight-bright);
}

/* indexLocation Section */
#indexLocation {
	box-sizing: border-box;
	height: max-content;
}

#indexLocation h2 {
	margin-bottom: 0px;
	height: max-content;
}

#indexLocation iframe {
	width: 100%;
	height: 60vh;
	margin-top: var(--margin-xxxxl);
	margin-bottom: var(--margin-xxl);
}

/* Store Cards Section */

.indexStores {
	box-sizing: border-box;
	width: 100%;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: var(--gap-l);

	margin-top: var(--margin-xxxxl);
	padding: 0;
}

.indexStore {
	min-height: 400px;

	box-sizing: border-box;
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* gap: var(--gap-m); */

	padding: var(--padding-m);
	/* background: var(--bg-light); */
	border-radius: var(--border-radius-s);
	/* border: 1px solid var(--bg); */

	transition: all var(--transition-short) ease;
	box-shadow: 0 2px 8px var(--deep-op3);
	cursor: pointer;
}

.indexStore::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 0;
	/* background: var(--highlight); */
	border-radius: var(--border-radius-xs) 0 0 var(--border-radius-xs);
	transition: height var(--transition-short) ease;
}

.indexStore:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px var(--deep-op5);
	/* border-color: var(--highlight); */
}

.indexStore:hover::before {
	height: 100%;
}

.indexStore img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--border-radius-s);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	/* filter: brightness(0.4); */
}

.indexStoreInfo {
	box-sizing: border-box;

	padding: var(--padding-xs);

	backdrop-filter: blur(10px);
	background: var(--shallow-op7);
	border-radius: var(--border-radius-xs);
	box-shadow: 0 2px 8px var(--deep-op3);

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}

.indexStore h3 {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--deep);
	margin-bottom: var(--margin-s);
	padding-bottom: var(--padding-s);
	border-bottom: 1px solid var(--bg);
	line-height: 1.4;

	width: 100%;

	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--gap-s);
}

.indexStore h4 {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--deep-op5);

	margin-bottom: var(--margin-s);

	width: 100%;

	display: flex;
	flex-direction: row;
	align-items: center;
}

.indexStore .clickableIcon,
.indexStore p {
	display: flex;
	align-items: center;
	gap: var(--gap-s);

	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	color: var(--deep);
	line-height: 1.6;

	text-decoration: none;
	transition: all var(--transition-short) ease;
}

.indexStore .clickableIcon {
	cursor: pointer;
	width: fit-content;
	color: var(--highlight);
	font-size: var(--font-size-s);
	font-weight: var(--font-weight-bold);
}

.indexStore .clickableIcon:hover {
	color: var(--highlight-bright);
	transform: scale(1.5);
}

.indexStore .clickableIcon span.material-symbols-outlined,
.indexStore p span.material-symbols-outlined {
	font-size: 20px;
	color: var(--highlight);
	transition: all var(--transition-short) ease;
}

.indexStore .clickableIcon:hover span.material-symbols-outlined {
	transform: scale(1.15);
}

.indexStore p {
	pointer-events: none;
}

.indexStore p span.material-symbols-outlined {
	color: var(--misty);
}

#indexBrands {
	/* background: url(./assets/brands-banner.png) no-repeat center center; */
	background: url(./assets/banner-brands.jpg) no-repeat center center;
	background-size: contain;

	box-sizing: border-box;
	height: 70vh;
}

#indexBrands p {
	color: var(--font-color-light);
}

/* footer */
footer {
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: space-around;
	align-items: center;
	padding: 10px 0px;
	color: var(--shallow);
	background: var(--footer-color);
	/* filter: brightness(0.5); */
	backdrop-filter: blur(10px);
}

footer img {
	width: 75px;
	transition: all 1s;
	margin: 0px 30px;
	/* filter: invert(1); */
}

footer img:hover {
	transform: scale(1.1);
}

.footerLogo {
	display: flex;
	justify-content: center;
	align-items: center;
}

.footerLogo span {
	color: var(--deep);
	font-weight: 300;
	font-size: 14px;
}

.footerLogo a {
	color: var(--deep);
	font-weight: 600;
	transition: all 0.3s;
}

.footerLogo a:hover {
	color: var(--highlight);
}

.footerNav {
	display: flex;
	justify-content: center;
	align-items: start;
	flex-direction: column;
}

footer .navbar a {
	font-size: 18px;
	font-weight: 400;
	margin: 3px 0px;
	color: var(--deep);
}

footer .navbar a:hover {
	transform: scale(1.05);
}

.footerListWrap {
	display: flex;
	width: 100%;
	justify-content: space-around;
	margin: 100px 0px 50px 0px;
}

.footerList {
	display: flex;
	flex-direction: column;
}

.footerList a {
	color: var(--deep);
	transition: all 0.3s;
}

.footerList a:hover {
	color: var(--highlight);
	transform: translatex(4px);
	text-shadow: 0 0 10px var(--shallow-op5);
}

.footerList ul {
	padding-left: 25px;
	margin: 5px 0px;
}

.footerList li::marker {
	color: var(--deep);
}

.footerIcons {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
	gap: 10px;
}

.footerIcons a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	color: var(--deep);
	transition: all 0.3s;
}

.footerIcons a:hover {
	color: var(--highlight);
	transform: translatex(4px);
	text-shadow: 0 0 10px var(--shallow-op5);
}

.footerLegal {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.footerLegal a {
	color: var(--deep);
	transition: all 0.3s;
}

.footerLegal a:hover {
	color: var(--highlight);
	transform: translatex(4px);
	text-shadow: 0 0 10px var(--shallow-op5);
}

.footerLegal img {
	width: 200px;
	transition: all 0.3s;
	/* filter: invert(1); */
}

.footerIcons a:hover svg * {
	color: var(--highlight);
	fill: var(--highlight);
	stroke: var(--highlight);
}

.footerMediaIcon {
	width: 25px;
	height: 25px;
	margin: 0px;
}

/* Narrow banner first section */

#narrowBanner {
	position: relative;
	width: 100%;
	min-height: 60vh;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10vh;
}

#narrowBannerImage {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	filter: brightness(0.5);
}

#narrowBannerContent {
	width: min(1100px, 90vw);
	color: var(--shallow);
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
}

.pathNavigation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: var(--gap-s);
	margin-bottom: var(--margin-m);

	font-size: var(--font-size-xs);
	color: var(--shallow);
}

.pathNavigation a {
	color: var(--shallow);

	text-decoration: none;
	transition: color var(--transition-short);
}

.pathNavigation a:hover {
	color: var(--highlight);
}

.pathNavigation span.material-symbols-outlined {
	font-size: 18px;
	color: var(--shallow);
}

.pathNavigation>span:last-child {
	color: var(--highlight-bright);
	font-weight: var(--font-weight-semibold);
}

.narrowBannerTitle {
	font-size: var(--font-size-xxl);
	font-weight: var(--font-weight-semibold);
	margin: 0;
}

.narrowBannerSubtitle {
	font-size: var(--font-size-m);
	font-weight: var(--font-weight-regular);
	color: var(--shallow-op5);
	width: 50%;
}

.userTypeSelect {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	background: var(--shallow);
}

.userTypeSelectDualWindow {
	width: 85%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 100px;
}

.userTypeSelectDualWindow div {
	width: 37%;
	height: 60vh;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 50px 0px;
	border: 2px solid var(--shallow);
	cursor: pointer;
	transition: all 0.3s;
}

.userTypeSelectDualWindow div p {
	color: var(--shallow);
	font-size: 40px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--deep-op);
	pointer-events: none;
	transition: all 0.3s;
}

.userTypeSelectDualWindow div:hover {
	transform: scale(1.02);
	box-shadow: 0px 0px 10px var(--shallow);
}

.userTypeSelectDualWindow div:hover p {
	background: transparent;
}

#userTypeSelectNormal {
	background: url(./assets/reservation_choice_1.jpg);
	background-size: cover;
	background-position: center;
}

#userTypeSelectOwner {
	background: url(./assets/reservation_choice_2.jpg);
	background-size: cover;
	background-position: center;
}

/* shops.php */

.shops {
	background: var(--bg-dark);
}

#shopMap h2:before,
#otherShops h2::before {
	content: none !important;
}

/* Store Photos Section */

#storePhotos h2 {
	text-align: center;
	margin-bottom: var(--margin-xxl);
}

#storePhotos h2::before {
	display: none;
}

.storePhotosGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: var(--gap-m);
}

.storePhoto {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: var(--border-radius-m);
	background: var(--bg-light);
	transition: all var(--transition-short);
}

.storePhoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--border-radius-m);
}

.storePhoto:hover {
	cursor: pointer;
	transform: scale(1.05);
	box-shadow: var(--default-box-shadow);
}

/* Shop Details Section */

.shopDetailsGrid {
	width: 100%;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
	gap: var(--gap-xl);
}

.shopDetailsCard {
	background: var(--bg);
	border-radius: var(--border-radius-s);
	border: 1px solid var(--bg);
	padding: var(--padding-xl);

	transition: all var(--transition-short);
	box-shadow: none;
}

.shopDetailsCard:hover {
	/* border-color: var(--highlight); */
	box-shadow: var(--default-box-shadow);
}

.shopDetailsCard.fullWidth {
	grid-column: 1 / -1;
}

@media (min-width: 2258px) {
	.shopDetailsCard.fullWidth {
		grid-column: unset;
		grid-column: span 1;
	}
}

.cardHeader {
	display: flex;
	align-items: center;
	gap: var(--gap-m);
	padding-bottom: var(--padding-m);
	margin-bottom: var(--padding-m);
	border-bottom: 1px solid var(--bg);
}

.cardHeader span.material-symbols-outlined {
	font-size: 32px;
	color: var(--highlight);
	background: var(--bg);
	padding: 10px;
	border-radius: 50%;
}

.cardHeader h2 {
	font-size: var(--font-size-l);
	font-weight: var(--font-weight-semibold);
	color: var(--deep);
	margin: 0;
}

.cardHeader h2::before {
	display: none;
}

.cardContent {
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
	padding: 0;
}

.detailItem {
	display: flex;
	align-items: center;
	gap: var(--gap-m);
	padding: var(--padding-m);

	border-radius: var(--border-radius-xs);
	border: 1px solid var(--bg);
	background: var(--shallow);
}

.detailItem>span.material-symbols-outlined {
	font-size: 28px;
	color: var(--highlight);
	flex-shrink: 0;
	margin-top: 2px;
}

.detailText {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--gap-xs);
}

.detailText strong {
	font-size: var(--font-size-s);
	font-weight: var(--font-weight-semibold);
	color: var(--deep);
	text-transform: uppercase;
	letter-spacing: 0.05rem;
}

.detailText p,
.detailText a {
	font-size: var(--font-size-m);
	color: var(--font-color-medium);
	line-height: 1.6;
	text-decoration: none;
	transition: color var(--transition-short);
}

.detailText a:hover {
	color: var(--highlight);
}

/* Services List */
.servicesList {
	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); */
	grid-template-columns: 1fr;
	gap: var(--gap-xs);
}

.storeReservationsList {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-m);
}

.serviceItem {
	display: flex;
	align-items: center;
	gap: var(--gap-s);

	padding: var(--padding-s);
	background: var(--bg);
	border-radius: 999px;
	border: 1px solid transparent;

	transition: border-color var(--transition-short);
}

.serviceItem:hover {
	border-color: var(--highlight);
}

.serviceItem .miniImage {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 50%;
}

.serviceItem span.material-symbols-outlined {
	font-size: 24px;
	color: var(--highlight);
	flex-shrink: 0;
}

.serviceItem span:last-child {
	font-size: var(--font-size-s);
	font-weight: var(--font-weight-regular);
	color: var(--font-color-medium);
	line-height: 1.4;
}

/* Map Section */

#shopMap h2 {
	text-align: center;
	margin-bottom: var(--margin-xxl);
}

.mapContainer {
	width: 100%;

	border-radius: var(--border-radius-xs);
	overflow: hidden;
	box-shadow: none;

	border: 1px solid var(--bg);
}

.mapContainer iframe {
	display: block;
	width: 100%;
	height: 600px;
	border: none;
}

/* Other Shops Section */

#otherShops h2 {
	text-align: center;
}

#otherShops h3 {
	border-bottom: 1px solid var(--bg-dark);
}


#otherShops .indexStore {
	/* background: var(--bg); */
	cursor: pointer;
	position: relative;
	border: 1px solid transparent;
}

#otherShops .indexStore:hover {
	box-shadow: var(--default-box-shadow);
}

/* team.php */

.teamWrapper {
	width: min(1000px, 92vw);
	margin: var(--margin-xxxxl) auto;
	display: flex;
	flex-direction: column;
	gap: var(--gap-xl);
	border-top: 1px solid var(--bg);
	padding-top: var(--padding-xxl);
}

#team-wrapper .team-member {
	display: flex;
	align-items: center;
	gap: var(--gap-xl);
	padding: var(--padding-xl) 0;
	border-bottom: 1px solid var(--bg);
}

#team-wrapper .team-member:last-child {
	border-bottom: none;
}

#team-wrapper .team-member.left {
	flex-direction: row;
}

#team-wrapper .team-member.right {
	flex-direction: row-reverse;
	justify-content: end;
}

.team-member-image {
	height: 500px;
	flex-shrink: 0;

}

.team-member-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.team-member-content h3 {
	font-size: var(--font-size-l);
	margin-bottom: var(--margin-xs);
	margin-top: var(--margin-xxl);
	color: var(--deep);
}

.team-member-role {
	font-size: var(--font-size-s);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	color: var(--font-color-light);
	margin-bottom: var(--margin-m);
}

.team-member-description {
	font-size: var(--font-size-m);
	color: var(--font-color-medium);
	line-height: 1.7;
	margin: 0;
}

@media screen and (max-width: 1024px) {
	.teamWrapper {
		padding: 0 var(--padding-l);
		gap: var(--gap-l);
	}

	#team-wrapper .team-member {
		gap: var(--gap-l);
	}

	.team-member-image {
		width: 220px;
		height: 220px;
	}
}

@media screen and (max-width: 768px) {
	#heroTeam {
		min-height: 60vh;
		padding: var(--padding-xxxl) 0;
	}

	.heroTeamContent h1 {
		font-size: var(--font-size-xl);
	}

	.heroTeamLead {
		font-size: var(--font-size-s);
	}

	.teamWrapper {
		padding: 0 var(--padding-m);
		margin: var(--margin-xxl) auto;
	}

	#team-wrapper .team-member,
	#team-wrapper .team-member.left,
	#team-wrapper .team-member.right {
		flex-direction: column;
		text-align: left;
	}

	.team-member-image {
		width: 200px;
		height: 200px;
	}

	.team-member-content {
		align-items: flex-start;
	}
}

@media screen and (max-width: 480px) {
	.heroTeamContent h1 {
		font-size: var(--font-size-l);
	}

	.teamWrapper {
		padding: var(--padding-l) var(--padding-s);
	}

	.team-member-image {
		width: 160px;
		height: 160px;
	}

	.team-member-description {
		font-size: var(--font-size-s);
	}
}

/* team.php */

.brandsWrapper {
	width: min(1000px, 92vw);
	margin: var(--margin-xxxxl) auto;
	display: flex;
	flex-direction: column;
	gap: var(--gap-xl);
	border-top: 1px solid var(--bg);
	padding-top: var(--padding-xxl);
}

#brands-wrapper .brands {
	display: flex;
	align-items: center;
	gap: var(--gap-xl);
	padding: var(--padding-xl) 0;
	border-bottom: 1px solid var(--bg);
}

#brands-wrapper .brands:last-child {
	border-bottom: none;
}

#brands-wrapper .brands.left {
	flex-direction: row;
}

#brands-wrapper .brands.right {
	flex-direction: row-reverse;
	justify-content: end;
}

.brands-image {
	position: relative;
	height: 500px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.brands-image img {
	max-width: 500px;
	max-height: 100%;
	object-fit: cover;
	display: block;
}

.brands-image img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.brands-image img:last-child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
	z-index: 1;
}


.brands-content h3 {
	font-size: var(--font-size-l);
	margin-bottom: var(--margin-xs);
	margin-top: var(--margin-xxl);
	color: var(--deep);
}


.brands-description {
	font-size: var(--font-size-m);
	color: var(--font-color-medium);
	line-height: 1.7;
	margin: 0;
}

/* services.php */

#ourServices .servicesGrid {
	width: 60%;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: var(--gap-m);

	margin: 0px auto;
	margin-top: var(--margin-xxxxl);
}

.flip-card {
	box-sizing: border-box;
	background-color: transparent;
	width: 100%;
	aspect-ratio: 1;
	perspective: 1000px;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform var(--transition-medium);
	transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
	transform: rotateY(-180deg);
}

.flip-card-front,
.flip-card-back {
	cursor: pointer;

	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	/* Safari */
	backface-visibility: hidden;

	box-sizing: border-box;

	border-radius: var(--border-radius-m);
	padding: var(--padding-m);

	box-shadow: var(--default-box-shadow);
	transition: all var(--transition-short);
}

.flip-card-front span,
.flip-card-back span {
	color: var(--highlight);
	margin: auto;
}

.flip-card-front {
	background-color: var(--bg);
	color: var(--font-color-dark);
}

.flip-card-front *,
.flip-card-back * {
	font-size: var(--font-size-xs);
}

.flip-card-back {
	background-color: var(--bg);
	color: var(--font-color-dark);
	transform: rotateY(180deg);
	text-align: justify;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.flip-card-back p {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--deep);
	text-align: center;
	word-wrap: break-word;
	margin: auto 0;
}

#ourServices .serviceGridItem {
	border-radius: var(--border-radius-s);
	border: 1px solid var(--bg);

	transition: all var(--transition-short);
	box-shadow: none;
	padding: var(--padding-xl);

	background: var(--bg-light);

	display: flex;
	flex-direction: column;
	align-items: center;

	gap: var(--gap-l);
}

#ourServices .serviceGridItem svg {
	width: 100%;
	aspect-ratio: 1/1;
}

#ourServices .serviceGridItem p {
	text-align: center;
}

/* CALENDAR  & RESERVATION */

.uploadReservationGrid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--gap-m);

	@media screen and (max-width: 1000px) {
		grid-template-columns: repeat(1, 1fr);
	}
}

.uploadReservationGrid .fullWidth {
	grid-column: span auto;
}

.reservationBody {
	background: var(--bg-dark);
}

.shortAboutWrap {
	display: flex;
	flex-direction: column;
	background: var(--shallow);
	color: var(--main);
	padding: 100px 0px;
	align-items: center;
}

.chooseDateWrap {
	width: 80%;
	margin: var(--margin-xxxxl) auto;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.chooseDateWrap>h2 {
	font-size: 60px;
	font-weight: 700;
	margin-bottom: var(--margin-xl);
}

.chooseDateWrap .crudWrap {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.chooseDate {
	width: 100%;
	display: flex;
	gap: var(--gap-l);
}

/* calendar */

.calendarBg {
	background-color: var(--shallow);
	margin: 0px;
}

.calendar {
	width: 60%;
	display: flex;
	flex-direction: column;
	border-radius: 8px 0px 0px 8px;
}

.week {
	display: flex;
}

.day,
.calendar .dayname {
	width: 100%;
	height: 75px;
	background-color: var(--main);
	color: var(--font-color-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	/* border: 1px solid var(--shallow);; */
	cursor: pointer;
	transition: all 0.15s;
}

.day span,
.day div,
.day input {
	pointer-events: none;
}

.calendar .dayname {
	background-color: var(--highlight-brightest);
	cursor: default;
}

.calendar .monthControl {
	font-size: 22px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.calendar .monthControl:hover {
	box-shadow: inset 1px 1px 15px var(--main);
}

.calendar #increaseMonth span,
.calendar #decreaseMonth span {
	font-size: 40px;
}

.day:hover {
	box-shadow: inset 0px 0px 10px var(--deep-op7);
}

.dateControlMenu {
	flex-direction: column;
	position: absolute;
	background: var(--highlight-brightest);
	border: 1px solid var(--deep-op7);
	padding: 20px;
	animation: fadeInTop 1s;
	z-index: 99;
}

.dateControlMenu span {
	font-size: 20px;
	color: var(--shallow);
	transition: all 0.3s;
	cursor: pointer;
}

.dateControlMenu span:hover {
	text-decoration: underline;
}

#dateControlMenu1 {
	margin-top: 70px;
}

#dateControlMenu2 {
	margin-left: 110px;
	margin-top: 70px;
}

.calendar .otherMonth {
	background-color: rgb(47, 47, 47);
}

.calendarInfo {
	width: 40%;
	background: var(--bg);

	transition: all 0.3s;

	border-radius: var(--border-radius-m);
	padding: var(--padding-xl);

	box-shadow: inset 0px 0px var(--margin-m) var(--margin-xs) var(--deep-op3);
}

.calendarInfo div {
	padding: 50px;
	transition: all 0.3s;
}

.calendarInfo .statusExplain {
	display: flex;
	align-items: center;
	padding: 0;
	gap: 20px;
}

.status-green,
.status-yellow,
.status-red {
	height: 7px;
	width: 7px;
	border-radius: 8px;
	background: darkgreen;
}

.status-yellow {
	background: orange;
}

.status-red {
	background: red;
}

.calendarInfo .statusExplain div {
	padding: 0;
}

.calendarInfo h1 {
	color: var(--font-color-dark);
	font-size: 25px;
	transition: all 0.3s;
	padding: 20px 0px;
}

.calendarInfo h4 {
	color: var(--font-color-dark);
	font-size: 18px;
	transition: all 0.3s;
}

.calendarInfo h2 {
	color: var(--font-color-dark);
}

.calendarInfo .mainButton,
.calendarInfo .secondaryButton {
	height: 50px;
	width: 150px;
	padding: 0;
	margin: 20px 0px 0px 0px;
}

.calendarInfo div p {
	color: var(--font-color-dark);
	padding: 10px;
	display: flex;
	align-items: center;
	font-weight: 200;
}

.calendarInfo div p span {
	margin-left: 20px;
	font-weight: 600;
}

.calendarInfo div p div {
	padding: 0;
	margin-left: 20px;
}

.day-start-selection {
	cursor: default;
	pointer-events: none;
	background-color: var(--main);
}

.day-mid-selection {
	cursor: default;
	pointer-events: none;
	background-color: var(--deep);
}

.day-end-selection {
	cursor: default;
	pointer-events: none;
	background-color: var(--main);
}

#form_start_date,
#form_time {
	pointer-events: none;
	display: none;
}

.day-unavailable {
	filter: contrast(0.8) brightness(0.9);
	cursor: default;
	pointer-events: none;
}

.day-unavailable:hover {
	box-shadow: none;
}

.day-unavailable-selection {
	filter: contrast(0.7) brightness(0.6);
	pointer-events: none;
	cursor: default;
}

.day-unavailable-selection:hover {
	box-shadow: none;
}

/* reservations */
.resHeader {
	width: 80%;
	margin: 0 auto;
	margin-top: var(--margin-xl);
	display: flex;
	flex-direction: column;
}

.resDate {
	display: flex;
	align-items: center;
	/* justify-content: start; */
	gap: 20px;
}

.resDateTitle {
	color: var(--font-color-dark);
	font-size: 40px;
	font-weight: 400;
}

.resDateValue {
	color: var(--font-color-medium);
	font-size: 40px;
	font-weight: 500;
}

.resData {
	width: 80%;
	display: flex;
	flex-direction: column;
}

.chooseDateButton {
	margin: 0;
	padding: 0;
	display: block;
	margin-bottom: var(--margin-xxxxl);
	margin-top: 20px;
}

.resRoom label {
	color: var(--deep);
}

.services-container-wrapper h2 {
	color: var(--font-color-dark);
	font-size: 50px;
	font-weight: 700;
	padding: 50px 0px;
}

.services-container-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 90vw;
	margin: 0px auto;
	padding-bottom: 100px;
}

.services-container {
	width: 60%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap-m);
	justify-content: space-around;
	text-align: center;
	align-items: start;
}

.ctaSectionFlexCol form{
	background: var(--bg);
}

.service {
	gap: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--bg);

	border-radius: var(--border-radius-xs);
	padding-bottom: var(--padding-m);
	transition: all var(--transition-short);
}

.service:hover {
	transform: scale(1.05);
	filter: drop-shadow(1px 1px 15px var(--highlight));
}

.service img {
    object-fit: cover;
    width: 80%;
    padding: 20px;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-xs) var(--border-radius-xs) 0px 0px;
}

.service h3 {
	width: 90%;
	color: var(--font-color-dark);
	font-size: var(--font-size-m);
	font-weight: 600;
	transition: all 1s;

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

.service h4{
	width: 90%;
	height: auto;

	margin: 0 auto;

	color: var(--deep-op5);

	font-size: var(--font-size-s);
	font-weight: 600;
	transition: all 1s;

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

.reservationStoreButton {
	width: calc(100% - 2 * var(--padding-m));
	margin: 0 auto;
	border-radius: var(--border-radius-xs);
	height: 35px;
}

.unselectService {
	animation: moveUnder 1s;
}

.selectService {
	animation: moveOver 1s;
}

.regionWrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 85%;
}

.regionWrap h2 {
	padding: 0px;
}

.regionDropdownHeader {
	cursor: pointer;
	background: transparent;
	padding: 10px 25px;
	border-radius: 8px;
	width: 333px;
	transition: all 0.3s;
	border: 2px solid var(--highlight);
}

.regionDropdownHeader h1 {
	font-size: 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	user-select: none;
	transition: all 0.3s;
	color: var(--highlight);
	font-weight: 300;
}

.regionDropdownHeader:hover h1 {
	/* color: var(--main); */
	filter: drop-shadow(1px 1px 5px var(--highlight));
}

.regionDropdown {
	flex-direction: column;
	width: inherit;
	position: absolute;
	margin-top: 10px;
	height: 30vh;
	overflow-y: auto;
	animation: fadeInTop 0.5s;
	scrollbar-width: thin;
	scrollbar-color: var(--shallow) var(--highlight-bright);
}

.regionDropdown a,
.regionDropdown p {
	padding: 10px 25px;
	font-size: 25px;
	color: var(--shallow);
	z-index: 99;
	background: var(--highlight);
	transition: all 0.3s;
	cursor: pointer;
}

.regionDropdown a:hover,
.regionDropdown p:hover {
	background: var(--deep);
	color: var(--shallow);
}

#uploadForm .regionDropdownHeader h1 {
	color: var(--highlight);
}

#uploadForm .regionDropdownHeader #timeIntervalSelectorTitle span {
	color: var(--highlight);
}

/* uploader */
.uploaderMessage {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.uploaderMessageCard {
	width: fit-content;
	height: fit-content;

	background: var(--bg-dark);
	border-radius: var(--border-radius-m);
	padding: var(--padding-xxxl) var(--padding-xxxxl);
	box-shadow: var(--default-box-shadow);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-m);
}

.uploaderMessage .material-symbols-outlined {
	font-size: 70px;
	animation: loadingRotation 0.85s infinite;
}

/* FORM STYLES */

.formWrapper {
	background: rgb(0, 0, 0, 0.5);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999999;
}

/* FORM STYLES */
form {
	gap: var(--gap-m);

	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 60%;
	padding: 20px;

	background: var(--bg-dark);

	border-radius: var(--border-radius-m);
}

form * {
	color: var(--shallow);
}

form label {
	box-sizing: border-box;
	width: 100%;

	color: var(--shallow);

	font-weight: 400;
	font-size: var(--font-size-m);
}

form input,
form textarea {
	box-sizing: border-box;
	width: 100%;

	margin: var(--margin-xs) 0px;
	padding: var(--padding-s) var(--padding-l);

	color: var(--deep);
	background: var(--bg);

	font-weight: 600;
	font-size: var(--font-size-m);

	border: none;
	border-radius: 20px;

	box-shadow: inset 0 5px 10px var(--bg-light), 0 5px 10px var(--deep-op3);
}

form textarea {
	height: 150px;
}

form input:focus,
form textarea:focus {
	outline: 2px solid var(--highlight);
	outline-offset: -2px;
	box-shadow: inset 0 5px 10px var(--bg-light), 0 5px 10px var(--deep-op3);
}

.labelAndInput {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* BLOG */

/* BLOG POSTS */
.blog-tags {
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px auto;
	justify-content: center;
	padding-top: 50px;
}

.blog-tag,
.blog-tag-active {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background: var(--bg);
	color: var(--deep);
	border-radius: 20px;
	padding: 6px 18px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
	height: 30px;
	user-select: none;
}

.blog-tag:hover,
.blog-tag:focus,
.blog-tag-active:hover,
.blog-tag-active:focus {
	background: var(--highlight);
	color: var(--shallow);
	transform: translateY(-5px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.blog-tag-active {
	background: var(--highlight-bright);
	color: var(--shallow);
}

.noPaddingTop {
	padding-top: 0px;
}

.welcomeWrapIndex {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: url(./img/blog_bg.jpg) center center/cover no-repeat;
}

.blogPostWrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
	gap: var(--gap-m) !important;
}

.blogPostWrapper a p {
	text-decoration: none;
	color: var(--deep);
}

.blogPost {
	box-shadow: 0 2px 10px var(--deep-op3);
	transition: all 0.3s ease;

	background-color: var(--bg);

	box-sizing: border-box;
	border-radius: 8px;
	padding: 30px;

	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 10px;

	height: 100%;
}

.blogPost:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.blogPost:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.postHeader {
	margin-bottom: 20px;
}

.postTitle {
	font-size: 1.2em;
	color: var(--deep);
	margin-top: 0;
	line-height: 1.2;
	text-shadow: 1px 1px 2px var(--deep-op3);
}

.postMeta {
	font-size: 0.9em;
	color: var(--misty-op7);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.postMeta * {
	color: var(--misty-op7);
}

.postMeta .postDate,
.postMeta .postAuthor {
	font-weight: 500;
}

.postBody {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	margin-bottom: 25px;
	color: var(--deep);
}

.postContent {
	flex: 2;
	min-width: 300px;
	font-size: 1.05em;
}

.postContent p {
	margin-bottom: 1em;
}

.postImage {
	flex: 1;
	min-width: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.postImage img {
	height: auto;
	border-radius: 6px;
	object-fit: cover;
	max-width: 100%;
	max-height: 200px;
}

.noPosts {
	text-align: center;
	color: var(--misty-solid);
	font-size: 1.2em;
	padding: 50px 0;
}

.error {
	text-align: center;
	color: red;
	font-size: 1.2em;
	padding: 20px 0;
}

.singlePhotoShowcase img {
	width: 80vw;
}

.disclaimer {
	max-width: 1000px;
	color: var(--shallow);
}

.margin-for-content {
	height: 20vh;
}

/* Blog Header */
.singleBlogWrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.blog-header {
	width: 80%;
	text-align: center;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--shallow-darker);
	padding-bottom: 20px;
}

.blog-title {
	font-size: 2.3em;
	color: var(--deep);
	margin-bottom: 10px;
	line-height: 1.2;
}

.blog-author {
	font-size: 1.1em;
	color: var(--deep-op);
	margin-top: 5px;
	margin-bottom: 5px;
}

.blog-meta {
	font-size: 0.9em;
	color: var(--deep-op);
	margin-top: 5px;
}

/* Blog Image */
.blog-image-container {
	width: 80%;
	text-align: center;
	margin-bottom: 30px;
}

.blog-image {
	max-width: 100%;
	max-height: 400px;
	height: auto;
	border-radius: 5px;
	box-shadow: 0 2px 10px var(--deep-op3);
}

/* Blog Content */
.blog-content {
	width: 80%;
	font-size: 1.1em;
	line-height: 1.8;
	color: var(--deep);
	text-align: justify;
	white-space: break-spaces;
}

.blog-content b{
	font-size: 25px;
}

.blog-footer {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 100px;
	padding: 20px;
	color: var(--highlight);
	font-size: 0.9em;
	background-color: var(--shallow);
	border-radius: 8px;
	box-shadow: 0 -2px 10px var(--deep-op5);
}

.filterAndProductWrapperWrap {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.filterAndProductWrapperWrap h1 {
	margin-bottom: 20px;
}



.mobileOnly {
	display: none !important;
}