/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 * hap.css
 * =========================================================================
 *
 * Table of Contents
 * -----------------
 *
 * + Hero
 * + Savings/Financial
 * + Quote Block
 * + Final CTA
 * + 
 * + Shame (Should always be the last item in stylesheet)
 *
 * Read more:
 * - http://www.sitepoint.com/architecture-sass-project/
 * - https://css-tricks.com/sass-style-guide/
 *
 * @TODO: Update TOC as necessary.
 *
 * @BUG:
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*-General Styles----------------------------------------------------------*/
:root {
	--purple-light: #C04CFF;
	--purple-dark:	#310E6E;
	--purple-hqy:	#4F2984;
	--primary-black: #310E6E;
}
body {
	background: radial-gradient(circle,rgba(68, 18, 158, 0.13) 0%, rgba(255, 255, 255, 1) 100%);
}
/*-Desktop----------------------------*/
@media (min-width: 768px) {
	h2 { font-size: 2rem; }
}
@media (min-width: 992px) {
	section { padding: 6.25rem; }
}
@media (min-width: 1200px) {
	h2 { font-size: 2.875rem; }
}
/*-Mobile----------------------------*/
@media (max-width: 575px) {
	.container { padding: 0 1.5rem; }
	.gradient-body {
		background: RGBA(68, 18, 158, 0.13);
		background: radial-gradient(circle,rgba(68, 18, 158, 0.13) 0%, rgba(255, 255, 255, 1) 100%);
		background-size: 200% 300%;
	}
}
/*----------------------------------------------------------General Styles-*/

/*-Nav---------------------------------------------------------------------*/
.navbar { background: linear-gradient(284deg, rgba(57, 67, 134, 0.12) -7.81%, rgba(255, 255, 255, 0.42) 81.31%); }
.navbar-logo {
	width: 154px;
	height: 26px;
}

.navbar .btn-purple { display: none; }
/*-Desktop----------------------------*/
@media (min-width: 576px) {
	.navbar .btn-purple { display: inherit; }
}
/*-Mobile----------------------------*/
@media (max-width: 991px) {
	.navbar { background: linear-gradient(284deg, rgba(57, 67, 134, 0.12) -7.81%, rgba(255, 255, 255, 0.42) 77.33%); }	
}
@media (max-width: 767px) {
	.navbar {
		background: #fff;
		background: linear-gradient(76deg, rgba(255, 255, 255, 0.42) -7.81%, rgba(57, 67, 134, 0.12) 181.31%);
	}
}
/*---------------------------------------------------------------------Nav-*/

/*-Hero--------------------------------------------------------------------*/
#hero { background: linear-gradient(284deg, rgba(57, 67, 134, 0.12) -7.81%, rgba(255, 255, 255, 0.42) 81.31%); }
strong.eyebrow {
	display: block;
	font-weight: 700;
	color: var(--purple-hqy);
}
.eyebrow.blip {
	border-left: solid 0.5rem var(--purple-light);
	padding-left: 0.9rem;
}
#hero h1 {
	color: var(--purple-dark);
	margin: 1.25rem 0;
}
#hero .btn.cta { margin-top: 1.5rem; }
/*-Mobile----------------------------*/
@media (max-width: 767px) {
	img.whitepaper {
		margin-top: 3rem;
		max-width: 300px;
	}
}
/*--------------------------------------------------------------------Hero-*/

/*-Strategies--------------------------------------------------------------*/
#benefits-strategy { background-color: #fff; }
#benefits-strategy h2 { color: var(--purple-dark); }
#benefits-strategy a {
	color: var(--purple-dark);
	text-decoration: none;
}
#benefits-strategy a:hover {
	color: var(--purple-light);
	text-decoration: none;
}/*-Desktop----------------------------*/
@media (min-width: 768px) and (max-width: 1199px) {
	#benefits-strategy .img-container {
		border-radius: 1rem;
		overflow: hidden;
		min-height: 100%;
		background-image: url('../img/window-guy.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: left top;
	}
	#benefits-strategy .img-container img { display: none; }
}
@media (min-width: 1200px) and (max-width: 1560px) {
	#benefits-strategy h2 { font-size: 2.25rem; }
}
/*-Mobile-----------------------------*/
@media screen and (max-width: 767px) {
	#benefits-strategy .img-container { margin-bottom: 2rem; }
}
/*--------------------------------------------------------------Strategies-*/

