/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1377 {
    padding-top: 0rem;
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #services-1377 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1377 .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-1377 .cs-topper {
    color: var(--secondary);
  }
  #services-1377 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #services-1377 .cs-item {
    list-style: none;
    width: 100%;
    /* 210px - 305px */
    min-height: clamp(13.125rem, 30vw, 19.0625rem);
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* 16px - 24px */
    padding: clamp(1rem, 1.8vw, 1.5rem);
    /* 24px - 32px */
    padding-top: clamp(1.5rem, 2.3vw, 2rem);
    background-color: #fff;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    grid-column: span 12;
    gap: 3rem;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #services-1377 .cs-item:hover {
    background-color: var(--primary);
  }
  #services-1377 .cs-item:hover .cs-icon,
  #services-1377 .cs-item:hover .cs-arrow {
    filter: grayscale(1) brightness(1000%);
  }
  #services-1377 .cs-item:hover .cs-h3 {
    color: #fff;
  }
  #services-1377 .cs-item:hover p {
    color: #fff;
  }
  #services-1377 .cs-item:hover .cs-arrow-wrapper {
    border-color: #fff;
  }
  #services-1377 .cs-icon {
    width: auto;
    height: 2.5rem;
    transition: filter 0.3s;
  }
  #services-1377 .cs-link {
    text-decoration: none;
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.625rem;
  }
  #services-1377 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: bold;
    line-height: 1.2em;
    text-align: inherit;
    /* if a word is too long for the card, break it onto a new line */
    word-break: break-word;
    margin: 0;
    transition: color 0.3s;
  }
  #services-1377 .cs-arrow-wrapper {
    width: 3rem;
    height: 3rem;
    border: 1px solid #bababa;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents the parent flexbox from shrinking the arrow */
    flex-shrink: 0;
    transition: border-color 0.3s;
  }
  #services-1377 .cs-arrow {
    width: auto;
    height: 0.75rem;
    transition: filter 0.3s;
  }
}
/* In between - 500px */
@media only screen and (min-width: 31.25rem) {
  #services-1377 .cs-item {
    grid-column: span 6;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1377 .cs-item {
    text-align: left;
    align-items: flex-start;
    grid-column: span 3;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1377 .cs-link {
    flex-direction: column;
    justify-content: center;
    align-items: start;
  }
}

/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-558 {
    padding: var(--sectionPadding);
    /* 137px - 212px */
    padding-top: clamp(8.5625rem, 25vw, 13.25rem);
    background-color: var(--primary);
    /* clips the line from causing overflow issues for going off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #banner-558 .cs-container {
    text-align: center;
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
  #banner-558 .cs-int-topper {
    font-size: var(--topperFontSize);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
    padding: 0 0 0 1.25rem;
    color: var(--bodyTextColorWhite);
    display: block;
    position: relative;
  }
  #banner-558 .cs-int-topper:before {
    /* yellow line */
    content: "";
    width: 50vw;
    height: 2px;
    background: var(--secondary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
  }
  #banner-558 .cs-int-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #banner-558 .cs-breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #banner-558 .cs-link {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.2em;
    text-decoration: none;
    color: var(--bodyTextColorWhite);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #banner-558 .cs-link:last-of-type {
    /* remove the chevron on the last list item */
  }
  #banner-558 .cs-link:last-of-type::after {
    display: none;
  }
  #banner-558 .cs-link:after {
    /* chevron - added as pseudo to make adding and removing them easier */
    content: "";
    width: 1.875rem;
    height: 0.125rem;
    /* 12px - 24px */
    margin: 0 clamp(0.75rem, 2vw, 1.5rem);
    background-color: #fff;
  }
  #banner-558 .cs-link.cs-active {
    /* color: var(--secondary); */
  }
}

