:root {
  --red: #ea5454;
  --blue: #549ef2;
  --orange: #fcae4a;
  --cyan: #44d3d2;
  --white: #fafafa;
  --grey1: #6a7178;
  --grey2: #4d4f62;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: var(--white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  width: 37.5%;
  height: 15.35%;
  margin-top: 102px;
  max-width: 540px;
}
header div {
  height: 63.29%;
}
header div p:first-of-type {
  line-height: 140%;
  letter-spacing: 0.25px;
  font-weight: lighter;
  color: var(--grey2);
  text-align: center;
  font-size: 36px;
}
header div p {
  line-height: 140%;
  letter-spacing: 0.25px;
  font-weight: semi-bold;
  color: var(--grey2);
  text-align: center;
  font-size: 36px;
}
header .header-text {
  line-height: 140%;
  letter-spacing: 0px;
  font-weight: Regular;
  color: var(--grey2);
  font-size: 15px;
  text-align: center;
  margin-top: 16px;
}

.content {
  width: 77.3%;
  max-width: 1114px;
  height: 51.7%;
  margin-top: 74px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 163px;
}
.content .card {
  /* width: 31.418%; */
  max-width: 350px;
  height: 250px;
  padding: 2em;
  position: relative;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 15px 30px -11px rgba(131, 166, 210, 50%);
}
.content .card h3 {
  line-height: 135%;
  letter-spacing: 0px;
  font-weight: semi-bold;
  color: var(--grey2);
  font-size: 20px;
}
.content .card p {
  line-height: 160%;
  letter-spacing: 0px;
  font-weight: Regular;
  color: var(--grey1);
  font-size: 13px;
  margin-top: 2.4%;
  max-width: 268px;
}
.content .card img {
  width: 64px;
  height: 64px;
  margin-top: 12.8%;
  position: absolute;
  right: 9.14%;
}
.content .supervisor {
  border-top: solid 3px var(--cyan);
}
.content .teambuilder {
  border-top: solid 3px var(--red);
}
.content .karma {
  border-top: solid 3px var(--orange);
}
.content .calculator {
  border-top: solid 3px var(--blue);
}

@media (min-width: 1024px) {
  .content .supervisor {
    grid-row-start: 1;
    transform: translateY(50%);
  }
  .content .karma {
    grid-column-start: 2;
  }
  .content .calculator {
    grid-row-start: 1;
    grid-column-start: 3;
    transform: translateY(50%);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  header {
    margin-top: 6.63%;
    width: 70.3%;
    height: 13.1%;
  }
  .content {
    width: 85.9%;
    height: 67.49%;
    /* margin-top: 7.19%; */
    grid-template-columns: 1fr 1fr;
    margin-bottom: 80px;
    background-color: var(--white);
  }
  .content .supervisor {
    grid-row-start: 1;
    grid-column-start: 1;
    transform: translateX(50%);
  }
  .content .teambuilder {
    grid-row-start: 2;
    grid-column-start: 1;
  }
  .content .karma {
    grid-column-start: 2;
    grid-row-start: 2;
  }
  .content .calculator {
    grid-row-start: 3;
    grid-column-start: 1;
    transform: translateX(50%);
  }
}
@media (max-width: 767px) {
  header {
    margin-top: 3.98%;
    width: 84.26%;
    height: 10.46%;
  }
  .content {
    width: 83.7%;
    height: 78%;
    margin-top: 4.27%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 4.27%;
    gap: 32px;
    background-color: var(--white);
  }
}