/* Services page */

.page.services {
  gap: var(--flex-gap-48);
}
.services-page-section {
    display: flex;
    flex-direction: column;
    gap: 6.4rem;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    max-width: var(--content-max-inset);
    position: relative;
  }
  .services-track {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--flex-gap-24);
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .services-card {
    display: flex;
    flex-direction: column;
    width: 28.8rem;
    position: relative;
    transition: 0.5s ease-in-out all;
  }
  .services-card .top-box {
    display: flex;
    gap: var(--gap-16);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 12.2rem;
    flex-shrink: 0;
    border-radius: var(--gap-16) var(--gap-16) 0 0;
    font-size: var(--text-card-title);
    font-weight: var(--text-weight-600);
  }
  .services-card .bottom-box {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    padding: var(--gap-24) var(--gap-16);
    border-radius: 0 0 var(--gap-16) var(--gap-16);
    font-size: var(--text-card-info);
    font-weight: var(--text-weight-500);
  }
  .strategy .top-box {
    background-color: hsla(90, 100%, 84%, 1);
  }
  .strategy .bottom-box {
    background-color: hsla(90, 100%, 84%, 0.2);
  }
  .content .top-box {
    background-color: hsla(184, 100%, 81%, 1);
  }
  .content .bottom-box {
    background-color: hsla(184, 100%, 81%, 0.2);
  }
  .creative .top-box {
    background-color: hsla(54, 100%, 88%, 1);
  }
  .creative .bottom-box {
    background-color: hsla(54, 100%, 88%, 0.2);
  }
  .technology .top-box {
    background-color: hsla(248, 100%, 96%, 1);
  }
  .technology .bottom-box {
    background-color: hsla(248, 100%, 96%, 0.2);
  }