.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 42px;
}

.filters button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 99px;
  padding: 9px 21px;
  cursor: pointer;
}

.filters button.active,.filters button:hover {
  background: var(--deep);
  color: #fff;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}

.service-list article {
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  transition: .35s;
}

.service-list article:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.service-list article.hidden {
  display: none;
}

.service-list a {
  display: block;
  height: 100%;
}

.service-image {
  height: 250px;
  overflow: hidden;
}

.service-image img {
  transition: transform .55s;
}

.service-list article:hover img {
  transform: scale(1.045);
}

.service-copy {
  padding: 24px;
}

.service-list h2 {
  font-size: 23px;
  margin: 0 0 9px;
}

.service-list p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 17px;
}

.service-more {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
}

.service-cta {
  background: linear-gradient(90deg,rgba(8,53,82,.9),rgba(10,72,108,.78)),url("../images/service-cta.png") center/cover no-repeat;
  color: #fff;
  padding: 88px 0;
}

.service-cta p {
  color: #85cff9;
}

.service-cta h2 {
  font-size: 45px;
}

@media(max-width:980px) {
  .service-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:620px) {
  .service-list {
    grid-template-columns: 1fr;
  }

  .service-image {
    height: 260px;
  }

  .service-cta h2 {
    font-size: 34px;
  }
}