body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: #e8ebec; /* Cor de fundo geral */
  font-size: 18px;
}

p {
  font-weight: 400;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif; /* Aplicando a fonte Montserrat em títulos */
  font-weight: 700; /* Para o peso bold */
}

.navbar {
  background-color: #183129; /* Cor de fundo da navbar */
  color: #e8ebec;
  font-size: 22px;
}
/* Cor secundaria -> #8FB0A5 */
.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.navbar .menu-item:hover {
  color: #6e857d; /* Altere para a cor desejada */
  /* Adicione outros estilos desejados, como mudança de cor de fundo, etc. */
}

.logo img {
  max-height: 50px;
}

.menu {
  display: flex;
  align-items: center;
}

.menu-item {
  padding: 10px 20px;
  text-decoration: none;
  color: #e8ebec;
}

.social-icons .icon {
  margin-left: 10px;
}

.social-icons .icon img {
  max-height: 30px;
}

.menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 1.5rem;
}

.content {
  padding: 20px;
  max-width: 1024px !important;
  margin: 0 auto;
}

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

.text {
  flex: 1;
  padding: 0 20px; /* Espaçamento entre o texto e a imagem */
}

.image {
  flex: 1;
}

.image img{
  margin-left: 40px;
}

.especialidade {
  padding: 20px;
  max-width: 1024px;
  margin: 0px auto; /* Espaçamento entre a seção de especialidades e outras divs */
  color: #e8ebec
}

#full-bg {
  width: 100% !important;
  height: 100% !important;
  background-color: #6e857d;
}

.mapa {
  /* max-width: 1024px; */
  margin: 0 auto;
}

.mapa iframe {
  width: 100%;
  height: 400px; /* Altura do mapa */
  border: none;
  border-radius: 5px;
}

.cta {
  background-color: #183129;
  color: #e8ebec;
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center;
  overflow-x: auto; /* Habilita a rolagem horizontal caso o conteúdo exceda a largura da div */
  padding: 20px 0;
}

.midia-images {
  background-color: #183129;
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center;
  overflow-x: auto; /* Habilita a rolagem horizontal caso o conteúdo exceda a largura da div */
  padding: 20px 0;
}

.midia-images img {
  max-width: 10%; /* Tamanho máximo das imagens */
  max-height: 100px; /* Altura máxima das imagens */
  width: auto; /* Largura automática para manter a proporção */
  border-radius: 10px; /* Borda arredondada */
  margin: 0 20px; /* Espaçamento entre as imagens */
}

.reviews {
  padding: 20px;
  text-align: center;
  padding: 20px;
  max-width: 1024px !important;
  margin: 0 auto;
}

.reviews h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #183129; /* Cor do título */
}

.google-review,
.doctoralia-review {
  margin-top: 20px;
  margin-bottom: 20px;
}

.google-review iframe,
.doctoralia-review iframe {
  width: 100%;
  height: 400px;
  border: 15px;
  border-radius: 5px;
}

.footer {
  background-color: #183129;
  color: #e8ebec;
}

.footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.social-icons .icon:hover img {
  transform: scale(1.1); /* Aumenta o tamanho em 5% */
  transition: transform 0.3s ease; /* Adiciona uma transição suave */
}

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.column ul li a {
  color: #e8ebec;
  text-decoration: none;
}

.copyright {
  text-align: center;
  margin-top: 20px;
}

.section-header {
  text-align: center;
  margin: 0 auto;
  padding-top: 40px;
  color: #e8ebec;
  text-transform: uppercase;
  letter-spacing: 6px;
}

.section-header-2 {
  text-align: center;
  margin: 0 auto;
  padding: 40px 0;
  text-transform: uppercase;
  letter-spacing: 6px;
}

.overlay-text {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(197, 206, 203, 0.945);
  padding: 10px;
  border-radius: 5px;
}

#contact {
  width: 100%;
  height: 100%;
  background-color: #6e857d;
}

.agendar-atendimento {
  background-color: #183129; /* Cor de fundo */
  color: #e8ebec !important; /* Cor do texto */
  padding: 10px 20px; /* Espaçamento interno */
  font-size: 16px; /* Tamanho da fonte */
  border: none; /* Remove a borda */
  border-radius: 5px; /* Borda arredondada */
  cursor: pointer; /* Cursor do mouse */
  vertical-align: middle !important;
}

.agendar-atendimento:hover {
  background-color: #885283;
  transition: 0.4s; /* Cor de fundo no hover */
}

.presencial {
  position: relative;
  width: 100%; /* Ajuste de acordo com o tamanho da sua imagem */
}

.remoto {
  position: relative;
  width: 100%; /* Ajuste de acordo com o tamanho da sua imagem */
}

.frame {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}

#contact-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 20px;
  max-width: 1024px !important;
  margin: 0 auto;
}
#contact-info p {
  flex: 1;
  text-align: center;
  color:#e8ebec;
  font-size: 14px;
}

