: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: #f43434;
  --primaryLight: #cc2c2c;
  --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;
  font-family: "inter", Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

*,
*: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: 0.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);
}

/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    transform: translate(-50%, -150%);
    opacity: 0;
    fill: #fff;
  }
  #dark-mode-toggle {
    display: block;
    position: absolute;
    top: 0rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
    z-index: 1000;
    transition: top 0.3s, right 0.3s;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s, opacity 0.3s;
  }
  #dark-mode-toggle .cs-sun {
    z-index: 1;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
  }
}
/* Tablet - 650px - 1024px */
@media only screen and (min-width: 40.625rem) and (max-width: 1299.5px) {
  #dark-mode-toggle {
    top: auto;
    right: auto;
    position: relative;
    order: 3;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 1024px) {
  #dark-mode-toggle {
    margin: 0;
    position: relative;
    transform: none;
    bottom: auto;
    right: auto;
  }
  #dark-mode-toggle:hover {
    cursor: pointer;
  }
}

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

/* Mobile - 1023px */
@media only screen and (max-width: 1299.5px) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    width: 100%;
    padding: 0.75rem 1rem 0 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 100;
    transition: transform 0.3s;
  }
  #cs-navigation.cs-active .cs-link {
    color: var(--bodyTextColorWhite);
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.1s;
  }
  #cs-navigation.cs-active .cs-li {
    transform: translateY(0);
    opacity: 1;
  }
  #cs-navigation.scroll {
    transform: translateY(-3rem);
  }
  #cs-navigation.scroll #dark-mode-toggle {
    top: 4.25rem;
    right: 4.875rem;
  }
  #cs-navigation .cs-location {
    margin: 0;
    padding: 0;
    position: relative;
    transition: height 0.3s, padding-bottom 0.3s, opacity 0.3s;
    z-index: -3;
  }
  #cs-navigation .cs-top-social {
    display: none;
  }
  #cs-navigation .cs-top-bar {
    padding-bottom: 0.75rem;
    position: relative;
    z-index: 1;
  }
  #cs-navigation .cs-top-bar:before {
    /* grey line */
    content: "";
    width: 100vw;
    height: 1px;
    background: #eff1f0;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 50%;
    z-index: -2;
    transform: translateX(-50%);
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-bottom-bar {
    height: auto;
    padding: 1.25rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #cs-navigation .cs-logo {
    height: 2.5rem;
    width: auto;
    display: block;
  }
  #cs-navigation .cs-logo img {
    height: 100%;
    width: auto;
  }
  #cs-navigation .cs-logo-wrapper {
    width: auto;
    height: 100%;
    position: relative;
    z-index: 1;
    perspective: 700px;
    transform-style: preserve-3d;
  }
  #cs-navigation .cs-default {
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    transition: opacity 0.3s, transform 0.6s;
  }
  #cs-navigation .cs-dark {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    transform: rotateX(180deg);
    transition: opacity 0.3s, transform 0.6s;
  }
  #cs-navigation .cs-desktop {
    display: none;
  }
  #cs-navigation .cs-item {
    font-size: 1rem;
    line-height: 1.5rem;
    list-style: none;
    margin: 0;
    color: #585b5d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
  }
  #cs-navigation .cs-remove {
    display: none;
  }
  #cs-navigation .cs-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-header {
    display: none;
  }
  #cs-navigation .cs-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-align: inherit;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    transition: color 0.3s;
  }
  #cs-navigation .cs-toggle {
    width: 3rem;
    height: 3rem;
    margin: 0;
    background-color: #f3f3f3;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #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 {
    width: 1.25rem;
    height: 0.75rem;
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #585b5d;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transform-origin: center;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.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 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line3 {
    width: 0.75rem;
    bottom: 0;
    left: 0;
    transform: none;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-contact-wrapper,
  #cs-navigation .cs-tablet,
  #cs-navigation .cs-button-border {
    display: none;
  }
}
/* Tablet - 650px - 1024px */
@media only screen and (min-width: 40.625rem) and (max-width: 1299.5px) {
  #cs-navigation .cs-location {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
  }
  #cs-navigation .cs-top-bar {
    padding-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #cs-navigation .cs-logo {
    margin-right: auto;
    order: 1;
  }
  #cs-navigation .cs-item {
    position: relative;
  }
  #cs-navigation .cs-item:nth-of-type(2):after {
    display: none;
  }
  #cs-navigation .cs-item:after {
    /* divider line */
    content: "";
    width: 1px;
    height: 100%;
    margin: 0 1rem;
    background: #cfd0d1;
    opacity: 1;
    position: relative;
    display: block;
  }
  #cs-navigation .cs-top-social {
    height: 2rem;
    visibility: visible;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, visibility 0.3s, height 0.3s;
  }
  #cs-navigation .cs-social-link {
    text-decoration: none;
    width: 2rem;
    height: 2rem;
    background-color: #f7f7f7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-social-icon {
    width: 0.75rem;
    height: auto;
    opacity: 0.6;
    display: block;
  }
  #cs-navigation .cs-bottom-bar {
    gap: 1rem;
  }
  #cs-navigation .cs-li-link {
    font-size: 1.5rem;
  }
  #cs-navigation .cs-nav-button {
    text-decoration: none;
    margin-right: 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    order: 2;
    position: relative;
    perspective: 200px;
    transform-style: preserve-3d;
  }
  #cs-navigation .cs-nav-button:hover .cs-wrapper {
    transform: rotateY(180deg);
  }
  #cs-navigation .cs-nav-button .cs-wrapper {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
    transition: transform 0.6s;
  }
  #cs-navigation .cs-nav-button .cs-wrapper:before {
    /* backgorund color in pseudo so we can use the primary color variable and use opacity */
    content: "";
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cs-navigation .cs-nav-button .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
    transition: transform 0.3s;
  }
  #cs-navigation .cs-nav-button .cs-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #cs-navigation .cs-nav-button .cs-header {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: #585b5d;
    display: block;
  }
  #cs-navigation .cs-nav-button .cs-link-content {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #cs-navigation .cs-nav {
    order: 4;
  }
}
/* Inbetween - 1024px */
@media only screen and (min-width: 1024px) {
  #cs-navigation .cs-bottom-bar {
    justify-content: flex-start;
    padding: 0;
  }
  #cs-navigation .cs-remove {
    display: flex;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-nav {
    order: 2;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    /* 24px - 28px */
    padding: clamp(1.5rem, 2.1vw, 1.75rem) 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li:last-of-type {
    /* pushes the button to the far roght */
    margin-left: auto;
    padding: 0;
  }
  #cs-navigation .cs-li-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-transform: uppercase;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: block;
    position: relative;
    transition: color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-active,
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-nav-button {
    display: none;
  }
}

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

/* Small Desktop - 1024px */
@media only screen and (max-width: 1023.5px) {
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    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 0.4s, opacity 0.3s;
  }
  #cs-navigation .cs-ul {
    margin: 0;
    padding: 3rem 0 3rem 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 {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    opacity: 0;
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    text-transform: uppercase;
    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);
  }
}

/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/

/* Small Desktop - 1024px */
@media only screen and (min-width: 1300px) {
  #cs-navigation {
    /* 136px tall */
    --headerHeight: 8.5rem;
    width: 100%;
    padding: 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: flex;
    position: fixed;
    z-index: 10000;
    transition: height 0.3s, background-color 0.3s;
  }
  #cs-navigation.scroll .cs-top-bar {
    height: 0;
    opacity: 0;
    overflow: hidden;
  }
  #cs-navigation.scroll .cs-top-bar:before {
    width: 0;
  }
  #cs-navigation.scroll .cs-middle {
    height: 5rem;
  }
  #cs-navigation.scroll .cs-logo,
  #cs-navigation.scroll .cs-contact-wrapper {
    height: 5rem;
  }
  #cs-navigation.scroll .cs-logo img {
    max-height: 5rem;
  }
  #cs-navigation.scroll .cs-toggle {
    margin-top: 0;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 20%;
    max-width: 21.25rem;
    height: var(--headerHeight);
    border-right: 1px solid #e7e7e8;
    padding: 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: height 0.3s;
  }
  #cs-navigation .cs-logo img {
    width: 80%;
    max-width: 16.25rem;
    height: auto;
    max-height: 7.5rem;
    box-sizing: border-box;
    /* 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;
    transition: max-height 0.3s, opacity 0.3s, transform 0.6s;
  }
  #cs-navigation .cs-logo-wrapper {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    perspective: 700px;
    transform-style: preserve-3d;
  }
  #cs-navigation .cs-default {
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }
  #cs-navigation .cs-dark {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    transform: rotateX(180deg) translateX(-50%);
  }
  #cs-navigation .cs-mobile {
    display: none;
  }
  #cs-navigation .cs-top-bar {
    width: 100%;
    height: 3.5rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
  }
  #cs-navigation .cs-top-bar:before {
    /* grey line */
    content: "";
    height: 1px;
    background: #e7e7e8;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: -2.5rem;
    right: -2.5rem;
    z-index: -2;
    transition: width 0.3s;
  }
  #cs-navigation .cs-top-social {
    height: 2rem;
    visibility: visible;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, visibility 0.3s, height 0.3s;
  }
  #cs-navigation .cs-social-link {
    text-decoration: none;
    width: 2rem;
    height: 2rem;
    background-color: #f7f7f7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #cs-navigation .cs-social-link:hover {
    background-color: var(--primary);
  }
  #cs-navigation .cs-social-icon {
    width: 0.75rem;
    height: auto;
    opacity: 0.6;
    display: block;
  }
  #cs-navigation .cs-location {
    display: flex;
    flex-direction: row;
  }
  #cs-navigation .cs-item {
    list-style: none;
    margin: 0;
    display: flex;
    align-items: center;
    flex: none;
    justify-content: flex-start;
    gap: 0.25rem;
    position: relative;
  }
  #cs-navigation .cs-item:last-of-type:after {
    display: none;
  }
  #cs-navigation .cs-item:hover .cs-picture {
    transform: scale(1.1);
  }
  #cs-navigation .cs-item:after {
    /* divider line */
    content: "";
    width: 1px;
    height: 100%;
    /* 24px - 44px */
    margin: 0 1.5rem;
    background: #eff1f0;
    opacity: 1;
    position: relative;
    display: block;
  }
  #cs-navigation .cs-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-align: inherit;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    transition: color 0.3s;
  }
  #cs-navigation .cs-link:hover {
    text-decoration: underline;
  }
  #cs-navigation .cs-middle {
    width: 100%;
    height: var(--headerHeight);
    padding: 0 2.5rem 0 2.5rem;
    transition: height 0.3s;
  }
  #cs-navigation .cs-nav {
    order: -1;
  }
  #cs-navigation .cs-bottom-bar {
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
  }
  #cs-navigation .cs-desktop-button {
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    order: 2;
    position: relative;
    perspective: 200px;
    transform-style: preserve-3d;
  }
  #cs-navigation .cs-desktop-button:hover .cs-wrapper {
    transform: rotateY(360deg);
  }
  #cs-navigation .cs-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
    transition: transform 0.6s;
  }
  #cs-navigation .cs-wrapper:before {
    /* backgorund color in pseudo so we can use the primary color variable and use opacity */
    content: "";
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cs-navigation .cs-button-icon {
    width: 1.25rem;
    height: auto;
    display: block;
    transition: transform 0.3s;
  }
  #cs-navigation .cs-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #cs-navigation .cs-header {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: #585b5d;
    display: block;
  }
  #cs-navigation .cs-link-content {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #cs-navigation .cs-nav-button,
  #cs-navigation .cs-button-border {
    display: none;
  }
  #cs-navigation .cs-contact-wrapper {
    width: 18%;
    max-width: 18.375rem;
    height: var(--headerHeight);
    border-left: 1px solid #e7e7e8;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    transition: height 0.3s;
  }
}
/* Small Desktop - 1500px */
@media only screen and (min-width: 1500px) {
  #cs-navigation .cs-nav {
    margin-right: auto;
  }
  #cs-navigation .cs-button-border {
    font-size: 1rem;
    line-height: 2.875rem;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 1.75rem;
    color: var(--headerColor);
    border: 1px solid var(--headerColor);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    transition: color 0.3s, background-color 0.3s;
    border-radius: 0.25rem;
  }
  #cs-navigation .cs-button-border:hover {
    background-color: #f43434;
    color: #fff;
  }
  #cs-navigation .cs-button-border:hover .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #cs-navigation .cs-button-border .cs-icon {
    width: 1.25rem;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-1294 {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    margin-bottom: -5.625rem;
    border-radius: 1rem;
    overflow: hidden;
    /* 40px - 80px */
    padding: clamp(2.5rem, 5vw, 5rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 15;
    transform: translateY(-9.375rem);
  }
  #cta-1294 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    /* changes to 100% at tablet */
    max-width: 25rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    gap: 1.5rem;
  }
  #cta-1294 .cs-title {
    width: 100%;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #cta-1294 .cs-form {
    width: 100%;
    max-width: 45.3125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #cta-1294 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    margin: 0;
    padding: 0;
    padding-left: 1.25rem;
    border: none;
    /* prevents padding from adding to width and height */
    box-sizing: border-box;
    display: block;
  }
  #cta-1294 .cs-input::placeholder {
    color: #767676;
  }
  #cta-1294 .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;
    border-radius: 0.25rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cta-1294 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #ffe5e5;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
    border-radius: 0.25rem;
  }
  #cta-1294 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-1294 .cs-button-solid {
    background-color: #fff;
    color: var(--primary);
  }
  #cta-1294 .cs-background {
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-1294 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-1294 .cs-container {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }
  #cta-1294 .cs-content {
    text-align: left;
    max-width: 100%;
    justify-content: space-between;
  }
  #cta-1294 .cs-form {
    flex-direction: row;
  }
  #cta-1294 .cs-input {
    width: 100%;
    max-width: 32.8125rem;
  }
  #cta-1294 .cs-submit {
    width: auto;
    min-width: 11.875rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #cta-1294 {
    margin-bottom: 0rem;
  }
  #cta-1294 .cs-content {
    flex-direction: row;
  }
  #cta-1294 .cs-form {
    width: 60%;
  }
}

