@charset "UTF-8";
:root {
  --rosa-base1: #c99796;
  --rosa-base2: #c9a6a6;
  --rosa-base3: #cabcbc;
  --marrom-base1: #cd9482;
  --marrom-base2: #cbad98;
}
/* Propriedades que se aplicam a todos os elementos da página. */
* {
  /* Remove a margem externa de todos os lados do elemento. */
  margin: 0;

  /* Remove o espaçamento interno de todos os lados do elemento. */
  padding: 0;

  /* Inclui o preenchimento e a borda na largura e altura. */
  box-sizing: border-box;

  font-family: "Poppins", sans-serif;
}

body {
  /* Exibição flexível.                          */
  /* Torna o elemento um flex container          */
  /* e os seus elementos internos em flex-itens. */
  display: flex;

  /* Quebra de linha quando os itens não couberem na largura da tela. */
  flex-wrap: wrap;

  /* Junção de flex-grow, flex-shrink e flex-basis.  */
  /* flex-grow – Habilidade de um flex item crescer. */
  /* flex-shrink - Capacidade de redução do item.    */
  /* flex-basis – Tamanho inicial do item.           */
  flex: 1 1 100vw;

  /* Margem de todos os lados. */
  margin: 3px;
}

/* Formatação comum entre os elementos. */
header,
nav,
main,
aside,
footer {
  /* Cor do fundo. */
  background: var(--rosa-base1);
  color: #3a1b17;
  /* Exibição flexível.                          */
  /* Torna o elemento um flex container          */
  /* e os seus elementos internos em flex-itens. */
  display: flex;
  /* Margem externa de todos os lados. */
  margin: 2px;
}

/* Seletores para formatação individual. */

header {
  border-radius: 5px;
  flex: 1 1 100vw;
}

header #logo {
  /* Exibição flexível.                          */
  /* Torna o elemento um flex container          */
  /* e os seus elementos internos em flex-itens. */
  display: flex;

  /* Junção de flex-grow, flex-shrink e flex-basis.  */
  /* flex-grow – Habilidade de um flex item crescer. */
  /* flex-shrink - Capacidade de redução do item.    */
  /* flex-basis – Tamanho inicial do item.           */
  flex: 0 1 200px;

  /* Alinha os itens na vertical. */
  justify-content: center;

  /* Alinha os itens na horizontal. */
  align-items: center;
  border-radius: 5px;
  padding: 5px;
  min-width: 90px;
  max-width: 150px;
}

#logo_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #3a1b17;
}

#logo_text1 {
  font-family: "Playwrite NL", cursive;
  font-size: 1.5em;
  white-space: nowrap;
}

#logo_text2 {
  font-size: 1em;
  font-weight: 500;
}

#menuInicio:hover,
#menuAtendimento:hover,
#menuAgenda:hover,
#menuBlog:hover,
#menuContato:hover {
  color: white;

}

#openMenu,
#closeMenu {
  /* Remove a borda. */
  border: none;
  /* Remove a cor de fundo. */
  background: none;
	color: white;
  /* Tamanho da fonte. */
  font-size: 2.5rem;

  /* Espessura da forte. */
  font-weight: bold;

  /* Margem ao redor do elemento              */
  /* (superior, direito, inferior e esquerdo) */
  padding: 0px 5px 0px 5px;

  /* Muda o cursor do mouse para ponteiro.*/
  cursor: pointer;

  /* Oculta o elemento. */
  display: none;


}

#menu ul {
  list-style: none;
}

#menu ul li {
  position: relative;
  float: left;
}

#menu ul li a {
  padding: 20px;
  display: block;
}

#menu ul li ul {
  position: absolute;
  left: 0;
  width: 200px;
}

#menu ul li ul li {
  width: 100%;
}

nav {
  /*
	/* Alinha os itens na vertical. */
  justify-content: center;

  /* Alinha os itens na horizontal. */
  align-items: center;

  /* Junção de flex-grow, flex-shrink e flex-basis.  */
  /* flex-grow – Habilidade de um flex item crescer. */
  /* flex-shrink - Capacidade de redução do item.    */
  /* flex-basis – Tamanho inicial do item.           */
  flex: 1 1 20%;
}

nav a {
  /* Margem de todos os lados. */
  margin: 0 3%;

  /* Tamanho da fonte. */
  font-size: 1em;
  white-space: nowrap;
}

main {
  /* Junção de flex-grow, flex-shrink e flex-basis.  */
  /* flex-grow – Habilidade de um flex item crescer. */
  /* flex-shrink - Capacidade de redução do item.    */
  /* flex-basis – Tamanho inicial do item.           */
  flex: 20 1 80%;
  flex-direction: column;
  border-radius: 5px;
  padding: 15px;
  gap: 20px;
}

main h1 {
  font-weight: 400;
  font-size: 1.4rem;
}

main p {
  text-align: justify;
}

.conteinerServicos {
  display: flex;
  flex-direction: column;
  padding-left: 50px;
  padding-right: 50px;
}

