header .top-bar {background-color: var(--c-heading); padding: 7px 120px 8px;}
header .container {max-width: 1920px;}
header .top-bar .wrapper {display: flex; align-items: center; justify-content: center;}
header .top-bar ul {display: flex; align-items: center; justify-content: center;}
header .login {display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--c-primary);}
header .login > * { color: #fff; transition: var(--trans-5);}
header .login > *:hover {color: var(--c-primary);}
header .top-bar .wrapper > :first-child {gap: 23px; margin-right: auto;}
header .top-bar .wrapper > :first-child > :not(:first-child) > :first-child {padding-left: 23px; position: relative;}
header .top-bar .wrapper > :first-child li{display: flex; align-items: center; justify-content: center; gap: 10px; }
header .top-bar .wrapper > :first-child img {filter: var(--c-filter-secondary);}
header .top-bar .wrapper > :first-child li > :first-child > :nth-child(2) {color: #fff; transition: var(--trans-5);}
header .top-bar .wrapper > :first-child li > a > :nth-child(2):hover {color: var(--c-primary);}
header .top-bar .wrapper > :first-child > :not(:first-child) > :first-child::before {width: 1px; height: 16px; position: absolute; inset: 0; margin-block: auto; margin-right: auto; background-color: #ffffff33; content: "";}
header .top-bar .wrapper > :nth-child(3) {gap: 5px; margin-left: 35px;}
header .top-bar .wrapper > :nth-child(3) a {width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid #ffffff33; border-radius: 5px; position: relative; z-index: 1;}
header .top-bar .wrapper > :nth-child(3) a::before {width: 100%; height: 100%; background: var(--c-primary); content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: scale(0.5); border-radius: 5px; opacity: 0; transition: all 0.4s linear; z-index: -1;}
header .top-bar .wrapper > :nth-child(3) a:hover {border-color: var(--c-primary);}
header .top-bar .wrapper > :nth-child(3) a:hover::before {transform: scale(1.0); opacity: 1;}
header .top-bar .wrapper > :nth-child(3) img {filter: invert(1);}

header .bottom-bar {width: 100%; background-color: #fff;}
header .bottom-bar.sticky {position: fixed; top: 0; left: 0; right: 0; z-index: 999; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);}
header .bottom-bar .wrapper {display: flex; align-items: center; justify-content: space-between; padding-inline: 135px;}
header .bottom-bar .wrapper > ul {display: flex; align-items: center; justify-content: center; gap: 20px;}
header .bottom-bar .wrapper > ul > li {position: relative; padding-block: 33px; cursor: pointer;}
header .bottom-bar .wrapper > ul > :not(:last-child) {flex: none; margin-left: 20px;}
header .bottom-bar .wrapper > ul > li > a {font-size: calc(var(--fs-base, 16px) + 2px); line-height: 20px; transition: all 0.5s ease; position: relative;}
header .bottom-bar .wrapper > ul > li:hover > a {color: var(--c-primary);}
header .bottom-bar .wrapper > ul > li:not(:nth-last-child(-n+2))::before {height: 2px; background-color: var(--c-primary); position: absolute; left: 0; right: 0; bottom: 28px; transform: scale(0, 1); transform-origin: left center; transition: transform 0.5s ease; content: ""; z-index: 1;}
header .bottom-bar .wrapper > ul > li:hover::before {transform: scale(1, 1); transform-origin: right center;}
header .bottom-bar .wrapper > ul > :last-child a {position: relative;}
header .bottom-bar .wrapper > ul > :last-child a > :nth-child(2) {width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; background-color: var(--c-primary); color: #fff; border-radius: 50%; position: absolute; top: -12px; right: -12px;}
header .bottom-bar .wrapper > ul > li > :first-child img {transition: var(--trans-5);}
header .bottom-bar .wrapper > ul > li:hover > :first-child img {filter: var(--c-filter-secondary);}
header .bottom-bar .wrapper > ul > li:has(> ul) {padding-right: 15px;}
header .bottom-bar .wrapper > ul > li:has(> ul)::after {width: 11px; height: 11px; 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-5);}
header .bottom-bar .wrapper > ul > li:hover::after {filter: var(--c-filter-secondary);}
header .bottom-bar .wrapper > ul ul {min-width: 280px; background-color: #fff; padding: 25px 30px 25px; border-radius: 0 0 20px 20px; position: absolute; top: 100%; left: 0; opacity: 0; visibility: hidden; z-index: 99; transform: perspective(500px) rotatex(-20deg); transform-origin: 50% 0%; transition: all 0.3s linear 0s; box-shadow: var(--_c-shadow);}
header .bottom-bar .wrapper > ul > li:hover > ul {opacity: 1; visibility: visible; transform: perspective(500px) rotatex(0);}
header .bottom-bar .wrapper > ul ul a {width: 100%; font-size: calc(var(--fs-base, 16px) + 1px); line-height: 17px; font-weight: 600; text-transform: capitalize; color: var(--c-heading); padding-block: 16px; position: relative; transition: all 0.2s linear 0s;}
header .bottom-bar .wrapper > ul ul a:hover {color: var(--c-primary); padding-left: 5px;}
header .bottom-bar .wrapper > ul ul a::after {width: 11px; height: 11px; background: no-repeat center / contain url("../images/icons/chevron-right.svg"); position: absolute; inset: 0; margin-block: auto; margin-left: auto; filter: var(--c-filter-secondary); transition: all 0.2s linear 0s; content: ""; opacity: 0; visibility: hidden;}
header .bottom-bar .wrapper > ul ul a:hover::after {opacity: 1; visibility: visible;}
header .bottom-bar .wrapper > ul > li:hover::after {filter: var(--c-filter-secondary);}
header .bottom-bar .wrapper > ul ul > :not(:last-child) a {border-bottom: 1px solid var(--_c-a-br);}
header .bottom-bar .wrapper > ul .medga-dropdown {min-width: unset; width: max-content; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 80px;}
header .bottom-bar .wrapper > ul .medga-dropdown > li > a { display: flex; align-items: center; justify-content: start; gap: 10px; border-bottom: unset; padding-block: 8px;}
header .bottom-bar .wrapper > ul .medga-dropdown > li > a:hover {padding-left: unset;}
header .bottom-bar .wrapper > ul .medga-dropdown > li > a::after {content: unset;}
header .bottom-bar .call {display: flex; align-items: center; justify-content: center; gap: 10px;}
header .bottom-bar .call > :first-child {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: var(--c-primary); border-radius: 50%;}
header .bottom-bar .call > :nth-child(2) > :first-child {font-size: var(--fs-2xs, 14px); line-height: 14px; color: var(--c-text); margin-bottom: 7px;} 
header .bottom-bar .call > :nth-child(2) > :nth-child(2) {font-size: calc(var(--fs-base, 16px) + 2px); line-height: 18px; font-weight: 600; color: var(--c-heading); transition: var(--trans-5);}
header .bottom-bar .call > :nth-child(2) > :nth-child(2):hover {color: var(--c-primary);}
header .menu-btn {display: none;}
header .bottom-bar .wrapper > ul > :first-child {display: none;}
.bg-menu {display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; opacity: 0.5; cursor: pointer; z-index: 11;}

header .search-box {display: none; padding-block: 10px; border-top: 1px solid #D9D9D9;}
header .search-box.active {display: block;}
header .search-box form {display: flex; align-items: center; justify-content: center; gap: 10px;}
header .search-box form .input-field {width: 100%; max-width: 900px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: #fff; padding-inline: 20px; border: 1px solid #D9D9D9; border-radius: 5px;}
header .search-box form input {border: 0; border-radius: 0; line-height: unset; padding: unset; padding-left: 15px;}
header .search-box form button {height: 50px; display: inline-flex; align-items: center; gap: 10px; background: #0065F8; font-weight: 500; line-height: var(--lh-md, 34px); text-transform: capitalize;  transition: var(--trans-5); padding-inline: 25px; border-radius: 5px;}
header .search-box form button:hover {background-color: #004dc0;}


@media only screen and (max-width: 1400px) {
    header .top-bar {padding-inline: 30px;}
    header .bottom-bar .wrapper {padding-inline: 45px;}

}
@media only screen and (max-width: 1200px) {
    header .top-bar {padding-inline: 0;}
    header .bottom-bar .wrapper {padding-inline: 15px;}
    header .top-bar .wrapper > :first-child > :last-child {display: none;}
    header .bottom-bar .wrapper > ul {gap: 15px;}
    header .bottom-bar .wrapper > ul > :not(:last-child) {margin-left: unset;}
}
@media only screen and (max-width: 991px) {
    header .top-bar {display: none;}
    header .bottom-bar .call {display: none;}
    header .menu-btn {display: block;}
    header .menu-btn img {filter: var(--c-filter-secondary);}
    header .search-box {display: none;}

    header .bottom-bar .wrapper {padding-block: 14px;}
    header .bottom-bar .wrapper > ul {width: 100%; max-width: 300px; height: 100dvh; justify-content: start; align-items: start; flex-direction: column; gap: 0; background-color: var(--c-heading); position: fixed; top: 0; left: -100%; padding: 5px 15px 30px; overflow: hidden; overflow-y: auto; z-index: 12; transition: var(--trans-3);}
    header .bottom-bar .wrapper > ul.header-active {left: 0;}
    header .bottom-bar .wrapper > ul > li {width: 100%; display: flex; align-items: center; padding-block: unset; border-bottom: 1px solid #ffffff1a;}
    header .bottom-bar .wrapper > ul > li:nth-last-child(-n+2) {display: none;}
    header .bottom-bar a {color: #fff;}
    header .bottom-bar .wrapper > ul > :first-child {display: flex;}
    header .close-btn { display: block; margin-left: auto;}
    header .close-btn img {filter: invert(1);}
    header .bottom-bar .wrapper > ul > li > a {font-size: var(--fs-2xs, 14px);}
    header .bottom-bar .wrapper > ul > li {padding-block: 12px;}
    header .bottom-bar .wrapper > ul > li:has(> ul){flex-wrap: wrap; padding-right: unset; padding-block: 7px;}
    header .bottom-bar .wrapper > ul > li:has(> ul) > a {order: 1; width: 50%;}
    header .bottom-bar .wrapper > ul > li:has(> ul) > .dropdown-btn {width: 50%; display: flex; align-items: center; justify-content: end; order: 2; }
    header .bottom-bar .wrapper > ul > li:has(> ul) > .dropdown-btn svg {width: 30px; height: 30px; fill: #fff;  background-color: var(--c-primary); padding: 8px; transition: var(--trans-5); transform: rotate(-90deg);}
    header .bottom-bar .wrapper > ul > li:has(> ul) > ul {order: 3; width: 100%; margin-left: 8px;}
    header .bottom-bar .wrapper > ul > li:has(> ul)::after {content: unset;}
    header .bottom-bar .wrapper > ul > li:not(:nth-last-child(-n+2))::before {content: unset;}
    header .bottom-bar .wrapper > ul > li:hover > :first-child img {filter: invert(1);}
    header .bottom-bar .wrapper > ul > li:hover > a {color: #fff;}

    header .bottom-bar .wrapper > ul .medga-dropdown > li > a {padding-block: 14px;}
    header .bottom-bar .wrapper > ul ul {display: none; visibility: visible; opacity: 1; position: static; transform: unset; padding: unset; transform-origin: unset; border-radius: 0; background-color: transparent; box-shadow: unset;}
    header .bottom-bar .wrapper > ul li.liActive .dropdown-btn svg {transform: rotate(0deg); background-color: #fff; fill: var(--c-primary);}
    header .bottom-bar .wrapper > ul ul.active {display: block;}
    header .bottom-bar .wrapper > ul .medga-dropdown { display: none; width: 100%;}
    header .bottom-bar .wrapper > ul ul a {font-size: var(--fs-2xs, 14px); font-weight: 500; color: #fff; padding-block: 14px;  }
    header .bottom-bar .wrapper > ul .medga-dropdown > li > a > :nth-child(2) {color: #fff;}
    header .bottom-bar .wrapper > ul ul > :not(:last-child) a {border-bottom: 1px solid #ffffff1a;}
    .bg-menu.bg-active {display: block;}
    header .bottom-bar .logo img {height: 50px; object-fit: contain;}
    header .bottom-bar.sticky {position: static;}
}