/* PAGE-SPECIFIC STYLES FOR THE ABOUT PAGE */
/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-1534 {
      padding: var(--sectionPadding);
      /* 190px - 268px */
      padding-top: clamp(11.875rem, 25vw, 16.75rem);
      /* 100px - 150px */
      padding-bottom: clamp(6.25rem, 12vw, 9.375rem);
      /* clips the line from causing overflow issues for going off screen */
      overflow: hidden;
      position: relative;
      z-index: 1;
  }

  #banner-1534 .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-1534 .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(--headercolor);
      position: relative;
      display: none;
  }

  #banner-1534 .cs-breadcrumbs {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  #banner-1534 .cs-link {
      font-size: 1rem;
      line-height: 1.2em;
      text-decoration: none;
      color: var(--bodyTextColor);
      position: relative;
      display: none;
      justify-content: center;
      align-items: center;
  }

  #banner-1534 .cs-link:last-of-type {
      /* remove the chevron on the last list item */
  }

  #banner-1534 .cs-link:last-of-type::after {
      display: none;
  }

  #banner-1534 .cs-link:after {
      /* chevron */
      content: '';
      width: 0.4375rem;
      height: 0.75rem;
      margin: 0 1rem;
      background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/grey-chevron.svg");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      display: block;
  }

  #banner-1534 .cs-link.cs-active {
      color: var(--primary);
  }

  #banner-1534 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

  #banner-1534 .cs-background:before {
      /* gradient overlay */
      content: '';
      width: 100%;
      height: 100%;
      background: rgba(58, 163, 46, 0.3);
      opacity: .8;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: 1;
  }

  #banner-1534 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* Makes img tag act as a background image */
      object-fit: cover;
  }

  #banner-1534 .cs-mask {
      --maskBG: #ffffff;
      width: 100%;
      height: auto;
      display: block;
      position: absolute;
      bottom: -1px;
      left: 0;
      z-index: 100;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #banner-1534 .cs-background:before {
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(58, 163, 46, 0.3) 23.05%, rgba(255, 243, 236, 0) 80.08%);
      opacity: 1;
  }

  #banner-1534 .cs-int-title {
      display: block;
  }

  #banner-1534 .cs-link {
      display: flex;
  }
}

/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-827 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 */
#quote-827 {
  width: 100%;
  max-width: 39.375rem;
  margin: 0 0 2rem 0;
  /* 16px - 32px */
  padding: clamp(1rem, 3vw, 2rem);
  background-color: #f7f7f7;
  border-radius: 1rem;
  position: relative;
}

#quote-827 .cs-quote-text {
  /* 14px - 16px */
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.5em;
  width: 100%;
  max-width: 31.25rem;
  margin: 0 0 1rem;
  color: #767676;
  display: block;
}

#quote-827 .cs-name {
  font-size: 1rem;
  line-height: 1.2em;
  text-transform: uppercase;
  font-weight: bold;
  width: 100%;
  margin: 0 0 0.25rem;
  color: var(--headerColor);
  display: block;
}

#quote-827 .cs-job {
  font-size: 0.875rem;
  line-height: 1.5em;
  color: #767676;
  display: block;
}

#quote-827 .cs-quote-icon {
  /* 60px - 136px */
  width: clamp(3.75rem, 10vw, 8.5rem);
  height: auto;
  position: absolute;
  bottom: 0;
  /* 16px - 32px */
  right: clamp(1rem, 4vw, 2rem);
}


