/* Definição de variáveis */
:root {
  /* Cores principais do site */
  --cor-principal: #6E3E20;
  --cor-secundaria: #FCDBE0;
  --cor-terciaria: #FE8AA2;
  --cor-fundo: #FEF2F5;
  --cor-texto: #6E3E20;
  --cor-texto-secundario: #b47046;
  --cor-borda: #6E3E20;
  --cor-sombra: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  --fundo-footer: transparent;
  
  /* Fonte principal do site */
  --fonte-principal: 'Poppins', sans-serif;
  
}

/* Estilos Globais */
* {
  /* Reset de estilos */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Estilo do vídeo de fundo */
#video-fundo {
  /* Posicionamento do vídeo */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  transform: translateZ(0);
}

/* Estilo do corpo do site */
body {
  /* Fonte principal do site */
  font-family: var(--fonte-principal);
  
  /* Imagem de fundo do site */
  background-image: url('../IMG/img-fundo-secun.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Estilo dos títulos */
h2 {
  /* Alinhamento dos títulos */
  text-align: left;
  color: var(--cor-principal);
  padding: 10px;
}

/* Estilo das seções */
section {
  /* Cor do texto das seções */
  color: var(--cor-principal);
  text-align: center;
  
  /* Estilo dos títulos das seções */
  h1 {
    margin-bottom: 20px;
  }
  h2 {
    text-align: center;
  }
}

/* Estilo dos links */
a {
  /* Cor do texto dos links */
  background-color: var(--cor-secundaria);
  color: var(--cor-texto);
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 10px;
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
  font-style: italic;
  padding: 10px;
  margin-bottom: 40px;
}

/* Estilo dos links ao passar o mouse */
a:hover {
  background-color: var(--cor-terciaria);
  transition: all 0.1s ease-in-out;
}

/* Estilo das listas */
ul {
  /* Alinhamento das listas */
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

/* Estilo dos itens das listas */
li {
  /* Alinhamento dos itens das listas */
  display: flex;
  align-items: center;
  margin-left: 5px;
  padding-right: 10px;
}

/* Estilo dos ícones */
.icon {
  /* Tamanho dos ícones */
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: var(--cor-terciaria);
  filter: hue-rotate(720deg);
  opacity: 0,6;
  mix-blend-mode: multiply;
}

.icon-email {
  /* Cor do ícone de email */
  color: var(--cor-principal);
  text-align: center;
  filter: hue-rotate(720deg);
  margin: 10px;
  max-width: 400px;
  width: 100%;
  margin: auto;
  padding: 15px;
  background-color: var(--cor-secundaria);
  box-shadow: var(--cor-sombra);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 20px;
  font-size: 15px;
}

.icon-email:hover {
  /* Efeito ao passar o mouse no ícone de email */
  background-color: var(--cor-terciaria);
  transition: all 0.1s ease-in-out;
}

/* Estilos gerais do formulário */
form {
  /* Largura máxima do formulário */
  max-width: 400px;
  width: 100%;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
  background-color: var(--cor-fundo);
  box-shadow: var(--cor-sombra);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 100px;
  transition: all 0.5s ease-in-out;
}

/* Ajuste de rótulos e entrada */
label {
  /* Alinhamento dos rótulos */
  display: flex;
  margin-bottom: 5px;
  font-size: 14px;
  width: 100%;
  align-items: center;
  color: var(--cor-principal);
}

/* Estilo do container de confirmação */
.confirmacao-container {
  /* Alinhamento do container de confirmação */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  width: 100%;
  max-width: 400px;
  margin-top: 5px;
}

/* Estilo dos inputs */
input[type="text"],
input[type="email"],
textarea {
  /* Largura dos inputs */
  width: 100%;
  padding: 1px;
  margin-left: 8px;
  margin-bottom: 5px;
  border: 1px solid var(--cor-principal);
  border-radius: 5px;
  font-size: 15px;
  text-align: center;
  color: var(--cor-texto);
}

/* Estilo dos botões */
button {
  /* Largura dos botões */
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color: var(--cor-principal);
  background-color: var(--cor-secundaria);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

/* Estilo dos botões ao passar o mouse */
button:hover {
  background-color: var(--cor-terciaria);
}

/* Estilo do main */
main {
  /* Altura do main */
  height: 100%;
  min-height: calc(100vh - 60px);
  margin: 0 auto;
  width: 80vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-bottom: 60px;
}

/* Estilo do about */
.about {
  text-align: left;
}

.about section {
  margin-bottom: 20px;
  text-align: left;
}

.about h2 {
  font-size: 24px;
  margin-top: 0;
  text-align: left;
}

.about p {
  font-size: 18px;
  line-height: 1.5;
}

/* Estilo para o countdown */
#countdown {
  position: fixed; /* Fixa o countdown na tela */
  bottom: 100px; /* Espaço acima do footer */
  left: 5%; /* Centraliza horizontalmente */
  width: 90%; /* Ocupa toda a largura */
  border-radius: 10px; /* Bordas arredondadas */
  background-color: var(--cor-secundaria); /* Cor de fundo */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  box-shadow: var(--cor-sombra); /* Sombra para destaque */
  z-index: 1000; /* Garante que fique acima de outros elementos */
}

#countdown:hover {
  font-size: 20px;
  color: var(--cor-principal);
  margin: 0;
  transform: scale(1.05); /* Aumenta o tamanho ao passar o mouse */
  transition: all 0.1s ease-in-out; /* Efeito suave */
}

#countdown .circle {
  margin: 0 10px;
  text-align: center;
}

.circle:hover {
  transform: scale(1.05); /* Aumenta o tamanho ao passar o mouse */
  transition: all 0.1s ease-in-out; /* Efeito suave */
}

#countdown .circle span {
  font-size: 24px;
  font-weight: bold;
  color: var(--cor-principal);
}