/*-- -------------------------- -->
<---           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);
    color: #ffffffff;
    text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
  }
  #hero-1949 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #fff7ee; /* warm white */
    text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.65);
  }
  #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;
    border-radius: 0.25rem;
  }
  #hero-1949 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #cc2c2c;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
    border-radius: 0.25rem;
  }
  #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.6;
    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-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    color: #ffffffff;
    text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
  }
  #hero-1949 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #fff7ee; /* warm white */
    text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.65);
  }
  #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://images.ctfassets.net/xq9jxky6qn8r/7IaEgVsKAlZfxmvgUIE9nY/666cddbb4ebbdd2ff17f7857b274c2ae/IMG_0685.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1949 .cs-background img {
    display: none;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-2317 {
    padding: var(--sectionPadding);
    padding-bottom: 0;
    position: relative;
  }
  #why-choose-2317 .cs-container {
    width: 100%;
    /* changes to 1440px on desktop */
    max-width: 44rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  #why-choose-2317 .cs-content {
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
    width: 100%;
    /* 48px - 64px */
    margin-bottom: clamp(3rem, 6vw, 4rem);
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
  }
  #why-choose-2317 .cs-title {
    margin: 0;
  }
  #why-choose-2317 .cs-content-picture {
    width: 100%;
    height: 20.5rem;
    display: block;
  }
  #why-choose-2317 .cs-content-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #why-choose-2317 .cs-ul {
    width: 100%;
    max-width: 39.375rem;
    margin: 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  #why-choose-2317 .cs-li {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid #e7e7e8;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.25rem;
    /* remove the border and spacing on the last cs-li */
  }
  #why-choose-2317 .cs-li:last-of-type {
    margin: 0;
    padding: 0;
    border: none;
  }
  #why-choose-2317 .cs-icon {
    width: 3rem;
    height: auto;
    display: block;
  }
  #why-choose-2317 .cs-h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: left;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
  }
  #why-choose-2317 .cs-li-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #why-choose-2317 .cs-picture {
    width: 100%;
    height: 22.5rem;
    display: block;
  }
  #why-choose-2317 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #why-choose-2317 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
    border-radius: 0.25rem;
  }
  #why-choose-2317 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #cc2c2c;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #why-choose-2317 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-2317 .cs-container {
    max-width: 80rem;
    gap: 1rem;
  }
  #why-choose-2317 .cs-content-group {
    padding-right: 1.25rem;
    display: grid;
    grid-template-columns: auto auto;
    /* 32px - 48px */
    column-gap: clamp(2rem, 3vw, 3rem);
  }
  #why-choose-2317 .cs-content {
    grid-column: span 2;
  }
  #why-choose-2317 .cs-content-picture {
    /* 284px - 458px */
    width: clamp(17.75rem, 34vw, 28.625rem);
    height: 100%;
    grid-column: span 1;
  }
  #why-choose-2317 .cs-ul {
    margin-top: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-2317 .cs-container {
    max-width: 90rem;
    flex-direction: row;
    align-items: stretch;
  }
  #why-choose-2317 .cs-picture {
    /* 221px - 413px */
    width: clamp(13.8125rem, 21vw, 25.8125rem);
    height: auto;
    flex: 1 0 auto;
  }
}

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

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

