:root{
    --bs-body-bg: rgba(10, 10, 10, 1);
 /*   font-size: 25px;
*/}


  
  /* Tamanhos de fonte responsivos */

  



.navbar{
    margin: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(2px);
    
}


/*logo da marca na navbar*/
.container-fluid .navbar-brand{
    margin-left: 4%;
    padding: auto;

}

/*conteudo dentro da navbar*/
.collapse.navbar-collapse {

    margin-right: 3vw;
}
  

/* colocando cor do icone do menu na cor branca*/
button.navbar-toggler{
    filter: invert(1);
}

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




/*------------------- Container do slogan -------------------------*/

.container-fluid.slogan .card-img{
    filter: brightness(50%);
    padding: 0%;
}

/*   div slogan   */
.container-fluid.slogan .position-absolute.titulo-slogan{
   left: 10vw;
   width: min-content;
   bottom: 40%; 
}

/* h5 titulo 1 slogan */
.titulo-slogan1{
    color: white;
    font-size: 2.9vw;
    width: min-content;   
}

/* h5 titulo 2 slogan */
.titulo-slogan2{
    color: white;
    font-size: 3vw;
    width: max-content;   
    text-transform: uppercase;     
}

/* div texto do slogan */
.container-fluid.slogan .position-absolute.texto-slogan{
    width: 100%;
    height: max-content;
    padding: 0%;
    margin: 0%;
    bottom: 0;
    visibility: hidden;
}

/* <p> texto slogan */
#texto-slogan{
    width: max-content;
    text-align: justify;
    font-size: 1.7vw;
    padding: 2%;
    margin-bottom: 5%;
    text-align: start;
    background-color: rgba(0, 0, 0, 0.7); 
}

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




/*---------------- card historia da barbearia -----------------------*/
.card.card-historia{
    background: linear-gradient();
}
/* imagem do card */
.card-historia .img-historia{
    filter: grayscale(95%);
}

/* div para o titulo e texto */
.card-historia .card-body{
    margin: auto;
    width: max-content;
    justify-content: center;
    text-align: justify;
}

/* <h5> titulo do card */
.card-historia .card-body .card-title{
    color: white;
    font-size: 2.3vw;
    width:auto;
    font-weight: bold;
    text-align: center;
}

/* <p> texto do card */
.card-historia .card-body .card-text{
    color: white;
    font-size: 1.5vw;
    width:auto;
    margin-top: 10%;
}

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



/*-------------------- cortes classicos e modernos -----------------------*/

/* container principal */
.container.classico-moderno{
    background-color: rgb(0, 0, 0);
    margin-bottom: 50%;
    height: min-content;
    width: 85vw;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: auto;
}

/* div para o titulo e texto */
.container.classico-moderno .card-body{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding: 1.5%;
    width: 100%;
    background: radial-gradient(circle, rgb(56, 56, 56),rgb(0, 0, 0));
    
}

/* titulo do card */
.container.classico-moderno .card-body .card-title{
    color: white;
    font-size: 2.1vw;
    width:auto;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;

}
 /* texto do card */
.container.classico-moderno .card-body .card-text{
    color: white;
    margin-top: 2%;
    margin-bottom: 0;
    font-size: 1.5vw;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    
}

/* imagem da primeira coluna)*/
.img-fl1{
    width: 90%;
    height: 100%;
    object-fit: cover;
    padding-left: auto;
    padding-right: auto;
}

/*imagens da segunda coluna (lado direito) */
.container.classico-moderno .img-fluid{
    width: 90%;
    height: 90%;
    object-fit: cover;
    
 
}

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




/*--------------------------- carousel (slider) --------------------------*/

/* container principal, com texto (superior) e slider (carousel) */
#container-text-slider{
    width: auto;
    height: auto;
    margin: auto;
    padding-top: 4.5%;
    align-items: center;
    justify-content: center;
}

/* titulo do slider */
.slider-top-title{
    color: white;
    font-size: 2.1vw;
    width:auto;
    margin-top: 0.5%;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

/* texto do slider */
.slider-top-text{
    color: white;
    margin-top: 0.5%;
    margin-bottom: 2%;
    font-size: 1.5vw;
    text-align: justify;
}

/* container principal do slider (carousel)*/
#container-carousel{
    margin: auto;
    padding: auto;
    width: auto;
    height: 80vh;
    align-items: center;
    text-align: center;
}

/* container com imagens, indicadores e botões do slider (carousel) */
.carousel{
    display: flex;
    justify-content: center;
    align-content: center;
    padding: auto;
    margin: auto;
    width: auto;
}

/* div com botoes indicadores */
.carousel-indicators{
    margin: auto;
    margin-bottom: 0.5%;
}

