/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-855 {
    /* 116px - 164px top */
    /* 60px - 100px  bottom */
    /* padding: clamp(7.25rem, 16.82vw, 10.25rem) 1rem clamp(3.75rem, 7.82vw, 6.25rem);
    background-color: #f7f7f7;
    background-image: url('/assets/images/temporary/home4/image.png');
    background-size: cover;
    background-position: center;
    background-clip: padding-box;
    /* clips the svg wave from overflowing */
    /* overflow: hidden; */
    /* position: relative; */
    /* z-index: 1;  */
    overflow: hidden;
    position: relative;
    z-index: 1;
    position: relative;
    overflow: hidden;
    padding-bottom: 1rem;
  }

  #hero-855 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-855 .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: #111926;
    opacity: 0.8;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-855 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: fill;
  }

  #hero-855 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3rem;
  }
  #hero-855 .cs-content {
    max-width: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #hero-855 .cs-topper {
    font-size: 1rem;
    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;
  }
  #hero-855 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    /* 23 characters including spaces wide */
    max-width: 23ch;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    text-transform: uppercase;
    /* color: white; */
    position: relative;

    color: white;
    text-shadow: 1px 2px 2px black;
  }
  #hero-855 .cs-title-under {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 2.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    text-transform: uppercase;
    /* 23 characters including spaces wide */
    max-width: 22ch;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    /* color: white; */
    position: relative;

    color: white;
    text-shadow: 1px 2px 2px black;
  }
  #hero-855 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    max-width: 45rem;
    /* 28px - 40px */
    margin: 0 0 clamp(1.75rem, 3.92vw, 2.5rem) 0;
    text-shadow: 1px 1px 1px black;
    color: white;
  }
  #hero-855 .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;
  }
  #hero-855 .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;
  }
  #hero-855 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-855 .cs-picture {
    width: 100%;
    max-width: 35.625rem;
    /* 400px - 712px */
    height: clamp(25rem, 95vw, 44.5rem);
    /* 100px - 200px */
    border-radius: 0 clamp(6.25rem, 17vw, 12.5rem) 0
      clamp(6.25rem, 17vw, 12.5rem);
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.16);
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
  }
  #hero-855 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    /* ensures the top of the images is at the top of the container, no heads getting cut off */
    object-position: top;
  }
  #hero-855 .cs-wave {
    /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
    width: 320%;
    height: auto;
    display: block;
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    z-index: -1;
    background-color: #f7f7f7; /* Matches the section background */
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-855 {
    /* text-align: left;
    background-image: url('../assets/images/temporary/home4/image.png'); */

    background-image: url("/assets/images/home2/dark-bolt.jpg");
    background-position: bottom center, center center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% auto, cover;
    background-color: #f7f7f7;
    position: relative;
    overflow: hidden;
  }
  #hero-855 .cs-container {
    flex-direction: row;
    justify-content: center;
    padding-bottom: clamp(6rem, 20vw, 12rem);
    padding-top: clamp(6rem, 20vw, 12rem);
  }
  #hero-855 .cs-content {
    width: 40vw;
    /* prevents flex-box from squishing it */
    flex: none;
    align-items: center;
  }
  #hero-855 .cs-title,
  #hero-855 .cs-text {
    text-align: center;
  }
  #hero-855 .cs-picture {
    /* 623px - 814px */
    height: clamp(38.9375rem, 60vw, 50.875rem);
  }
  #hero-855 .cs-wave {
    width: 100%;
    left: 0;
    transform: none;
  }
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1115 {
    /* 200px - 300px top */
    padding: clamp(0.5rem, 2.82vw, 8.75rem) 0.1rem 6.25rem;

    background-color: #f7f7f7;
    /* clips the svg wave from overflowing */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-1115:before {
    /* textured pattern */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    /* changes to a desktop image at tablet */
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/splatter-bg-m.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    /* prevents the mouse from interacting with itand also in dev tool mode */
    pointer-events: none;
  }
  #hero-1115 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3rem;
  }
  #hero-1115 .cs-content {
    max-width: 39.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #hero-1115 .cs-topper {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #767676;
    margin-bottom: 0.25rem;
    display: block;
  }
  #hero-1115 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    /* 23 characters including spaces wide */
    max-width: 23ch;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #hero-1115 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    max-width: 45rem;
    /* 28px - 40px */
    margin: 0 0 clamp(1.75rem, 3.92vw, 2.5rem) 0;
    color: var(--bodyTextColor);
  }
  #hero-1115 .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;
  }
  #hero-1115 .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;
  }
  #hero-1115 .cs-button-solid:hover:before {
    width: 100%;
  }

  #hero-1115 .cs-button-solid-other {
    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;
  }
  #hero-1115 .cs-button-solid-other:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--primary);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #hero-1115 .cs-button-solid-other:hover:before {
    width: 100%;
  }
  #hero-1115 .cs-image-group-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    position: relative;
  }
  #hero-1115 .cs-image-group {
    /* we use ems for everything inside the cs-image-group so they pull their value for em from the cs-image-group container that we set.  This min-max property lets us tie the font size to the view width of the screen and grows proportionally with every pixel wide the screen gets until the value the view width units = .75em, resets at small desktop */
    font-size: min(2.2vw, 0.75em);
    width: 40.8125em;
    height: 38.625em;
    position: relative;
    z-index: 2;
  }
  #hero-1115 .cs-floater {
    /* 50px - 120px */
    width: clamp(3.125rem, 8vw, 7.5rem);
    height: clamp(3.125rem, 8vw, 7.5rem);
    background-color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 8.125em;
    /* changes to -74px at large desktop */
    left: -2.1875em;
    transform: rotate(-15deg);
  }
  #hero-1115 .cs-floater-icon {
    width: 3.25em;
    height: auto;
  }
  #hero-1115 .cs-picture {
    width: 40.6875em;
    height: 32.6875em;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    position: absolute;
    left: 50%;
    top: 5.9375em;
    transform: translateX(-50%);
  }
  #hero-1115 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
  #hero-1115 .cs-picture1 {
    /* we set a height on the top image to cut off the bottom of it and hide it with overflow:hidden where the curved bottom picture meets it. The top image is what overlaps the "curve" of the bottom image.  */
    height: 100%;
    transform: translateX(-50%);
    /* clips the bottom left corner of the top image to match the curve of the bottom one because it was too long */
    /* border-radius: 0 0 0 25%; */
  }
  #hero-1115 .cs-picture2 {
    border-radius: 0 0 55% 55%;
  }
  #hero-1115 .cs-graphic {
    width: 36.625em;
    height: auto;
    position: absolute;
    z-index: -1;
  }
  #hero-1115 .cs-graphic1 {
    top: 0;
    right: 0;
  }
  #hero-1115 .cs-graphic2 {
    bottom: 0;
    left: 0;
  }
  #hero-1115 .cs-donations {
    /* 12px - 20px */
    padding: clamp(0.75rem, 2.5vw, 1.25rem);
    /* prevent padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    /* 8px - 12px */
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    position: absolute;
    top: -0.625em;
    right: 0;
  }
  #hero-1115 .cs-donations-icon {
    /* 12px - 20px */
    width: clamp(0.75rem, 2vw, 1.25rem);
    height: auto;
  }
  #hero-1115 .cs-donations-icon-wrapper {
    /* 32px - 48px */
    width: clamp(2rem, 4vw, 3rem);
    height: clamp(2rem, 4vw, 3rem);
    background-color: var(--primaryLight);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #hero-1115 .cs-donations-flex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
  #hero-1115 .cs-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 4px - 8px */
    gap: clamp(0.25rem, 1vw, 0.5rem);
  }
  #hero-1115 .cs-progress {
    /* 100px - 160px */
    width: clamp(6.25rem, 8vw, 10rem);
    /* 4px - 8px */
    height: clamp(0.25rem, 1vw, 0.5rem);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #e8e8e8;
  }
  #hero-1115 .cs-progress-bar {
    width: var(--progress);
    height: 100%;
    background-color: var(--secondary);
    border-radius: 0.5rem;
    display: block;
  }
  #hero-1115 .cs-percentage {
    font-size: 0.75rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: #4e4b66;
    display: block;
  }
  #hero-1115 .cs-volunteer {
    /* 20px - 24px tpo & bottom */
    /* 16px - 20px left & right */
    padding: clamp(1rem, 2vw, 1.25rem) clamp(1.25rem, 2.5vw, 1.5rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    /* 8px - 16px */
    gap: clamp(0.5rem, 2vw, 1rem);
    position: relative;
    z-index: -1;
  }
  #hero-1115 .cs-volunteer-flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  #hero-1115 .cs-header {
    /* 12px - 20px */
    font-size: clamp(0.75rem, 2vw, 1.25rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
  }
  #hero-1115 .cs-volunteer-img {
    /* 36px 48px */
    width: clamp(2.25rem, 3vw, 3rem);
    height: auto;
    margin: 0 -1rem 0 0;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: #fff;
  }
  #hero-1115 .cs-volunteer-number {
    /* 12px - 16px */
    font-size: clamp(0.75rem, 2vw, 1rem);
    font-weight: 700;
    /* 36px 48px */
    width: clamp(2.25rem, 3vw, 3rem);
    height: clamp(2.25rem, 3vw, 3rem);
    background-color: var(--secondary);
    color: var(--headerColor);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #hero-1115 .cs-arrow {
    /* 60px - 130px */
    width: clamp(3.75rem, 10.5vw, 8.125rem);
    height: auto;
    position: absolute;
    bottom: 110%;
    left: -0.625rem;
    transform: rotate(-66deg);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1115 .cs-image-group {
    font-size: min(1.13vw, 1em);
    /* pushes down to create the space for the cs-volunteer to drop down 68px, since its positioned relative to the cs-image-group-wrapper div at bottom 0, the marign-bottom on the cs-image-group pushes down on the wrapper div, making the cs-volunteer drop down with it since it is positioned to the bottom of the wrapper div */
    margin-bottom: 4.25rem;
  }
  #hero-1115 .cs-donations {
    left: 50%;
    transform: translateX(-50%);
  }
  #hero-1115 .cs-volunteer {
    position: absolute;
    left: -7.1875rem;
    bottom: 0;
    z-index: 10;
  }
  #hero-1115 .cs-arrow {
    bottom: 95%;
    left: 2.375rem;
    transform: rotate(0);
    z-index: -1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-1115 {
    text-align: left;
  }
  #hero-1115 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #hero-1115 .cs-content {
    width: 40vw;
    /* prevents flex-box from squishing it */
    flex: none;
    align-items: center;
  }
  #hero-1115 .cs-title,
  #hero-1115 .cs-text {
    text-align: left;
  }
}
/* Large Desktop - 1400px */
@media only screen and (min-width: 87.5rem) {
  #hero-1115 .cs-image-group-wrapper {
    /* 48px - 160px */
    right: calc(clamp(2rem, 3vw, 10rem) * -1);
  }
  #hero-1115 .cs-image-group {
    margin: 0;
    z-index: 10;
  }
  #hero-1115 .cs-floater {
    left: -4.625rem;
  }
  #hero-1115 .cs-volunteer {
    left: -20.0625rem;
    bottom: 1.25rem;
    z-index: -1;
  }
  #hero-1115 .cs-arrow {
    left: 12.5rem;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1493 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    background-color: #fff;
    overflow: hidden;
  }
  #services-1493 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 56.25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 15;
  }
  #services-1493 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    width: 100%;
    /* set text align to left if content needs to be left aligned */
    text-align: center;
  }
  #services-1493 .cs-title {
    max-width: 23ch;
  }
  #services-1493 .cs-card-group {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(305px, 1fr));
    margin: 0;
    width: 100%;
    padding: 0;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1493 .cs-item {
    text-align: center;
    list-style: none;
    /* 16px - 24px */
    padding: 1.5rem clamp(1rem, 2.4vw, 1.5rem);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    /* 40px - 60px */
    border-radius: clamp(2.5rem, 5vw, 3.75rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s;
  }
  #services-1493 .cs-item:hover {
    border-color: var(--secondary);
  }
  #services-1493 .cs-item:hover .cs-picture img {
    transform: scale(1.2);
  }
  #services-1493 .cs-item:hover .cs-h3,
  #services-1493 .cs-item:hover .cs-link {
    color: var(--primary);
  }
  #services-1493 .cs-item:hover .cs-arrow {
    filter: initial;
  }
  #services-1493 .cs-image-group {
    /* done in ems so we can use font size to scale it on desktop */
    width: 16.0625em;
    height: 12.5em;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 2.4vw, 1.5rem);
    position: relative;
    z-index: 1;
  }
  #services-1493 .cs-picture {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    /* clips the image from overflowing parent on hover */
    overflow: hidden;
  }
  #services-1493 .cs-picture img {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.65s;
  }
  #services-1493 .cs-mask {
    /* SVG Colors */
    --maskBorder: #e8e8e8;
    --maskBG: #fff;
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
  }
  #services-1493 .cs-info {
    display: flex;
    flex-direction: column;
  }
  #services-1493 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    text-align: inherit;
    line-height: 1.5em;
    font-weight: 700;
    width: 100%;
    margin: 0 0 0.5rem 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    color: var(--headerColor);
    transition: background-color 0.3s;
    transition: color 0.3s;
  }
  #services-1493 .cs-ages {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--secondary);
  }
  #services-1493 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    max-width: 50ch;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 2.4vw, 1.5rem);
    width: 100%;
    color: var(--bodyTextColor);
  }
  #services-1493 .cs-link {
    font-size: 1rem;
    text-decoration: none;
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.3s;
  }
  #services-1493 .cs-link:hover .cs-arrow {
    transform: translateX(0.25rem);
  }
  #services-1493 .cs-arrow {
    display: block;
    height: auto;
    width: 1.25rem;
    transition: filter 0.3s, transform 0.3s;
  }
  #services-1493 .cs-hills {
    /* hills Color */
    --hillBG: #f2faf8;
    width: 130%;
    min-width: 120rem;
    height: auto;
    position: absolute;
    /* positions off of the top at desktop */
    bottom: -6.25rem;
    left: 50%;
    transform: translateX(-50%);
  }
  #services-1493 .cs-wrapper {
    width: 110vw;
    max-width: 106.25rem;
    height: 50%;
    display: none;
    position: absolute;
    /* 60px - 100px (same as the padding bottom of the section ) */
    bottom: clamp(3.75rem, 7.82vw, 6.25rem);
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
  }
  #services-1493 .cs-floater {
    position: absolute;
  }
  #services-1493 .cs-floater1 {
    left: 0;
    top: -13.75rem;
  }
  #services-1493 .cs-floater2 {
    bottom: -3.125rem;
    right: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1493 .cs-container {
    max-width: 80rem;
  }
  #services-1493 .cs-card-group {
    grid-template-columns: repeat(9, 1fr);
  }
  #services-1493 .cs-item {
    grid-column: span 3;
  }
  #services-1493 .cs-image-group {
    /* scaling it down so it all fits proportionally */
    font-size: min(1.2vw, 1em);
  }
  #services-1493 .cs-wrapper {
    display: block;
  }
  #services-1493 .cs-hills {
    top: 50%;
    bottom: auto;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-2333 {
    background-color: #f7f7f7;
    padding: var(--sectionPadding);
  }
  #services-2333 .cs-container {
    box-shadow: 4px 4px 20px 2px #0000005e;
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375rem;
    margin: auto;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 2rem;
  }
  #services-2333 .cs-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    position: relative;
    z-index: 1;
    border-radius: 2rem;
  }
  #services-2333 .cs-content-wrapper:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.05;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 2rem;
  }
  #services-2333 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    padding: 3rem clamp(1rem, 4vw, 4rem) 0;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    border-radius: 2rem;
  }
  #services-2333 .cs-content-picture {
    width: 100%;
    max-width: 25rem;
    height: auto;
  }
  #services-2333 .cs-content-picture img {
    width: 100%;
    height: auto;
    display: block;
  }
  #services-2333 .cs-title {
    max-width: 20ch;
  }
  #services-2333 .cs-text {
    max-width: 40rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
  }
  #services-2333 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #services-2333 .cs-button-solid {
    border-radius: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #services-2333 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #services-2333 .cs-button-solid:hover:before {
    width: 100%;
  }
  #services-2333 .cs-card-wrapper {
    /* 32px - 48px top & Bottom */
    /* 16px - 48px left & right */
    padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 4vw, 4rem);
  }
  #services-2333 .cs-header {
    font-size: 13/16rem;
    text-transform: uppercase;
    line-height: 1.2em;
    font-weight: 700;
    /* 16px - 20px */
    margin: 0 0 clamp(1rem, 3vw, 1.25rem);
    color: var(--primary);
    display: block;
  }
  #services-2333 .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);
    row-gap: 2rem;
  }
  #services-2333 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-2333 .cs-item:hover .cs-picture img {
    opacity: 0.5;
    transform: scale(1.2);
  }
  #services-2333 .cs-link {
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-2333 .cs-picture {
    border-radius: 0.25rem;
    width: 100%;
    height: 56vw;
    max-height: 19.25rem;
    margin-bottom: 1.5rem;
    background-color: #000;
    overflow: hidden;
    display: block;
    position: relative;
  }
  #services-2333 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s, opacity 0.3s;
  }
  #services-2333 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #services-2333 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0 0 1.5rem 0;
    color: var(--bodyTextColor);
  }
  #services-2333 .cs-fake-link {
    font-size: 1rem;
    text-transform: uppercase;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    margin-top: auto;
    padding-bottom: 8px;
    color: var(--headerColor);
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
  }
  #services-2333 .cs-fake-link:hover .cs-icon {
    transform: translateX(0.2rem) rotate(45deg);
  }
  #services-2333 .cs-fake-link:before {
    content: "";
    width: 100%;
    height: 1px;
    background: var(--headerColor);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #services-2333 .cs-icon {
    width: 1.25rem;
    height: auto;
    display: block;
    transition: transform 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-2333 .cs-container {
    max-width: 90rem;
  }
  #services-2333 .cs-content-wrapper {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 0;
  }
  #services-2333 .cs-content {
    padding-left: 0;
    padding-bottom: 3rem;
  }
  #services-2333 .cs-content-picture {
    order: -1;
  }
  #services-2333 .cs-item {
    grid-column: span 4;
  }
  #services-2333 .cs-picture {
    height: 26vw;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-2333 .cs-container {
    flex-direction: row;
    align-items: stretch;
  }
  #services-2333 .cs-content-wrapper {
    max-width: 25.8125rem;
    height: auto;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
  }
  #services-2333 .cs-content {
    padding-left: 3rem;
  }
  #services-2333 .cs-content-picture {
    order: 1;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-962 {
    padding: var(--sectionPadding);
    background-color: #1a1a1a;
    position: relative;
    z-index: 1;
  }
  #services-962 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-962 .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-962 .cs-title {
    margin: 0;
    max-width: 20ch;
    color: var(--bodyTextColorWhite);
  }
  #services-962 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #services-962 .cs-item {
    list-style: none;
    text-align: left;
    width: 100%;
    /* 24px - 32px */
    padding: clamp(1.5rem, 2.5vw, 2rem);
    background-color: #1a1a1a;
    border: 1px solid #484848;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
  }
  #services-962 .cs-item:hover {
    transform: translateY(-0.5rem);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #services-962 .cs-item-link {
    text-decoration: none;
  }
  #services-962 .cs-icon {
    width: 3rem;
    height: auto;
    margin-bottom: 1.25rem;
    display: block;
  }
  #services-962 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--bodyTextColorWhite);
    font-weight: bold;
  }
  #services-962 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #services-962 .cs-background {
    width: 100%;
    height: 22.1875rem;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  #services-962 .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) {
  #services-962 .cs-container {
    max-width: 80rem;
  }
  #services-962 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
  #services-962 .cs-card-group {
    display: flex;
    justify-content: center;
    /* makes sure every box "stretches" to be the same height as the tallest box */
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  #services-962 .cs-item {
    width: clamp(31.85%, 30.5vw, 32.28%);
  }
  #services-962 .cs-background {
    width: 50vw;
    height: 100%;
    /* 64px - 120px */
    margin-left: clamp(4rem, 10vw, 7.5rem);
    left: 50%;
  }
}

