/* Estilo automático para a página: home */
#banner{
    background-color: #3E613E;
    margin-top: -170px;
    /* min-height: 780px; */

    .img-banner {
        width: 100%;
        object-fit: cover;
        min-height: 100%;
    }

    .text-banner {
        padding: 75px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: solid 1px #FFFFFF80;
        position: relative;

        &::after {
            background-color: #3e613e;
            background-size: auto;
            display: inline-block;
            width: 16px;
            height: 162px;
            content: "";
            top: 7px;
            right: -9px;
            position: absolute;
            z-index: 0;
        }

        h1{
            font-weight: 300;
            font-size: 48px;
            line-height: 66px;
            letter-spacing: 0.9px;
            color: #fff;
            padding: 0 75px;
            margin-top: 100px;
            
            span{
                font-weight: 600;
            }
        }
        
        p{
            color: #fff;
            font-weight: 400;
            font-size: 18px;
            line-height: 160%;
            letter-spacing: 0.9px;
            padding: 0 75px;
        }

        .barra-branca {
            width: 100%;
            height: 1px;
            background-color: #9fb09f;
        }

        .space-banner{
            padding: 0 75px;

            .btn-padrao {
                border: 1px solid #FFFFFF;
                padding: 0 0px 0 22px;
                font-weight: 400;
                font-size: 16px;
                line-height: 100%;
                letter-spacing: 1px;
                text-align: center;
                color: #fff;
                position: relative;
                display: inline-flex;
                align-items: center;
                transition: 300ms all ease-in-out;
                
                .moldura-seta {
                    padding: 22px;
                    transition: 300ms all ease-in-out;
                    border-left: solid 1px #fff;
                    margin-left: 22px;
                }
            }
        }

        .btn-padrao:hover{
            background-color: #009651;
        }
        
        .btn-padrao:hover .moldura-seta{
            background-color: #DD6D34;
        }
        
    }
}

#sobre-home{
    padding: 110px 0;

    h2{
        font-weight: 300;
        font-size: 32px;
        line-height: 31px;
        letter-spacing: 1px;
        margin-bottom: 62px;
        text-transform: uppercase;

        span{
            font-weight: 600;
        }
    }

    p{
        font-weight: 300;
        font-size: 18px;
        line-height: 160%;
        margin-bottom: 50px;
    }

    .img-sobre-home {
        width: 100%;
        height: 590px;
        object-fit: cover;
    }

    .btn-padrao {
        border: 1px solid #2C2C2C;
        padding: 0 0px 0 22px;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 1px;
        text-align: center;
        color: #2C2C2C;
        position: relative;
        display: inline-flex;
        align-items: center;
        transition: 300ms all ease-in-out;
        
        .moldura-seta {
            padding: 22px;
            transition: 300ms all ease-in-out;
            border-left: solid 1px #2C2C2C;
            margin-left: 22px;
            background-color: #fff;
        }
    }
    .btn-padrao:hover{
        background-color: #009651;
        color: #fff;
        border: 1px solid #fff;
    }
    .btn-padrao:hover .moldura-seta{
        border-left: solid 1px #fff;
        background-color: #DD6D34;
    }
    .btn-padrao:hover .moldura-seta img{
        transition: 300ms all ease-in-out;
        filter: invert(100%) sepia(0%) saturate(7486%) hue-rotate(296deg) brightness(109%) contrast(99%);
    }
}

#numeros {
    background-color: #DD6D34;
    overflow: hidden;

    h2{
        font-weight: 300;
        font-size: 32px;
        line-height: 30px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        color: #fff;
        margin-top: 70px;

        span{
            font-weight: 600;
        }
    }

    h3{
        font-weight: 600;
        font-size: 38px;
        line-height: 160%;
        letter-spacing: 1.7px;
        color: #fff;
        margin-top: 70px;
        margin-left: 70px;
    }

    .barra-1 {
        width: 101%;
        height: 1px;
        background-color: #fff;
        position: relative;

        &::after {
            background-color: #ffffff;
            background-size: auto;
            display: inline-block;
            width: 50%;
            height: 1px;
            content: "";
            top: 0px;
            left: -40%;
            position: absolute;
            z-index: 0;
        }
    }
    
    .barra-2 {
        width: 100%;
        height: 1px;
        background-color: #fff;
        position: relative;
        left: -12px;

        &::after {
            background-color: #ffffff;
            background-size: auto;
            display: inline-block;
            width: 100%;
            height: 1px;
            content: "";
            top: 0px;
            right: -100%;
            position: absolute;
            z-index: 0;
        }
    }

    .barra-numeros{
        border-right: solid 1px #fff;
    }

    .card-numero{
        margin-top: 70px;
        margin-bottom: 60px;

        .valor-num {
            font-weight: 400;
            font-size: 65px;
            line-height: 30px;
            color: #fff;
    
            span{
                margin-right: 45px;
            }
        }
    
        .text-num {
            font-weight: 400;
            font-size: 18px;
            line-height: 30px;
            margin-top: 40px;
            color: #fff;
        }
    }

}

