.hafa-ins {
    --hafa-primary: #303E8C;
    --hafa-deep: #384173;
    --hafa-ink: #151D26;
    --hafa-sky: #A3BAD9;
    --hafa-line: #E8ECF4;
    --hafa-soft: #64748B;
    --hafa-white: #FFFFFF;
}

.hafa-ins,
.hafa-ins * {
    box-sizing: border-box;
}

.hafa-ins__band {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 84px 0;
}

.hafa-ins__band--white { background: var(--hafa-white); }
.hafa-ins__band--gray  { background: #F7F9FC; }

.hafa-ins__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.hafa-ins__head {
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
}

.hafa-ins__kicker {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hafa-primary);
    margin-bottom: 14px;
}

.hafa-ins__h2 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--hafa-ink);
    margin: 0 0 16px;
}

.hafa-ins__lead {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--hafa-soft);
    margin: 0;
}

.hafa-ins__empty {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 24px;
    border: 1px dashed var(--hafa-line);
    border-radius: 16px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--hafa-soft);
    background: var(--hafa-white);
}

.hafa-ins__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hafa-ins__card {
    display: flex;
    flex-direction: column;
    background: var(--hafa-white);
    border: 1px solid var(--hafa-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 18px rgba(21,29,38,.05);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.hafa-ins__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 48px -22px rgba(48,62,140,.32);
    border-color: #D5DDF0;
}

.hafa-ins__card-top {
    position: relative;
    height: 220px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 22px;
}

.hafa-ins__card-index {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: rgba(255,255,255,.42);
    direction: ltr;
    unicode-bidi: isolate;
}

.hafa-ins__card-count {
    padding: 7px 15px;
    border-radius: 20px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.28);
    color: var(--hafa-white);
    font-size: 11.5px;
    font-weight: 800;
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.hafa-ins__card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 26px;
}

.hafa-ins__card-title {
    font-size: 17.5px;
    font-weight: 800;
    color: var(--hafa-ink);
    margin: 0 0 10px;
}

.hafa-ins__card-text {
    flex: 1;
    font-size: 13.6px;
    line-height: 1.78;
    color: var(--hafa-soft);
    margin: 0 0 18px;
}

