.header {position: sticky;top: -2.5rem;z-index: 9999;height: 0; } .header .holder {padding-top: 2.5rem; } .header .holder .navbar {background: var(--primary);display: flex;align-items: center;justify-content: flex-end;height: 5rem;padding: 0 0.75rem 0 1.25rem;position: relative; } @media (min-width: 992px) {.header .holder .navbar .col-menu {display: none;} } .header .holder .navbar .col-menu .btn svg {color: var(--color1);width: 2.0625rem;height: 2.0625rem; } .header .holder .navbar .col-menu .btn.collapsed svg {color: var(--white); } .header .holder .navbar .col-logo {flex-grow: 1; } .header .holder .navbar .col-logo .brand {background-image: var(--white);display: block;width: 189px;height: 42px;position: relative; } @media (max-width: 991.98px) {.header .holder .navbar .col-logo .brand {width: 8.5625rem;height: 1.8125rem;} } .header .holder .navbar .col-logo .brand .img-logo {position: absolute;width: 100%;height: 100%;top: 0;left: 0; } .header .holder .navbar .nav ul {display: flex;list-style: none;margin: auto 0.9375rem; } .header .holder .navbar .nav ul li {position: relative; } @media (min-width: 992px) {.header .holder .navbar .nav ul li:hover ul {display: flex;} } .header .holder .navbar .nav ul li button {display: none;position: absolute;top: 0;right: 0; } .header .holder .navbar .nav ul li button svg {color: var(--white);width: 1.5rem;height: 1.5rem;transform: rotate(90deg); } .header .holder .navbar .nav ul li button.collapsed svg {transform: none; } .header .holder .navbar .nav ul li ul {position: absolute;background: var(--secondary);flex-direction: column;top: 2.6875rem;left: 0;padding: 0.9375rem 0.3125rem;width: max-content;margin: 0;display: none;z-index: 2; } .header .holder .navbar .nav ul li ul.show {display: flex; } .header .holder .navbar .nav ul li ul .nav-link {padding: 0.3125rem 0.75rem; } .header .holder .navbar .nav ul li ul .nav-link:hover:after {display: none; } .header .holder .navbar .nav-link {color: var(--white);font-weight: 900;font-size: 0.875rem;text-transform: uppercase;padding: 0.625rem 0.75rem;position: relative; } .header .holder .navbar .nav-link:after {content: "";position: absolute;height: 3px;background: var(--color1);bottom: 0.4375rem;left: 0.75rem;right: 0.75rem;display: none; } .header .holder .navbar .nav-link:hover {color: var(--color1); } .header .holder .navbar .nav-link:hover:after {display: block; } .header .holder .navbar .col-btn {display: flex;gap: 10px; } .header .holder .navbar .col-btn .header-btn {text-transform: uppercase;font-weight: 900;padding-left: 0.9375rem;padding-right: 0.9375rem;background: var(--secondary);color: var(--white); } @media only screen and (max-width: 365px) {.header .holder .navbar .col-btn .header-btn {display: none;} } .header .holder .navbar .col-btn .account-btn {padding: 0.5rem;background: var(--secondary);display: flex; } .header .holder .navbar .col-btn .account-btn svg {width: 2rem;height: 2rem;color: var(--white); } .header .holder .navbar .col-btn .account-btn.collapsed {background: var(--light); } .header .holder .navbar .col-btn .account-btn.collapsed svg {color: var(--black); } .header .holder .navbar .login-bar {position: absolute;top: 4.6875rem;right: 0.75rem;background: var(--secondary);padding: 0.4375rem 0.75rem;display: none; } .header .holder .navbar .login-bar p, .header .holder .navbar .login-bar a {font-size: 0.875rem;font-weight: 700;color: var(--white); } .header .holder .navbar .login-bar.show {display: flex;flex-direction: column;gap: 0.3125rem; } @media (max-width: 991.98px) {.header {top: 0;}.header .holder {padding-top: 0;}.header .holder .container {padding: 0;}.header .holder .container .navbar {padding-left: 0;}.header .holder .container .navbar .nav-link {font-size: 1.375rem;}.header .holder .container .nav {background: var(--primary);position: absolute;top: 4.375rem;left: -25rem;height: 100vh;transition: left 0.5s;}.header .holder .container .nav ul {padding: 1.875rem 3.125rem 1.875rem 1.875rem;flex-direction: column;margin: 0;width: 20.625rem;}.header .holder .container .nav ul li button {display: block;}.header .holder .container .nav ul li ul {position: unset;background: transparent;}.header .holder .container .nav ul li ul .nav-link {font-size: 1rem;}.header .holder .container .nav.show {left: 0;transition: left 0.5s;} }