/** * Public website RTL overlay. Loaded only when . * English keeps style.css + bootstrap.min.css unchanged. */ html[dir="rtl"] { direction: rtl; } html[dir="rtl"] body { font-family: "Cairo", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; text-align: right; } 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"] .title-box, html[dir="rtl"] .travilo-text, html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] .theme-btn, html[dir="rtl"] .main-menu .navigation > li > a { font-family: "Cairo", "Noto Naskh Arabic", "Gilroy_Bold", sans-serif; } /* * Latin copy under dir=rtl was collapsing spaces and moving punctuation * ("WeCanMakeYourTour", ".the world"). plaintext keeps each block in its * own script direction; the section stays right-aligned. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] .title-box h2, html[dir="rtl"] .title-box h2 span, html[dir="rtl"] .travilo-text, html[dir="rtl"] .travilo-text p, html[dir="rtl"] p, html[dir="rtl"] [dir="auto"] { unicode-bidi: plaintext; line-height: 1.55; } html[dir="rtl"] .title-box h2 { text-transform: none; } /* Keep phone numbers, emails, and latin digits in visual LTR order */ html[dir="rtl"] [dir="ltr"], html[dir="rtl"] a[href^="tel:"], html[dir="rtl"] a[href^="mailto:"], html[dir="rtl"] .nmbr, html[dir="rtl"] .count-box, html[dir="rtl"] .fact-count { direction: ltr; unicode-bidi: isolate; } html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="number"] { direction: ltr; text-align: right; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- */ /* Header */ /* -------------------------------------------------------------------------- */ html[dir="rtl"] .header-top .top-left { float: right; } html[dir="rtl"] .header-top .top-left .info li { float: right; padding-left: 0; padding-right: 24px; margin-right: 0; margin-left: 30px; } html[dir="rtl"] .header-top .top-left .info li:last-child { margin-left: 0; } html[dir="rtl"] .header-top .top-left .info li .icon { left: auto; right: 0; } html[dir="rtl"] .header-top .top-right { float: left; } html[dir="rtl"] .header-top .top-right .lang-box, html[dir="rtl"] .header-top .top-right .login, html[dir="rtl"] .header-top .social, html[dir="rtl"] .header-top .social li, html[dir="rtl"] .main-header .lang-box .lang-btn .img, html[dir="rtl"] .main-header .lang-box .lang-btn .txt, html[dir="rtl"] .main-header .lang-box .lang-btn .icon { float: right; } html[dir="rtl"] .header-top .top-right .lang-box { margin-left: 0; margin-right: 30px; } html[dir="rtl"] .main-header .lang-box .lang-btn .icon { margin-left: 0; margin-right: 7px; } html[dir="rtl"] .main-header .lang-box .lang-list { left: auto; right: 0; } html[dir="rtl"] .header-top .top-right .login { padding-left: 0; padding-right: 26px; } html[dir="rtl"] .header-top .social { margin-left: 0; margin-right: 30px; } html[dir="rtl"] .header-top .social li { margin-right: 0; margin-left: 22px; } html[dir="rtl"] .header-top .social li:last-child { margin-left: 0; } html[dir="rtl"] .header-style-two .header-upper .outer { float: left; } html[dir="rtl"] .main-header .main-box .logo-box { float: right; } html[dir="rtl"] .main-header .header-upper .links-box { float: left; } html[dir="rtl"] .header-style-two .header-upper .links-box { float: right; } html[dir="rtl"] .main-header .header-upper .links-box .link { float: right; margin-left: 0; margin-right: 25px; } html[dir="rtl"] .main-header .header-upper .links-box .call-to { margin-left: 0; margin-right: 60px; } html[dir="rtl"] .main-header .header-upper .call-to a { padding-left: 0; padding-right: 70px; text-align: right; } html[dir="rtl"] .main-header .header-upper .call-to .icon { left: auto; right: 0; } html[dir="rtl"] .main-header .header-upper .call-to a .nmbr { text-align: right; } html[dir="rtl"] .main-header .nav-toggler { float: right; margin-left: 0; margin-right: 20px; } html[dir="rtl"] .main-header .nav-box { float: right; margin-left: 0; margin-right: 80px; } html[dir="rtl"] .header-style-two .nav-box { margin-right: 0; } html[dir="rtl"] .main-menu .navigation > li { float: right; margin-right: 0; margin-left: 40px; } html[dir="rtl"] .main-menu .navigation > li:last-child { margin-left: 0; } html[dir="rtl"] .main-menu .navigation > li > a:after { left: auto; right: 0; } html[dir="rtl"] .main-menu .navigation > li > ul, html[dir="rtl"] .main-menu .navigation > li.dropdown > ul { left: auto; right: 0; text-align: right; } html[dir="rtl"] .main-header .header-upper .social li { float: right; margin-right: 0; margin-left: 20px; } html[dir="rtl"] .main-header .header-upper .social li:last-child { margin-left: 0; } /* Mobile drawer opens from the reading start (right) */ html[dir="rtl"] .hidden-bar { left: auto; right: 0; border-right: 0; border-left: 4px solid var(--primary-color); transform: translateX(400px); -ms-transform: translateX(400px); } html[dir="rtl"] .hidden-bar.visible-sidebar { transform: translateX(0); -ms-transform: translateX(0); } html[dir="rtl"] .hidden-bar .side-menu ul li, html[dir="rtl"] .hidden-bar .side-menu ul li a { text-align: right; } html[dir="rtl"] .hidden-bar .links-box .call-to a { padding-left: 0; padding-right: 70px; text-align: right; } html[dir="rtl"] .hidden-bar .links-box .call-to .icon { left: auto; right: 0; } html[dir="rtl"] .scroll-to-top { right: auto; left: 20px; } /* -------------------------------------------------------------------------- */ /* Hero / banner */ /* -------------------------------------------------------------------------- */ html[dir="rtl"] .banner-section .left-col .content { float: left; padding: 240px 20px 200px 120px; text-align: right; } html[dir="rtl"] .banner-section .left-col .bg-image { left: auto; right: -100px; } html[dir="rtl"] .banner-section .left-col h1 .d-icon { right: auto; left: -20px; } html[dir="rtl"] .banner-two .slide-item .inner, html[dir="rtl"] .banner-two .slide-item .travilo-text, html[dir="rtl"] .banner-two .slide-item .links-box { text-align: center; } html[dir="rtl"] .banner-two .swiper-button-next { right: auto; left: 60px; } html[dir="rtl"] .banner-two .swiper-button-prev { left: auto; right: 60px; } html[dir="rtl"] .banner-two .swiper-button-next, html[dir="rtl"] .banner-two .swiper-button-prev { transform: scaleX(-1); } html[dir="rtl"] .banner-two .slide-item h1 .s-text { left: auto; right: 8px; } /* -------------------------------------------------------------------------- */ /* About two (index-2: text + video + counters) */ /* -------------------------------------------------------------------------- */ html[dir="rtl"] .about-two .text-col { order: 0; } html[dir="rtl"] .about-two .image-col { order: 12; } html[dir="rtl"] .about-two .text-col .inner { padding-left: 110px; padding-right: 0; text-align: right; } html[dir="rtl"] .about-two .image-col .inner { padding-right: 100px; padding-left: 0; } html[dir="rtl"] .about-two .image-col .image-box .vid-btn { right: -60px; left: auto; } html[dir="rtl"] .facts-two .row { display: flex; flex-wrap: wrap; } html[dir="rtl"] .facts-two .fact-block .inner-box { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; } html[dir="rtl"] .facts-two .fact-count, html[dir="rtl"] .facts-two .fact-title { float: none; } html[dir="rtl"] .facts-two .count-box { padding: 0; direction: ltr; unicode-bidi: isolate; line-height: 1; } html[dir="rtl"] .facts-two .fact-title { padding-top: 0; text-align: right; line-height: 1.35; max-width: 8em; } @media (max-width: 1199px) { html[dir="rtl"] .about-two .text-col .inner { padding-left: 50px; } } @media (max-width: 991px) { html[dir="rtl"] .about-two .text-col .inner, html[dir="rtl"] .about-two .image-col .inner { padding-left: 0; padding-right: 0; } html[dir="rtl"] .about-two .image-col .image-box .vid-btn { right: auto; left: 50%; margin-left: -60px; } } /* -------------------------------------------------------------------------- */ /* About / why-us */ /* -------------------------------------------------------------------------- */ html[dir="rtl"] .why-us-two .text-col .inner, html[dir="rtl"] .about-why-us .text-col .inner { padding-right: 0; padding-left: 50px; text-align: right; } html[dir="rtl"] .why-us-two .image-col .inner, html[dir="rtl"] .about-why-us .image-col .inner { margin-left: 0; margin-right: auto; padding: 0 70px 0 0; } html[dir="rtl"] .why-us-two .text-col .d-elem-1 { right: auto; left: -10px; } html[dir="rtl"] .why-us-two .f-block-three .inner-box { padding-left: 0; padding-right: 102px; } html[dir="rtl"] .why-us-two .f-block-three .icon { left: auto; right: 0; } html[dir="rtl"] .why-us-two .image-col .d-elem-2 { left: auto; right: 40px; } html[dir="rtl"] .why-us-two .image-col .rating, html[dir="rtl"] .about-why-us .image-col .rating { left: auto; right: 20px; } html[dir="rtl"] .why-us-two .image-col .fact-block.f-1, html[dir="rtl"] .about-why-us .image-col .fact-block.f-1 { right: auto; left: -80px; } html[dir="rtl"] .why-us-two .image-col .fact-block.f-2, html[dir="rtl"] .about-why-us .image-col .fact-block.f-2 { left: auto; right: 20px; } html[dir="rtl"] .why-us-two .image-col .fact-block .fact-count, html[dir="rtl"] .why-us-two .image-col .fact-block .fact-title { float: right; } html[dir="rtl"] .why-us-two .image-col .fact-block .count-box { padding-right: 0; padding-left: 20px; } html[dir="rtl"] .why-us-two .bg-grad-left { left: auto; right: 25%; } html[dir="rtl"] .why-us-two .bg-grad-right { right: auto; left: -250px; } @media (max-width: 1199px) { html[dir="rtl"] .about-why-us .image-col .inner, html[dir="rtl"] .why-us-two .image-col .inner { padding-left: 0; padding-right: 40px; } html[dir="rtl"] .about-why-us .text-col .inner, html[dir="rtl"] .why-us-two .text-col .inner { padding-left: 20px; padding-right: 0; } html[dir="rtl"] .about-why-us .image-col .fact-block.f-1, html[dir="rtl"] .why-us-two .image-col .fact-block.f-1 { left: 0; } } @media (max-width: 991px) { html[dir="rtl"] .about-why-us .text-col .inner, html[dir="rtl"] .why-us-two .text-col .inner { padding-left: 0; padding-right: 0; } html[dir="rtl"] .about-why-us .image-col .inner, html[dir="rtl"] .why-us-two .image-col .inner { padding-right: 0; } } /* -------------------------------------------------------------------------- */ /* Facts / stats */ /* -------------------------------------------------------------------------- */ html[dir="rtl"] .facts-section, html[dir="rtl"] .facts-section .fact-counter, html[dir="rtl"] .facts-section .fact-block { text-align: right; } html[dir="rtl"] .facts-section .fact-counter .fact-block .inner { text-align: right; } /* -------------------------------------------------------------------------- */ /* Cards, sliders, section titles */ /* -------------------------------------------------------------------------- */ html[dir="rtl"] .title-box, html[dir="rtl"] .sec-title, html[dir="rtl"] .package-block, html[dir="rtl"] .tour-block, html[dir="rtl"] .dest-block, html[dir="rtl"] .news-block, html[dir="rtl"] .testimonial-block, html[dir="rtl"] .activity-block { text-align: right; } html[dir="rtl"] .title-box.centered, html[dir="rtl"] .sec-title.centered, html[dir="rtl"] .banner-two .title-box { text-align: center; } html[dir="rtl"] .slick-slider { direction: rtl; } html[dir="rtl"] .slick-slide { float: right; } html[dir="rtl"] .prev-btn, html[dir="rtl"] .next-btn { transform: scaleX(-1); } /* -------------------------------------------------------------------------- */ /* Forms */ /* -------------------------------------------------------------------------- */ html[dir="rtl"] form .form-group, html[dir="rtl"] form .form-group .field-label, html[dir="rtl"] form .form-group input, html[dir="rtl"] form .form-group textarea, html[dir="rtl"] form .form-group select { text-align: right; } html[dir="rtl"] .subscribe-section form .form-group input { padding: 20px 30px 20px 60px; } html[dir="rtl"] .subscribe-section form .theme-btn { right: auto; left: 30px; } html[dir="rtl"] .footer-subscribe form .form-group input, html[dir="rtl"] .footer-subscribe .field-inner input { text-align: right; } /* -------------------------------------------------------------------------- */ /* Footer */ /* -------------------------------------------------------------------------- */ html[dir="rtl"] .main-footer, html[dir="rtl"] .main-footer h4, html[dir="rtl"] .main-footer .links, html[dir="rtl"] .main-footer .info { text-align: right; } html[dir="rtl"] .main-footer .info li .icon { left: auto; right: 0; } html[dir="rtl"] .main-footer .info li a { padding-left: 0; padding-right: 30px; } html[dir="rtl"] .main-footer .social-links li { float: right; margin-right: 0; margin-left: 6px; } html[dir="rtl"] .main-footer .social-links li:last-child { margin-left: 0; } html[dir="rtl"] .main-footer .gallery .gallery-item { text-align: right; } html[dir="rtl"] .main-footer.title-box.centered, html[dir="rtl"] .footer-subscribe .title-box.centered { text-align: center; } /* -------------------------------------------------------------------------- */ /* Misc Travilo physical-direction blocks */ /* -------------------------------------------------------------------------- */ html[dir="rtl"] .list-style-one li, html[dir="rtl"] .list-style-two li, html[dir="rtl"] ul.list li { padding-left: 0; padding-right: 22px; } html[dir="rtl"] .search-one, html[dir="rtl"] .packages-section, html[dir="rtl"] .destinations-section, html[dir="rtl"] .news-section, html[dir="rtl"] .contact-section, html[dir="rtl"] .page-banner, html[dir="rtl"] .sidebar, html[dir="rtl"] .blog-details, html[dir="rtl"] .package-details, html[dir="rtl"] .tour-details { text-align: right; } html[dir="rtl"] .float-start { float: right !important; } html[dir="rtl"] .float-end { float: left !important; } html[dir="rtl"] .text-start { text-align: right !important; } html[dir="rtl"] .text-end { text-align: left !important; } html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }