/* RTL-specific improvements for contact page */
/* These apply to both mobile and desktop for consistency */
.contact-section {
    direction: rtl;
    text-align: right;
}

.contact-section p[dir="ltr"] {
    text-align: right !important;
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
    width: 100%;
}

.contact-section .text-right {
    text-align: right !important;
}

.contact-section h3 {
    text-align: right;
}

.contact-section .flex.flex-row-reverse {
    display: flex;
    flex-direction: row-reverse !important;
}

.contact-section .justify-end {
    justify-content: flex-end !important;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    /* Contact information elements */
    .contact-section .flex.items-start.flex-row-reverse {
        align-items: flex-start !important;
    }

    /* Make sure icons are consistently sized */
    .contact-section .bg-white.bg-opacity-20 {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0;
        margin-right: 12px;
    }

    /* Text alignment for RTL on mobile */
    .contact-section .text-right {
        text-align: right !important;
    }
    
    /* Phone numbers should be right aligned even though they're LTR */
    .contact-section p[dir="ltr"] {
        text-align: right !important;
        direction: ltr;
        unicode-bidi: embed;
    }
    
    /* Social icons sizing and spacing on mobile */
    .contact-section .space-x-4 a {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Further RTL adjustments for mobile */
    .rtl-contact-item {
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: flex-start !important;
        width: 100%;
    }
    
    /* LTR content within RTL layout */
    .ltr-content {
        text-align: right !important;
        direction: ltr;
        unicode-bidi: embed;
        width: 100%;
    }
    
    /* Section heading should stay right-aligned */
    .contact-section h2.text-right,
    .contact-section h3.text-right {
        text-align: right !important;
    }
}