*,
*::before,
*::after {
  padding: 0;
  margin: 0;

  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  user-select: none;

  font-family: Roboto, Arimo, Arial, Helvetica, sans-serif;
  font-size: 1.5vw;

  /* Evita rolagem lateral fantasma */
  height: 100dvh;
  width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  min-height: 100dvh;
  width: 100%;
}

/*** Cabeçalho ***************************************/

header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  padding: 1vw 2vw;

  background-color: #d3ebff;
}

.menu {
  display: flex;
  flex-direction: row;
}

/*** Logo ***/
.logo {
  display: flex;
  flex-direction: column;
}

.logo .nome {
  display: flex;

  font-family: Roboto, Helvetica, sans-serif;
  font-weight: 800;
  margin-top: -1.25vw;
}

.logo .nome .letra {
  font-size: 4vw;
}

.logo .nome .txt {
  font-size: 3vw;
}

.logo .nome .viver {
  color: #00aa00;
}

.logo .nome .bem {
  color: #0000e9;
}

.logo .slogan {
  font-size: 1.17vw;
  font-weight: 500;
  line-height: 0.5;
  margin-top: -0.3vw;
  color: #0000aa;
}

/*** Fornecedor ***/

.fornecedor {
  display: flex;
  align-content: center;
  align-items: flex-end;

  font-style: italic;
  gap: 0.6vw;
}

.fornecedor .nome {
  display: flex;

  font-family: Roboto, Helvetica, sans-serif;
  font-weight: 800;
  line-height: 1;
}

.fornecedor .nome {
  display: flex;

  font-family: Roboto, Helvetica, sans-serif;
  font-size: 2.4vw;
  font-weight: 800;
}

.fornecedor .nome .blu {
  color: #0000c1;
}

.fornecedor .nome .ant {
  color: #f76227;
}

.fornecedor .consultor {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: flex-end;

  font-size: 1.6vw;
  line-height: 0.95;

  border-right: 0.25vw solid #0000c1;
  padding-right: 0.6vw;
}

/*** Menu ***/

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2vw;

  font-size: 1.8vw;
  letter-spacing: 0.015vw;
  font-weight: 500;
}

.menu li {
  position: relative;
  list-style: none;
}

.menu .menu-item:hover {
  cursor: pointer;
}

.menu a {
  color: inherit;
  text-decoration: none;
}

.dropdown ul {
  position: absolute;
  display: none;
  border: 0.1vw solid #70b970;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;

  transition: all 0.3s;
}

.dropdown:hover ul {
  display: block;
}

.dropdown ul li {
  padding: 0.8vw 1vw;
  border: 0.1vw solid #9dda9d;
  background-color: #ddffdd;

  transition: all 0.3s;
}

.dropdown ul li:hover {
  color: #00a300;
  background-color: white;
}

.dropdown .item-contato {
  margin-left: -16.5vw;
  cursor: pointer;
  width: fit-content;
}

.menu-contato .menu-item {
  color: #0000c8;
}

.menu-contato i {
  color: black;
  padding-left: 0.4vw;
  padding-right: 1vw;
}

/*** Underline animado ***/

.menu .menu-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.25vw;
  width: 100%;
  background-color: #0000c8;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
  list-style: none;
}

.menu .menu-item:hover::after {
  transform: scaleX(1);
}

/*** Rodape ***************************************/

footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;

  height: fit-content;
  width: 100%;

  padding: 2.5vw 0;

  background-color: #2e2e2e;
}

footer .logo .slogan {
  color: #d6d6d6;
}

footer .logo .bem {
  color: #007ae4 !important;
}

.item-rod {
  color: #0088fe;
  font-size: 2vw;
  font-weight: 600;

  padding: 0.4vw;
  padding-bottom: 0.6vw;
  margin: 0.15vw;
}

.contato .item-rod {
  color: #00aa00;
}

/*** Menu Rodapé ***/

.menu-rodape {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  font-size: 2vw;

  gap: 3.5vw;
}

.menu a,
.links a {
  color: inherit;
  text-decoration: none;
}

footer .links a {
  padding: 0.4vw 0.6vw;
  transition: all 0.3s;
}

footer .links i {
  padding-right: 1vw;
  color: #d6d6d6;
}

footer .links a:hover {
  color: #00aa00;
}

footer .contato .links a:hover {
  color: #0088fe;
}

.menu-rodape .links {
  padding: 0.35vw;
  margin: 0.35vw 0;
}

.menu-rodape .links:hover {
  cursor: pointer;
}

.navegacao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;

  color: #d6d6d6;
}

.produto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;

  color: #d6d6d6;
}

.contato {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;

  color: #d6d6d6;
}