/*-- -------------------------- -->
<---            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: var(--bodyTextColorWhite);
  }
  #cta-403 .cs-text {
    opacity: 0.8;
    margin-bottom: 1rem;
  }
  #cta-403 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta-403 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #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;
  }
  #cta-403 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--primaryLight);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #cta-403 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-403 .cs-background {
    /* clips the black slant so it doesnt overflow */
    overflow: hidden;
  }
  #cta-403 .cs-background:before {
    width: 40%;
    opacity: 1;
  }
  #cta-403 .cs-background:after {
    /* black slant */
    content: "";
    width: 31.25rem;
    height: 93.75rem;
    margin-right: -3.125rem;
    background: -moz-linear-gradient(
      left,
      #1a1a1a 0%,
      #1a1a1a 57%,
      rgba(26, 26, 26, 0) 100%
    );
    background: -webkit-linear-gradient(
      left,
      #1a1a1a 0%,
      #1a1a1a 57%,
      rgba(26, 26, 26, 0) 100%
    );
    background: linear-gradient(
      to right,
      #1a1a1a 0%,
      #1a1a1a 57%,
      rgba(26, 26, 26, 0) 100%
    );
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    right: 50%;
    transform: rotate(10deg) translateY(-50%);
  }
  #cta-403 .cs-background img {
    width: 60%;
    object-position: right;
    left: auto;
    right: 0;
  }
  #cta-403 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #cta-403 .cs-content {
    text-align: left;
    align-items: flex-start;
    width: 45%;
  }
  #cta-403 .cs-text,
  #cta-403 .cs-title {
    margin-left: 0;
  }
}

/*-- -------------------------- -->
<---       Content Group        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-content-1792 {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6.5vw, 4rem);
    padding: 3rem;
    padding-top: 8rem;
  }
  #cs-content-1792 .cs-content {
    /* set text align to center if content needs to be center aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #cs-content-1792 .cs-flex-wrapper {
    max-width: 37.5rem;
    /* lets the div's contents act as though it doesn't exist and can be children of the next surrounding parent div, in this case the cs-content. That way we can place the button under the cs-wrapper on mobile, but bring it back under the header on tablet */
    display: contents;
  }
  #cs-content-1792 .cs-title {
    margin: 0;
    /* 16px - 32px */
    margin-bottom: clamp(1rem, 3vw, 2rem);
  }
  #cs-content-1792 .cs-wrapper {
    max-width: 39.5rem;
  }
  #cs-content-1792 .cs-text {
    margin: 0 0 2rem 0;
  }
  #cs-content-1792 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    margin-top: 2rem;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #cs-content-1792 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-content-1792 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cs-content-1792 .cs-button-solid {
    margin: 0;
    display: inline-block;
    order: 2;
  }
  #cs-content-1792 .cs-text {
    max-width: 40rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
  }
  #cs-content-1792 .cs-ul {
    max-width: 39.375rem;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #cs-content-1792 .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #cs-content-1792 .cs-check-icon {
    width: 1.5rem;
    height: auto;
    /* adds extra space between the icon and top of parent so it's more centered */
    margin-top: 1px;
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-content-1792 .cs-content {
    text-align: left;
    max-width: 80rem;
    height: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    columns: 2;
  }
  #cs-content-1792 .cs-flex-wrapper {
    width: 40vw;
    display: block;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #cs-content-1792 .cs-ul {
    margin: 0;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #cs-content-1792 .cs-ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #cs-content-1792 .cs-li {
    width: 48%;
  }
}

