/*-- -------------------------- -->
<---         Leave a Review         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-211 {
      padding: var(--sectionPadding);
  }
  #reviews-211 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet*/
      max-width: 34.375rem;
      margin: auto;
  }
  #reviews-211 .cs-picture {
      width: 100%;
      /* 200px - 304px */
      height: clamp(12.5rem, 23.45vw, 19rem);
      display: block;
      position: relative;
  }
  #reviews-211 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  #reviews-211 .cs-card {
      max-width: 39.375rem;
  }
  #reviews-211 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      /* Padding top & bottom 40px - 80px */
      /* Padding left & right 32px - 72px */
      padding: clamp(2.5rem, 5.8vw, 5rem) clamp(2rem, 5.8vw, 4.5rem);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      background: var(--primary);
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #reviews-211 .cs-title,
  #reviews-211 .cs-topper {
      color: var(--bodyTextColorWhite);
  }
  #reviews-211 .cs-text {
      color: var(--bodyTextColorWhite);
      margin-bottom: 1rem;
  }
  #reviews-211 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #reviews-211 .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;
  }
  #reviews-211 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #006942;
      color: #006942;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
  }
  #reviews-211 .cs-button-solid:hover:before {
      width: 100%;
  }
  #reviews-211 .cs-button-solid {
      /* button styles override */
      background-color: #006942;
      color: #fff;
  }
  #reviews-211 .cs-review {
      /* padding left & right 32px - 80px */
      padding: 2.5rem clamp(2rem, 6vw, 5rem);
      box-shadow: -1px 21px 39px 0px rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  #reviews-211 .cs-review-img {
      width: 7rem;
      height: 1.25rem;
      display: block;
      /* margin-bottom 8px - 12px */
      margin: 0 auto clamp(0.5rem, 2vw, 0.75rem);
  }
  #reviews-211 .cs-review-title {
      /* 25px - 31px */
      font-size: clamp(1.5625rem, 3.1vw, 1.9375rem);
      line-height: 1.2em;
      text-align: center;
      font-weight: bold;
      /* margin-bottom 24px - 32px */
      margin: 0 auto clamp(1.5rem, 4.2vw, 2rem);
      color: var(--headerColor);
      display: block;
  }
  #reviews-211 .cs-review-p {
      /* 16px - 20px */
      font-size: clamp(1rem, 2vw, 1.25rem);
      line-height: 1.5em;
      text-align: center;
      max-width: 27.125rem;
      /* margin-bottom 24px - 32px */
      margin: 0 auto clamp(1.5rem, 4.2vw, 2rem);
      color: var(--bodyTextColor);
  }
  #reviews-211 .cs-review-name {
      /* 16px - 20px */
      font-size: clamp(1rem, 2vw, 1.25rem);
      line-height: 1.5em;
      text-align: center;
      margin: 0;
      display: block;
      color: var(--headerColor);
      font-weight: 700;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-211 .cs-container {
      max-width: 80rem;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: -1px 21px 39px 0px rgba(0, 0, 0, 0.06);
  }
  #reviews-211 .cs-card {
      /* prevents it from being squished by flexbox */
      flex: none;
      width: 44.8vw;
  }
  #reviews-211 .cs-review {
      box-shadow: none;
      width: 50%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-211 .cs-container {
      background: var(--medium);
  }
  body.dark-mode #reviews-211 .cs-content {
      background-color: var(--primary);
  }
  body.dark-mode #reviews-211 .cs-topper {
      color: var(--primaryLight);
  }
  body.dark-mode #reviews-211 .cs-title,
  body.dark-mode #reviews-211 .cs-text,
  body.dark-mode #reviews-211 .cs-review-title,
  body.dark-mode #reviews-211 .cs-review-p,
  body.dark-mode #reviews-211 .cs-review-name {
      color: var(--bodyTextColorWhite);
  }
}

                              

