/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-345 {
    /* centers the button */
    text-align: center;
    padding: var(--sectionPadding);
    background-color: var(--primary-white);
  }
  #services-345 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-345 .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-345 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-345 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 31.25rem;
    /* 16px - 32px */
    padding: clamp(1rem, 2vw, 2rem);
    border: 1px solid #e8e8e8;
    box-sizing: border-box;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  }
  #services-345 .cs-item:hover {
    background-color: var(--primary-opacity);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 50px;
    transform: translateY(-0.4375rem);
  }
  #services-345 .cs-item:hover .cs-picture:before {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  #services-345 .cs-link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #services-345 .cs-picture {
    width: 5rem;
    height: 5rem;
    margin: 0;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-opacity);
    position: relative;
    z-index: 1;
  }
  #services-345 .cs-icon {
    height: 2.5rem;
    width: auto;
    filter: var(--hex-filter);
  }
  #services-345 .cs-h3 {
    font-family: var(--title-font);
    text-transform: uppercase;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #services-345 .cs-item-text {
    font-size: 1rem;
    text-align: center;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-345 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  #services-345 .cs-item {
    width: 48.9%;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-345 .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 dont 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: clamp(23.47%, 22vw, 23.955%);
  }
}
/*-- -------------------------- -->
<---       About Us             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbs-600,
  #RPsbsr-600 {
    position: relative;
    background-color: var(--secondary-white);
  }
  #RPsbs-600 .cs-container,
  #RPsbsr-600 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #RPsbs-600 .cs-content,
  #RPsbsr-600 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    /* moved section padding to cs-content so the cs-background can be full width */
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #RPsbs-600 .cs-text,
  #RPsbsr-600 .cs-text {
    margin-bottom: 1rem;
  }
  #RPsbs-600 .cs-text:last-of-type,
  #RPsbsr-600 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #RPsbs-600 .cs-background,
  #RPsbsr-600 .cs-background {
    display: block;
    position: relative;
    width: 100%;
    height: 16rem;
    z-index: 1;
  }
  #RPsbs-600 .cs-background img,
  #RPsbsr-600 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RPsbs-600,
  #RPsbsr-600 {
    /* 90px - 150px */
    /* returned section padding to the section container, this Stitch has 1.5X padding top and bottom than the normal Stitch */
    padding: clamp(5.625rem, 9vw, 9.375rem) 1rem;
  }
  #RPsbs-600 .cs-container,
  #RPsbsr-600 .cs-container {
    flex-direction: row;
    justify-content: flex-end;
  }
  #RPsbs-600 .cs-background,
  #RPsbsr-600 .cs-background {
    width: 50%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
  }
  #RPsbs-600 .cs-content,
  #RPsbsr-600 .cs-content {
    width: 45%;
    padding: 0;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-20 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #services-20::before {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.82;
    position: absolute;
    z-index: -1;
  }
  #services-20 .cs-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #services-20 .cs-background img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
  }
  #services-20 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-20 .cs-topper,
  #services-20 .cs-title,
  #services-20 .cs-text {
    color: var(--primary-white);
  }
  #services-20 .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-20 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  #services-20 .cs-item {
    list-style: none;
    text-align: center;
    width: 100%;
    max-width: 25.8125rem;
    margin: 0;
  }
  #services-20 .cs-icon {
    /* 60px -68px */
    width: clamp(3.75em, 5vw, 4.25em);
    height: auto;
    margin: 0 auto;
    margin-bottom: 1.5rem;
    display: block;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(100deg) brightness(107%) contrast(101%);
  }
  #services-20 .cs-h3 {
    font-family: var(--title-font);
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 1.5em;
    text-align: inherit;
    font-weight: 700;
    color: var(--primary-white);
    margin: 0 auto 1rem;
  }
  #services-20 .cs-item-text {
    /* 14px -16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    color: var(--secondary-white);
    margin: 0 auto 1rem;
  }
  #services-20 .cs-link {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    text-decoration: none;
    color: var(--primary);
    position: relative;
  }
  #services-20 .cs-link:before {
    content: "";
    position: absolute;
    display: block;
    height: 0.1875rem;
    width: 0%;
    background-color: var(--primary);
    opacity: 1;
    bottom: -0.1875rem;
    left: 0;
    transition: width 0.3s;
  }
  #services-20 .cs-link:hover:before {
    width: 100%;
  }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
  #services-20 .cs-picture {
    max-width: 44.625rem;
    width: 90%;
    aspect-ratio: 714/433;
  }
  #services-20 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 2.5rem;
    row-gap: 4rem;
    flex-wrap: wrap;
  }
  #services-20 .cs-item {
    width: 47%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-20 .cs-container {
    max-width: 80rem;
  }
  #services-20 .cs-item {
    width: 30%;
  }
}
/*-- -------------------------- -->
<---       Featured Service     -->
<--- -------------------------- -*/
/* Mobile - 768px */
@media only screen and (min-width: 48rem) {
  #RPsbsr-600 {
    background-color: var(--primary-white);
  }
  #RPsbsr-600 .cs-container {
    justify-content: flex-start;
  }
  #RPsbsr-600 .cs-background {
    left: 50%;
    right: auto;
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-607 {
    padding: var(--sectionPadding);
    background-color: var(--secondary-white);
  }
  #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: var(--primary-white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #reviews-607 .cs-icon {
    /* 30px - 40px */
    width: clamp(1.875rem, 4vw, 2.5rem);
    height: auto;
    margin: 0 0 2rem 0;
    display: block;
    filter: var(--hex-filter);
  }
  #reviews-607 .cs-h3 {
    /* 20px - 25px */
    font-family: var(--title-font);
    text-transform: uppercase;
    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: 1/2;
    grid-row: 1/2;
  }
  #reviews-607 .cs-item:nth-of-type(2) {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  #reviews-607 .cs-item:nth-of-type(3) {
    grid-column: 1/3;
    grid-row: 2/3;
  }
}
/* 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: nowrap;
    align-items: stretch;
    justify-content: center;
  }
  #reviews-607 .cs-item {
    width: 100%;
  }
}

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