v* {
  padding: 0;
  margin: 0;
  border: 0;
}

main {
  width: 100%;
  margin: auto;
  height: auto;
  display: flex;
  flex-direction: column;
}

#inicio {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: auto;
  background-image: url(../IMG/joao-reguengos-WqasS6cw3wo-unsplash\ 1.png);
  width: 100%;
  height: 1000px;
}

#inicio p {
  text-align: center;
  width: 60%;
  color: white;
  margin: auto;
  font-size: 40px;
  margin-top: 150px;
}

section #encontre {
  background: orange;
  border-radius: 5px;
  border: 2px solid orange;
  height: 86px;
  width: 484px;
  font-size: 24px;
  transition: all 0.3s;
  font-weight: bold;
  color: white;
}

section #encontre:hover {
  background: none;
  height: 86px;
  width: 484px;
  color: white;
  cursor: pointer;
}

#subtitulo {
  top: 930px;
  margin: 36px auto 0px auto;
  width: 800px;
  height: 67px;
  background: #fe9516;
  border-radius: 5px;
  border: 5px solid #db780f;
  padding: 7px;
  font-weight: bold;
  color: white;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

#subtitulo3 {
  margin: 125px auto 80px auto;
  width: 900px;
  height: 67px;
  background: #fe9516;
  border-radius: 5px;
  border: 5px solid #db780f;
  padding: 7px;
  font-weight: bold;
  color: white;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

#subtitulo3 {
  margin: 125px auto 80px auto;
  width: 900px;
  height: 67px;
  background: #fe9516;
  border-radius: 5px;
  border: 5px solid #db780f;
  padding: 7px;
  font-weight: bold;
  color: white;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

#subtitulo2 {
  margin: 64px auto 0px auto;
  top: 1800px;
  width: 800px;
  height: 67px;
  background: #fe9516;
  border-radius: 5px;
  border: 5px solid #db780f;
  padding: 7px;
  font-weight: bold;
  color: white;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

#botao {
  margin-top: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#adocao_pets {
  width: 100%;
  margin: auto;
  height: auto;
  /*border: 1px solid black;*/
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 30px;
  scroll-behavior: smooth;
}

.card {
  margin-top: 50px;
  width: 430px;
  height: 691px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0px 25px 0px rgba(92, 92, 92, 0.25);
  border-radius: 5px;
  padding-top: 16px;
  position: relative;
  flex: 0 0 auto;
}

.card header {
  padding-bottom: 16px;
}

#adocao_pets .card header {
  display: flex;
  gap: 200px;
  align-items: center;
}

#adocao_pets .card header .icon-paw i {
  width: 33.58px;
  height: 28.52px;
}

#adocao_pets .card header span {
  font-size: 28.67px;
}

#adocao_pets .card img {
  width: 430px;
  height: 273px;
}

.card-body h3 {
  width: 427px;
  height: 33px;
  color: #277da1;
  text-align: center;
  font-size: 24;
  font-weight: lighter;
  margin-bottom: 8px;
}

.info-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 30px;
  font-weight: bold;
  font-size: 20.07px;
}

.card-body p {
  text-align: center;
  margin: auto;
  font-size: 20px;
  color: black;
  width: 396px;
  height: 162px;
}

.card button {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 390px;
  height: 55px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  background-color: #f77f00;
  border-radius: 5px;
  transition: all 0.3s;
}

.card button:hover {
  color: white;
  background-color: #f77f00;
  cursor: pointer;
}

#manual {
  position: absolute;
  top: 1200px;
  left: 50%;
  transform: translate(-50%);
  width: 95%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: absolute;
}

#manual button {
  width: 60px;
  height: 60px;
  font-size: 24px;
  font-weight: bold;
  border: 2px solid #f77f00;
  background-color: white;
  color: #f77f00;
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
}

#manual button:hover {
  background-color: #f77f00;
  color: white;
}

#voceSabia {
  margin: 150px auto;
  width: 90%;
  height: auto;
  background-image: url(../IMG/fundoVoceSabia.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#voceSabia .voceSabiaDiv {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.voceSabiaDiv img {
  width: 35%;
  height: 400x;
  border-radius: 5px;
}