#countdown .circle p {
  font-size: 14px;
  color: var(--cor-texto);
}

/* Estilo do footer */
footer {
  /* Cor do texto do footer */
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  text-align: center;
  width: 90%;
  padding: 20px;
  position: fixed;
  box-shadow: var(--cor-sombra);
  border-radius: 10px;
  bottom: 10px;
  left: 5%;
  border-top: 1px solid var(--cor-fundo);
}

/*Estilos para a seção de mensagens*/
#mensagem-section {
  max-width: 800px;
  margin: 100px auto;
  margin-top: 20px;
  padding: 20px;
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-terciaria);
  box-shadow: var(--cor-sombra);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
}

#form-mensagem {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  width: 500px;
  max-width: 100%;
  padding: 20px;
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-terciaria);
  box-shadow: var(--cor-sombra);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#mensagem-from {
  width: 100%;
  height: 100px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid var(--cor-terciaria);
}

#enviar-mensagem {
  background-color: var(--cor-secundaria) ;
  color: var(--cor-texto);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
}

#enviar-mensagem:hover {
  background-color: var(--cor-terciaria);
  transition: all 0.1s ease-in-out;
}

#mensagens-enviadas {
  margin-top: 0;
  padding-top: 10px;
  width: 100%;
  max-width: 600px;
  padding: 20px;
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-terciaria);
  box-shadow: var(--cor-sombra);
  border-radius: 5px;
}

.mensagem-enviada {
  background-color: var(--cor-secundaria);
  padding: 10px;
  border-bottom: 1px solid var(--cor-terciaria);
  margin-bottom: 20px;
}

.mensagem-enviada p {
  margin-bottom: 10px;
}

.mensagem-enviada p:last-child {
  margin-bottom: 0;
}

.contador-caracteres {
  font-size: 10px;
  color: var(--cor-texto);
  margin-top: 10px;
  text-align: right;
}

