:root {
  --bg: #ebedec;
  --black: #000;
  --brown: #5f5f5f;
  --cream: #e6e3db;
  --green: #304447;
  --white: #fff;
}

.sub-nav__list a {
  color: var(--white);
}
.sub-nav__list a:hover {
  color: var(--white);
  text-decoration: underline;
}

.nav-container:has(.sub-navigation:hover),
.nav-container:has(.nav__list--item.is-hoverable .sub-nav__list--link:hover) {
  background-color: var(--green);
}

.banner--image {
  display: block;
  object-fit: cover;
  filter: brightness(0.5);
  width: 100%;
}

.content-switch__content-box .button {
  margin-right: auto;
  margin-left: unset;
}

.services-section .tws-grid {
  gap: 10px;
  background-color: transparent;
}
.services-section .service-card {
  background-color: var(--cream);
}

@media (min-width: 1024px) {
  .services-section .service-card {
    transition: all 0.5s;
    background-color: var(--bg);
  }

  .services-section .service-card:hover {
    background-color: var(--green);
  }

  .services-section .service-card:hover .service-card--title,
  .services-section .service-card:hover .service-card--text {
    color: var(--white);
  }

  .service-card--button {
    display: none !important;
  }

  .services-section .tws-grid {
    gap: 1px;
    background-color: var(--brown);
  }
}