/*-------------------------------------------------------------- # Arabic / RTL overrides # Loaded after alefox.css — applies only when --------------------------------------------------------------*/ html[dir="rtl"] { direction: rtl; --alefox-font: "Noto Sans Arabic", "Noto Naskh Arabic", Montserrat, Inter, Rubik, sans-serif; --alefox-heading-font: "Noto Naskh Arabic", "Noto Sans Arabic", "Playfair Display", Georgia, serif; --alefox-letter-space: 0; --alefox-letter-space-xl: 0; } html[dir="rtl"] body { direction: rtl; text-align: right; font-family: var(--alefox-font); } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] .sec-title__title, html[dir="rtl"] .section-title-three__title, html[dir="rtl"] .section__title-two, html[dir="rtl"] .page-header__title, html[dir="rtl"] .ag-pagehead__title, html[dir="rtl"] .ag-hero__title, html[dir="rtl"] .main-slider-two__title, html[dir="rtl"] .service-details__heading { font-family: var(--alefox-heading-font); letter-spacing: 0; } html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] a, html[dir="rtl"] span, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] button, html[dir="rtl"] .ag-hero__text, html[dir="rtl"] .ag-hero__badge, html[dir="rtl"] .ag-hero__cta, html[dir="rtl"] .main-menu .main-menu__list > li > a { letter-spacing: 0; } html[dir="rtl"] .text-left, html[dir="rtl"] .text-start { text-align: right !important; } html[dir="rtl"] .text-right, html[dir="rtl"] .text-end { text-align: left !important; } html[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 5px; } html[dir="rtl"] .pl-10 { padding-left: 0; padding-right: 10px; } html[dir="rtl"] .pl-15 { padding-left: 0; padding-right: 15px; } html[dir="rtl"] .pl-20 { padding-left: 0; padding-right: 20px; } html[dir="rtl"] .pl-30 { padding-left: 0; padding-right: 30px; } html[dir="rtl"] .pr-5 { padding-right: 0; padding-left: 5px; } html[dir="rtl"] .pr-10 { padding-right: 0; padding-left: 10px; } html[dir="rtl"] .pr-15 { padding-right: 0; padding-left: 15px; } html[dir="rtl"] .pr-20 { padding-right: 0; padding-left: 20px; } html[dir="rtl"] .pr-30 { padding-right: 0; padding-left: 30px; } html[dir="rtl"] a[href^="tel:"], html[dir="rtl"] a[href^="mailto:"] { unicode-bidi: isolate; direction: ltr; } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ html[dir="rtl"] .main-header__nav { margin-left: auto; margin-right: 0; } html[dir="rtl"] .main-header--two .main-header__nav { margin-left: 0; margin-right: auto; } html[dir="rtl"] .main-header__right { margin-left: 0; margin-right: auto; } html[dir="rtl"] .main-header--two .main-header__right { margin-left: 0; margin-right: 8px; } html[dir="rtl"] .main-header--two .main-header__logo { margin-left: 0; margin-right: 0; } html[dir="rtl"] .main-header__cart, html[dir="rtl"] .main-header__search, html[dir="rtl"] .main-header--two .main-header__search { margin-left: 0; margin-right: 4px; } html[dir="rtl"] .main-header__btn { margin-left: 0; margin-right: 30px; } html[dir="rtl"] .main-menu .main-menu__list > li.dropdown > a::after, html[dir="rtl"] .main-header--two .main-menu .main-menu__list > li.dropdown > a::after { margin-left: 0; margin-right: 5px; } html[dir="rtl"] .main-menu .main-menu__list > li + li { margin-left: 0; margin-right: 13px; } html[dir="rtl"] .main-header--two .main-menu .main-menu__list > li + li { margin-left: 0 !important; margin-right: 4px !important; } html[dir="rtl"] .main-menu .main-menu__list li ul { left: auto; right: -25px; align-items: flex-end; } html[dir="rtl"] .main-header--two .main-menu .main-menu__list > li > ul { left: auto !important; right: 0 !important; } html[dir="rtl"] .main-menu .main-menu__list li ul li > a::after { right: auto; left: 20px; } html[dir="rtl"] .main-menu .main-menu__list li ul li > ul { left: auto; right: calc(100% + 20px); } html[dir="rtl"] .main-header--two .main-menu .main-menu__list li ul li > ul { left: auto !important; right: 100% !important; } html[dir="rtl"] .main-menu .main-menu__list li ul li > ul.right-align { right: auto; left: 100%; } @media (min-width: 1200px) and (max-width: 1400px) { html[dir="rtl"] .main-menu__list li:nth-last-child(1) ul li > ul, html[dir="rtl"] .main-menu__list li:nth-last-child(2) ul li > ul { right: auto; left: calc(100% + 20px); } } @media (max-width: 1500px) { html[dir="rtl"] .main-header--two .main-menu .main-menu__list > li + li { margin-left: 0 !important; margin-right: 2px !important; } } @media (max-width: 1400px) { html[dir="rtl"] .main-menu .main-menu__list > li + li { margin-left: 0; margin-right: 40px; } } @media (min-width: 1200px) and (max-width: 1300px) { html[dir="rtl"] .main-menu .main-menu__list > li + li { margin-left: 0; margin-right: 35px; } } @media (max-width: 767px) { html[dir="rtl"] .main-header--two .main-header__inner { padding-left: 20px; padding-right: 12px; } } /*-------------------------------------------------------------- # Mobile nav — slides in from the right --------------------------------------------------------------*/ html[dir="rtl"] .mobile-nav__wrapper { transform: translateX(100%); transform-origin: right center; } html[dir="rtl"] .mobile-nav__wrapper.expanded { transform: translateX(0); } html[dir="rtl"] .mobile-nav__content { margin-left: auto; margin-right: 0; transform: translateX(100%); } html[dir="rtl"] .mobile-nav__wrapper.expanded .mobile-nav__content { transform: translateX(0); } html[dir="rtl"] .mobile-nav__close { right: auto; left: 15px; } html[dir="rtl"] .mobile-nav__content .main-menu__list ul li > a { padding-left: 0; padding-right: 1em; } html[dir="rtl"] .mobile-nav__content .main-menu__list > li.langli > a, html[dir="rtl"] .mobile-nav__content .main-menu__list > li.langli-mobile > a { justify-content: flex-start !important; } html[dir="rtl"] .mobile-nav__contact li > i { margin-right: 0; margin-left: 10px; } html[dir="rtl"] .mobile-nav__social a + a { margin-left: 0; margin-right: 20px; } html[dir="rtl"] .mobile-nav__content .logo-box { justify-content: flex-start; } /*-------------------------------------------------------------- # Sidebar popup — opens from the left in RTL --------------------------------------------------------------*/ html[dir="rtl"] .sidebar-one { right: auto; left: 0; transform: translateX(-100%); transform-origin: left center; } html[dir="rtl"] .sidebar-one.active { transform: translateX(0); } html[dir="rtl"] .sidebar-one__content { right: auto; left: 0; transform: translateX(-100%); } html[dir="rtl"] .sidebar-one.active .sidebar-one__content { transform: translateX(0); } html[dir="rtl"] .sidebar-one__close { right: auto; left: 25px; } html[dir="rtl"] .sidebar-one__info li { padding: 0 28px 0 0; } html[dir="rtl"] .sidebar-one__info li span { left: auto; right: 0; } /*-------------------------------------------------------------- # Search --------------------------------------------------------------*/ html[dir="rtl"] .search-popup__form input[type="search"], html[dir="rtl"] .search-popup__form input[type="text"] { padding-left: 66px; padding-right: 30px; text-align: right; } html[dir="rtl"] .search-popup__form .alefox-btn { right: auto; left: -1px; } /*-------------------------------------------------------------- # Scroll to top --------------------------------------------------------------*/ html[dir="rtl"] .scroll-top { left: auto; right: 30px; } /*-------------------------------------------------------------- # Hero slider --------------------------------------------------------------*/ html[dir="rtl"] .ag-hero .ag-hero__item.main-slider-two__item, html[dir="rtl"] .ag-hero .main-slider-two__item { justify-content: flex-start; } html[dir="rtl"] .ag-hero__content.main-slider-two__content { text-align: right; align-items: flex-start; } html[dir="rtl"] .ag-hero__title.main-slider-two__title, html[dir="rtl"] .ag-hero .main-slider-two__title, html[dir="rtl"] .ag-hero .active .main-slider-two__title { font-family: var(--alefox-heading-font) !important; letter-spacing: 0; word-break: normal; overflow-wrap: break-word; } html[dir="rtl"] .ag-hero__text.main-slider-two__text, html[dir="rtl"] .ag-hero .main-slider-two__text { font-family: var(--alefox-font) !important; letter-spacing: 0; } html[dir="rtl"] .ag-hero__badge { font-family: var(--alefox-font); letter-spacing: 0; text-transform: none; padding: 11px 18px 11px 22px; } html[dir="rtl"] .ag-hero__badge sup { margin-left: 0; margin-right: 1px; } html[dir="rtl"] .ag-hero__veil { background: linear-gradient(270deg, rgba(12, 16, 20, 0.55) 0%, rgba(12, 16, 20, 0.18) 48%, rgba(12, 16, 20, 0.08) 100%), linear-gradient(180deg, rgba(12, 16, 20, 0.28) 0%, rgba(12, 16, 20, 0.08) 38%, rgba(12, 16, 20, 0.42) 100%); } html[dir="rtl"] .ag-hero__btn.main-slider-two__btn { justify-content: flex-start; } html[dir="rtl"] .ag-hero__cta-arrow { transform: scaleX(-1); } html[dir="rtl"] .ag-hero .main-slider-two__carousel .owl-nav .owl-prev { left: auto !important; right: clamp(12px, 2.4vw, 36px) !important; } html[dir="rtl"] .ag-hero .main-slider-two__carousel .owl-nav .owl-next { right: auto !important; left: clamp(12px, 2.4vw, 36px) !important; } html[dir="rtl"] .ag-hero .main-slider-two__carousel .owl-nav .owl-prev span, html[dir="rtl"] .ag-hero .main-slider-two__carousel .owl-nav .owl-next span { display: inline-block; transform: scaleX(-1); } html[dir="rtl"] .ag-hero .main-slider-two__carousel .owl-dots, html[dir="rtl"] .ag-hero__carousel .owl-dots { right: auto !important; left: clamp(24px, 6vw, 96px) !important; justify-content: flex-start !important; } @media (max-width: 767px) { html[dir="rtl"] .ag-hero__badge { padding: 8px 14px 8px 16px; } html[dir="rtl"] .ag-hero .main-slider-two__carousel .owl-dots, html[dir="rtl"] .ag-hero__carousel .owl-dots { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; justify-content: center !important; } } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ html[dir="rtl"] .page_footer .menu li a:hover { padding-left: 0; padding-right: 10px; } html[dir="rtl"] .page_footer .footer-contact-item i { margin-right: 0; margin-left: 8px; } html[dir="rtl"] .page_footer .cz_social_icons { justify-content: flex-start; } /*-------------------------------------------------------------- # Breadcrumb --------------------------------------------------------------*/ html[dir="rtl"] .alefox-breadcrumb { flex-direction: row; } /*-------------------------------------------------------------- # Content / lists / about --------------------------------------------------------------*/ html[dir="rtl"] .ag-content__body ul li { padding-left: 0; padding-right: 1.55em; } html[dir="rtl"] .ag-content__body ul li::before { left: auto; right: 0; transform: scaleX(-1); } html[dir="rtl"] .ag-content__media-accent { left: auto; right: 0; } html[dir="rtl"] .ag-timeline__item.is-left { left: 50%; padding: 0 8% 0 22px; justify-content: flex-start; } html[dir="rtl"] .ag-timeline__item.is-right { left: 0; padding: 0 22px 0 8%; justify-content: flex-end; } html[dir="rtl"] .ag-timeline__item.is-left .ag-timeline__dot { right: auto; left: -7px; } html[dir="rtl"] .ag-timeline__item.is-right .ag-timeline__dot { left: auto; right: -7px; } html[dir="rtl"] .ag-timeline__item.is-left .ag-timeline__card { text-align: left; } html[dir="rtl"] .ag-timeline__item.is-right .ag-timeline__card { text-align: right; } @media (max-width: 991px) { html[dir="rtl"] .ag-timeline::before { left: auto; right: 14px; margin-left: 0; margin-right: 0; } html[dir="rtl"] .ag-timeline__item, html[dir="rtl"] .ag-timeline__item.is-left, html[dir="rtl"] .ag-timeline__item.is-right { left: 0; padding: 0 42px 0 0; } html[dir="rtl"] .ag-timeline__item.is-left .ag-timeline__dot, html[dir="rtl"] .ag-timeline__item.is-right .ag-timeline__dot { left: auto; right: 7px; } html[dir="rtl"] .ag-timeline__item.is-left .ag-timeline__card, html[dir="rtl"] .ag-timeline__item.is-right .ag-timeline__card { text-align: right; } } html[dir="rtl"] .ag-cert { padding: 14px 14px 14px 20px; } html[dir="rtl"] .ag-cert__icon { padding: 6px 6px 6px 18px; border-right: 0; border-left: 1px solid rgba(44, 62, 80, 0.28); } html[dir="rtl"] .ag-cert__name { padding-left: 0; padding-right: 20px; } /*-------------------------------------------------------------- # Contact / forms --------------------------------------------------------------*/ html[dir="rtl"] .contact-info__item__title span.icon-contact { margin-right: 0; margin-left: 10px; } html[dir="rtl"] .form-one input[type="text"], html[dir="rtl"] .form-one input[type="email"], html[dir="rtl"] .form-one textarea, html[dir="rtl"] .contact-two__form input[type="text"], html[dir="rtl"] .contact-two__form input[type="email"], html[dir="rtl"] .contact-two__form textarea { text-align: right; } html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } /*-------------------------------------------------------------- # Buttons / arrows --------------------------------------------------------------*/ html[dir="rtl"] .icon-right-arrow1, html[dir="rtl"] .icon-right-arrow, html[dir="rtl"] .icon-left-arrow { display: inline-block; } html[dir="rtl"] .gridlist a .icon-right-arrow1, html[dir="rtl"] .icon-right-arrow1 { transform: scaleX(-1); } /*-------------------------------------------------------------- # Owl / Slick — JS sets rtl:true; keep item text RTL --------------------------------------------------------------*/ html[dir="rtl"] .owl-carousel .owl-item, html[dir="rtl"] .slick-slide { direction: rtl; text-align: right; } /*-------------------------------------------------------------- # Segmen / partner pages --------------------------------------------------------------*/ html[dir="rtl"] .segmen-page, html[dir="rtl"].is-segmen-page .segmen-page { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Georgia, serif !important; } html[dir="rtl"] .segmen-page .hero .lede { text-align: right !important; } html[dir="rtl"] .segmen-page .estd { letter-spacing: 0 !important; text-transform: none !important; }