/*-- -------------------------- -->
<---           Events           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #events-2049 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
  }
  #events-2049:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #events-2049 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #events-2049 .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;
    z-index: 1;
  }
  #events-2049 .cs-text {
    margin-bottom: 2rem;
  }
  #events-2049 .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;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #events-2049 .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;
  }
  #events-2049 .cs-button-solid:hover {
    color: var(--primary);
  }
  #events-2049 .cs-button-solid:hover:before {
    width: 100%;
  }
  #events-2049 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0.5rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    z-index: 1;
  }
  #events-2049 .cs-item {
    list-style: none;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-column: span 12;
    /* 32px - 48px */
    gap: clamp(2rem, 3vw, 3rem);
  }
  #events-2049 .cs-item:hover .cs-picture img {
    transform: scale(1.1);
  }
  #events-2049 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #events-2049 .cs-item:first-of-type .cs-dot:before {
    top: 0rem;
  }
  #events-2049 .cs-item:last-of-type .cs-text-box:before {
    /* this covers the bottom of the last card to mask the line from the cs-dot :after element */
    content: "";
    width: 100%;
    /* 16px - 32px - matchs the padding of the cs-text-box */
    height: clamp(1rem, 4vw, 2rem);
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    z-index: 10;
  }
  #events-2049 .cs-picture {
    width: 100%;
    height: 11.25rem;
    box-sizing: border-box;
    background-color: #dab692;
    /* clips img tag from overflowing it on hover */
    overflow: hidden;
    border-radius: 0.5rem;
    display: block;
    position: relative;
  }
  #events-2049 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s;
  }
  #events-2049 .cs-text-box {
    text-align: left;
    width: 100%;
    /* 16px - 32px */
    padding: clamp(1rem, 4vw, 2rem);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    z-index: 1;
    position: relative;
  }
  #events-2049 .cs-wrapper {
    /* 16px - 48px */
    margin-left: clamp(1rem, 5vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #events-2049 .cs-flex {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #events-2049 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: 700;
    line-height: 120%;
    width: 100%;
    margin: 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #events-2049 .cs-date {
    font-size: 1rem;
    line-height: 1.5em;
    width: 100%;
    max-width: 5rem;
    /* 16px - 48px */
    margin-right: clamp(1rem, 5vw, 3rem);
    color: var(--bodyTextColor);
    display: flex;
    gap: 0.5rem;
  }
  #events-2049 .cs-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #events-2049 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 2rem;
    color: var(--bodyTextColor);
  }
  #events-2049 .cs-dot {
    width: 1rem;
    height: 1rem;
    flex: none;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  #events-2049 .cs-dot:before {
    /* actual line for the timeline */
    content: "";
    width: 2px;
    height: 500vw;
    background-color: #e0e0e0;
    /* Grey color */
    position: absolute;
    top: -18.75rem;
    z-index: -10;
  }
  #events-2049 .cs-dot:after {
    /* primary color dot for the timeline */
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #events-2049 .cs-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    /* 32px - 48px */
    gap: clamp(2rem, 4vw, 3rem);
  }
  #events-2049 .cs-flex {
    width: 95%;
    max-width: 29.875rem;
    align-items: center;
    justify-content: center;
  }
  #events-2049 .cs-text-box {
    align-items: center;
  }
  #events-2049 .cs-item-text {
    margin-bottom: 0;
  }
  #events-2049 .cs-picture {
    min-height: 11.25rem;
    height: auto;
  }
}

