/* RTL Support for Arabic Language */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap');

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Roboto', sans-serif !important;
    overflow-x: hidden;
    /* Prevent horiz scroll */
}

/* Container safety margin for scrollbar */
html[dir="rtl"] .container {
    padding-left: 20px;
    padding-right: 20px;
    /* Ensure safe zone from scrollbar */
    max-width: 100%;
    /* Ensure it doesnt overflow */
}

/* Flip Flexbox directions - GLOBAL */
html[dir="rtl"] .nav-container,
html[dir="rtl"] .top-bar-content,
html[dir="rtl"] .footer-grid,
html[dir="rtl"] .lang-switch,
html[dir="rtl"] .top-bar-contact,
html[dir="rtl"] .top-bar-social {
    flex-direction: row-reverse;
}

/* Specific Fix for Icons in Top Bar */
html[dir="rtl"] .top-bar-contact a,
html[dir="rtl"] .logo {
    flex-direction: row-reverse;
}

/* Margins & Spacings flipping */
html[dir="rtl"] .lang-switch {
    margin-right: 20px;
    margin-left: 0;
}

html[dir="rtl"] .logo {
    margin-left: 20px;
    margin-right: 0;
}

/* Icons Spacing */
html[dir="rtl"] .top-bar-contact i,
html[dir="rtl"] .tech-list li i,
html[dir="rtl"] .service-icon {
    margin-left: 8px;
    margin-right: 0;
}

/* ZIG-ZAG LAYOUT CORRECTION RTL */
html[dir="rtl"] .feature-block {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .feature-block:nth-child(even) {
    flex-direction: row;
}

/* Text Alignment Specifics */
html[dir="rtl"] .hero-content {
    text-align: right;
    align-items: flex-start;
    padding-right: 5%;
    /* Push text slightly away from Right edge */
}

/* Headers: Center them in Arabic usually looks better, or keep right but with padding */
html[dir="rtl"] .section-header {
    text-align: center;
    /* Center headers for better balance */
}

html[dir="rtl"] .section-header p {
    margin-left: auto;
    margin-right: auto;
}

html[dir="rtl"] .feature-text {
    text-align: right;
    padding-right: 0;
    padding-left: 0;
}

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

html[dir="rtl"] .mobile-toggle {
    margin-right: auto;
    margin-left: 0;
}

/* Fix Lists */
html[dir="rtl"] ul {
    padding-right: 20px;
    /* Indent bullets on right */
    padding-left: 0;
}