@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Open+Sans:wght@300&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

:root {
  --font-title: "Josefin Sans", sans-serif;
  --font-text: "Open Sans", sans-serif;
  --font-button: "Josefin Sans", sans-serif;
  --font-color: rgb(130, 254, 239);
}

@media screen and (min-width: 1300px) {
  .section-relevant {
    background-color: #152837;
    z-index: -1;
    border-radius: 0.2rem;
    height: 15rem;
  }

  .relevants {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    z-index: -1;
    align-items: center;
    justify-content: center;
  }
  /* .relevants>*:first-child {
    align-self: ;
  } */

  .card-relevant {
    width: 40%;
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin-top: 1rem;
    left: 0rem;
  }
  .section-relevant #card-idiomas {
    height: 100%;
    height: 15rem;
    right: 1rem;
  }
  .section-relevant #card-contrato {
    height: 100%;
    height: 15rem;
    right: 1rem;
  }
  .section-relevant #card-objetivo {
    width: 100%;
    height: 15rem;
    right: 1rem;
    margin-right: 1rem;
  }

  .card-lines {
    position: relative;
    padding: 1rem;
    bottom: 1rem;
    top: 0rem;
    align-items: center;
    justify-content: center;
    left: 2rem;
    height: 30%;
  }

  .section-relevant h3 {
    color: var(--font-color);
    font-family: var(--font-text);
    letter-spacing: 0.3rem;
    margin-top: -0.5rem;
    margin-left: 3.5rem;
    font-variant-caps: small-caps;
    text-align: left;
  }

  ul.ul-contratos {
    list-style-type: circle;
    color: #fff;
    margin-left: 2.5rem;
    margin-top: 1.5rem;
    font-size: 1.1rem;
  }

  .section-relevant p {
    color: #fff;
    font-family: var(--font-text);
    letter-spacing: 0.12rem;
    word-spacing: 0.2rem;
  }

  .missaovisao-p {
    margin-right: 1rem;
    margin-top: 1rem;
  }

  .icon-idioma {
    position: absolute;
    width: 2.6rem;
    height: 2.1rem;
    margin-left: 0rem;
    margin-top: -0.7rem;
    opacity: 0.7;
  }
  .icon-contrato {
    position: absolute;
    width: 2.3rem;
    height: 2.3rem;
    margin-top: -0.7rem;
    opacity: 0.7;
  }

  .icon-missao-visao {
    position: absolute;
    width: 2.6rem;
    height: 2.6rem;
    margin-top: -1rem;
    opacity: 0.7;
  }
}

@media screen and (min-width: 800px) and (max-width: 1299px) {
  .section-relevant {
    background-color: #152837;
    z-index: -1;
    border-radius: 0.2rem;
    height: 20rem;
  }

  .relevants {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    z-index: -1;
    align-items: center;
    justify-content: center;
  }
  /* .relevants>*:first-child {
    align-self: ;
  } */

  .card-relevant {
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin-top: 1rem;
    left: 0rem;
  }
  .section-relevant #card-idiomas {
    width: 20%;
    height: 100%;
  }
  .section-relevant #card-contrato {
    width: 20%;
    height: 100%;
  }
  .section-relevant #card-objetivo {
    width: 55%;
    height: 100%;
  }

  .card-lines {
    position: relative;
    padding: 1rem;
    bottom: 1rem;
    top: 0rem;
    align-items: center;
    justify-content: center;
    left: 0.5rem;
  }

  .section-relevant h3 {
    color: var(--font-color);
    font-family: var(--font-text);
    letter-spacing: 0.2rem;
    margin-bottom: 1rem;
    font-variant-caps: small-caps;
    text-align: left;
  }

  .escrita-missao-visao {
    margin-left: 3.6rem;
  }

  ul.ul-contratos {
    list-style-type: circle;
    color: #fff;
    font-size: 1.1rem;
  }

  .section-relevant p {
    color: #fff;
    font-family: var(--font-text);
    letter-spacing: 0.12rem;
    word-spacing: 0.2rem;
  }

  .icon-idioma {
    width: 2.6rem;
    height: 2.1rem;
    margin-left: 0rem;
    margin-top: -0.7rem;
    opacity: 0.7;
  }
  .icon-contrato {
    width: 2.3rem;
    height: 2.3rem;
    margin-top: -0.7rem;
    opacity: 0.7;
  }

  .icon-missao-visao {
    position: absolute;
    width: 2.6rem;
    height: 2.6rem;
    margin-top: -1rem;
    opacity: 0.7;
  }
}

@media screen and (max-width: 799px) {
  .section-relevant {
    background-color: #152837;
    z-index: -1;
    border-radius: 0.2rem;
    height: 45rem;
  }

  .relevants {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    z-index: -1;
    align-items: center;
    justify-content: center;
  }
  /* .relevants>*:first-child {
    align-self: ;
  } */

  .card-relevant {
    width: 25rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin-top: 0rem;
  }
  .section-relevant #card-idiomas {
    width: 90%;
    height: 12rem;
  }
  .section-relevant #card-contrato {
    width: 90%;
    height: 10rem;
  }
  .section-relevant #card-objetivo {
    width: 90%;
    height: 22rem;
    margin-bottom: 2rem;
  }

  .card-lines {
    position: relative;
    padding: 1rem;
    bottom: 1rem;
    top: 0rem;
    align-items: center;
    justify-content: center;
  }

  .section-relevant h2 {
    color: var(--font-color);
    font-family: var(--font-text);
    letter-spacing: 0.1rem;
  }

  .section-relevant h3 {
    color: var(--font-color);
    font-family: var(--font-text);
    letter-spacing: 0.3rem;
    margin-bottom: 1rem;
    margin-left: 3.5rem;
    font-variant-caps: small-caps;
    text-align: left;
  }

  ul.ul-contratos {
    list-style-type: circle;
    color: #fff;
    font-size: 1.1rem;
    margin-left: 2.5rem;
  }

  .section-relevant p {
    color: #fff;
    font-family: var(--font-text);
    letter-spacing: 0.12rem;
    word-spacing: 0.2rem;
  }
  .icon-idioma {
    position: absolute;
    width: 2.6rem;
    height: 2.1rem;
    margin-left: 0rem;
    margin-top: 0rem;
    opacity: 0.7;
  }
  .icon-contrato {
    position: absolute;
    width: 2.3rem;
    height: 2.3rem;
    margin-top: -0.4rem;
    opacity: 0.7;
  }

  .icon-missao-visao {
    position: absolute;
    width: 2.6rem;
    height: 2.6rem;
    margin-top: -0.8rem;
    opacity: 0.7;
  }
}