/*-- -------------------------- -->
<---            Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1957 {
    /* removed at Tablet */
    min-height: 100dvh;
    padding: var(--sectionPadding);
    /* 200px - 300px - leaving extra space for the navigation */
    padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
    padding-right: clamp(1rem, 2.5vw, 1.25rem);
    /* 16px - 20px */
    padding-left: clamp(1rem, 2.5vw, 1.25rem);
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 1;
  }
  #hero-1957 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 60px - 180px */
    gap: clamp(3.75rem, 13vw, 11.25rem);
  }
  #hero-1957 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 34.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #hero-1957 .cs-topper {
    margin-bottom: 0.5rem;
    color: #fff;
  }
  #hero-1957 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5.975vw, 3.8125rem);
    margin-bottom: 1rem;
    color: #fff;
  }
  #hero-1957 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    /* 28px - 40px */
    margin: 0 0 clamp(1.75rem, 2.5vw, 2.5rem) 0;
    color: #fff;
  }
  #hero-1957 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    margin: 0;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #hero-1957 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-1957 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1957 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1957 .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(
      359deg,
      rgba(0, 0, 0, 0.5) 40%,
      rgba(0, 0, 0, 0) 56.87%
    );
    /* prevents the cursor from interacting with it */
    pointer-events: none;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #hero-1957 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* makes the top of the image start at the top of the parent */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1957 {
    min-height: auto;
  }
  #hero-1957 .cs-container {
    align-items: flex-start;
  }
  #hero-1957 .cs-content {
    text-align: left;
    margin-left: 0;
    align-items: flex-start;
  }
  #hero-1957 .cs-background:before {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.4) 25.47%,
      rgba(0, 0, 0, 0) 50.01%
    );
  }
}
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
  #hero-1957 .cs-background {
    background: url("../assets/images/temporary/home1/image.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1957 .cs-background img {
    display: none;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1957 {
    /* 16px - 20px */
    padding: clamp(1rem, 2vw, 1.25rem);
    position: relative;
    z-index: 1;
  }
  #services-1957 .cs-container {
    width: 100%;
    max-width: 120rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1957 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #services-1957 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    /* 280px - 337px */
    min-height: clamp(17.5rem, 35vw, 21.0625rem);
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    /* clips background image corners */
    overflow: hidden;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    grid-column: span 12;
    grid-row: span 1;
    position: relative;
    z-index: 1;
  }
  #services-1957 .cs-item:hover .cs-item-background img {
    transform: scale(1.3);
  }
  #services-1957 .cs-link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    /* 125px - 236px */
    /* padding goes on the link, not the cs-item as is normal. We do this because we want the whole card to be hoverable. So we add the padding to the link tag to create the space inside the card. By adding the space inside the cs-link tag we can make the whole card hoverable since the padding is now contributing to the height and width of the link */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  #services-1957 .cs-icon-wrapper {
    width: 3rem;
    height: 3rem;
    margin-left: auto;
    background: #fff;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
  }
  #services-1957 .cs-icon {
    width: 2rem;
    height: auto;
  }
  #services-1957 .cs-flex {
    width: 100%;
  }
  #services-1957 .cs-topper {
    margin-bottom: 0.5rem;
    color: #fff;
  }
  #services-1957 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 19ch;
    margin: 0 0 0.75rem 0;
    color: #fff;
    transition: color 0.3s;
  }
  #services-1957 .cs-item-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-1957 .cs-item-background:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 57.04%,
      rgba(0, 0, 0, 0.5) 87.88%
    );
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #services-1957 .cs-item-background img {
    width: 100%;
    height: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s, opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1957 .cs-item {
    grid-column: span 6;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1957 .cs-item {
    grid-column: span 3;
  }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-461 {
    /* padding-top changes at 768px */
    padding: var(--sectionPadding);
    position: relative;
    /* clips the background shape */
    overflow: hidden;
    z-index: 1;
  }
  #cta-461 .cs-container {
    width: 100%;
    /* changes to 1280px at 768px */
    max-width: 31.25rem;
    margin: auto;
  }
  #cta-461 .cs-swoosh {
    display: none;
  }
  #cta-461 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 31.25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-461 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 36.3125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #cta-461 .cs-title,
  #cta-461 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #cta-461 .cs-text {
    opacity: 0.8;
  }
  #cta-461 .cs-decoration {
    display: none;
  }
  #cta-461 .cs-cta {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    text-decoration: none;
    /* 16px - 20px */
    text-align: center;
    /* 141px - 224px */
    width: clamp(8.8125rem, 17vw, 14rem);
    height: clamp(8.8125rem, 17vw, 14rem);
    margin: 0 2.25rem 1rem auto;
    background-color: var(--primaryLight);
    color: var(--bodyTextColorWhite);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: flex-end;
    position: relative;
    transition: background-color 0.3s;
  }
  #cta-461 .cs-cta:hover {
    background-color: #14142b;
  }
  #cta-461 .cs-cta:hover .cs-arrow {
    transform: translateX(3.75rem);
    opacity: 0;
  }
  #cta-461 .cs-cta:hover .cs-cta-text {
    transform: translateY(-0.9375rem);
  }
  #cta-461 .cs-cta:before {
    /* backgorund shape on mobile, removed at 768px. We attach it to the cta button so its position is relative to the position of the button and they move together when the button moves as the screen gets bigger */
    content: "";
    width: 93.75rem;
    height: 62.5rem;
    background: #14142b;
    border-radius: 0 0 6.25rem 0;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -4.75rem;
    right: 2rem;
    transform: rotate(30deg);
    transform-origin: bottom right;
    z-index: -1;
  }
  #cta-461 .cs-arrow {
    width: 2.5rem;
    height: auto;
    transition: transform 0.3s, opacity 0.3s;
  }
  #cta-461 .cs-cta-text {
    transition: transform 0.3s;
  }
}
/* Inbetween - 500px */
@media only screen and (min-width: 31.25rem) {
  #cta-461 {
    /* clips the .swoosh so it doesn't cause overflow */
    overflow: hidden;
    /* pushes down proportional to the viewwidth size, so as the swoosh img grows wider it's growing height doesn't make it creep closer and closer to the cta button, resets to 0 at 768px */
    padding-bottom: 12vw;
  }
  #cta-461 .cs-container {
    align-items: flex-start;
  }
  #cta-461 .cs-cta:before {
    border-radius: 9.375rem;
    bottom: -6.25rem;
    right: 1.25rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-461 {
    margin-bottom: 3.75rem;
    padding-bottom: 0;
    background-color: #14142b;
    position: relative;
  }
  #cta-461:before {
    content: "";
    /* changes to 824px at large desktop */
    width: 37.75rem;
    height: 37.75rem;
    border-radius: 50%;
    background: #333142;
    opacity: 1;
    position: absolute;
    display: block;
    /* changes at 1300px */
    top: -6.25rem;
    /* changes at 1300px */
    right: -18.75rem;
    z-index: -2;
  }
  #cta-461 .cs-container {
    max-width: 80rem;
    position: relative;
  }
  #cta-461 .cs-container:before {
    /* left white slant */
    content: "";
    width: 375rem;
    height: 62.5rem;
    margin-right: -93.75rem;
    background: #fff;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    right: 50%;
    transform: rotate(5deg);
  }
  #cta-461 .cs-container:after {
    /* right white slant */
    content: "";
    width: 375rem;
    height: 187.5rem;
    margin-right: -218.75rem;
    background: #fff;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    opacity: 1;
    position: absolute;
    display: block;
    top: 100%;
    right: 50%;
    transform: rotate(-25deg);
    z-index: -1;
  }
  #cta-461 .cs-text {
    width: 55%;
  }
  #cta-461 .cs-cta {
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    border: 12px solid #fff;
    /* 100px - 100px */
    margin-right: clamp(6.25rem, 15vw, 6.25rem);
  }
  #cta-461 .cs-cta:before {
    display: none;
  }
}
/* Large Desktop 1200px */
@media only screen and (min-width: 75rem) {
  #cta-461 {
    padding-top: 10rem;
  }
  #cta-461:before {
    width: 51.5rem;
    height: 51.5rem;
    margin-left: 23.75rem;
    right: auto;
    left: 50%;
    top: -3.125rem;
    transform: none;
  }
  #cta-461:after {
    /* floating white blurry orb */
    content: "";
    width: 39.3125rem;
    height: 28.6875rem;
    margin-right: 21.125rem;
    background: #f1f1f4;
    opacity: 0.16;
    -webkit-filter: blur(182px);
    filter: blur(182px);
    position: absolute;
    display: block;
    top: -16.4375rem;
    right: 50%;
  }
  #cta-461 .cs-text {
    margin-bottom: 12.5rem;
  }
  #cta-461 .cs-decoration {
    height: 50.1875rem;
    width: auto;
    margin-left: 8.75rem;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -2;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-403 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #cta-403 .cs-background {
    width: 100%;
    height: 100%;
    background-blend-mode: multiply;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-403 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-403 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    /* positions the image inside the parent */
    object-position: 0% 30%;
  }
  #cta-403 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-403 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 32.3125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #cta-403 .cs-title,
  #cta-403 .cs-text {
    color: black;
  }
  #cta-403 .cs-text {
    opacity: 0.8;
    margin-bottom: 1rem;
  }
  #cta-403 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta-403 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #000;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cta-403 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #cta-403 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-403 .cs-background {
    /* clips the black slant so it doesnt overflow */
    overflow: hidden;
  }
  #cta-403 .cs-background:before {
    width: 40%;
    opacity: 1;
  }
  #cta-403 .cs-background:after {
    /* black slant */
    content: "";
    width: 31.25rem;
    height: 93.75rem;
    margin-right: -3.125rem;

    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    right: 50%;
    transform: rotate(10deg) translateY(-50%);
  }
  #cta-403 .cs-container {
    flex-direction: row;
    justify-content: center;
    text-align: center;
  }
  #cta-403 .cs-content {
    text-align: left;
    align-items: center;
    width: 45%;
  }
  #cta-403 .cs-text,
  #cta-403 .cs-title {
    text-align: center;
    margin-left: 0;
  }
}