.float-button {
  text-decoration: none;
  position: fixed;
  padding: 10px;
  padding-right: 15px;
  bottom: 30px;
  right: 30px;
  color: #e8ebec;
  background-color:#25D366;
  border-radius: 25px 30px 5px 25px;
  z-index: 100;
  font-family: Arial;
  font-size: 17px;
  animation: whatsapp-animation 0.5s ease-in-out;
  box-shadow: 1px 2px 5px 2px rgba(30,30,30,0.3);
  transition:all 0.3s ease-out;
}

.float-button:hover {
   background-color: #128C7E;
    color: #e8ebec;
}

.fa-whatsapp {
  font-size: 20px !important;
  padding-right: 5px;
  padding-left: 5px;
}

.atendimentos {
  position: relative;
  display: block;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px 20px;
  padding: 100px 50px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.atendimentos .card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 350px;
  max-width: 100%;
  height: 300px;
  background: #e8ebec;
  border-radius: 20px;
  transition: 0.5s;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
  flex: 1 0 21%; /* Onde 21% é a largura mínima do card */
  margin: 1%; /* Para um pequeno espaço entre os cards */
}

.atendimentos .card:hover {
  height: 400px;
}

.atendimentos .card .img-box {
  position: absolute;
  top: 20px;
  width: 300px;
  height: 220px;
  background: #6e857d;
  border-radius: 12px;
  overflow: hidden;
  transition: 0.5s;
}

.atendimentos .card:hover .img-box {
  top: -100px;
  scale: 0.75;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
}

.atendimentos .card .img-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.atendimentos .card .content2 {
  position: absolute;
  top: 252px;
  width: 100%;
  height: 35px;
  padding: 0 30px;
  text-align: center;
  overflow: hidden;
  transition: 0.5s;
}

.atendimentos .card:hover .content2 {
  top: 130px;
  height: 250px;
}

.atendimentos .card .content2 h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #183129;
}

.atendimentos .card .content2 p {
  color: #6e857d;
}

.atendimentos .card .content2 a {
  position: relative;
  top: 15px;
  display: inline-block;
  padding: 12px 25px;
  text-decoration: none;
  background: var(--clr);
  color: #e8ebec;
  font-weight: 500;
}

.atendimentos .card .content2 a:hover {
  opacity: 0.8;
}

.whatsapp-button {
  display: inline-block;
  padding: 15px 30px;
  font-size: 18px;
  text-decoration: none;
  background-color: #885283; /* Cor do WhatsApp */
  color: #e8ebec; /* Cor do texto */
  margin: 10px;
}

.link-whatsapp{
  text-transform: uppercase;
  letter-spacing: 4px;
  text-decoration: none;
}

.link-whatsapp:visited {
  text-decoration: none;
  color: #e8ebec; /* Cor do WhatsApp não visitado */
}

html {
  scroll-behavior: smooth;
}

/* Efeito hover para destacar o botão */
.whatsapp-button:hover {
  background-color: #6C4168; /* Cor mais escura no hover */
  transition: 0.4s;
}

@keyframes whatsapp-animation {
  from {
      opacity: 0%;
  }

  to {
      opacity: 100%
  }
}

@media screen and (max-width: 768px) {
  .menu {
      display: none;
  }

  .menu-toggle {
      display: block;
  }

  .menu.active {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 60px;
      left: 0;
      background-color: #183129; /* Cor de fundo do menu em telas menores */
      width: 100%;
  }

  .menu-item {
    padding: 10px;
    text-align: center;
  }

  .social-icons {
    display: none;
  }

  .section {
      flex-direction: column;
  }

  .text {
    padding: 20px; /* Espaçamento interno do texto em telas menores */
    margin-top: -60px;
  }

  .midia {
      margin: 20px 0; /* Espaçamento entre a seção de mídia e outras divs em telas menores */
  }

  .midia-images img {
    max-width: 30%; /* Tamanho máximo das imagens */
  }

  .footer .container {
    flex-direction: column;
  }


  #contact-info {
    flex-direction: column;
  }
  #contact-info p {
    margin-bottom: 10px;
  }

  span {
    display: none;
  }

  .float-button {
      bottom: 15px;
      right: 15px;
      width: 20px;
      border-radius: 20px 20px 5px 20px;
  }

  .fa-whatsapp {
      font-size: 22px !important;
      padding: 4px;
  }

  .atendimentos .card {
    width: 230px;
    border-radius: 15px;
  }

  .atendimentos .card .img-box {
    width: 185px;
    border-radius: 10px;
  }

  .atendimentos .card .content p {
    font-size: 0.7rem;
  }

  .atendimentos .card .content a {
    font-size: 0.9rem;
  }

  .card {
    display: block; /* Altera o display para bloco para empilhar verticalmente */
    margin-bottom: 20px; /* Adiciona um espaçamento entre as divs */
  }

  .atendimentos .card {
    flex: 1 0 100%; /* Altera a largura para 100% para ocupar toda a largura da tela */
  }

  .cta h2 {
    font-size: 16px;
  }

}