/**
 * setup
 *
 * @format
 */
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&display=swap');
/* 
font-family: "Kanit", serif;
*/

:root {
	--radius: 0.5rem;

	--background: rgb(255, 255, 255);
	--foreground: rgb(44, 41, 51);
	--ink: rgb(162, 192, 70);
	--ink-old: rgb(27, 55, 27);
	--surface: rgb(251, 250, 252);

	--card: rgb(255, 255, 255);
	--card-foreground: rgb(44, 41, 51);
	--popover: rgb(255, 255, 255);
	--popover-foreground: rgb(44, 41, 51);

	--primary: rgb(162, 192, 70);
	--primary-shallow: rgb(223, 255, 125);
	--primary-foreground: rgb(252, 252, 252);

	--secondary: rgb(245, 245, 251);
	--secondary-foreground: rgb(44, 41, 51);
	--secondary-bg: rgb(255, 251, 244);

	--tertiary: rgb(237, 231, 221);
	
	--deep: rgb(17, 17, 17);
	--muted: rgb(245, 245, 251);
	--muted-foreground: rgb(109, 105, 120);
	--accent: rgb(247, 237, 217);
	--accent-foreground: rgb(44, 41, 51);
	--destructive: rgb(231, 101, 45);
	--destructive-foreground: rgb(252, 252, 252);
	--border: rgb(236, 235, 247);
	--input: rgb(236, 235, 247);
	--ring: rgb(227, 143, 63);

	--font-display: "Poppins", sans-serif;
	--font-number: "Poppins", sans-serif;
	--font-sans: "Inter", system-ui, sans-serif;
	--shadow-card: 0 1px 2px oklch(0 0 0 / 0.04), 0 8px 24px oklch(0 0 0 / 0.06);
	--shadow-elevated: 0 12px 40px oklch(0 0 0 / 0.12);

	/* Legacy aliases kept for existing pages/components */
	--main: var(--primary);
	--highlight: var(--primary);
	--highlight-bright: color-mix(in oklab, var(--primary) 35%, white);
	--footer-color: var(--ink);
	--shallow: var(--background);
	--shallow-darker: color-mix(in oklab, var(--background) 80%, var(--accent));
	--misty: var(--muted-foreground);
	--main-op: color-mix(in oklab, var(--primary) 80%, transparent);
	--shallow-op3: color-mix(in oklab, var(--background) 30%, transparent);
	--shallow-op5: color-mix(in oklab, var(--background) 50%, transparent);
	--shallow-op7: color-mix(in oklab, var(--background) 70%, transparent);
	--misty-op: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
	--deep-op3: color-mix(in oklab, var(--ink) 30%, transparent);
	--deep-op5: color-mix(in oklab, var(--ink) 50%, transparent);
	--deep-op7: color-mix(in oklab, var(--ink) 70%, transparent);
}

.dark {
	--background: oklch(0.14 0.01 260);
	--foreground: oklch(0.98 0 0);
	--ink: oklch(0.98 0 0);
	--surface: oklch(0.18 0.01 260);
	--card: oklch(0.18 0.01 260);
	--card-foreground: oklch(0.98 0 0);
	--popover: oklch(0.18 0.01 260);
	--popover-foreground: oklch(0.98 0 0);
	--primary: oklch(0.65 0.22 27);
	--primary-foreground: oklch(0.99 0 0);
	--secondary: oklch(0.22 0.01 260);
	--secondary-foreground: oklch(0.98 0 0);
	--muted: oklch(0.22 0.01 260);
	--muted-foreground: oklch(0.7 0.01 260);
	--accent: oklch(0.25 0.02 30);
	--accent-foreground: oklch(0.98 0 0);
	--destructive: oklch(0.65 0.22 27);
	--destructive-foreground: oklch(0.99 0 0);
	--border: oklch(1 0 0 / 10%);
	--input: oklch(1 0 0 / 12%);
	--ring: oklch(0.65 0.22 27);
}

* {
	border-color: var(--border);
	font-family: var(--font-sans);
	transition: all 0.3s;
}

html {
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

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

a {
	text-decoration: none;
}

body {
	background: var(--background);
	color: var(--foreground);
}

h1,
h2,
h3,
h4,
.font-display {
	/* font-family: var(--font-display); */
	font-family: "Poppins", sans-serif;
	letter-spacing: -0.02em;
}

.container-page {
	margin-inline: auto;
	width: 100%;
	max-width: 100rem;
	padding-inline: 1.25rem;
}

@media (min-width: 768px) {
	.container-page {
		padding-inline: 2rem;
	}
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--primary);
}

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

.numType {
	font-family: sans-serif;
}

.current {
	display: flex !important;
}

.reserve {
	display: none !important;
}

.material-symbols-outlined {
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* animations */

@keyframes changeBg {

	0%,
	100% {
		background: url("img/hero-production.jpg");
		background-size: cover;
		background-position: center;
	}

	20% {
		background: url("img/b2.jpg");
		background-size: cover;
		background-position: center;
	}

	40% {
		background: url("img/b3.jpg");
		background-size: cover;
		background-position: center;
	}

	60% {
		background: url("img/b4.jpg");
		background-size: cover;
		background-position: center;
	}

	80% {
		background: url("img/b5.jpg");
		background-size: cover;
		background-position: center;
	}
}

@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 slideInRight {
	from {
		transform: translateX(150px);
	}

	to {
		transform: translateX(0);
	}
}

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

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

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

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

@keyframes fadeInSimple {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes moveUnder {
	from {
		opacity: 1;
	}

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

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

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

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

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

@keyframes slide {
	to {
		transform: translateX(calc(-180% - 2000px));
	}
}

@keyframes logMessage {
	0% {
		opacity: 0;
		transform: translateX(150px);
		display: flex;
	}

	10% {
		opacity: 1;
		transform: translateX(0px);
		display: flex;
	}
}

@keyframes landingPromoFloat {
	0% {
		transform: translateX(150px) scale(0.8);
		opacity: 0;
	}

	40%,
	60% {
		transform: translateX(0px) scale(1.1);
		opacity: 1;
	}

	100% {
		transform: translateX(-150px) scale(0.8);
		opacity: 0;
	}
}

@keyframes tilt-decrease {
	0% {
		transform: rotate(0deg);
	}

	10% {
		transform: rotate(-7deg);
	}

	20% {
		transform: rotate(6deg);
	}

	30% {
		transform: rotate(-5deg);
	}

	40% {
		transform: rotate(4deg);
	}

	50% {
		transform: rotate(-3deg);
	}

	60% {
		transform: rotate(2deg);
	}

	70% {
		transform: rotate(-1deg);
	}

	80% {
		transform: rotate(0deg);
	}

	90% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

@keyframes tilt-decrease-mild {
	0% {
		transform: rotate(0deg);
	}

	10% {
		transform: rotate(-4deg);
	}

	20% {
		transform: rotate(3deg);
	}

	30% {
		transform: rotate(-2deg);
	}

	40% {
		transform: rotate(2deg);
	}

	50% {
		transform: rotate(-2deg);
	}

	60% {
		transform: rotate(1deg);
	}

	70% {
		transform: rotate(-1deg);
	}

	80% {
		transform: rotate(0deg);
	}

	90% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

@keyframes infiniteShake {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	10% {
		transform: translate(0, 0) rotate(-7deg);
	}

	20% {
		transform: translate(0, 0) rotate(7deg);
	}

	30% {
		transform: translate(0, 0) rotate(-5deg);
	}

	40% {
		transform: translate(0, 0) rotate(5deg);
	}

	50% {
		transform: translate(0, 0) rotate(-3deg);
	}

	60% {
		transform: translate(0, 0) rotate(3deg);
	}

	70% {
		transform: translate(0, 0) rotate(-2deg);
	}

	80% {
		transform: translate(0, 0) rotate(2deg);
	}

	90% {
		transform: translate(0, 0) rotate(-1deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

.inViewAnimation {
	animation: fadeInLeft 1.5s;
}

/* nav */

.mainNavMenu .quaternaryButton {
	width: 120px;
}

.mainNavMenuAlt .quaternaryButton {
	width: 120px;
}

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

.mainNavMenu {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 60%;
}

.mainNavMenuAlt {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 60%;
}

.mainNavMenu a {
	cursor: pointer;
}

.mainNavMenuAlt a {
	cursor: pointer;
}

nav {
	height: 100px;
	width: 100%;
	/* margin-top: 20px; */
	position: absolute;
	display: flex;
	justify-content: center;
}

.navWrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	width: 80%;
	height: 100%;
	z-index: 15;
	animation: fadeInTop 1.5s;
	gap: 15px;
	border-radius: 4px;
	padding: 0px 60px;
}

.navWrapAlt {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	width: 80%;
	height: 100%;
	z-index: 15;
	animation: fadeInTop 1.5s;
	gap: 15px;
	border-radius: 4px;
	padding: 0px 60px;
}

.navbar {
	display: flex;
	background: var(--shallow-op3);
	box-shadow: 0px 2px 5px 1px var(--deep-op7);
	padding: 0px 25px;
	gap: 35px;
	height: 47px;
	align-items: center;
	border-radius: 4px;
	width: auto;
}

.navbarAlt {
	display: flex;
	background: var(--highlight);
	box-shadow: 0px 2px 5px 1px var(--deep-op7);
	padding: 0px 25px;
	gap: 35px;
	height: 40px;
	align-items: center;
	border-radius: 4px;
	width: auto;
}

.navbar a {
	color: var(--shallow);
	transition: all 0.3s;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.navbarAlt a {
	color: var(--shallow);
	transition: all 0.3s;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.navbar a:hover {
	color: var(--highlight);
	text-shadow: none;
}

.navbarAlt a:hover {
	color: var(--highlight-bright);
	text-shadow: none;
}

.navbar .mainButton,
.navbar #languageMenu a {
	text-shadow: none;
}

.navbarAlt .mainButton,
.navbarAlt #languageMenuAlt a {
	text-shadow: none;
}

.navbar .dropMenuTrigger {
	font-weight: 700;
}

.navbarAlt .dropMenuTriggerAlt {
	font-weight: 700;
}

.navItems {
	display: flex;
	gap: 50px;
	width: 100%;
	justify-content: space-around;
}

.navItemsAlt {
	display: flex;
	gap: 50px;
	width: 100%;
	justify-content: space-around;
}

.navIcons {
	display: flex;
	gap: 10px;
}

.navIconsAlt {
	display: flex;
	gap: 10px;
}

.languageMenuButton:hover>span,
.shoppingCartIcon:hover>span,
.authIcon:hover>span {
	pointer-events: none;
	color: var(--highlight);
}

.secondaryNav .languageMenuButton>span,
.secondaryNav .authIcon>span {
	color: var(--highlight);
}

.navIcons a,
.languageMenuButton {
	color: var(--shallow);
	transition: all 0.3s;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.navIconsAlt a,
.languageMenuButtonAlt {
	color: var(--highlight);
	transition: all 0.3s;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.navIcons a:hover,
.languageMenuButton:hover {
	color: var(--highlight);
}

.navIconsAlt a:hover,
.languageMenuButtonAlt:hover {
	color: var(--main);
}

.languageMenuButton span {
	pointer-events: none;
}

.languageMenuButtonAlt span {
	pointer-events: none;
}

.languageMenuWrap {
	position: absolute;
	top: 50px;
}

.languageMenuWrapAlt {
	position: absolute;
	top: 50px;
}

#languageMenu {
	display: flex;
	flex-direction: column;
	background: var(--highlight);
	padding: 10px;
	justify-content: space-between;
	animation: fadeInTop 0.5s;
	border-radius: 4px;
	gap: 10px;
	color: var(--shallow);
}

#languageMenuAlt {
	display: flex;
	flex-direction: column;
	background: var(--highlight);
	padding: 10px;
	justify-content: space-between;
	animation: fadeInTop 0.5s;
	border-radius: 4px;
	gap: 10px;
}

#languageMenu span {
	font-weight: 600;
	cursor: pointer;
}

#languageMenuAlt span {
	font-weight: 600;
	cursor: pointer;
}

#languageMenu a {
	color: var(--shallow) !important;
}

#languageMenuAlt a {
	color: var(--deep);
}

#languageMenu a:hover {
	color: var(--shallow);
}

#languageMenuAlt a:hover {
	color: var(--shallow);
}

.secondaryNav {
	position: fixed;
	z-index: 15;
}

.secondaryNav .navbar {
	background: var(--shallow-op3);
}

.secondaryNav .languageMenuButton,
.secondaryNav .navIcons a {
	color: var(--highlight);
}

#serviceMenu {
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 328px;
	top: 70px;
	background: var(--footer-color);
	padding: 10px;
	justify-content: space-between;
	animation: fadeInTop 0.5s;
	transition: all 0.3s;
}

#serviceMenu span {
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s;
}

#serviceMenu a {
	color: var(--main);
	transition: all 0.3s;
	font-size: 20px;
	margin: 10px 10px;
}

#serviceMenu a:hover {
	color: var(--main);
	padding-left: 5px;
	font-size: 20px;
	border-left: 1px solid var(--main);
}

.logo {
	height: 100px;
	border-radius: 4px;
	transition: all 0.3s;
	filter: brightness(1.3);
}

.logo:hover {
	transform: scale(1.1);
	filter: brightness(1.5);
}

/* dropmenu */

.dropMenuTrigger:hover+.categoryDropMenu,
.categoryDropMenu:hover {
	height: 400px;
}

.dropMenuTrigger:hover+.categoryDropMenu .categoryWrap {
	opacity: 1;
}

.categoryDropMenu:hover .categoryWrap {
	opacity: 1;
}

.dropMenuTriggerAlt:hover+.categoryDropMenuAlt,
.categoryDropMenuAlt:hover {
	height: 450px;
}

.dropMenuTriggerAlt:hover+.categoryDropMenuAlt .categoryWrapAlt {
	opacity: 1;
}

.categoryDropMenuAlt:hover .categoryWrapAlt {
	opacity: 1;
}

.categoryDropMenu {
	right: 0px;
	height: 0px;
	width: 100%;
	z-index: 9999;
	overflow: hidden;
	margin-top: 45px;
	background: var(--highlight);
	;
	backdrop-filter: blur(5px);
	position: absolute;
	transition: all 0.3s;
	display: flex;
	justify-content: center;
	border-radius: 4px;
	box-shadow: 0px 5px 10px var(--main);
}

