@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Lora:ital,wght@0,400..700;1,400..700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Lilita+One&family=Lora:ital,wght@0,400..700;1,400..700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



body {
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    background-color: #FFF6F6;
}


/*navbar*/
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #F5B8B0;
    padding: 20px;
    margin: 0;
}

.logo {
    margin-left: 30px;
    height: 80px;
    width: 80px;
}

.nav-bar ul {
    display: flex;
    gap: 40px;
    list-style: none;
}

.item a {
    display: inline-block;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 20px;
    transition: transform 0.75s ease;
}

.item a:hover {
    color: #C76868;
    transform: translateY(-7px);
}

header a button {
    padding: 5px 20px;
    border-radius: 7px;
    background-color: #D97A7A;
    color: #E8EBF0;
    border: 2px solid #D97A7A;
    font-size: 20px;
    margin-right: 100px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    transition: transform 0.75s ease;
}

header a button:hover {
    background-color: #C76868;
    transform: translateY(-7px);

}


/*fim navbar*/

/*imagem principal*/
.img-comeco {
    float: right;
    height: 915px;
    margin: 0;
    padding: 0;
}

.o-salao-que {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: italic;
    font-size: 120px;
    position: absolute;
    top: 355px;
    left: 15px;
    color: #fff;

}

.transforma {
    position: absolute;
    font-size: 50px;
    top: 460px;
    left: 20px;
    font-size: 120px;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
}



/*fim imagem principal*/

/*bloco de contato*/
.fundo-bloco-de-contato {

    padding: 10px;
    position: relative;
    bottom: 15px;
    left: 10px;
    background-color: #D97A7A;
    width: 600px;
    height: 120px;
    top: 840px;
    left: 200px;
    border-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.fundo-bloco-de-contato2 {
    padding: 10px;
    position: relative;
    bottom: 15px;
    background-color: #f19595;
    width: 210px;
    height: 120px;
    top: 700px;
    left: 820px;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

}

.lista-bloco-de-contato ul {
    position: relative;
    color: #FFFFFF;
    left: 180px;
    top: -20px;
    text-align: center;
    display: flex;
    list-style: none;
    gap: 20px;
    width: 86vw;  /* deixa a ul menor que o limite da tela, isso resolveu o problema de invadir a tela pro lado*/
}

.lista-bloco-de-contato2 ul a {
    position: relative;
    color: #ffff;
    left: 780px;
    bottom: 93px;
    text-decoration: none;
}

.lista-bloco-de-contato2 ul {
    list-style: none;
    font-size: 20px;

}

/*fim bloco de contato*/

/* sobre o salao*/
.sobre-esc h1 {
    text-align: center;
    margin-top: 100px;
}

.o-salao h1 {
    text-align: center;
    margin-top: 40px;
    color: #f19595;
    font-size: 50px;

}

.img-sobre img {
    width: 500px;
    margin-left: 200px;
}

.img-sobre {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sobre-esc h1 {
    color: #858181;
}

.img-sobre p {
    color: #858181;
    text-align: justify;
    margin-left: 20px;
}

.sobre button {
    padding: 5px 20px;
    border-radius: 7px;
    background-color: #D97A7A;
    color: #E8EBF0;
    border: 2px solid #D97A7A;
    font-size: 20px;
    margin-right: 100px;
    margin-left: 100px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    transition: transform 0.75s ease;
    margin-top: 90px;
    position: relative;
    left: 730px;
}

.sobre button a {
    color: #FFF;
    text-decoration: none;
}

.sobre button:hover {
    background-color: #C76868;
    transform: translateY(-7px);
}

/* fim sobre o salao*/


/* * {
  outline: 1px solid red;
} */

/* nossos servicos */

.h1nossos-servicos {
    margin-top: 150px;
    margin-bottom: 75px;
    display: flex;
    justify-content: center;
    color: #858181;
    padding-top: 60px;
}

.lista-servicos li img {
    width: 535px;
    margin-top: -42px;
}


.servicos {
    display: flex;
    justify-content: center;
    align-items: center;

}


.conteiner-servicos ul {
    display: flex;
    justify-content: center;
    position: relative;

}

.conteiner-botoes ul {
    list-style: none;
    display: flex;
}

#link-cabelos {
    position: absolute;
    left: 347px;
    padding: 5px 10px;
    background-color: #D97A7A;
    border: #D97A7A solid 1px;
    color: #fff;
    font-size: 20px;
    transition: transform 0.75s ease;
    border-radius: 7px;
    text-decoration: none;
}

#link-maquiagem {
    position: absolute;
    left: 887px;
    padding: 5px 10px;
    background-color: #D97A7A;
    border: #D97A7A solid 1px;
    color: #fff;
    font-size: 20px;
    transition: transform 0.75s ease;
    border-radius: 7px;
    text-decoration: none;

}

#link-unhas {
    position: relative;
    left: 1450px;
    padding: 5px 10px;
    background-color: #D97A7A;
    border: #D97A7A solid 1px;
    color: #fff;
    font-size: 20px;
    transition: transform 0.75s ease;
    border-radius: 7px;
    text-decoration: none;
}

#link-cabelos a,
#link-maquiagem a,
#link-unhas a {
    text-decoration: none;
    color: #FFF;
}

#link-cabelos:hover,
#link-maquiagem:hover,
#link-unhas:hover {
    background-color: #C76868;
    transform: translateY(-7px);
}


#botao-agendar-nossos {
    background-color: #D97A7A;
    padding: 15px;
    border: #D97A7A solid 1px;
    font-size: 20px;
    margin-bottom: 60px;
    border-radius: 7px;
    transition: transform 0.75s ease;
    position: relative;
    left: 805px;
}

