:root {
	--clr-accent-500: hsl(0, 0%, 95%);
	--clr-accent-400: hsl(199, 78%, 47%);
	--clr-accent-300: hsl(12, 88%, 75%);
	--clr-accent-100: hsl(13, 100%, 96%);

	--clr-primary-900: hsl(210, 5%, 8%);
	--clr-primary-500: hsl(199, 78%, 47%);
	--clr-primary-400: hsl(199, 78%, 47%);
	--clr-primary-100: hsla(199, 53%, 44%, 0.698);

	--clr-neutral-900: hsl(0, 0%, 95%);
	--clr-neutral-200: hsl(0, 0%, 10%);
	--clr-neutral-100: hsl(0, 0%, 100%);

	--ff-primary: "Be Vietnam Pro", sans-serif;

	--ff-body: var(--ff-primary);
	--ff-heading: var(--ff-primary);

	--fw-light: 300;
	--fw-regular: 500;
	--fw-semi-bold: 500;
	--fw-bold: 700;

	--fs-300: 0.8125rem;
	--fs-400: 0.875rem;
	--fs-500: 0.9375rem;
	--fs-600: 1rem;
	--fs-700: 1.875rem;
	--fs-800: 3rem;
	--fs-900: 4.5rem;

	--fs-body: var(--fs-400);
	--fs-primary-heading: var(--fs-800);
	--fs-secondary-heading: var(--fs-700);
	--fs-nav: var(--fs-500);
	--fs-button: var(--fs-300);

	--size-100: 0.25rem;
	--size-200: 0.5rem;
	--size-300: 0.75rem;
	--size-400: 1rem;
	--size-500: 1.5rem;
	--size-600: 2rem;
	--size-700: 3rem;
	--size-800: 4rem;
	--size-900: 5rem;

	--shadow-color-hsl: 222 47% 11%;
	--shadow-opacity: 0.15;
	--shadow-color: hsl(var(--shadow-color-hsl) / var(--shadow-opacity));
	--shadow-sm: 0px 4px 6px var(--shadow-color);
	--shadow-md: 0px 8px 12px var(--shadow-color), 0px 1px 3px var(--shadow-color);
	--shadow-lg: 0px 16px 24px var(--shadow-color),
		0px 2px 6px var(--shadow-color);

	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);

	--trust-bg: #161505;
	--trust-bg-soft: rgba(255, 255, 255, 0.03);
	--trust-border: rgba(255, 255, 255, 0.08);
	--trust-text-muted: rgba(255, 255, 255, 0.7);
	--trust-pill-bg: rgba(228, 145, 11, 0.06);
	--trust-pill-border: rgba(255, 255, 255, 0.18);
	--trust-pill-shadow: 0 10px 25px rgba(141, 141, 141, 0.25);
	--trust-radius: 999px;

	/* ZENITH */

	--bg: #020617;
	--bg-elevated: #020617;
	--bg-soft: #020617;
	--bg-soft-alt: #020617;
	--card-bg: rgba(15, 23, 42, 0.9);
	--card-bg-soft: rgba(15, 23, 42, 0.85);
	--border-subtle: rgba(148, 163, 184, 0.35);
	--border-highlight: rgba(248, 250, 252, 0.15);
	--text-main: #f9fafb;
	--text-sub: #9ca3af;
	--accent: #38bdf8;
	--accent-soft: rgba(56, 189, 248, 0.12);
	--accent-strong: #0ea5e9;
	--danger: #fb7185;

	--radius-lg: 1.75rem;
	--radius-md: 1.25rem;
	--radius-pill: 999px;

	--shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.7);
}

@media (min-width: 50em) {
	:root {
		--fs-body: var(--fs-500);
		--fs-primary-heading: var(--fs-900);
		--fs-secondary-heading: var(--fs-800);

		--fs-nav: var(--fs-300);
	}
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
	box-sizing: border-box;
}
/*
    2. Remove default margin
  */
* {
	margin: 0;
	padding: 0;
	font: inherit;
}
/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

html,
body {
	height: auto;
	max-width: 100%;
	overscroll-behavior: none;
	overflow-x: hidden;
}
/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	/* border-radius: 15px; */
}

/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}
/*
    8. Create a root stacking context
  */
#root,
#__next {
	isolation: isolate;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@font-face {
	font-family: "Mazzard";
	src: local("Mazzard M Bold"), local("Mazzard-M-Bold"),
		url("fonts/MazzardM-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

/* GENERAL STYLING */

body {
	font-size: var(--ff-body);
	font-family: var(--ff-body);
	color: var(--clr-primary-900);
}

body.preload .discount_banner_wrapper,
body.preload .ada_hero_text_top,
body.preload .ada_header_img,
body.preload .ada_hero_bottom {
	opacity: 0;
}

#wrapper {
	max-width: 100vw;
	overflow: hidden;
}

.button {
	display: inline-flex;
}

.shop_now_button {
	border: none;
	background-color: transparent;
	font-weight: 500;
	color: #292929;
}

.shop_now_link {
	text-decoration: none;
	color: inherit;
	display: flex;
	gap: 8px;
	align-items: center;
	margin-left: 28px;
	padding: 8px 12px;
	background-color: transparent;
	border-radius: 50px;
	/* border: 1px solid #d3d3d39a; */
	transition: 0.35s ease-out;
}

.shop_now_link {
	transition: color 0.15s ease-out, stroke 0.15s ease-out;
}

.shop_now_link:hover,
.shop_now_link:focus {
	background-color: #e9e9e9;
	transition: 0.35s ease-out;
}

.shop_now_link:active {
	background-color: #dddddd;
	transition: 0.15s ease-out;
}

.shop_now_button_dark {
	border: none;
	background-color: transparent;
	font-weight: 500;
	color: #fff;
}

.shop_now_button_dark svg {
	stroke: #fff;
}

.shop_now_link_dark {
	text-decoration: none;
	color: inherit;
	display: flex;
	gap: 8px;
	align-items: center;
	margin-left: 28px;
	padding: 8px 12px;
	background-color: transparent;
	border-radius: 50px;
	/* border: 1px solid #d3d3d39a; */
	transition: 0.35s ease-out;
}

.shop_now_link_dark {
	transition: color 0.15s ease-out, stroke 0.15s ease-out;
}

.shop_now_link_dark:hover,
.shop_now_link_dark:focus {
	background-color: #b8b8b82d;
	transition: 0.35s ease-out;
}

.shop_now_link_dark:active {
	background-color: #b8b8b84c;
	transition: 0.15s ease-out;
}

img {
	overflow-clip-margin: content-box;
	/* overflow: clip; */
}

p:not([class]) {
	opacity: 0.8;
	max-width: 45ch;
}

p[data-width="wide"] {
	max-width: 50ch;
}

.greeting-video {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}

.greeting {
	height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.greeting-logo {
	display: flex;
	width: 175px;
	margin-inline: auto;
	background-color: #ffffff90;
	padding: 0.5em 1em 0.5em 1em;
	border-radius: 1000px;
	border: solid 1.5px #7676769b;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.5s;
	z-index: 9;
}

.landing-greeting-title {
	display: inline-block;
	/* padding-top: 0.25em; */
	text-align: center;
	font-size: 42px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -2px;
	color: #f2f2f2;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.85s;
	z-index: 9;
}

.header-img img {
	border-radius: 15px;
}

.hero-video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 20px;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideUp;
	animation-timing-function: ease;
	animation-delay: 0.5s;
}

.video-overlay {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.313);
	z-index: 5;
}

.hero-section {
	position: relative;
	height: 50vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 20px;
}

.hero-arrow {
	width: 75px;
	position: relative;
	top: 25%;
	left: 39%;
	animation-duration: 4s;
	animation-fill-mode: both;
	animation-name: slideUp, float;
	animation-timing-function: ease-in-out infinite;
	animation-delay: 1.5s;
	filter: invert(100%) sepia(0%) saturate(1652%) hue-rotate(282deg)
		brightness(108%) contrast(108%);
	z-index: 9;

	/* animation: float 4s ease-in-out infinite; */
}

.hero-title-top {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--clr-primary-500);
	line-height: 1;
	margin-bottom: 0.75em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.5s;
}

.hero-title-main {
	font-size: 3.5rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: -0.05em;
	margin-top: -0.2em;
	animation-duration: 0.95s;
	animation-fill-mode: both;
	animation-name: slideUp;
	animation-timing-function: ease;
	animation-delay: 0.9s;
}

.video-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.video-container img {
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.landing-header-main {
	font-size: 2.35rem;
	line-height: 120%;
	width: 100%;
	text-align: left;
	color: #2c2f33;
	margin-top: 0.5em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.3s;
}

.landing-header-image {
	border-radius: 10px;
	margin-top: 2em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.65s;
}

.landing-cta-wrapper {
	position: relative;
	display: block;
	padding: 1em 0 5em 0;
	margin-top: 0;
}

.landing-cta-heading {
	display: grid;
	padding: 0 14px;
	grid-template-areas: "col 1";
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.75s;
	margin-top: 100px;
}

.landing-cta-heading-text h2 {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 110%;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.85s;
}

.landing-cta-heading-text p {
	text-align: center;
	margin-top: 1.5em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.95s;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.landing-cta-grid-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 1s;
}

.landing-cta-grid-item h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 0.5em;
	text-align: center;
	color: #2c2f33;
}

.landing-cta-grid-item p {
	text-align: center;
	color: #2c2f33;
	max-width: 80%;
	margin: 0.5em auto 0em auto;
}

.landing-cta-image {
	max-width: 85px;
	display: block;
	margin: 1em auto 0em auto;
}

.iaq-news-button {
	z-index: 1;
	margin-top: 1em;
	display: inline-flex;
	cursor: pointer;
	text-decoration: none;
	border: 0;
	border-radius: 10px;
	padding: 1em 2em;
	font-weight: var(--fw-regular);
	font-size: 14px;
	line-height: 1;
	color: #343434;
	background-color: #f2f1ed;
}

.iaq_news_header {
	font-size: 40px;
	letter-spacing: -2px;
	color: #fff;
	word-wrap: break-word;
	text-align: center;
	line-height: 115%;
	font-weight: 500;
	max-width: 85%;
	z-index: 99;
}

.iaq_news_p {
	font-size: 20px;
	font-weight: 500;
	max-width: 95%;
	line-height: 115%;
	letter-spacing: -1px;
	color: #fff;
	z-index: 99;
	margin-top: 12px;
}

.iaq-news-button:hover {
	background-color: #dddddd;
}

/* ENTERPRISE */

.enterprise-header h1 {
	font-size: 2.25rem;
	font-weight: 600;
	color: #fff;
	line-height: 110%;
	text-align: left;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.4s;
}

.enterprise-header-p {
	margin-top: 1em;
	font-size: 1.15rem;
	font-weight: 500;
	color: #fff;
	opacity: 0.8;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.6s;
}

.interactive-block {
	display: block;
	margin-bottom: 100px;
}

.interactive-title h2 {
	display: block;
	margin-top: 4em;
	margin-bottom: 40px;
	opacity: 1;
	visibility: inherit;
	text-align: center;
	line-height: 130%;
	color: #fff;
	font-size: 1.75rem;
	font-weight: 500;
	max-width: 90%;
	letter-spacing: -1px;
	margin-inline: auto;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.8s;
}

.interactive-prefix {
	/* margin-top: 2em; */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	white-space: nowrap;
	color: #fff;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.9s;
}

.interactive-link {
	font-size: calc(21px + 40 * (90vw - 320px) / (1600 - 320)) !important;
	margin-top: 1em;
	color: #b4b5b6;
	cursor: pointer;
	transition: 0.4s;
	position: relative;
	white-space: nowrap;
	min-height: 25px;
	max-height: 50px;
	display: flex;
	justify-content: center;
	text-align: center;
	text-decoration: underline 1px solid #9b9a97;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 1s;
}

.hero_section {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 100vh;
	width: 100%;
	/* background-color: #c3ab65;  */
	/*REMOVE WHEN DONE */
}

.hero_contents {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-bottom: 150px;
}

.hero_button_box {
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 99;
	gap: 12px;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease-out;
	animation-delay: 0.65s;
}

.hero_button {
	position: relative;
	display: inline-flex;
	cursor: pointer;
	text-decoration: none;
	padding: 12px 20px;
	font-weight: 500;
	font-size: 16px;
	color: #292929;
	background-color: rgb(223, 223, 223, 85%);
	border-radius: 50px;
	border: 1.5px solid rgb(190, 190, 190, 65%);
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	font-family: "Geist", sans-serif;
}

/* SECTION  1 STYLES */

