.background-header-preto {
    background-color: black;
    display: flex;
    justify-content: right;
    width: 100%;
    padding: 0 10px;
    height: 40px;
    top: 0;
    z-index: -1;
}
.contact-header {
    display: flex;
    justify-content: right;
    align-items: center;
}
.contact-header a {
    margin: 0 5px;
    color: white;
    text-decoration: none;
}

.contact-header a:hover {
    color: white;
}

.contact-header i {
    color: white;
    font-size: 16px;
}

.background-header-preto p,
a {
    font-size: 12px;
    margin: 0 10px;
    color: whitesmoke;
    text-decoration: none;
}

.background-header-preto a:hover {
    border-bottom: solid 2px white;

}

.background-header-laranja {
    width: 100%;
    height: 180px;
    top: 40px;
    z-index: -1;
    background-color: var(--laranjinha);
}

#menu {
    top: 5rem;
    left: 60rem;
    display: flex;
    align-items: center;
}

#menu nav {
    position: absolute;
    top: 6rem;
    left: 20rem;
}

#menu ul {
    display: flex;
    list-style-type: none;
    background-color: var(--laranjinha);
    justify-content: center;
}

#menu li {
    margin: 0px 5px;
}

#menu li a {
    display: block;
    color: white;
    text-align: center;
    font-size: 18px;
    padding: 6px 16px;
    text-decoration: none;
    border: solid 2px transparent;
}

#menu li a:hover {
    /* background-color: #ff7b00; */
    border-bottom: solid 2px white;
}

header {
    overflow-x: hidden;
    /* essa altura foi calculada usando o height + o top do background-header-laranja */
    height: calc(180px + 40px);
}

header img {
    position: absolute;
    top: 20px;
    height: 180px;
}