body,
html {
  margin: 0; /* Remove margens padrão */
  padding: 0; /* Remove paddings padrão */
  width: 100%; /* Garante que o body e html ocupem 100% */
  box-sizing: border-box; /* Inclui paddings e bordas no cálculo */
  padding-top: 60px;
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@ AV - TOPNAV - TOPNAV - TOPNAV - TOPNAV - TOPANV @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

.topnav {
  position: sticky; /* Mantém o topnav fixo no topo ao rolar */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fdfdfd;
  padding: 10px 0; /* Apenas padding vertical */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 0; /* Remove qualquer margem */
  width: 100%; /* Garante que ocupe toda a largura */
  position: fixed; /* Fixa no topo da página */
  top: 0; /* Alinha ao topo */
  left: 0; /* Inicia da borda esquerda */
  z-index: 150000; /* Certifique-se de que o topnav está acima do botão */
  height: auto; /* Ajusta a altura automaticamente, baseado no padding */
}

/*@@@@@@@ topnav ajuste imagem em telasa acima 1280px tela grande @@@@@@*/

.link-sem-decoracao a {
  text-decoration: none; /* Remover sublinhado */
  color: inherit; /* Herdar a cor do texto do elemento pai */
}

@media (min-width: 1280px) {
  .topnav .logo img {
    width: 150px;
    height: auto;
    margin-left: 60px;
  }
}

/*###### topnav ajsut img end - img topnav ajuste end #################*/

.logo img {
  width: 150px;
  height: auto;
  margin-left: 10px;
}

.links-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links-top p {
  margin: 0 20px;
  cursor: pointer;
  color: #3d3838;
  transition: color 0.3s ease;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}

.links-top p:hover {
  color: #ccc;
}

.side-btn {
  display: flex;
  align-items: center; /* Para alinhar verticalmente */
  justify-content: center; /* Opcional: centraliza horizontalmente */
  margin-top: 13px; /* Ajuste o valor conforme necessário */
}

@media (max-width: 870px) {
  .side-btn {
    display: none;
  }
}

@media (min-width: 1024px) {
  .side-btn {
    margin-right: 10px;
  }
}

.agendar {
  height: 50px;
  width: 185px;
  background-color: #000000;
  font-size: 18px;
  border-radius: 20px;
  border: none;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
  display: flex; /* Ativa Flexbox */
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente (ajustável) */
  gap: 10px; /* Espaçamento entre a imagem e o texto */
  transition: background-color 0.3s ease;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); /* Sombra suave */
  margin-right: 20px;
}

.agendar img {
  height: 25px; /* Ajuste conforme necessário */
  margin: 0; /* Remove margens extras */
}

.ahendar:hover {
  background-color: #000000; /* cor rosa mais escura ao passar o mouse */
}

.agendar {
  transition: transform 0.3s ease;
}

/* Quando o cursor passa sobre o botão */
.agendar:hover {
  transform: scale(1.1); /* Aumenta o tamanho do botão em 10% */
}

/* Quando o botão é clicado */
.agendar:active {
  transform: scale(0.9); /* Reduz o tamanho do botão em 10% */
}

/* ############################################################################################
TOPNAV END - TOPNAV END - TOPNAV END - TOPNAV END - TOPNAV END #############################*/

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
MENU & DROPDOWN - MENU & DROPDOWN - MENU & DROPDOWN @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* Esconder menu padrão em telas maiores */
.menu {
  display: none;
}

/* Ajuste do botão do menu */

/*aumentar um pouco o tamanho do botao menu em telas abaixo abaixo de 601px @@@@@@@@@*/

/*#### tamanho do botao 600px end ###############################################3*/

.menu img {
  width: 35px; /* Tamanho reduzido do botão */
  height: auto;
  cursor: pointer;
  margin: 20px;
}

/*  Dropdown estilizado*/
.dropdown-content {
  display: none; /* Oculta inicialmente */
  position: fixed; /* Fixa o dropdown */
  margin-top: 196px;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff; /* Fundo branco */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra mais destacada */
  padding: 15px;
  border-radius: 10px; /* Cantos mais arredondados */
  z-index: 1000;
  text-align: center;
  width: 80%;
  max-width: 320px;
  animation: fadeIn 0.3s ease-in-out; /* Efeito de entrada */
}

/* Animação de entrada */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* @@@@@@@@@@ @@@@@@ Estilo dos itens do dropdown@@@@@@@@@@@@ */
.dropdown-content p {
  margin: 10px 0;
  cursor: pointer;
  color: #333; /* Tom de texto mais suave */
  font-family: "Lucida Sans", sans-serif;
  font-size: 18px;
  transition: all 0.3s ease;
  padding: 10px;
  border-radius: 5px;
}

/* Hover com fundo destacado */
.dropdown-content p:hover {
  background-color: #f0f0f0;
  color: #555;
}

/* Marcar o item ativo */
.dropdown-content p.active {
  background-color: #e0e0e0;
  color: #000;
  font-weight: bold;
}

/* Ajuste de links dentro de parágrafos */
.dropdown-content p a {
  text-decoration: none;
  color: inherit;
}
/*####### estilos itens dropdown end ################################*/

/* Melhor acessibilidade: foco visível */
.dropdown-content p:focus {
  outline: 2px dashed #aaa;
  background-color: #ddd;
}

/* Exibir menu dropdown em telas menores */
@media screen and (max-width: 650px) {
  .links-top,
  .btn-top {
    display: none;
  }

  .menu {
    display: block;
    position: relative;
  }
}

/* ##########################################################################################
MENU & DROPDOWN END - MENU & DROPDOWN END - MENU & DROPDOWN END ########################## */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
DIV 1 - DIV 1 - DIV 1 - DIV 1 - DIV 1 - DIV 1 - DIV 1 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* DIV1 EM TELAS GRANDES APENAS @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* Esconde a .div1 por padrão */
.div1 {
  display: none;
}

/* Exibe a .div1 apenas em telas acima de 600px */
@media screen and (min-width: 601px) {
  .div1 {
    display: block;
  }
}

/* DIV1 EM TELAS GRANDES APENAS - END #################################################*/