#projeto-home {
    padding: 110px 0;

    h2{
        font-weight: 300;
        font-size: 30px;
        line-height: 31px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #2C2C2C;
        margin-bottom: 44px;

        span{
            font-weight: 600;
        }
    }

    .text-proj-home{
        font-weight: 300;
        font-size: 18px;
        line-height: 160%;
        color: #2C2C2C;

    }
    .card-projetos-h {
        background-color: #2C2C2C;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 480px;
        color: #fff;
        padding: 40px;
        text-align: center;
        transition: 300ms all ease-in-out;
        position: relative;
        overflow: hidden; 

        .icon-proj {
            margin-top: 80px;
            transition: 300ms all ease-in-out; 
        }

        .title-proj {
            font-weight: 600;
            font-size: 22px;
            margin-top: 70px;
            transition: 300ms all ease-in-out; 
        }

        .text-proj {
            opacity: 0;
            margin: 0; 
            max-height: 0; 
            transition: 300ms all ease-in-out; 
        }
    }

    .card-projetos-h:hover .icon-proj {
        margin-top: 0px;
    }

    .card-projetos-h:hover .title-proj {
        margin-top: 30px; 
    }

    .card-projetos-h:hover .text-proj {
        opacity: 1;
        max-height: 200px; 
        margin: 20px 0 0 0; 
    }

    .efc-cor-1:hover{
        background-color: #DD6D34;
    }
    .efc-cor-2:hover{
        background-color: #009651;
    }
    .efc-cor-3:hover{
        background-color: #3E613E;
    }
}

#produtos {
    padding: 0px 0 100px 0;

    h2{
        font-weight: 600;
        font-size: 32px;
        line-height: 30px;
        text-align: center;
        margin-bottom: 26px;
        color: #2C2C2C;
    }
    .text-prod{
        font-weight: 300;
        font-size: 18px;
        line-height: 160%;
        text-align: center;
        margin-bottom: 80px;
        color: #2C2C2C;
    }

    .card-produtos{
        position: relative;
        margin: 25px;

        &::after {
            background-color: #2C2C2C;
            background-size: auto;
            display: inline-block;
            width: 56px;
            height: 56px;
            content: "";
            top: -25px;
            right: -25px;
            position: absolute;
            z-index: -1;
        }
        &::before {
            background-color: #2C2C2C;
            background-size: auto;
            display: inline-block;
            width: 56px;
            height: 56px;
            content: "";
            bottom: -25px;
            left: -25px;
            position: absolute;
            z-index: -1;
        }

        .moldura{
            overflow: hidden;

            .img-prod {
                width: 100%;
                object-fit: cover;
                height: 315px;
                transition: transform 0.5s ease-in-out; 
            }
        }

        .inf-card-prod {
            padding: 32px;
            background-color: #F4F3F3;

            h4{
                font-weight: 600;
                font-size: 24px;
                line-height: 31px;
                letter-spacing: 5%;
                color: #2C2C2C;

            }

            .end-prod {
                font-weight: 500;
                font-size: 18px;
                line-height: 31px;
                letter-spacing: 0.9px;
            }

            .dife-link {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;

                .list-dif-prod{
                    margin: 0;
                    padding: 0;

                    li{
                        list-style-type: none;
                        margin-bottom: 10px;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 31px;
                        letter-spacing: 0.8px;

                        .Icon-prod {
                            margin-right: 10px;
                        }
                    }
                } 

                .btn-conheça-prod {
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 31px;
                    letter-spacing: 0.8px;
                    background-color: #fff;
                    padding: 16px 32px;
                    border: 1px solid #2C2C2C;
                    transition: 300ms all ease-in-out;
                }
            }
        }
    }

    .link-produtos{
        color: #000;
    }

    .card-produtos:hover .img-prod {
        transform: scale(1.1); 
    }
    .card-produtos:hover .btn-conheça-prod {
        color: #fff;
        background-color: #DD6D34 !important;
    }



    .btn-padrao {
        border: 1px solid #2C2C2C;
        padding: 0 0px 0 22px;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 1px;
        text-align: center;
        color: #2C2C2C;
        position: relative;
        display: inline-flex;
        align-items: center;
        transition: 300ms all ease-in-out;
        
        .moldura-seta {
            padding: 22px;
            transition: 300ms all ease-in-out;
            border-left: solid 1px #2C2C2C;
            margin-left: 22px;
            background-color: #fff;
        }
    }
    .btn-padrao:hover{
        background-color: #009651;
        color: #fff;
        border: 1px solid #fff;
    }
    .btn-padrao:hover .moldura-seta{
        border-left: solid 1px #fff;
        background-color: #DD6D34;
    }
    .btn-padrao:hover .moldura-seta img{
        transition: 300ms all ease-in-out;
        filter: invert(100%) sepia(0%) saturate(7486%) hue-rotate(296deg) brightness(109%) contrast(99%);
    }
}

