/* ==============================================
   rtl.css  —  Arabic / RTL overrides for SignX
   Link AFTER style33.css in base.html:
   <link rel="stylesheet" href="{% static 'css/rtl.css' %}">
   Every rule is scoped to [dir="rtl"] so it only
   applies when Arabic is active.
================================================ */


/* ── Global text direction ── */
[dir="rtl"] body {
    font-family: 'Cairo', 'Tajawal', 'Inter', sans-serif;
    /* Cairo & Tajawal are good Arabic web fonts — add to base.html:
       <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap" rel="stylesheet"> */
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
    font-family: 'Cairo', 'Montserrat', sans-serif;
}


/* ── Navbar ── */
[dir="rtl"] .nav-wrapper {
    flex-direction: row-reverse;
}

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

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

/* Mobile menu drops from right side in RTL */
[dir="rtl"] .nav-center {
    left: auto;
    right: 0;
}


/* ── Hero section ── */
[dir="rtl"] .home-content {
    text-align: right;
}

[dir="rtl"] .home-actions {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Flip the arrow icon inside the button */
[dir="rtl"] .home-btn-gradient .fa-arrow-right {
    transform: scaleX(-1);
}

[dir="rtl"] .home-features {
    flex-direction: row-reverse;
}

[dir="rtl"] .home-badge {
    direction: rtl;
}


/* ── About section ── */
[dir="rtl"] .asx-top-row {
    direction: rtl;
}

[dir="rtl"] .asx-text-col {
    text-align: right;
}

[dir="rtl"] .asx-eyebrow {
    text-align: right;
}

[dir="rtl"] .asx-rule {
    margin-right: 0;
    margin-left: auto;
}

[dir="rtl"] .asx-features-row {
    direction: rtl;
}

/* Float card flips to the right side */
[dir="rtl"] .asx-float-card {
    left: auto;
    right: -80px;
}

[dir="rtl"] .asx-connector-dot {
    left: auto;
    right: -20px;
}

[dir="rtl"] .asx-mv-card-inner {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .asx-mv-rule {
    margin-right: 0;
}


/* ── Industries section ── */
[dir="rtl"] .industries-row-1,
[dir="rtl"] .industries-row-2 {
    flex-direction: row-reverse;
}

[dir="rtl"] .card-content {
    text-align: right;
}


/* ── Solutions section ── */
[dir="rtl"] .sol-card {
    direction: rtl;
}

/* Reverse layout flips back to correct in RTL */
[dir="rtl"] .sol-card-reverse .sol-img-col {
    order: 0;
}

[dir="rtl"] .sol-card-reverse .sol-content-col {
    order: 0;
}

[dir="rtl"] .sol-content-col {
    text-align: right;
}

[dir="rtl"] .sol-rule {
    margin-right: 0;
}

[dir="rtl"] .sol-actions {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

[dir="rtl"] .sol-btn {
    flex-direction: row-reverse;
}

/* Flip the arrow on the CTA button */
[dir="rtl"] .sol-btn-arrow {
    transform: scaleX(-1);
    display: inline-block;
}

[dir="rtl"] .sol-number {
    text-align: right;
}


/* ── Contact section ── */
[dir="rtl"] .contact-grid {
    direction: rtl;
}

[dir="rtl"] .contact-form {
    text-align: right;
}

[dir="rtl"] .form-group label {
    text-align: right;
    display: block;
}

[dir="rtl"] .form-group input,
[dir="rtl"] .form-group textarea {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .info-card {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .info-icon {
    margin-right: 0;
    margin-left: 15px;
}

[dir="rtl"] .info-card:hover {
    transform: translateX(-4px); /* flip the hover slide direction */
}


/* ── Footer ── */
[dir="rtl"] .footer-grid {
    direction: rtl;
}

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

[dir="rtl"] .footer-navigation {
    flex-direction: row-reverse;
}

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

/* Flip the hover slide direction on footer links */
[dir="rtl"] .footer-col a:hover {
    transform: translateX(-5px);
}


/* ── Section headers ── */
[dir="rtl"] .section-header-centered {
    direction: rtl;
}

[dir="rtl"] .sol-header {
    direction: rtl;
}


/* ── Responsive: mobile RTL fixes ── */
@media (max-width: 992px) {
    [dir="rtl"] .home-grid {
        text-align: right;
    }

    [dir="rtl"] .home-actions {
        justify-content: center;
    }

    [dir="rtl"] .home-features {
        justify-content: center;
    }

    [dir="rtl"] .asx-float-card {
        right: 0;
        left: auto;
    }
}

@media (max-width: 768px) {
    [dir="rtl"] .home-actions {
        flex-direction: column;
        align-items: center;
    }
}