header {
  background: var(--color-gray);
  width: 100%;
  display: block;
  -webkit-box-shadow: 0px 6px 8px 0px rgba(146, 146, 146, 0.53);
  -moz-box-shadow: 0px 6px 8px 0px rgba(146, 146, 146, 0.53);
  box-shadow: 0px 6px 8px 0px rgba(146, 146, 146, 0.53); }
  header .header-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between; }
    header .header-wrapper .menu-item a {
      text-decoration: none;
      color: white;
      font-weight: 600;
      transition: all .5s; }
    header .header-wrapper .menu-item:hover a {
      color: var(--color-yellow); }
    header .header-wrapper .menu-item.active a {
      color: var(--color-yellow); }
    header .header-wrapper .logo {
      display: block;
      margin-top: 5px; }
      header .header-wrapper .logo a {
        display: flex;
        align-items: center;
        justify-content: center; }
      header .header-wrapper .logo svg {
        fill: var(--color-white); }
    header .header-wrapper .main-menu {
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      margin-right: auto;
      position: relative; }
      header .header-wrapper .main-menu .menu-item {
        position: relative;
        margin-right: 20px;
        height: inherit;
        display: flex;
        align-items: center;
        justify-content: center; }
        header .header-wrapper .main-menu .menu-item.menu-dropdown .dropdown-items {
          position: absolute;
          top: 100%;
          left: 0;
          display: flex;
          opacity: 0;
          z-index: -1;
          height: 0;
          transition: all .5s; }
        header .header-wrapper .main-menu .menu-item.menu-dropdown:hover .dropdown-items {
          opacity: 1;
          z-index: 2;
          height: fit-content;
          background: var(--color-gray);
          padding: 10px 0;
          -webkit-box-shadow: 6px 6px 8px 0px rgba(146, 146, 146, 0.53);
          -moz-box-shadow: 6px 6px 8px 0px rgba(146, 146, 146, 0.53);
          box-shadow: 6px 6px 8px 0px rgba(146, 146, 146, 0.53);
          border-top: 1px solid var(--color-light-gray); }
          header .header-wrapper .main-menu .menu-item.menu-dropdown:hover .dropdown-items .menu-subitem-wrapper {
            display: flex;
            flex-direction: column; }
            header .header-wrapper .main-menu .menu-item.menu-dropdown:hover .dropdown-items .menu-subitem-wrapper .menu-subitem {
              transition: all .3s;
              padding: 5px 15px; }
              header .header-wrapper .main-menu .menu-item.menu-dropdown:hover .dropdown-items .menu-subitem-wrapper .menu-subitem a {
                color: var(--color-white); }
              header .header-wrapper .main-menu .menu-item.menu-dropdown:hover .dropdown-items .menu-subitem-wrapper .menu-subitem:hover {
                background: var(--color-yellow); }
                header .header-wrapper .main-menu .menu-item.menu-dropdown:hover .dropdown-items .menu-subitem-wrapper .menu-subitem:hover a {
                  color: var(--color-dark-gray); }
    header .header-wrapper .account {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end; }
      header .header-wrapper .account a {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
        text-decoration: none; }
        header .header-wrapper .account a:hover svg path {
          fill: var(--color-yellow); }
      header .header-wrapper .account svg path {
        transition: all .3s;
        fill: var(--color-white); }
      header .header-wrapper .account .account-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-right: 20px;
        cursor: pointer;
        color: white;
        transition: all .3s;
        position: relative;
        height: 100%; }
        header .header-wrapper .account .account-info .user-info {
          margin-left: 10px;
          transition: all .3s; }
          header .header-wrapper .account .account-info .user-info .arrow {
            margin-left: 10px; }
        header .header-wrapper .account .account-info .user-detail {
          position: absolute;
          opacity: 0;
          z-index: -1;
          top: 100%;
          right: 0;
          background: var(--color-white);
          border: 1px solid var(--color-gray);
          -webkit-box-shadow: 6px 6px 8px 0px rgba(146, 146, 146, 0.53);
          -moz-box-shadow: 6px 6px 8px 0px rgba(146, 146, 146, 0.53);
          box-shadow: 6px 6px 8px 0px rgba(146, 146, 146, 0.53);
          padding: 10px 15px;
          transition: all .5s; }
          header .header-wrapper .account .account-info .user-detail .user-detail-wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            min-width: 100%;
            color: var(--color-dark-gray); }
            header .header-wrapper .account .account-info .user-detail .user-detail-wrapper .user-name {
              font-size: 14px;
              font-weight: bold;
              white-space: nowrap; }
            header .header-wrapper .account .account-info .user-detail .user-detail-wrapper .user-position {
              font-size: 12px;
              font-style: italic;
              margin-bottom: 5px; }
            header .header-wrapper .account .account-info .user-detail .user-detail-wrapper .user-partner {
              font-size: 14px;
              font-weight: bold;
              margin-bottom: 5px; }
            header .header-wrapper .account .account-info .user-detail .user-detail-wrapper .user-sale-points .sale-points-title {
              font-size: 11px;
              color: var(--color-light-gray);
              font-style: italic; }
            header .header-wrapper .account .account-info .user-detail .user-detail-wrapper .user-sale-points .sale-point {
              margin-bottom: 3px; }
              header .header-wrapper .account .account-info .user-detail .user-detail-wrapper .user-sale-points .sale-point .point-name {
                font-size: 13px;
                font-weight: bold; }
              header .header-wrapper .account .account-info .user-detail .user-detail-wrapper .user-sale-points .sale-point .point-address {
                font-size: 12px; }
            header .header-wrapper .account .account-info .user-detail .user-detail-wrapper .btn {
              margin-top: 10px;
              margin-bottom: 10px;
              width: inherit;
              white-space: nowrap; }
        header .header-wrapper .account .account-info:hover .user-info {
          color: var(--color-yellow); }
        header .header-wrapper .account .account-info:hover svg path {
          fill: var(--color-yellow); }
        header .header-wrapper .account .account-info:hover .user-detail {
          opacity: 1;
          z-index: 2; }

