/* Responsive refinements loaded after the base E-Service styles. */
.eservice-section-first {
    margin-top: 2rem;
}

.eservice-card h3,
.eservice-card p {
    overflow-wrap: anywhere;
}

.eservice-card:focus-visible,
.eservice-help > a:focus-visible {
    outline: 3px solid var(--eservice-gold);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .eservice-page { padding-top: 0; }
    .eservice-breadcrumb { margin: .75rem 0 1.25rem; flex-wrap: wrap; }
    .eservice-section-first { margin-top: 1.25rem; }
    .eservice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .eservice-heading { margin-bottom: 1.25rem; }
    .eservice-heading h2 { font-size: 1.65rem; }
    .eservice-card {
        min-height: 164px;
        padding: 1.15rem;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: .8rem;
    }
    .eservice-card-icon { width: 46px; height: 46px; font-size: 1.1rem; }
    .eservice-card > i { right: 1rem; bottom: 1rem; }
    .eservice-help { margin: 3rem 0 0; padding: 1.25rem; }
    .eservice-help h2 { font-size: 1.25rem; line-height: 1.45; }
}

@media (hover: none) {
    .eservice-card:hover { transform: none; }
}