.conteinerServicos p {
  font-weight: 500;
  padding-bottom: 20px;
}

.boxPainel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  gap: 20px;
}

.itemPainel {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  max-width: 270px;
}

.txtItemPainel {
  background-color: var(--rosa-base2);
  border-radius: 10px 10px 0px 0px;
  padding: 10px;
  width: 100%;
}

.txtItemPainel {
  font-size: .9rem;
}

.txtItemPainel2 {
	background-color: var(--rosa-base2);
	border-radius: 0px 0px 10px 10px;
	width: 100%;
  }

.txtItemPainel2 p {
	padding: 10px;
	text-align: center;
  }

.txtItemPainel2:hover {
  color: white;
  cursor: pointer;
}

.imgItemPainel {
  background-color: var(--rosa-base3);
  width: 225px;
  height: 300px;
  
}

aside {
  /* Junção de flex-grow, flex-shrink e flex-basis.  */
  /* flex-grow – Habilidade de um flex item crescer. */
  /* flex-shrink - Capacidade de redução do item.    */
  /* flex-basis – Tamanho inicial do item.           */
  flex: 1 1 200px;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  background-color: white;
}

#headAsside {
  font-size: 1em;
  font-weight: 400;
  border-radius: 5px;
  background-color: var(--rosa-base1);
  width: 100%;
  text-align: center;
}

#textAsside {
  font-size: 0.9em;
  text-align: center;
}

footer {
  /* Junção de flex-grow, flex-shrink e flex-basis.  */
  /* flex-grow – Habilidade de um flex item crescer. */
  /* flex-shrink - Capacidade de redução do item.    */
  /* flex-basis – Tamanho inicial do item.           */
  flex: 1 1 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer #bodyFooter {
  display: flex;
  gap: 50px;
  padding: 20px;
}

#bodyFooter h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 15px;
}

#bodyFooter p {
  margin-bottom: 15px;
  font-weight: 400;
  text-align: justify;
}

#sobreFooter img {
	max-width: 150px;
	max-height: 150px;
  }

#bodyFooter ul {
  list-style: none;
}

#sobreFooter {
	width: 40%;
}

#menuFooter {
	width: 20%;
}

#menuFooter img{
	margin-top: 15px;
	width: 100%;
}

#contatoFooter {
	width: 40%;
}

#contatoFooter ul li {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

footer a:hover {
  color: white;
}

footer #bottomFooter {
  background-color: black;
  color: white;
  font-size: 0.8rem;
  text-align: center;
  width: 100%;
}

a {
  /* Remove a decoração padrão do elemento. */
  text-decoration: none;

  /* Definir a cor da fonte para o padrão do elemento pai. */
  color: inherit;
}

/* Altera o estilo dos elementos para serem apresentados */
/* em telas menores que 717px. */
@media only screen and (max-width: 825px) {
  #openMenu,
  #closeMenu {
    /* Retorna a visibilidade padrão. */
    display: block;
  }

  #openMenu {
    /* Espaço a esquerda será preenchido automaticamente
		   colocando os itens a direita. */
    margin-left: auto;
  }

  #closeMenu {
    /* Torna a posição do elemento fixa. */
    position: fixed;

    /* Dispõe o elemento a 15px da esquerda. */
    right: 15px;

    /* Dispõe o elemento a 15px do topo. */
    top: 15px;
  }

  nav {
    /* Torna a posição do elemento fixa. */
    position: fixed;

    /* Ocupa 100% da largura da tela de exibição. */
    width: 100vw;

    /* Ocupa 100% da altura da tela de exibição. */
    height: 100vh;

    /* Cor em RGB, mais transparência. */
    background: rgba(255, 255, 255, 0.8);

    /* Dispõe os itens em coluna. */
    flex-direction: column;

    /* Alinha os itens na horizontal. */
    align-items: center;

    /* Alinha os itens na vertical. */
    justify-content: center;

    /* Remove a margem externa de todos os lados do elemento. */
    margin: 0;

    /* Oculta o elemento. */
    display: none;

    /* Invisivel */
    opacity: 0;

    /* Velocidade de transição de um estado para outro. */
    transition: 0.3s;
  }

  nav a {
    /* Margem de todos os lados. */
    margin: 3%;
  }

  .boxPainel {
    grid-template-columns: 1fr 1fr;
  }

  footer #bodyFooter {
	flex-direction: column;
  }

  footer #sobreFooter {
	width: 100%;
  }

  footer #contatoFooter {
	width: 100%;
  }

  footer #menuFooter {
	width: 100%;
  }

}

@media only screen and (max-width: 480px) {
  header #logo {
    max-width: 30%;
  }

  #logo_text1 {
    font-size: 1em;
  }

  #logo_text2 {
    font-size: 0.8em;
  }

  #logo_text3 {
    font-size: 0.7em;
  }
  .conteinerServicos {
    padding-left: 0;
    padding-right: 0;
  }
  .boxPainel {
    grid-template-columns: 1fr;
  }


}