:root {
	/* Colors */
	--primary-color: #160F32;
	--primary-color-dark: #F05C3E;
	--primary-color-light: #6f87ff;
	--primary-button-text-color: #fff;
	--secondary-color: #76C5E2;
	--secondary-border-color: #ddd;
	--accent-color: #F05C3E;
	--background-color: #FFF4EE;
	--light-color: #FDCDA9;
	--white-color: #FFF4EE;
	--text-color: #000;
	--border-color: var(--secondary-color);
	--error-color: hsl(0, 70%, 50%);
	--success-color: hsl(150, 22%, 63%);

	/* Color Variables */
	--input-background: #fff;
	--input-disabled-bg: #f6f8ff;
	--input-disabled-inner: #e1e6f9;
	--icon-size: 1rem;

	--link-color: var(--primary-color-dark);
}

.bg-color-primary {
	background-color: var(--primary-color);
}

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

.bg-color-secondary {
	background-color: var(--secondary-color);
}

.bg-color-accent {
	background-color: var(--accent-color);
}

.bg-color-light {
	background-color: var(--light-color);
}

.text-color-primary {
	color: var(--primary-color);
}

.text-color-white {
	color: var(--white-color);
}

.bg-color-white {
	background-color: var(--white-color);
}

.text-color-secondary {
	color: var(--secondary-color);
}

.text-color-light {
	color: var(--light-color);
}

.text-color-accent {
	color: var(--accent-color);
}

.button, .link {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-heavy);
	font-family: azo-sans-web, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}


html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: var(--font-family);
	font-size: var(--body-font-size);
	font-weight: var(--font-weight-regular);
	font-variation-settings: var(--font-weight-regular);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01" on, "ss03" on, "cv05" on, "cv06" on, "cv10" on;
	line-height: var(--line-height-normal);
	letter-spacing: var(--letter-spacing);
	color: var(--text-color);
	background-color: var(--background-color);
	overscroll-behavior: none;
	overflow-x: hidden;
	position: relative;
}

.top-bar {
	width: 100%;
	background: var(--secondary-color);
	color: #fff;
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-xxs);
	text-align: center;
	padding: 0.2rem 0;
	z-index: var(--z-index-header);
	display: none;

	@media (min-width: 768px) {
		display: block;
	}

	.wrapper {
		position: relative;
		z-index: var(--z-index-header);
	}

	span {
		text-transform: uppercase;
	}
}

.header {
	background: var(--white-100);
	padding: 0;
	/*border-bottom: 1px solid var(--border-color);*/
	position: fixed;
	z-index: var(--z-index-header);
	/*box-shadow: var(--shadow-elevation-medium);*/
	width: 100%;
	top: 0;
	left: 0;
	transition: background-color 0.3s ease;

	&.header--transparent {
		background-color: rgba(255, 255, 255, 1);
	}

	.header-wrapper {
		padding-top: var(--space-xs);
		padding-bottom: var(--space-sm);
	}

	&:after {
			content: '';
			position: absolute;
			bottom: -12px;
			left: 0;
			width: 100%;
			height: 24px;
			background-size: cover;
			background-position: bottom;
			background-repeat: no-repeat;
			background-image: url('/images/header-bottom-wave-white.svg');
			z-index: var(--z-index-header);
		}


	@media (min-width: 992px) {

		&:after {
			bottom: -14px;
		}

		.header-wrapper {
			padding-top: var(--space-sm);
			padding-bottom: var(--space-xs);
		}
	}

	.header__logo {
		display: flex;
		align-items: center;
		grid-column: span 2;

		a {
			display: flex;
			align-items: center;
			width: 100%;
			max-width: 100px;
			padding-top: 0.4rem;
		}

		@media (min-width: 992px) {
			a {
				padding-top:0;
			}
		}
	}

	.header__trigger {
		grid-column: span 1;
		display: flex;
		justify-content: flex-end;
		padding-top: 2rem;
		svg {
			width: 36px;
			height: 36px;
		}
	}

	.header__search {
		grid-column: span 6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		
		.search-wrapper {
			width: 100%;
			max-width: 40rem;
			padding-left: 2.5rem; /* Adjust as needed to accommodate the icon */
			position: relative;
			color: var(--text-color);
			display: flex;
			align-items: center;
			border: 1px solid var(--border-color);
			border-radius: var(--border-radius-small);
		}

		.search-wrapper input {
			border: none;
		}

		.search-wrapper::before {
				content: '';
				position: absolute;
				left: 0.5rem; /* Adjust as needed */
				top: 50%;
				transform: translateY(-50%);
				width: 1.5rem; /* Adjust size as needed */
				height: 1.5rem;
				background-color: var(--primary-color); /* Grey background color */
				mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
				mask-repeat: no-repeat;
				mask-position: center;
				mask-size: contain;
				pointer-events: none;
			}

		
	}

	.header__grid {
		--grid-columns: 3;

		@media (min-width: 992px) {
			--grid-columns: 12;
		}
	}

	.nav__button,
	.nav__link,
	.nav__cta .button {
		font-size: var(--font-size-2xl);
		font-weight: 400;
		color: var(--primary-color);
		text-transform: uppercase;
		font-family: azo-sans-uber, sans-serif;

		
	}

	.nav__link:hover,
	.nav__button:hover {
		color: var(--primary-color-dark);
		background: transparent;
		border-color: transparent;
	}

	.nav__button,
	.nav__link {
		border-color: transparent;
		cursor: pointer;
	}

	.nav__link.active {
		color: var(--secondary-color);
	}

	.nav__cta .button.nav__cta__button {
		color: var(--white-100);
		padding: 0.8rem 3rem;
	}

	.nav__button {
		color: var(--white-100);
		background-color: var(--accent-color);
	}

	.category--link {
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 0;
		padding-right: 1.5rem;
	}

	.category--link:hover {
		border: 1px solid transparent;
		color: var(--secondary-color);
	}

	.nav__item {
		display: flex;
		flex-direction: column;
		width: 100%;
		border-bottom: 1px solid var(--border-color);
	}

	.nav-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--gap-xl);
	}

	.nav {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;

		width: 100%;

		@media (min-width: 992px) {
			flex-direction: row;
		}
	}

	.nav__cta {
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: var(--space-lg);
	}

	@media (max-width: 992px) {
		.header__nav {
			display: flex;
			position: fixed;
			flex-direction: column;
			width: 100%;
			top: 4.4rem;
			z-index: 200;
			padding: calc(var(--space-xl) * 1.6) var(--space-md);
			left: -200%;
			height: calc(100dvh - 3.4rem);
			background: var(--white-100);

			&.active {
				left: 0;
			}
		}



		.nav__button {
			padding-left: var(--space-xs);
			padding-right: var(--space-xs);
		}

		.nav-wrapper {
			flex-grow: 1;
			justify-content: space-between;
		}
	}

	@media (min-width: 993px) {
		.header__nav {
			grid-column: span 10;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.nav-wrapper {
			flex-direction: row;
			gap: var(--space-xl);
			grid-column: span 10;
		}

		.nav__item {
			border-bottom: none;
		}

		.nav__cta {
			gap: 0;
			flex-direction: row;
		}

		.nav__button,
		.nav__link,
		.nav__cta .button {
			font-size: var(--font-size-xs);
			font-family: azo-sans-web, sans-serif;
			font-weight: var(--font-weight-heavy);
		}

		.nav__cta .button.nav__cta__button {
			padding: 0.5rem 1rem;
			margin-left: 0.8rem;

		}
	}
}