.secondaryNav .categoryDropMenu {
	background: var(--highlight);
	;
}

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

/* .categoryWrap {
	display: flex;
	flex-direction: row;
	padding: 20px 0px;
	opacity: 0;
	transition: all 2s;
	flex: 1;
	align-items: center;
} */

.categoryWrap {
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 30px 60px;
    opacity: 0;
    transition: all 2s;
    flex: 1;
}

.categoryWrap a {
	color: var(--shallow);
	text-shadow: none;
	font-size: 15px;
	margin: 0px;
	width: auto;
	display: flex;
	align-items: start;
	justify-content: start;
	flex-direction: column;
	text-align: center;
}

.categoryWrap a:hover {
	color: var(--highlight);
	font-size: 15px;
}

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

.categoryWrapAlt {
	display: flex;
	flex-direction: column;
	padding-top: 50px;
	opacity: 0;
	transition: all 2s;
	flex: 1;
	align-items: center;
}

.categoryWrapAlt a {
	color: var(--shallow);
	text-shadow: none;
	font-size: 15px;
	margin: 0px;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: start;
	flex-direction: column;
	text-align: center;
}

.categoryWrapAlt a:hover {
	font-size: 15px;
}

.categoryColumn,
.categoryColumnAlt {
	margin-right: 15px;
}

.gs-background-color-1{
	background-color: var(--secondary-bg) !important;
}

.gs-background-color-2{
	background-color: var(--tertiary);
}

.loadDropdownTrigger {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	width: 100%;
	cursor: pointer;
	color: var(--shallow);
	margin-left: 15px;
}

.categoryWrap h3 {
	font-weight: 700;
	margin: 10px 0px;
	font-size: 18px;
	display: flex;
	align-items: center;
	margin-left: 30px;
}

.categoryWrap h3:before {
	/* content: "•"; */
	margin-right: 10px;
	color: var(--shallow);
}

.loadDropdownTrigger>h3:before {
	content: none;
}

.loadDropdownTrigger:hover>h3,
.loadDropdownTrigger:hover>.material-symbols-outlined,
.categoryWrap h3:hover,
.categoryWrap h4:hover,
.categoryWrap h3:hover:before {
	color: var(--shallow-darker) !important;
}

.categoryWrapAlt h3 {
	font-weight: 700;
	margin: 10px 0px;
	font-size: 15px;
	display: flex;
	align-items: center;
}

.categoryWrap h4,
.categoryWrap h5 {
	font-weight: 300;
	font-size: 16px;
	margin-left: 30px;
}

.categoryWrapAlt h4,
.categoryWrapAlt h5 {
	font-weight: 300;
	font-size: 15px;
}

.categoryWrap h5 {
	text-indent: 20px;
}

.categoryWrapAlt h5 {
	text-indent: 20px;
}

.categoryWrap .shortAboutWrap {
	padding: 0;
}

.shopFieldWrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 97%;
}

.shopFieldWrap h2 {
	color: var(--main);
	padding: 0px;
	font-size: 40px;
	margin-bottom: 40px;
}

#mainCategoryColumn {
	height: 100%;
	border-right: 1px solid var(--shallow);
	padding-right: 15px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

a.loadDropdownTrigger {
	display: flex;
	flex-direction: row;
}

.loadDropdownTrigger h3 {
	font-weight: 700;
	margin-left: 30px;
	margin-right: 0px;
	font-size: 20px;
	width: 250px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.loadDropdownTrigger:hover h3,
.loadDropdownTrigger:hover span {
	color: rgb(255, 97, 97);
}

#actualCategory {
	height: 97%;
	width: 70%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

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

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

.catalogLink img {
	width: 250px;
}

/* home / fooldal / otthon PAGE*/

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

.welcomeSection {
	width: 100%;
	display: flex;
	z-index: 10;
	position: relative;
	justify-content: space-around;
	align-items: center;
}

.imageShowcase {
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	align-items: center;
	background-size: 100% 120%;
	background-position: center;
	background: url(./img/hero-production.jpg);
	filter: brightness(0.85) grayscale(0.1)
		/* animation-delay: 5s; */
		/* animation: changeBg 30s infinite; */
}

.imageShowcase img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 1s;
	/* filter: drop-shadow(10px 10px 20px var(--deep)); */
	animation: fadeInSimple 2s;
}

.welcomeText {
	z-index: 5;
	color: var(--main);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 30px;
	border-radius: 30px;
	border: none;
	margin-top: 100px;
}

.welcomeTextBluredBg {
	background: rgba(80, 80, 80, 0.4);
	backdrop-filter: blur(10px);
}

.welcomeText h1 {
	font-size: 27px;
	font-weight: 800;
	animation: fadeInRight 1.5s;
	color: var(--shallow);
	align-self: start;
}

.welcomeText h3 {
	font-size: 19px;
	font-weight: 400;
	animation: fadeInRight 1.5s;
	color: var(--shallow);
	align-self: start;
}

.welcomeText h4 {
	font-size: 32px;
	font-weight: 200;
	padding: 10px 0px 20px 0px;
	animation: moveOver 1.5s;
	color: var(--shallow);
}

.welcomeText h5 {
	font-size: 15px;
	font-weight: 600;
	padding: 10px 0px;
	animation: fadeInRight 1.5s;
	color: var(--shallow);
}

.welcomeText img {
	width: 300px;
	animation: moveOver 1.5s;
	padding: 30px 0px;
}

.welcomeText .ctaSectionFlex div,
.welcomeText .ctaSectionFlex a {
	padding: 0px 10px;
}

.welcomeText .ctaSectionFlex {
	margin-top: 50px;
}

.welcomeSide {
	height: 100%;
	width: 30%;
	align-content: end;
}

.welcomeImg {
	width: 100%;
	object-fit: cover;
	transition: all 0.3s;
}

.welcomeHeadlines {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 50px;
	margin-top: 100px;
}

.welcomeHeadlineBox {
	width: 200px;
	height: 130px;
	background: var(--shallow-op3);
	box-shadow: 0px 8px 7px -5px var(--misty-op);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px 50px;
	border-radius: 4px;
	gap: 10px;
}

.welcomeHeadlineBox h3 {
	font-size: 30px;
	color: var(--shallow);
}

.welcomeHeadlineBox p {
	font-size: 16px;
	color: var(--shallow);
	text-align: center;
	font-weight: 200;
}

.welcomeJustifyRight {
	width: 100%;
	padding-top: 100px;
	display: flex;
	justify-content: start;
}

.welcomeJustifyRight a {
	margin-left: 20%;
	padding: 5px 15px;
}

.ctaSection {
	display: grid;
	grid-template-columns: repeat(2, 0.2fr);
	gap: 20px;
	animation: moveOver 1.5s;
	margin-top: 20px;
	align-items: center;
}

.ctaSectionFlex {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 20px;
	width: 100%;
	/* animation: moveOver 1.5s; */
	align-self: start;
}

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

.ctaSectionFlexCenter {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

.ctaSectionSolo {
	width: 100%;
	display: flex;
	justify-content: start;
	margin: 30px 0px;
}

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

.shopField .ctaSectionSoloCenter{
	margin: 30px 0px;
}

.welcomeSide .ctaSectionSoloCenter{
	margin-bottom: 20px;
}

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

.shortAboutWrapFavourites {
	display: flex;
	flex-direction: column;
	color: var(--shallow);
	align-items: center;
}

.bgAboutWrap {
	animation: changeBg 30s infinite;
	padding: 0px;
}

.bgAboutWrap .shortAbout {
	backdrop-filter: brightness(0.65);
}

.shortAbout {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
}

.shortAbout .shopField {
	margin-top: 50px;
}

.homeDescription {
	width: 100%;
	animation: fadeInLeft 1s;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.homeDescription h2 {
	font-size: 34px;
	color: var(--shallow);
	padding: 0px 0px 10px 0px;
	text-align: center;
}

.homeDescription p {
	color: var(--shallow);
	font-size: 16px;
	margin-top: 20px;
	font-weight: 400;
	text-align: justify;
	width: 60%;
	text-align: center;
}

.homeDescription p:nth-child(1) {
	animation: fadeInLeft 0.5s;
}

.homeDescription p:nth-child(2) {
	animation: fadeInLeft 1s;
}

.homeDescription p:nth-child(3) {
	animation: fadeInLeft 1.5s;
}

.homeDescription p:nth-child(4) {
	animation: fadeInLeft 2s;
}

.homeDescription p:nth-child(5) {
	animation: fadeInLeft 2.5s;
}

.homeDescriptionLogo {
	width: 40%;
	display: flex;
	justify-content: end;
	transition: all 1s;
	animation: fadeInRight 1s;
	cursor: pointer;
}

.homeDescriptionLogo:hover {
	transform: scale(1.02);
}

.homeDescriptionLogo img {
	width: 500px;
	height: 450px;
	object-fit: cover;
	border-radius: 4px;
}

.homeDescription h3 {
	color: var(--highlight);
	font-size: 35px;
	width: fit-content;
}

.homeDescription h4 {
	margin: 5px 0px 50px 0px;
	color: var(--highlight);
	font-weight: 400;
	font-size: 20px;
}

.homeDescriptionContact {
	display: flex;
	justify-content: center;
	gap: 50px;
	margin-top: 50px;
}

.homeDescriptionContact a {
	/* background: var(--highlight); */
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	transition: all 0.3s;
}

.homeDescriptionContact a:hover {
	transform: scale(1.1);
	filter: brightness(1.3);
}

.homeDescriptionContact a img {
	width: 75%;
}

.homeDescriptionContact a span {
	color: var(--shallow);
	font-size: 65px;
}

.homeDescriptionContact svg {
	color: var(--shallow);
	fill: var(--shallow);
}

.dealign {
	align-items: start !important;
}

.aboutCta {
	margin: 30px 0px;
	display: flex;
	align-items: center;
}

.aboutCta .material-symbols-outlined {
	color: var(--main);
	font-size: 40px;
}

.aboutCta img {
	width: 60px;
	margin-right: 20px;
	transition: all 0.3s;
}

.aboutCta img:hover {
	width: 70px;
}

.aboutCta div span {
	font-weight: 700;
	font-size: 30px;
	color: var(--main);
}

.homeDescription .mainButton span {
	font-weight: 600;
	font-size: 15px;
}

.homeDescription .mainButton:hover>span {
	font-size: 17px;
}

.visitorShowcase {
	background: url("./img/toilets.jpg");
}

.partnerShowcaseWrap {
	padding: 0px;
}

.partnersShowcase {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 30px;
}

.partnerWrapper {
	background-size: cover;
	background-position: 60% 40%;
	width: 100%;
}

.tabShowcase {
	background-color: var(--main);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.placesOfInterestWrap {
	display: flex;
	width: 100%;
	justify-content: end;
}

.placePhoto {
	z-index: 1;
	position: absolute;
	height: 100vh;
	max-width: 100%;
	transition: all 0.4s;
	object-fit: cover;
}

.tabShowcase .placeTitle {
	z-index: 10;
	font-size: 40px;
	color: var(--main);
	font-weight: 800;
	filter: drop-shadow(3px 3px 3px var(--deep));
	position: absolute;
	padding: 50px 0px;
}

.tabShowcase .placeInfo {
	position: relative;
	z-index: 10;
	color: var(--main);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 80%;
}

.tabShowcase .placeInfo {
	font-size: 32px;
}

.tabShowcase .placeInfo span {
	font-size: 28px;
}

.tabShowcase .placeInfo h1,
.tabShowcase .placeInfo span {
	transition: all 0.4s;
}

.tabShowcase .placesOfInterest {
	height: 100vh;
	width: 45%;
	background: linear-gradient(270deg, rgba(38, 33, 30, 1) 90%, rgba(255, 255, 255, 0) 100%);
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: end;
	padding-right: 100px;
	transition: all 1s;
}

.placeControls {
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: space-between;
	z-index: 12;
	height: 100%;
	align-items: center;
}

.placeControls span {
	font-size: 50px;
	color: var(--main);
	filter: drop-shadow(3px 3px 3px var(--deep));
	font-weight: 800;
	padding: 0px 50px;
	cursor: pointer;
	transition: all 0.3s;
}

.placeControls span:hover {
	color: var(--darken);
}

.logMessage {
	position: fixed;
	padding: 10px;
	background: var(--main);
	border: 1px solid var(--highlight);
	border-radius: 4px;
	color: var(--shallow);
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	animation: logMessage 10s;
	top: 20%;
	right: 50px;
	z-index: 100;
}

.gs-cos-order-line-title,
.cartMenu a{
	color: var(--main) !important;
}

.cartMenu a{
	color: var(--shallow) !important;
}

.gs-cos-order-line-title{
	color: var(--main) !important;
}

.gs-cos-account-link{
	color: var(--main) !important;
}

/* .gs-header-icon-btn .material-symbols-outlined{
	color: var(--main);
} */

.gs-home-category-lower-wrap{
	display: flex;
	flex-direction: column;
	aspect-ratio: 4 / 2;
}

.gs-home-category-lower-wrap-cat{
	display: flex;
	flex-direction: column;
	aspect-ratio: 4 / 3;
}

.gs-home-category-body{
	height: 45%;
}

.gs-home-category-body-services{
	height: 85%;
}

.gs-home-category-body-blogs{
	height: 85%;
}

.gs-category-details-cta-wrap{
	display: flex;
	justify-content: center;
}

.gs-category-details-cta {
	margin-top: auto;
	margin-left: 5%;
	display: flex;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--primary);
	padding: 0 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-foreground);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.gs-portfolio-details-cta-wrap{
	display: flex;
	justify-content: center;
}

.gs-portfolio-details-cta {
	margin-top: 30px;
	display: flex;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--primary);
	padding: 0 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-foreground);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.gs-service-details-cta {
	margin-top: auto;
	margin-left: 0%;
	display: flex;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--primary);
	padding: 0 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-foreground);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.searchbarTrigger{
	display: none;
}

.gs-offer-link{
	color: var(--shallow) !important;
}

.landingPromo {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 40%;
	transition: all 0.3s;
	animation: 10s landingPromoFloat;
	background: var(--shallow);
	border-radius: 4px;
}

.landingPromo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.landingPromo h3 {
	color: var(--highlight);
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	padding: 20px;
}

.landingPromo .indexPrices h3 {
	color: var(--highlight);
	font-size: 18px;
	font-weight: 600;
}

