:root {
  margin: 0;
  padding: 0;
}

body {
  margin: 0px;
  padding: 0px;
}

section:first-of-type {
  padding-top: 125px;
}

#services-1666 .cs-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  gap: 20px;
}

#services-1666 .cs-content {
  text-align: left;
  max-width: 40.625rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-1165 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 */
@media only screen and (min-width: 0rem) {
  #list-1165 {
    max-width: 39.375rem;
    margin: 0 0 2rem 0;
    padding: 0;
    /* clips the bullets to create the half circle */
    overflow: hidden;
  }

  #list-1165 .cs-li {
    list-style: none;
    margin: 0 0 0.5rem 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
  }

  #list-1165 .cs-li:before {
    /* bullet */
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background: var(--zr-primary-lilac);
    display: block;
    /* prevents flexbox from squishing it */
    flex: none;
  }

  #list-1165 em {
    padding: 0;
    margin: 0;
  }
}


/*-- -------------------------- -->
<---           Blog             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #blog-1144 {
    padding: var(--sectionPadding);
    padding-top: 100px;
    position: relative;
    z-index: 1;
    min-height: 90%;
  }

  #blog-1144 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 49rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #blog-1144 .cs-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #blog-1144 .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;
  }

  #blog-1144 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
  }

  #blog-1144 .cs-item {
    text-align: left;
    padding: 0;
    margin: 0;
    list-style: none;
    border-radius: var(--button-border-radius);
    overflow: hidden;
    background-color: var(--zr-bg);
    border: var(--button-border-stroke) solid var(--zr-fg);
    grid-column: span 12;
    display: grid;
    justify-content: space-between;
    position: relative;
    box-shadow: var(--emphasis-shadow-offset) var(--emphasis-shadow-offset) var(--zr-fg);
    z-index: 1;
  }

  #blog-1144 .cs-picture {
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: block;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
  }

  #blog-1144 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
    margin: 0;
    padding: 0;
  }

  #blog-1144 .cs-card {
    height: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: grid;
    position: relative;
    z-index: 2;
  }

  #blog-1144 .cs-link {
    font-size: 1rem;
    line-height: 1.2em;
    text-decoration: none;
    margin: 10px 0px;
    color: var(--zr-dark-plum);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #blog-1144 .cs-h3 a {
    text-decoration: none;
    color: var(--zr-dark-plum);
  }

  #blog-1144 .cs-link:hover .cs-arrow {
    transform: translateX(0.25rem);
  }

  #blog-1144 .cs-arrow {
    width: 1.25rem;
    height: auto;
    transition: transform 0.3s;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #blog-1144 .cs-container {
    max-width: 80rem;
  }

  #blog-1144 .cs-content {
    text-align: left;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-items: space-between;
  }

  #blog-1144 .cs-item {
    grid-column: span 6;
    padding: 15px;
  }
}

/* Tablet - 600px */
@media screen and (max-width: 37.5rem) {
  .cs-table {
    display: block;
    overflow-x: auto;
  }
}



/* Tablet - 768px */
@media only screen and (min-width: 48rem) {

  #content-page-714 .cs-content {
    margin: auto;
  }
}

