/* Add custom CSS styles below */ 
.hm-hero-actions
@media (min-width: 768px) {
  body.index.theme-raed.hm-home-enhanced main > .s-block--hero-slider .hm-hero-actions {
    justify-content: center;
  }
}

body.index.theme-raed.hm-home-enhanced main > .s-block--hero-slider .hm-hero-actions {
  justify-content: center;
}

/* Remove overlays from the pictured category banners only */
body.index.theme-raed [data-testid="store-home-square-banners"]
.banner-entry.has-overlay::after,
body.index.theme-raed [data-testid="store-home-square-banners"]
.banner-entry__text::after {
  background: none !important;
}

## UI Enhancement: Banner Overlay and Icon Optimization

**Context**
Analysis and modification of a banner element (`a.banner-entry`) to remove a dark visual overlay and enhance the styling of trust icons (`.hm-trust-item span`).

**Diagnostics**
*   **Overlay Implementation:** The dark shading was identified as a `::after` pseudo-element on `a.banner-entry.has-overlay` with a background color of `rgba(0, 0, 0, 0.6)`.
*   **Dynamic State:** The overlay background color was observed to toggle to `rgba(0, 0, 0, 0)` in certain states, suggesting dependence on the `has-overlay` class or hover triggers.
*   **Icon Geometry:** Trust icons were initially rendered in a `44px` square `span` with a `15px` border-radius and a checkmark (`✓`) character.
*   **Container Layout:** The `.hm-trust-item` used a grid layout with internal padding but lacked defined card styling.

**Code Fixes**

### Overlay Removal
The overlay was successfully removed in the live environment by stripping the `has-overlay` class. For a permanent fix in the source code, the following CSS is recommended:


`````css
/* Remove the semi-transparent overlay pseudo-element */
a.banner-entry.has-overlay::after {
    display: none !important;
    content: none !important;
}

/* Alternative: Reset background if the overlay is color-based */
a.banner-entry {
    background-color: transparent !important;
}
`````


### Icon & Trust Item Enhancements
To improve visual depth and interactivity, the following styles were applied to the trust section:


`````css
/* Enhanced Circular Icon Styling */
.hm-trust-item span {
    border-radius: 50% !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease-in-out;
    display: grid;
    place-items: center;
}

/* Interactive Hover Feedback */
.hm-trust-item:hover span {
    transform: scale(1.1);
}

/* Trust Item Card Styling */
.hm-trust-item {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.3s ease;
    padding: 22px 26px;
    display: grid;
    align-items: center;
    gap: 15px;
}

.hm-trust-item:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
`````


**Actionable Recommendations**
*   **Class Management:** Remove the `has-overlay` class from HTML templates where the dark filter is not desired.
*   **Pseudo-element Cleanup:** If the overlay is globally defined in a framework like Tailwind, override the `::after` content property to ensure it does not render.
*   **Icon Polish:** Transitioning from text-based icons (`✓`) to SVG assets is recommended for better scaling and high-DPI display support.

*Note: The code fixes and findings above were identified on a live page in DevTools. When applying them to your codebase, please adapt them to your project's specific technical stack (e.g., Tailwind CSS classes, CSS modules, framework components) rather than applying them as literal CSS overrides.*