/* GLOBAL */

		/* Regular */
		@font-face {
			font-family: "Alliance No.2";
			src: url("../fonts/AllianceNo2-Regular.ttf") format("truetype");
			font-weight: 400;
			font-style: normal;
		}

		/* Regular Italic */
		@font-face {
			font-family: "Alliance No.2";
			src: url("../fonts/AllianceNo2-RegularItalic.ttf") format("truetype");
			font-weight: 400;
			font-style: italic;
		}

		/* Medium */
		@font-face {
			font-family: "Alliance No.2";
			src: url("../fonts/AllianceNo2-Medium.ttf") format("truetype");
			font-weight: 500;
			font-style: normal;
		}

		/* Medium Italic */
		@font-face {
			font-family: "Alliance No.2";
			src: url("../fonts/AllianceNo2-MediumItalic.ttf") format("truetype");
			font-weight: 500;
			font-style: italic;
		}

		/* Bold */
		@font-face {
			font-family: "Alliance No.2";
			src: url("../fonts/AllianceNo2-Bold.ttf") format("truetype"),
				url("../fonts/Alliance No.2 Bold.otf") format("opentype");
			font-weight: 700;
			font-style: normal;
		}

		/* Bold Italic */
		@font-face {
			font-family: "Alliance No.2";
			src: url("../fonts/AllianceNo2-BoldItalic.ttf") format("truetype");
			font-weight: 700;
			font-style: italic;
		}

		body {
			margin: auto;
			width: 100%;
			font-size: 1.75rem;
			font-family: "Alliance No.2", Helvetica, sans-serif;
			background-color: #F5F3F1;
		}

		html {
			font-family: "Alliance No.2", sans-serif;
			font-size: 16px; /* base size */
		}

		h1, h2, h3, h4, h5, h6, p, li {
			font-family: "Alliance No.2";
		}

		h1 {
			font-size: 3.75rem;
			line-height: 1.3em;
		}

		h2 {
			font-size: 2.25rem;
			line-height: 3.125rem;
			font-weight: 700;
			margin-top: 1.25rem;
			margin-bottom: 1.25rem;
		}

		h2.big {
			font-size: 3.125rem;
			line-height: 122%;
			font-weight: 700;
			margin-top: 1.25rem;
			margin-bottom: 1.25rem;
		}

		h2.section-intro {
			font-size: 2.5625rem;
			line-height: 122%;
			font-weight: 700;
			margin-top: 1.25rem;
			margin-bottom: 1.25rem;
		}
		
		h2.huge {
			font-size: 7.7rem;
			margin-bottom: 3.3125rem;
		}

		h4 {
			font-size: 1.25rem;
			line-height: 1.3em;
			font-weight: 600;
			margin-bottom: 1.25rem;
		}

		h5 {
			font-size: 1.25rem;
			line-height: 1.3em;
			font-weight: 600;
			margin-top: 0px;
			margin-bottom: 3.75rem;
			text-transform: uppercase;
		}

		h5.section-intro {
			margin-bottom: 1.25rem;
		}

		h3 {
			font-size: 1.4375rem;
			line-height: 1.3em;
			font-weight: 600;
			margin-bottom: 1.25rem;
		}

		p {
			font-size: 19px;
			line-height: 1.55em;
			margin-top: 0px;
			font-weight: 300;
		}

		p.big {
			font-size: 1.1875rem;
			line-height: 1.9em;
			margin-top: 0px;
			font-weight: 300;
		}

		a.white {
			color: white;
		}

		a.white:hover {
			color: orange;
		}

		.btn {
			padding: 0.777rem;
			font-size: 1rem;
			color: black;
			border: 2px solid black;
			border-radius: 11px;
			font-weight: 500;
			text-decoration: none;
			margin: 0.5rem;
		}
		.btn:hover {
			color: skyblue;
			background-color: #000;
			text-decoration: underline;
		}

		.padding {
		 	padding: 0.625rem;
		}

		.big-pad {
		 	padding: 3.75rem;
		}

		.marg {
			margin: 1.25rem;
		}

		.shad {
			box-shadow: #00000040 0px 4px 3px 0px;
			border-radius: 0.6875rem;
		}

		.t-l {
			text-align: left;
		}

		.t-c {
			text-align: center;
		}

		.white {
			background-color: #FFFFFF;
		}

		.dark-white {
			background-color: #F4F4F4;
		}

		.dark-white-2 {
			background-color: #FCFCFC;
		}

		.grey {
			background-color: #1a1a1a;
		}

		.purp-grad {
			background-image: linear-gradient(45deg, #8E8DC4,#EDB0C3);
		}

		.orange-grad {
			background-image: linear-gradient(0deg, #F58625,#FFE7CA);
		}

		.grey-f {
			color: #868686;
		}

		.steel {
        	background-color: #212728;
    	}




		/* FLEX */

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

		.flex-box-rev {
			display: flex;
			flex-direction: row-reverse;
		}

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

		.fl-80 {
			display: flex;
			flex-direction: column;
			flex-basis: 80%;
		}

		.fl-75 {
			display: flex;
			flex-direction: column;
			flex-basis: 75%;
		}

		.fl-50 {
			display: flex;
			flex-direction: column;
			flex-basis: 50%;
		}

		.fl-60 {
			display: flex;
			flex-direction: column;
			flex: 1 1 60%;
			min-width: 0;
		}

		.fl-40 {
			display: flex;
			flex-direction: column;
			flex: 1 1 40%;
			min-width: 0;
		}

		.fl-25 {
			display: flex;
			flex-direction: column;
			flex-basis: 25%;
		}

		.fl-20 {
			display: flex;
			flex-direction: column;
			flex-basis: 20%;
		}

		.fl-33 {
			display: flex;
			flex-direction: column;
			flex-basis: 33.33%;
		}

		.j-c {
			justify-content: center;
		}

		.sp-b {
			justify-content: space-between;
		}

		.j-fl-st {
			justify-content: flex-start;
		}

		.al-c {
			align-items: center;
		}

		.fl-wr {
			flex-wrap: wrap;
		}


		/* CONTAINERS */

		.container {
		 	max-width: 100vw;
		 	width: 100%;
		 	margin: 0rem 1rem;
		}

		.container-2 {
		 	max-width: 1220px;
		 	width: 100%;
		 	padding: 1.875rem;
		}

		.h-cont {
			max-width: 1440px;
			min-height: 752px;
			width: 100%;
		}

		.w-cont {
			max-width: 1240px;
			width: 100%;
			margin: auto;
		}

		.big-cont {
			max-width: 1960px;
			width: 100%;
			margin: auto;
		}

		.col-l {
			padding-right: 50px;
		}

		.col-r {
			padding: 3.125rem 0px 3.125rem 3.125rem;
			margin-top: 1.25rem;
		}

		.stat {
			margin: 2.0625rem 2.0625rem 6.1875rem 2.0625rem;
		}

		.about-photo {
			padding: 4.1875rem;
		}


		/* NAV */

		.header {
			background: rgba(255, 255, 255, 0.8);
			backdrop-filter: blur(8px);
			box-shadow: 0 2px 10px rgba(0,0,0,0.1);
			position: sticky;
			top: 0;
			z-index: 1000;
			transition: transform 0.222s ease;
		}

		.header.hidden {
			transform: translateY(-100%);
		}

		#top-nav {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: auto;
		}

		#navbar {
		 	background-color: #222;
		 	transition: top 0.3s;
		 	display: flex;
		 	flex-direction: row;
			border-radius: 11px;
			box-shadow: #00000040 0px 2px 2px 0px;
			width: 100%;
		}

		#navbar a {
		 	text-align: center;
		 	padding: 1.25rem 1.625rem;
		 	text-decoration: none;
		 	color: white;
			align-items: center;
			line-height: 1rem;
			justify-content: center;
			box-sizing: border-box;
			font-size: 1rem;
			line-height: 1.5rem;
			justify-content: space-around;
		}

		 #navbar a:hover {
		 	background-color: skyblue;
		 	color: black;
		 	text-decoration: underline;
			border-radius: 7px;
		}

		 #navbar a.active {
		 	background-color: #5CD5FB;
		 	color: black;
		}

		#navbar > a > svg {
			display: block;
		}

		.home-logo {
			background-color: #222;
			padding: 0.888rem;
			border-radius: 5rem 5rem 0rem 5rem;
			display: flex;
			box-shadow: #00000040 0px 2px 2px 0px;
		}

		.home-logo:hover {
			background-color: skyblue
		}


		/* HOME */

		#intro {
		 	background-color: #ffffff;
		}

		.intro-inner {
			padding: 60px 20px 60px 20px;
		}

		.scroll-box {
			scroll-snap-align: center;
			display: flex;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
			scrollbar-width: none; /* Firefox */
			-ms-overflow-style: none; /* IE + Edge Legacy */
			position: relative;

		}

		.scroll-box::-webkit-scrollbar {
			display: none; /* Chrome, Safari, Opera */
		}

		.card {
		 	margin: 1vw;
		 	max-width: 30.5vw;
			scroll-snap-align: center;
  			scroll-snap-stop: always;
  			flex: 0 0 auto;
		}

		.proj-buttons-cont {
			margin: 1rem 1rem -1.5rem 2rem;
		}

		:target {
			scroll-margin-top: 80px; /* match your header height */
		}

		.card > a > img {
		 	width: 31vw;
		}

		.card img {
		 	box-shadow: #00000040 0px 4px 3px;
		 	border-radius: 10px;
		}

		.card > a > h3 {
			font-family: "Alliance No.2";
			color: black;
			font-size: 1.444rem;
			margin-bottom: 0.125rem;
		}

		.card > h3 {
			font-size: 1.444rem;
			margin-bottom: 0.125rem;
		}

		.card > p {
			color: black;
			font-size: 1rem;
			line-height: 1.5rem;
			margin-top: 1rem;
			font-weight: 400;
		}

		.card > a {
			text-decoration: none;
			color: black;
		}

		.card > a:hover {
			text-decoration: underline;
		}


		/* PROJECT */

		#intro {
			min-height: 110vh;
		}

		#about-intro {
			padding: 3.75rem 0px 0px 0px;
			color: white;
			background-color: #0a0a0a;
		}

		#about-photos {
			background-color: #0a0a0a;
		}

		#pain-points {
			min-height: 90vh;
		}

		#artifacts {
			min-height: 90vh;
		}

		.sec-pad {
			padding: 5rem 0px;
		}

		.white-f {
			color: white;
		}

		#outcomes {
			min-height: 90vh;
			background-color: #0a0a0a;
		}

		#results {
			background-color: #111;
		}

		#next {
			min-height: 90vh;
			padding: 2.5rem 0px;
		}

		.blue-call {
			padding: 2.5rem 3.75rem;
			border-radius: 0.625rem;
			background-color: #c5e7ff;
			margin-bottom: 1.25rem;
		}

		footer {
			background-color: #000;
			padding: 4.777rem 10px;
			color: white;
		}

		.foot-menu > a {
			font-size: 1.111rem;
			color: white;
			margin-bottom: 1.222rem;
		}

		.foot-menu > a:hover {
			color: skyblue;
		}

		/* ADDITIONAL CSS */

		@media only screen and (max-width: 1400px) {
		
		.about-photo {
			margin: 1rem;
			padding: 0px;
		}

		}

		@media only screen and (max-width: 1000px) {
		
		.flex-box {
			flex-direction: column!important;
		}

		.flex-box-rev {
			flex-direction: column!important;;
		}
		
		.fl-50 {
			flex-basis: 100%!important;
		}

		.fl-60 {
			flex-basis: 100%!important;
		}

		.fl-40 {
			flex-basis: 100%!important;
		}

		.col-l {
			padding: 0px!important;
		}
		
		.col-r {
			padding: 0px!important;
		}

		h5 {
			margin-bottom: 1rem;
		}

		.stat {
			margin: 1.5rem;
		}

		h2.huge {
			font-size: 5.5rem;
			margin-bottom: 1rem;;
		}

		.container, .container-2 {
			padding: 0px;
		}

		.home-logo {
			margin-bottom: 0.8rem;
		}

		.fl-80, .fl-20 {
			width: 100%;
			flex-basis: 100%;
		}

		footer {
			padding: 1rem;
		}

		.card {
			max-width: 100%;
		}

		.card > a > img {
			width: 100%;
		}

		.proj-buttons-cont {
			display: none;
		}


		}

		@media only screen and (max-width: 500px) {

		.container, .container-2 {
			padding: 0px;
			margin: 0px;
		}

		.wrapper {
			width: 100%;
		}

		#navbar > a {
			padding: 1.0rem;
		}

		h1 {
			font-size: 2.5rem;
		}

		h2.huge {
			font-size: 3.888rem;
			margin-bottom: 1rem;
		}

		h2.big {
			font-size: 2rem;
			margin-bottom: 1rem;
		}

		.stat {
			margin: 0.5rem;
		}

		.about-photo {
			padding: 0px;
		}

		.card {
			margin: 10px;
		}

		.head-nav-gl {
			display: none!important;
		}

		}