: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: #1f4388;
    --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: "Inter", 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);
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/

/* Mobile - 1023px */
@media only screen and (max-width: 1023px) {
    body.cs-open {
      overflow: hidden;
    }
    body.scroll #cs-navigation {
      /* 53px, same height as the cs-top-container */
      transform: translateY(-3.3125rem);
    }
    #cs-navigation {
      width: 100%;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #1a1a1a;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
      transition: transform .3s;
    }
    #cs-navigation:before {
      content: '';
      width: 100%;
      height: 0vh;
      background: rgba(0, 0, 0, 0.6);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      position: absolute;
      display: block;
      top: 100%;
      right: 0;
      z-index: -1100;
      opacity: 0;
      transition: height .5s, opacity .5s;
    }
    #cs-navigation.cs-active:before {
      height: 150vh;
      opacity: 1;
    }
    #cs-navigation.cs-active .cs-ul-wrapper {
      opacity: 1;
      transform: scaleY(1);
      transition-delay: .15s;
    }
    #cs-navigation.cs-active .cs-li {
      transform: translateY(0);
      opacity: 1;
    }
    #cs-navigation .cs-top-bar {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #cs-navigation .cs-top-container {
      width: 100%;
      padding: 1rem 1.5rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #1a1a1a;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }
    #cs-navigation .cs-top-contact {
      width: auto;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      /* 16px - 24px */
      gap: clamp(1rem, 2vw, 1.5rem);
    }
    #cs-navigation .cs-top-link {
      font-size: 0.875rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColorWhite);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    #cs-navigation .cs-top-link:nth-of-type(2) {
      display: none;
    }
    #cs-navigation .cs-link-icon {
      width: 1rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-top-social {
      visibility: visible;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      transition: opacity .3s, visibility .3s, height .3s;
    }
    #cs-navigation .cs-social-link {
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }
    #cs-navigation .cs-social-icon {
      width: 1.25rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-container {
      width: 100%;
      padding: 1.25rem 1rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
    }
    #cs-navigation .cs-logo {
      width: auto;
      height: 3.5rem;
      margin: 0 auto 0 0;
      padding: 0;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      order: 1;
      z-index: 10;
    }
    #cs-navigation .cs-logo img {
      width: auto;
      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-nav {
      order: 2;
    }
    #cs-navigation .cs-toggle {
      width: 2.875rem;
      height: 2.875rem;
      margin: 0 0 0 auto;
      background-color: var(--primary);
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform .6s;
    }
    #cs-navigation .cs-toggle.cs-active {
      transform: rotate(180deg);
    }
    #cs-navigation .cs-active .cs-line1 {
      top: 50%;
      transform: translate(-50%, -50%) rotate(225deg);
    }
    #cs-navigation .cs-active .cs-line2 {
      top: 50%;
      transform-origin: center;
      transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    }
    #cs-navigation .cs-active .cs-line3 {
      bottom: 100%;
      opacity: 0;
    }
    #cs-navigation .cs-box {
      /* 24px - 28px */
      width: clamp(1.5rem, 2vw, 1.75rem);
      height: 0.75rem;
      position: relative;
    }
    #cs-navigation .cs-line {
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background-color: #FAFBFC;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #cs-navigation .cs-line1 {
      top: 0;
      transform-origin: center;
      transition: transform .5s, top .3S, left .3S;
      animation-duration: .7s;
      animation-timing-function: ease;
      animation-fill-mode: forwards;
      animation-direction: normal;
    }
    #cs-navigation .cs-line2 {
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      transition: top .3s, left .3s, transform .5s;
      animation-duration: .7s;
      animation-timing-function: ease;
      animation-fill-mode: forwards;
      animation-direction: normal;
    }
    #cs-navigation .cs-line3 {
      bottom: 0;
      transition: bottom .3s, opacity .3s;
    }
    #cs-navigation .cs-ul-wrapper {
      width: 100%;
      height: auto;
      padding-bottom: 3rem;
      opacity: 0;
      background-color: #fff;
      box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
      overflow: hidden;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: -1;
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .4s, opacity .3s;
    }
    #cs-navigation .cs-ul {
      margin: 0;
      padding: 3rem 0 0 0;
      width: 100%;
      height: auto;
      max-height: 65vh;
      overflow: scroll;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
    }
    #cs-navigation .cs-li {
      width: 100%;
      text-align: center;
      list-style: none;
      margin-right: 0;
      /* transition from these values */
      transform: translateY(-4.375rem);
      opacity: 0;
      transition: transform .6s, opacity .9s;
    }
    #cs-navigation .cs-li:nth-of-type(1) {
      transition-delay: .05s;
    }
    #cs-navigation .cs-li:nth-of-type(2) {
      transition-delay: .1s;
    }
    #cs-navigation .cs-li:nth-of-type(3) {
      transition-delay: .15s;
    }
    #cs-navigation .cs-li:nth-of-type(4) {
      transition-delay: .2s;
    }
    #cs-navigation .cs-li:nth-of-type(5) {
      transition-delay: .25s;
    }
    #cs-navigation .cs-li:nth-of-type(6) {
      transition-delay: .3s;
    }
    #cs-navigation .cs-li:nth-of-type(7) {
      transition-delay: .35s;
    }
    #cs-navigation .cs-li:nth-of-type(8) {
      transition-delay: .4s;
    }
    #cs-navigation .cs-li:nth-of-type(9) {
      transition-delay: .45s;
    }
    #cs-navigation .cs-li:nth-of-type(10) {
      transition-delay: .5s;
    }
    #cs-navigation .cs-li:nth-of-type(11) {
      transition-delay: .55s;
    }
    #cs-navigation .cs-li:nth-of-type(12) {
      transition-delay: .6s;
    }
    #cs-navigation .cs-li:nth-of-type(13) {
      transition-delay: .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.cs-active {
      color: var(--primary);
    }
    #cs-navigation .cs-li-link:hover {
      color: var(--primary);
    }
    #cs-navigation .cs-button-solid {
      display: none;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #cs-navigation .cs-top-link:nth-of-type(2) {
      display: flex;
    }
  }
  
  /*-- -------------------------- -->
  <---     Navigation Dropdown    -->
  <--- -------------------------- -*/
  
  /* Mobile - 1023px */
  @media only screen and (max-width: 1023px) {
    #cs-navigation .cs-li {
      text-align: center;
      width: 100%;
      display: block;
    }
    #cs-navigation .cs-dropdown {
      position: relative;
      color: var(--bodyTextColorWhite);
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
      height: auto;
      opacity: 1;
      visibility: visible;
      margin: 0.75rem 0 0 0;
      padding: 0.75rem 0;
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
      opacity: 1;
    }
    #cs-navigation .cs-dropdown .cs-li-link {
      position: relative;
      transition: opacity .3s;
    }
    #cs-navigation .cs-drop-icon {
      width: 0.9375rem;
      height: auto;
      position: absolute;
      top: 50%;
      right: -1.25rem;
      transform: translateY(-50%);
    }
    #cs-navigation .cs-drop-ul {
      width: 100%;
      height: 0;
      margin: 0;
      padding: 0;
      background-color: var(--primary);
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      transition: padding .3s, margin .3s, height .3s, opacity .3s, visibility .3s;
    }
    #cs-navigation .cs-drop-li {
      list-style: none;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 2vw, 1.25rem);
      color: #fff;
    }
  }
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #cs-navigation .cs-dropdown {
      position: relative;
    }
    #cs-navigation .cs-dropdown:hover {
      cursor: pointer;
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-ul {
      transform: scaleY(1);
      opacity: 1;
      visibility: visible;
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-li {
      opacity: 1;
      transform: translateY(0);
    }
    #cs-navigation .cs-drop-icon {
      width: 0.75rem;
      height: auto;
      margin-left: 0.25rem;
      display: inline-block;
    }
    #cs-navigation .cs-drop-ul {
      min-width: 12.5rem;
      margin: 0;
      padding: 0;
      background-color: #fff;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
      border-bottom: 5px solid var(--primary);
      /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
      position: absolute;
      top: 100%;
      z-index: -100;
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .3s, visibility .3s, opacity .3s;
    }
    #cs-navigation .cs-drop-li {
      list-style: none;
      font-size: 1rem;
      text-decoration: none;
      opacity: 0;
      width: 100%;
      height: auto;
      display: block;
      transform: translateY(-0.625rem);
      transition: opacity .6s, transform .6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(1) {
      transition-delay: .05s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(2) {
      transition-delay: .1s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(3) {
      transition-delay: .15s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(4) {
      transition-delay: .2s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(5) {
      transition-delay: .25s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(6) {
      transition-delay: .3s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(7) {
      transition-delay: .35s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(8) {
      transition-delay: .4s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(9) {
      transition-delay: .45s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(10) {
      transition-delay: .5s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(11) {
      transition-delay: .55s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(12) {
      transition-delay: .6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(13) {
      transition-delay: .65s;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      font-size: 1rem;
      white-space: nowrap;
      line-height: 1.5em;
      text-decoration: none;
      width: 100%;
      padding: 0.75rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      color: var(--bodyTextColor);
      display: block;
      transition: color 0.3s, background-color 0.3s;
    }
    #cs-navigation .cs-li-link.cs-drop-link:hover {
      color: var(--primary);
      background-color: #f7f7f7;
    }
    #cs-navigation .cs-li-link.cs-drop-link:before {
      display: none;
    }
  }
  
  /*-- -------------------------- -->
  <---     Desktop Navigation     -->
  <--- -------------------------- -*/
  
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    body.scroll #cs-navigation {
      /* 53px, the ssme height as the cs-top-container */
      transform: translateY(-3.3125rem);
    }
    #cs-navigation {
      width: 100%;
      padding: 0;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #1a1a1a;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
      transition: transform .3s;
    }
    #cs-navigation .cs-top-bar {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #cs-navigation .cs-top-container {
      width: 100%;
      max-width: 80rem;
      padding: 1rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 3.125rem;
      position: relative;
      z-index: 1;
    }
    #cs-navigation .cs-top-container:before {
      /* grey background */
      content: '';
      width: 100vw;
      height: 100%;
      background: #1a1a1a;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 50%;
      z-index: -1;
      transform: translateX(-50%);
    }
    #cs-navigation .cs-top-contact {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-top-link {
      font-size: 0.875rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColorWhite);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    #cs-navigation .cs-top-link:hover {
      text-decoration: underline;
    }
    #cs-navigation .cs-link-icon {
      width: 1rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-top-social {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }
    #cs-navigation .cs-social-link {
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform .3s;
    }
    #cs-navigation .cs-social-link:hover {
      transform: scale(1.1);
    }
    #cs-navigation .cs-social-icon {
      width: 1.25rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      margin-bottom: 10px;
      padding: 0 1rem;
      /* prevents padding from affectin gheight */
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 1.5rem;
      position: relative;
    }
    #cs-navigation .cs-toggle {
      display: none;
    }
    #cs-navigation .cs-logo {
      /* 40px - 44px */
      height: clamp(6.0rem, 4vw, 2.75rem);
      /* 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: auto;
      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;
      gap: 3rem;
    }
    #cs-navigation .cs-li {
      list-style: none;
      padding: 1.9375rem 0;
      /* prevent flexbox from squishing it */
      flex: none;
    }
    #cs-navigation .cs-li-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.3vw, 1rem);
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColorWhite);
      display: block;
      position: relative;
      transition: color .3s;
    }
    #cs-navigation .cs-li-link:hover {
      color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-active {
      font-weight: 700;
      color: var(--primary);
    }
    #cs-navigation .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      padding: 0 2rem;
      background-color: var(--primary);
      overflow: hidden;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition: color .3s;
    }
    #cs-navigation .cs-button-solid:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 0%;
      background: var(--secondary);
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width .3s;
    }
    #cs-navigation .cs-button-solid:hover:before {
      width: 100%;
    }
    #cs-navigation .cs-nav-button {
      line-height: 2.875rem;
      margin-left: 1.5rem;
    }
  }
                                  
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-1949 {
      padding: var(--sectionPadding);
      /* 160px - 220px - leaving extra space for the navigation */
      padding-top: clamp(10rem, 26.95vw, 13.75rem);
      padding-bottom: 6.25rem;
      position: relative;
      z-index: 1;
    }
    #hero-1949 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      /* 60px - 180px */
      gap: clamp(3.75rem, 13vw, 11.25rem);
    }
    #hero-1949 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 39.375rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
    }
    #hero-1949 .cs-title,
    #hero-1949 .cs-text {
      margin-bottom: 1.25rem;
    }
    #hero-1949 .cs-title {
      /* 39px - 61px */
      font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    }
    #hero-1949 .cs-text {
      /* 16px - 20px */
      font-size: clamp(1rem, 2vw, 1.25rem);
    }
    #hero-1949 .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;
      /* 32px - 48px */
      padding: 0 clamp(2rem, 4vw, 3rem);
      background-color: var(--primary);
      color: #fff;
      display: inline-block;
      position: relative;
      z-index: 1;
    }
    #hero-1949 .cs-button-solid:before {
      content: '';
      width: 0%;
      height: 100%;
      background: var(--headerColor);
      opacity: 1;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #hero-1949 .cs-button-solid:hover:before {
      width: 100%;
    }
    #hero-1949 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      gap: clamp(1rem, 2.3vw, 1.25rem);
    }
    #hero-1949 .cs-item {
      text-align: left;
      list-style: none;
      width: 100%;
      margin: 0;
      margin-bottom: auto;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      padding: 2rem 0;
      background-color: transparent;
      border-top: var(--headerColor) 1px solid;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      grid-column: span 12;
      grid-row: span 1;
      position: relative;
      z-index: 1;
      align-self: stretch;
    }
    #hero-1949 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      font-weight: bold;
      line-height: 1.2em;
      text-align: inherit;
      margin: 0 0 0.75rem 0;
      color: var(--headerColor);
    }
    #hero-1949 .cs-item-text {
      font-size: 1rem;
      line-height: 1.5em;
      max-width: 28.125rem;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColor);
    }
    #hero-1949 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
    }
    #hero-1949 .cs-background:before {
      /* Overlay */
      content: '';
      width: 100%;
      height: 100%;
      background: #F7F7F7;
      /* prevents the cursor from interacting with it */
      pointer-events: none;
      opacity: 0.9;
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
    }
    #hero-1949 .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-1949 .cs-container {
      align-items: flex-start;
    }
    #hero-1949 .cs-content {
      text-align: left;
      margin-left: 0;
      width: 50%;
      align-items: flex-start;
    }
    #hero-1949 .cs-item {
      grid-column: span 3;
    }
    #hero-1949 .cs-background {
      height: 100%;
    }
    #hero-1949 .cs-background:before {
      height: 100%;
      background: linear-gradient(0deg, rgba(247, 247, 247, 0.95) 26%, rgba(247, 247, 247, 0) 70.26%);
      opacity: 1;
    }
  }
  /* Large Desktop Parallax Effect - 100px */
  @media only screen and (min-width: 100rem) {
    #hero-1949 .cs-background {
      background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Landscapes/architect.jpeg");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      /* creates the parallax effect */
      background-attachment: fixed;
    }
    #hero-1949 .cs-background img {
      display: none;
    }
  }
                                  
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-1285 {
        padding: var(--sectionPadding);
        background-color: #f7f7f7;
        overflow: hidden;
    }
    #sbs-1285 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbs-1285 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 32.625rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbs-1285 .cs-text {
        margin-bottom: 1rem;
    }
    #sbs-1285 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-1285 .cs-ul {
        max-width: 39.375rem;
        margin: 0 0 2rem 0;
        padding: 0;
        /* clips the bullets to create the half circle */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    #sbs-1285 .cs-li {
        list-style: none;
        margin: 0;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.75rem;
        position: relative;
    }
    #sbs-1285 .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-1285 .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-1285 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbs-1285 .cs-image-group {
        /* scales the whole group based on the view width size and stop when that vales equals .845em, resets at desktop */
        font-size: min(2.207vw, 1em);
        width: 34.0625em;
        height: 49.5625em;
        display: block;
        position: relative;
        z-index: 1;
    }
    #sbs-1285 .cs-picture {
        border-radius: 0.5em;
        overflow: hidden;
        position: absolute;
    }
    #sbs-1285 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    #sbs-1285 .cs-picture1 {
        width: 15.25em;
        height: 12.5em;
        top: 0em;
        left: 0em;
    }
    #sbs-1285 .cs-picture2 {
        width: 15.25em;
        height: 16.875em;
        top: 2.5em;
        right: 2.0625em;
    }
    #sbs-1285 .cs-picture3 {
        width: 15.25em;
        height: 16.875em;
        top: 13.75em;
        left: 0;
    }
    #sbs-1285 .cs-picture4 {
        width: 19.375em;
        height: 21.4375em;
        box-shadow: 0px 24px 52px 0px rgba(0, 0, 0, 0.38);
        top: 18.375em;
        right: 0;
        z-index: 10;
    }
    #sbs-1285 .cs-picture5 {
        width: 15.25em;
        height: 16.875em;
        top: 31.875em;
        left: 0em;
    }
    #sbs-1285 .cs-picture6 {
        width: 15.25em;
        height: 11.875em;
        bottom: 0em;
        right: 2.0625em;
    }
    #sbs-1285 .cs-waves-wrapper {
        /* changes to 100% at desktop */
        width: 100vw;
        height: 150%;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: -1;
        /* changes at desktop */
        transform: translateX(-50%);
    }
    #sbs-1285 .cs-waves-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-1285 {
        padding-top: 0;
        padding-bottom: 0;
    }
    #sbs-1285 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #sbs-1285 .cs-content {
        padding: 6.25rem 0;
        align-self: center;
    }
    #sbs-1285 .cs-image-group {
        font-size: min(1.2vw, 1em);
        flex: none;
    }
    #sbs-1285 .cs-picture1 {
        border-radius: 0 0 1rem 1rem;
    }
    #sbs-1285 .cs-picture6 {
        border-radius: 0;
    }
    #sbs-1285 .cs-waves-wrapper {
        width: 110%;
        height: 100%;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%);
    }
}
/* Large Desktop - 1200px */
@media only screen and (min-width: 75rem) {
    #sbs-1285 .cs-container {
        padding-left: 5.5rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
    }
    #sbs-1285 .cs-waves-wrapper {
        width: 43.25rem;
        height: initial;
        left: -5.5rem;
        top: 0;
        bottom: 0;
        transform: none;
    }
}                       
    
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1628 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #services-1628 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1628 .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-1628 .cs-title {
    max-width: 20ch;
  }
  #services-1628 .cs-text {
    max-width: 40rem;
    position: relative;
    z-index: 1;
  }
  #services-1628 .cs-text:after {
    /* divider line */
    content: "";
    width: 100%;
    height: 1px;
    margin-top: 1.5rem;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: relative;
  }
  #services-1628 .cs-chevron {
    --chevronColor: var(--primary);
    width: 3rem;
    height: auto;
  }
  #services-1628 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 1.25rem);
    /* 28px - 40px */
    row-gap: clamp(1.75rem, 2.5vw, 2.5rem);
  }
  #services-1628 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-1628 .cs-item:hover .cs-picture img {
    opacity: .5;
    transform: scale(1.2);
  }
  #services-1628 .cs-link {
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-1628 .cs-picture {
    width: 100%;
    height: 15rem;
    margin-bottom: 1.5rem;
    background-color: #000;
    overflow: hidden;
    display: block;
    position: relative;
  }
  #services-1628 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .6s, opacity .3s;
  }
  #services-1628 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #services-1628 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0 0 1.5rem 0;
    color: var(--bodyTextColor);
  }
  #services-1628 .cs-fake-link {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    margin-top: auto;
    color: var(--primary);
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #services-1628 .cs-fake-link:hover .cs-icon {
    transform: translateX(0.5rem);
  }
  #services-1628 .cs-icon {
    width: 1.25rem;
    height: auto;
    display: block;
    transition: transform .3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1628 .cs-container {
    max-width: 80rem;
  }
  #services-1628 .cs-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #services-1628 .cs-flex {
    text-align: left;
    width: 40vw;
    max-width: 40rem;
    flex: none;
  }
  #services-1628 .cs-title {
    margin: 0;
  }
  #services-1628 .cs-text {
    padding: 0.75rem 0 0.75rem 1.5rem;
  }
  #services-1628 .cs-text:after {
    width: 1px;
    height: 100%;
    margin: 0 1.5rem 0 0;
    order: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  #services-1628 .cs-item {
    grid-column: span 6;
  }
  #services-1628 .cs-picture {
    /* 240px - 420px */
    height: clamp(15rem, 33vw, 26.25rem);
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1628 .cs-item {
    grid-column: span 3;
  }
}
                                

  /*-- -------------------------- -->
<---        Why Choose Us       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-1710 {
      /* moved padding to the container so the cs-picture can be full width */
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    #why-choose-1710 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      /* moved to container instead of section, moves back to the section container at tablet */
      padding: var(--sectionPadding);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 40px - 64px */
      gap: clamp(2.5rem, 3.9vw, 4rem);
      position: relative;
      z-index: 1;
    }
    #why-choose-1710 .cs-container:before {
      /* light grey background overlay */
      content: '';
      width: 100%;
      height: 100%;
      background: #f7f7f7;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: -1;
    }
    #why-choose-1710 .cs-content {
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #why-choose-1710 .cs-title {
      margin: 0;
      max-width: 23ch;
    }
    #why-choose-1710 .cs-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* 16px - 32px */
      gap: clamp(1rem, 3.2vw, 2rem);
    }
    #why-choose-1710 .cs-card-group {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      /* 16px - 32px */
      gap: clamp(1rem, 2vw, 2rem);
    }
    #why-choose-1710 .cs-item {
      list-style: none;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 1rem;
    }
    #why-choose-1710 .cs-item-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
    #why-choose-1710 .cs-item-number {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      margin: 0;
      color: var(--primary);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
    }
    #why-choose-1710 .cs-h3 {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      margin: 0;
      color: var(--headerColor);
    }
    #why-choose-1710 .cs-item-text {
      font-size: 1rem;
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
    }
    #why-choose-1710 .cs-picture {
      width: 100%;
      max-width: 80rem;
      /* 340px - 620px */
      height: clamp(21.25rem, 47vw, 38.75rem);
      display: block;
      position: relative;
      top: 0;
      left: 0;
      z-index: 1;
      /* clips the img from overflowing the container on hover */
      overflow: hidden;
    }
    #why-choose-1710 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    #why-choose-1710 .cs-floater {
      /* 246px - 582px */
      width: clamp(15.375rem, 50vw, 36.375rem);
      height: auto;
      position: absolute;
      right: -4rem;
      top: -0.5rem;
      z-index: -1;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #why-choose-1710 {
      padding: var(--sectionPadding);
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 60px - 100px */
      gap: clamp(3.75rem, 3.9vw, 6.25rem);
    }
    #why-choose-1710 .cs-container {
      padding: 0;
    }
    #why-choose-1710 .cs-container:before {
      width: 130vw;
      height: 180%;
      top: -9.375rem;
      left: 50%;
      transform: translateX(-50%);
    }
    #why-choose-1710 .cs-wrapper {
      flex-direction: row;
      align-items: flex-start;
    }
  }
                                  

  /*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #contact-1392 {
        padding: var(--sectionPadding);
        padding-bottom: 0;
        background-color: #f7f7f7;
        position: relative;
        z-index: 10;
    }
    #contact-1392 .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-1392 .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;
    }

    #contact-1392 .cs-title {
        max-width: 23ch;
    }
    #contact-1392 .cs-text {
        margin-bottom: 1rem;
    }
    #contact-1392 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #contact-1392 .cs-ul {
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        position: relative;
    }
    #contact-1392 .cs-li {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1.25rem;
    }
    #contact-1392 .cs-li:hover .cs-icon-wrapper {
        transform: scale(1.1);
    }
    #contact-1392 .cs-header {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.2em;
        margin-bottom: 0.75rem;
        color: var(--headerColor);
        display: block;
    }
    #contact-1392 .cs-link {
        font-size: 1rem;
        line-height: 1.5em;
        text-decoration: none;
        color: #767676;
        display: block;
        position: relative;
    }
    #contact-1392 .cs-link:hover {
        text-decoration: underline;
    }
    #contact-1392 .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-1392 .cs-icon {
        width: 1.5rem;
        height: auto;
        display: block;
    }
    #contact-1392 .cs-form {
        width: 100%;
        max-width: 39.375rem;
        /* -30px to -100px */
        margin-bottom: calc(clamp(1.875rem, 7vw, 6.25rem) * -1);
        /* 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-1392 .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-1392 .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-1392 .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.5rem;
        border: none;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #contact-1392 .cs-input::placeholder {
        color: #7d799c;
        opacity: 0.6;
    }
    #contact-1392 .cs-textarea {
        min-height: 7.5rem;
        padding-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-family: inherit;
    }
    #contact-1392 .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-1392 .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-1392 .cs-button-solid:hover {
        color: var(--primary);
    }
    #contact-1392 .cs-button-solid:hover:before {
        width: 100%;
    }
    #contact-1392 .cs-submit {
        width: 100%;
        min-width: 12.5rem;
        border: none;
    }
    #contact-1392 .cs-submit:hover {
        color: #fff;
        cursor: pointer;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #contact-1392 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
    }
    #contact-1392 .cs-content {
        width: 47%;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #contact-1392 .cs-submit {
        width: auto;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #contact-1392 .cs-form {
        width: 46%;
        max-width: 36.125rem;
    }
    #contact-1392 .cs-submit {
        width: auto;
    }
}
/* Large Desktop - 1500px */
@media only screen and (min-width: 93.75rem) {
    #contact-1392 .cs-graphic {
        display: block;
    }
}

