@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
                            
                    
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#hero-1619 {
padding: var(--sectionPadding);
/* 200px - 300px - leaving extra space for the navigation */
padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
position: relative;
z-index: 1;
}
#hero-1619 .cs-container {
width: 100%;
max-width: 80rem;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* 60px - 180px */
gap: clamp(3.75rem, 13vw, 11.25rem);
}
#hero-1619 .cs-content {
/* set text align to left if content needs to be left aligned */
text-align: left;
width: 100%;
max-width: 48.75rem;
display: flex;
flex-direction: column;
/* centers content horizontally, set to flex-start to left align */
align-items: flex-start;
}
#hero-1619 .cs-topper {
/* 13px - 16px */
font-size: clamp(0.8125rem, 1.5vw, 1rem);
line-height: 1.2em;
font-weight: 700;
letter-spacing: 0.1em;
text-align: center;
text-transform: uppercase;
margin-bottom: 0.25rem;
color: var(--primary);
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
position: relative;
}
#hero-1619 .cs-chevron {
--chevronColor: var(--primary);
width: 3rem;
height: auto;
}
#hero-1619 .cs-title {
/* 39px - 61px */
font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
font-weight: 700;
line-height: 1.2em;
text-align: inherit;
max-width: 100%;
margin: 0 0 2.5rem 0;
color: #fff;
position: relative;
}
#hero-1619 .cs-text {
/* 16px - 20px */
font-size: clamp(1rem, 1.95vw, 1.25rem);
line-height: 1.5em;
text-align: inherit;
width: 100%;
/* 464px - 622px */
max-width: clamp(29rem, 60vw, 38.785rem);
margin: 0 0 2.5rem 0;
color: #fff;
}
#hero-1619 .cs-button-solid {
font-size: 1rem;
/* 46px - 56px */
line-height: clamp(2.875rem, 5.5vw, 3.5rem);
text-decoration: none;
font-weight: 700;
margin: 0;
color: #fff;
padding: 0 1.5rem;
background-color: var(--primary);
display: inline-block;
position: relative;
z-index: 1;
}
#hero-1619 .cs-button-solid:before {
content: '';
position: absolute;
display: block;
height: 100%;
width: 0%;
background: #000;
opacity: 1;
top: 0;
left: 0;
z-index: -1;
transition: width .3s;
}
#hero-1619 .cs-button-solid:hover:before {
width: 100%;
}
#hero-1619 .cs-card-group {
margin: 0;
padding: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
/* 16px - 20px */
gap: clamp(1rem, 2.3vw, 1.25rem);
}
#hero-1619 .cs-item {
width: 100%;
text-align: left;
list-style: none;
margin: 0;
/* 24px - 32px */
padding: clamp(1.5rem, 3vw, 2rem);
background-color: #fff;
box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
/* prevents padding from affecting height and width */
box-sizing: border-box;
grid-column: span 12;
grid-row: span 1;
display: flex;
flex-direction: column;
align-items: flex-start;
//justify-content: center;
position: relative;
z-index: 1;
}
#hero-1619 .cs-icon {
width: 3rem;
height: auto;
margin: 0 0 1.5rem 0;
display: none;
}
#hero-1619 .cs-h3 {
/* 20px - 25px */
font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
line-height: 1.2em;
font-weight: bold;
text-align: inherit;
margin: 0 0 1rem 0;
color: var(--headerColor);
}
#hero-1619 .cs-item-text {
/* 14px - 16px */
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
max-width: 28.125rem;
margin: 0;
padding: 0;
color: var(--bodyTextColor);
}
#hero-1619 .cs-background {
width: 100%;
height: 55%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
#hero-1619 .cs-background:before {
/* Overlay */
content: '';
width: 100%;
height: 100%;
background: #111926;
opacity: .8;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 1;
/* prevents the cursor from interacting with it */
pointer-events: none;
}
#hero-1619 .cs-background img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
/* makes the top of the image start at the top of the parent */
object-position: top;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#hero-1619 {
padding-bottom: 0;
}
#hero-1619 .cs-container {
align-items: flex-start;
}
#hero-1619 .cs-content {
text-align: left;
margin-left: 0;
align-items: flex-start;
}
#hero-1619 .cs-item {
grid-column: span 6;
}
#hero-1619 .cs-background {
height: 87%;
}
#hero-1619 .cs-background:before {
background: linear-gradient(90deg, #111926 21.41%, rgba(17, 25, 38, 0.72) 34.98%, rgba(17, 25, 38, 0) 62.53%);
opacity: 1;
}
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
#hero-1619 .cs-item {
grid-column: span 3;
}
}
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
#hero-1619 .cs-background {
background: url("./win.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* creates the parallax effect */
background-attachment: fixed;
}
#hero-1619 .cs-background img {
display: none;
}
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
body.cs-open {
overflow: hidden;
}
#cs-navigation {
width: 100%;
/* prevents padding and border from affecting height and width */
box-sizing: border-box;
padding: 0.75rem 1rem;
background-color: #fff;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
position: fixed;
z-index: 10000;
}
#cs-navigation:before {
content: "";
width: 100%;
height: 0vh;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
display: block;
position: absolute;
top: 100%;
right: 0;
z-index: -1100;
transition: height 0.5s, opacity 0.5s;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
#cs-navigation.cs-active:before {
height: 150vh;
opacity: 1;
}
#cs-navigation.cs-active .cs-ul-wrapper {
opacity: 1;
transform: scaleY(1);
transition-delay: 0.15s;
}
#cs-navigation.cs-active .cs-li {
opacity: 1;
transform: translateY(0);
}
#cs-navigation .cs-container {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
#cs-navigation .cs-logo {
width: 40%;
max-width: 9.125rem;
height: 100%;
margin: 0 auto 0 0;
/* prevents padding and border from affecting height and width */
box-sizing: border-box;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
#cs-navigation .cs-logo img {
width: 100%;
height: 100%;
/* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
object-fit: contain;
}
#cs-navigation .cs-toggle {
/* 44px - 48px */
width: clamp(2.75rem, 6vw, 3rem);
height: clamp(2.75rem, 6vw, 3rem);
margin: 0 0 0 auto;
background-color: transparent;
border: none;
border-radius: 0.25rem;
display: flex;
justify-content: center;
align-items: center;
}
#cs-navigation .cs-active .cs-line1 {
top: 50%;
transform: translate(-50%, -50%) rotate(225deg);
}
#cs-navigation .cs-active .cs-line2 {
top: 50%;
transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
transform-origin: center;
}
#cs-navigation .cs-active .cs-line3 {
opacity: 0;
bottom: 100%;
}
#cs-navigation .cs-box {
/* 24px - 28px */
width: clamp(1.5rem, 2vw, 1.75rem);
/* 14px - 16px */
height: clamp(0.875rem, 1.5vw, 1rem);
position: relative;
}
#cs-navigation .cs-line {
width: 100%;
height: 2px;
background-color: #1a1a1a;
border-radius: 2px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#cs-navigation .cs-line1 {
top: 0;
transition: transform 0.5s, top 0.3s, left 0.3s;
animation-duration: 0.7s;
animation-timing-function: ease;
animation-direction: normal;
animation-fill-mode: forwards;
transform-origin: center;
}
#cs-navigation .cs-line2 {
top: 50%;
transform: translateX(-50%) translateY(-50%);
transition: top 0.3s, left 0.3s, transform 0.5s;
animation-duration: 0.7s;
animation-timing-function: ease;
animation-direction: normal;
animation-fill-mode: forwards;
}
#cs-navigation .cs-line3 {
bottom: 0;
transition: bottom 0.3s, opacity 0.3s;
}
#cs-navigation .cs-ul-wrapper {
width: 100%;
height: auto;
padding-bottom: 2.4em;
background-color: #fff;
box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: -1;
overflow: hidden;
transform: scaleY(0);
transition: transform 0.4s, opacity 0.3s;
transform-origin: top;
}
#cs-navigation .cs-ul {
width: 100%;
height: auto;
max-height: 65vh;
margin: 0;
padding: 3rem 0 0 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 1.25rem;
overflow: scroll;
}
#cs-navigation .cs-li {
text-align: center;
list-style: none;
width: 100%;
margin-right: 0;
opacity: 0;
/* transition from these values */
transform: translateY(-4.375rem);
transition: transform 0.6s, opacity 0.9s;
}
#cs-navigation .cs-li:nth-of-type(1) {
transition-delay: 0.05s;
}
#cs-navigation .cs-li:nth-of-type(2) {
transition-delay: 0.1s;
}
#cs-navigation .cs-li:nth-of-type(3) {
transition-delay: 0.15s;
}
#cs-navigation .cs-li:nth-of-type(4) {
transition-delay: 0.2s;
}
#cs-navigation .cs-li:nth-of-type(5) {
transition-delay: 0.25s;
}
#cs-navigation .cs-li:nth-of-type(6) {
transition-delay: 0.3s;
}
#cs-navigation .cs-li:nth-of-type(7) {
transition-delay: 0.35s;
}
#cs-navigation .cs-li:nth-of-type(8) {
transition-delay: 0.4s;
}
#cs-navigation .cs-li:nth-of-type(9) {
transition-delay: 0.45s;
}
#cs-navigation .cs-li:nth-of-type(10) {
transition-delay: 0.5s;
}
#cs-navigation .cs-li:nth-of-type(11) {
transition-delay: 0.55s;
}
#cs-navigation .cs-li:nth-of-type(12) {
transition-delay: 0.6s;
}
#cs-navigation .cs-li:nth-of-type(13) {
transition-delay: 0.65s;
}
#cs-navigation .cs-li-link {
/* 16px - 24px */
font-size: clamp(1rem, 2.5vw, 1.5rem);
line-height: 1.2em;
text-decoration: none;
margin: 0;
color: var(--headerColor);
display: inline-block;
position: relative;
}
#cs-navigation .cs-li-link:before {
/* active state underline */
content: "";
width: 100%;
height: 1px;
background: currentColor;
opacity: 1;
display: none;
position: absolute;
bottom: -0.125rem;
left: 0;
}
#cs-navigation .cs-li-link.cs-active:before {
display: block;
}
#cs-navigation .cs-button-solid {
display: none;
}
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#cs-navigation {
width: 100%;
/* prevents padding and border from affecting height and width */
box-sizing: border-box;
padding: 0 1rem;
background-color: #fff;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
position: fixed;
z-index: 10000;
}
#cs-navigation .cs-container {
width: 100%;
max-width: 80rem;
margin: auto;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1.5rem;
}
#cs-navigation .cs-toggle {
display: none;
}
#cs-navigation .cs-logo {
width: 18.4%;
max-width: 21.875rem;
height: 4.0625rem;
/* margin-right auto pushes everything away from it to the right */
margin: 0 auto 0 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
#cs-navigation .cs-logo img {
width: 100%;
height: 100%;
/* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
object-fit: contain;
}
#cs-navigation .cs-ul {
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-start;
align-items: center;
/* 20px - 36px */
gap: clamp(1.25rem, 2.6vw, 2.25rem);
}
#cs-navigation .cs-li {
list-style: none;
padding: 2rem 0;
/* prevent flexbox from squishing it */
flex: none;
}
#cs-navigation .cs-li-link {
/* 14px - 16px */
font-size: clamp(0.875rem, 1vw, 1rem);
line-height: 1.5em;
text-decoration: none;
margin: 0;
color: var(--bodyTextColor);
display: block;
position: relative;
}
#cs-navigation .cs-li-link:hover:before {
width: 100%;
}
#cs-navigation .cs-li-link.cs-active:before {
width: 100%;
}
#cs-navigation .cs-li-link:before {
/* active state underline */
content: "";
width: 0%;
height: 2px;
background: var(--primary);
opacity: 1;
display: block;
position: absolute;
bottom: 0rem;
left: 0;
transition: width 0.3s;
}
#cs-navigation .cs-button-solid {
font-size: 1rem;
font-weight: 700;
/* 46px - 56px */
line-height: clamp(2.875em, 5.5vw, 3.5em);
text-align: center;
text-decoration: none;
min-width: 9.375rem;
margin: 0;
/* prevents padding from adding to the width */
box-sizing: border-box;
padding: 0 1.5rem;
color: #fff;
background-color: var(--primary);
//border-radius: 0.25rem;
display: inline-block;
position: relative;
z-index: 1;
}
#cs-navigation .cs-button-solid:before {
content: "";
width: 0%;
height: 100%;
background: #000;
opacity: 1;
//border-radius: 0.25rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: width 0.3s;
}
#cs-navigation .cs-button-solid:hover:before {
width: 100%;
}
}
                          
 /*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#cs-footer-274 {
padding: var(--sectionPadding);
/* Navigation Links */
}
#cs-footer-274 .cs-container {
width: 100%;
/* reset on tablet */
max-width: 34.375rem;
margin: auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
column-gap: 5.5rem;
row-gap: 2rem;
}
#cs-footer-274 .cs-logo-group {
/* takes up all the space, lets the other ul's wrap below it */
width: 100%;
position: relative;
}
#cs-footer-274 .cs-logo-group {
/* 44px - 52px */
margin-bottom: clamp(2.75rem, 6.8vw, 3.25rem);
}
#cs-footer-274 .cs-logo {
/* 210px - 240px */
width: clamp(13.125rem, 8vw, 15rem);
height: auto;
display: block;
}
#cs-footer-274 .cs-logo-img {
width: 100%;
height: auto;
}
#cs-footer-274 .cs-social {
display: inline-flex;
flex-direction: column;
justify-content: flex-start;
gap: 0.75rem;
position: absolute;
top: 0;
right: 0;
}
#cs-footer-274 .cs-social-link {
width: 1.5rem;
height: 1.5rem;
background-color: #4e4b66;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
transition:
    transform 0.3s,
    background-color 0.3s;
}
#cs-footer-274 .cs-social-link:hover {
background-color: var(--primary);
transform: translateY(-0.1875rem);
}
#cs-footer-274 .cs-social-img {
height: 0.8125rem;
width: auto;
display: block;
}
#cs-footer-274 .cs-nav {
padding: 0;
margin: 0;
}
#cs-footer-274 .cs-nav-li {
list-style: none;
margin: 0;
color: var(--bodyTextColor);
}
#cs-footer-274 .cs-header {
font-size: 1rem;
line-height: 1.5em;
font-weight: 700;
/* 16px - 20px */
margin-bottom: clamp(1rem, 2.7vw, 1.25rem);
color: var(--bodyTextColor);
position: relative;
display: block;
}
#cs-footer-274 .cs-nav-link {
font-size: 1rem;
text-decoration: none;
line-height: 1.5em;
color: var(--bodyTextColor);
position: relative;
}
#cs-footer-274 .cs-nav-link:before {
/* underline */
content: "";
width: 0%;
height: 0.125rem;
background: var(--bodyTextColor);
opacity: 1;
position: absolute;
display: block;
bottom: -0.125rem;
left: 0;
transition: width 0.3s;
}
#cs-footer-274 .cs-nav-link:hover:before {
width: 100%;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#cs-footer-274 .cs-container {
max-width: 80rem;
row-gap: 0;
/* 44px - 88px */
column-gap: clamp(2.75rem, calc(6%), 5.5rem);
}
#cs-footer-274 .cs-logo-group {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#cs-footer-274 .cs-social {
flex-direction: row;
position: relative;
top: auto;
right: auto;
}
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#cs-footer-274 .cs-container {
justify-content: flex-end;
}
#cs-footer-274 .cs-logo-group {
width: auto;
margin: 0;
/* pushes the rest of the content to the right in a flexbox */
margin-right: auto;
flex-direction: column;
}
#cs-footer-274 .cs-logo-img {
margin-bottom: 2.75rem;
}
#cs-footer-274 .cs-nav {
margin-top: 0.75rem;
}
}
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#contact-1388 {
padding: var(--sectionPadding);
background-color: #f7f7f7;
position: relative;
z-index: 1;
}
#contact-1388 .cs-container {
width: 100%;
/* changes to 1280px at tablet */
max-width: 36.5rem;
margin: auto;
display: flex;
justify-content: center;
align-items: stretch;
flex-direction: column;
column-gap: auto;
/* 48px - 64px */
gap: clamp(2rem, 3vw, 3rem);
position: relative;
}
#contact-1388 .cs-content {
/* set text align to left if content needs to be left aligned */
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
/* centers content horizontally, set to flex-start to left align */
//align-items: flex-start;
}

