@import url(reset.css);

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2vh;
    font-weight: 400;
    cursor: default;
    background-color: white;
    color: #353334;
}

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

main>hr {
    margin: 0 auto;
    height: 2px;
    border: 0;
    background-color: #eeeeee;
    width: 90%;
    max-width: 1200px;
}

/*header*/

header>.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
}

header>.container>img {
    height: 100%;
    width: 18vh;
    object-fit: contain;
    object-position: center;
}

header>.container>nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vh;
}

header>.container>nav>a {
    display: none;
}

header>.container>nav>div {
    display: none;
}

.menu {
    height: 4vh;
    fill: #8D3638;
}

/*banner*/

.banner {
    background-color: #eeeeee;
}

.banner>.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 3vh;
}

.banner>.container>div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2vh;
    width: 100%;
    padding-top: 4vh;
}

.banner>.container>div>p {
    color: #8D3638;
    font-weight: 700;
    font-size: 120%;
}

.banner>.container>div>h1 {
    color: #343333;
    font-weight: 900;
    font-size: 220%;
}

.banner>.container>div>span {
    color: #343333;
    font-size: 120%;
}

.banner>.container>div>a {
    background-color: #8D3638;
    width: 22vh;
    height: 4vh;
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 80%;
}

.banner>.container>div>a:hover {
    background-color: white;
    color: #8D3638;
}

.banner>.container>img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: auto;
}

/*module*/

.module {
    padding: 8vh 0;
    position: relative;
}

.module>div>div>h2 {
    color: #8D3638;
    font-weight: 900;
    font-size: 150%;
    text-align: center;
    text-transform: uppercase;
}

.module>div>div>p {
    color: #343333;
    text-align: center;
    opacity: .5;
    padding: 1vh 0 1.5vh 0;
}

.module>div>div>hr {
    width: 10vh;
    height: 3px;
    border: 0;
    background-color: #8D3638;
    margin: 0 auto;
}

.module>div>div>div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 4vh;
    gap: 2vh;
}

.module>div>div>a {
    background-color: #8D3638;
    width: 22vh;
    height: 4vh;
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 80%;
    margin: 4vh auto 0 auto;
    border: 0;
}

.module>div>div>a:hover {
    background-color: #eeeeee;
    color: #8D3638;
}

/*produtos*/

#produtos>div>div>div {
    flex-wrap: wrap;
}

.produtos__item {
    width: 100%;
    text-decoration: none;
    background-color: #eeeeee;
}

.produtos__item>picture {
    aspect-ratio: 1 / 1;
    width: 100%;
    display: block;
    overflow: hidden;
}

.produtos__item>picture>img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    transition: all .25s ease-out;
}

.produtos__item:hover>picture>img {
    transform: scale(1.05);
}

.produtos__item>div {
    padding: 2vh;
    text-decoration: none;
}

.produtos__item>div>h3 {
    color: #343333;
    font-size: 80%;
    font-weight: 700;
}

.produtos__item:hover>div>h3 {
    color: #8D3638;
}

/*.blog*/

#blog>div>div>div {
    flex-wrap: wrap;
}

.blog__item {
    width: 100%;
    text-decoration: none;
    background-color: #eeeeee;
}

.blog__item>picture {
    aspect-ratio: 1 / 1;
    width: 100%;
    display: block;
    overflow: hidden;
}

.blog__item>picture>img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    transition: all .25s ease-out;
}

.blog__item:hover>picture>img {
    transform: scale(1.05);
}

.blog__item>div {
    padding: 2vh;
    text-decoration: none;
}

.blog__item>div>h3 {
    color: #343333;
    font-size: 80%;
    font-weight: 700;
}

.blog__item:hover>div>h3 {
    color: #8D3638;
}

.blog__item>div>p {
    color: #343333;
    font-size: 70%;
    opacity: .5;
    padding-top: .5vh;
    line-height: 1.2;
}

/*quem-somos*/

#quem-somos {
    padding: 33vh 0 8vh 0;
}

#quem-somos>div {
    display: flex;
    justify-content: flex-end;
}

#quem-somos>div>div {
    width: 100%;
}

#quem-somos>img {
    object-fit: cover;
    object-position: center;
    position: absolute;
    width: 100%;
    height: 25vh;
    top: 0;
}

#quem-somos>div>div>div {
    color: #343333;
    text-align: center;
    line-height: 1.5;
}

/*numeros*/

#numeros {
    background-color: #8D3638;
}

#numeros>div {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2vh;
}

#numeros>div>div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vh;
}

#numeros>div>div>svg {
    height: 3vh;
    fill: white;
    opacity: .5;
}

#numeros>div>div>h2 {
    color: white;
    font-size: 200%;
}

#numeros>div>div>p {
    color: white;
    padding: 0;
    font-size: 80%;
}

/*depoimentos*/

#depoimentos>div>div>div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.depoimentos__item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1vh;
}

.depoimentos__item h3,
.depoimentos__item2 h3 {
    font-weight: 700;
    font-size: 80%;
}

