@charset "utf-8";
/* ====================== FIM CONFIGURAÇÃO UNICODE ===================== */
/* ========================= FONTES IMPORTADAS ========================= */
@import url(https://fonts.googleapis.com/css?family=Nunito:200,300,regular,500,600,700,800,900,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
/* ======================= FIM FONTES IMPORTADAS ======================= */
/* ======================= CONFIGURAÇÕES GLOBAIS ======================= */
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    line-height: 1.5em;
}
/* ===================== FIM CONFIGURAÇÕES GLOBAIS ===================== */
/* =============================== BODY ================================ */
body {
    width: 100vw!important;
    overflow-x: hidden;
}
/* ============================= FIM BODY ============================== */
/* =============================== ROOT ================================ */
:root {
    /* Variáveis da cor azul */
    --azure: #E8F1F3;
    --azul: #0346F2;
    --carolina_blue: #1C9CD7;
    --celadon_blue: #247BA0;
    --sapphire_blue: #014990;
    --prussian_blue: #002F5B;
    --índigo_blue: #001030;
    --space: #010b1c;
    /* Variável da cor vermelha */
    --vermelho: #DA251C;
    --tomate: #FF814D;
    /* Variáveis da cor verde */
    --verde-azulado: #009a9f;
    --verde: #30EA66;
    --laranja: #F28116;
    --amarelo: #FCBF02;
    --cinza-clarinho: #F8F8F8;
    --azul-claro: #6E93f7;
    --azul-claro2: #4070F4;
    --winter: #A1E1F6;
    /* Variável da cor cinza */
    --cinza: #424242;
    --cinza-claro: #F2F2F2;
    --cinza-medio: #A9A9A9;
    --cinza-dark: #333333;
    --cinza-escuro: #171717;
    /* Variável da cor roxa */
    --roxo: #431096;
    --roxo2: #26003E;
    /* Variável da cor rosa */
    --rosa: #EE2C68;
    /* Variável da cor marrom */
    --marrom: #C97F66;
    /* Variáveis das fontes */
    --Nunito: 'Nunito', sans-serif;
}
/* ============================= FIM ROOT ============================== */
/* ============================= SOBRE NÓS ============================= */
.sobre-nos {
    width: 100%;
    margin: 0 auto;
    height: 50vh;
}
.banner-sobre {
    display: flex;
    height: 50vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background-image: url('../img/Banner\ inicial\ -\ sobre\ nos.png');
    background-position: -8vw -20vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* cria o efeito parallax */
}
@media(max-width:720px) {
    .banner-sobre {
        background-position: -80vw -20vh;
    }
}
.banner-sobre::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    background: rgba(0, 0, 0, 0.258);
}
.texto-sobre {
    z-index: 2;
    position: absolute;
    top: 50%;
}
.texto-sobre h1 {
    font: 700 40px var(--Nunito);
    color: white;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.144);
    text-align: center;
}
/* =========================== FIM SOBRE NÓS =========================== */
/* ============================ QUEM SOMOS ============================= */
section.quem-somos {
    width: 90vw;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    padding: 30px;
    box-sizing: border-box;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}
@media(max-width:820px) {
    section.quem-somos .container-texto {
        max-width: 100% !important;
    }
    section.quem-somos .container-texto .btn-contato {
        justify-content: center !important;
    }
}
section.quem-somos .img-sobre {
    width: 370px;
    height: 400px;
    position: relative;
}
section.quem-somos .img-sobre img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}
section.quem-somos .img-sobre img.float {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 150px;
    height: 150px;
}
section.quem-somos .container-texto {
    max-width: 40%;
    line-height: 1.7rem
}
section.quem-somos .container-texto .migalha {
    background-color: var(--roxo);
    color: white;
    font: 700 13px var(--Nunito);
    padding: 3px 7px;
    border-radius: 5px;
    margin-bottom: 15px;
}
section.quem-somos .container-texto h1 {
    font: 700 26px var(--Nunito);
    color: var(--roxo);
    margin: 20px 0;
}
section.quem-somos .container-texto p {
    font: 400 16px var(--Nunito);
    color: var(--cinza);
    margin-bottom: 15px;
}
section.quem-somos .container-texto .btn-contato {
    margin-left: 10px;
    padding: 20px;
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.039);
    /* width: 500px; */
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
section.quem-somos .container-texto .btn-contato span {
    font: 700 16px var(--Nunito);
    color: var(--verde-azulado);
}
section.quem-somos .container-texto .btn-contato button {
    padding: 6px 15px;
    border: 1px solid transparent;
    background-color: var(--roxo);
    color: white;
    font: 500 16px var(--Nunito);
    border-radius: 5px;
    transition: .4s;
    cursor: pointer;
}
section.quem-somos .container-texto .btn-contato button:hover {
    background-color: transparent;
    color: var(--roxo);
    border: 1px solid var(--roxo);
}
/* ========================= CONTAINER PARALLAX ========================= */
.container-parallax {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
section.module h1 {
    width: 500px;
    font: 700 23px var(--Nunito);
    color: var(--space);
    z-index: 2;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 15px;
}
section.module p {
    font: 400 16px var(--Nunito);
    color: var(--space);
}
section.module .missao,
section.module .visao {
    box-sizing: border-box;
    width: 35%;
    margin: 20px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.893);
    line-height: 1.7rem;
    border-radius: 15px;
}
@media (max-width:920px) {
    section.module .missao,
    section.module .visao {
        width: 90%;
    }
}
section.module.parallax {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 40px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background-image: url(../img/Parallax\ -\ sobre\ nós.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* cria o efeito parallax */
    background-size: cover;
    -webkit-background-size: cover;
    /* para ser funcional em outros navegadores */
    -moz-background-size: cover;
    -a-background-size: cover;
}
/* ======================= FIM CONTAINER PARALLAX ======================= */
.container-valores {
    width: 100%;
}
.container-valores .titulo-valores h1 {
    font: 700 28px var(--Nunito);
    color: var(--roxo);
    text-align: center;
    margin-bottom: 15px;
}
.valores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    margin-top: 20px;
}
.valores .item-valor {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    border-right: 1px solid var(--cinza-claro);
}
.valores .item-valor img {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
}
.valores .item-valor span {
    font: 700 17px var(--Nunito);
    color: var(--space);
}
@media (max-width:720px) {
    .valores .item-valor {
        border-right: none;
        border-bottom: 1px solid var(--cinza-claro);
        padding: 20px;
    }
}
/* ========================== FIM QUEM SOMOS ============================ */
/* =========================== SCROLL REVEAL ============================ */
.img-sobre, 
.container-texto,
.missao,
.visao,
.titulo-valores,
.item-valor{
    visibility: hidden;
}
/* ======================== FIM SCROLL REVEAL ======================== */