html {
  font-size: 62.5%; }

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

.responsive {
  max-width: 80%;
  min-width: 50%; }

body {
  font-size: 1.8rem;
  font-family: "Bai Jamjuree", sans-serif;
  display: flex;
  flex-direction: column; }
  body h3,
  body h4 {
    color: #4c545d;
    font-size: 3rem;
    font-weight: 400; }
  body p {
    color: #9fabb2;
    line-height: 1.7; }

.main-content {
  width: 90%;
  margin: 0 auto;
  text-align: center; }

header {
  background-image: url("../images/bg-header-mobile.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5rem 2.5rem;
  text-align: center; }
  header img {
    max-width: 15rem;
    margin: 5rem 0rem 4rem 0; }
  header h3 {
    font-size: 3rem;
    margin-bottom: 1rem; }
  header p {
    font-size: 1.7rem;
    line-height: 1.5; }

.buttons {
  display: flex;
  flex-direction: column;
  margin-top: 5rem; }
  .buttons a {
    padding: 2rem 3rem;
    border-radius: 5rem;
    color: #fff;
    text-decoration: none; }
    .buttons a:link, .buttons a:visited {
      transition: all 0.3s; }
    .buttons a.green {
      background-color: #26baa4; }
    .buttons a.blue {
      background-color: #6173ff; }
    .buttons a:not(:last-child) {
      margin-bottom: 1rem; }
    .buttons a:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); }
    .buttons a:active {
      transform: translateY(-1px);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); }

.snippets {
  margin: 20rem 0rem 10rem 0rem;
  text-align: center; }
  .snippets h4 {
    font-size: 3rem;
    margin-bottom: 2rem; }
  .snippets p {
    line-height: 1.7;
    font-weight: 400; }

.layout-content-right {
  margin-top: 7rem;
  padding: 0 .5rem; }
  .layout-content-right > div:not(:last-child) {
    margin-bottom: 5rem; }
  .layout-content-right:last-of-type {
    margin-bottom: 20rem; }
  .layout-content-right h3 {
    font-weight: 400;
    font-size: 3rem;
    margin-bottom: 1.5rem; }

.access {
  margin-bottom: 10rem; }
  .access h3 {
    margin-bottom: 2rem; }

.supercharge {
  margin: 10rem 0; }
  .supercharge h3 {
    font-weight: 400;
    margin-bottom: 2rem; }

.three-column > div:not(:last-child) {
  margin-bottom: 5rem; }

.three-column img {
  margin-bottom: 3rem; }

.three-column h4 {
  margin-bottom: 2rem; }

.company-logos {
  margin: 10rem 0 20rem 0;
  display: flex;
  flex-direction: column;
  align-items: center; }
  .company-logos img:not(:last-child) {
    margin-bottom: 7rem; }

.OS h3 {
  margin-bottom: 2rem;
  font-weight: 400; }

footer {
  background-color: #9fabb229;
  margin-top: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  padding: 5rem 0; }
  footer img {
    width: 5rem; }
  footer .listed-items {
    padding: 2rem 0; }
    footer .listed-items ul li {
      list-style-type: none;
      padding: 2rem 0;
      text-align: center;
      color: #4c545d; }
  footer .socials {
    margin-top: 2rem; }
    footer .socials img {
      width: 3rem; }
      footer .socials img:not(:last-child) {
        margin-right: 3.5rem; }

@media only screen and (min-width: 1024px) {
  body h3,
  body h4 {
    font-size: 3rem; }
  header {
    background-image: url("../images/bg-header-desktop.png"); }
    header .header-content {
      width: 60%;
      margin: 0 auto; }
      header .header-content .buttons {
        display: inline-block; }
  .main-content {
    width: 100%; }
  .snippets {
    width: 60%;
    margin: 15rem auto 10rem auto; }
  .two-layout {
    display: flex;
    gap: 10rem;
    align-items: center; }
    .two-layout .layout-content-right {
      text-align: left;
      margin: initial;
      padding-right: 4.5rem; }
    .two-layout:last-of-type {
      margin-bottom: initial; }
  .access {
    margin-top: 10rem; }
  .three-column {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    max-width: 80%;
    margin: 0 auto; }
  .company-logos {
    display: flex;
    flex-direction: row;
    max-width: 80%;
    align-items: center; }
    .company-logos img {
      margin: 0 auto; }
    .company-logos img:not(:last-child) {
      margin-bottom: unset; }
  .OS {
    margin-top: 15rem; }
    .OS .buttons {
      display: inline-block; }
  footer {
    display: flex;
    flex-direction: row;
    /* transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        /* transform: translateY(-1px); */
    /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); */ }
    footer .logo {
      margin-left: 15rem; }
    footer .listed-items ul li {
      display: inline-flex;
      flex-direction: row;
      padding: 1rem 3rem;
      text-align: left; } }