/* STYLES FOR ABOVE THE FOLD */
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1957 {
    /* removed at Tablet */
    min-height: 100dvh;
    padding: var(--sectionPadding);
    /* 200px - 300px - leaving extra space for the navigation */
    padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
    padding-right: clamp(1rem, 2.5vw, 1.25rem);
    /* 16px - 20px */
    padding-left: clamp(1rem, 2.5vw, 1.25rem);
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 1;
  }
  #hero-1957 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 60px - 180px */
    gap: clamp(3.75rem, 13vw, 11.25rem);
  }
  #hero-1957 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 36rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #hero-1957 .cs-topper {
    margin-bottom: 0.5rem;
    color: #fff;
  }
  #hero-1957 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5.975vw, 3.8125rem);
    margin-bottom: 1rem;
    color: #fff;
  }
  #hero-1957 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    /* 28px - 40px */
    margin: 0 0 clamp(1.75rem, 2.5vw, 2.5rem) 0;
    color: #fff;
  }
  #hero-1957 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    margin: 0;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #hero-1957 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #727272;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-1957 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1957 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1957 .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(359deg, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 56.87%);
    /* prevents the cursor from interacting with it */
    pointer-events: none;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #hero-1957 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* makes the top of the image start at the top of the parent */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1957 {
    min-height: auto;
  }
  #hero-1957 .cs-container {
    align-items: flex-start;
  }
  #hero-1957 .cs-content {
    text-align: left;
    margin-left: 0;
    align-items: flex-start;
  }
  #hero-1957 .cs-background:before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 25.47%, rgba(0, 0, 0, 0.15) 50.01%);
  }
}
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
  #hero-1957 .cs-background {
    background: url("/assets/images/hero.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1957 .cs-background img {
    display: none;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1957 {
    /* 16px - 20px */
    padding: clamp(0.5rem, 2.5vw, 0.75rem);
    position: relative;
    z-index: 1;
  }
  #services-1957 .cs-container {
    width: 100%;
    max-width: 120rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1957 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(0.5rem, 2.5vw, 0.75rem);
  }
  #services-1957 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    /* 280px - 337px */
    min-height: clamp(17.5rem, 35vw, 21.0625rem);
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    /* clips background image corners */
    overflow: hidden;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    grid-column: span 12;
    grid-row: span 1;
    position: relative;
    z-index: 1;
  }
  #services-1957 .cs-item:hover .cs-item-background img {
    transform: scale(1.3);
  }
  #services-1957 .cs-link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    /* 125px - 236px */
    /* padding goes on the link, not the cs-item as is normal. We do this because we want the whole card to be hoverable. So we add the padding to the link tag to create the space inside the card. By adding the space inside the cs-link tag we can make the whole card hoverable since the padding is now contributing to the height and width of the link */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  #services-1957 .cs-icon-wrapper {
    width: 3rem;
    height: 3rem;
    margin-left: auto;
    background: #fff;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
  }
  #services-1957 .cs-icon {
    width: 2rem;
    height: auto;
  }
  #services-1957 .cs-flex {
    width: 100%;
  }
  #services-1957 .cs-topper {
    margin-bottom: 0.5rem;
    color: #fff;
  }
  #services-1957 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 19ch;
    margin: 0 0 0.75rem 0;
    color: #fff;
    transition: color 0.3s;
  }
  #services-1957 .cs-item-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-1957 .cs-item-background:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 57.04%, rgba(0, 0, 0, 0.5) 87.88%);
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #services-1957 .cs-item-background img {
    width: 100%;
    height: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s, opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1957 .cs-item {
    grid-column: span 6;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1957 .cs-item {
    grid-column: span 4;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-2291 {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #sbs-2291 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
  }
  #sbs-2291 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    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-2291 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-2291 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-2291 .cs-features {
    width: 100%;
    margin: 0 0 2rem;
    /* 24px - 32px */
    padding: clamp(1.5rem, 4vw, 2rem);
    background-color: #fef5f4;
    border-left: 0.25rem solid var(--secondary);
  }
  #sbs-2291 .cs-h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0 0 0.75rem;
    color: var(--headerColor);
  }
  #sbs-2291 .cs-ul {
    font-size: 0.75rem;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #sbs-2291 .cs-li {
    font-size: 1rem;
    line-height: 1.5em;
    list-style: none;
    /* 20px - 24px */
    padding-left: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--bodyTextColor);
    position: relative;
  }
  #sbs-2291 .cs-li::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background-color: var(--secondary);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(45deg);
  }
  #sbs-2291 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    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;
    background-color: var(--primary);
    color: #FFFFFF;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #sbs-2291 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-2291 .cs-button-solid:hover {
    color: #fff;
  }
  #sbs-2291 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-2291 .cs-image-group {
    width: 100%;
    height: 126vw;
    max-height: 39.125rem;
    display: block;
    order: -1;
    position: relative;
    z-index: 1;
  }
  #sbs-2291 .cs-picture {
    /* big background image */
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 5.9375rem;
    left: 0;
  }
  #sbs-2291 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-2291 .cs-box {
    text-align: left;
    width: 91%;
    max-width: 28.125rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #fffcf3;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    position: absolute;
    right: 50%;
    bottom: 0;
    z-index: 10;
    transform: translate(50%);
  }
  #sbs-2291 .cs-number {
    /* 31px - 49px */
    font-size: clamp(1.9375rem, 4vw, 3.0625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
    margin: 0;
    color: var(--General-Secondary, #ffc219);
  }
  #sbs-2291 .cs-heading {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.5rem;
    color: var(--headerColor);
  }
  #sbs-2291 .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
  }
  #sbs-2291 .cs-graphic {
    width: 150%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-2291 .cs-box {
    flex-direction: row;
    align-items: center;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-2291 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: stretch;
    gap: 1.25rem;
  }
  #sbs-2291 .cs-content {
    padding-left: 3.25rem;
    padding-bottom: 6.75rem;
  }
  #sbs-2291 .cs-image-group {
    height: auto;
    min-height: 40.125rem;
    max-height: 100%;
  }
  #sbs-2291 .cs-picture {
    bottom: 4rem;
  }
}

/*# sourceMappingURL=critical.css.map */