@media only screen and (min-width: 0rem) {
  #list-1165 {
    max-width: 39.375rem;
    margin: 0 0 2rem 0;
    padding: 0;
    /* clips the bullets to create the half circle */
    overflow: hidden;
  }

  #list-1165 li {
    list-style: none;
    margin: 0 0 0.5rem 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
  }

  #list-1165 li:before {
    /* bullet */
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background: var(--zr-primary-lilac);
    display: block;
    /* prevents flexbox from squishing it */
    flex: none;
  }
}


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #content-page-714 {
    padding: var(--sectionPadding);
    padding-top: 100px;
    background-color: var(--zr-bg);
    /* clips the wave background from causing overflow issues when it goes off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

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

  #content-page-714 .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;
  }

}

/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #faq-254 {
    padding: var(--sectionPadding);
    margin-bottom: 50px;
  }

  #faq-254 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: grid;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #faq-254 .cs-faq-group {
    padding: 0;
    margin: 0;
    gap: 20px;
    display: grid;
  }

  #faq-254 .cs-faq-item {
    list-style: none;
    box-shadow: var(--emphasis-shadow-offset) var(--emphasis-shadow-offset);
    border-radius: var(--button-border-radius);
    border: var(--button-border-stroke) solid var(--zr-fg);
    background-color: var(--zr-primary-lilac);
  }

  #faq-254 .cs-faq-item.active .cs-button:before {
    transform: rotate(180deg);
  }

  #faq-254 .cs-faq-item.active .cs-button:after {
    opacity: 0;
    transform: rotate(360deg);
  }

  #faq-254 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 12px - 16px */
    width: 100%;
    opacity: 1;
    border-top: var(--button-border-stroke) solid var(--zr-fg);
    margin: 0px;
    transition: opacity 0.3s;
    padding: 10px;
  }

  #faq-254 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-align: left;
    /* 12px - 16px */
    display: block;
    width: 98%;
    position: relative;
    margin: 20px;
  }

  .cs-button h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--zr-fg);
  }

  #faq-254 .cs-button:hover {
    cursor: pointer;
  }

  #faq-254 .cs-button:before {
    /* plus sign */
    content: "";
    width: 0.75rem;
    height: 0.125rem;
    background: var(--headerColor);
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.25rem;
    transition: transform 0.3s;
  }

  #faq-254 .cs-button:after {
    /* plus sign */
    content: "";
    width: 0.75rem;
    height: 0.125rem;
    background: var(--headerColor);
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.25rem;
    transform: rotate(90deg);
    transform-origin: center;
    transition:
      opacity 0.5s,
      transform 0.3s;
  }

  #faq-254 .cs-item-p {
    /* 14px - 16px */
    line-height: 1.5em;
    height: 0;
    margin: 0;
    opacity: 0;
    color: var(--bodyTextColor);
    background: var(--zr-bg);
    /* clips the text so it doesn't show up */
    border-radius: 0 0 var(--button-border-radius) var(--button-border-radius);
    transition:
      opacity 0.3s,
  }

  #faq-254 .cs-item-p p {
    margin: 10px;
    margin-top: 5px;
  }

}

/* Tablet - 768px */
@media only screen and (min-width: 48em) {

  #faq-254 .cs-flex-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 16px - 48px */
    gap: clamp(1rem, 3.5vw, 3rem);
  }
}

#page-fill {
  min-height: 90vh !important;
  overflow: hidden !important;
  justify-content: center;
  display: flex;
}


/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/
 #hero-1946 .cs-container {
  margin-bottom: 2rem;
 }
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {

  #hero-1946 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  #hero-1946 .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;
    position: relative;
    z-index: 1;
  }

  #hero-1946 .cs-flex {
    /* prevents flexbox from squishing it */
    flex: none;
  }

  #hero-1946 .cs-picture {
    width: 100%;
    /* 280px - 510px */
    height: clamp(20.0rem, 30vw, 30.0rem);
    display: block;
    position: relative;
  }

  #hero-1946 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
  }
}


/* Small Desktop - 1024px */
@media only screen and (min-width: 48rem) {

  #hero-1946 .cs-container {
    flex-direction: row;
  }

  #hero-1946 .cs-content {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

}

/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {

  #hero-1946 .cs-content {
    max-width: 180rem;
  }

}

/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
@media only screen and (min-width: 0rem) {
  #services-1666 .cs-container {
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
  }

  #services-1666 .cs-image-group {
    width: 100%;
    height: auto;
    margin: 0;
    position: relative;
  }

  #services-1666 .cs-picture {
    width: 100%;
    min-height: 20.5rem;
    display: block;
    position: relative;
  }

  #services-1666 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #services-1666 .cs-content {
    text-align: left;
    width: 100%;
    max-width: 40.625rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: none;
  }

}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1666 .cs-picture {
    height: 100%;
    min-width: 36.5rem;
    width: 48vw;
    margin: 0px auto;
  }
}

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

  #services-1666 .cs-content {
    width: 55%;
  }

  #services-1666 .cs-image-group {
    width: 100%;
    max-width: 33.875rem;
  }

  #services-1666 .cs-picture {
    width: 100%;
    min-width: 100%;
  }

}