/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-670 {
    position: relative;
  }
  #hero-670 .cs-container {
    width: 100%;
    max-width: 80rem;
    /* margin: auto; */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center the content horizontally */
    justify-content: center;
    /* Adjust alignment for better centering */
    text-align: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #hero-670 .cs-content {
    /* Center the content within the container */
    margin: 0 auto;
    align-items: center;
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 52.625rem;
    /* added section padding to cs-content so cs-background can be full width, removed at desktop */
    /* 120px - 300px top */
    padding: clamp(7.5rem, 20.82vw, 18.75rem) 1rem 0;
    padding-bottom: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #hero-670 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    /* 8px - 16px */
    margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
    color: var(--primary);
    display: block;
  }
  #hero-670 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    /* 17 characters including spaces */
    max-width: 17ch;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #hero-670 .cs-color {
    color: var(--primary);
  }
  #hero-670 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    /* 32px - 40px */
    margin: 0 0 clamp(2rem, 5vw, 2.5rem) 0;
    color: var(--bodyTextColor);
  }
  #hero-670 .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: 15.625rem;
    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;
  }
  #hero-670 .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;
  }
  #hero-670 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-670 .cs-background {
    width: 100%;
    height: 106vw;
    max-height: 31.25rem;
    display: block;
    position: relative;
  }
  #hero-670 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #hero-670 .cs-graphic {
    /* 154px - 374px */
    width: clamp(9.625rem, 33vw, 23.375rem);
    height: auto;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

