@media (max-width: 750px) {
    .nav-menu{
      position: fixed;
      left: -100%;
      height: 100vh;
      top: 5rem;
      display: block;
      background-color: white;
      width: 100%;
      text-align: center;
      transition: 0.3s;
      z-index: 2;
      box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
      margin-left: 0;
    }

    .header{
      position: sticky;
    }

    .nav-menu.active{
      left: 0;
    }

    .nav-item{
      margin: 3rem 0;
    }

    .hamburger{
      margin-left: auto;
      display: block;
      cursor: pointer;
      margin-top: 1rem;
    }

    .hamburger.active .bar:nth-child(2){
      opacity: 0;
    }

    .hamburger.active .bar:nth-child(1){
      transform: translateY(7px) rotate(38deg);
    }

    .hamburger.active .bar:nth-child(3) {
      transform: translateY(-7px) rotate(-38deg);
    }

    .sectionb{
        grid-template-columns: 1fr;
    }

    .detailb{
      margin: 0 15px;
    }
    
    #component{
        margin: 0 15px;
    }
  }