/* ==========================================================================
   Anmol Digital — Service Link Arrow Icon Complete Fix V1

   The previous arrow became a narrow black capsule because Font Awesome
   applies flex: 0 0 1em directly to .fa-solid elements.

   This fix uses a dedicated circular wrapper and keeps the inner icon small.
   ========================================================================== */

.home-services-final-v3__link .service-link-arrow,
.service-detail-card__footer .text-link .service-link-arrow {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 50% !important;
    background: #111111 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box;
    line-height: 1 !important;
    transition: transform 180ms ease;
}

.home-services-final-v3__link
    .service-link-arrow
    > i,
.service-detail-card__footer
    .text-link
    .service-link-arrow
    > i {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    max-width: 10px !important;
    flex: 0 0 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: currentColor !important;
    box-shadow: none !important;
    font-size: 10px !important;
    line-height: 1 !important;
    transform: none !important;
}

.home-services-final-v3__link
    .service-link-arrow
    > i::before,
.service-detail-card__footer
    .text-link
    .service-link-arrow
    > i::before {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    max-width: 10px !important;
    display: block !important;
}

.home-services-final-v3__link:hover
    .service-link-arrow,
.home-services-final-v3__link:focus-visible
    .service-link-arrow,
.service-detail-card__footer
    .text-link:hover
    .service-link-arrow,
.service-detail-card__footer
    .text-link:focus-visible
    .service-link-arrow {
    transform: translateX(3px);
}

/* Stop older generic rules from translating the inner Font Awesome icon. */

.home-services-final-v3__link:hover
    .service-link-arrow
    > i,
.home-services-final-v3__link:focus-visible
    .service-link-arrow
    > i,
.service-detail-card__footer
    .text-link:hover
    .service-link-arrow
    > i,
.service-detail-card__footer
    .text-link:focus-visible
    .service-link-arrow
    > i {
    transform: none !important;
}

/* Keep label and circular icon properly separated. */

.home-services-final-v3__link,
.service-detail-card__footer .text-link {
    width: 100% !important;
    max-width: 100%;
    justify-content: space-between !important;
}

.service-detail-card__footer .text-link > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .home-services-final-v3__link .service-link-arrow,
    .service-detail-card__footer .text-link .service-link-arrow {
        width: 27px !important;
        height: 27px !important;
        min-width: 27px !important;
        max-width: 27px !important;
        flex-basis: 27px !important;
    }
}

@media (hover: none) {
    .home-services-final-v3__link:hover
        .service-link-arrow,
    .service-detail-card__footer
        .text-link:hover
        .service-link-arrow {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-services-final-v3__link .service-link-arrow,
    .service-detail-card__footer .text-link .service-link-arrow {
        transition: none !important;
        transform: none !important;
    }
}