.topbar {padding-block: 6px; background-color: var(--c-primary);}
.topbar .wrapper {display: flex; align-items: center; justify-content: space-between;}
.topbar p {font-weight: var(--fs-xs, 14px); font-weight: 500; color: #fff;}
.topbar .btns {display: flex; align-items: center; gap: 36px;}
.topbar .btns > a {position: relative;}
.topbar .btns > a::after {position: absolute; top: 6px; right: -22px; width: 2px; height: 70%; background-color: #fff; content: '';}
.topbar .btns a {display: flex; align-items: center; gap: 6px; font-weight: 700; color: #fff;}
.topbar .btns ul a:hover {transform: scale(0.90);}
.topbar ul {display: flex; align-items: center; justify-content: center; gap: 10px;}
.topbar *::selection {background-color: #fff; color: var(--c-primary);}

header {padding-block: 16px; position: sticky; top: 35px; width: 100%; background-color: #fff; z-index: 500; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 15%);}
header nav {display: flex; align-items: center; justify-content: space-between;}
header .collapsed .logo {display: none;}
header .nav_links {display: flex; align-items: center; gap: 30px;}
header .nav_links a {position: relative; font-weight: 500; line-height: 24px; text-transform: uppercase;}
header .nav_links a:hover {color: var(--c-primary);}
header .nav_links > li > a::before {position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background-color: var(--c-primary); border-radius: 5px; transition: width var(--transition); content: '';}
header .nav_links > li > a:hover::before {width: 80%;}
header .nav_links > li > a.active {color: var(--c-primary);}
header .btn__primary.gradient {gap: 6px; width: 100%; max-width: 180px;}
header #nav-toggle,
header #nav-close {display: none;}

@media only screen and (max-width: 1200px) {
    header .logo {max-width: 190px;}
    header .nav_links {gap: 18px;}
    header .nav_links > li:last-of-type {display: none;}
    header .btn__primary.gradient {max-width: 162px; padding: 8px 6px;}
}

@media only screen and (max-width: 991px) {
    .topbar .btns {gap: 20px;}
    .topbar .btns > a span {display: none;}
    .topbar .btns > a::after {top: 3px; right: -14px; height: 80%;}
    header #nav-toggle {display: block;}
    header .btn__primary.gradient {max-width: 170px; padding: 6px 8px; margin-inline: auto 20px;}
    header .collapsed {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 80%);}
    header .collapsed .logo {width: 50%; display: block; max-width: 100%; background-color: var(--c-primary); padding: 14px; transition: width .5s ease-in;}
    header .collapsed .logo img {filter: brightness(50);}
    header #nav-close {display: block; position: absolute; top: 25px; left: calc(100% - 50% - 40px); color: #fff; transition: left .4s ease-in;}
    header .nav_links {width: 50%; height: 100%; flex-direction: column; align-items: flex-start; gap: 16px; background-color: #fff; padding: 16px; transition: width .5s ease-in;}
    header .nav_links > li:last-of-type {display: block;}
}

@media only screen and (max-width: 767px) {
    .topbar .wrapper {flex-direction: column; gap: 8px;}
    .topbar p {text-align: center;}
}

@media only screen and (max-width: 575px) {
    header {padding-block: 10px;}
    header .logo img {max-width: 180px;}
    header .collapsed .logo {width: 90%; padding: 10px;}
    header .nav_links {width: 90%;}
    header #nav-close {top: 14px; left: calc(100% - 10% - 40px);}
}

@media only screen and (max-width: 475px) {
    header .logo img {max-width: 160px;}
    header .collapsed .logo,
    header .nav_links {width: 100%;}
    header #nav-close {left: calc(100% - 40px);}
    header .btn__primary.gradient {width: fit-content; padding: 4px 8px; margin-right: 10px;}
} 

@media only screen and (max-width: 360px) {
    header .btn__primary.gradient {display: none;}
}