@font-face {
  font-family: google-sans-bold;
  src: url(google_sans_bold.ttf);
}
@font-face {
  font-family: google-sans-medium;
  src: url(google_sans_medium.ttf);
}

body {
  background-color: #020617;
}

html {
  padding-bottom: 20pt;
}

.header {
  display: flex;

  color: #e2e8f0;
  font-size: 2.5vw;
  font-family: "google-sans-bold";

  margin: 30pt;
  max-height: 100pt;

  place-items: center;

  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;

  height: 100%;

  align-items: center;
}

.grid {
  display: grid;
  gap: 2vw;

  width: 100%;

  align-items: center;
  justify-content: center;

  grid-template-columns: 30% 30%;
}

.service-btn {
  display: grid;
  background-color: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 10px;
  aspect-ratio: 2/1;

  grid-template-columns: 50% 1px auto;

  place-items: center;

  will-change: filter border;
  transition:
    filter 0.2s ease-out,
    border 0.2s ease-out;
}
.service-btn:hover {
  filter: drop-shadow(0pt 10pt 15pt #10b981);
  border: 1px solid #10b981;
}

.btn-separator {
  background-color: #334155;
  width: 100%;
  height: 75%;
}

.service-img {
  width: 75%;
}

.service-info {
  width: 100%;
  margin-left: 3vw;
}

.service-name {
  color: #e2e8f0;
  font-family: "google-sans-medium";
  font-size: 1.3vw;
}
.service-desc {
  color: #94a3b8;
  font-family: "google-sans-medium";
  font-size: 0.8vw;
}