: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%);

	--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); */
}

* {
	box-sizing: border-box;
	font-size: 30px;
}

/* DEFAULT SECTION STYLING */

section {
	width: 90%;
}

section h1::before {
	top: -15px;
	height: 10px;
	width: 150px;
}

section h2::before {
	width: 150px;
	height: 10px;
}

/* INDEX PAGE STYLING */

#hero {
	flex-direction: column;
	/* background: url(./assets/kolumban-optika-banner.png) no-repeat center center;
	background-size: cover; */
	gap: 30px;
}

/* #hero .background-video {
	display: none;
} */

#hero .rightSide {
	align-items: center;
	gap: 50px;
}

#hero .heroRightSide {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-top: 50px;
	box-sizing: border-box;
	gap: 50px;
}

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

.mobileOnly {
	display: flex !important;
}

#indexLocation h2 {
	font-weight: 500;
}

.indexStores {
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
	width: 100%;
}

.indexStore {
	min-height: 800px;
	width: 100%;
}

.indexStoreInfo {
	box-sizing: border-box;
	padding: var(--padding-xxl);
	width: 39vw;
}

.indexStore h3,
.indexStore p,
.indexStore p span.material-symbols-outlined {
	font-size: var(--font-size-s);
	word-wrap: break-word;
	flex-wrap: wrap;
}

.indexStore .clickableIcon {
	font-size: var(--font-size-l);
}

#indexOurServices {
	padding: 0 5vw;
}

#indexOurServices .iconBoxWrap {
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

#indexOurServices .iconBox img {
	width: 150px;
}

#indexAboutUs {
	display: flex;
	flex-direction: column;
}

#indexAboutUs .aboutUsImage,
#indexAboutUs .aboutUsContent {
	height: fit-content;
	width: 100%;
}

#indexAboutUs .aboutUsContent {
	padding: 0px;
}

#indexBrands {
	height: fit-content;
	background: none;
}

#indexBrandsImageMobile {
	margin-top: 50px;
	display: block !important;
	width: 100%;
	object-fit: cover;
}

#indexSocials .homeDescriptionContact a {
	width: 150px;
	height: 150px;
}

#indexSocials .homeDescriptionContact a span.material-symbols-outlined {
	font-size: 79px;
}

#indexSocials .homeDescriptionContact a svg {
	width: 80px;
	height: 80px;
}

#indexSocials p {
	margin-bottom: var(--margin-xxl);
	font-size: var(--font-size-m);
	color: var(--font-color-medium);
	line-height: 1.8;
	max-width: 100%;
}

/* OTHER */

.narrowBannerSubtitle {
	font-size: var(--font-size-m);
	color: var(--shallow-op7);
	width: 100%;
}

#gallery {
	grid-template-columns: repeat(1, 1fr);
}

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

#prev,
#next {
	font-size: 30px;
}

.gallery-info h2 {
	transform: translate(-60px, -25px);
}

.gallery-info span {
	opacity: 1;
	animation: none;
	font-size: 20px;
}

/* NAVIGATION/HEADER STYLING */
nav {
	height: auto;
	position: fixed;
	justify-content: space-between;
	width: 100%;
	border-radius: 0px;
	padding: 0px;
	margin: 0px;
}

.navbar {
	display: none;
}

#reservationButtonDesktop {
	display: none;
}

#languageMenu {
	display: none;
}

.blog-tags{
	gap: 30px;
}

.blog-tag, .blog-tag-active{
	font-size: 40px;
}

.logo img {
	padding-left: 70px;
	height: 80%;
}

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

.navbar-mobile {
	display: none;
	flex-direction: column;
	height: 100%;
	width: 100%;
	background: var(--shallow);
	right: 0;
	top: 0;
	animation: fadeInRight 1s;
	overflow: scroll;
}

.navbar-mobile .material-symbols-outlined {
	font-size: 50px;
}

.navbar-mobile a {
	color: var(--deep);
	font-size: 70px;
	margin: 15px 0px 15px 40px;
	font-weight: 600;
	padding: 20px 50px;
	border-left: 5px solid var(--highlight-bright);
}

#reservationButtonMobile {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 450px !important;
	height: 150px !important;
	padding: 0px !important;
	border: 5px solid var(--highlight-bright);
}

