* {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    body {
      background-color: #f8fafc;
    }

    .text-gradient {
      background: linear-gradient(135deg, #2563eb, #9333ea);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .stat-card {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 1rem;
      padding: 1rem;
      transition: box-shadow 0.15s;
    }

    .stat-card:hover {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .icon-soft {
      width: 2.5rem;
      height: 2.5rem;
      background: linear-gradient(145deg, #dbeafe, #f3e8ff);
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .icon-soft i {
      color: #2563eb;
      font-size: 1.25rem;
    }

    .banner-gradient {
      background: linear-gradient(135deg, #2563eb, #9333ea);
      border-radius: 1rem;
      color: white;
    }

    .btn-white-custom {
      background: white;
      color: #2563eb;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 0.75rem;
      font-weight: 500;
      transition: all 0.2s;
    }

    .btn-white-custom:hover {
      background: white;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    }

    /* filter sidebar */
    .filter-sidebar {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 1rem;
      padding: 1.5rem;
      position: sticky;
      top: 1.5rem;
    }

    .filter-cat-btn {
      width: 100%;
      text-align: left;
      padding: 0.75rem 1rem;
      border-radius: 0.75rem;
      background: transparent;
      border: none;
      color: #475569;
      transition: all 0.1s;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .filter-cat-btn i {
      width: 1.25rem;
      font-size: 1.1rem;
    }

    .filter-cat-btn.active {
      background: #eff6ff;
      color: #2563eb;
      font-weight: 500;
    }

    .filter-cat-btn:not(.active):hover {
      background: #f8fafc;
    }

    .filter-check {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      font-size: 0.95rem;
      color: #334155;
    }

    .filter-check input[type="checkbox"] {
      width: 1rem;
      height: 1rem;
      accent-color: #2563eb;
    }

    .project-card {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 1rem;
      overflow: hidden;
      transition: box-shadow 0.2s;
    }

    .project-card:hover {
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    }

    .featured-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      background: #fbbf24;
      color: #78350f;
      font-size: 0.7rem;
      font-weight: 600;
      padding: 0.25rem 0.75rem;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .skill-badge {
      background: #f1f5f9;
      color: #334155;
      padding: 0.3rem 0.8rem;
      border-radius: 0.5rem;
      font-size: 0.85rem;
    }

    .avatar-circle {
      width: 2.5rem;
      height: 2.5rem;
      background: linear-gradient(145deg, #2563eb, #9333ea);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      font-size: 0.9rem;
    }

    .border-light {
      border-color: #e2e8f0;
    }

    .text-muted-dark {
      color: #64748b;
    }

    .btn-apply {
      background: #2563eb;
      color: white;
      border-radius: 0.75rem;
      padding: 0.5rem 1.5rem;
      font-weight: 500;
      border: none;
    }

    .btn-apply:hover {
      background: #1d4ed8;
    }

    /* heart icon */
    .heart-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      border-radius: 0.5rem;
      color: #94a3b8;
    }

    .heart-btn:hover {
      background: #f1f5f9;
    }

    .profile-circle {
      width: 40px;
      height: 40px;
      background: #2563eb;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 1rem;
      cursor: default;
    }

    @media (max-width: 991.98px) {
      .nav-link {
        padding: 10px 0;
        margin-top: 10px;
        border-bottom: 1px solid #f8f9fa;
        text-align: end;
      }
    }