@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;
    --medium_red: #A20202;
    --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 ============================== */
/* =============================== BLOG ================================ */
.blog {
    width: 100%;
    margin: 0 auto;
    height: 50vh;
}
.banner-parallax{
    display: flex;
    height: 50vh ;
    width: 100%;
    position: relative;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background-image: url('../img/Banner\ -\ Blog2.png');
    background-position: -8vw -40vh ;
    background-repeat: no-repeat;
    background-attachment: fixed; /* cria o efeito parallax */
}
.banner-parallax::before {
    content:"";
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    background: rgba(0, 0, 0, 0.258);
}
.texto-blog{
    z-index: 2;
    position: absolute;
    top: 50%;
}
.texto-blog h1{
    font: 700 40px var(--Nunito);
    color: white; 
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.144);
    text-align: center;
}
/* ============================= FIM BLOG ============================= */
main{
    position: relative;
    margin: 50px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    column-gap: 20px;
    width: 100%;
}
@media only screen and (min-width: 1300px) {
    .main {
        max-width: 1240px;
    }
}
@media only screen and (min-width: 1300px) {
    .main {
        max-width: 1240px;
        width: 100%;
    }
}
@media (min-width: 1200px) {
    .main {
        max-width: 1140px;
    }
}
@media (min-width: 992px) {
    .main {
        max-width: 960px;
    }
    .blog-item{
        max-width: 50%;
    }
}
@media (min-width: 768px) {
    .main {
        max-width: 720px;
    }
}
@media (min-width: 576px) {
    .main {
        max-width: 540px;
    }
}
/* ============================= BLOG ITEM ============================= */
.blog-item{
    padding: 0 15px;
}
.blog-item .container{
    margin-bottom: 48px;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    padding: 15px;
    transition: 0.3s;
}
.blog-item .imagem-blog{
    width: 100%;height: 425px;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 18px;
    position: relative;
}
.blog-item .imagem-blog img{
    width: 100%; height: 100%;
    object-fit: cover;
}
.blog-item .imagem-blog span{
    display: block;
    position: absolute; bottom: 25px;
    right: 25px;
    background-color: var(--vermelho);
    padding: 8px 20px;
    font: 600 14px var(--Nunito);
    color: white;
    border-radius: 4px;
}
.blog-item .texto-item{
    padding: 10px 15px 20px;
}
@media (max-width:720px){
    .blog-item .texto-item h1{
        font:700 18px var(--Nunito)!important;
    }
    .blog-item .imagem-blog{
        width: 100%;height: 175px;
    }
}
.blog-item .texto-item h1{
    font: 700 26px var(--Nunito);    
    margin: 4px 0 10px;    
    line-height: 35px;
}
.blog-item .texto-item a{
    color: var(--space);
    transition: all 0.4s ease-in-out 0s;
    text-decoration: none;
}
.blog-item .texto-item a:hover{
    color: var(--vermelho);
}
.blog-item .data-item, .icone-data{
    color: var(--space);
    margin-bottom: 22px;
    font: 400 13px var(--Nunito) ;
}
.blog-item .data-item > span:not(:last-child){
    margin-right: 12px;
}
.icone-data i{
    margin-right: 3px;
    color: var(--vermelho);
}
.blog-item p{
    font: 400 16px var(--Nunito);
    line-height: 1.7rem;
    color: var(--cinza);
}
.blog-item .blog-button{
    display: inline-block;
    margin-top: 20px;
    font: 700 15px var(--Nunito);
    transition: .5s;
}
.blog-item .blog-button i{
    transition: .5s;
    margin-left: 5px;
}
.blog-item .blog-button span:hover{
    color: var(--vermelho);
}
.blog-item .blog-button:hover i{
    padding-left: 10px;
}
/* =========================== FIM BLOG ITEM =========================== */
/* =============================== POSTS =============================== */
section.posts{
    padding: 40px 30px 40px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    height: fit-content;
    position: sticky;
    top: 100px;
    max-width: 360px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin: 0 0 48px 15px;
}
section.posts .container-posts{
    display: flex;
    align-items: start;
    justify-content: center;
}
section.posts h2{
    display: inline-block;
    font: 600 20px var(--Nunito);
    color: var(--space);
}
section.posts .hr{
    display: block;
    width: 100px;
    height: 2px;
    background-color: var(--vermelho);
    margin: 8px 0 40px;
}
section.posts .texto-post p{
    font: 500 15px var(--Nunito); transition: .4s;
    color: var(--space); margin-bottom: 5px;
}
section.posts .texto-post p:hover{
    color: var(--vermelho);
}
section.posts .img-post{
    width: 150px;
    height: 45px;
    border-radius: 5px; overflow: hidden;
    padding-right: 15px;
}
section.posts .img-post img{
    max-width: 100%;
    height: auto;
    overflow-clip-margin: content-box;
    overflow: clip;
}
/* ============================= FIM POSTS ============================= */
/* ============================ SCROLL REVEAL ========================== */
.container,
.itens-posts{
    visibility: hidden;
}
/* ========================== FIM SCROLL REVEAL ======================== */