/* reset nav styles */
#navigation .background-color-div {
  height: 100%;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
#navigation .logo .light {
  display: none;
}
#navigation .logo .dark {
  display: block;
}
#navigation #navbar-menu ul li a {
  color: #767676;
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #reviews {
    padding: var(--sectionPadding);
  }
  #reviews .cs-container {
    width: 100%;
    max-width: 90em;
    margin: auto;
  }
  #reviews .cs-topper {
    text-align: center;
  }
  #reviews .cs-title {
    text-align: center;
    /* maximum of 24 characters wide, including spaces */
    max-width: 24ch;
    margin: 0 auto 1rem;
  }
  #reviews .cs-text {
    text-align: center;
    max-width: 40.625rem;
    margin: 0 auto;
    /* 48px - 64px */
    margin-bottom: clamp(3rem, 6vw, 4rem);
  }
  #reviews .cs-card-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.15rem);
  }
  #reviews .cs-item {
    list-style: none;
    max-width: 39.375rem;
    margin: 0;
    /* 24px - 32px top & bottom */
    /* 16px - 40px left & right */
    padding: clamp(1.5rem, 3.15vw, 2rem) clamp(1rem, 3.15vw, 2.5rem);
    background-color: #F7F7F7;
    border-radius: 1rem;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
  }
  #reviews .cs-quote {
    width: 2.5rem;
    height: auto;
    margin-bottom: 2rem;
    display: block;
  }
  #reviews .cs-review {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    line-height: 1.5em;
    margin: 0;
    /* 20px - 40px */
    margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
    color: var(--bodyTextColor);
  }
  #reviews .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    color: var(--headerColor);
    display: block;
  }
  #reviews .cs-job {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
  #reviews .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
  }
  #reviews .cs-item {
    width: clamp(31.5%, 30vw, 32.3%);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #reviews .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #reviews .cs-title,
  body.dark-mode #reviews .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews .cs-item {
    background-color: var(--accent);
  }
  body.dark-mode #reviews .cs-review,
  body.dark-mode #reviews .cs-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews .cs-job {
    color: var(--bodyTextColorWhite);
    opacity: .7;
  }
}