@media only screen and (max-width: 1320px) {
  header{ padding: 0 50px; }
  .b1a{ width: 60%; height: 100%; margin: 0 auto; }
}

@media only screen and (max-width: 1100px) {
  header{ padding: 0 30px; }
  .b1a{ width: 80%; height: 100%; }
}

@media only screen and (max-width: 900px) {
  .hamburger { display: block; cursor: pointer; }

  .nav-bar{
    height: 0px;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    background: #12121a;
    border-bottom: 1px solid #2a2a3a;
    transition: 0.35s;
    overflow: hidden;
  }
  .nav-bar.active{ height: 420px; }

  .nav-bar ul{
    display:block;
    width: fit-content;
    margin: 60px auto 0 auto;
    text-align:center;
  }
  .nav-bar ul li a{
    margin-bottom: 12px;
    color: #e7e7f2;
  }
  .nav-bar ul li a:hover{
    color:#6366f1;
    border:1px solid #6366f1;
  }
  .nav-bar ul li a.active{ color:#6366f1; }

  .b1a{ width: 100%; height: 100%; }
  .b2{ flex-direction: column; }
  .b2a, .b2b{ width: 100%; }

  .work{ flex-direction: column; }
  .wa, .wb, .wc{ width: 100%; }

  .pbl-0{ flex-direction: column; }
  .pbl-a{ width: 100%; }
  .pbl-b{ text-align: left; }

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

@media screen and (max-width: 720px) {
  h1 { font-size: 2.0rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.35rem; }
  .hero-sub{ font-size: 0.98rem; padding: 0 10px; }
}

@media screen and (max-width: 575px) {
  h1 { font-size: 1.6rem; }
  header{ padding: 0 16px; }
  .projects, .testimonials{ width: 90vw; margin-left: 5vw; margin-right: 5vw; }
}