header#masthead {
	background: var(--black-bg) center center / cover no-repeat;
	position: relative;
	margin-bottom: 20px;

	.header-inner {
		position: relative;
	}

	.header-inner > * {
		pointer-events: auto;
	}

	.header-row-one {
		background-color: var(--purple);
		z-index: 3;
		position: relative;

		.section-inner {
			width: 100%;
			padding: 10px 0 10px 400px;
			display: flex;
			align-items: center;
			gap: 45px;
			position: relative;
		}

		span.offer {
			color: white;
			font-size: 0.875rem;
			line-height: 1.1;
			padding-right: 20px;
			display: none;
			text-align: center;
		}
	}

	.header-row-one h1 {
		margin: 0;
		padding: 0;
	}

	.header-row-one a.logo {
		display: block;
		aspect-ratio: 55 / 31;
		width: 440px;
		background: url(../images/logo.svg) left / contain no-repeat;
		text-indent: -9999px;
		overflow: hidden;
		white-space: nowrap;
		border: 0;
		position: absolute;
		left: 100px;
		top: 0px;
		margin-top: -20px;
	}

	.header-row-one .header-contact {
		display: flex;
		align-items: center;
		gap: 40px;
	}

	.header-row-one .header-soc-med {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 15px;
		width: auto;
		min-width: 0;
		padding: 0;
		margin: 0;
		justify-content: flex-start;
	}

	.header-row-one .header-soc-med li {
		list-style: none;
		padding: 0;
		margin: 0;
		width: 24px;
		height: 24px;
	}

	.header-row-one .header-soc-med a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: none;
		text-indent: 0;
		white-space: nowrap;
		overflow: visible;
		font-size: 1.25rem;
		color: #fff;

		span {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}
	}

	.header-soc-med .fb a::before,
	.header-soc-med .ig a::before,
	.header-soc-med .li a::before {
		font:
			400 1.25rem "Font Awesome 6 Brands",
			normal;
		color: #fff;
	}

	.header-soc-med .fb a::before {
		content: "\f09a";
	}
	.header-soc-med .ig a::before {
		content: "\f16d";
	}
	.header-soc-med .li a::before {
		content: "\f0e1";
	}

	.header-phone,
	.header-email {
		display: flex;
		align-items: center;
		font-size: 1rem;
		color: #fff;
		font-family: var(--lato);
		text-decoration: none;
		position: relative;
		padding-left: 22px;
		padding-right: 0;
		font-weight: 600;
	}

	.header-phone {
		color: var(--light-purple);
	}

	.header-email {
		color: var(--blue);
	}

	.header-phone::before,
	.header-email::before {
		font:
			900 0.875rem "Font Awesome 6 Free",
			normal;
		color: #fff;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.header-phone::before {
		content: "\f095";
		color: var(--light-purple);
	}
	.header-email::before {
		content: "\f0e0";
		color: var(--blue);
	}

	.header-row-two {
		width: 100%;
		position: relative;
		background-color: var(--blue);
		text-align: center;
		font-size: 0.875rem;
		padding: 5px 0 5px 0;
		color: white;
		min-height: 20px;
	}

	nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 48px;
		padding: 0 10px;
		background: #fff;
		box-shadow: none;
		z-index: 10000;
		transition: all 0.3s;
	}

	nav .brand,
	nav .menu,
	nav .burger {
		float: right;
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	nav .brand {
		font-weight: 700;
		float: left;
		padding: 0 10px;
		max-width: 50%;
		white-space: nowrap;
		color: inherit;
	}

	nav .brand * {
		vertical-align: middle;
	}
	nav .logo {
		height: 32px;
		margin-right: 5px;
	}
	nav .select::after {
		height: calc(100% - 1px);
		padding: 0;
		line-height: 38px;
	}
	nav .menu > * {
		margin-right: 10px;
	}
	nav .burger {
		display: none;
	}

	div.menu-toggle {
		margin-left: auto;
		z-index: 100;
	}

	.menu-toggle-button {
		background-color: transparent;
		display: none;
		margin: 0;
		padding: 0 20px 0 0;
	}
	.menu-toggle-button .fa-bars {
		font-size: 2rem;
		color: white;
		background: rgba(0, 0, 0, 0.4);
		padding: 2px 5px 2px 5px;
	}

	/* Custom nav */
	.nav {
		position: relative;
		margin: 0;
		padding: 0;
		height: auto;
		background: transparent;
		display: flex;
	}

	.nav-toggle {
		display: none;
	}
	.nav-toggle-label {
		display: none;
		font-size: 2rem;
		color: #fff;
		padding: 16px;
		cursor: pointer;
		user-select: none;
	}

	.nav-menu {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		margin: 0;
		padding: 0;
		background: inherit;
		font-size: 1rem;
	}

	.nav-menu > li {
		position: relative;
		margin: 0 10px 0 10px;
	}

	.nav-menu > li > ul > li {
		position: relative;
	}

	.nav-menu > li > a {
		display: block;
		padding: 7px 15px;
		color: #fff;
		text-decoration: none;
		transition: background 0.2s;
		text-transform: uppercase;
		font-weight: 800;
		line-height: 1;
		border-radius: 99999px;
	}

	.nav-menu > li > ul > li > a {
		color: white;
		padding: 8px 12px 9px 12px;
		display: block;
		transition: background-color 0.2s;
		font-weight: 500;
		line-height: 1;
		border-radius: 99999px;
		font-size: 0.9375rem;
	}

	.nav-menu > li:hover > a,
	.nav-menu > li.current-menu-item > a,
	.nav-menu > li.current-menu-parent > a,
	.nav-menu > li > a:hover,
	.nav-menu > li > a:active,
	.nav-menu > li.open > a,
	.nav-menu > li > a:focus {
		background: rgba(255, 255, 255, 0.9);
		color: var(--light-purple);
	}

	.nav-menu > li > ul > li.current-menu-item > a,
	.nav-menu > li > ul > li > a:hover,
	.nav-menu > li > ul > li > a:focus {
		background: no-repeat right 10px top 50%;
		background-color: var(--purple);
		background-image: url(../images/droplet.svg);
	}

	.dropdown {
		display: block;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 0.25s ease,
			visibility 0.25s ease;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		right: 0;
		top: calc(100% + 13px);
		min-width: 280px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		z-index: 100;
		list-style: none;
		padding: 10px 6px;
		margin: 0;
		width: 250px;
		background-color: var(--light-purple);
		border: 5px solid var(--purple);
		border-radius: 15px;

		&::before {
			content: "";
			display: block;
			width: 280px;
			height: 20px;
			background: transparent;
			position: absolute;
			left: 0;
			top: -20px;
		}
	}

	.has-dropdown:hover > .dropdown,
	.has-dropdown:focus-within > .dropdown {
		opacity: 1;
		visibility: visible;
	}

	.has-dropdown:hover > a,
	.has-dropdown:focus-within > a {
		background: rgba(255, 255, 255, 0.9);
		color: var(--black-text);
	}

	.nav-overlay {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background: var(--purple);
		z-index: 9999;

		overflow-y: auto;
		display: none;
		text-align: center;
	}

	.nav-overlay.open {
		display: block;
	}

	.nav-overlay .nav-overlay-close {
		position: absolute;
		top: 0px;
		right: 0px;
		z-index: 10001;
		background: none;
		border: none;
		font: 900 2.5rem "Font Awesome 6 Free";
		color: white;
		cursor: pointer;
		line-height: 1;
		padding: 20px 30px 20px 30px;
		transition: color 0.2s;
		margin: 0;
	}

	.nav-overlay .nav-overlay-close::before {
		content: "\f00d";
		font: 900 2.5rem "Font Awesome 6 Free";
	}

	.nav-overlay .nav-overlay-close:hover {
		color: var(--orange);
	}

	.nav-overlay .nav-2 {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10000;
		color: #fff;
		margin: 60px 0 40px 0;
	}

	.nav-overlay .nav-2 ul {
		padding: 0;
		margin: 0;
	}

	.nav-overlay .nav-2 li {
		display: block;
	}

	.nav-overlay .nav-2 li.has-dropdown > a:after {
		content: "\f107";
		font: 900 0.6875rem "Font Awesome 6 Free";
		margin-left: 8px;
		display: inline-block;
		transform: rotate(-90deg);
		margin-right: -19px;
		position: relative;
		top: -2px;
	}

	.nav-overlay .nav-2 li.has-dropdown.open > a:after {
		content: "\f107";
		transform: rotate(0);
	}

	.nav-overlay .nav-2 li a {
		color: white;
		font-size: 1.25rem;
		padding: 5px 0px 5px 0;
		display: block;
		transition: none;
		font-weight: 700;
		text-transform: uppercase;
		position: relative;
	}

	.nav-overlay .nav-2 li li a {
		color: white;
		font-size: 1rem;
		font-weight: 500;
		text-transform: none;
	}

	.nav-overlay .nav-2 .dropdown {
		position: relative;
		display: none;
		top: 0;
		left: 0;
		right: 0;
		transform: translate(0);
		min-width: none;
		background: transparent;
		box-shadow: none;
		z-index: 1;
		width: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s;
		padding-left: 0px;
	}

	.nav-overlay .nav-2 .has-dropdown:hover > a,
	.nav-overlay .nav-2 .has-dropdown:focus-within > a {
		background: transparent;
		color: white;
	}

	.nav-overlay .nav-2 .has-dropdown.open > .dropdown {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	.nav-overlay .overlay-phone {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		font-weight: bold;
		margin: 0 auto 20px auto;
		font-size: 1.25rem;
		color: var(--light-purple);
	}

	.nav-overlay .overlay-phone a {
		color: var(--light-purple);
	}
	.nav-overlay .overlay-phone:before {
		content: "\f095";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		margin-right: 8px;
		display: inline-block;
	}

	.nav-overlay .overlay-email {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		font-weight: bold;
		margin: 0 auto 30px auto;
		font-size: 1.25rem;
		color: var(--blue);
	}

	.nav-overlay .overlay-email a {
		color: var(--blue);
	}
	.nav-overlay .overlay-email:before {
		content: "\f0e0";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		margin-right: 8px;
		display: inline-block;
	}

	.nav-overlay .soc-med {
		display: flex;
		flex-direction: row;
		gap: 30px;
		align-items: center;
		margin: 0;
		padding: 0;
		position: relative;
		left: -5px;
		justify-content: center;
	}

	.nav-overlay .soc-med li {
		width: 25px;
		height: 25px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.nav-overlay .soc-med a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: none;
		text-indent: 0;
		white-space: nowrap;
		overflow: visible;
		font-size: 1.5625rem;
		color: #fff;

		span {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}
	}

	.nav-overlay .soc-med .fb a::before,
	.nav-overlay .soc-med .ig a::before,
	.nav-overlay .soc-med .li a::before {
		font:
			400 1.5625rem "Font Awesome 6 Brands",
			normal;
		color: #fff;
	}

	.nav-overlay .soc-med .fb a::before {
		content: "\f09a";
	}
	.nav-overlay .soc-med .ig a::before {
		content: "\f16d";
	}
	.nav-overlay .soc-med .li a::before {
		content: "\f0e1";
	}

	section.header-slides {
		position: relative;
		z-index: 2;

		.section-inner {
			max-width: 100%;
			position: relative;
			padding: 0;
		}

		.swiper {
			/* aspect-ratio: 16/5; */
		}

		.swiper-wrapper {
			aspect-ratio: 16/5;
		}
		.swiper-slide {
			position: relative;
			height: 100%;
			width: 100%;

			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
				display: block;
			}
		}
	}

	.swiper-button-prev-header,
	.swiper-button-next-header {
		position: absolute;
		top: calc(50% - 1.25rem);
		width: 3.125rem;
		height: 3.125rem;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition:
			background-color 0.3s ease,
			transform 0.3s ease;
		z-index: 1;
		text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	}

	.swiper-button-prev-header {
		left: 0.625rem;
	}
	.swiper-button-next-header {
		right: 0.625rem;
	}

	.swiper-button-prev-header:hover,
	.swiper-button-next-header:hover {
		background-color: var(--light-blue);
	}

	.swiper-button-prev-header::before,
	.swiper-button-next-header::before {
		font: 900 3.125rem "Font Awesome 6 Free";
		color: white;
	}

	.swiper-button-prev-header::before {
		content: "\f104";
	}
	.swiper-button-next-header::before {
		content: "\f105";
	}
}