/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-607 {
    padding: var(--sectionPadding);
  }
  #reviews-607 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-607 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #reviews-607 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  #reviews-607 .cs-item {
    list-style: none;
    width: 100%;
    margin: 0;
    /* 32px - 48px top & bottom */
    /* 16px - 32px left & right */
    padding: clamp(2rem, 7vw, 3rem) clamp(1rem, 4vw, 2rem);
    /* makes padding not affect height and width */
    box-sizing: border-box;
    background-color: #F0F0F0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #reviews-607 .cs-icon {
    filter: hue-rotate(190deg); /* Adjust number for desired h
    /* 30px - 40px */
    width: clamp(1.875rem, 4vw, 2.5rem);
    height: auto;
    margin: 0 0 2rem 0;
    display: block;
  }
  #reviews-607 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 4vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    color: var(--headerColor);
  }
  #reviews-607 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 4vw, 1rem);
    line-height: 1.5em;
    max-width: 24.25rem;
    margin: 0 0 3rem 0;
    color: var(--bodyTextColor);
  }
  #reviews-607 .cs-name {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 500;
    margin: auto 0 0 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #reviews-607 .cs-name:before {
    content: '';
    width: 0.5rem;
    height: 1px;
    background: currentColor;
    display: block;
    position: relative;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-607 .cs-container {
    max-width: 80rem;
  }
  #reviews-607 .cs-card-group {
    /* we went grid on tablet so that we can have an even spaced section with this design. Flexbox has a hard time making this type of design work with even gaps. */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  #reviews-607 .cs-item {
    grid-column: span 1;
    grid-row: span 1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #reviews-607 .cs-card-group {
    /* went back to flexbox for an easier transition to this horizontal layout. We don't have to re-target each cs-item to reset its grid positioning, we can just revert to flexbox and make the layout in less code and hassle */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
  }
  #reviews-607 .cs-item {
    width: clamp(31.5%, 30.93vw, 32.29%);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-607 .cs-title,
  body.dark-mode #reviews-607 .cs-text,
  body.dark-mode #reviews-607 .cs-h3,
  body.dark-mode #reviews-607 .cs-name,
  body.dark-mode #reviews-607 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-607 .cs-text,
  body.dark-mode #reviews-607 .cs-item-text {
    opacity: .8;
  }
  body.dark-mode #reviews-607 .cs-item {
    background-color: rgba(0, 0, 0, 0.2);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1458 {
    background-color: rgba(227, 244, 248, 0.397);
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
  }
  #faq-1458 .cs-container {
    width: 100%;
    /* chnages to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq-1458 .cs-content {
    text-align: left;
    max-width: 39.375rem;
  }
  #faq-1458 .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
  }
  #faq-1458 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: center;
  }
  #faq-1458 .cs-faq-item {
    list-style: none;
    width: 100%;
    padding: 1.25rem;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
    border-bottom: 1px solid #e8e8e8;
  }
  #faq-1458 .cs-faq-item.active {
    border-color: var(--primary);
  }
  #faq-1458 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-1458 .cs-faq-item.active .cs-button:before {
    background-color: var(--primary);
    transform: rotate(315deg);
  }
  #faq-1458 .cs-faq-item.active .cs-button:after {
    background-color: var(--primary);
    transform: rotate(-315deg);
  }
  #faq-1458 .cs-faq-item.active .cs-item-p {
    height: auto;
    padding-top: 1rem;
    opacity: 1;
  }
  #faq-1458 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-1458 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1458 .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.25rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #faq-1458 .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.0625rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #faq-1458 .cs-button-text {
    width: 90%;
    display: block;
  }
  #faq-1458 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    max-width: 33.8125rem;
    height: 0;
    margin: 0;
    padding: 0; background-color: rgba(227, 244, 248, 0.589);
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
  #faq-1458 .cs-image-group {
    /* we use ems for everything in the container so they pull their value for em from the font size of this parent instead of the root element (html). This font size scales with the view width of the screen and stops when the font size equals the value of 1em (16px) and stops growing */
    font-size: min(2.43vw, 1em);
    width: 37.375em;
    height: 42.375em;
    display: block;
    position: relative;
  }
  #faq-1458 .cs-picture {
    width: 32.625em;
    height: 38.0625em;
    top: 0;
    left: 0;
  }
  #faq-1458 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq-1458 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #faq-1458 .cs-content {
    width: 55%;
  }
  #faq-1458 .cs-image-group {
    font-size: min(1.4vw, 1em);
    height: auto;
    min-height: 42.375rem;
  }
  #faq-1458 .cs-picture {
    height: 90%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-1458 .cs-title,
  body.dark-mode #faq-1458 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1458 .cs-item-p {
    opacity: 0.8;
  }
  body.dark-mode #faq-1458 .cs-faq-item {
    border-bottom: rgba(255, 255, 255, 0.1);
  }
  body.dark-mode #faq-1458 .cs-faq-item.active {
    border-color: #fff;
  }
  body.dark-mode #faq-1458 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  body.dark-mode #faq-1458 .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq-1458 .cs-faq-item.active .cs-button:after {
    background-color: var(--primary);
  }
  body.dark-mode #faq-1458 .cs-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1458 .cs-button:before,
  body.dark-mode #faq-1458 .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-51 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #cta-51 .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-51 .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;
  }
  #cta-51 .cs-topper {
    color: var(--secondary);
  }
  #cta-51 .cs-title,
  #cta-51 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #cta-51 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
    opacity: .8;
  }
  #cta-51 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta-51 .cs-picture {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-51 .cs-picture:before {
    /* black color overlay */
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #006942;
    opacity: .8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-51 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}