@import url(reset.css);

@font-face {
    font-family: 'Museo300';
    src: url('MuseoSans-300.otf');
}

@font-face {
    font-family: 'Museo700';
    src: url('MuseoSans_700.otf');
}

body {
    font-family: 'Museo300', serif;
    font-size: 1.8vh;
    font-weight: 400;
    cursor: default;
    background-color: white;
    color: #000000;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/*mobile*/

.mobile {
    display: none;
}

/*header*/

header {
    height: 20vh;
}

header>.container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

header>.container>img {
    height: 10vh;
    object-fit: contain;
    object-position: center;
}

header>.container>nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vh;
    border-bottom: 1px solid #0D1B4B;
    border-top: 1px solid #0D1B4B;
    padding: 2vh 0;
}

header>.container>nav>a {
    text-decoration: none;
    color: #0D1B4B;
    font-size: 100%;
}

header>.container>nav>a:hover {
    color: #229632;
}

header>.container>a {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #6FB38F;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    gap: 1vh;
    padding: 0 2vh 1vh 2vh;
    border-radius: 0 0 2vh 2vh;
}

header>.container>a>img {
    height: 2vh;
    object-fit: contain;
    object-position: center;
}

header>.container>a>p {
    color: white;
    text-transform: uppercase;
    font-size: 100%;
    font-weight: 600;
}

.menu {
    display: none;
}

/*banner*/

.banner {
    height: 50vh;
    position: relative;
    background-color: #E8EAED;
}

.banner>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner>div {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.banner>div>div {
    width: 40%;
    display: grid;
    gap: 5vh;
}

.banner>div>div>h1 {
    font-family: 'Museo700';
    font-size: 250%;
    color: #0D1B4B;
    line-height: 1;
}

.banner>div>div>h1>span {
    color: #229632;
}

.banner>div>div>div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1vh;
}

.banner>div>div>div>p {
    color: #229632;
    font-family: 'Museo700';
    font-size: 200%;
    line-height: 1;
    background-color: #E8EAED;
}

.banner>div>div>div>svg {
    height: 5vh;
    fill: #229632;
}

.banner>div>img {
    width: 50%;
    top: 5vh;
    height: calc(100% - 30vh);
    object-fit: contain;
    object-position: right;
}

/*quemsomos*/

.quemsomos {
    padding: 8vh 0;
}

.quemsomos .container {
    display: grid;
    gap: 6vh;
}

.quemsomos .container>div:nth-of-type(1) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8vh;
}

.quemsomos .container>div:nth-of-type(1)>img {
    width: 50%;
    height: 50vh;
    object-fit: cover;
    object-position: center;
    border-radius: 5vh;
}

.quemsomos .container>div:nth-of-type(1)>div {
    width: 50%;
}

.quemsomos .container>div:nth-of-type(1)>div>h2 {
    color: #229632;
    font-family: 'Museo700';
    font-size: 200%;
}

.quemsomos .container>div:nth-of-type(1)>div>p {
    color: #666666;
    line-height: 1.25;
    margin-top: 2vh;
}

.quemsomos .container>div:nth-of-type(2) {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 3vh;
}

.quemsomos .container>div:nth-of-type(2) {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 3vh;
}

.quemsomos .container>div:nth-of-type(2)>div {
    background-color: #F6F6F6;
    padding: 2vh;
    border-radius: 2vh;
    width: 33.33%;
}

.quemsomos .container>div:nth-of-type(2)>div>h2 {
    color: #229632;
    font-family: 'Museo700';
    font-size: 150%;
    text-align: center;
}

.quemsomos .container>div:nth-of-type(2)>div>p {
    color: #666666;
    line-height: 1.25;
    margin-top: 2vh;
    text-align: center;
}

/*solucoes*/

.solucoes {
    background-color: #00144A;
    padding: 8vh 0;
}

.solucoes>div>h2 {
    font-family: 'Museo700';
    font-size: 200%;
    color: white;
    margin: 1vh 0;
    text-align: center;
}

.solucoes>div>p {
    text-align: center;
    color: white;
}

.solucoes>div>div:nth-of-type(1) {
    background-color: white;
    margin-top: 4vh;
    border-radius: 2vh;
    padding: 0 3vh;
}

.solucoes>div>div:nth-of-type(1)>div:nth-of-type(1) {
    padding: 3vh 3vh 1.5vh 3vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.solucoes>div>div:nth-of-type(1)>div:nth-of-type(1)>p {
    color: #00144A;
    font-size: 120%;
    line-height: 1.25;
    font-family: 'Museo700';
}

.solucoes>div>div:nth-of-type(1)>div:nth-of-type(1)>p>span {
    color: #229632;
}

.solucoes>div>div:nth-of-type(1)>div:nth-of-type(1)>div {
    display: flex;
    gap: 2vh;
}

.solucoes>div>div:nth-of-type(1)>div:nth-of-type(1)>div>img {
    height: 6vh;
    width: 6vh;
    object-fit: contain;
    object-position: center;
}

.solucoes>div>div:nth-of-type(1)>div:nth-of-type(2) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10vh;
    padding: 1.5vh 3vh 3vh 3vh;
}