/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #footer-1392 {
        padding: var(--sectionPadding);
        /* 80px - 100px */
        padding-top: clamp(5rem, 7vw, 6.25rem);
        background-color: #f7f7f7;
        position: relative;
        z-index: 1;
    }
    #footer-1392 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #footer-1392 .cs-top {
        width: 100%;
        margin-bottom: 2.5rem;
        /* 24px - 64px */
        padding-bottom: clamp(1.5rem, 5vw, 4rem);
        border-bottom: 1px solid #484848;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 24px - 40px */
        gap: clamp(1.25rem, 4vw, 2.5rem);
    }
    #footer-1392 .cs-ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        row-gap: 0.5rem;
        /* 24px - 36px */
        column-gap: clamp(1.5rem, 4vw, 2.25rem);
    }
    #footer-1392 .cs-li {
        list-style: none;
    }
    #footer-1392 .cs-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: black;
        display: block;
        transition: color 0.3s;
    }
    #footer-1392 .cs-link:hover {
        color: var(--primary);
    }
    #footer-1392 .cs-logo {
        width: 100%;
        max-width: 13.0625rem;
        height: auto;
        display: block;
    }
    #footer-1392 .cs-logo-img {
        width: 100%;
        height: auto;
        display: block;
    }
    #footer-1392 .cs-bottom {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    #footer-1392 .cs-social {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    #footer-1392 .cs-social-li {
        list-style: none;
    }
    #footer-1392 .cs-social-link {
        width: 2rem;
        height: 2rem;
        background-color: black;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }
    #footer-1392 .cs-social-link:hover {
        background-color: var(--primary);
    }
    #footer-1392 .cs-social-link:hover .cs-social-icon {
        filter: grayscale(1) brightness(1000%);
        opacity: 1;
    }
    #footer-1392 .cs-social-icon {
        width: 0.75rem;
        height: auto;
        display: block;
        opacity: 0.6;
        transition: opacity 0.3s;
    }
    #footer-1392 .cs-copyright {
        font-size: 1rem;
        color: black;
        line-height: 1.5em;
        margin: 0;
        display: block;
    }
    #footer-1392 .cs-copyright-link,
    #footer-1392 .cs-separater {
        font-size: 1rem;
        text-decoration: none;
        color: black;
        transition: color 0.3s;
    }
    #footer-1392 .cs-copyright-link:hover,
    #footer-1392 .cs-separater:hover {
        color: var(--primary);
    }
    #footer-1392 .cs-separater {
        margin: 0 1rem;
        display: inline-block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #footer-1392 .cs-top {
        align-items: flex-start;
    }
    #footer-1392 .cs-bottom {
        flex-direction: row;
        justify-content: center;
    }
    #footer-1392 .cs-flex {
        margin: 0 auto;
    }
    #footer-1392 .cs-social {
        /* sends it to the right in the 3rd position */
        order: 3;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #banner-1403 {
        padding: var(--sectionPadding);
        /* 190px - 268px */
        padding-top: clamp(11.875rem, 25vw, 16.75rem);
        padding-bottom: 6.25rem;
        /* clips the line from causing overflow issues for going off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #banner-1403 .cs-container {
        text-align: center;
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        /* 8px - 12px */
        gap: clamp(0.5rem, 1vw, 0.75rem);
    }
    #banner-1403 .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-1403 .cs-breadcrumbs {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #banner-1403 .cs-link {
        font-size: 1rem;
        line-height: 1.2em;
        text-decoration: none;
        color: var(--bodyTextColorWhite);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #banner-1403 .cs-link:last-of-type {
        /* remove the chevron on the last list item */
    }
    #banner-1403 .cs-link:last-of-type::after {
        display: none;
    }
    #banner-1403 .cs-link:after {
        /* chevron */
        content: "";
        width: 0.4375rem;
        height: 0.75rem;
        margin: 0 1rem;
        background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/white-chev.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        display: block;
    }
    #banner-1403 .cs-link.cs-active {
        color: var(--primary);
    }
    #banner-1403 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #banner-1403 .cs-background:before {
        /* gradient overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.4;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #banner-1403 .cs-background:after {
        /* gradient overlay */
        content: "";
        width: 100%;
        height: 40%;
        background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#000000),
            to(rgba(0, 0, 0, 0))
        );
        background: -o-linear-gradient(top, #000000 0%, rgba(0, 0, 0, 0) 100%);
        background: linear-gradient(
            to bottom,
            #000000 0%,
            rgba(0, 0, 0, 0) 100%
        );
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 2;
    }
    #banner-1403 .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) {
    #banner-1403 .cs-background:before {
        width: 50%;
        height: 100%;
        background: -webkit-gradient(
            linear,
            left top,
            right top,
            from(#000000),
            to(rgba(0, 0, 0, 0))
        );
        background: -o-linear-gradient(left, #000000 0%, rgba(0, 0, 0, 0) 100%);
        background: linear-gradient(
            to right,
            #000000 0%,
            rgba(0, 0, 0, 0) 100%
        );
        opacity: 1;
    }
}

