@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700&display=swap');

body {
    font-family: 'Noto Kufi Arabic', 'Inter', sans-serif;
    letter-spacing: 0;
}

html[dir="rtl"] .nav-menu ul {
    flex-direction: row-reverse;
}

html[dir="rtl"] .menu-right {
    flex-direction: row-reverse;
}

html[dir="rtl"] .top-bar,
html[dir="rtl"] .head-inner,
html[dir="rtl"] .top-bar__left,
html[dir="rtl"] .top-bar__right {
    direction: rtl;
}

html[dir="rtl"] .pro-block .details {
    text-align: right;
}

html[dir="rtl"] .abstract > * {
    border-right: 4px solid var(--accent);
    border-left: 0;
}

html[dir="rtl"] .publisher {
    justify-content: flex-end;
}

html[dir="rtl"] .footer-meta {
    justify-content: flex-start;
}

html[dir="rtl"] .privacy-section {
    flex-direction: row-reverse;
}

html[dir="rtl"] .section-body ul,
html[dir="rtl"] .section-body ol {
    padding-inline-start: 0;
    padding-inline-end: 24px;
}

html[dir="rtl"] .stepper-item {
    flex-direction: row-reverse;
}

html[dir="rtl"] .stepper-item::before {
    left: auto;
    right: 0;
    border-radius: 4px 0 0 4px;
}

html[dir="rtl"] .stepper-item:hover {
    transform: translateX(-4px);
}

html[dir="rtl"] .stepper-line {
    left: auto;
    right: 17px;
}

html[dir="rtl"] .stepper-item.active {
    background: linear-gradient(270deg, rgba(3, 99, 101, 0.08) 0%, transparent 100%);
}

html[dir="rtl"] .procedure-button {
    text-align: right;
}

html[dir="rtl"] .procedure-header-content {
    flex-direction: row-reverse;
}

html[dir="rtl"] .procedures-stepper .stepper-item {
    flex-direction: row-reverse;
}

html[dir="rtl"] .procedures-stepper .stepper-item:hover {
    transform: translateX(-4px);
}

html[dir="rtl"] .procedures-stepper .stepper-item.active {
    background: linear-gradient(270deg, rgba(3, 99, 101, 0.12) 0%, transparent 100%);
}

html[dir="rtl"] .procedures-stepper .stepper-line {
    left: auto;
    right: 17px;
}

html[dir="rtl"] .procedure-content ul,
html[dir="rtl"] .procedure-content ol {
    padding-inline-start: 0;
    padding-inline-end: 28px;
}

html[dir="rtl"] .footer-info {
    text-align: right;
}

html[dir="rtl"] .text-banner {
    align-items: flex-end;
    text-align: right;
}

html[dir="rtl"] .home-slider-thumb .slick-current .banner-themb::after {
    right: auto;
    left: 8px;
}