.div1 {
  position: relative; /* Necessário para usar posicionamento absoluto nos filhos */
  width: 100%;
}

.imagem {
  width: 100%; /* Largura total da viewport */
  height: auto; /* Mantém proporção */
}

.textos-horizontais {
  display: none; /* Esconde por padrão */
  position: absolute; /* Permite posicionamento sobre a imagem */
  top: 48%; /* Centraliza verticalmente */
  left: 5%; /* Posiciona no lado esquerdo */
  transform: translateY(-50%); /* Ajusta para alinhar ao centro verticalmente */
  font-family: "Lucida Sans", sans-serif;
  text-align: left; /* Texto alinhado à esquerda */
  background-color: transparent; /* Sem fundo por padrão */
}

/* @@@@@@@@@@@@@ TEXTOS HORIZONTAIS EM TELAS ACIMA DE 600PX APENAS @@@@@@@@@@@@@@ */

.textos-horizontais {
  display: none; /* Esconde o elemento por padrão */
}

@media screen and (min-width: 601px) {
  .textos-horizontais {
    display: block; /* Mostra o elemento em telas acima de 599px */
  }
}

/* ########## TEXTOS HORIZONTAIS ACIMA DE TELA 600X APENAS - END ################ */

.texto-capa1,
.texto-capa2,
.texto-capa3 {
  opacity: 0;
  transform: translateX(-50%);
  animation: aparecer 1s forwards;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.texto-capa3 {
  transform: translateX(50%);
  animation: aparecerDireita 1s forwards;
}

@keyframes aparecerDireita {
  from {
    opacity: 0;
    transform: translateX(50%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* @@@@@@@@@@@@@@@@@ TEXTOS HORIZONTAIS MEDIDAS DIFERENTES EM TELAS ACIMA DE 600PX @@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

@media screen and (min-width: 601px) {
  .texto-capa1 {
    color: #59460e;
    font-size: 27px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -32px;
    margin-left: 35px;
  }

  .texto-capa2 {
    color: rgb(41, 41, 104);
    font-size: 18px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -30px;
    margin-left: 35px;
  }

  .texto-capa3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 25px;
    margin-top: -10px;
    color: rgb(32, 32, 32);
    margin-left: 35px;
  }

  .agendar-consulta-btn {
    display: flex;
    align-items: center; /* Alinha verticalmente o texto e a imagem */
    justify-content: center; /* Centraliza o conteúdo dentro do botão */
    background-color: #000000; /* cor do botão */
    color: #ffffff; /* cor do texto branco */
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Adiciona uma sombra suave */
    font-family: Arial, Helvetica, sans-serif;
    height: 27px;
    width: 210px;
    margin-top: -17px;
    margin-left: 35px;
  }

  /* Alinhamento da imagem à esquerda do texto */
  .agendar-consulta-btn img {
    width: 23px; /* Define o tamanho da imagem */
    height: auto; /* Mantém a proporção da imagem */
    margin-right: 10px; /* Aumenta o espaçamento à direita da imagem para dar mais espaço ao texto */
  }

  /* Efeito hover do botão */
  .agendar-consulta-btn:hover {
    background-color: #000000; /* Cor do botão mais escura */
  }
}

@media screen and (min-width: 650px) {
  .texto-capa1 {
    color: #59460e;
    font-size: 27px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -30px;
    margin-left: 35px;
  }

  .texto-capa2 {
    color: rgb(41, 41, 104);
    font-size: 18px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -30px;
    margin-left: 35px;
  }

  .texto-capa3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 25px;
    margin-top: -10px;
    color: rgb(32, 32, 32);
    margin-left: 35px;
  }

  .agendar-consulta-btn {
    display: flex;
    align-items: center; /* Alinha verticalmente o texto e a imagem */
    justify-content: center; /* Centraliza o conteúdo dentro do botão */
    background-color: #000000; /* cor do botão */
    color: #ffffff; /* cor do texto branco */
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Adiciona uma sombra suave */
    font-family: Arial, Helvetica, sans-serif;
    height: 27px;
    width: 210px;
    margin-top: -17px;
    margin-left: 35px;
  }

  /* Alinhamento da imagem à esquerda do texto */
  .agendar-consulta-btn img {
    width: 23px; /* Define o tamanho da imagem */
    height: auto; /* Mantém a proporção da imagem */
    margin-right: 10px; /* Aumenta o espaçamento à direita da imagem para dar mais espaço ao texto */
  }

  /* Efeito hover do botão */
  .agendar-consulta-btn:hover {
    background-color: #050505; /* Cor do botão mais escura */
  }
}

@media screen and (min-width: 768px) {
  .texto-capa1 {
    color: #59460e;
    font-size: 34px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -30px;
    margin-left: 35px;
  }

  .texto-capa2 {
    color: rgb(41, 41, 104);
    font-size: 18px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -30px;
    margin-left: 35px;
  }

  .texto-capa3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 32px;
    margin-top: -10px;
    color: rgb(32, 32, 32);
    margin-left: 35px;
  }

  .agendar-consulta-btn {
    display: flex;
    align-items: center; /* Alinha verticalmente o texto e a imagem */
    justify-content: center; /* Centraliza o conteúdo dentro do botão */
    background-color: #000000; /* cor do botão */
    color: #ffffff; /* cor do texto branco */
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Adiciona uma sombra suave */
    font-family: Arial, Helvetica, sans-serif;
    height: 27px;
    width: 210px;
    margin-top: -17px;
    margin-left: 35px;
  }

  /* Alinhamento da imagem à esquerda do texto */
  .agendar-consulta-btn img {
    width: 23px; /* Define o tamanho da imagem */
    height: auto; /* Mantém a proporção da imagem */
    margin-right: 10px; /* Aumenta o espaçamento à direita da imagem para dar mais espaço ao texto */
  }

  /* Efeito hover do botão */
  .agendar-consulta-btn:hover {
    background-color: #000000; /* Cor do botão mais escura */
  }
}

@media screen and (min-width: 790px) {
  .texto-capa1 {
    color: #59460e;
    font-size: 35px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -30px;
    margin-left: 35px;
  }

  .texto-capa2 {
    color: rgb(41, 41, 104);
    font-size: 18px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -30px;
    margin-left: 35px;
  }

  .texto-capa3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 32px;
    margin-top: -10px;
    color: rgb(32, 32, 32);
    margin-left: 35px;
  }

  .agendar-consulta-btn {
    display: flex;
    align-items: center; /* Alinha verticalmente o texto e a imagem */
    justify-content: center; /* Centraliza o conteúdo dentro do botão */
    background-color: #000000; /* cor do botão */
    color: #ffffff; /* cor do texto branco */
    border: none;
    font-size: 17px;
    cursor: pointer;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Adiciona uma sombra suave */
    font-family: Arial, Helvetica, sans-serif;
    height: 27px;
    width: 210px;
    margin-top: -17px;
    margin-left: 35px;
  }

  /* Alinhamento da imagem à esquerda do texto */
  .agendar-consulta-btn img {
    width: 23px; /* Define o tamanho da imagem */
    height: auto; /* Mantém a proporção da imagem */
    margin-right: 10px; /* Aumenta o espaçamento à direita da imagem para dar mais espaço ao texto */
  }

  /* Efeito hover do botão */
  .agendar-consulta-btn:hover {
    background-color: #000000; /* Cor do botão mais escura */
  }
}

