*{
    margin-top: 0;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
 }

 header{
    background: rgb(255, 255, 255);
 }

 header nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 15vh;
    padding: 0px 5 px;
    max-width: 1200px;
    margin: 0 auto;
 }

 header nav ul{
   display: flex;
   gap: 70px;
   list-style: none;
 }

 header a{
   text-decoration: none;
   color: rgb(218, 113, 234);
   font-size: 1.2rem;
   padding: 8px 12px;
   border-radius: 5px;
  }

  header nav a:hover{
    background-color: rgb(234, 154, 246);
    color: white;
  }

 header img{
  width: 180px;
 }

 .button a{
  color: white;
 }

/* Conheça o studio */
/* SERVIÇOS / CONHEÇA O STUDIO */

#servicos {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    text-align: center;
}

#servicos h2 {
    font-size: 2.5rem;
    color: rgb(218, 113, 234);
    margin-bottom: 50px;
    position: relative;
}

#servicos-img {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

#servicos-img > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#servicos-img img {
    width: 280px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

#info-servicos {
    max-width: 600px;
    text-align: justify;
    line-height: 1.8;
    font-size: 1.05rem;
}

#info-servicos p {
    margin-bottom: 20px;
}

.galeria-studio{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.galeria-studio img:first-child{
    grid-column: span 2;
}

/* Resultado unhas naturais / Resultado Alongamentos */
/* RESULTADOS */

#unhasnaturais,
#alongamentos {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    text-align: center;
}

#unhasnaturais h4,
#alongamentos h4 {
    font-size: 2.5rem;
    color: rgb(218, 113, 234);
    margin-bottom: 40px;
}

/* Centraliza a galeria */
#unhas-img1,
#unhas-img2 {
    display: flex;
    justify-content: center;
}

#unhas-img1 div,
#unhas-img2 div {
    display: grid;
    grid-template-columns: repeat(3, 280px);
    gap: 20px;
    justify-content: center;
}

#unhas-img1 img,
#unhas-img2 img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: 0.3s;
}

#unhas-img1 a,
#unhas-img2 a {
    display: block;
}

#unhas-img1 img,
#unhas-img2 img {
    cursor: pointer;
}

#unhas-img1 img:hover,
#unhas-img2 img:hover {
    transform: scale(1.03);
}
 
/* responsividade para celular: resultados natural e along/. */
@media (max-width: 768px) {

    #servicos-img {
        flex-direction: column;
    }

    #unhas-img1 div,
    #unhas-img2 div {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {

    #unhas-img1 div,
    #unhas-img2 div {
        grid-template-columns: 1fr;
    }

    #unhasnaturais h4,
    #alongamentos h4,
    #servicos h2 {
        font-size: 2rem;
    }
}


  /* cores do loggin - botstrap */

  :root {
    --cor-principal: rgb(234, 154, 246);
}

/* Header do login */
.bg-primary {
    background-color: var(--cor-principal) !important;
}

/* Botão */
.btn-primary {
    background-color: var(--cor-principal) !important;
    border-color: var(--cor-principal) !important;
}

.btn-primary:hover {
    background-color: rgb(220, 120, 235) !important;
    border-color: rgb(220, 120, 235) !important;
}


.form-control:focus {
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 0.2rem rgba(234, 154, 246, 0.25);
}

/* "cadastre-se"*/
a {
    color: rgb(234, 154, 246);
}

/*  */

 #footer1{
  display: flex;
  justify-content: center;
  padding: 4px;
  gap: 80px;
  background: black;
  color: white;
 }

 #banner {
   background: url(../img/unhas-banner.jpg) no-repeat center center fixed;
   background-size: cover;
   height: 85vh;
   display: flex;
   align-items: center;
 }

 #banner-texto{
  text-align: center;
  width: 1000px;
  margin: 0 auto;
  background: #0000008a;
  padding: 80px;
  border-radius: 4px; 
 }

 #banner-texto h1{
  text-align: center;
  color: white;
  font-size: 4rem;
  text-shadow: 0 0 10px rgb(218, 113, 234);
  letter-spacing: 5px;
  margin: 0;
  margin: 30px 0;
 }

 #banner-texto h5{
  text-align: center;
  color: rgb(218, 113, 234);
  font-size: 2rem;
  text-shadow: 0 0 5px rgb(211, 46, 237);
  margin: 0;
  margin: 30px 0;
 }

 #banner-texto h4{
  text-align: center;
  color: rgb(218, 113, 234);
  font-size: 2rem;
  margin: 10px 0;
  margin: 30px 0px;
  text-shadow: 0 0 10px rgb(211, 46, 237);
 }

 #banner-texto button{
  padding: 8px 14px;
  border-radius: 8px 14px;
  background: rgb(234, 154, 246);
  color: white;
  text-transform: uppercase;
  border: none;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  margin-top: 40px;
 }

 #banner-texto button:hover{
  transform: scale(1.03);
  transition: 0.5s;
  background: rgb(211, 46, 237);
 }




 /* servicos */

 #servicos{
  color: black;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
 }
 
 
 #info-servicos{
  color: black;
 }



 /* unhas naturais */

 #unhasnaturais{
  color: black;
  text-align: center;
 }


 /* alongamentos */

 #alongamentos{
  color: black;
  text-align: center;
 }

 #unhas-img1{
  width: 100%;
  margin: 0 auto;
  margin-top: 40px;
  display: flex;
  gap: 30px;
 }

 #unhas-img2{
  width: 100%;
  margin: 0 auto;
  margin-top: 40px;
  display: flex;
  gap: 30px;
 }


 /* contato */
 
 .button{
  padding: 18px 24px;
  border-radius: 8px 14px;
  background: rgb(234, 154, 246);
  color: white;
  text-transform: uppercase;
  border: none;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  margin-top: 40px;
 }

 .button:hover{
  transform: scale(1.03);
  transition: 0.5s;
  background: rgb(211, 46, 237);
}

 #agendamento{
  background: rgb(221, 211, 221);
  text-align: center;
  padding: 30px; 
  letter-spacing: 4px;
  margin: 0 auto;
 }

#agendamentoh1{
  color: rgb(218, 113, 234);
}



#footer2{
  background: black;
}