/* Existing .hbtn styles - adjusted for better integration */
.hbtn {
    position: relative; /* Keep relative positioning for pseudo-elements */
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    padding: 8px 20px;
    margin: 0px 3px 6px; /* Reduced bottom margin slightly */
    text-align: center;
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    text-decoration: none;
    color: #236333;
    /* white-space: nowrap; */ /* Consider removing this if it causes overflow issues on small screens */
    z-index: 0; /* Generally okay if not actively overlapping positioned elements */
    min-height: 2rem; /* ensure enough height */
}

    .hbtn i {
        padding-right: 8px;
    }
    /* Ensure the link-icon is positioned correctly relative to the button */
    .hbtn .link-icon {
        /* Your existing styles for the link-icon. Ensure it doesn't cause overflow. */
        /* Example: */
        display: inline-block; /* or inline-flex */
        vertical-align: middle;
        margin-left: 5px; /* Space between text and icon */
        /* If it's a pseudo-element or has complex positioning, ensure its container (`.hbtn`) has overflow: hidden */
    }