/* Related-service links (includes/related-lib.php): a heading and a row of rounded chips near the end of the page. English and Arabic share these rules. */
.rel-links { box-sizing: border-box; width: 97%; margin: 34px auto 6px; padding: 22px 26px 24px; border: 1px solid #e3eaf2; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(11, 42, 74, .05); }
#content .rel-title, .rel-title { margin: 0 0 14px; color: #252525; font-size: 20px; font-weight: 700; line-height: 1.3; text-transform: none; }
.rel-title::after { content: ""; display: block; width: 48px; height: 4px; margin-top: 8px; border-radius: 4px; background: linear-gradient(90deg, #0d4f8b, #3dade2); }
.rel-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.rel-chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border: 1px solid #cfe0ef; border-radius: 999px; background: #fff; color: #0d4f8b !important; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none !important; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.rel-chip .fa { font-size: 12px; opacity: .8; }
.rel-chip:hover, .rel-chip:focus-visible { border-color: #0d4f8b; background: #0d4f8b; color: #fff !important; transform: translateY(-2px); }
@media (max-width: 767px) { .rel-links { margin-top: 26px; padding: 16px 14px 18px; border-radius: 16px; } .rel-chip { padding: 8px 14px; font-size: 13.5px; } }