@charset "UTF-8";


:root{
  --fundo-principal: #111;
  --texto: #f5f5f5;
  --destaque: #c59d5f;
  --fundo-header: #1c1c1c;
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    display: flex;
    flex-flow: column wrap;
    background-color: var(--fundo-header);
    padding: 10px;
    gap: 10px;
    
    
   
}

header h2{
    display: none;
    
}

header #icon{
    background-image: url(../imagens/7dbfe748-b39a-48ed-a084-b95067e8cda3.png);
    height: 100%;
    width: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    
  
   
}
/*
nav{
    display: flex;

}
*/


#top-header{
    display: flex;
    justify-content: space-between;
    height: 100px;
    align-items: center;
    
}


span#burguer{

    text-align: center;
    color: var(--destaque);
    cursor: pointer;
    font-size: 2em;
}


menu {
    display: none;
    width: 100%;
    
    
    
}

menu.ativo {
    display: block;
   
}


menu>ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    list-style-type: none;
    align-content: center;
    gap: 10px;
    border-top: 1px solid var(--destaque);
    
}

menu li{
    margin-top: 10px;
    width: 100%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

menu a{

    padding: 10px;
    text-decoration: none;
    text-align: center;
    color: var(--destaque);
} 

menu a:hover{
    text-decoration: underline;
    transition-duration: 0.2s;
    color: #f7d199;
}

#agendar{
    width: 100px;
    text-align: right;
}

#agendar i:hover{
    color: #f7d199;
}

header i{
    font-size: 2em;
    color: var(--destaque);
   
}


.material-symbols-outlined {
  font-size: 32px;
  color: white;
}
/*
.nav-list{
    display: flex;
    flex-flow: column;
    list-style: none;
}

header a{
    text-decoration: none;
    color: var(--destaque);
    margin-left: 60px;
}
header a:hover{
    text-decoration: underline;
    cursor: pointer;
}
*/
body{
    background-color: rgb(5, 5, 5);
    display: flex;
    flex-flow: column nowrap;
}

main{
    display: grid;
    grid-template-columns: 1fr;
    flex: 1;
    
    gap: 10px;
    
    
}

section{
    padding: 60px 20px;
}

#hero{
    display: flex;
    flex-flow: column;
    background-color: rgba(82, 82, 82, 0.274);
    background: linear-gradient(rgba(0, 0, 0, 0.925), rgba(0, 0, 0, 0.808)), url("../imagens/imagem-1.jpg");
    background-size: cover;
    background-position: center;
    color: var(--texto);
    text-align: center;
    height: 600px;
    justify-content: center;
  
    
}
#hero h1{
    text-align: center;
    font-family: 'Playfair Display', serif;
}
#hero p{
    margin: 20px auto 0 auto;
    line-height: 1.6;
    max-width: 600px;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}
#img-hero{
    display: none;
}

#servicos{
   
    display: flex;
    flex-flow: column nowrap;
    background-color: rgba(82, 82, 82, 0.418);
    background: linear-gradient(rgba(0, 0, 0, 0.925), rgba(0, 0, 0, 0.918)), url("../imagens/imagem-2.jpg");
    background-size: cover;
    background-position: center;
    gap: 60px;
    color: var(--texto);
   
    height: 700px;
    justify-content: center;
    
}
#servicos h1,h2{
    font-family: 'Playfair Display', serif;
    
}
#servicos h3{
    font-size: 2em;
    color: var(--destaque);
}

.preco{
    display: flex;
    justify-content: space-between;
}
#cortes{
    margin: 0 auto;
    max-width: 600px;
}
#servicos p{
    font-family: 'Montserrat', sans-serif;
    padding: 10px;
}

.funcionamento{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    height:350px;
    
}

.funcionamento .horario{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #1c1c1c44;
}

.funcionamento h2{
    text-align: center;
}
.funcionamento p{
    text-align: center;
}

.funcionamento h2,h3{
    color: var(--destaque);
    font-family: 'Playfair Display', serif;
}

.funcionamento p{
    font-family: 'Montserrat', sans-serif;
    color: var(--texto);
}


#sobre{
     background-color: rgba(82, 82, 82, 0.418);
    background: linear-gradient(rgba(0, 0, 0, 0.925), rgba(0, 0, 0, 0.918)), url("../imagens/pexels-danielabsi-952670.jpg");
     background-size: cover;
    background-position: center;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
  
    gap:10px;
   
    height: 500px;
    justify-content: center;
}

#sobre img{
   height: 200px;
   width: 200px;
    
}
#sobre h1{
    font-family: 'Playfair Display', serif;
    color: var(--destaque);
    text-align: center;
}

#sobre p{
    font-family: 'Montserrat', sans-serif;
    color: var(--texto);
    text-align: justify;
    margin: 0px 10px;
    max-width: 700px;
    line-height: 1.6;
}
footer{
    background-color: black;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75em;
    line-height: 1.5;
    text-align: center;
    padding: 40px 20px;
}

footer p{
    margin: 5px 0;
}