#mobileMenuIcon {
	display: flex;
	font-size: 100px;
	color: var(--highlight-bright);
	margin-right: 70px;
}

.navbar-mobile {
	position: fixed;
	flex-direction: column;
}

#subToNewsletterForm{
	display: flex;
	flex-direction: column;
	gap: var(--gap-l);
}

/* FOOTER STYLING */

.footerListWrap {
	flex-wrap: wrap;
}

.footerList {
	padding-left: 50px;
}

.footerIcons a {
	font-size: 30px;
	width: 70vw;
	/* text-align: right; */
}

.footerLogo span {
	font-size: 20px;
}

footer img {
	width: 90px;
}

.footerLogo a {
	color: var(--shallow);
	font-weight: 600;
	transition: all 0.3s;
	font-size: 20px;
}

.footerList a,
.footerIcons a {
	font-size: 35px;
}

/* BUTTONS STYLING */

.ctaSection {
	width: 100%;
	display: flex;
	justify-content: center;
}

.ctaSectionFlex {
	flex-direction: column;
}

.ctaSectionMobile {
	width: 100% !important;
	padding-bottom: 50px;
	display: flex;
	justify-content: space-around;
}

.wideButton {
	width: 85% !important;
}

.mainButton,
.secondaryButton,
.tertiaryButton,
.quaternaryButton {
	width: 400px;
	height: 120px;
}

.mainButton span,
.secondaryButton span,
.tertiaryButton span,
.quaternaryButton span {
	font-size: 45px;
}

.mainButton:hover,
.secondaryButton:hover,
.tertiaryButton:hover,
.quaternaryButton:hover {
	width: 350px;
	height: 100px;
}

.mainButton:hover>span,
.secondaryButton:hover>span,
.tertiaryButton:hover>span,
.quaternaryButton:hover>span {
	font-size: 40px;
}

#languageButtonsMobile {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

a.mobileLanguageButton {
	border: 5px solid var(--highlight-bright);
}

.navbar-mobile .closeButton {
	color: var(--highlight-bright);
	font-size: 120px;
	font-weight: 600;
	border: 0;
	box-shadow: none;
}

.carouselWrap {
	width: 98%;
}

#close {
	font-size: 100px;
	padding: 0px 35px;
}

#prev,
#next {
	font-size: 100px;
}

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

#backToTop {
	width: 90px;
	height: 90px;
	border-radius: 50px;
}

#backToTop:hover {
	width: 90px;
	height: 90px;
	border-radius: 50px;
}

#backToTop span {
	font-size: 60px;
}

#backToTop span:hover {
	font-size: 60px;
}

/* FORM STYLING */

#uploadForm form h2,
#editForm form h2,
#uploadFormSingle h2,
#editFormSingle h2 {
	font-size: 46px;
}

#uploadForm label,
#editForm label,
#uploadFormSingle label,
#editFormSingle label {
	font-size: 40px;
	color: var(--deep);
}

#uploadForm form input,
#editForm form input,
#uploadFormSingle form input,
#editFormSingle form input {
	font-size: 40px;
}

#uploadData {
	width: 90%;
}

.regionDropdown p {
	font-size: 50px;
}

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

form textarea {
	height: 300px;
}

.userTypeSelectDualWindow {
	flex-direction: column;
}

.userTypeSelectDualWindow div{
	width: 90%;
	height: 33vh;
}

.userTypeSelectDualWindow div p{
	font-size: 55px;
}

/* DROPDOWN STYLING */

.regionDropdownHeader {
	margin-top: 60px;
	width: 800px;
}

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

.regionDropdownHeader h1:hover {
	font-size: 53px;
}

.regionDropdown a {
	font-size: 35px;
}

