/*-- -------------------------- -->
<---         Intro         -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #cs-content-831 {
    /* 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;
    padding: var(--sectionPadding);
  }
  #cs-content-831 .cs-text {
    max-width: 60rem;
    font-size: 1.3rem;
  }
}
/*-- -------------------------- -->
<---       Our Story         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-68 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #sbs-68 .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);
  }
  #sbs-68 .cs-container .cs-picture {
    width: 95%;
    max-width: 15.625rem;
    margin: 0;
    position: relative;
    display: block;
    /* width divided by height */
    aspect-ratio: 312/335;
    border-radius: 1rem;
    z-index: 1;
  }
  #sbs-68 .cs-container .cs-picture:before {
    /* Top right box */
    content: "";
    width: 10rem;
    /* 202px - 248px */
    height: clamp(12.625rem, 25vw, 15.5rem);
    background: var(--primaryDark);
    opacity: 1;
    border-radius: 1rem;
    position: absolute;
    display: block;
    /* 16px -20px */
    /* wrapped in a calc function to get a negative clamp value */
    top: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
    right: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
  }
  #sbs-68 .cs-container .cs-picture:after {
    /* Bottom left box */
    content: "";
    width: 10rem;
    /* 202px - 248px */
    height: clamp(12.625rem, 25vw, 15.5rem);
    background: var(--primaryDark);
    opacity: 1;
    border-radius: 1rem;
    position: absolute;
    display: block;
    /* 16px -20px */
    /* wrapped in a calc function to get a negative clamp value */
    bottom: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
    left: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
    z-index: -1;
  }
  #sbs-68 .cs-container .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
  }
  #sbs-68 .cs-container .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;
  }
  #sbs-68 .cs-container .cs-content .cs-text {
    margin-bottom: 1rem;
    font-size: 1.2rem;
  }
  #sbs-68 .cs-container .cs-content .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-68 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    /* 60px - 128px */
    gap: clamp(3.75rem, 9.5vw, 6rem);
  }
  #sbs-68 .cs-container .cs-picture {
    /* 328px - 502px */
    width: clamp(20.5rem, 37.5vw, 31.375rem);
    /* 440px - 520px */
    height: clamp(27.5rem, 40vw, 32.5rem);
    /* 16px - 20px */
    margin: 0 0 0 clamp(1rem, 5vw, 1.25rem);
    flex: none;
    max-width: 34.375rem;
  }
}
/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/
/* 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);
    }
  }
  #why-choose-1371 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  #why-choose-1371 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #why-choose-1371 .cs-container .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;
  }
  #why-choose-1371 .cs-container .cs-content .cs-title {
    max-width: 23ch;
  }
  #why-choose-1371 .cs-container .cs-content .cs-text {
    max-width: 52.5rem;
    margin-bottom: 1rem;
  }
  #why-choose-1371 .cs-container .cs-content .cs-text:last-of-type {
    margin-bottom: 0rem;
  }
  #why-choose-1371 .cs-container .cs-content .cs-text strong {
    color: var(--headerColor);
    font-size: 1.25rem;
  }
  #why-choose-1371 .cs-container .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch6;
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item-picture {
    list-style: none;
    width: 100%;
    grid-column: span 12;
    position: relative;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item-picture .cs-picture {
    width: 100%;
    height: 26.125rem;
    border-radius: 1.5rem;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item-picture .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1371 .cs-container .cs-card-group .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;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    transition: background-color 0.3s;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--primaryDark);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
    transition: color 0.3s;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s, opacity 0.3s;
  }
  #why-choose-1371 .cs-bubbles1 {
    width: 26.1875rem;
    height: 26.6875rem;
    position: absolute;
    left: -16.25rem;
    top: -15rem;
    z-index: -1;
    display: none;
  }
  #why-choose-1371 .cs-bubbles1:before {
    /* white border bubble */
    content: "";
    width: 20.625rem;
    height: 20.625rem;
    background: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 1rem;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #why-choose-1371 .cs-bubbles1:after {
    /* orange bubble */
    content: "";
    width: 16.25rem;
    height: 16.25rem;
    background: var(--primary);
    opacity: 0.1;
    border-radius: 1rem;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #why-choose-1371 .cs-bubbles2 {
    width: 26.1875rem;
    height: 26.6875rem;
    display: block;
    position: absolute;
    /* changes to 160px at larger desktop */
    right: -11.25rem;
    bottom: -8.75rem;
    z-index: -1;
    display: none;
  }
  #why-choose-1371 .cs-bubbles2:before {
    /* white border bubble */
    content: "";
    width: 20.625rem;
    height: 20.625rem;
    background: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 1rem;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #why-choose-1371 .cs-bubbles2:after {
    /* orange bubble */
    content: "";
    width: 16.25rem;
    height: 16.25rem;
    background: var(--primary);
    opacity: 0.1;
    border-radius: 1rem;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 9s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1371 .cs-container .cs-card-group .cs-item {
    grid-column: span 4;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-1371 .cs-container .cs-card-group .cs-item-picture {
    grid-column: 4 / span 6;
    grid-row: 1 / span 3;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item-picture .cs-picture {
    height: 100%;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item {
    grid-column: span 2;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item:nth-of-type(1) {
    grid-column: 1 / span 3;
    grid-row: 1 / span 1;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item:nth-of-type(2) {
    grid-column: 1 / span 3;
    grid-row: 2 / span 1;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item:nth-of-type(3) {
    grid-column: 1 / span 3;
    grid-row: 3 / span 1;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item:nth-of-type(5) {
    grid-column: 10 / span 3;
    grid-row: 1 / span 1;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item:nth-of-type(6) {
    grid-column: 10 / span 3;
    grid-row: 2 / span 1;
  }
  #why-choose-1371 .cs-container .cs-card-group .cs-item:nth-of-type(7) {
    grid-column: 10 / span 3;
    grid-row: 3 / span 1;
  }
  #why-choose-1371 .cs-bubbles1 {
    left: -8.125rem;
    top: -9.375rem;
  }
}
/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
  #why-choose-1371 .cs-bubbles1 {
    margin-right: 40.625rem;
    left: auto;
    right: 50%;
    display: block;
  }
  #why-choose-1371 .cs-bubbles2 {
    margin-left: 37.5rem;
    left: 50%;
    right: auto;
    display: block;
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-67 {
    padding: var(--sectionPadding);
    background: linear-gradient(to bottom, #f7f7f7, #ffffff);
  }
  #reviews-67 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  #reviews-67 .cs-container .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-67 .cs-container .cs-card-group {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    column-gap: 1.25rem;
    row-gap: 4rem;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    max-width: 39.375rem;
    /* pushes up the same amount the cs-item-img overlaps the card */
    margin: 0;
    /* Padding L & R - 16px - 32px */
    padding: 2rem clamp(1rem, 3.2vw, 2rem) 0;
    padding-bottom: 1.8rem;
    box-shadow: 0px 20px 39px 0px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    border-radius: 0.25rem;
    background: #fff;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    /* Prevents padding from affecting height & width */
    box-sizing: border-box;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item:last-of-type {
    margin-bottom: 0;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-item-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;
    color: var(--bodyTextColor);
    border-bottom: 1px solid #e8e9ec;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-info {
    width: 100%;
    /* margin-top auto pushes up against the rest of the card, that way when one card has more text than the other, the reviewer info is always pushed to the bottom and lined up with the rest of them.  This ensures better responsiveness for changing content */
    margin: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-info .cs-flex-group {
    width: 100%;
    margin: 0;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-info .cs-flex-group .cs-name {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    font-weight: 700;
    width: 40%;
    margin: 0;
    color: var(--headerColor);
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-info .cs-flex-group .cs-desc {
    font-size: 1rem;
    font-weight: 400;
    color: #3e3e3e;
    display: block;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-info .cs-item-stars {
    width: 6rem;
    height: 1rem;
  }
  #reviews-67 .cs-container .cs-button-solid {
    margin-top: 2rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-67 .cs-container .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
  }
}