@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap");
/* #### Generated By: http://www.cufonfonts.com #### */
@font-face {
  font-family: "regular";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Nunito-Regular.woff") format("woff"); }
@font-face {
  font-family: "bold";
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/Nunito-Bold.woff") format("woff"); }
@font-face {
  font-family: "candy";
  font-style: normal;
  font-weight: 900;
  src: local("Candy Beans"), url("../fonts/Nunito-Black.woff") format("woff"); }
html {
  font-size: 62.5%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-weight: 400; }

html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth; }

*,
*::after,
*::before {
  box-sizing: border-box;
  font-family: "regular", sans-serif; }

a {
  list-style: none;
  color: black;
  text-decoration: none; }

.space-20 {
  border: 0;
  margin: 1rem; }

h1 {
  margin: 0;
  font-size: 3.8rem;
  max-width: 40rem;
  line-height: 5.32rem;
  font-family: "candy";
  color: #353744; }
  @media (min-width: 900px) {
    h1 {
      font-size: 4.8rem;
      line-height: 5rem; } }
  @media (min-width: 1200px) {
    h1 {
      font-size: 8rem;
      line-height: 11.2rem;
      max-width: 77rem; } }

h2 {
  margin: 0;
  font-size: 3rem;
  line-height: 3rem;
  font-family: "candy";
  color: #353744; }
  @media (min-width: 900px) {
    h2 {
      font-size: 5rem;
      line-height: 5rem; } }

h3 {
  margin: 0;
  font-size: 2rem;
  line-height: 2rem;
  font-family: "candy"; }
  @media (min-width: 900px) {
    h3 {
      font-size: 3.4rem;
      line-height: 3.4rem; } }

h4 {
  margin: 0;
  font-size: 2rem;
  line-height: 2rem;
  font-family: "candy"; }
  @media (min-width: 900px) {
    h4 {
      font-size: 3rem;
      line-height: 3rem; } }

p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.8rem; }
  @media (min-width: 900px) {
    p {
      font-size: 2.2rem;
      line-height: 4rem; } }

.img-wrapper img {
  width: 100%; }

.section-title {
  text-align: center;
  text-transform: uppercase; }

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: white; }

.container {
  width: 90%;
  max-width: 159.8rem;
  margin: 0 auto; }

.bg-1 {
  background: url("../images/background_1.png") no-repeat left top;
  background-size: cover; }

.bg-2 {
  background: url("../images/background_2.png") no-repeat right top;
  background-size: cover; }

.bg-3 {
  background: url("../images/background_3.png") no-repeat right top;
  background-size: cover; }

header nav {
  position: relative; }
header .top-nav-bar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 0 1.5rem; }
  @media (min-width: 1200px) {
    header .top-nav-bar {
      flex-direction: row;
      padding: 4rem 0 1.5rem; } }
  @media (min-width: 1800px) {
    header .top-nav-bar {
      padding: 4.2rem 0 1.5rem; } }
header .nav-logo-wrapper {
  display: flex;
  justify-content: space-between; }
  @media (min-width: 1200px) {
    header .nav-logo-wrapper {
      width: auto; } }
  header .nav-logo-wrapper .icons {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    position: relative; }
    @media (min-width: 1200px) {
      header .nav-logo-wrapper .icons {
        display: none; } }
  header .nav-logo-wrapper .nav-link {
    margin: 8px 0; }
  header .nav-logo-wrapper .nav-space {
    display: none; }
  header .nav-logo-wrapper #menu-open,
  header .nav-logo-wrapper #menu-close {
    cursor: pointer;
    display: block;
    width: 24px;
    position: absolute;
    top: 0;
    left: 0; }
  header .nav-logo-wrapper #menu-close {
    display: none; }
header .hero {
  background: url("../images/bg-header.png") left bottom no-repeat;
  background-size: cover; }
  header .hero .content {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between; }
    @media (min-width: 600px) {
      header .hero .content {
        flex-direction: row; } }
header .header-title {
  text-align: center;
  margin-top: 7rem;
  letter-spacing: -3px; }
  @media (min-width: 600px) {
    header .header-title {
      text-align: left;
      margin-top: 0; } }