/** Estilo Componente Popup de Presença **/
/* Estilo do Popup de Presença */
.custom-presence-popup-class {
  border-radius: 10px;
  background-color: var(--cor-fundo);
  box-shadow: var(--cor-sombra);
  padding: 5%;
}
/* Estilo do título do popup */
.custom-presence-title-class {
  color: var(--cor-principal);
  font-size: 20px;
}
/* Estilo do texto do popup */
.custom-presence-text-class {
  color: var(--cor-principal);
  font-size: 16px;
}
/* Estilo do botão de confirmação do popup */
.custom-presence-confirm-button-class {
  background-color: var(--cor-terciaria);
  color: var(--cor-principal);
  font-family: var(--fonte-principal);
  border-radius: 5px;
}
/* Estilo do botão de confirmação do popup ao passar o mouse */
.custom-presence-confirm-button-class:hover {
  background-color: var(--cor-principal);
  color: var(--cor-secundaria);
  transition: all 0.1s ease-in-out;
}
/* Estilo do botão de cancelamento do popup */
.custom-presence-cancel-button-class {
  background-color: var(--cor-secundaria);
  color: var(--cor-principal);
  font-family: var(--fonte-principal);
  border-radius: 5px;
}
/* Estilo do botão de cancelamento do popup ao passar o mouse */
.custom-presence-cancel-button-class:hover {
  background-color: var(--cor-terciaria);
  color: var(--cor-secundaria);
  transition: all 0.1s ease-in-out;
}

/** Estilo Componente popup de confirmação **/
/* Estilo do popup de confirmação */
.custom-confirm-popup-class {
  border-radius: 10px;
  background-color: var(--cor-fundo);
  box-shadow: var(--cor-sombra);
  padding: 5%;
}
.custom-confirm-title-class {
  color: var(--cor-principal);
  font-size: 20px;
}
/* Estilo do texto do popup */
.custom-confirm-text-class {
  color: var(--cor-principal);
  font-size: 16px;
}
/* Estilo do botão de confirmação do popup */
.custom-confirm-button-class {
  background-color: var(--cor-terciaria);
  color: var(--cor-principal);
  border-radius: 5px;
}
/* Estilo do botão de confirmação do popup ao passar o mouse */
.custom-confirm-button-class:hover {
  background-color: var(--cor-principal);
  color: var(--cor-secundaria);
  transition: all 0.1s ease-in-out;
}

/** Estilo Componente popup de cancelamento **/
/* Estilo do popup de cancelamento */
.custom-cancel-popup-class {
  border-radius: 10px;
  background-color: var(--cor-fundo);
  box-shadow: var(--cor-sombra);
  padding: 5%;
}
/* Estilo do título do popup */
.custom-cancel-title-class {
  color: var(--cor-principal);
  font-family: var(--fonte-principal);
  font-size: 20px;
}
/* Estilo do texto do popup */
.custom-cancel-text-class {
  color: var(--cor-principal);
  font-family: var(--fonte-principal);
  font-size: 16px;
}
/* Estilo do botão de confirmação do popup */
.custom-cancel-button-class {
  background-color: var(--cor-terciaria);
  color: var(--cor-principal);
  border-radius: 5px;
  font-family: var(--fonte-principal);
}
/* Estilo do botão de confirmação do popup ao passar o mouse */
.custom-cancel-button-class:hover {
  background-color: var(--cor-principal);
  color: var(--cor-secundaria);
  transition: all 0.1s ease-in-out;
}


/* Media Queries para dispositivos móveis */
@media only screen and (max-width: 480px) {
  /* Ajustes para dispositivos móveis pequenos */
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 18px;
  }
  .container {
    padding: 20px;
  }
  .button {
    padding: 10px 20px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
  /* Ajustes para dispositivos móveis médios */
  body {
    font-size: 16px;
  }
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 22px;
  }
  .container {
    padding: 30px;
  }
  .button {
    padding: 15px 30px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* Ajustes para tablets */
  body {
    font-size: 18px;
  }
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 26px;
  }
  .container {
    padding: 40px;
  }
  .button {
    padding: 20px 40px;
  }
}

@media only screen and (min-width: 1025px) {
  /* Ajustes para desktops */
  body {
    font-size: 20px;
  }
  h1 {
    font-size: 42px;
  }
  h2 {
    font-size: 30px;
  }
  .container {
    padding: 50px;
  }
  .button {
    padding: 25px 50px;
  }
}