@media screen and (min-width: 905px) {
  .texto-capa1 {
    color: #59460e;
    font-size: 35px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -20px;
    margin-left: 65px;
  }

  .texto-capa2 {
    color: rgb(41, 41, 104);
    font-size: 18px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -30px;
    margin-left: 65px;
  }

  .texto-capa3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 32px;
    margin-top: -10px;
    color: rgb(32, 32, 32);
    margin-left: 65px;
  }

  .agendar-consulta-btn {
    display: flex;
    align-items: center; /* Alinha verticalmente o texto e a imagem */
    justify-content: center; /* Centraliza o conteúdo dentro do botão */
    background-color: #000000; /* cor do botão */
    color: #ffffff; /* cor do texto branco */
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Adiciona uma sombra suave */
    font-family: Arial, Helvetica, sans-serif;
    height: 27px;
    width: 210px;
    margin-top: -17px;
    margin-left: 65px;
  }

  /* Alinhamento da imagem à esquerda do texto */
  .agendar-consulta-btn img {
    width: 23px; /* Define o tamanho da imagem */
    height: auto; /* Mantém a proporção da imagem */
    margin-right: 10px; /* Aumenta o espaçamento à direita da imagem para dar mais espaço ao texto */
  }

  /* Efeito hover do botão */
  .agendar-consulta-btn:hover {
    background-color: #000000; /* Cor do botão mais escura */
  }
}

@media screen and (min-width: 1024px) {
  .texto-capa1 {
    color: #59460e;
    font-size: 46px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -10px;
    margin-left: 65px;
  }

  .texto-capa2 {
    color: rgb(41, 41, 104);
    font-size: 25px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -30px;
    margin-left: 65px;
  }

  .texto-capa3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 38px;
    margin-top: -10px;
    color: rgb(32, 32, 32);
    margin-left: 65px;
  }

  .agendar-consulta-btn {
    display: flex;
    align-items: center; /* Alinha verticalmente o texto e a imagem */
    justify-content: center; /* Centraliza o conteúdo dentro do botão */
    background-color: #000000; /* cor do botão */
    color: #ffffff; /* cor do texto branco */
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Adiciona uma sombra suave */
    font-family: Arial, Helvetica, sans-serif;
    height: 36px;
    width: 210px;
    margin-top: -30px;
    margin-left: 65px;
  }

  /* Alinhamento da imagem à esquerda do texto */
  .agendar-consulta-btn img {
    width: 23px; /* Define o tamanho da imagem */
    height: auto; /* Mantém a proporção da imagem */
    margin-right: 10px; /* Aumenta o espaçamento à direita da imagem para dar mais espaço ao texto */
  }

  /* Efeito hover do botão */
  .agendar-consulta-btn:hover {
    background-color: #000000; /* Cor do botão mais escura */
  }
}

@media screen and (min-width: 1070px) {
  .texto-capa1 {
    color: #59460e;
    font-size: 50px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: 25px;
    margin-left: 65px;
  }

  .texto-capa2 {
    color: rgb(41, 41, 104);
    font-size: 25px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -40px;
    margin-left: 65px;
  }

  .texto-capa3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 45px;
    margin-top: -5px;
    color: rgb(32, 32, 32);
    margin-left: 65px;
  }

  .agendar-consulta-btn {
    display: flex;
    align-items: center; /* Alinha verticalmente o texto e a imagem */
    justify-content: center; /* Centraliza o conteúdo dentro do botão */
    background-color: #000000; /* cor do botão */
    color: #ffffff; /* cor do texto branco */
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Adiciona uma sombra suave */
    font-family: Arial, Helvetica, sans-serif;
    height: 36px;
    width: 210px;
    margin-top: -34px;
    margin-left: 65px;
  }

  /* Alinhamento da imagem à esquerda do texto */
  .agendar-consulta-btn img {
    width: 23px; /* Define o tamanho da imagem */
    height: auto; /* Mantém a proporção da imagem */
    margin-right: 10px; /* Aumenta o espaçamento à direita da imagem para dar mais espaço ao texto */
  }

  /* Efeito hover do botão */
  .agendar-consulta-btn:hover {
    background-color: #000000; /* Cor do botão mais escura */
  }
}

/* ##################### END TEXTOS HORIZONTAIS MEDIDAS DIFERENTES EM TELAS ACIMDA DE 600PX ################
############################################################################### END #######################*/

/*
.texto-capa1 {

color: rgb(41, 41, 104);
font-size: 45px;
font-weight: bold;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;


}

.texto-capa2 {

color: rgb(41, 41, 104);
font-size: 30px;
font-weight: bold;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;


}

.texto-capa3{
  font-family:Georgia, 'Times New Roman', Times, serif;
  font-size: 40px;
  margin-top: -10px;
  color: rgb(32, 32, 32);

}
*/

/* DIV1 BTN @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ BTN DIV1 BTN DIV1 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  */

.agendar-consulta-btn,
.btn-servicos {
  transition: transform 0.3s ease;
}

