@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap");
.icons, .footer-content nav, .footer-content, .socials, .features-supercharge, .features-clipboard, .features-keep-track, .header-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

html {
  font-size: 10px;
}

body {
  font: 1.6rem/1.6 "Bai Jamjuree", sans-serif;
  color: #9fabb2;
  font-weight: 400;
  min-width: 100vw;
  min-height: 100vh;
  text-align: center;
  overflow-x: hidden;
}

.btn {
  text-decoration: none;
  cursor: url(../img/hand-pointer.svg), pointer;
  font: 1.8rem "Bai Jamjuree", sans-serif;
  background-color: transparent;
  color: #fff;
  border: none;
  border-radius: 3rem;
  min-width: 31rem;
  min-height: 5rem;
  padding: 1.6rem;
  letter-spacing: 0.1rem;
}

.btn-green {
  background-color: #26baa4;
  box-shadow: inset 0 -3px rgba(53, 167, 110, 0.7), 0 5px 10px 1px rgba(139, 139, 139, 0.342);
}
.btn-green:hover {
  background-color: #3cd7c0;
}

.btn-blue {
  background-color: #6173ff;
  box-shadow: inset 0 -3px rgba(53, 80, 110, 0.3), 0 5px 10px 1px rgba(139, 139, 139, 0.342);
}
.btn-blue:hover {
  background-color: #94a0ff;
}

a {
  text-decoration: none;
  color: #4c545d;
  cursor: url(../img/hand-pointer.svg), pointer;
}
a:hover {
  color: #26baa4;
}

h1,
h2,
h3 {
  color: #4c545d;
  font-weight: 600;
}

h1 {
  font-size: 3.1rem;
  line-height: 1.3;
}

h2 {
  font-size: 2.8rem;
  line-height: 1.21;
  margin-inline: 3rem;
}

h3 {
  font-size: 2.3rem;
  line-height: 1.2;
}

header {
  background: url(../img/bg-header-mobile.png) 0 0/100% auto no-repeat;
  margin-bottom: 6.2rem;
}

.header-content {
  flex-direction: column;
  padding: 12.5rem 2.5rem 10rem 2.5rem;
  align-content: center;
}
.header-content > img {
  margin-bottom: 6.3rem;
}
.header-content > h1 {
  margin-bottom: 1.5rem;
}
.header-content > p {
  margin-bottom: 4.9rem;
  text-indent: 1.5rem;
}
.header-content > .btn-green {
  margin-bottom: 2.5rem;
}

.wrapper {
  padding: 0 2.5rem;
}

.features-keep-track {
  flex-direction: column;
  margin-bottom: 13.7rem;
}
.features-keep-track > h2 {
  margin-bottom: 2rem;
}
.features-keep-track > p {
  padding-inline: 1.5rem;
  margin-bottom: 6.3rem;
}
.features-keep-track .features-keep-track-content > img {
  width: 96%;
  margin-bottom: 5.3rem;
}
.features-keep-track .features-keep-track-content .paragraphs > .par > p {
  margin-bottom: 5rem;
  padding-inline: 1.5rem;
}
.features-keep-track .features-keep-track-content .paragraphs > div:nth-of-type(1) h3 {
  margin-bottom: 1.2rem;
}
.features-keep-track .features-keep-track-content .paragraphs > div:not(div:nth-of-type(1)) h3 {
  margin-bottom: 1.1rem;
}

.features-clipboard {
  flex-direction: column;
  margin-bottom: 9.8rem;
}
.features-clipboard > h2 {
  margin-bottom: 1.8rem;
}
.features-clipboard > p {
  padding-inline: 1rem;
  margin-bottom: 5.8rem;
}
.features-clipboard > img {
  width: 107%;
}

.features-supercharge {
  flex-direction: column;
  margin-bottom: 7.5rem;
}
.features-supercharge > h2 {
  margin-bottom: 1.3rem;
}
.features-supercharge > p {
  margin-bottom: 9rem;
}

.feature-cards > div:nth-of-type(1) img {
  margin-bottom: 3.4rem;
}
.feature-cards > div:not(div:nth-of-type(1)) img {
  margin-bottom: 4rem;
}
.feature-cards h3 {
  margin-bottom: 2rem;
}
.feature-cards p {
  margin-bottom: 5.5rem;
}

.socials {
  flex-direction: column;
  margin-bottom: 10.4rem;
}
.socials img {
  margin-bottom: 5.8rem;
  width: 83%;
}
.socials > a:nth-of-type(2) img {
  margin-bottom: 6.2rem;
}
.socials > a:nth-of-type(3) img {
  margin-bottom: 5.6rem;
}
.socials > a:nth-of-type(4) img {
  margin-bottom: 5rem;
}

