article {
    width: 100%;
    height: 95%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

article h1 {
    width: 85%;
    color: rgb(0, 0, 0);
    font-size: 32px;
    display: flex;
    justify-content: center;
}

/*Estilização padrão dos Cards*/
section {
    width: 20%;
    height: 70%;
    transition: .3s;
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 15px;
    border:solid 0.2px rgb(184, 184, 184);
    border-radius: 1em;
    box-shadow: 5px 5px 20px rgb(200, 200, 200);
}

/*"btn" voltar - Aparece só no modo Card Completo*/
.voltar {
    text-decoration: underline;
    color: darkblue;
    cursor: pointer;
    width: -moz-fit-content;
    width: fit-content;
    display: none;
}

/*Título do card*/
.title {
    height: 20%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: red;
}

/*"Container" dos conteudos*/
.conteudo {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}

/*Todos os conteudos*/
.conteudo span {
    align-self: center;
    width: 90%;
}

/*conteudo escondido*/
.cOculto {
    display: none;
}

/*Formulário*/
.formContato {
    display: none;
}

.formContato.aberto {
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*estilização btn p/abrir Card Completo*/
.btn-container {
    height: 30%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-container button {
    width: 12em;
    height: 3em;
    border: solid .5px red;
    border-radius: .5em;
    background-color: rgb(255, 255, 255);
    color: rgb(255, 0, 0);
    cursor: pointer;
    transition: .3s;
}
.btn-container button:hover{
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
}

/*Animação CSS dos efeitos hover*/
article:has(section:hover) section:hover {
    width: 40%;
}

article:has(section:not(:hover)) section.aberto {
    width: 90%;
    height: 80%;
}




/*Card na tela completa, os outros fecham*/
.cardContato.aberto,
.cardObjetivos.aberto,
.cardPerguntas.aberto {
    width: 90%;
}

.cardContato.fechado,
.cardObjetivos.fechado,
.cardPerguntas.fechado {
    display: none;
}

/*Detalhes dos Objetivos*/
.detalhesObjetivos {
    display: flex;
    display: none;
    height: 70%;
    margin-left: 37%;
    color: red;
    font-size: 20px
}

.perguntas {
    display: flex;
    display: none;
    height: 70%;
    margin-left: 30%;
    margin-right: 30%;
    color: red;
    font-size: 20px
}