/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-1235 {
    background-color: #040818;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }
  #cta-1235 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-1235 .cs-topper,
  #cta-1235 .cs-title,
  #cta-1235 .cs-text {
    color: white;
    position: relative;
    z-index: 20;
  }
  #cta-1235 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 39.375rem;
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    z-index: 20;
  }

  #cta-1235 .cs-topper,
  #cta-1235 .cs-text {
    color: var(--headerColor);
  }
  #cta-1235 .cs-text {
    margin-bottom: 1rem;
  }
  #cta-1235 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta-1235 .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: #1a1a1a;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #cta-1235 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cta-1235 .cs-button-solid:hover {
    color: #1a1a1a;
  }
  #cta-1235 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-1235 .cs-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #cta-1235 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    margin: 0;
    padding: 0;
    padding-left: 1.25rem;
    border: none;
    /* prevents padding from adding to width and height */
    box-sizing: border-box;
    display: block;
  }
  #cta-1235 .cs-input::placeholder {
    color: #767676;
  }
  #cta-1235 .cs-submit {
    width: 100%;
    padding: 0 2rem;
    border: none;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #cta-1235 .cs-background {
    width: 100%;
    height: 23.75rem;
    overflow: hidden;
    display: hidden;
    position: relative;
  }
  #cta-1235 .cs-background:before {
    /* yellow slants */
    content: "";
    width: 21.875rem;
    height: 300%;
    background: #040818;
    opacity: 1;
    position: absolute;
    display: block;
    top: -12.5rem;
    left: -11.875rem;
    z-index: 10;
    transform: rotate(-30deg);
    outline: 3.125rem solid rgba(24, 30, 66, 0.4);
  }
  #cta-1235 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    object-position: center;
  }
  #cta-1235 .cs-floater {
    width: 70%;
    max-width: 40.75rem;
    height: auto;
    opacity: 0.1;
    position: absolute;
    top: 1;
    left: 0;
    z-index: 10;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-1235 {
    /* moved padding back to the section container */
    padding: var(--sectionPadding);
  }
  #cta-1235 .cs-topper,
  #cta-1235 .cs-title,
  #cta-1235 .cs-text {
    color: white;
    position: relative;
    z-index: 20;
  }
  #cta-1235 .cs-container {
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
  }
  #cta-1235 .cs-content {
    text-align: left;
    width: 57%;
    padding: 0;
    align-items: flex-start;
    position: relative;
    z-index: initial;
  }
  #cta-1235 .cs-content:before {
    content: "";
    width: 34.875rem;
    height: 500%;
    background: #040818;
    opacity: 1;
    position: absolute;
    display: block;
    top: -15.25rem;
    right: -4.875rem;
    z-index: 1;
    transform: rotate(-30deg);
    outline: 3.125rem solid rgba(4, 22, 43, 0.09);
  }
  #cta-1235 .cs-topper,
  #cta-1235 .cs-title,
  #cta-1235 .cs-text {
    color: white;
    position: relative;
    z-index: 20;
  }
  #cta-1235 .cs-form {
    flex-direction: row;
    justify-content: flex-start;
    position: relative;
    z-index: 20;
  }
  #cta-1235 .cs-input {
    width: 100%;
  }
  #cta-1235 .cs-submit {
    width: auto;
  }
  #cta-1235 .cs-background {
    width: 60%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
  }
  #cta-1235 .cs-background:before {
    /* moved it to the cs-content for easier positioning */
    display: none;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #cta-1235 {
    min-height: 30.5rem;
    display: flex;
    align-items: center;
  }
  #cta-1235 .cs-topper,
  #cta-1235 .cs-title,
  #cta-1235 .cs-text {
    color: white;
    position: relative;
    z-index: 20;
  }
}
#cta-1235 .cs-topper,
#cta-1235 .cs-title,
#cta-1235 .cs-text {
  color: white;
  position: relative;
  z-index: 20;
}
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-403 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #cta-403 .cs-background {
    width: 100%;
    height: 100%;
    background-blend-mode: multiply;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-403 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-403 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    /* positions the image inside the parent */
    object-position: 0% 30%;
  }
  #cta-403 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-403 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 32.3125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #cta-403 .cs-title,
  #cta-403 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #cta-403 .cs-text {
    opacity: 0.8;
    margin-bottom: 1rem;
  }
  #cta-403 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta-403 .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: #000;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5);
  }
  #cta-403 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #cta-403 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-403 .cs-background {
    /* clips the black slant so it doesnt overflow */
    overflow: hidden;
  }
  #cta-403 .cs-background:before {
    width: 40%;
    opacity: 1;
  }
  #cta-403 .cs-background:after {
    /* black slant */
    content: "";
    width: 31.25rem;
    height: 93.75rem;
    margin-right: -3.125rem;
    background: -moz-linear-gradient(
      left,
      #1a1a1a 0%,
      #1a1a1a 57%,
      rgba(26, 26, 26, 0) 100%
    );
    background: -webkit-linear-gradient(
      left,
      #1a1a1a 0%,
      #1a1a1a 57%,
      rgba(26, 26, 26, 0) 100%
    );
    background: linear-gradient(
      to right,
      #1a1a1a 0%,
      #1a1a1a 57%,
      rgba(26, 26, 26, 0) 100%
    );
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    right: 50%;
    transform: rotate(10deg) translateY(-50%);
  }
  #cta-403 .cs-background img {
    width: 60%;
    object-position: right;
    left: auto;
    right: 0;
  }
  #cta-403 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #cta-403 .cs-content {
    text-align: left;
    align-items: flex-start;
    width: 45%;
  }
  #cta-403 .cs-text,
  #cta-403 .cs-title {
    margin-left: 0;
  }
}

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

  #services-1168 .cs-title {
    max-width: 20ch;
  }
  #services-1168 .cs-card-group {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(12, 1fr);
    margin: 0;
    width: 100%;
    padding: 0;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1168 .cs-item {
    box-shadow: 0px 0px 10px 0.2px #00000054;
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #f7f7f7;
    width: 100%;
    list-style: none;
    text-align: left;
    grid-column: span 12;
  }
  #services-1168 .cs-item:hover .cs-picture img {
    transform: scale(1.2);
  }
  #services-1168 .cs-item:hover .cs-h3,
  #services-1168 .cs-item:hover .cs-link {
    color: var(--primary);
  }
  #services-1168 .cs-item:hover .cs-arrow {
    filter: initial;
  }
  #services-1168 .cs-picture {
    position: relative;
    display: block;
    /* 180px - 240px */
    height: clamp(11.25rem, 24vw, 15rem);
    width: 100%;
    /* clips the image from overflowing parent on hover */
    overflow: hidden;
  }
  #services-1168 .cs-picture img {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.65s;
  }
  #services-1168 .cs-info {
    display: flex;
    flex-direction: column;
    padding: calc(24 / 16 * 1rem);
  }
  #services-1168 .cs-h3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.5em;
    font-weight: 700;
    color: var(--headerColor);
    transition: background-color 0.3s;
    text-align: inherit;
    margin: 0 0 calc(12 / 16 * 1rem) 0;
    transition: color 0.3s;
  }
  #services-1168 .cs-item-text {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    text-align: inherit;
    margin: 0;
  }
  #services-1168 .cs-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    font-size: calc(16 / 16 * 1rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    text-align: inherit;
    margin-top: calc(20 / 16 * 1rem);
    transition: color 0.3s;
  }
  #services-1168 .cs-link:hover .cs-arrow {
    transform: translateX(0.25rem);
  }
  #services-1168 .cs-arrow {
    filter: grayscale(1) brightness(0);
    display: block;
    height: auto;
    width: calc(20 / 16 * 1rem);
    transition: filter 0.3s, transform 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1168 .cs-item {
    grid-column: span 6;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1168 .cs-container {
    max-width: calc(1440 / 16 * 1rem);
  }
  #services-1168 .cs-item {
    grid-column: span 3;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-2169 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #sbsr-2169 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 10vw, 8rem);
  }
  #sbsr-2169 .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;
  }
  #sbsr-2169 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
  }
  #sbsr-2169 .cs-text:last-of-type {
    /* 32px - 80px */
    margin-bottom: clamp(2rem, 7vw, 5rem);
  }
  #sbsr-2169 .cs-picture {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbsr-2169 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-2169 .cs-image-group {
    width: 100%;
    /* 520px - 740px */
    height: clamp(32.3125rem, 100vw, 46.25rem);
    flex: none;
    position: relative;
    z-index: 1;
    order: -1;
  }
  #sbsr-2169 .cs-picture1 {
    /* 220px - 400px */
    height: clamp(13.75rem, 30vw, 25rem);
    max-height: 25rem;
    border: clamp(4px, 2vw, 9px) solid #fff;
    box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.565);
  }
  #sbsr-2169 .cs-picture2 {
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    /* changes to a clamp at tablet */
    right: 2.5rem;
    left: 0;
    /* changes to clamp at tablet */
    bottom: 3.4375rem;
  }
  #sbsr-2169 .cs-floater {
    /* 80px - 170px */
    width: clamp(5rem, 15vw, 10.625rem);
    height: auto;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  #sbsr-2169 .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.5;
  }
  #sbsr-2169 .cs-background img {
    width: 100%;
    height: 100%;
    opacity: 0.16;
    mix-blend-mode: darken;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-2169 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbsr-2169 .cs-content {
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbsr-2169 .cs-image-group {
    width: 45vw;
    max-width: 32.625rem;
    height: auto;
    margin-bottom: 3.125rem;
    order: 2;
  }
  #sbsr-2169 .cs-picture2 {
    box-shadow: 3px 3px 11px 1px rgba(0, 0, 0, 0.565);
    /* 60px - 100px */
    right: clamp(3.75rem, 10vw, 6.5rem);
    /* 80px - 120px */
    bottom: clamp(5rem, 9vw, 7.5rem);
  }
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1254 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 10;
  }
  #services-1254 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1254 .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;
  }

  #services-1254 .cs-title {
    max-width: 20ch;
  }
  #services-1254 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1254 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #000;
    border-radius: 0.5rem;
    /* clips background image corners */
    overflow: hidden;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    /* prevents padding and border 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: flex-end;
    position: relative;
    z-index: 1;
  }
  #services-1254 .cs-item:hover .cs-item-background img {
    opacity: 0.4;
    transform: scale(1.3);
  }
  #services-1254 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #services-1254 .cs-item:before {
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    border-radius: 0.5rem;
    /* prevents the mouse from interacting with it so when you hover hover the other elements inside the card it doesn't block your mouse from hovering over them */
    pointer-events: none;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 10;
  }
  #services-1254 .cs-link {
    text-decoration: none;
    /* 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 widht of the link */
    padding: clamp(7.8125rem, 19vw, 14.75rem) 1.5rem 1.5rem;
  }
  #services-1254 .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 0.75rem 0;
    color: var(--bodyTextColorWhite);
    transition: color 0.3s;
  }
  #services-1254 .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(--bodyTextColorWhite);
  }
  #services-1254 .cs-item-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-1254 .cs-item-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.24;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #services-1254 .cs-item-background:after {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
    opacity: 0.4;
    bottom: 0;
    left: 0;
    z-index: 2;
  }
  #services-1254 .cs-item-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    transition: transform 0.6s, opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1254 {
    padding-bottom: 0;
  }
  #services-1254 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #services-1254 .cs-title {
    margin: 0;
  }
  #services-1254 .cs-flex-group {
    width: 50%;
  }
  #services-1254 .cs-item {
    grid-column: span 6;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1254 .cs-item {
    grid-column: span 3;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-456 {
    background-color: #f2f2f2;
    padding: var(--sectionPadding);
  }
  #sbs-456 .cs-container {
    width: 100%;
    max-width: 80em;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #sbs-456 .cs-content {
    text-align: left;
    width: 100%;
    max-width: 40.625rem;
    margin: 0 1rem;
    margin-top: -18.75rem;
    /* 40px - 60px top and bottom */
    /* 20px - 60px left and right */
    padding: clamp(2.5rem, 7vw, 3.75rem) clamp(1.25rem, 5.5vw, 3.75rem);
    background-color: #fafbfc;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    border-radius: 0.75rem;
    /* clips the pseudo element */
    overflow: hidden;
    box-shadow: 0px 24px 54px rgba(87, 107, 147, 0.12);
    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-456 .cs-content:before {
    /* green border top */
    content: "";
    width: 100%;
    height: 0.5rem;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }

  #sbs-456 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-456 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-456 .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);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #sbs-456 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #sbs-456 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-456 .cs-picture {
    width: 100%;
    height: auto;
    height: 27.6875rem;
    /* clips the img corners */
    overflow: hidden;
    border-radius: 1.5rem;
    display: block;
    /* sends it to the top */
    order: -1;
    position: relative;
  }
  #sbs-456 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: fill;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-456 .cs-container {
    padding: 3.75rem 0;
    position: relative;
    align-items: flex-end;
  }
  #sbs-456 .cs-content {
    width: 65%;
    margin: 0;
  }
  #sbs-456 .cs-picture {
    /* 465px - 617px */
    width: clamp(29.0625rem, 53vw, 38.5625rem);
    position: absolute;
    left: 0;
    height: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-456 .cs-content {
    /* 90px - 108px */
    margin-right: clamp(5rem, 8.5vw, 6.75rem);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-412 {
    padding: var(--sectionPadding);
    /* clips svg as the screen grows so it doesn't overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-412 .cs-container {
    width: 100%;
    /* changes to 1280 at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 108px */
    gap: clamp(3rem, 7.1vw, 6.75rem);
  }
  #sbs-412 .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;
  }

  #sbs-412 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-412 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-412 .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);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #sbs-412 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #sbs-412 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-412 .cs-image-group {
    font-size: min(2.5vw, 1em);
    width: 36.1875em;
    height: 33.875em;
    /* sends it to the top of the flexbox */
    order: -1;
    position: relative;
  }
  #sbs-412 .cs-picture {
    border-radius: 1.25em;
    /* clips the img tag corners */
    overflow: hidden;
    position: absolute;
    display: block;
  }
  #sbs-412 .cs-picture:hover:before {
    opacity: 0.6;
  }
  #sbs-412 .cs-picture:hover img {
    transform: scale(1.1);
  }
  #sbs-412 .cs-picture:before {
    /* Hover Box */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 10;
    transition: opacity 0.3s;
  }
  #sbs-412 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s;
  }
  #sbs-412 .cs-picture1 {
    width: 12.75em;
    height: 19.625em;
    top: 0;
    left: 0;
  }
  #sbs-412 .cs-picture2 {
    width: 21.75em;
    height: 19.625em;
    top: 0;
    right: 0;
  }
  #sbs-412 .cs-picture3 {
    width: 36.1875em;
    height: 12.625em;
    bottom: 0;
    left: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-412 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  #sbs-412 .cs-content {
    width: 48%;
  }
  #sbs-412 .cs-image-group {
    font-size: min(1.15vw, 1em);
    flex: none;
  }
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-447 {
    padding: var(--sectionPadding);
  }
  #services-447 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375em;
    margin: auto;
  }
  #services-447 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-447 .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;
  }

  #services-447 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
  }
  #services-447 .cs-item {
    list-style: none;
    width: 100%;
    /* changes at desktop */
    padding-top: 9rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #services-447 .cs-item:hover .cs-picture img {
    transform: scale(1.2);
    opacity: 0.4;
  }
  #services-447 .cs-item:hover .cs-box:before {
    opacity: 1;
  }
  #services-447 .cs-picture {
    width: 100%;
    /* changes at desktop */
    height: 15.625rem;
    border-radius: 0.5rem;
    background-color: var(--primary);
    /* clips the corners of the image */
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-447 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it behave like a background image */
    object-fit: cover;
    /* positions top of image to the top of the container */
    object-position: top;
    transition: transform 0.9s, opacity 0.5s;
  }
  #services-447 .cs-box {
    text-align: center;
    width: 88%;
    padding: 0 1.5rem 1.5rem 1.5rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    border: 1px solid #dad9e3;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0px 24px 54px rgba(87, 107, 147, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #services-447 .cs-box:before {
    /* hover border box */
    content: "";
    background: transparent;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    border: 4px solid var(--primary);
    border-radius: 0.75rem;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    opacity: 0;
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    transition: opacity 0.5s;
  }
  #services-447 .cs-wrapper {
    /* 80px - 120px */
    width: clamp(5rem, 9.2vw, 7.5rem);
    height: clamp(5rem, 9.2vw, 7.5rem);
    /* 20px - 24px */
    margin: 0 0 clamp(1.25rem, 1.5vw, 1.5rem);
    /* we use the same clamp value for height & width, but multiple by -.5 so it will be a negative value, and be half of the height.  Negative margins pull things toward the element so they overlap them, in this case we want the .cs-wrapper to overlap .cs-box by half its height, so we use the same clamp for height and half it for the margin top value */
    margin-top: calc(clamp(5rem, 9.2vw, 7.5rem) * -0.5);
    border-radius: 50%;
    border: 4px solid var(--primary);
    background-color: #fff;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
  }
  #services-447 .cs-icon {
    /* 48px - 64px */
    width: clamp(3rem, 4.3vw, 4rem);
    height: auto;
    display: block;
    filter: invert(49%) sepia(86%) saturate(684%) hue-rotate(180deg)
      brightness(76%) contrast(178%); /* blue filter */
  }
  #services-447 .cs-h3 {
    /* 20px - 25px */
    /* font-size: clamp(1.25rem, 1.9vw, 1.5625rem); */
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
  }
  #services-447 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    font-weight: 400;
    /* 20px - 24px */
    margin: 0 0 clamp(1.25rem, 1.5vw, 1.5rem);
    color: var(--bodyTextColor);
  }
  #services-447 .cs-link {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    margin: 0;
    color: var(--primary);
    display: inline-block;
    position: relative;
  }
  #services-447 .cs-link:hover:before {
    width: 100%;
  }
  #services-447 .cs-link:before {
    /* animated underline */
    content: "";
    width: 0%;
    height: 3px;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.125rem;
    left: 0;
    transition: width 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-447 .cs-container {
    max-width: 90rem;
  }
  #services-447 .cs-card-group {
    flex-wrap: wrap;
    flex-direction: row;
    /* 16px - 20px */
    column-gap: clamp(1rem, 1.5vw, 1.25rem);
    row-gap: 3.75rem;
  }
  #services-447 .cs-item {
    width: 47%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-447 .cs-card-group {
    flex-wrap: nowrap;
  }
  #services-447 .cs-item {
    width: 100%;
    /* 144px - 274px */
    padding-top: clamp(9rem, 17.5vw, 24.125rem);
  }
  #services-447 .cs-picture {
    /* 224px - 428px */
    height: clamp(14rem, 28vw, 26.75rem);
    box-shadow: 1px 2px 5px 1px #0000008a;
  }
}