/*-- -------------------------- -->
<---         Gallery            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1716 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  #gallery-1716 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-1716 .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;
  }
  #gallery-1716 .cs-text {
    margin-bottom: 1rem;
  }
  #gallery-1716 .cs-text:last-of-type {
    /* 32px - 64px */
    margin-bottom: clamp(2rem, 7vw, 4rem);
  }
  #gallery-1716 .cs-text:last-of-type:before {
    /* colored overlay rectangle - positioned absolute to the section tag because it is the nearest parent with a decalred position relative */
    content: "";
    width: 100%;
    height: 80%;
    background: var(--primary);
    opacity: 0.1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  #gallery-1716 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    border-radius: 0.25rem;
  }
  #gallery-1716 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--primaryLight);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
    border-radius: 0.25rem;
  }
  #gallery-1716 .cs-button-solid:hover:before {
    width: 100%;
  }
  #gallery-1716 .cs-gallery {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* sends it to the top in the 1st position */
    order: -1;
  }
  #gallery-1716 .cs-picture {
    width: 100%;
    /* changes at tablet */
    height: 100vw;
    max-height: 25rem;
    display: block;
    position: relative;
    z-index: 1;
    grid-column: span 4;
  }
  #gallery-1716 .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) {
  #gallery-1716 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #gallery-1716 .cs-content {
    max-width: 19rem;
    /* 32px - 64px, ensures theres always a gap at the bottom to space out the content from the bottom of the container and let the colored rectangle shape be a little bigger and take up more space */
    padding-bottom: clamp(2rem, 7vw, 4rem);
  }
  #gallery-1716 .cs-text:last-of-type {
    /* add position relative so the colored rectangle is now absolutely positioned to the cs-text parent. We also only want these styles on the last paragraph tag */
    position: relative;
    z-index: 1;
  }
  #gallery-1716 .cs-text:last-of-type:before {
    width: 250vw;
    height: 100vw;
    top: calc(100% + 1.8rem);
    left: 50%;
    transform: translateX(-50%);
  }
  #gallery-1716 .cs-gallery {
    height: auto;
  }
  #gallery-1716 .cs-picture {
    height: 100%;
    max-height: 100%;
    /* 280px - 420px */
    min-height: clamp(17.5rem, 37vw, 26.25rem);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-1294 {
    padding: var(--sectionPadding);
    margin-top: 50px;
    padding-bottom: 1.25rem;
    background-color: #1a1a1a;
    position: relative;
    z-index: 10;
    /* Navigation Links */
  }
  #cs-footer-1294 .cs-container {
    width: 100%;
    margin: auto;
  }
  #cs-footer-1294 .cs-logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }
  #cs-footer-1294 .cs-logo {
    width: 12.3125rem;
    height: auto;
    display: block;
    /* 20px - 24px */
    margin: 0 0 clamp(1.25rem, 2vw, 1.5rem) 0;
  }
  #cs-footer-1294 .cs-logo-img {
    width: 100%;
    height: auto;
  }
  #cs-footer-1294 .cs-logo-img.dark {
    display: none;
  }
  #cs-footer-1294 .cs-text {
    color: var(--bodyTextColorWhite);
    margin: 0 0 2rem 0;
  }
  #cs-footer-1294 .cs-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.75rem;
    transition: color 0.3s;
  }
  #cs-footer-1294 .cs-link:hover {
    color: var(--primary);
  }
  #cs-footer-1294 .cs-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 2.25rem;
  }
  #cs-footer-1294 .cs-nav {
    width: 45%;
    max-width: 11.25rem;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
  #cs-footer-1294 .cs-nav-li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #cs-footer-1294 .cs-header {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--bodyTextColorWhite);
    position: relative;
    display: block;
  }
  #cs-footer-1294 .cs-nav-link {
    font-size: 0.875rem;
    text-decoration: none;
    line-height: 1.5em;
    width: auto;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
    position: relative;
    display: inline-block;
    transition: color 0.3s;
  }
  #cs-footer-1294 .cs-nav-link:before {
    /* underline */
    content: "";
    width: 0%;
    height: 0.125rem;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.125rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-footer-1294 .cs-nav-link:hover {
    color: var(--primary);
  }
  #cs-footer-1294 .cs-nav-link:hover:before {
    width: 100%;
  }
  #cs-footer-1294 .cs-bottom {
    max-width: 80rem;
    margin: auto;
    /* 48px - 100px */
    margin-top: clamp(3rem, 6vw, 6.25rem);
    /* 20px - 32px */
    padding: clamp(1.25rem, 3vw, 2rem) 0 0 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 2.25rem;
    row-gap: 0.75rem;
  }
  #cs-footer-1294 .cs-copyright {
    font-size: 0.875rem;
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #cs-footer-1294 .cs-copyright .cs-copyright-link {
    opacity: 1;
  }
  #cs-footer-1294 .cs-copyright-link {
    font-size: 0.875rem;
    text-decoration: none;
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
    transition: color 0.3s;
  }
  #cs-footer-1294 .cs-copyright-link:hover {
    color: var(--secondary);
  }
  #cs-footer-1294 .cs-copyright {
    text-align: center;
    width: 100%;
  }
  #cs-footer-1294 .cs-floater-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cs-footer-1294 .cs-floater {
    width: 31.625rem;
    height: 31.625rem;
    margin-left: 34.375rem;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: 0.1;
    display: none;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
  }
  #cs-footer-1294 .cs-floater:before {
    content: "";
    width: 44.6875rem;
    height: 44.6875rem;
    border: 2px solid var(--primary);
    border-radius: 50%;
    opacity: 0.6;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #cs-footer-1294 .cs-floater:after {
    content: "";
    width: 60.1875rem;
    height: 60.1875rem;
    border: 2px solid var(--primary);
    border-radius: 50%;
    opacity: 0.3;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-footer-1294 {
    margin-top: 0;
  }
  #cs-footer-1294 .cs-wrapper {
    row-gap: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 5.5rem;
    row-gap: 2.5rem;
  }
  #cs-footer-1294 .cs-nav {
    width: auto;
  }
  #cs-footer-1294 .cs-bottom {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  #cs-footer-1294 .cs-copyright {
    text-align: left;
    width: auto;
    margin-right: auto;
  }
  #cs-footer-1294 .cs-floater {
    display: block;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-footer-1294 .cs-container {
    max-width: 80rem;
    flex-wrap: nowrap;
    /* align everything to the right */
    justify-content: flex-end;
    column-gap: clamp(2.5rem, 6vw, 5.25rem);
  }
  #cs-footer-1294 .cs-logo-group {
    width: 30%;
    max-width: 24.1875rem;
    /* pushes away from everything to the right */
    margin-right: auto;
  }
  #cs-footer-1294 .cs-text {
    width: 100%;
  }
  #cs-footer-1294 .cs-graphic {
    display: block;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-1401 {
    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-1401 .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-1401 .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-1401 .cs-breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #banner-1401 .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-1401 .cs-link:last-of-type {
    /* remove the chevron on the last list item */
  }
  #banner-1401 .cs-link:last-of-type::after {
    display: none;
  }
  #banner-1401 .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-1401 .cs-link.cs-active {
    color: var(--primary);
  }
  #banner-1401 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #banner-1401 .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-1401 .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-1401 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-1401 .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;
  }
}

