/*********** FONTS ***********/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/********* ALL ********/

* {
    font-family: 'Poppins', sans-serif;
}

.col{
    display: flex;
    justify-content: center;
}

#h1-empreendimento {
    width: 100%;
    background-color: #000;
    text-align: center;
    padding: 2rem;
    color: #fff;
    font-size: 1.7rem;
}

/****** ANIMATIONS **********/

@keyframes button-enter {
    0% {
        background-color: #b9030f;
        box-shadow: #b9030f 0px 0px 2px;
    }

    100%{
        background-color: #7b0008;
        box-shadow: #780109 0px 0px 5px;
    }
}

@keyframes button-qr {
    0% {
        background-color: #ffffff;
        box-shadow: #222222 0px 0px 2px;
    }

    100%{
        background-color: #222222;
        box-shadow: #222222 0px 0px 5px;
    }
}

@keyframes logos {
    0% {
        width: 25px;
    }

    100%{
        width: 30px;
    }
}

@keyframes boneco-wash {
    0% {
        width: 65px;
    }

    100%{
        width: 67px;
    }
}

#boneco {
    width: 65px;
}

#boneco:hover {
    animation-name: boneco-wash;
    animation-duration: .3s;
    animation-fill-mode: both;
}

/********** HEADER **********/

.logos:hover {
    animation-name: logos;
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
}

/********** BUTTONS ********/

div.btn-group{
    width: 250px;
    height: 65px;
    padding: 10px;
}

div.buttons{
    display: flex;
    width: 200px;
}

div.group-button{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    margin: 0 auto;
}

a.button-enter {
    color: #fff;
    text-decoration: none;
    background-color: #b9030f;
    width: 100px;
    height: 40px;
    text-align: center;
    padding: 7px;
    border-radius: 2px;
}

a.button-enter:hover {
    color: #fff;
    animation-name: button-enter;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
}

button.button-qr{
    color: #222222;
    background-color: none;
    width: 100px;
    height: 40px;
    padding: 5px;
    border-radius: 2px;
    border: 0.5px solid #222222;
}

button.button-qr:hover{
    background-color: #222222;
    color: #fff;
    animation-name: button-qr;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
}

/********** DIV CARDS ***********/

div.div-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    border: 1px solid #d5d5d5;
    border-radius: var(--bs-border-radius);
    height: 31rem;
    box-shadow: #6b6b6b 0px 5px 3px;
    margin-bottom: 10px;

}

div.div-card:hover  {
    box-shadow: #000 0px 5px 5px;
}

p.card-text{
    margin-top: 10px;
}

div.album.py-8.bg-light{
    background-color: #222222;
}

/********** RESPONSIVIDADE *************/

@media screen and (max-width: 990px){
    div.div-separador{
        display: none;
    }

}

@media screen and (max-width: 1023px){

    div#nav {
        display: none;
    }

    div.div-card {
        width: 80%;
    }
}