/* Quando o cursor passa sobre o botão */
.agendar-consulta-btn:hover,
.btn-servicos:hover {
  transform: scale(1.1); /* Aumenta o tamanho do botão em 10% */
}

/* Quando o botão é clicado */
.agendar-consulta-btn:active,
.btn-servicos:active {
  transform: scale(0.9); /* Reduz o tamanho do botão em 10% */
}

/*#################################### BTN DIV1 END - BTN END - BTN END DIV 1 ###########################
###################################################################################################### */

/* ############################################################################################
DIV 1 END - DIV 1 END - DIV 1 END - DIV 1 END - DIV 1 END - DIV 1 END #############################*/

/* @@@@@@@@@@@@ DIV 2 EM TELAS ABAIXO DE 600PX @@@@@@@@@@@@@@@22 */

/* IMAGEM DO QUEM SOU APARECENDO EM TELAS ACIMA DE 599PX APENAS@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@ PARA COLOCAR A OUTRA IMAGEM, AMS IGUAL EM BAIXO @@@@@@@@@@@@@@ */

@media (max-width: 599px) {
  .quemsou-leftside {
    display: none;
  }

  .quemsou-content {
    margin-top: -55px;
  }
}

@media (min-width: 600px) {
  .quemsou-leftside {
    display: block;
  }
}

/* IMG QUEM SOU EM TELAS ACIMA DE 599 APENAS ##################################
##### PARA POR ELA NO MEIO DOS TEXTO EM OUTRA DIV ################ */

/* IMAGEM DO LEFSIDE QUEM SOU CONFIGURADA NO MEIO DOS TEXTOS QUEM SOU @@@@@@@@@@@@@2
CONFIGURADA NO MEIO DOS TEXTOS QUEM SOU @@@@@@@@@@@@@@@@@@@@@@@@@@@*/

@media (max-width: 599px) {
  .quemsou-leftside1 .left-img1 {
    width: 100%; /* Faz a imagem ocupar no máximo a largura do container */
    height: auto; /* Mantém a proporção da imagem */
  }
}

@media (min-width: 600px) {
  .quemsou-leftside1 {
    display: none; /* Esconde em telas maiores */
  }
}


/*############### IMG QUEM SOU CONFIG NOM EO DO TEXTO ##################################
########################################################################*/

/* Por padrão, esconde a div2 */
.div2 {
  display: none; /* Esconde por padrão */
  position: relative; /* Para posicionamento absoluto dos elementos internos */
  width: 100%; /* Largura total */
  height: 100%; /* Definindo uma altura fixa para a div2 */
  z-index: 500;
}
/* Exibe a div2 apenas em telas com largura abaixo de 600px */
@media screen and (max-width: 600px) {
  .div2 {
    display: block; /* Torna a div2 visível em telas pequenas */
  }
}

/*TEXTOS-horizontais2 DA DIV2 - TEXTOS DA DIV2 - TEXTOS DA DIV2 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

/*TEXTOS HORIZIONTAIS CONTAINER 2 TAMANHS DIFERENTES TELAS MENORES @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

/* BTN 2 DA DIV 2 BTN DIV 2 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.agendar-consulta-btn2 {
  background-color: #000000; /* cor rosa */
  color: #ffffff; /* cor do texto branco */
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 40px;
  transition: background-color 0.3s ease;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Adiciona uma sombra suave */
  display: flex; /* Permite alinhar o texto e a imagem */
  align-items: center;
  cursor: pointer; /* Mostra o cursor de clique */
  z-index: 10; /* Garante que o botão fique acima da imagem */
}

.agendar-consulta-btn2 img {
  width: 16px; /* Reduz o tamanho do ícone para combinar com o botão menor */
  height: auto;
}

/* #################### END BTN 2 DIV 2 BTN ##########################################################*/

@media screen and (min-width: 320px) {
  .textos-horizontais-container2 {
    display: flex; /* Usando flexbox para centralizar */
    justify-content: center; /* Alinha os itens no centro horizontal */
    align-items: center; /* Alinha os itens no centro vertical */
    height: 100%; /* Garante que o container ocupe toda a altura da .div2 */
    position: absolute;
    margin-top: 10px;
    left: 0;
    width: 100%;
    margin-top: 100px;
  }

  .texto-capa1-2 {
    color: #59460e;
    font-size: 25px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }

  .texto-capa2-2 {
    color: rgb(41, 41, 104);
    font-size: 16px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: -30px;
  }

  .texto-capa3-2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 21px;
    font-weight: bold;
    color: rgb(32, 32, 32);
    margin-top: 15px;
  }
}

@media screen and (min-width: 375px) {
  .textos-horizontais-container2 {
    display: flex; /* Usando flexbox para centralizar */
    justify-content: center; /* Alinha os itens no centro horizontal */
    align-items: center; /* Alinha os itens no centro vertical */
    height: 100%; /* Garante que o container ocupe toda a altura da .div2 */
    position: absolute;
    margin-top: 125px;
    left: 0;
    width: 100%;
  }

  .agendar-consulta-btn2 {
    position: absolute; /* Permite posicionar o botão em relação ao pai */
    top: 495px;
    left: 50%; /* Centraliza horizontalmente */
    transform: translate(
      -50%,
      -50%
    ); /* Ajusta o alinhamento devido ao ponto de origem */
    z-index: 10; /* Garante que o botão fique acima da imagem */
    background-color: #000000; /* Cor do botão */
    color: white; /* Cor do texto */
    padding: 5px 30px; /* Reduz a altura (padding vertical menor) e aumenta a largura (padding horizontal maior) */
    border: none; /* Remove a borda padrão */
    border-radius: 20px; /* Bordas arredondadas, mas menos "gordo" */
    cursor: pointer; /* Mostra o cursor de clique */
    display: flex; /* Permite alinhar o texto e a imagem */
    align-items: center;
    gap: 8px; /* Espaço entre o texto e a imagem */
    font-size: 14px; /* Ajusta o tamanho do texto para caber melhor */
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap; /* Garante que o texto não quebre para outra linha */
  }

  .agendar-consulta-btn2 img {
    width: 16px; /* Reduz o tamanho do ícone para combinar com o botão menor */
    height: auto;
  }

  .texto-capa1-2 {
    color: #59460e;
    font-size: 30px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }

  .texto-capa2-2 {
    color: rgb(41, 41, 104);
    font-size: 20px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }

  .texto-capa3-2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 25px;
    margin-top: -10px;
    color: rgb(32, 32, 32);
  }
}