.voceSabiaDiv p {
  font-size: 1.5em;
  width: 60%;
  height: 400x;
  border-radius: 5px;
}

#carrousel-card {
  width: 100%;
  height: 900px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.carrosel_geral_container {
  display: flex;
  gap: 20px; /* distância entre os cards */
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px;
}

.carrosel_geral_item {
  flex: 0 0 300px; /* largura fixa do card */
  background-color: #fff;
  position: relative;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#carrousel-card #right,
#carrousel-card #left {
  position: absolute;
  top: 50%; /* centraliza verticalmente */
  transform: translateY(-50%);
  width: 102px;
  height: 100px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10; /* para ficar acima dos cards */
}

#carrousel-card #right {
  right: 40px; /* distância da borda direita */
}

#carrousel-card #left {
  left: 50px; /* distância da borda esquerda */
}

#carrousel-card h2,
#carrousel-card h1 {
  z-index: 2;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 35%;
  left: 50%;
}

#carrousel-card a {
  z-index: 2;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  top: 60%;
  left: 76%;
  transform: translateX(-75%);
  color: #ffffff;
  text-decoration: none;
}

#carrousel-card a:hover {
  text-decoration: underline;
}

#carrousel-card h2 {
  font-weight: bolder;
  color: white;
  font-size: 48px;
  width: 888px;
  height: 116px;
  text-align: center;
}

#carrousel-card h1 {
  margin-top: 20px;
  font-weight: bolder;
  color: white;
  font-size: 96px;
  width: 888px;
  height: 116px;
  text-align: center;
  top: 45%;
}

#confiar-section {
  background-image: url(../IMG/fundoConfiarSection.svg);
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 150px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#confiar-section .card {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  margin-top: 150px;
  box-shadow: 0px 0px 25px 0px rgba(92, 92, 92, 0.25);
  flex: 0 0 calc(33.33% - 20px);

  width: 550px;
  height: 400px;
  margin: 20px;
  padding: 32px 32px;
  transition: 0.3s ease-in-out;
}

#confiar-section .card img {
  width: 150px;
  height: 150px;
}

#confiar-section .card:hover {
  transition: 0.25s ease-in;
  border-color: #f77f00;
  border-width: 2px;
  padding-top: 0px;
}

#card-tittle {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
}

#card-desc {
  text-align: center;
  font-size: 20px;
}

#parceiros {
  margin-top: 80px;
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

#parceiros h1 {
  color: white;
  border: 5px solid rgb(134, 172, 221, 0.5);
  background-color: rgb(78, 162, 251, 0.5);
  font-size: 40px;
  font-weight: medium;
  width: 727px;
  height: 79px;
  text-align: center;
  padding-top: 10px;
}

#parceiros #colaboradoes {
  position: relative;
  z-index: 2;
  font-size: 36px;
  font-weight: 700;
  color: white;
  width: 100%;
  height: 450px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  background-color: rgb(78, 162, 251, 0.5);
}

.parceiro {
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.parceiro p {
  color: black;
}

.parceiro:hover {
  transform: translateY(-12px);
  transition: 0.25s ease-in;
}

#duvidas {
  overflow-x: visible;
  margin-top: 300px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#duvidas h1 {
  color: white;
  border: 5px solid #dd8686;
  background-color: #ef584a;
  opacity: 60%;
  font-size: 40px;
  font-weight: medium;
  width: 696px;
  height: 79px;
  text-align: center;
  padding-top: 10px;
}

#duvidas img {
  position: absolute;
  z-index: 4;
  top: 20%;
  left: 70%;
  width: 523px;
  height: 784px;
}

#circle-1 {
  background-color: #f4fb24;
  border-radius: 50%;
  width: 782px;
  height: 795px;
  position: absolute;
  bottom: 40%;
  right: 80%;
  z-index: 0;
}

body {
  overflow-x: hidden;
}

