/* MOBILE ONLY */
@media (max-width: 720px) {

  /* MOVE NAV TO BOTTOM */
  .sidebar {
    top: auto !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important; /* FIX */
    flex-direction: row !important;
    width: auto !important;
    padding: 12px 18px;
    border-radius: 30px;
    gap: 10px;
    transition: opacity 0.3s ease;
  }

  /* ALWAYS show expand */
  .sidebar.compact #expandBtn {
    display: flex;
  }

  /* EXPANDED MODE */
  .sidebar.expanded {
    display: grid;
    grid-template-columns: repeat(5, 52px);
    gap: 15px;
    width: auto;
    padding: 15px 15px;
    justify-content: center;
  }

  .sidebar.expanded .nav-item,
  .sidebar.compact .nav-item {
    width: 55px;
    height: 55px;
  }

  .sidebar.expanded #expandBtn {
    display: none;
  }

  /* NAV ITEM STACK (ICON + TEXT) */
  .nav-item {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
  }

  /* HIDE LABEL ON MOBILE */
  .nav-item .label {
    display: block;
    position: static;        /* IMPORTANT */
    opacity: 1;
    transform: none;
    background: none;
    border: none;
    padding: 0;
    font-size: 8px;
    color: #555;
  }

  .nav-item i {
    font-size: 16px;
  }

  /* EXPAND BUTTON STYLE */
  .expand-btn {
    background: rgba(255,255,255,0.25);
  }

   /* show expand only on mobile */
  .expand-btn {
    display: flex;
  }

  /* RESET */
  .sidebar .nav-item {
    display: none;
  }

  /* DEFAULT (compact) */
  .sidebar.compact .nav-item {
    display: flex;
  }

  .sidebar.expanded .nav-item {
    display: flex;
  }

  .sidebar.hide-nav {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 30px) !important;
  }

  .hidden-mobile {
    display: none !important;
  }


  .section {
    padding: 20px;
  }

  .card {
    max-width: 100%;
    min-height: auto;
    max-height: none;
    padding: 20px;
  }

  /* ABOUT STACK */
  .id-card {
    flex-direction: column;
    text-align: center;
  }

  .card-left {
    width: 100%;
  }

  /* SKILLS */
  .skills-grid {
    flex-direction: column;
    gap: 20px;
  }

  /* BAR */
  .bar {
    touch-action: none;
  }

  /* PROJECTS */
  .project-page {
    grid-template-columns: 1fr;
  }

  /* SERVICES */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* CERT */
  .cert-grid {
    grid-template-columns: 1fr;
  }

  /* CONTACT */
  .contact-container {
    flex-direction: column;
  }

}