@media screen and (min-width: 425px) {
  .textos-horizontais-container2 {
    display: flex; /* Usando flexbox para centralizar */
    justify-content: center; /* Alinha os itens no centro horizontal */
    align-items: center; /* Alinha os itens no centro vertical */
    height: 100%; /* Garante que o container ocupe toda a altura da .div2 */
    position: absolute;
    margin-top: 148px;
    left: 0;
    width: 100%;
    z-index: 200000;
  }

  .agendar-consulta-btn2 {
    position: absolute; /* Permite posicionar o botão em relação ao pai */
    top: 535px;
    left: 50%; /* Centraliza horizontalmente */
    transform: translate(
      -50%,
      -50%
    ); /* Ajusta o alinhamento devido ao ponto de origem */
    z-index: 10; /* Garante que o botão fique acima da imagem */
    background-color: #000000; /* Cor do botão */
    color: white; /* Cor do texto */
    padding: 5px 30px; /* Reduz a altura (padding vertical menor) e aumenta a largura (padding horizontal maior) */
    border: none; /* Remove a borda padrão */
    border-radius: 20px; /* Bordas arredondadas, mas menos "gordo" */
    cursor: pointer; /* Mostra o cursor de clique */
    display: flex; /* Permite alinhar o texto e a imagem */
    align-items: center;
    gap: 8px; /* Espaço entre o texto e a imagem */
    font-size: 14px; /* Ajusta o tamanho do texto para caber melhor */
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap; /* Garante que o texto não quebre para outra linha */
  }

  .agendar-consulta-btn2 img {
    width: 16px; /* Reduz o tamanho do ícone para combinar com o botão menor */
    height: auto;
  }

  .texto-capa1-2 {
    color: #59460e;
    font-size: 34px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }

  .texto-capa2-2 {
    color: rgb(41, 41, 104);
    font-size: 20px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }

  .texto-capa3-2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 25px;
    margin-top: -10px;
    color: rgb(32, 32, 32);
  }
}

@media screen and (min-width: 475px) {
  .textos-horizontais-container2 {
    display: flex; /* Usando flexbox para centralizar */
    justify-content: center; /* Alinha os itens no centro horizontal */
    align-items: center; /* Alinha os itens no centro vertical */
    height: 100%; /* Garante que o container ocupe toda a altura da .div2 */
    position: absolute;
    margin-top: 162px;
    left: 0;
    width: 100%;
  }

  .agendar-consulta-btn2 {
    position: absolute; /* Permite posicionar o botão em relação ao pai */
    top: 615px;
    left: 50%; /* Centraliza horizontalmente */
    transform: translate(
      -50%,
      -50%
    ); /* Ajusta o alinhamento devido ao ponto de origem */
    z-index: 10; /* Garante que o botão fique acima da imagem */
    background-color: #000000; /* Cor do botão */
    color: white; /* Cor do texto */
    padding: 5px 30px; /* Reduz a altura (padding vertical menor) e aumenta a largura (padding horizontal maior) */
    border: none; /* Remove a borda padrão */
    border-radius: 20px; /* Bordas arredondadas, mas menos "gordo" */
    cursor: pointer; /* Mostra o cursor de clique */
    display: flex; /* Permite alinhar o texto e a imagem */
    align-items: center;
    gap: 8px; /* Espaço entre o texto e a imagem */
    font-size: 14px; /* Ajusta o tamanho do texto para caber melhor */
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap; /* Garante que o texto não quebre para outra linha */
  }

  .agendar-consulta-btn2 img {
    width: 16px; /* Reduz o tamanho do ícone para combinar com o botão menor */
    height: auto;
  }

  .texto-capa1-2 {
    color: #59460e;
    font-size: 37px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }

  .texto-capa2-2 {
    color: rgb(41, 41, 104);
    font-size: 18px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }

  .texto-capa3-2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 32px;
    margin-top: -10px;
    color: rgb(32, 32, 32);
  }
}

@media screen and (min-width: 525px) {
  .textos-horizontais-container2 {
    display: flex; /* Usando flexbox para centralizar */
    justify-content: center; /* Alinha os itens no centro horizontal */
    align-items: center; /* Alinha os itens no centro vertical */
    height: 100%; /* Garante que o container ocupe toda a altura da .div2 */
    position: absolute;
    margin-top: 140px;
    left: 0;
    width: 100%;
  }

  .agendar-consulta-btn2 {
    position: absolute; /* Permite posicionar o botão em relação ao pai */
    top: 670px;
    left: 50%; /* Centraliza horizontalmente */
    transform: translate(
      -50%,
      -50%
    ); /* Ajusta o alinhamento devido ao ponto de origem */
    z-index: 10; /* Garante que o botão fique acima da imagem */
    background-color: #000000; /* Cor do botão */
    color: white; /* Cor do texto */
    padding: 5px 30px; /* Reduz a altura (padding vertical menor) e aumenta a largura (padding horizontal maior) */
    border: none; /* Remove a borda padrão */
    border-radius: 20px; /* Bordas arredondadas, mas menos "gordo" */
    cursor: pointer; /* Mostra o cursor de clique */
    display: flex; /* Permite alinhar o texto e a imagem */
    align-items: center;
    gap: 8px; /* Espaço entre o texto e a imagem */
    font-size: 14px; /* Ajusta o tamanho do texto para caber melhor */
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap; /* Garante que o texto não quebre para outra linha */
  }

  .agendar-consulta-btn2 img {
    width: 16px; /* Reduz o tamanho do ícone para combinar com o botão menor */
    height: auto;
  }

  .texto-capa1-2 {
    color: #59460e;
    font-size: 50px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }

  .texto-capa2-2 {
    color: rgb(41, 41, 104);
    font-size: 20px;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }

  .texto-capa3-2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 35px;
    margin-top: -10px;
    color: rgb(32, 32, 32);
  }
}