/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-284 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

  #steps-284 .cs-text {
    margin-bottom: 1rem;
  }

  #steps-284 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }

  #steps-284 .cs-right-section {
    margin: 0;
    padding: 0;
    max-width: 35.125rem;
  }

  #steps-284 .cs-item {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  #steps-284 .cs-item:nth-of-type(1) .cs-item-text:before {
    height: 50%;
    top: auto;
    bottom: -1px;
  }

  #steps-284 .cs-item:nth-of-type(2),
  #steps-284 .cs-item:nth-of-type(4) {
    justify-content: flex-end;
    text-align: right;
  }

  #steps-284 .cs-item:nth-of-type(2) .cs-number,
  #steps-284 .cs-item:nth-of-type(4) .cs-number {
    /* Send number to the right */
    order: 2;
    margin: 0;
    /* 15px - 24px */
    margin-left: clamp(0.9375rem, 3vw, 1.5rem);
  }

  #steps-284 .cs-item:nth-of-type(2) .cs-item-text,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text {
    /* reverse padding */
    padding-left: 0;
    /* 15px - 24px */
    padding-right: clamp(0.9375rem, 3vw, 1.5rem);
    /* reset the border on the :before */
  }

  #steps-284 .cs-item:nth-of-type(2) .cs-item-text:before,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text:before {
    border-top: 1px solid var(--primary);
    border-left: none;
    border-right: 1px solid var(--primary);
    left: auto;
    right: 0;
    bottom: 0;
    border-radius: 0 0.5rem 0.5rem 0;
  }

  #steps-284 .cs-item:nth-of-type(2) .cs-item-text:after,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text:after {
    /* move dot to the right now */
    left: auto;
    right: -0.9375rem;
  }

  #steps-284 .cs-item:nth-of-type(3) .cs-item-text:before {
    height: auto;
    border-top: 1px solid var(--primary);
    border-radius: 0.5rem 0 0 0.5rem;
    top: 1px;
    bottom: 0px;
  }

  #steps-284 .cs-item:nth-of-type(4) .cs-item-text:before {
    height: 50%;
    border-radius: 0 0.5rem 0 0;
    border-bottom: none;
    top: -1px;
  }

  #steps-284 .cs-number {
    /* 16px - 20px */
    /* 15px - 24px */
    margin-right: clamp(0.9375rem, 3vw, 1.5rem);
    aspect-ratio: 1;
  }

  #steps-284 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    max-width: 18.75rem;
    /* 22px - 32px */
    padding: clamp(1.375rem, 3vw, 2rem) 0;
    box-sizing: content-box;
    /* 15px - 24px */
    padding-left: clamp(0.9375rem, 3vw, 1.5rem);
    position: relative;
  }

  #steps-284 .cs-item-text:before {
    /* Green line */
    content: "";
    width: 70%;
    height: 100%;
    border-radius: 0 0 0 0.5rem;
    border-left: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary);
    box-sizing: content-box;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }

  #steps-284 .cs-item-text:after {
    /* list circle */
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: var(--primary);
    border-radius: 50%;
    border: 12px solid #fff;
    box-sizing: content-box;
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    left: -0.9375rem;
    transform: translateY(-50%);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-284 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  #steps-284 .cs-content {
    width: 50%;
    /* reset margin to play nice with flexbox */
    margin: 0;
  }

  #steps-284 .cs-right-section {
    width: 57%;
    /* 20px - 25px - this pulls the section up so it's flush with the top of the left section, the padding top on the .cs-item-text is creating a gap at the top of the section. Wrapped in a calc() function to turn clamp() value into a negative number */
    margin-top: calc(clamp(1.25rem, 2vw, 1.5625rem) * -1);
  }
}

