*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #fafafa;
}

:root {
  --font-family: "Poppins", sans-serif;
  --font-size: u.rem(15);
  --text-light: 200;
  --text-normal: 400;
  --text-bold: 600;
}

:root {
  --red: hsl(0, 78%, 62%);
  --cyan: hsl(180, 62%, 55%);
  --orange: hsl(34, 97%, 64%);
  --blue: hsl(212, 86%, 64%);
  --darker-blue: hsl(234, 12%, 34%);
  --gray-blue: hsl(229, 6%, 66%);
  --light-gray: hsl(0, 0%, 64%);
}

.main {
  padding: 1.875rem;
}
@media (min-width: 56.25rem) {
  .main {
    padding-inline: 0;
    max-width: 69.5rem;
    margin-inline: auto;
  }
}
.main .header {
  margin-bottom: 4.875rem;
}
.main .header__title {
  font-family: var(--font-family);
  font-size: 1.5625rem;
  text-align: center;
  color: var(--darker-blue);
}
.main .header__title:first-child {
  font-weight: var(--text-light);
}
.main .header__desc {
  max-width: 31.625rem;
  margin-top: 1.5625rem;
  margin-inline: auto;
  font-family: var(--font-family);
  font-weight: var(--text-regular);
  font-size: 0.9375rem;
  text-align: center;
  color: var(--gray-blue);
}
.main .cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 90rem) {
  .main .cards {
    flex-direction: row;
    justify-content: center;
    gap: 1.75rem;
  }
}
.main .cards__card {
  width: 19.5rem;
  margin-bottom: 1.625rem;
  padding: 1.75rem;
  border-top: solid 4px;
  border-radius: 0.375rem;
  background-color: white;
  box-shadow: 0px 5px 20px -10px var(--light-gray);
}
@media (min-width: 90rem) {
  .main .cards__card {
    width: 21.875rem;
  }
}
.main .cards__card-title {
  font-family: var(--font-family);
  font-size: 1.375rem;
  line-height: 1.8;
  color: var(--darker-blue);
}
.main .cards__card-desc {
  font-family: var(--font-family);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--gray-blue);
  margin-bottom: 2.5rem;
}
.main .cards__card-icon {
  height: 3.75rem;
  display: flex;
  justify-content: end;
}
.main .cards__card-icon img {
  height: 100%;
  width: auto;
}
.main .cards__mid-wrapper {
  width: 19.5rem;
}
.main .cards__mid-wrapper .cards__card {
  width: 100%;
}
@media (min-width: 90rem) {
  .main .cards__mid-wrapper {
    width: 21.875rem;
  }
}
.main .cards .supervisor {
  border-top-color: var(--cyan);
}
.main .cards .builder {
  border-top-color: var(--red);
}
.main .cards .karma {
  border-top-color: var(--orange);
}
.main .cards .calculator {
  border-top-color: var(--blue);
}

/*# sourceMappingURL=styles.css.map */