nav
{
   display: flex;
   padding: 0 50px;
   align-items: center;
   justify-content: space-between;
   width: 67%;

   .logo
   {
      z-index: 1;

      a
      {
         text-decoration: none;
         font-size: 32px;
         font-weight: 600;
         color: #363636;

         span
         {
            color: var(--accent-color);
         }
      }
   }

   .menu
   {
      display: flex;
      align-items: center;
      gap: 2.5rem;

      ul
      {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 35px;
         font-size: 18px;
         list-style: none;
         z-index: 1;

         li
         {
            a
            {
               position: relative;
               text-decoration: none;
               color: var(--primary-color);
               font-size: 18px;
               font-weight: 500;
               transition: 0.3s ease;

               &:hover
               {
                  color: var(--accent-color);

                  &::before
                  {
                     width: 100%;
                  }
               }

               &::before
               {
                  content: '';
                  position: absolute;
                  bottom: -7px;
                  left: 0;
                  width: 0;
                  height: 2.5px;
                  background: var(--accent-color);
                  transition: 0.3s ease;
               }
            }
         }
      }
   }

   .mode
   {
      display: none;
   }

   .ham
   {
      display: none;
      cursor: pointer;
      transition: transform 400ms;
      user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
   }

   .hamRotate.active
   {
      transform: rotate(45deg);
   }
   .hamRotate180.active
   {
      transform: rotate(180deg);
   }

   .line
   {
      fill:none;
      transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
      stroke: var(--text-color);
      stroke-width:5.5;
      stroke-linecap:round;
   }

   .ham8 .top
   {
      stroke-dasharray: 40 160;
   }

   .ham8 .middle
   {
      stroke-dasharray: 40 142;
      transform-origin: 50%;
      transition: transform 400ms;
   }

   .ham8 .bottom
   {
      stroke-dasharray: 40 85;
      transform-origin: 50%;
      transition: transform 400ms, stroke-dashoffset 400ms;
   }

   .ham8.active .top
   {
      stroke-dashoffset: -64px;
   }

   .ham8.active .middle
   {
      transform: rotate(90deg);
   }

   .ham8.active .bottom
   {
      stroke-dashoffset: -64px;
   }

   .line.active
   {
      stroke: var(--accent-color);
   }
}



@media screen and (max-width: 1280px)
{
   header
   {
      nav
      {
         padding: 0 50px;
      }
   }
}

@media screen and (max-width: 1000px)
{
   header
   {
      background: var(--mobile-color);
      position: sticky;
      top: 0;
      z-index: 9;

      nav
      {
         background: var(--mobile-color);

         a
         {
            background: var(--mobile-color);

            span
            {
               background: var(--mobile-color);
            }
         }

         .menu
         {
            background: var(--mobile-color);

            ul
            {
               position: fixed;
               top: 90px;
               left: -100%;
               max-width: 100%;
               width: 100%;
               height: 100vh;
               background: var(--mobile-color);
               align-items: flex-start;
               justify-content: flex-start;
               flex-direction: column;
               padding: 30px 50px;
               gap: 30px;
               transition: 0.3s ease;

               li
               {
                  a
                  {
                     font-size: 22px;
                  }
               }

               &.active
               {
                  left: 0%;
               }
            }
         }


         .ham
         {
            background: var(--mobile-color);
            display: block;
         }
      }
   }
}