// Não se esqueça de recompilar os estilos para poder ver as alterações feitas aqui!
//
// Você pode fazer isso pelo terminal de duas maneiras:
//
// npm run dev
// *Irá recompilar uma única vez todos os estilos e scripts do projeto*
//
// npm run watch-poll
// *Irá recompilar todos os estilos e scripts do projeto a primeira vez, e depois continuará rodando de fundo, e cada vez que você alterar um arquivo CSS ou JS e salvar,
//  ele irá compilar apenas o que você alterou!*

// @font-face {
//     font-family: helveticaneue;
//     src: url('HelveticaNeueLTStd-UltLt.otf');
// }
@import "cores";

.cor-roxa {
    padding: 60px 0px;
    background-color: #e1dde9;
    margin-bottom: 9rem;

    h1 {
        font-family: montserrat;
        font-style: normal;
        font-weight: 600;
        font-size: 46px;
        line-height: 49px;
        color: $roxo;
    }
    h2 {
        font-family: montserrat;
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 24px;
        color: #696969;
    }
}
// .blog-slider {
//     padding: 100px 0;
// }
// #blog-meio .swiper-button-next:after {
//     content: "▶";
//     color: rgb(73, 73, 73);
// }
// #blog-meio .swiper-button-prev:after,
// .swiper-container-rtl .swiper-button-next:after {
//     content: "◀";
//     color: rgb(73, 73, 73);
// }
#blog-meio {
    margin-top: -140px;
    font-family: montserrat;
}
#blog-meio .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #e9e9e9;
    background-clip: border-box;
    border: none;
    border-radius: 10px;
    transition: all 0.9s;
    // box-shadow: 0px 8px 28px 0px rgba(176, 176, 176, 1);
}
#blog-meio .imagem-post {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 200px;
    border-radius: 10px 10px 0px 0px;
}
#blog-meio .icone {
    color: #737373;
    font-size: 25px;
    position: relative;
    top: 6px;
}

#blog-meio .card:hover {
    box-shadow: 0px 8px 28px 0px rgba(176, 176, 176, 1);
    transition: all 0.9s;
    // transition-duration: 0.3s;
    // transform: scale(1.1);
}
#blog-meio .btn-blog-mais {
    font-family: montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    color: #737373 !important;
}
#blog-meio .icone-bt {
    font-size: 11px;
    color: $roxo;
}
#blog-meio .btn-blog-mais:hover {
    border-bottom: 3px solid $roxo;
    color: #737373;

    .icone-bt {
        color: $roxo;
    }
}

#blog-meio .b-texto {
    position: relative;
    left: -30px;
}

#blog-meio h4 {
    font-family: montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 26px;
    line-height: 25px;
    border-left: 5px solid $roxo;
}

#blog-meio .card h5 {
    font-family: montserrat;
    font-style: normal;
    font-weight: 600;
    font-size: 23px;
    line-height: 21px;
    color: $roxo;
}

#noticias1 .noticias-lateral {
    margin-left: 150px;
}
#noticias1 {
    margin-top: -60px;
}

#banner {
    background: url(/img/back-final.png) center no-repeat;
    background-size: cover;
    padding: 70px 0;

    .box {
        background-color: $roxo;
        border-radius: 20px;
        padding: 50px 0px;
    }
    h2 {
        font-family: montserrat;
        font-style: normal;
        font-weight: 600;
        font-size: 38px;
        line-height: 39px;
        color: $branco;
    }
    p {
        font-family: montserrat;
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 24px;
        color: #d6c5dc;
    }
    span {
        font-family: montserrat;
        text-decoration: none;
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        color: $branco;
    }
    a {
        font-family: montserrat;
        text-decoration: none;
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 24px;
        color: $branco;
        transition: all 0.9s;
    }
    a:hover {
        transition: all 0.9s;
        color: $roxo-claro;

        .arrow {
            color: $roxo-claro;
            transition: all 0.9s;
        }
    }

    .icon {
        color: $branco;
        font-size: 30px;
        position: relative;
        top: 8px;
        transition: all 0.9s;
    }
    .arrow {
        color: $branco;
        font-size: 23px;
        position: relative;
        top: 6px;
        transition: all 0.9s;
    }
}

#contato {
    background-color: $roxo;

    h2 {
        font-family: montserrat;
        font-style: normal;
        font-weight: 600;
        font-size: 38px;
        line-height: 39px;
        color: $branco;
    }
    p {
        font-family: montserrat;
        font-style: normal;
        font-weight: 400;
        font-size: 17px;
        line-height: 24px;
        color: #d6c5dc;
    }
    .row1 {
        padding: 5rem 0rem;
    }
    .info-icon {
        font-size: 30px;
        color: $branco;
        position: relative;
        top: 5px;
    }
    span {
        font-family: montserrat;
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        color: $branco;
    }
    a {
        text-decoration: none;
    }
}

@media (max-width: 1399px) {
    #final2 {
        padding: 110px 0px;
    }
}
@media (max-width: 991px) {
    .cor-azul {
        padding: 138px 0px;
        background: url(/img/blog/img-top.png) center no-repeat;
        background-size: contain;
    }
    #noticias1 .noticias-lateral {
        margin-left: 0px;
        margin-bottom: 50px;
        margin-top: 50px;
    }
    #final2 {
        margin-top: 70px;
        padding: 20px 0px;
        h2 {
            color: $branco;
        }
        p {
            color: $branco;
        }
    }
    #final2 .container {
        background-color: #277bc075;
        border-radius: 20px;
        padding: 50px 0px;
    }
}

@media (max-width: 767px) {
    .cor-azul {
        padding: 120px 0px;
        background: url(/img/blog/img-top.png) center no-repeat;
        background-size: cover;
    }
    #final2 {
        margin-top: 70px;
        padding: 0px 0px;
    }
    #noticias1 {
        margin-top: 50px;
    }
    .noticias-lateral {
        margin-top: 50px;
    }
}