header .hero-img {
  max-width: 65.6rem;
  margin-top: 3rem;
  align-self: flex-end; }
  @media (min-width: 600px) {
    header .hero-img {
      text-align: left;
      margin-top: 7rem; } }
header .hero-logo {
  margin: 4rem 0;
  display: none; }
  @media (min-width: 600px) {
    header .hero-logo {
      margin: 0 4rem;
      display: block; } }
header .bar-links {
  display: none;
  -webkit-padding-start: 0;
  padding-inline-start: 0;
  margin: 0 auto;
  padding-bottom: 4rem;
  position: absolute;
  top: 99%;
  left: 0;
  background: white;
  width: 100%; }
  @media (min-width: 1200px) {
    header .bar-links {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 85rem;
      padding-bottom: 0;
      margin: 0 auto;
      position: static; } }
  header .bar-links .separation {
    background: rgba(0, 0, 0, 0.08);
    border: none;
    height: 0.1rem;
    margin-bottom: 4rem; }
    @media (min-width: 1200px) {
      header .bar-links .separation {
        display: none; } }
  header .bar-links .link {
    padding: 1rem;
    margin-bottom: 0.6rem;
    display: block; }
    @media (min-width: 1200px) {
      header .bar-links .link {
        margin-bottom: 0; } }
  header .bar-links li {
    font-size: 2rem;
    line-height: 2rem;
    text-transform: capitalize;
    font-weight: 700;
    text-align: center; }
    @media (min-width: 1200px) {
      header .bar-links li {
        font-weight: 400; } }
  header .bar-links.hide {
    display: none !important; }
    @media (min-width: 1200px) {
      header .bar-links.hide {
        display: flex !important; } }
  header .bar-links.show {
    display: block !important;
    box-shadow: 0px 3rem 3.9rem rgba(0, 0, 0, 0.2); }
    @media (min-width: 1200px) {
      header .bar-links.show {
        display: flex !important;
        box-shadow: none; } }

.games {
  padding: 2rem 0; }
  @media (min-width: 1200px) {
    .games {
      padding: 4rem 0; } }
  @media (min-width: 1800px) {
    .games {
      padding: 8rem 0; } }
  .games .game {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0; }
    @media (min-width: 1200px) {
      .games .game {
        flex-direction: row;
        justify-content: space-between;
        padding: 7.2rem 0; } }
    @media (min-width: 1200px) {
      .games .game.reversed {
        flex-direction: row-reverse; } }
    @media (min-width: 1200px) {
      .games .game.reversed .infos {
        margin: 5.4rem 0 0 7rem;
        width: 50%; } }
    @media (min-width: 1800px) {
      .games .game.reversed .infos {
        margin: 5.4rem 0 0 12.5rem;
        width: 50%; } }
  .games .logo-wrapper {
    margin: 1rem;
    max-width: 7.4rem;
    width: 100%; }
    @media (min-width: 900px) {
      .games .logo-wrapper {
        margin: 0;
        float: none;
        shape-outside: none;
        max-width: 16rem; } }
    .games .logo-wrapper img {
      width: 100%; }
  .games .infos {
    margin-bottom: 2rem;
    width: 100%; }
    @media (min-width: 900px) {
      .games .infos {
        display: flex; } }
    @media (min-width: 1200px) {
      .games .infos {
        margin: 5.4rem 7rem 0 0;
        width: 50%; } }
  .games .text {
    margin-top: 2rem;
    margin-left: 2rem; }
    @media (min-width: 900px) {
      .games .text {
        margin-top: 2.6rem;
        margin-left: 4rem; } }
  .games .game-title {
    margin-bottom: 2rem; }
  .games .store-links {
    margin-top: 3rem;
    display: flex; }
    .games .store-links .apple-link {
      margin-right: 1rem; }
    .games .store-links img {
      width: 100%; }

