.card-color {
  display: flex;
  position: var(--position, relative);
  color: var(--color, var(--clr-w));
  text-align: var(--text-align, left);
  background-color: var(--bg, var(--clr-secondary));
  border: var(--border, 0.25rem solid var(--clr-w));
  border-radius: var(--radius, 0.5rem);
  box-shadow: var(--shadow, var(--shadow-500));
  gap: var(--gap, 1rem);
  justify-content: var(--justify-content, flex-start);
  align-items: var(--align-items, flex-start);
  flex-direction: column;
  padding-block: var(--pb, 2rem);
  padding-inline: var(--pi, 2rem);
}
.card-color h1,
.card-color h2,
.card-color h3,
.card-color h4 {
  width: 100%;
  color: inherit;
  text-align: var(--text-align, left);
}

.component--cta-sec {
  position: relative;
  z-index: 1;
  min-height: 33.33lvh;
  color: var(--clr-w);
  background: url("../images/cta--default-bg.jpg") no-repeat center center/cover;
  justify-content: center;
  padding-block: var(--fspc-300);
}
.component--cta-sec::before {
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  content: "";
  inset: 0 0 0 0;
  backdrop-filter: blur(0.125rem);
}
.component--cta-sec h3 {
  color: inherit;
}
.component--cta-sec p {
  margin-block-start: 2rem;
  font-size: var(--fs-500);
}
.component--cta-sec .row-400 {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr;
  grid-gap: 2rem var(--fspc-300);
}
@media only screen and (min-width: 48rem) {
  .component--cta-sec .row-400 {
    grid-template-columns: 7fr minmax(15rem, 5fr);
  }
}
@media only screen and (min-width: 48rem) {
  .component--cta-sec .button {
    margin-inline: auto;
  }
}

#sectionHero {
  padding-block: var(--fspc-400) calc(var(--fspc-400) * 2);
}

#servicesRow {
  display: grid;
  margin-block-start: calc(var(--fspc-400) * -1);
  grid-gap: 1rem 1rem;
}
@media only screen and (min-width: 36rem) {
  #servicesRow {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 62rem) {
  #servicesRow {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 75rem) {
  #servicesRow {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 87.5rem) {
  #servicesRow {
    grid-template-columns: repeat(5, 1fr);
  }
}
#servicesRow .card-color {
  --bg: var(--clr-text);
  --color: var(--clr-w);
  --gap: 1.5rem;
  --text-align: center;
  --align-items: center;
  --pb: 3rem;
  height: 100%;
}
#servicesRow .card-color figure {
  margin-inline: auto;
}
#servicesRow .card-color h3 {
  margin-block-end: 1rem;
}
#servicesRow .card-color a {
  display: none;
  position: absolute;
  z-index: 1;
  color: var(--clr-w);
  font-size: var(--fs-500);
  font-weight: 800;
  text-transform: uppercase;
  background-color: var(--clr-secondary);
  border-radius: var(--radius-300);
  inset: 0 0 0 0;
  justify-content: center;
  align-items: center;
}
#servicesRow .card-color:hover a {
  display: flex;
}

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