@font-face {
  font-family: "NouvelR";
  src: url("/fonts/NouvelR-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "NouvelR";
  src: url("/fonts/NouvelR-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "NouvelR";
  src: url("/fonts/NouvelR-Book.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
}

@font-face {
  font-family: "NouvelR";
  src: url("/fonts/NouvelR-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "NouvelR";
  src: url("/fonts/NouvelR-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: "NouvelR", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.botaoConheca {
  position: relative;
  overflow: hidden;
  z-index: 1; /* Garante que o texto fique acima */
  transition: color 0.3s ease-in-out; /* Animação da cor do texto */
  color: white;
}

.botaoConheca::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: white;
  transition: width 0.3s ease-in-out; /* Animação da largura */
  z-index: -1; /* Fica por baixo do texto */
}

.botaoConheca:hover {
  color: black; /* Altera a cor do texto para preto no hover */
  border: black 0.9px solid;
}

.botaoConheca:hover::before {
  width: 100%; /* Expande o pseudo-elemento para 100% da largura */
}