.main {
	max-width: 1600px;
	margin: 0 auto;
	background: rgba(249, 243, 250, 1);

}

html:has(.nav__dropdown--active) {
	overflow: hidden;
}


.product {
	border: 3px solid var(--secondary-color);
}

.section,
.footer {
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
	padding: calc(var(--space-xl) * 2) 0;

	&.hero {
		min-height: 30rem;
		padding: calc(var(--space-xl) * 6) 0 calc(var(--space-xl) * 2) 0;

		&.content {
				min-height: auto;
				padding: calc(var(--space-xl) * 4) 0 var(--space-lg) 0;

				&:has(.breadcrumbs) {
					padding-top: calc(var(--space-xl) * 2.2);
				}
			}
	}

	&:has(.bg) > .wrapper {
		position: relative;
		z-index: var(--z-index-base);
	}

	&.section--nopad {
		padding: 0;
	}

	&.section--slim {
		padding: var(--space-xl) 0;
	}

	@media (min-width: 768px) {
		padding: calc(var(--space-xl) * 2) 0;

		&.hero {
			min-height: 30rem;
		}
	}

	@media (min-width: 992px) {
		&.hero {
			min-height: 46rem;
			padding: calc(var(--space-xl) * 4) 0 calc(var(--space-xl) * 2) 0;
		}
	}
}

.top-wave,
.bottom-wave {
    position: relative;
    overflow: hidden;
 }

.top-wave:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100%;
	max-height: 100px;
	background-size: 100%;
	background-position: bottom;
	background-repeat: no-repeat;
    z-index: var(--z-index-base);

	@media (min-width: 992px) {
		max-height: 200px;
	}
}

.bottom-wave::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 100%;
	max-height: 100px;
	background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
    z-index: var(--z-index-base);

	@media (min-width: 992px) {
		max-height: 200px;
	}
}

.top-wave-primary:after {
	background-image: url('/images/top-wave-primary.svg');
}

.top-wave-accent:after {
	background-image: url('/images/top-wave-accent.svg');
}

.bottom-wave-accent::before {
	background-image: url('/images/bottom-wave-accent.svg');
}

.top-wave-light:after {
	background-image: url('/images/top-wave-light.svg');
}

.top-wave-white:after {
	background-image: url('/images/top-wave-white.svg');
}

.top-wave-secondary:after {
	background-image: url('/images/top-wave-secondary.svg');
}

.bottom-wave-secondary::before {
	background-image: url('/images/bottom-wave-secondary.svg');
}

.section.top-wave {
	padding-bottom: min(30vw, 16rem);
}