.hafa-ins__card-link {
    align-self: flex-start;
    font-size: 13.2px;
    font-weight: 800;
    color: var(--hafa-primary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color .25s ease;
}

.hafa-ins__card-link:hover {
    border-bottom-color: var(--hafa-primary);
    color: var(--hafa-primary);
    text-decoration: none;
}

.hafa-ins__posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hafa-ins__post {
    display: flex;
    flex-direction: column;
    background: var(--hafa-white);
    border: 1px solid var(--hafa-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(21,29,38,.05);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.hafa-ins__post:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 44px -20px rgba(48,62,140,.3);
    border-color: #D5DDF0;
}

.hafa-ins__post-media {
    display: block;
    overflow: hidden;
    background: #EEF2FB;
}

.hafa-ins__post-img {
    width: 100%;
    height: 184px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.hafa-ins__post:hover .hafa-ins__post-img { transform: scale(1.06); }

.hafa-ins__post-noimg {
    display: block;
    width: 100%;
    height: 184px;
    background: linear-gradient(135deg, #E9EDF8, #DCE3F3);
}

.hafa-ins__post-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 24px;
}

.hafa-ins__post-cat {
    align-self: flex-start;
    padding: 5px 12px;
    margin-bottom: 12px;
    border: 1px solid #E1E8F7;
    border-radius: 20px;
    background: #F2F5FC;
    font-size: 11px;
    font-weight: 800;
    color: var(--hafa-primary);
}

.hafa-ins__post-title {
    font-size: 16.5px;
    font-weight: 800;
    line-height: 1.45;
    margin: 0 0 10px;
}

.hafa-ins__post-title a {
    color: var(--hafa-ink);
    text-decoration: none;
    transition: color .25s ease;
}

.hafa-ins__post-title a:hover {
    color: var(--hafa-primary);
    text-decoration: none;
}

.hafa-ins__post-text {
    flex: 1;
    font-size: 13.4px;
    line-height: 1.78;
    color: var(--hafa-soft);
    margin: 0 0 14px;
}

.hafa-ins__post-meta {
    font-size: 12px;
    font-weight: 600;
    color: #94A3B8;
}

.hafa-ins__cta {
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 44px;
    border-radius: 22px;
    background: linear-gradient(135deg, #151D26, #303E8C);
    text-align: center;
}

.hafa-ins__cta-title {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--hafa-white);
    margin: 0 0 14px;
}

.hafa-ins__cta-text {
    font-size: 15.5px;
    line-height: 1.8;
    color: rgba(255,255,255,.8);
    margin: 0 0 30px;
}

.hafa-ins__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 34px;
    border-radius: 10px;
    background: var(--hafa-white);
    color: var(--hafa-primary);
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}

.hafa-ins__btn:hover {
    background: var(--hafa-sky);
    color: var(--hafa-ink);
    text-decoration: none;
}

.hafa-ins--rtl .hafa-ins__kicker,
.hafa-ins--rtl .hafa-ins__h2,
.hafa-ins--rtl .hafa-ins__lead,
.hafa-ins--rtl .hafa-ins__card-title,
.hafa-ins--rtl .hafa-ins__card-text,
.hafa-ins--rtl .hafa-ins__card-link,
.hafa-ins--rtl .hafa-ins__card-count,
.hafa-ins--rtl .hafa-ins__post-cat,
.hafa-ins--rtl .hafa-ins__post-title,
.hafa-ins--rtl .hafa-ins__post-text,
.hafa-ins--rtl .hafa-ins__post-meta,
.hafa-ins--rtl .hafa-ins__cta-title,
.hafa-ins--rtl .hafa-ins__cta-text,
.hafa-ins--rtl .hafa-ins__btn,
.hafa-ins--rtl .hafa-ins__empty {
    letter-spacing: normal;
    text-transform: none;
}

.hafa-ins--rtl .hafa-ins__h2,
.hafa-ins--rtl .hafa-ins__card-title,
.hafa-ins--rtl .hafa-ins__post-title,
.hafa-ins--rtl .hafa-ins__cta-title {
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .hafa-ins__grid,
    .hafa-ins__posts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .hafa-ins__band { padding: 56px 0; }
    .hafa-ins__inner { padding: 0 20px; }
    .hafa-ins__head { margin-bottom: 36px; }
    .hafa-ins__h2 { font-size: 25px; }
    .hafa-ins__card-top { height: 190px; }
    .hafa-ins__card-index { font-size: 38px; }
    .hafa-ins__grid,
    .hafa-ins__posts { grid-template-columns: 1fr; }
    .hafa-ins__cta { padding: 40px 26px; }
    .hafa-ins__cta-title { font-size: 22px; }
}

.hafa-ins__archive-hero {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 96px 0 84px;
    background-color: #151D26;
}

.hafa-ins__archive-head {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.hafa-ins__archive-eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hafa-sky);
    margin-bottom: 16px;
}

.hafa-ins__archive-title {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--hafa-white);
    margin: 0 0 18px;
}

.hafa-ins__archive-desc {
    font-size: 16.5px;
    line-height: 1.8;
    color: rgba(255,255,255,.84);
    max-width: 660px;
    margin: 0 auto 24px;
}

.hafa-ins__archive-count {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 24px;
    background: rgba(255,255,255,.1);
    color: #DCE4F5;
    font-size: 12.5px;
    font-weight: 700;
}

.hafa-ins__post-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--hafa-line);
}

.hafa-ins__post-more {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--hafa-primary);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: border-color .25s ease;
}

.hafa-ins__post-more:hover {
    border-bottom-color: var(--hafa-primary);
    color: var(--hafa-primary);
    text-decoration: none;
}

