.header {
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px;
    z-index: 10;
    .logo {
      img {
        height: 100px;
        background-color: #ffffff;
        border-radius: 50%;
      }
    }
  
    .nav {
     flex: 1;
     margin: 0 5%;
      .nav-columns {
        display: flex;
        justify-content: space-between;
        .nav-column {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin: 0 15px;
  
        a {
          margin: 8px 10px;
          text-decoration: none;
          color: #ffffff;
          font-weight: 900;
          font-size: 1.7vw;
        }
      }
    }

    }
  
    .mobile-menu-icon {
      display: flex;
      flex-direction: column;
      cursor: pointer;
      margin-right: 7%;
  
      span {
        width: 25px;
        height: 3px;
        background: #ffffff;
        margin: 4px 0;
        transition: 0.4s;
      }
    }
  }

  .mobile-menu {
    display: none;
  }
  
  .mobile-menu-icon {
    display: none;
  }

  .mobile-menu {
    display: none;
    
    &.open {
      display: block;
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.95);
      transform: translateX(0);
      transition: transform 0.3s ease-in-out;
      z-index: 1000;
  
      .mobile-menu-header {
        display: flex;
        justify-content: flex-end;
        padding: 20px;
  
        .close-icon {
          position: relative;
          width: 24px;
          height: 24px;
          cursor: pointer;
  
          &::before,
          &::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 24px;
            height: 2px;
            background-color: black;
            transform-origin: center;
          }
  
          &::before {
            transform: translate(-50%, -50%) rotate(45deg);
          }
  
          &::after {
            transform: translate(-50%, -50%) rotate(-45deg);
          }
        }
      }
  
      .mobile-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0 20px;
  
        a {
          margin: 15px 0;
          text-decoration: none;
          color: #000;
          font-size: 1rem;
          font-weight: bold;
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .mobile-menu-icon {
      display: flex; /* Показываем иконку мобильного меню на мобильных устройствах */
    }
  
    .nav {
      display: none;
    }
    .logo img {
        height: 10px;
      }
  }
Это стили
<header class="header">
  <!-- Логотип -->
  <a routerLink="/" class="logo">
    <img src="assets/images/logo.png" />
  </a>

  <!-- Навигация для ПК -->
  <nav class="nav pc-nav" *ngIf="!isMobile">
    <div class="nav-columns">
      <div class="nav-column">
        <a routerLink="/programs">(ПРОГРАММЫ)</a>
        <a routerLink="/lectorium">(ЛЕКТОРИИ)</a>
      </div>
      <div class="nav-column">
        <a routerLink="/nastavniki">(НАСТАВНИКИ)</a>
        <a routerLink="/ambassadors">(АМБАССАДОРЫ)</a>
      </div>
      <div class="nav-column">
        <a routerLink="/about">(О КЛУБЕ)</a>
        <a routerLink="/team">(КОМАНДА)</a>
      </div>
      <div class="nav-column">
        <a routerLink="/events">(СОБЫТИЯ)</a>
        <a routerLink="/media">(МЕДИА)</a>
      </div>
      <div class="nav-column">
        <a routerLink="/soobshestvo">(СООБЩЕСТВО)</a>
        <a routerLink="/hall-of-fame">(HALL OF FAME)</a>
      </div>
    </div>
  </nav>

  <!-- Иконка мобильного меню -->
  <div class="mobile-menu-icon" (click)="toggleMobileMenu()" *ngIf="isMobile">
    <span></span>
    <span></span>
    <span></span>
  </div>
</header>

<!-- Мобильное меню -->
<div class="mobile-menu" [class.open]="isMobileMenuOpen" *ngIf="isMobile">
  <div class="mobile-menu-header">
    <div (click)="toggleMobileMenu()" class="close-icon"></div>
  </div>
  <nav class="mobile-nav">
    <a routerLink="/programs" (click)="toggleMobileMenu()">ПРОГРАММЫ</a>
    <a routerLink="/nastavniki" (click)="toggleMobileMenu()">НАСТАВНИКИ</a>
    <a routerLink="/about" (click)="toggleMobileMenu()">О КЛУБЕ</a>
    <a routerLink="/events" (click)="toggleMobileMenu()">СОБЫТИЯ</a>
    <a routerLink="/soobshestvo" (click)="toggleMobileMenu()">СООБЩЕСТВО</a>
    <a routerLink="/lectorium" (click)="toggleMobileMenu()">ЛЕКТОРИИ</a>
    <a routerLink="/ambassadors" (click)="toggleMobileMenu()">АМБАССАДОРЫ</a>
    <a routerLink="/team" (click)="toggleMobileMenu()">КОМАНДА</a>
    <a routerLink="/media" (click)="toggleMobileMenu()">МЕДИА</a>
    <a routerLink="/hall-of-fame" (click)="toggleMobileMenu()">HALL OF FAME</a>
  </nav>
</div>

Это разметка
Проблема в том, что у меня с 0 до 600 пикселей отображается правильно мобильная версия, с 600 до 740 не отображается вообще ничего, с 740 до 900 отображается версия для пк, а с 900+ пикселей отображается версия для пк
А должно до 768 отображаться для мобильных устройств, после 768 для пк
Можешь прислать мне мой код с изменениями?