.section.bottom-wave {
	padding-top: min(20vw, 12rem);
}

.section.top-wave + .section {
	padding-top: var(--space-2xl);

	@media (min-width: 992px) {
		padding-top: var(--space-lg);
	}
}

.section.top-wave.bottom-wave {
	padding-top: min(30vw, 16rem); 
}

.section:has(+ .section.bottom-wave) {
	padding-bottom: 0;
}

.breadcrumbs a:hover {
	color: var(--primary-color);
}

.tab-container {
    position: relative;
    width: 100%;
}

.tab-nav {
    display: flex;
    gap: var(--space-lg);
	border-bottom: 1px solid var(--border-color);
}

.tab-nav-item {
    color: var(--text-color);
    border: none;
    padding: var(--space-sm) 0;
    cursor: pointer;
	font-weight: var(--font-weight-medium);
}

.tab-nav-item.active {
    color: var(--secondary-color);
	border-bottom: 4px solid var(--secondary-color);
	font-weight: var(--font-weight-bold);
}

.tab-content {
    margin-top: var(--space-md);
}

.tab-pane {
	display: none;
}

.tab-pane.active {
	display: block;
}


.hero-slider {
    position: relative;
    overflow: hidden;
    height:70vh;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
	padding-top: 6rem;
    transition: opacity 0.5s ease-in-out;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slider-controls {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		display: flex;
		justify-content: center;
		gap: var(--space-sm);
		padding: 0 var(--space-md);
		pointer-events: none;
		z-index: 200;
		display: none;
	}

@media (min-width: 768px) {

	.hero-slider-controls {
		display: flex;
		top: 50%;
		bottom: auto;
		justify-content: space-between;
		gap: 0;
	}

}

  .svg-background {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Full width */
    max-width: 800px; /* Optional: limit maximum width */
    margin: 0 auto; /* Center it horizontally */
    aspect-ratio: 566 / 536; /* Maintain SVG's original proportions */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566 536"><path d="M525.047 301.953C540.64 316.689 549.303 331.859 551.035 347.462C552.768 363.065 542.806 374.118 521.149 380.619C499.493 387.12 484.983 395.572 477.62 405.974C470.256 416.376 469.607 433.496 475.671 457.334C481.734 481.172 477.836 496.775 463.976 504.144C450.116 511.512 431.275 508.478 407.453 495.042C383.63 481.606 366.955 479.222 357.426 487.89C347.897 496.559 337.719 505.444 326.89 514.546C316.062 523.648 304.151 519.747 291.157 502.843C278.163 485.94 266.036 479.655 254.774 483.99C243.513 488.324 229.003 500.243 211.245 519.747C193.486 539.251 180.276 541.201 171.613 525.598C162.951 509.995 152.122 500.243 139.128 496.342C126.135 492.441 118.122 482.256 115.09 465.786C112.058 449.316 103.612 438.697 89.7516 433.93C75.8914 429.162 55.5343 426.345 28.6802 425.478C1.82617 424.611 -5.53704 413.559 6.5906 392.321C18.7182 371.084 33.0115 352.23 49.4705 335.76C65.9294 319.29 58.9994 305.854 28.6802 295.452C-1.63887 285.05 -7.91926 273.564 9.83908 260.995C27.5974 248.426 34.5275 234.99 30.6293 220.687C26.7312 206.384 21.317 189.914 14.3869 171.277C7.45686 152.64 6.15747 135.086 10.4888 118.616C14.8201 102.146 24.5655 90.0106 39.7251 82.209C54.8846 74.4074 75.6749 75.7077 102.096 86.1098C128.517 96.5119 143.676 92.6111 147.574 74.4074C151.473 56.2038 162.301 52.5197 180.059 63.3552C197.818 74.1907 211.461 74.1907 220.99 63.3552C230.519 52.5197 241.347 37.1333 253.475 17.1959C265.602 -2.74138 278.163 -5.3419 291.157 9.39438C304.151 24.1307 315.629 37.5667 325.591 49.7025C335.553 61.8382 349.197 63.5719 366.522 54.9035C383.847 46.2351 403.988 38.2168 426.943 30.8487C449.899 23.4805 460.294 32.5824 458.129 58.1542C455.963 83.726 456.396 103.663 459.428 117.966C462.46 132.269 471.989 142.454 488.015 148.522C504.041 154.59 507.506 166.509 498.41 184.279C489.314 202.05 502.308 213.969 537.392 220.037C572.475 226.105 575.291 237.59 545.838 254.494C516.385 271.397 509.455 287.217 525.047 301.953Z" fill="%23F05C3E"/></svg>');
    background-repeat: no-repeat;
    background-size: contain; /* Stretches background to fill */
    background-position: center;
    padding: 10vw; /* Dynamic padding based on viewport */
    border-radius: 20px;
    color: white;
    text-align: center;
  }

  .svg-background-secondary {
	    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566 536"><path d="M525.047 301.953C540.64 316.689 549.303 331.859 551.035 347.462C552.768 363.065 542.806 374.118 521.149 380.619C499.493 387.12 484.983 395.572 477.62 405.974C470.256 416.376 469.607 433.496 475.671 457.334C481.734 481.172 477.836 496.775 463.976 504.144C450.116 511.512 431.275 508.478 407.453 495.042C383.63 481.606 366.955 479.222 357.426 487.89C347.897 496.559 337.719 505.444 326.89 514.546C316.062 523.648 304.151 519.747 291.157 502.843C278.163 485.94 266.036 479.655 254.774 483.99C243.513 488.324 229.003 500.243 211.245 519.747C193.486 539.251 180.276 541.201 171.613 525.598C162.951 509.995 152.122 500.243 139.128 496.342C126.135 492.441 118.122 482.256 115.09 465.786C112.058 449.316 103.612 438.697 89.7516 433.93C75.8914 429.162 55.5343 426.345 28.6802 425.478C1.82617 424.611 -5.53704 413.559 6.5906 392.321C18.7182 371.084 33.0115 352.23 49.4705 335.76C65.9294 319.29 58.9994 305.854 28.6802 295.452C-1.63887 285.05 -7.91926 273.564 9.83908 260.995C27.5974 248.426 34.5275 234.99 30.6293 220.687C26.7312 206.384 21.317 189.914 14.3869 171.277C7.45686 152.64 6.15747 135.086 10.4888 118.616C14.8201 102.146 24.5655 90.0106 39.7251 82.209C54.8846 74.4074 75.6749 75.7077 102.096 86.1098C128.517 96.5119 143.676 92.6111 147.574 74.4074C151.473 56.2038 162.301 52.5197 180.059 63.3552C197.818 74.1907 211.461 74.1907 220.99 63.3552C230.519 52.5197 241.347 37.1333 253.475 17.1959C265.602 -2.74138 278.163 -5.3419 291.157 9.39438C304.151 24.1307 315.629 37.5667 325.591 49.7025C335.553 61.8382 349.197 63.5719 366.522 54.9035C383.847 46.2351 403.988 38.2168 426.943 30.8487C449.899 23.4805 460.294 32.5824 458.129 58.1542C455.963 83.726 456.396 103.663 459.428 117.966C462.46 132.269 471.989 142.454 488.015 148.522C504.041 154.59 507.506 166.509 498.41 184.279C489.314 202.05 502.308 213.969 537.392 220.037C572.475 226.105 575.291 237.59 545.838 254.494C516.385 271.397 509.455 287.217 525.047 301.953Z" fill="%2376C5E2"/></svg>');
  }

  .svg-background-primary {
	    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566 536"><path d="M525.047 301.953C540.64 316.689 549.303 331.859 551.035 347.462C552.768 363.065 542.806 374.118 521.149 380.619C499.493 387.12 484.983 395.572 477.62 405.974C470.256 416.376 469.607 433.496 475.671 457.334C481.734 481.172 477.836 496.775 463.976 504.144C450.116 511.512 431.275 508.478 407.453 495.042C383.63 481.606 366.955 479.222 357.426 487.89C347.897 496.559 337.719 505.444 326.89 514.546C316.062 523.648 304.151 519.747 291.157 502.843C278.163 485.94 266.036 479.655 254.774 483.99C243.513 488.324 229.003 500.243 211.245 519.747C193.486 539.251 180.276 541.201 171.613 525.598C162.951 509.995 152.122 500.243 139.128 496.342C126.135 492.441 118.122 482.256 115.09 465.786C112.058 449.316 103.612 438.697 89.7516 433.93C75.8914 429.162 55.5343 426.345 28.6802 425.478C1.82617 424.611 -5.53704 413.559 6.5906 392.321C18.7182 371.084 33.0115 352.23 49.4705 335.76C65.9294 319.29 58.9994 305.854 28.6802 295.452C-1.63887 285.05 -7.91926 273.564 9.83908 260.995C27.5974 248.426 34.5275 234.99 30.6293 220.687C26.7312 206.384 21.317 189.914 14.3869 171.277C7.45686 152.64 6.15747 135.086 10.4888 118.616C14.8201 102.146 24.5655 90.0106 39.7251 82.209C54.8846 74.4074 75.6749 75.7077 102.096 86.1098C128.517 96.5119 143.676 92.6111 147.574 74.4074C151.473 56.2038 162.301 52.5197 180.059 63.3552C197.818 74.1907 211.461 74.1907 220.99 63.3552C230.519 52.5197 241.347 37.1333 253.475 17.1959C265.602 -2.74138 278.163 -5.3419 291.157 9.39438C304.151 24.1307 315.629 37.5667 325.591 49.7025C335.553 61.8382 349.197 63.5719 366.522 54.9035C383.847 46.2351 403.988 38.2168 426.943 30.8487C449.899 23.4805 460.294 32.5824 458.129 58.1542C455.963 83.726 456.396 103.663 459.428 117.966C462.46 132.269 471.989 142.454 488.015 148.522C504.041 154.59 507.506 166.509 498.41 184.279C489.314 202.05 502.308 213.969 537.392 220.037C572.475 226.105 575.291 237.59 545.838 254.494C516.385 271.397 509.455 287.217 525.047 301.953Z" fill="%23160F32"/></svg>');
  }

    .svg-background-light {
	    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566 536"><path d="M525.047 301.953C540.64 316.689 549.303 331.859 551.035 347.462C552.768 363.065 542.806 374.118 521.149 380.619C499.493 387.12 484.983 395.572 477.62 405.974C470.256 416.376 469.607 433.496 475.671 457.334C481.734 481.172 477.836 496.775 463.976 504.144C450.116 511.512 431.275 508.478 407.453 495.042C383.63 481.606 366.955 479.222 357.426 487.89C347.897 496.559 337.719 505.444 326.89 514.546C316.062 523.648 304.151 519.747 291.157 502.843C278.163 485.94 266.036 479.655 254.774 483.99C243.513 488.324 229.003 500.243 211.245 519.747C193.486 539.251 180.276 541.201 171.613 525.598C162.951 509.995 152.122 500.243 139.128 496.342C126.135 492.441 118.122 482.256 115.09 465.786C112.058 449.316 103.612 438.697 89.7516 433.93C75.8914 429.162 55.5343 426.345 28.6802 425.478C1.82617 424.611 -5.53704 413.559 6.5906 392.321C18.7182 371.084 33.0115 352.23 49.4705 335.76C65.9294 319.29 58.9994 305.854 28.6802 295.452C-1.63887 285.05 -7.91926 273.564 9.83908 260.995C27.5974 248.426 34.5275 234.99 30.6293 220.687C26.7312 206.384 21.317 189.914 14.3869 171.277C7.45686 152.64 6.15747 135.086 10.4888 118.616C14.8201 102.146 24.5655 90.0106 39.7251 82.209C54.8846 74.4074 75.6749 75.7077 102.096 86.1098C128.517 96.5119 143.676 92.6111 147.574 74.4074C151.473 56.2038 162.301 52.5197 180.059 63.3552C197.818 74.1907 211.461 74.1907 220.99 63.3552C230.519 52.5197 241.347 37.1333 253.475 17.1959C265.602 -2.74138 278.163 -5.3419 291.157 9.39438C304.151 24.1307 315.629 37.5667 325.591 49.7025C335.553 61.8382 349.197 63.5719 366.522 54.9035C383.847 46.2351 403.988 38.2168 426.943 30.8487C449.899 23.4805 460.294 32.5824 458.129 58.1542C455.963 83.726 456.396 103.663 459.428 117.966C462.46 132.269 471.989 142.454 488.015 148.522C504.041 154.59 507.506 166.509 498.41 184.279C489.314 202.05 502.308 213.969 537.392 220.037C572.475 226.105 575.291 237.59 545.838 254.494C516.385 271.397 509.455 287.217 525.047 301.953Z" fill="%23FDCDA9"/></svg>');
  }

  /* Inner content for text */
  .content {
    position: relative;
    z-index: 1;
  
  }

  @media (min-width: 992px) {
    .svg-background {
      padding: 4vw 4vw;
    }
  }

  /* Responsive adjustments */
  @media (min-width: 1200px) {
    .svg-background {
      padding: 6vw 4vw; /* Increase padding on smaller screens */
    }

  }

.testimonial-slider {
    position: relative;
}

.testimonial-slide {
    opacity: 0;
	width: 100%;
	height: 24rem;
    transition: opacity 0.5s ease-in-out;
	display: none;
}

.testimonial-slide.active {
	display: flex;
    opacity: 1;
}

.testimonial-slider-controls {
    display: flex;
    justify-content: center;
    padding: 0 var(--space-md);
    pointer-events: none;
    z-index: 200;
	gap: var(--space-sm);
	transform: translateY(0%);

	@media (min-width: 992px) {
		position: absolute;
		width: 100%;
	    transform: translateY(-50%);
		gap: 0;
		justify-content: space-between;
		bottom: auto;
		top: 50%;
	}
}


.testimonial-slider-controls .slider-prev,
.testimonial-slider-controls .slider-next {
    background-color: var(--white-100);
    border: none;
    color: var(--text-color);
    padding: var(--space-sm);
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.testimonial-slider-controls .slider-prev:hover,
.testimonial-slider-controls .slider-next:hover {
    background-color: var(--white-200);
}

.testimonial-slider-controls svg {
    width: 24px;
    height: 24px;
}

.slider-container {
    position: relative;
    width: 100%;
}

.slider-prev,
.slider-next {
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    padding: var(--space-sm);
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.slider-prev:hover,
.slider-next:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.slider-prev svg,
.slider-next svg {
    width: 24px;
    height: 24px;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-lg);
	max-width: 70ch;
	margin: 0 auto;
	text-transform: uppercase;
}

.article-content {
    max-width: 70ch;
    margin: 0 auto;
}

.article-hero {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-medium);
}

.category-list,
.related-articles {
    list-style: none;
    padding: 0;
}

.category-list li,
.related-articles li {
    margin-bottom: var(--space-xs);
}

.related-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--border-radius-small);
}