@media (max-width: 1400px) {
	header#masthead {
		margin-bottom: 20px;

		nav.nav {
			display: none;
		}
		.header-row-one {
			border-bottom: none;
			.section-inner {
				gap: 0px;
				padding-left: 250px;
			}
			span.offer {
				display: block;
			}
		}
		.header-row-one a.logo {
			left: 0px;
		}
		.header-row-one .header-contact {
			display: none;
		}

		.header-row-two {
			span.offer {
				display: none;
			}
		}

		/* .header-row-two button.menu-toggle-button {
			position: fixed;
			right: 0px;
			top: 0px;
		} */

		.menu-toggle-button {
			display: block;
		}
		section.header-slides {
			.swiper-wrapper {
				aspect-ratio: 12/5;
			}
		}
	}
}

@media (max-width: 900px) {
	header#masthead {
		.header-row-one {
			.section-inner {
				padding-left: 220px;
			}
			a.logo {
				width: 400px;
			}
		}
		.header-row-two {
			.section-inner {
				text-align: right;
			}
		}
		section.header-slides {
			.swiper-wrapper {
				aspect-ratio: 8/5;
			}
		}
	}
}
@media (max-width: 700px) {
	header#masthead {
		margin-bottom: 0;
		.header-row-one {
			.section-inner {
				padding-left: 170px;
			}
			a.logo {
				width: 300px;
				top: 10px;
			}
		}
		.header-row-two {
			font-size: 0.65rem;
		}
		section.header-slides {
			.swiper-button-prev-header,
			.swiper-button-next-header {
				width: 2rem;
				height: 2rem;
			}
			.swiper-button-prev-header::before,
			.swiper-button-next-header::before {
				font: 900 2rem "Font Awesome 6 Free";
				color: white;
			}
		}
	}
}
@media (max-width: 500px) {
	header#masthead {
		.header-row-one {
			a.logo {
				width: 300px;
				top: 10px;
			}
		}
		.header-row-two {
			font-size: 0.55rem;
		}

		section.header-slides {
			.swiper-wrapper {
				aspect-ratio: 7/5;
			}
		}
	}
}
@media (max-width: 470px) {
	header#masthead {
		.header-row-one {
			a.logo {
				width: 300px;
				top: 10px;
			}
			span.offer {
				font-size: 0.75rem;
			}
		}
		.header-row-two {
			font-size: 0.55rem;
			padding-left: 175px;
		}
	}
}
@media (max-width: 359px) {
	header#masthead {
		.header-row-one {
			a.logo {
				top: 35px;
			}
		}
		.header-row-two {
			font-size: 0.55rem;
			padding-left: 175px;
		}
	}
}