/* Tablet - 768px to 1023px */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #hero-670 .cs-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #hero-670 .cs-content {
    max-width: 52.625rem;

    width: 90%; /* Adjust width for better spacing */
    margin: 0 auto;
  }
  #hero-670 .cs-background {
    position: relative;
    width: 100%;
    height: auto;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 100rem) {
  #hero-670 {
    /* 120px - 250px top */
    /* 60px - 200px  bottom */
    padding: clamp(7.5rem, 23.82vw, 15.625rem) 1rem
      clamp(3.75rem, 15.82vw, 12.5rem);
  }
  #hero-670 .cs-container {
    flex-direction: row;
    justify-content: flex-start;
  }

  #hero-670 .cs-content {
    text-align: left;
    max-width: 52.625rem;

    /* removed padding and put it on the section */
    width: 100%;
    padding: 0;
    align-items: flex-start;
  }
  #hero-670 .cs-background {
    width: 50%;
    height: auto;
    max-height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

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

.modal {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none; /* Hidden by default, toggled via JS */
  background-color: rgba(0, 0, 0, 0.4); /* semi-transparent overlay */
}

/* The actual white box in the center */
@media only screen and (min-width: 0rem) {
  /* The actual modal box */
  .modal-content {
    background-color: #fff;
    max-width: 600px; /* Restrict the width */
    margin: 40% auto; /* Center it vertically + horizontally */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* If anything extends the boundary */
    opacity: 0; /* Start invisible, fade in via keyframes */
    transform: translateY(-20px);
    animation: modalContentFadeIn 0.3s forwards ease-out;
  }
}

