/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-2149 {
    /* 60px - 100px on bottom */
    padding: clamp(17rem, 54vw, 25rem) 1rem clamp(1.75rem, 7.5vw, 3.25rem) 1rem;
    /* prevents the topper line from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-2149 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #hero-2149 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #hero-2149 .cs-title {
    /* 39px - 61px */
    max-width: 30ch;
    margin-bottom: 0.3rem;
  }
  #hero-2149 .cs-title,
  #hero-2149 .cs-text {
    color: #fff;
  }
  #hero-2149 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 55ch;
    margin-bottom: 1rem;
  }
  #hero-2149 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 12.5rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    /* 32px - 48px */
    padding: 0 clamp(2rem, 4vw, 3rem);
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-2149 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #ffffff;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-2149 .cs-button-solid:hover {
    color: var(--headerColor);
  }
  #hero-2149 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-2149 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background: #1e1e1e;
  }
  #hero-2149 .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%);
    /* prevents the cursor from interacting with it */
    pointer-events: none;
    opacity: 0.4;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #hero-2149 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1957 {
    /* 16px - 20px */
    padding: clamp(1rem, 2vw, 1.25rem);
    position: relative;
    z-index: 1;
  }
  #services-1957 .cs-service-text {
    display: block;
    color: #fff;
    margin-bottom: 0.25rem;
    font-size: var(--bodyFontSize);
    line-height: 1.2em;
    text-align: inherit;
  }
  #services-1957 .cs-container {
    width: 100%;
    max-width: 110rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1957 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #services-1957 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    /* 280px - 337px */
    min-height: clamp(17.5rem, 35vw, 21.0625rem);
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    /* clips background image corners */
    overflow: hidden;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    grid-column: span 12;
    grid-row: span 1;
    position: relative;
    z-index: 1;
  }
  #services-1957 .cs-item:hover .cs-item-background img {
    transform: scale(1.05);
  }
  #services-1957 .cs-link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    /* 125px - 236px */
    /* padding goes on the link, not the cs-item as is normal. We do this because we want the whole card to be hoverable. So we add the padding to the link tag to create the space inside the card. By adding the space inside the cs-link tag we can make the whole card hoverable since the padding is now contributing to the height and width of the link */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  #services-1957 .cs-icon-wrapper {
    width: 3rem;
    height: 3rem;
    margin-left: auto;
    background: var(--primary);
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
  }
  #services-1957 .cs-icon {
    width: 2rem;
    height: auto;
  }
  #services-1957 .cs-flex {
    width: 100%;
  }
  #services-1957 .cs-h3 {
    /* 25px - 31px */
    font-size: clamp(1.5rem, 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2em;
    /* 3. any additional text beyond the 3 lines will be truncated and replaced with "..." */
    text-overflow: ellipsis;
    margin: 0;
    overflow: hidden;
    color: var(--bodyTextColorWhite);
  }
  #services-1957 .cs-item-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-1957 .cs-item-background:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 57.04%, rgba(0, 0, 0, 0.5) 87.88%);
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #services-1957 .cs-item-background img {
    width: 100%;
    height: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s, opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1957 .cs-item {
    grid-column: span 4;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1957 .cs-item {
    grid-column: span 4;
  }
}

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