.landingPromo .indexPrices .oldPrice {
	font-size: 16px;
	font-weight: 500;
	color: var(--misty);
	text-decoration: line-through;
}

/* service tab */

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

.serviceWrapper h2 {
	font-size: 34px;
	color: var(--highlight);
}

.profileData .serviceWrapper {
	display: flex;
	flex-direction: column;
	align-items: start;
	padding-top: 20px;
}

.profileData .serviceWrapper h2 {
	font-size: 25px;
	border: none;
}

.serviceWrapper h4 {
	font-size: 34px;
	color: var(--highlight);
}

.serviceWrapper p {
	width: 70%;
	font-size: 20px;
	text-align: center;
	color: var(--deep);
	font-weight: 400;
}

.services-containerWrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.services-containerWrapper .material-symbols-outlined {
	color: var(--highlight);
	font-size: 60px;
	cursor: pointer;
	transition: all 0.3s;
	user-select: none;
}

.services-containerWrapper .material-symbols-outlined:hover {
	color: var(--deep);
}

.cartButton .material-symbols-outlined {
	font-size: 24px;
	color: var(--shallow);
}

.services-container {
	width: 1400px;
	margin: 50px 0px;
	display: flex;
	overflow: hidden;
	/* grid-template-columns: repeat(4, 1fr); */
	text-align: center;
	align-items: stretch;
	gap: 20px;
	cursor: grab;
}

.services-container-partners {
	width: 100%;
    padding: 50px 0px;
	display: flex;
	overflow: hidden;
	text-align: center;
	align-items: center;
	gap: 100px;
	flex-shrink: 0;
}

.partners-list {
	display: flex;
	gap: 2rem;
	width: 100%;
	overflow: hidden;
}

.partners-list .service {
	padding-bottom: 20px;
	width: auto;
	height: auto;
	background: var(--highlight);
}

.partners-list .service:hover {
	transform: scale(1.015);
	box-shadow: 0px 0px 35px var(--highlight);
}

.partners-list .service a {
	transition: all 0.3s;
}

.services-container-partners a {
	animation: slide 80s linear infinite;
	min-width: 240px;
}

.services-container-partners a img {
	object-fit: contain;
}

.services-duality {
	display: flex;
	width: 100%;
	margin: 30px 0px;
}

.serviceOne,
.serviceTwo {
	width: 50%;
	height: 350px;
	cursor: pointer;
	transition: all 0.3s;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.serviceOne img,
.serviceTwo img {
	width: 100%;
	height: 250px;
	object-fit: cover;
}

.serviceOne {
	background: var(--main);
}

.serviceOne:hover {
	transform: scale(0.98);
	box-shadow: inset 0px 0px 30px var(--main);
}

.serviceTwo:hover {
	transform: scale(0.98);
	box-shadow: inset 0px 0px 30px var(--main);
}

.serviceOne h1,
.serviceOne p {
	color: var(--main);
}

.serviceTwo h1,
.serviceTwo p {
	color: var(--main);
}

.service {
	background: var(--shallow);
	display: flex;
	align-items: center;
	justify-content: start;
	flex-direction: column;
	transition: all 0.3s;
	cursor: pointer;
	overflow: hidden;
	user-select: none;
	border-radius: 10px;
	width: 100%;
	box-shadow: 0px 0px 20px var(--highlight);
}

.secService {
	background: var(--deep);
	filter: drop-shadow(0px 0px 20px var(--highlight));
}

.service .serviceInfoWrapper {
	position: absolute;
}

.service:hover {
	transform: scale(1.1);
	box-shadow: 0px 0px 35px var(--highlight);
}

.service img {
	object-fit: cover;
	width: 80%;
	height: 200px;
	background: none;
	margin-top: 20px;
	border-radius: 10px;
}

.secService img {
	filter: invert(1);
}

.service h3 {
	color: var(--highlight);
	padding: 5px 0px 20px 0px;
	font-size: 22px;
	width: 90%;
	font-weight: 700;
	text-transform: uppercase;
	transition: all 1s;
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
	height: 80px;
}

.shopFieldAlt .service h3 {
	color: var(--shallow);
}

.service-list {
	flex-direction: column;
	justify-content: center;
	display: flex;
	align-items: center;
	text-align: center;
	width: 100%;
	height: 0px;
	transition: all 0.3s;
	overflow: hidden;
	position: absolute;
}

.service:hover .service-list {
	height: 200px;
	overflow: visible;
	background: var(--main);
	z-index: 15;
}

.service span {
	color: var(--main);
	padding: 10px;
	font-size: 15px;
	font-weight: 500;
	max-height: 100px;
	overflow: hidden;
}

.service p {
	font-weight: 300;
	font-size: 15px;
	color: var(--shallow);
	transition: all 1s;
	padding: 0px;
	height: 100px;
	text-align: left;
	width: 90%;
	overflow: hidden;
	text-align: justify;
}

.service:hover>.service-list p {
	border-bottom: 1px solid var(--highlight);
	border-radius: 4px;
}

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

.serviceSwiper .material-symbols-outlined {
	font-size: 50px;
	cursor: pointer;
	transition: all 0.3s;
}

.serviceSwiper .material-symbols-outlined:hover {
	font-size: 52px;
	filter: drop-shadow(1px 1px 5px var(--main));
	user-select: none;
}

/* .homeDescriptionWrap {
	width: 80%;
	display: flex;
	flex-direction: column;
	padding: 100px 0px;
} */

.homeDescriptionWrap {
	background: var(--main);
	width: 60%;
	display: flex;
	flex-direction: column;
	padding: 100px 0px;
	border-radius: 30px;
}

/* details tab */

.detailsWrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	background-color: var(--shallow);
}

.detailsWrap h2 {
	font-size: 40px;
	color: var(--shallow);
	font-weight: 800;
	filter: drop-shadow(3px 3px 3px var(--deep));
}

.detailsWrap span {
	font-size: 20px;
	color: var(--highlight);
	font-weight: 300;
}

.details {
	display: flex;
	justify-content: space-between;
	width: 70%;
	margin: 50px 0px 50px 0px;
}

.details div {
	text-align: center;
}

.details img {
	height: 70px;
}

.details h3 {
	font-size: 35px;
	color: var(--highlight);
	font-weight: 800;
}

.details span {
	font-size: 20px;
	color: var(--highlight);
	font-weight: 400;
}

/* about / rolunk PAGE */
.secondaryWelcome {
	width: 100%;
	display: flex;
	/* background: var(--deep-op7); */
}

.secondaryWelcome img {
	width: 100%;
	object-fit: cover;
	position: fixed;
	filter: contrast(0.75) grayscale(0.4) brightness(0.8);
	z-index: -100;
	object-position: 0px -250px;
}

.secWelcomeText {
	z-index: 10;
	padding: 180px 0px 0px 130px;
	color: var(--main);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.secWelcomeText h1 {
	font-size: 50px;
	font-weight: 700;
	animation: fadeInLeft 1.5s;
	color: var(--main);
}

.secWelcomeText h3 {
	font-size: 40px;
	font-weight: 300;
	animation: fadeInRight 1.5s;
}

.valuesWrap {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 50px 0px;
}

.valuesWrap h2 {
	width: 90%;
	font-size: 50px;
	border-bottom: 3px solid var(--highlight);
	padding: 0px 0px 30px 0px;
	color: var(--highlight);
	filter: drop-shadow(3px 3px 3px var(--deep));
}

.valuesTab {
	width: 80%;
	margin: 40px 0px;
}

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

.value {
	width: 33%;
	height: 475px;
	background: var(--main);
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: all 1s;
}

.value:hover {
	transform: scale(1.02);
}

.value img {
	width: 100%;
}

.value h3 {
	color: var(--highlight);
	margin: 20px 0px;
	font-size: 30px;
}

.value p {
	color: var(--highlight);
	width: 80%;
	text-align: justify;
	font-weight: 300;
	font-style: italic;
}

.aboutPageTop {
	padding-top: 100px;
}

/* services / szolgaltatasok PAGE */
.secondaryWelcome .serviceBg {
	object-position: 0px -80px;
}

.serviceLeft {
	color: var(--main);
	align-items: start;
}

.serviceRight {
	color: var(--main);
	align-items: end;
	flex-direction: row-reverse;
	justify-content: end;
}

.serviceLeft,
.serviceRight {
	display: flex;
	width: 100%;
	justify-content: space-around;
	align-items: center;
}

.serviceLeft img,
.serviceLeft img {
	width: 100%;
}

.serviceLeft .serviceDescWrap {
	display: flex;
	width: 80%;
	justify-content: space-between;
	align-items: center;
}

.serviceRight .serviceDescWrap {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	width: 80%;
}

.serviceDescImg {
	width: 40%;
	height: 350px;
	display: flex;
	justify-content: end;
	align-items: center;
	cursor: pointer;
}

.serviceDescImg img {
	width: 100%;
	height: 100%;
	transition: all 0.3s;
	object-fit: cover;
	object-position: center;
	border-radius: 4px;
	transition: all 1s;
}

.serviceDescImg img:hover {
	transform: scale(1.02);
}

.serviceDescImg a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	object-fit: cover;
}

.serviceDescImg span {
	color: var(--main);
	position: absolute;
	font-weight: 700;
	font-size: 30px;
	transition: all 1s;
	opacity: 0;
}

.serviceDescImgGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.serviceDescImgGrid img {
	width: 350px; 
	height: 250px;
}

.serviceDescWrap {
	padding: 100px 0px;
	display: flex;
	grid-template-columns: repeat(4, 300px);
	gap: 20px;
	border-radius: 4px;
}

.categTitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	pointer-events: none;
}

.categInfo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 90%;
	border-left: 1px solid var(--shallow);
	pointer-events: none;
}

.categInfo .material-symbols-outlined {
	color: var(--highlight);
	transition: all 1s;
	font-size: 30px;
}

.descWrap .categInfo .material-symbols-outlined {
	color: var(--deep);
	border: 1px solid var(--deep);
}

.categInteractive {
	width: 100%;
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 80px;
}

.dualImage {
	justify-content: space-around;
}

.dualImage img {
	width: 40%;
}

.serviceLeft h2,
.serviceRight h2 {
	width: fit-content;
	font-size: 50px;
	padding: 0px 0px 10px 0px;
}

.calendarWrap p {
	padding-top: 50px;
}

.serviceLeft h2 {
	color: var(--shallow);
	border-bottom: 3px solid var(--shallow);
}

.serviceRight h2 {
	color: var(--main);
	border-bottom: 3px solid var(--highlight);
}

.serviceDescription {
	width: 40%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.serviceDescription p {
	margin-top: 20px;
	color: var(--highlight);
	font-size: 14px;
	font-weight: 400;
}

.serviceRight h3,
.serviceRight h5 {
	font-size: 35px;
	color: var(--highlight);
	font-weight: 700;
	text-align: start;
	border-bottom: 3px solid var(--main);
}

.serviceLeft h3,
.serviceLeft h5 {
	font-size: 35px;
	color: var(--highlight);
	font-weight: 700;
	text-align: end;
	border-bottom: 3px solid var(--main);
}

.serviceRight h5,
.serviceLeft h5 {
	font-size: 20px;
}

.serviceDescWrapSmall {
	display: flex;
	flex-direction: column;
	gap: 20px;
	border-radius: 4px;
	background: transparent;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}

.serviceDescWrapSmall img {
	height: 160px;
	object-fit: contain;
}

.serviceDescWrapSmall h3 {
	font-size: 25px;
}

.descWrap h3 {
	color: var(--highlight);
}

.descWrap p {
	color: var(--highlight);
}

.serviceDescWrapSmall:hover {
	filter: brightness(120%);
}

.serviceDescWrapSmall:hover .categInteractive h5 {
	display: flex;
	animation: fadeInRight 1s;
}

.descWrap:hover .categInteractive h5 {
	color: var(--highlight);
}

.serviceDescWrapSmall:hover .categInteractive .material-symbols-outlined {
	transform: scale(1.2);
}

.descWrap:hover .categInteractive .material-symbols-outlined {
	color: var(--highlight);
	background: var(--deep);
}

/* category page */
.categoryPage {
	display: flex;
	width: 100%;
	background: var(--shallow);
	min-height: 50vh;
}

.categoryRoster {
	width: 20%;
	display: flex;
	align-items: start;
	flex-direction: column;
	border-radius: 10px;
	padding: 20px;
	margin-top: 87px;
	margin-left: 30px;
	margin-bottom: 30px;
	background: var(--shallow-darker);
	height: fit-content;
}

.categoryRoster h3 {
	font-weight: 700;
	margin: 10px 0px;
	transition: all 0.3s;
	font-size: 15px;
	color: var(--main);
}

.categoryRoster h4 {
	transition: all 0.3s;
	font-weight: 500;
	padding-left: 5px;
	font-size: 15px;
	color: var(--main);
}

.categoryRoster h5 {
	transition: all 0.3s;
	font-weight: 300;
	padding-left: 20px;
	font-size: 14px;
	color: var(--main);
}

.categoryRoster h3:hover,
.categoryRoster h4:hover,
.categoryRoster h5:hover {
	transform: scale(1.02);
	color: var(--main);
	filter: brightness(50%);
}

.categoryRoster a {
	color: var(--main);
	transition: all 0.2s;
}

.categoryRoster a:hover {
	color: var(--shallow-darker);
}

.subCatOpener {
	color: var(--main);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	padding-top: 10px;
	border-top: 1px solid var(--main);
}

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

.subCatOpener span {
	transition: all 0.5s;
	color: var(--main);
}

.subcategoryBox {
	overflow: hidden;
	transition: all 1s;
	height: auto;
	/* max-height: unset !important; */
}

.shopField {
	width: calc(100% - 60px);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px;
	justify-items: center;
	margin-bottom: 30px;
}

.shopFieldAlt {
	grid-template-columns: repeat(5, 1fr);
}

.indexShopFieldWrap {
	width: 100%;
}

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

.notFound {
	color: var(--main);
	padding: 50px;
}

.productBox {
	background: var(--shallow);
	padding: 20px 10px;
	border: 3px solid var(--main);
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: all 0.3s;
	filter: drop-shadow(1px 1px 5px var(--footer-color-light));
	border-radius: 4px;
	width: 100%;
}

.productBox img {
	width: 100%;
	height: 150px;
	object-fit: contain;
	border-radius: 4px;
}

.productBox h3 {
	color: var(--shallow);
	text-align: center;
	border-bottom: none;
}

.productBox h4 {
	color: var(--highlight);
	font-size: 27px;
}

.productBox:hover {
	filter: drop-shadow(1px 1px 10px var(--main));
	transform: scale(1.02);
}

.productBox .mainButton {
	bottom: 0;
	width: 160px;
	height: 44px;
}

.productBox .productButtons {
	margin: 0px 20px 20px 20px;
	gap: 20px;
}

.productField {
	width: 90%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-items: center;
	gap: 40px;
	padding-top: 50px;
}

.productFieldFavourites {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-items: center;
	gap: 80px;
	padding-top: 50px;
}

.miniProductField {
	width: 90%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-items: center;
	align-items: start;
	gap: 80px;
	margin-top: 30px;
}

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

.miniProductImgWrap {
	width: 120px;
	height: 120px;
	background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%);
	border-radius: 4px;
}

