@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap");
html {
  font-size: 16px; }

body {
  margin: 0;
  margin-top: 4rem;
  font-family: sans-serif;
  font-family: 'Quicksand', sans-serif;
  background: white; }
  body * {
    transition: all 0.3s ease; }
  @media (min-width: 64rem) {
    body {
      margin-top: 5.2rem; } }
  body h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 1rem; }
  body h3 {
    font-size: 1.5rem; }

nav {
  width: 100%;
  background: white;
  position: fixed;
  top: 0;
  z-index: 10000;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.05); }
  nav .nav-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 64rem;
    margin: 0 auto;
    padding: 1rem;
    position: relative; }
    nav .nav-content .burger {
      position: absolute;
      left: 1.2rem;
      font-size: 1.5rem;
      cursor: pointer; }
    nav .nav-content .logo {
      height: 2rem; }
    nav .nav-content .nav-menu {
      width: 100%;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s ease;
      flex-direction: column;
      gap: 1rem;
      position: absolute;
      top: 75%;
      background: #f3f6fa;
      padding: 0 0.5rem;
      list-style: none;
      z-index: 1000; }
      nav .nav-content .nav-menu li {
        text-align: center; }
        nav .nav-content .nav-menu li a {
          text-decoration: none;
          padding: 1rem;
          color: black;
          display: block; }
          nav .nav-content .nav-menu li a:hover {
            color: #ffa800; }
      nav .nav-content .nav-menu.active {
        max-height: 500px;
        padding: 1rem; }
    @media (min-width: 64rem) {
      nav .nav-content .burger {
        display: none; }
      nav .nav-content .nav-menu {
        max-height: 1.5rem;
        width: auto;
        display: flex !important;
        position: static;
        flex-direction: row;
        gap: 3rem;
        background: none;
        box-shadow: none;
        margin-left: auto; }
        nav .nav-content .nav-menu li a {
          padding: 0; } }

.content {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem; }

.intro {
  background: url("img/intro.jpg") no-repeat center center;
  background-size: cover;
  color: black;
  text-align: left;
  position: relative;
  overflow: hidden;
  min-height: 20rem; }
  .intro .content {
    max-width: 40rem;
    margin: 0 auto;
    position: relative; }
    @media (min-width: 64rem) {
      .intro .content {
        max-width: 60rem; } }
  .intro .phone-image {
    position: absolute;
    top: 5rem;
    right: 1rem;
    max-width: 100%;
    width: 10rem;
    z-index: 1; }
    @media (min-width: 32rem) {
      .intro .phone-image {
        top: 3rem;
        right: 2rem;
        width: 13rem; } }
    @media (min-width: 64rem) {
      .intro .phone-image {
        top: 0.5rem;
        width: 18rem; } }
  .intro .claim {
    position: relative;
    z-index: 2;
    font-size: 1.2rem;
    padding: 1rem 18rem 6rem 1rem;
    font-weight: 100; }
    @media (min-width: 32rem) {
      .intro .claim {
        font-size: 1.8rem;
        padding: 1rem 24rem 7rem 1rem; } }
    @media (min-width: 64rem) {
      .intro .claim {
        font-size: 2.5rem;
        padding: 1rem 40rem 9rem 1rem; } }

.games {
  padding-top: 4rem; }
  .games h2 {
    margin-bottom: 2rem; }
  .games .game {
    overflow: hidden;
    padding: 2rem 2rem 0 2rem; }
    .games .game .content {
      flex-direction: column;
      align-items: center;
      gap: 2rem; }
    .games .game .game-info .game-logo {
      max-width: 200px;
      margin-bottom: 1rem; }
    .games .game .game-info p {
      font-size: 1rem;
      line-height: 1.6; }
    .games .game .game-info .store-buttons {
      margin: 2rem 0rem;
      display: flex;
      justify-content: center;
      gap: 1rem; }
      .games .game .game-info .store-buttons img {
        width: 100%;
        max-width: 10rem;
        height: auto; }
    .games .game .game-image {
      width: 100%;
      height: 18rem;
      position: relative;
      overflow: hidden; }
      .games .game .game-image img {
        width: 100%;
        max-width: 20rem;
        height: auto;
        position: absolute;
        right: 0;
        left: 0;
        margin: 0 auto; }
    @media (min-width: 40rem) {
      .games .game .content {
        display: flex;
        flex-direction: row;
        align-items: stretch; }
        .games .game .content.reverse {
          flex-direction: row-reverse; }
        .games .game .content .game-info {
          padding: 3rem 0;
          text-align: left;
          flex: 1; }
          .games .game .content .game-info .store-buttons {
            justify-content: start; }
        .games .game .content .game-image {
          height: auto;
          flex: 1;
          position: relative; }
          .games .game .content .game-image img {
            max-width: 25rem; } }

.we {
  padding: 1rem; }
  .we .content > p {
    margin-bottom: 3rem;
    line-height: 1.6;
    text-align: center; }
  .we .values {
    display: flex;
    flex-direction: column;
    gap: 2rem; }
    .we .values .value-box {
      border: 1px solid #e4eaf5;
      border-radius: 1.5rem;
      padding: 2rem;
      text-align: left; }
      .we .values .value-box img {
        width: 3rem; }
      .we .values .value-box h3 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
        font-weight: 600; }
      .we .values .value-box p {
        font-size: 0.95rem;
        line-height: 1.5; }
  @media (min-width: 50rem) {
    .we .values {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      align-items: stretch; }
      .we .values .value-box {
        flex: 1;
        max-width: 30%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start; }
        .we .values .value-box img {
          width: 5rem;
          margin-bottom: 1rem; } }

.contact {
  padding: 2rem 1rem;
  text-align: center; }
  .contact a {
    color: #ffa800; }

.about {
  padding: 4rem 2rem; }
  .about .about-columns {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center; }
    @media (min-width: 64rem) {
      .about .about-columns {
        flex-direction: row;
        justify-content: space-between; } }
  .about .about-text {
    flex: 1;
    text-align: left; }
    .about .about-text h2 {
      font-size: 1.8rem;
      margin-bottom: 2rem; }
    .about .about-text p {
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 1rem; }
    @media (min-width: 64rem) {
      .about .about-text {
        padding-left: 2rem; }
        .about .about-text h2 {
          text-align: left; } }
  .about .about-image {
    flex: 1;
    display: flex;
    justify-content: center; }
    .about .about-image img {
      max-width: 100%;
      height: auto;
      border-radius: 1rem; }

footer {
  background: #f3f6fa;
  color: white;
  padding: 3rem; }
  footer > * {
    display: flex;
    justify-content: center;
    color: black; }
    footer > * img {
      margin: 0 1.5rem;
      height: 2rem; }
    footer > * a {
      color: black; }

.gris {
  background-color: #f3f6fa; }

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