/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-488 {
    padding: 0 1rem;
    position: relative;
  }
  #cta-488 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
  }
  #cta-488 .cs-content {
    /* 252px - 284px, changes clamp at tablet */
    width: clamp(15.75rem, 38vw, 17.75rem);
    /* 20px - 88px left & right */
    padding: 0 clamp(1.25rem, 6.5vw, 5.5rem);
    /* 232px - 335px */
    padding-top: clamp(14.5rem, 26.7vw, 20.9375rem);
    /* 36px - 72px */
    padding-bottom: clamp(2.25rem, 5vw, 4.5rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background: rgba(0, 31, 63, 0.7);
  }
  #cta-488 .cs-topper {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;
    position: relative;
  }
  #cta-488 .cs-topper:before {
    content: "";
    /* 24px - 40px */
    width: clamp(1.5rem, 4vw, 2.5rem);
    height: 2px;
    background: var(--secondary);
    opacity: 1;
    position: relative;
    display: block;
  }
  #cta-488 .cs-title {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    width: 100%;
    /* 20 characters wide including space */
    max-width: 20ch;
    margin: 0 0 1.25rem;
    color: var(--bodyTextColorWhite);
  }
  #cta-488 .cs-link {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0;
    color: var(--secondary);
    display: inline-block;
    position: relative;
  }
  #cta-488 .cs-link:hover:before {
    width: 100%;
  }
  #cta-488 .cs-link:before {
    content: "";
    width: 0%;
    height: 0.1875rem;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.1875rem;
    left: 0;
    transition: width 0.3s;
  }
  #cta-488 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-488 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-488 .cs-container {
    justify-content: flex-end;
  }
  #cta-488 .cs-content {
    /* 284px - 522px */
    width: clamp(17.75rem, 40vw, 32.625rem);
    /* 60px - 108px */
    margin-right: clamp(3.75rem, 8vw, 6.75rem);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1131 {
    padding: var(--sectionPadding);
  }
  #services-1131 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1131 .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-1131 .cs-content .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    /* text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); */
  }

  .cs-color {
    color: var(--primary);
  }

  .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
  }

  #services-1131 .cs-topper {
    color: #767676;
  }
  #services-1131 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #services-1131 .cs-item {
    width: 100%;
    text-align: center;
    list-style: none;
    margin: 0;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 1rem;
    /* 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: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, border-color 0.3s;
  }
  #services-1131 .cs-item:hover {
    box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
    border-color: transparent;
  }
  #services-1131 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #services-1131 .cs-image-group {
    width: 6.25rem;
    height: auto;
    /* 20px - 24px */
    margin: 2rem 0 clamp(2.25rem, 2.5vw, 1.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
  }
  #services-1131 .cs-icon {
    width: 3rem;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #services-1131 .cs-graphic {
    width: 100%;
    height: auto;
  }
  #services-1131 .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(--headerColor);
    transition: color 0.3s;
  }
  #services-1131 .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);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1131 .cs-item {
    text-align: center;
    align-items: center;
    grid-column: span 6;
  }
  #services-1131 .cs-image-group {
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.5rem);
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1131 .cs-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  #services-1131 .cs-image-group {
    margin: 2rem 0 clamp(2.25rem, 2.5vw, 1.5rem);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-502 {
    margin: var(--sectionPadding);
    margin-left: 0;
    margin-right: 0;
    padding: 0 1rem;
    /* prevents overflow from the slant shape */
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: 5rem;
    margin-bottom: 0;
  }
  #services-502:before {
    /* section background */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-502 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    /* 60px - 80px top and bottom */
    padding: clamp(3.75em, 6.82vw, 5em) 0;
    /* maintains proportional margin top as screen size grows */
    margin-top: 56vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* 40px - 70px */
    gap: clamp(2.5rem, 5.7vw, 4.375rem);
    position: relative;
    /* places it on top of the cs-background */
    z-index: 10;
  }
  #services-502 .cs-container:before {
    /* section slant on mobile */
    content: "";
    width: 62.5rem;
    height: 125rem;
    background: #960101;
    opacity: 1;
    position: absolute;
    z-index: -1;
    display: block;
    top: -28.75rem;
    /* these last two center it horizontally and rotate -65deg */
    left: 50%;
    transform: translateX(-50%) rotate(-65deg);
  }
  #services-502 .cs-background {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #services-502 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #services-502 .cs-content {
    width: 100%;
  }

  #services-502 .cs-topper {
    color: var(--bodyTextColorWhite);
  }
  #services-502 .cs-title {
    /* changes to 45% at tablet */
    width: 95%;
    max-width: 32.125rem;
    color: var(--bodyTextColorWhite);
  }
  #services-502 .cs-card-group {
    width: 100%;
    max-width: 35.25rem;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 20px - 32px */
    gap: clamp(1.25rem, 3vw, 2rem);
  }
  #services-502 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* 32px - 64px */
    gap: clamp(2rem, 5vw, 4rem);
  }
  #services-502 .cs-icon {
    width: 3.75rem;
    height: auto;
    display: block;
  }
  #services-502 .cs-h3 {
    /* 25px - 31px */
    font-size: clamp(1.5625rem, 3vw, 1.9375rem);
    line-height: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1.25rem 0;
    color: var(--bodyTextColorWhite);
  }
  #services-502 .cs-item-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1rem, 1.25rem);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #services-502 .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: white;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: black;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #services-502 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    color: black;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #services-502 .cs-button-solid:hover:before {
    color: black;
    width: 100%;
  }

  #services-502 .cs-button-solid:hover {
    background-color: #000;
    color: black;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-502:before {
    /* remove the pseudo for the section background */
    display: none;
  }
  #services-502 .cs-background {
    /* reset height to let top and bottom properties create the height */
    height: auto;
    aspect-ratio: initial;
    position: absolute;
    /* creates the gap between the image and the blue section */
    bottom: 0;
  }
  #services-502 .cs-background img {
    width: 60%;
    left: auto;
    right: 0;
    object-position: 80% center;
  }
  #services-502 .cs-container {
    margin-top: 0;
  }
  #services-502 .cs-container:before {
    /* make really tall so it always covers top to bottom, even when you add more list items */
    height: 250rem;
    /* make really really wide so it covers the left side at large scree sizes */
    width: 250rem;
    /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
    margin-right: -68.75rem;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    top: 50%;
    left: auto;
    /* pushes the right edge of the element to the center line of the parent */
    right: 50%;
    transform: rotate(-35deg) translateY(-50%);
  }
  #services-502 .cs-title {
    width: 45%;
  }
  #services-502 .cs-card-group {
    width: 52%;
    /* 24px - 32px */
    padding-left: clamp(1.5rem, 3vw, 2rem);
    /* prevents padding from adding to width */
    box-sizing: border-box;
  }
  #services-502 .cs-item {
    flex-direction: row;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1303 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 10;
  }
  #services-1303 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1303 .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-1303 .cs-title {
    max-width: 20ch;
  }
  #services-1303 .cs-card-group {
    width: 100%;
    max-width: 80rem;
    margin: 0;
    padding: 0 1rem;
    /* prevents padding and border from affecting height and width */
    background-color: #fff;
    box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    position: relative;
    z-index: 15;
  }
  #services-1303 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    box-sizing: border-box;
    grid-column: span 12;
    transition: background-color 0.3s, border-color 0.3s;
  }
  #services-1303 .cs-item:last-of-type {
    border-bottom: none;
  }
  #services-1303 .cs-link {
    text-decoration: none;
    /* 24px - 60px top & Bottom */
    /* 24px - 16px top & Bottom */
    padding: clamp(1.5rem, 5.3vw, 3.75rem) clamp(1rem, 2.7vw, 2.5rem);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  #services-1303 .cs-icon {
    /* 32px - 40px */
    height: clamp(2rem, 4vw, 2.5rem);
    width: auto;
    margin: 0 0 1rem 0;
    filter: invert(100%) sepia(100%) saturate(1000%) hue-rotate(318deg)
      brightness(100%) contrast(100%);
  }
  #services-1303 .no-filter-cs-icon {
    height: clamp(2rem, 4vw, 2.5rem);
    width: auto;
    margin: 0 0 1rem 0;
    filter: none;
  }
  #services-1303 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    text-align: inherit;
    line-height: 1.2em;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #services-1303 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s, opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1303 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #services-1303 .cs-title {
    margin: 0;
  }
  #services-1303 .cs-flex-group {
    width: 50%;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #services-1303 .cs-item {
    grid-column: span 4;
    border-right: 1px solid #e8e8e8;
  }
  #services-1303 .cs-item:nth-of-type(6) {
    border-right: none;
  }
  #services-1303 .cs-item:nth-of-type(4),
  #services-1303 .cs-item:nth-of-type(5) {
    border-bottom: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1303 .cs-card-group {
    padding: 0;
  }
  #services-1303 .cs-item:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
  }
  #services-1303 .cs-item:hover .cs-h3,
  #services-1303 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #services-1303 .cs-item:hover .cs-item-text {
    opacity: 0.8;
  }

  #services-1303 .cs-item:last-of-type {
    border: none;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1636 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #sbs-1636:before {
    content: "";
    width: 100%;
    height: 70%;
    background: #191919;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbs-1636 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 100px */
    gap: clamp(3rem, 9vw, 6.25rem);
  }
  #sbs-1636 .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;
  }
  #sbs-1636 .cs-flex {
    max-width: 38rem;
  }
  #sbs-1636 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #sbs-1636 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColorWhite);
  }
  #sbs-1636 .cs-text {
    margin-bottom: 1rem;
    opacity: 0.8;
    color: var(--bodyTextColorWhite);
  }
  #sbs-1636 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1636 .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;
  }
  #sbs-1636 .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-1636 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-1636 .cs-picture {
    width: 100%;
    height: 90vw;
    /* 340px - 620px */
    max-height: clamp(21.25rem, 45vw, 38.75rem);
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbs-1636 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-1636:before {
    height: 63%;
  }
  #sbs-1636 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.5rem;
  }
  #sbs-1636 .cs-flex {
    width: 50%;
    text-align: left;
    max-width: 38rem;
  }
  #sbs-1636 .cs-title {
    margin: 0;
  }
}

/*-- -------------------------- -->
<---           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 */
  }
  #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%);
  }
}

.cs-color {
  color: var(--primary);
}