/*-- -------------------------- -->
<---    Side by Side Reverse    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-r-1892 {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }

  #sbs-r-1892 .cs-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #sbs-r-1892 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 3;
  }

  #sbs-r-1892 .cs-image-group {
    font-size: min(2.29vw, 0.9rem);
    width: 39.375em;
    height: 45.625em;
    display: block;
    position: relative;
    z-index: 1;
  }

  #sbs-r-1892 .cs-picture {
    width: 32.625em;
    height: 42.5em;
    box-sizing: border-box;
    overflow: hidden;
    border: 8px solid var(--primary);
    border-radius: 16.25rem;
    position: absolute;
    right: 30;
    z-index: -1;
  }

  #sbs-r-1892 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.7s;
  }

  #sbs-r-1892 .cs-graphic {
    height: auto;
    position: absolute;
  }

  #sbs-r-1892 .cs-lines {
    width: 11em;
    height: auto;
    bottom: 0;
    right: 30;
  }

  #sbs-r-1892 .cs-info {
    width: 50%;
    max-width: 19.0625rem;
    padding: 6.25em 2.5em;
    background-color: var(--primary);
    border-radius: 14rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  #sbs-r-1892 .cs-info-text {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 3.5vw, 1.25rem);
    line-height: 1.6em;
    text-align: center;
    max-width: 13.9375em;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }

  #sbs-r-1892 .cs-bold {
    /* 16px - 24x */
    font-size: clamp(1rem, 3.5vw, 1.5rem);
    line-height: 1.2em;
    margin: 0 0 0.25rem;
    color: var(--headerColor);
    display: block;
  }

  #sbs-r-1892 .cs-text-large {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0 0 0.75rem;
    color: var(--headerColor);
  }

}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-r-1892 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }

  #sbs-r-1892 .cs-content {
    /* 48px - 64px */
    padding: clamp(3rem, 5vw, 4rem) 0;
  }

  #sbs-r-1892 .cs-image-group {
    font-size: min(1.27vw, 1rem);
    min-height: 45.625em;
    height: auto;
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }

  #sbs-r-1892 .cs-picture {
    height: 93.150685%;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1628 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;

  }

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

  #services-1628 .cs-text {
    max-width: 40rem;
    position: relative;
    z-index: 1;
  }

  #services-1628 .cs-text:after {
    /* divider line */
    content: "";
    width: 100%;
    height: 1px;
    margin-top: 1.5rem;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: relative;
  }

}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1628 .cs-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  #services-1628 .cs-flex {
    text-align: left;
    width: 40vw;
    max-width: 40rem;
    flex: none;
  }

  #services-1628 .cs-text {
    padding: 0.75rem 0 0.75rem 1.5rem;
  }

  #services-1628 .cs-text:after {
    width: 1px;
    height: 100%;
    margin: 0 1.5rem 0 0;
    order: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}



