@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap");

html,
body {
    direction: rtl;
    font-family: "Cairo", sans-serif !important;
    /* text-align: right !important; */
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span,
div {
    font-family: "Cairo", sans-serif !important;
    text-align: right !important;
}
.hero {
    background-image: url(../img/slide2.jpg);
}
/* ====== تخصيصات اللغة العربية (RTL) ====== */

[dir="rtl"] .wheel-svg {
    transform: scaleX(-1);
}

[dir="rtl"] .node-1 {
    left: auto;
    right: 64px;
    text-align: left;
}

[dir="rtl"] .node-2 {
    right: auto;
    left: 64px;
    text-align: right;
}

[dir="rtl"] .node-3 {
    right: auto;
    left: 8px;
    text-align: right;
}

[dir="rtl"] .node-4 {
    right: auto;
    left: 64px;
    text-align: right;
}

[dir="rtl"] .node-5 {
    left: auto;
    right: 64px;
    text-align: left;
}

[dir="rtl"] .node-6 {
    left: auto;
    right: 8px;
    text-align: left;
}

[dir="rtl"] .step-arrow svg {
    transform: scaleX(-1);
}

[dir="rtl"] .step-number {
    right: auto;
    left: -6px;
}

@media (max-width: 720px) {
    [dir="rtl"] .node {
        flex-direction: row !important;
        text-align: right !important;
    }
}