/*-- -------------------------- -->
<---        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-1533 {
    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-1533 .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-1533 .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-1533 .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-1533 h2,
  #content-page-1533 h3,
  #content-page-1533 h4,
  #content-page-1533 h5,
  #content-page-1533 h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }

  #content-page-1533 h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }

  #content-page-1533 h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }

  #content-page-1533 h4,
  #content-page-1533 h5,
  #content-page-1533 h6 {
    font-size: 1.25rem;
  }

  #content-page-1533 .cs-button-solid {
    margin-bottom: 2rem;
  }

  #content-page-1533 .cs-no-margin {
    margin: 0;
  }

  #content-page-1533 .cs-color {
    color: var(--primary);
  }

  #content-page-1533 p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }

  #content-page-1533 p:last-of-type {
    margin-bottom: 2rem;
  }

  #content-page-1533 p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
    filter: brightness(120%);
  }

  #content-page-1533 ol,
  #content-page-1533 ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #content-page-1533 ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }

  #content-page-1533 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-1533 img {
    width: 100%;
    height: auto;
    display: block;
  }

  #content-page-1533 .cs-image-group {
    width: 32.625em;
    height: 33.75em;
    display: none;
    position: relative;
    z-index: 1;
  }

  #content-page-1533 .cs-background {
    width: 100%;
    height: 100%;
    border-radius: 2.5em;
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  #content-page-1533 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }

  #content-page-1533 .cs-flower {
    width: 9.5625em;
    height: auto;
    position: absolute;
    right: -2em;
    top: -2.25em;
    z-index: 10;
  }

  #content-page-1533 .cs-floater {
    width: 44.375em;
    height: auto;
    position: absolute;
    left: 9.375em;
    top: 25em;
    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-1533 .cs-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  #content-page-1533 .cs-content {
    width: 60%;
    max-width: 43.375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }

  #content-page-1533 .cs-image-group {
    font-size: min(1.3vw, 1em);
    display: block;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}

/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #content-page-1533 .cs-content {
    width: 53%;
  }
}

/*-- -------------------------- -->
<---        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-1532 {
    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-1532 .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-1532 .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-1532 .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-1532 h2,
  #content-page-1532 h3,
  #content-page-1532 h4,
  #content-page-1532 h5,
  #content-page-1532 h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }

  #content-page-1532 h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }

  #content-page-1532 h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }

  #content-page-1532 h4,
  #content-page-1532 h5,
  #content-page-1532 h6 {
    font-size: 1.25rem;
  }

  #content-page-1532 .cs-button-solid {
    margin-bottom: 2rem;
  }

  #content-page-1532 .cs-no-margin {
    margin: 0;
  }

  #content-page-1532 .cs-color {
    color: var(--primary);
  }

  #content-page-1532 p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }

  #content-page-1532 p:last-of-type {
    margin-bottom: 2rem;
  }

  #content-page-1532 p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
    filter: brightness(120%);
  }

  #content-page-1532 ol,
  #content-page-1532 ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #content-page-1532 ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }

  #content-page-1532 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-1532 img {
    width: 100%;
    height: auto;
    display: block;
  }

  #content-page-1532 .cs-image-group {
    width: 32.625em;
    height: 33.75em;
    display: none;
    position: relative;
    z-index: 1;
  }

  #content-page-1532 .cs-background {
    width: 100%;
    height: 100%;
    border-radius: 2.5em;
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  #content-page-1532 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }

  #content-page-1532 .cs-flower {
    width: 9.5625em;
    height: auto;
    position: relative;
    left: -2em;
    top: -2.25em;
    z-index: 10;
  }

  #content-page-1532 .cs-floater {
    width: 44.375em;
    height: auto;
    position: absolute;
    right: 9.375em;
    top: 25em;
    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-1532 .cs-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  #content-page-1532 .cs-content {
    width: 60%;
    max-width: 43.375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }

  #content-page-1532 .cs-image-group {
    font-size: min(1.3vw, 1em);
    display: block;
  }
}

/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #content-page-1532 .cs-content {
    width: 53%;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #content-1450 {
    padding: var(--sectionPadding);
  }

  #content-1450 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }

  #content-1450 .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: center;
  }

  #content-1450 .cs-title,
  #content-1450 .cs-text {
    max-width: 100%;
  }

  #content-1450 .cs-subtitle {
    /* text-align: left; */
    /* color: red; */
  }

  #content-1450 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0 0 2rem 0;
  }

  #content-1450 .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 3rem;
    background-color: var(--primary);
    border-radius: 0.5rem;
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }

  #content-1450 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }

  #content-1450 .cs-button-solid:hover:before {
    width: 100%;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1131 {
    padding: var(--sectionPadding);
  }

  #services-1131 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }

  #services-1131 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }

  #services-1131 .cs-topper {
    color: #767676;
  }

  #services-1131 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }

  #services-1131 .cs-item {
    width: 100%;
    text-align: center;
    list-style: none;
    margin: 0;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition:
      box-shadow 0.3s,
      border-color 0.3s;
  }

  #services-1131 .cs-item:hover {
    box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
    border-color: transparent;
  }

  #services-1131 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }

  #services-1131 .cs-image-group {
    width: 6.25rem;
    height: auto;
    /* 20px - 24px */
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
  }

  #services-1131 .cs-icon {
    width: 3rem;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #services-1131 .cs-graphic {
    width: 100%;
    height: auto;
  }

  #services-1131 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }

  #services-1131 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1131 .cs-item {
    text-align: left;
    align-items: flex-start;
    grid-column: span 6;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1131 .cs-item {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}