/* DIV PERGUNTA com fundo cinza MEDIO e texto*/
.pergunta {
	margin-top: -20px;
    padding: 20px; /* Espaço interno da div */
    margin: 10px 0; /* Espaço externo (vertical) */
    border-radius: 8px; /* Cantos arredondados */
    width: 100%; /* Ajusta a largura da div conforme o conteúdo */
    position: relative; /* Para permitir posicionamento relativo da imagem */
	right: 0; /* Posiciona à direita */
    top: 0px; /* Ajusta a distância do topo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    display: flex; /* Adiciona flexbox para centralizar perguntas */
    flex-direction: column; /* Flexbox no sentido coluna */
    align-items: center; /* Centraliza as perguntas horizontalmente */
    justify-content: center; /* Centraliza as perguntas verticalmente */
    text-align: center; /* Centraliza o texto */
	 background-color: #f7f7f7; /* fundo cinza claro */
 }

.pergunta h3 {
	 background-color: #CBC1C0; /* Cor de fundo cinza médio */
    font-size: 20px; /* Tamanho da fonte do título */
    color: #fff; /* Cor do título (branca para contraste) */
    margin-bottom: 2px; /* Espaço abaixo do título */
	
}

.pergunta blockquote {
  font-size: 19px; /* Tamanho da fonte do parágrafo */
	 color: #00698f; /* cor azul */
  font-weight: bold; /* negrito */
  font-style: italic; /* itálico */
 
  background-color: #f7f7f7; /* fundo cinza claro */
  padding: 2px; /* espaçamento interno */
  border: 8px solid #ddd; /* borda cinza */
}


.pergunta p {
	 background-color: #CBC1C0; /* Cor de fundo cinza médio */
    font-size: 18px; /* Tamanho da fonte do parágrafo */
    color: #fff; /* Cor do parágrafo (branca para contraste) */
    margin-bottom: 5px; /* Espaço abaixo do parágrafo */
}


.pergunta span {
    font-style: italic; /* itálico */
	background-color: #CBC1C0; /* Cor de fundo cinza médio */
    font-size: 20px; /* Tamanho da fonte do título da pergunta */
    color: #333; /* Cor do título da pergunta */
    font-weight: bold; /* Deixa o título em negrito */
}

.pergunta p {
    background-color: #CBC1C0; /* Cor de fundo cinza médio */
    font-size: 16px; /* Tamanho da fonte do texto da resposta */
    color: #555; /* Cor do texto da resposta */
    margin-top: 2px; /* Distância do texto em relação ao título da pergunta */
}

/* Estilos para a imagem */
.images img {
    width: 100%; /* A imagem ocupa toda a largura disponível */
    height: auto; /* Ajusta a altura proporcionalmente */
    border-radius: 8px; /* Bordas arredondadas na imagem */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efeito de transição suave */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Sombra na imagem */
    margin-top: 10px; /* Adiciona espaço acima da imagem */
    max-width: 100%; /* Garante que a imagem nunca ultrapasse 100% da largura do contêiner */
}

/* Efeito de hover na imagem */
.images img:hover {
    transform: scale(1.05); /* Aumenta a imagem levemente ao passar o mouse */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7); /* Aumenta a sombra ao passar o mouse */
}
/* Responsividade */
@media (max-width: 968px) {
    .pergunta {
        padding: 15px; /* Reduz o padding em telas menores */
    }

    .images img {
        width: 100%; /* Garante que a imagem tenha largura total em telas menores */
        max-width: 100%; /* Limita a largura da imagem em telas pequenas */
    }

    .pergunta h3 {
        font-size: 18px; /* Ajusta o tamanho do título em telas menores */
    }

    .pergunta p {
        font-size: 18px; /* Ajusta o tamanho da descrição em telas menores */
    }

    .pergunta span {
		font-weight: bold; /* negrito */
        font-style: italic; /* itálico */
        font-size: 20px; /* Ajusta o tamanho da pergunta em telas menores */
    }

    .pergunta p {
        font-size: 18px; /* Ajusta o tamanho da resposta em telas menores */
    }

    .images img {
        width: 100%; /* Garante que a imagem tenha largura total em telas menores */
    }
}

/* DIV meu-texto */
.meu-texto {
    font-family: Arial, sans-serif;
    color: #0733ED;
    margin-top: 500px; /* adiciona espaço em branco acima do elemento */
}

.meu-texto b {
    font-weight: bold;
    font-size: 18px;
    color: #0733ED;
}

.meu-texto p {
    font-size: 18px;
}