.hafa-ins__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 46px;
}

.hafa-ins__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--hafa-line);
    border-radius: 11px;
    background: var(--hafa-white);
    color: var(--hafa-ink);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.hafa-ins__pagination .page-numbers:hover {
    border-color: var(--hafa-primary);
    color: var(--hafa-primary);
    text-decoration: none;
}

.hafa-ins__pagination .page-numbers.current {
    background: var(--hafa-primary);
    border-color: var(--hafa-primary);
    color: var(--hafa-white);
}

.hafa-ins--rtl .hafa-ins__archive-eyebrow,
.hafa-ins--rtl .hafa-ins__archive-title,
.hafa-ins--rtl .hafa-ins__archive-desc,
.hafa-ins--rtl .hafa-ins__archive-count,
.hafa-ins--rtl .hafa-ins__post-more {
    letter-spacing: normal;
    text-transform: none;
}

.hafa-ins--rtl .hafa-ins__archive-title {
    line-height: 1.5;
}

@media (max-width: 768px) {
    .hafa-ins__archive-hero { padding: 66px 0 58px; }
    .hafa-ins__archive-title { font-size: 30px; }
    .hafa-ins__archive-desc { font-size: 15px; }
    .hafa-ins__pagination .page-numbers { min-width: 40px; height: 40px; }
}

.hafa-ins__post-hero {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 100px 0 88px;
    background-color: #151D26;
}

.hafa-ins__post-hero-inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.hafa-ins__post-hero-cat {
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 24px;
    background: rgba(255,255,255,.12);
    color: #DCE4F5;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: background .25s ease;
}

.hafa-ins__post-hero-cat:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
    text-decoration: none;
}

.hafa-ins__post-hero-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.02em;
    color: var(--hafa-white);
    margin: 0 0 18px;
}

.hafa-ins__post-hero-lead {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255,255,255,.84);
    max-width: 680px;
    margin: 0 auto 22px;
}

.hafa-ins__post-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.68);
}

.hafa-ins__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
}

.hafa-ins__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 52px;
    align-items: start;
}

.hafa-ins__article {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.95;
    color: #3B4453;
}

.hafa-ins__article p { margin: 0 0 22px; }

.hafa-ins__article p.hafa-lead {
    font-size: 18px;
    line-height: 1.85;
    color: var(--hafa-ink);
    font-weight: 500;
    padding-inline-start: 18px;
    border-inline-start: 3px solid var(--hafa-primary);
}

.hafa-ins__article h2 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--hafa-ink);
    margin: 40px 0 16px;
    scroll-margin-top: 110px;
}

.hafa-ins__article h3 {
    font-size: 19px;
    font-weight: 800;
    color: var(--hafa-ink);
    margin: 30px 0 12px;
}

.hafa-ins__article ul {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.hafa-ins__article ul li {
    position: relative;
    padding-inline-start: 26px;
    margin-bottom: 11px;
    font-size: 15.4px;
    line-height: 1.8;
    color: var(--hafa-ink);
    font-weight: 500;
}

.hafa-ins__article ul li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 10px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--hafa-sky);
    transform: rotate(45deg);
}

.hafa-ins__article img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 12px 0 24px;
}

.hafa-ins__article-foot {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--hafa-line);
}

.hafa-ins__back {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    border: 2px solid var(--hafa-line);
    border-radius: 10px;
    color: var(--hafa-primary);
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    transition: border-color .25s ease, background .25s ease;
}

.hafa-ins__back:hover {
    border-color: var(--hafa-primary);
    background: #F2F5FC;
    color: var(--hafa-primary);
    text-decoration: none;
}

.hafa-ins__sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hafa-ins__widget {
    padding: 24px 22px;
    border: 1px solid var(--hafa-line);
    border-radius: 16px;
    background: var(--hafa-white);
    box-shadow: 0 2px 14px rgba(21,29,38,.04);
}