#contact-1388 .cs-title {
max-width: 23ch;
}
#contact-1388 .cs-text {
margin-bottom: 1rem;
}
#contact-1388 .cs-text:last-of-type {
margin-bottom: 2rem;
}
#contact-1388 .cs-ul {
text-align: left;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1.5rem;
position: relative;
}
#contact-1388 .cs-li {
list-style: none;
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 1.25rem;
}
#contact-1388 .cs-li:hover .cs-icon-wrapper {
transform: scale(1.1);
}
#contact-1388 .cs-header {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2em;
margin-bottom: 0.75rem;
color: var(--headerColor);
display: block;
}
#contact-1388 .cs-link {
font-size: 1rem;
line-height: 1.5em;
text-decoration: none;
color: #767676;
display: block;
position: relative;
}
#contact-1388 .cs-link:hover {
text-decoration: underline;
}
#contact-1388 .cs-icon-wrapper {
width: 3.75rem;
height: 3.75rem;
margin: 0;
border-radius: 50%;
border: 1px solid #bababa;
display: flex;
justify-content: center;
align-items: center;
/* prevents flexbox from squishing it */
flex: none;
transition: transform 0.3s;
}
#contact-1388 .cs-icon {
width: 1.5rem;
height: auto;
display: block;
}
#contact-1388 .cs-form {
width: 100%;
max-width: 39.375rem;
/* 24px - 48px top and bottom */
/* 16px - 48px left and right */
padding: clamp(1.5rem, 5.18vw, 3rem) clamp(1rem, 4vw, 3rem);
/* prevents flexbox from affecting height and width */
box-sizing: border-box;
background-color: #fff;
//border-radius: 1rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
#contact-1388 .cs-h3 {
/* 20px - 39px */
font-size: clamp(1.25rem, 3vw, 2.4375rem);
line-height: 1.2em;
font-weight: 700;
margin: 0 0 0.25rem 0;
color: var(--headerColor);
}
#contact-1388 .cs-label {
/* 14px - 16px */
font-size: clamp(0.875rem, 1.5vw, 1rem);
width: 100%;
color: var(--headerColor);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 0.25rem;
}
#contact-1388 .cs-input {
font-size: 1rem;
width: 100%;
height: 3.5rem;
padding: 0;
padding-left: 1.5rem;
color: var(--headerColor);
background-color: #f7f7f7;
border-radius: 0;
border: none;
/* prevents padding from adding to height and width */
box-sizing: border-box;
}
#contact-1388 .cs-input::placeholder {
color: #7d799c;
opacity: 0.6;
}
#contact-1388 .cs-textarea {
min-height: 7.5rem;
padding-top: 1.5rem;
margin-bottom: 0.75rem;
font-family: inherit;
}
#contact-1388 .cs-button-solid {
font-size: 1rem;
line-height: 3.5rem;
text-decoration: none;
font-weight: 700;
overflow: hidden;
margin: 0;
color: #fff;
padding: 0 3rem;
//border-radius: 1.875rem;
background-color: var(--primary);
display: inline-block;
position: relative;
z-index: 1;
transition: color 0.3s;
}
#contact-1388 .cs-button-solid:before {
content: "";
position: absolute;
display: block;
height: 100%;
width: 0%;
background: #1a1a1a;
opacity: 1;
top: 0;
left: 0;
z-index: -1;
transition: width 0.3s;
}
#contact-1388 .cs-button-solid:hover {
color: var(--primary);
}
#contact-1388 .cs-button-solid:hover:before {
width: 100%;
}
#contact-1388 .cs-submit {
width: 100%;
min-width: 12.5rem;
border: none;
}
#contact-1388 .cs-submit:hover {
color: #fff;
cursor: pointer;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#contact-1388 .cs-container {
//max-width: 80rem;
flex-direction: row;
justify-content: space-between;
}
#contact-1388 .cs-content {
//width: 47%;
/* prevents flexbox from squishing it */
flex: none;
}
#contact-1388 .cs-submit {
width: auto;
}
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#contact-1388 .cs-form {
//width: 46%;
max-width: 36.125rem;
}
#contact-1388 .cs-submit {
width: auto;
}
}
/* Large Desktop - 1500px */
@media only screen and (min-width: 93.75rem) {
#contact-1388 .cs-graphic {
display: block;
}
}