/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #contact-1403 {
        padding: var(--sectionPadding);
        padding-bottom: 0;
        background-color: #f7f7f7;
        position: relative;
        z-index: 10;
    }
    #contact-1403 .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-1403 .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;
    }

    #contact-1403 .cs-title {
        max-width: 23ch;
    }
    #contact-1403 .cs-text {
        margin-bottom: 1rem;
    }
    #contact-1403 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #contact-1403 .cs-ul {
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        position: relative;
    }
    #contact-1403 .cs-li {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1.25rem;
    }
    #contact-1403 .cs-li:hover .cs-icon-wrapper {
        transform: scale(1.1);
    }
    #contact-1403 .cs-header {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.2em;
        margin-bottom: 0.75rem;
        color: var(--headerColor);
        display: block;
    }
    #contact-1403 .cs-link {
        font-size: 1rem;
        line-height: 1.5em;
        text-decoration: none;
        color: #767676;
        display: block;
        position: relative;
    }
    #contact-1403 .cs-link:hover {
        text-decoration: underline;
    }
    #contact-1403 .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-1403 .cs-icon {
        width: 1.5rem;
        height: auto;
        display: block;
    }
    #contact-1403 .cs-form {
        width: 100%;
        max-width: 39.375rem;
        /* -30px to -100px */
        margin-bottom: calc(clamp(1.875rem, 7vw, 6.25rem) * -1);
        /* 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-1403 .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-1403 .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-1403 .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.5rem;
        border: none;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #contact-1403 .cs-input::placeholder {
        color: #7d799c;
        opacity: 0.6;
    }
    #contact-1403 .cs-textarea {
        min-height: 7.5rem;
        padding-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-family: inherit;
    }
    #contact-1403 .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-1403 .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-1403 .cs-button-solid:hover {
        color: var(--primary);
    }
    #contact-1403 .cs-button-solid:hover:before {
        width: 100%;
    }
    #contact-1403 .cs-submit {
        width: 100%;
        min-width: 12.5rem;
        border: none;
    }
    #contact-1403 .cs-submit:hover {
        color: #fff;
        cursor: pointer;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #contact-1403 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
    }
    #contact-1403 .cs-content {
        width: 47%;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #contact-1403 .cs-submit {
        width: auto;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #contact-1403 .cs-form {
        width: 46%;
        max-width: 36.125rem;
    }
    #contact-1403 .cs-submit {
        width: auto;
    }
}
/* Large Desktop - 1500px */
@media only screen and (min-width: 93.75rem) {
    #contact-1403 .cs-graphic {
        display: block;
    }
}