.solucoes>div>div:nth-of-type(1)>div:nth-of-type(2)>p {
    line-height: 1.25;
    color: #666666;
}

.solucoes>div>div:nth-of-type(2) {
    margin-top: 3vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 3vh;
}

.solucoes>div>div:nth-of-type(2)>div {
    background-color: white;
    width: calc(33.33% - 2vh);
    border-radius: 2vh;
    padding: 3vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.solucoes>div>div:nth-of-type(2)>div>h3 {
    color: #00144A;
    font-size: 120%;
    line-height: 1.25;
    font-family: 'Museo700';
}

.solucoes>div>div:nth-of-type(2)>div>h3>span {
    color: #229632;
}

.solucoes>div>div:nth-of-type(2)>div>img {
    height: 6vh;
    width: 6vh;
    object-fit: contain;
    object-position: center;
}

/*porque*/

.porque {
    padding: 8vh 0;
}

.porque>div {
    width: 80%;
    max-width: 1000px;
}

.porque>div>span {
    font-size: 100%;
    color: white;
    background-color: #229632;
    padding: 1vh 3vh;
    display: inline-block;
    border-radius: 3vh;
}

.porque>div>h2 {
    font-family: 'Museo700';
    font-size: 200%;
    color: #0D1B4B;
    margin: 1vh 0;
}

.porque>div>p {
    color: #666666;
}

.porque>div>div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 4vh;
    gap: 4vh;
}

.porque>div>div>div:nth-of-type(1) {
    background-color: #E8EAED;
    width: 100%;
    padding: 3vh;
    border-radius: 2vh;
    gap: 2vh;
    display: grid;
}

.porque>div>div>div:nth-of-type(1)>h3 {
    color: #0D1B4B;
    font-family: 'Museo700';
    font-size: 120%;
    margin-bottom: 1vh;
}

.porque>div>div>div:nth-of-type(1)>div {
    gap: 2vh;
    display: grid;
}

.porque>div>div>div:nth-of-type(1)>div>p {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #666666;
}

.porque>div>div>div:nth-of-type(1)>div>p>svg {
    height: 2vh;
    margin-right: .5vh;
    fill: #666666;
    min-width: 2vh;
}

.porque>div>div>div:nth-of-type(2) {
    background-color: #00144A;
    width: 100%;
    padding: 3vh;
    border-radius: 2vh;
    gap: 2vh;
    display: grid;
}

.porque>div>div>div:nth-of-type(2)>h3 {
    color: white;
    font-family: 'Museo700';
    font-size: 120%;
    margin-bottom: 1vh;
}

.porque>div>div>div:nth-of-type(2)>div {
    gap: 2vh;
    display: grid;
}

.porque>div>div>div:nth-of-type(2)>div>p {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: white;
}

.porque>div>div>div:nth-of-type(2)>div>p>svg {
    height: 2vh;
    margin-right: .5vh;
    fill: #229632;
    min-width: 2vh;
}

/*middle*/

.middle {
    height: 30vh;
    position: relative;
}