/* CALENDAR STYLING */
.crudBody {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.calendarInfo {
	width: 90%;
	margin: 0 auto;
	min-height: 0px;
}

.calendarBg h2 {
	font-size: 80px;
}

.calendar {
	width: 100%;
}

.calendar .monthControl {
	font-size: 30px;
}

.day span {
	font-size: 36px;
}

.dayname span {
	font-size: 29px;
}

.day,
.calendar .dayname {
	height: 110px;
}

.calendarInfo div .mainButton,
.calendarInfo div .secondaryButton,
.calendarInfo div .tertiaryButton,
.calendarInfo div .quaternaryButton {
	height: 100px;
	width: 300px;
	padding: 0px;
	margin: 20px 0px 0px 0px;
}

.calendarInfo div {
	padding: 20px 60px;
}

.calendarInfo div h1 {
	margin-top: 20px;
	font-size: 35px;
}

.calendarInfo div h4 {
	font-size: 30px;
}

.status-green,
.status-yellow,
.status-red {
	height: 15px;
	width: 15px;
}

.dateControlMenu {
	margin-top: 100px;
	gap: 20px;
	margin-left: 20px;
}

.dateControlMenu2 {
	margin-left: 250px;
}

.dateControlMenu span {
	font-size: 40px;
	gap: 5px;
}

.serviceDescImg {
	justify-content: center;
}

.serviceLeft .serviceDescImg {
	justify-content: center;
}

.centerDiv {
	padding: 0px;
}

.centerDiv .serviceDescription {
	flex-direction: column;
}

#nextForm {
	width: 100% !important;
	height: 100% !important;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
	border-radius: 10px;
}

#det_button21,
#det_button11 {
	width: 100% !important;
}

#shortContactMobile {
	height: max-content !important;
}

.resDate {
	font-size: 30px !important;
}

.resDate span {
	font-size: var(--font-size-s) !important;
}

.resDate em {
	font-size: var(--font-size-s) !important;
}

.chooseDateWrap {
	width: 100%;
}

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

.services-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 50px;
	margin-top: 75px;
	margin-bottom: 75px;
}

.services-container-wrapper h2{
	margin-top: 50px;
}

.services-container .ctaSectionFlexCol {
	flex-direction: row;
}

.service{
	height: 1100px;
}

.service img {
	aspect-ratio: 1.5;
	height: 800px;
}

.mobileOnly .mainButton{
	height: 200px;
	width: 600px;
}

.ctaSectionFlexCol .mainButton{
	width: 800px;
}

#uploadData h2{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* UPLOADER STYLING */

.uploaderMessage {
	position: absolute;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 90vw;
	height: max-content;

	background: var(--bg-dark);

	box-shadow: var(--default-box-shadow);
	border-radius: var(--border-radius-m);

	padding: var(--padding-xxxl);

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

.uploaderMessage h1,
.uploaderMessage>span {
	color: var(--deep);
	font-size: var(--font-size-m);
	font-weight: 600;
}

.uploaderMessage>a {
	margin: var(--margin-xl) 0px !important;
	font-size: var(--font-size-m) !important;
	text-decoration: none !important;
	color: var(--shallow) !important;
}

.uploaderMessage>a:hover {
	color: var(--highlight) !important;
}


.uploaderMessage>span {
	font-size: var(--font-size-xxl) !important;
	animation: loadingRotation var(--animation-extra-long) infinite !important;
}

/* SERVICE PAGE STYLING */

#ourServices .servicesGrid {
	grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
	width: 100%;
}

.flip-card {
	aspect-ratio: 1;
}

/* PATH NAVIGATION STYLING */

.pathNavigation a,
.pathNavigation span,
.pathNavigation span.material-symbols-outlined {
	font-size: 40px;
}

/* BRANDS PAGE STYLING */

.heroBrandsContent h1 {
	font-size: var(--font-size-l);
}

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

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

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

#brands-wrapper .brands.right {
	flex-direction: column-reverse;
}

.brands-image {
	width: 100%;
	aspect-ratio: 1 / 1;
}

.brands-image img {
	max-width: unset;
	max-height: unset;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
}

.brands-content h3 {
	font-size: var(--font-size-xl);
}

.brands-description {
	font-size: var(--font-size-m);
}

/* TEAM PAGE STYLING */

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

#team-wrapper .team-member.right {
	flex-direction: column;
}

.team-member-image {
	width: 100%;
	height: 100%;
}

/* SHOPS PAGE STYLING */

.cardHeader span.material-symbols-outlined {
	font-size: 80px;
}

.serviceItem .miniImage {
	width: 100px;
	height: 100px;
}

.detailItem>span.material-symbols-outlined {
	font-size: 60px;
}

.storePhotosGrid {
	grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}