.feature {
  padding: 2rem 0; }
  @media (min-width: 1200px) {
    .feature {
      padding: 4rem 0; } }
  @media (min-width: 1800px) {
    .feature {
      padding: 8rem 0; } }
  .feature .section-title {
    margin-bottom: 5rem; }
  .feature .description {
    text-align: center;
    max-width: 80%;
    margin: 0 auto; }
  .feature .services {
    display: grid;
    margin: 4.1rem auto 0;
    grid-template-columns: 1fr;
    row-gap: 3rem; }
    @media (min-width: 1200px) {
      .feature .services {
        grid-template-columns: 1fr 1fr 1fr;
        -moz-column-gap: 3rem;
        column-gap: 3rem; } }
  .feature .card {
    padding: 6rem 4rem 5.6rem;
    border-radius: 2.4rem;
    background: #ffffff;
    box-shadow: 0px 4px 46px rgba(0, 0, 0, 0.1);
    z-index: 10;
    height: 100%;
    flex: 1 1 100%; }
    .feature .card .title {
      margin-bottom: 2.5rem; }
      @media (min-width: 900px) {
        .feature .card .title {
          margin-bottom: 1.5rem; } }
    .feature .card .rank {
      font-size: 4rem;
      line-height: 4rem;
      font-family: "bold";
      color: #dce3e8;
      margin-bottom: 1.7rem;
      z-index: 0;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-user-select: none; }
      @media (min-width: 900px) {
        .feature .card .rank {
          font-size: 6rem;
          line-height: 6rem;
          margin-bottom: 3rem; } }

.team {
  padding: 2rem 0; }
  @media (min-width: 1200px) {
    .team {
      padding: 4rem 0; } }
  @media (min-width: 1800px) {
    .team {
      padding: 8rem 0; } }
  .team .content {
    justify-content: space-between;
    margin-top: 3rem; }
    @media (min-width: 900px) {
      .team .content {
        display: flex; } }
  .team .img-wrapper {
    border-radius: 2.4rem;
    overflow: hidden;
    align-self: center;
    flex: 0 0 30%; }
  .team .infos {
    margin-top: 3rem; }
    @media (min-width: 900px) {
      .team .infos {
        margin-top: 0;
        margin-left: 3rem; } }