#historias {
    background-color: #466041;
    overflow: hidden;

    .barra-historias {
        padding: 70px 0 0;

        h2{
            font-weight: 300;
            font-size: 30px;
            line-height: 160%;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #fff;

            span{
                font-weight: 400;
            }

        }


        .barra-1 {
            width: 100%;
            height: 1px;
            background-color: #fff;
            position: relative;

            &::after {
                background-color: #ffffff;
                background-size: auto;
                display: inline-block;
                width: 80%;
                height: 1px;
                content: "";
                top: 0px;
                left: -60%;
                position: absolute;
                z-index: 0;
            }

            &::before {
                background-color: #ffffff;
                background-size: auto;
                display: inline-block;
                width: 10%;
                height: 1px;
                content: "";
                top: 0px;
                right: 0px;
                position: absolute;
                z-index: 0;
            }
        }

        .listagem-hist{
            padding: 70px 0 0;

            ul{
                li{
                    list-style-type: none;
                    font-weight: 300;
                    font-size: 16px;
                    line-height: 40px;
                    letter-spacing: 0.8px;
                    color: #fff;

                    img{
                        margin-right: 8px;
                    }
                }
            }
        }

        .separacao-branco{
            border-right: solid 1px #fff;
            min-height: 370px;
        }
        
    }

    .img-historias {
        width: 100%;
        object-fit: cover;
        overflow: hidden;
        height: 100%;
    }
}

