/* COMPONENT-SPECIFIC STYLES FOR THE REVIEW PAGE */
/*-- -------------------------- -->
<---     Portfolio Websites     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1626 {
    padding: var(--sectionPadding);
  }
  #services-1626 .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);
  }
  #services-1626 .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-1626 .cs-text {
    max-width: 40rem;
    position: relative;
    z-index: 1;
  }
  #services-1626 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 1.25rem);
    /* 28px - 40px */
    row-gap: clamp(1.75rem, 2.5vw, 2.5rem);
  }
  #services-1626 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-1626 .cs-item .cs-picture {
    transition: transform 0.6s;
  }
  #services-1626 .cs-item .cs-picture:hover {
    transform: scale(1.1);
    transition: transform 0.6s;
  }
  #services-1626 .cs-link {
    display: flex;
  }
  #services-1626 .cs-picture {
    padding: 0 1.5rem;
  }
  #services-1626 .cs-picture img {
    height: auto;
    max-width: 100%;
  }
  #services-1626 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0 0 1.5rem 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1626 .cs-container {
    max-width: 80rem;
  }
  #services-1626 .cs-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #services-1626 .cs-item {
    grid-column: span 4;
  }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-1693 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
  }
  #cta-1693 .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-1693 .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;
    gap: 1.5rem;
  }
  #cta-1693 .cs-title {
    max-width: 30ch;
    margin: 0;
    color: var(--accent);
  }
  #cta-1693 .cs-wrapper {
    width: 100%;
    max-width: 120rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    transform: translateX(-50%);
  }
  #cta-1693 .cs-graphic {
    width: 23.25rem;
    height: 23.25rem;
    opacity: 0.1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  #cta-1693 .cs-graphic-1 {
    left: -16.3125rem;
  }
  #cta-1693 .cs-graphic-2 {
    right: -16.3125rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-1693 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
  }
  #cta-1693 .cs-graphic-1 {
    left: -7.8125rem;
  }
  #cta-1693 .cs-graphic-2 {
    right: -7.8125rem;
  }
  #cta-1693 .cs-button-solid {
    min-width: 180px;
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-67 {
    padding: var(--sectionPadding);
  }
  #reviews-67 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-67 .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-card-group {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    column-gap: 1.25rem;
    row-gap: 4rem;
  }
  #reviews-67 .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: 2.5rem 0 0 0;
    /* Padding L & R - 16px - 32px */
    padding: 3.75rem clamp(1rem, 3.2vw, 2rem) 0;
    /* 32px - 40px */
    padding-bottom: clamp(2rem, 5.4vw, 2.5rem);
    box-shadow: 0px 20px 39px 0px rgba(0, 0, 0, 0.05);
    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-item:last-of-type {
    margin-bottom: 0;
  }
  #reviews-67 .cs-item-img {
    width: 5rem;
    height: 5rem;
    position: absolute;
    top: -2.5rem;
  }
  #reviews-67 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    padding-bottom: 1.25rem;
    margin-bottom: auto;
  }
  #reviews-67 .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;
    border-top: 1px solid #e8e9ec;
    padding-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #reviews-67 .cs-flex-group {
    width: 100%;
    margin: 0;
  }
  #reviews-67 .cs-name {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    width: 80%;
    margin: 0;
    display: block;
    color: var(--headerColor);
  }
  #reviews-67 .cs-desc {
    font-size: 0.875rem;
    font-weight: 400;
    color: #7d799c;
    display: block;
  }
  #reviews-67 .cs-item-stars {
    width: 6rem;
    height: 1rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-67 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
  }
}

/*# sourceMappingURL=reviews.css.map */