/* //////////////////////////////////////////////// */
/* Header */

.header {
  position: fixed;
  top: 1.2rem;
  left: 1.2rem;
  right: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 1.2rem;
  background-color: var(--white);
  box-shadow: 0 0 0.6rem 0 var(--shadow-light);
  padding: 1.2rem;
  z-index: 2999;
  transition: all 0.5s ease-in-out;
}

/* //////////////////////////////////////////////// */
/* Buttons */

.header-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 0.6rem;
  background-color: var(--white);
  transition: all 0.5s ease-in-out;
}

.header-btn:active {
  background-color: var(--creme);
}

.header-btn:focus-visible {
  background-color: var(--creme);
}

.header-btn.hide {
  pointer-events: none;
  opacity: 0;
}

@media (min-width: 1200px) {
  .header-btn {
    display: none;
  }
}

.header-btn-icon {
  height: 2.4rem;
  width: 2.4rem;
  color: var(--black);
  background-color: transparent;
  padding: 1.2rem;
  transition: all 0.5s ease-in-out;
}

#menuClose-btn {
  position: fixed;
  top: 4.2rem;
  left: 2.4rem;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0.6rem 0 var(--shadow-light);
  z-index: 2998;
  transition: all 0.5s ease-in-out;
}

#menuClose-btn.show {
  top: 9.6rem;
  pointer-events: all;
  opacity: 1;
}

/* //////////////////////////////////////////////// */
/* Logos */

.header-logo {
  position: fixed;
  top: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  transition: all 0.5s ease-in-out;
}

.header-logo.transform {
  left: 3.6rem;
  transform: translateX(0);
}

@media (min-width: 1200px) {
  .header-logo {
    position: static;
    transform: translateX(0);
  }
}

.header-logo-desktop {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  height: 3rem;
  width: auto;
  transition: all 0.5s ease-in-out;
}

.header-logo-desktop.show {
  opacity: 1;
}

.header-logo-mobi {
  grid-column: 1;
  grid-row: 1;
  height: 4.8rem;
  width: auto;
  transition: all 0.5s ease-in-out;
}

.header-logo-mobi.hide {
  opacity: 0;
}

@media (min-width: 1200px) {
  .header-logo-desktop {
    display: block;
    opacity: 1;
  }

  .header-logo-mobi {
    display: none;
  }
}

/* //////////////////////////////////////////////// */
/* Container */

.header-link-box {
  display: none;
}

@media (min-width: 1200px) {
  .header-link-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
  }
}

/* //////////////////////////////////////////////// */
/* Links */

.header-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  font-family: quicksand, sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 0.8rem;
  color: var(--black);
  background-color: var(--white);
  padding: 1.2rem;
  transition: all 0.3s ease-in-out;
}

.header-link:hover {
  background-color: var(--creme);
}

.header-link-icon {
  height: 2.4rem;
  width: 2.4rem;
  color: var(--black);
}