/* Responsividade */
@media (max-width: 768px) {  /* Para telas menores que 768px, como celulares */
    .meu-texto {
        margin-top: 530px; /* diminui a margem superior para telas menores */
    }
    .meu-texto b {
        font-size: 20px; /* diminui o tamanho da fonte */
    }
    .meu-texto p {
        font-size: 18px; /* diminui o tamanho da fonte */
    }
}

@media (max-width: 480px) {  /* Para telas menores que 480px, como celulares muito pequenos */
    .meu-texto {
        margin-top: 420px; /* diminui ainda mais a margem superior para telas pequenas */
    }
    .meu-texto b {
        font-size: 20px; /* diminui o tamanho da fonte */
    }
    .meu-texto p {
        font-size: 18px; /* diminui o tamanho da fonte */
    }
}



/* style.css para paragrafo-alternativo */

.paragrafo-alternativo {
    font-size: 18px;
    color: #0066cc; /* Azul */
    background-color: #f0f8ff; /* Azul claro */
    padding: 10px;
    border-radius: 5px;
	font-style: normal; /* Estilo normal */
	
    margin-bottom: 20px; /* ajusta o espaçamento entre os parágrafos */
}

/* style.css para em */

em {
    color: red; /* Cor inicial */
    font-size: 18px; /* Tamanho da fonte inicial */
    font-style: italic; /* Coloca o texto em itálico */
}


/* Div lateral com fundo verde claro e textos menores <div class="lade"> "*/

.lade {
    background-color: #4DD2FF; /* Cor de fundo verde claro */
    padding: 20px; /* Espaço interno da div */
    margin: 10px; /* Espaço externo */
    border-radius: 8px; /* Cantos arredondados */
    width: auto; /* Ajusta a largura da div conforme o conteúdo */
    position:0; /* Fixação à direita da tela */
    right: 0; /* Posiciona à direita */
    top: 60px; /* Ajusta a distância do topo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.lade h3 {
    font-size: 20px; /* Tamanho da fonte do título */
    color: #333; /* Cor do título */
    margin-bottom: 10px; /* Espaço abaixo do título */
}

.lade p {
    font-size: 18px; /* Tamanho da fonte do parágrafo */
    color: #555; /* Cor do parágrafo */
    margin-bottom: 10px; /* Espaço abaixo do parágrafo */
}

.lade span {
	font-weight: bold; /* negrito */
    font-style: italic; /* itálico */
    font-size: 20px; /* Tamanho da fonte dos spans */
    color: #000000; /* Cor dos spans */
    display: block; /* Cada span fica em uma nova linha */
    margin-bottom: 5px; /* Espaço entre os spans */
}


/* Efeito de hover na imagem */
.lade img:hover {
    transform: scale(1.05); /* Aumenta a imagem ao passar o mouse */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Aumenta a sombra ao passar o mouse */
}

/* Responsividade */
@media (max-width: 768px) {
    .lade {
        padding: 15px; /* Reduz o padding em telas menores */
    }

    .lade h3 {
        font-size: 18px; /* Ajusta o tamanho do título em telas menores */
    }

    .lade p {
        font-size: 18px; /* Ajusta o tamanho da descrição em telas menores */
    }

    .lade span {
		font-weight: bold; /* negrito */
        font-style: italic; /* itálico */
        font-size: 18px; /* Ajusta o tamanho da pergunta em telas menores */
    }

    .lade p {
        font-size: 18px; /* Ajusta o tamanho da resposta em telas menores */
    }

    .lade img {
        width: 100%; /* Garante que a imagem tenha largura total em telas menores */
    }
}

@media (max-width: 480px) {
    .lade {
        padding: 15px; /* Reduz o padding em telas menores */
    }

    .lade h3 {
        font-size: 18px; /* Ajusta o tamanho do título em telas menores */
    }

    .lade p {
        font-size: 18px; /* Ajusta o tamanho da descrição em telas menores */
    }

    .lade span {
		font-weight: bold; /* negrito */
        font-style: italic; /* itálico */
        font-size: 18px; /* Ajusta o tamanho da pergunta em telas menores */
    }

    .lade p {
        font-size: 18px; /* Ajusta o tamanho da resposta em telas menores */
    }

    .lade img {
        width: 100%; /* Garante que a imagem tenha largura total em telas menores */
    }
}



/* Div Box retratil Box incolor- com p-h-b- individual*/



.box {
  max-width: 900px; /* Define a largura máxima da div */
  margin: 0 auto; /* Centraliza a div horizontalmente */
  padding: 20px; /* Espaço interno da div */
  border: 1px solid #ddd; /* Borda da div */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra da div */
  box-sizing: border-box; /* Inclui a borda e o padding na largura da div */
  display: block; /* Exibe a div como um bloco */
}

