/* Importando Configurações*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

/* Definindo Root*/

:root {
    --cor1: hsl(322, 100%, 66%); /* Pink */
    --cor2: hsl(321, 100%, 78%);  /* Light Pink */
    --cor3: hsl(0, 100%, 63%); /* Light Red */
    --cor4: hsl(192, 100%, 9%); /* Very Dark Cyan */
    --cor5: hsl(207, 100%, 98%); /* Very Pale Blue */

    --fonte-titulos: 'Poppins', sans-serif;
    --fonte-padrao: 'Open Sans', sans-serif; 
}

/*Geral*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--fonte-padrao);
    box-sizing: border-box;
}

#clear {
    clear: both;
}

body {
    background: var(--cor5);
}

h1,h2 {
    font-family: var(--fonte-titulos);
    text-align: center;
    color: var(--cor4);
}

/*Botões*/

.botao-cor {
    padding: 10px 30px;
    margin: 10px 20px;
    color: white;
    font-weight: bold;
    background: var(--cor1);
    border-radius: 20px;
    box-shadow: 0 0 5px var(--cor2);
    border: 1px solid var(--cor2);
    max-width: 400px;
    justify-self: center;
}

.botao-cor:hover {
    background: var(--cor2);
}

#botao-transparente {
    display: grid;
    justify-content: end;
}

#botao-transparente button {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    color: var(--cor1);
    background: white;
    border: 1px solid var(--cor2);
    box-shadow: 0px 0px 5px var(--cor2);
}

#botao-transparente button:hover {
    background: var(--cor2);
    color: white;
}

/*Header*/

header {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
    grid-template-rows: 1fr;
    column-gap: 50px;
    justify-content: space-between;
    align-content: center;
    margin: 20px 15px;
}

header #logo {
    display: grid;
    justify-content: start;
    align-self: center;
}

header #logo img {
    width: 100%;
}

/*Conteúdo - Main*/

main {
    display: grid;
    grid-template-columns: 0.94fr;
    grid-template-rows: repeat(4, (minmax(200px, 1fr)));
    justify-content: center;
    align-content: space-between;
    row-gap: 100px;
}

main p {
    color: var(--cor4);
    font-size: 1em;
    max-width: 600px;
}

/*Conteúdo - 1° Seção*/

main #intro {
    display: grid;
    grid-template-columns: 0.9fr;
    justify-content: center;
    align-content: center;
    row-gap: 30px;
}

main #intro div {
    display: grid;
    grid-template-columns: minmax(200px, 1fr);
    justify-content: center;
    text-align: center;
    row-gap: 30px;
    margin-bottom: 50px;
}

main #intro h1 {
    font-size: 2.8em;
    padding-top: 50px;
}

main #intro div p {
    justify-self: center;
}

main img {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: block;
}

/*Conteúdo - 2° Seção*/

main #dados-relevantes {
    display: grid;
    grid-template-columns: 0.5fr;
    grid-template-rows: minmax(200px, 1fr);
    justify-content: center;
    align-items: center;
    row-gap: 30px;
}

#dados-relevantes img {
    width: 20%;
    margin: 0;
}

#dados-relevantes h2 {
    font-size: 5em;
}

#dados-relevantes #titulo-maior {
    font-size: 5.9em;
}

#dados-relevantes p {
    color: gray;
    font-size: 1.1em;
}

/*Conteúdo - 3° Seção*/ 

.texto-com-imagem {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    row-gap: 100px;
}

.texto-com-imagem section {
    display: grid;
    grid-template-columns: 0.9fr;
    grid-template-rows: repeat(2, (minmax(200px, 1fr)));
    justify-content: center;
    align-content: center;
    row-gap: 30px;
}

.texto-com-imagem section article {
    display: grid;
    grid-template-columns: minmax(300px, 500px);
    grid-template-rows: repeat(2, (minmax(200px, 1fr)));
    justify-content: center;
    row-gap: 30px;
    text-align: center;
}

.texto-com-imagem h2 {
    font-size: 2em;
}

/*Conteúdo - 4° Seção*/ 

.chamada-acao {
    display: grid;
    grid-template-columns: 0.8fr;
    grid-template-rows: 1fr;
    justify-content: center;
    text-align: center;
    row-gap: 40px;
    margin-bottom: 100px;
}

.chamada-acao h2 {
    font-size: 2.5em;
    margin: 15px;
}

/*Rodapé*/

footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 110px 1fr;
    justify-content: center;
}

footer h3,p,li,a {
    color: white;
    text-decoration: none;
    list-style: none;
}

footer #bg-footer {
    background: url(../images/bg-footer-top-mobile.svg) bottom center no-repeat;
    background-size: contain;
}

#rodape {
    background: var(--cor4);
    display: grid;
    grid-template-columns: 0.8fr;
    grid-template-rows: repeat(2, (minmax(200px, 1fr)));
    justify-content: center;
    row-gap: 30px;
    font-size: 0.9em;
    padding-bottom: 50px;
    padding-top: 50px;
}

#newsletter {
    display: grid;
    grid-template-rows: 40px 1fr 1fr;
    align-items: center;
    row-gap: 10px;
}

#newsletter form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 40px 40px;
    row-gap: 10px;
    justify-items: end;
}

#newsletter input#iemail {
    width: 100%;
    line-height: 40px;
    border-radius: 5px;
    border: none;
    text-indent: 10px;
}

#newsletter input#botao-enviar {
    width: 40%;
    line-height: 40px;
    background: var(--cor1);
    color: white;
    border-radius: 10px;
    font-weight: bold;
    border: none;
}

#newsletter input#botao-enviar:hover {
    background-color: var(--cor2);
}

#contato {
    display: grid;
    grid-template-rows: repeat(4, (minmax(200px, 1fr)));
    row-gap: 10px;
}

#contato li {
    font-size: 0.9em;
    line-height: 30px;
    margin: 5px 0;
}

#contato img {
    vertical-align: middle;
    margin-right: 10px;
}

#contato #redes-sociais {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    column-gap: 20px;
    justify-content: flex-start;
}

#contato #redes-sociais img {
    width: 100%;
    border: 1px solid white;
    padding: 10px;
    border-radius: 5px;
}