.miniProduct img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 4px;
	transition: all 0.5s;
}

.miniProduct h3 {
	color: var(--shallow);
	transition: all 0.5s;
	text-align: center;
	font-weight: 400;
	font-size: 12px;
}

.miniProduct:hover h3 {
	color: var(--shallow);
}

.miniProduct:hover img {
	transform: scale(1.02);
	filter: brightness(110%);
}

.productTitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 90%;
	background: var(--shallow);
	pointer-events: none;
	border-radius: 4px;
}

.productInfo {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: space-between;
	height: 100%;
	width: 90%;
	pointer-events: none;
}

.productInfoBox {
	display: flex;
	flex-direction: column;
	align-items: start;
	pointer-events: none;
	width: 100%;
}

.productPageInfo {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	width: 40%;
	background: var(--shallow-darker);
	padding: 20px;
	border-radius: 4px;
}

.productPageInfoBlock {
	display: flex;
	flex-direction: column;
	align-items: start;
	width: 100%;
}

.productPageInfoBlock h2 {
	margin: 20px 0px;
	color: var(--shallow);
}

.productPageInfoBlock2 {
	display: flex;
	flex-direction: column;
	align-items: start;
	width: 100%;
	gap: 15px;
}

.productPageInfoBlock2 h5 {
	font-size: 30px;
	font-weight: 800;
	color: var(--highlight);
}

.productPageInfoBlock2 h6 {
	font-size: 20px;
	font-weight: 400;
	color: var(--highlight);
}

.productPageInfoBlock2 .oldPrice {
	font-size: 18px;
	font-weight: 500;
	color: var(--misty);
	text-decoration: line-through;
	margin-left: 50px;
}

.favoriteIcon {
	color: var(--highlight);
	font-variation-settings: "fill" 1;
}

.activeFav {
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.addToCart {
	padding: 0px 20px;
}

.productPageInfoBlock .material-symbols-outlined {
	color: var(--highlight);
	padding-left: 10px;
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.productInfo .material-symbols-outlined {
	color: var(--shallow);
	transition: all 1s;
	font-size: 30px;
}

.productInfo h3 {
	color: var(--deep);
	font-size: 20px;
	text-align: center;
	margin-top: 20px;
}

.productInfo .oldPrice {
	color: var(--highlight);
	padding-top: 15px;
	font-size: 18px;
	width: 100%;
	text-align: left;
	text-decoration: line-through;
}

.productInfo p {
	color: var(--deep);
	text-align: justify;
	width: 100%;
	font-size: 16px;
	height: 140px;
	overflow: hidden;
}

.productPageInfo h3 {
	color: var(--main);
	padding: 15px 0px;
	font-size: 24px;
}

.productPageInfo p {
	color: var(--main);
	text-align: justify;
	width: 100%;
	font-size: 14px;
}

/* product page */
.secWelcomeText a {
	color: var(--main);
	transition: all 0.2s;
	display: flex;
	gap: 10px;
	font-weight: 600;
}

.secWelcomeText h5 {
	color: var(--main);
	display: flex;
	gap: 10px;
	font-weight: 500;
}

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

.productWrap {
	display: flex;
	background-position: center;
	background-size: cover;
	padding: 80px 0px;
	margin: 30px 0px;
	justify-content: center;
	align-items: start;
}

.productTab {
	width: 50%;
	display: flex;
	justify-content: space-between;
}

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

.productImg,
.productPageImg {
	width: auto;
	display: flex;
	justify-content: space-between;
	padding: 20px;
	width: 90%;
	flex-direction: row-reverse;
}

.productExtraImageRow {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	width: 90%;
	cursor: pointer;
	padding: 8px;
}

.productExtraImageRow img {
	object-fit: contain;
	height: 100px;
	width: 100%;
	cursor: pointer;
	transition: all 0.3s;
	/* background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%); */
	border-radius: 4px;
}

.productExtraImageRow img:hover {
	transform: scale(1.02);
}

.productImg img,
.productPageImg img {
	object-fit: contain;
	height: 400px;
	width: 85%;
	cursor: pointer;
	transition: all 0.3s;
	background: transparent;
	border-radius: 4px;
	text-align: center;
	filter: drop-shadow(13px 16px 70px var(--shallow));
}

.productImg img:hover,
.productPageImg img:hover {
	transform: scale(1.05);
}

.productPageSmallImg {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: start;
	width: 10%;
}

.productPageSmallImg img {
	width: 100%;
	height: 25%;
	max-height: 110px;
}

.optionsWrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.productOption {
	padding: 10px 10px;
	border: 2px solid var(--highlight);
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s;
	color: var(--highlight);
}

.productOption:hover {
	background: var(--main);
	color: var(--shallow);
}

.selectedOption {
	background: var(--main);
	color: var(--shallow);
}

.documentsWrap {
	width: 90%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 100px;
}

.documentsWrap a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	cursor: pointer;
	background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%);
	width: 200px;
	height: 200px;
	border-radius: 4px;
	transition: all 0.3s;
}

.documentsWrap a h3 {
	color: var(--shallow);
	font-size: 15px;
	width: 80%;
}

.documentsWrap a:hover {
	filter: brightness(1.2);
	transform: scale(1.02);
}

.documentsWrap h2 {
	width: 80%;
	color: var(--main);
	font-size: 30px;
	padding-bottom: 50px;
}

.documentsWrap .material-symbols-outlined {
	color: var(--shallow);
	padding: 5px;
}

.documentsRow {
	width: 80%;
	display: flex;
	gap: 30px;
}

.secondaryWelcome .productsBg {
	object-position: 0px -80px;
}

/* projects / projektek PAGE */
.secondaryWelcome .projectsBg {
	object-position: 0px -130px;
}

.smallGallery {
	display: grid;
	grid-template-columns: repeat(4, 0.4fr);
	width: 100%;
	gap: 20px;
}

.smallGallery img {
	width: 350px;
	height: 200px;
	cursor: pointer;
}

.smallGallery img:hover {
	transform: scale(1.1);
}

.miniNavWrap {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}

.miniNav {
	display: flex;
	justify-content: space-around;
	width: 98%;
	border-radius: 4px;
	border-bottom: 1px solid var(--main);
	background: var(--shallow);
}

.miniNav h3 {
	color: var(--highlight);
	font-size: 25px;
	margin: 15px 0px;
	transition: all 0.3s;
	cursor: pointer;
	user-select: none;
}

.miniNav .selectedMininav {
	color: var(--main);
}

.miniNav h3:hover {
	color: var(--highlight);
}

.unselectService {
	animation: moveUnder 1s;
}

.selectService {
	animation: moveOver 1s;
}

.projectsWrapper {
	flex-direction: column;
}

#quaternaryBackground {
	background: var(--shallow-darker);
}

.projectsGridWrap {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 200px 0px 50px 0px;
}

.projectsGridWrap h2 {
	font-size: 50px;
	color: var(--highlight);
	user-select: none;
}

.projectsGridWrap p {
	width: 70%;
	font-size: 15px;
	text-align: center;
	color: var(--shallow);
}

.secondaryBackground .projectsGridWrap h2 {
	color: var(--highlight-dark);
}

/* contact / kapcsolat PAGE */
.secondaryWelcome .contactBg {
	object-position: 0px -80px;
}

.contactForm {
	display: flex;
	flex-direction: column;
	padding: 20px 0px;
}

.contactForm label {
	color: var(--main);
	font-size: 25px;
	margin-top: 10px;
}

.contactForm input {
	height: 40px;
	width: 500px;
	font-weight: 600;
	font-size: 17.5px;
	padding-left: 15px;
}

.contactForm .message {
	height: 150px;
	width: 500px;
	font-weight: 600;
	font-size: 15px;
	padding: 15px;
}

.contactCardWrapper {
	width: 70%;
	display: flex;
	justify-content: space-around;
}

.contactCard {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 400px;
	width: 300px;
	justify-content: center;
	gap: 10px;
	transition: all 0.3s;
	background: var(--main);
	border-radius: 4px;
}

.contactCard:hover {
	box-shadow: inset 0px 5px 15px var(--shallow);
	transform: scale(1.02);
}

.contactCard span {
	font-size: 25px;
	padding: 10px;
	color: var(--shallow);
}

.contactCard .openInNew {
	font-size: 20px;
	background: var(--main);
	border-radius: 4px;
	padding: 5px;
	transition: all 0.3s;
}

.contactCard .openInNew:hover {
	background: var(--highlight);
}

.contactCard h1 {
	color: var(--shallow);
	font-weight: 600;
	font-size: 28px;
	padding: 0px 15px 5px 15px;
	border-bottom: 2px solid var(--shallow);
}

.contactCard h2 {
	font-size: 22px;
	font-weight: 400;
	color: var(--shallow);
}

.contactCard a {
	color: var(--shallow);
	display: flex;
	align-items: center;
	gap: 5px;
}

/* gallery css */
.modal {
	position: fixed;
	z-index: 9999999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--deep-op5);
	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%;
}

#modalOffer {
	position: relative;
	width: 100%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}

.offerWrap {
	display: flex;
	flex-direction: column;
	align-items: start;
	padding: 50px;
	gap: 10px;
	border-radius: 4px;
	background: var(--main);
}

.offerWrap * {
	color: var(--main);
}

.offerWrap input,
.offerWrap textarea,
.offerWrap select {
	width: 100%;
	padding: 10px 15px;
	border-radius: 4px;
	border: none;
}

.submitButton {
	cursor: pointer;
	background: transparent;
	border: 3px solid var(--shallow) !important;
	color: var(--shallow);
	border: none;
	height: 50px;
	font-size: 25px;
	transition: all 0.3s;
	padding: 0px !important;
}

.submitButton:hover {
	background: var(--deep);
	transform: scale(1.05);
}

.offerWrap label {
	color: var(--shallow);
}

.offerWrap textarea {
	width: 100%;
	min-height: 50px;
	resize: vertical;
}

.offerWrap h1 {
	color: var(--shallow);
	font-size: 30px;
	transition: all 0.3s;
}

.offerWrap span {
	color: var(--main);
	width: 100%;
	display: flex;
	justify-content: space-between;
	transition: all 0.2s;
	cursor: pointer;
	font-weight: 800;
}

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

.offerWrap .mainButton {
	width: 100%;
}

.offerWrap .mainButton span {
	justify-content: center;
}

#close {
	color: var(--deep);
	background-color: var(--shallow-op3);
	font-size: 28px;
	font-weight: bold;
	padding: 5px 13px 5px 13px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s;
	right: 0;
}

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

.largeGallery {
	padding: 0px 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 175px;
}

.largeGallery img {
	width: 100%;
	cursor: pointer;
	transition: all 0.3s;
	height: 100px;
	border: 1px solid var(--footer-color-light);
}

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

.extraProductsWrap {
	width: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-direction: column;
	margin-bottom: 100px;
	align-items: center;
}

.extraProductsWrap h2 {
	color: var(--shallow);
	font-size: 30px;
}

.extraProductsWrap h4 {
	color: var(--highlight);
	font-size: 34px;
	padding: 60px 0px;
}

.extraProductsWrap h5 {
	color: var(--highlight);
	font-size: 20px;
}

.extraProducts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 80%;
	gap: 20px;
	padding-bottom: 100px;
}

.extraProduct {
	display: flex;
	transition: all 0.3s;
	gap: 15px;
	max-height: 115px;
	overflow: hidden;
	background: transparent;
	border-radius: 4px;
	align-items: center;
	border: 2px solid var(--highlight);
	padding: 25px;
}

.extraProduct:hover {
	transform: scale(1.02);
}

.extraProduct div {
	display: flex;
	flex-direction: column;
	/* gap: 10px; */
}

.extraProduct img {
	height: 80px;
}

.extraProduct h3 {
	color: var(--main);
	font-size: 13px;
	font-weight: 400;
}

.extraProduct p {
	color: var(--highlight);
	font-weight: 600;
}

.extraProduct .oldPrice {
	color: var(--misty);
	padding-top: 10px;
	font-size: 15px;
	text-decoration: line-through;
}

.miscProductsWrap {
	width: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-direction: column;
	margin-top: 50px;
	align-items: start;
	margin-left: 30px;
}

.miscProductsWrap h2 {
	color: var(--highlight);
	font-size: 30px;
}

.miscProductsWrap h4 {
	color: var(--highlight);
	font-size: 28px;
	padding: 20px 0px;
}

.miscProductsWrap h5 {
	color: var(--highlight);
	font-size: 20px;
}

.miscProducts {
	display: flex;
	flex-direction: column;
	grid-template-columns: repeat(4, 1fr);
	width: 80%;
	gap: 20px;
	padding-bottom: 30px;
}

.miscProduct {
	display: flex;
	transition: all 0.3s;
	gap: 15px;
	max-height: 115px;
	overflow: hidden;
	background: transparent;
	border-radius: 4px;
	align-items: center;
	border: 2px solid var(--highlight);
	padding: 10px 20px;
}

.miscProduct:hover {
	transform: scale(1.02);
}

.miscProduct div {
	display: flex;
	flex-direction: column;
	/* gap: 10px; */
}

.miscProduct img {
	height: 80px;
}

.miscProduct h3 {
	color: var(--main);
	font-size: 13px;
	font-weight: 400;
}

.miscProduct p {
	color: var(--highlight);
	font-weight: 600;
}

.miscProduct .oldPrice {
	color: var(--misty);
	padding-top: 10px;
	font-size: 15px;
	text-decoration: line-through;
	margin-left: 0px;
}

