/*---------- container principal, "sobre" a barbearia (parte superior)---------------*/
.sobre {
    color: white;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* bg sobre a barbearia */
.sobre .img-fluid {
    width: 100%;
    filter:
        brightness(15%);
}

/* container do titulo e texto */
.conteudo-sobre {
    top: 25%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* titulo do texto sobre a barbearia */
.sobre h1 {
    width: 100%;
    font-size: 5vw;
    text-align: center;
    margin-bottom: 4%;
}

/* texto sobre a barbearia */
.sobre p {
    width: 100%;
    font-size: 2.5vw;
    text-align: justify;
}

/*------------------------------------------------------------------------------*/




/*-----------------container  "nossa missao"----------------------------------- */

/* container principal */
.nossa-missao {
    margin-top: 5%;
    width: 100%;
}

/* imagem */
.nossa-missao .img-nossa-missao {
    width: 100%;
    margin-right: 0;
    object-fit: cover;
    aspect-ratio: 16/9;
    filter: brightness(15%) grayscale(70);
}

/* <div> card-body do titulo e texto */
.card-body {
    top: 10%;
    color: white;
    position: absolute;

}

/* titulo */
.card-body .card-title {
    width: 100%;
    text-align: center;
    font-size: 5vw;
    margin-bottom: 2%;
}

/* texto */
.card-body .card-text {
    font-size: 2.5vw;
    text-align: justify;
 /*   background: rgba(5, 5, 5, 0.4);*/
    padding:4%;
}


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

.navbar-brand {
        width: 60%;
}


/*----------- conteudo "sobre"---------- */

/* container principal */
.sobre {   
    margin-top: 20%;
    margin-bottom: 15%;
    height: auto;
}

/* imagem de fundo */
.sobre .img-fluid{
    aspect-ratio: 9/16;
    object-fit: cover;
    height: 70vh;
}

/* container para o titulo e texto */
.conteudo-sobre{
    top: 15%;
}

/* titulo */
.sobre h1{
    font-size: 6vw;
    margin-bottom: 10%;
}

/* texto */
.sobre p{
    font-size: 4.7vw;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 20%;
}
/*------------------------------------------------------------*/



/* ------------ conteudo "nossa missao" --------------*/

/* container principal */
.nossa-missao{
    height: auto;
    width: 100vw;
    margin: auto;
    padding: 0;
}

/* imagem de fundo */
.nossa-missao img{
    aspect-ratio: 9/16;
    object-fit: cover;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

/* titulo */
.card-body .card-title{
    font-size: 6vw;
}

/* texto */
.card-body .card-text{
    padding: 5%;
    margin-left: 3%;
    margin-right: 3%;
    font-size: 4.7vw;
   
}


}