/* Estilo automático para a página: empreendimentos */
#cabecalho{
    height: 490px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    margin-top: -90px;
    position: relative;


    h2{
        color: #FFFAEC;
        position: relative;

    }

    .sombra {
        background-image: linear-gradient(#00000029, black);
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
        opacity: 0.7;
        top: 0;
        border-radius: 0;
    }
}

#empreendimentos{
    padding: 80px 0;
    position: relative;
    
    .efeito-titulo{
        text-align: center;
        h2{
            text-align: center;
        }
    }

    &:after{
        background-image: url(../img/efeito-emp-2.png);
        background-size: contain;
        display: inline-block; 
        background-repeat: no-repeat;
        width: 70px;
        height: 344px;
        content: "";
        position: absolute;
        top: 120px;
        left: 0;
        z-index: 10;
    }
    &:before{
        background-image: url(../img/efeito-emp-3.png);
        background-size: contain;
        display: inline-block;
        background-repeat: no-repeat;
        width: 70px;
        height: 344px;
        content: "";
        position: absolute;
        top: 240px;
        right: 0;
        z-index: 10;
    }


    .nav-pills {
        border-bottom: solid 1px rgba(92, 22, 53, 0.50);
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;

        .nav-link {
            color: rgba(92, 22, 53, 0.50);
            font-size: 20px;
            font-weight: 500;
            line-height: 40px;
        }
    }

    .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
        background-color: transparent;
        color: var(--bord)
    }

    .sem-empreendimento {
        color: var(--chumbo, #5D5E58);
        font-size: 18px;
        text-align: center;
        width: 100%;
        margin: 24px 0;
    }

    .paginacao-empreendimentos {
        display: flex;
        justify-content: center;
        margin-top: 24px;

        ul {
            display: flex;
            align-items: center;
            gap: 8px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .pagina-item {
            a, span {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border: 1px solid var(--bord);
                color: var(--bord);
                font-size: 16px;
                font-weight: 500;
                text-decoration: none;
                transition: 300ms all ease-in-out;
            }

            a:hover {
                background-color: var(--bord);
                color: var(--branco);
            }

            &.active a {
                background-color: var(--bord);
                color: var(--branco);
            }

            &.disabled span {
                opacity: 0.4;
                border-color: rgba(92, 22, 53, 0.50);
                color: rgba(92, 22, 53, 0.50);
            }
        }
    }


     .card-empreendimento{

        .moldura {
            overflow: hidden;
            .bg-img {
                width: 100%;
                height: 450px;
                object-fit: cover;
                transform: scale(1);
                transition: transform 1200ms cubic-bezier(0.25, 0.8, 0.25, 1);
            }
        }

        .info-card-emp{
            .localizacao {
                color: var(--bord, #5C1635);
                font-size: 20px;
                font-weight: 500;
                line-height: 60px;
                text-transform: uppercase;
                margin: 0;
            }
            .nome-emp {
                color: var(--bord, #5C1635);
                font-size: 32px;
                font-weight: 500;
                line-height: 50px;
                text-transform: uppercase;
                margin: 0;
            }
            .diferencial {
                color: var(--chumbo, #5D5E58);
                font-size: 20px;
                font-weight: 500;
                line-height: 60px;
                margin: 0;
            }
        }

        .btn-padrao{
            color: var(--bord) !important;
            border: 1px solid var(--bord);
            display: inline;

            &:hover{
                background-color: var(--bord);
                color: var(--branco) !important;
                border: 1px solid var(--bord);
                
            }
        }

        &:hover{
            .bg-img {
                transform: scale(1.05);
            }

            .btn-padrao{
                color: var(--branco) !important;
                border: 1px solid var(--bord);
                background-color: var(--bord);
            }
        }
    }


}

@media (max-width: 767px) {
    #cabecalho {
        height: 320px;
        h2 {
            text-align: center;
        }
    }

    #empreendimentos {
        &::before,
        &::after {
            display: none;
        }

        .nav-pills {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            overflow: scroll;

                .nav-link {
                    width: 170px;
                    display: flex;
                    align-items: center;
                }
        }

        .efeito-titulo{
            img{
                margin-bottom: 16px;
            }
        }

        .card-empreendimento .moldura .bg-img {
            height: 220px;
        }

        .card-empreendimento {
            .info-card-emp {
                .localizacao {
                    margin: 24px 0 -8px 0;
                    line-height: 0px;
                    font-size: 16px;
                }
                .nome-emp {
                    font-size: 20px;
                    margin: 24px 0 8px 0;
                    line-height: 24px;
                }
                .diferencial {
                    font-size: 18px;
                    line-height: 40px;
                    margin: 0 0 20px 0;
                }
                .btn-padrao {
                    display: block;
                    padding: 0;
                }
            }
        }
    }


}