.middle>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.middle>div {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.middle>div>p {
    text-align: right;
    color: white;
    font-size: 200%;
}

/*funciona*/

.funciona>div {
    padding: 8vh 0;
}

.funciona>div>span {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 30vh;
    background-color: #00144A;
    z-index: -1;
}

.funciona>div>h2 {
    font-family: 'Museo700';
    font-size: 200%;
    color: white;
    margin-bottom: 1vh;
    text-align: center;
}

.funciona>div>p {
    text-align: center;
    color: white;
}

.funciona>div>div {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 6vh;
    margin-top: 6vh;
}

.funciona>div>div>div {
    background-color: #F6F6F6;
    border-radius: 2vh;
    width: 25%;
    padding: 3vh;
    box-sizing: border-box;
    gap: 2vh;
    display: grid;
    box-shadow: 0px 7px 10px rgba(0, 0, 0, .2);
}

.funciona>div>div>div>span {
    color: #229632;
    background-color: #C9E7D4;
    width: 5vh;
    height: 5vh;
    display: flex;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    font-family: 'Museo700';
    font-weight: 700;
    border: 3px solid #229632;
    margin: 0 auto;
}

.funciona>div>div>div>h3 {
    font-family: 'Museo700';
    font-size: 120%;
    color: #0D1B4B;
    text-align: center;
}

.funciona>div>div>div>p {
    color: #666666;
    line-height: 1.25;
    text-align: center;
}

/*equeipe*/

.equipe {
    height: 50vh;
}

.equipe>img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

/*depoimentos*/

.depoimentos {
    padding: 8vh 0;
}

.depoimentos>div>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.depoimentos>div>div:nth-of-type(1) {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8vh 8vh 4vh 8vh;
}

.depoimentos>div>div:nth-of-type(1)>div>h2 {
    font-family: 'Museo700';
    font-size: 200%;
    color: white;
    margin-bottom: 1vh;
}

.depoimentos>div>div:nth-of-type(1)>div>p {
    color: white;
}

.depoimentos>div>div:nth-of-type(1)>img {
    height: 10vh;
    object-fit: cover;
    object-position: center;
}

.depoimentos__list {
    position: relative;
    padding: 4vh 8vh 8vh 8vh;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4vh;
}

.depoimentos__item {
    width: calc(50% - 2vh);
    background-color: white;
    border-radius: 2vh;
    padding: 3vh;
    box-sizing: border-box;
}

.depoimentos__item>h3 {
    font-family: 'Museo700';
    font-size: 100%;
    color: #0D1B4B;
    margin-bottom: 1vh;
}

.depoimentos__item>p {
    color: #666666;
    line-height: 1.25;
    font-size: 85%;
}

/*dicas*/

.dicas {
    background-color: #F6F6F6;
    padding: 8vh 0;
}

.dicas>h2 {
    font-family: 'Museo700';
    font-size: 200%;
    color: #0D1B4B;
    text-align: center;
    margin-bottom: 4vh;
}

.dicas__list {
    width: 60%;
    margin: 0 auto;
    display: grid;
    gap: 3vh;
}

.dicas__item {
    display: grid;
    gap: 1vh;
    cursor: pointer;
}

.dicas__item>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dicas__item>div>p {
    color: #0D1B4B;
    line-height: 1.25;
}

.dicas__item:hover>div>p {
    color: #229632;
}

.dicas__item>div>span {
    width: 2.5vh;
    height: 2.5vh;
    background-color: #C9E7D4;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #229632;
    font-family: 'Museo700';
}

.dicas__item>p {
    display: none;
    color: #666666;
    line-height: 1.25;
}

/*contato*/

.contato {
    padding: 8vh 0;
}

.contato>h2 {
    font-family: 'Museo700';
    font-size: 200%;
    color: #0D1B4B;
    text-align: center;
    margin-bottom: 4vh;
}

.contato>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contato>div>img {
    width: 60%;
    height: 50vh;
    border-radius: 2vh;
    object-position: center;
    object-fit: cover;
}

.contato>div>div {
    width: 40%;
    display: grid;
    gap: 3vh;
}

.contato>div>div>div {
    background-color: #F6F6F6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 1.5vh 1.5vh 0;
    width: calc(100% - 1vh);
    position: relative;
    height: 10vh;
}

.contato>div>div>div>p {
    padding: 2vh;
    color: #666666;
    text-align: center;
    line-height: 1.25;
    width: calc(100% - 1px - 6vh);
}

.contato>div>div>div>hr {
    width: 1px;
    height: 6vh;
    background-color: #666666;
}

.contato>div>div>div>svg {
    width: 4vh;
    height: 4vh;
    padding: 2vh;
    fill: #666666;
}

.contato>div>div>div>div {
    position: absolute;
    right: -1vh;
    height: calc(100% - 2vh);
    background-color: #229632;
    width: 1vh;
    border-radius: 0 1vh 1vh 0;
}

/*footer*/

footer {
    background-color: #0C3375;
    padding: 5vh 0;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8vh;
}

footer .container>img {
    height: 8vh;
    object-position: center;
    object-fit: contain;
}

footer .container>div {
    width: 100%;
    display: grid;
    gap: 2vh;
}

footer .container>div>div:nth-of-type(1) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3.5vh;
}

footer .container>div>div:nth-of-type(1)>a {
    color: white;
    text-decoration: none;
    font-size: 80%;
}

footer .container>div>div:nth-of-type(1)>a:hover {
    color: #229632;
}

footer .container>div>div:nth-of-type(2) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1vh;
}

footer .container>div>div:nth-of-type(2)>a {
    width: 4vh;
    height: 4vh;
    background-color: white;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer .container>div>div:nth-of-type(2)>a:hover {
    background-color: #229632;
}

footer .container>div>div:nth-of-type(2)>a>svg {
    height: 2vh;
    fill: #0C3375;
}

footer .container>div>div:nth-of-type(2)>a:hover>svg {
    fill: white;
}

footer .container>a {
    position: absolute;
    bottom: -3vh;
    right: 0;
}

footer .container>a>img {
    filter: brightness(0) invert(1);
    width: 12vh;
    object-fit: contain;
    object-position: center;
}

.footer__wpp {
    background-color: #25D366;
    position: fixed;
    bottom: 2vh;
    right: 2vh;
    cursor: pointer;
    width: 6vh;
    height: 6vh;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
}

.footer__wpp svg {
    fill: white;
    height: 3vh;
}

.footer__wpp:hover {
    background-color: #FFF8F6;
    cursor: pointer;
}

.footer__wpp:hover svg {
    fill: #25D366;
}