body{
  background-color: #ffff;
}
.navbar{
  background-color: #2F2F2F;
  width:auto;
}
.trenzas, .boxers {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    margin: 5vh 0;
}

h1 {
    font-size: 1.8em;
    color: black;
    text-align: center;
}

.trenzas div, .boxers div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    padding: 2vw;
    margin: 5vh;
    
}
.extensiones div , .rastas div {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    padding: 2vw;
    flex-direction: row;
    margin: 5vh;
    
}

section img {
    max-width: 40%;
}

p {
    font-size: 1em;
    color: black;
    max-width: 40%;
    text-align: left;
    margin-top: 5vh;
}
.principal{
    width: 100%;
   
   
}
.p-img{
    width:100%;
  
}
.llamada{
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #2F2F2F;
    height: 30vh;
}
.llamada h1{
    color: white;
    margin: 2vw;
    font-size: 1.5em;
    width: 74%;

}
.llamada a{
    text-decoration: none ;
    width: 20%;
}
.llamada a button{
    border-radius: 25px;
    background-color: #B3926F;
    font-size: 100%;
    padding: 4% 17%;
}
.llamada a button:hover{
    cursor: pointer;
   padding: 6% 24%;

    
}
.pie{
    background-color: #2F2F2F ;
}
@media (min-width: 768px) and (max-width: 1080px){
    p{
        font-size:0.8em ;
    }
}
@media (max-width: 767px){
    .trenzas div, .boxers div , .extensiones div{
        flex-direction:column ;
        justify-content: center;
       
    }
    section img {
        max-width: 80%;
        
    }
    p {
        max-width: 80%;
        text-align: center;
    }
    .p-img{
        width:100%;
    }

}