/*-- -------------------------- -->
<---    Google Maps Iframe      -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #map-1403 iframe {
        width: 100%;
        /* 400px - 560px */
        height: clamp(25rem, 42vw, 35rem);
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-1403 {
        /* centers the button */
        text-align: center;
        padding: var(--sectionPadding);
        /* clips the orbs from causing overflow issues */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #reviews-1403 .cs-container {
        width: 100%;
        /* changes to 1024px at tablet */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #reviews-1403 .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-1403 .cs-topper {
        font-size: var(--topperFontSize);
        line-height: 1.2em;
        text-transform: uppercase;
        text-align: inherit;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.25rem;
        display: block;
    }
    #reviews-1403 .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;
    }
    #reviews-1403 .cs-title {
        max-width: 20ch;
        margin: 0;
    }
    #reviews-1403 .cs-card-group {
        width: 100%;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 2.5vw, 1.15rem);
    }
    #reviews-1403 .cs-item {
        list-style: none;
        text-align: left;
        /* 20px - 60px */
        padding: clamp(1rem, 4vw, 3.75rem);
        background-color: #fff;
        /* 12px - 24px */
        border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        /* clips the pseudo box from overflowing */
        overflow: hidden;
        display: flex;
        grid-column: span 12;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        position: relative;
        z-index: 1;
    }
    #reviews-1403 .cs-item:before {
        /* background color */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 0.05;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
        /* prevents the mouse from interacting it */
        pointer-events: none;
    }
    #reviews-1403 .cs-quote {
        /* 72px - 120px */
        width: clamp(4.5rem, 10vw, 7.5rem);
        height: auto;
        /* 32px - 64px */
        margin-bottom: clamp(2rem, 6vw, 4rem);
        display: block;
    }
    #reviews-1403 .cs-item-text {
        /* 16px - 25px */
        font-size: clamp(1rem, 2.6vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: bold;
        margin: 0;
        /* 24px - 64px */
        margin-bottom: clamp(1.5rem, 6vw, 4rem);
        color: var(--bodyTextColor);
    }
    #reviews-1403 .cs-flex-group {
        /* 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;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* 8px - 24px */
        gap: clamp(0.8rem, 1.5vw, 1rem);
    }
    #reviews-1403 .cs-profile {
        /* 40px - 52px */
        width: clamp(2.5rem, 5vw, 3.25rem);
        height: clamp(2.5rem, 5vw, 3.25rem);
        margin: 0;
        border-radius: 50%;
        box-sizing: border-box;
        border: 2px solid #fff;
        /* clips image corners to make circle */
        overflow: hidden;
        position: relative;
        display: block;
    }
    #reviews-1403 .cs-profile img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes the image behave like a background image */
        object-fit: cover;
    }
    #reviews-1403 .cs-name {
        /* 16px - 25px */
        font-size: clamp(1rem, 2.5vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
        display: block;
    }
    #reviews-1403 .cs-job {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        font-weight: 400;
        margin: 0;
        color: #746f95;
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #reviews-1403 .cs-container {
        max-width: 80rem;
    }
    #reviews-1403 .cs-item {
        grid-column: span 6;
    }
}

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