.box header {
    max-width: auto; /* Largura máxima do elemento */
  height: auto; /* Altura automática do elemento */
  display: block; /* Tipo de exibição como bloco */
  padding: 0; /* Espaçamento interno como 0 */
  margin: 0; /* Margem como 0 */
}




  .box h1 {
    font-size: 20px; /* Tamanho da fonte do h1 */
    color: #3498db; /* Cor azul médio do h1 */
    margin-bottom: 10px; /* Margem inferior do h1 */
  }
      
       .box h2 {
    font-size: 20px; /* Tamanho da fonte do h1 */
    color: #6364E2; /* Cor azul médio do h1 */
    margin-bottom: 10px; /* Margem inferior do h1 */
  }
      
       .box h3 {
    font-size: 20px; /* Tamanho da fonte do h1 */
    color: #6E7793; /* Cor azul médio do h1 */
    margin-bottom: 10px; /* Margem inferior do h1 */
  }

  .box p {
    font-size: 18px; /* Tamanho da fonte do p */
    color: #c9e4ca; /* Cor gelo do p */
  }

.box li {
    font-size: 16px; /* Tamanho da fonte do p */
    color: #fff; /* Cor gelo do p */
  }
      
     .box b {
  font-size: 18px; /* Tamanho da fonte do b */
  color: #3498db; /* Cor azul médio do b */
  line-height: 1.2; /* Altura da linha do b */
  display: inline-block; /* Exibe o b como um bloco inline */
  padding: 5px 10px; /* Espaço interno do b */
  border-radius: 5px; /* Borda arredondada do b */
  background-color: #f7f7f7; /* Cor de fundo do b */
}

 
.box-imagem img {
  width: 100%; /* A imagem ocupa toda a largura disponível */
  height: auto; /* Ajusta a altura proporcionalmente */
  border-radius: 8px; /* Bordas arredondadas na imagem */
}
                  
                  /* Efeito de hover na imagem */
.box-imagem img:hover {
    transform: scale(1.35); /* Aumenta a imagem ao passar o mouse */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Aumenta a sombra ao passar o mouse */
                  
}

/* Media query para dispositivos móveis */

 @media only screen and (max-width: 768px) and (orientation: landscape) {
  header .box {
    height: auto;
    overflow-y: visible;
  }
}

@media only screen and (max-width: 480px) and (orientation: portrait) {
  header .box {
    height: auto;
    overflow-y: visible;
  }
}




/* DIV CLIENTE Fundo verde elogios"*/

.clique-2 {
    background-color: #CFE8CB; /* Cor de fundo verde médio */
    padding: 20px; /* Espaço interno da div */
    margin: 10px; /* Espaço externo */
    border-radius: 8px; /* Cantos arredondados */
    width: 100%; /* Ajusta a largura da div conforme o conteúdo */
    position: relative; /* Para permitir posicionamento relativo da imagem */
    right: 0; /* Posiciona à direita */
    top: 100px; /* Ajusta a distância do topo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.clique-2h3 {
    font-size: 20px; /* Tamanho da fonte do título */
    color: #fff; /* Cor do título (branca para contraste) */
    margin-bottom: 10px; /* Espaço abaixo do título */
}

.clique-2 p {
    font-size: 18px; /* Tamanho da fonte do parágrafo */
    color: #fff; /* Cor do parágrafo (branca para contraste) */
    margin-bottom: 10px; /* Espaço abaixo do parágrafo */
}

.clique-2 {
    background-color: #f4f4f4; /* Cor de fundo para as mensagens dos clientes */
    padding: 10px; /* Espaço interno da mensagem */
    margin-bottom: 15px; /* Espaço entre as mensagens */
    border-radius: 8px; /* Bordas arredondadas */
}

.clique-2 span {
    font-size: 18px; /* Tamanho da fonte do nome do cliente */
    color: #333; /* Cor do nome do cliente */
    font-weight: bold; /* Deixa o nome em negrito */
}

.clique-2 p alternativo {
    font-size: 16px; /* Tamanho da fonte do texto do cliente */
    color: #555; /* Cor do texto do cliente */
    margin-top: 5px; /* Distância do texto em relação ao nome do cliente */
}

/* Estilos para a imagem */
.clique-2 img {
    width: 100%; /* A imagem ocupa toda a largura disponível */
    height: auto; /* Ajusta a altura proporcionalmente */
    border-radius: 8px; /* Bordas arredondadas na imagem */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efeito de transição suave */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra na imagem */
}

/* Efeito de hover na imagem */
.clique-2 img:hover {
    transform: scale(1.05); /* Aumenta a imagem ao passar o mouse */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Aumenta a sombra ao passar o mouse */
}