.mobile-header {
  position: fixed;
  left: 100%;
  z-index: -100;
  transition: all .3s; }
  .mobile-header.active {
    background: var(--color-gray);
    border-top: 1px solid var(--color-light-gray);
    z-index: 100;
    left: 0;
    position: fixed;
    top: 60px;
    width: 100%;
    overflow-y: auto;
    height: calc(100% - 60px); }
    .mobile-header.active .mobile-menu {
      margin: 10px 0; }
      .mobile-header.active .mobile-menu .menu-item a {
        color: var(--color-white);
        text-decoration: none;
        transition: all .3s; }
      .mobile-header.active .mobile-menu .menu-item.active a, .mobile-header.active .mobile-menu .menu-item.open a, .mobile-header.active .mobile-menu .menu-item:hover a {
        color: var(--color-yellow); }

@media screen and (min-width: 1441px) {
  header .header-wrapper .logo {
    margin-right: 40px; }
    header .header-wrapper .logo svg {
      height: 55px;
      width: 152px; }
  header .header-wrapper .main-menu {
    flex-direction: row;
    gap: 20px; } }
@media screen and (max-width: 1440px) {
  header .header-wrapper .logo {
    margin-right: 40px; }
    header .header-wrapper .logo svg {
      height: 55px;
      width: 152px; }
  header .header-wrapper .main-menu {
    flex-direction: row;
    gap: 20px; } }
@media screen and (max-width: 1024px) {
  header .header-wrapper .logo {
    margin-right: 30px; }
    header .header-wrapper .logo svg {
      height: 55px;
      width: 152px; }
  header .header-wrapper .main-menu {
    gap: 10px; }
    header .header-wrapper .main-menu .menu-item a {
      font-size: 13px; } }
@media screen and (max-width: 768px) {
  header .header-wrapper .logo {
    margin-right: auto; }
    header .header-wrapper .logo svg {
      height: 55px;
      width: 152px; }
  header .header-wrapper .main-menu, header .header-wrapper .account {
    display: none; }
  header .header-wrapper .mobile-menu-close {
    display: none; }
    header .header-wrapper .mobile-menu-close.active {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
      header .header-wrapper .mobile-menu-close.active svg {
        fill: var(--color-white);
        transition: all .3s; }
      header .header-wrapper .mobile-menu-close.active:hover svg {
        fill: var(--color-yellow); }
  header .header-wrapper .burger {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
    header .header-wrapper .burger.hidden {
      display: none; }
    header .header-wrapper .burger svg {
      fill: var(--color-white);
      transition: all .3s; }
    header .header-wrapper .burger:hover svg {
      fill: var(--color-yellow); }

  .mobile-header .mobile-menu .menu-item.menu-dropdown > a {
    position: relative;
    color: var(--color-white); }
    .mobile-header .mobile-menu .menu-item.menu-dropdown > a:after {
      color: var(--color-white);
      border-right: 3px solid currentcolor;
      border-bottom: 3px solid currentcolor;
      content: '';
      position: absolute;
      width: 7px;
      height: 7px;
      transform: rotate(45deg);
      margin-left: 5px;
      top: 3px;
      transition: all .3s; }
  .mobile-header .mobile-menu .menu-item.menu-dropdown .dropdown-items {
    height: 0;
    opacity: 0;
    z-index: -1;
    margin-left: 15px;
    position: relative;
    transition: all .3s; }
  .mobile-header .mobile-menu .menu-item.menu-dropdown.opened > a:after {
    border-right: 3px solid var(--color-yellow);
    border-bottom: 3px solid var(--color-yellow);
    transform: rotate(225deg);
    top: 7px; }
  .mobile-header .mobile-menu .menu-item.menu-dropdown.opened .dropdown-items {
    height: fit-content;
    opacity: 1;
    z-index: 1; }
    .mobile-header .mobile-menu .menu-item.menu-dropdown.opened .dropdown-items a {
      color: var(--color-white); }
      .mobile-header .mobile-menu .menu-item.menu-dropdown.opened .dropdown-items a:hover {
        color: var(--color-yellow); }
  .mobile-header .account {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-light-gray); }
    .mobile-header .account .account-info .user-detail .user-detail-wrapper {
      color: white;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 20px; }
      .mobile-header .account .account-info .user-detail .user-detail-wrapper .user-name {
        width: 100%;
        font-size: 16px;
        font-weight: 600; }
      .mobile-header .account .account-info .user-detail .user-detail-wrapper .user-position {
        width: 100%;
        font-size: 14px;
        font-style: italic;
        margin-bottom: 10px; }
      .mobile-header .account .account-info .user-detail .user-detail-wrapper .user-partner {
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px; }
      .mobile-header .account .account-info .user-detail .user-detail-wrapper .user-sale-points {
        width: 100%;
        margin-bottom: 10px; }
        .mobile-header .account .account-info .user-detail .user-detail-wrapper .user-sale-points .sale-points-title {
          color: var(--color-lighten-gray);
          font-size: 13px;
          font-style: italic;
          margin-bottom: 5px; }
        .mobile-header .account .account-info .user-detail .user-detail-wrapper .user-sale-points .sale-point {
          margin-bottom: 5px; }
          .mobile-header .account .account-info .user-detail .user-detail-wrapper .user-sale-points .sale-point .point-name {
            font-size: 13px;
            font-weight: bold; }
          .mobile-header .account .account-info .user-detail .user-detail-wrapper .user-sale-points .sale-point .point-address {
            font-size: 12px; } }

/*# sourceMappingURL=style.css.map */