#blog{
    padding: 100px 0;

    h2{
        font-weight: 300;
        font-size: 30px;
        line-height: 31px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        color: #2C2C2C;
        margin-bottom: 60px;

        span{
            font-weight: 600;
        }
    }

    .text-blog {
        font-weight: 300;
        font-size: 18px;
        line-height: 160%;
        color: #2C2C2C;
        margin-bottom: 60px;
    }

    .btn-padrao {
        border: 1px solid #2C2C2C;
        padding: 0 0px 0 22px;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 1px;
        text-align: center;
        color: #2C2C2C;
        position: relative;
        display: inline-flex;
        align-items: center;
        transition: 300ms all ease-in-out;
        
        .moldura-seta {
            padding: 22px;
            transition: 300ms all ease-in-out;
            border-left: solid 1px #2C2C2C;
            margin-left: 22px;
            background-color: #fff;
        }
    }
    .btn-padrao:hover{
        background-color: #009651;
        color: #fff;
        border: 1px solid #fff;
    }
    .btn-padrao:hover .moldura-seta{
        border-left: solid 1px #fff;
        background-color: #DD6D34;
    }
    .btn-padrao:hover .moldura-seta img{
        transition: 300ms all ease-in-out;
        filter: invert(100%) sepia(0%) saturate(7486%) hue-rotate(296deg) brightness(109%) contrast(99%);
    }


    .card-blog{
        position: relative;
        margin: 25px;

        &::after {
            background-color: #2C2C2C;
            background-size: auto;
            display: inline-block;
            width: 56px;
            height: 56px;
            content: "";
            top: -25px;
            right: -25px;
            position: absolute;
            z-index: -1;
        }
        &::before {
            background-color: #2C2C2C;
            background-size: auto;
            display: inline-block;
            width: 56px;
            height: 56px;
            content: "";
            bottom: -25px;
            left: -25px;
            position: absolute;
            z-index: -1;
        }

        .moldura{
            overflow: hidden;

            .img-blog {
                width: 100%;
                object-fit: cover;
                height: 280px;
                transition: transform 0.5s ease-in-out; 
            }
        }

        .inf-card-blog {
            padding: 32px;
            background-color: #F4F3F3;

           .cat-data {
                display: flex;
                justify-content: space-between;

                .cat-blog {
                    font-weight: 300;
                    font-size: 15px;
                    line-height: 100%;

                    img{
                        position: relative;
                        top: -2px;
                    }
                }
                .data-blog {
                    font-weight: 300;
                    font-size: 15px;
                    line-height: 100%;
    
                    img{
                        position: relative;
                        top: -2px;
                    }
                }
            }

            h4{
                font-weight: 600;
                font-size: 22px;
                line-height: 160%;
                letter-spacing: 1.1px;
                color: #2C2C2C;
            }
            .resumo-blog {
                font-weight: 400;
                font-size: 16px;
                color: #2C2C2C;
                line-height: 160%;
                letter-spacing: 0.8px;
            }


            .btn-ler-noticia {
                display: block;
                border: 2px solid #2C2C2C;
                font-weight: 400;
                font-size: 16px;
                color: #2C2C2C;
                line-height: 100%;
                letter-spacing: 0.8px;
                text-align: center;
                padding: 22px 0;
                transition: 300ms all ease-in-out;

                &:hover{
                    background-color: #DD6D34;
                    color: #fff;
                }
            }
        }
    }

    .card-blog:hover .img-blog {
        transform: scale(1.1); 
    }
    .card-blog:hover .btn-conheça-blog {
        color: #fff;
        background-color: #DD6D34 !important;
    }
}

#feedInsta {
    padding: 20px 0 100px;


    .title-insta {
        display: flex;
        align-items: center;

        .titulo-insta {
            margin-left: 20px;
    
            h2 {
                font-weight: 500;
                font-size: 22px;
                line-height: 160%;
                margin-bottom: 0;
                color: #2C2C2C;
            }
            p {
                font-weight: 300;
                font-size: 16px;
                line-height: 160%;
                color: #2C2C2C;
                margin: 0;
            }
        }
    }

    .inst-foto {
        width: 100%;
        object-fit: cover;
        height: 480px;
    }

    .btn-padrao {
        border: 1px solid #2C2C2C;
        padding: 0 0px 0 22px;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 1px;
        text-align: center;
        color: #2C2C2C;
        position: relative;
        display: inline-flex;
        align-items: center;
        transition: 300ms all ease-in-out;
        
        .moldura-seta {
            padding: 22px;
            transition: 300ms all ease-in-out;
            border-left: solid 1px #2C2C2C;
            margin-left: 22px;
            background-color: #fff;
        }
    }
    .btn-padrao:hover{
        background-color: #009651;
        color: #fff;
        border: 1px solid #fff;
    }
    .btn-padrao:hover .moldura-seta{
        border-left: solid 1px #fff;
        background-color: #DD6D34;
    }
    .btn-padrao:hover .moldura-seta img{
        transition: 300ms all ease-in-out;
        filter: invert(100%) sepia(0%) saturate(7486%) hue-rotate(296deg) brightness(109%) contrast(99%);
    }
}


.ocult-desk{
    display: none !important;
}
.ocult-mob{
    display: inline-flex !important;
}



