/* STYLES FOR ABOVE THE FOLD */
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-541 {
    /* 144px - 300px - leaving extra space for the navigation */
    padding: clamp(9rem, 25.95vw, 18.75rem) 1rem 0;
    /* 130px - 175px */
    padding-bottom: clamp(8.125rem, 12.5vw, 10.9375rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* clips the color overlay so it doesn't cause an overflow */
    overflow: hidden;
    position: relative;
  }
  #hero-541 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #hero-541 .cs-content {
    text-align: left;
    /* changed to at tablet */
    width: 90%;
    max-width: 34.0625rem;
    /* 100px - 150px, changes to 0 at tablet */
    margin-top: clamp(6.25rem, 28vw, 9.375rem);
  }
  #hero-541 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.7vw, 2.9125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    /* 16px - 32px */
    margin: 0 0 clamp(1rem, 4vw, 2rem) 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #hero-541 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    /* 40px - 64px */
    margin: 0 0 clamp(2.5rem, 6.3vw, 4rem);
    color: var(--bodyTextColorWhite);
  }
  #hero-541 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: auto;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #hero-541 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background-color: var(--secondary);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #hero-541 .cs-button-solid:hover {
    color: #fff;
  }
  #hero-541 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-541 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #hero-541 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 125rem;
    width: 187.5rem;
    background: rgba(12, 12, 12, 0.7);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    top: 70.3125rem;
    left: 50%;
    z-index: 1;
    transform: rotate(30deg) translateX(-50%);
  }
  #hero-541 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-541 .cs-content {
    width: 48%;
    margin-top: 0rem;
  }
  #hero-541 .cs-background:before {
    top: 7.5rem;
    margin-left: -127.1875rem;
    transform: rotate(60deg);
  }
}
/*-- -------------------------- -->
<---         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: center;
    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.5rem);
  }
  #services-343 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 31.25rem;
    border-radius: 1rem;
    background-color: #fff;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
    overflow: hidden;
  }
  #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(--brand-color);
  }
  #services-343 .cs-item:before {
    /* border, done in pseudo so it can sit under the picture */
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    border: 1px solid var(--white);
    /* 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-picture {
    width: 100%;
    height: 15rem;
    /* 16px - 24px */
    border-radius: 1rem 1rem 0 0;
    background-color: var(--brand-color);
    /* 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-content-box {
    padding: clamp(1rem, 2.2vw, 1.8rem);
  }
  #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 1rem 0;
    /* 16px - 24px */
    transition: color 0.3s;
  }
  #services-343 .cs-item-text {
    /* 14px - 16px  */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.6em;
    color: var(--white);
    margin: 0;
    /* 16px - 24px */
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-343 .cs-container {
    max-width: 80rem;
  }
  #services-343 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  #services-343 .cs-item {
    width: 48.9%;
  }
  #services-343 .cs-picture {
    height: 20rem;
  }
}
/* 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(32%, 23vw, 32%);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-343 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #services-343 .cs-title,
  body.dark-mode #services-343 .cs-text,
  body.dark-mode #services-343 .cs-h3,
  body.dark-mode #services-343 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-343 .cs-item {
    background-color: var(--medium);
  }
  body.dark-mode #services-343 .cs-item:before {
    opacity: 0.3;
  }
}

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