/* ===================================================================
   ABOUT US PAGE RTL STYLES
   ================================================================== */

/* ===================================================================
   1. ABOUT US HERO SECTION RTL STYLES
   ================================================================== */

/* About hero content alignment */
html[dir="rtl"] .about-hero-baseline {
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: 2.5rem !important;
}

html[dir="rtl"] .about-hero-baseline h1 {
    text-align: right !important;
}

html[dir="rtl"] .about-hero-baseline div {
    text-align: right !important;
}

/* ===================================================================
   2. ABOUT US SECTION 2 RTL STYLES (Image + Text + Statistics)
   ================================================================== */

/* Main container layout */
html[dir="rtl"] .about-section-2 .flex-row {
    flex-direction: row-reverse !important;
}

/* Text content alignment */
html[dir="rtl"] .about-section-2 h2 {
    text-align: right !important;
}

html[dir="rtl"] .about-section-2 .text-gray-600 {
    text-align: right !important;
}

/* Statistics section RTL */
html[dir="rtl"] .about-section-2 .text-center {
    text-align: right !important;
}

/* Statistics borders and skew adjustments */
html[dir="rtl"] .about-section-2 .-skew-x-12 {
    transform: skewX(12deg) !important;
}

html[dir="rtl"] .about-section-2 .skew-x-12 {
    transform: skewX(-12deg) !important;
}

/* Statistics border positioning */
html[dir="rtl"] .about-section-2 .border-r-2 {
    border-right: none !important;
    border-left: 2px solid !important;
}

/* Mobile statistics layout */
html[dir="rtl"] .about-section-2 .text-left {
    text-align: right !important;
}

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

/* ===================================================================
   3. ABOUT US SECTION 3 RTL STYLES (Cards and Content)
   ================================================================== */

/* Mobile card section */
html[dir="rtl"] .about-section-3-mobile {
    direction: rtl !important;
}

html[dir="rtl"] .about-section-3-mobile h2 {
    text-align: right !important;
}

html[dir="rtl"] .about-section-3-mobile p {
    text-align: right !important;
}

/* Horizontal scroll container RTL */
html[dir="rtl"] .overflow-x-auto {
    direction: rtl !important;
}

html[dir="rtl"] .overflow-x-auto .flex {
    flex-direction: row-reverse !important;
}

/* Card content alignment */
html[dir="rtl"] .about-card {
    text-align: right !important;
}

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

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

/* Desktop section 3 layout */
html[dir="rtl"] .about-section-3-desktop .grid {
    direction: rtl !important;
}

html[dir="rtl"] .about-section-3-desktop h1 {
    text-align: right !important;
}

html[dir="rtl"] .about-section-3-desktop p {
    text-align: right !important;
}

/* Two cards grid RTL */
html[dir="rtl"] .about-cards-grid {
    direction: rtl !important;
}

html[dir="rtl"] .about-cards-grid h3 {
    text-align: right !important;
}

html[dir="rtl"] .about-cards-grid p {
    text-align: right !important;
}

/* ===================================================================
   4. ABOUT US SECTION 4 RTL STYLES (Ghabbour Auto Section)
   ================================================================== */

