.header {position: sticky;top: 0;z-index: 9000;width: 100%;margin: 0;background: var(--primary);border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .header .nav {display: none; } .header .navbar {display: block;height: 72px;padding: 0;background: var(--primary); } @media (min-width: 992px) {.header .navbar {height: 89px;} } .header .navbar .container, .header .navbar .container > .row {height: 100%; } .header .navbar .container {position: relative;display: block;max-width: 1452px; } .header .navbar .container > .row {flex-wrap: nowrap;align-items: center; } .header .navbar .col {height: 100%; } .header .col-menu {display: flex;align-items: center; } .header .col-menu .btn {display: grid;place-items: center;width: 40px;height: 40px;padding: 0;color: var(--white);background: transparent;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 0; } .header .col-menu .menu-toggle-lines {position: relative;display: block;width: 20px;height: 16px; } .header .col-menu .menu-toggle-lines span {position: absolute;left: 0;display: block;width: 100%;height: 2px;background: currentColor;transition: top 0.25s ease, transform 0.25s ease, opacity 0.2s ease; } .header .col-menu .menu-toggle-lines span:nth-child(1) {top: 0; } .header .col-menu .menu-toggle-lines span:nth-child(2) {top: 7px; } .header .col-menu .menu-toggle-lines span:nth-child(3) {top: 14px; } .header .col-menu .menu-toggle.collapsed .menu-toggle-lines span:nth-child(1) {top: 7px;transform: rotate(45deg); } .header .col-menu .menu-toggle.collapsed .menu-toggle-lines span:nth-child(2) {opacity: 0; } .header .col-menu .menu-toggle.collapsed .menu-toggle-lines span:nth-child(3) {top: 7px;transform: rotate(-45deg); } .header .col-logo {flex-shrink: 1; } .header .logo {display: flex;align-items: center;width: 176px;height: 100%;padding: 0; } @media (min-width: 992px) {.header .logo {width: 196px;} } .header .logo picture {display: flex;align-items: center; } .header .logo .img-fluid {width: 100%;max-height: 69px; } @media (min-width: 992px) {.header .logo .img-fluid {max-height: 78px;} } .header .col-nav {flex-grow: 1;display: flex;justify-content: center; } @media (min-width: 992px) {.header .col-nav {position: absolute;top: 0;left: 50%;z-index: 2;height: 100%;transform: translateX(-50%);} } .header .navbar-holder {position: fixed;top: 5.5384615385rem;left: -100%;width: 100%;height: calc(100vh - 5.5384615385rem);overflow: auto;background: var(--primary);transition: left 0.25s ease; } .header .navbar-holder.show {left: 0; } @media (min-width: 992px) {.header .navbar-holder {position: static;width: auto;height: 100%;overflow: visible;background: transparent;} } .header .navbar-nav {height: 100%;flex-direction: column;justify-content: center;align-items: center;padding: 0; } @media (min-width: 992px) {.header .navbar-nav {flex-direction: row;justify-content: center;align-items: center;gap: 0.2222222222rem;padding-top: 0;} } .header .navbar-nav .nav-item {position: relative;width: auto;text-align: center; } @media (min-width: 992px) {.header .navbar-nav .nav-item {display: flex;align-items: center;height: 100%;} } .header .navbar-nav .nav-item .nav-link {position: relative;display: flex;align-items: center;justify-content: center;min-height: 52px;padding: 8px 16px;color: var(--white);font-size: 18px;font-weight: 600;text-transform: none;transition: background-color 0.2s ease; } .header .navbar-nav .nav-item .nav-link:hover {background: rgba(255, 255, 255, 0.1); } .header .navbar-nav .nav-item .nav-link.active::after {position: absolute;right: 0.8888888889rem;bottom: 0;left: 0.8888888889rem;height: 0.1666666667rem;background: var(--secondary);content: ""; } .header .navbar-nav .nav-item .navbar-nav {display: block;height: auto;padding: 0;background: var(--primary); } .header .navbar-nav .nav-item .navbar-nav .nav-item, .header .navbar-nav .nav-item .navbar-nav .nav-link {width: 100%; } @media (max-width: 991.98px) {.header .navbar-nav .nav-item .navbar-nav .nav-link {min-height: 42px;color: color-mix(in srgb, var(--white) 72%, transparent);font-size: 15px;font-weight: 500;} } @media (min-width: 992px) {.header .navbar-nav .nav-item .navbar-nav {position: absolute;top: 100%;left: 0;display: none;min-width: 12.2222222222rem;padding: 0.4444444444rem 0;border: 1px solid rgba(255, 255, 255, 0.1);}.header .navbar-nav .nav-item .navbar-nav .nav-link {justify-content: flex-start;font-size: 14px;text-align: left;} } .header .navbar-nav .nav-item:hover > .navbar-nav {display: block; } @media (min-width: 992px) {.header .navbar-nav > .nav-item {width: auto;}.header .navbar-nav > .nav-item > .nav-link {justify-content: flex-start;font-size: 16px;}.header .navbar-nav > .nav-item > .nav-link.active::after {bottom: 0.4444444444rem;} } .header .col-search {flex: 0 0 auto; } .header .col-search form {display: flex;align-items: center;height: 100%;margin: 0; } .header .col-search .form-group {display: none !important;margin: 0; } .header .col-search .form-control {width: 170px;height: 40px;padding: 0.4444444444rem 0.6666666667rem;color: var(--white);background: transparent;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 0; } .header .col-search .form-control::placeholder {color: rgba(255, 255, 255, 0.65); } .header .col-search .btn {display: grid;place-items: center;width: 40px;height: 40px;padding: 0;color: var(--white);background: transparent;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 0; } .header .col-search .btn svg {width: 1.1111111111rem; } .header .col-header-socials {align-items: center;gap: 0.2222222222rem;margin-left: auto; } .header .col-header-socials .btn {display: grid;place-items: center;width: 40px;height: 40px;padding: 0;color: var(--white);background: transparent;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 0; } .header .col-header-socials .btn svg, .header .col-header-socials .btn .img-fluid {width: 1.1666666667rem;height: auto; } .header .col-header-socials .btn:hover {background: rgba(255, 255, 255, 0.1); } .header .col-languages {display: flex;align-items: center; } .header .custom-select {height: 40px;width: auto;padding: 0 1.7777777778rem 0 0.6666666667rem;color: var(--white);font-size: 0.7777777778rem;font-weight: 700;background-color: transparent;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 0; } .header .custom-select option {color: var(--primary);background: var(--white); }