.card {
	border-radius: var(--border-radius-xlarge);
	overflow: hidden;
	
}

.card-body {
	padding: var(--space-xl) var(--space-lg) var(--space-md) var(--space-lg);
}


.sidebar .card:not(:last-child) {
    margin-bottom: var(--space-md);
}

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.main-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-image img {
    width: 80%;
    height: 80%;
    object-fit: cover;
}

.thumbnail-gallery {
    --grid-columns: 4;
}

.thumbnail {
    aspect-ratio: 1 / 1;
    overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.thumbnail:hover, .thumbnail.active {
    opacity: 0.7;
}

.thumbnail img {
    width: 80%;
    height: 80%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .thumbnail-gallery {
        --grid-columns: 4;
    }
}


.location-list-item {
	cursor: pointer;
	padding: var(--space-lg);
	gap: var(--space-xs);
	display: flex;
	list-style: none;
	flex-direction: column;
	
	&:not(:last-child) {
		border-bottom: 1px solid var(--black-100);
	}

	&:hover {
		background: var(--blue-99);
	}

	&.active {
		background: var(--blue-100);
	}
}



.hero-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.content-grid {
	--grid-columns: 2;

	.content__left {
		grid-column: span 2;
	}

	.content__right {
		grid-column: span 2;
	}

	@media (min-width: 992px) {
		--grid-columns: 12;

		.content__left {
			grid-column: span 6;
		}

		.content__right {
			grid-column: span 6;

			&.content__right--slim {
				grid-column: 8 / span 5;
			}
		}
	}
}

.cta {
	padding: var(--space-xl) 0 calc(var(--space-xl) * 1.1) 0;
}

.cta-grid {
	--grid-columns: 2;

	.cta__left {
		grid-column: span 2;
	}

	.cta__right {
		grid-column: span 2;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	@media (min-width: 768px) {
		--grid-columns: 12;

		.cta__left {
			grid-column: span 8;
		}

		.cta__right {
			grid-column: 9 / span 2;
		}
	}
}

.hero-grid {
	--grid-columns: 2;
	--grid-gap: calc(var(--space-xl) * 2);
	.hero-grid__left {
		grid-column: span 2;
	}

	.hero-grid__right {
		grid-column: span 2;
	}

	@media (min-width: 768px) {
		--grid-columns: 12;

		.hero-grid__left {
			grid-column: span 5;
		}

		.hero-grid__right {
			grid-column: 7 / span 6;
		}
	}
}

.product-grid {
	--grid-columns: 1;
	grid-gap: var(--space-xl);

	@media (min-width: 576px) {
		--grid-columns: 2;
	}

	@media (min-width: 992px) {
		--grid-columns: 3;
		grid-gap: var(--space-lg);
	}
}

.three-grid {
	--grid-columns: 1;
	grid-gap: var(--space-xl);

	@media (min-width: 576px) {
		--grid-columns: 2;
	}

	@media (min-width: 992px) {
		--grid-columns: 2;
		grid-gap: var(--space-md);
	}

	@media (min-width: 1200px) {
		--grid-columns: 3;
		grid-gap: var(--space-lg);
	}
}


.four-grid {
	--grid-columns: 1;
	grid-gap: var(--space-xl);

	@media (min-width: 576px) {
		--grid-columns: 2;
	}

	@media (min-width: 992px) {
		--grid-columns: 4;
		grid-gap: var(--space-md);
	}

	@media (min-width: 1400px) {
		--grid-columns: 4;
		grid-gap: var(--space-lg);
	}
}

.five-grid {
	--grid-columns: 1;
	grid-gap: var(--space-xl);

	@media (min-width: 576px) {
		--grid-columns: 2;
	}

	@media (min-width: 992px) {
		--grid-columns: 4;
		grid-gap: var(--space-md);
	}

	@media (min-width: 1400px) {
		--grid-columns: 5;
		grid-gap: var(--space-lg);
	}

}

.h1,
.h2,
.h3, h1, h2, h3, .h4, h4 {
	text-wrap: pretty;
	font-family: azo-sans-uber, sans-serif;
	font-weight: 400;
}

h4, .h4 {
	font-family: azo-sans-web, sans-serif;
}

.accent-font {
	font-family: azo-sans-uber, sans-serif;
	font-weight: 400;
}

.text-

.h1 {
	line-height: 90%;
}

.h1 span {
	color: var(--black-300);
}

.img-oversized {
	transform: scale(1.35) translate(10vw, 15%);
}

@media (min-width: 576px) {
	.img-oversized {
		transform: scale(1) translate(10vw, 3vh);
	}
}

@media (min-width: 768px) {
	.img-oversized {
		transform: scale(1.8) translate(8%, 6%);
	}
}


.brand-carousel {
    position: relative;
    width: 100%;
	margin-top: var(--space-xl);
	padding: 0 7% 0 5%;
}

.brand-carousel-container-wrapper {
	padding: 0 0 0 5%;
	overflow: hidden;
}

.brand-carousel-container {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.brand-item {
    flex: 0 0 20.333%;
    padding: 0 1rem;
}

.brand-carousel-prev,
.brand-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	color: var(--black-300);
    background: var(--white-200);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.brand-carousel-prev {
    left: 0rem;
}

.brand-carousel-next {
    right: 0rem;
}

.tag {
	text-transform: uppercase;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	color: var(--secondary-color);
	letter-spacing: 0.1rem;
}

.footer {
	background: var(--accent-color);
	padding: var(--space-xl) 0;
}

.social-links a {
	svg {
		width: 36px;
		height: 36px;

		path {
			fill: var(--white-100);
		}
	}

	&:hover {
		svg {
			path {
				transition: var(--transition-medium-complex);
				fill: var(--white-100);
			}
		}
	}
}

.footer-grid {
	--grid-columns: 2;
	grid-row-gap: var(--space-2xl);

	.footer__logo {
		grid-column: span 2;

		a {
			max-width: 165px;
		}
	}

	.footer__right {
		grid-column: span 2;
	}

	@media (min-width: 992px) {
		--grid-columns: 12;

		.footer__logo {
			grid-column: span 3;
		}

		.footer__right {
			grid-column: 4 / span 9;
		}
	}
}

.footer-links {
	display: grid;

	grid-row-gap: var(--space-xl);
	margin-top: var(--space-xl);

	--grid-columns: 1;

	@media (min-width: 768px) {
		--grid-columns: 2;
		grid-row-gap: var(--space-lg);
		
		margin-top: 0;
	}

	h4 {
		color: var(--white-100);
		font-size: var(--font-size-xs);
		text-transform: uppercase;
		line-height: 1;
		margin-bottom: var(--space-xs);
		font-weight: var(--font-weight-semibold);
	}

	ul {
		display: flex;
		flex-direction: column;
		gap: calc(var(--space-xs) * 0.6);
	}

	a {
		font-size: var(--font-size-lg);
		color: var(--white-100);
		font-weight: var(--font-weight-bold);
		transition: var(--transition-medium-complex);


		&:hover {
			text-decoration: underline;
			text-decoration-color: var(--primary-color);
			text-underline-offset: 0.25rem;
			text-decoration-thickness: 0.15rem;
			color: var(--primary-color);
			transition: var(--transition-medium-complex);
		}
	}

	.footer-links__section {
		display: flex;
		flex-direction: column;


		@media (min-width: 992px) {
			&:first-child {
				grid-column: span 3;
			}

			&:last-child {
				grid-column: 4 / span 4;
			}
		}
	}
}

.filter-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-icon {
    transition: transform 0.3s ease;
}

.filter-toggle.active .filter-icon {
    transform: rotate(180deg);
}

.filter-content {
    max-height: 0;
	visibility: hidden;
	display: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.filter-content.active {
    max-height: 1000px; /* Adjust this value based on your content */
	display: block;
	visibility: visible;
}

.copy {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-xl);
	padding-top: var(--space-sm);
	flex-direction: column;

	@media (min-width: 768px) {
		flex-direction: column;
	}

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

	p {
		color: var(--white-100);
	}

	a {
		color: var(--white-100);
		font-weight: var(--font-weight-semibold);

		&:hover {
			text-decoration: underline;
		}
	}

	ul {
		display: flex;
		gap: 0rem;
		margin-top: var(--space-xs);
		flex-direction: column;
	}
}

.nav__dropdown {
	position: relative;
	overflow: hidden;
	max-height: 0;
	z-index: 1000;
	width: 100vw;
	background: var(--white-100);
	transition: var(--transition-long-complex);

	.nav__dropdown__grid {
		grid-column: span 8;
	}

	a.product-link {
		font-size: var(--text-sm);
		color: var(--color-dark);
		text-decoration: none;
		padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-xs);
		font-weight: var(--font-weight-semibold);
		display: flex;
		flex-direction: row;
		gap: var(--space-xs);
		align-items: center;

		.icon {
			border: 1px solid var(--black-100);
			display: inline-flex;
			padding: var(--space-xs);
			border-radius: var(--border-radius-medium);

			img {
				min-width: 24px;
				max-width: 24px;
				height: auto;
			}
		}

		.product {
			display: flex;
			flex-direction: column;
			gap: calc(var(--space-xs) / 4);
			padding-top: 0.2rem;

			h4 {
				font-size: var(--font-size-sm);
				font-weight: var(--font-weight-semibold);
				color: var(--text-color);
				line-height: 1;
				text-transform: uppercase;
			}

			p {
				font-size: var(--font-size-xxs);
				color: var(--dark-grey);
				font-weight: var(--font-weight-medium);
			}
		}

		&:hover {
			background-color: var(--blue-99);
			text-decoration: none;
			transition: var(--transition-medium-simple);
			border-radius: var(--border-radius-medium);
			h4 {
				color: var(--blue-500);
			}
			img path {
				stroke: var(--blue-500);
			}

			.icon {
				border: 1px solid var(--blue-500);
				background: var(--white-100);
			}

			p {
				color: var(--blue-500);
			}
		}
	}
}

@media (max-width: 992px) {
	.nav__dropdown {
		.wrapper {
			padding: var(--space-md) var(--space-xs);
		}
	}
}

@media (min-width: 992px) {
	.nav__dropdown {
		position: absolute;
		left: 0;
		top: 5.6rem;
		box-shadow: var(--shadow-elevation-medium);
		z-index: var(--z-index-dropdown);

		.wrapper {
			padding-top: var(--space-lg);
			padding-bottom: var(--space-lg);
		}
	}
}

@media (min-width: 1200px) {
	.nav__dropdown {
		top: 6.2rem;
	}
}

.heavy16-product {
	transform: translateY(10%) translateX(0%) scale(1.05);
	@media (min-width: 992px) {
		transform: translateY(0%) translateX(5%) scale(1.2);
	}
}

.product-links {
	grid-column: 1 / span 9;
	display: grid;
	grid-template-columns: subgrid;

	& > li {
		grid-column: span 8;

		&:first-child {
			grid-column: span 8;
			padding-bottom: var(--space-xs);
		}
	}
}

@media (min-width: 992px) {
	.product-links {
		& > li {
			grid-column: span 4;
		}
	}
}

.nav__dropdown--active {
	max-height: 100vh;
	transition: var(--transition-long-complex);
}

.client-logo {
	max-width: 120px;
	margin: 0;
}

.checkmark-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);

	&.flex-row {
		flex-direction: row;
		gap: var(--space-md);
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin: var(--space-md) 0;
	}

	li {
		font-size: var(--font-size-sm);
		background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24"><path stroke="%23e44c1a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6 9 17l-5-5"/></svg>')
			no-repeat left center;
		background-size: 24px;
		padding-left: 2.2rem;
		display: flex;
		flex-direction: column;

		svg {
			width: 24px;
			height: 24px;
			fill: var(--primary-color);
		}
	}
}

