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

html {
  font-size: 62.5%;
}

.container {
  max-width: 143.9rem;
  margin: 0 auto;
  overflow: hidden;
}

/* === TYPOGRAPHY === */
.main-heading {
  font-size: 4.6rem;
  color: #4c545c;
  font-weight: 600;
  letter-spacing: -0.75px;
}

.second-heading {
  font-size: 3.6rem;
  color: #4c545c;
  font-weight: 600;
  letter-spacing: -0.59px;
}

.third-heading {
  font-size: 2.4rem;
  color: #4c545c;
  font-weight: 600;
  letter-spacing: -0.39px;
}

.paragraph {
  font-size: 2rem;
  color: #9eabb2;
  font-weight: 400;
  letter-spacing: 0.15px;
  line-height: 30px;
}

.paragraph--section-1 {
  font-size: 1.8rem;
  color: #9eabb2;
  font-weight: 400;
  letter-spacing: 0.14px;
  line-height: 30px;
}

.paragraph--section-1--content {
  font-size: 1.6rem;
  color: #9eabb2;
  font-weight: 400;
  letter-spacing: 0.12px;
  line-height: 30px;
}

.footer-text {
  font-size: 1.8rem;
  color: #4c545c;
  font-weight: 400;
  letter-spacing: 0.14px;
  line-height: 30px;
}

/* === BUTTONS === */

a:link,
a:visited {
  text-decoration: none;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.7px;
  color: #fff;
  text-decoration: none;
  width: 22.7rem;
  height: 5.6rem;
  border-radius: 2.8rem;
  box-shadow: 0 -3px inset rgba(0, 0, 0, 0.1513),
    0 10px 20px rgba(0, 0, 0, 0.0988);
}

.btn--ios {
  background-color: #26bba4;
  box-shadow: 0 -3px inset rgba(0, 0, 0, 0.1513),
    0 10px 20px rgba(137, 229, 198, 0.5);
}

.btn--ios:hover,
.btn--ios:active {
  background-color: rgba(38, 187, 165, 0.75);
}

.btn--mac {
  background-color: rgb(97, 115, 255);
}

.btn--mac:hover,
.btn--mac:active {
  background-color: rgba(97, 115, 255, 0.75);
}

/* === REUSABLE === */
.btn-container {
  display: flex;
  gap: 1.6rem;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* === HEADER SECTION === */

.header-section {
  background-image: url(./images/bg-header-desktop.png);
  background-repeat: no-repeat;
  padding-top: 13.1rem;
}

.header-section-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-section-container h1 {
  padding-top: 5.6rem;
}

.header-section-container .paragraph {
  padding-top: 1.6rem;
}

.header-section-container p {
  max-width: 73rem;
  text-align: center;
}

.header-section-container .btn-container {
  padding-top: 4.8rem;
}

/* === SECTION 1 === */

.section-1 {
  margin-top: 15rem;
}

.section-1-header {
  max-width: 73rem;
  margin: 0 auto;
}

.section-1 .paragraph--section-1 {
  padding-top: 1.9rem;
}

.section-1 .second-heading,
.section-1 .paragraph--section-1 {
  text-align: center;
}

.section-1-content {
  padding-top: 8.1rem;
  display: flex;
  gap: 7.8rem;
}

.section-1-content img {
  translate: -3.2rem 0;
}

.section-1-content-text {
  padding-top: 6.7rem;
  max-width: 35rem;
  display: flex;
  flex-direction: column;
  gap: 5.6rem;
}

.section-1-content .paragraph--section-1--content {
  padding-top: 8px;
}

/* === SECTION 2 === */

.section-2 {
  margin-top: 14.9rem;
  text-align: center;
}

.section-2 .paragraph--section-1 {
  max-width: 73rem;
  margin: 1.9rem auto 0 auto;
}

.section-2 img {
  margin-top: 11rem;
}

/* === SECTION 3 === */

.section-3-header {
  margin: 9.6rem 0 7.2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1.9rem;
}

.card-container {
  margin-top: 7.2rem;
  display: flex;
  padding-left: 16.5rem;
  padding-right: 16.5rem;
  gap: 3rem;
}

.card,
.card-1 {
  max-width: 35rem;
  text-align: center;
}

.card:nth-child(1) .third-heading {
  margin-top: 4rem;
}

.card:nth-child(2) .third-heading,
.card:nth-child(3) .third-heading {
  margin-top: 4.4rem;
}

/* === SECTION 4 === */

.section-4 {
  display: flex;
  padding: 15rem 16.5rem;
  justify-content: space-between;
  align-items: center;
}

.section-4 img {
  max-width: 100%;
  height: 100%;
}

/* === SECTION 5 === */

.section-5 {
  max-width: 73rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15rem;
}

.section-5 .paragraph--section-1 {
  margin-top: 1.9rem;
}

.section-5 .btn-container {
  margin-top: 4.8rem;
}

/* === FOOTER SECTION === */

footer {
  background-color: #9eabb2;
}

.company-logo img {
  width: 55px;
  height: 55px;
}

.footer-section {
  padding: 3.9rem 16.5rem;
  display: flex;
}

.footer-link {
  display: flex;
  padding-left: 13.5rem;
  gap: 9.4rem;
}

.social-media-logo {
  margin-left: auto;
  display: flex;
  gap: 2.4rem;
  align-items: center;
}

.footer-link--style {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer-section li:hover {
  color: #26bba4;
}

.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}