/*-- -------------------------- -->
<---           Hero-Info            -->
<--- -------------------------- -*/
@media only screen and (min-width: 0rem) {
  .hero-info {
    width: 215px;
    height: 100px;
    position: absolute;
    top: 105px;
    right: 15px;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid #a87300;
    border-radius: 1rem;
  }
  .hero-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    gap: 1rem;
    color: #fff;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .hero-box a {
    color: #fff;
    margin-bottom: 0px;
    text-decoration: none;
    font-size: clamp(0.875rem, 1vw, 1rem);
    font-weight: 400;
    color: var(--bodyTextColor);
  }
  .hero-box a:hover {
    text-decoration: underline;
  }
}
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-82 {
    /* Centers button */
    text-align: center;
    /* 144px - 300px - leaving extra space for the navigation */
    padding: clamp(9rem, 25.95vw, 18.75rem) 1rem 0;
    /* 130px - 200px */
    padding-bottom: clamp(8.125rem, 12.5vw, 25em);
    position: relative;
    z-index: 1;
  }
  #hero-82 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-82 .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-82 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #hero-82 .cs-container {
    width: 100%;
    max-width: 67.5rem;
    margin: auto;
  }
  #hero-82 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 51.8125rem;
    /* 16px - 24px */
    margin: 0 auto clamp(1rem, 4vw, 1.5rem);
    color: #fff;
    position: relative;
  }
  #hero-82 .cs-title:after {
    /* Divider Line */
    content: "";
    width: 6.25rem;
    height: 0.5rem;
    /* 16px - 24px */
    margin: clamp(1rem, 4vw, 1.5rem) auto clamp(1rem, 4vw, 1.5rem);
    background: var(--primary);
    opacity: 1;
    position: relative;
    display: block;
  }
  #hero-82 .cs-text {
    /* 16px - 25px */
    font-size: clamp(1rem, 1.95vw, 1.5625rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 464px - 800px */
    max-width: clamp(29rem, 60vw, 50rem);
    margin: 0 auto;
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: #fff;
  }
  #hero-82 .cs-button-solid {
    font-size: 1.1rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    margin: auto;
    color: #1a1a1a;
    padding: 0.2rem 2rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
  }

  #hero-82 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: white;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #hero-82 .cs-button-solid:hover {
    color: #000000;
  }
  #hero-82 .cs-button-solid:hover:before {
    width: 100%;
  }
}

/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-343 {
    padding: var(--sectionPadding);
  }
  #services-343 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-343 .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: center;
  }

  #services-343 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 1.6vw, 1.25rem);
  }
  #services-343 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 31.25rem;
    border-radius: 0.5rem;
    background-color: #fff;
    position: relative;
    z-index: 1;
    transition:
      box-shadow 0.3s,
      transform 0.3s;
  }
  #services-343 .cs-item:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transform: translateY(-0.4375rem);
  }
  #services-343 .cs-item:hover .cs-picture img {
    opacity: 0.3;
    transform: scale(1.1);
  }
  #services-343 .cs-item:hover .cs-h3 {
    color: var(--primaryLight);
  }
  #services-343 .cs-item:before {
    /* border, done in pseudo so it can sit under the picture */
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    border: 1px solid #e8e8e8;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    background: transparent;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-343 .cs-link {
    text-decoration: none;
    /* 16px - 24px */
    padding-bottom: clamp(1rem, 2.2vw, 1.5rem);
    display: block;
  }
  #services-343 .cs-picture {
    width: 100%;
    height: 15rem;
    /* 16px - 24px */
    margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: var(--primaryLight);
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 10;
  }
  #services-343 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition:
      transform 0.6s,
      opacity 0.3s;
  }
  #services-343 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    margin: 0 0 0.75rem 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    transition: color 0.3s;
  }
  #services-343 .cs-item-text {
    /* 14px - 16px  */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    color: #1a1a1a;
    margin: 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2.2vw, 1.5rem);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-343 .cs-container {
    max-width: 90rem;
  }
  #services-343 .cs-content {
    text-align: center;
  }
  #services-343 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  #services-343 .cs-item {
    width: 48.9%;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-343 .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 reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
    /* width: clamp(23.8%, 23vw, 23.95%); */
    width: clamp(30%, 31vw, 32%);
  }
  #services-343 .cs-content {
    text-align: center;
  }
}

