.header {
  position: relative;
  height: 300px;
  overflow: hidden;
}

/* fundo (parallax layer) */
.header-bg {
  position: absolute;
  width: 100%;
  height: 120%;
  top: 0;
  left: 0;

  background-image: url('sua-imagem.png');
  background-size: cover;
  background-position: center;

  z-index: 1;
}

/* conteúdo acima */
.header-content {
  position: relative;
  z-index: 2;

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

  padding: 10px 20px;
}

/* logo */
.logo img {
  height: 60px;
}


/* container da nav */
.nav {
  position: relative;
  width: 100%;
  height: 80px; /* ajuste conforme sua imagem */
}

/* imagem da barra */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url('nav.png');
  background-size: cover;
  background-position: center;

  z-index: 1;
}

/* links flutuando */
.nav a {
  position: relative;
  z-index: 2;

  color: white;
  text-decoration: none;
  font-family: Arial;

  /* deixa fluido */
  flex: 1;
  text-align: center;
}

/* distribuição automática */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* FOOTER BASE */
.footer {
  position: relative;
  width: 50%px;
  height: 240px; /* seu valor */
  overflow: hidden;
  background: #edfbd7;
}
/* GIF no canto esquerdo */
.footer-gif {
  position: relative;
  z-index: 3;

  height: 200px;

  margin-left: 50%;
  margin-top: 20%px;
  margin-bottom: 40%;

  transform: translateX(-50%);

}

/* PARALLAX (fica no fundo) */
.parallax {
  position: absolute;
  z-index: 1; /* 🔥 fica atrás */
  bottom: 0;
  left: 0;

  width: 100%; /* 🔥 mais folga pro loop */
  height: 100%;

  background-image: url("imgs/back_footer.png");
  background-repeat: repeat-x;
  background-size: auto 100%;

  animation: mover 20s linear infinite;

}

/* ANIMAÇÃO */
@keyframes mover {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.33%);
  }
}