/* Responsividade */
@media (max-width: 768px) {
    .clique-2 {
        padding: 15px; /* Reduz o padding em telas menores */
    }

    .clique-2 h3 {
        font-size: 18px; /* Ajusta o tamanho do título em telas menores */
    }

    .clique-2 p {
        font-size: 16px; /* Ajusta o tamanho da descrição em telas menores */
    }

    .clique-2 span {
        font-size: 16px; /* Ajusta o tamanho do nome dos clientes em telas menores */
    }

   .clique-2 p {
        font-size: 14px; /* Ajusta o tamanho do texto dos clientes em telas menores */
    }

    .clique-2 img {
        width: 100%; /* Garante que a imagem tenha largura total em telas menores */
    }
}


@media (max-width: 480px) {
    .clique-2 {
        padding: 15px; /* Reduz o padding em telas menores */
    }

    .clique-2 h3 {
        font-size: 18px; /* Ajusta o tamanho do título em telas menores */
    }

    .clique-2 p {
        font-size: 16px; /* Ajusta o tamanho da descrição em telas menores */
    }

    .clique-2 span {
        font-size: 16px; /* Ajusta o tamanho do nome dos clientes em telas menores */
    }

   .clique-2 p {
        font-size: 14px; /* Ajusta o tamanho do texto dos clientes em telas menores */
    }

    .clique-2 img {
        width: 100%; /* Garante que a imagem tenha largura total em telas menores */
    }
}




/* DIV clique"*/

.clique  {
    background-color: #CFE8CB; /* Cor de fundo verde médio */
    padding: 20px; /* Espaço interno da div */
    margin: 10px; /* Espaço externo */
    border-radius: 8px; /* Cantos arredondados */
    width: 93%; /* Ajusta a largura da div conforme o conteúdo */
    position: relative; /* Para permitir posicionamento relativo da imagem */
    right: 0; /* Posiciona à direita */
    top: 0px; /* Ajusta a distância do topo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.clique  h1 {
    font-size: 20px; /* Tamanho da fonte do título */
    color: #fff; /* Cor do título (branca para contraste) */
    margin-bottom: 10px; /* Espaço abaixo do título */
}

.clique  p {
    font-size: 18px; /* Tamanho da fonte do parágrafo */
    color: #fff; /* Cor do parágrafo (branca para contraste) */
    margin-bottom: 10px; /* Espaço abaixo do parágrafo */
}


.clique {
    position: relative; /* Garantir que a div está posicionada corretamente */
    z-index: 10; /* Definir um nível superior para garantir que a div fique acima de outros elementos */
    display: flex; /* Flexbox para alinhar os links lado a lado */
    flex-wrap: wrap; /* Caso o espaço fique pequeno, os links podem quebrar para a linha seguinte */
    gap: 10px; /* Espaçamento entre os links */
}

.clique a {
    display: inline-block; /* Exibe os links em linha */
    padding: 12px; /* Padding interno para aumentar a área clicável */
    text-decoration: none; /* Remover o sublinhado */
    background-color: #f0f0f0; /* Cor de fundo dos links */
    color: #333; /* Cor do texto */
    border-radius: 5px; /* Bordas arredondadas */
    transition: background-color 0.3s ease; /* Transição suave ao passar o mouse */
    z-index: 20; /* Garantir que o link fique acima de outros elementos */
}

.clique a:hover {
    background-color: #ddd; /* Cor de fundo ao passar o mouse */
}

.clique a:focus {
    outline: none; /* Remover a borda de foco padrão ao clicar */
}

.clique a:active {
    background-color: #bbb; /* Cor de fundo ao clicar */
}


/* DIV faq-section Perguntas e Respostas"*/


.faq-section details {
  margin-bottom: 12px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
  background-color: #fdfdfd;
   top: 0px; /* Ajusta a distância do topo */  
}

.faq-section summary {
  font-weight: bold;
  cursor: pointer;
}

.faq-section p {
  margin: 10px 0 0;
  color: #444;
}

/* DIV feedback-clientes Clientes elogiando"*/

.feedback-clientes {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5em 0em;
}

.feedback-clientes h2 {
  text-align: center;
  margin-bottom: 2em;
  font-size: 1.5rem;
}

.depoimento {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 16px;
  padding: 1em;
  margin-bottom: 1em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.depoimento .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.8em;
}

.depoimento footer {
  font-weight: 300;
  font-size: 1.0rem;
  color: #333;
  margin-bottom: 0,5em;
  border-radius: 16px;
  padding: 5px;
}

.depoimento blockquote {
  margin: 0;
  font-style: italic;
  font-size: 0.7rem;
  color: #444;
  line-height: 1.4; /* Espaçamento das linhas do texto"*/
  word-break: break-word;
}