/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @keyframes floatAnimation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  #content-page-1401 {
    padding: var(--sectionPadding);
    background-color: #fff;
    /* clips the wave background from causing overflow issues when it goes off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #content-page-1401 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px - 64px */
    gap: clamp(2.5rem, 4vw, 4rem);
    position: relative;
  }
  #content-page-1401 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 46.125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #content-page-1401 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #content-page-1401 h2,
  #content-page-1401 h3,
  #content-page-1401 h4,
  #content-page-1401 h5,
  #content-page-1401 h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #content-page-1401 h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }
  #content-page-1401 h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }
  #content-page-1401 h4,
  #content-page-1401 h5,
  #content-page-1401 h6 {
    font-size: 1.25rem;
  }
  #content-page-1401 .cs-button-solid {
    margin-bottom: 2rem;
  }
  #content-page-1401 .cs-no-margin {
    margin: 0;
  }
  #content-page-1401 .cs-color {
    color: var(--primary);
  }
  #content-page-1401 p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }
  #content-page-1401 p:last-of-type {
    margin-bottom: 2rem;
  }
  #content-page-1401 p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
    filter: brightness(120%);
  }
  #content-page-1401 ol,
  #content-page-1401 ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #content-page-1401 ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }
  #content-page-1401 ul li:before {
    /* custom list bullet */
    content: "";
    width: 3px;
    height: 3px;
    background: currentColor;
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.75rem;
  }
  #content-page-1401 img {
    width: 100%;
    height: auto;
    display: block;
  }
  #content-page-1401 .cs-image-group {
    width: 100%;
    display: none;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.6vw, 1.25rem);
    position: relative;
  }
  #content-page-1401 .cs-flex {
    position: relative;
  }
  #content-page-1401 .cs-background {
    width: 100%;
    height: 100%;
    /* 32px - 48px */
    border-radius: clamp(2rem, 4vw, 3rem);
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
  }
  #content-page-1401 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }
  #content-page-1401 .cs-box {
    text-align: left;
    width: 100%;
    max-width: 12.5rem;
    padding: 2rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: var(--primary);
    /* 48px - 80px */
    border-radius: 2rem;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    position: absolute;
    /* 12px - 20px */
    right: clamp(0.75rem, 1.9vw, 1.5rem);
    /* 12px - 20px */
    bottom: clamp(0.75rem, 1.9vw, 1.5rem);
  }
  #content-page-1401 .cs-box-icon {
    width: 3.75rem;
    height: auto;
    display: block;
  }
  #content-page-1401 .cs-desc {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #content-page-1401 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.265rem, 1fr));
    align-items: center;
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #content-page-1401 .cs-item {
    list-style: none;
    /* 16px - 24px */
    padding: clamp(1rem, 3vw, 1.5rem);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #f7f7f7;
    border-radius: 1rem;
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #content-page-1401 .cs-item:before {
    display: none;
  }
  #content-page-1401 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #content-page-1401 .cs-h3-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #content-page-1401 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #content-page-1401 .cs-item-text:last-of-type {
    margin: 0;
  }
  #content-page-1401 .cs-ul {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #content-page-1401 .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push icon top the top so if the list item goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #content-page-1401 .cs-icon {
    width: 1.5rem;
    height: auto;
    /* adds extra space between the icon and top of parent so it's more centered */
    margin-top: 1px;
    display: block;
  }
  #content-page-1401 .cs-bubbles {
    font-size: min(2.5vw, 0.7em);
    width: 36.375em;
    height: 34.8125em;
    display: none;
    position: absolute;
    /* changes to auto at larger desktop */
    right: -16.25em;
    /* changes to -220px at large desktop */
    bottom: -3.125em;
    z-index: -1;
  }
  #content-page-1401 .cs-bubbles:before {
    /* white border bubble */
    content: "";
    width: 29em;
    height: 29em;
    background: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #content-page-1401 .cs-bubbles:after {
    /* orange bubble */
    content: "";
    width: 22.875em;
    height: 22.875em;
    background: var(--primary);
    opacity: 0.15;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #content-page-1401 .cs-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  #content-page-1401 .cs-content {
    width: 50%;
    max-width: 42.125rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #content-page-1401 .cs-image-group {
    width: 44%;
    max-width: 33.875rem;
    display: flex;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #content-page-1401 .cs-content {
    width: 53%;
  }
  #content-page-1401 .cs-image-group {
    width: 43%;
  }
  #content-page-1401 .cs-box {
    display: flex;
  }
  #content-page-1401 .cs-bubbles {
    font-size: 1em;
    margin-left: 37.5rem;
    display: block;
    right: auto;
    left: 50%;
    bottom: -13.75rem;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-2180 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: -8rem;
  }
  #sbs-2180 .cs-container {
    width: 100%;
    max-width: 80em;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
  }
  #sbs-2180 .cs-content {
    text-align: left;
    width: auto;
    max-width: 46.125rem;
    margin: 0 1rem;
    margin-top: -5rem;
    /* 24px - 60px top and bottom */
    /* 24px - 60px left and right */
    padding: clamp(1.5rem, 5vw, 3.75rem);
    background-color: #f9f9f8;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    /* clips the pseudo element */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 10;
  }
  #sbs-2180 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-2180 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-2180 .cs-button-transparent {
    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: var(--headerColor);
    border: 1px solid var(--headerColor);
    min-width: 11.25rem;
    padding: 0 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #sbs-2180 .cs-button-transparent:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-2180 .cs-button-transparent:hover {
    color: var(--bodyTextColorWhite);
  }
  #sbs-2180 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #sbs-2180 .cs-button-transparent:hover .cs-button-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #sbs-2180 .cs-button-transparent .cs-button-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #sbs-2180 .cs-button-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
  }
  #sbs-2180 .cs-button-play {
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    color: var(--headerColor);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    position: relative;
    z-index: 1;
  }
  #sbs-2180 .cs-wrapper {
    /* 46px - 56px */
    width: clamp(2.875rem, 5.5vw, 3.5rem);
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    background-color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    order: -1;
  }
  #sbs-2180 .cs-button-icon {
    width: 0.875rem;
    height: auto;
    display: block;
  }
  #sbs-2180 .cs-picture {
    width: 100%;
    height: 23.75rem;
    /* clips the img corners */
    overflow: hidden;
    display: block;
    /* sends it to the top */
    order: -1;
    position: relative;
  }
  #sbs-2180 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #sbs-2180 .cs-floater {
    /* chnages on tablet */
    width: 12.5rem;
    height: auto;
    position: absolute;
    bottom: -1.25rem;
    right: -2.5rem;
    z-index: 10;
    transform: rotate(90deg);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-2180 .cs-container {
    position: relative;
    align-items: flex-end;
    justify-content: center;
  }
  #sbs-2180 .cs-content {
    width: 68%;
    margin: 0;
  }
  #sbs-2180 .cs-button-play {
    padding-right: 1.5rem;
  }
  #sbs-2180 .cs-button-play:before {
    content: "";
    /* 46px - 56px */
    width: clamp(2.875rem, 5.5vw, 3.5rem);
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    background: var(--primary);
    border-radius: 3.75rem;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -2;
    transition: width 0.3s;
  }
  #sbs-2180 .cs-button-play:hover {
    color: var(--bodyTextColorWhite);
  }
  #sbs-2180 .cs-button-play:hover:before {
    width: 100%;
  }
  #sbs-2180 .cs-picture {
    /* 404px - 742px */
    width: clamp(25.25rem, 53vw, 46.375rem);
    height: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 3.75rem;
  }
  #sbs-2180 .cs-floater {
    width: 30%;
    max-width: 18.875rem;
    bottom: 0;
    right: 0;
    transform: none;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #sbs-2180 .cs-content {
    margin-bottom: 10.625rem;
  }
}