@media only screen and (min-width: 48rem) {
  /* The actual modal box */
  .modal-content {
    background-color: #fff;
    max-width: 600px; /* Restrict the width */
    margin: 20% auto; /* Center it vertically + horizontally */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* If anything extends the boundary */
    opacity: 0; /* Start invisible, fade in via keyframes */
    transform: translateY(-20px);
    animation: modalContentFadeIn 0.3s forwards ease-out;
  }
}

@media only screen and (min-width: 64rem) {
  /* The actual modal box */
  .modal-content {
    background-color: #fff;
    max-width: 600px; /* Restrict the width */
    margin: 20% auto; /* Center it vertically + horizontally */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* If anything extends the boundary */
    opacity: 0; /* Start invisible, fade in via keyframes */
    transform: translateY(-20px);
    animation: modalContentFadeIn 0.3s forwards ease-out;
  }
}

@media only screen and (min-width: 70rem) {
  /* The actual modal box */
  .modal-content {
    background-color: #fff;
    max-width: 600px; /* Restrict the width */
    /* margin: 10% auto;  */
    /* Center it vertically + horizontally */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* If anything extends the boundary */
    opacity: 0; /* Start invisible, fade in via keyframes */
    transform: translateY(-20px);
    animation: modalContentFadeIn 0.3s forwards ease-out;
  }
}

