/* Transparent icon system. Dashicons ship with WordPress and add no external request. */
.hero-eyebrow,
.archive-wordpress-eyebrow,
.service-eyebrow {
  gap: 10px;
}

.hero-eyebrow > .dashicons,
.archive-wordpress-eyebrow > .dashicons {
  width: 24px;
  height: 24px;
  color: var(--blue);
  font-size: 24px;
  line-height: 1;
}

.hero-eyebrow > span:last-child,
.archive-wordpress-eyebrow > span:last-child,
.service-eyebrow > span:last-child {
  line-height: 1.35;
}

.template-about-badge > .dashicons {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #fff;
  font-size: 42px;
  line-height: 1;
}

.service-card .service-icon,
.home .service-card .service-icon {
  position: absolute;
  z-index: 3;
  top: 20px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 5px rgba(2, 13, 32, .76));
  transition: color .3s ease, transform .3s ease;
}

.service-card .service-icon .dashicons {
  width: 36px;
  height: 36px;
  font-size: 36px;
  line-height: 1;
}

.service-card:hover .service-icon,
.home .service-card:hover .service-icon {
  color: #fff !important;
  background: transparent !important;
  transform: translateY(-2px) scale(1.06);
}

.service-eyebrow-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--blue);
}

.service-eyebrow-icon .dashicons {
  width: 25px;
  height: 25px;
  font-size: 25px;
  line-height: 1;
}

.contact-details a,
.footer-contact-link {
  display: flex !important;
  align-items: center;
  gap: 9px;
}

.contact-details a i,
.footer-contact-link i {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--blue);
  font-size: 20px;
  line-height: 1;
  font-style: normal;
}

.footer-contact-link i {
  color: var(--cyan);
}

@media (max-width: 680px) {
  .hero-eyebrow > .dashicons,
  .archive-wordpress-eyebrow > .dashicons {
    width: 22px;
    height: 22px;
    font-size: 22px;
  }

  .service-card .service-icon,
  .home .service-card .service-icon {
    left: 18px;
  }
}