.header {
   height: 56px;
   background-color: var(--color_primary);
   position: fixed;
   top: 0;
   padding: 8px 0;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
   z-index: 2;
   width: 100%;
}
.header__container {
   display: flex;
   justify-content: space-between;
   height: 100%;
}
.haeder__logo img {
   height: 100%;
   aspect-ratio: 1/1;
}
.header__hamburger {
   color: white;
   font-size: 32px;
   display: grid;
   place-items: center;
   -webkit-text-stroke: 1px;
   height: 100%;
   aspect-ratio: 1.2/1;
   border-radius: 4px;
}
.header__hamburger:hover {
   background: hsl(122, 90%, 18%);
}

.header .nav {
   display: none;
}
.header .nav__item__group {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 12px;
   border-radius: 4px;
   position: relative;
   z-index: 1;
}
.header .nav__item__group > a {
   height: 100%;
   display: flex;
   align-items: center;
}
.header .nav__item__group:hover {
   background: hsl(122, 90%, 18%);
}
.header .nav__item__group:hover + .nav_child {
   display: block;
}
.header .nav__item__dropdown {
   margin-left: 8px;
   font-size: 14px;
}

.header .nav_child:hover {
   display: block;
}
.header .nav_child {
   display: none;
   position: absolute;
   right: 0;
   width: min-content;
   min-width: 100%;
   background: hsl(122, 90%, 18%);
   border-radius: 4px 0 4px 4px;
   overflow: hidden;
}
.header .nav_child a {
   text-align: right;
   padding: 12px 16px;
   min-width: max-content;
   display: block;
}
.header .nav_child a:hover {
   background: hsl(122, 90%, 16%);
}

.mobile-nav {
   margin-top: 56px;
   background-color: var(--color_primary);
   width: 100%;
   color: white;
   padding: 16px 8px 32px;
   position: fixed;
   translate: 0 -100%;
   transition-duration: 0.4s;
   z-index: 1;
   max-height: calc(100dvh - 56px);
   overflow-y: auto;
}
.mobile-nav_active {
   translate: 0 0;
}

.mobile-nav .nav {
   z-index: 1;
}
.mobile-nav .nav__item + .nav__item {
   margin-top: 8px;
}
.mobile-nav .nav__item__group {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
   border-bottom: 2px solid hsl(0, 0%, 90%);
}
.mobile-nav .nav__item__group > a {
   width: 100%;
}
.mobile-nav .nav__item__dropdown {
   -webkit-text-stroke: 1px;
   display: flex;
   align-items: center;
   padding: 0 8px 0 0px;
}

.mobile-nav .nav_child {
   background: hsl(122, 90%, 18%);
   border-radius: 0 0 8px 8px;
   color: hsl(0, 0%, 95%);
   display: none;
   overflow: hidden;
}
.mobile-nav .nav_child a {
   display: block;
   padding: 12px 16px;
}
.mobile-nav .nav_child a:hover {
   background: hsl(122, 90%, 16%);
}

.mobile-nav .nav__item_open .nav__item__dropdown {
   rotate: 180deg;
   padding: 0 0 0 8px;
}
.mobile-nav .nav__item_open .nav_child {
   display: block;
}

.nav, .nav * {
   font-weight: 600;
   list-style-type: none;
   position: relative;
   color: white;
}
.nav__item__dropdown {
   -webkit-text-stroke: 1px;
}

@media only screen and (width >= 1024px) {
   .header__hamburger {
      display: none;
   }

   .header .nav {
      display: flex;
   }

   .mobile-nav {
      translate: 0 -100% !important;
   }
}