/* div para imagens */
.carousel-inner{
    margin: 0%;
    width: 85%;
    height: 80%;
    padding: 0%;
}

/* div para imagem*/
.carousel-item .item-carousel{
    justify-content: center;
    align-items: center ;
    width: auto ;
    margin: 0%;
    padding: 0%;
}

/* imagens */
.img-carousel{
    display: block;
    width: 100%;
    padding: auto;
    object-fit: cover;
}

/* botoes anterior e voltar (prev - next)
span.carousel-control-prev-icon{
    padding: 3%;   
}*/

/* botao anterior */
.carousel-control-prev{
    margin: auto;
    align-items: center;
    justify-content: end;
}
/* icone do botao anterior */
.bi.bi-arrow-left-circle-fill{
    width: 3vw;
}

/* botao proximo */
.carousel-control-next{
    margin: auto;
    align-items: center;
    justify-content: start;
}
/* icone do botao proximo */
.bi.bi-arrow-right-circle-fill{
    width: 3vw;
}
/*-------------------------------------------------------------------------------------------------*/




/* ------------ FOOTER -----------------*/

/* container principal do footer*/ 
.container-fluid.footer{
    padding-left: 2%;
    padding-right: 2%;

} 
/* linha superior com a logo */
.row.logo{
    padding-top: 4%;
    padding-bottom: 4%;
}

/* linha do conteudo footer*/
.row.conteudo-footer{
    margin-top: 4%;
}
/* container funcionamento (primeira coluna) */
.container-funcionamento{
    margin: auto;
    padding-left: auto;
    padding-right: auto;
    width: auto;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
/* h5 titulo funcionamento (primeira coluna) */
h5.titulo-funcionamento{
    font-size: 1.4vw;
}
/*lista funcionamento (primeira coluna) */ 
.lista-funcionamento{
    margin-top: 6%;
    font-size: 1.04vw;
}

/* titulo contato  (segunda coluna) */
h5.titulo-contato{
    font-size: 1.4vw;
}
/* texto contato */
.text-fluid.contato{
    margin-top: 6%;
    font-size: 1.04vw;
}

/*titulo localização (mapa) */
.titulo-localizacao{
    font-size: 1.4vw;
}
/*container do mapa (google maps)*/ 
.container-fluid.google-maps{
    margin-top: 7%;
    width: auto;
 
}




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

@media screen and (max-width: 575px){
  
    .navbar-brand{
        width: 60%;
    }

    .container-fluid.slogan{
        display: flex;
        width: 100%;
        margin-top: 20%;
    }
    .container-fluid.slogan h5.titulo-slogan1{
        font-size: 4.5vw;
    }
    .container-fluid.slogan h5.titulo-slogan2{
        font-size: 5vw;
    }
    .container-fluid.slogan .position-absolute.titulo-slogan{
        bottom: 25%;
    }
    /*---------------------------------------------*/


    /* historia da barbearia */
    .card .card-body{
        padding: 0;
    }
   
    .card-historia .card-body h5.card-title{
        font-size: 5vw;
    }
    .card-historia .card-body p.card-text{
        font-size: 3vw;
    }
    /*---------------------------------------------*/


    /* classico e moderno */
    .container.classico-moderno{
        margin-bottom: 20%;
    }
    .container.classico-moderno .card-body{
        width: 100%;
        padding-top: 10%;
        padding-bottom: 10%;
        margin: auto;
        justify-content: center;
    }
    #classicoModerno h5{
        margin-top: 0%;
        width: auto;
        font-size: 5vw;
    }
    #classicoModerno p{
        padding-left: 3%;
        padding-right: 3%;
        font-size: 3vw;
    }
    /*-----------------------------------*/


    /* slider (carousel) */
    #container-text-slider{
        padding-left: auto;
        padding-right: auto;
        justify-content: center;
        margin: auto;
    }
    #carousel-home{
        width: 100%;
    }
    .carousel-control-prev, .carousel-control-next{
        width: 30px;
    }
    .carousel-inner{
        width: max-content;

    }
    .carousel-inner .img-carousel{
        justify-content: center;
        width: 100%;
        aspect-ratio: 16/13;
        height: auto;
        object-fit: cover;
        object-position: center;
        padding: auto;
    }

    #container-text-slider h5{
        font-size: 5vw;
    }
    #container-text-slider p{
        margin-bottom: 10%;
        font-size: 3vw;
    }
   
    /*------------------------------------*/


    /* footer */
    .container.footer h5{
      font-size: 5vw;  
    }
    .container.footer ul, .container.footer p{
        font-size: 3vw;
    }

}