* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ESTRUTURA DO GRID */

body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 80vh auto auto auto auto auto auto; /* Ajustei as alturas das linhas */
    grid-template-areas:
        "header header header header header"
        "main main main main main"
        "main main main main main"
        "main main main main main"
        "main main main main main"
        "main main main main main"
        "footer footer footer footer footer";
    gap: 20px;
}

/* --------------------------------CABEÇALHO ------------------------------*/

.header {
    grid-area: header;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    background-color: #7289DA;
    background-image: url('./imagens/Header\ Background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh; 
    width: 100%;
    padding: 20px;
}

.fundo-header {
    display: none; 
}

.titulo {
    width: 30%;
    font-family: 'Luckiest Guy', cursive;
    font-size: 4rem; 
    text-transform: uppercase;
    margin-bottom: 20px; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
}

.texto-header {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem; 
    max-width: 600px; 
    margin-bottom: 30px; 
    line-height: 1.6; 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 
}

.botoes {
    
    display: flex;
    gap: 15px; 
}

.botao-baixar {
    font-family: 'Open Sans', sans-serif;
    padding: 10px 20px; 
    font-size: 1rem; 
    color: black; 
    background-color: white; 
    border: none; 
    border-radius: 25px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
}

.botao-navegador {
    font-family: 'Open Sans', sans-serif;
    padding: 10px 20px;
    font-size: 1rem; 
    color: white; 
    background-color: rgb(49, 49, 49); 
    border: none; 
    border-radius: 25px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
}


.botao-baixar:hover, .botao-navegador:hover {
    background-color: #5a6fbb; 
    color: white;
}


/* ------------------------------MAIN-------------------------------- */

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    grid-area: main;
    padding: 20px;
    font-family: 'Open Sans', sans-serif;
    color: rgb(49, 49, 49);
    width: 100%; 
    height: 100%;
}
main h2 {
    font-weight: 800;
    font-size: 2.5rem;
    text-shadow: 10px 10px rgb(49, 49, 49));
}

.bloco1 {
    grid-area: main;
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 5%;
    align-items: center;
    justify-content: center;

}

.img-bloco1 {
    width: 50%;
}
.texto-bloco1 {
    flex-basis: 30%;
    align-items: center;
    justify-content: center;
    width: 50%;
}



.bloco2 {
    grid-area: main;
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 5%;
    align-items: center;
    justify-content: center;

}

.img-bloco2 {
    width: 50%;
}
.texto-bloco2 {
    flex-basis: 30%;
    align-items: center;
    justify-content: center;
    width: 50%;
}



.bloco3 {
    grid-area: main;
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 5%;
    align-items: center;
    justify-content: center;

}

.img-bloco3 {
    width: 50%;
}
.texto-bloco3 {
    flex-basis: 30%;
    align-items: center;
    justify-content: center;
    width: 50%;
}



.bloco4 {
    grid-area: main;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    gap: 10%;

}
.bloco4 h2 {
    font-family: 'Luckiest Guy', cursive;
    text-transform: uppercase;
    width: 50%;
    text-align: center;
    margin: 0 auto;

}
.texto-bloco4 {
    margin-top: 5%;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 70%;
}



.bloco5 {
    grid-area: main;
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 5%;
    align-items: center;
    justify-content: center;

}

.img-bloco5 {

}




/* ------------------------------RODAPE-------------------------------- */



footer {
    grid-area: footer;
    background-color: rgb(49, 49, 49);
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.imagem-rodape {
    margin-top: 2%;
    margin-bottom: 2%;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;

}