.currPrice::before {
	content: "Preț:  ";
	font-size: 20px;
	font-weight: 400;
	color: var(--highlight);
}

.commentSectionWrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	background: var(--shallow-darker);
	padding-bottom: 50px;
}

.commentSectionWrap h4 {
	color: var(--main);
	font-size: 34px;
	padding: 40px 0px;
}

.commentRating {
	width: 80%;
	display: flex;
	margin: 50px 0px;
	gap: 50px;
}

.commentRatingMain {
	width: 25%;
	display: flex;
	flex-direction: column;
}

.commentSection {
	width: 80%;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.commentSection form {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 100%;
}

.commentSection form textarea {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	max-height: 500px;
	height: 200px;
	border-radius: 4px;
	border: 2px solid var(--highlight);
	color: var(--deep);
	font-weight: 400;
	padding: 10px;
}

.commentSection form h5 {
	font-size: 25px;
	color: var(--highlight);
	font-weight: 700;
}

.commentSectionTab {
	display: flex;
	flex-direction: column;
	width: 100%;
}

#reviewTab {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.commentSectionTab h5 {
	color: var(--main);
	font-weight: 700;
	font-size: 22px;
}

.commentSectionPages {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-bottom: 50px;
}

.commentSectionPages span {
	color: var(--main);
	font-size: 18px;
	transition: all 0.3s;
	cursor: pointer;
}

.commentSectionPages span:hover {
	color: var(--highlight);
	text-decoration: underline;
}

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

.commentRatingNumber h5 {
	color: var(--main);
	font-weight: 700;
	font-size: 22px;
	border: 3px solid var(--main);
	border-radius: 50%;
	padding: 20px;
}

.commentRatingNumber span {
	color: var(--main);
	font-size: 27px;
}

.commentRatingNumber h6 {
	color: var(--main);
	font-size: 14px;
}

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

.commentRatingGraphNode {
	display: flex;
	color: var(--main);
	width: 100%;
	gap: 15px;
	justify-content: start;
	align-items: center;
}

.commentRatingGraphNode p {
	color: var(--main);
}

.commentRatingGraphNode span {
	color: var(--main);
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.commentRatingStarsDetails {
	display: flex;
}

.commentRatingStarsDetails p {
	color: var(--highlight);
	font-size: 22px;
	font-weight: 700;
	margin-left: 20px;
}

.commentRatingGraphNode p {
	text-align: center;
	font-size: x-large;
	width: 20px;
	font-size: 17px;
}

.ratingLine {
	width: 50%;
	background: var(--shallow);
	height: 5px;
	border-radius: 4px;
}

.clickableRating {
	color: var(--highlight);
	transition: all 0.3s;
	cursor: pointer;
}

.clickableRating:hover {
	color: var(--main);
}

.review {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 30px 0px;
	padding: 20px 0px;
	gap: 20px;
	border-bottom: 1px solid var(--highlight);
}

.review p {
	font-weight: 400;
	color: var(--main);
	font-size: 17px;
	text-align: justify;
}

.review span {
	font-weight: 200;
	color: var(--main);
	font-size: 14px;
}

.reviewJoint {
	display: flex;
	gap: 20px;
}

.reviewJoint h6 {
	font-weight: 600;
	color: var(--main);
	font-size: 20px;
}

.reviewJoint span {
	color: var(--main);
	font-size: 25px;
}

.filledIcon {
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.tableWrap {
	width: 87%;
	display: flex;
}

.tableWrap table {
	width: 55%;
	background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%);
	border-radius: 4px;
	padding: 40px;
}

.tableWrap tr {
	height: 40px;
}

.tableWrap th {
	display: flex;
}

.tableWrap td {
	font-size: 18px;
	color: var(--shallow);
}

/* searchbar / search bar */
#searchSystem {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 80px;
	width: 42.5%;
	left: 35%;
	animation: fadeInTop 0.3s;
}

#searchBarWrap {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--main);
	padding: 10px;
	width: 100%;
	border-radius: 4px;
}

.resultsIn {
	border-radius: 10px 10px 0px 0px !important;
}

#searchBar {
	border: none;
	padding: 20px;
	width: 100%;
	font-size: 16px;
	font-weight: 600;
	color: var(--shallow);
	background: transparent;
}

#searchBar::placeholder {
	color: var(--shallow);
}

#searchBar:focus-visible {
	border: none;
	outline: none;
}

#searchbarClose {
	cursor: pointer;
	transition: all 0.3s;
	color: var(--close);
}

#searchbarClose:hover {
	font-weight: 800;
}

#searchbarResults {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 10px;
	background: var(--main);
	max-height: 50vh;
	overflow-y: scroll;
	border-radius: 0px 0px 10px 10px;
}

#searchbarResults a {
	background: transparent;
	color: var(--shallow);
	padding: 10px;
	transition: all 0.3s;
	font-weight: 600;
	animation: fadeInTop 0.2s;
}

#searchbarResults a:hover {
	font-weight: 900;
}

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

/* privacy policy */
.privacyPolicyWrap {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 200px;
}

.privacyPolicyWrap h1,
.privacyPolicy a {
	color: var(--deep);
	transition: all 0.3s;
}

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

.privacyPolicyWrap {
	color: var(--deep);
}

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

.formAgreement {
	display: flex;
	justify-content: start;
	align-items: center;
	width: 100%;
	margin-bottom: 20px;
	margin-top: 20px;
}

.formAgreement a {
	color: var(--shallow);
	transition: all 0.3s;
}

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

.offerWrap {
	display: flex;
	flex-direction: column;
	align-items: start;
	padding: 30px;
	gap: 10px;
	border-radius: 10px;
}

.offerWrap input,
.offerWrap textarea,
.offerWrap select {
	width: 100%;
	padding: 10px 15px;
	border-radius: 10px;
	border: none;
}

.offerWrap input[type="checkbox"] {
	width: auto;
}

/* contact */
.contactWrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 0px 100px 0px;
	animation: moveOver 1s;
	width: 90%;
}

.contact {
	display: flex;
	justify-content: space-around;
	width: 70%;
}

.contact a {
	width: 5%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--main);
	text-align: center;
}

.contact a img,
.contact a span {
	transition: all 0.3s;
	width: 100%;
}

.contactDesk {
	width: 70%;
	display: flex;
	padding: 50px;
	border-radius: 20px;
	margin-bottom: 100px;
	justify-content: space-between;
	background: var(--shallow-darker);
	box-shadow: 0px 0px 15px var(--main);
}

.contactDeskHalf {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
	gap: 60px;
	width: calc(50% - 30px);
}

.contactDeskHalf img {
	width: 100%;
}

.contactDeskHalf h2 {
	color: var(--highlight);
	font-weight: 800;
	font-size: 40px;
}

.contactDeskHalf a {
	color: var(--highlight);
	font-weight: 600;
	font-size: 20px;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	gap: 5px;
}

.contactDeskHalf a span {
	color: var(--highlight);
}

.contactDeskHalf a:hover span {
	color: var(--main);
}

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

.contactDeskHalf iframe {
	width: 100%;
	height: 100%;
	box-shadow: 0px 0px 5px var(--main);
}

.contact a span {
	color: var(--highlight);
	font-size: 50px;
}

.contact a:hover {
	font-weight: 800;
}

.contact a:hover>img,
.contact a:hover>span {
	transform: scale(1.2);
	filter: drop-shadow(1px 1px 5px var(--main));
}

.contact a p {
	position: absolute;
	font-size: 25px;
	margin-top: 100px;
	color: var(--highlight);
}

.contact img {
	position: relative;
	filter: none;
	z-index: 1;
}

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

.pageViews img {
	width: 10%;
}

.pageViews span {
	font-size: 30px;
	font-weight: 500;
}

.contactWrap .homeDescriptionContact {
	margin: 0px;
}

/* partners / partnerek */
.service a {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.service a:hover>.service-list p {
	border: 1px solid var(--main);
}

.service a:hover>h3 {
	border-bottom: 3px solid var(--main);
}

.fol {
	animation: fadeOutLeft 1s;
}

.for {
	animation: fadeOutRight 1s;
}

.fil {
	animation: fadeInLeft 1s;
}

.fir {
	animation: fadeInRight 1s;
}

/* map */
#mapwrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#mapwrapper h4 {
	font-size: 50px;
	color: var(--main);
	padding-top: 50px;
}

#mapwrapper p {
	font-size: 25px;
	color: var(--main);
}

#mapbase {
	width: 60%;
}

#mapbase path {
	fill: var(--main);
	transition: all 0.3s;
}

#mapbase path:hover {
	fill: var(--deep);
}

#mapbase text {
	pointer-events: none;
	user-select: none;
}

.contactBox {
	width: 50%;
	height: 50%;
	background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 50px;
	border-radius: 4px;
	gap: 50px;
}

.contactBox h3 {
	font-size: 50px;
	color: var(--shallow);
}

.contactBox h4 {
	font-size: 25px;
	color: var(--shallow);
}

.contactAgentData {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 20px;
	margin: 20px 0px;
}

.contactAgentData #contactTel {
	height: 200px;
	width: 45%;
	border: 3px solid var(--shallow);
	transition: all 0.5s;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	gap: 10px;
}

.contactAgentData #contactTel h5 {
	color: var(--shallow);
	font-weight: 600;
	font-size: 30px;
	transition: all 0.5s;
}

.contactAgentData #contactTel span {
	color: var(--shallow);
	font-weight: 200;
	font-size: 24px;
	transition: all 0.5s;
	display: flex;
	align-items: center;
}

.contactAgentData #contactTel:hover {
	background: var(--main);
	border: 3px solid var(--main);
}

.contactAgentData #contactTel:hover h5,
.contactAgentData #contactTel:hover span {
	color: var(--shallow);
}

.contactAgentData #contactEmail {
	height: 200px;
	width: 45%;
	background: transparent;
	border: 3px solid var(--shallow);
	transition: all 0.5s;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.contactAgentData #contactEmail h5 {
	color: var(--shallow);
	font-weight: 600;
	font-size: 30px;
	margin: 20px;
	transition: all 0.5s;
}

.contactAgentData #contactEmail span {
	color: var(--shallow);
	font-weight: 400;
	font-size: 24px;
	margin: 20px;
	transition: all 0.5s;
}

.contactAgentData #contactEmail:hover {
	background: var(--highlight);
	border: 3px solid var(--highlight);
}

.contactAgentData #contactEmail:hover h5,
.contactAgentData #contactEmail:hover span {
	color: var(--shallow);
}

/* calendar */
.calendar {
	width: 60%;
	display: flex;
	flex-direction: column;
}

.week {
	display: flex;
}

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

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

.calendar .dayname {
	background-color: var(--highlight);
	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 1px 1px 10px var(--main);
}

.dateControlMenu {
	flex-direction: column;
	position: absolute;
	background: var(--highlight);
	padding: 20px;
	animation: fadeInTop 1s;
	z-index: 10;
}

.dateControlMenu span {
	font-size: 20px;
	color: var(--main);
	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 {
	filter: contrast(0.9);
}

.calendarInfo {
	width: 40%;
	background: var(--main);
	min-height: 300px;
	transition: all 0.3s;
}

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

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

.calendarInfo div .statusExplain div {
	padding: 0;
}

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

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

.calendarInfo div h2 {
	color: var(--main);
}

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

.calendarInfo div p {
	color: var(--main);
	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;
}

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

.status-yellow {
	background: orange;
}

.status-red {
	background: red;
}

.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;
}

.day-start-selection {
	filter: contrast(1.5);
	cursor: default;
	pointer-events: none;
}

.day-mid-selection {
	filter: contrast(1.04);
	cursor: default;
	pointer-events: none;
}

.day-end-selection {
	filter: contrast(1.5);
	cursor: default;
	pointer-events: none;
}

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

#form_end_date {
	pointer-events: none;
	display: none;
}

/* crud */
.crudWrap {
	width: 100%;
	display: flex;
	justify-content: center;
}

.crudTable {
	width: 100%;
	margin-bottom: 100px;
}

.crudHeader {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--main);
	padding: 10px 0px;
}

.crudHeader h1 {
	color: var(--main);
}

.crudButtons {
	width: 25%;
	display: flex;
	justify-content: space-between;
}

.crudBody {
	display: flex;
}

.crudBodyTable {
	display: flex;
	flex-direction: column;
	margin-top: 50px;
}

.crudBody h3 {
	color: var(--main);
	padding: 50px;
	font-size: 25px;
}

#uploadForm,
#editForm,
.deleteConfirmation,
#uploadFormSingle,
#editFormSingle {
	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: 20;
}

.deleteConfirmation div {
	display: flex;
	flex-direction: column;
	background: var(--main);
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	padding: 50px;
}

.deleteConfirmation div h1 {
	color: var(--main);
}

.deleteConfirmation div div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.deleteConfirmation .secondaryButton,
.deleteConfirmation .tertiaryButton {
	padding: 0;
}

.deleteReviewConfirmationModal div {
	display: flex;
	flex-direction: column;
	background: var(--main);
	border-radius: 8px;
	justify-content: center;
	align-items: center;
	padding: 50px;
}

.deleteReviewConfirmationModal div h1 {
	color: var(--shallow);
	font-size: 28px;
}

.deleteReviewConfirmationModal div div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

.deleteReviewConfirmationModal .secondaryButton,
.deleteReviewConfirmationModal .tertiaryButton {
	padding: 0;
}

.deleteReviewConfirmationModal .tertiaryButton {
	background: transparent;
}

.deleteReviewConfirmationModal {
	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;
	margin-top: 5px;
}

#uploadForm form,
#editForm form,
#uploadFormSingle form,
#editFormSingle form {
	display: flex;
	flex-direction: column;
	background: var(--main);
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	padding: 50px;
	width: 60%;
}

#uploadForm label,
#editForm label,
#uploadFormSingle label,
#editFormSingle label {
	color: var(--main);
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
}

#uploadForm form h2,
#editForm form h2,
#uploadFormSingle h2,
#editFormSingle h2 {
	color: var(--main);
}

#uploadForm form input,
#editForm form input,
#uploadFormSingle form input,
#editFormSingle form input {
	margin: 10px 0px;
	color: var(--main);
	background: var(--main);
	font-weight: 600;
	border-radius: 4px;
	border: none;
	padding: 10px 20px;
	font-size: 15px;
	width: 100%;
	color: var(--main);
}