/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-893 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
#list-893 {
  max-width: 39.375rem;
  margin: 0 0 2rem 0;
  padding: 0;
  columns: 2;
}
#list-893 .cs-li {
  list-style: none;
  margin: 0 0 0.5rem 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
  position: relative;
}
#list-893 .cs-li:before {
  /* accent shape */
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5rem;
  background: #bababa;
  border-radius: 0.25rem 0 0.25rem 0;
  display: block;
  /* prevents flexbox from squishing it */
  flex: none;
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1737 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #services-1737 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    margin-top: -6rem;
  }
  #services-1737 .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-1737 .cs-title {
    margin: 0;
  }
  #services-1737 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  #services-1737 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    height: clamp(18.75rem, 55vw, 26.25rem);
    margin: 0;
    padding: clamp(2rem, 4.5vw, 3.75rem) clamp(1rem, 3.1vw, 2.5rem);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #e8e8e8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    grid-column: span 12;
    /* 24px - 40px */
    gap: clamp(1.5rem, 4vw, 2.5rem);
    position: relative;
    z-index: 1;
  }
  #services-1737 .cs-item:nth-last-of-type(odd) {
    background-color: #1a1a1a;
  }
  #services-1737 .cs-item:nth-last-of-type(odd) .cs-h3,
  #services-1737 .cs-item:nth-last-of-type(odd) .cs-item-text {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #services-1737 .cs-icon-wrapper {
    width: 5rem;
    height: 5rem;
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #services-1737 .cs-icon {
    width: 2rem;
    height: auto;
  }
  #services-1737 .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: 20ch;
    /* 12px - 16px */
    margin: 0 0 clamp(0.75rem, 1.8vw, 1rem) 0;
    color: var(--headerColor);
  }
  #services-1737 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1737 .cs-item {
    grid-column: span 4;
  }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

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

  #gallery-48 .cs-title {
    margin: 0;
    max-width: 20ch;
  }
  #gallery-48 .cs-image-group {
    /* used rem so it doesn't scale with the font size of on parent */
    font-size: min(1.1vw, 1em);
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 8px - 20px */
    gap: clamp(0.5rem, 2vw, 1.25rem);
  }
  #gallery-48 .cs-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* 8px - 20px */
    gap: clamp(0.5rem, 2vw, 1.25rem);
  }
  #gallery-48 .cs-picture {
    width: 100%;
    position: relative;
    display: block;
  }
  #gallery-48 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #gallery-48 .cs-row-1 .cs-picture-1 {
    height: 35.4375em;
  }
  #gallery-48 .cs-row-1 .cs-picture-2 {
    height: 39.3125em;
  }
  #gallery-48 .cs-row-1 .cs-picture-3 {
    height: 32em;
  }
  #gallery-48 .cs-row-2 .cs-picture-1 {
    height: 30.75em;
  }
  #gallery-48 .cs-row-2 .cs-picture-2 {
    height: 32.3125em;
  }
  #gallery-48 .cs-row-2 .cs-picture-3 {
    height: 39.3125em;
  }
  #gallery-48 .cs-row-3 .cs-picture-1 {
    height: 39.0625em;
  }
  #gallery-48 .cs-row-3 .cs-picture-2 {
    height: 28.25em;
  }
  #gallery-48 .cs-row-3 .cs-picture-3 {
    height: 39.3125em;
  }
  #gallery-48 .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;
  }
  #gallery-48 .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;
  }
  #gallery-48 .cs-button-solid:hover:before {
    width: 100%;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-1750 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #contact-1750 .cs-container {
    width: 100%;
    /* changes to 1024 on desktop */
    max-width: 44rem;
    margin: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    /* 48px - 64px */
    gap: clamp(3rem, 5vw, 4rem);
  }
  #contact-1750 .cs-content {
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
  }
  #contact-1750 .cs-form-group {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    /* resets to 0 at tablet */
    margin: auto;
    /* 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;
  }
  #contact-1750 .cs-title {
    margin: 0 0 1.5rem;
  }
  #contact-1750 .cs-form {
    width: 100%;
    /* prevents flexbox from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  #contact-1750 .cs-label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-column: span 12;
    gap: 0.5rem;
  }
  #contact-1750 .cs-input {
    font-size: 1rem;
    width: 100%;
    /* 46px - 56px */
    height: clamp(2.875rem, 4.5vw, 3.5rem);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    padding: 0;
    padding-left: 1.5rem;
    background-color: #f7f7f7;
    color: var(--headerColor);
    border: none;
  }
  #contact-1750 .cs-input::placeholder {
    color: var(--bodyTextColor);
  }
  #contact-1750 .cs-textarea {
    font-family: inherit;
    min-height: 7.5rem;
    padding-top: 1.5rem;
  }
  #contact-1750 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    overflow: hidden;
    color: #1a1a1a;
    border: none;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
    border-radius: 0.25rem;
  }
  #contact-1750 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: var(--primaryLight);
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #contact-1750 .cs-button-solid:hover {
    color: #fff;
  }
  #contact-1750 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-1750 .cs-submit {
    margin: 1rem 0 0;
    color: var(--bodyTextColorWhite);
    grid-column: span 12;
    justify-self: flex-start;
  }
  #contact-1750 .cs-submit:hover {
    cursor: pointer;
  }
  #contact-1750 .cs-info-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  #contact-1750 .cs-detail {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--bodyTextColor);
    display: block;
  }
  #contact-1750 .cs-picture-group {
    width: 110%;
    height: 100vw;
    /* removed at desktop */
    max-height: 31.375rem;
    margin-top: 3rem;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  #contact-1750 .cs-iframe {
    width: 100%;
    height: 100%;
    display: block;
  }
  #contact-1750 .cs-graphic {
    width: 100%;
    min-width: 80rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    left: 50%;
    z-index: 0;
    transform: translateX(-50%);
  }
  #contact-1750 .cs-top {
    top: 0;
  }
  #contact-1750 .cs-left {
    left: 4%;
    transform: rotate(270deg);
    transform-origin: left;
  }
  #contact-1750 .cs-bottom {
    bottom: 0;
    left: 0;
    transform: rotateX(180deg);
  }
  #contact-1750 .cs-dark {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #contact-1750 {
    /* using flex: 1 on both group elements to ensure they're both the same width */
  }
  #contact-1750 .cs-container {
    flex-direction: row;
    align-items: center;
  }
  #contact-1750 .cs-form-group {
    flex: 1;
  }
  #contact-1750 .cs-info-group {
    flex: 1;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-1750 .cs-container {
    width: 65%;
    max-width: 64rem;
    margin: 0 auto 0 0;
    padding: 2.5rem 1.5rem;
  }
  #contact-1750 .cs-picture-group {
    width: 90%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    z-index: -1;
    transform: none;
  }
  #contact-1750 .cs-picture-group {
    margin-left: -12.75rem;
    left: 50%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #contact-1750 .cs-label:nth-of-type(2),
  #contact-1750 .cs-label:nth-of-type(3) {
    grid-column: span 6;
  }
}
/* Largest Desktop - 1920px */
@media only screen and (min-width: 120rem) {
  #contact-1750 {
    padding-top: 7vw;
    padding-bottom: 9vw;
  }
  #contact-1750 .cs-container {
    margin: 0 auto;
    transform: translateX(-22rem);
  }
}