.faq {
	list-style: none;
	border-bottom: 1px solid var(--border-color);
	padding: var(--space-sm) 0;

	summary {
		cursor: pointer;
		position: relative;

		&::after {
			content: "";
			display: inline-block;
			position: absolute;
			top: 50%;
			right: 0.6rem;
			transform: translateY(-50%);
			width: 1rem;
			height: 1rem;
			background: no-repeat center/contain
				url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24"><path stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6"/></svg>');
			pointer-events: none;
		}
	}

	.faq__answer {
		margin-top: var(--space-sm);
	}
}

.terms {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 70ch;

	h2:not(:first-child) {
		margin-top: 2rem;
	}

	h3 {
		margin-top: 1rem;
	}
	p {
	}

	.bullet-list {
		list-style: circle;
		margin-left: 1.6rem;
		padding-left: 1rem;
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
	}
}

.testimonial {
	blockquote {
		font-size: var(--font-size-lg);
		line-height: 1.5;
		font-weight: var(--font-weight-semibold);
		color: var(--black-300);
	}

	span {
		text-transform: uppercase;
		display: block;
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		margin-top: var(--space-lg);
	}
}


/* Ensure sufficient color contrast */
.text-color-white-100 {
    color: var(--white-100);
    text-shadow: 0 0 1px rgba(0,0,0,0.3); /* Improve readability on light backgrounds */
}