#uploadForm input[type="file"],
#editForm input[type="file"],
#uploadFormSingle input[type="file"],
#editFormSingle input[type="file"] {
	color: var(--main);
}

.radioButtons {
	display: flex;
	width: 100%;
	padding: 5px 0px;
}

.radioButtons input {
	width: auto !important;
	transform: scale(1.5);
	margin: 0px 20px !important;
}

.kulcsosRow,
.kulcsosRow2 {
	width: 100%;
	display: flex;
}

.kulcsosRow span {
	color: var(--main);
	font-size: 15px;
	min-height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border: 1px solid var(--main);
	padding: 5px 10px;
}

.kulcsosRow span img {
	max-width: 80px;
	max-height: 60px;
}

.kulcsosRow span a {
	color: var(--shallow);
	text-decoration: underline;
	transition: all 0.3s;
}

.kulcsosRow span a:hover {
	color: var(--darken);
}

/* banner */
.messageBanner {
	width: 100%;
	height: 300px;
	/* background: var(--highlight); */
	background: var(--highlight);
	;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.secondaryBackground .messageBanner {
	background: var(--shallow);
}

.messageWrap {
	display: flex;
	flex-direction: column;
	width: 55%;
}

.messageWrap h2 {
	font-size: 35px;
	font-weight: 700;
	color: var(--shallow);
	padding-bottom: 10px;
	width: 100%;
}

.messageWrap p {
	font-size: 14px;
	color: var(--shallow);
	font-weight: 500;
	width: 100%;
}

.secondaryBackground .messageWrap h2,
.secondaryBackground .messageWrap p {
	color: var(--highlight);
}

.ctaFlexBetween {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.ctaFlexBetween .mainButton,
.ctaFlexBetween .tertiaryButton,
.ctaFlexBetween .secondaryButton,
.ctaFlexBetween .quaternaryButton {
	min-width: 0px;
	width: 45px;
	height: 35px;
}

.ctaFlexBetween .cartButton {
	width: 35px;
	height: 35px;
}

/* message form */
.messageFormWrap {
	background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%);
	height: 100vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.messageForm {
	width: 40%;
	background: var(--shallow);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px 0px;
}

.messageForm form {
	width: 80%;
}

.messageForm h3 {
	width: 100%;
	font-size: 26px;
	padding-bottom: 20px;
	color: var(--highlight);
}

.messageForm input {
	width: 100%;
	border: 1px solid var(--main);
	border-radius: 4px;
	height: 35px;
	padding-left: 20px;
	margin-bottom: 20px;
	margin-top: 10px;
	color: var(--main);
}

.messageForm textarea {
	width: 100%;
	border: 1px solid var(--main);
	border-radius: 4px;
	height: 100px;
	padding-top: 7px;
	padding-left: 20px;
	margin-bottom: 20px;
	margin-top: 10px;
	color: var(--main);
}

.messageForm .mainButton {
	border: 0px;
	width: 150px;
	padding: 0px;
	min-width: 0px;
	color: var(--shallow);
}

.messageForm label {
	font-weight: 200;
	font-size: 15px;
	margin-bottom: 5px;
	color: var(--main);
}

.messageFormAuxiliary {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.messageFormAuxiliary img {
	width: 355px;
	height: 355px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s;
}

.messageFormAuxiliary img:hover {
	transform: scale(1.02);
}

.messageForm span {
	color: var(--main);
	font-weight: 300;
}

.messageForm h1 {
	width: 100%;
	font-size: 45px;
}

.messageForm p {
	margin-top: 20px;
}

.separatedImageShowcase{
	cursor: pointer;
}

.gs-service-gallery-grid .gs-service-gallery-item {
	transition: transform 0.3s;
}

.gs-service-gallery-grid .gs-service-gallery-item:hover {
	transform: scale(1.035);
	box-shadow: 0 8px 32px oklch(0 0 0 / 0.11), 0 1.5px 7px oklch(0 0 0 / 0.05);
	z-index: 1;
}

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

footer img {
	width: 100%;
	height: 45px;
	transition: all 1s;
	border-radius: 10px;
}

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

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

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

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

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

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

footer .navbar a {
	font-size: 18px;
	font-weight: 400;
	margin: 3px 0px;
}

footer .navbar a:hover {
	font-size: 19px;
}

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

.footerCenterWrap {
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 25px
}

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

.footerList a {
	color: var(--shallow);
	transition: all 0.3s;
	font-size: 13px;
}

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

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

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

.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(--shallow);
	transition: all 0.3s;
	font-size: 13px;
}

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

/* cart */
.uploaderMessage {
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: var(--deep);
	background: var(--main);
}

.uploaderMessage h1,
.uploaderMessage span {
	color: var(--shallow);
	font-size: 40px;
	font-weight: 600;
}

.uploaderMessage span {
	animation: loadingRotation 1s infinite;
}

#itemquantity {
	height: 45px;
	width: 50px;
	border-radius: 4px;
	border: 2px solid var(--main);
	padding-left: 10px;
	color: var(--main);
}

@keyframes infiniteShake {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	10% {
		transform: translate(0, 0) rotate(-7deg);
	}

	20% {
		transform: translate(0, 0) rotate(7deg);
	}

	30% {
		transform: translate(0, 0) rotate(-5deg);
	}

	40% {
		transform: translate(0, 0) rotate(5deg);
	}

	50% {
		transform: translate(0, 0) rotate(-3deg);
	}

	60% {
		transform: translate(0, 0) rotate(3deg);
	}

	70% {
		transform: translate(0, 0) rotate(-2deg);
	}

	80% {
		transform: translate(0, 0) rotate(2deg);
	}

	90% {
		transform: translate(0, 0) rotate(-1deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

.shoppingCartIcon .material-symbols-outlined {
	animation: infiniteShake 1s infinite;
}

.shoppingCartIcon .material-symbols-outlined {
	color: var(--highlight);
	cursor: pointer;
	transition: all 0.3s;
	font-size: 30px;
}

.shoppingCartIcon:hover .material-symbols-outlined {
	color: var(--highlight);
}

.secondaryNav .shoppingCartIcon .material-symbols-outlined {
	color: var(--highlight);
}

.secondaryNav .shoppingCartIcon:hover .material-symbols-outlined {
	color: var(--highlight);
}

.shoppingCartIconAlt:not(.gs-header-icon-btn) .material-symbols-outlined {
	color: var(--highlight);
	cursor: pointer;
	transition: all 0.3s;
	font-size: 30px;
}

.shoppingCartIconAlt:hover .material-symbols-outlined {
	color: var(--main);
}

.secondaryNav .shoppingCartIconAlt .material-symbols-outlined {
	color: var(--main);
}

.secondaryNav .shoppingCartIconAlt:hover .material-symbols-outlined {
	color: var(--main);
}

.cartMenu {
	top: 0;
	right: 0;
	width: 40%;
	z-index: 17;
	height: 100%;
	/* height: auto; */
	display: none;
	position: fixed;
	flex-direction: column;
	animation: fadeInRight 1s;
	background: var(--shallow);
	backdrop-filter: blur(5px);
	box-shadow: -10px 0px 40px var(--main);
}

.cartMenu a {
	color: var(--shallow);
	font-size: 10px;
	margin: 20px 20px 20px 20px;
	font-weight: 600;
	border-left: 5px solid var(--main);
}

.gs-portfolio-single-link img {
	transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
	display: block;
}

.gs-portfolio-single-link img:hover {
	transform: translateY(-5px) scale(1.03);
	box-shadow: 0 8px 32px rgba(0,0,0,0.15);
	z-index: 2;
}

.cartMenu .closeButton {
	color: var(--highlight);
	font-size: 50px;
	font-weight: 600;
	border: 0;
	box-shadow: none;
	margin-left: 20px;
	cursor: pointer;
	transition: all 0.3s;
}

.cartMenu .closeButton:hover {
	color: var(--highlight);
}

.itemWrapper {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow-y: scroll;
}

.itemWrapper h1 {
	font-weight: 400;
	color: var(--highlight);
}

.itemWrapper+.ctaSectionFlex {
	padding: 20px;
	justify-content: start;
}

.cartTotal {
	padding: 20px;
	display: flex;
	justify-content: space-between;
	width: 90%;
}

.cartTotal h2 {
	color: var(--highlight);
}

#itemDescription {
	overflow: hidden;
	margin-bottom: 20px;
}

#itemDescriptionMore,
#itemDescriptionLess {
	cursor: pointer;
	border: 2px solid var(--highlight);
	border-radius: 4px;
	padding: 3px 8px;
	align-items: center;
	display: flex;
	font-size: 12px;
	color: var(--highlight);
	margin: 10px 0px 10px 0px;
}

#itemDescriptionButtons {
	width: 100%;
	display: flex;
	justify-content: start;
}

.singlePageCartForm{
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: center;
}

.cartProduct {
	gap: 10px;
	width: 100%;
	display: flex;
	align-items: center;
	padding-bottom: 30px;
	justify-content: space-between;
	border-bottom: 1px solid var(--highlight);
}

.cartProductTotal {
	justify-content: right !important;
	border-bottom: none !important;
}

.desktopversion img{
	width: 250px !important;
    height: 80px;
}

.desktopversionFooter img{
	width: 180px !important;
    height: 60px;
}

.cartProduct img {
	/* width: 15%; */
}

.gs-home-portfolio-item{
	color: var(--deep);
}

.cartProduct h1 {
	font-size: 25px;
	color: var(--highlight);
	text-wrap: nowrap;
}

.cartProduct h2 {
	font-size: 25px;
	color: var(--highlight);
	transition: all 0.1s;
	cursor: pointer;
}

.cartProduct .cartquantityInc,
.cartProduct .cartquantityDec {
	color: var(--highlight);
}

.cartProduct a {
	margin: 0px;
	border: none;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 55%;
	flex-wrap: wrap;
}

.cartProduct a h1 {
	font-size: 12px;
	transition: all 0.3s;
	font-weight: 700;
	width: 92px;
	flex-wrap: wrap;
	display: flex;
	word-wrap: break-word;
	overflow: hidden;
	text-wrap: wrap;
}

.deleteCartItem {
	cursor: pointer;
	color: var(--highlight);
	transition: all 0.2s;
}

.cartCounter {
	background: var(--highlight);
	height: 25px;
	width: 25px;
	border-radius: 4px;
	color: var(--shallow);
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(10px, -45px);
	cursor: pointer;
}

.checkoutWrap .deleteCartItem {
	font-size: 25px;
	color: var(--deep);
}

.checkoutWrap .cartProduct a h1 {
	font-size: 20px;
	text-align: left;
	color: var(--deep);
}

.productQuantity{
	font-size: 30px;
}

.checkoutWrap .cartProduct .cartquantityInc,
.checkoutWrap .cartProduct .cartquantityDec {
	font-size: 40px;
	color: var(--deep);
}

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

.cartProduct a:hover h1,
.cartProduct a:hover h2 {
	color: var(--highlight);
}

.cartProduct h2:hover {
	color: var(--highlight);
}

.productTitleAndPrice {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 25vw;
}

.productTitleAndPrice h1 {
	font-size: 20px;
	color: var(--highlight);
	text-align: left;
	width: 100% !important;
}

.qtyChange {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 15px;
	width: 100px;
}

.invisibleForm {
	display: none;
}

#modalProductList {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	margin: 0px;
	width: 80%;
}

#modalProductList p,
#modalProductList li {
	color: var(--deep);
}

#modalProductList li {
	width: 80%;
	padding-left: 10px;
}

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

/* login */
.loginWrap {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.loginWrap h1{
	color: var(--deep);
}

.loginBox {
	color: var(--main);
	padding: 50px;
	margin: 50px;
	border-radius: 4px;
	background: var(--deep-op7);
	border: 5px solid var(--highlight);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.loginBox * {
	color: var(--main);
}

.loginBox form,
.passwordResetForm form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.loginBox form label,
.passwordResetForm form label {
	color: var(--highlight);
	width: 100%;
}

.loginBox form input,
.passwordResetForm form input {
	border-radius: 4px;
	border: 3px solid var(--highlight);
	padding: 10px;
	width: 450px;
}

.loginBox h3,
.passwordResetForm h3 {
	color: var(--highlight);
}

.loginBox .mainButton {
	width: 200px;
	color: var(--main);
	font-weight: 700 !important;
	font-size: 17.5px;
}

.failedMessage {
	padding: 300px;
	color: var(--highlight);
}

#registrationSwitch a,
#loginSwitch a,
#passwordResetLink a {
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s;
	color: var(--highlight);
	font-weight: 600;
}

#registrationSwitch a:hover,
#loginSwitch a:hover,
#passwordResetLink a:hover {
	transform: scale(1.05);
	color: var(--highlight);
}

#errorMessageLog,
#errorMessageReg {
	color: var(--highlight);
	display: flex;
	align-items: center;
}

.profileWrap {
	min-height: 100vh;
	width: 100%;
	background: var(--shallow);
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 150px;
	gap: 30px;
}

.profileData {
	gap: 20px;
	width: 74vw;
	display: flex;
	padding: 50px;
	border-radius: 10px;
	flex-direction: column;
	background: var(--shallow-darker);
}

.profileData h1 {
	font-size: 15px;
	color: var(--deep);
}

.profileData h2 {
	color: var(--deep);
}

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

.profileData a:hover {
	color: var(--deep-op7);
}

.productListRow a {
	color: var(--highlight);
	display: flex;
	gap: 5px;
	transition: all 0.3s;
	align-items: center;
}

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

.productListRow a img {
	width: 100px;
	height: 100px;
	border-radius: 4px;
	object-fit: contain;
}

.orderDetails {
	display: flex;
	justify-content: space-between;
	background: var(--shallow-darker);
	padding: 10px 0px;
	border-radius: 4px;
	padding: 20px;
}

.orderDetails p {
	font-size: 20px;
}

.orderDetails img{
	width: 30%;
}

.productListRow h3 {
	font-size: 28px;
	color: var(--shallow);
}

.productListRow h4 {
	padding: 10px 0px;
	font-size: 27px;
}

.productList {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--shallow);
	border-radius: 4px;
	padding: 20px;
	background: var(--main);
}

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

.productListRow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--deep);
	padding: 5px;
}

.productList p {
	margin: 5px 0px;
	color: var(--shallow);
}