/*-- -------------------------- -->
<---          Content           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #survey-thanks {
    padding: var(--sectionPadding);
    padding-top: clamp(8rem, 15vw, 10rem);
  }

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

  #survey-thanks .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;
  }

  #survey-thanks .cs-title,
  #survey-thanks .cs-text {
    max-width: 100%;
  }

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

}

#survey-thanks .cs-social {
  height: 2rem;
  visibility: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

#survey-thanks .cs-social-link {
  text-decoration: none;
  width: 3rem;
  height: 3rem;
  background-color: var(--zr-soft-gray);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s;
}

#survey-thanks .cs-social-link:hover {
  background-color: var(--primary);
}

#survey-thanks .cs-social-icon {
  width: 1.5rem;
  height: auto;
  display: block;
}

/*-- -------------------------- -->
<---        Collection          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {

  #collection-1595 .cs-container {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #collection-1595 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 31.25rem;
    /* pushes it to the left */
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #collection-1595 .cs-text {
    margin-bottom: 1rem;
  }

  #collection-1595 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }

  #collection-1595 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    column-gap: clamp(1rem, 3vw, 1.25rem);
    /* 16px - 40px */
    row-gap: clamp(1rem, 3vw, 2.5rem);
  }

  #collection-1595 .cs-item {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .highlight-card {
    padding: 20px;
    box-shadow: var(--emphasis-shadow-offset) var(--emphasis-shadow-offset);
    border-radius: var(--button-border-radius);
    border: var(--button-border-stroke) solid var(--zr-fg);
    transition: box-shadow .3s background-color .3s border .3s;
    display: flex;
    flex-direction: column;
  }

  .highlight-card:hover {
    box-shadow: 0 0;
    background-color: var(--primary-100);
    border: var(--button-border-stroke) solid var(--zr-primary-lilac);
  }

  #collection-1595 .cs-item:hover .cs-picture img {
    transform: scale(1.05);
  }

  #collection-1595 .cs-link {
    text-decoration: none;
    display: flex;
  }

  #collection-1595 .cs-picture {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    aspect-ratio: 1;
  }

  #collection-1595 .cs-picture img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform .3s;
  }

  #collection-1595 .cs-product-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--zr-dark-plum);
  }

}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #collection-1595 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  #collection-1595 .cs-card-group {
    width: 70%;
    flex-direction: row;
    align-items: stretch;
    /* prevents flexbox from squishing it */
    flex: none;
  }

  .highlight-card {
    min-height: 550px;
  }

  #collection-1595 .cs-item {
    list-style: none;
    width: 50%;
    margin: 0;
    padding: 0;
  }

  .cs-link.secondary-card {
    margin-top: 3rem;
  }
}

/*-- -------------------------- -->
<---           Quote            -->
<--- -------------------------- -*/

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

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

  #quote-561 .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;
    gap: 20px;
  }

  #quote-561 .cs-topper:before {
    /* yellow line */
    content: "";
    width: 3.125rem;
    height: 2px;
    background: var(--zr-primary-lilac);
    opacity: 1;
    display: block;
  }

  #quote-561 .cs-quote {
    /* 31px - 49px */
    font-size: clamp(0.9375rem, 2.1vw, 2.0625rem);
    line-height: 1.2em;
    font-weight: 900;
    margin: 0;
    color: var(--zr-dark-plum);
  }

  #quote-561 .cs-name {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    line-height: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    color: var(--zr-fg);
    display: block;
    letter-spacing: 0.01em;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-342 .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-342 .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-342 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: 2rem;
  }

  #services-342 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 31.25rem;
    border-radius: 0.5rem;
    position: relative;
    z-index: 1;
    box-shadow: var(--emphasis-shadow-offset) var(--emphasis-shadow-offset);
    border-radius: var(--button-border-radius);
    border: var(--button-border-stroke) solid var(--zr-fg);
    padding: 0 1em;
    transition:
      box-shadow 0.3s;
  }

  #services-342 h2 {
    font-size: 1.25rem;
    color: var(--zr-dark-plum);
  }

  #services-342 .cs-item:hover {
    box-shadow: 0px 0px;
  }

  #services-342 .cs-link {
    text-decoration: none;
    display: block;
  }

  #services-342 .cs-picture {
    width: 100%;
    height: 15rem;
    /* 16px - 24px */
    margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
    border-radius: 0.5rem 0.5rem 0 0;
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 10;
  }

  #services-342 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: fit;
    transition:
      transform 0.6s,
      opacity 0.3s;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-342 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    align-items: stretch;
  }

  #services-342 .cs-item {
    /* we do this so it's stackable. You can add any number of reviews you want and they will stack and center in the middle. We don't use grid because if you have an odd number of cards, they don't stay centered, they align with their grid lines. This way its more FLEX-ible*/
    width: 33%;
  }
}

.access-callout a {
  font-weight: bold;
  font-size: 1.2rem;
  width: 20%;
  min-width: 400px;
  margin: 0 auto;
  border: var(--button-border-stroke) solid black;
  border-radius: var(--button-border-radius);
  box-shadow: var(--emphasis-shadow-offset) var(--emphasis-shadow-offset);
  background-color: var(--primary-90);
  color: var(--zr-fg);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 25px;
  text-decoration: none;
  padding: 1rem;
}