@font-face {
	font-family: "Outfit";
	src: url("/public/fonts/Outfit-300.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Outfit";
	src: url("/public/fonts/Outfit-400.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Outfit";
	src: url("/public/fonts/Outfit-500.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Outfit";
	src: url("/public/fonts/Outfit-600.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Outfit";
	src: url("/public/fonts/Outfit-700.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
  /* Fonts */
  --font-outfit: "Outfit", sans-serif;
	--font-light: 300;
	--font-reg: 400;
	--font-med: 500;
	--font-semi: 600;
	--font-bold: 700;

  /* Brand Colors */
  /* Grayscale */
  --clr-black: #0A0908;
  --clr-charcoal: #161619;
  --clr-graphite: #242424;
  --clr-graphite-alt: #343434;
  --clr-fog: #dcddde;
  --clr-mist: #e7eaed;
  --clr-cloud: #F2F4F3;
  --clr-white: #fdfdfd;

  /* Blues */
  --clr-navy: #081F3A;
  --clr-tealblue: #0A2C54;
  --clr-cobalt: #0F427E;
  --clr-azure: #0075ff;
  --clr-lake: #6daff9;
  --clr-sky: #97C7FF;

  /* Greens */
  --clr-pine: #005A45;
  --clr-forest: #007258;
  --clr-emerald: #00c0a3;
  --clr-emerald-alt: #8bddd0;
  --clr-mint: #00ffc2;
  --clr-ice: #9DFFE8;

  /* Warm/Neutrals */
  --clr-espresso: #221A0F;
  --clr-bronze: #f2cd54;
  --clr-taupe: #f7f1dc;
  --clr-orange: #FF6600;
  --clr-orange-alt: #ff8f44;
  --clr-peach: #FFCDA1;

  /* Gradients */
  --glassy-gradient: linear-gradient(var(--clr-nav) 0 0) padding-box, var(--conic-gradient);
  --glassy-gradient-vibrant: linear-gradient(var(--clr-nav) 0 0) padding-box, var(--conic-gradient-vibrant);
  --conic-gradient: conic-gradient(from 360deg, var(--clr-drawer-border-primary), var(--clr-drawer-border-tertiary), var(--clr-drawer-border-primary));
  --conic-gradient-vibrant: conic-gradient(from 225deg, var(--clr-vibrant-border-primary), var(--clr-vibrant-border-secondary), var(--clr-vibrant-border-tertiary), var(--clr-vibrant-border-primary));

  /* UI Colors */
  --clr-background: var(--clr-mist);
	--clr-background-alt: var(--clr-cloud);
  --clr-footer: var(--clr-graphite);

  /* Navigation */
	--clr-nav: rgb(231, 234, 237, 0.7);
  --clr-nav-border: var(--clr-cloud);
	--clr-nav-shadow: rgba(215, 215, 215, 0.5);
	--clr-drawer: rgb(250, 250, 250);
	--clr-drawer-transparent: rgba(250, 250, 250, 0.8);
	--clr-vibrant-border-primary: rgba(0, 119, 255, 0.15);
	--clr-vibrant-border-secondary: rgba(255, 143, 68, 0.15);
	--clr-vibrant-border-tertiary: rgba(0, 128, 0, 0.15);
	--clr-drawer-border-primary: rgba(0, 119, 255, 0.1);
	--clr-drawer-border-secondary: rgba(255, 143, 68, 0.1);
	--clr-drawer-border-tertiary: rgba(0, 128, 0, 0.1);
  --clr-drawer-text-primary: rgb(61, 152, 255);
  --clr-drawer-text-secondary: rgb(88, 155, 255);
  --clr-drawer-underline-primary: rgba(61, 152, 255, 0.2);
  --clr-drawer-underline-secondary: rgba(0, 128, 0, 0.2);
  --clr-drawer-underline-primary-vibrant: rgba(61, 152, 255, 0.4);
  --clr-drawer-underline-secondary-vibrant: rgba(0, 128, 0, 0.4);

  /* Card */
  --clr-card-background: var(--clr-cloud);
  --clr-borders-primary: rgb(148, 195, 249, 0.7);
	--clr-borders-secondary: rgb(248, 165, 105, 0.7);
  --clr-borders-tertiary: rgb(127, 222, 208, 0.7);
  --clr-borders-quaternary: rgb(234, 208, 125, 0.7);

  /* CTA */
	--clr-primary: var(--clr-azure);
	--clr-primary-alt: var(--clr-sky);
	--clr-secondary: var(--clr-orange-alt);
	--clr-secondary-alt: var(--clr-peach);
  --clr-tertiary: var(--clr-emerald);
  --clr-tertiary-alt: var(--clr-emerald-alt);
  --clr-quaternary: var(--clr-bronze);
  --clr-quaternary-alt: var(--clr-taupe);
  --clr-link: #588dff;
  --clr-error: #f1163e;

  /* Text */
  --clr-text: var(--clr-black);
  --clr-text-alt: var(--clr-charcoal);
	--clr-text-neg: var(--clr-cloud);
	--clr-cta-text: var(--clr-cloud);
	--clr-cta-text-alt: var(--clr-charcoal);

  /* Layout */
	--br-curved-xs: 0.5rem;
	--br-curved-sm: 1rem;
	--br-curved-card: 0.625rem;
	--bw-regular: 0.25rem;
	--bw-sm: 0.188rem;
	--br-curved-full: 100rem;
	--header-pady: 2rem;
	--container-pady: 2.5rem;
	--container-padx: 4rem;
	--container-padb: 2.5rem;
	--container-space-between: 4rem;
	--container-gap: 1.5rem;
	--content-gap: 2.5rem;
	--banner-img-min-width: 25rem;
	--banner-img-max-width: 30rem;
	--card-img-height: 12rem;
	--card-padding: 2rem 1.5rem;
	--text-hero-welcome: 1.875rem;
	--text-hero-slogan: 3.125rem;
	--text-hero-description: 2rem;
	--text-title: 2.625rem;
	--text-title-md: 2.375rem;
	--text-title-sm: 1.5rem;
	--text-title-xs: 1.5rem;
	--text-subtitle: 1.875rem;
	--text-subtitle-height: 1.125;
	--text-gap: 1.5rem;
	--text-gap-lg: 2rem;
	--text-gap-short: 1.25rem;
	--text-gap-min: 0.75rem;
}

@media (prefers-color-scheme: dark) {
	:root {
    /* UI Colors */
    --clr-background: var(--clr-graphite);
		--clr-background-alt: var(--clr-charcoal);
    --clr-footer: var(--clr-fog);

    /* Navigation */
		--clr-nav: rgba(27, 27, 27, 0.7);
		--clr-nav-border: var(--clr-graphite-alt);
		--clr-nav-shadow: rgba(21, 21, 21, 0.5);
		--clr-drawer: rgba(27, 27, 27);
		--clr-vibrant-border-primary: rgba(150, 197, 252, 0.15);
		--clr-vibrant-border-secondary: rgba(252, 196, 159, 0.15);
		--clr-vibrant-border-tertiary: rgba(152, 255, 197, 0.15);
    --clr-drawer-border-primary: rgba(187, 219, 255, 0.1);
    --clr-drawer-border-secondary: rgba(255, 209, 179, 0.1);
    --clr-drawer-border-tertiary: rgba(180, 255, 213, 0.1);
    --clr-drawer-transparent: rgba(27, 27, 27, 0.8);
		--clr-drawer-underline-primary: rgba(187, 219, 255, 0.2);
  	--clr-drawer-underline-secondary: rgba(180, 255, 213, 0.2);

    /* Card */
    --clr-card-background: var(--clr-graphite-alt);
    --clr-borders-primary: rgb(148, 195, 249, 0.7);
    --clr-borders-secondary: rgb(248, 165, 105, 0.7);
    --clr-borders-tertiary: rgb(127, 222, 208, 0.7);
    --clr-borders-quaternary: rgb(234, 208, 125, 0.7);

    /* CTA */
    --clr-link: #3373ff;

    /* Text */
    --clr-text: var(--clr-cloud);
    --clr-text-alt: var(--clr-mist);
    --clr-text-neg: var(--clr-charcoal);
    --clr-cta-text: var(--clr-cloud);
    --clr-cta-text-alt: var(--clr-charcoal);
	}
}

@media (max-width: 80rem) {
	:root {
		--header-pady: 1.75rem;
		--container-pady: 2rem;
		--container-padx: 3.25rem;
		--container-padb: 2rem;
		--container-space-between: 3.5rem;
		--banner-img-min-width: 22rem;
		--banner-img-max-width: 25rem;
		--text-hero-welcome: 1.625rem;
		--text-hero-slogan: 2.75rem;
		--text-hero-description: 1.625rem;
		--text-title: 2.5rem;
		--text-title-md: 2.125rem;
		--text-subtitle: 1.5rem;
		--text-title-sm: 1.375rem;
	}
}

@media (max-width: 64rem) {
	:root {
		--container-padx: 2.5rem;
		--container-padb: 1.5rem;
		--container-space-between: 2.5rem;
		--content-gap: 2rem;
		--banner-img-min-width: 20rem;
		--banner-img-max-width: 25rem;
		--card-padding: 1.5rem 1rem;
		--text-hero-welcome: 1.563rem;
		--text-hero-slogan: 2.5rem;
		--text-hero-description: 1.563rem;
		--text-title: 2.375rem;
		--text-title-md: 2rem;
		--text-subtitle: 1.25rem;
		--text-subtitle-height: 1.375;
		--text-gap: 1.25rem;
		--text-gap-short: 1.125rem;
		--text-gap-min: 0.5rem;
	}
}

@media (max-width: 48rem) {
	:root {
		--card-img-height: 11rem;
		--banner-img-min-width: 18rem;
		--banner-img-max-width: 22rem;
		--text-hero-welcome: 1.375rem;
		--text-hero-slogan:   1.875rem;
		--text-hero-description: 1.313rem;
		--text-title: 2.125rem;
		--text-title-md: 1.875rem;
		--text-title-xs: 1.125rem;
	}
}

@media (max-width: 39.375rem) {
	:root {
		--header-pady: 1.5rem;
		--container-pady: 1.5rem;
		--container-padx: 2rem;
		--card-padding: 1rem;
	}
}

@media (max-width: 30rem) {
	:root {
		--content-gap: 1.5rem;
		--card-img-height: 10rem;
		--banner-img-min-width: 16rem;
		--banner-img-max-width: 20rem;
		--text-hero-welcome: 1.125rem;
		--text-hero-slogan: 1.625rem;
		--text-hero-description: 1.125rem;
		--text-title: 1.875rem;
		--text-title-md: 1.625rem;
		--text-subtitle: 1.063rem;
		--text-gap: 1rem;
	}
}

html {
	font-family: var(--font-outfit);
	background: var(--clr-background);
}

body {
	position: relative;
	box-sizing: border-box;
	line-height: 1;
	border: 0;
	margin: 0;
}

body:has(dialog[open]) {
	overflow: auto !important;
}

.header_styles {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--header-pady) var(--container-padx);
	padding-bottom: var(--container-padb);
	
	span {
		height: 4.5rem;
	}
}

.header_styles_fixed {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	padding: var(--header-pady) var(--container-padx);
	padding-bottom: var(--container-padb);
	z-index: 15;
}

.main_styles {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	padding: var(--container-pady) var(--container-padx);
  padding-top: calc(var(--container-pady) * 0.5);
	row-gap: var(--container-space-between);

	.page_section {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-width: 20rem;
		max-width: 83.5rem;
		gap: var(--container-gap);

		.section_header {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 90%;
			color: var(--clr-text);
			text-align: center;
			gap: var(--text-gap-short);
      margin-top: 1rem;
      margin-bottom: 1rem;

			&.no_mt {
				margin-top: 0;
			}

			h2 {
				font-size: var(--text-title);
			}
	
			h3 {
				font-size: var(--text-subtitle);
				color: var(--clr-text-alt);
				line-height: var(--text-subtitle-height);
			}
		}
	}
}

@media (max-width: 48rem) {
	.main_styles {
		.page_section {
			.section_header {
				margin-bottom: 0;
			}
		}
	}
}

.footer_styles {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: var(--clr-footer);
	color: var(--clr-text-neg);
	padding: var(--container-pady) var(--container-padx);
	box-shadow: 0 100vh 0 100vh var(--clr-footer);
}

.hero_gradient {
	position: absolute;
	display: flex;
	width: 100%;
	height: 100vh;
	background-color: var(--clr-background);
  background-image:
		radial-gradient(circle at 5% 10%, hsla(210, 96%, 48%, 0.15) 3%, transparent 40%), /* top-left */
		radial-gradient(circle at 40% 45%, hsla(204, 70%, 55%, 0.1) 3%, transparent 40%), /* middle-left */
		radial-gradient(circle at 80% 40%, hsla(159, 76%, 39%, 0.1) 3%, transparent 30%), /* middle-right */
		radial-gradient(circle at 70% -10%, hsla(170, 80%, 48%, 0.15) 3%, transparent 50%); /* top-right */
	z-index: -10;
}

@media (max-width: 64rem) {
	.hero_gradient {
		background-image:
			radial-gradient(circle at 10% 20%, hsla(210.4411764705882, 96%, 48%, 0.15) 3%, transparent 40%), /* top-left */
			radial-gradient(circle at 40% 35%, hsla(186.61764705882354, 70%, 55%, 0.05) 3%, transparent 30%), /* middle-left */
			radial-gradient(circle at 80% 63%, hsla(159, 76%, 39%, 0.05) 3%, transparent 40%), /* middle-right */
			radial-gradient(circle at 70% 45%, hsla(170, 80%, 48%, 0.1) 3%, transparent 40%); /* top-right */
	}
}

/* FONT */

.font_outfit {
	font-family: var(--font-outfit) !important;
}

.text_light {
  font-weight: var(--font-light) !important;
}

.text_reg {
  font-weight: var(--font-reg) !important;
}

.text_med {
  font-weight: var(--font-med) !important;
}

.text_semi {
  font-weight: var(--font-semi) !important;
}

.text_bold {
  font-weight: var(--font-bold) !important;
}

.text_gradient {
	background: -webkit-linear-gradient(0.125turn, var(--clr-primary), var(--clr-secondary));
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text_highlight {
	color: var(--clr-emerald);

  &.blue {
    color: var(--clr-primary);
  }

  &.orange {
    color: var(--clr-orange);
  }

  &.green {
    color: var(--clr-emerald);
  }
}

/* SHORT */

.no_scroll {
	overflow: hidden;
}

.hidden {
	display: none;
}

.box_shadow {
	-webkit-box-shadow: 0.063rem 0.125rem 0.5rem 0.063rem var(--clr-shadow);
  -moz-box-shadow: 0.063rem 0.125rem 0.5rem 0.063rem var(--clr-shadow);
  box-shadow: 0.063rem 0.125rem 0.5rem 0.063rem var(--clr-shadow);
}

/* CUSTOM */

.custom_cta {
	position: relative !important;
	width: auto;
	min-width: fit-content;
	font-size: 1.375rem;
	text-align: center;
  background-color: var(--clr-primary);
  border: var(--bw-regular) solid var(--clr-sky);
	color: var(--clr-cta-text);
	border-radius: var(--br-curved-xs);
	padding: 0.5rem 3rem;
	text-decoration: none;
  transition: background-color 0.2s ease, color 0.15s ease;

	&:hover {	
    background-color: var(--clr-sky);
		cursor: pointer;
    transition: background-color 0.2s ease, color 0.15s ease;

		&::after {
			opacity: 1;
		}
	}

	&.blue {
		background-color: var(--clr-primary);
    border: var(--bw-regular) solid var(--clr-sky);
    
    &:hover {
      background-color: var(--clr-sky);
    }
	}

	&.orange {
		background-color: var(--clr-orange);
    border: var(--bw-regular) solid var(--clr-secondary-alt);

    &:hover {
      background-color: var(--clr-secondary-alt);
    }
	}

	&.green {
		background-color: var(--clr-emerald);
    border: var(--bw-regular) solid var(--clr-emerald-alt);

    &:hover {
      background-color: var(--clr-emerald-alt);
    }
	}

	&.outline {
		background-color: transparent;
    border: var(--bw-regular) solid var(--clr-text);
		color: var(--clr-text);

    &:hover {
      background-color: var(--clr-text);
			color: var(--clr-text-neg);
    }
	}

	&.custom_cta_sm {
			font-size: 1.188rem;
			padding: 0.75rem 1.5rem;
      border-width: 0.188rem;
	}

	&.custom_cta_xs {
			font-size: 1.125rem;
			padding: 0.375rem 0.625rem;
      border-width: 0.188rem;
	}
}

@media (max-width: 64rem) {
	.custom_cta {
		font-size: 1.25rem;
	}
}

@media (max-width: 48rem) {
	.custom_cta {
    font-size: 1.125rem;
    padding: 0.5rem 2rem;

		&:hover {
			&::after {
				opacity: 1;
			}
		}

		&::after {
			opacity: 1;
		}

		&.custom_cta_sm {
			font-size: 1.125rem;
			padding: 0.75rem 1.25rem;
			padding-bottom: 0.875rem;
		}

		&.custom_cta_xs {
			font-size: 1rem;
		}
	}
}

@media (max-width: 30rem) {
	.custom_cta {
		padding: 0.5rem 1.5rem;

		&.custom_cta_sm {
			font-size: 1rem;
			padding: 0.875rem 1.125rem;
		}

		&.custom_cta_xs {
			font-size: 0.875rem;
		}
	}
}

.snack_bar {
	position: fixed;
	top: 3.25rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 18rem;
	max-width: 18rem;
	background-color: var(--clr-primary);
	font-family: var(--font-outfit);
	font-weight: 500;
	color: var(--clr-text-alt);
	padding: 0.75rem 1.063rem;
	border-radius: 0.75rem;
	box-shadow: 0.125rem 0.125rem 0.125rem 0.063rem var(--clr-secondary);
	opacity: 0;
	z-index: -1;

	svg {
		width: 1.875rem;
		height: 1.25rem;
		fill: #fff;
  }
	  
	.snack_text {
		font-size: 1rem;
    line-height: 1.25;
	}

	&.show {
		opacity: 1;
		z-index: 1000;
		transition: opacity 0.3s ease-in-out;
	}
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-58.5%);
    }
}