@media (max-width: 968px) {
  .main-navbar .menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    z-index: 101;
  }

  .main-navbar .nav-list {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    right: -100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--primary-clr);
    transition: right 0.3s cubic-bezier(0.15, 0.61, 0.94, 0.25);
    z-index: 100;
    padding: 0;
  }

  .main-navbar .nav-list.active {
    right: 0;
  }

  .main-navbar .nav-list li {
    margin: 8px 0;
  }

  .main-navbar .nav-list li:nth-child(1) {
    margin-top: 0;
  }

  .main-navbar .nav-list li a {
    font-size: 20px;
    letter-spacing: 0.5px;
  }
}