/* DIV CARAC Fundo azul Características do sofá"*/

.carac {
    background-color: #34b1bf; /* Cor de fundo azul médio */
    padding: 20px; /* Espaço interno da div */
    margin: 10px; /* Espaço externo */
    border-radius: 8px; /* Cantos arredondados */
    width: 90%; /* Ajusta a largura da div conforme o conteúdo */
    position: relative; /* Para permitir posicionamento relativo da imagem */
    right: 0; /* Posiciona à direita */
    top: 0px; /* Ajusta a distância do topo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.carac h2 {
    font-size: 19px; /* Tamanho da fonte do título */
    color: #fff; /* Cor do título (branca para contraste) */
    margin-bottom: 10px; /* Espaço abaixo do título */
}

.carac h3 {
    font-size: 18px; /* Tamanho da fonte do título */
    color: #fff; /* Cor do título (branca para contraste) */
    margin-bottom: 10px; /* Espaço abaixo do título */
}

.carac p {
    font-size: 18px; /* Tamanho da fonte do parágrafo */
    color: #fff; /* Cor do parágrafo (branca para contraste) */
    margin-bottom: 10px; /* Espaço abaixo do parágrafo */
}

.carac {
    background-color: #34b1bf; /* Cor de fundo azul médio */
    padding: 10px; /* Espaço interno da mensagem */
    margin-bottom: 15px; /* Espaço entre as mensagens */
    border-radius: 8px; /* Bordas arredondadas */
}

.carac span {
    font-size: 19px; /* Tamanho da fonte do nome do cliente */
    color: #333; /* Cor do nome do cliente */
    font-weight: bold; /* Deixa o nome em negrito */
}

.carac p {
    font-size: 18px; /* Tamanho da fonte do texto do cliente */
    color: #555; /* Cor do texto do cliente */
    margin-top: 5px; /* Distância do texto em relação ao nome do cliente */
}



/* Estilos para a imagem */
.carac img {
    width: 90%; /* A imagem ocupa toda a largura disponível */
    height: auto; /* Ajusta a altura proporcionalmente */
    border-radius: 8px; /* Bordas arredondadas na imagem */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efeito de transição suave */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra na imagem */
}

/* Efeito de hover na imagem */
.carac img:hover {
    transform: scale(1.50); /* Aumenta a imagem ao passar o mouse */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Aumenta a sombra ao passar o mouse */
}

/* Responsividade */
@media (max-width: 768px) {
    .carac {
        padding: 15px; /* Reduz o padding em telas menores */
    }

   .carac h3 {
        font-size: 21px; /* Ajusta o tamanho do título em telas menores */
    }

    .carac p {
        font-size: 20px; /* Ajusta o tamanho da descrição em telas menores */
    }

    .carac span {
        font-size: 18px; /* Ajusta o tamanho do nome dos clientes em telas menores */
    }

    .carac p {
        font-size: 18px; /* Ajusta o tamanho do texto dos clientes em telas menores */
    }

   .carac img {
        width: 100%; /* Garante que a imagem tenha largura total em telas menores */
    }
}




.nova-div {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  background-color: #f7f7f7; /* Cor branco gelo */
  border: 1px solid #ddd; /* Cor branco acizentado */
  border-radius: 8px;
}

.nova-div a {
  font-size: 18px;
  color: #FF0000; /* Cor vermelha */
}

.nova-div p.texto-novo {
  font-size: 18px;
  color: #b0b0b0; /* Cor cinza claro */
  font-family: ' Open Sans ', sans-serif;
}

.nova-div h2 {
  font-size: 20px;
  color: #2f4f7f; /* Cor azul petroleo */
  font-family: ' Times New Roman ', serif;
}

.nova-div h3 {
  font-size: 20px;
  color: #4682b4; /* Cor azul neutro */
  font-family: ' Playfair Display ', serif;
}

.nova-div .texto-novo {
  font-size: 18px;
  color: #00FF29; /* Cor verde vivo */
  font-family: ' Lato ', sans-serif;
}

.nova-div a span {
  font-size: 18px;
  color: #FFFF00; /* Cor amarela */
}

.nova-div span {
  font-size: 18px;
  color: #F800FF; /* Cor pink */
  font-family: ' Merriweather ', serif;
    
}

.nova-div strong {
  font-size: 18px;
  color: #61CFCB; /* Cor verde agua */
}

.nova-div strong.texto-novo {
  font-size: 18px;
  color: #70704C; /* Cor Fendi */
}


.nova-div b {
  font-size: 18px;
  color: #4600FF; /* Cor azul-anil */
}

.nova-div li {
  font-size: 18px;
  color: #771804; /* Cor vermelho escuro */
}


