ui: standardize background colors and padding of svg icons inside feature cards

[komalharshita]

Description

The icon containers (feature-card-icon) inside feature cards have different visual alignments due to slightly inconsistent padding or flexbox centering properties. This causes the icons to look off-center on different viewport sizes.

We should standardize the layout container styles of these SVG wrappers.

Current Behavior

Feature card icons show slight visual misalignments in the center grids.

Proposed Solution

1. Enforce strict flex centering rules (display: flex; align-items: center; justify-content: center;) on .feature-card-icon style classes.
2. Standardize dimensions (width and height) and padding.

Implementation Guidance

• Update the relevant CSS stylesheet definitions.

Acceptance Criteria

• All feature card SVG icons are perfectly centered inside their circular/square wrappers.
• Alignment is maintained across all screen widths.

Contributor Guidelines

Interested in working on this issue?

1. Comment /assign to request assignment.
2. Wait until the issue shows you as the assignee.
3. Create a new branch for your changes.
4. Submit a Pull Request referencing this issue.

Please do not begin working on an issue already assigned to another contributor unless a maintainer confirms it is available.

[pisum-sativum]

@komalharshita I want to work on this project as a part of Gssoc 2026 kindly assign me this issue.

[pisum-sativum]

\assign

[ionfwsrijan]

@komalharshita Please assign this issue to me under GSSOC