/*-- -------------------------- -->
<---        Side By Side        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-499 {
    /* we use margin here instead of padding because we want to create the space OUTSIDE the section.  The overflow on the section clips the boxes we made to make the slanted designs, so we need to push from the outside of the section with margin to create space between it and the next section.  If the section above this Stitch has a white background, add margin-top: 0. If it has a white section below it, add margin-bottom: 0. This will allow more proper spacing and not have too much empty space.  If both sections above and below this Stitch have white backgrounds, you can just remove this margin all together */
    margin: var(--sectionPadding);
    margin-left: 0;
    margin-right: 0;
    padding: 0 1rem;
    /* prevents overflow from the slant shape */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-499:before {
    /* section background */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbs-499 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    /* 60px - 100px top and bottom */
    padding: clamp(3.75rem, 6.82vw, 6.25rem) 0;
    /* maintains proportional margin top as screen size grows */
    margin-top: 56vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    /* places it on top of the cs-background */
    z-index: 10;
  }
  #sbs-499 .cs-container:before {
    /* section slant on mobile */
    content: "";
    width: 62.5rem;
    height: 125rem;
    background: #1e1e1e;
    /* prevents mouse from interacting with it */
    pointer-events: none;
    opacity: 1;
    position: absolute;
    z-index: -1;
    display: block;
    top: -28.75rem;
    /* these last two center it horizontally and rotate -65deg */
    left: 50%;
    transform: translateX(-50%) rotate(65deg);
  }
  #sbs-499 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    margin-top: 3rem;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #sbs-499 .cs-topper {
    color: var(--primary);
  }
  #sbs-499 .cs-title {
    /* changes to 100% at tablet */
    max-width: 80%;
    color: var(--bodyTextColorWhite);
  }
  #sbs-499 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #sbs-499 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-499 .cs-background {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--primary);
  }
  #sbs-499 .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) {
  #sbs-499:before {
    /* remove the pseudo for the section background */
    display: none;
  }
  #sbs-499 .cs-background {
    /* reset height to let top and bottom properties create the height */
    height: auto;
    aspect-ratio: initial;
    position: absolute;
    /* creates the gap between the image and the blue section */
    top: 3.75rem;
    bottom: 0;
  }
  #sbs-499 .cs-background img {
    width: 70%;
  }
  #sbs-499 .cs-container {
    margin-top: 0;
  }
  #sbs-499 .cs-container:before {
    /* make really tall so it always covers top to bottom, even when you add more list items */
    height: 250rem;
    /* make really really wide so it covers the left side at large scree sizes */
    width: 250rem;
    /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
    margin-left: -68.75rem;
    top: 50%;
    left: auto;
    /* pushes the left edge of the element to the center line of the parent */
    left: 50%;
    transform: rotate(35deg) translateY(-50%);
  }
  #sbs-499 .cs-content {
    width: 35%;
  }
  #sbs-499 .cs-title {
    max-width: 100%;
  }
}