.hafa-ins__widget--cta {
    border: none;
    background: linear-gradient(135deg, #151D26, #303E8C);
}

.hafa-ins__widget--catalog { background: #F7F9FC; }

.hafa-ins__widget-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--hafa-ink);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hafa-line);
}

.hafa-ins__widget-text {
    font-size: 13.4px;
    line-height: 1.78;
    color: var(--hafa-soft);
    margin: 0 0 16px;
}

.hafa-ins__cta-widget-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--hafa-white);
    margin: 0 0 10px;
    line-height: 1.4;
}

.hafa-ins__cta-widget-text {
    font-size: 13.4px;
    line-height: 1.78;
    color: rgba(255,255,255,.8);
    margin: 0 0 18px;
}

.hafa-ins__widget-btn {
    display: block;
    padding: 13px 18px;
    border-radius: 10px;
    background: var(--hafa-white);
    color: var(--hafa-primary);
    font-size: 13.5px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}

.hafa-ins__widget-btn:hover {
    background: var(--hafa-sky);
    color: var(--hafa-ink);
    text-decoration: none;
}

.hafa-ins__widget-btn--ghost {
    background: var(--hafa-primary);
    color: var(--hafa-white);
}

.hafa-ins__widget-btn--ghost:hover {
    background: #151D26;
    color: var(--hafa-white);
}

.hafa-ins__widget-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--hafa-primary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color .25s ease;
}

.hafa-ins__widget-link:hover {
    border-bottom-color: var(--hafa-primary);
    color: var(--hafa-primary);
    text-decoration: none;
}

.hafa-ins__facts {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hafa-ins__fact {
    padding: 12px 14px;
    border-radius: 11px;
    background: #F7F9FC;
    border: 1px solid var(--hafa-line);
}

.hafa-ins__fact-num {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--hafa-primary);
    letter-spacing: -.01em;
    margin-bottom: 2px;
}

.hafa-ins__fact-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hafa-soft);
}