/*-Stats-------------------------------------------------------------------*/
#stats {
	background-color: var(--purple-hqy);
	color: #fff;
}
#stats .beyond-data {
	border-top: solid 0.5rem var(--purple-light);
	padding-top: 2rem;
}

#stats .pod {
	background: #fff;
	color: #000;
	border-radius: 1rem;
}
#stats .pod:nth-child(2) { margin: 1rem auto; }
#stats .pod h2 {
	color: var(--purple-hqy);
	font-size: 2.875rem;
}
#stats .pod p { margin-bottom: 0; }
span.purple-icon {
	background-color: var(--purple-light);
	display: block;
	float: left;
	border-radius: 6px;
	margin-right: 0.5rem;
	text-align: center;
	width: 3rem;
	height: 3rem;
}
span.purple-icon svg {
	max-width: 1rem;
	max-height: 1rem;
	margin: auto auto 10px;
}

/*-Desktop----------------------------*/
@media (min-width: 768px) {
	#stats {
		display: flex;
		flex-flow: row wrap;
	}
	#stats h2 { margin-bottom: 1rem; }
	#stats .rising-costs {
		order: 1;
		margin-right: 10%;
	}
	#stats .pods {
		order: 2;
		float: right;
	}
	#stats .pod { padding: 2rem; }
	#stats .beyond-data {
		order: 3;
		margin-top: -36%;
	}
}
@media (min-width: 992px) {
	#stats .rising-costs,
	#stats .beyond-data {
		max-width: 40%;
	}
}
@media (min-width: 1080px) {
	#stats .beyond-data { margin-top: -27%; }
}
@media (min-width: 1200px) {
	#stats .beyond-data { margin-top: -18%; }
}
/*-Mobile-----------------------------*/
@media (max-width: 991px) {
	#stats {
		display: flex;
		flex-flow: column nowrap;
		gap: 3rem;
	}
	#stats .rising-costs { margin: 0 auto; }
	#stats .pod { padding: 1rem; }
}
@media screen and (max-width: 767px) {
	#stats .pods { margin: 10% auto; }
}
/*-------------------------------------------------------------------Stats-*/

/*-Expertise---------------------------------------------------------------*/
.bg-gradient-dk {
	background: #34F8FF;
	background: linear-gradient(to bottom, #002 20%,rgba(49,14,110,0.5) 70%) no-repeat top left,
    	        linear-gradient(to right,  rgba(52, 248, 255, 1) 0%, rgba(192, 76, 255, 1) 70%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: left center;
/*
	background-image: url("../img/gradient-dk.png"), linear-gradient(72deg,rgba(52, 248, 255, 1) 0%, rgba(109, 92, 235, 1) 37%, rgba(192, 76, 255, 1) 70%);
*/
}
#expertise .bg-gradient-dk {
	border-radius: 20px;
	padding: 3rem 2.25rem;
}
#expertise .text {
	color: #fff;
	display: flex;
	flex-flow: row wrap;
	gap: 28px;
	align-content: center;
}
/*-Desktop----------------------------*/
@media (min-width: 768px) {
	#expertise {
		display: flex;
		flex-flow: row nowrap;
	}
	#expertise .img-container { order: 2; }
	#expertise .text { order: 1; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	#expertise .img-container {
		border-radius: 1rem;
		overflow: hidden;
		min-height: 100%;
		background-image: url('../img/gray-lady.png');
		background-size: cover;
		background-position: center;
	}
	#expertise .img-container img { display: none; }
}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}
/*-Mobile-----------------------------*/
@media (max-width: 767px) {
	#expertise .bg-gradient-dk { padding: 1.75rem 0.75rem;	 }
	#expertise .img-container { margin-bottom: 2rem; }
}
/*---------------------------------------------------------------Expertise-*/

/*-Disclaimer--------------------------------------------------------------*/
#disclaimer {
	background: #F1F3F4 0%;
	color: #4f4f4f;
	font-size: 12px;
}
/*-Desktop----------------------------*/
@media (min-width: 992px) {
	section#disclaimer { padding: 3rem; }
	#disclaimer p { margin: 0; }
}
/*--------------------------------------------------------------Disclaimer-*/


/*-Shame-------------------------------------------------------------------*/
/*-------------------------------------------------------------------Shame-*/