.vacancies {
  padding: 2rem 0; }
  @media (min-width: 1200px) {
    .vacancies {
      padding: 4rem 0; } }
  @media (min-width: 1800px) {
    .vacancies {
      padding: 8rem 0; } }
  .vacancies .content {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 3rem; }
    @media (min-width: 900px) {
      .vacancies .content {
        grid-template-columns: 1fr 1fr;
        -moz-column-gap: 3rem;
        column-gap: 3rem; } }
    @media (min-width: 1200px) {
      .vacancies .content {
        grid-template-columns: 1fr 1fr 1fr;
        -moz-column-gap: 3rem;
        column-gap: 3rem; } }
  .vacancies .description {
    text-align: center;
    margin: 2.7rem 0 0rem 0; }
  .vacancies .card {
    padding: 2.7rem 4.8rem 4.6rem 4.1rem;
    border-radius: 2.4rem;
    background: #ffffff;
    -webkit-filter: drop-shadow(0px 0px 50px rgba(197, 204, 205, 0.6));
    filter: drop-shadow(0px 0px 50px rgba(197, 204, 205, 0.6));
    z-index: 10; }
    .vacancies .card .job-title {
      margin-top: 3rem;
      margin-bottom: 0.4rem;
      font-size: 2.8rem;
      line-height: 3rem;
      letter-spacing: 0.04em;
      color: #353743; }
      @media (min-width: 900px) {
        .vacancies .card .job-title {
          margin-top: 2.4rem;
          margin-bottom: 1rem;
          font-size: 2rem;
          line-height: 3rem; } }
    .vacancies .card .job-description {
      font-size: 1.6rem;
      line-height: 2rem;
      color: #353743; }
      @media (min-width: 900px) {
        .vacancies .card .job-description {
          font-size: 2.2rem;
          line-height: 3rem; } }

.contact {
  padding: 2rem 0; }
  @media (min-width: 1200px) {
    .contact {
      padding: 4rem 0; } }
  @media (min-width: 1800px) {
    .contact {
      padding: 8rem 0; } }
  .contact .section-title {
    margin-bottom: 7rem; }
  .contact form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 78.5rem;
    margin: 0 auto; }
  .contact .inputs {
    width: 100%; }
    @media (min-width: 600px) {
      .contact .inputs {
        display: flex;
        align-items: baseline;
        justify-content: space-between; } }
  .contact .input-group {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    width: 100%; }
    .contact .input-group label {
      font-size: 2rem;
      line-height: 2.4rem; }
    .contact .input-group .input {
      background: none;
      font-size: 2rem;
      line-height: 2.4rem;
      display: block;
      width: 100%;
      outline: none;
      height: 6.4rem;
      border: 0.2rem solid #dce3e8;
      border-radius: 1.4rem;
      padding: 2.2rem 2rem; }
      .contact .input-group .input::-webkit-input-placeholder {
        font-family: "regular";
        font-size: 2rem;
        line-height: 2rem;
        color: #152c3c80; }
      .contact .input-group .input::-moz-placeholder {
        font-family: "regular";
        font-size: 2rem;
        line-height: 2rem;
        color: #152c3c80; }
      .contact .input-group .input:-ms-input-placeholder {
        font-family: "regular";
        font-size: 2rem;
        line-height: 2rem;
        color: #152c3c80; }
      .contact .input-group .input::-ms-input-placeholder {
        font-family: "regular";
        font-size: 2rem;
        line-height: 2rem;
        color: #152c3c80; }
      .contact .input-group .input::placeholder {
        font-family: "regular";
        font-size: 2rem;
        line-height: 2rem;
        color: #152c3c80; }
    .contact .input-group .textarea {
      height: 12rem;
      resize: none; }
  .contact .submit-btn {
    border-radius: 1.4rem;
    border: none;
    color: white;
    font-size: 2rem;
    font-weight: 900;
    line-height: 2.4rem;
    padding: 1.8rem 0;
    width: 100%;
    background: #00c700; }

.map {
  position: relative; }
  @media (min-width: 1200px) {
    .map .content {
      position: absolute;
      right: 5%;
      top: 50%;
      transform: translateY(-50%); } }
  .map .map-contact {
    width: 100%;
    padding: 4rem 0.5rem 1rem 1.8rem;
    margin-left: auto;
    background: #ffffff;
    box-shadow: 0px 4px 46px rgba(0, 0, 0, 0.1);
    border-radius: 2.4rem;
    margin-bottom: 4rem; }
    @media (min-width: 600px) {
      .map .map-contact {
        padding: 7rem 0.5rem 3rem 4rem; } }
    @media (min-width: 1200px) {
      .map .map-contact {
        max-width: 51.3rem;
        margin-bottom: 0; } }
    .map .map-contact .detail {
      margin-bottom: 3rem;
      z-index: 10;
      position: relative; }
    .map .map-contact .tag {
      margin-bottom: 1.5rem;
      z-index: 10;
      position: relative; }
      @media (min-width: 900px) {
        .map .map-contact .tag {
          margin-bottom: 2rem; } }
  .map .google-map {
    width: 100%;
    height: 100%; }

footer {
  background-color: #353744;
  padding: 2rem 0; }
  @media (min-width: 1200px) {
    footer {
      padding: 4rem 0; } }
  @media (min-width: 1800px) {
    footer {
      padding: 8rem 0; } }
  footer .separation {
    margin: 3rem 0;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    height: 0.1rem; }
  footer .logo-wrapper {
    display: flex; }
    footer .logo-wrapper .text {
      color: white;
      margin-left: 1rem;
      font-size: 1.7rem; }
      @media (min-width: 900px) {
        footer .logo-wrapper .text {
          margin-left: 0; } }
    @media (min-width: 900px) {
      footer .logo-wrapper {
        flex-direction: column;
        align-items: flex-start; } }
  footer .footer-nav {
    display: block; }
    @media (min-width: 900px) {
      footer .footer-nav {
        display: flex;
        align-items: center;
        justify-content: unset; } }
  footer .bar-links {
    display: none; }
    @media (min-width: 900px) {
      footer .bar-links {
        margin: 0 auto;
        width: 100%;
        max-width: 75.3rem;
        display: flex;
        align-items: center;
        justify-content: space-between; } }
    footer .bar-links .link {
      font-size: 1.8rem;
      line-height: 2.178rem;
      color: white; }
  footer .copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.6rem;
    line-height: 1.6rem;
    text-align: center; }

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