/* Main container layout */
html[dir="rtl"] .about-section-4 .flex-row {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .about-section-4 .lg\\:flex-row {
    flex-direction: row-reverse !important;
}

/* Text content alignment */
html[dir="rtl"] .about-section-4 h3,
html[dir="rtl"] .about-section-4 h2,
html[dir="rtl"] .about-section-4 p {
    text-align: right !important;
}

/* Button styling RTL */
html[dir="rtl"] .about-section-4 .inline-flex {
    transform: skewX(12deg) !important;
}

html[dir="rtl"] .about-section-4 .inline-flex span {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

html[dir="rtl"] .about-section-4 .inline-flex svg {
    transform: skewX(-12deg) scaleX(-1) !important;
}

/* Button border adjustments */
html[dir="rtl"] .about-section-4 .border-r-2 {
    border-right: none !important;
    border-left: 2px solid !important;
}

/* ===================================================================
   5. RESPONSIVE RTL ADJUSTMENTS
   ================================================================== */

/* Mobile RTL adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] .about-mobile-content {
        text-align: right !important;
    }
    
    html[dir="rtl"] .about-mobile-stats {
        text-align: right !important;
    }
    
    html[dir="rtl"] .about-mobile-cards {
        direction: rtl !important;
    }
}

/* Desktop RTL adjustments */
@media (min-width: 769px) {
    html[dir="rtl"] .about-desktop-layout {
        flex-direction: row-reverse !important;
    }
    
    html[dir="rtl"] .about-desktop-content {
        text-align: right !important;
        padding-right: 0 !important;
        padding-left: 2rem !important;
    }
}

/* ===================================================================
   6. GRID LAYOUT RTL ADJUSTMENTS
   ================================================================== */

/* Grid column ordering */
html[dir="rtl"] .lg\\:col-span-4 {
    order: 2 !important;
}

html[dir="rtl"] .lg\\:col-span-10 {
    order: 1 !important;
}

/* Grid gap adjustments */
html[dir="rtl"] .grid.gap-8 {
    direction: rtl !important;
}

/* ===================================================================
   7. IMAGE AND MEDIA RTL HANDLING
   ================================================================== */

/* Image positioning */
html[dir="rtl"] .about-image {
    order: 2 !important;
}

html[dir="rtl"] .about-text {
    order: 1 !important;
}

/* Image captions */
html[dir="rtl"] .image-caption {
    text-align: right !important;
}

/* ===================================================================
   8. TYPOGRAPHY RTL ADJUSTMENTS
   ================================================================== */

/* Heading alignment */
html[dir="rtl"] .about-heading {
    text-align: right !important;
}

/* Paragraph alignment */
html[dir="rtl"] .about-paragraph {
    text-align: right !important;
}

/* List alignment */
html[dir="rtl"] .about-list {
    text-align: right !important;
    padding-right: 1.5rem !important;
    padding-left: 0 !important;
}

/* ===================================================================
   9. BUTTON AND CTA RTL STYLES
   ================================================================== */

/* CTA button alignment */
html[dir="rtl"] .about-cta {
    text-align: center !important;
}

/* Button hover effects RTL */
html[dir="rtl"] .about-btn:hover {
    transform: translateX(-2px) skewX(12deg) !important;
}

/* Button icons RTL */
html[dir="rtl"] .about-btn svg {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
    transform: scaleX(-1) !important;
}

/* ===================================================================
   10. SPACING AND PADDING RTL ADJUSTMENTS
   ================================================================== */

/* Padding adjustments */
html[dir="rtl"] .about-padding-left {
    padding-left: 0 !important;
    padding-right: 2rem !important;
}

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

/* Margin adjustments */
html[dir="rtl"] .about-margin-left {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

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

/* ===================================================================
   11. ANIMATION RTL ADJUSTMENTS
   ================================================================== */

/* Slide animations for RTL */
html[dir="rtl"] .about-slide-in-left {
    animation: slideInRight 0.6s ease-out !important;
}

html[dir="rtl"] .about-slide-in-right {
    animation: slideInLeft 0.6s ease-out !important;
}

/* Fade animations */
html[dir="rtl"] .about-fade-in-left {
    animation: fadeInRight 0.8s ease-out !important;
}

html[dir="rtl"] .about-fade-in-right {
    animation: fadeInLeft 0.8s ease-out !important;
}

/* ===================================================================
   12. SPECIFIC COMPONENT OVERRIDES
   ================================================================== */

/* Statistics component RTL */
html[dir="rtl"] .stats-component {
    direction: rtl !important;
}

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

/* Card component RTL */
html[dir="rtl"] .card-component {
    text-align: right !important;
}

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

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

/* Hero component RTL */
html[dir="rtl"] .hero-component {
    text-align: right !important;
    justify-content: flex-end !important;
}

/* ===================================================================
   13. ACCESSIBILITY RTL IMPROVEMENTS
   ================================================================== */

/* Focus indicators RTL */
html[dir="rtl"] .about-focus:focus {
    border-right: 2px solid #172154 !important;
    border-left: none !important;
}

/* Screen reader text RTL */
html[dir="rtl"] .about-sr-only {
    direction: rtl !important;
}

/* ===================================================================
   14. PRINT STYLES RTL
   ================================================================== */

@media print {
    html[dir="rtl"] .about-print {
        direction: rtl !important;
        text-align: right !important;
    }
}