.depoimentos__item p,
.depoimentos__item2 p {
    line-height: 1.25;
    text-align: center;
}

.depoimentos__item div,
.depoimentos__item2 div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vh;
    margin-bottom: .5vh;
}

.depoimentos__item svg,
.depoimentos__item2 svg {
    height: 2vh;
    fill: #8D3638;
}

/*footer*/

footer iframe {
    width: 100%;
    height: 30vh;
}

footer .top {
    background-color: #eeeeee;
    padding: 8vh 0;
}

footer .top .container {
    display: flex;
    flex-wrap: wrap;
    gap: 3vh;
    justify-content: center;
    align-items: center;
}

footer .top .container>img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 5vh;
}

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

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

footer .top .container>div>p {
    line-height: 1.2;
    font-size: 80%;
    color: #343333;
}

footer .top .container>div>div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2vh;
}

footer .top .container>div>div>a>svg {
    height: 2.5vh;
    fill: #343333;
}

footer .top .container>div>div>a:hover>svg {
    fill: #8D3638;
}

footer .top .container>div>a {
    text-decoration: none;
    color: #343333;
    font-size: 80%;
    font-weight: 700;
}

footer .top .container>div>a:hover {
    color: #8D3638;
}

footer .bottom {
    background-color: #333333;
    padding: 2vh 0;
}

footer .bottom div {
    color: white;
    text-align: center;
    font-size: 70%;
}

.wpp {
    position: fixed;
    bottom: 6.5vh;
    right: 1vh;
    background-color: #32CD32;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vh;
    padding: 1vh 2vh;
    text-decoration: none;
    z-index: 99;
}

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

.wpp p {
    color: white;
    font-size: 80%;
    font-weight: 700;
}

.wpp:hover {
    background-color: #eeeeee;
}

.wpp:hover svg {
    fill: #32CD32;
}

.wpp:hover p {
    color: #32CD32;
}


/*mobile*/

.mobile {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #8D3638;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 0.5s ease;
}

.mobile__item {
    font-size: 2vh;
    color: white;
    margin: 1.5vh 0;
    text-transform: uppercase;
    text-decoration: none;
}

.fechar {
    position: absolute;
    top: 2vh;
    right: 2vh;
}

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

/*quemsomos*/

.quemsomos {
    background-color: #eeeeee;
    padding: 8vh 0;
}

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

.quemsomos__title h1 {
    color: #8D3638;
    font-weight: 900;
    font-size: 150%;
    text-align: center;
    text-transform: uppercase;
}

.quemsomos__title h2 {
    color: #343333;
    text-align: center;
    opacity: .5;
    padding: 1vh 0 1.5vh 0;
}

.quemsomos__title hr {
    width: 10vh;
    height: 3px;
    border: 0;
    background-color: #8D3638;
    margin: 0 auto;
}

.quemsomos__text {
    color: #343333;
    text-align: center;
    line-height: 1.5;
}

.quemsomos__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2vh;
    width: 100%;
}

.quemsomos__item {
    width: calc(50% - 1vh);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.quemsomos__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all .25s ease-out;
}

.quemsomos__item:hover img {
    transform: scale(1.05);
    cursor: pointer;
}

/*clientes*/

.clientes {
    background-color: #eeeeee;
    padding: 8vh 0;
}

.clientes .container {
    display: grid;
    gap: 4vh;
}

.clientes__title h1 {
    color: #8D3638;
    font-weight: 900;
    font-size: 150%;
    text-align: center;
    text-transform: uppercase;
}

.clientes__title h2 {
    color: #343333;
    text-align: center;
    opacity: .5;
    padding: 1vh 0 1.5vh 0;
}

.clientes__title hr {
    width: 10vh;
    height: 3px;
    border: 0;
    background-color: #8D3638;
    margin: 0 auto;
}

.clientes__text {
    color: #343333;
    text-align: center;
    line-height: 1.5;
}

.clientes__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2vh;
    width: 100%;
}

.clientes__item {
    width: calc(50% - 1vh);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background-color: white;
}

.clientes__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: all .25s ease-out;
}

.clientes__item:hover img {
    transform: scale(1.05);
    cursor: pointer;
}

/*depoimentos*/

.depoimentos {
    background-color: #eeeeee;
    padding: 8vh 0;
}

.depoimentos .container {
    display: grid;
    gap: 4vh;
}

.depoimentos__title h1 {
    color: #8D3638;
    font-weight: 900;
    font-size: 150%;
    text-align: center;
    text-transform: uppercase;
}

.depoimentos__title h2 {
    color: #343333;
    text-align: center;
    opacity: .5;
    padding: 1vh 0 1.5vh 0;
}

.depoimentos__title hr {
    width: 10vh;
    height: 3px;
    border: 0;
    background-color: #8D3638;
    margin: 0 auto;
}

.depoimentos__text {
    color: #343333;
    text-align: center;
    line-height: 1.5;
}

.depoimentos__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2vh;
    width: 100%;
}

