.header {position: relative;top: 0;width: 100%;max-width: 1920px;z-index: 9000;min-width: 320px; } .header .header-bar {position: relative;background: linear-gradient(to right, rgba(255, 237, 152, 0.5), rgba(254, 246, 193, 0.5));background: linear-gradient(to right, rgb(255, 237, 152), rgb(254, 246, 193));display: flex;justify-content: center;padding: 0.2083333333rem 0.6666666667rem;z-index: 1; } .header .header-bar::before {content: "";width: 100%;height: 100%;background: url("/static/img/background.png");background-size: cover;position: absolute;top: 0;left: 0; } .header .header-bar .bar-link {font-size: 0.8333333333rem;font-weight: 700;display: flex;align-items: center;gap: 0.2083333333rem;z-index: 2; } .header .header-bar .bar-link svg {color: var(--color15); } .header .header-bar .bar-link:hover {text-decoration: none; } .header .navbar {background: linear-gradient(to right, var(--color15), var(--color17));padding: 0;flex-direction: row;flex-wrap: nowrap; } .header .navbar.transparent {background: transparent; } .header .row {width: 100%;flex-wrap: nowrap;height: 100%; } @media (min-width: 576px) {.header .row {height: 4.125rem;} } .header .navbar-brand {height: 100%;display: flex;align-items: center;max-width: 13.0833333333rem;padding-top: 0.4166666667rem;margin-right: 0;width: 9.4444444444rem;padding-left: 0.1111111111rem; } @media (min-width: 576px) {.header .navbar-brand {width: 100%;padding-left: 0.2916666667rem;} } .header .navbar-brand .img-fluid {position: relative;top: -0.1666666667rem; } @media (max-width: 991.98px) {.header .col-navbar.show {display: flex !important;position: fixed;inset: 0;background: linear-gradient(to right, var(--color15), var(--color17));align-items: center;justify-content: center;top: 0;overflow-y: auto;} } .header .navbar-nav {font-weight: 600;flex-direction: column;padding: 0;height: 100%;align-items: center;width: 100%; } @media (min-width: 992px) {.header .navbar-nav {justify-content: flex-end;flex-direction: row;} } @media (min-width: 992px) {.header .navbar-nav {width: auto;} } @media (max-width: 991.98px) {.header .navbar-nav {justify-content: center;} } .header .navbar-nav > .nav-item {flex-shrink: 1;white-space: nowrap;min-width: 1px;position: relative;width: auto; } .header .navbar-nav > .nav-item .btn-account {color: white;margin-top: 20px;box-shadow: none !important;display: none; } @media (min-width: 992px) {.header .navbar-nav > .nav-item .btn-account {display: inline-block;margin-top: 0 !important;margin-left: 10px;} } .header .navbar-nav > .nav-item .btn-account svg {width: 40px;height: auto; } @media (min-width: 992px) {.header .navbar-nav > .nav-item .btn-account svg {width: 24px;} } .header .navbar-nav > .nav-item > .nav-link {display: block;height: 100%;padding: 0; } .header .navbar-nav > .nav-item > .nav-link svg {position: absolute;color: var(--white);right: 0.8333333333rem;top: 0.8333333333rem;display: none; } @media (min-width: 992px) {.header .navbar-nav > .nav-item > .nav-link svg {right: 0.4166666667rem;top: 0.5rem;display: block;} } .header .navbar-nav > .nav-item > .nav-link > a {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: flex;align-items: center;justify-content: center;color: var(--white);padding-left: 1.25rem;padding-right: 1.25rem;padding-top: 0.4166666667rem;padding-bottom: 0.4166666667rem;font-size: 1.4736842105rem;line-height: 1.3333333333;font-weight: 600; } @media (min-width: 992px) {.header .navbar-nav > .nav-item > .nav-link > a {font-size: 0.75rem;height: 100%;text-decoration: none !important;padding-left: 0.5416666667rem;padding-right: 0.5416666667rem;} } .header .navbar-nav > .nav-item > .nav-link .btn-light-gradient {text-transform: uppercase;padding-left: 1.25rem;padding-right: 1.25rem;margin-top: 0.8333333333rem; } @media (min-width: 992px) {.header .navbar-nav > .nav-item > .nav-link .btn-light-gradient {margin-top: 0 !important;white-space: normal;max-width: 100px;text-align: center;font-size: 14px;padding: 0;} } @media (min-width: 992px) {.header .navbar-nav > .nav-item > .nav-link.has-children > a {padding-right: 1.6666666667rem;border-radius: 0.4166666667rem 0.4166666667rem 0 0;} } .header .navbar-nav > .nav-item > .nav-link > ul {list-style-type: none;padding: 0; } @media (min-width: 992px) {.header .navbar-nav > .nav-item > .nav-link > ul {position: absolute;padding: 0.5416666667rem 0 0.625rem 0;background: var(--color18);border-radius: 0.4166666667rem;right: 0;display: none;} } .header .navbar-nav > .nav-item > .nav-link > ul .nav-item {padding: 0;text-align: center; } @media (min-width: 992px) {.header .navbar-nav > .nav-item > .nav-link > ul .nav-item {text-align: left;} } @media (min-width: 992px) {.header .navbar-nav > .nav-item > .nav-link > ul .nav-item .nav-link {padding: 0;margin: 0;} } .header .navbar-nav > .nav-item > .nav-link > ul .nav-item .nav-link a {color: var(--color15); } @media (min-width: 992px) {.header .navbar-nav > .nav-item > .nav-link > ul .nav-item .nav-link a {padding: 0.1666666667rem 1.5416666667rem 0.1666666667rem 1.6666666667rem;text-align: left;justify-content: flex-start;font-size: 0.75rem;line-height: 1.5555555556;font-weight: 500;text-decoration: none !important;display: flex;} } @media (max-width: 991.98px) {.header .navbar-nav > .nav-item > .nav-link > ul .nav-item .nav-link a {color: var(--white);} } .header .navbar-nav > .nav-item > .nav-link:hover svg {transform: rotate(180deg); } @media (min-width: 992px) {.header .navbar-nav > .nav-item > .nav-link:hover > ul {display: block;} } .header .navbar-nav .popover {top: 100%;right: 11px;left: auto;display: none;border-radius: 10px 0 10px 10px; } .header .navbar-nav .popover.show {display: block; } .header .navbar-nav .popover .arrow {left: auto;right: 0; } .header .navbar-nav .popover .popover-body {white-space: nowrap; } .header .navbar-nav .popover .row {height: auto;flex-wrap: wrap; } .header .btn-menu {padding: 0.2083333333rem 0 0.2083333333rem 0.2083333333rem;height: 100%;color: var(--white);box-shadow: none !important; } .header .btn-menu:hover {color: var(--color18); } .header .btn-menu:focus {color: var(--white); } .header .btn-menu:focus:hover {color: var(--color18); }