/* The overlay */
.modal {
  position: fixed; /* Fix position so it stays in view */
  z-index: 9999; /* Sit on top of everything */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  display: none; /* Hidden by default */
  background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
}

/* Animate the overlay (fade in) */
.modal.show {
  display: block;
  animation: modalOverlayFadeIn 0.3s forwards;
}

@keyframes modalOverlayFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Animate the modal content (slide down + fade in) */
@keyframes modalContentFadeIn {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Header, Body, and Footer areas */
.modal-header,
.modal-body,
.modal-footer {
  padding: 16px;
}

.modal-header {
  /* background: #f2f2f2; */
  /* background: #f2f2f2; */
  background-color: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.modal-body p {
  margin: 0;
  line-height: 1.5;
}

.modal-footer {
  background: #f2f2f2;
  border-top: 1px solid #ddd;
  text-align: right;
}

/* The close “X” in the top-right */
.modal-close {
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  border: none;
  background: none;
  color: white;
}

/* Close button in the footer */
.close-btn {
  background: var(--primary); /* A nice blue button, can be changed */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 1rem;
}

.close-btn:hover {
  background: black;
}

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

/* Mobile */
@media only screen and (min-width: 0rem) {
  #sbs-2348 {
    padding: var(--sectionPadding);
    /* 100px - 200px */
    padding-bottom: clamp(6.25rem, 3vw, 4.5rem);
    /* clips anything overflowing */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-2348 .cs-container {
    width: 100%;
    max-width: 112.5rem;
    margin: auto;
    /* 16px - 80px */
    padding: clamp(1rem, 5vw, 5rem);
    box-sizing: border-box;
    /* background-color: #f1eeec; */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-2348 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 47.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 3;
  }
  #sbs-2348 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-2348 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-2348 .cs-button-solid {
    border-radius: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #sbs-2348 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-2348 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-2348 .cs-picture {
    width: 100%;
    height: 95vw;
    max-height: 28.125rem;
    display: block;
    order: -1;
    position: relative;
    z-index: 1;
  }
  #sbs-2348 .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-2348 .cs-container {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
  }
  #sbs-2348 .cs-content {
    /* 48px - 80px */
    padding: clamp(3rem, 6vw, 5rem) 0;
  }
  #sbs-2348 .cs-picture {
    width: 43vw;
    height: auto;
    max-height: 100%;
    max-width: 50.625rem;
    flex: none;
  }
}

