header {
  top: 30px;
  z-index: 10;

  & a {
    color: var(--white);
    font-size: 1rem;

    &:hover {
      color: #ff7900;
    }
  }
}

header .menu_principal {
  gap: 3.375rem;
}

header .social_media {
  gap: 1.375rem;
}

@media (max-width: 1400px) {
  .logo {
    max-width: 150px;
  }
}

@media (max-width: 1200px) {
  header .menu_principal {
    gap: 1.5rem;
  }
}

@media (max-width: 992px) {
  header .menu_principal {
    gap: 0.625rem;
  }

  header .social_media {
    gap: 0.75rem;
  }
}

@media (max-width: 768px) {
  header .logo {
    margin: 0 auto;
  }

  header button {
    appearance: none;

    background: var(--orange);
    color: #d9d9d9;
    font-size: 1.75rem;

    padding: 10px;
    border: none;
  }

  .offcanvas {
    background-color: #f8f9fa;

    & .nav-link {
      color: var(--gray-900);
      font-weight: 500;

      &:hover {
        color: #ff7900;
      }

      & .bi-chevron-down {
        transition: transform 0.2s ease;
      }
    }

    & .nav-link[aria-expanded="true"] .bi-chevron-down {
      transform: rotate(180deg);
      transition: transform 0.2s ease;
    }
  }
}

@media (max-width: 576px) {
}