section.menu-tabs {
	position: relative;
	z-index: 3;
	bottom: 70px;
	overflow: hidden;
	height: 50px;

	.section-inner {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		height: 50px;
		align-items: end;
		justify-content: end;
	}

	.nav-tabs {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		gap: 10px;
		grid-column: 2 / 4;
	}

	.nav-tabs > .menu-item {
		margin: 0;
	}

	.nav-tabs > .menu-item > a {
		display: block;
		padding: 5px 28px 3px 28px;
		height: 27px;
		text-decoration: none;
		color: #222;
		font-weight: 800;
		font-size: 0.875rem;
		border: none;
		background: none;
		transition: all 0.2s ease;
		box-shadow: inset 0 -6px 10px -6px rgba(0, 0, 0, 0.3);
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		text-transform: uppercase;
	}

	.nav-tabs > .menu-item:first-child > a {
		background: var(--light-purple);
		color: white;
	}

	.nav-tabs > .menu-item:nth-child(2) > a {
		background: var(--blue);
		color: white;
	}

	.nav-tabs > .menu-item:nth-child(3) > a {
		background: white;
		color: var(--light-purple);
	}

	.nav-tabs > .menu-item > a:hover,
	.nav-tabs > .menu-item:focus-within > a {
		box-shadow: none;
		/* filter: brightness(0.9); */
		height: 37px;
		margin-bottom: -10px;
		transform: translateY(-10px);
	}

	.nav-tabs > .menu-item.current-menu-item > a {
		box-shadow: none;
	}

	.nav-tabs .sub-menu,
	.nav-tabs .dropdown {
		display: none !important;
	}

	@media (max-width: 1400px) {
		bottom: 70px;
	}

	@media (max-width: 900px) {
		/* bottom: 0px; */
		/* margin-bottom: 20px; */
		.nav-tabs {
			grid-column: 1 / 4;
		}
	}

	@media (max-width: 700px) {
		bottom: 50px;
		/* margin-bottom: 20px; */
		.nav-tabs {
			grid-column: 1 / 4;
		}
	}

	@media (max-width: 600px) {
		bottom: 50px;

		.nav-tabs > .menu-item > a {
			font-size: 0.7rem;
			padding: 4px 10px 3px 10px;
			height: 22px;
		}
		.nav-tabs > .menu-item > a:hover,
		.nav-tabs > .menu-item:focus-within > a {
			box-shadow: none;
			filter: brightness(0.9);
			height: 32px;
			margin-bottom: -10px;
			transform: translateY(-10px);
		}
	}

	@media (max-width: 410px) {
		.section-inner {
			padding: 0 2px 0 2px;
			justify-items: center;
		}
		.nav-tabs {
			gap: 2px;
		}
		.nav-tabs > .menu-item > a span.other-words {
			/* display: none; */
		}
	}
	@media (max-width: 355px) {
		.nav-tabs > .menu-item > a span.other-words {
			display: none;
		}
		.nav-tabs > .menu-item:last-child > a span.other-words {
			display: inline;
		}
	}
}