/**
 * RTL/LTR Support Styles
 */

/* RTL specific styles */
html[dir="rtl"] body,
html[dir="rtl"] *:not(i):not(svg):not(path) {
    font-family: 'Cairo', sans-serif !important;
}

html[dir="rtl"] .rtl\:mr-1 {
    margin-right: 0.25rem !important;
}

html[dir="rtl"] .rtl\:ml-1 {
    margin-left: 0.25rem !important;
}

html[dir="rtl"] .rtl\:space-x-reverse {
    --tw-space-x-reverse: 1 !important;
}

/* LTR specific styles */
html[dir="ltr"] .ltr\:mr-1 {
    margin-right: 0.25rem !important;
}

html[dir="ltr"] .ltr\:ml-1 {
    margin-left: 0.25rem !important;
}

/* Fix for image loading in cards */
.latest-articles .relative img,
.latest-projects .relative img,
.latest-services .relative img {
    min-height: 100%;
    background-color: #f3f4f6;
}

/* Placeholder styles */
.placeholder {
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

/* Fix for RTL text alignment */
html[dir="rtl"] .text-right {
    text-align: left !important;
}

html[dir="rtl"] .text-left {
    text-align: right !important;
}

/* Fix for RTL float */
html[dir="rtl"] .float-right {
    float: left !important;
}

html[dir="rtl"] .float-left {
    float: right !important;
}

/* Fix for RTL margins */
html[dir="rtl"] .mr-1 {
    margin-left: 0.25rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .ml-1 {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .mr-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .ml-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .mr-3 {
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .ml-3 {
    margin-right: 0.75rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .mr-4 {
    margin-left: 1rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .ml-4 {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

/* Fix for RTL padding */
html[dir="rtl"] .pr-1 {
    padding-left: 0.25rem !important;
    padding-right: 0 !important;
}

html[dir="rtl"] .pl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0 !important;
}

html[dir="rtl"] .pr-2 {
    padding-left: 0.5rem !important;
    padding-right: 0 !important;
}

html[dir="rtl"] .pl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0 !important;
}

html[dir="rtl"] .pr-3 {
    padding-left: 0.75rem !important;
    padding-right: 0 !important;
}

html[dir="rtl"] .pl-3 {
    padding-right: 0.75rem !important;
    padding-left: 0 !important;
}

html[dir="rtl"] .pr-4 {
    padding-left: 1rem !important;
    padding-right: 0 !important;
}

html[dir="rtl"] .pl-4 {
    padding-right: 1rem !important;
    padding-left: 0 !important;
}