.depoimentos__item2 {
    width: 100%;
    overflow: hidden;
    background-color: white;
    padding: 5vh;
    box-sizing: border-box;
    gap: 1vh;
    gap: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/*contato*/

.contato {
    background-color: #eeeeee;
    padding: 8vh 0;
}

.contato .container {
    display: grid;
    gap: 4vh;
}

.contato__title h1 {
    color: #8D3638;
    font-weight: 900;
    font-size: 150%;
    text-align: center;
    text-transform: uppercase;
}

.contato__title h2 {
    color: #343333;
    text-align: center;
    opacity: .5;
    padding: 1vh 0 1.5vh 0;
}

.contato__title hr {
    width: 10vh;
    height: 3px;
    border: 0;
    background-color: #8D3638;
    margin: 0 auto;
}

.contato__text {
    color: #343333;
    text-align: center;
    line-height: 1.5;
}

.contato__form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2vh;
}

.contato__form input {
    background-color: white;
    width: 100%;
    padding: 1vh 1.5vh;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-family: 'Montserrat', sans-serif;
}

.contato__form textarea {
    background-color: white;
    width: 100%;
    padding: 1vh 1.5vh;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    font-size: 100%;
    height: 20vh;
    font-family: 'Montserrat', sans-serif;
}

.contato__form button {
    background-color: #8D3638;
    height: 4vh;
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 80%;
    border: 0;
    padding: 0 2vh;
}

.contato__form button:hover {
    background-color: white;
    color: #8D3638;
}

/*blog*/

.blog {
    background-color: #eeeeee;
    padding: 8vh 0;
}

.blog .container {
    display: grid;
    gap: 4vh;
}

.blog__title h1 {
    color: #8D3638;
    font-weight: 900;
    font-size: 150%;
    text-align: center;
    text-transform: uppercase;
}

.blog__title h2 {
    color: #343333;
    text-align: center;
    opacity: .5;
    padding: 1vh 0 1.5vh 0;
}

.blog__title hr {
    width: 10vh;
    height: 3px;
    border: 0;
    background-color: #8D3638;
    margin: 0 auto;
}

.blog__text {
    color: #343333;
    text-align: center;
    line-height: 1.5;
}

.blog__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vh;
    flex-wrap: wrap;
}

.blog .blog__item {
    background-color: white;
}

.blog__image {
    width: 100%;
    height: 30vh;
    object-fit: cover;
    object-position: center;
}

/*produtos*/

.produtos {
    background-color: #eeeeee;
    padding: 8vh 0;
}

.produtos .container {
    display: grid;
    gap: 4vh;
}

.produtos__title h1 {
    color: #8D3638;
    font-weight: 900;
    font-size: 150%;
    text-align: center;
    text-transform: uppercase;
}

.produtos__title h2 {
    color: #343333;
    text-align: center;
    opacity: .5;
    padding: 1vh 0 1.5vh 0;
}

.produtos__title hr {
    width: 10vh;
    height: 3px;
    border: 0;
    background-color: #8D3638;
    margin: 0 auto;
}

.produtos__text {
    color: #343333;
    text-align: center;
    line-height: 1.5;
}

.produtos__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vh;
    flex-wrap: wrap;
}

.produtos .produtos__item {
    background-color: white;
}

.produtos__flex {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4vh;
    flex-wrap: wrap;
}

.produtos__images {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 2vh;
}

.produtos__image1 {
    width: 100%;
    height: 30vh;
    object-fit: cover;
    object-position: center;
}

.produtos__image2,
.produtos__image3,
.produtos__image4 {
    width: calc(33.333% - 1.333vh);
    height: 12vh;
    object-fit: cover;
    object-position: center;
}

.produtos__info {
    width: 100%;
    display: grid;
    gap: 3vh;
}

.produtos__info a {
    background-color: #32CD32;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vh 1.5vh;
    gap: 1vh;
    text-decoration: none;
}

.produtos__info a svg {
    height: 3vh;
    fill: white;
}

.produtos__info a p {
    font-size: 100%;
    color: white;
}

.produtos__info a:hover {
    background-color: white;
}

.produtos__info a:hover svg {
    fill: #32CD32;
}

.produtos__info a:hover p {
    color: #32CD32;
}

.produtos__menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2vh;
    flex-wrap: wrap;
}

.produtos__menu>div {
    background-color: white;
    flex-grow: 1;
    text-align: center;
    padding: 2vh;
}

.produtos__menu>div:hover {
    color: #8D3638;
    cursor: pointer;
}

.produtos__menu>div.active {
    background-color: #8D3638;
    color: white;
}

.produtos__items {
    display: none;
}

.produtos__items.active {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 3vh;
}

.produtos__image {
    width: 100%;
    aspect-ratio: 1 / 1;
}

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

/*map*/

.map {
    width: 100%;
    height: 30vh;
    overflow: hidden;
}

.map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all .25s ease-out;
}

.map:hover img {
    cursor: pointer;
    transform: scale(1.05);
}