/* ----LOGO PRINCIPAL DO SITE E IMAGEM FUNDO imgfundo--------------*/

/* ===============================
   VARIÁVEIS DE CONTROLE
   =============================== */
:root {
  /* Espaçamento */
  --header-gap: 700px;
  --logo-right-gap: 25px;

  /* Padding do header */
  --header-padding-desktop: 30px;
  --header-padding-mobile: 15px;

  /* Tamanhos das logos */
  --logo-left-desktop: 78px;
  --logo-right-desktop: 68px;

  --logo-left-tablet: 75px;
  --logo-right-tablet: 55px;

  --logo-left-mobile: 50px;
  --logo-right-mobile: 40px;
}

/* ===============================
   HEADER
   =============================== */
.header_top {
  min-height: 100px;
  background: url('../img/imgfundo11.png') repeat;
  padding: var(--header-padding-desktop);
}

/* ===============================
   CONTAINER PRINCIPAL
   =============================== */
.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--header-gap);
  /*max-width: 1000px;*/
  margin: 0 auto;
}

/* ===============================
   LOGOS
   =============================== */
.logo-left,
.logo-right {
  display: flex;
  align-items: center;
}

.logo-right {
  gap: var(--logo-right-gap);
}

.logo-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Alturas desktop */
.logo-left .logo-img {
  max-height: var(--logo-left-desktop);
}

.logo-right .logo-img {
  max-height: var(--logo-right-desktop);
}

/* ===============================
   TABLET
   =============================== */
@media (max-width: 768px) {
  .header_top {
    padding: var(--header-padding-mobile);
  }

  .logo-left .logo-img {
    max-height: var(--logo-left-tablet);
  }

  .logo-right .logo-img {
    max-height: var(--logo-right-tablet);
  }
}

/* ===============================
   MOBILE
   =============================== */
@media (max-width: 480px) {
  .header-content {
    flex-direction: column;
    gap: 15px;
  }

  .logo-left,
  .logo-right {
    justify-content: center;
    width: 100%;
  }

  .logo-left .logo-img {
    max-height: var(--logo-left-mobile);
  }

  .logo-right .logo-img {
    max-height: var(--logo-right-mobile);
  }
}