.header-holder {width: 100%;max-width: 1920px;margin: 0 auto;background: var(--white);position: fixed;top: 0;z-index: 104;left: 50%;transform: translateX(-50%); } @media (max-width: 991.98px) {.header-holder {display: none;} } .header-holder .navbar {box-shadow: 0 0.2777777778rem 1.1111111111rem rgba(0, 0, 0, 0.25);clip-path: inset(0 0 -2.2222222222rem 0); } .header-img {width: 100%;max-width: 1920px;margin: 0 auto;height: 14.2777777778rem;background: var(--white);z-index: 105;overflow: hidden;display: flex;align-items: center;justify-content: center;position: absolute;left: 50%;transform: translateX(-50%); } .header-img .img-fluid {object-fit: cover;width: 100%;height: 100%;position: absolute;left: 0px;top: 0;bottom: 0;right: 0; } @media (max-width: 991.98px) {.header-img {display: none;} } .header {position: sticky;top: 0;margin-top: 4.4444444444rem;z-index: 106;margin-bottom: 5rem;z-index: 9000;height: 0;margin-bottom: 9.8333333333rem; } .header.no-header-img {margin-bottom: -4.4444444444rem; } @media (max-width: 991.98px) {.header {position: fixed;margin-top: 0;margin-bottom: 0;padding: 0;} } .navbar {padding-top: 0;padding-bottom: 0;background: var(--white);height: 6.1666666667rem;border-radius: 0.2222222222rem 0 0.2222222222rem 0.2222222222rem; } @media (max-width: 991.98px) {.navbar {border-radius: 0;box-shadow: 0 0.2777777778rem 1.1111111111rem rgba(0, 0, 0, 0.25);padding-left: 0;} } .navbar .row-navbar {width: 100%;height: 100%; } .navbar .row-navbar .col {height: 100%; } .navbar .col-navbar {position: static; } @media (max-width: 991.98px) {.navbar .col-navbar {position: fixed;left: -100%;width: 100%;top: 6.1666666667rem;z-index: 106;height: calc(100% - 6.1666666667rem);background-color: rgba(255, 255, 255, 0.9);box-shadow: 0 0.2777777778rem 1.1111111111rem rgba(0, 0, 0, 0.25);clip-path: inset(0 -2.2222222222rem 0 0);transition-duration: 0.25s;transition-property: left;}.navbar .col-navbar.show {left: 0;} } .navbar .mobile-menu {display: flex;align-items: center;padding: 0.5555555556rem 1.1111111111rem; } .navbar .mobile-menu .btn-menu {height: 100%;box-shadow: none;display: none;position: relative; } @media (max-width: 991.98px) {.navbar .mobile-menu .btn-menu {display: block;} } .navbar .mobile-menu .menu-toggle {height: 26px;width: 26px; } .navbar .mobile-menu .menu-toggle.collapsed .menu-toggle-bar--top {transform: translate(0, 0) rotate(45deg); } .navbar .mobile-menu .menu-toggle.collapsed .menu-toggle-bar--middle {opacity: 0; } .navbar .mobile-menu .menu-toggle.collapsed .menu-toggle-bar--bottom {transform: translate(0, 0) rotate(-45deg); } .navbar .mobile-menu .menu-toggle-bar {display: block;position: absolute;top: 50%;margin-top: -1px;right: 0;width: 100%;height: 3px;border-radius: 4px;background-color: var(--primary);transition: all 0.3s ease; } .navbar .mobile-menu .menu-toggle-bar.menu-toggle-bar--top {transform: translate(0, -8px); } .navbar .mobile-menu .menu-toggle-bar.menu-toggle-bar--bottom {transform: translate(0, 8px); } .navbar .col-search {display: flex;flex-direction: column;justify-content: center;margin-left: 1.1111111111rem; } .navbar .col-search form {display: flex; } .navbar .col-search .form-control {display: none; } .navbar .col-search .btn-search {background: var(--black); } .navbar .col-search .btn-search svg {color: var(--white); } .navbar .col-search.show .form-control {display: block; } @media (max-width: 991.98px) {.navbar .col-search {display: none;} } .navbar .navbar-brand {height: 100%;display: flex;align-items: center; } .navbar .navbar-brand picture {height: 100%; } .navbar .navbar-brand picture .img-fluid {max-height: 100%;width: auto; } .navbar .navbar-brand svg {max-width: 7.2222222222rem; } .navbar .navbar-nav {height: 100%; } .navbar .navbar-nav ul {list-style-type: none;padding: 0;margin: 0; } .navbar .navbar-nav > ul {display: flex;flex-direction: row;flex-wrap: nowrap;width: 100%;font-weight: 700;font-size: 1rem;justify-content: flex-end;height: 100%; } @media (max-width: 991.98px) {.navbar .navbar-nav > ul {flex-direction: column;justify-content: center;align-items: center;height: calc(100% - 6.1666666667rem);} } .navbar .navbar-nav > ul .nav-link {color: var(--black);padding-left: 0.8333333333rem;padding-right: 0.8333333333rem;display: inline-flex;align-items: center;justify-content: center;text-align: center;position: relative;height: 100%; } @media (max-width: 991.98px) {.navbar .navbar-nav > ul .nav-link {text-align: left;justify-content: flex-start;font-size: 1.6666666667rem;} } .navbar .navbar-nav > ul .nav-link.active::after {content: " ";position: absolute;width: 0.5555555556rem;height: 0.5555555556rem;border: solid 0.1111111111rem var(--primary);transform: rotate(45deg);bottom: 1.1111111111rem;border-left-width: 0;border-top-width: 0; } @media (max-width: 991.98px) {.navbar .navbar-nav > ul .nav-link.active::after {right: 20px;transform: rotate(-45deg);} } @media (min-width: 992px) {.navbar .navbar-nav > ul > .nav-item {height: 100%;} } .navbar .navbar-nav > ul > .nav-item:not(.nav-item-container) {position: relative; } .navbar .navbar-nav > ul > .nav-item > .nav-link::before {content: " ";position: absolute;width: 0;height: 0.2222222222rem;bottom: 2.1111111111rem;background: var(--primary);transition-duration: 0.5s;transition-property: width; } .navbar .navbar-nav > ul > .nav-item .nav-dropdown {position: absolute;right: 0;background: rgba(255, 255, 255, 0.95);visibility: hidden;opacity: 0;transition-duration: 0.1s;transition-property: visibility, opacity;overflow-y: auto;max-height: calc(100vh - 5.5555555556rem);box-shadow: 0 0.8333333333rem 1.1111111111rem rgba(0, 0, 0, 0.25); } .navbar .navbar-nav > ul > .nav-item .nav-dropdown h2, .navbar .navbar-nav > ul > .nav-item .nav-dropdown .h2 {color: var(--primary);white-space: nowrap; } .navbar .navbar-nav > ul > .nav-item .nav-dropdown .nav-link {color: var(--black);white-space: nowrap;width: 100%;text-align: left;justify-content: flex-start; } .navbar .navbar-nav > ul > .nav-item .nav-dropdown .nav-link:hover {color: var(--link-hover-color); } .navbar .navbar-nav > ul > .nav-item .nav-container {width: 100%; } .navbar .navbar-nav > ul > .nav-item .nav-container .container {padding: 2.2222222222rem; } .navbar .navbar-nav > ul > .nav-item .nav-container h2 {margin-bottom: 0.5555555556rem; } .navbar .navbar-nav > ul > .nav-item .nav-container ul {margin-bottom: 1.6666666667rem; } .navbar .navbar-nav > ul > .nav-item .nav-container li {line-height: 1.2; } .navbar .navbar-nav > ul > .nav-item .nav-container a {font-size: 0.7777777778rem;font-weight: normal;color: var(--black);display: inline-block;width: 100%; } .navbar .navbar-nav > ul > .nav-item .nav-container .nav-category {color: var(--primary);font-size: 1.3333333333rem;font-weight: 600; } @media (min-width: 992px) {.navbar .navbar-nav > ul > .nav-item:hover > .nav-link::before, .navbar .navbar-nav > ul > .nav-item.hover > .nav-link::before {width: calc(100% - 1.6666666667rem);transition-duration: 0.5s;transition-property: width;}.navbar .navbar-nav > ul > .nav-item:hover .nav-dropdown, .navbar .navbar-nav > ul > .nav-item.hover .nav-dropdown {visibility: visible;opacity: 1;} } .navbar-contact {background: white;display: inline-flex;position: absolute;top: 0;right: 0.5555555556rem;transform: translateY(-100%);font-size: 0.8888888889rem;font-weight: 700;border-radius: 0.2222222222rem 0.2222222222rem 0 0;} @media (max-width: 991.98px) {.navbar-contact {display: none;} } .navbar-contact a {display: inline-flex;align-items: center;padding: 0.2777777778rem 1rem;text-decoration: none; } .navbar-contact a svg {margin-right: 0.5555555556rem; } .navbar-contact a.email {background: #F5F5F5;border-radius: 0.2222222222rem 0 0 0; } @media (max-width: 991.98px) {.navbar-contact a.email {border-radius: 0 0 0 0.2222222222rem;} } .col-contact {flex-grow: 1; } .col-contact .navbar-mobile-contact {height: 100%;display: flex;align-items: center;padding: 0.8333333333rem 1.6666666667rem;gap: 1.1111111111rem;font-weight: 700;justify-content: flex-end;flex-grow: 1; } @media (min-width: 576px) {.col-contact .navbar-mobile-contact svg {margin-right: 0.5555555556rem;} } @media (max-width: 650.98px) {.col-contact .navbar-mobile-contact span {display: none;} } @media (min-width: 992px) {.col-contact {display: none;} }