/* Start custom CSS */button {
  position: relative;
  margin: 0;
padding: 10px 30px;
  outline: none;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid #724C31;  /* Usando a cor do fundo como borda */
  background-color: #8E705A;      /* Fundo branco para contrastar com o marrom */
  border-radius: 12px;         /* Bordas arredondadas */
  color: #ffffff;              /* Texto na cor marrom */
  font-weight: 400;
  font-size: 22px;
  font-family: 'Bebas Neue', sans-serif;  /* Fonte Bebas Neue */
  z-index: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

button:hover {
  background-color: #724C31;    /* Troca o fundo para marrom no hover */
  color: #fff;                  /* Altera a cor do texto para branco */
  border-color: #fff;           /* Muda a cor da borda para branca */
  transform: scale(1.05);        /* Leve aumento de tamanho ao passar o mouse */
}

button::before,
button::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

button:hover::before,
button:hover::after {
  opacity: 0.2;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

button:hover::before {
  transform: translate(50%, -50%) scale(1.0);
}

button:hover::after {
  transform: translate(50%, 50%) scale(1.0);
}/* End custom CSS */