@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

:root {
	--border-radius: 0.5em;
}

main h1 {
    background: #fff;
    border: 3px solid var(--light-blue-grey-2);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.20);
	font-size: clamp(1.563em, 1.426em + 0.68vw, 1.938em) /* 25-31px @ 320-1200px */;
	font-weight: 900;
    max-width: 33.1875rem;
    padding: 1.25em;	
}

main h2 {
	font-size: clamp(1.563em, 1.313em + 1.25vw, 2.25em) /* 25-36px @ 320-1200px */;
	font-weight: 900;
	margin: 0;
}

main h2:after {
    background: var(--yellow);
    border-radius: 3px;
    content: "";
    display: block;
    height: 3px;
    margin: 0.65em 0;
    width: 3em;
}

main h3 {
	font-size: 1.375em;
}

b {
	font-weight: 700;
}

main {
	background: url(/images/home/bg-patttern.jpg) repeat top center / 252px auto;
	color: #000;
}

.dark-bg {
	background: var(--dark-blue);
	color:#fff;
}

.light-bg {
	background: var(--light-blue-grey-2);
}

.video-wrapper {
	border-radius: var(--border-radius);
	overflow: hidden;
	margin: 0 0 3em;
}

.video-wrapper .videoContainer {
	margin: 0;
}



/*  Hero  */
#hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

#hero .wrap {
	z-index: 4;
}

#hero .background,
#hero .background img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#hero .background:before {
    z-index: 3;
}

#hero .background:after {
    z-index: 2;
}

#hero .background img {
    z-index: 1;
}


/*  Intro  */
#intro .intro {
    font-size: clamp(1.375em, 1.284em + 0.45vw, 1.625em) /* 22-26px @ 320-1200px */;
	font-weight: 700;
}

#intro img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 37.9375em;
    width: 100%;
}


/*  Why Lifeway  */
#why-lifeway h2 {
	color: #fff;
}

#why-lifeway ul {
	display: flex;
	justify-content: space-between;
	margin: 3em 0 0;
}

#why-lifeway li {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
	font-weight: 600;
	text-align: center;
	line-height: 1.25em;
	max-width: 11.5em;
	padding: 0;
}

#why-lifeway li:before {
    display: none;
}

#why-lifeway .icon {
    align-items: center;
    aspect-ratio: 1/1;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--light-blue-grey-2);
    display: flex;
    justify-content: center;
    width: 100%;
}

#why-lifeway .icon:before {
    content: "";
    display: block;
    height: 45%;
    width: 45%;
}

#why-lifeway .icon.experts:before {background: url(/images/icons/why-lifeway-experts.svg) no-repeat center / contain}
#why-lifeway .icon.installation:before {background: url(/images/icons/why-lifeway-installation.svg) no-repeat center / contain}
#why-lifeway .icon.pricing:before {background: url(/images/icons/why-lifeway-pricing.svg) no-repeat center / contain}
#why-lifeway .icon.reviews:before {background: url(/images/icons/why-lifeway-reviews.svg) no-repeat center / contain}
#why-lifeway .icon.service:before {background: url(/images/icons/why-lifeway-service.svg) no-repeat center / contain}
#why-lifeway .icon.usa:before {background: url(/images/icons/why-lifeway-usa.svg) no-repeat center / contain}


/*  Pricing  */
#pricing .finance-options {
	display: flex;
	gap: 1em;
	margin: 0 0 2em;
}

#pricing .finance-options table {
	background: #fff;
	border: 1px solid var(--light-blue-grey);
}

#pricing .finance-options :is(th, td) {
	padding: 0.5em 1em;
}

#pricing .finance-options th {
	background: var(--dark-blue);
	color:#fff;
}

#pricing .finance-options td {
	border-top: 1px solid var(--light-blue-grey);
}


/*  Reviews  */
#reviews .awards {
	display: flex;
	justify-content: space-evenly;
}

#reviews .awards img {
	max-width: 100%;
	width: 100%;
}


/*  Contact  */
#contact .locations {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	gap: 2em;
}


/*  Form  */
#form form {
    align-items: center;
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 0 0 3px var(--light-blue-grey);
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1.5em 1em;
}

#form form > .title span {
	display: block;
	text-align: center;
}

#form form .title span:first-child {
	color: var(--dark-blue);
    font-size: 1.375em;
	font-weight: 700;	
}

#form form .title a {
	color: #000;
	text-decoration: underline;
}

#form form .form-flex > * {
	padding: 0;
	margin: 0 0 .5em
}

#form form .form-flex label {
	font-size: 0.875em;
	line-height: 1.35em;
}

#form form fieldset .form-flex {
	clear: both;
	padding: 0.5em 0;
}

#form form textarea {
	min-height: 5em;
}

#form form .actions {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 0.5em;
}

#form form .next:after {
    background: var(--yellow-arrow);
    content: "";
    margin-left: 0.3em;
    padding-left: 0.875rem;
}

#form form .submit {
    display: inline-flex;
    gap: 0.25em;
    justify-content: center;
}

#form form .submit:before {
    background: var(--yellow);
    content: "";
    mask-image: url(/images/icons/misc/green-check.svg);
	mask-repeat: no-repeat;
	mask-size: 0.875em auto;
	mask-position: center;
	width: 1em;
	height: 1em;
}

#form form .prev {
    background: none;
	color: #666;
	font-size: 0.875em;
	text-decoration: underline;
	font-weight: 400;
}





/*=============================================================================*/

/*   Landing Page: Sticky Form   */

/*=============================================================================*/

.sticky-form .page-content > div {
	padding: clamp(3em, 2.386em + 3.07vw, 4.688em) /* 48-75px @ 320-1200px */ 1.5em;
	position: relative;
}

.sticky-form #why-lifeway ul {
	flex-wrap: wrap;
}


/*=============================================================================*/

/*   Landing Page: Full-Width Form   */

/*=============================================================================*/

main > div:not(.page-container, .wrap, .sticky-cta) {
	padding: clamp(3em, 2.386em + 3.07vw, 4.688em) /* 48-75px @ 320-1200px */ 1.5em;
}