/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#reviews-354 {
padding: var(--sectionPadding);
}
#reviews-354 .cs-container {
width: 100%;
max-width: 80rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
/* 48px - 64px */
gap: clamp(3rem, 6vw, 4rem);
}
#reviews-354 .cs-content {
/* set text align to left if content needs to be left aligned */
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
/* centers content horizontally, set to flex-start to left align */
align-items: center;
}

#reviews-354 .cs-card-group {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* 16px - 20px */
gap: clamp(1rem, 2.5vw, 1.15rem);
}
#reviews-354 .cs-item {
list-style: none;
width: 100%;
max-width: 39.375rem;
/* 24px - 32px top & bottom */
/* 16px - 40px left & right */
padding: clamp(1.5rem, 3.15vw, 2rem) clamp(1rem, 3.15vw, 2.5rem);
background-color: #f7f7f7;
//border-radius: 1rem;
/* prevents padding from adding to height and width */
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
position: relative;
}
#reviews-354 .cs-quote {
width: 2.5rem;
height: auto;
margin-bottom: 2rem;
display: block;
}
#reviews-354 .cs-review {
/* 14px - 20px */
font-size: clamp(0.875rem, 2vw, 1.25rem);
line-height: 1.5em;
margin: 0;
/* 20px - 40px */
margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
color: var(--bodyTextColor);
}
#reviews-354 .cs-name {
/* 20px - 25px */
font-size: clamp(1.25rem, 3vw, 1.5625rem);
line-height: 1.2em;
font-weight: 700;
margin: 0;
/* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
margin-top: auto;
color: var(--headerColor);
display: block;
}
#reviews-354 .cs-job {
/* 14px - 16px */
font-size: clamp(0.875rem, 1.6vw, 1rem);
line-height: 1.5em;
margin: 0;
color: var(--bodyTextColor);
display: block;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#reviews-354 .cs-card-group {
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#services-1188 {
padding: var(--sectionPadding);
}
#services-1188 .cs-container {
max-width: 80rem;
width: 100%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
/* 48px - 64px */
gap: clamp(3rem, 6vw, 4rem);
}
#services-1188 .cs-content {
width: 100%;
display: flex;
flex-direction: column;
/* centers content horizontally, set to flex-start to left align */
align-items: center;
/* set text align to left if content needs to be left aligned */
text-align: center;
}

