/** Import common styles */
/** Colors */
/** Font-Family */
/** Font-Sizes */
/** Grid */
*,
*::before,
*::after {
  box-sizing: border-box; }

html {
  height: 100%;
  width: 100%;
  min-width: 320px;
  font-size: 10px; }

*:focus {
  outline: 0; }

img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  vertical-align: bottom;
  object-fit: cover; }

svg {
  vertical-align: bottom; }

/**
* Break Points
*/
/**
* Mixins to create media-queries (min-width)
*/
@font-face {
  font-family: "Euclid Flex";
  src: url("../../assets/fonts/euclidflex-regular-webfont.woff2") format("woff2"), url("../../assets/fonts/euclidflex-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Euclid Flex";
  src: url("../../assets/fonts/euclidflex-medium-webfont.woff2") format("woff2"), url("../../assets/fonts/euclidflex-medium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Euclid Flex";
  src: url("../../assets/fonts/euclidflex-semibold-webfont.woff2") format("woff2"), url("../../assets/fonts/euclidflex-semibold-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Euclid Flex";
  src: url("../../assets/fonts/euclidflex-bold-webfont.woff2") format("woff2"), url("../../assets/fonts/euclidflex-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

/*  WEBFONTS OPTIMIZE   */
*,
*::after,
*::before {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: "Euclid Flex", "Helvetica", "sans-serif";
  font-weight: 400;
  font-size: 1.4rem;
  color: #002d74; }

h1,
.h1 {
  font-weight: 500;
  font-size: 4.6rem;
  line-height: 4.7rem; }
  @media (min-width: 768px) {
    h1,
    .h1 {
      font-size: 5.2rem;
      line-height: 5rem; } }

h2,
.h2 {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 3.1rem; }
  @media (min-width: 768px) {
    h2,
    .h2 {
      font-size: 2.8rem; } }

h3,
.h3 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.5rem; }
  @media (min-width: 768px) {
    h3,
    .h3 {
      font-size: 2.1rem;
      line-height: 2.7rem; } }

h4,
.h4 {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.8rem; }
  @media (min-width: 768px) {
    h4,
    .h4 {
      line-height: 2rem; } }

p {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem; }

a:focus,
a:visited,
a {
  outline: none; }

button,
.button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 1.4rem;
  border: 2px solid #06da57;
  color: #06da57;
  border-radius: 3rem;
  text-decoration: none;
  font-size: 1.4rem;
  height: 3rem;
  transition: all 300ms ease-in; }
  button:hover,
  .button:hover {
    background-color: #fff;
    color: #06da57;
    transition: all 300ms ease-in; }
    @media (min-width: 950px) {
      button:hover,
      .button:hover {
        background-color: #06da57;
        color: #fff; } }
    button:hover svg path,
    .button:hover svg path {
      stroke: #06da57;
      transition: stroke 300ms ease-in; }
      @media (min-width: 950px) {
        button:hover svg path,
        .button:hover svg path {
          stroke: #fff; } }
  button svg path,
  .button svg path {
    transition: all 300ms ease-in; }

a {
  color: #06da57; }

.header {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  z-index: 1;
  padding: 2rem 2rem 0;
  flex-direction: column;
  row-gap: 0.4rem; }
  @media (min-width: 768px) {
    .header {
      flex-direction: row;
      padding: 2rem 3.5rem 0; } }
  @media (max-width: 767px) {
    .header__button {
      margin: 0 auto; } }
  @media (max-width: 949px) {
    .header__button {
      border: 2px solid #fff;
      color: #fff; }
      .header__button svg path {
        stroke: #fff; } }
  .isSafari .header__button span {
    height: 1.8rem; }
  .header > svg {
    width: 220px; }
    @media (min-width: 768px) {
      .header > svg {
        width: 277px; } }

.banner {
  position: relative; }
  .banner__img {
    width: 100%;
    position: relative; }
    @media (min-width: 950px) {
      .banner__img {
        width: 50%;
        height: 100vh; } }
  .banner__mask {
    position: absolute;
    bottom: 0;
    width: 100%; }
    @media (min-width: 950px) {
      .banner__mask {
        height: 100%;
        top: 0; } }
    @media (min-width: 1366px) {
      .banner__mask {
        right: -3.5rem; } }
    .banner__mask svg {
      width: 100%;
      height: 100%; }
  @media (min-width: 950px) {
    .banner__mask-mobile {
      display: none; } }
  .banner__mask-desktop {
    display: none;
    height: 100%; }
    @media (min-width: 1366px) {
      .banner__mask-desktop {
        display: block; } }
  @media (min-width: 950px) {
    .banner__info {
      position: absolute;
      right: 0;
      top: 9.2rem;
      width: 50%;
      padding: 0 3.5rem 0 3.5rem; } }
  @media (min-width: 1366px) {
    .banner__info {
      padding: 0 15rem 0 5rem; } }
  .banner__info h1,
  .banner__info h2 {
    margin: 0; }
  .banner__info h2 {
    margin-top: 0.9rem; }
    .isSafari .banner__info h2 {
      margin-top: 2.5rem; }
  .banner__info-content {
    margin-top: 3rem; }
    @media (min-width: 950px) {
      .banner__info-content {
        margin-top: 3rem; } }
    @media (min-width: 1465px) {
      .banner__info-content {
        margin-top: 4rem; } }
    .banner__info-content h3 {
      margin: 0; }
    .banner__info-content p {
      margin: 0.8rem 0 0; }
  .banner__info-wrapper {
    padding: 0 2rem;
    position: relative; }
    @media (min-width: 950px) {
      .banner__info-wrapper {
        padding: 0; } }
    .banner__info-wrapper::before {
      content: "";
      background-image: url("../../assets/img/baloon.svg");
      position: absolute;
      left: 1rem;
      top: -1.5rem;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      width: 1.6rem;
      height: 2.4rem; }
      .isSafari .banner__info-wrapper::before {
        top: -3.5rem; }
      @media (min-width: 950px) {
        .banner__info-wrapper::before {
          left: -1.3rem; } }
  .banner__info-contact {
    margin-top: 4rem; }
    @media (min-width: 950px) {
      .banner__info-contact {
        margin-top: 3rem; } }
    @media (min-width: 1465px) {
      .banner__info-contact {
        margin-top: 4rem; } }
    .banner__info-contact h4 {
      text-transform: uppercase; }
    .banner__info-contact h4,
    .banner__info-contact p {
      margin: 0; }
    .banner__info-contact p {
      margin-top: 0.4rem; }
    .banner__info-contact div:last-child {
      margin-top: 2rem; }
  .banner__footer {
    padding: 2rem 0; }
    @media (min-width: 950px) {
      .banner__footer {
        padding: 3.8rem 0 0; } }
    @media (min-width: 1200px) {
      .banner__footer {
        padding: 2.8rem 0 0; } }
    @media (min-width: 1465px) {
      .banner__footer {
        padding: 4.8rem 0 0; } }
    .banner__footer span {
      display: block;
      margin-bottom: 0.7rem;
      font-size: 1rem; }
    .banner__footer div {
      display: flex;
      flex-direction: row;
      column-gap: 2.4rem; }
  .banner__contact {
    width: 100%;
    padding: 0 3.5rem;
    display: flex;
    gap: 0 4rem;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.5rem; }
    @media (min-width: 950px) {
      .banner__contact {
        position: absolute;
        left: 0;
        bottom: 2rem;
        width: 50%; } }
    .banner__contact span {
      display: block;
      line-height: 1.8rem; }
    .banner__contact.mobile {
      background-color: #E5EAF1;
      color: #002d74;
      padding: 4rem 2rem;
      margin-top: 8rem;
      position: relative; }
      .banner__contact.mobile::before {
        content: "";
        position: absolute;
        background-color: #E5EAF1;
        left: -2rem;
        right: 0;
        top: 0;
        width: calc(100% + 2rem * 2);
        height: 100%;
        z-index: -1; }
      @media (min-width: 950px) {
        .banner__contact.mobile {
          display: none; } }
    .banner__contact.desktop {
      display: none; }
      @media (min-width: 950px) {
        .banner__contact.desktop {
          display: flex; } }