@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


body {
  background-color: #f4f4f4;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Ubuntu", serif;
  color: #8f0014;
  font-weight: 800;
}

p {
  font-family: "Open Sans", serif;
}

#hero {
padding-top: 3rem;
background: linear-gradient(to bottom,  #087ac0 1%,#087ac0 86%,#f4f4f4 86%,#f4f4f4 100%);

  & img {
    margin-bottom: 1rem;
  }

}

.hero-box {
  margin-top: 3rem;
  border-radius: 4px;
  background-color: #FFFFFF;
  padding: 2rem;
  box-shadow: 0px 4px 4px 0 rgba(81, 80, 80, 0.1);
  border: 1px solid #bebebe;

  & h5 {
    margin-bottom: 1rem;
    font-weight: normal;
  }

  & p {
    color: #5a5a5a;
    font-family: "Open Sans", serif;
    font-weight: 500;
  }

  & a.button {
    margin-top: 1rem;
    padding: 1rem;
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    background-color: #8f0014;

    &:hover {
      background-color: #a4182b;
      color: #FFFFFF;
    }
  }
}

#beneficios {
  padding-top: 3rem;
  padding-bottom: 3rem;

}

.card-ben {
  border-radius: 4px;
  border: 1px solid #dadada;
  background: linear-gradient(135deg, #bfbcbc33 0%, #ffffff1a 100%);
  padding: 2rem;
  margin-top: 8px;
  margin-left: 4px;
  margin-right: 4px;

  & h6 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: normal;
    color: #006EB3;
  }

  & p {
    color: #414141;
    font-size: smaller;
  }
}

#app {
  margin-top: 1rem;
  background-color: #D9D9D9;
  padding-top: 3rem;


    & h3 {
      color: #006EB3;
      margin-bottom: 2rem;
    }

    & p {
      margin-bottom: 2rem;
    }
    
    & a.button {
      background-color: #006EB3;
      padding: .5rem;
      color: #FFFFFF;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: normal;

      & i {
        margin-right: .5rem;
      }

      &:hover {
        background-color: #005b94;
      }
    }
}