.section_one_box {
	width: 100%;
	padding: 5%;
	/* margin: 100px auto; */
	margin-inline: auto;
	background-image: url("https://images.unsplash.com/photo-1581448361195-86be336c9ab8?q=80&w=3271&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
	background-repeat: no-repeat;
	background-size: cover;
}

.section_one_header_box {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 24px;
	height: 100vh;
	justify-content: center;
	padding-bottom: 0px;
	padding-top: 30px;
}

.section_one_title {
	line-height: 115%;
	color: #292929;
	text-wrap-style: pretty;
}

.section_one_subhead {
	font-size: 20px;
	font-weight: 500;
	color: #292929;
}

.section_one_p {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -1px;
	color: #292929;
}

.section_one_p_box {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.learn_more_button {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: 1px solid #60606021;
	vertical-align: middle;
	text-decoration: none;
	background: #60606025;
	border-radius: 1.625rem;
	padding: 0;
	font-size: 16px;
	font-family: inherit;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

button.learn-more {
	width: 12rem;
	height: auto;
}

button.learn-more .circle {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: relative;
	display: block;
	margin: 0;
	width: 3rem;
	height: 3rem;
	background: #60606085;
	border-radius: 1.625rem;
}

button.learn-more .circle .icon {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background: white;
}

button.learn-more .circle .icon.arrow {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	left: 0.625rem;
	width: 1.125rem;
	height: 0.125rem;
	background: none;
}

button.learn-more .circle .icon.arrow::before {
	position: absolute;
	content: "";
	top: -0.25rem;
	right: 0.0625rem;
	width: 0.625rem;
	height: 0.625rem;
	border-top: 0.125rem solid #fff;
	border-right: 0.125rem solid #fff;
	transform: rotate(45deg);
}

button.learn-more .button-text {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.75rem 0;
	margin: 0 0 0 1.85rem;
	color: #292929;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
	/* text-transform: uppercase; */
}

button:hover .circle {
	width: 100%;
}

button:hover .circle .icon.arrow {
	background: white;
	transform: translate(1rem, 0) rotate(90deg);
}

button:hover .quote_circle .icon.arrow {
	background: white;
	transform: translate(1rem, 0);
}

button:hover .button-text {
	color: white;
}

/* .headline_section_box {
	max-width: 95%;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	justify-content: center;
	margin: 100px auto;
	margin-inline: auto;
	gap: 100px;
} */

.headline_section_box {
	max-width: 95%;
	height: 100vh;
	margin: 100px auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.headline_row_item {
	flex-direction: row;
	position: absolute;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.headline_text_wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.headline_row_item {
	width: 100%;
	display: flex;
	margin: auto;
	flex-direction: column;
	text-align: center;
	line-height: 1.15;
	gap: 24px;
}

.headline_title {
	text-align: center;
	font-size: clamp(40px, 5vw, 30px);
	letter-spacing: -2px;
	line-height: 1.05;
	color: #292929;
	font-weight: 500;
}

.headline_item_p {
	font-size: 20px;
	letter-spacing: -1px;
	font-weight: 500;
	color: #292929;
	line-height: 1.2;
}

.headline_item_img {
	border-radius: 28px;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
}
/* PRODUCT CARDS - AVA AND CUBE */

.product_card_container {
	width: 100%;
	margin: 100px auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.product_box {
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow-x: auto;
	/* scroll-behavior: smooth; */
	scrollbar-width: none;
	-ms-overflow-style: none;
	justify-content: space-around;
	padding-bottom: 20px;
	width: 95%;
	margin: auto;
}

.product_card {
	border: 2px solid rgb(200, 200, 200);
	height: clamp(400px, 50vh, 660px);
	width: 100%;
	border-radius: 28px;
	background-color: #e2e2e2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 24px 20px;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

.product_left {
	background-image: url(/assets/images/ava_table.jpg);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}

.product_right {
	background-image: url(/assets/images/cube_image.png);
	background-repeat: no-repeat;
	background-position: 80%;
	background-size: cover;
}

.zenith_card {
	background-image: url(/assets/images/zenith_arm_Medium.png);
	background-repeat: no-repeat;
	background-position: 20%;
	background-size: cover;
}
.ring_card {
	background-image: url(/assets/images/sleeping_rune.jpg);
	background-repeat: no-repeat;
	background-position: 50%;

	background-size: cover;
}

.product_transformer {
	background-image: url(/assets/images/transformer_wall.jpg);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}

.product_qp {
	background-image: url(/assets/images/wall_mount.jpg);
	background-repeat: no-repeat;
	background-position: 80%;
	background-size: cover;
}

.product_text {
	font-size: 36px;
	font-weight: 600;
	color: #f0f0f0;
	letter-spacing: -2px;
	gap: 12px;
	display: flex;
	flex-direction: column;
	line-height: 100%;
}

.product_text span {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 100%;
}

.product_header_box {
	width: 95%;
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.product_title {
	font-size: clamp(40px, 5vw, 40px);
	letter-spacing: -2px;
	font-weight: 500;
}

.product_desc {
	font-size: 20px;
	font-weight: 500;
	max-width: 95%;
	line-height: 150%;
	letter-spacing: -1px;
	color: #292929;
}

.category_card_container {
	width: 100%;
	margin: 200px 0;
	padding: 0 0 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.category_header {
	font-size: 40px;
	letter-spacing: -2px;
	color: #292929;
	word-wrap: break-word;
	text-align: center;
	line-height: 115%;
	font-weight: 500;
	margin-bottom: 40px;
	max-width: 85%;
}

.card_box_container {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.card_box {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	/* scroll-behavior: smooth; */
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 0 16px;
	margin-left: -16px;
	justify-content: flex-start;
}

.card_box::-webkit-scrollbar {
	display: none;
}

.category_card {
	width: calc(100vw - 64px);
	height: 400px;
	min-height: auto;
	flex: 0 0 calc(100vw - 64px);
	border: 2px solid rgb(216, 216, 216);
	border-radius: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	scroll-snap-align: start;
	/* padding: 12px 12px; */
	scroll-snap-align: center;
	flex-shrink: 0;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

#cardBox {
	scroll-snap-type: x mandatory;
	overflow-x: scroll;
	display: flex;
	scrollbar-width: none; /* Hide scrollbar for Firefox */
	-ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
}

#cardBox::-webkit-scrollbar {
	display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.card-1 {
	background-image: url("https://images.unsplash.com/photo-1666934209818-cd6a6d08bd8d?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
	background-size: cover;
}

.card-2 {
	background-image: url("https://images.unsplash.com/photo-1561567131-f7d83083aee0?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
	background-size: cover;
}

.card-3 {
	background-image: url("https://images.unsplash.com/photo-1494809610410-160faaed4de0?q=80&w=2336&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
	background-size: cover;
}

.card_title {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 18px;
	color: #ffffff;
	letter-spacing: -1px;
	line-height: 105%;
	font-weight: 400;
	padding: 12px 20px;
	margin-bottom: 12px;
	background: rgba(112, 102, 102, 0.4);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.card_arrow_button {
	border-radius: 50%;
	height: 65px;
	width: 65px;
	background: rgba(112, 102, 102, 0.35);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	display: grid;
	place-items: center;
	transition: 0.15s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}

.card_arrow_button:hover {
	background: rgba(112, 102, 102, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: 0.15s ease-in-out;
}

.card_arrow_button:active {
	background: rgba(177, 165, 165, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: 0.1s ease-in-out;
	transform: scale(0.98);
}

/* Hover Effect - Move Diagonally */
.product_arrow:hover svg {
	transform: translate(5px, -5px);
	transition: transform 0.2s ease-out;
}

/* Reset on Mouse Leave */
.product_arrow svg {
	transform: translate(0, 0);
	transition: transform 0.2s ease-in-out;
}

/* Hover Effect - Move Diagonally */
.card_plus_icon:hover svg {
	transform: rotate(180deg);
	transition: transform 0.35s ease-out;
}

/* Reset on Mouse Leave */
.card_plus_icon svg {
	transform: rotate(0deg);
	transition: transform 0.35s ease-in-out;
}

.scroll_controls {
	display: flex;
	justify-content: center;
	align-self: flex-end;
	gap: 12px;
	margin-top: 24px;
	padding-right: 24px;
}

.scroll_button {
	height: 48px;
	width: 48px;
	border: none;
	border-radius: 50%;
	background-color: #292929;
	color: white;
	cursor: pointer;
	font-size: 24px;
	transition: opacity 0.2s;
}

.scroll_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.fullwidth_feature_box {
	width: 95%;
	margin: 100px auto;
	padding: 24px;
	height: 450px;
	border: 2px solid #d2d2d2;
	border-radius: 28px;
	/* background: linear-gradient(150deg, #ffd69c 0%, #ffdc85bc 75%, #ebe5e5 100%); */
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==");
	background-color: #ffe4d0;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.whoop_band {
	aspect-ratio: 1 / 1;
	width: 850px;
	height: 850px;
	transform: rotate(-40deg) scale(1.8);
	position: relative;
	top: 60px;
	left: 0px;
}

.oura {
	display: none;
}

.feature_text_wrapper {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fullwidth_feature_title {
	font-size: 36px;
	font-weight: var(--fw-semi-bold);
	line-height: 115%;
	color: #292929;
	letter-spacing: -2px;
	font-weight: 500;
}

.fullwidth_feature_p {
	font-size: 20px;
	font-weight: 500;
	line-height: 115%;
	color: #292929;
	width: 100%;
	letter-spacing: -1px;
}

.coming-soon {
	font-size: 16px;
	font-weight: 400;
	color: #424242;
}

.feature_modal {
	padding-bottom: 5px;
	font-size: 50px;
	font-weight: 200;
	height: 50px;
	width: 50px;
	border: 2px solid #60606045;
	background-color: #f0f0f0;
	border-radius: 50%;
	color: #606060;
	display: grid;
	place-content: center;
	cursor: pointer;
	transition: 0.15s ease-out;
}

.feature_modal:hover {
	color: #60606085;
	border: 2px solid #60606065;
	transition: 0.15s ease-out;
}

[popover]:popover-open {
	opacity: 1;
	transform: scaleX(1);
}

#feature-popover {
	margin-top: 60px;
	height: 90vh; /* Limit height to 90% of viewport height */
	width: 100vw; /* Limit width to 90% of viewport width */
	border: 0;
	background-color: #ffffff;
	border-radius: 28px 28px 0 0;
	padding: 0;
	box-shadow: 0 0 12px #29292965;
	transition: opacity 0.35s, transform 0.35s, overlay 0.35s allow-discrete,
		display 0.35s allow-discrete;
	display: flex;
	flex-direction: column;
	overflow: hidden; /* Prevent outer container from scrolling */
	overscroll-behavior: none; /* Prevent scroll bouncing */
	padding-bottom: 20px;
}

[popover] .popover-content {
	display: flex;
	flex-direction: column;
	overflow-y: scroll; /* Enable vertical scrolling */
	max-height: 100%; /* Ensure it fills the container */
	overscroll-behavior-y: none; /* Prevent scroll bouncing */
	/* -webkit-overflow-scrolling: touch;  */
	will-change: scroll-position; /* Performance hint */
}

body:has(#feature-popover[popover]:popover-open) {
	overflow: hidden;
}

/* Ensure scrollbar is visible and interactive */
[popover] .popover-content::-webkit-scrollbar {
	width: 8px;
	display: none;
}

#feature-popover .popover-content::-webkit-scrollbar-track {
	background: #f1f1f1;
}

#feature-popover .popover-content::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
}

#feature-popover .popover-content::-webkit-scrollbar-thumb:hover {
	background: #555;
}

[popover] {
	font-size: 1.2rem;
	padding: 10px;
	opacity: 0;
	transform: scaleX(0) translateY(100%);
	transition: opacity 0.35s, transform 0.35s, overlay 0.35s allow-discrete,
		display 0.35s allow-discrete;
	transition-behavior: allow-discrete;
	margin-top: 60px;
	height: 95vh;
	width: 100vw;
	border: 0;
	background-color: #ffffff;
	border-radius: 28px 28px 0 0;
	padding: 0;
	box-shadow: 0 0 12px #29292965;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overscroll-behavior: none;
	padding-bottom: 20px;
}

[popover]:popover-open {
	opacity: 1;
	transform: scaleX(1) translateY(0);
}

/* Needs to be after the previous [popover]:popover-open rule
  to take effect, as the specificity is the same */
@starting-style {
	[popover]:popover-open {
		opacity: 0;
		transform: scaleX(0) translateY(100%);
	}
}

/* Transition for the popover's backdrop */

[popover]::backdrop {
	background-color: rgb(0 0 0 / 0%);
	backdrop-filter: blur(10px);
	transition: display 0.35s allow-discrete, overlay 0.35s allow-discrete,
		background-color 0.35s;
}

[popover]:popover-open::backdrop {
	background: linear-gradient(
			to bottom,
			#dbdaef80 30%,
			#f6d6ad80 60%,
			#dca59680 80%,
			#c2757e80 90%,
			#6b464f80 100%
		),
		#d9d9d980;
	backdrop-filter: blur(10px);
}

/* The nesting selector (&) cannot represent pseudo-elements
  so this starting-style rule cannot be nested */

@starting-style {
	[popover]:popover-open::backdrop {
		background-color: rgb(0 0 0 / 0%);
	}
}

.modal_header_wrapper {
	display: flex;
	justify-content: space-between;
	padding: 20px 12px;
	position: absolute;
	top: 0px;
	right: 8px;
	z-index: 999;
}

.popover_image {
	border-radius: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feature_top_section {
	height: 40vh;
}

.feature_text_section {
	height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
}

.modal_title {
	font-weight: 500;
	margin-top: 20px;
	font-weight: 500;
	font-size: 32px;
	letter-spacing: -2px;
	line-height: 1.05;
	color: #292929;
	text-align: left;
	text-wrap-style: pretty;
}

.modal_p {
	font-size: 18px;
	text-align: left;
	text-wrap-style: pretty;
}

.popover_content_image {
	height: 40%;
	place-self: center;
	margin: 40px 0;
}

.close_button {
	padding: 5px 5px;
	height: 40px;
	width: 40px;
	border: 2px solid #60606045;
	background-color: #f1f1f1;
	border-radius: 50%;
	color: #606060;
	display: grid;
	place-content: center;
	cursor: pointer;
	z-index: 99;
}

.benefits_section {
	text-align: center;
	margin-inline: auto;
	width: 100%;
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.benefit_box {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: auto;
	align-items: center;
	margin: 40px 0;
	padding: 24px;
	border-radius: 28px;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==");
	background-color: #fde5d3;
	border: 2px solid #cacacab7;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

.benefit_container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: max-content;
	padding: 24px 12px;
	gap: 20px;
}

.benefit_container_p {
	font-size: 16px;
	font-weight: 500;
	max-width: 80%;
	text-align: center;
	line-height: 120%;
	color: #292929;
}

.quote_box {
	width: 100%;
	/* margin: 40px auto; */
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	padding: 0 20px;
	justify-content: center;
}

.quote_title {
	font-size: 20px;
	font-weight: 500;
	color: #292929;
}

.quote_p {
	font-size: 24px;
	font-weight: 400;
	font-style: italic;
	color: #292929;
}

.quote_box span {
	font-weight: 14px;
	font-weight: 500;
}

:root {
	--clr-accent-500: hsl(0, 0%, 95%);
	--clr-accent-400: hsl(199, 78%, 47%);
	--clr-accent-300: hsl(12, 88%, 75%);
	--clr-accent-100: hsl(13, 100%, 96%);

	--clr-primary-900: hsl(210, 5%, 8%);
	--clr-primary-500: hsl(199, 78%, 47%);
	--clr-primary-400: hsl(199, 78%, 47%);
	--clr-primary-100: hsla(199, 53%, 44%, 0.698);

	--clr-neutral-900: hsl(0, 0%, 95%);
	--clr-neutral-200: hsl(0, 0%, 10%);
	--clr-neutral-100: hsl(0, 0%, 100%);

	--ff-primary: "Be Vietnam Pro", sans-serif;

	--ff-body: var(--ff-primary);
	--ff-heading: var(--ff-primary);

	--fw-light: 300;
	--fw-regular: 500;
	--fw-semi-bold: 500;
	--fw-bold: 700;

	--fs-300: 0.8125rem;
	--fs-400: 0.875rem;
	--fs-500: 0.9375rem;
	--fs-600: 1rem;
	--fs-700: 1.875rem;
	--fs-800: 3rem;
	--fs-900: 4.5rem;

	--fs-body: var(--fs-400);
	--fs-primary-heading: var(--fs-800);
	--fs-secondary-heading: var(--fs-700);
	--fs-nav: var(--fs-500);
	--fs-button: var(--fs-300);

	--size-100: 0.25rem;
	--size-200: 0.5rem;
	--size-300: 0.75rem;
	--size-400: 1rem;
	--size-500: 1.5rem;
	--size-600: 2rem;
	--size-700: 3rem;
	--size-800: 4rem;
	--size-900: 5rem;

	--shadow-color-hsl: 222 47% 11%;
	--shadow-opacity: 0.15;
	--shadow-color: hsl(var(--shadow-color-hsl) / var(--shadow-opacity));
	--shadow-sm: 0px 4px 6px var(--shadow-color);
	--shadow-md: 0px 8px 12px var(--shadow-color), 0px 1px 3px var(--shadow-color);
	--shadow-lg: 0px 16px 24px var(--shadow-color),
		0px 2px 6px var(--shadow-color);

	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 50em) {
	:root {
		--fs-body: var(--fs-500);
		--fs-primary-heading: var(--fs-900);
		--fs-secondary-heading: var(--fs-800);

		--fs-nav: var(--fs-300);
	}
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
	box-sizing: border-box;
}
/*
    2. Remove default margin
  */
* {
	margin: 0;
	padding: 0;
	font: inherit;
}
/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

html,
body {
	height: auto;
	max-width: 100%;
	overscroll-behavior: none;
	overflow-x: hidden;
}
/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	/* border-radius: 15px; */
}

/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}
/*
    8. Create a root stacking context
  */
#root,
#__next {
	isolation: isolate;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@font-face {
	font-family: "Mazzard";
	src: local("Mazzard M Bold"), local("Mazzard-M-Bold"),
		url("fonts/MazzardM-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

/* GENERAL STYLING */

body {
	font-size: var(--ff-body);
	font-family: var(--ff-body);
	color: var(--clr-primary-900);
}

body.preload .discount_banner_wrapper,
body.preload .ada_hero_text_top,
body.preload .ada_header_img,
body.preload .ada_hero_bottom {
	opacity: 0;
}

#wrapper {
	max-width: 100vw;
	overflow: hidden;
}

.button {
	display: inline-flex;
}

.shop_now_button {
	border: none;
	background-color: transparent;
	font-weight: 500;
	color: #292929;
}

.shop_now_link {
	text-decoration: none;
	color: inherit;
	display: flex;
	gap: 8px;
	align-items: center;
	margin-left: 28px;
	padding: 8px 12px;
	background-color: transparent;
	border-radius: 50px;
	/* border: 1px solid #d3d3d39a; */
	transition: 0.35s ease-out;
}

.shop_now_link {
	transition: color 0.15s ease-out, stroke 0.15s ease-out;
}

.shop_now_link:hover,
.shop_now_link:focus {
	background-color: #e9e9e9;
	transition: 0.35s ease-out;
}

.shop_now_link:active {
	background-color: #dddddd;
	transition: 0.15s ease-out;
}

.shop_now_button_dark {
	border: none;
	background-color: transparent;
	font-weight: 500;
	color: #fff;
}

.shop_now_button_dark svg {
	stroke: #fff;
}

.shop_now_link_dark {
	text-decoration: none;
	color: inherit;
	display: flex;
	gap: 8px;
	align-items: center;
	margin-left: 28px;
	padding: 8px 12px;
	background-color: transparent;
	border-radius: 50px;
	/* border: 1px solid #d3d3d39a; */
	transition: 0.35s ease-out;
}

.shop_now_link_dark {
	transition: color 0.15s ease-out, stroke 0.15s ease-out;
}

.shop_now_link_dark:hover,
.shop_now_link_dark:focus {
	background-color: #b8b8b82d;
	transition: 0.35s ease-out;
}

.shop_now_link_dark:active {
	background-color: #b8b8b84c;
	transition: 0.15s ease-out;
}

img {
	overflow-clip-margin: content-box;
	/* overflow: clip; */
}

p:not([class]) {
	opacity: 0.8;
	max-width: 45ch;
}

p[data-width="wide"] {
	max-width: 50ch;
}

.greeting-video {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}

.greeting {
	height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.greeting-logo {
	display: flex;
	width: 175px;
	margin-inline: auto;
	background-color: #ffffff90;
	padding: 0.5em 1em 0.5em 1em;
	border-radius: 1000px;
	border: solid 1.5px #7676769b;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.5s;
	z-index: 9;
}

.landing-greeting-title {
	display: inline-block;
	/* padding-top: 0.25em; */
	text-align: center;
	font-size: 42px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -2px;
	color: #f2f2f2;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.85s;
	z-index: 9;
}

.header-img img {
	border-radius: 15px;
}

.hero-video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 20px;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideUp;
	animation-timing-function: ease;
	animation-delay: 0.5s;
}

.video-overlay {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.313);
	z-index: 5;
}

.hero-section {
	position: relative;
	height: 50vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 20px;
}

.hero-arrow {
	width: 75px;
	position: relative;
	top: 25%;
	left: 39%;
	animation-duration: 4s;
	animation-fill-mode: both;
	animation-name: slideUp, float;
	animation-timing-function: ease-in-out infinite;
	animation-delay: 1.5s;
	filter: invert(100%) sepia(0%) saturate(1652%) hue-rotate(282deg)
		brightness(108%) contrast(108%);
	z-index: 9;

	/* animation: float 4s ease-in-out infinite; */
}

.hero-title-top {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--clr-primary-500);
	line-height: 1;
	margin-bottom: 0.75em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.5s;
}

.hero-title-main {
	font-size: 3.5rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: -0.05em;
	margin-top: -0.2em;
	animation-duration: 0.95s;
	animation-fill-mode: both;
	animation-name: slideUp;
	animation-timing-function: ease;
	animation-delay: 0.9s;
}

.video-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.video-container img {
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.landing-header-main {
	font-size: 2.35rem;
	line-height: 120%;
	width: 100%;
	text-align: left;
	color: #2c2f33;
	margin-top: 0.5em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.3s;
}

.landing-subhead {
	margin-inline: auto;
	/* margin-top: 1em; */
	text-align: center;
	font-size: 16px;
	color: #f0f0f0;
	z-index: 99;
	font-weight: 400;
	max-width: 100%;
	text-wrap: balance;
	animation-duration: 1.15s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.5s;
}

.landing-header-image {
	border-radius: 10px;
	margin-top: 2em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.65s;
}

.landing-cta-wrapper {
	position: relative;
	display: block;
	padding: 1em 0 5em 0;
	margin-top: 0;
}

.landing-cta-heading {
	display: grid;
	padding: 0 14px;
	grid-template-areas: "col 1";
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.75s;
	margin-top: 100px;
}

.landing-cta-heading-text h2 {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 110%;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.85s;
}

.landing-cta-heading-text p {
	text-align: center;
	margin-top: 1.5em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.95s;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.landing-cta-grid-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 1s;
}

.landing-cta-grid-item h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 0.5em;
	text-align: center;
	color: #2c2f33;
}

.landing-cta-grid-item p {
	text-align: center;
	color: #2c2f33;
	max-width: 80%;
	margin: 0.5em auto 0em auto;
}

.landing-cta-image {
	max-width: 85px;
	display: block;
	margin: 1em auto 0em auto;
}

.iaq-news-button {
	z-index: 1;
	margin-top: 1em;
	display: inline-flex;
	cursor: pointer;
	text-decoration: none;
	border: 0;
	border-radius: 10px;
	padding: 1em 2em;
	font-weight: var(--fw-regular);
	font-size: 14px;
	line-height: 1;
	color: #343434;
	background-color: #f2f1ed;
}

.iaq_news_header {
	font-size: 40px;
	letter-spacing: -2px;
	color: #fff;
	word-wrap: break-word;
	text-align: center;
	line-height: 115%;
	font-weight: 500;
	max-width: 85%;
	z-index: 99;
}

.iaq_news_p {
	font-size: 20px;
	font-weight: 500;
	max-width: 95%;
	line-height: 115%;
	letter-spacing: -1px;
	color: #fff;
	z-index: 99;
	margin-top: 12px;
}

.iaq-news-button:hover {
	background-color: #dddddd;
}

/* ENTERPRISE */

.enterprise-header h1 {
	font-size: 2.25rem;
	font-weight: 600;
	color: #fff;
	line-height: 110%;
	text-align: left;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.4s;
}

.enterprise-header-p {
	margin-top: 1em;
	font-size: 1.15rem;
	font-weight: 500;
	color: #fff;
	opacity: 0.8;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.6s;
}

.interactive-block {
	display: block;
	margin-bottom: 100px;
}

.interactive-title h2 {
	display: block;
	margin-top: 4em;
	margin-bottom: 40px;
	opacity: 1;
	visibility: inherit;
	text-align: center;
	line-height: 130%;
	color: #fff;
	font-size: 1.75rem;
	font-weight: 500;
	max-width: 90%;
	letter-spacing: -1px;
	margin-inline: auto;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.8s;
}

.interactive-prefix {
	/* margin-top: 2em; */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	white-space: nowrap;
	color: #fff;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.9s;
}

.interactive-link {
	font-size: calc(21px + 40 * (90vw - 320px) / (1600 - 320)) !important;
	margin-top: 1em;
	color: #b4b5b6;
	cursor: pointer;
	transition: 0.4s;
	position: relative;
	white-space: nowrap;
	min-height: 25px;
	max-height: 50px;
	display: flex;
	justify-content: center;
	text-align: center;
	text-decoration: underline 1px solid #9b9a97;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 1s;
}

.hero_section {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 100vh;
	width: 100%;
	/* background-color: #c3ab65;  */
	/*REMOVE WHEN DONE */
}

.hero_contents {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: 24px;
	margin-top: 120px;
	height: 100%;
}

.hero_button_box {
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 99;
	gap: 12px;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease-out;
	animation-delay: 0.65s;
}

.hero_button {
	position: relative;
	display: inline-flex;
	cursor: pointer;
	text-decoration: none;
	padding: 12px 20px;
	font-weight: 500;
	font-size: 16px;
	color: #292929;
	background-color: rgb(223, 223, 223, 85%);
	border-radius: 50px;
	border: 1.5px solid rgb(190, 190, 190, 65%);
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

/* SECTION  1 STYLES */

.section_one_box {
	width: 100%;
	padding: 5%;
	/* margin: 100px auto; */
	margin-inline: auto;
	background-image: url("https://images.unsplash.com/photo-1581448361195-86be336c9ab8?q=80&w=3271&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
	background-repeat: no-repeat;
	background-size: cover;
}

.section_one_header_box {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 24px;
	height: 100vh;
	justify-content: center;
	padding-bottom: 0px;
	padding-top: 30px;
}

.section_one_title {
	line-height: 115%;
	color: #292929;
	text-wrap-style: pretty;
}

.section_one_subhead {
	font-size: 20px;
	font-weight: 500;
	color: #292929;
}

.section_one_p {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -1px;
	color: #292929;
}

.section_one_p_box {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.learn_more_button {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: 1px solid #60606021;
	vertical-align: middle;
	text-decoration: none;
	background: #60606025;
	border-radius: 1.625rem;
	padding: 0;
	font-size: 16px;
	font-family: inherit;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

button.learn-more {
	width: 12rem;
	height: auto;
}

button.learn-more .circle {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: relative;
	display: block;
	margin: 0;
	width: 3rem;
	height: 3rem;
	background: #60606085;
	border-radius: 1.625rem;
}

button.learn-more .circle .icon {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background: white;
}

button.learn-more .circle .icon.arrow {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	left: 0.625rem;
	width: 1.125rem;
	height: 0.125rem;
	background: none;
}

button.learn-more .circle .icon.arrow::before {
	position: absolute;
	content: "";
	top: -0.25rem;
	right: 0.0625rem;
	width: 0.625rem;
	height: 0.625rem;
	border-top: 0.125rem solid #fff;
	border-right: 0.125rem solid #fff;
	transform: rotate(45deg);
}

button.learn-more .button-text {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.75rem 0;
	margin: 0 0 0 1.85rem;
	color: #292929;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
	/* text-transform: uppercase; */
}

button:hover .circle {
	width: 100%;
}

button:hover .circle .icon.arrow {
	background: white;
	transform: translate(1rem, 0) rotate(90deg);
}

button:hover .quote_circle .icon.arrow {
	background: white;
	transform: translate(1rem, 0);
}

button:hover .button-text {
	color: white;
}

/* .headline_section_box {
	max-width: 95%;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	justify-content: center;
	margin: 100px auto;
	margin-inline: auto;
	gap: 100px;
} */

.headline_section_box {
	max-width: 95%;
	height: 100vh;
	margin: 100px auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.headline_row_item {
	flex-direction: row;
	position: absolute;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.headline_text_wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.headline_row_item {
	width: 100%;
	display: flex;
	margin: auto;
	flex-direction: column;
	text-align: center;
	line-height: 1.15;
	gap: 24px;
}

.headline_title {
	text-align: center;
	font-size: clamp(40px, 5vw, 30px);
	letter-spacing: -2px;
	line-height: 1.05;
	color: #292929;
	font-weight: 500;
}

.headline_item_p {
	font-size: 18px;
	letter-spacing: -1px;
	font-weight: 500;
	color: #292929;
	line-height: 1.2;
}

.headline_item_img {
	border-radius: 28px;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
}
/* PRODUCT CARDS - AVA AND CUBE */

.product_card_container {
	width: 100%;
	margin: 100px auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.product_box {
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow-x: auto;
	/* scroll-behavior: smooth; */
	scrollbar-width: none;
	-ms-overflow-style: none;
	justify-content: space-around;
	padding-bottom: 20px;
	width: 95%;
	margin: auto;
}

.product_card {
	border: 2px solid rgb(200, 200, 200);
	height: clamp(400px, 50vh, 660px);
	width: 100%;
	border-radius: 28px;
	background-color: #e2e2e2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 24px 20px;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

.product_left {
	background-image: url(/assets/images/ava_table.jpg);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}

.product_right {
	background-image: url(/assets/images/cube_image.png);
	background-repeat: no-repeat;
	background-position: 80%;
	background-size: cover;
}

.product_transformer {
	background-image: url(/assets/images/transformer_wall.jpg);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}

.product_qp {
	background-image: url(/assets/images/wall_mount.jpg);
	background-repeat: no-repeat;
	background-position: 80%;
	background-size: cover;
}

.product_text {
	font-size: 36px;
	font-weight: 600;
	color: #f0f0f0;
	letter-spacing: -2px;
	gap: 12px;
	display: flex;
	flex-direction: column;
	line-height: 100%;
}

.product_text span {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 100%;
}

.product_header_box {
	width: 95%;
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.product_title {
	font-size: clamp(40px, 5vw, 40px);
	letter-spacing: -2px;
	font-weight: 500;
}

.product_desc {
	font-size: 18px;
	font-weight: 500;
	max-width: 95%;
	line-height: 150%;
	letter-spacing: -1px;
	color: #292929;
}

.category_card_container {
	width: 100%;
	margin: 200px 0;
	padding: 0 0 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.category_header {
	font-size: 40px;
	letter-spacing: -2px;
	color: #292929;
	word-wrap: break-word;
	text-align: center;
	line-height: 115%;
	font-weight: 500;
	margin-bottom: 40px;
	max-width: 85%;
}

.card_box_container {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.card_box {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	/* scroll-behavior: smooth; */
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 0 16px;
	margin-left: -16px;
	justify-content: flex-start;
}

.card_box::-webkit-scrollbar {
	display: none;
}

.category_card {
	width: calc(100vw - 64px);
	height: 400px;
	min-height: auto;
	flex: 0 0 calc(100vw - 64px);
	border: 2px solid rgb(216, 216, 216);
	border-radius: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	scroll-snap-align: start;
	/* padding: 12px 12px; */
	scroll-snap-align: center;
	flex-shrink: 0;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

#cardBox {
	scroll-snap-type: x mandatory;
	overflow-x: scroll;
	display: flex;
	scrollbar-width: none; /* Hide scrollbar for Firefox */
	-ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
}

#cardBox::-webkit-scrollbar {
	display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.card-1 {
	background-image: url("https://images.unsplash.com/photo-1666934209818-cd6a6d08bd8d?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
	background-size: cover;
}

.card-2 {
	background-image: url("https://images.unsplash.com/photo-1561567131-f7d83083aee0?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
	background-size: cover;
}

.card-3 {
	background-image: url("https://images.unsplash.com/photo-1494809610410-160faaed4de0?q=80&w=2336&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
	background-size: cover;
}

.card_title {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 18px;
	color: #ffffff;
	letter-spacing: -1px;
	line-height: 105%;
	font-weight: 400;
	padding: 12px 20px;
	margin-bottom: 12px;
	background: rgba(112, 102, 102, 0.4);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.card_arrow_button {
	border-radius: 50%;
	height: 65px;
	width: 65px;
	background: rgba(112, 102, 102, 0.35);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	display: grid;
	place-items: center;
	transition: 0.15s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}

.card_arrow_button:hover {
	background: rgba(112, 102, 102, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: 0.15s ease-in-out;
}

.card_arrow_button:active {
	background: rgba(177, 165, 165, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: 0.1s ease-in-out;
	transform: scale(0.98);
}

/* Hover Effect - Move Diagonally */
.product_arrow:hover svg {
	transform: translate(5px, -5px);
	transition: transform 0.2s ease-out;
}

/* Reset on Mouse Leave */
.product_arrow svg {
	transform: translate(0, 0);
	transition: transform 0.2s ease-in-out;
}

/* Hover Effect - Move Diagonally */
.card_plus_icon:hover svg {
	transform: rotate(180deg);
	transition: transform 0.35s ease-out;
}

/* Reset on Mouse Leave */
.card_plus_icon svg {
	transform: rotate(0deg);
	transition: transform 0.35s ease-in-out;
}

.scroll_controls {
	display: flex;
	justify-content: center;
	align-self: flex-end;
	gap: 12px;
	margin-top: 24px;
	padding-right: 24px;
}

.scroll_button {
	height: 48px;
	width: 48px;
	border: none;
	border-radius: 50%;
	background-color: #292929;
	color: white;
	cursor: pointer;
	font-size: 24px;
	transition: opacity 0.2s;
}

.scroll_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.fullwidth_feature_box {
	width: 95%;
	margin: 100px auto;
	padding: 24px;
	height: 450px;
	border: 2px solid #d2d2d2;
	border-radius: 28px;
	/* background: linear-gradient(150deg, #ffd69c 0%, #ffdc85bc 75%, #ebe5e5 100%); */
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==");
	background-color: #ffe4d0;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.whoop_band {
	aspect-ratio: 1 / 1;
	width: 850px;
	height: 850px;
	transform: rotate(-40deg) scale(1.8);
	position: relative;
	top: 60px;
	left: 0px;
}

.oura {
	display: none;
}

.feature_text_wrapper {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fullwidth_feature_title {
	font-size: 36px;
	font-weight: var(--fw-semi-bold);
	line-height: 115%;
	color: #292929;
	letter-spacing: -2px;
	font-weight: 500;
}

.fullwidth_feature_p {
	font-size: 20px;
	font-weight: 500;
	line-height: 115%;
	color: #292929;
	width: 100%;
	letter-spacing: -1px;
}

.coming-soon {
	font-size: 16px;
	font-weight: 400;
	color: #424242;
}

.feature_modal {
	padding-bottom: 5px;
	font-size: 50px;
	font-weight: 200;
	height: 50px;
	width: 50px;
	border: 2px solid #60606045;
	background-color: #f0f0f0;
	border-radius: 50%;
	color: #606060;
	display: grid;
	place-content: center;
	cursor: pointer;
	transition: 0.15s ease-out;
}

.feature_modal:hover {
	color: #60606085;
	border: 2px solid #60606065;
	transition: 0.15s ease-out;
}

[popover]:popover-open {
	opacity: 1;
	transform: scaleX(1);
}

#feature-popover {
	margin-top: 60px;
	height: 90vh; /* Limit height to 90% of viewport height */
	width: 100vw; /* Limit width to 90% of viewport width */
	border: 0;
	background-color: #ffffff;
	border-radius: 28px 28px 0 0;
	padding: 0;
	box-shadow: 0 0 12px #29292965;
	transition: opacity 0.35s, transform 0.35s, overlay 0.35s allow-discrete,
		display 0.35s allow-discrete;
	display: flex;
	flex-direction: column;
	overflow: hidden; /* Prevent outer container from scrolling */
	overscroll-behavior: none; /* Prevent scroll bouncing */
	padding-bottom: 20px;
}

[popover] .popover-content {
	display: flex;
	flex-direction: column;
	overflow-y: scroll; /* Enable vertical scrolling */
	max-height: 100%; /* Ensure it fills the container */
	overscroll-behavior-y: none; /* Prevent scroll bouncing */
	/* -webkit-overflow-scrolling: touch;  */
	will-change: scroll-position; /* Performance hint */
}

body:has(#feature-popover[popover]:popover-open) {
	overflow: hidden;
}

/* Ensure scrollbar is visible and interactive */
[popover] .popover-content::-webkit-scrollbar {
	width: 8px;
	display: none;
}

#feature-popover .popover-content::-webkit-scrollbar-track {
	background: #f1f1f1;
}

#feature-popover .popover-content::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
}

#feature-popover .popover-content::-webkit-scrollbar-thumb:hover {
	background: #555;
}

[popover] {
	font-size: 1.2rem;
	padding: 10px;
	opacity: 0;
	transform: scaleX(0) translateY(100%);
	transition: opacity 0.35s, transform 0.35s, overlay 0.35s allow-discrete,
		display 0.35s allow-discrete;
	transition-behavior: allow-discrete;
	margin-top: 60px;
	height: 95vh;
	width: 100vw;
	border: 0;
	background-color: #ffffff;
	border-radius: 28px 28px 0 0;
	padding: 0;
	box-shadow: 0 0 12px #29292965;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overscroll-behavior: none;
	padding-bottom: 20px;
}

[popover]:popover-open {
	opacity: 1;
	transform: scaleX(1) translateY(0);
}

/* Needs to be after the previous [popover]:popover-open rule
  to take effect, as the specificity is the same */
@starting-style {
	[popover]:popover-open {
		opacity: 0;
		transform: scaleX(0) translateY(100%);
	}
}

/* Transition for the popover's backdrop */

[popover]::backdrop {
	background-color: rgb(0 0 0 / 0%);
	backdrop-filter: blur(10px);
	transition: display 0.35s allow-discrete, overlay 0.35s allow-discrete,
		background-color 0.35s;
}

[popover]:popover-open::backdrop {
	background: linear-gradient(
			to bottom,
			#dbdaef80 30%,
			#f6d6ad80 60%,
			#dca59680 80%,
			#c2757e80 90%,
			#6b464f80 100%
		),
		#d9d9d980;
	backdrop-filter: blur(10px);
}

/* The nesting selector (&) cannot represent pseudo-elements
  so this starting-style rule cannot be nested */

@starting-style {
	[popover]:popover-open::backdrop {
		background-color: rgb(0 0 0 / 0%);
	}
}

.modal_header_wrapper {
	display: flex;
	justify-content: space-between;
	padding: 20px 12px;
	position: absolute;
	top: 0px;
	right: 8px;
	z-index: 999;
}

.popover_image {
	border-radius: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feature_top_section {
	height: 40vh;
}

.feature_text_section {
	height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
}

.modal_title {
	font-weight: 500;
	margin-top: 20px;
	font-weight: 500;
	font-size: 32px;
	letter-spacing: -2px;
	line-height: 1.05;
	color: #292929;
	text-align: left;
	text-wrap-style: pretty;
}

.modal_p {
	font-size: 18px;
	text-align: left;
	text-wrap-style: pretty;
}

.popover_content_image {
	height: 40%;
	place-self: center;
	margin: 40px 0;
}

.close_button {
	padding: 5px 5px;
	height: 40px;
	width: 40px;
	border: 2px solid #60606045;
	background-color: #f1f1f1;
	border-radius: 50%;
	color: #606060;
	display: grid;
	place-content: center;
	cursor: pointer;
	z-index: 99;
}

.benefits_section {
	text-align: center;
	margin-inline: auto;
	width: 100%;
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.benefit_box {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: auto;
	align-items: center;
	margin: 40px 0;
	padding: 24px;
	border-radius: 28px;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==");
	background-color: #fde5d3;
	border: 2px solid #cacacab7;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

.benefit_container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: max-content;
	padding: 24px 12px;
	gap: 20px;
}

.benefit_container_p {
	font-size: 16px;
	font-weight: 500;
	max-width: 80%;
	text-align: center;
	line-height: 120%;
	color: #292929;
}

.quote_box {
	width: 100%;
	/* margin: 40px auto; */
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	padding: 0 20px;
	justify-content: center;
}

.quote_title {
	font-size: 20px;
	font-weight: 500;
	color: #292929;
}

.quote_p {
	font-size: 24px;
	font-weight: 400;
	font-style: italic;
	color: #292929;
}

.quote_box span {
	font-weight: 14px;
	font-weight: 500;
}

.quote_logo {
	width: 200px;
	margin-bottom: 20px;
}

@media (min-width: 778px) {
	.hero-video {
		padding-top: 20px;
		padding-bottom: 80px;
	}

	.hero-title-top {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 3rem;
		font-weight: 600;
		color: var(--clr-primary-500);
		margin-bottom: 0.3em;
		animation-duration: 0.75s;
		animation-fill-mode: both;
		animation-name: slideDown;
		animation-timing-function: ease;
		animation-delay: 0.5s;
	}

	.hero-arrow {
		width: 80px;
		position: relative;
		top: 35%;
		left: 47%;
		animation-duration: 4s;
		animation-fill-mode: both;
		animation-name: slideUp, float;
		animation-timing-function: ease-in-out infinite;
		animation-iteration-count: 1;
		animation-delay: 1s;
		filter: invert(100%) sepia(0%) saturate(1652%) hue-rotate(282deg)
			brightness(108%) contrast(108%);

		/* animation: float 4s ease-in-out infinite; */
	}

	.hero_section {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		height: 100vh;
		width: 100%;
	}

	.hero_contents {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-top: 100px;
		height: 50%;
	}

	.landing-greeting-title {
		font-size: 64px;
		line-height: 1.05;
		letter-spacing: -2px;
		color: #f0f0f0;
		text-align: left;
		max-width: 65%;
		word-wrap: break-word;
		animation-duration: 0.75s;
		animation-fill-mode: both;
		animation-name: slideDown;
		animation-timing-function: ease-out;
		animation-delay: 0.5s;
		z-index: 9;
	}

	.hero_button_box {
		width: fit-content;
		display: flex;
		flex-direction: row;
		align-items: center;
		z-index: 99;
		gap: 12px;
		animation-duration: 0.75s;
		animation-fill-mode: both;
		animation-name: slideDown;
		animation-timing-function: ease-out;
		animation-delay: 0.65s;
	}

	.hero_button {
		position: relative;
		display: inline-flex;
		cursor: pointer;
		text-decoration: none;
		padding: 12px 20px;
		font-weight: 500;
		font-size: 16px;
		color: #292929;
		background-color: rgb(223, 223, 223, 65%);
		border-radius: 50px;
		border: 1.5px solid rgb(190, 190, 190, 65%);
		-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
		-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
		box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
		overflow: hidden;
		z-index: 1;
	}

	.hero_button .fill {
		position: absolute;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background-color: #60606065;
		opacity: 0.8;
		pointer-events: none;
		transition: width 0.65s ease, height 0.65s ease;
		z-index: -1;
	}

	.hero_button .button-text {
		position: relative;
		z-index: 2;
		transition: color 0.3s ease;
	}

	.hero_button:hover .button-text {
		color: white;
		text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	}

	.hero_button:hover {
		color: white;
	}

	.section_one_box {
		width: 100%;
	}

	.section_one_header_box {
		padding-bottom: 50px;
	}

	.section_one_p {
		max-width: min(100%, 650px);
		margin-inline: auto;
	}

	.headline_wrapper {
		margin: 100px 0;
	}

	.headline_text_wrapper {
		max-width: min(100%, 643px);
		margin-inline: auto;
	}

	.headline_item_p {
		max-width: min(100%, 450px);
		margin-inline: 0;
		text-align: left;
	}

	.headline_title {
		text-align: left;
		font-size: clamp(40px, 5vw, 60px);
		letter-spacing: -2px;
		line-height: 1.05;
		color: #292929;
		font-weight: 500;
	}

	.headline_section_box {
		width: calc(100% - 100px);
		max-width: 1400px;
		height: 100vh;
		margin: 100px auto;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.headline_row_item {
		flex-direction: row;
		position: absolute;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.headline_text_wrapper {
		transform-origin: center;
	}

	.headline_row_item:nth-child(2) {
		opacity: 0;
	}

	.headline_row_item:nth-child(3) {
		opacity: 0;
	}

	.headline_title {
		transform-origin: left center;
	}

	.headline_item_p {
		transform-origin: left center;
	}

	.headline_item_img {
		transform-origin: center;
		min-width: 60%;
	}

	.category_card_container {
		width: calc(100% - 100px);
		margin: 100px auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 1400px;
		/* padding-left: 30px; */
	}

	.category_header {
		font-size: clamp(48px, 5vw, 64px);
		letter-spacing: -2px;
		color: #292929;
		word-wrap: break-word;
		max-width: 50%;
		text-align: center;
		line-height: 1.05;
		margin-bottom: 40px;
	}

	.card_box_container {
		max-width: 1400px;
		position: relative;
		overflow: hidden;
	}

	.card_box {
		display: flex;
		overflow-x: auto;
		/* scroll-behavior: smooth; */
		scrollbar-width: none;
		-ms-overflow-style: none;
		justify-content: space-between;
		padding-bottom: 20px; /* Space for potential scrollbar */
	}

	.product_card_container {
		width: calc(100% - 100px);
		/* margin: 100px auto; */
		/* height: 90vh; */
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 1400px;
		justify-content: center;
	}

	.product_header_box {
		width: 100%;
		flex-direction: row;
		margin-bottom: 40px;
		align-items: flex-start;
	}

	.product_title {
		font-size: clamp(48px, 5vw, 64px);
		letter-spacing: -2px;
		line-height: 1.05;
		color: #292929;
	}

	.product_desc {
		font-size: 24px;
		font-weight: 500;
		max-width: 40%;
		line-height: 120%;
		letter-spacing: -1px;
	}

	.product_box {
		display: flex;
		width: 100%;
		flex-direction: row;
		gap: auto;
		overflow-x: auto;
		/* scroll-behavior: smooth; */
		scrollbar-width: none;
		-ms-overflow-style: none;
		justify-content: space-around;
		padding-bottom: 20px; /* Space for potential scrollbar */
	}

	.product_card {
		border: 2px solid rgb(200, 200, 200);
		height: clamp(400px, 50vh, 660px);
		width: 100%;
		border-radius: 28px;
		background-color: #e2e2e2;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 24px 20px;
	}

	.product_text {
		font-size: 48px;
	}

	.product_text span {
		font-size: 22px;
	}

	.card_box::-webkit-scrollbar {
		display: none;
	}

	.category_card {
		height: clamp(600px, 50vh, 660px);
		width: 500px; /* Fixed width */
		flex: 0 0 500px; /* Don't grow or shrink */
		border-radius: 30px;
		scroll-snap-align: left;
		flex-shrink: 0;
	}

	.scroll_controls {
		display: flex; /* Hidden by default */
		align-self: flex-end;
		gap: 12px;
		margin-top: 24px;
	}

	.scroll_button {
		/* padding: 24px 24px; */
		height: 60px;
		width: 60px;
		border: none;
		border-radius: 50%;
		background-color: #606060;
		color: white;
		cursor: pointer;
		font-size: 32px;
		transition: opacity 0.2s;
	}

	.scroll_button:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	/* Show controls when viewport width is below 1324px 
	   (400px * 3 cards + 24px * 2 gaps + 200px margins) */
	@media screen and (max-width: 1324px) {
		.scroll_controls {
			display: flex;
		}

		.card_box {
			justify-content: flex-start;
			padding-bottom: 0;
		}

		.category_card_container {
			width: calc(100% - 100px); /* Reduce margins on smaller screens */
		}
	}

	#feature-popover {
		height: 95vh;
		width: 65%;
		place-self: center;
		margin-bottom: 40px;
	}

	[popover] {
		height: 95vh;
		width: 65%;
		place-self: center;
		margin-bottom: 40px;
	}

	.modal_header_wrapper {
		padding: 24px 16px;
		z-index: 999;
	}

	.feature_top_section {
		height: 40vh;
	}

	.feature_text_section {
		height: 60vh;
		padding: 40px;
		display: flex;
		width: 70%;
		margin: auto;
	}

	.modal_title {
		font-size: 48px;
		font-weight: 500;
		letter-spacing: -2px;
		color: #292929;
	}

	.modal_p {
		font-size: 24px;
		margin-top: 12px;
		letter-spacing: -0.5px;
	}

	.popover_content_image {
		height: 45%;
		place-self: center;
		margin: 40px 0;
	}

	.close_button {
		padding: 5px 5px;
		height: 50px;
		width: 50px;
		border: 2px solid #60606045;
		background-color: #f1f1f1;
		border-radius: 50%;
		color: #606060;
		display: grid;
		place-content: center;
		cursor: pointer;
		transition: 0.15s ease-out;
	}

	.close_button:hover {
		background-color: #9e9e9e;
		border: 2px solid #60606085;
		transition: 0.15s ease-out;
	}

	.close_button:active {
		opacity: 0.85;
	}

	.close_button:hover svg {
		stroke: white;
	}

	.close_button svg {
		transition: stroke 0.15s ease-out;
	}

	.fullwidth_feature_box {
		max-width: 1400px;
		width: calc(100% - 100px);
		margin: 100px auto;
		height: 400px;
		border: 2px solid #d2d2d2;
		border-radius: 28px;
		-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
		-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
		box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
		display: flex;
		padding: 40px;
		overflow: hidden;
	}

	.whoop_band {
		min-width: 850px;
		min-height: 850px;
		transform: rotate(-20deg) scale(1);
		position: relative;
		top: -320px;
		left: calc(100% - 650px);
		z-index: -1;
	}

	.oura {
		display: block;
		position: relative;
		max-width: 300px;
		top: -860px;
		left: calc(100% - 600px);
		transform: scaleX(-1) rotate(350deg);
	}

	.feature_text_wrapper {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.fullwidth_feature_title {
		font-size: 40px;
		line-height: 1.05;
		letter-spacing: -2px;
	}

	.fullwidth_feature_p {
		font-size: 24px;
		font-weight: 500;
		line-height: 120%;
		width: 500px;
		letter-spacing: -1px;
	}

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

	.benefit_box {
		max-width: 1400px;
		/* margin: 40px auto 100px auto; */
		width: calc(100% - 100px);
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		gap: 24px;
	}

	.benefit_container {
		height: auto;
		width: 100%;
		border-radius: 28px;
		gap: 20px;
	}

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

	.quote_box {
		max-width: 100%;
		padding: 40px;
		/* margin: 100px auto; */
	}

	.quote_p {
		font-size: 36px;
		max-width: 1000px;
		text-rendering: optimizeLegibility;
		color: #292929;
	}

	@media screen and (max-width: 1078px) {
		.benefit_box {
			flex-direction: row;
			flex-wrap: wrap;
			gap: 24px;
			justify-content: space-evenly;
		}

		.benefit_container {
			width: 280px;
		}
	}

	.hero-title-main {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 9rem;
		letter-spacing: -0.03em;
		animation-duration: 0.95s;
		animation-fill-mode: both;
		animation-name: slideUp;
		animation-timing-function: ease;
		animation-delay: 1.2s;
	}

	.landing-header-main {
		font-size: 4rem;
		line-height: 105%;
		width: 100%;
		text-align: left;
		margin-top: 1em;
		animation-duration: 0.75s;
		animation-fill-mode: both;
		animation-name: slideDown;
		animation-timing-function: ease;
		animation-delay: 0.3s;
	}

	.landing-subhead {
		font-size: 18px;
		font-weight: 400;
		text-align: left;
		margin-left: 0;
		max-width: 600px;
		text-wrap: balance;
		/* margin-inline: auto; */
	}

	.landing-header-image {
		display: block;
		position: relative;
		margin-top: 4.5em;
		margin-left: 2em;
		border-radius: 28px;
		width: 90%;
	}

	.landing-cta-wrapper {
		display: block;
		margin: 0;
	}

	.landing-cta-heading {
		display: grid;
		padding: 0 14px;
		grid-template-columns: 1fr;
	}

	.landing-cta-heading-text h2 {
		text-align: center;
		font-size: 2.25rem;
		font-weight: 600;
		line-height: 110%;
	}

	.landing-cta-heading-text p {
		text-align: center;
		font-size: 1.15rem;
		font-weight: 400;
		margin-top: 1.25em;
		margin-inline: auto;
		line-height: 140%;
		max-width: 1000px;
		opacity: 1;
	}

	.landing-cta-grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2em;
		padding: 20px;
		place-items: center;
		margin-inline: auto;
		max-width: 1400px;
	}

	.landing-cta-grid-item h2 {
		margin-top: 1em;
		text-align: center;
		font-weight: 600;
	}

	.landing-cta-grid-item p {
		text-align: center;
		max-width: 85%;
		margin: 1em auto 0em auto;
		font-weight: 500;
	}

	/* ENTERPRISE */

	.enterprise-header h1 {
		font-size: 5rem;
		font-weight: 600;
		color: #fff;
		line-height: 110%;
		text-align: left;
		margin-top: 1em;
		width: 85%;
		/* margin-inline: auto; */
	}

	.enterprise-header-p {
		margin-top: 1em;
		font-size: 1.5rem;
		font-weight: 500;
		width: 70%;
		color: #fff;
		opacity: 0.8;
		text-align: left;
		/* margin-inline: auto; */
	}

	.interactive-title h2 {
		display: block;
		margin-top: 140px;
		opacity: 1;
		visibility: inherit;
		text-align: center;
		line-height: 130%;
		color: #fff;
		font-size: 40px;
		max-width: 90%;
		margin-inline: auto;
		font-weight: 600;
		letter-spacing: -1.5px;
	}

	.interactive-block {
		display: flex;
		flex-direction: column;
		align-content: center;
	}

	.interactive-prefix {
		/* margin-top: 2em; */
		font-size: calc(21px + 30 * (100vw - 320px) / (1600 - 320)) !important;
		white-space: nowrap;
		color: #f1f1f1;
		font-weight: 500;
	}

	.interactive-link {
		font-size: calc(21px + 40 * (90vw - 320px) / (1600 - 320)) !important;
		font-weight: 500;
		color: #b3b4b5;
		cursor: pointer;
		transition: 0.4s;
		position: relative;
		white-space: nowrap;
		min-height: 35px;
		max-height: 40px;
		text-decoration: none;
	}

	.interactive-link:nth-child(0) {
		margin-top: 0em;
	}

	.interactive-link::before {
		content: "";
		height: 2px;
		width: 100%;
		background: #0079db;
		position: absolute;
		bottom: -10px;
		left: 0;
		opacity: 0;
		visibility: hidden;
		transition: 0.4s;
	}

	.interactive-link:hover {
		color: #1bb2f5;
	}
}

.chevron-container {
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.6s;
	padding-top: 50px;
}

.chevron {
	position: absolute;
	top: 20;
	width: 28px;
	height: 8px;
	margin-left: 65px;
	opacity: 0;
	transform: scale3d(0.5, 0.5, 0.5);
	animation: move 3s ease-out infinite;
}

.chevron:first-child {
	animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
	animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
	content: " ";
	position: absolute;
	top: 0;
	height: 100%;
	width: 51%;
	background: #f2f1ed;
}

.chevron:before {
	left: 0;
	transform: skew(0deg, 30deg);
}

.chevron:after {
	right: 0;
	width: 50%;
	transform: skew(0deg, -30deg);
}

@keyframes move {
	25% {
		opacity: 1;
	}
	33% {
		opacity: 1;
		transform: translateY(30px);
	}
	67% {
		opacity: 1;
		transform: translateY(40px);
	}
	100% {
		opacity: 0;
		transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
	}
}

.text {
	display: block;
	padding-top: 60px;
	margin-left: 1.75em;
	font-size: 14px;
	font-weight: bold;
	color: #343434;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0.25;
	animation: pulse 2.5s linear alternate infinite;
}

@keyframes pulse {
	to {
		opacity: 1;
	}
}

/* BUTTON */

.button {
	display: inline-flex;
	cursor: pointer;
	text-decoration: none;
	border: 0;
	border-radius: 10px;
	padding: 1em 2em;
	font-weight: var(--fw-regular);
	font-size: var(--fs-button);
	line-height: 1;
	color: var(--clr-neutral-100);
	background-color: var(--clr-accent-400);
	/* box-shadow: 0 1.125em 1em -1em var(--clr-accent-500); */
}

.button[data-type="inverted"] {
	font-size: 16px;
	background-color: var(--clr-neutral-100);
	color: var(--clr-accent-400);
	transition: 0.2s ease-in-out;
}

.button[data-shadow="none"] {
	box-shadow: none;
}

.button[data-type="cta"] {
	font-size: 16px;
	background-color: var(--clr-neutral-100);
	color: var(--clr-accent-400);
	transition: 0.2s ease-in-out;
}

.button:hover,
.button:focus-visible {
	background-color: #d7ae5c;
	transition: 0.1s ease;
}

.button[data-type="inverted"]:hover,
.button[data-type="inverted"]:focus-visible {
	background-color: #d7ae5c;
	color: var(--clr-neutral-100);
}

/* NAVIGATION */

.primary-header {
	/* margin-top: var(--size-600); */
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1001;
	padding: 5px;
	background-color: hsl(0, 0%, 100%);
	border-bottom: solid 1px hsl(0, 0%, 95%);
}

/* DROPDOWN MENU */
.dropdown {
	position: relative;
	display: flex;
}

.dropdown_menu_item_wrapper {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 4px;
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0%;
	background-color: #3b3c3c;
	border: 0 1.5px 1.5px 1.5px solid #ffffff27;
	width: 600px;
	border-radius: 12px;
	padding: 20px 20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.1s ease;
	box-shadow: 0 12px 12px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex: 1;
	height: 300px;
}

.dropdown-menu-light {
	background-color: #fff;
}

.menu_items {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.dropdown_image_container {
	flex: 1;
	max-width: 200px;
	/* background-color: #ffffff5f; */
	padding: 12px 20px;
	border-radius: 12px;
	opacity: 1;
	transition: opacity 0.1s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

#dropdown_product_image {
	width: 100%;
	height: auto;
	transition: transform 0.1s ease;
}

.dropdown:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.menu_items a {
	display: block;
	padding: 8px 16px;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s ease;
}

.menu_items a {
	display: block;
	padding: 8px 16px;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s ease;
}

.dropdown_text {
	font-size: 24px !important;
	font-weight: 500 !important;
}

.dropdown_text-light {
	font-size: 24px !important;
	font-weight: 500 !important;
	color: #fff !important;
}

.menu_items a:hover {
	color: hsl(199, 78%, 47%);
}

/* 1) hide the image until hover */
.dropdown_image_container {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.1s ease, visibility 0.1s ease;
}

/* fade the <img> itself */
#dropdown_product_image {
	opacity: 1;
	transition: opacity 100ms ease-in-out;
	width: 100%;
	height: auto;
}

/* 2) when the menu is open (on hover of the whole dropdown), show it */
.dropdown:hover .dropdown_image_container,
.dropdown-menu:hover .dropdown_image_container {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 990px) {
	.dropdown {
		flex-direction: column;
	}
	.dropdown-menu {
		position: static;
		background-color: transparent;
		box-shadow: none;
		padding: 0;
		margin-left: 20px;
		margin-top: 20px;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: none;
	}

	/* 1) completely remove the right‑hand image on mobile */
	.dropdown_image_container {
		display: none !important;
	}

	/* 2) cancel out your desktop hover styles */
	.menu_items a:hover {
		/* reset color to normal state */
		color: #fff; /* or whatever your base link‑color is */
		/* remove any other hover effects */
		background: none;
		text-decoration: none;
	}

	/* 3) indent the submenu items under “Products” */
	.nav-list-dark .dropdown .dropdown-menu {
		/* push everything in the dropdown 1.5em to the right */
		padding-left: 8px;
		/* if you want a bit less gap above/below */
		margin-top: 20px;
	}

	/* tweak the link padding so they still stack nicely */
	.dropdown-menu .menu_items a {
		padding: 8px 0; /* vertical spacing only */
		font-size: 20px; /* bump up for touch targets */
	}
}

.nav-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo {
	width: 150px;
}

.bec-logo {
	width: 130px;
}

.mobile-nav-toggle {
	display: none;
}

.nav-list {
	display: flex;
	gap: 24px;
	list-style-type: none;
	font-weight: var(--fw-regular);
}

.nav-list a {
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	color: #292929;
	justify-self: flex-end;
}

.nav-list a:hover,
.nav-list a:focus {
	color: hsl(199, 78%, 47%);
	transition: 0.15s ease-in-out;
}

.nav-list-dark {
	display: flex;
	gap: 24px;
	list-style-type: none;
	font-weight: var(--fw-regular);
}

.nav-list-dark a {
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	justify-self: flex-end;
}

.nav-list-dark a:hover,
.nav-list-dark a:focus {
	color: hsl(199, 78%, 47%);
	transition: 0.15s ease-in-out;
}

@media (max-width: 990px) {
	.hero_banner {
		background-color: var(--clr-primary-500);
		padding: 0px 16px;
		border-radius: 12px;
		position: relative;
		-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
		-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
		box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
		z-index: 999;
		color: #f0f0f0;
		text-rendering: optimizeLegibility;
		font-weight: 500;
		font-size: 12px;
		text-align: left;
		width: 100%;
		display: flex;
		gap: 8px;
		transition: 0.15s ease-out;
		align-items: center;
		justify-content: center;
	}

	/* Remove the original border */
	.hero_banner::before {
		content: "";
		position: absolute;
		top: -2.5px;
		left: -2.5px;
		right: -2.5px;
		bottom: -2.5px;
		background: linear-gradient(
			90deg,
			#b9b9b9,
			#1d99ff,
			#c0c0c0,
			#33a7ff,
			#9d9d9d
		);
		border-radius: 14px;
		z-index: -1;
		animation: gradient 8s linear infinite;
		background-size: 400% 400%;
	}

	.hero_banner::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--clr-primary-500);
		border-radius: 12px;
		z-index: -1;
	}

	.hero_banner svg {
		width: 60px;
		height: 60px;
	}
	/* FOR SMALL SCREENS */
	.primary-header[data-overlay] {
		position: relative;
		/* z-index: 999; */
	}

	.primary-navigation {
		display: none;
		position: fixed;
		z-index: -999;
		inset: 3.75rem 0 0;
		background-color: hsl(0, 0%, 100%);
		/* border-radius: var(--size-100); */
		opacity: 0; /* Set initial opacity to 0 */
		transition: opacity 3s; /* Add a transition effect for opacity */
		animation: fadeDownwards 0.25s ease;
	}

	.primary-header[data-overlay]::before {
		content: "";
		position: fixed;
		inset: 0;
		/* height: 100vh; */
		background-image: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.8));
	}

	.nav-list {
		display: grid;
		gap: clamp(var(--size-400), 3vw, var(--size-700));
		text-align: left;
		padding: var(--size-800);
		list-style-type: none;
		font-weight: var(--fw-regular);
		animation: fadeDownwards 0.2s forwards;
	}

	.nav-list a {
		text-decoration: none;
		font-size: 50px;
		font-weight: bold;
		line-height: 0.8;
		color: rgb(5, 5, 5);
		transition: opacity 3s; /* Add a transition effect for opacity */
		animation: fadeDownwards 0.2s forwards;
	}

	.nav-list a:hover,
	.nav-list a:focus {
		color: hsl(199, 78%, 47%);
		transition: 0.2s ease-in-out;
	}

	.nav-list-dark {
		display: grid;
		gap: clamp(var(--size-400), 3vw, var(--size-700));
		text-align: left;
		padding: var(--size-800);
		list-style-type: none;
		font-weight: var(--fw-regular);
		animation: fadeDownwards 0.2s forwards;
	}

	.nav-list-dark a {
		text-decoration: none;
		font-size: 50px;
		font-weight: bold;
		line-height: 0.8;
		color: #fff;
		transition: opacity 3s; /* Add a transition effect for opacity */
		animation: fadeDownwards 0.2s forwards;
	}

	.nav-list-dark a:hover,
	.nav-list-dark a:focus {
		color: hsl(199, 78%, 47%);
		transition: 0.2s ease-in-out;
	}

	.primary-navigation[data-visible] {
		display: block;
		opacity: 1; /* When visible, set opacity to 1 */
	}

	/* .primary-navigation[data-visible] .mobile-nav-toggle {
    background-image: url(images/close-menu.svg);
  } */

	.mobile-nav-toggle {
		display: block;
		cursor: pointer;
		background: transparent;
		border: 0;
		padding: 0.5rem;
		width: 1.75rem;
		aspect-ratio: 1;

		background-image: url(assets/images/icon-hamburger.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	.mobile-nav-toggle[aria-expanded="true"] {
		background-image: url(assets/images/close-menu.svg);
	}

	/* MOBILE NAV FADE DOWNWARDS */

	@keyframes fadeDownwards {
		from {
			transform: translateY(-100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
}

/* FOOTER */

.primary-footer__wrapper {
	display: grid;
	gap: var(--size-500);
	justify-content: center;
	align-items: start;
	grid-template-areas:
		"form"
		"nav"
		"logo"
		"social"
		"bec"
		"copyright"
		"design";
}

.primary-footer__wrapper {
	margin-inline: auto;
}

.primary-footer__logo {
	grid-area: logo;
	min-width: 12rem;
}

.primary-footer__form {
	grid-area: form;
}

.primary-footer__copyright {
	grid-area: copyright;
	text-align: center;
	opacity: 0.5;
}

.primary-footer__nav-wrapper {
	grid-area: nav;
	max-width: 35rem;
	margin-inline: auto;
}

.primary-footer__design {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0em;
}

.subscribe_btn {
	display: inline-flex;
	cursor: pointer;
	text-decoration: none;
	border: 0;
	border-radius: 10px;
	padding: 1em 1em;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	color: var(--clr-neutral-100);
	background-color: var(--clr-accent-400);
}

@media (min-width: 990px) {
	.primary-footer__design {
		margin-top: 6em;
	}
}

/* FOOTER NAVIGATION */

.footer-nav {
	columns: 2;
	gap: clamp(4rem, 10vw, 6rem);
}

.footer-nav {
	list-style-type: none;
}

.footer-nav a {
	color: var(--clr-neutral-200);
	text-decoration: none;
}

.footer-nav a:is(:hover, :focus) {
	color: var(--clr-primary-400);
}

.primary-footer__form {
	grid-area: form;
	display: flex;
	gap: var(--size-300);
}

/* input:where([type="text"], [type="email"]) {
  border-radius: 100vw;
  border: 0;
  padding: var(--size-200) var(--size-500);
  width: max(100%, 14rem);
} */

@keyframes slide-in-from-bottom {
	0% {
		opacity: 0;
		transform: translateY(80px);
	}
}
@media (prefers-reduced-motion: no-preference) {
	[data-a-type="slide-in-from-bottom"]:not(
			[data-a-state="running"],
			[data-a-state="finished"]
		) {
		opacity: 0;
		transform: translateY(80px);
	}
	[data-a-type="slide-in-from-bottom"][data-a-state="running"] {
		animation: slide-in-from-bottom ease;
	}
}

@media (min-width: 47em) {
	.primary-footer__wrapper {
		grid-template-areas:
			"logo nav form"
			"social nav copyright";
		grid-template-columns: min-content 1fr auto;
	}

	.primary-footer__copyright {
		text-align: right;
	}
}

@media (max-width: 50em) {
	.primary-footer__wrapper > * {
		margin-inline: auto;
	}
}

/* SOCIAL LIST */

.social-list {
	display: flex;
	list-style-type: none;
	gap: var(--size-400);
}

.social-icon {
	width: var(--size-500);
	fill: var(--clr-neutral-200);
	aspect-ratio: 1;
}

/* .social-icon:hover {
	animation: wiggle 1s infinite;
	animation-delay: 0s;
} */

@keyframes wiggle {
	0% {
		-webkit-transform: rotate(10deg);
	}
	25% {
		-webkit-transform: rotate(-10deg);
	}
	50% {
		-webkit-transform: rotate(20deg);
	}
	75% {
		-webkit-transform: rotate(-5deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
	}
}

@media (min-width: 50em) {
	.social-list {
		list-style-type: none;
		gap: var(--size-300);
	}

	.social-icon {
		width: 1.25rem;
		aspect-ratio: 1;
	}
}

.social-list a:is(:hover, :focus) .social-icon {
	animation: wiggle 0.5s ease-in-out;
	animation-delay: 0s;
	fill: var(--clr-accent-400);
}

/* INSIGHTS CTA */

.insights-cta {
	background-color: #f2f1ed;
}

.insights-cta-header-img {
	height: 250px;
	margin-inline: auto;
	align-items: center;
	margin-bottom: 30px;
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-name: slideUp;
	animation-timing-function: ease;
	animation: float 4s ease-in-out infinite;
}

.insights-tag {
	color: var(--clr-primary-400);
	font-size: 18px;
	font-weight: 600;
	padding-bottom: 20px;
}

.insights-cta-header {
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 115%;
	padding-bottom: 20px;
	letter-spacing: -1px;
}

.image {
	grid-row: 1; /* Place the image in the first row */
	grid-column: 1; /* Place the image in the first column */
}

.content {
	grid-row: 2; /* Place the content in the second row */
	grid-column: 1; /* Place the content in the first column */
}

.articles-container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 auto;
	max-width: 80rem;
	position: relative;
	line-height: 15px;
	padding: 0 1rem;
	width: 100%;
}

.article {
	width: calc(50% - 0.5rem);
	padding-bottom: 2rem;
	transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.article a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	cursor: pointer;
}

.article-aspect {
	position: relative;
	height: 0;
	padding-bottom: 125%;
	margin-bottom: 1rem;
	overflow: hidden;
	background-color: #d7ae5c;
}

.article-image,
.article-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.article-image img {
	object-fit: cover;
	transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.article-landing-title {
	color: #3c3d46;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.1;
	letter-spacing: 0;
	margin-bottom: 0.4rem;
}

.article-landing-subtitle {
	font-size: 0.7rem;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #9b9a97;
	transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.article-all-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min-content;
	padding: 0.8rem 2rem;
	margin: 0 auto;
	margin-top: 3rem;
	border: 0.15rem solid var(--clr-primary-400);
	border-radius: 5px;
	background: transparent none;
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	overflow: hidden;
	color: #3c3d46;
}

.article-all-button::before {
	transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	background: #d7ae5c;
	width: 100%;
	height: 100%;
	transform: translateX(-101%);
}

.article-button-text {
	position: relative;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 0;
	margin: 0;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.article-all-button:hover {
	transform: color 3s ease;
	background-color: var(--clr-primary-500);
	color: whitesmoke;
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-block: 2rem;
	gap: 12px;
}
.pagination button {
	margin: 0 0.5rem;
	padding: 5px 20px;
	cursor: pointer;
	border-radius: 5px;
	border: 1px solid #60606059;
	opacity: 1;
	transition: 0.25s ease-in-out;
	color: #606060;
	font-weight: 500;
}

.pagination button:hover {
	opacity: 0.65;
	transition: 0.25s ease-in-out;
}

.pagination button:active {
	border: 1.5px solid;
	color: #60606059;
	opacity: 0.5;
}

.hidden {
	display: none;
}

#page-info {
	font-weight: 600;
	color: #606060;
}

@media (min-width: 640px) {
	.insights-cta-header-img {
		height: 450px;
		min-width: 450px;
		margin-bottom: 1em;
		animation-duration: 0.7s;
		animation-fill-mode: both;
		animation-name: slideUp;
		animation-timing-function: ease;
		animation: float 5s ease-in-out infinite;
	}

	.insights-tag {
		color: var(--clr-primary-400);
		font-size: 18px;
		font-weight: 800;
		padding-bottom: 1.3em;
		padding-left: 16px;
	}

	.insights-cta-header {
		font-size: 64px;
		line-height: 1.05;
		letter-spacing: -2px;
		max-width: 75%;
		padding-left: 12px;
		text-wrap-style: pretty;
	}

	.image {
		grid-row: 1; /* Place the image in the first row */
		grid-column: 2; /* Place the image in the first column */
	}

	.content {
		grid-row: 1; /* Place the content in the second row */
		grid-column: 1; /* Place the content in the first column */
	}

	.articles-container {
		display: grid;
		padding: 0 1rem;
		grid-gap: 0 14px;
		grid-row-gap: 3rem;
		max-width: auto;
		grid-template-columns: repeat(3, 1fr);
		padding-bottom: 5rem;
	}

	.article {
		width: 100%;
		padding-bottom: 0;
	}

	.article:hover {
		.article-image img {
			transform: translate3d(0, 22px, 0) scale3d(1.1, 1.1, 1.1);
		}

		.article-landing-title {
			color: var(--clr-primary-400);
			transition: color 0.2s ease-in-out;
		}

		.article-landing-subtitle {
			color: var(--clr-primary-400);
			transition: color 0.2s ease-in-out;
		}
	}

	.article a {
		display: flex;
		flex-direction: column;
		text-decoration: none;
	}

	.article-aspect {
		position: relative;
		height: 0;
		padding-bottom: 125%;
		margin-bottom: 1rem;
		overflow: hidden;
		background-color: #d7ae5c;
	}

	.article-image,
	.article-image img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.article-image {
		transition: transform 3s ease-in-out;
	}

	.article-image img {
		object-fit: cover;
		transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.article-landing-title {
		font-size: 1.2rem;
		font-weight: bold;
		line-height: 1.1;
		letter-spacing: 0;
		margin-bottom: 0.5rem;
		transition: color 0.25s ease-in;
	}

	.article-landing-subtitle {
		font-size: 0.75rem;
		font-weight: bold;
		line-height: 1.2;
		letter-spacing: 0;
		text-transform: uppercase;
		color: #9b9a97;
		transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
}

@media (min-width: 1120px) {
	.articles-container {
		grid-row-gap: 5rem;
	}

	.article {
		width: 100%;
		padding-bottom: 0;
	}

	.article-image {
		margin-bottom: 1.5rem;
	}

	.article-landing-title {
		font-size: 2rem;
		line-height: 1.05;
		letter-spacing: -0.01em;
	}

	.article-landing-subtitle {
		font-size: 1rem;
		font-weight: bold;
		line-height: 1.2;
		letter-spacing: 0;
		text-transform: uppercase;
		color: #9b9a97;
		transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-block: 2rem;
		gap: 12px;
	}
	.pagination button {
		margin: 0 0.5rem;
		padding: 5px 20px;
		cursor: pointer;
		border-radius: 5px;
		border: 1px solid #60606059;
		opacity: 1;
		transition: 0.25s ease-in-out;
	}

	.pagination button:hover {
		opacity: 0.65;
		transition: 0.25s ease-in-out;
	}

	.hidden {
		display: none;
	}

	#page-info {
		font-weight: 600;
		color: #606060;
	}
}

/* CTA */

.cta {
	text-align: center;
}

@media (min-width: 50em) {
	.cta {
		text-align: left;
	}
}

/* NUMBERED ITEMS */

.numbered-items {
	counter-reset: count;
	width: fit-content;
	margin-inline: auto;
}

.numbered-items li {
	counter-increment: count;
}

.numbered-items div {
	display: grid;
	position: relative;
	align-items: center;
	column-gap: var(--size-300);
	grid-template-columns: min-content 1fr;
}

.numbered-items__title {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	line-height: 1;
}

.numbered-items__body {
	grid-column: 1 / -1;
}

@media (min-width: 30em) {
	.numbered-items__body {
		grid-column: 2 / -1;
	}
}

.numbered-items div::before,
.numbered-items div::after {
	height: 40px;
}

.numbered-items div::before {
	content: "0" counter(count);
	display: flex;
	align-items: center;
	background-color: var(--clr-accent-400);
	color: var(--clr-accent-100);
	font-weight: bold;
	padding: 0 var(--size-500);
	border-radius: 100vw;
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}

@media (max-width: 30em) {
	.numbered-items div::after {
		content: "";
		display: block;
		z-index: -1;
		border-radius: 100vw 0 0 100vw;
		grid-column: 1 / -1;
		grid-row: 1 / 2;
		background: rgba(211, 211, 211, 0.25);
	}
}

/* SLIDER */

.slider {
	display: flex;
	gap: var(--size-600);
	list-style: none;
}

.a11y-slider-container {
	margin-block: var(--size-700);
	margin-inline: var(--size-400);
}

.slider > * {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	/* THIS WAS 100% BEFORE ^^ */
	/* scroll-margin: 200px; */
}

@media (min-width: 50em) {
	.slider {
		scroll-padding-inline: 25px;
	}

	.a11y-slider-container {
		margin-inline: 0;
		padding: 2em;
	}
}

@media (min-width: 50em) {
	.slider > * {
		width: 32%;
	}
}

@media (min-width: 820px) {
	.slider > * {
		width: 50%;
	}
}

@media (min-width: 1280px) {
	.slider > * {
		width: 32%;
	}
}

.slider-content {
	border-radius: var(--size-300);
	padding: var(--size-800) var(--size-800) var(--size-600);
	margin: 0 15px 0 15px;
	background: hsla(0, 0%, 95%, 0.85);
}

.slider img {
	width: var(--size-800);
	position: relative;
	top: calc(var(--size-800) / 2);
	margin-inline: auto;
}

.a11y-slider-dots {
	display: flex;
	justify-content: center;
	margin-block: var(--size-500);
	gap: var(--size-300);
}

.a11y-slider-dots li {
	display: block;
	width: 12px;
	height: 12px;
	padding: 0;
	color: white;
}

.a11y-slider-dots li button {
	display: block;
	font-size: 0;
	text-indent: -9999px;
	background: transparent;
	border: 1px solid var(--clr-accent-400) !important;
	width: 100%;
	height: 100%;
	border-radius: 100%;
}

.a11y-slider-dots li button.active {
	background: var(--clr-accent-400);
}

.a11y-slider-prev {
	position: relative;
	color: transparent;
}

.a11y-slider-prev::after {
	content: "<";
	display: block;
	width: 100px;
	height: 100px;
	left: 0;
	top: 0;
}

/* TERMS AND CONDITIONS */

.p-terms {
	font-size: 16px;
	color: #3c3d46;
	letter-spacing: -0.2px;
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 10px;
	margin-inline-end: 10px;
	line-height: 150%;
}

.terms-header {
	color: #2c2f33;
	font-size: 2.3rem;
	display: block;
	margin-block-end: 1em;
	margin-inline-start: 10px;
	margin-inline-end: 10px;
	letter-spacing: -2px;
	line-height: 1.15;
}

.p-terms-subhead {
	font-size: 1.15rem;
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 10px;
	margin-inline-end: 10px;
}

.p-terms-lastupdate {
	font-size: 1rem;
	opacity: 0.5;
	display: block;
	margin-block-start: 1em;
	margin-block-end: 4em;
	margin-inline-start: 10px;
	margin-inline-end: 10px;
}

.p-terms-title {
	font-size: 1.25rem;
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 10px;
	margin-inline-end: 10px;
}

@media (min-width: 50em) {
	.p-terms {
		font-size: 16px;
		line-height: 1.75rem;
		display: block;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 10px;
		margin-inline-end: 10px;
		width: 90%;
	}

	.terms-header {
		padding-top: 1em;
		font-size: 3.75rem;
		line-height: 1.1;
		letter-spacing: -3px;
	}

	.p-terms-subhead {
		font-size: 1.25rem;
		display: block;
		margin-block-end: 1em;
		margin-inline-start: 10px;
		margin-inline-end: 10px;
		width: 70%;
	}

	.p-terms-title {
		font-size: 1.25rem;
		display: block;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 10px;
		margin-inline-end: 10px;
	}

	.p-terms-lastupdate {
		display: block;
		margin-block-start: 2em;
		margin-block-end: 4em;
		margin-inline-start: 10px;
		margin-inline-end: 10px;
	}
}

/* ABOUT */

.about-header {
	font-size: 3rem;
	display: block;
	text-align: left;
	color: #3c3d46;
	line-height: 1.2;
	margin-top: 1em;
	margin-inline-start: 10px;
	margin-inline-end: 0px;
	animation-duration: 0.8s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.2s;
}

.about-subhead {
	font-size: 16px;
	color: #3c3d46;
	letter-spacing: -0.2px;
	display: block;
	text-align: left;
	margin-inline-start: 10px;
	margin-inline-end: 10px;
	line-height: 150%;
	/* animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.4s; */
}

.about-p {
	font-size: 16px;
	color: #2c2f33;
	letter-spacing: -0.2px;
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 10px;
	margin-inline-end: 10px;
	line-height: 150%;
	/* animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.4s; */
}

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

.profiles img {
	height: 25em;
	border-radius: 15px;
	max-width: 260px;
}

.profile-container {
	position: relative;
	overflow: hidden;
	border-radius: 15px;
	margin-top: 3em;
	cursor: pointer;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideUp;
	animation-timing-function: ease;
	animation-delay: 0.7s;
}

.profile-container img {
	transition: transform 1s ease;
	border-radius: 15px;
}

.profile-container:hover img {
	transform: translate3d(0, 18px, 0) scale3d(1.1, 1.1, 1);
	border-radius: 15px;
}

.profile-text {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgb(242, 242, 242);
	padding: 20px;
	border-radius: 0 0 15px 15px;
}

.expert-subhead {
	width: 90%;
	margin-inline: auto;
	text-align: center;
	font-size: 1rem;
	font-weight: 500;
	color: #2c2f33;
	margin-top: 1.25em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.7s;
}

@media (min-width: 50em) {
	.about-header {
		font-size: var(--size-800);
		text-align: left;
		line-height: 1.1;
	}

	.about-subhead {
		padding-top: 40px;
		font-size: 20px;
	}

	.about-p {
		font-size: 20px;
		max-width: 650px;
	}

	.profiles {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 10em;
	}

	.profiles img {
		/* margin-top: 5em; */
		border-radius: 15px;
		height: 30em;
		max-width: 320px;
	}

	.profile-container {
		position: relative;
		margin-top: 5em;
	}

	.profile-text {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: rgb(242, 242, 242);
		padding: 20px;
		border-radius: 0 0 15px 15px;
		line-height: 1.3;
	}

	.expert-subhead {
		width: 50%;
		margin-inline: auto;
		text-align: center;
		font-size: 1.25rem;
		font-weight: 500;
		color: #2c2f33;
		margin-top: 1em;
	}
}

/* SENSORS */

.sensors-header {
	font-family: "Instrument Serif", sans-serif;
	font-size: 62px;
	font-weight: 300;
	color: #292929;
	line-height: 115%;
	letter-spacing: -2px;
	text-align: center;
	margin-top: 0.5em;
	text-wrap-style: pretty;
	/* padding-bottom: 0.5em; */
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.3s;
}

.sensors-header span {
	color: var(--clr-primary-500);
	/* font-weight: 700; */
}

.sensors-subhead {
	font-size: 18px;
	font-family: "Geist", sans-serif;
	font-weight: 400;
	text-align: center;
	text-wrap: balance;
	color: #292929;
	letter-spacing: -0.5px;
	line-height: 115%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.5s;
}

.sensors-button {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* text-align: center; */
	margin: 2em 2em 2em 2em;
	width: 40%;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	color: white;
	line-height: 0.9;
	overflow: hidden;
	background-color: var(--clr-primary-500);
	border-radius: 10px;
	padding: 1rem;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.7s;
}

.sensors-button:active {
	color: var(--clr-primary-500);
	background-color: rgb(219, 219, 219);
	transform: color 0.3s ease;
}

/* .sensor-image-wrapper {
 width: 100%;
 display: flex;
 justify-content: flex-end;
} */

.sensor-image-wrapper img {
	width: 65%;
	height: auto;
	margin-top: 2em;
	margin-inline: auto;
	z-index: -1;
	margin-bottom: 0em;
	border-radius: 10px;
	/* border-bottom: 1px solid black; */
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.5s;
	filter: drop-shadow(0px 1px 4px #8f8f8f95);
}

.sensors-second-subhead {
	font-size: 2.1rem;
	font-weight: bold;
	color: #2c2f33;
	line-height: 1.2;
	letter-spacing: 0;
	margin-top: 2em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.9s;
}

.sensor_info_wrapper {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sensor_content_wrapper {
	display: flex;
	flex-direction: column-reverse;
}

.visible {
	color: var(--clr-primary-500);
	/* animation: fadein 25s; */
}

.parameters-wrapper {
	position: relative;
	display: block;
}

.parameter-list-with-icons {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding-top: 2.5em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 1.1s;
}

.parameter-list-item {
	display: flex;
	align-items: flex-start;
	margin-top: 1.5em;
}

.parameter-text {
	font-size: 20px;
	font-weight: 600;
	color: #1d1d1f;
}

.parameter-icon {
	position: relative;
	top: 1px;
	height: 30px;
	width: 30px;
	margin-right: 15px;
	filter: invert(52%) sepia(84%) saturate(476%) hue-rotate(155deg)
		brightness(80%) contrast(100%);
}

.sensor-slider-content {
	position: relative;
	top: 0;
	left: 0;
	margin: 0.25em;
	height: 70vh;
	border-radius: 2.5rem;
	background-color: #ffffff;
}

.sensor-card-wrapper {
	position: relative;
	top: 0;
	left: 0;
	margin: 0.25em;
	height: 60vh;
	border-radius: 2.5rem;
	background-color: #ffffff;
}

.selector_container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	margin-inline: auto;
	width: 100%;
	gap: 4px;
	margin-bottom: 20px;
}

.sensor_select_label {
	font-size: 14px;
	font-weight: 500;
	color: #606060;
	font-family: "Geist", sans-serif;
	letter-spacing: -0.5px;
}

.selector_box {
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 24px;
	padding: 10px 20px;
	border-radius: 12px;
	background-color: hsl(0, 0%, 0%, 8%);
	border: 1.5px solid hsl(0, 0%, 38%, 40%);
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

.sensor_selector {
	font-size: 16px;
	font-weight: 500;
	color: #292929;
	text-decoration: none;
	font-family: "Geist", sans-serif;
	letter-spacing: -0.5px;
}

.sensor-card-header {
	font-size: 2rem;
	font-weight: bold;
	color: var(--clr-primary-500);
	margin: 20px;
	padding-top: 1em;
	line-height: 1.1;
}

.sensor-card-subhead {
	margin: 20px;
	font-weight: 500;
	color: #2c2f33;
}

.sensor-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin: 20px 0;
	padding: 0;
}

.sensor-container-right {
	display: flex;
	justify-content: center;
	padding: 0;
}

.sensor-infobox-one img,
.sensor-infobox-two img,
.sensor-infobox-three img {
	max-width: 80%;
	margin-inline: auto;
	margin-top: -2em;
	margin-bottom: -2em;
}

.sensor-infobox-one {
	height: auto;
	width: 380px;
	background: rgb(253 253 253);
	border: 1.5px solid rgba(0, 0, 0, 0.05);
	border-radius: 15px;

	overflow: hidden;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	-moz-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
}

.sensor-infobox-two {
	height: auto;
	width: 380px;
	background: rgb(253 253 253);
	border: 1.5px solid rgba(0, 0, 0, 0.05);
	border-radius: 15px;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	-moz-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
}

.sensor-infobox-three {
	height: auto;
	width: 380px;
	background: rgb(253 253 253);
	border: 1.5px solid rgba(0, 0, 0, 0.05);
	border-radius: 15px;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	-moz-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
}

.sensor-infobox-text {
	margin: 2rem;
	margin-left: 0.5em;
	margin-bottom: 0.5em;
	text-align: left;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--clr-primary-500);
}

.sensor-infobox-caption {
	text-align: left;
	margin: 1em;
	margin-top: 0;
	font-size: 1em;
	font-weight: 500;
	width: 85%;
	color: #86868b;
}

.sensor-logo-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1em;
}

.sensor-logo {
	width: 100px;
	margin-top: 0em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.4s;
}

.sensor-dashboard-image {
	display: none;
}

.sensor_price {
	font-size: 24px;
	font-weight: 600;
	color: #292929;
	width: fit-content;
	margin-inline: auto;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.5s;
}

.sensor_price_info {
	font-size: 16px;
	font-family: "Geist", sans-serif;
	font-weight: 400;
	text-align: center;
	text-wrap: balance;
	color: #606060;
	letter-spacing: -0.5px;
	line-height: 115%;
	width: fit-content;
	margin-inline: auto;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.55s;
}

.airguard_master_box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin: 100px 0;
}

.airguard_master_infobox {
	height: 400px;
	width: 380px;
	background: rgb(253 253 253);
	border: 1.5px solid rgba(0, 0, 0, 0.05);
	border-radius: 20px;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	-moz-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.airguard-master_infobox_header {
	font-size: 24px;
	font-weight: 600;
	margin: 20px 0 15px 0;
	color: #292929;
	letter-spacing: -1.5px;
	width: 60%;
	text-align: center;
	line-height: 1.05;
}

.master_feature_container {
	/* border: 1px solid red; */
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}

.master_feature_box {
	height: 90%;
	/* border: 2px solid blue; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 10px 12px;
	gap: 8px;
}

.master_feature {
	/* border: 2px solid orange; */
	height: 65px;
	width: 60%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 24px;
	gap: 12px;
	background-color: #ebebeb;
	border-radius: 10px;
	border: 1.5px solid #60606021;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.06);
}

.master_feature_video {
	width: 285px;
	overflow: hidden;
	border: 0.5px solid #fff;
}

.master_feature_image {
	display: flex;
	justify-content: center;
}

.cube_feature_image {
	width: 60%;
}

.border_bottom {
	border-top: 2px dotted #292929ab;
	opacity: 25%;
	width: 50%;
	margin-bottom: 10px;
}

.master_infobox_text {
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.25px;
	color: #444444;
}

.review_widget {
	border: 2px solid red;
	padding: 4px 12px;
	width: fit-content;
}
@media (min-width: 821px) {
	.selector_container {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-inline: auto;
		width: fit-content;
		gap: 4px;
	}

	.sensor_select_label {
		font-size: 16px;
		font-weight: 500;
		color: #606060;
		font-family: "Geist", sans-serif;
		letter-spacing: -0.5px;
	}

	.selector_box {
		display: flex;
		justify-content: space-around;
		gap: 40px;
		padding: 10px 20px;
		border-radius: 30px;
		background-color: hsl(0, 0%, 0%, 8%);
		border: 1px solid hsl(0, 0%, 38%, 40%);
	}

	.sensor_selector {
		font-size: 16px;
		font-weight: 600;
		color: #292929;
		text-decoration: none;
		font-family: "Geist", sans-serif;
		letter-spacing: -0.5px;
	}

	.sensor-image-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 2em;
		max-width: 70%;
		animation-duration: 0.75s;
		animation-fill-mode: both;
		animation-name: slideDown;
		animation-timing-function: ease;
		animation-delay: 0.7s;
	}

	.sensor-image-wrapper img {
		min-width: 100%;
		height: auto;
		margin-top: 1em;
		/* z-index: -1; */
		margin-bottom: 0em;
		margin-right: -9em;
		border-bottom: none;
		animation-duration: 0.75s;
		animation-fill-mode: both;
		animation-name: slideDown;
		animation-timing-function: ease;
		animation-delay: 0.5s;
		filter: drop-shadow(0px 1px 4px #8f8f8f95);
	}

	.cube_image {
		position: relative;
		right: 0%;
		top: 60%;
		width: 100%;
		/* overflow: clip; */
		transform: scale(1.5);
	}

	.sensor_price {
		font-size: 32px;
		font-weight: 600;
		color: #292929;
		margin-inline: 0;
		margin-top: 20px;
	}

	.sensor_price_info {
		font-size: 16px;
		font-weight: 500;
		letter-spacing: -0.5px;
		color: #606060;
		margin-inline: 0;
	}

	.sensors-header {
		width: 100%;
		text-align: left;
		font-size: 72px;
		letter-spacing: -2px;
		color: #292929;
	}

	.sensors-subhead {
		text-align: left;
		font-size: 18px;
		letter-spacing: -0.5px;
		font-weight: 400;
		width: 80%;
		margin-top: 1em;
	}

	.sensor_info_wrapper {
		margin-top: 0;
		align-items: flex-start;
	}

	.sensor_content_wrapper {
		display: flex;
		flex-direction: row;
	}

	.sensors-button {
		margin: 2em 28em 0 0em;
	}

	.parameters-wrapper {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.parameter-list-item {
		width: 400px;
	}

	.parameter-list-with-icons {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.sensor-slider-content {
		position: relative;
		top: 0;
		left: 0;
		margin: 0.25em;
		height: 50vh;
		border-radius: 2.5rem;
		background-color: #ffffff;
	}

	.sensors-second-subhead {
		font-size: 2.5rem;
		width: 80%;
		color: #1d1d1f;
	}

	.sensor-container {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin: 20px 0;
		gap: 20px;
		padding-left: 0em;
	}

	.sensor-container-right {
		display: flex;
		justify-content: flex-end;
		padding-right: 40m;
	}

	.airguard_master_box {
		flex-direction: row;
		gap: 4px;
	}

	.airguard_master_infobox {
		width: 415px;
	}

	.sensor-infobox-one {
		height: 240px;
		width: 50%;
		background: rgb(253 253 253);
		border: 1.5px solid rgba(0, 0, 0, 0.05);
		border-radius: 15px;
	}

	.sensor-infobox-one img,
	.sensor-infobox-two img,
	.sensor-infobox-three img {
		width: 40%;
		margin-inline: auto;
		margin-top: -4em;
		margin-bottom: -2em;
	}

	.sensor-infobox-two {
		height: 240px;
		width: 60%;
		background: rgb(253 253 253);
		border: 1.5px solid rgba(0, 0, 0, 0.05);
		border-radius: 15px;
	}

	.sensor-infobox-three {
		height: 240px;
		width: 50%;
		background: rgb(253 253 253);
		border: 1.5px solid rgba(0, 0, 0, 0.05);
		border-radius: 15px;
	}

	.sensor-infobox-text {
		font-size: 2rem;
		margin-left: 0.5em;
	}

	.sensor-infobox-caption {
		font-size: 1.15rem;
		margin-left: 1em;
		width: 90%;
		font-weight: 600;
	}

	.sensor-logo-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 2em;
	}

	.sensor-logo {
		width: 100px;
		margin-top: 0.15em;
	}
}

/* INSIGHTS */

.insights-header {
	color: #292929;
	font-size: 3rem;
	letter-spacing: -2px;
	line-height: 110%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
	animation-duration: 0.8s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
}

.header-img {
	height: 200px;
	position: relative;
	margin-inline: auto;
	padding-top: 30px;
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-name: slideUp;
	animation-timing-function: ease;
	animation: float 4s ease-in-out infinite;
}

.insights-subhead {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 400px;
	font-size: 16px;
	color: #2c2f33;
	margin-inline-start: 10px;
	margin-inline-end: 10px;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.3s;
}

.iaq-in-news-link {
	font-size: 18px;
	font-weight: 500;
	color: var(--clr-primary-500);
	cursor: pointer;
}

.iaq-news-link-wrapper a {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-inline: auto;
	opacity: 1;
	text-decoration: none;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.4s;
}

.iaq-news-link-wrapper:hover {
	opacity: 0.5;
	transition: 0.2s ease-in-out;
}

.iaq-news-link-wrapper img {
	position: relative;
	top: 2px;
	height: 22px;
	width: 22px;
	margin-top: 1px;
	margin-left: 10px;
	cursor: pointer;
}

.insights-post {
	padding: 15px;
	margin-inline: auto;
	margin-top: 4em;
	margin-bottom: 4em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.5s;
}

.flow button {
	font-size: 1rem;
	cursor: pointer;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.7s;
}

.date {
	font-size: 14px;
	color: rgba(85, 94, 103, 0.801);
}

.insights-title {
	font-size: 20px;
	font-weight: var(--fw-semi-bold);
	margin-top: 1em;
	letter-spacing: -1px;
}

.insights-content {
	font-size: 16px;
	color: rgb(85 94 103);
	margin-top: 1em;
}

.button-container {
	display: flex;
	align-items: center;
}

.insights-button {
	border: none;
	background: none;
	color: var(--clr-accent-400);
	font-weight: bold;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.button-container img {
	position: relative;
	bottom: 0.2px;
	height: 22px;
	width: 22px;
	margin-top: 1px;
	margin-left: 10px;
	cursor: pointer;
}

.button-container:hover {
	opacity: 0.5;
	transition: 0.2s ease-in-out;
}

.infographic_container {
	margin: 0.5em;
}

.infographic {
	/* width: 60%;
	margin: 5em; */
	border: 3px solid lightgray;
	border-radius: 5px;
}

.button-container:active {
	opacity: 0.3;
	transform: scale(0.99);
	transition: 0.2s ease-in-out;
}

@media (min-width: 50em) {
	.insights-header {
		text-align: center;
		margin-inline: auto;
		font-size: 4rem;
		line-height: 1;
		max-width: 820px;
		margin-top: 20px;
		letter-spacing: -3px;
	}

	.insights-title {
		font-size: 2rem;
		letter-spacing: -2px;
		line-height: 115%;
		margin-top: 20px;
	}

	.header-img {
		height: 250px;
		position: relative;
		margin-inline: auto;
		padding-top: 30px;
		animation-duration: 0.7s;
		animation-fill-mode: both;
		animation-name: slideUp;
		animation-timing-function: ease;
		animation: float 4s ease-in-out infinite;
	}

	.insights-subhead {
		text-align: center;
		font-size: 20px;
		max-width: 550px;
		margin-top: 24px;
	}

	.insights-content {
		font-size: 18px;
	}

	.insights-post {
		max-width: 800px;
		object-fit: cover;
	}

	.insights-post img {
		-webkit-transition: 0.5s ease;
		transition: 0.5s ease;
	}

	.infographic_container {
		width: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.infographic {
		width: 60%;
		margin: 5em;
		border: 3px solid lightgray;
		border-radius: 5px;
	}

	.return_container {
		width: 60%;
		margin-inline: auto;
		margin-bottom: -5em;
	}

	/* .insights-post img:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
  } */

	.iaq_news_header {
		font-size: clamp(48px, 5vw, 64px);
		letter-spacing: -2px;
		color: #fff;
		word-wrap: break-word;
		text-align: center;
		line-height: 1.05;
		font-weight: 500;
		max-width: 85%;
		z-index: 99;
	}

	.iaq_news_p {
		font-size: 24px;
		font-weight: 500;

		letter-spacing: -1px;
		color: #fff;
		z-index: 99;
		margin-top: 12px;
	}
}

/* INDIVIDUAL ARTICLE PAGE */

.back-button-container {
	display: block;
	margin-inline: 0;
	margin-block-end: 1em;
	text-decoration: none;
	align-self: start;
}

.back-button {
	color: #767676;
	text-transform: uppercase;
	text-decoration: underline;
	font-size: 0.75rem;
	font-weight: bold;
	transition: color 0.2s ease;
}

.back-button:hover {
	color: var(--clr-primary-500);
	transition: color 0.2s ease;
}

.article-header {
	color: #292929;
	font-size: 26px;
	display: block;
	margin-top: 20px;
	line-height: 120%;
	max-width: 95%;
	align-self: start;
	letter-spacing: -1px;
	text-rendering: optimizeLegibility;
	text-wrap-style: balance;
	-webkit-font-smoothing: antialiased;
}

.article-info {
	font-size: 1.1rem;
	opacity: 0.75;
	display: block;
	margin-block-start: 3em;
	margin-block-end: 3em;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.article-study-title {
	font-size: 1rem;
	font-weight: bold;
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.p-article-content {
	font-size: 16px;
	color: #33302e;
	letter-spacing: -0.2px;
	display: block;
	margin-block-start: 2em;
	margin-block-end: 1em;
	line-height: 150%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.article-list {
	text-decoration: none;
	list-style-type: circle;
	line-height: 200%;
	margin-inline: 0;
	font-size: 1rem;
	color: #33302e;
	letter-spacing: -0.2px;
	padding-inline-start: 40px;
	align-self: start;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.article-content-header {
	font-size: 1.5rem;
	font-weight: 600;
	padding-top: 24px;
	letter-spacing: -1px;
	line-height: 115%;
	color: #292929;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.author-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	align-self: start;
	gap: 1em;
	margin-top: 3em;
	margin-bottom: 3em;
}

.author-name {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	font-weight: 500;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.article-date {
	display: flex;
	flex-direction: row;
	margin-top: 2em;
	margin-bottom: -1em;
	font-weight: 600;
	align-self: flex-start;
	color: #606060;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* ARTICLE TABLE OF CONTENTS */

.table_contents {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40px;
}

.contents_header {
	font-size: 20px;
	font-weight: 600;
	color: #292929;
	margin-bottom: 20px;
	text-rendering: optimizeLegibility;
}

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

.contents_list_header {
	font-size: 16px;
	font-weight: 600;
	color: #292929;
	letter-spacing: -0.5px;
	line-height: 115%;
	margin-bottom: 12px;
	text-rendering: optimizeLegibility;
}

.contents_list {
	text-align: left;
	text-decoration: none;
	margin-left: 20px;
	margin-bottom: 20px;
}

.contents_list_item {
	font-size: 14px;
	font-weight: 500;
	color: #292929;
	text-rendering: optimizeLegibility;
}

.contents_list_item::marker {
	list-style-position: outside;
}

#mc_embed_shell {
	display: flex;
	justify-content: center;
	margin: 40px 0;
}

#mc_embed_signup {
	padding: 8px 40px;
	border: 1.5px solid rgba(0, 0, 0, 0.15);
	background-image: url(/assets/images/SignUp-Modal-BG.svg);
	background-position: 50% 10%;
	background-clip: padding-box;
	background-repeat: no-repeat;
	border-radius: 12px;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	-moz-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	clear: left;
	font-size: 16px;
	width: 380px;
	height: 320px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

#mc_embed_signup form {
	margin-bottom: 24px;
}

#mc_embed_signup .mc-field-group input {
	text-indent: 8px;
}

.mc_embed_header {
	margin-bottom: 20px;
	text-align: center;
	line-height: 1.15;
}

.mc_embed_title {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -1px;
	color: #292929;
}

.mc_embed_subtitle {
	font-size: 16px;
	letter-spacing: -0.5px;
	margin-top: 4px;
	font-weight: 400;
}

#mc_embed_signup div#mce-responses {
	margin: 0;
	padding: 0;
	width: 100%;
}

#mc_embed_signup .mc-field-group {
	width: 100%;
}

#mc_embed_signup div.response {
	margin-top: 0;
	/* margin-bottom: 20px; */
	padding: 0;
	text-align: center;
	margin-inline: auto;
}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
	margin-top: 0px;
	margin-bottom: 0;
	width: 100%;
	text-align: center;
}

.mce_inline_error {
	margin-left: 50px;
}

#mc_embed_signup .clear {
	clear: both;
	display: flex;
	justify-content: center;
}

#mc-embedded-subscribe {
	margin: 0;
}

#mc_embed_signup input {
	border-radius: 8px;
	max-width: 250px;
	margin-inline: auto;
	margin-bottom: 4px;
}

.subscribe_btn {
	height: 42px;
}

.subscribe_btn:hover {
	background-color: grey;
	transition: 0.1s ease-in-out;
}

.input_wrapper {
	display: flex;
	flex-direction: row;
	height: 50px;
	gap: 4px;
	justify-content: center;
}

.buy-now-modal {
	display: none;
}

@media (min-width: 910px) {
	.p-article-content {
		font-size: 20px;
		letter-spacing: -0.2px;
		display: block;
		line-height: 1.6;
		width: 880px;
		margin-inline: 0;
		margin-block: 0;
		margin-bottom: 24px;
	}

	.p-article-content:first-child {
		margin-top: 40px;
	}

	/* .article-body-wrapper {
		display: flex;
		flex-direction: row;
		width: 1280px;
	} */

	.article-content-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 880px;
	}

	.buy-now-modal {
		position: fixed; /* Changed from absolute to fixed */
		top: 75%; /* Changed from 1850px to 50% for vertical centering */
		right: 60px; /* Kept your original right positioning */
		transform: translateY(-50%); /* Added to center vertically */
		height: 350px;
		width: 300px;
		background-color: #fbfbfb;
		border: 1.5px solid #29292925;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		-webkit-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.06);
		-moz-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.06);
		box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.06);
		z-index: 1000; /* Added to ensure modal stays on top */
	}

	.buy-now-image img {
		height: 180px;
	}

	.buy-now-title {
		margin-top: 20px;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: -1px;
	}

	.buy-now-title a {
		text-decoration: underline;
		color: #292929;
	}

	.buy-now-price {
		margin-top: 8px;
		font-weight: 600;
		color: #292929;
		font-size: 18px;
	}

	.buy-now-button {
		text-decoration: none;
		color: #ffffff;
		padding: 8px 12px;
		background-color: var(--clr-primary-500);
		margin-top: 12px;
		border-radius: 12px;
		font-size: 16px;
		font-weight: 500;
		border: none;
		display: flex;
		cursor: pointer;
		transition: 0.15s ease-in-out;
	}

	.buy-now-button:hover {
		background-color: #00aeff;
		transition: 0.15s ease-in-out;
	}

	.modal-close-button {
		position: absolute;
		right: 10px;
		top: 10px;
		font-size: 20px;
		padding: 0px 10px;
		border-radius: 5px;
		background-color: #f1f1f1;
		border: 1.5px solid #60606025;
		color: #606060;
		cursor: pointer;
	}

	.article-content-header {
		color: #292929;
		font-size: 28px;
		line-height: 32px;
		font-weight: 600;
		padding-top: 40px;
		padding-bottom: 0;
		margin-inline: 0;
		margin-block: 0;
		margin-bottom: 40px;
		align-self: start;
	}

	.article_counter {
		align-self: center;
	}

	.article-header {
		font-size: 2.5rem;
		text-align: center;
		width: 880px;
		margin: 20px 0;
		align-self: center;
		letter-spacing: -1px;
		/* white-space: pre-line; */
		/* word-break: break-word; */
		text-wrap-style: balance;
	}
	.article-date {
		text-align: center;
		margin-top: 20px;
		margin-bottom: 20px;
		align-self: center;
	}

	.author-container {
		margin-top: 20px;
		margin-bottom: 20px;
		align-self: center;
	}

	.back-button-container {
		margin-inline: 0;
		margin-top: 20px;
		align-self: center;
	}

	.table_contents {
		align-items: flex-start;
	}

	.article-list {
		font-size: 18px;
		margin-bottom: 40px;
	}

	.contents_header {
		font-size: 24px;
	}

	.contents_list_header {
		font-size: 18px;
	}

	.contents_list_item {
		font-size: 16px;
	}

	#mc_embed_shell {
		align-self: center;
		margin: 40px 0;
	}

	#mc_embed_signup {
		padding: 8px 40px;
		/* background: rgb(253 253 253); */
		border: 1.5px solid rgba(0, 0, 0, 0.15);
		background-image: url(/assets/images/SignUp-Modal-BG.svg);
		background-clip: padding-box;
		background-repeat: no-repeat;
		border-radius: 12px;
		-webkit-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
		-moz-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
		box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
		clear: left;
		font-size: 14px;
		width: 500px;
		height: 350px;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	#mc_embed_signup form .mc_embed_header {
		margin-bottom: 20px;
		text-align: center;
		line-height: 1.15;
	}

	#mc_embed_signup form {
		margin-bottom: 40px;
	}

	.mc_embed_title {
		font-size: 28px;
		font-weight: 700;
		letter-spacing: -1px;
		color: #292929;
		margin-top: 20px;
	}

	.mc_embed_subtitle {
		font-size: 16px;
		font-weight: 400;
	}

	.mc-field-group {
		margin-bottom: 12px;
	}

	#mc_embed_signup div#mce-responses {
		margin: 0;
		padding: 0;
		width: 100%;
	}

	#mc_embed_signup .mc-field-group {
		width: 100%;
		padding: 0;
	}

	#mc_embed_signup div.response {
		margin-top: 0;
		/* margin-bottom: 20px; */
		padding: 0;
		text-align: center;
		margin-inline: auto;
	}

	#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
		margin-top: -12px;
		margin-bottom: 0;
		width: 100%;
		text-align: center;
	}

	#mc_embed_signup .clear {
		clear: both;
		display: flex;
		justify-content: center;
	}

	#mc-embedded-subscribe {
		margin: 0;
	}

	.subscribe_btn {
		margin: 0;
		padding: 12px;
		background-color: var(--clr-primary-500);
		transition: 0.1s ease-in-out;
		text-align: center;
		height: 39px;
		font-size: 16px;
	}

	#mc_embed_signup input {
		border-radius: 8px;
		max-width: 300px;
		margin-inline: auto;
		margin-bottom: 12px;
	}
}

/* MONITORING SECTION ON SENSORS PAGE */

.solution-header {
	text-align: left;
	font-size: 2.5rem;
	color: #2c2f33;
	line-height: 1.2;
	margin-top: 1em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.3s;
}

.solution-subhead {
	margin-inline: left;
	text-align: left;
	font-size: 20px;
	color: #292929;
	font-weight: 500;
	width: 100%;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.5s;
}

.button.solution-button {
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

.solution-sec-2 {
	height: 60vh;
}

.article-content-image {
	width: 100%;
	border-radius: 10px;
	margin-top: 3em;
}

@media (min-width: 50em) {
	.article-content-image {
		width: 880px;
		border-radius: 15px;
		margin-top: 40px;
	}
}

/* SOLUTIONS */

.solution-header-main {
	font-size: 3.25rem;
	line-height: 1;
	width: 100%;
	text-align: left;
	color: #2c2f33;
	margin-top: 0.5em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.3s;
}

.solution-well-header {
	text-align: center;
	font-size: 3rem;
	line-height: 105%;
	font-weight: 700;
	color: #2c2f33;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.6s;
}

.well-subhead {
	font-size: 20px;
	font-weight: 500;
	color: #292929;
	width: 100%;
	line-height: 150%;
	text-align: center;
	margin-inline: auto;
	text-wrap-style: pretty;
	margin-top: 1rem;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.8s;
}

.well-text {
	font-family: "Mazzard";
	font-size: 2.5rem;
	color: rgb(81, 80, 98);
	line-height: 1.1;
}

.well-image {
	margin-inline: auto;
	border-radius: 10px;
	margin-bottom: 0;
	margin-top: 4em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideUp;
	animation-timing-function: ease;
	animation-delay: 0.8s;
}

.solution-header-image {
	border-radius: 10px;
	margin-top: 2em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.65s;
}

.solution-facts {
	display: flex;
	flex-direction: column;
}

.solution-fact-text {
	font-size: 20px;
	font-weight: 500;
	color: #292929;
	width: 100%;
	padding: 1em 0;
	text-align: center;
	margin-inline: auto;
	letter-spacing: -1px;
	text-wrap-style: pretty;
	margin-top: 1rem;
	line-height: 150%;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.85s;
}

.solution-aaf-header {
	text-align: center;
	font-size: 2.75rem;
	font-weight: 700;
	color: #2c2f33;
	line-height: 1.1;
}

.aaf-subhead {
	font-size: 1.25rem;
	font-weight: 500;
	color: #2c2f33;
	width: 100%;
	text-align: center;
	/* margin-inline: auto; */
	margin-top: 2rem;
	margin-bottom: 0;
}

.aaf-image {
	/* margin-inline: auto; */
	width: 100%;
	border-radius: 10px;
	/* padding-left: 2em; */
	margin-bottom: 40px;
}

.liquid-container {
	margin-top: 0;
	display: grid;
	place-items: center;
}

.liquid-header {
	font-size: 3rem;
}

.liquid-subhead {
	font-size: 20px;
	font-weight: 500;
	color: #2c2f33;
	width: 100%;
	line-height: 150%;
	letter-spacing: -1px;
	text-align: center;
	margin-inline: auto;
	margin-top: 2rem;
	margin-bottom: 0;
}

[data-typewriter] {
	font-size: clamp(40px, 5vw, 40px);
	letter-spacing: -2px;
	font-weight: 500;
	color: #00963c;
	height: 4rem;
	border-right: 0.3rem solid transparent;
	padding: 0.3rem;
}

[data-typewriter]:not(.typing) {
	animation: blink-cursor 1.1s step-end infinite;
}

@keyframes blink-cursor {
	0%,
	100% {
		border-color: transparent;
	}

	50% {
		border-color: #00b448;
	}
}

.tests-wrapper {
	position: relative;
	display: block;
}

.tests-list-with-icons {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding-top: 2.5em;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 1.1s;
}

.tests-list-item {
	display: flex;
	justify-content: left;
	margin-top: 1.5em;
	margin-left: 1em;
}

.tests-text {
	font-size: 20px;
	font-weight: 500;
	color: #2c2f33;
}

.tests-icon {
	position: relative;
	top: -2px;
	height: 35px;
	width: 35px;
	margin-right: 15px;
	filter: invert(39%) sepia(56%) saturate(6754%) hue-rotate(135deg)
		brightness(95%) contrast(101%);
}

.tests-button {
	background-color: #00b448;
	display: flex;
	margin-top: 3em;
	margin-bottom: 0;
	width: 40%;
	justify-content: center;
	margin-inline: auto;
}

@media (min-width: 821px) {
	.solution-header {
		font-size: 3.8rem;
		text-align: left;
		max-width: 100%;
		line-height: 1.1;
	}

	.solution-header-main {
		font-size: 4.2rem;
		line-height: 105%;
		width: 100%;
		text-align: left;
		margin-top: 1em;
		letter-spacing: -2px;
		animation-duration: 0.75s;
		animation-fill-mode: both;
		animation-name: slideDown;
		animation-timing-function: ease;
		animation-delay: 0.3s;
	}

	.solution-subhead {
		font-size: 24px;
		/* font-weight: 500; */
		text-align: left;
		margin-left: 0;
		max-width: 95%;
	}

	.solution-image {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		margin-inline: auto;
		margin-top: 6em;
		margin-left: 5em;
		max-width: 90%;
		overflow: hidden;
		animation-duration: 0.75s;
		animation-fill-mode: both;
		animation-name: slideDown;
		animation-timing-function: ease;
		animation-delay: 0.7s;
		/* animation: float 5s ease-in-out infinite; */
	}

	.solution-header-image {
		display: block;
		position: relative;
		margin-top: 5.5em;
		border-radius: 10px;
		width: 100%;
	}

	.solution-well-header {
		font-size: 5rem;
	}

	.well-subhead {
		font-size: 24px;
		font-weight: 500;
		max-width: 50%;
		line-height: 120%;
		letter-spacing: -1px;
		color: #292929;
	}

	.well-text {
		font-family: "Mazzard";
		font-size: 5rem;
		color: rgb(81, 80, 98);
	}

	.well-image {
		margin-inline: auto;
		border-radius: 10px;
		width: 60%;
		margin-top: 4em;
	}

	.button.solution-button {
		font-size: 1rem;
		display: inline-flex;
	}

	.solution-fact-text {
		margin-inline: auto;
		text-align: center;
		font-size: 24px;
		font-weight: 500;
		max-width: 70%;
		line-height: 120%;
		letter-spacing: -1px;
	}

	.solution-aaf-header {
		font-size: 5rem;
		text-align: left;
	}

	.aaf-subhead {
		font-size: 1.5rem;
		color: #3c3d46;
		width: 80%;
		text-align: left;
		/* margin-inline: auto; */
		margin-bottom: 0;
	}

	.aaf-image {
		/* margin-inline: auto; */
		width: 80%;
		border-radius: 10px;
		/* padding-left: 5em; */
		margin-top: -2em;
		margin-left: -5em;
	}

	.liquid-header-top {
		font-size: clamp(40px, 5vw, 40px);
		letter-spacing: -2px;
		font-weight: 500;
		color: var(--clr-primary-500);
		margin-bottom: 0.5em;
	}

	.liquid-subhead {
		font-size: 24px;
		font-weight: 500;
		line-height: 120%;
		letter-spacing: -1px;
		color: #292929;
		width: 80%;
		text-align: center;
		margin-inline: auto;
		margin-bottom: 0;
		margin-top: 2em;
	}

	[data-typewriter] {
		font-size: clamp(40px, 5vw, 64px);
		letter-spacing: -2px;
		font-weight: 500;
		color: #00963c;
		height: 6rem;
		border-right: 0.6rem solid transparent;
		padding: 0.6rem;
	}

	.tests-wrapper {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.tests-list-item {
		width: 600px;
		display: flex;
		justify-content: center;
	}

	.tests-list-with-icons {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-inline: auto;
	}

	.tests-text {
		font-size: 1.5rem;
	}

	.tests-icon {
		position: relative;
		top: -2px;
		height: 45px;
		width: 45px;
		margin-right: 15px;
		filter: invert(39%) sepia(56%) saturate(6754%) hue-rotate(135deg)
			brightness(95%) contrast(101%);
	}

	.tests-button {
		width: 100%;
	}
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px); /* Change this to the desired float height */
	}
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* MONITORING/DASHBOARD PAGE */

.monitoring-card {
	display: flex;
	justify-content: center;
}

.monitoring-card h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: -2em;
}

.monitoring-card-image {
	width: 90%;
	margin-inline: auto;
}

@media (min-width: 800px) {
	.monitoring-card {
		display: flex;
		align-items: center;
	}

	.monitoring-card h2 {
		font-size: 4rem;
		margin-left: 1em;
		margin-bottom: 0;
		line-height: 105%;
	}

	.monitoring-card-image {
		width: 80%;
	}
}

/* CONTACT US */
.contact-header-top {
	font-size: 2.6rem;
	margin-top: 1em;
	line-height: 1.2;
	text-align: center;
}

.contact-header {
	font-size: 2.6rem;
	margin-top: 0;
	color: var(--clr-primary-500);
	line-height: 1;
	text-align: center;
}

.contact-title {
	text-align: center;
	margin-top: 2em;
	font-weight: 600;
}

.contact-link {
	text-align: center;
	margin-top: 0.5em;
	font-size: 14px;
}

.contact-link:hover {
	color: var(--clr-primary-500);
	transition: color 0.2s ease;
}

.contact-form-header {
	margin-top: 0;
	text-align: center;
	font-weight: 500;
	font-size: 1.5rem;
	letter-spacing: -0.05em;
}

/* CONTACT US FORM */

.container-form__container {
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	display: flex;
	position: relative;
	padding-top: 0;
}

.form-wrapper {
	width: 100%;
	margin-bottom: 0;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideUp;
	animation-timing-function: ease;
	animation-delay: 0.9s;
}

.input-wrapper {
	width: 100%;
}

.w-form {
	margin: 0 0 15px;
}

.heading-l {
	letter-spacing: -0.05em;
	margin-top: 0;
	font-weight: 500;
	line-height: 1.1;
}

.heading-l.form__subheading {
	text-align: center;
	font-size: 1.5rem;
}

.label {
	font-weight: bold;
	display: block;
}

.form.checkout__form {
	display: flex;
	flex-direction: column;
	grid-row-gap: 1.25rem;
}

.form__header {
	width: 100%;
	text-align: center;
	height: auto;
	display: flex;
	flex-direction: column;
	margin-bottom: 3.75rem;
}

.heading-xl {
	margin-bottom: 0;
	font-weight: bold;
	line-height: 95%;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideUp;
	animation-timing-function: ease;
	animation-delay: 0.5s;
}

.heading-xl.form__heading.contacts--heading {
	max-width: 1205px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 2rem;
	font-size: 3rem;
}

.contacts__collection {
	margin-top: auto;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideUp;
	animation-timing-function: ease;
	animation-delay: 0.7s;
}

.contacts__list-item {
	display: flex;
	flex-direction: column;
	margin-top: 2rem;
	align-items: center;
	grid-row-gap: 2rem;
}

.contacts__list-title {
	color: #3c3d46;
	letter-spacing: -0.03em;
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 100%;
}

.contacts__list-subtitle {
	color: #73888c;
	letter-spacing: -0.03em;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.3s;
}

.contacts__list-subtitle:hover {
	color: var(--clr-primary-500);
	transition: color 0.2s ease-in-out;
}

.heading-l.form__subheading {
	text-align: center;
	font-size: 1.5rem;
	margin-bottom: 1.25rem;
}

.form__grid-wrapper {
	width: 100%;
	display: grid;
	grid-column-gap: 1.25rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-auto-columns: 1fr;
	grid-row-gap: 1.125rem;
}

.error-message {
	margin-bottom: 0;
	display: none;
}

.input {
	width: 100%;
	color: #2c2f33;
	letter-spacing: -0.03em;
	background-color: rgba(0, 0, 0, 0);
	border: 1px #000;
	border-bottom-color: #73888c;
	margin-bottom: 0;
	padding-top: 1.625rem;
	padding-bottom: 1rem;
	font-size: 0.875rem;
}

.w-input {
	width: 100%;
	display: block;
}

.input:focus {
	border-style: none;
}

.input-wrapper {
	width: 100%;
}

.input_indicator-wrapper {
	width: 100%;
	height: 1px;
	background-color: #73888c;
	transition: opacity 0.2s;
	position: relative;
}

.input_indicator {
	width: 0%;
	height: 100%;
	background-color: var(--clr-primary-500);
	transition: all 1s;
	position: absolute;
	top: 0;
	left: auto;
	right: 0;
}

.textarea {
	color: #2c2f33;
	letter-spacing: -0.03em;
	background-color: rgba(0, 0, 0, 0);
	border: 1px #000;
	border-bottom-color: #73888c;
	margin-bottom: 0;
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-size: 0.875rem;
	line-height: 150%;
	width: 100%;
}

.contact-button {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	/* border-radius: 2000px; */
	cursor: pointer;
	line-height: 90%;
	text-decoration: none;
	overflow: hidden;
	background-color: var(--clr-primary-500);
	color: #fff;
	white-space: nowrap;
	border: none;
	font-weight: 500;
	font-size: 1rem;
	padding: 1rem 10rem;
	margin-top: 2em;
	margin-inline: auto;
}

.form__button-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 0;
	padding-top: 2em;
	padding-bottom: 2em;
}

@media (min-width: 768px) {
	.container.form__container {
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		display: flex;
		position: relative;
		padding-top: 5rem;
		padding-left: 2rem;
		padding-right: 2rem;
		padding-bottom: 5rem;
	}

	.form.checkout__form {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		grid-row-gap: 2.75rem;
		margin-top: 1em;
	}

	.form__grid-wrapper {
		display: grid;
		width: 100%;
		grid-column-gap: 1.25rem;
		grid-row-gap: 16px;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr;
		grid-auto-columns: 1fr;
	}

	.form__header {
		width: 45%;
		height: auto;
		display: flex;
		flex-direction: column;
	}

	.heading-xl {
		letter-spacing: -0.04em;
		margin-bottom: 0;
		font-weight: bold;
		line-height: 95%;
		margin-top: -1.125rem;
		font-size: 4rem;
	}

	.heading-l.form__subheading {
		margin-bottom: 0.75rem;
		text-align: left;
		font-size: 2rem;
		letter-spacing: -0.05em;
		margin-top: 0;
		font-weight: 500;
		line-height: 110%;
	}

	.heading-xl.form__heading.contacts--heading {
		max-width: 1205px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 0;
		font-size: 4rem;
	}

	.contacts__collection {
		margin-top: 5rem;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.contacts__list-item {
		grid-row-gap: 3.75rem;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 4rem;
		display: flex;
	}

	.contacts__list-title {
		color: #3c3d46;
		letter-spacing: -0.03em;
		margin-top: 0;
		margin-bottom: 8px;
		font-size: 1rem;
		font-weight: 600;
		line-height: 100%;
	}

	.contacts__list-subtitle {
		display: flex;
		color: #73888c;
		letter-spacing: -0.03em;
		font-size: 1rem;
		font-weight: 500;
		text-decoration: none;
		transition: color 0.3s;
	}

	.contact-header-top {
		font-size: 3.8rem;
		margin-top: 1em;
		line-height: 1.1;
		text-align: center;
	}

	.form-wrapper {
		width: 50%;
		margin-bottom: 0;
	}

	.input-wrapper {
		width: 100%;
	}

	.contact-header {
		font-size: 3.8rem;
		margin-top: 0;
		color: var(--clr-primary-500);
		line-height: 0.9;
		text-align: center;
	}

	.input {
		width: 100%;
		color: #2c2f33;
		letter-spacing: -0.03em;
		background-color: transparent;
		border: 1px #000;
		border-bottom-color: #73888c;
		margin-bottom: 0;
		padding: 1.5rem 1.5rem 1.5rem 0;
		font-size: 1rem;
		line-height: 150%;
	}

	.input:focus {
		outline-offset: 4px;
		outline: 2px transparent;
	}

	.textarea {
		color: #2c2f33;
		letter-spacing: -0.03em;
		background-color: rgba(0, 0, 0, 0);
		border: 1px #000;
		border-bottom-color: #73888c;
		margin-bottom: 0;
		padding: 1.5rem 1.5rem 1.5rem 0;
		font-size: 1rem;
		line-height: 150%;
	}

	.textarea:focus {
		outline-offset: 4px;
		outline: 2px transparent;
	}

	.contact-button {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-radius: 10px;
		cursor: pointer;
		line-height: 90%;
		text-decoration: none;
		overflow: hidden;
		background-color: var(--clr-primary-500);
		color: #fff;
		white-space: nowrap;
		border: none;
		font-weight: 500;
		padding: 1rem 2rem;
	}

	.form__button-wrapper {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		margin-top: 0;
		padding-top: 2em;
		padding-bottom: 2em;
	}
}

/* LILY'S STORY PAGE */

.story {
	height: 100vh;
	padding: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.story-title-header {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
}

.story-content {
	font-size: 4rem;
	font-weight: 600;
}

.story-content-one {
	font-size: 4rem;
	font-weight: 600;
	text-align: center;
	width: 90%;
}

.story:nth-child(2) {
	background-color: #ffffff;
	color: #3c3d46;
}

.story:nth-child(3) {
	background-color: #ffffff;
	color: rgb(144, 144, 144);
}

.story:nth-child(4) {
	background-color: #ffffff;
	color: rgb(130, 130, 130);
}

.story:nth-child(5) {
	background-color: #ffffff;
	color: rgb(127, 127, 127);
}

.story-image-section-one {
	width: 75%;
	height: auto;
	border-radius: 15px;
}

@media (min-width: 50em) {
	.story-title-header {
		font-size: 2rem;
		font-weight: 600;
		text-transform: uppercase;
	}
}

/* INDOOR AIR QUALITY DATA SECTION - HOMESCREEN */

.iaq-data {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5em;
}

.iaq-data-title {
	font-size: 3rem;
	font-weight: 600;
	color: #353535;
	line-height: 125%;
	margin-top: 0;
}

.location-tag {
	margin-top: 1.5em;
	width: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	background-color: var(--clr-primary-500);
	padding: 3px;
}

.location-tag h3 {
	font-size: 1rem;
	font-weight: 500;
	color: #ffffff;
}

.realtime-data-display {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.realtime-data-title {
	font-size: 2rem;
	font-weight: 500;
	margin-top: 0;
}

.data-container {
	max-width: 600px;
}

.data-rows {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 1em;
}

.data-card-container {
	margin-top: 0.5em;
	margin-right: 0;
}

.data-card {
	display: flex;
	align-items: center;
	/* margin-left: .5em; */
}

.data-card-text {
	display: flex;
	flex-direction: column;
}

.data-card-icon img {
	aspect-ratio: 1;
	height: 36px;
	width: 36px;
}

.data-card-text p {
	font-size: 2em;
	font-weight: 500;
}

.realtime-bottom-text {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 0.75rem;
	padding-right: 3em;
	margin-top: 3em;
}

/* UTILITY CLASSES */

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	block-size: 1px !important;
}

.container-header {
	--max-width: 100%;
	--padding: 1rem;

	width: min(var(--max-width), 100% - (var(--padding) * 2));
	margin-inline: auto;
}

.container {
	--max-width: 1280px;
	--padding: 1rem;

	width: min(var(--max-width), 100% - (var(--padding) * 2));
	margin-inline: auto;
}

.even-columns {
	display: grid;
	gap: 40px;
}

@media (min-width: 821px) {
	.even-columns {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	.article-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

.vertical-align-center {
	align-items: center;
}

.justify-self-end {
	justify-self: end;
}

/* For medium screen sizes and up */
@media (min-width: 50em) {
	.justify-self-end-md {
		justify-self: end;
	}
}

.numbered-items {
	list-style-type: none;
	margin-top: 1rem;
}

:where(.flow :not(:first-child)) {
	margin-top: var(--flow-spacer, 1.5em);
}

.text-center {
	text-align: center;
}

.text-center p {
	margin-inline: auto;
}

@media (max-width: 50em) {
	.text-center-sm-only {
		text-align: center;
	}

	.text-center-sm-only p {
		margin-inline: auto;
	}
}

.text-primary-400 {
	color: var(--clr-primary-400);
}
.text-accent-400 {
	color: var(--clr-accent-400);
}
.text-accent-100 {
	color: var(--clr-accent-100);
}
.text-neutral-100 {
	color: var(--clr-neutral-100);
}
.text-neutral-900 {
	color: var(--clr-neutral-900);
}

.bg-primary-400 {
	background-color: var(--clr-primary-400);
}
.bg-accent-400 {
	background-color: var(--clr-accent-400);
}
.bg-accent-100 {
	background-color: var(--clr-accent-100);
}
.bg-neutral-100 {
	background-color: var(--clr-neutral-100);
}
.bg-neutral-900 {
	background-color: var(--clr-neutral-900);
}

.fw-bold {
	font-weight: var(--fw-bold);
}
.fw-semi-bold {
	font-weight: var(--fw-semi-bold);
}
.fw-regular {
	font-weight: var(--fw-regular);
}

.fs-primary-heading {
	font-size: 48px;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: -2px;
	/* padding-top: 1em; */
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
}
.fs-secondary-heading {
	font-size: var(--fs-secondary-heading);
	line-height: 1.1;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.5s;
}

.fs-300 {
	font-size: var(--fs-300);
}
.fs-400 {
	font-size: var(--fs-400);
}
.fs-500 {
	font-size: var(--fs-500);
}
.fs-600 {
	font-size: var(--fs-600);
}

.padding-block-900 {
	padding-block: var(--size-900);
}
.padding-block-700 {
	padding-block: var(--size-700);
}

@media (max-width: 47em) {
	.padding-block-700 {
		padding-block: var(--size-700);
	}
}

.margin-bottom-700 {
	margin-block-end: var(--size-700);
}

.margin-top-900 {
	margin-block-start: var(--size-900);
}

.display-sm-none {
	display: none;
}

@media (min-width: 990px) {
	.display-md-inline-flex {
		display: inline-flex;
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-24px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(0px);
	}
	to {
		opacity: 1;
		transform: translateY(-20px);
	}
}

.bento {
	/* --columns: 2;
	--gap: 24px;
	--row-gap: 24px; */
	margin-block-start: 260px;
	position: relative;
	padding: 0 24px;
	margin-bottom: 50px;
}

.bento_content {
	margin-left: auto;
	margin-right: auto;
	width: 980px;
}

.bento_header {
	font-size: 60px;
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -3px;
	text-align: center;
	columns: span 2;
}

.bento_grid {
	margin-left: auto;
	margin-right: auto;
	grid-column-gap: 24px;
	grid-row-gap: 24px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 1020px;
	margin-top: 80px;
	grid-auto-flow: row dense;
}

.bento_grid-two {
	margin-left: auto;
	margin-right: auto;
	grid-column-gap: 24px;
	grid-row-gap: 24px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 1020px;
	margin-top: 24px;
	grid-auto-flow: row dense;
}

.facts_box {
	min-height: 600px;
	grid-column: span 2;
	background: #f4f4f4;
	border-radius: 18px;
	box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
}

.card-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	padding-bottom: 50px;
	padding-block: 35px;
	padding: 67px;
	height: 100%;
}

.bento-content {
	position: relative;
	z-index: 1;
	grid-template-columns: min-content 0 min-content;
	justify-content: space-between;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 3% 1%;
	box-sizing: border-box;
}

.typography-headline {
	font-size: 50px;
	line-height: 1.0625;
	font-weight: 600;
	letter-spacing: -2px;
	min-width: 4em;
	text-align: center;
	flex: 1;
}

.bento-lightbulb {
	height: 300px;
	width: 300px;
	position: relative;
	z-index: 2;
	max-width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	overflow: clip;
	filter: invert(93%) sepia(69%) saturate(5000%) hue-rotate(320deg)
		brightness(105%) contrast(102%);
}

.lightning_bolt_animate {
	height: 250px;
	/* width: 250px; */
	position: relative;
	max-width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	overflow: clip;
}

.small_facts_box {
	background-color: #000;
	max-height: 600px;
	border-radius: 18px;
	box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
}

.card_header_container {
	position: relative;
	max-width: 350px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.card-content-small {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding-bottom: 50px;
	padding-block: 35px;
	padding: 67px;
	height: 100%;
}

.fact-number {
	color: #fff;
	font-size: 60px;
	font-weight: 800;
	text-align: center;
}

.fact-number-right {
	color: #fff;
	font-size: 30px;
	font-weight: 800;
	text-align: center;
	margin-top: 20px;
	line-height: 120%;
}

.fact-text {
	color: #fff;
	font-size: 30px;
	text-align: center;
	font-weight: 500;
	margin-top: -10px;
}

.fact-large-text {
	color: #fff;
	text-align: center;
	font-size: 40px;
	line-height: 110%;
	margin-top: 20px;
	font-weight: 700;
}

.card_header_container h1 {
	color: var(--clr-primary-500);
	font-size: 80px;
	font-weight: 900;
	text-align: center;
	margin-top: -20px;
}

.card_header_container p {
	color: var(--clr-primary-500);
	text-align: center;
	margin-top: 10px;
	font-size: 40px;
	font-weight: 800;
	opacity: 1;
}

.sick-icon {
	height: 300px;
	filter: invert(38%) sepia(94%) saturate(2663%) hue-rotate(190deg)
		brightness(100%) contrast(108%);
	margin-top: 10px;
}

.fact-text-optimize {
	font-size: 40px;
	text-align: center;
	font-weight: 600;
	margin-top: -10px;
	line-height: 115%;
}

.optimize-icon {
	height: 175px;
	margin-top: 20px;
}

.small_facts_box-white {
	background-color: #f4f4f4;
	max-height: 600px;
	border-radius: 18px;
	box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
}

.small_facts_box-blue {
	background-color: var(--clr-primary-500);
	max-height: 600px;
	border-radius: 18px;
	box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
}

.fact-number-blue-card {
	color: #fff;
	font-size: 120px;
	font-weight: 800;
	text-align: center;
	margin-top: 20px;
}

.fact-text-blue-card {
	color: #fff;
	font-size: 30px;
	text-align: center;
	font-weight: 600;
	margin-top: 20px;
	line-height: 120%;
}

.card_header_container-large {
	position: relative;
	/* max-width: 300px; */
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}

.card_flip_container {
	height: 600px;
	max-width: 498px;
	perspective: 600;
	position: relative;
}

.card_flip {
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	/* transition: all 1s ease-in-out; */
	width: 100%;
	animation: cardFlip 10s infinite 1s;
}

.card_flip .side {
	backface-visibility: hidden;
	border-radius: 6px;
	height: 100%;
	position: absolute;
	overflow: hidden;
	width: 100%;
	background-color: black;
	text-align: center;
	color: white;
	border-radius: 18px;
	box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
}

.card_flip .back {
	background-color: black;
	color: #0087cc;
	/* line-height: 150px; */
	text-align: center;
	transform: rotateY(180deg);
	border-radius: 18px;
	box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.15);
}

@keyframes cardFlip {
	25% {
		transform: rotateY(0deg);
	}

	75% {
		transform: rotateY(180deg);
	}

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

/* OPUS SECTION */

.opus-card-header {
	font-size: 54px;
	font-weight: 600;
	flex: 1;
}

.opus_image_container {
	flex: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	border-radius: 18px;
}

.opus_image_container img {
	height: 450px;
	transition: all 0.3s ease-in-out;
	transform: scale(1.1);
	cursor: pointer;
}

.opus_image_container img:hover {
	transform: scale(1.2);
	transition: all 0.4s ease-in-out;
	cursor: pointer;
}

.opus_desc_container {
	width: 1020px;
	display: flex;
	justify-content: center;
	align-items: center;
	/* margin: 10px 20px 0px 20px; */
}

.opus_desc {
	font-size: 38px;
	text-align: center;
	font-weight: 500;
	margin-top: 20px;
}

.opus_desc h1 {
	font-size: 80px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -3px;
	text-align: center;
	margin: 80px 0 40px 0;
}

.opus_desc h2 {
	margin-bottom: 25px;
	font-size: 45px;
	font-weight: 600;
	letter-spacing: -2px;
}

.opus_desc h3 {
	margin-bottom: 25px;
	margin-inline: auto;
	width: 85%;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -2px;
}

.coming_soon {
	font-size: 16px;
	background-color: var(--clr-primary-500);
	width: 200px;
	border-radius: 12px;
	color: rgb(255, 255, 255);
	padding: 16px 32px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	cursor: pointer;
	text-decoration: none;
}

@media only screen and (max-width: 1068px) {
	.bento_grid,
	.bento_grid-two {
		max-width: 678px;
		/* margin-top: 70px; */
	}

	.bento_content {
		margin-left: auto;
		margin-right: auto;
		width: 692px;
		padding-inline: 0;
	}

	.bento_header {
		font-size: 45px;
		letter-spacing: -2px;
	}

	.card-content {
		padding-inline: 0;
		padding-right: 30px;
		padding-left: 30px;
		padding-bottom: 60px;
	}

	.facts_box {
		min-height: 420px;
	}

	.small_facts_box {
		min-height: 420px;
	}

	.card-content-small {
		padding-block: 0;
		padding-bottom: 0;
	}

	.card_header_container {
		flex-grow: 0;
		margin-top: 20px;
	}

	.card_header_container p {
		font-size: 35px;
		font-weight: 800;
		opacity: 1;
	}

	.small_facts_box-white {
		min-height: 420px;
	}

	.small_facts_box-blue {
		min-height: 420px;
	}

	.fact-number {
		font-size: 50px;
	}

	.fact-number-right {
		font-size: 30px;
		line-height: 110%;
		margin-top: 30px;
	}

	.fact-text {
		font-size: 20px;
	}

	.fact-large-text {
		color: #fff;
		text-align: center;
		font-size: 30px;
		line-height: 110%;
		margin-top: 20px;
		font-weight: 700;
		width: 250px;
	}

	.typography-headline {
		font-size: 38px;
	}

	.sick-icon {
		height: 130px;
		filter: invert(38%) sepia(94%) saturate(2663%) hue-rotate(190deg)
			brightness(100%) contrast(108%);
		margin-top: 10px;
	}

	.facts_box2 {
		min-height: 420px;
	}

	.facts_box_3 {
		min-height: 420px;
	}

	.opus-card-header {
		font-size: 45px;
	}

	.opus_image_container img {
		height: 300px;
	}

	.lightning_bolt_animate {
		height: 200px;
	}

	.fact-text-optimize {
		font-size: 30px;
		width: 280px;
	}

	.optimize-icon {
		height: 130px;
	}

	.fact-number-blue-card {
		font-size: 90px;
	}

	.fact-text-blue-card {
		font-size: 26px;
		width: 300px;
	}

	.opus_desc_container {
		width: 678px;
		margin-left: auto;
		margin-right: auto;
	}

	.opus_desc h1 {
		font-size: 60px;
	}

	.opus_desc h2 {
		font-size: 40px;
	}

	.opus_desc h3 {
		font-size: 30px;
		letter-spacing: -2px;
	}

	.coming_soon {
		font-size: 16px;
		width: 150px;
		cursor: pointer;
		padding: 16px 32px;
	}

	.card_flip_container {
		min-height: 420px;
		/* max-width: 374px; */
		perspective: 600;
		position: relative;
		grid-column: 1;
	}
}

@media only screen and (max-width: 734px) {
	.bento {
		margin-block-start: 200px;
		margin-bottom: 200px;
	}
	.bento_grid,
	.bento_grid-two {
		display: grid;
		grid-template-columns: repeat(1, minmax(0, 1fr));
		grid-row-gap: 20px;
		padding: 0;
		max-width: 374px;
	}

	.bento_content {
		max-width: 100%;
	}

	.bento_header {
		letter-spacing: -2px;
		grid-column: span 1;
		width: 100%;
	}
	.facts_box,
	.small_facts_box,
	.small_facts_box-blue,
	.small_facts_box-white,
	.facts_box2,
	.facts_box_3 {
		max-width: 374px;
		grid-column: 1;
		max-height: 420px;
	}

	.bento-content {
		flex-direction: column;
	}

	.bento-lightbulb {
		height: 200px;
		width: 200px;
	}

	.lightning_bolt_animate {
		width: 150px;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.card_header_container {
		margin-top: 10px;
	}

	.card_header_container p {
		margin-top: 5px;
		font-size: 40px;
		font-weight: 800;
		opacity: 1;
	}

	.opus-card-header {
		font-size: 35px;
	}

	.opus_image_container img {
		height: 230px;
		max-width: 100%;
		margin-top: 30px;
	}

	.opus_desc_container {
		max-width: 350px;
		margin-left: auto;
		margin-right: auto;
	}

	.opus_desc h1 {
		font-size: 45px;
	}

	.opus_desc h2 {
		font-size: 32px;
	}

	.opus_desc h3 {
		font-size: 20px;
		letter-spacing: -2px;
	}

	.coming_soon {
		font-size: 18px;
		width: 150px;
		border-radius: 8px;
		padding: 2% 4%;
	}

	.card_flip_container {
		max-height: 420px;
		max-width: 374px;
		perspective: 600;
		position: relative;
		grid-column: 1;
	}
}

/* HKJC PROJECT PAGE */

.hkjc_header_container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
	position: relative;
	overflow: hidden;
}

.hkjc_logo {
	width: 350px;
	margin-bottom: 40px;
}

.hkjc_header {
	font-size: 36px;
	font-weight: 600;
	text-align: center;
	line-height: 110%;
	cursor: pointer;
	z-index: 2;
}

.hkjc_subhead {
	font-size: 18px;
	font-weight: 400;
	margin-top: 40px;
	text-align: center;
	min-width: 65%;
}

.temp_link_title {
	color: var(--clr-primary-500);
	text-decoration: underline;
	font-weight: 500;
	transition: 0.15s ease-out;
}

.temp_link_title:hover {
	opacity: 0.45;
	transition: 0.15s ease-out;
}

.temp_link {
	text-decoration: none;
}

.hover_image,
.hover_image_2 {
	display: none;
}

.project_section_title {
	margin-bottom: 12px;
	padding-left: 16px;
	font-size: 20px;
	font-weight: 500;
	color: #292929;
	letter-spacing: -1px;
}

.pdf {
	margin-top: 40px;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
}

.availability-container {
	display: flex;
	gap: 12px;
	margin: 30px;
	position: relative;
	align-items: center;
	top: 0;
	left: 0;
	border: 2px solid rgba(0, 0, 0, 0.15);
	padding: 10px 20px;
	border-radius: 12px;
	/* background: #f9f9f9; */
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

.available-indicator {
	width: 14px;
	height: 14px;
	/* background-color: #43e64c; */
	background-color: #ffaf2d;
	border-radius: 50%;
	z-index: 1;
	/* box-shadow: 0 0 0 0 rgba(#5a99d4, 0.5); */
	animation: pulse-animation 3s infinite;
}

.availability-text {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
	color: #606060;
}

@keyframes pulse-animation {
	0% {
		box-shadow: 0 0 0 0px rgba(255, 187, 0, 0.763);
	}
	100% {
		box-shadow: 0 0 0 12.5px rgba(255, 187, 0, 0);
	}
}

@media only screen and (min-width: 734px) {
	.hkjc_header {
		font-size: 50px;
		letter-spacing: -3px;
	}

	.availability-text {
		font-size: 16px;
	}

	.hkjc_subhead {
		width: 800px;
		line-height: 150%;
	}

	.project_section_title {
		margin-bottom: 24px;
		padding-left: 16px;
		font-size: 30px;
		font-weight: 500;
		color: #292929;
		letter-spacing: -1px;
	}

	.header_image_wrapper {
		z-index: 1;
		position: relative;
		width: 100%; /* Make sure the wrapper takes full width */
		height: 0; /* Maintain a height of 0 so that it doesn't affect layout */
		overflow: visible; /* Ensure the images are visible even outside the wrapper */
	}

	.hover_image {
		display: block;
		position: absolute;
		top: -5px;
		left: 105px;
		width: 200px;
		rotate: -10deg;
		opacity: 0;
		z-index: 1;
		transform: translate(15px, 25px);
		transition: 0.25s ease-out;
	}

	.hover_image_2 {
		display: block;
		position: absolute;
		top: 20px;
		right: 170px;
		rotate: 20deg;
		width: 150px;
		opacity: 0;
		z-index: 1;
		transform: translate(-15px, 30px);
		transition: 0.25s ease-out;
	}

	/* Apply the animation on hover */
	.hkjc_header:hover ~ .hover_image {
		animation: slideUpImage 0.25s forwards
			cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.hkjc_header:hover ~ .hover_image_2 {
		animation: slideUpImageTwo 0.25s forwards
			cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	/* Reverse the animation when unhovering */
	.hkjc_header:not(:hover) ~ .hover_image {
		animation: slideDownImage 0.15s forwards
			cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.hkjc_header:not(:hover) ~ .hover_image_2 {
		animation: slideDownImageTwo 0.15s forwards
			cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	/* Keyframes for sliding up */
	@keyframes slideUpImage {
		0% {
			transform: translate(15px, 25px);
			rotate: -10deg;
			opacity: 0;
		}
		100% {
			transform: translate(0px, 0px);
			rotate: 10deg;
			opacity: 1;
		}
	}

	@keyframes slideUpImageTwo {
		0% {
			transform: translate(-15px, 30px);
			rotate: 20deg;
			opacity: 0;
		}
		100% {
			transform: translate(0px, 0px);
			rotate: 10deg;
			opacity: 1;
		}
	}

	/* Keyframes for sliding down (reverse of slide up) */
	@keyframes slideDownImage {
		0% {
			transform: translate(0px, 0px);
			rotate: 10deg;
			opacity: 1;
		}
		100% {
			transform: translate(15px, 25px);
			rotate: -10deg;
			opacity: 0;
		}
	}

	@keyframes slideDownImageTwo {
		0% {
			transform: translate(0px, 0px);
			rotate: 10deg;
			opacity: 1;
		}
		100% {
			transform: translate(-15px, 30px);
			rotate: 20deg;
			opacity: 0;
		}
	}
}

/* SCHOOLS */

.hero_image_schools {
	margin: 60px 0px 40px 0px;
}

.hero_image_schools img {
	border-radius: 10px;
	aspect-ratio: 1.5/1;
	object-fit: cover;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.4s;
}

.schools-header-wrapper {
	margin-top: 40px;
}

.schools_body_text {
	margin-top: 80px;
}

.schools-header h1 {
	font-size: 2.25rem;
	font-weight: 800;
	color: #f0f0f0;
	line-height: 110%;
	text-align: center;
	letter-spacing: -2.5px;
	width: 100%;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.4s;
}

.highlight {
	color: #86f18d;
}

.schools-p {
	margin-top: 20px;
	font-size: 16px;
	font-weight: 500;
	color: #f0f0f0;
	text-align: center;
	width: 90%;
	margin-inline: auto;
	opacity: 0.8;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.6s;
	z-index: 0;
	margin-top: 20px;
}

.underline_animation {
	width: 35%;
	height: 10px;
	margin-left: 20px;
	z-index: 999;
	overflow: hidden;
}

.tender_btn a {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
}

.tender_download_icon {
	width: 20px;
	height: 20px;
}

.tender_btn_container {
	width: fit-content;
	height: auto;
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: #ffffff;
	border: 2px solid rgba(0, 0, 0, 0.15);
	padding: 10px 20px;
	border-radius: 12px;
	z-index: 2;
	transition: 0.15s ease-out;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

.tender_btn_container:hover {
	opacity: 0.45;
	transition: 0.15s ease-out;
}

.swiper {
	margin-top: 40px;
	width: 95%;
	height: 480px;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.7s;
}

.swiper-slide {
	background: rgb(253 253 253);
	border-radius: 40px;
	border: 1.5px solid rgba(0, 0, 0, 0.05);
	-webkit-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	-moz-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
}

.slide-1-container {
	height: 480px;
	display: grid;
	place-items: center;
	grid-template-rows: 250px 90px 60px;
	row-gap: 20px;
	padding: 0px 28px;
}

.slide-1-container svg {
	margin-top: 60px;
}

.swiper-slide-1 {
	background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
}

.swiper-slide-2 {
	background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

.swiper-slide-3 {
	background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

.swiper-slide-4 {
	background-image: linear-gradient(
		45deg,
		#ff9a9e 0%,
		#fad0c4 99%,
		#fad0c4 100%
	);
}

.swiper-slide-5 {
	background-image: linear-gradient(
		to right,
		#f78ca0 0%,
		#f9748f 19%,
		#fd868c 60%,
		#fe9a8b 100%
	);
}

.plus_button {
	font-size: 54px;
	font-weight: 200;
	color: #fff;
}

.slider_card_arrow {
	position: relative;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	/* background-color: rgb(134, 134, 139); */
	border: 3px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	padding-bottom: 5px;
}

.school-slide-title {
	font-size: 24px;
	text-align: center;
	align-self: flex-start;
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 115%;
	color: #292929;
}

/* QUIZ SMALL SCREENS */

.quiz_box {
	width: 95%;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	margin-top: 40px;
	background-color: rgba(254, 246, 246, 0.206);
	border: 3px solid #f1f1f124;
	padding: 20px 20px;
	border-radius: 15px;
	max-height: 650px;
}

#quiz {
	position: relative;
	height: 450px; /* Adjust based on your content */
	/* overflow: hidden; */
}

.question-container {
	position: absolute;
	width: 100%;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	pointer-events: none;
}
.question-container.active {
	opacity: 1;
	z-index: 1;
	pointer-events: auto;
}
.question-container.inactive {
	opacity: 0;
	z-index: 0;
}

#startScreen {
	text-align: center;
	padding: 20px;
	background-color: rgba(254, 246, 246, 0.206);
	border: 3px solid #f1f1f124;
	width: 95%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
	margin: auto;
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.85s;
}

.quiz_start_header {
	font-size: 32px;
	color: #fff;
	font-weight: 600;
}

.quiz_start_subhead {
	font-size: 18px;
	font-weight: 500;
	color: #fff;
}

/* #startButton {
	font-size: 1.2em;
	padding: 10px 40px;
	background: radial-gradient(var(--clr-primary-500), #00a2ff);
	color: #f1f1f1;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
	margin-top: 20px;
	font-weight: 600;
	stroke: #69778e;
	stroke-width: 1px;
	box-shadow: inset 0 -3px 0 #616161, inset 0 -4px 0 #298ff5,
		0px 5px 8px -2px #0000003e, 0px 0px 0px 1px #525252;
} */
/* #startButton:hover {
	background: radial-gradient(var(--clr-primary-500), #5ec1ff);
	transition: background-color 0.3s ease-in-out;

} */

/* #startButton:active {
	box-shadow: inset 0 -4px 0 #298ff5, 0px 5px 8px -2px #0000003e,
		0px 0px 0px 1px #525252;
	transform: translateY(1px);
} */

.pushable {
	position: relative;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	outline-offset: 4px;
	transition: filter 250ms;
	margin-top: 20px;
	font-weight: 600;
}
.shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: hsl(0deg 0% 0% / 0.25);
	will-change: transform;
	transform: translateY(2px);
	transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.edge {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: linear-gradient(
		to left,
		#157bb3 0%,
		#158bfa 75%,
		#1b9bfd 92%,
		#157bb3 100%
	);
}
.front {
	display: block;
	position: relative;
	padding: 12px 42px;
	border-radius: 12px;
	font-size: 1.25rem;
	color: white;
	background: var(--clr-primary-500);
	will-change: transform;
	transform: translateY(-4px);
	transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.pushable:hover {
	filter: brightness(110%);
}
.pushable:hover .front {
	transform: translateY(-6px);
	transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .front {
	transform: translateY(-2px);
	transition: transform 34ms;
}
.pushable:hover .shadow {
	transform: translateY(4px);
	transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .shadow {
	transform: translateY(1px);
	transition: transform 34ms;
}
.pushable:focus:not(:focus-visible) {
	outline: none;
}

.question {
	margin-bottom: 20px;
	color: #f1f1f1;
	font-weight: 500;
	text-align: center;
}

.question p {
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	opacity: 1;
	max-width: 800px;
	margin-inline: auto;
	text-align: center;
}
.options {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-weight: 500;
	color: #292929;
	font-size: 16px;
}
.quiz_button {
	padding: 10px;
	background-color: #f0f0f0;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s;
	border-radius: 10px;
	color: #292929;
}
.quiz_button:hover:not([disabled]) {
	background-color: var(--clr-primary-500);
	color: #fff;
}

.correct {
	background-color: #81e3ad;
	color: #292929;
}
.incorrect {
	background-color: #f08475;
	color: #292929;
}
.progress-bar {
	width: 100%;
	background-color: #eeeeee;
	padding: 2px;
	border-radius: 5px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
	margin-bottom: 40px;
}
.progress {
	width: 0;
	height: 10px;
	background: linear-gradient(-45deg, #0051ff, #00aeff, #23a6d5, #23d5ab);
	animation: gradient 3s ease infinite;
	background-size: 200% 200%;
	border-radius: 5px;
	transition: width 0.5s ease-in-out;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.modal {
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
	background-color: #fefefe;
	border-radius: 20px;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 600px;
}
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}
.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

#nextButton {
	display: block;
	/* margin-top: 0px; */
	width: fit-content;
	padding: 10px 40px;
	margin-inline: auto;
	font-weight: 600;
	background-color: var(--clr-primary-500);
	color: #fff;
	z-index: 999;
}

#feedback {
	margin-top: 20px;
	font-weight: bold;
	margin-inline: auto;
	text-align: center;
	width: fit-content;
}

/* WHAT AIRGUARD CAN OFFER YOU */

.offer_list_box {
	width: 95%;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.offer_list_item {
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	background-color: rgba(254, 246, 246, 0.206);
	border: 3px solid #f1f1f124;
	border-radius: 15px;
	width: 100%;
	height: 300px;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	-moz-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.85s;
}

.offer_list_title {
	color: #fff;
	font-weight: 600;
	font-size: 24px;
	line-height: 120%;
	letter-spacing: -1px;
	padding: 0px 20px;
}

.offer_list_content {
	color: #f1f1f1;
	margin-top: 20px;
	font-size: 18px;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: -0.5px;
	padding: 0 24px;
}

/* .offer_list_item:not(:first-child) {
	padding-top: 40px;
} */

@media only screen and (min-width: 500px) {
	/* .schools-header h1 {
		font-size: 2.25rem;
	}

	.schools-p {
		width: 90%;
		font-size: 14px;
		margin-top: -5px;
	} */

	.underline_animation {
		width: 20%;
		height: 30px;
		margin-left: 300px;
		z-index: 999;
		overflow: hidden;
	}
}

@media only screen and (min-width: 1030px) {
	.hero_image_schools img {
		aspect-ratio: 2/1;
		object-fit: cover;
		width: 80%;
		margin-inline: auto;
	}

	.schools-header h1 {
		font-size: 5rem;
		font-weight: 800;
		line-height: 100%;
		letter-spacing: -4px;
		text-align: center;
	}

	.schools-p {
		font-size: 27px;
		width: 60%;
		margin-top: 20px;
		text-align: center;
		margin-inline: auto;
		line-height: 140%;
		letter-spacing: -0.5px;
	}

	.underline_animation {
		width: 35%;
		height: 20px;
		margin-left: 180px;
		z-index: 999;
		overflow: hidden;
	}

	.highlight {
		color: #86f18d;
	}

	.swiper {
		margin-top: 60px;
		width: 85%;
		height: 480px;
	}

	.swiper-slide {
		background: rgb(253 253 253);
		border-radius: 40px;
		border: 1.5px solid rgba(0, 0, 0, 0.05);
		-webkit-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
		-moz-box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
		box-shadow: 0px 3px 3px 0px rgba(20, 20, 20, 0.04);
	}

	.slide-1-container {
		height: 480px;
		display: grid;
		place-items: center;
		grid-template-rows: 250px 90px 60px;
		row-gap: 20px;
		padding: 0px 28px;
	}

	.slide-1-container svg {
		margin-top: 60px;
		justify-content: center;
		align-items: center;
	}

	.swiper-slide-1 {
		background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
	}

	.swiper-slide-2 {
		background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
	}

	.swiper-slide-3 {
		background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
	}

	.swiper-slide-4 {
		background-image: linear-gradient(
			45deg,
			#ff9a9e 0%,
			#fad0c4 99%,
			#fad0c4 100%
		);
	}

	.swiper-slide-5 {
		background-image: linear-gradient(
			to right,
			#f78ca0 0%,
			#f9748f 19%,
			#fd868c 60%,
			#fe9a8b 100%
		);
	}

	.autoplay-progress {
		position: absolute;
		right: 16px;
		bottom: 16px;
		z-index: 999;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		color: #606060;
		font-size: 0;
	}

	.autoplay-progress svg {
		--progress: 0;
		position: absolute;
		left: 0;
		top: 0px;
		z-index: 10;
		width: 100%;
		height: 100%;
		stroke-width: 6px;
		stroke: #60606058;
		fill: none;
		stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
		stroke-dasharray: 125.6;
		transform: rotate(-90deg);
	}

	.school-slide-title {
		font-size: 24px;
		text-align: center;
		align-self: flex-start;
		font-weight: 800;
		letter-spacing: -1px;
		line-height: 115%;
		color: #292929;
	}

	.slider_card_arrow {
		position: relative;
		height: 50px;
		width: 50px;
		border-radius: 50%;
		/* background-color: rgb(134, 134, 139); */
		border: 3px solid #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		cursor: pointer;
		padding-bottom: 5px;
	}

	.slider_arrow {
		width: 60px;
		height: 60px;
	}

	.plus_button {
		font-size: 54px;
		font-weight: 200;
		color: #fff;
	}

	/* QUIZ */

	.quiz_box {
		width: 800px;
		margin-inline: auto;
		display: flex;
		flex-direction: column;
		margin-top: 40px;
		background-color: rgba(254, 246, 246, 0.206);
		border: 3px solid #f1f1f124;
		padding: 40px 40px;
		border-radius: 15px;
	}

	#quiz {
		position: relative;
		height: 200px; /* Adjust based on your content */
	}

	.question {
		margin-bottom: 20px;
		color: #f1f1f1;
		font-weight: 500;
		text-align: center;
	}

	.question p {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		opacity: 1;
		max-width: 800px;
		margin-inline: auto;
		text-align: center;
	}
	.options {
		margin-top: 20px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		font-weight: 500;
		color: #292929;
		font-size: 16px;
	}
	.quiz_button {
		padding: 10px;
		background-color: #f0f0f0;
		border: none;
		cursor: pointer;
		transition: background-color 0.3s;
		border-radius: 10px;
	}
	.quiz_button:hover:not([disabled]) {
		background-color: var(--clr-primary-500);
		color: #fff;
	}
	.correct {
		background-color: #81e3ad;
		color: #292929;
	}
	.incorrect {
		background-color: #f08475;
		color: #292929;
	}
	.progress-bar {
		width: 100%;
		background-color: #eeeeee;
		padding: 2px;
		border-radius: 5px;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
		margin-bottom: 40px;
	}
	.progress {
		width: 0;
		height: 10px;
		background: linear-gradient(-45deg, #0051ff, #00aeff, #23a6d5, #23d5ab);
		animation: gradient 3s ease infinite;
		background-size: 200% 200%;
		border-radius: 5px;
		transition: width 0.5s ease-in-out;
	}

	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.modal-content {
		background-color: #fefefe;
		border-radius: 20px;
		margin: 15% auto;
		padding: 20px;
		border: 1px solid #888;
		width: 80%;
		max-width: 600px;
	}
	.close {
		color: #aaa;
		float: right;
		font-size: 28px;
		font-weight: bold;
		cursor: pointer;
	}
	.close:hover,
	.close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}

	#nextButton {
		display: none;
		/* margin-top: 0px; */
		width: fit-content;
		padding: 10px 40px;
		margin-inline: auto;
		font-weight: 600;
		background-color: var(--clr-primary-500);
		color: #fff;
		z-index: 999;
	}

	#feedback {
		margin-top: 20px;
		font-weight: bold;
		margin-inline: auto;
		text-align: center;
	}

	.question-container {
		position: absolute;
		width: 100%;
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
		pointer-events: none;
	}
	.question-container.active {
		opacity: 1;
		z-index: 1;
		pointer-events: auto;
	}
	.question-container.inactive {
		opacity: 0;
		z-index: 0;
	}
	#startScreen {
		text-align: center;
		padding: 20px;
		background-color: rgba(254, 246, 246, 0.206);
		border: 3px solid #f1f1f124;
		width: 800px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 15px;
		margin: auto;
		animation-duration: 0.75s;
		animation-fill-mode: both;
		animation-name: slideDown;
		animation-timing-function: ease;
		animation-delay: 0.85s;
	}

	.quiz_start_header {
		font-size: 32px;
		color: #fff;
		font-weight: 600;
	}

	.quiz_start_subhead {
		font-size: 18px;
		font-weight: 500;
		color: #fff;
	}

	/* #startButton {
		font-size: 1.2em;
		padding: 10px 40px;
		background: radial-gradient(var(--clr-primary-500), #00a2ff);
		color: #f1f1f1;
		border: none;
		border-radius: 12px;
		cursor: pointer;
		transition: background-color 0.3s ease-in-out;
		margin-top: 20px;
		font-weight: 600;
		stroke: #69778e;
		stroke-width: 1px;
		box-shadow: inset 0 -3px 0 #616161, inset 0 -4px 0 #298ff5,
			0px 5px 8px -2px #0000003e, 0px 0px 0px 1px #525252;
	} */
	/* #startButton:hover {
		background: radial-gradient(var(--clr-primary-500), #5ec1ff);
		transition: background-color 0.3s ease-in-out;
		
	} */

	/* #startButton:active {
		box-shadow: inset 0 -4px 0 #298ff5, 0px 5px 8px -2px #0000003e,
			0px 0px 0px 1px #525252;
		transform: translateY(1px);
	} */
	.nav-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	/* WHY CHOOSE AIRGUARD FOR YOUR SCHOOL */

	.offer_list_box {
		width: 800px;
	}

	.offer_list_item {
		height: 250px;
	}

	.offer_list_title {
		font-size: 28px;
	}

	.offer_list_content {
		font-size: 20px;
		width: 80%;
		margin-inline: auto;
	}

	/* .highlight::before {
		content: "";
		position: absolute;
		background-image: linear-gradient(#fcf268, #fcf268);
		background-repeat: no-repeat;
		background-position: 0;
		background-size: 100% 100%;
		width: 24%;
		height: 1em;
		left: 19.5%;
		top: 80%;
		z-index: -1;
		border-radius: 50px;
		transform: translateY(-50%);
		rotate: 1.5deg;
	}  */
}

/* LOGIN PAGE */

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

.login_box {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 2px solid hsla(210, 5%, 8%, 0.1);
	padding: 40px 60px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
}

.login_logo {
	width: 350px;
	margin: 0 0 20px 0;
}

.login_page_header {
	font-size: 30px;
	font-weight: 500;
	margin-bottom: 24px;
	color: #606060;
	max-width: 300px;
	text-align: center;
	line-height: 115%;
	letter-spacing: -2px;
}

.required_warning {
	font-size: 12px;
	margin-bottom: 8px;
	color: hsla(210, 5%, 8%, 0.85);
}

.input_container {
	position: relative;
	margin-bottom: 30px;
	width: 250px;
}

.login_form {
	display: flex;
	flex-direction: column;
	position: relative;
}

.login_input_email,
.login_input_pass {
	padding: 10px;
	border-radius: 5px;
	border: 1.5px solid hsla(210, 5%, 8%, 0.2);
	width: 100%;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
	outline: none;
	transition: all 0.2s ease-out;
}

.login_input_email:focus,
.login_input_pass:focus {
	border-color: var(--clr-primary-500);
	border-width: 1.5px;
}

/* Validation Styles */
.login_input_email:not(:placeholder-shown):valid,
.login_input_pass:not(:placeholder-shown):valid {
	border-color: #00b448;
}

.login_input_email:not(:placeholder-shown):invalid,
.login_input_pass:not(:placeholder-shown):invalid {
	border-color: red;
}

.login_label_email,
.login_label_pass {
	font-weight: 500;
	font-size: 15px;
	color: hsla(210, 5%, 8%, 0.65);
	position: absolute;
	top: 50%;
	left: 5px;
	transform: translateY(-50%);
	background-color: transparent;
	padding: 0 5px;
	transition: all 0.2s ease-out;
	pointer-events: none;
}

.show_password {
	position: absolute;
	right: 10px;
	top: 15px;
	font-size: 12px;
	font-weight: 600;
	color: hsla(210, 5%, 8%, 0.65);
	text-decoration: underline;
	cursor: pointer;
}

.login_input_email:focus + .login_label_email,
.login_input_pass:focus + .login_label_pass,
.login_input_email:not(:placeholder-shown) + .login_label_email,
.login_input_pass:not(:placeholder-shown) + .login_label_pass {
	top: 0px;
	left: 10px;
	background-color: #ffffff;
	padding: 0 5px;
	font-size: 12px;
	color: hsla(210, 5%, 8%, 0.45);
}

.login_form [type="button"] {
	background-color: var(--clr-primary-500);
	border-radius: 5px;
	border: 2px solid hsla(210, 5%, 8%, 0.2);
	color: #f1f1f1;
	padding: 10px 32px;
	text-decoration: none;
	font-weight: bold;
	font-size: 17px;
	margin: 4px 2px;
	cursor: pointer;
	width: 100%;
	opacity: 100%;
	transition: 0.15s ease-out;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
}

.login_form [type="button"]:hover {
	background-color: #162067;
	transition: 0.2s ease-out;
}

.login_form [type="button"]:focus {
	opacity: 85%;
	scale: 0.98;
	transition: 0.15s ease-out;
}

.login_error_message {
	color: rgb(226, 0, 0);
	font-size: 14px;
	margin-top: 10px;
	max-width: 300px;
	text-align: center;
	/* display: hidden; */
}

.messageDiv {
	color: #f1f1f1;
	background-color: #00963c;
	max-width: 400px;
	font-weight: 600;
	padding: 10px;
	border-radius: 5px;
	font-size: 14px;
	margin-top: 10px;
	max-width: 300px;
	text-align: center;
	opacity: 0;
	animation: fadeOut 7s forwards;
}

.create_account_btn a {
	text-decoration: none;
	color: hsla(210, 5%, 8%, 0.85);
	font-size: 14px;
}

/* ADA PRODUCT PAGE */

.ada_container {
	/* height: 100vh; */

	padding-top: 60px;
	width: min(var(--max-width), 100% - (var(--padding) * 2));
	margin-inline: auto;
}

.ada_hero_section_box {
	padding: 0 20px;
}

.circle_1 {
	height: 300px;
	width: 300px;
	position: absolute;
	top: 45%;
	left: 25%;
	z-index: -1;
	background-color: #158bfa;
	opacity: 30%;
	border-radius: 65%;
	filter: blur(45px);
	-webkit-backdrop-filter: blur(45px) !important;
	backdrop-filter: blur(45px) !important;
	overflow: hidden;
}

.circle_2 {
	height: 300px;
	width: 300px;
	position: absolute;
	top: 20%;
	left: -10%;
	z-index: -1;
	background-color: pink;
	opacity: 100%;
	border-radius: 50%;
	filter: blur(170px);
	-webkit-backdrop-filter: blur(170px) !important;
	backdrop-filter: blur(170px) !important;
	overflow: hidden;
}

.circle_3 {
	height: 200px;
	width: 200px;
	position: absolute;
	top: 80%;
	right: 25%;
	z-index: -1;
	background-color: orange;
	opacity: 90%;
	border-radius: 50%;
	filter: blur(150px);
	-webkit-backdrop-filter: blur(150px) !important;
	backdrop-filter: blur(150px) !important;
	overflow: hidden;
}

.discount_banner_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	justify-self: center;
	width: 100%;
	margin: 20px 0;
	padding: 8px 20px;
	background: linear-gradient(180deg, #0099ff65 0%, #64caff65 100%);
	border-radius: 50px;
	border: 1px solid #60606045;
	-webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
}

.discount_banner_text {
	color: #292929;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: -0.5px;
	font-family: "Geist", sans-serif;
}

.discount_banner_btn {
	padding: 4px 12px;
	border-radius: 8px;
	border: 1px solid #60606045;
	background-color: hsl(0, 0%, 100%, 25%);
	font-size: 14px;
	font-weight: 400;
	color: #292929;
	letter-spacing: -0.5px;
	transition: 0.15s ease-out;
	cursor: pointer;
}

.discount_banner_btn:hover {
	background-color: hsl(0, 0%, 100%, 45%);
	border: 1px solid #60606065;
	transition: 0.15s ease-out;
}

.ada_hero_bottom {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}

.ada_hero_text_top {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ada_hero_wrapper {
	margin-top: 40px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-self: center;
	gap: 40px;
}

.ada_heading {
	font-size: 60px;
	letter-spacing: -2px;
	line-height: 115%;
	color: #292929;
	text-align: center;
	font-family: "Instrument Serif", sans-serif;
	text-wrap-style: balance;
}

.ada_subheading {
	font-size: 18px;
	letter-spacing: -0.5px;
	text-align: center;
	font-family: "Geist", sans-serif;
	text-wrap-style: pretty;
}

.ada_header_img {
	width: 280px;
}

.ada_hero_desc {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.ada_price {
	font-size: 18px;
	font-family: "Geist", sans-serif;
	letter-spacing: -0.5px;
}

.ada_shipping {
	display: flex;
	gap: 4px;
	align-items: center;
}

.low_stock_counter {
	font-size: 12px;
	color: #f0f0f0;
	padding: 12px 20px;
	background-color: rgb(221, 61, 61);
	border-radius: 10px;
	/* margin-top: 12px; */
	/* text-transform: uppercase; */
	font-weight: 500;
	font-family: "Geist", sans-serif;
	letter-spacing: -0.5px;
}

.shipping_text {
	font-size: 16px;
	font-family: "Geist", sans-serif;
	letter-spacing: -0.5px;
	line-height: 16px;
}

.key_features_header {
	font-family: "Instrument Serif", sans-serif;
	font-size: 48px;
	/* letter-spacing: -1px; */
	color: #292929;
	text-align: center;
	margin-bottom: 40px;
}

.ada-card-1 {
	background-image: url(/assets/images/multi_color.jpg);
	background-size: cover;
	background-position: 50%;
}

.ada-card-2 {
	background-image: url(/assets/images/historical_data_ada.jpg);
	background-size: cover;
	background-position: 50%;
}

.ada-video-card {
	border-radius: 28px;
}

/* .ada-card-3 {
	background-image: url(/assets/images/ada_weather_surface.jpg);
	background-size: cover;
	background-position: 50%;
} */

.ada-card-4 {
	background-image: url(/assets/images/bedside_alarm_ada.jpg);
	background-size: cover;
	background-position: 50%;
}

.ada_feature_controls {
	align-self: flex-end;
	padding-right: 24px;
}

.ada_feature_card_wrapper {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ada_feature_card_heading {
	font-size: 18px;
	font-family: "Geist", sans-serif;
	color: #292929;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.ada_feature_card_desc {
	font-size: 16px;
	font-family: "Geist", sans-serif;
	line-height: 125%;
	font-weight: 300;
	color: #292929;
	letter-spacing: -0.5px;
	width: 85%;
	text-wrap-style: pretty;
}

.ada_parameter_box {
	margin: 200px auto;
	max-width: 1400px;
	padding: 0 24px;
}

.ada_parameter_grid_container {
	margin-inline: auto;
	display: grid;
	gap: 12px;
	/* grid-template-columns: 1fr; */
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

.ada_parameter_grid_item {
	background: #f1f1f1;
	padding: 20px;
	border-radius: 15px;
	text-align: center;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* TRY CHANGING TO CENTER AND DECIDE */
	/* padding: 40px; */
	gap: 24px;
	/* border: 1px solid #606060; */
	-webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.12);
}

.ada_parameter_title_wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-direction: column;
	gap: 12px;
}

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

.ada_parameter_heading {
	font-family: "Geist", sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: #292929;
}

.ada_parameter_desc {
	font-family: "Geist", sans-serif;
	letter-spacing: -0.2px;
	font-size: 16px;
	font-weight: 400;
	display: none;
	text-wrap-style: pretty;
}

.ada_parameter_header {
	font-family: "Instrument Serif", sans-serif;
	font-size: 48px;
	/* letter-spacing: -1px; */
	color: #292929;
	text-align: left;
	margin-bottom: 40px;
}

.ada_co2 {
	background-image: url(assets/images/co2_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 15px;
}

.ada_pm {
	background-image: url(assets/images/pm_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 15px;
}

.ada_tvoc {
	background-image: url(assets/images/tvoc_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 15px;
}

.ada_temp {
	background-image: url(assets/images/temp_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 15px;
}

.ada_humidity {
	background-image: url(assets/images/humidity_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 15px;
}

.ada_noise {
	background-image: url(assets/images/noise_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 15px;
}

.ada_sleep_better_box {
	height: 100vh;
	width: auto;
	background-image: url(/assets/images/sleeping_woman_mobile.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 75%;
	/* filter: blur(2px); */
}

.ada_sleep_better_contents {
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 24px;
}

.ada_sleep_better_text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ada_sleep_better_title {
	font-family: "Instrument Serif", sans-serif;
	font-size: 64px;
	letter-spacing: -1px;
	color: #fff;
	text-align: center;
	/* margin-bottom: 40px; */
	text-wrap-style: balance;
	line-height: 115%;
}

.ada_sleep_better_subheading {
	font-family: "Geist", sans-serif;
	letter-spacing: -0.5px;
	font-size: 18px;
	font-weight: 300;
	color: #fff;
	text-align: center;
	line-height: 125%;
	width: 75%;
	margin-inline: auto;
	text-wrap-style: balance;
}

@media only screen and (min-width: 768px) {
	.discount_banner_wrapper {
		max-width: 400px;
		margin-top: 40px;
	}
	.ada_parameter_box {
		padding: 0 40px;
	}
	.ada_parameter_grid_container {
		grid-template-columns: repeat(2, 1fr);
		padding: 0;
		gap: 24px;
	}

	.ada_parameter_desc {
		font-family: "Geist", sans-serif;
		font-size: 18px;
		font-weight: 400;
		display: block;
		text-wrap-style: pretty;
	}

	.ada_sleep_better_subheading {
		width: 65%;
		font-size: 20px;
	}
}

@media only screen and (min-width: 992px) {
	.ada_hero_wrapper {
		margin-top: 40px;
	}

	.discount_banner_wrapper {
		max-width: 400px;
		margin-top: 40px;
	}

	.discount_banner_text {
		font-size: 16px;
	}

	.discount_banner_btn {
		font-size: 16px;
	}

	.ada_header_img {
		width: 400px;
	}

	.circle_1 {
		filter: blur(115px);
		-webkit-backdrop-filter: blur(115px) !important;
		backdrop-filter: blur(115px) !important;
	}

	.circle_2 {
		top: 20%;
		left: 85%;
	}

	.ada_heading {
		font-size: 72px;
		letter-spacing: -2px;
		color: #292929;
		text-align: center;
		text-wrap-style: balance;
	}

	.ada_subheading {
		font-size: 20px;
		letter-spacing: -0.5px;
		text-align: center;
	}

	.ada_price {
		font-size: 20px;
	}

	.shipping_text {
		font-size: 16px;
	}

	.ada_feature_card_wrapper {
		gap: 20px;
	}

	.ada_feature_card_heading {
		font-size: 20px;
	}
	.ada_feature_card_desc {
		font-size: 18px;
		display: block;
	}

	.ada_parameter_box {
		padding: 0 40px;
	}

	.ada_co2 {
		border-radius: 28px;
	}

	.ada_parameter_grid_container {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		padding: 0;
	}

	.ada_parameter_grid_item {
		padding: 40px;
		justify-content: flex-start;
		border-radius: 28px;
	}

	.ada_sleep_better_box {
		background-image: url(/assets/images/woman_bed_hd.jpg);
	}

	.ada_sleep_better_subheading {
		width: 60%;
	}
}

/* Specifications Section */

#specifications {
	margin: 100px 0;
	padding: 0 20px;
}

.specifications-container {
	display: flex;
	flex-direction: column;
	/* padding: 0 24px; */
	/* margin: 200px 0; */
}
.spec-item {
	border-bottom: 1px solid #ccc;
	padding: 12px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}
.spec-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	gap: 12px;
}

.spec-title {
	flex: 1;
	font-size: 16px;
	margin: 0;
	font-family: "Geist", sans-serif;
	letter-spacing: -0.2px;
	font-weight: 500;
	color: #292929;
}
.spec-toggle {
	background: none;
	border: none;
	font-size: 16px;
	color: #292929;
	/* align-self: end; */
}
.spec-content {
	overflow: hidden;
	transition: height 0.3s ease-out;
	height: 0;
	opacity: 0;
	padding: 0;
	font-size: 16px;
	font-family: "Geist", sans-serif;
	letter-spacing: -0.2px;
	font-weight: 400;
	color: #606060;
	max-width: 85%;
}

.spec-item.active .spec-content {
	opacity: 1;
	padding: 10px 0;
}

.spec-toggle i {
	transition: transform 0.3s ease-out;
	cursor: pointer;
}
.spec-item.active .spec-toggle i {
	transform: rotate(180deg);
}

.spec-content-text {
	margin-bottom: 8px;
	text-wrap-style: pretty;
}
.spec-item.active .spec-content {
	display: block;
	.spec-content-text {
		margin-bottom: 8px;
	}
}

/* NEW MOTHER AND FITNESS STYLING */

.ada_application_card_container {
	width: 100%;
	margin: 0 0 200px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 12px;
}

.ada_application_box {
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow-x: auto;
	/* scroll-behavior: smooth; */
	scrollbar-width: none;
	-ms-overflow-style: none;
	justify-content: space-around;
	padding-bottom: 20px;
	width: 95%;
	margin: auto;
}

.ada_application_card {
	/* border: 2px solid rgb(200, 200, 200); */
	height: clamp(400px, 50vh, 660px);
	width: 100%;
	border-radius: 15px;
	background-color: #e2e2e2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 24px 20px;
	-webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.12);
}

.ada_application_left {
	background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.65)),
		url(https://images.unsplash.com/photo-1548690312-e3b507d8c110?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}

.ada_application_right {
	background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.65)),
		url(https://images.unsplash.com/photo-1672711067108-d68b4ca13032?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
	background-repeat: no-repeat;
	background-position: 0%;
	background-size: cover;
}

.ada_application_text {
	font-family: "Instrument Serif", sans-serif;
	font-size: 48px;
	font-weight: 400;
	color: #f0f0f0;
	gap: 12px;
	display: flex;
	flex-direction: column;
	line-height: 120%;
	/* letter-spacing: -0.5px; */
	width: 80%;
	text-wrap-style: pretty;
	text-rendering: optimizeLegibility;
}

.ada_application_text span {
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 300;
	width: 100%;
	letter-spacing: -0.5px;
	line-height: 120%;
	text-wrap-style: balance;
	text-rendering: optimizeLegibility;
}

/* IN THE BOX */

.in_the_box_wrapper {
	max-width: 1400px;
	margin-inline: auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

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

.ada_box_image {
	height: 100px;
	width: auto;
}

/* Grid layout for larger screens */
@media only screen and (min-width: 868px) {
	#specifications {
		margin: 200px;
		padding: 0 40px;
		display: flex;
		justify-content: space-between;
		gap: 200px;
	}

	.specifications-container {
		width: 650px;
		/* padding: 0 40px; */
		margin-inline: auto;
	}
	/*
	.specifications_header_wrapper {
		padding: 0 40px;
		max-width: 1400px;
		margin-inline: auto;
	}

	.spec-title {
		font-size: 20px;
	}

	.spec-content {
		height: auto !important;
		opacity: 1;
		padding: 10px 8px;
		overflow: visible;
		font-size: 18px;
	}

	.spec-toggle {
		display: none;
	}

	.spec-item {
		border: none;
	} */

	/* NEW MOTHER AND FITNESS STYLING - LARGE SCREEN */

	.ada_application_card_container {
		max-width: 1400px;
		margin: 0 0 200px 0;
		padding: 0 40px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-inline: auto;
		justify-content: center;
	}

	.ada_application_right {
		background-position: 30%;
	}

	.ada_application_box {
		display: flex;
		width: 100%;
		flex-direction: row;
		gap: auto;
		overflow-x: auto;
		/* scroll-behavior: smooth; */
		scrollbar-width: none;
		-ms-overflow-style: none;
		justify-content: space-around;
		padding-bottom: 20px; /* Space for potential scrollbar */
	}

	.ada_application_card {
		height: clamp(400px, 50vh, 660px);
		width: 100%;
		background-color: #e2e2e2;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 24px 20px;
		border-radius: 28px;
	}

	.ada_application_text {
		font-size: 48px;
		width: 80%;
		text-wrap-style: pretty;
	}

	.ada_application_text span {
		font-size: 18px;
		line-height: 120%;
	}

	.in_the_box_wrapper {
		padding: 0 40px;
		display: flex;
		flex-direction: column;
	}

	.in_the_box_header {
		padding: 0;
	}

	.in_the_box_images {
		gap: 40px;
		justify-content: center;
	}

	.ada_box_image {
		height: 200px;
		width: auto;
	}
}

/* FITNESS AND WELLNESS SECTION */

.fitness_hero_wrapper {
	height: 100vh;
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.35));
}

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

.fitness_hero_wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -100;
	object-fit: cover;
}

/* Fitness Hero Carousel */
.fitness_hero_carousel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -100;
}

.carousel-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 2s ease-in-out;
}

.carousel-image.active {
	opacity: 1;
}

/* Carousel Control Button */
.carousel-control-btn {
	position: absolute;
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: all 0.3s ease;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.carousel-control-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.carousel-control-btn svg {
	color: rgba(255, 255, 255, 0.9);
	transition: color 0.3s ease;
}

.carousel-control-btn:hover svg {
	color: rgba(255, 255, 255, 1);
}

.fitness_hero_text_box {
	position: relative;

	padding: 120px 40px 60px 40px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.fitness_hero_title {
	font-size: 42px;
	color: #fff;
	font-family: "Instrument Serif", sans-serif;
	line-height: 105%;
	text-rendering: optimizeLegibility;
}

.fitness_hero_desc {
	font-size: 16px;
	font-family: "Geist", sans-serif;
	letter-spacing: -0.2px;
	color: #fff;
	font-weight: 300;
	line-height: 125%;
	text-rendering: optimizeLegibility;
	text-wrap-style: balance;
}

#fitness_benefits {
	margin-top: 200px;
}

.fitness_benefits_wrapper {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	padding: 0 24px;
}

.fitness_card_wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
}

.fitness_benefit_card {
	position: relative;
	height: auto;
	width: 100%;
	background-color: hsl(0, 0%, 0%, 2%);
	border: 1px solid hsl(0, 0%, 0%, 8%);
	border-radius: 28px;
	padding: 20px 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-content: flex-start;
	overflow: clip;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
}

.fitness_card_circle_orange {
	height: 250px;
	width: 250px;
	border-radius: 50%;
	background: #ff7b00;
	position: absolute;
	z-index: -10;
	top: 10%;
	right: 10%;
	filter: blur(160px);
	-webkit-backdrop-filter: blur(160px);
}

.fitness_card_circle_purple {
	height: 200px;
	width: 200px;
	border-radius: 50%;
	background: #9500ff9f;
	position: absolute;
	z-index: -10;
	bottom: 5%;
	left: 40%;
	filter: blur(160px);
	-webkit-backdrop-filter: blur(160px);
}

.fitness_card_circle_blue {
	height: 200px;
	width: 200px;
	border-radius: 50%;
	background: #25a8ff;
	position: absolute;
	z-index: -10;
	top: 5%;
	left: 5%;
	filter: blur(160px);
	-webkit-backdrop-filter: blur(160px);
}

.fitness_benefit_card:before {
	content: "";
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: cover;
	opacity: 0.35;
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

.fitness_card_header_box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}

.fitness_card_title {
	font-size: 24px;
	font-family: "Geist", sans-serif;
	font-weight: 400;
	color: #292929;
	line-height: 115%;
	letter-spacing: -0.5px;
}

.fitness_card_content {
	text-align: center;
	font-size: 20px;
	font-family: "Geist", sans-serif;
	font-weight: 300;
	color: #292929;
	letter-spacing: -0.5px;
	text-wrap-style: pretty;
	line-height: 125%;
}

#fitness_cta {
	margin-top: 200px;
}

.fitness_ada_cta_wrapper {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	padding: 0 24px;
}

.fitness_cta_image_box img {
	border-radius: 28px;
	height: 450px;
	aspect-ratio: 2/1;
	object-fit: cover;
	object-position: 65% 100%;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.08);
}

.fitness_cta_text_box {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	margin-bottom: 40px;
}

.fitness_cta_title {
	font-size: 58px;
	color: #292929;
	font-family: "Instrument Serif", sans-serif;
	line-height: 115%;
	text-rendering: optimizeLegibility;
	width: 100%;
	text-wrap: balance;
	text-align: center;
}

.fitness_cta_content {
	font-size: 20px;
	font-family: "Geist", sans-serif;
	letter-spacing: -0.5px;
	color: #292929;
	font-weight: 300;
	line-height: 125%;
	text-rendering: optimizeLegibility;
	text-wrap-style: balance;
	width: 90%;
	text-align: center;
}

#fitness_blog {
	margin-top: 200px;
}

.fitness_blog_left {
	background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15)),
		url(https://images.unsplash.com/photo-1523395243481-163f8f6155ab?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
	max-height: 450px;
}

.fitness_blog_right {
	background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15)),
		url(https://images.unsplash.com/photo-1724692728085-b822cd9529f8?q=80&w=2975&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
	background-repeat: no-repeat;
	background-position: 0%;
	background-size: cover;
	max-height: 450px;
}

.fitness_blog_card_text {
	font-family: "Instrument Serif", sans-serif;
	font-size: 32px;
	font-weight: 400;
	color: #f0f0f0;
	gap: 12px;
	display: flex;
	flex-direction: column;
	line-height: 115%;
	width: 80%;
	text-wrap-style: pretty;
	text-rendering: optimizeLegibility;
	align-self: flex-start;
	padding-left: 4px;
}

.fitness_blog_header_box {
	display: flex;
	align-items: flex-start;
	width: 100%;
	padding-left: 12px;
	height: auto;
	margin-bottom: 40px;
}

.fitness_blog_read_more {
	display: none;
	transition: 0.15s ease-out;
	opacity: 1;

	&:hover {
		opacity: 0.45;
		transition: 0.15s ease-out;
	}
}

.rune_instructions_img {
	width: 75%;
	margin-left: 8px;
	border-radius: 8px;
	padding: 20px;
	background: #f1f1f1;

	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-name: slideDown;
	animation-timing-function: ease;
	animation-delay: 0.4s;
}

@media (min-width: 868px) {
	.fitness_hero_text_box {
		padding: 140px 100px;
		margin-top: 0;
	}

	.fitness_hero_title {
		font-size: 72px;
	}

	.fitness_hero_desc {
		font-size: 18px;
		width: 35%;
		text-wrap-style: balance;
	}

	.fitness_blog_card_text {
		font-size: 38px;
		text-wrap-style: pretty;
		align-self: flex-start;
		width: 85%;
		padding: 12px;
	}

	.fitness_blog_header_box {
		padding-left: 0;
		height: max-content;
		justify-content: space-between;
		align-items: flex-end;
	}

	.fitness_blog_read_more {
		display: block;
		font-family: "Geist", sans-serif;
		font-size: 20px;
		letter-spacing: -0.5px;
		font-weight: 300;
		text-decoration: underline;
		color: #292929;
	}

	.fitness_benefits_wrapper {
		padding: 0 40px;
	}

	.fitness_benefit_card {
		min-height: 350px;
	}

	.fitness_card_wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 24px;
	}

	.fitness_card_header_box {
		margin-top: 24px;
	}

	.fitness_ada_cta_wrapper {
		max-width: 1400px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		flex-direction: column;
		padding: 0 40px;
		place-items: center;
	}

	.fitness_cta_text_box {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.fitness_cta_title {
		text-align: left;
		font-size: 64px;
		width: 80%;
	}

	.fitness_cta_content {
		text-align: left;
		font-size: 20px;
		line-height: 125%;
		width: 75%;
	}

	.rune_instructions_img {
		width: 25%;
		margin-left: 8px;
	}
}

@media only screen and (min-width: 992px) {
	.fitness_blog_card_text {
		font-size: 48px;
	}

	/* RUNE PAGE NAV HIDDEN */

	.rune_header {
		display: none !important;
	}
}

/* SMART RING STYLING */
.ring_hero_container {
	padding: 80px 0 0 0;
	display: flex;
	flex-direction: column-reverse;
	margin-inline: auto;
	height: 100svh;
	background-image: url(assets/images/ring_on_hand.jpeg);
	background-size: cover;
	background-position: 85% 65%;
	position: relative;
}

.happy_girl_container {
	background-image: url(assets/images/sleeping_rune.jpg);
	background-position: 85% 60%;
}

/* RUNE PAGE NAV HIDDEN */

.rune_header {
	display: block;
}

.ring_hero_text_wrapper {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	text-align: center;
}

.ring_hero_contents {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	gap: 24px;
	flex: 1;
	margin-bottom: 40px;
	align-items: center;
	margin-bottom: 100px;
}

.ring_header {
	font-family: "Instrument Serif", sans-serif;
	font-size: 42px;
	line-height: 105%;
	letter-spacing: -1px;
	text-wrap: balance;
	/* margin-top: 40px; */
	color: #f0f0f0;
}

.ring_subheader {
	font-family: "Geist", sans-serif;
	font-weight: 300;
	line-height: 105%;
	letter-spacing: -0.5px;
	font-size: 16px;
	color: #292929;
	max-width: 400px;
	padding: 0 20px;
	color: #f0f0f0;
}

.ring_tip_wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	top: 40px;
	gap: 8px;
}

.ring_price_text {
	font-family: "Geist", sans-serif;
	font-size: 24px;
	color: #292929;
	line-height: 105%;
	letter-spacing: -2%;
	font-weight: 400;
}

.ring_exclude_shipping {
	font-family: "Geist", sans-serif;
	font-size: 16px;
	color: #606060;
	line-height: 105%;
	letter-spacing: -2%;
	font-weight: 300;
}

.review_container {
	display: flex;
	flex-direction: column;
	height: auto;
	justify-content: space-around;
	align-items: center;
	max-width: 1400px;
	margin-inline: auto;
	margin: 200px 24px;
	gap: 80px;
}

.review_box {
	display: flex;
	flex-direction: column;
	max-width: 400px;
	text-align: center;
	align-items: center;
	gap: 12px;
}

.review_stars {
	display: flex;
}

.review_content {
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 300;
	text-wrap: pretty;
	letter-spacing: -0.4px;
}

.review_author {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: -0.4px;
}

.ring_feature_wrapper {
	display: none;
}

.ring_feature_image {
	display: inline-block;
}

.rune_button {
	position: fixed;
	bottom: 20px;
	width: 100%;
	justify-content: center;
}

/* RUNE APP IMAGES */

.rune_app_container {
	max-width: 100%;
	margin: 0 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-inline: auto;
	gap: 20px;
}

.rune_app_img {
	width: 160px;
}

.rune_app_p {
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 145%;
	text-align: center;
	text-wrap: balance;
	margin-bottom: 40px;
	max-width: 500px;
	margin-inline: auto;
	text-wrap: pretty;
}

/* RUNE KEY FEATURES */

.rune_key_feat_wrapper,
.rune_styles_wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-inline: auto;
	margin: 0px 20px 0 20px;
}

#rune_key_features {
	display: flex;
	flex-direction: column;
	flex: 1/1;
	margin-inline: auto;
	justify-content: center;
	gap: 40px;
	align-items: center;
	margin: 0;
}

.rune_key_features_image {
	width: 100%;
	border-radius: 0px;
	-webkit-box-shadow: 0;
	-moz-box-shadow: 0;
	box-shadow: 0;
}

.rune_key_feat_header {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 40px;
}

.rune_key_feat_title {
	font-family: "Instrument Serif", sans-serif;
	font-size: 32px;
	text-wrap: balance;
	line-height: 105%;
	letter-spacing: -1px;
	color: #292929;
	margin-bottom: 40px;
	width: 100%;
	text-align: center;
}

.rune_key_feat_tag {
	font-family: "Geist", sans-serif;
	letter-spacing: -0.5px;
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
	color: #606060;
}

.rune_key_feat_card {
	width: 100%;
	background-color: #f0f0f0;
	padding: 24px 24px;
	margin-bottom: 20px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	max-width: 650px;
	min-height: 140px;
	-webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
}

.rune_key_feat_card_header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rune_key_feat_card_header p {
	font-family: "Geist", sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 125%;
	color: #292929;
}

.rune_key_feat_card_p {
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 125%;
	color: #292929;
	text-wrap: pretty;
}

/* RUNE UNIQUE STYLES */

.rune_styles_header {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 40px;
}

.rune_styles_title {
	font-family: "Instrument Serif", sans-serif;
	font-size: 42px;
	text-wrap: balance;
	line-height: 105%;
	letter-spacing: -1px;
	color: #292929;
	margin-bottom: 40px;
}

.rune_style_img_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.rune_style_img_box img {
	max-height: 350px;
	border-radius: 12px;
}

.rune_style_name {
	font-family: "Geist", sans-serif;
	letter-spacing: -0.5px;
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
	color: #606060;
}

.rune_banner {
	height: 80px;
	background-color: #fff;
	position: relative;
	top: 60px;
	display: flex;
	justify-content: center;
	gap: 12px;
	align-items: center;
	padding: 8px 12px;
	flex-wrap: wrap;
}

.banner_item {
	display: flex;
	align-items: center;
	gap: 4px;
}

.banner_item span {
	font-size: 14px;
	color: #292929;
	font-family: "Geist", sans-serif;
	letter-spacing: -0.5px;
	font-weight: 500;
}

.rune_desc_wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.rune_scroll {
	font-size: 16px;
	color: #fff;
	font-family: "Geist", sans-serif;
	letter-spacing: -0.5px;
	font-weight: 400;
	display: flex;
	gap: 4px;
}

.rune-page .fitness_hero_wrapper {
	background-image: none;
}

.rune-page .fitness_hero_title,
.rune-page .fitness_hero_desc {
	color: #fff;
	text-shadow: 0 18px 30px rgba(0, 0, 0, 0.55);
}

.rune-page .rune_scroll {
	color: #fff;
}

.rune-page .rune_scroll svg {
	stroke: currentColor;
}

/* Mobile review layout - 2 columns */
@media (max-width: 767px) {
	.review_container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin: 100px 16px;
	}

	.review_box {
		max-width: none;
		width: 100%;
	}
}

@media (min-width: 1200px) {
	/* RUNE PAGE NAV HIDDEN */

	.rune_header {
		display: none !important;
	}

	.rune_banner {
		top: 0;
		gap: 40px;
		height: 60px;
	}

	.ring_hero_container {
		height: 100vh;
		width: auto;
		padding-left: 100px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-image: url(assets/images/rune_table_real.jpg);
		background-size: cover;
	}

	.happy_girl_container {
		background-image: url(assets/images/sleeping_rune.jpg);
		background-position: 25% 60%;
	}

	.rune_key_feat_wrapper,
	.rune_styles_wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-inline: auto;
		margin: 0px 20px;
		height: 100vh;
	}

	.rune_styles_title {
		font-size: 72px;
	}

	.ring_hero_contents {
		padding: 140px 100px;
		display: flex;
		flex-direction: column;
		max-width: 1400px;
		gap: 20px;
		flex: 1;
		align-items: flex-start;
	}

	.ring_tip_wrapper {
		align-items: flex-start;
		position: relative;
		margin-bottom: 60px;
	}

	.ring_hero_text_wrapper {
		gap: 4px;
		align-items: flex-start;
		text-align: left;
	}

	.ring_header {
		font-size: 72px;
	}

	.ring_subheader {
		max-width: 430px;
		font-size: 20px;
		padding: 0;
	}

	.ring_feature_image {
		margin-top: 140px;
		height: 550px;
		border-radius: 30px;
	}

	.ring_price_text {
		font-size: 24px;
	}

	.ring_exclude_shipping {
		font-size: 14px;
		font-weight: 400;
		color: #fff;
	}

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

	.rune_app_container {
		max-width: 1200px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-inline: auto;
	}

	.rune_app_img {
		min-width: 280px;
	}

	.rune_app_p {
		max-width: 650px;
		margin-inline: auto;
		font-size: 18px;
		text-wrap: pretty;
		margin-bottom: 80px;
	}

	.ring_feature_wrapper {
		display: block;
		position: relative;
		width: 100vw;
		margin: 200px 0;
		height: 100%;
	}

	.rune_key_feat_card {
		max-width: fit-content;
	}

	#rune_key_features {
		display: flex;
		flex-direction: row;
		flex: 1/1;
		margin-inline: auto;
		justify-content: center;
		gap: 100px;
		align-items: center;
	}

	.rune_key_features_image {
		height: 800px;
		width: auto;
		border-radius: 8px;
		-webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
		-moz-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
	}

	.rune_key_feat_header {
		text-align: left;
		width: 100%;
	}

	.rune_key_feat_title {
		font-size: 42px;
	}

	.ring_feature_pill_1 {
		position: absolute;
		top: 100px;
		left: 200px;
		display: flex;
		background-color: #00000020;
		border-radius: 12px;
		padding: 15px 20px;
		gap: 8px;
		color: #fff;
		font-family: "Geist" sans-serif;
		letter-spacing: -2%;
		align-items: center;
		border: 1px solid #777777;
	}

	.review_container {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-start;
		max-width: 100%;
		margin-inline: auto;
		margin: 200px 100px;
	}

	.review_box {
		display: flex;
		flex-direction: column;
		max-width: 400px;
		text-align: center;
		align-items: center;
		gap: 12px;
	}

	.ring_feature_image {
		display: none;
	}

	.rune_button {
		position: fixed;
		display: flex;
		justify-content: center;
		width: 100%;
	}
}

/* REVIEWS SECTION RUNE PAGE */
.reviews-section {
	margin: 200px auto;
	max-width: 1400px;
	padding: 0 24px;
}

.reviews-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.reviews-title {
	font-family: "Instrument Serif", sans-serif;
	font-size: 42px;
	text-wrap: balance;
	line-height: 105%;
	letter-spacing: -1px;
	color: #292929;
	text-align: center;
	margin-bottom: 20px;
}

.review-summary {
	font-size: 18px;
	font-weight: 500;
}

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	width: 50%;
}

.reviews-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.review-box {
	background-color: #f8f8f8;
	padding: 30px;
	border-radius: 28px;
	/* border: 1px solid #e0e0e0; */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-box-image {
	background-color: #f8f8f8;
	padding: 30px;
	border-radius: 28px;
	height: 350px;
	/* border: 1px solid #e0e0e0; */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background-image: url(/assets/images/rune_hand_3.jpg);
	background-size: 350px;
	background-position: -15px -40px;
}

.review-box:hover {
	transform: translateY(-2px);
	box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.1);
}

.review-box-image:hover {
	transform: translateY(-2px);
	box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.1);
}

/* iPad Touch Optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
	.review-box,
	.review-box-image {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.review-box:active,
	.review-box-image:active {
		transform: translateY(0px);
		transition: transform 0.1s ease;
	}
}

.review-stars {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	display: none;
}

.star {
	color: var(--clr-primary-500);
	font-size: 22px;
}

.review-content {
	font-family: "Geist", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: #292929;
	margin-bottom: 20px;
	text-wrap: pretty;
}

.reviewer-name {
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #606060;
	text-align: left;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.reviews-section {
		margin: 40px auto;
		padding: 0 16px;
	}

	.reviews-title {
		font-size: 42px;
		line-height: 105%;
		letter-spacing: -0.2px;
		text-wrap: balance;
	}

	.review-summary {
		font-size: 16px;
		font-weight: 400;
	}

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

	.reviews-column {
		gap: 12px;
	}

	.review-box {
		padding: 20px;
	}

	.review-box-image {
		background-size: 250px;
		background-position: -15px -40px;
		height: 280px;
		width: 100%;
	}

	.review-content {
		font-size: 14px;
		line-height: 1.4;
		margin-bottom: 12px;
	}

	.reviewer-name {
		font-size: 16px;
		font-weight: 600;
	}

	.star {
		font-size: 16px;
	}

	.review-stars {
		margin-bottom: 8px;
		gap: 2px;
	}
}

/* iPad Portrait and Landscape Optimization */
@media (min-width: 769px) and (max-width: 1024px) {
	.reviews-section {
		margin: 150px auto;
		padding: 0 60px;
		max-width: 1200px;
	}

	.reviews-title {
		font-size: 48px;
		margin-bottom: 30px;
	}

	.review-summary {
		font-size: 20px;
		margin-bottom: 40px;
	}

	.reviews-grid {
		width: 85%;
		gap: 24px;
		max-width: 1000px;
	}

	.reviews-column {
		gap: 20px;
	}

	.review-box {
		padding: 32px;
		height: auto;
		min-height: 200px;
	}

	.review-box-image {
		height: 400px;
		background-size: 450px;
		background-position: -20px -50px;
	}

	.review-content {
		font-size: 19px;
		line-height: 1.5;
		margin-bottom: 24px;
	}

	.reviewer-name {
		font-size: 17px;
		font-weight: 600;
	}

	.star {
		font-size: 20px;
	}
}

/* iPad Landscape Specific */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
	.reviews-section {
		margin: 120px auto;
		padding: 0 80px;
	}

	.reviews-grid {
		width: 90%;
		gap: 28px;
	}

	.review-box-image {
		height: 380px;
		background-size: 480px;
		background-position: -25px -45px;
	}

	.review-box {
		padding: 28px;
		min-height: 180px;
	}
}

/* iPad Portrait Specific */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
	.reviews-section {
		margin: 180px auto;
		padding: 0 50px;
	}

	.reviews-grid {
		width: 80%;
		gap: 22px;
	}

	.review-box-image {
		height: 420px;
		background-size: 420px;
		background-position: -15px -55px;
	}

	.review-box {
		padding: 30px;
		min-height: 220px;
	}
}

.go-back {
	height: 50px;
	width: 50px;
	margin: 40px 8px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: 0.15s ease-out;
	position: relative;
	background-color: #60606020;
}

.go-back:hover {
	background-color: #60606045;
	transition: 0.15s ease-out;
}

.back-to-top {
	height: 50px;
	width: 50px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: 0.15s ease-out;
	position: fixed;
	bottom: 40px;
	right: 40px;
	background-color: #60606020;
	border: none;
	cursor: pointer;
	z-index: 1000;
}

.back-to-top:hover {
	background-color: #60606045;
	transition: 0.15s ease-out;
}

/* Tooltip styles - hidden by default and on smaller screens */
.go-back .tooltip,
.back-to-top .tooltip {
	position: absolute;
	white-space: nowrap;
	background-color: #292929;
	color: #ffffff;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease-out, transform 0.15s ease-out;
	transform: translateX(0) translateY(-50%);
	z-index: 1001;
	display: none;
}

.go-back .tooltip {
	left: calc(100% + 12px);
	top: 0%;
}

.back-to-top .tooltip {
	right: calc(100% + 12px);
	top: 50%;
}

/* Show tooltip on hover - only on larger screens */
@media (min-width: 50em) {
	.back-to-top {
		bottom: 100px;
	}
	.go-back .tooltip,
	.back-to-top .tooltip {
		display: block;
	}

	.go-back:hover .tooltip,
	.back-to-top:hover .tooltip {
		opacity: 1;
		transform: translateX(0) translateY(-50%);
		transition: opacity 0.15s ease-out 0.3s, transform 0.15s ease-out 0.3s;
	}
}

.bionic-ring-nav {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 24px;
	border-bottom: 1px solid #e0e0e0;
}

/* DOCUMENTATION PAGE */

.documentation_header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	align-items: center;
	margin-top: 20px;
}

.documentation_tag {
	margin-bottom: 20px;
	background-color: #00000010;
	padding: 12px 20px;
	border-radius: 8px;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
		0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "Geist";
}

.documentation_tag span {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}

.documentation_title {
	letter-spacing: -0.4px;
	margin: 0;
	line-height: 120%;
	text-align: center;
	margin-left: 8px;
	max-width: 85%;
	font-family: "Geist";
	font-weight: 600;
	font-size: 2rem;
	text-wrap-style: balance;
	margin-inline: auto;
	color: #292929;
}

.documentation_subtitle {
	margin-inline: auto;
	margin-top: 0;
	color: #606060;
	font-family: "Geist";
	font-weight: 500;
	font-size: 1rem;
	max-width: 85%;
	text-wrap-style: balance;
}

.documentation_grid_wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 60px 40px 0 40px;
	place-content: center;
	width: 65%;
	margin-inline: auto;
}

.documentation_option {
	padding: 12px;
	margin: 0;
	display: flex;
	justify-content: space-evenly;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: 0.15s ease-out;
	text-decoration: none;
	/* height: 220px; */
}

.documentation_option:hover {
	background-color: #60606012;
	transition: 0.15s ease-out;
	cursor: pointer;
}

.documentation_option img {
	max-width: 120px;
}

.documentation_option_text {
	font-size: 18px;
	font-weight: 600;
	color: #606060;
	font-family: "Geist";
}

.instruction_img_container {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.finger_illustration {
	width: 400px;
	padding: 40px 40px;
	/* border: 1.5px solid #60606040; */
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
		0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
	border-radius: 12px;
}

.ring_sensors {
	width: 500px;
	padding: 40px 40px;
	/* border: 1.5px solid #60606040; */
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
		0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
	border-radius: 12px;
}

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

.instruction_text {
	font-size: 16px;
	color: #606060;
	line-height: 115%;
}

.instruction_text:not(:first-child) {
	margin-top: 20px;
}

@media (min-width: 868px) {
	/* .documentation_tag span {
		font-size: 14px;
	} */
	.documentation_title {
		font-size: 3rem;
		max-width: 70%;
		margin-inline: auto;
	}

	.documentation_subtitle {
		font-size: 18px;
		max-width: 80%;
	}

	.documentation_grid_wrapper {
		grid-template-columns: repeat(4, 1fr);
		width: 75%;
	}

	.instruction_img_container {
		flex-direction: row;
	}

	.finger_illustration {
		width: 450px;
	}

	.ring_sensors {
		width: 500px;
	}

	.instruction_text {
		font-size: 17px;
	}
}

/* ZENITH PAGE */

/* Only shift the visible part of the image inside its container on mobile */
.shift-mobile-right {
	object-position: -480px center;
}

@media (min-width: 768px) {
	.shift-mobile-right {
		object-position: center center;
	}
}

/* Base reset-ish for this component only */
.trust-strip,
.trust-strip * {
	box-sizing: border-box;
}

.trust-strip {
	width: 100%;
	padding: 1.25rem 1rem;
	background: radial-gradient(
		circle at top,
		#98846b 0,
		#90785c 65%,
		#c9b59b 100%
	);
	color: #f9fafb;
	border-top: 1px solid rgba(148, 163, 184, 0.25);
	/* border-bottom: 1px solid rgba(15, 23, 42, 0.9); */
	font-family: "Geist";
	position: relative;
	/* Top border blur effect */
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 8px;
		pointer-events: none;
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-top: 1px solid rgba(148, 163, 184, 0.25); /* mirrors the border */
	}
}

.trust-strip-inner {
	max-width: 1120px;
	margin: 0 auto;
}

/* Label above logos */
.trust-strip-label {
	font-size: 0.75rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--trust-text-muted);
	margin: 0 0 0.75rem;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
	text-wrap: pretty;
}

/* Optional small glow dot */
/* .trust-strip-label::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: radial-gradient(circle, #22c55e, #16a34a);
	box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
	margin-top: 6px;
} */

/* Marquee wrapper */
.trust-strip-marquee {
	overflow: visible;
	width: 100%;
}

/* Logos container */
.trust-strip-logos {
	display: flex;
	gap: 0.6rem;
}

/* Logo pill */
.trust-logo {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 0.78rem;
	padding: 0.52rem 0.9rem;
	border-radius: var(--trust-radius);
	border: 1px solid var(--trust-pill-border);
	background: linear-gradient(
		135deg,
		var(--trust-pill-bg),
		rgba(148, 163, 184, 0.08)
	);
	box-shadow: var(--trust-pill-shadow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	color: #e5e7eb;
	letter-spacing: 0.02em;
	position: relative;
	transition: 0.3s ease-out;
	outline: none;
}

/* Little accent line on each pill */
/* .trust-logo::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border-top: 1px solid rgba(248, 250, 252, 0.3);
  opacity: 0.7;
} */

/* Hover / focus effect (mainly seen on desktop) */
.trust-logo:hover,
.trust-logo:focus-visible {
	/* transform: translateY(-1px) scale(1.02); */
	/* box-shadow: 0 8px 35px rgba(15, 23, 42, 0.65); */
	/* background: linear-gradient(
		135deg,
		rgba(56, 189, 248, 0.15),
		rgba(129, 140, 248, 0.18)
	); */
	border: 1px solid #f0f0f085;
	transition: 0.3s ease-out;
}

/* MOBILE: infinite scrolling marquee */
@media (max-width: 767px) {
	.trust-strip-logos {
		/* We’ll duplicate children via JS so there are 2x sets */
		width: max-content;
		will-change: transform;
		animation: trust-marquee 35s linear infinite;
	}

	/* Pause on touch/hover for usability */
	.trust-strip-marquee:hover .trust-strip-logos,
	.trust-strip-marquee:active .trust-strip-logos {
		animation-play-state: paused;
	}

	@keyframes trust-marquee {
		0% {
			transform: translateX(0);
		}
		100% {
			/* Move left by half its width (because we doubled content) */
			transform: translateX(-50%);
		}
	}
}

/* TABLET / DESKTOP: static row layout */
@media (min-width: 768px) {
	.trust-strip {
		padding: 1.25rem 1.5rem;
	}

	.trust-strip-inner {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.trust-strip-label {
		margin: 0;
		min-width: 240px;
		text-align: left;
		text-wrap: pretty;
	}

	.trust-strip-marquee {
		overflow: visible;
	}

	.trust-strip-logos {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 0.75rem;
		animation: none; /* no marquee on larger screens */
	}

	.trust-logo {
		font-size: 0.82rem;
		padding: 0.6rem 1.1rem;
	}
}

@media (min-width: 1024px) {
	.trust-strip {
		padding: 1.5rem 2rem;
	}

	.trust-strip-label {
		font-size: 0.8rem;
		font-weight: 500;
	}
}

/* Utility container */
.shell {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-inline: auto;
	gap: 40px;
	padding: 0 20px;
}

@media (min-width: 1024px) {
	.shell {
		padding-inline: 1.25rem;
		width: 100%;
		max-width: 1120px;
		flex-direction: row;
		justify-content: space-between;
	}
}

.no-sub-header {
	font-size: 28px;
	font-weight: 600;
	font-family: "Geist";
}

/* COMPARE */
.section-compare {
	padding: 0;
}

.section-heading {
	width: 100%;
	gap: 40px;
}

.compare-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

.bullet-list {
	margin: 0;
	padding-left: 1.15rem;
	font-size: 16px;
	color: #606060;
}

.bullet-list li {
	margin-bottom: 0.45rem;
}

/* FEATURES */

.app-features-section {
	position: relative;
	overflow: hidden;
	padding-block-start: 200px;
}

.app-features-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: linear-gradient(
		to bottom,
		rgba(250, 250, 250, 0.95) 0%,
		rgba(250, 250, 250, 0.85) 30%,
		rgba(250, 250, 250, 0.75) 70%,
		rgba(250, 250, 250, 0.95) 100%
	); */
}

.app-features-main-image {
	max-width: 950px;
	width: 100%;
	height: auto;
	transform: scale(1.2);
	transition: transform 0.3s ease;
}

@media (max-width: 768px) {
	.app-features-bg-image {
		filter: blur(30px);
		opacity: 0.12;
	}

	.app-features-main-image {
		max-width: 100%;
		border-radius: 16px;
	}

	.app-features-section {
		padding-block-start: 120px;
	}
}

@media (max-width: 480px) {
	.app-features-header {
		margin-bottom: 40px !important;
	}

	.app-features-image-wrapper {
		margin-bottom: 40px !important;
	}

	.app-features-section {
		padding-block-start: 120px;
	}
}

.compare-table-wrapper {
	border-radius: 1.25rem;
	border: 1px solid rgba(15, 23, 42, 0.9);
	background: radial-gradient(circle at top, #020617, #020617);
	padding: 0.75rem;
	overflow: hidden;
}

.compare-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
}

.compare-table th,
.compare-table td {
	padding: 0.55rem 0.65rem;
	border-bottom: 1px solid rgba(31, 41, 55, 0.9);
	color: #f0f0f0;
}

.compare-table th {
	text-align: left;
	font-weight: 500;
	color: #e5e7eb;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
	border-bottom: none;
}

.compare-copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* desktop layout compare */
@media (min-width: 1024px) {
	.compare-layout {
		grid-template-columns: 1.1fr 1.1fr;
		gap: 2.5rem;
		align-items: start;
	}

	.section-compare {
		padding: 200px 20px 0 20px;
	}

	.section-heading {
		width: 50%;
		gap: 40px;
	}
}

.comparison_container {
	align-items: center;
	text-align: center;
}

@media (min-width: 1024px) {
	.comparison_container {
		align-items: flex-start;
		text-align: left;
	}
}

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

.pricing {
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	line-height: 100%;
	font-family: "Geist";
}

.pricing_info {
	font-size: 12px;
	color: #fff;
	font-family: "Geist";
	font-weight: 400;
	text-wrap: pretty;
}

@media (min-width: 1024px) {
	.pricing {
		font-size: 28px;
		font-weight: 600;
		color: #fff;
	}

	.pricing_wrapper {
	}

	.pricing_info {
		font-size: 16px;
	}
}