#botao-agendar-nossos a {
    color: #fff;
    text-decoration: none;
    display: block;
}

#botao-agendar-nossos:hover {
    background-color: #C76868;
    transform: translateY(-7px);
}

.nossos-servicos {
    background-color: #f8dfdf;
}

/* fim nossos servicos */

/* rodapé */
.voltar-footer {
    display: flex;
    justify-content: center;
    background-color: #afa7a7;
}

.voltar-footer a {
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    background-color: #afa7a7;


}

footer {
    margin: 0;
    padding-bottom: 100px;
    background-color: #858181;
}

#um-pouco-mais-footer {
    margin: 0;
    padding-top: 50px;
    display: flex;
    justify-content: center;
    color: #fff;
}

.lista-rodape ul {
    display: flex;
    justify-content: center;
    list-style: none;
}


.lista-hora-endereco {
    display: flex;
    color: #fff;
    list-style: none;
    justify-content: center;
    gap: 150px;
    margin: 0;
    font-size: 20px;
}

.logo-footer {

    display: flex;
    justify-content: center;

}

#kelvin {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-left: 50px;
    color: #FFF;
}

.alure-beauty {
    position: absolute;
    color: #FFF;
    top: 440px;
    font-size: 30px;
    left: 40px;
}



/*PAGINA DE SERVIÇOS*/

/* conteudo */
.h1-nossos-servicos {
    color: #f19595;
}

.conteiner-h1-nossos-servicos {
    text-align: center;
    color: #858181;
    font-size: 20px;
}

.img-servicos {
    width: 100px;

}

.lista-servicos {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 30px;

}

.conteiner-servicos {
    display: flex;
    justify-content: center;
    align-items: center;
}

.descricao {
    margin: 0 97px 0 135px;
    text-align: justify;
    color: #585757;
}

.servicos-h1 {
    text-align: center;
    color: #858181;
    margin-top: 40px;
    margin-bottom: 60px;
}

.botao-pag-servicos {
    padding: 5px 20px;
    border-radius: 7px;
    background-color: #D97A7A;
    color: #E8EBF0;
    border: 2px solid #D97A7A;
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    transition: transform 0.75s ease;
}

.botao-pag-servicos:hover {
    background-color: #C76868;
    transform: translateY(-7px);
}

.conteiner-botao-servicos {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.descricao-final {
    margin: 30px 140px 20px 185px;
    text-align: justify;
    color: #585757;
}

.lista-todos-procedimentos1 {
    display: flex;
    margin-left: 110px;
}

.lista-todos-procedimentos2 {
    display: flex;
    position: absolute;
    right: 100px;
}

.pai-lista-procedimentos {
    display: flex;
}

/* fim conteúdo */

/* fim pagina de serviços */


/* pagina quem somos */

/* conteudo principal */
main h1 {
    text-align: center;
}

.foto-equipe {
    width: 600px;
    aspect-ratio: 1 / 1;
    /* mantém proporção */
    background-image: url("../imagens/fotoequipe.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    left: 160px;
    transition: transform 0.9s ease;
}

.foto-equipe:hover {
    background-image: url(../imagens/equipe\hover.png);
    transform: scale(1.05);


}

.descricao-equipe {
    margin: 0 135px 0 200px;
    text-align: justify;
    position: absolute;
    left: 600px;
    top: 370px;
    font-size: 20px;
    color: #858181;
}

.esc-o-salao h1 {
    color: #858181;
    margin: 60px;
    font-size: 40px;
}

.conteiner-salao ul {
    display: flex;
    list-style: none;
    gap: 45px;
}

.lista-salao li img {
    width: 505px;
}

.conteiner-salao {
    display: flex;
    justify-content: center;
    margin: 0 70px 0 50px;
}

.descricao-salao {
    margin: 0 135px 0 157px;
    text-align: justify;
    color: #585757;
}


.conteiner-botao-servicos-salao button {
    padding: 5px 20px;
    border-radius: 7px;
    background-color: #D97A7A;
    color: #E8EBF0;
    border: 2px solid #D97A7A;
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    transition: transform 0.75s ease;
    margin: 50px;
    position: relative;
    left: 785px;

}

.conteiner-botao-servicos-salao button:hover {
    background-color: #C76868;
    transform: translateY(-7px);

}

/* fim conteudo principal */

/* fim pagina quem somos */

/* PAG AGENDAMENTO */

.conteiner-formulario {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-image: url(../imagens/fundo2.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.formulario {
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color: #F5B8B0;
    padding: 0 30px 30px 30px;
    border-radius: 20px
}

.formulario form {
    display: flex;
    flex-flow: column wrap;

}

#titulo-agendamento{
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 34px;
    color: #fff;

}

select,
input[name="nome"],
input[name="celular"] {
    padding: 13px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: none;


}

.coluna-dupla input[type="date"] {
    width: 165px;
    border-radius: 10px;
    padding: 14px;
    border: none;
    cursor: pointer;
    margin-right: 4px;
}

.coluna-dupla input[type="time"] {
    width: 172px;
    border-radius: 10px;
    padding: 13px;
    margin-bottom: 10px;
    border: none;
    cursor: pointer;
}

textarea[name="message"] {
    width: 390px;
    padding: 5px;
    margin-bottom: 7px;
    border-radius: 10px;
    border: solid thin #858181;
    border: none;

}

input[type="submit"] {
    padding: 10px;
    border-radius: 10px;
    border: none;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
    background-color: #f19595;

}

input[type="submit"]:hover {
    background-color: #cc7d7d;
}

form a {
    display: flex;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

form a[href="wht"]:hover {
    text-decoration: underline;
}

.logo-agendamento img {
    position: absolute;
    left: 930px;
    top: 750px;
    width: 80px;
}