/* Navbar */
header {position: sticky; top: 0; width: 100%; background-color: var(--_c-lgt-primary); z-index: 3;}
header nav {display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 0.5rem;}
header nav > :first-child {width: fit-content;}
header .links {display: flex; align-items: center; gap: 2.625rem;}
header li a {text-transform: capitalize; font-family: var(--ff-secondary); font-weight: 500; transition: var(--trans-3);}
header li a:hover {color: var(--_c-red-brown); padding-bottom: 8px;}
header .btn__primary {display: flex; align-items: center; gap: 0.625rem;}
header .btn__primary img {filter: var(--filter-black);}
header :where(.toggle-btn, .cross-btn) {display: none; justify-content: center; align-items: center; padding: 0.25rem; border: 1px solid transparent; border-radius: 0.625rem;}
header :where(.toggle-btn, .cross-btn) img {filter: var(--filter-secondary);}

@media only screen and (max-width: 991px) {
    header nav > :first-child img {width: 60px;}
    header .links {gap: 1.75rem;}
}
@media only screen and (max-width: 767px){
    header .links {position: absolute; inset: 100% auto auto 0; width: 100%; display: none; flex-direction: column; gap: 0; background-color: var(--_c-lgt-primary);}
    header li {width: 100%; padding: 0.625rem 1.25rem; border-bottom: 1px solid var(--c-heading);}
    header li a {color: var(--c-heading);}
    header li a:hover {padding-bottom: 0;}
    header .toggle-btn {display: flex;}
    header .btn__primary {margin-left: auto;}
}
@media only screen and (max-width: 575px) {
    header nav {gap: 0.25rem;}
    header nav > :first-child img {width: 3rem;}
    header .btn__primary {gap: 0.25rem;}
    header .btn__primary img {width: 0.875rem;}
}
@media only screen and (max-width: 360px) {
    header .btn__primary {padding: 0.25rem; border-radius: 6px;}
    header .btn__primary img {width: 0.75rem;}
    header .btn__primary > :nth-child(2) {display: none;}
}