/* =====================  HEADER ===================== */
* {
  box-sizing: border-box;
}

#header {

  height: 80px;
  padding: 0 40px;

  background-color: #00427a;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  width: 100%;
  z-index: 1000;

}

header.header--hidden {
  transform: translateY(-100%);
}

.nav-links {

  display: flex;
  gap: 40px;

}

#header a {

  color: white;
  text-decoration: none;

  transition: 0.3s;
  font-size: 20px;
}

#header a:hover {

  color: #dbeafe;

}

.header-social {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}

.header-social a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-social img {
  width: 26px;
  height: 26px;

  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.9;
}

.header-social img:hover {
  transform: scale(1.15);
  opacity: 1;
}

/* ===================== RESPONSIVO ===================== */

@media (max-width: 600px) {

 #header {
    grid-template-columns:1fr auto;
    padding: 0 15px;
    gap: 10px;
  }

  .nav-links {
    gap: 8px;
    justify-content: flex-end;
  }

  #header a {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .header-social {
    display: none;
  }
}