#services-1188 .cs-card-group {
/* changes to 1280px at desktop */
max-width: 56.25rem;
width: 100%;
margin: 0;
padding: 0;
display: grid;
justify-content: center;
gap: 1rem;
}
#services-1188 .cs-item {
list-style: none;
max-width: 23rem;
width: 100%;
margin: 0;
box-sizing: border-box;
padding: 1rem;
border: 1px solid #e8e8e8;
display: flex;
flex-direction: column;
align-items: center;
text-align: left;
}
#services-1188 .cs-picture {
width: 5rem;
height: 5rem;
margin-bottom: 1.25rem;
box-sizing: border-box;
/* prevents border from affecting height and width */
background-color: #f7f7f7;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
/* prevents flexbox from squishing it */
flex: none;
display: none;
}
#services-1188 .cs-icon {
width: 1.875rem;
height: auto;
display: block;
display: none;
}
#services-1188 .cs-h3 {
font-size: 1.25rem;
line-height: 1.5em;
margin: 0;
margin-bottom: 0.5rem;
color: var(--headerColor);
text-align: center;
}
#services-1188 .cs-item-text {
/* 14px - 16px */
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
margin: 0;
color: var(--bodyTextColor);
text-align: center;
}
#services-1188 .cs-button-solid {
font-size: 1rem;
/* 46px - 56px */
line-height: clamp(2.875rem, 5.5vw, 3.5rem);
font-weight: 700;
min-width: 9.375rem;
margin: 0;
/* prevents padding from adding to the width */
box-sizing: border-box;
padding: 0 1.5rem;
color: #fff;
background-color: var(--primary);
text-decoration: none;
display: inline-block;
position: relative;
z-index: 1;
text-align: center;
}
#services-1188 .cs-button-solid:before {
content: "";
width: 0%;
height: 100%;
background: #000;
opacity: 1;
border-radius: 0.25rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: width 0.3s;
}
#services-1188 .cs-button-solid:hover:before {
width: 100%;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#services-1188 .cs-card-group {
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
#services-1188 .cs-item {
margin: 0;
}
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
#services-1188 .cs-card-group {
max-width: 80rem;
}
#services-1188 .cs-item {
max-width: none;
padding: 2rem 1.5rem;
}
}

