@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Regular.ttf);
}

@font-face {
    font-family: MontserratBold;
    src: url(../fonts/Montserrat-ExtraBold.ttf);
}
 body{
     font-family: 'Montserrat';
 }
.primeiraSecao{
    background-image: url("../img/section01.png");
    background-size: cover;
}
.primeiraSecaoPortfolio{
    background-color: #000;
}

.logoVilaInfra{
    height: 4rem;
    width: 5rem;
}

.corLetraBranca{
    color: #fff;
}

.corLetraBranca:hover{
    color: #fff;
}

.fonteEmNegrito{
    font-family: 'MontserratBold';
}

.tamanhoImagemsistemas{
    width: 15rem;
}

.tamanhoDaImagemPortfolio{
    width: 20rem;
}
.centralizaPadrao{
    margin: 0 auto;
    text-align: center;
}

.tamanhoBotaoSaibaComo{
    width: 10rem;
}

.iconesRedeSocial{
    display: grid;
}

.iconesRedeSocialAcerto{
    width: 2rem;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.videoBarbersys{
    height: 30rem;
}

.segundaSecao{
    background-image: url(../img/elemento-retangulo-circular.png);
    background-size: 36rem;
    padding-top: 3rem;
    background-repeat: no-repeat;
    background-position: bottom;
}

.alinhaSegundaSecao{
    display: flex;
    align-items: center;
}

.corLetraVerde{
    color: #58828d;
}

.divisaoSistemas{
    border-top: 2px solid #58828d ;
}
.alinhaDireita{
    text-align: right;
}

.alinhaTextoCentro{
    text-align: center;
}

.alinhaTextoDiferenciado{
    text-align: center;
}

.bordaDivisoria{
    border: none;
}

.fundoComoFazemos{
    background-image: url("../img/elemento-check-alinhado.png");
    background-size: cover;
}

.tamanhoImagemMockup{
 width: 18rem;
}

.fonteMockup{
    font-size: 0.75rem;
}

.primeiraDiv{
    text-align: end;
    margin-left: 13rem;
}

.botaoFaleAgora{
    width: 21rem;
}

.quartasecao{
    background-image: url("../img/background-sectiion02.png");
}

.acessivelDesktop{
    display: none;
}

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

.imagemFooter{
    width: 2rem;
}

.imagemModalUniverso{
    width: 10rem;
}
@media (min-width: 600px){
    .primeiraSecao{
        background-image: url("../img/section01.png");
        background-size: cover;
    }

    .bordaDivisoria{
        border: solid 1px;
    }

    .alinhaTextoDiferenciado{
        text-align: right;
    }

    .acessivelMobile{
        display: none;
    }

    .acessivelDesktop{
        display: flex;
        width: 100%;
    }

}