.header {position: fixed;width: 100%;max-width: 1920px;left: 50%;transform: translateX(-50%);z-index: 9999; } @media (min-width: 992px) {.header {top: 1.75rem;} } .header .container {padding-left: 0;padding-right: 0; } @media (min-width: 992px) {.header .container {padding-left: 1.0625rem;padding-right: 1.0625rem;} } .header .holder {border-radius: 1.5rem;box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.2);min-width: 308px; } .header .navbar.navbar-1 {background: rgba(255, 255, 255, 0.7);backdrop-filter: blur(0.625rem);color: var(--black);padding: 0; } @media (min-width: 992px) {.header .navbar.navbar-1 {border-radius: 1.5rem;} } .header .navbar.navbar-1 .row {width: 100%;flex-wrap: nowrap; } .header .navbar.navbar-1 .btn-menu {height: 100%;box-shadow: none; } .header .navbar.navbar-1 .nav-holder {width: 100%;position: fixed;left: -100%;background: rgba(37, 37, 37, 0.88);backdrop-filter: blur(0.625rem);overflow: auto;top: 4.3571428571rem;height: calc(100vh - 4.3571428571rem);transition-property: left;transition-duration: 0.25s; } @media (min-width: 576px) {.header .navbar.navbar-1 .nav-holder {top: 4.4285714286rem;height: calc(100vh - 4.4285714286rem);} } @media (min-width: 992px) {.header .navbar.navbar-1 .nav-holder {width: auto;position: static;left: auto;background: transparent;backdrop-filter: none;overflow: unset;top: auto;height: auto;transition-property: none;} } .header .navbar.navbar-1 .nav-holder.show {left: -1px; } .header .navbar.navbar-1 .nav-holder .nav {min-height: 100%;justify-content: center;align-items: center;flex-direction: column; } @media (min-width: 992px) {.header .navbar.navbar-1 .nav-holder .nav {flex-direction: row;justify-content: flex-end;} } .header .navbar.navbar-1 .nav {flex-wrap: nowrap;flex-direction: row;justify-content: flex-end; } .header .navbar.navbar-1 .nav .nav-item {width: 100%;max-width: 80%; } @media (min-width: 992px) {.header .navbar.navbar-1 .nav .nav-item {width: auto;max-width: none;} } .header .navbar.navbar-1 .nav .nav-separator {border-bottom: solid 0.125rem var(--white);max-width: 50%;width: 100%;margin-bottom: 1.875rem;margin-top: 1.875rem; } .header .navbar.navbar-1 .nav .nav-link {font-size: 1.1428571429rem;font-weight: 400;padding-left: 0.8125rem;padding-right: 0.8125rem;color: var(--white);display: flex;align-items: center;position: relative;justify-content: center;text-align: center;min-height: 3.5714285714rem;border-radius: 6.25rem; } @media (min-width: 992px) {.header .navbar.navbar-1 .nav .nav-link {font-size: 1rem;font-weight: 600;min-height: 6.25rem;color: var(--black);} } .header .navbar.navbar-1 .nav .nav-link:hover {background: #E1FDF7;color: var(--black); } @media (min-width: 992px) {.header .navbar.navbar-1 .nav .nav-link:hover {background: transparent;} } .header .navbar.navbar-1 .nav .nav-link span {position: relative; } @media (min-width: 992px) {.header .navbar.navbar-1 .nav .nav-link span {transition: color 0.25s;} } @media (min-width: 992px) {.header .navbar.navbar-1 .nav .nav-link span::after {content: " ";position: absolute;width: 0;height: 0.125rem;bottom: 0;left: 50%;transform: translateX(-50%);background-color: var(--primary);transition: width 0.25s;} } .header .navbar.navbar-1 .nav .nav-link.nav-link-main span {text-transform: uppercase; } @media (min-width: 992px) {.header .navbar.navbar-1 .nav .nav-link.nav-link-main span {text-transform: none;} } @media (min-width: 992px) {.header .navbar.navbar-1 .nav .nav-link:hover span {color: var(--primary);} } @media (min-width: 992px) {.header .navbar.navbar-1 .nav .nav-link:hover span::after {width: 100%;} } .header .navbar.navbar-1 .nav svg {width: 1.5625rem;height: 1.5625rem; } .header .navbar.navbar-1 .navbar-brand {height: 100%;margin-right: 0.875rem; } @media (min-width: 992px) {.header .navbar.navbar-1 .navbar-brand {padding: 1.0625rem 0.875rem 0.875rem 0.875rem;} } @media (min-width: 1639px) {.header .navbar.navbar-1 .navbar-brand {margin-left: 4.6875rem;} } .header .navbar.navbar-1 .navbar-brand svg, .header .navbar.navbar-1 .navbar-brand .img-fluid {width: auto;height: 3.8461538462rem; } @media (min-width: 992px) {.header .navbar.navbar-1 .navbar-brand svg, .header .navbar.navbar-1 .navbar-brand .img-fluid {height: 4.3125rem;} } .header .navbar.navbar-1 .cart {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;color: var(--black);text-decoration: none !important; } .header .navbar.navbar-1 .cart svg {width: auto;height: 1.875rem; } .header .navbar.navbar-1 .cart span {font-size: 0.74375rem;line-height: 1.6806722689; } .header .navbar.navbar-2 {background: var(--black);color: var(--white);padding: 0;border-radius: 0 0 1.5rem 1.5rem;position: relative; } .header .navbar.navbar-2::before, .header .navbar.navbar-2::after {content: "";position: absolute;top: 0;height: 3rem;width: 1.5rem;border-top-left-radius: 1.5rem;box-shadow: 0 -1.5rem 0 0 var(--black);transform-origin: top;clip-path: inset(0 0 0 0); } .header .navbar.navbar-2::before {left: 0;transform: rotate(180deg) scaleX(-1); } .header .navbar.navbar-2::after {right: 0;transform: rotate(180deg); } .header .navbar.navbar-2 .nav {flex-wrap: nowrap;width: 100%; } .header .navbar.navbar-2 .nav .nav-item {flex-grow: 1; } .header .navbar.navbar-2 .nav .nav-item .nav-link {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: var(--white);font-weight: 600;font-size: 1.25rem;display: flex;justify-content: center;align-items: center;text-align: center;min-height: 4.625rem; } @media (min-width: 1639px) {.header .navbar.navbar-2 .nav .nav-item .nav-link {font-size: 1.5rem;} } .header .navbar.navbar-2 .nav .nav-item .nav-link:hover {color: var(--secondary); } .header .navbar.navbar-2 .nav .nav-item:first-child .nav-link {padding-left: 2.6875rem; } .header .navbar.navbar-2 .nav .nav-item:last-child .nav-link {padding-right: 3.1875rem; } .header-image {width: 100%;max-width: 1920px;margin-left: auto;margin-right: auto;height: 14.5625rem;position: relative;clip-path: inset(0 0 0 0); } .header-image img {position: absolute;object-fit: cover;inset: 0;width: 100%;height: 100%;filter: blur(4px); }