.productList .orderDetails p {
	margin: 5px 0px;
	color: var(--deep);
}

.profileOrders {
	display: flex;
	flex-direction: column;
	gap: 25px;
	margin: 20px 0px;
}

.checkoutWrap {
	gap: 20px;
	width: 80%;
	display: flex;
	padding: 20px 0px;
	align-items: start;
	flex-direction: row;
}

.checkoutData {
	width: 100%;
	border-radius: 4px;
	/* border: 2px solid var(--highlight); */
}

/* Coupon block on checkout */
.couponBlock {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	margin-top: 4px;
}

.couponBlock > label {
	color: var(--shallow);
}

.couponInputRow {
	display: flex;
	gap: 8px;
	align-items: stretch;
	width: 100%;
}

.couponInputRow input {
	flex: 1 1 auto;
	min-width: 0;
}

.couponInputRow input[readonly],
.couponInputRow input:disabled {
	background: rgba(255, 255, 255, 0.6);
	cursor: not-allowed;
}

.couponApplyButton,
.couponRemoveButton {
	flex: 0 0 auto;
	cursor: pointer;
	padding: 0 18px;
	border-radius: 4px;
	border: 2px solid var(--shallow);
	background: transparent;
	color: var(--shallow);
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: all 0.2s ease;
	min-height: 42px;
	white-space: nowrap;
}

.couponApplyButton:hover,
.couponRemoveButton:hover {
	background: var(--shallow);
	color: var(--deep);
}

.couponApplyButton:disabled {
	opacity: 0.6;
	cursor: progress;
}

.couponRemoveButton {
	border-color: rgba(255, 255, 255, 0.55);
	color: rgba(255, 255, 255, 0.85);
}

.couponStatus {
	min-height: 18px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--shallow);
}

.couponStatus.couponStatusOk {
	color: #6fe6a3;
}

.couponStatus.couponStatusError {
	color: #ff8a8a;
}

.couponStatus.couponStatusInfo {
	color: var(--shallow);
}

.orderSummary {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 6px;
	padding: 14px 16px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	margin-top: 8px;
}

.orderSummary .orderSummaryRow {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	color: var(--shallow);
	cursor: default;
}

.orderSummary .orderSummaryRow .orderSummaryLabel,
.orderSummary .orderSummaryRow .orderSummaryValue {
	color: var(--shallow);
	font-weight: 500;
	cursor: default;
	width: auto;
	display: inline-block;
	justify-content: flex-start;
}

.orderSummary .orderSummaryRow .orderSummaryValue {
	text-align: right;
}

.orderSummary .orderSummaryDiscount .orderSummaryValue {
	color: #6fe6a3;
	font-weight: 600;
}

.orderSummary .orderSummaryTotal {
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.orderSummary .orderSummaryTotal .orderSummaryLabel,
.orderSummary .orderSummaryTotal .orderSummaryValue {
	font-weight: 800;
	font-size: 1.05em;
}

/*  */
.disabledButton {
	pointer-events: none;
	filter: brightness(0.5);
}

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

#mobileMenuIcon:not(.gs-mobile-toggle) {
	display: none;
}

#openCategoryRoster {
	display: none;
}

/* ORDER */

.companyInfo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.companyInfo input {
	width: 100%;
}

.cartProduct div h1,
.cartProduct h2 {
	font-size: 25px;
	color: var(--deep);
	font-weight: 700;
}

.activityViewWrap {
	width: 100%;
	display: flex;
	justify-content: center;
	text-align: center;
}

.activityView {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 50px;
	color: var(--shallow);
}

.activityView h1,
.activityView p {
	color: var(--deep);
}

.welcomeText .ctaSectionFlex .specialCta {
	background: var(--highlight);
	color: var(--shallow);
	border: none;
	padding: 2px 20px;
}

.cartButton {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--highlight);
	height: 50px;
	width: 50px;
	transition: all 0.3s;
	border-radius: 4px;
}

.cartButton span {
	color: var(--shallow);
	transition: all 0.3s;
}

.cartButton:hover {
	background: var(--deep);
}

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

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

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

#backToTop:hover {
	transform: scale(0.9);
	box-shadow: 1px 1px var(--main);
}

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

.arrowButton {
	border-radius: 50%;
	border: 2px solid var(--highlight);
	padding: 10px;
	color: var(--shallow);
	cursor: pointer;
	transition: 1s all;
	animation: moveOver 1.5s;
}

.arrowButton:hover {
	transform: scale(1.2);
}

.servicePageLeft {
	color: var(--shallow);
	background: var(--deep);
}

.servicePageRight {
	color: var(--shallow);
}

.servicePageLeft,
.servicePageRight {
	display: flex;
	flex-direction: column;
	align-items: end;
	width: 85%;
	padding: 0px 100px 60px 0px;
	animation: moveOver 1s;
}

.servicePageLeft {
	align-items: center;
	padding: 0px 0px 60px 0px;
	width: 100%;
}

.servicePageLeft .serviceDescWrap {
	display: flex;
	justify-content: center;
	flex-direction: row;
	gap: 20px;
}

.servicePageLeft h2,
.servicePageRight h2 {
	width: fit-content;
	font-size: 50px;
	padding: 50px 0px 0px 0px;
	font-family: "Comfortaa", sans-serif;
}

.servicePageLeft h2 {
	color: var(--shallow);
	border-bottom: 3px solid var(--shallow);
}

.servicePageLeft h3 {
	font-size: 35px;
	border-bottom: 3px solid var(--shallow);
}

.servicePageLeft span {
	font-size: 12px;
	font-weight: 100;
}

.servicePageLeft p {
	font-size: 20px;
	font-weight: 200;
	margin: 20px 0px;
	text-align: center;
	line-height: 30px;
	width: 75%;
}

#bobWelcome {
	background: linear-gradient(270deg, rgba(0, 0, 0, 1) 8%, rgba(12, 9, 121, 0) 70%);
}

#bobContent {
	background: linear-gradient(270deg, rgba(0, 0, 0, 1) 8%, rgba(12, 9, 121, 0) 70%);
	align-items: center;
}

#bobContent .contact {
	padding: 80px 0px;
	width: 100%;
}

#bobContent h2 {
	color: var(--shallow);
	font-size: 65px;
	text-decoration: underline;
}

.playForward {
	border: 2px solid var(--shallow);
	border-radius: 50%;
	margin: 20px 0px;
}

.playForward .material-symbols-outlined {
	font-size: 35px;
	cursor: pointer;
}

.playForward:hover .material-symbols-outlined {
	filter: drop-shadow(1px 1px 5px var(--shallow));
}

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

.largeGalleryNoJs img {
	width: 100%;
	cursor: pointer;
	transition: all 0.3s;
	max-height: 200px;
	object-fit: cover;
	max-width: 400px;
	object-position: center;
}

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

.powerPointSlide {
	transition: all 0.1s;
}

.powerPointSlideAnimLeft {
	animation: fadeInRight 2s;
}

.powerPointSlideAnimRight {
	animation: fadeInLeft 2s;
}

.navToincalzireSectionTitle {
	padding-top: 15vh;
	padding-bottom: 50px;
	display: flex;
	justify-content: left;
	align-items: center;
	width: 87.5vw;
	flex-wrap: wrap;
}

.navToincalzireSectionTitle h1 {
	padding-left: 6.25vw;
	color: var(--shallow);
}

.navToincalzire {
	padding-bottom: 15vh;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 87.5vw;
	margin: 0 auto;
	gap: 20px;
	flex-wrap: wrap;
}

.navToincalzire a {
	text-decoration: none;
}

.incalzireImage {
	background-color: var(--shallow);
	border-radius: 4px;
	padding: 20px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.incalzireImage:hover {
	transform: scale(1.1);
}

.incalzireImage img {
	max-width: 100%;
	height: 30vh;
	display: block;
	border-radius: 4px;
}

.navToGym {
	padding-top: 20px;
	flex: 1;
	min-width: 300px;
	transition: transform 0.3s ease;
}

.navToGym h1 {
	color: var(--shallow);
	text-align: center;
}

.navToGym:hover {
	transform: scale(1.1);
}

.hiddenTextArea {
	display: none;
}

.modifCommentSectionBtnText {
	color: var(--shallow);
	padding-right: 10px;
}

.modifCommentSection {
	display: flex;
	flex-direction: row;
	justify-content: left;
	gap: 20px;
}

#subToNewsletterForm {
	width: 20vw;
	height: 50%;
	gap: 10px;
	display: flex;
	flex-direction: column;
}

#newsletterEmailBox {
	padding: 20px !important;
	border-radius: 5px !important;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	max-height: 100px;
	height: 50px;
	background: transparent;
	border-radius: 4px;
	border: 2px solid var(--shallow);
	color: var(--shallow);
	font-weight: 400;
	padding: 10px;
}

#newsletterEmailBox::placeholder {
	color: var(--shallow);
	opacity: 1;
}

#newsletterEmailBox::-webkit-input-placeholder {
	color: var(--shallow);
}

#newsletterEmailBox::-moz-placeholder {
	color: var(--shallow);
	opacity: 1;
}

#newsletterEmailBox:-ms-input-placeholder {
	color: var(--shallow);
}

.material-symbols-outlined .clickableRating,
#newRatingStars .material-symbols-outlined,
.commentRatingStarsDetails .material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-size: 28px !important;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

#newProductRatingNumber {
	line-height: 1;
	margin-left: 10px;
	font-size: 35px !important;
}

/* specs */
.productInfo {
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.productInfo p {
	white-space: pre-wrap;
	font-weight: 200;
}

.productInfo table {
	width: 90%;
	/* border: 1px solid black; */
}

.productInfo tr,
.productInfo td {
	/* border: 1px solid black; */
	max-width: 50%;
	text-align: center;
}

.productInfo td:nth-child(1) {
	text-align: start;
}

/* buttons */

.mainButton {
	z-index: 12;
	width: auto;
	min-width: 160px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--highlight);
	height: 40px;
	transition: all 0.3s;
	cursor: pointer;
	border: 2px solid var(--highlight);
	border-radius: 4px;
	color: var(--shallow);
}

.mainButton span {
	color: var(--shallow);
	font-weight: 700 !important;
	transition: all 0.3s;
	font-size: 15px;
	user-select: none;
	display: flex;
	align-items: center;
	text-align: center;
}

.secondaryButton {
	z-index: 12;
	width: auto;
	min-width: 160px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	height: 40px;
	transition: all 0.3s;
	cursor: pointer;
	border: 2px solid var(--shallow);
	border-radius: 4px;
	color: var(--shallow);
}

.secondaryButton span {
	color: var(--shallow);
	font-weight: 700 !important;
	transition: all 0.3s;
	font-size: 15px;
	user-select: none;
	display: flex;
	align-items: center;
	text-align: center;
}

.tertiaryButton {
	z-index: 12;
	width: auto;
	min-width: 160px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--highlight);
	border: 2px solid var(--highlight);
	height: 40px;
	transition: all 0.3s;
	cursor: pointer;
	border-radius: 4px;
	color: var(--main);
}

.tertiaryButton span {
	color: var(--shallow);
	font-weight: 700 !important;
	transition: all 0.3s;
	font-size: 15px;
	user-select: none;
	display: flex;
	align-items: center;
	text-align: center;
}

.quaternaryButton {
	z-index: 12;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.3s;
	color: var(--main);
	background: var(--shallow);
	padding: 15px;
}

.quaternaryButton span {
	color: var(--main);
	font-weight: 700 !important;
	transition: all 0.3s;
	font-size: 17.5px;
	user-select: none;
	display: flex;
	align-items: center;
	text-align: center;
}

.mainButton:hover,
.secondaryButton:hover,
.tertiaryButton:hover,
.quaternaryButton:hover {
	transform: scale(1.1);
}

/* 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(--primary);
	color: var(--shallow);
	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(--ink-old);
	color: var(--shallow);
	transform: translateY(-5px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.blog-tag-active {
	background: black;
	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/blogs_bg.jpg) center center/cover no-repeat; */
	background-image: linear-gradient(180deg, 
					color-mix(in oklab, var(--ink-old) 30%, black 20%) 0%, transparent 100%), url(./img/blogs_bg.JPG);
	background-size: cover;
	background-position: center;
}

.welcomeSectionIndex {
	width: 100%;
	display: flex;
	z-index: 10;
	position: relative;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
}

.blogPostWrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: calc(80% + 20px);
	margin: 40px auto;
	padding: 20px;
	/* background-color: var(--shallow-darker); */
	/* background: red; */
	border-radius: 8px;
	gap: 30px !important;
}

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

.blogPost {
	height: calc(100% - 60px);
	background-color: var(--shallow-darker);
	padding: 30px;
	margin-bottom: 30px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px var(--deep-op3);
	transition: all 0.3s ease;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.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(--main);
	margin-top: 0;
	margin-bottom: 10px;
	line-height: 1.2;
	text-shadow: 1px 1px 2px var(--deep-op3);
}

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

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

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

.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;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
	object-fit: cover;
	max-width: 90%;
	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(--main);
	margin-bottom: 10px;
	line-height: 1.2;
}

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

.blog-meta {
	font-size: 0.9em;
	color: var(--main-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(--main);
	text-align: justify;
}

.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;
	color: var(--highlight);
}

/* FILTER STYLING */

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

.filterWrapper {
	display: flex;
	flex-direction: column;
	background-color: var(--shallow-darker);
	min-height: 50vh;
	height: 100%;
	margin-left: 30px;
	width: calc(20% - 30px);
	border-radius: 10px;
	padding: 20px;
	margin-top: 20px;
	margin-bottom: 30px;
	gap: 20px !important;
}

.searchBarModern {
	display: flex;
	align-items: center;
	background: var(--shallow);
	border-radius: 8px;
	padding: 6px 12px;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.searchIconModern {
	color: var(--deep);
	font-size: 24px;
	margin-right: 8px;
}

.searchInputModern {
	border: none;
	outline: none;
	background: transparent;
	font-size: 1em;
	color: var(--deep);
	width: 100%;
}

.filterSection {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--deep-op7);
}

.lastFilterSection {
	border: none;
	padding-bottom: 0px;
}

.filterTitle {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	font-weight: bold;
	margin-bottom: 8px;
	gap: 10px;
	color: var(--main);
}

.filterTitle span {
	color: var(--main);
}

.filterTitleRow {
	display: flex;
	flex-direction: row;
}