.hafa-ins__toc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.hafa-ins__toc-link {
    display: block;
    padding: 9px 12px;
    border-inline-start: 3px solid transparent;
    border-radius: 0 8px 8px 0;
    font-size: 13.2px;
    line-height: 1.55;
    font-weight: 600;
    color: var(--hafa-soft);
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.hafa-ins--rtl .hafa-ins__toc-link { border-radius: 8px 0 0 8px; }

.hafa-ins__toc-link:hover {
    background: #F2F5FC;
    color: var(--hafa-primary);
    text-decoration: none;
}

.hafa-ins__toc-link.is-active {
    background: #F2F5FC;
    border-inline-start-color: var(--hafa-primary);
    color: var(--hafa-primary);
    font-weight: 800;
}

.hafa-ins__catlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hafa-ins__catlist-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 13.2px;
    font-weight: 600;
    color: var(--hafa-ink);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.hafa-ins__catlist-link:hover {
    background: #F2F5FC;
    color: var(--hafa-primary);
    text-decoration: none;
}

.hafa-ins__catlist-link.is-active {
    background: var(--hafa-primary);
    color: var(--hafa-white);
}

.hafa-ins__catlist-count {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(48,62,140,.1);
    font-size: 11.5px;
    font-weight: 800;
    text-align: center;
}

.hafa-ins__catlist-link.is-active .hafa-ins__catlist-count {
    background: rgba(255,255,255,.22);
}

.hafa-ins--rtl .hafa-ins__post-hero-title,
.hafa-ins--rtl .hafa-ins__post-hero-lead,
.hafa-ins--rtl .hafa-ins__post-hero-cat,
.hafa-ins--rtl .hafa-ins__article h2,
.hafa-ins--rtl .hafa-ins__article h3,
.hafa-ins--rtl .hafa-ins__widget-title,
.hafa-ins--rtl .hafa-ins__cta-widget-title,
.hafa-ins--rtl .hafa-ins__fact-num,
.hafa-ins--rtl .hafa-ins__toc-link,
.hafa-ins--rtl .hafa-ins__catlist-link,
.hafa-ins--rtl .hafa-ins__back,
.hafa-ins--rtl .hafa-ins__widget-btn {
    letter-spacing: normal;
    text-transform: none;
}

.hafa-ins--rtl .hafa-ins__post-hero-title { line-height: 1.5; }
.hafa-ins--rtl .hafa-ins__article h2 { line-height: 1.6; }
.hafa-ins--rtl .hafa-ins__article { line-height: 2.05; }

@media (max-width: 1024px) {
    .hafa-ins__layout { grid-template-columns: 1fr; gap: 40px; }
    .hafa-ins__sidebar { position: static; }
    .hafa-ins__article { max-width: none; }
}

@media (max-width: 768px) {
    .hafa-ins__post-hero { padding: 66px 0 58px; }
    .hafa-ins__post-hero-title { font-size: 27px; }
    .hafa-ins__post-hero-lead { font-size: 15px; }
    .hafa-ins__article { font-size: 15.4px; }
    .hafa-ins__article p.hafa-lead { font-size: 16.5px; }
    .hafa-ins__article h2 { font-size: 21px; margin-top: 32px; }
}

/* ── [hafa_insight_categories] — elegant section cards ─────────────────── */
.hafa-ic__grid{
    display:grid;
    grid-template-columns:repeat(var(--hafa-ic-cols,4),1fr);
    gap:22px;
}
.hafa-ic__card{
    position:relative;
    display:flex;flex-direction:column;justify-content:flex-end;
    min-height:340px;
    padding:26px 24px;
    border-radius:20px;
    overflow:hidden;
    background-size:cover;background-position:center;
    text-decoration:none;
    box-shadow:0 14px 40px -20px rgba(21,29,38,.5);
    transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;
}
.hafa-ic__card:hover{
    transform:translateY(-6px);
    box-shadow:0 32px 58px -24px rgba(21,29,38,.62);
    text-decoration:none;
}
.hafa-ic__num{
    position:absolute;top:22px;inset-inline-start:24px;
    font-size:40px;font-weight:800;line-height:1;
    letter-spacing:-.03em;
    color:rgba(255,255,255,.42);
    direction:ltr;unicode-bidi:isolate;
}
.hafa-ic__body{display:flex;flex-direction:column;gap:9px;position:relative;z-index:2;}
.hafa-ic__count{
    align-self:flex-start;
    padding:6px 13px;border-radius:20px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(6px);
    color:#fff;font-size:11.5px;font-weight:800;
}
.hafa-ic__name{
    font-size:19px;font-weight:800;line-height:1.3;
    letter-spacing:-.01em;color:#fff;
}
.hafa-ic__desc{
    font-size:12.8px;line-height:1.6;
    color:rgba(255,255,255,.82);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hafa-ic__link{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:4px;
    font-size:13px;font-weight:800;color:#fff;
    opacity:.9;transition:gap .25s,opacity .25s;
}
.hafa-ic__link i{font-style:normal;font-size:17px;line-height:1;transition:transform .25s;}
.hafa-ic__card:hover .hafa-ic__link{opacity:1;gap:10px;}

.hafa-ic--rtl .hafa-ic__name,
.hafa-ic--rtl .hafa-ic__desc,
.hafa-ic--rtl .hafa-ic__count,
.hafa-ic--rtl .hafa-ic__link{
    letter-spacing:normal;
    font-family:'Cairo','Tajawal',sans-serif;
}
.hafa-ic--rtl .hafa-ic__link i{transform:scaleX(-1);}

@media(max-width:1024px){
    .hafa-ic__grid{grid-template-columns:repeat(2,1fr)!important;}
}
@media(max-width:600px){
    .hafa-ic__grid{grid-template-columns:1fr!important;}
    .hafa-ic__card{min-height:280px;}
}