/*-- -------------------------- -->
<---           Form             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-contact-486 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #cs-contact-486 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375em;
    margin: auto;
    /* 20px - 80px */
    padding: clamp(1.25rem, 5.5vw, 5rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #14142b;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 3vw, 1.5rem);
    /* clips the glowing orb */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 1;
  }
  #cs-contact-486 .cs-container:before {
    /* glowing orb */
    content: "";
    width: 77.5rem;
    height: 7.625rem;
    background: #f1f1f4;
    opacity: 0.21;
    -webkit-filter: blur(152px);
    filter: blur(152px);
    transform: translateX(-50%) rotate(-38.5deg);
    position: absolute;
    display: block;
    top: 30%;
    left: 50%;
    z-index: -1;
  }
  #cs-contact-486 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 36.75rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #cs-contact-486 .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-contact-486 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #cs-contact-486 .cs-title {
    max-width: 16ch;
    color: var(--bodyTextColorWhite);
  }
  #cs-contact-486 .cs-color {
    color: var(--primaryLight);
  }
  #cs-contact-486 .cs-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    /* 24px - 36px, matches the padding-bottom */
    margin: 0 0 clamp(1.5rem, 4vw, 2.25rem) 0;
    /* 24px - 36px */
    padding-bottom: clamp(1.5rem, 4vw, 2.25rem);
    color: #b4b2c7;
    position: relative;
  }
  #cs-contact-486 .cs-text:before {
    /* dashed border effect, by using this method we can control the width of the dashed lines */
    content: "";
    width: 100%;
    height: 1px;
    background-image: linear-gradient(
      90deg,
      #b3bac5,
      #b3bac5 50%,
      transparent 50%,
      transparent 0%
    );
    /* change the first left rem value to change the length of the dashes */
    background-size: 0.6rem 1px;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
  }
  #cs-contact-486 .cs-heading {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5em;
    font-weight: 700;
    text-align: left;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #cs-contact-486 .cs-heading:last-of-type {
    /* make the last one have the margin bottom to create the space between the contact info */
    margin-bottom: 0.75rem;
  }
  #cs-contact-486 .cs-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    margin: 0;
    color: #b4b2c7;
    display: block;
  }
  #cs-contact-486 #cs-form-486 {
    width: 100%;
    max-width: 38.625rem;
    padding: 2rem 1.5rem;
    background-color: #fff;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    border-radius: 0.75rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 1.25rem;
  }
  #cs-contact-486 .cs-h3 {
    /* 20px - 31px */
    font-size: clamp(1.25rem, 4vw, 1.9375rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    width: 100%;
    /* 4px + the 20px gap on the #cs-form */
    margin: 0 0 0.25rem 0;
    color: #14142b;
  }
  #cs-contact-486 .cs-label {
    font-size: 1rem;
    line-height: 1.5em;
    width: 100%;
    margin: 0 0 0.375rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #14142b;
  }
  #cs-contact-486 .cs-input,
  #cs-contact-486 .cs-textarea,
  #cs-contact-486 #cs-select-486 {
    font-size: 1rem;
    font-family: inherit;
    width: 100%;
    height: 3rem;
    margin: 0;
    padding: 0 1.25rem;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    border-radius: 0.5rem;
    border: 1px solid #b4b2c7;
    background-color: transparent;
  }
  #cs-contact-486 .cs-input::placeholder,
  #cs-contact-486 .cs-textarea::placeholder,
  #cs-contact-486 #cs-select-486::placeholder {
    color: #7d799c;
    font-size: 1rem;
  }
  #cs-contact-486 .cs-textarea {
    min-height: 9.375rem;
    padding-top: 0.625rem;
  }
  #cs-contact-486 .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);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cs-contact-486 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #cs-contact-486 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cs-contact-486 .cs-button-solid {
    /* button override */
    width: 100%;
    border: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-contact-486 .cs-container {
    max-width: 90rem;
    flex-direction: row;
    justify-content: space-between;
  }
  #cs-contact-486 .cs-label:nth-of-type(1),
  #cs-contact-486 .cs-label:nth-of-type(2) {
    width: clamp(45%, 17vw, 48.5%);
  }
}