#decorativo {
  position: relative;
  width: 100%;
  height: 0; /* não ocupa espaço visível */
}

#circle-2 {
  background-color: #ff8181;
  width: 500px;
  height: 1000px;
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  position: absolute;
  top: 400px;
  right: 0px;
  z-index: 0;
}

#frequente {
  width: 90%;
  max-width: 1200px;
  margin-right: 30%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 3;
}

#frequente details {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 3px 3px 3px 3px rgb(165, 163, 163);
  font-size: 20px;
  transition: all 0.3s ease-in-out;
}

#frequente summary {
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#frequente p {
  margin-top: 10px;
  font-size: 18px;
  color: #333;
}

/* Estilo para o ícone girar ao abrir */
#frequente details[open] summary i {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

#frequente {
  margin-top: 150px;
  z-index: 3;
}

#caixa input,
#caixa textarea {
  width: 623px;
  margin-bottom: 20px;
  padding: 10px;
  font-size: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

#caixa {
  margin-bottom: 8px;
  margin-left: 30px;
}

label {
  margin-top: 30px;
  margin-right: 0px;
  padding-top: 10px;
  padding-left: 20px;
  border-radius: 5px;
  box-shadow: 3px 3px 3px 3px rgb(165, 163, 163);
  z-index: 3;
  background-color: #fff;
  margin-left: 40px;
  font-size: 36px;
  font-weight: lighter;
  width: 1239px;
  height: 70px;
}

label i {
  margin-left: 45%;
}

#messagen {
  height: 400px;
}

#fale-conosco {
  overflow-x: visible;
  margin-top: 300px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#fale-conosco #fundo {
  margin-top: 150px;
  background-color: #d69e9e;
  width: 1275px;
  height: 746px;
  border-radius: 60px;
}

#fale-conosco #frase {
  position: absolute;
  background-color: transparent;
  border: 13px solid #80f490;
  left: 15%;
  width: 1205px;
  height: 705px;
  border-radius: 60px;
}

#fale-conosco h1 {
  font-size: 40;
  color: white;
  font-weight: medium;
  background-color: #4aef60;
  border: 5px solid #86ddb6;
  text-align: center;
  position: absolute;
  width: 394px;
  height: 79px;
  border-radius: 5px;
  top: 6%;
  z-index: 5;
  left: 35%;
}

#fale-conosco img {
  width: 953px;
  height: 635px;
  position: absolute;
  top: 40%;
  left: 6%;
}

#caixa {
  position: absolute;
  top: 40%;
  left: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.input-form {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

#fale-conosco button {
  width: 179px;
  height: 55px;
  position: absolute;
  background-color: #f77f00;
  color: #fff;
  font-weight: bolder;
  border-radius: 5px;
  font-size: 20px;
  left: 80.5%;
  top: 105%;
  z-index: 5;
  margin-bottom: 30px;
}

footer {
  margin-top: 150px;
}

/* ================================================ */
/* CORREÇÃO FINAL DE POSICIONAMENTO GERAL           */
/* Substitua as regras antigas por este bloco       */
/* ================================================ */

/* 1. Garante que a página ocupe a altura toda, corrigindo a posição dos ícones */
html,
body {
  height: 100%;
}

/* 2. Re-estabelece a posição correta do container dos ícones no centro */
.acessibilidade-container {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* 3. Empurra o painel do VLibras para baixo (método mais seguro) */
div[vw-plugin-wrapper] {
  top: 5vh !important; /* Empurra 5% da altura da tela para baixo */
  transform: none !important; /* Remove o transform que estava causando o conflito */
  bottom: auto !important;
  left: auto !important; /* Garante que não puxe para a esquerda */
  right: 5px !important; /* Alinha à direita da tela */
}

/* Mantém a animação de pulo que já funcionava */
.acessibilidade-container > [vw],
.acessibilidade-container > .tts-fab {
  transition: transform 0.2s ease-in-out;
}

.acessibilidade-container > [vw]:hover,
.acessibilidade-container > .tts-fab:hover {
  transform: translateY(-5px);
  cursor: pointer;
}