@media (max-width: 450px) {
  /* ================= */
  /* header */
  /* ================= */

  header .container {
    justify-content: space-between !important;
    gap: 10px;
  }
  .primary-btn {
    font-size: 0.8rem;
  }
  nav::before {
    height: 80vh;
    width: 110%;
    right: 0px;
    transform: skew(-30deg);
  }
  .toggler-icon {
    background: var(--bg-main) !important;
  }
  .nav-item {
    display: flex;
    justify-content: center;
  }
  .nav-link.active {
    color: var(--bg-main) !important;
    width: fit-content !important;
  }
  .nav-link.active::before {
    background-color: var(--bg-main) !important;
  }
  .navbar-brand {
    width: 150px;
    overflow: hidden;
  }
  .navbar-brand img {
    border-radius: 10px;
  }
  /* The switch - the box around the slider */
  .switch {
    font-size: 11px;
  }

  /* ========================== */
  /* footer */
  /* ========================== */
  .main-footer {
    background-color: var(--primary-glow);
  }

  .main-footer::before {
    width: 0px;
    height: 0%;
  }

  .footer-logo {
    width: 150px;
  }

  .vip-wrapper {
    padding: 30px;
  }
}