header {width: 100%; position: fixed; top: 35px; z-index: 14;}
header.top {top: 0px;}
header .top-bar {background-color: var(--c-primary); }
header .top-bar .wrapper {display: flex; align-items: end; justify-content: center; gap: 50px;}
header .top-bar ul {display: flex; align-items: center; justify-content: center; gap: 12px; padding-bottom: 22px;}
header .bottom-bar .wrapper {display: flex; align-items: center; justify-content: center;}
header .top-bar .mail {display: flex; align-items: center; justify-content: center; gap: 10px; padding-left: 15px; position: relative;}
header .top-bar .mail::after {width: 1px; height: 20px; background-color: #fff; position: absolute; inset: 0; margin-block: auto; margin-right: auto;  content: "";}
header .top-bar .mail > :nth-child(2) {font-size: var(--fs-base, 16px); font-weight: 500; line-height: var(--lh-base, 24px); color: #fff;}
header .contact-info ul {display: flex; align-items: center; justify-content: center; gap: 23px; padding-bottom: 28px;}
header .contact-info a {display: flex; align-items: center; justify-content: center; gap: 11px;}
header .contact-info a > :nth-child(2) {font-size: var(--fs-base, 16px); font-weight: 500; line-height: var(--lh-base, 24px); color: #fff;}
header .contact-info ul > :nth-child(2) {padding-left: 18px; position: relative;}
header .contact-info ul > :nth-child(2)::after {width: 1px; height: 20px; background-color: #fff; position: absolute; inset: 0; margin-block: auto; margin-right: auto;  content: "";}
header .menu {display: none;}

header .bottom-bar {background-color: var(--c-secondary); position: relative;}
header .bottom-bar > ul {display: flex; align-items: center; justify-content: center; gap: 32px;}
header .bottom-bar > ul > li > a {font-size: var(--fs-xs, 18px); font-weight: 500; color: var(--_c-anchor); line-height: var(--lh-sm, 28px); text-transform: capitalize; padding-block: 21px; padding-inline: 10px;}
header .bottom-bar > ul > li:has(ul) > a {position: relative; padding-inline: unset; padding-right: 21px;}
header .bottom-bar > ul > li:has(ul) > a::after {width: 13px; height: 8px; background: no-repeat center / contain url("../images/icons/chevron-down.svg"); position: absolute; inset: 0; margin-block: auto; margin-left: auto; content: ""; transition: var(--trans-4);}
header .bottom-bar > ul > li:has(ul):hover > a::after { transform: rotate(-180deg);}
header .bottom-bar > ul > li > ul { background-color: var(--_c-bg); padding: 14px 33px 16px 33px; position: absolute; top: 75px; visibility: hidden; opacity: 0; transition: var(--trans-3);}
header .bottom-bar > ul > li > ul::after {width: 100%; height: 14px; background-color: transparent; position: absolute; top: -9px; left: 0; content: "";}
header .bottom-bar > ul > li:has(ul):hover > ul {visibility: visible; opacity: 1;}
header .bottom-bar > ul > li > ul:has(ul) {column-count: 4; column-gap: 42px;}
header .bottom-bar > ul > li > ul > li:has(ul) {width: 100%; min-width: 158px; break-inside: avoid; margin-bottom: 15px;}
header .bottom-bar > ul > li > ul > li:has(ul) > :first-child {width: 100%; display: block; font-size: var(--fs-base, 16px); font-weight: 500; line-height: 1.5; text-transform: capitalize; color: var(--_c-orange); padding-bottom: 5px; margin-bottom: 15px; border-bottom: 1px solid var(--_c-br);}
header .bottom-bar > ul > li > ul > li a {width: 100%; font-size: var(--fs-2xs, 14px); text-wrap: wrap; line-height: 1.4;  color: var(--_c-header-anchor); padding-block: 5px; border-bottom: 1px solid var(--_c-br); transition: var(--trans-3);}
header .bottom-bar > ul > li > ul > li a:hover {color: var(--_c-orange);}
header .bottom-bar > ul .btn__secondary {font-size: var(--fs-2xs, 14px); font-weight: 500; line-height: var(--lh-none); text-transform: unset; padding: 10px 30px;  color: #fff;}
header .bottom-bar > ul > :last-child > a:hover {color: var(--c-primary);}
header .bottom-bar > ul > :last-child {padding-left: 30px; position: relative;}
header .bottom-bar > ul > :last-child::after {width: 1px; height: 20px; background-color: #000; position: absolute; inset: 0; margin-block: auto; margin-right: auto;  content: "";}
.menu-bg {display: none; width: 100%; height: 100vh; background-color: #00000080; position: fixed; top: 0; left: 0; z-index: 9;}
header .bottom-bar > ul > li > .dropdown-btn {display: none;}


@media only screen and (max-width: 1200px) {
    header .top-bar .wrapper {gap: 20px;}
    header .bottom-bar > ul {gap: 15px;}
    header .bottom-bar > ul > li > a {font-size: var(--fs-base, 16px);}
    header .bottom-bar > ul > :last-child {padding-left: 20px;}
    header .bottom-bar > ul > li:has(ul) > a {padding-right: 17px;}
    header .bottom-bar > ul > li:has(ul) > a::after {width: 11px;}
}
@media only screen and (max-width: 991px) {
    header {position: relative; top: 0;}
    header .container {max-width: unset; padding-inline: unset;}
    header .top-bar ul {display: none;}
    header .top-bar .wrapper {align-items: center; justify-content: center; flex-wrap: wrap; gap: 0;}
    header .logo {width: 47%; order: 1; padding-left: 15px;}
    header .menu {display: block; width: 47%; order: 2; padding-right: 15px;}
    header .contact-info {width: 100%; order: 3;}
    header .contact-info ul {display: flex; padding-block: 24px 23px; background-color: var(--c-secondary);}
    header .contact-info ul > :nth-child(2)::after {height: 26px;}
    header .contact-info.hide-info {display: none;}
    header .contact-info a > :nth-child(2) {font-size: 16px; color: #000;}
    header .contact-info ul > :first-child img {filter: invert(1);}
    header .menu-btn {width: fit-content; display: flex; align-items: center; justify-content: center; gap: 15px; margin-left: auto;}
    header .menu-btn img {filter: invert(1);}
    header .bottom-bar {max-height: 500px; width: 100%; display: none; background-color: var(--c-primary); padding: 10px 20px 30px 20px; overflow-y: auto; transition: var(--trans-3); position: absolute; overflow-y: auto;}
    header .bottom-bar.bar-active {display: block;}
    header .bottom-bar > ul {flex-direction: column; gap: 15px;}
    header .bottom-bar > ul > :last-child::after {content: unset;}
    header .bottom-bar > ul > li > a {width: 100%; padding: unset;}
    header .bottom-bar > ul > li {width: 100%;} 
    header .bottom-bar > ul > :last-child {padding-left: unset;}
    header .bottom-bar > ul > li > ul:has(ul) {column-count: unset; column-gap: 0;}
    header .bottom-bar > ul > li > a {color: #fff;}
    header .bottom-bar > ul > li > ul { position: static; opacity: 1; visibility: visible; background-color: transparent; padding: unset;}
    header .bottom-bar > ul .btn__secondary {width: fit-content; background-color: #fff; color: #000;}
    header .bottom-bar > ul > li > ul > li a {color: #fff;}
    header .bottom-bar > ul > li:has(ul) > a::after {content: unset;}
    header .bottom-bar > ul > li > ul > li:has(ul) > :first-child {font-size: var(--fs-2xs, 14px); margin-bottom: unset; border-bottom: 0;}
    header .bottom-bar > ul > li > ul > li:has(ul) {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: unset;}
    header .bottom-bar > ul > li > ul > li:has(ul) > :first-child {width: 50%; order: 1;}
    header .bottom-bar > ul > li > ul > li:has(ul) > .dropdown-btn {display: flex; align-items: center; justify-content: end; filter: invert(1); width: 50%;   order: 2;}
    header .bottom-bar > ul > li > ul > li:has(ul) > .dropdown-btn svg {width: 14px; height: 12px; transition: var(--trans-3); transform: rotate(-90deg);}
    header .bottom-bar > ul > li > ul > li.liActive > .dropdown-btn svg {transform: unset;}
    header .bottom-bar > ul > li > ul > li > ul {order: 3; width: 100%;}
    header .bottom-bar > ul > li > ul {display: none;}
    header .bottom-bar > ul > li > ul > li > ul {display: none;}
    header .bottom-bar > ul > li:has(> ul) {display: flex; flex-wrap: wrap;}
    header .bottom-bar > ul > li:has(ul) > a {padding-right: unset; width: 50%; order: 1;}
    header .bottom-bar > ul > li > .dropdown-btn {display: flex; align-items: center; justify-content: end; filter: invert(1); width: 50%;   order: 2;}
    header .bottom-bar > ul > li > .dropdown-btn svg {width: 14px; height: 14px; transition: var(--trans-3); transform: rotate(-90deg);}
    header .bottom-bar > ul > li.liActive > .dropdown-btn svg {transform: unset;}
    header .bottom-bar > ul > li > ul > li > ul.active {display: block; margin-bottom: 10px;}
    header .bottom-bar > ul > li > ul {order: 3; width: 100%;}
    header .bottom-bar > ul > li > ul > li > ul.li-active {display: block;}
    header .bottom-bar > ul > li > ul.active {display: block; padding: 10px 20px; border-radius: 10px; background-color: #00000083;       margin-top: 10px;}
    .menu-bg.bg-active {display: block;}
}
@media only screen and (max-width: 576px) {
    header .menu-btn svg {width: 35px; }
    header .contact-info.fixed {position: fixed; top: 0;}
}

@media only screen and (max-width: 475px) {
    header .logo img {width: 100px; object-fit: contain;}
    .menu-bg button {left: 290px;}
    header .contact-info ul {gap: 10px;}
    header .contact-info a {gap: 5px;} 
}

@media only screen and (max-width: 380px) {
    header .logo {width: 46%;}
    header .menu {width: 46%;}
}