.nova-div ol {
  font-size: 18px;
  color: #553289; /* Cor Lilas */
}


.nova-div blockquote {
  font-size: 20px;
  color: #333; /*Cor Preto */
  font-family: 'Georgia', serif;
  padding: 20px;
  border-left: 5px solid #ccc; /* Cria uma borda lateral */
}

.nova-div q {
  font-size: 20px;
  color: #999; /*Cor Cinza claro */
  font-family: 'Verdana', sans-serif;
  padding: 20px;
}


.nova-div i {
  font-size: 18px;
  color: #43600FF; /* Cor verde abacate */
}

.nova-div em {
  font-size: 18px;
  color: #4E0011; /* Cor de vinho */
}



/* DIV tema com fundo cinza e texto #b0b0b0*/
/* DIV tema com fundo azul claro #4DD2FF*/

.tema {
    background-color: #4DD2FF; /* Cor de fundo azul médio */
    padding: 5%; /* Espaço interno da div */
    margin: 10px; /* Espaço externo */
    border-radius: 8px; /* Cantos arredondados */
    width: 70%; /* Ajusta a largura da div conforme o conteúdo */
    position: relative; /* Para permitir posicionamento relativo da imagem */
    right: 10px; /* Posiciona à direita */
    top: 100px; /* Ajusta a distância do topo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.tema h3 {
    font-size: 20px; /* Tamanho da fonte do título */
    color: #333; /* Cor do título */
    margin-bottom: 10px; /* Espaço abaixo do título */
}

.tema p {
    font-size: 18px; /* Tamanho da fonte do parágrafo */
    color: #555; /* Cor do parágrafo */
    margin-bottom: 10px; /* Espaço abaixo do parágrafo */
}

.tema span {
    font-size: 16px; /* Tamanho da fonte dos spans */
    color: #777; /* Cor dos spans */
    display: block; /* Cada span fica em uma nova linha */
    margin-bottom: 5px; /* Espaço entre os spans */
}

/* Estilos para a imagem */

.tema {
  /* ... outros estilos ... */
  display: flex; /* Adiciona display flex para centralizar a imagem */
  justify-content: center; /* Centraliza a imagem horizontalmente */
  align-items: center; /* Centraliza a imagem verticalmente */
  top: 50px; /* Subi o box um pouco para cima */
}


.tema img {
    padding: 5%; /* Espaço interno da div */
    width: 100%; /* A imagem ocupa toda a largura disponível */
    height: 50%; /* Ajusta a altura proporcionalmente */
    border-radius: 8px; /* Bordas arredondadas na imagem */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efeito de transição suave */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra na imagem */
}

.tema img {
  width: 95%; /* Ajusta a largura da imagem para 95% */
}



.tema img {
  /* ... outros estilos ... */
  margin: 0 auto; /* Centraliza a imagem horizontalmente */
}

.tema img {
  position: relative; /* Define a posição da imagem como relativa */
  left: -10px; /* Ajusta a posição da imagem para a esquerda */
}


/* Efeito de hover na imagem */
.tema img:hover {
    transform: scale(1.25); /* Aumenta a imagem ao passar o mouse */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Aumenta a sombra ao passar o mouse */
}

/* Responsividade */
@media (max-width: 768px) {
    .tema {
        padding: 15px; /* Reduz o padding em telas menores */
    }

    .tema h3 {
        font-size: 18px; /* Ajusta o tamanho do título em telas menores */
    }

    .tema p {
        font-size: 16px; /* Ajusta o tamanho da descrição em telas menores */
    }

    .tema span {
        font-size: 14px; /* Ajusta o tamanho do texto em telas menores */
    }

    .tema img {
        width: 100%; /* Garante que a imagem tenha largura total em telas menores */
    }
}


/* Box Lateral - Comprar Agora */



 * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      margin-bottom: 10px;
    }
    body {
      background-color: #f9f9f9;
      color: #333;
      padding: 2rem;
    }
    .container {
      max-width: 1100px;
      margin: auto;
      background: #fff;
      border-radius: 12px;
      padding: 2rem;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      align-items: center;
      justify-content: center;
    }
    .content img {
      width: 100%;
      max-width: 480px;
      border-radius: 12px;
    }
    .text {
      flex: 1;
      min-width: 280px;
    }
    .text h2 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
      color: #2c3e50;
    }
    .text p {
      font-size: 1.1rem;
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }
    .btn {
      background-color: #5c6bc0;
      color: white;
      padding: 0.8rem 1.5rem;
      font-size: 1rem;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: background 0.3s ease;
    }
    .btn:hover {
      background-color: #3f51b5;
    }
    @media (max-width: 768px) {
      .content {
        flex-direction: column;
      }
    }



 .btn:hover {
      background-color: #3f51b5;
    }
    @media (max-width: 480px) {
      .content {
        flex-direction: column;
      }
    }