/* Add skip link styles */
#skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s;
}

#skip-to-content:focus {
    top: 0;
}

/* File Input Styling */
.input--file {
    padding: var(--space-sm);
    background-color: var(--white-color);
    border: 2px dashed var(--border-color);
    cursor: pointer;
    transition: border-color var(--transition-duration-short) var(--transition-easing-simple);
}

.input--file:hover {
    border-color: var(--primary-color);
}

/* Form Section Styling */
.form-section {
    background: var(--white-color);
    padding: var(--space-xl);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-elevation-low);
}

/* Checkbox Wrapper */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-small);
    cursor: pointer;
}

/* Form validation and loading states */
.error-message {
    color: var(--accent-color);
    font-size: var(--font-size-sm);
    margin-top: var(--space-xs);
}

.input--invalid {
    border-color: var(--accent-color);
    background-color: rgba(240, 92, 62, 0.05);
}

.loading-spinner {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: var(--space-xs);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Enhanced file input styling */
.input--file {
    position: relative;
    padding: var(--space-lg);
    text-align: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23160F32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center 1rem;
    background-size: 2rem;
    padding-top: 4rem;
}

.input--file:hover {
    background-color: rgba(22, 15, 50, 0.02);
}

/* Enhanced checkbox styling */
.checkbox-wrapper input[type="checkbox"] {
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-wrapper input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-wrapper input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* File input drag and drop states */
.input--file-dragover {
    background-color: rgba(22, 15, 50, 0.05);
    border-color: var(--primary-color);
}

/* Character counter for textarea */
.textarea-counter {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    text-align: right;
    margin-top: var(--space-xs);
}

/* Required field indicator */
.label::after {
    content: " *";
    color: var(--accent-color);
}

/* Improved focus states */
.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(22, 15, 50, 0.1);
}

/* Disabled state */
.input:disabled,
.select:disabled,
.textarea:disabled {
    background-color: var(--white-200);
    cursor: not-allowed;
    opacity: 0.7;
}