/* 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;
        margin-top: 100px;
        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;
    }
}

/*-- -------------------------- -->
<---          Services   6 cards       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1253 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 10;
  }
  #services-1253 .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-1253 .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-1253 .cs-title {
    max-width: 20ch;
  }
  #services-1253 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #services-1253 .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-1253 .cs-item:hover .cs-item-background img {
    opacity: 0.4;
    transform: scale(1.3);
  }
  #services-1253 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #services-1253 .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-1253 .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-1253 .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-1253 .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-1253 .cs-item-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-1253 .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-1253 .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-1253 .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-1253 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #services-1253 .cs-title {
    margin: 0;
  }
  #services-1253 .cs-flex-group {
    width: 50%;
  }
  #services-1253 .cs-item {
    grid-column: span 4;
  }
}
                                

/*-- -------------------------- -->
<---          Services Page 3 cards        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-1251 {
        padding: var(--sectionPadding);
        position: relative;
        z-index: 10;
    }
    #services-1251 .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-1251 .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-1251 .cs-title {
        max-width: 20ch;
    }
    #services-1251 .cs-card-group {
        margin: 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 2.5vw, 1.25rem);
    }
    #services-1251 .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-1251 .cs-item:hover .cs-item-background img {
        opacity: 0.4;
        transform: scale(1.3);
    }
    #services-1251 .cs-item:hover .cs-h3 {
        color: var(--primary);
    }
    #services-1251 .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-1251 .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-1251 .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-1251 .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-1251 .cs-item-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #services-1251 .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-1251 .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-1251 .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-1251 {
        padding-bottom: 0;
    }
    #services-1251 .cs-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 3rem;
    }
    #services-1251 .cs-title {
        margin: 0;
    }
    #services-1251 .cs-flex-group {
        width: 50%;
    }
    #services-1251 .cs-item {
        grid-column: span 4;
    }
}