/* Estilo para as imagen-1 dentro da lista de sofás */
#sofa1Tab img {
    width: 100%;      /* Faz a imagem ocupar 100% do seu contêiner */
    height: auto;     /* Mantém a proporção da imagem */
    display: block;   /* Garante que a imagem seja tratada como um bloco */
    margin: 0 auto;   /* Centraliza a imagem se necessário */
}

/* Estilo para as imagen-2 dentro da lista de sofás */
#sofa2Tab img {
    width: 100%;      /* Faz a imagem ocupar 100% do seu contêiner */
    height: auto;     /* Mantém a proporção da imagem */
    display: block;   /* Garante que a imagem seja tratada como um bloco */
    margin: 0 auto;   /* Centraliza a imagem se necessário */
}

/* Estilo para as imagen-3 dentro da lista de sofás */
#sofa3Tab img {
    width: 100%;      /* Faz a imagem ocupar 100% do seu contêiner */
    height: auto;     /* Mantém a proporção da imagem */
    display: block;   /* Garante que a imagem seja tratada como um bloco */
    margin: 0 auto;   /* Centraliza a imagem se necessário */
}



/* Container do portfólio com flexbox */
.portfolio-container {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    gap: 6px; /* Espaço entre os itens */
    justify-content: space-between; /* Distribui os itens igualmente */
}



/* Cada item do portfólio */
.portofoliothumb {
    flex: 1 1 calc(25% - 20px); /* Cada item ocupa 25% do espaço, com gap de 20px */
    box-sizing: border-box; /* Inclui padding e margin no tamanho do item */
    position: relative;
    margin-bottom: 20px; /* Adiciona um pequeno espaçamento abaixo de cada item */
}

/* Estilos para as imagens */
.portofoliothumb img-adjust {
    width: 100%;   /* Imagem vai ocupar 100% da largura do contêiner */
    height: auto;  /* Mantém a proporção da imagem */
    display: block; /* Garante que a imagem seja um bloco */
    object-fit: cover; /* A imagem vai cobrir o contêiner sem distorção */
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
  .portofoliothumb {
    flex: 1 1 calc(48% - 10px); /* No celular e tablets, os itens ocupam 48% da largura */
  }
}

@media (max-width: 480px) {
  .portofoliothumb {
   
  }
  .portofoliothumb img-adjust {
    width: 100%; /* Garantir que a imagem ocupe 100% da largura do contêiner */
    height: 100%; /* Altura ajustada para ocupar 100% da altura do contêiner */
    object-fit: cover; /* As imagens se ajustarão completamente dentro do contêiner, preenchendo-o completamente */
  }
}



/* Responsividade SALA DECORADA para dispositivos móveis */
/* Estilização padrão para o portfólio */

.portfolio-container {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    gap:2px; /* Espaço entre os itens */
    justify-content: space-between; /* Distribui os itens igualmente */
    margin-bottom: 1px; /* Espaçamento vertical entre as linhas */
    
}

.portfolio-container h3 {
        font-size: 18px; /* Ajusta o tamanho do título em telas menores */
    }


.portfolio-container p {
        font-size: 16px; /* Ajusta o tamanho da descrição em telas menores */
    }

    



.portofoliothumb  h3 {
        font-size: 18px; /* Ajusta o tamanho do título em telas menores */
    }

.portofoliothumb  p {
        font-size: 16px; /* Ajusta o tamanho da descrição em telas menores */
    }





/* A imagem dentro do portfólio */

.portfolio-container {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    gap:2px; /* Espaço entre os itens */
    justify-content: space-between; /* Distribui os itens igualmente */
    margin-bottom: 1px; /* Espaçamento vertical entre as linhas */
    
}