/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-1308 {
        padding: var(--sectionPadding);
        overflow: hidden;
    }
    #sbs-1308 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: clamp(3rem, 4vw, 4rem);
    }
    #sbs-1308 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
        position: relative;
        z-index: 10;
    }

    #sbs-1308 .cs-text {
        margin-bottom: 1rem;
    }
    #sbs-1308 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-1308 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition: color 0.3s;
    }
    #sbs-1308 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #sbs-1308 .cs-button-solid:hover {
        color: #fff;
    }
    #sbs-1308 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbs-1308 .cs-ul {
        width: 100%;
        padding: 0;
        /* 32px - 48px */
        margin: clamp(2rem, 5vw, 3rem) 0 0 0;
        /* 32px - 48px */
        padding: clamp(2rem, 5vw, 3rem) 0 0 0;
        border-top: 1px solid #e8e8e8;
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: 0.75rem;
    }
    #sbs-1308 .cs-item {
        list-style: none;
        width: 32%;
        /* making flex so we can align a heading with 1 line to the bottom */
        display: flex;
        flex-direction: column;
        align-self: stretch;
        align-content: space-between;
    }
    #sbs-1308 .cs-number {
        font-size: 1.5625rem;
        line-height: 1.2em;
        font-weight: 700;
        text-align: left;
        color: var(--primary);
        display: block;
        margin: 0 0 0.5rem 0;
    }
    #sbs-1308 .cs-h3 {
        font-size: 1rem;
        line-height: 1.5em;
        font-weight: 400;
        text-align: left;
        /* auto margin top will push text to bottom if there's only one line */
        margin: 0;
        color: var(--bodyTextColor);
    }
    #sbs-1308 .cs-image-group {
        width: 100%;
        max-width: 41.875rem;
        height: 100vw;
        max-height: 39.375rem;
        position: relative;
        display: block;
        z-index: 1;
    }
    #sbs-1308 .cs-picture {
        /* big background image */
        width: 93%;
        height: 93%;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
    }
    #sbs-1308 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #sbs-1308 .cs-box {
        text-align: left;
        width: 70%;
        max-width: 19rem;
        /* 20px - 40px */
        padding: clamp(1.25rem, 4vw, 2.5rem);
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: var(--primary);
        display: inline-flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 10;
    }
    #sbs-1308 .cs-desc {
        /* 16px - 31px */
        font-size: clamp(1rem, 2.5vw, 1.9375rem);
        line-height: 1.2em;
        font-weight: 700;
        text-align: inherit;
        width: 100%;
        color: var(--bodyTextColorWhite);
        position: relative;
        z-index: 10;
    }
    #sbs-1308 .cs-graphic {
        width: 150%;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-1308 .cs-container {
        max-width: 80rem;
        /* set to horizontal arrangement */
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
    #sbs-1308 .cs-content {
        width: 48%;
        padding: 3rem 0;
        align-self: center;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #sbs-1308 .cs-image-group {
        width: 55%;
        max-width: 41.875rem;
        min-height: 41.875rem;
        max-height: 100%;
        height: auto;
        margin: 0;
    }
    #sbs-1308 .cs-picture {
        width: 93%;
        height: 94%;
    }
    #sbs-1308 .cs-box {
        bottom: 0rem;
    }
    #sbs-1308 .cs-graphic {
        max-width: 44.6875rem;
        left: auto;
        right: 8.125rem;
        transform: translateY(-50%);
    }
}