.card {
    background: linear-gradient(to top, var(--color-white), var(--color-primary-ghost));
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-base);
    margin: var(--spacing-base) 0;
    transition: var(--transition-base);
    position: relative;
  }
  
  /* Hover Effect - Slight Lift & Glow */
  .card:hover {
    border: 2px solid var(--color-primary);
    transform: translateY(-2px);
  }
  
  /* Title Styling */
  .card h3 {
    margin: 0;
    font-weight: bold;
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
    color: var(--color-text);
  }


  .container-app-icon .app-icon {
    margin: var(--spacing-small);
  }
  
  /* Base styles for all app icons */
  .app-icon,
  .app-icon-wide,
  .app-icon-small {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, var(--color-white), var(--color-primary-ghost));
    color: var(--color-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-small);
    text-align: center;
    text-decoration: none;
    min-width: 5.75rem;
    max-width: 7.4375rem;
    min-height: 3.875rem;
  }
  
  /* Hover effect with a subtle lift and glow */
  .app-icon:hover,
  .app-icon-wide:hover,
  .app-icon-small:hover {
    transform: translateY(-2px);
     background: var(--color-accent);
     color: var(--color-white);
  }
  
  /* Click effect for a press-down feel */
  .app-icon:active,
  .app-icon-wide:active,
  .app-icon-small:active {
    transform: translateY(1px);
    background: var(--color-primary-ghost);
  }
  
  /* Wide app icons */
  .app-icon-wide {
    max-width: 90%;
  }
  
  /* Small app icons */
  .app-icon-small {
    font-size: var(--font-size-base);
    padding: 0.4rem;
    min-width: 5.57rem;
    max-width: 7.3375rem;
    min-height: 3.875rem;
  }