/* TEXTOS HORIZONTAIS CONTAINER 2 TAMANHOS EM TELAS MENORES END ######################
              #####################################################################################*/

/* Centraliza o conteúdo dentro de .div2 */
.textos-horizontais-container2 {
  display: flex; /* Usando flexbox para centralizar */
  justify-content: center; /* Alinha os itens no centro horizontal */
  align-items: center; /* Alinha os itens no centro vertical */
  height: 100%; /* Garante que o container ocupe toda a altura da .div2 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Textos dentro de .textos-horizontais2 */
.textos-horizontais2 {
  color: rgb(47, 38, 104);
  text-align: center; /* Centraliza o texto */
  max-width: 90%; /* Garante que o texto não ultrapasse a largura da tela */
}

.texto-capa1-2,
.texto-capa2-2,
.texto-capa3-2 {
  opacity: 0;
  transform: translateX(-50%);
  animation: aparecer 1s forwards;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.texto-capa3 {
  transform: translateX(50%);
  animation: aparecerDireita 1s forwards;
}

@keyframes aparecerDireita {
  from {
    opacity: 0;
    transform: translateX(50%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*

.texto-capa1-2 {

color: rgb(41, 41, 104);
font-size: 20px;
font-weight: bold;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;


}

.texto-capa2-2 {

color: rgb(41, 41, 104);
font-size: 20px;
font-weight: bold;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;


}

.texto-capa3-2{
  font-family:Georgia, 'Times New Roman', Times, serif;
  font-size: 20px;
  margin-top: -10px;
  color: rgb(32, 32, 32);

}

*/

/* TEXTOS DA DIV2 END - TEXTOS DA DIV2 END ########################################## */

/*####### DIV2 ABAIXO DE TELAS 600PX END ################ */

/* @@@@ DIV3PINK BTN @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

/* Media query para telas menores que 600px */
/* Media query para telas menores que 600px */
/* Media query para telas menores que 600px */
@media (max-width: 599px) {
  .div3pink {
    display: flex; /* Exibe a div em telas menores que 600px */
    justify-content: center; /* Centraliza o botão horizontalmente */
    align-items: center; /* Centraliza o botão verticalmente */
  }
}

/* Media query para telas maiores ou iguais a 600px */
/* Media query para telas maiores ou iguais a 600px */
@media (min-width: 600px) {
  .div3pink {
    display: none !important; /* Força o ocultamento da div */
  }
}

/* Estilos principais da .div3pink */

/* div3pink com fundo com cor, apenas criando a div3 com botão em baixo

.div3pink {
height: 100px;
margin-top: -5px;
background-color: #b6aca2;
justify-content: center; 
align-items: center; 
position: relative; 
z-index: 1000; 

}*/

/* div3pink com imagem de fundo apenas e o botão junto
.div3pink {
  height: 170px;
  margin-top: -5px;
  background-image: url("./img/div3-bg.png"); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  display: flex; 
  justify-content: center;
  align-items: center; 
  position: relative;
  z-index: 1000;
}

*/

.div3pink {
  position: absolute; /* Posiciona de forma absoluta */
  top: 0%; /* Posiciona a 15% da altura da div2 */
  left: 50%; 
  transform: translateX(-50%); /* Centraliza o botão horizontalmente */
  z-index: 600; /* Garante que fique acima da div2 */
  background: none; /* Remove fundo, se houver */
}

.btn-altura {
  margin-top: 30px;
}

.btn-servicos-div3 {
  align-items: center; /* Centraliza o botão verticalmente */
  background-color: #000000; /* Cor do botão */
  color: #ffffff; /* Cor do texto */
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 40px;
  transition: background-color 0.3s ease;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Sombra do botão */
  z-index: 20; /* Assegura que o botão esteja acima de qualquer outro elemento */
}

.btn-sevicos-div3 :hover {
  background-color: #000000; /* cor rosa mais escura ao passar o mouse */
}

/*############## DIV3PINK BTN #######################################################
########################################################################*/

/* DIV  QUEM SOU EU @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.quemsou {
  margin-top: -5px;
  background-color: #f9f9f9;
}

.quemsou-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px; /* Espaço entre os lados */
  flex-wrap: wrap; /* Para responsividade */
  padding: 20px;
}

.quemsou h2 {
  color: #59460e;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  font-size: 29px;
}

/*@@ estilização do texto quemsoeu quemsou-rightside @@@@@@@@@@@@*/
.quemsou-rightside p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em; /* Aumenta o tamanho do texto */
  line-height: 1.8; /* Melhora o espaçamento entre as linhas */
  color: #333; /* Cor do texto para boa legibilidade */
  text-align: justify; /* Justifica o texto para um visual mais profissional */
}
/* estilização do texto quemsou-righstide end ############################*/

.quemsou p,
li {
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  color: #333; /* Cor do texto para boa legibilidade */
}

.quemsou-leftside1 img {
  width: 120px; /* Largura padrão para telas menores */
  height: 120px; /* Altura padrão para telas menores */
  border-radius: 50%; /* Faz a imagem ficar redonda */
  object-fit: cover; /* Ajusta o conteúdo para preencher o círculo corretamente */
}

/* Para telas maiores que 400px */
@media (min-width: 400px) {
  .quemsou-leftside1 img {
    width: 50px; /* Reduz o tamanho da imagem */
    height: 50px; /* Mantém a proporção */
  }
}

.quemsou-rightside {
  flex: 1;
}

/* margem top da div quemsou-rightside em telas menores @@@@@@@@@@@@@@@@@@@@@@@@@@@ */
@media (max-width: 600px) {
  .quemsou-rightside {
    margin-top: 50px;
  }
}
/*#### margin-top da div quemsou-righside em telas menores END ########### end ###############*/

/*ajuste margin-top da div quemsou-righside e quemou-lefside em telas full grandes @@@@@@@@@@@@@@@@@@@@@*/

@media (min-width: 1280px) {
  .quemsou-leftside {
    margin-top: 50px;
  }

  .quemsou-rightside {
    margin-top: 70px;
  }
}

/*### end ajuste margin-top div quemsou-righside e quemsou-leftside em telas full grande ######### end ##################*/

/* FORMAÇOES GERAL @@@@@@@@@@@@@@@@@@@@@@@@ FORMACOES STYLE GERAL @@@@@@@*/
.formacoes ul {
  list-style-type: none; /* Remover os marcadores da lista */
  padding: 0; /* Remover espaçamento padrão */
}

.formacoes li {
  font-size: 1.2em; /* Aumentar o tamanho das letras */
  line-height: 1.7; /* Espaçamento entre as linhas */
  color: #373838; /* Cor escura para boa legibilidade */
  margin-bottom: 10px; /* Espaçamento entre os itens */
}

.formacoes li b {
  color: #59460e; /* Destacar os textos em negrito */
}

.formacoes li {
  position: relative;
  padding-left: 20px;
}

.formacoes li::before {
  content: "✔ "; /* Ícone de marcação */
  color: #4d4d4d; /* Cor do ícone */
  position: absolute;
  left: 0;
  font-size: 1.2em;
}

/* #### END FORMACOES STYLE GERAL END ####### FORMACOES GERAL END ###########*/

/* @@@@@@@@@ FORMACOES MARGENS EM TELA A PARTIR DE 1000PX @@@@@@@@@*/

@media (min-width: 1000px) {
  .formacoes {
    margin-left: 120px;
    margin-right: 120px;
  }
}

/*####### FORMACOES MARGENS EM TELAS ACIMA 1000PX END ########## END ###########*/

/* Para telas acima de 600px */
@media (min-width: 600px) {
  .quemsou-rightside {
    margin-right: 30px;
  }

  .quemsou-content {
    flex-direction: row; /* Muda para lado a lado */
    align-items: center; /* Centraliza verticalmente */
  }

  .quemsou-leftside,
  .quemsou-rightside {
    flex: 1; /* Divide igualmente o espaço */
  }

  .quemsou-leftside img {
    max-width: 100%; /* Imagem ajusta ao lado esquerdo */
  }

  .quemsou-rightside p {
    margin-right: 50px;
    text-align: justify;
    color: #3d3838;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .formacoes {
    align-items: center;
  }

  .formacoes h2 {
    text-align: center;
  }
}

.center-btn {
  text-align: center;
}

.btn-servicos {
  background-color: #000000; /* cor rosa */
  color: #ffffff; /* cor do texto branco */
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 40px;
  transition: background-color 0.3s ease;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Adiciona uma sombra suave */
}

.btn-sevicos :hover {
  background-color: #000000; /* cor rosa mais escura ao passar o mouse */
}

/*########### END DIV QUEM SOU EU ###################/


/* @@@@@@@@@@@@@@@ DIV SERVICES BROTHER @@@@@@@@@@@@@@@@@@@@*/

.services {
  text-align: center;
  padding: 20px;
  background-color: #eee1cd;
}

.serv-container h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.quads-serv {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Espaçamento entre os quadrados */
  justify-content: center;
}

.quads-serv a {
  position: relative;
  width: 235px;
  height: 235px;
  background-size: cover;
  background-position: center;
  display: block;
  text-decoration: none;
  border-radius: 8px;
  padding: 20px;
  overflow: hidden;
  transition: transform 0.3s ease; /* Suaviza o efeito de transformação */
}

.quads-serv a:hover {
  transform: scale(1.1); /* Aumenta o tamanho em 10% */
}

.quads-serv a span {
  position: absolute;
  top: 10px; /* Espaço do topo */
  left: 50%; /* Centraliza horizontalmente */
  transform: translateX(-50%); /* Ajusta para centralizar */
  background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente */
  color: white; /* Cor do texto */
  font-size: 21px; /* Tamanho do texto */
  padding: 5px 10px; /* Espaçamento interno */
  border-radius: 4px; /* Bordas arredondadas */
  text-align: center;
  font-weight: bold; /* Negrito para destacar */
  white-space: nowrap; /* Impede quebra de linha */
  font-family: Arial, Helvetica, sans-serif;
}

.services h2 {
  color: #59460e;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  font-size: 30px;
}

/* Layout responsivo para telas abaixo de 601px */
@media (max-width: 600px) {
  .quads-serv {
    flex-direction: column; /* Os quadrados ficam em uma coluna */
    gap: 10px; /* Ajusta o espaçamento */
    align-items: center; /* Centraliza os quadrados */
  }

  .quads-serv a {
    width: 80%; /* Faz os quadrados ocuparem 80% da largura */
  }
}

/*@@@@@@@@@@@@@ seta para aabrir outra parte services @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

/*########## seta para abrir outra parte services end ###############################################*/

.mais-servicos {
  text-align: center;
  margin-top: 20px;
  background-color: #eee1cd;
}

.expand-button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 10px;
  transition: transform 0.3s ease;
}

.expand-button img.arrow-icon {
  width: 30px;
  height: auto;
}

/* Container que aparece quando a seta é clicada */
.mais-servicos-content {
  display: none; /* Começa escondido */
  margin-top: 20px;
  text-align: center;
  width: 100%; /* Garante que a largura seja 100% */
}

/* Centralização dos quadrados na seção de serviços */
.mais-servicos-content .quads-serv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centraliza os itens */
  gap: 15px; /* Espaçamento entre os quadrados */
  align-items: center; /* Alinha os itens verticalmente */
  max-width: 100%; /* Garante que não ultrapasse a largura do container */
  margin: 0 auto; /* Centraliza os itens dentro do container */
}

.mais-servicos-content a {
  width: 235px;
  height: 235px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  position: relative;
}

.mais-servicos-content a span {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 21px;
  padding: 5px 10px;
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
}

/* ########## DIV SERVICES END BORHTER ####################################################### SERIVCES QUAD END #
############## QUAD SERVICES END ############# QUADRADOS END ############################## END ###################*/

/* @@@@@@@@@@@@@@@@@ div depoimentos @@@@@@ div depoimentos @@@@@@@@@@@ div depoimentos @@@@@@@@@@ div dep */
.meus-depoimentos {
  background-color: #f9f9f9;
  padding: 20px 0;
  text-align: center;
}

.meus-depoimentos h2 {
  color: #59460e;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  font-size: 29px;
  text-align: center;
}

.meus-depoimentos-container {
  position: relative;
  width: 310px;
  height: 310px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
}

/*@@@@@@ meus deps diferentes tamanhos em diferentes telas @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

@media (min-width: 768px) {
  .meus-depoimentos-container {
    position: relative;
    width: 410px;
    height: 410px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
  }
}

@media (min-width: 1024) {
  .meus-depoimentos-container {
    position: relative;
    width: 420px;
    height: 420px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
  }
}

/*##### end diferentes telas tamanhos quadrados meus deps ##############################################*/

.meus-depoimentos-container .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  z-index: 1;
}