/*-- -------------------------- -->
<---          Projects          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #projects-605 {
    padding: var(--sectionPadding);
  }
  #projects-605 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #projects-605 .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;
  }

  #projects-605 .cs-title {
    max-width: 20ch;
  }
  #projects-605 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 1.8vw, 1.25rem);
    row-gap: 2.5rem;
  }
  #projects-605 .cs-item {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
  }
  #projects-605 .cs-info {
    width: 100%;
    /* 350px - 450px */
    min-height: clamp(21.875rem, 38vw, 28.125rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* 32px - 100px top */
    /* 16px - 24px left & right */
    padding: clamp(2rem, 8vw, 6.25rem) clamp(1rem, 1.8vw, 1.5rem) 6.25rem;
    border-radius: 0.5rem;
    /* clips the img tag corners */
    overflow: hidden;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    position: relative;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }
  #projects-605 .cs-item:hover .cs-header,
  #projects-605 .cs-item:focus .cs-header,
  #projects-605 .cs-item:hover .cs-item-text,
  #projects-605 .cs-item:focus .cs-item-text {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
    height: 100%;
    transition:
      transform 0.6s,
      visibility 0.3s,
      opacity 0.6s;
  }
  #projects-605 .cs-item:hover .cs-number,
  #projects-605 .cs-item:focus .cs-number {
    padding-bottom: 0.9375rem;
  }
  #projects-605 .cs-item:hover .cs-number:before,
  #projects-605 .cs-item:focus .cs-number:before {
    /* changes to 500px at tablet */
    width: 50rem;
    height: 31.25rem;
    opacity: 0.9;
  }
  #projects-605 .cs-item:hover .cs-background img,
  #projects-605 .cs-item:focus .cs-background img {
    transform: scale(1.1);
  }
  #projects-605 .cs-header {
    /* 28px - 40px */
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.2em;
    font-weight: 700;
    height: 0;
    /* 16px - 24px bottom */
    margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
    color: var(--bodyTextColorWhite);
    opacity: 0;
    visibility: hidden;
    transform: translateY(2.5rem);
    transition:
      transform 0.2s,
      visibility 0.1s,
      opacity 0.2s,
      height 0.4s;
    transition-delay: 0.1s;
  }
  #projects-605 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: left;
    width: 100%;
    max-width: 25rem;
    height: 0;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6.25rem);
    transition:
      transform 0.3s,
      visibility 0.3s,
      opacity 0.3s,
      height 0.4s;
    transition-delay: 0.2s;
  }
  #projects-605 .cs-number {
    /* 24px - 32px */
    font-size: clamp(1.5rem, 2vw, 2rem);
    /* 60px - 80px */
    line-height: clamp(3.75rem, 9vw, 5rem);
    font-weight: 700;
    width: clamp(3.75rem, 7vw, 5rem);
    height: clamp(3.75rem, 7vw, 5rem);
    margin: 0;
    padding: 0;
    color: var(--bodyTextColorWhite);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: padding-bottom 0.3s;
  }
  #projects-605 .cs-number:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    transition:
      width 0.6s,
      height 0.6s,
      opacity 0.3s;
    z-index: -1;
  }
  #projects-605 .cs-h3 {
    /* 20px - 24px */
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    padding: 0;
    color: var(--headerColor);
    display: block;
  }
  #projects-605 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    /* clips img tag when it scales on hover */
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #projects-605 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.8s;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #projects-605 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #projects-605 .cs-flex-group {
    width: 45%;
  }
  #projects-605 .cs-text {
    width: 48vw;
  }
  #projects-605 .cs-card-group {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
  }
  #projects-605 .cs-item {
    width: clamp(48.87%, 46vw, 49.04%);
  }
  #projects-605 .cs-item:hover .cs-number:before,
  #projects-605 .cs-item:focus .cs-number:before {
    width: 31.25rem;
  }
}

/* Desktop - 1300px */
@media only screen and (min-width: 75rem) {
  #projects-605 .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.7%, 23vw, 23.81%);
  }
}

/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-64 {
    /* Centers Button */
    text-align: center;
    padding: var(--sectionPadding);
    background-color: #f1f1f4;
  }
  #reviews-64 .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-64 .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: center;
  }

  #reviews-64 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* changes to a clamp at tablet */
    gap: 1.5rem;
  }
  #reviews-64 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 25.8125rem;
    /* padding left & right 16px - 32px */
    padding: 0 clamp(1rem, 2.1vw, 2rem);
    /* 20px - 40px */
    padding-bottom: clamp(1.25rem, 4.7vw, 2.5rem);
    margin: 0;
    background: #fff;
    box-shadow: -1px 21px 39px 0px rgba(0, 0, 0, 0.05);
    /* prevent padding from adding to the height and width */
    box-sizing: border-box;
  }
  #reviews-64 .cs-img {
    /* 116px - 136px */
    width: clamp(7.25rem, 18vw, 8.5rem);
    /* 20px - 24px */
    height: clamp(1.25rem, 3.2vw, 1.5rem);
    margin: 0 auto 1.5rem;
    display: block;
    transform: translateY(-0.8125rem);
  }
  #reviews-64 .cs-name {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
    margin-bottom: 0.5rem;
  }
  #reviews-64 .cs-desc {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: center;
    margin: 0 0 1rem;
    color: var(--label);
    display: block;
  }
  #reviews-64 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    margin: auto;
    color: #1a1a1a;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-64 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    /* 16px - 20px */
    column-gap: clamp(1rem, 1.5vw, 1.25rem);
    row-gap: 2.875rem;
  }
  #reviews-64 .cs-item {
    /* we do this so it's stackable. You can add new 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 reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw to get the desired sizes fit 4 in a row and then stack when you add more*/
    width: clamp(31.5%, 30vw, 32.3%);
  }
  #reviews-64 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
  }
}