.portofoliothumb img-especial {
      gap:30px; /* Espaço entre os itens */
  display: block;
 width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

/* Efeito de zoom leve ao passar o mouse (opcional) */
.portofoliothumb:hover img-especial {
  transform: scale(1.05);
}

/* RESPONSIVIDADE */

/* Para telas normais e tablets */
@media (max-width: 768px) {
  /* Permite que os itens se ajustem bem, cada um ocupando cerca de 48% da largura com um pequeno gap */
  .portfolio-container .three.columns {
    width: calc(48% - 5px);
    box-sizing: border-box;
  }
}

/* Para dispositivos móveis (celulares) */
@media (max-width: 480px) {
  .portfolio-container .three.columns {
    width: 100%;      /* Cada item ocupa toda a largura */
    padding: 2px;   /* Pequeno espaçamento horizontal interno */
      height: auto;
    box-sizing: border-box;
    margin-bottom: 5px; /* Espaçamento vertical entre as linhas */
  }
}
/* A imagem dentro do portfólio */
.portofoliothumb img-especial {
      gap:1px; /* Espaço entre os itens */
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

/* Efeito de zoom leve ao passar o mouse (opcional) */
.portofoliothumb:hover img-especial {
  transform: scale(1.05);
}


/* Botão WhatsApp */
.pulse-button {
  animation: piscar 2s infinite; /* Aplica uma animação de piscar repetida infinitamente com duração de 2 segundos. */
  height: 100px; /* Define a altura fixa do botão como 100px. */
  position: fixed; /* Fixa o botão em uma posição especÃfica na tela, independente de rolagem. */
  bottom: 60px; /* Posiciona o botão a 60px da parte inferior da tela. */
  right: 25px; /* Posiciona o botão a 25px do lado direito da tela. */
  z-index: 99999; /* Garante que o botão fique acima de outros elementos na página. */
  box-shadow: 0px 0px 15px rgba(0, 50, 0, 0.5); /* Adiciona uma sombra ao botão para destacá-lo. */
  border: 2px solid #008000; /* Define uma borda sólida verde com espessura de 2px. */
  border-radius: 10px; /* Adiciona bordas arredondadas com raio de 10px. */
}

.whatsapp-texto {
  font-size: 16px; /* Define o tamanho da fonte como 16px. */
  position: fixed; /* Fixa o texto em uma posição especÃfica na tela. */
  bottom: 10px; /* Posiciona o texto a 10px da parte inferior da tela. */
  right: 25px; /* Posiciona o texto a 25px do lado direito da tela. */
  color: #000; /* Define a cor do texto como preto. */
  background: #fff; /* Define o fundo como branco. */
  padding: 5px; /* Adiciona um espaçamento interno de 5px. */
  border-radius: 5px; /* Adiciona bordas arredondadas com raio de 5px. */
  box-shadow: 0px 0px 10px rgba(0, 50, 0, 0.2); /* Adiciona uma sombra ao texto para destacá-lo. */
  border: 1px solid #008000; /* Define uma borda sólida verde com espessura de 1px. */
}

@keyframes piscar {
  0% { opacity: 1; } /* Define a opacidade inicial como 1 (totalmente visÃvel). */
  50% { opacity: 0.10; } /* Reduz a opacidade para 0.10 no meio da animação (quase invisÃvel). */
  100% { opacity: 1; } /* Restaura a opacidade para 1 no final da animação. */
}

.botao-whatsapp {
  background-color: #fff; /* Define a cor de fundo do botão como branco. */
  border-radius: 5px; /* Adiciona bordas arredondadas com raio de 5px. */
  padding: 5px; /* Adiciona espaçamento interno (padding) de 5px ao conteúdo do botão. */
  position: fixed; /* Fixa o botão em uma posicao especifica na tela. */
  bottom: 10px; /* Posiciona o botão a 10px da parte inferior da tela. */
  right: 25px; /* Posiciona o botão a 25px do lado direito da tela. */
  font-size: 16px; /* Define o tamanho da fonte como 16px. */
  color: #000; /* Define a cor do texto como preto. */
}

.botao-whatsapp::before {
  content: "📞 WhatsApp - Iniciar Conversa"; /* Adiciona texto antes do conteúdo principal do botão. */
  display: block; /* Faz o pseudo-elemento ocupar uma nova linha (bloco). */
  position: absolute; /* Posiciona o pseudo-elemento em relação ao botão. */
  top: 0; /* Alinha o pseudo-elemento ao topo do botão. */
  left: 0; /* Alinha o pseudo-elemento à esquerda do botão. */
  width: 100%; /* Faz o pseudo-elemento ocupar toda a largura do botão. */
  height: 100%; /* Faz o pseudo-elemento ocupar toda a altura do botão. */
  background-color: #fff; /* Define a cor de fundo do pseudo-elemento como branco. */
  border-radius: 5px; /* Adiciona bordas arredondadas ao pseudo-elemento. */
  padding: 5px; /* Adiciona espaçamento interno ao pseudo-elemento. */
  font-size: 16px; /* Define o tamanho da fonte no pseudo-elemento. */
  color: #000; /* Define a cor do texto no pseudo-elemento como preto. */
}

.botao-whatsapp:hover::before {
  content: "Clique para iniciar conversa no WhatsApp"; /* Altera o texto exibido no pseudo-elemento ao passar o mouse. */
  background-color: #f7f7f7; /* Muda a cor de fundo do pseudo-elemento ao passar o mouse. */
}