.call-to-action {
  margin-bottom: 17rem;
}
.call-to-action > h2 {
  margin-inline: 1.5rem;
  margin-bottom: 1.9rem;
}
.call-to-action > p {
  margin-bottom: 4.7rem;
}
.call-to-action > .btn-green {
  margin-bottom: 2.5rem;
}

footer {
  background-color: #f4f5f6;
}

.footer-content {
  flex-direction: column;
  padding-block: 5rem 3.5rem;
  font-size: 1.8rem;
}
.footer-content > img {
  width: 15%;
  margin-bottom: 4.4rem;
}
.footer-content nav {
  flex-direction: column;
  justify-content: space-between;
  min-height: 22.5rem;
  margin-bottom: 5rem;
}

.icons img + img {
  margin-left: 4rem;
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: #3e52a3;
}

@media (min-width: 1024px) {
  body {
    font-size: 1.8rem;
  }

  h1 {
    font-size: 4.4rem;
  }

  h2 {
    font-size: 3.5rem;
    margin-inline: 3rem;
  }

  .btn {
    min-width: 23rem;
  }

  header {
    background: url(../img/bg-header-desktop.png) 0 0/100% auto no-repeat;
  }

  .header-content {
    display: block;
    padding: 13rem 30rem 6.5rem 30rem;
  }
  .header-content > img {
    margin-bottom: 4.8rem;
  }
  .header-content > p {
    font-size: 2rem;
    padding-inline: 4.5rem;
    margin-bottom: 4.7rem;
  }
  .header-content > .btn-green {
    margin-right: 1rem;
  }

  .features-keep-track {
    margin-bottom: 10.3rem;
  }
  .features-keep-track > p {
    padding: 0 34rem;
    margin-bottom: 8.5rem;
  }
  .features-keep-track .features-keep-track-content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: start;
    width: 80%;
  }
  .features-keep-track .features-keep-track-content > img {
    width: 67%;
    margin-left: -28.7rem;
    margin-right: 11.1rem;
  }
  .features-keep-track .features-keep-track-content .paragraphs {
    width: 35rem;
  }
  .features-keep-track .features-keep-track-content .paragraphs > .par > p {
    font-size: 1.6rem;
    padding-inline: 0;
    margin-bottom: 6.5rem;
    line-height: 1.8;
  }

  .features-clipboard {
    margin-bottom: 7.4rem;
  }
  .features-clipboard > p {
    padding: 0.2rem 33rem;
    margin-bottom: 10rem;
  }
  .features-clipboard > img {
    width: 65%;
  }

  .features-supercharge {
    margin-bottom: 10rem;
  }
  .features-supercharge > h2 {
    margin-bottom: 2rem;
  }
  .features-supercharge > p {
    margin-bottom: 7.3rem;
  }
  .features-supercharge .feature-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3.8rem;
    padding-inline: 14.5rem;
  }
  .features-supercharge .feature-cards p {
    font-size: 1.6rem;
    line-height: 1.8;
  }

  .socials {
    display: grid;
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    place-items: center;
    column-gap: 5rem;
    padding: 0 13rem;
    margin-bottom: 9.5rem;
  }
  .socials img {
    width: 100%;
  }

  .call-to-action {
    margin-bottom: 12.5rem;
  }
  .call-to-action > p {
    padding: 0.2rem 35rem;
  }
  .call-to-action > .btn-green {
    margin-right: 1.1rem;
  }

  .footer-content {
    flex-direction: row;
    padding-block: 4.3rem 2.3rem;
  }
  .footer-content > img {
    width: 4%;
    margin-bottom: 0;
  }
  .footer-content > nav {
    display: grid;
    justify-items: start;
    grid-template-columns: repeat(3, 12rem);
    gap: 1.3rem 7rem;
    margin-bottom: 0;
    min-height: 6.5rem;
    margin-left: 13.5rem;
    margin-right: 30rem;
  }
  .footer-content > nav a:nth-child(1) {
    grid-column: 1/2;
  }
  .footer-content > nav a:nth-child(2) {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .footer-content > nav a:nth-child(3) {
    grid-column: 2/3;
  }
  .footer-content > nav a:nth-child(4) {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .footer-content > nav a:nth-child(5) {
    grid-column: 3/4;
  }
  .footer-content .icons {
    justify-content: space-between;
    width: 12rem;
  }
  .footer-content .icons img + img {
    margin-left: 0;
  }
}