/* Mobile */
@media only screen and (min-width: 0rem) {
  #sbs-23483 {
    padding: var(--sectionPadding);
    /* 100px - 200px */
    padding-bottom: clamp(6.25rem, 3vw, 4.5rem);
    /* clips anything overflowing */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-23483 .cs-container {
    width: 100%;
    max-width: 112.5rem;
    margin: auto;
    /* 16px - 80px */
    padding: clamp(1rem, 5vw, 5rem);
    box-sizing: border-box;
    /* background-color: #f1eeec; */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-23483 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 47.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 3;
  }
  #sbs-23483 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-23483 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-23483 .cs-button-solid {
    border-radius: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #sbs-23483 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-23483 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-23483 .cs-picture {
    width: 100%;
    height: 95vw;
    max-height: 28.125rem;
    display: block;
    order: -1;
    position: relative;
    z-index: 1;
  }
  #sbs-23483 .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-23483 .cs-container {
    flex-direction: row-reverse;
    align-items: stretch;
    justify-content: space-between;
  }
  #sbs-23483 .cs-content {
    /* 48px - 80px */
    padding: clamp(3rem, 6vw, 5rem) 0;
  }
  #sbs-23483 .cs-picture {
    width: 43vw;
    height: auto;
    max-height: 100%;
    max-width: 50.625rem;
    flex: none;
  }
}

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-143 {
    /* Centers button */
    text-align: center;
    /* 144px - 300px - leaving extra space for the navigation */
    padding: clamp(9rem, 25.95vw, 18.75rem) 1rem 0;
    /* 130px - 450px */
    padding-bottom: clamp(12.125rem, 30.95vw, 28.125rem);
    position: relative;
    z-index: 1;
    /* Prevents white rectangle pseudos from overlapping the sections below */
    overflow: hidden;
  }
  #hero-143:before {
    /* Left side of the triangle */
    content: "";
    width: 31.25rem;
    height: 250rem;
    background: #fff;
    opacity: 1;
    transform: rotate(286deg);
    transform-origin: center;
    position: absolute;
    display: block;
    bottom: -139.6875rem;
    /* this makes the right edge sit at the 50% line at all times */
    right: 50%;
    z-index: 0;
  }
  #hero-143:after {
    /* Right side of the triangle */
    content: "";
    width: 31.25rem;
    height: 250rem;
    background: #fff;
    opacity: 1;
    transform: rotate(74deg);
    transform-origin: center;
    position: absolute;
    display: block;
    bottom: -139.6875rem;
    /* this makes the left edge sit at the 50% line at all times */
    left: 50%;
    z-index: 0;
  }
  #hero-143 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-143 .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.65;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-143 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #hero-143 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
  }
  #hero-143 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.5125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    max-width: 51.8125rem;
    /* 16px - 24px */
    margin: 0 auto clamp(1rem, 4vw, 1.5rem);
    color: #fff;
    position: relative;
    text-transform: uppercase;
  }
  #hero-143 .cs-title:after {
    /* Divider Line */
    content: "";
    /* 60px - 100px */
    width: clamp(3.75rem, 9.5vw, 6.25rem);
    /* 4px - 8px */
    height: clamp(0.25rem, 0.8vw, 0.5rem);
    /* 16px - 24px */
    margin: clamp(1rem, 4vw, 1.5rem) auto clamp(1rem, 4vw, 1.5rem);
    background: var(--primary);
    opacity: 1;
    position: relative;
    display: block;
  }
  #hero-143 .cs-text {
    /* 16px - 25px */
    font-size: clamp(1rem, 1.95vw, 1.5625rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 464px - 800px */
    max-width: clamp(29rem, 60vw, 50rem);
    margin: 0 auto;
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: #fff;
  }
  #hero-143 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: auto;
    color: white;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-143 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: white;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #hero-143 .cs-button-solid:hover {
    color: black;
  }
  #hero-143 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Desktop - 1300px (To make image background parallax) */
@media only screen and (min-width: 81.25rem) {
  #hero-143 {
    background: url("../assets/images/REAL/home/c.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* makes the parallax effect */
    background-attachment: fixed;
  }
  #hero-143 .cs-background img {
    display: none;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #h-services-143 {
    /* 40px - 100px */
    padding: 0 1em clamp(2.5rem, 7.9vw, 6.25rem) 1rem;
    position: relative;
    /* give a higher z index than the hero so it can sit on top */
    z-index: 10;
  }
  #h-services-143 .cs-card-group {
    width: 100%;
    max-width: 29.0625rem;
    margin: 0 auto 0;
    /* negative margin pulls it up on top of the hero section */
    /* -46px to -76px - we're calculating whatever clamp is and multiplying by -1
            to make the value negative since clamp doesn't work with negative values */
    margin-top: calc(clamp(5rem, 13vw, 4.75rem) * -1);
    /* 40px - 60px top and bottom, 16px - 44px left & right */
    padding: clamp(2.5rem, 4.7vw, 3.75rem) clamp(1rem, 5.3vw, 2.75rem);
    box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0.3125rem;
    border-top: 8px solid var(--primary);
    background-color: #fff;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
  }
  #h-services-143 .cs-item {
    list-style: none;
    margin: 0 auto 2rem;
    width: 100%;
    max-width: 22.5rem;
  }
  #h-services-143 .cs-item:last-of-type {
    margin-bottom: 0;
  }
  #h-services-143 .cs-icon {
    /* 68px - 88px */
    width: clamp(4.25rem, 8.8vw, 5.5rem);
    /* 68px - 88px */
    height: clamp(4.25rem, 8.8vw, 5.5rem);
    margin: auto;
    /* 20px - 24px */
    margin-bottom: clamp(1.25rem, 5vw, 1.5rem);
    border: 4px solid var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #h-services-143 .cs-icon img {
    /* 44px - 52px */
    width: clamp(2.75rem, 5.8vw, 3.25rem);
    height: auto;
  }
  #h-services-143 .cs-title {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto 0.5rem;
    color: var(--headerColor);
  }
  #h-services-143 .cs-text {
    font-size: 1rem;
    text-align: center;
    line-height: 1.5em;
    max-width: 22.5rem;
    margin: 0 auto;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #h-services-143 .cs-card-group {
    max-width: 49rem;
    /* -76px to -320px - we're calculating whatever clamp is and multiplying by -1
               to make the value negative since clamp doesn't work with negative values */
    margin-top: calc(clamp(4.75rem, 20vw, 20rem) * -1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 2.5rem;
  }
  #h-services-143 .cs-item {
    width: 45%;
    max-width: 19.625rem;
  }
  #h-services-143 .cs-item:last-of-type {
    margin-bottom: 2rem;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #h-services-143 .cs-card-group {
    max-width: 80rem;
    flex-wrap: nowrap;
  }
  #h-services-143 .cs-item {
    margin: 0;
  }
  #h-services-143 .cs-item:last-of-type {
    margin-bottom: 0;
  }
}