// 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";

/*--------------------------------------------------------------
  # inicio
  --------------------------------------------------------------*/

#inicio {
    transition: all 0.9s;
    .back {
        background-image: url(/img/back_home.png);
        background-size: cover;
        transition: all 0.9s;
    }
    .back1 {
        background: url(/img/home1.png) center no-repeat;
        background-size: cover;
        transition: all 0.9s;
        position: relative;
    }
    .back2 {
        background: url(/img/home2.png) center no-repeat;
        background-size: cover;
        transition: all 0.9s;
        position: relative;
    }
    .botao {
        position: absolute;
        bottom: 20%;
    }
    .btn-atendimento {
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 21px;
        // display: none;
        transition: all 0.9s;
        background-color: #ac88b9;
        font-family: montserrat;
        transition: all 0.9s;
        color: $roxo;
        padding: 20px 40px;
        border-radius: 40px;
    }
    .btn-atendimento:hover {
        background-color: $branco;
        transition: all 0.9s;
    }
    .btn-estetica {
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 21px;
        // display: none;
        transition: all 0.9s;
        background-color: #ac88b9;
        font-family: montserrat;
        transition: all 0.9s;
        color: $roxo;
        padding: 20px 40px;
        border-radius: 40px;
    }
    .btn-estetica:hover {
        background-color: $branco;
        transition: all 0.9s;
    }
    a {
        text-decoration: none;
    }
    .arrow {
        font-size: 30px;
        position: relative;
        top: 9px;
    }
}

.map-if {
    margin-bottom: -7px;
}

@media (max-width: 1399.98px) {}

@media (max-width: 1200.98px) {}

@media (max-width: 991.98px) {
    #inicio {
        .back {
            background-image: none;
            background-size: cover;
            transition: all 0.9s;
        }
        .back1 {
            background: url(/img/home1_mobile.png) center no-repeat;
            background-size: cover;
            transition: all 0.9s;
            height: 450px;
        }
        .back2 {
            background: url(/img/home2_mobile.png) center no-repeat;
            background-size: cover;
            transition: all 0.9s;
            height: 500px;
        }
        .botao {
            bottom: 15%;
        }
    }
}

@media (max-width: 767.98px) {}

@media (max-width: 575.98px) {}

@media (max-width: 485.98px) {}

@media (max-width: 420.98px) {}

@media (max-width: 380.98px) {}

@media (max-width: 340.98px) {}

@media screen and (max-width: 575px) {
    .card1 {
        margin-right: 0px;
    }
    .bar {
        border-radius: 15px;
        top: 1px;
        width: 98%;
    }
    input {
        border-radius: 5px;
    }
    .bar2 {
        border-radius: 15px;
        top: 1px;
        width: 98%;
    }
    textarea {
        border-radius: 5px;
    }
}