.meus-depoimentos-container .slide.active {
  left: 0;
  opacity: 1;
  z-index: 2;
}

.meus-depoimentos-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantém proporção */
}

.dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 8px;
}

.dots .dot {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dots .dot.active {
  background-color: #333;
}

/* ######### DIV DEPOIMENTOS END ############## div depoimentos end ######### div depoimentos end #########*/

/*@@@@@@@@@@@@@@ DIV FAQ @@@@@@@@ DIV FAQ @@@@@@@@@@@ DIV FAQ @@@@@@@@@@@ DIV FAQ @@@*/

.faq {
  background-color: #eee1cd;
}

.faq h2 {
  color: #59460e;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  font-size: 29px;
  text-align: center;
}

.faq-container {
  width: 80%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.question-item {
  margin-bottom: 15px;
}

.question {
  color: #59460e;
  width: 100%;
  text-align: left;
  background-color: #eee1cd;
  border: 1px solid #59460e;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

.question:hover {
  background-color: #e0e0e0;
}

/* Estilo do link */
.question-item a {
  text-decoration: underline; /* Sublinha o link */
  color: black; /* Cor do texto do link */
  font-style: italic; /* Estilo itálico para o texto */
}

.question-item a:hover {
  text-decoration: underline; /* Mantém o sublinhado quando o mouse passa por cima */
  color: black; /* Mantém a cor preta quando passa o mouse */
}

.answer {
  display: none;
  margin-top: 5px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
}

/* ####### DIV FAQ END END ########### DIV FAQ END  ########### DIV FAQ END # END FAQ #########*/

/* DIV CONTATOS @@@@@@@@@@@ DIV CONTATOS @@@@@@@@@@@@@@ DIV CONTATOS @@@@@@@@@@@ DIV CONTATOS@@*/
/* Centralização do conteúdo principal */
/* Centralização geral */
.contatos-ok {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f9f9f9;
}

.contatos-container-ok {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.contatos-ok h2 {
  color: #59460e;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  font-size: 29px;
}

/* Estilo dos itens de contato */
.contato-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.contato-item img {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}

.contato-item a {
  text-decoration: none; /* Remove a decoração do link */
  color: #333; /* Define uma cor para o texto do link */
  font-size: 18px;
}

.contato-item a:hover {
  color: #555; /* Cor ao passar o mouse */
}

.contato-item p {
  margin: 0;
}

/* ######### DIV CONTATOS ######### DIV CONTATOS END ##### DIV CONTATOS END ######## END CONTATOS*/

/* @@@@@@@@@@ DIV INFO @@@@@@ DIV INFO @@@@@@@@@@@ DIV INFO @@@@@@@@@@@ DIV INFO @@@@@ DIV INFO @@@@@@2*/

/* Estilo geral para a div info */
.info-ok {
  background-color: #eee1cd; /* Fundo rosa */
  display: flex;
  justify-content: center; /* Centraliza o conteúdo horizontalmente */
  align-items: center; /* Centraliza o conteúdo verticalmente */
  padding: 20px 0; /* Padding para dar espaçamento */
}

/* Estilo da div info-container */
.info-container-ok {
  text-align: center;
  margin: 0 auto; /* Centraliza o conteúdo horizontalmente */
  padding: 20px;
  border-radius: 8px; /* Bordas arredondadas (caso queira manter) */
}

/* Estilo da imagem */
.info-img img {
  width: 250px; /* Tamanho reduzido da imagem */
  height: auto;
  margin-bottom: 20px;
}

/* Estilo do parágrafo no copyright */
.copyright p {
  font-style: italic; /* Texto em itálico */
  text-decoration: none; /* Remover sublinhado do parágrafo */
  font-size: 13 px;
  color: #615d5d; /* Cor do texto */
  margin-bottom: 0;
  margin-top: 10px;
}

/* Garantir que o link dentro do parágrafo tenha sublinhado */
.copyright a {
  text-decoration: underline; /* Sublinha o link */
  color: #534e4e; /* Cor do link */
}

.copyright a:hover {
  color: #555; /* Cor do link quando o mouse passa por cima */
}

/*##### DIV INFO END ####### INFO END ######### INFO END ########## DIV INFO END ####### DIV INFO END ##*/

/* @@@@@@@ DIV WHAPP @@@@@@@@  DIV WHAPP @@@@@@@@@@ DIV WHAPP@@@@@@@@@@@@@@@ DIV WHAP @@@@@@@@@@@@@@@@@*/

.fixar-imagem {
  position: fixed; /* Fixar a posição */
  bottom: 10px; /* Distância do fundo */
  right: 10px; /* Distância da direita */
  z-index: 9999; /* Garantir que esteja acima de outros elementos */
}

.whatsapp img {
  width: 80px; /* Definir uma largura fixa para a imagem */
  height: auto; /* Manter a proporção da imagem */
}

/* ############ DIV WHAPP END ############### DIV WHAPP END ############## DIV WHAPP END ##############*/

/*@@@@@@@@@@@ btn animado @@@@@@@@@ btn gold @@@@@@@@@@@@@@@@@@@@@@ */

.btn-animado {
  width: 185px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease-in-out; /* Suaviza o efeito */
}

/* Efeito ao passar o mouse */
.btn-animado:hover {
  transform: scale(1.1) translateY(-5px); /* Aumenta 10% e faz um "pulo" de 5px para cima */
}

/* Efeito ao clicar */
.btn-animado:active {
  transform: scale(0.95) translateY(0); /* Leve redução para simular o clique */
}

/*############## btn animado end ######## btn animado gold end #### */