header
  background-color: rgba(0, 0, 0, 95%)
  width: 100%
  position: fixed
  top: 0
  z-index: 3
  .flagLong
    width: 100%
    height: 5px
    .am
      background: #FDC300
      flex: 2
    .az
      background: #0E43CC
      flex: 1
    .ro
      background: #D80D0D
      flex: 1
    @media (min-width: 1024px)
      height: 6px
  .container
    padding: 1.5rem 0
    justify-content: space-between
    @media (min-width: 1024px)
      width: 90%
      nav
        display: flex
        align-items: center
        gap: 0 1rem
        @media (min-width: 1280px)
          gap: 0 2rem
        @media (min-width: 1600px)
          gap: 0 3rem
        // a
        //   padding: .8rem 1.3rem
        //   &:hover
        //     color: $yellow
        //   cursor: pointer
        //   color: $green
        button
          padding: 0 1.3rem
          span
            //text-transform: uppercase
          &:hover
            span
              color: $yellow
            svg path
              stroke: $yellow
          span, svg
            pointer-events: none
        button
          cursor: pointer
          align-items: center
          font-family: 'Montserrat', sans-serif
          font-weight: $font-bold
          color: $white
          gap: 0 5px
          height: 47px
          border-radius: 25px
          //background-color: rgba(255, 255, 255, 5%)
          background: none
          transition: all .2s ease
          &:hover
            //background-color: rgba(255, 204, 0, 5%)
        button.active
          //background-color: rgba(255, 204, 0, 5%)
          span
            color: $yellow
          svg path
            stroke: $yellow
        button.green
          span
            //text-transform: uppercase
            color: $green
          svg path
            stroke: $green
    @media (min-width: 1280px)
      width: 85%
  .container .actions
    align-items: center
    gap: 0 1rem
    @media (min-width: 768px)
      gap: 0 1.5rem
    .loginBtn
      @media (min-width: 1024px)
        display: flex
        justify-content: center
        align-items: center
        border-radius: 25px
        border: 1px solid rgba(255, 204 ,0, 35%)
        height: 47px
        padding: 0 1rem
        gap: 0 .5rem
        span
          display: block
          color: $yellow
    .menu
      @media (min-width: 1024px)
        display: none
    .flag
      @media (min-width: 1024px)
        height: 47px
        justify-content: center
        align-items: center
        padding: 0 1rem
        border: 1px solid rgba(255, 255, 255, 35%)
        border-radius: 25px
        gap: 0 .5rem
        border-radius: 25px
        span
          color: $white
      @media (min-width: 1280px)
        cursor: pointer
    .flag.eng
      @media (min-width: 1024px)
        display: flex
      
  .menuHeader
    display: none
    background: $black
    width: 100%
    gap: 0 10%
    position: fixed
    top: 95px
    z-index: 3
    // height: 300px
    transition: all 0.5s ease
    opacity: 0
    transform: translateY(-5px)
    .list
      padding: 3rem 0
      gap: 2.5rem 0
      align-items: flex-start
      p
        color: $yellow
      a
        color: $white
        position: relative
        //text-transform: uppercase
        @media (min-width: 1280px)
          cursor: pointer
        &::after
          content: ''
          position: absolute
          left: 0
          bottom: -5px
          width: 110%
          height: 3px
          transition: background-color .4s
        &:hover
          color: $yellow
          &::after
            background-color: $yellow
  .menuHeader.show
    display: flex
    justify-content: center
    opacity: 1
    transform: translateY(0)

// .separatorHeader
//   @media (min-width: 1280px)
//     display: none