#menu-primary i {
  transition: 0.2s;

  &.rotate {
    transform: rotate(180deg);
  }
}

.btn-menu-offcanvas {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--color-secondary);
  transition: 0.4s;
  &:hover {
    color: var(--color-primary);
  }
  &:focus {
    box-shadow: none;
    outline: 0;
    border: none;
  }
    &:active {
    box-shadow: none;
    outline: 0;
    border: none;
  }
      &:target {
    box-shadow: none;
    outline: 0;
    border: none;
  }
}

#offcanvasMenu {

  & .btn-close:focus {
    box-shadow: none;
  }

  & .logo-header {
    width: 100%;

    max-width: 140px;

    @media (width>768px) {
      max-width: 220px;
    }
  }

  & ul.sub-menu li:first-child {
    border-top: 1px solid rgba(55, 55, 55, 0.12);
  }

  & ul.sub-menu li {
    border-bottom: 1px solid rgba(55, 55, 55, 0.12);
    list-style: disc;
    
  }

  & li {
    list-style: none;
    padding: 8px 0;

    & a {
      color: var(--color-text);
      font-weight: 700;
      font-family: var(--font-family-manrope);
      font-size: 17px;
      transition: 0.4s;
      display: flex;
      align-items: center;

      & i {
        color: var(--color-text);
        font-size: 15px;
        cursor: pointer;
        transition: 0.4s;

        &:hover {
          color: var(--color-primary);
        }
      }

      &:hover {
        color: var(--color-primary) !important;
      }
    }
  }
}