/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
    #banner {
        .text-banner {
                &::after {
                    display: none;
                }
                
            h1 {
                margin-top: 10px;
            }
        }
    }

    #sobre-home {
        .img-sobre-home {
            height: 380px;
            margin-bottom: 30px;
        }
        .order-1{
            order: 1;
        }
        .order-2{
            order: 2;
        }
        h2 {
            margin-bottom: 30px;
        }
    }

    #numeros {
        h3 {
            margin-top: 40px;
            margin-left: 20px;
        }
        .card-numero {
            .valor-num {
                font-size: 30px;
                span {
                    margin-right: 0;
                }
            }
            .text-num {
                margin-top: 0;
            }
        }
    }

    #projeto-home {
        .card-projetos-h {
            .title-proj {
                font-size: 18px;
            }
        }
    }

    #produtos {
        .card-produtos {
            .inf-card-prod {
                .dife-link {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    flex-direction: column;
                }
            }
        }

        .passadores {
            position: relative;
            top: 20px;

            .swiper-pagination-bullet-active {
                background-color: #DD6D34;
            }
        }
    }

    #historias {
        .barra-historias {
            .barra-1 {
                width: 100%;
                height: 2px;

                &::after {
                    width: 80%;
                    height: 2px;
                    left: -80px;
                }
            }
        }
        
    }

    #blog{
        .passadores-2 {
            position: relative;
            top: 20px;

            .swiper-pagination-bullet-active {
                background-color: #DD6D34;
            }
        }
    }

    #feedInsta {
        .inst-foto {
            width: 100%;
            object-fit: cover;
            height: 320px;
            margin-bottom: 20px;
        }
    }
}

/* MOBILE */
@media all and (max-width: 767px) { 
    #banner {
        .text-banner {
            padding: 25px 0;

            .space-banner {
                padding: 0 48px;
            }

            h1 { 
                padding: 10px;
                margin-top: 0;
                font-size: 30px;
                line-height: 46px;
            }
            p {
                font-size: 16px;
                padding: 10px;
            }
            .barra-branca {
                margin: 10px 0px 30px !important;
            }

            &::after {
                display: none;
            }
        }
    }

    #sobre-home {
        .img-sobre-home {
            height: 380px;
            margin-bottom: 30px;
        }
        .order-1{
            order: 1;
        }
        .order-2{
            order: 2;
        }
        h2 {
            margin-bottom: 30px;
        }
    }

    #numeros {
        padding: 0 0 40px 0;

        h2 {
            line-height: 50px;
        }
        .barra-numeros {
            border-right: none;
        }
        h3 {
            position: relative;
            margin-top: 0;
            margin-left: 0;
            padding-top: 30px;

            &::after {
                background-color: #ffffff;
                background-size: auto;
                display: inline-block;
                width: 1px;
                height: 123%;
                content: "";
                top: 0px;
                right: 70px;
                position: absolute;
                z-index: 0;
            }
            &::before {
                background-color: #ffffff;
                background-size: auto;
                display: inline-block;
                width: 120%;
                height: 1px;
                content: "";
                top: 0px;
                right: -20px;
                position: absolute;
                z-index: 0;
            }
        }
        .card-numero {
            .valor-num {
                font-size: 60px;

                span {
                    margin-right: 0;
                }
            }
        }
    }

    #projeto-home {
        .card-projetos-h {
            min-height: 390px;
            margin-bottom: 20px;
        }
    }

    #produtos {
        .card-produtos {
            .inf-card-prod {
                .dife-link {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    flex-direction: column;
                }
            }
        }

        .passadores {
            position: relative;
            top: 20px;

            .swiper-pagination-bullet-active {
                background-color: #DD6D34;
            }
        }
    }

    #historias {
        .img-historias {
            height: 380px;
            margin-bottom: -20px;
        }

        .order-1{
            order: 1;
        }
        .order-2{
            order: 2;
        }
        .barra-historias {
            h2 {
                padding: 0px 20px;
            }
            .listagem-hist {
                padding: 30px 0;
            }
            .separacao-branco {
                min-height: 0;
                margin-bottom: -70px;
            }
            .barra-1 {
                &::before {
                    display: none;
                }
                &::after {
                    display: none;
                }
            }
        }
    }

    #blog{
        .swiper-pagination{
            position: relative;
            margin-top: 30px;

            .swiper-pagination-bullet-active {
                background-color: #DD6D34;
            }
        }

        .btn-padrao {
            margin-left: 15px;
        }
    
    }


    .ocult-desk{
        display: inline-flex !important;
    }
    .ocult-mob{
        display: none !important;
    }
}