.hi-container {
    display: inline-block;
}

.hi-inner-container {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none !important;
}

.hi-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.hi-text-wrapper {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* Hover Effect: Text slides out and fades in */
.hi-container:hover .hi-text-wrapper {
    max-width: 300px; /* Large enough to let text reveal */
    opacity: 1;
}