.filterCheckboxGroup label {
	display: block;
	margin-bottom: 4px;
}

.filterSection * {
	color: var(--main) !important;
}

select#manufacturerDD {
	width: 100%;
	height: 40px;
	border-radius: 10px;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 500;
	border: none;
}

select#manufacturerDD option {
	background: var(--shallow);
	color: var(--deep);
	text-align: center;
}

.filterSlider {
	width: 100%;
}

.dimensionInput {
	width: 100%;
	height: 40px;
	border: none;
	font-size: 15px;
	padding: 5px 10px;
	border-radius: 10px;
	margin-bottom: 10px;
}

.dimensionFilter {
	margin-top: 10px;
	font-weight: 600;
}

.dimensionFilter span {
	margin-top: 10px;
	font-weight: 300;
}

.widthOptions,
.heightOptions,
.depthOptions {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 10px;
	border-radius: 10px;
	border: none;
	background: var(--shallow);
}

.dimensionsFilterWrapper {
	transition: all 0.5s;
}

#dimFilterToggle:hover {
	cursor: pointer;
}

.specFilterSliderGroup {
	margin: 10px 0px;
}

.specFilterSliderGroup label {
	font-weight: bold;
}

.specFilterCheckboxGroup {
	margin: 12px 0;
}

.specFilterCheckboxGroup .filterTitle {
	margin-bottom: 8px;
}

.spec-filters-assigned .specFilterCheckboxGroup + .specFilterSliderGroup,
.spec-filters-assigned .specFilterSliderGroup + .specFilterCheckboxGroup {
	margin-top: 14px;
}

.clearFilter span {
	color: var(--deep);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
}

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

.clearAllFiltersBtn {
	z-index: 12;
	width: auto;
	min-width: 180px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--main);
	height: 50px;
	transition: all 0.3s;
	cursor: pointer;
	border: 2px solid var(--main);
	border-radius: 4px;
	color: var(--shallow);
}

.clearAllFiltersBtn span {
	color: var(--shallow);
	font-weight: 700 !important;
	transition: all 0.3s;
	font-size: 17.5px;
	user-select: none;
	display: flex;
	align-items: center;
	text-align: center;
}

.clearAllFiltersBtn:hover {
	transform: scale(1.05);
	box-shadow: 2px 2px 10px var(--deep), -2px -2px 10px var(--shallow);
}

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

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

.filterDropdownHeader:hover h1 {
	color: var(--shallow);
}

.filterDropdown {
	flex-direction: column;
	width: inherit;
	position: absolute;
	margin-top: 10px;
	height: 30vh;
	overflow-y: auto;
	animation: fadeInTop 0.5s;
}

.filterDropdown a {
	padding: 8px 20px;
	font-size: 15px;
	color: var(--deep);
	z-index: 99;
	background: var(--highlight);
	transition: all 0.3s;
	border-bottom: 1px solid var(--shallow);
}

.filterDropdown a:hover {
	background: var(--deep);
	color: var(--shallow);
}

/* MODERN CARDS */
.modernCardWrapper {
	display: flex;
	width: 100%;
	margin: 100px 0px;
	align-items: center;
	flex-direction: column;
	justify-content: start;
}

.filterAndProductWrapper .modernCardWrapper {
	width: 80%;
}

.modernCardWrapper h2 {
	font-size: 40px;
	margin-bottom: 20px;
}

.modernCards {
	box-sizing: border-box;
	width: 100%;
	display: grid;
	padding: 20px;
	grid-gap: 40px;
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
	animation: fadeInLeft 1s;
}

.modernCardsWide {
	display: grid;
	padding: 20px;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)) !important;
}

.modernCardsWider {
	display: grid;
	padding: 20px;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important;
}

.modernCard {
	border-radius: 20px;
	transition: all 0.3s;
	background: var(--highlight);
	box-shadow: 0 0 30px var(--deep-op7);
}

.modernCard:hover {
	transform: scale(1.05);
	background-color: var(--highlight-bright);
}

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

.containerModernCards img {
	width: 100%;
	display: block;
	max-height: 250px;
	object-fit: contain;
	background: var(--shallow);
	object-fit: contain;
	border-radius: 20px 20px 0 0;
	background: var(--shallow);
}

.containerModernCards:after {
	top: 0;
	left: 0;
	opacity: 0;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 20px 20px 0 0;
}

.detailsModernCards {
	padding: 20px 10px;
}

.detailsModernCards>h3 {
	font-size: 25px;
	font-weight: 600;
	text-align: right;
	color: var(--shallow);
	margin: 0px 20px 10px 0px;
}

.detailsModernCards>p {
	font-size: 15px;
	font-weight: 400;
	line-height: 30px;
	text-align: justify;
	color: var(--shallow);
	margin: 0px 20px 10px 20px;
}

.noMargin {
	margin: 0px;
}

.modernProductCard {
	background: var(--shallow-darker);

	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 6;
	gap: 0;
}

.modernProductCard a {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 0;

	height: fit-content;
}

.containerModernProductCard {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 15px;
	width: calc(100% - 30px);
	/* height: calc(70% - 40px); */
}

.containerModernProductCard img {
	/* width: 100%; */
	max-width: 100%;
	height: 200px;
	object-fit: contain;
	max-height: 100%;
}

.detailsModernProductCard {
	box-sizing: border-box;
	width: calc(100% - 30px);
	margin: 15px;
	margin-bottom: 0px;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 0;
}

.detailsRow {
	margin-bottom: 20px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
}

.detailsRow span {
	color: var(--deep);
	transition: all 0.3s;
	animation: none;
	cursor: pointer;
}

.detailsRow span:hover {
	color: var(--highlight-bright);
	transform: scale(1.4);
}

.add_shopping_cart {
	cursor: pointer;
	color: var(--main) !important;
}

.singlePageCartForm .add_to_favorites {
	cursor: pointer;
	color: red !important;
	font-size: 35px !important;
}

.add_to_favorites {
	cursor: pointer;
	color: red !important;
	font-size: 20px !important;
}

.detailsModernProductCard h3,
.detailsModernProductCard p {
	width: 100%;
	text-align: right;
	color: var(--deep);
	font-size: 14px;
	word-break: break-word;
}

.oldProductPrice {
	font-weight: 600;
	text-decoration: line-through;
	color: var(--highlight) !important;
}

.productPrice {
	color: var(--highlight) !important;
}

.productManufacturer {
	color: var(--deep-op5) !important;
	padding-bottom: 20px;
}

.noHeight {
	height: auto !important;
}

#longDescriptionWrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 70px;
}

#longDescription {
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 20px;
}

.descSection p {
	white-space: break-spaces;
}

.descImageDiv img {
	max-width: 60vw;
}

.singleImage {
	object-fit: contain !important;
}

.serviceDescriptionJustified p {
	text-align: justify !important;
}

.filter-wrapper-mobile-toggle {
	display: none;
}

.imageShowcaseWrapper {
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: 18px;
	margin: 30px 0 20px 0;
	gap: 24px;
}

.imageShowcaseWrapper .welcomeImg,
.imageShowcaseWrapper .welcomeImg2 {
	width: 88vw;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 12px;
	transition: opacity 0.5s;
	box-shadow: 0 4px 24px 0 var(--deep-op3);
	margin-bottom: 0;
}

.imageShowcaseWrapper .welcomeImg:hover,
.imageShowcaseWrapper .welcomeImg2:hover {
	transform: scale(1.0);
	filter: none;
}

.imageShowcaseWrapper .mainButton #openPromoCategory {
	position: absolute;
	bottom: 60px;
	right: 40px;
	margin-top: 0;
	width: 100%;
	max-width: 220px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	letter-spacing: 0.5px;
	align-self: unset;
}

.section-advantages-wrapper {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.section-advantages {
	margin-top: 30px;
	background: var(--shallow-darker);
	width: 80%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 150px;
	backdrop-filter: blur(20px);
	padding: 50px;
	border-radius: 50px;
}

.section-advantages-element {
	width: 20vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px
}

.section-advantages-element h4 {
	font-size: 17px;
}

.section-advantages-element p {
	font-size: 15px;
	text-align: center;
}

.details {
	backdrop-filter: blur(20px);
	padding: 50px;
	border-radius: 50px;
	background: var(--shallow-darker);
}

.details>div {
	width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

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

.shakingAnimation {
	animation: tilt-decrease 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.shakingAnimationMild {
	animation: tilt-decrease-mild 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.payment-methods .inputRow {
	display: flex;
	justify-content: left;
	align-items: center;
	margin-bottom: 10px;
}

.payment-methods .inputRow input[type="radio"] {
	width: 15px;
	height: 15px;
}

.commentSendingButton {
	color: var(--shallow);
}

.productPageInfoBlock2 .infoTel {
	font-size: 20px;
	font-weight: 400;
	color: var(--highlight);
}

.productPageInfoBlock2 .infoTel2 {
	font-size: 30px;
	font-weight: 600;
	color: var(--highlight);
}

.clearAllFiltersBtn span {
	color: var(--shallow) !important;
}

.heroRightSide {
	position: fixed;
	top: 25%;
	right: 31px;
	left: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50px;
	max-width: 70px;
	animation: fadeInRight .5s;
	gap: 5px;
}

.heroRightSide svg {
	width: 2vw;
	padding: 10px;
	height: auto;
}

.heroRightSide svg:hover {
	transform: scale(1.1);
}

.heroRightSideAlt {
	position: fixed;
	top: 55%;
	right: 26px;
	left: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50px;
	max-width: 70px;
	animation: fadeInRight .5s;
	gap: 5px;
}

.heroRightSideAlt svg {
	width: 3.3vw;
	padding: 10px;
	height: auto;
	animation: infiniteShake 1s infinite;
}

.heroRightSideAlt svg:hover {
	transform: scale(1.1);
}

.noProjectsShow{
	text-align: center;
	font-size: 30px;
	margin-top: 50px;
}

.order-product img {
	width: 20%;
	height: 90px;
    object-fit: cover;
}

.order-product .productTitleAndPrice h1{
	font-size: 20px;
}

.order-product .productTitleAndPrice{
	gap: 0px !important;
}

.order-product{
	display: flex;
	height: 20%;
	gap: 15px;
}

/* google */

.googleReviewsLayout {
	width: 95%;
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 30px;
	align-items: center;
}

.googleReviewsAside {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
}

.googleReviewsBrand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.googleLogoMark {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
}

.googleReviewsBrandText {
	display: flex;
	flex-direction: column;
	font-size: 32px;
	line-height: 1;
	font-weight: 700;
	color: var(--shallow);
}

.googleReviewWriteButton {
	background: #e11f26;
	border-radius: 12px;
	height: 50px;
}

.googleReviewWriteButton:hover {
	background: #ff2e37;
}

.googleReviewsCarouselWrap {
	width: 100%;
}

/* carousel */
.modernCardCarousel{
	display: flex;
	justify-content: center;
	width: 95%;
	align-items: center;
	gap: 14px;
}

.modernCardCarousel .carouselBtn{
	color: var(--shallow);
	font-size: 28px;
	cursor: pointer;
	transition: all .3s;
	user-select: none;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.18);
}

.modernCardCarousel .carouselBtn:hover{
	color: var(--main);
	background: rgba(255, 255, 255, 0.32);
}

.mobile-only{
	display: none !important;
}

.noMargin {
	margin: 0px;
}

.modernProductCard {
	background: var(--highlight-bright);

	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 6;
	gap: 0;
}

.modernProductCard a {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 0;

	height: fit-content;
}

.containerModernProductCard {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 15px;
	width: calc(100% - 30px);
	/* height: calc(70% - 40px); */
}

.containerModernProductCard img {
	/* width: 100%; */
	max-width: 100%;
	height: 200px;
	object-fit: contain;
	max-height: 100%;
}

.detailsModernProductCard {
	box-sizing: border-box;
	width: calc(100% - 30px);
	margin: 15px;
	margin-bottom: 0px;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 0;
}

.detailsRow {
	margin-bottom: 20px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
}

.detailsRow span {
	color: var(--deep);
	transition: all 0.3s;
	animation: none;
	cursor: pointer;
}

.detailsRow span:hover {
	color: var(--highlight-bright);
	transform: scale(1.4);
}

.reviewCardHeader {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.reviewIdentity {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.reviewAvatar {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: linear-gradient(180deg, #3db1ef 0%, #2397e0 100%);
	color: #fff;
	font-size: 30px;
	font-weight: 600;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.reviewMeta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.reviewStars {
	color: #fbbc05;
	font-size: 28px;
	letter-spacing: 2px;
	line-height: 1;
}

.reviewGoogleIcon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	margin-top: 2px;
}

.reviewRatingRow {
	display: flex;
	align-items: center;
	gap: 14px;
}

.reviewCardText {
	margin: 0;
	color: #49453f;
	font-size: 18px;
	line-height: 1.38;
	font-weight: 500;
	overflow: hidden;
}

.reviewReadMore{
	color: var(--deep);
	font-size: 20px;
	cursor: pointer;
}

.projectsWrapper .modernCards.current {
	display: grid !important;
}

.modernCardWrapper h2{
	color: var(--shallow);
}

.googleReviewsCarouselWrap .modernCards{
	grid-template-columns: repeat(2, 1fr) !important;
}

.projectsWrapper .detailsModernCards {
	position: static;
	width: auto;
	height: auto;
	padding: 18px 20px;
	border-radius: 24px;
	background: linear-gradient(180deg, #fbf6e8 0%, #f7efdc 100%);
	border: 1px solid rgba(220, 206, 175, 0.9);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
}

.projectsWrapper .detailsModernCards .reviewCardText,
.projectsWrapper .detailsModernCards > .reviewCardText {
	margin: 0;
	font-size: 16px;
	line-height: 1.48;
	font-weight: 500;
	text-align: left;
	color: #4f4a42;
	word-spacing: normal;
	letter-spacing: 0;
}

.projectsWrapper .detailsModernCards > p {
	margin: 0;
	font-size: 18px;
	line-height: 1.48;
	font-weight: 500;
	text-align: left;
	color: #4f4a42;
}

.reviewAuthor {
	font-size: 17px;
	font-weight: 700;
	color: #332f29;
	line-height: 1.2;
}

.reviewTime {
	font-size: 15px;
	color: #9d988d;
	line-height: 1.2;
}

.reviewVerified {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #4285f4;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}