/* ============================================ KARVY ICE MANUFACTURING - RTL STYLESHEET rtl.css Applied to all Arabic pages via: and linked after style.css ============================================ */ /* ============================================ 1. BASE RTL DIRECTION ============================================ */ [dir="rtl"], [dir="rtl"] * { direction: rtl; } [dir="rtl"] body { font-family: 'Cairo', 'Tajawal', 'Segoe UI', sans-serif; letter-spacing: 0; word-spacing: 0.02em; } /* Arabic font stack Google Fonts import */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Tajawal:wght@300;400;500;700&display=swap'); /* ============================================ 2. TYPOGRAPHY RTL ADJUSTMENTS ============================================ */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: 'Cairo', 'Tajawal', sans-serif; font-weight: 700; line-height: 1.3; text-align: right; } [dir="rtl"] p { font-family: 'Cairo', 'Tajawal', sans-serif; text-align: right; line-height: 1.8; } [dir="rtl"] .text-center h1, [dir="rtl"] .text-center h2, [dir="rtl"] .text-center h3, [dir="rtl"] .text-center p { text-align: center; } [dir="rtl"] .text-right h1, [dir="rtl"] .text-right h2, [dir="rtl"] .text-right p { text-align: left; } /* ============================================ 3. LAYOUT DIRECTION FLIPS ============================================ */ /* Flex row direction */ [dir="rtl"] .navbar, [dir="rtl"] .hero-cta, [dir="rtl"] .hero-stats, [dir="rtl"] .quick-contact-item, [dir="rtl"] .contact-detail-list li, [dir="rtl"] .footer-contact li, [dir="rtl"] .feature-item, [dir="rtl"] .form-disclaimer, [dir="rtl"] .sidebar-cta-buttons, [dir="rtl"] .breadcrumb, [dir="rtl"] .download-meta, [dir="rtl"] .urgent-buttons, [dir="rtl"] .product-cta, [dir="rtl"] .cta-buttons, [dir="rtl"] .radio-group, [dir="rtl"] .product-tags-row, [dir="rtl"] .social-links, [dir="rtl"] .faq-category-title, [dir="rtl"] .downloads-notice, [dir="rtl"] .product-notice, [dir="rtl"] .response-card, [dir="rtl"] .explore-card { direction: rtl; } /* Text alignment for list items */ [dir="rtl"] .footer-links li, [dir="rtl"] .footer-links a, [dir="rtl"] .check-list li, [dir="rtl"] .bullet-list li, [dir="rtl"] .highlight-list li, [dir="rtl"] .detail-item li, [dir="rtl"] .about-product-item li, [dir="rtl"] .faq-answer li { text-align: right; } /* ============================================ 4. HEADER & NAVIGATION RTL ============================================ */ /* Logo stays on right side */ [dir="rtl"] .navbar { flex-direction: row-reverse; } [dir="rtl"] .logo { order: 3; } [dir="rtl"] .nav-menu { order: 2; flex-direction: row-reverse; } [dir="rtl"] .nav-actions { order: 1; flex-direction: row-reverse; } [dir="rtl"] .hamburger { order: 1; } /* Nav link underline origin */ [dir="rtl"] .nav-menu a::after { transform-origin: right; } [dir="rtl"] .nav-menu a:hover::after, [dir="rtl"] .nav-menu a.active::after { transform: scaleX(1); transform-origin: right; } /* Mobile nav */ @media (max-width: 1024px) { [dir="rtl"] .nav-menu { flex-direction: column; align-items: flex-end; } [dir="rtl"] .nav-menu a { text-align: right; width: 100%; } } /* ============================================ 5. HERO SECTION RTL ============================================ */ [dir="rtl"] .hero-content { text-align: right; } [dir="rtl"] .hero-title, [dir="rtl"] .hero-subtitle { text-align: right; } [dir="rtl"] .hero-cta { justify-content: flex-start; flex-direction: row-reverse; } [dir="rtl"] .hero-stats { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .stat { text-align: right; } /* Page hero */ [dir="rtl"] .page-hero-content { text-align: right; } [dir="rtl"] .breadcrumb { flex-direction: row-reverse; justify-content: flex-start; } /* ============================================ 6. BUTTONS RTL ============================================ */ [dir="rtl"] .btn { flex-direction: row-reverse; } [dir="rtl"] .btn svg, [dir="rtl"] .btn .icon-inline { transform: scaleX(-1); } /* Exceptions — icons that should NOT be flipped */ [dir="rtl"] .btn .icon-inline.no-flip, [dir="rtl"] .btn-download svg, [dir="rtl"] .btn svg.no-flip { transform: none; } /* WhatsApp icon — never flip */ [dir="rtl"] .btn-success svg, [dir="rtl"] .social-links svg { transform: none; } /* ============================================ 7. SECTION HEADER RTL ============================================ */ [dir="rtl"] .section-header { text-align: right; } [dir="rtl"] .section-header.text-center { text-align: center; } [dir="rtl"] .section-header p { text-align: right; margin-right: 0; margin-left: auto; } [dir="rtl"] .section-header.text-center p { text-align: center; margin: 0 auto; } /* ============================================ 8. PRODUCT CARDS RTL ============================================ */ [dir="rtl"] .product-card .product-content { text-align: right; } [dir="rtl"] .product-detail-card { direction: rtl; } [dir="rtl"] .product-detail-card--reverse { grid-template-columns: 400px 1fr; } [dir="rtl"] .product-detail-card--reverse .product-detail-image { order: 1; } [dir="rtl"] .product-detail-card--reverse .product-detail-content { order: 2; } [dir="rtl"] .product-detail-content { text-align: right; } [dir="rtl"] .product-tag { display: inline-block; } [dir="rtl"] .product-details-grid { direction: rtl; } [dir="rtl"] .detail-item { text-align: right; } [dir="rtl"] .detail-item li { padding-left: 0; padding-right: 20px; } [dir="rtl"] .detail-item li::before { left: auto; right: 0; content: "←"; } [dir="rtl"] .product-cta { flex-direction: row-reverse; } [dir="rtl"] .product-notice { flex-direction: row-reverse; text-align: right; } /* ============================================ 9. INDUSTRY CARDS RTL ============================================ */ [dir="rtl"] .industry-card { text-align: center; } [dir="rtl"] .industry-detail-content { text-align: right; } [dir="rtl"] .industry-detail-card--reverse { grid-template-columns: 200px 1fr; } [dir="rtl"] .industry-detail-card--reverse .industry-detail-icon { order: 1; } [dir="rtl"] .industry-detail-card--reverse .industry-detail-content { order: 2; } [dir="rtl"] .product-tags-row { flex-direction: row-reverse; } [dir="rtl"] .industry-benefits, [dir="rtl"] .industry-products { text-align: right; } /* ============================================ 10. ABOUT PAGE RTL ============================================ */ [dir="rtl"] .about-highlight-box, [dir="rtl"] .card-box, [dir="rtl"] .about-panel { text-align: right; } [dir="rtl"] .check-list li { padding-left: 0; padding-right: 28px; } [dir="rtl"] .check-list li::before { left: auto; right: 0; } [dir="rtl"] .bullet-list li { padding-left: 0; padding-right: 20px; } [dir="rtl"] .bullet-list li::before { left: auto; right: 0; } [dir="rtl"] .highlight-list li { text-align: right; } [dir="rtl"] .about-product-item { text-align: right; border-top: 4px solid var(--color-primary); } [dir="rtl"] .about-product-item li { padding-left: 0; padding-right: 16px; } [dir="rtl"] .about-product-item li::before { left: auto; right: 0; content: "–"; } [dir="rtl"] .stats-box { text-align: center; } /* Timeline RTL */ [dir="rtl"] .timeline::before { left: auto; right: 120px; } [dir="rtl"] .timeline-item { flex-direction: row-reverse; } [dir="rtl"] .timeline-year { text-align: left; } [dir="rtl"] .timeline-content { margin-left: 0; margin-right: var(--spacing-xl); } [dir="rtl"] .timeline-content::before { left: auto; right: -28px; } @media (max-width: 768px) { [dir="rtl"] .timeline::before { display: none; } [dir="rtl"] .timeline-item { flex-direction: column; } [dir="rtl"] .timeline-year { text-align: right; } [dir="rtl"] .timeline-content { margin-right: 0; } } /* ============================================ 11. DOWNLOADS PAGE RTL ============================================ */ [dir="rtl"] .downloads-notice { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .download-card { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .download-card-content h3, [dir="rtl"] .download-card-content p { text-align: right; } [dir="rtl"] .download-meta { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .file-badge { right: auto; left: -6px; } [dir="rtl"] .section-header h2 svg.icon-heading { margin-right: 0; margin-left: var(--spacing-sm); } [dir="rtl"] .faq-category-title svg { margin-right: 0; margin-left: var(--spacing-md); } @media (max-width: 768px) { [dir="rtl"] .download-card { flex-direction: column; } } /* ============================================ 12. CONTACT PAGE RTL ============================================ */ /* Quick contact strip */ [dir="rtl"] .quick-contact-grid { direction: rtl; } [dir="rtl"] .quick-contact-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .quick-label, [dir="rtl"] .quick-value { text-align: right; } /* Contact layout */ [dir="rtl"] .contact-layout { direction: rtl; grid-template-columns: 380px 1fr; } /* Contact form */ [dir="rtl"] .contact-form-wrapper { text-align: right; } [dir="rtl"] .form-group label { text-align: right; display: block; } [dir="rtl"] .form-group input, [dir="rtl"] .form-group textarea, [dir="rtl"] .form-group select { text-align: right; direction: rtl; } /* Flip select arrow to left side */ [dir="rtl"] .form-group select { background-position: left 12px center; padding-right: 16px; padding-left: 40px; } [dir="rtl"] .checkbox-grid { direction: rtl; } [dir="rtl"] .checkbox-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .radio-group { flex-direction: row-reverse; } [dir="rtl"] .radio-item { flex-direction: row-reverse; } [dir="rtl"] .form-disclaimer { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .field-error { text-align: right; } [dir="rtl"] .form-success, [dir="rtl"] .form-error { text-align: center; } /* Contact sidebar */ [dir="rtl"] .contact-sidebar { order: -1; } [dir="rtl"] .contact-info-card h3 { text-align: right; } [dir="rtl"] .contact-detail-list li { flex-direction: row-reverse; } [dir="rtl"] .contact-detail-text { text-align: right; } [dir="rtl"] .detail-label, [dir="rtl"] .detail-value { text-align: right; } [dir="rtl"] .response-card h4, [dir="rtl"] .response-card p, [dir="rtl"] .download-cta-card h4, [dir="rtl"] .download-cta-card p { text-align: center; } /* Map section */ [dir="rtl"] .map-section .section-header { text-align: center; } @media (max-width: 1024px) { [dir="rtl"] .contact-layout { grid-template-columns: 1fr; } [dir="rtl"] .contact-sidebar { order: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); } [dir="rtl"] .contact-info-card { grid-column: 1 / -1; } } @media (max-width: 768px) { [dir="rtl"] .contact-layout { grid-template-columns: 1fr; } [dir="rtl"] .contact-sidebar { grid-template-columns: 1fr; } [dir="rtl"] .contact-info-card { grid-column: auto; } } /* ============================================ 13. FAQ PAGE RTL ============================================ */ [dir="rtl"] .faq-intro { text-align: center; } [dir="rtl"] .faq-categories { flex-direction: row-reverse; justify-content: center; } [dir="rtl"] .faq-cat-btn { flex-direction: row-reverse; } [dir="rtl"] .faq-category-title { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .faq-question { text-align: right; flex-direction: row-reverse; } [dir="rtl"] .faq-icon { flex-shrink: 0; } [dir="rtl"] .faq-answer { text-align: right; } [dir="rtl"] .faq-answer li { padding-left: 0; padding-right: 20px; } [dir="rtl"] .faq-answer li::before { left: auto; right: 6px; } [dir="rtl"] .still-questions { text-align: center; } [dir="rtl"] .still-questions .cta-buttons { flex-direction: row-reverse; justify-content: center; } /* FAQ category border — move to right */ [dir="rtl"] .faq-category-title { border-bottom: 2px solid var(--color-primary); padding-bottom: var(--spacing-md); } @media (max-width: 768px) { [dir="rtl"] .faq-categories { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; } } /* ============================================ 14. FOOTER RTL ============================================ */ [dir="rtl"] .footer-content { direction: rtl; grid-template-columns: 1.5fr 1fr 1fr 2fr; } [dir="rtl"] .footer-section { text-align: right; } [dir="rtl"] .footer-section p { text-align: right; } [dir="rtl"] .footer-section h3 { text-align: right; } [dir="rtl"] .footer-links li, [dir="rtl"] .footer-links a { text-align: right; } [dir="rtl"] .footer-contact li { flex-direction: row-reverse; } [dir="rtl"] .footer-contact span, [dir="rtl"] .footer-contact a { text-align: right; } [dir="rtl"] .social-links { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .footer-bottom { flex-direction: row-reverse; } [dir="rtl"] .footer-bottom p { text-align: right; } [dir="rtl"] .footer-logo { margin-right: 0; } @media (max-width: 1024px) { [dir="rtl"] .footer-content { grid-template-columns: 1fr 1fr; } [dir="rtl"] .footer-content .footer-section:first-child { grid-column: 1 / -1; } } @media (max-width: 480px) { [dir="rtl"] .footer-content { grid-template-columns: 1fr; } [dir="rtl"] .footer-content .footer-section:first-child { grid-column: auto; } [dir="rtl"] .footer-bottom { flex-direction: column; text-align: center; } [dir="rtl"] .footer-bottom p, [dir="rtl"] .footer-section p, [dir="rtl"] .footer-section h3, [dir="rtl"] .footer-links a { text-align: center; } [dir="rtl"] .social-links { justify-content: center; } } /* ============================================ 15. SCROLL TO TOP RTL ============================================ */ [dir="rtl"] .scroll-top { right: auto; left: 32px; } @media (max-width: 768px) { [dir="rtl"] .scroll-top { left: 20px; right: auto; } } /* ============================================ 16. THANK YOU PAGE RTL ============================================ */ [dir="rtl"] .thank-you-content { text-align: center; } [dir="rtl"] .thank-you-subtitle, [dir="rtl"] .thank-you-note { text-align: center; } [dir="rtl"] .next-steps { text-align: right; } [dir="rtl"] .next-steps h2 { text-align: center; } [dir="rtl"] .next-step-item { text-align: center; } [dir="rtl"] .next-step-item h3, [dir="rtl"] .next-step-item p { text-align: center; } [dir="rtl"] .urgent-contact { text-align: center; } [dir="rtl"] .urgent-buttons { flex-direction: row-reverse; justify-content: center; } [dir="rtl"] .explore-more h3 { text-align: center; } [dir="rtl"] .explore-card { text-align: center; } [dir="rtl"] .redirect-notice { text-align: center; } /* ============================================ 17. WELCOME / TWO-COLUMN SECTIONS RTL ============================================ */ [dir="rtl"] .two-column { direction: rtl; } [dir="rtl"] .welcome-features { direction: rtl; } [dir="rtl"] .feature-item { flex-direction: row-reverse; text-align: right; } /* ============================================ 18. FEATURES GRID RTL ============================================ */ [dir="rtl"] .feature-box { text-align: center; } [dir="rtl"] .feature-box h3, [dir="rtl"] .feature-box p { text-align: center; } /* ============================================ 19. CTA / PROMO SECTION RTL ============================================ */ [dir="rtl"] .cta-content { text-align: center; } [dir="rtl"] .cta-buttons { flex-direction: row-reverse; justify-content: center; } [dir="rtl"] .promo-banner { text-align: center; } [dir="rtl"] .stats-row { flex-direction: row-reverse; } [dir="rtl"] .stats-row .stat-item { text-align: center; } /* ============================================ 20. FORM SUCCESS / ERROR MESSAGES RTL ============================================ */ [dir="rtl"] .form-success, [dir="rtl"] .form-error { direction: rtl; } [dir="rtl"] .form-success h3, [dir="rtl"] .form-success p, [dir="rtl"] .form-error h3, [dir="rtl"] .form-error p { text-align: center; } /* ============================================ 21. BREADCRUMB RTL ============================================ */ [dir="rtl"] .breadcrumb { flex-direction: row-reverse; } /* ============================================ 22. NOT LISTED BOX RTL ============================================ */ [dir="rtl"] .not-listed-box { text-align: center; } [dir="rtl"] .not-listed-box h2, [dir="rtl"] .not-listed-box p { text-align: center; } /* ============================================ 23. FILTER NAV RTL ============================================ */ [dir="rtl"] .filter-nav { flex-direction: row-reverse; } /* ============================================ 24. LANG BADGE RTL ============================================ */ [dir="rtl"] .lang-badge { direction: ltr; display: inline-block; } /* ============================================ 25. INDUSTRY INTRO STATS RTL ============================================ */ [dir="rtl"] .industry-intro-grid { direction: rtl; } [dir="rtl"] .intro-stat { text-align: center; } /* ============================================ 26. ABOUT HIGHLIGHT & CARD BOX RTL ============================================ */ [dir="rtl"] .about-highlight-box h3, [dir="rtl"] .card-box h3 { text-align: right; } [dir="rtl"] .about-panel h3 { text-align: right; } /* ============================================ 27. PLACEHOLDER & NOTICE BOXES RTL ============================================ */ [dir="rtl"] .placeholder-notice { text-align: center; } [dir="rtl"] .downloads-notice p { text-align: right; } /* ============================================ 28. PRODUCT NOTICE RTL ============================================ */ [dir="rtl"] .product-notice p { text-align: right; } /* ============================================ 29. RESPONSE TIME & DOWNLOAD CTA CARD RTL ============================================ */ [dir="rtl"] .response-card, [dir="rtl"] .download-cta-card { text-align: center; } /* ============================================ 30. PRINT RTL ============================================ */ @media print { [dir="rtl"] body { direction: rtl; text-align: right; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p { text-align: right; } }