/* ============================================================
Pirsumify Complete RTL CSS
Covers: header, footer, all public pages, submenu, forms, mobile
Save as: public/assets/universal/css/rtl.css
Required HTML:
Required load in app.blade.php after main CSS:
@if(in_array(app()->getLocale(), ['he', 'ar']))
@endif
============================================================ */
/* ===== Included from pirsumify-rtl-all-pages.css ===== */
/* ============================================================
Pirsumify RTL Fixes - Hebrew + Arabic
File: public/assets/universal/css/rtl.css
This is one global CSS file for all translated RTL pages.
It works only when the HTML tag has dir="rtl":
Load it after all normal CSS files:
@if(in_array(app()->getLocale(), ['he', 'ar']))
@endif
============================================================ */
/* ============================================================
1. Global base
============================================================ */
html[dir="rtl"],
html[dir="rtl"] body {
direction: rtl;
text-align: right;
}
html[dir="rtl"] body {
unicode-bidi: embed;
}
html[dir="rtl"] * {
letter-spacing: normal;
}
/* Do not reverse media/iframes/canvas/map previews */
html[dir="rtl"] img,
html[dir="rtl"] svg,
html[dir="rtl"] video,
html[dir="rtl"] iframe,
html[dir="rtl"] canvas,
html[dir="rtl"] .mapboxgl-map,
html[dir="rtl"] .maptiler-map,
html[dir="rtl"] .swiper,
html[dir="rtl"] .swiper-container,
html[dir="rtl"] .carousel,
html[dir="rtl"] .ad-preview-box,
html[dir="rtl"] #audienceMap,
html[dir="rtl"] #dupAudienceMap {
direction: ltr;
}
/* Keep brand/platform short English text stable */
html[dir="rtl"] .brand-ltr,
html[dir="rtl"] .ltr-text {
direction: ltr;
unicode-bidi: isolate;
}
/* ============================================================
2. Bootstrap 4/5 helper overrides
============================================================ */
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"] .text-center,
html[dir="rtl"] .text-center * {
text-align: center !important;
}
html[dir="rtl"] .float-left,
html[dir="rtl"] .float-start {
float: right !important;
}
html[dir="rtl"] .float-right,
html[dir="rtl"] .float-end {
float: left !important;
}
html[dir="rtl"] .ml-auto,
html[dir="rtl"] .ms-auto {
margin-right: auto !important;
margin-left: 0 !important;
}
html[dir="rtl"] .mr-auto,
html[dir="rtl"] .me-auto {
margin-left: auto !important;
margin-right: 0 !important;
}
/* Common margin swap */
html[dir="rtl"] .ml-1,
html[dir="rtl"] .ms-1 { margin-right: .25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-2,
html[dir="rtl"] .ms-2 { margin-right: .5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-3,
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-4,
html[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-5,
html[dir="rtl"] .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }
html[dir="rtl"] .mr-1,
html[dir="rtl"] .me-1 { margin-left: .25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-2,
html[dir="rtl"] .me-2 { margin-left: .5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-3,
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-4,
html[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-5,
html[dir="rtl"] .me-5 { margin-left: 3rem !important; margin-right: 0 !important; }
/* Common padding swap */
html[dir="rtl"] .pl-0,
html[dir="rtl"] .ps-0 { padding-right: 0 !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-1,
html[dir="rtl"] .ps-1 { padding-right: .25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-2,
html[dir="rtl"] .ps-2 { padding-right: .5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-3,
html[dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-4,
html[dir="rtl"] .ps-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-5,
html[dir="rtl"] .ps-5 { padding-right: 3rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pr-0,
html[dir="rtl"] .pe-0 { padding-left: 0 !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-1,
html[dir="rtl"] .pe-1 { padding-left: .25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-2,
html[dir="rtl"] .pe-2 { padding-left: .5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-3,
html[dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-4,
html[dir="rtl"] .pe-4 { padding-left: 1.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-5,
html[dir="rtl"] .pe-5 { padding-left: 3rem !important; padding-right: 0 !important; }
/* ============================================================
3. Header / navigation / language dropdown
============================================================ */
html[dir="rtl"] header,
html[dir="rtl"] .main_nav,
html[dir="rtl"] .main-inr-hdr,
html[dir="rtl"] .logo-hdr,
html[dir="rtl"] .mainheader-wrapper,
html[dir="rtl"] .navbar,
html[dir="rtl"] .navbar-nav,
html[dir="rtl"] .get_started,
html[dir="rtl"] .get_started ul {
direction: rtl;
}
html[dir="rtl"] .main-inr-hdr {
flex-direction: row-reverse;
}
html[dir="rtl"] .logo-hdr .logo,
html[dir="rtl"] .logo-hdr {
text-align: right;
}
html[dir="rtl"] .navbar-nav {
padding-right: 0 !important;
padding-left: 0 !important;
}
html[dir="rtl"] .navbar-nav li,
html[dir="rtl"] .navbar-nav li.nav-item {
margin-right: 0 !important;
margin-left: 0 !important;
}
html[dir="rtl"] .nav-link {
text-align: right;
}
html[dir="rtl"] .navbar-toggler {
margin-right: auto !important;
margin-left: 0 !important;
}
html[dir="rtl"] #solutionToggle {
direction: rtl;
}
html[dir="rtl"] #solutionToggle .ms-2 {
margin-right: .5rem !important;
margin-left: 0 !important;
}
/* Mega dropdown */
html[dir="rtl"] .dropdown-mega {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .damage-product {
direction: rtl;
}
html[dir="rtl"] .product-item {
text-align: center;
}
/* User dropdown */
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .custom-dropdown-menu {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .dropdown-menu-end {
left: 0 !important;
right: auto !important;
}
html[dir="rtl"] .dropdown-item i,
html[dir="rtl"] .dropdown-item-custom i,
html[dir="rtl"] .user-sidebar__nav-link i {
margin-left: 8px;
margin-right: 0;
}
html[dir="rtl"] .dropdown-header-custom {
text-align: right;
}
/* Globe language selector */
html[dir="rtl"] .language-selector {
direction: rtl;
}
html[dir="rtl"] .language-dropdown {
right: auto !important;
left: -20px !important;
text-align: right;
}
html[dir="rtl"] .language-dropdown a {
text-align: right;
}
html[dir="rtl"] .language-dropdown .flag,
html[dir="rtl"] .flag {
margin-right: 0 !important;
margin-left: 10px !important;
}
/* ============================================================
4. Forms / auth / buttons
============================================================ */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select {
direction: rtl;
text-align: right;
}
/* Keep email, phone, URL, OTP, numbers LTR */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[name*="email"],
html[dir="rtl"] input[name*="phone"],
html[dir="rtl"] input[name*="url"],
html[dir="rtl"] input[name*="otp"],
html[dir="rtl"] input[id*="otp"] {
direction: ltr;
text-align: left;
}
html[dir="rtl"] .login-section,
html[dir="rtl"] .login-input,
html[dir="rtl"] .center-text,
html[dir="rtl"] .sign-up-box,
html[dir="rtl"] .pisumify-form-input,
html[dir="rtl"] .pisumify-signin__heading,
html[dir="rtl"] .pisumify-signin__bottom {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .btn-arrow .arrow {
transform: rotate(180deg);
}
html[dir="rtl"] .btn-close {
margin-right: auto !important;
margin-left: 0 !important;
}
/* ============================================================
5. Breadcrumb / common hero pages
privacy, terms, accessibility, about, why, facebook, instagram, tiktok, learn
============================================================ */
html[dir="rtl"] .solutions-hero,
html[dir="rtl"] .privacy-hero {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .solutions-hero .row,
html[dir="rtl"] .privacy-hero .row {
direction: rtl;
}
html[dir="rtl"] .solutions-hero .col-md-6:first-child,
html[dir="rtl"] .privacy-hero .col-md-6:first-child {
text-align: right !important;
}
html[dir="rtl"] .solutions-hero .text-right,
html[dir="rtl"] .privacy-hero .text-right {
text-align: left !important;
}
html[dir="rtl"] .breadcrumb {
direction: rtl;
padding-right: 0 !important;
padding-left: 0 !important;
}
html[dir="rtl"] .breadcrumb-item {
direction: rtl;
}
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
padding-right: .5rem;
padding-left: 0;
}
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
float: right;
padding-left: .5rem;
padding-right: 0;
}
/* Decorative icons used on hero pages */
html[dir="rtl"] .facebook-rotate img {
right: auto !important;
left: 26% !important;
}
html[dir="rtl"] .instagram-rotate img {
right: auto !important;
left: -14px !important;
}
/* ============================================================
6. Homepage
============================================================ */
html[dir="rtl"] .banner .row {
direction: rtl;
}
html[dir="rtl"] .inr_bnr_lft,
html[dir="rtl"] .inr_bnr_lft h1,
html[dir="rtl"] .inr_bnr_lft h3,
html[dir="rtl"] .inr_bnr_lft p,
html[dir="rtl"] .less_effort {
direction: rtl;
text-align: right !important;
}
html[dir="rtl"] .try_free {
text-align: center;
}
html[dir="rtl"] .free_forever ul {
direction: rtl;
padding-right: 0;
padding-left: 0;
justify-content: center;
}
html[dir="rtl"] .free_forever li,
html[dir="rtl"] .free_forever a {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .free_forever img {
margin-left: 8px;
margin-right: 0;
}
html[dir="rtl"] .satisfied_client {
text-align: right;
}
html[dir="rtl"] .pirsumify_rt {
direction: ltr;
}
html[dir="rtl"] .facebook-box {
right: auto !important;
left: 0 !important;
}
html[dir="rtl"] .instagram-box {
left: auto !important;
right: 0 !important;
}
html[dir="rtl"] .whatsapp-box {
right: auto !important;
left: 15% !important;
}
html[dir="rtl"] .our_platforms .row,
html[dir="rtl"] .finnaly_sec .row,
html[dir="rtl"] .main_compaign {
direction: rtl;
}
html[dir="rtl"] .our_platforms h1,
html[dir="rtl"] .finnaly_sec h1,
html[dir="rtl"] .main_faqs h3 {
text-align: center !important;
}
html[dir="rtl"] .main_platform,
html[dir="rtl"] .main_finally,
html[dir="rtl"] .compaign_box {
direction: rtl;
text-align: center;
}
html[dir="rtl"] .main_faqs,
html[dir="rtl"] .questions_sec,
html[dir="rtl"] .answer-group,
html[dir="rtl"] .accordion-header,
html[dir="rtl"] .accordion-body,
html[dir="rtl"] .accordion-button {
direction: rtl;
text-align: right !important;
}
html[dir="rtl"] .accordion-button::after {
margin-right: auto !important;
margin-left: 0 !important;
}
/* ============================================================
7. Privacy / Terms / Accessibility / Policy details
============================================================ */
html[dir="rtl"] .privacy-wrapper,
html[dir="rtl"] .privacy-inner,
html[dir="rtl"] .policy,
html[dir="rtl"] .policy--details,
html[dir="rtl"] .custom--card {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .privacy-wrapper .row,
html[dir="rtl"] .policy .row {
direction: rtl;
}
html[dir="rtl"] .privacy-wrapper ul,
html[dir="rtl"] .privacy-wrapper ol,
html[dir="rtl"] .policy--details ul,
html[dir="rtl"] .policy--details ol {
padding-right: 2rem !important;
padding-left: 0 !important;
text-align: right;
}
html[dir="rtl"] .privacy-wrapper li,
html[dir="rtl"] .policy--details li {
text-align: right;
}
html[dir="rtl"] .privacy-inner .text-center,
html[dir="rtl"] .privacy-inner .text-center p,
html[dir="rtl"] .privacy-inner .text-center h5 {
text-align: center !important;
}
/* ============================================================
8. About page
============================================================ */
html[dir="rtl"] .about-page,
html[dir="rtl"] .hero,
html[dir="rtl"] .icon-box,
html[dir="rtl"] .markit-banner,
html[dir="rtl"] .success-box,
html[dir="rtl"] .success-content,
html[dir="rtl"] .section-title {
direction: rtl;
}
html[dir="rtl"] .success-box {
flex-direction: row-reverse;
text-align: right;
}
html[dir="rtl"] .markit-banner-inner,
html[dir="rtl"] .markit-banner-inner p,
html[dir="rtl"] .markit-banner-inner .section-title {
text-align: center !important;
}
/* ============================================================
9. Platform pages: Facebook / Instagram / TikTok / Why Pirsumify
============================================================ */
html[dir="rtl"] .pirsumify-cta-section,
html[dir="rtl"] .why-facebook-section,
html[dir="rtl"] .game-changer-section,
html[dir="rtl"] .integration-section,
html[dir="rtl"] .exclusive-feature,
html[dir="rtl"] .User-Friendly,
html[dir="rtl"] .instagram-markiting,
html[dir="rtl"] .integration-results,
html[dir="rtl"] .testimonial-section {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .pirsumify-cta-section .row,
html[dir="rtl"] .why-facebook-section .row,
html[dir="rtl"] .game-changer-section .row,
html[dir="rtl"] .integration-section .row,
html[dir="rtl"] .exclusive-feature .row,
html[dir="rtl"] .User-Friendly .row,
html[dir="rtl"] .instagram-markiting .row,
html[dir="rtl"] .integration-results .row,
html[dir="rtl"] .testimonial-section .row {
direction: rtl;
}
html[dir="rtl"] .integration-title,
html[dir="rtl"] .integration-heading,
html[dir="rtl"] .why-hed,
html[dir="rtl"] .sub-pera,
html[dir="rtl"] .integration-list,
html[dir="rtl"] .integration-list li,
html[dir="rtl"] .info-box,
html[dir="rtl"] .integration-box,
html[dir="rtl"] .result-box,
html[dir="rtl"] .result-body,
html[dir="rtl"] .work-box,
html[dir="rtl"] .work-content,
html[dir="rtl"] .monitor-card,
html[dir="rtl"] .testimonial-box {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .integration-heading,
html[dir="rtl"] .integration-title,
html[dir="rtl"] .testimonial-section h2,
html[dir="rtl"] .main-text {
text-align: center !important;
}
html[dir="rtl"] .integration-list,
html[dir="rtl"] .work-content ul,
html[dir="rtl"] .features,
html[dir="rtl"] .undorderList {
padding-right: 1.5rem !important;
padding-left: 0 !important;
}
html[dir="rtl"] .market-wrrap,
html[dir="rtl"] .work-wrapper,
html[dir="rtl"] .monitor-wrapper {
direction: rtl;
}
html[dir="rtl"] .market-wrrap .inner-box,
html[dir="rtl"] .monitor-card {
text-align: center !important;
}
html[dir="rtl"] .icon-bussness,
html[dir="rtl"] .monitor-icon,
html[dir="rtl"] .hex-icon,
html[dir="rtl"] .icon-circle {
margin-left: auto !important;
margin-right: auto !important;
}
html[dir="rtl"] .testimonial-box .d-flex {
direction: rtl;
}
html[dir="rtl"] .testimonial-box img.rounded-circle {
margin-left: 1rem !important;
margin-right: 0 !important;
}
html[dir="rtl"] .testimonial-box .text-left {
text-align: right !important;
}
/* Results cards icon spacing */
html[dir="rtl"] .result-box .fa-line-chart:before,
html[dir="rtl"] .result-box .fa-clock-four:before,
html[dir="rtl"] .result-box .fa-clock:before {
margin-left: 0 !important;
margin-right: 20px !important;
}
/* ============================================================
10. Learn page
============================================================ */
html[dir="rtl"] .section-alt,
html[dir="rtl"] .kpi-grid,
html[dir="rtl"] .kpi-bar,
html[dir="rtl"] .platform-grid,
html[dir="rtl"] .tips-grid,
html[dir="rtl"] .feature-grid,
html[dir="rtl"] .growth-grid {
direction: rtl;
}
html[dir="rtl"] .kpi-card,
html[dir="rtl"] .platform-card,
html[dir="rtl"] .tip-card,
html[dir="rtl"] .feature-card,
html[dir="rtl"] .growth-card,
html[dir="rtl"] .highlight-box,
html[dir="rtl"] .metric-formula,
html[dir="rtl"] .bad-example,
html[dir="rtl"] .good-example {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .kpi-item {
text-align: center;
}
html[dir="rtl"] .feature-card {
flex-direction: row-reverse;
}
/* Swap left accent borders to right */
html[dir="rtl"] .bad-example {
border-left: 0 !important;
border-right: 4px solid #e74c3c !important;
}
html[dir="rtl"] .good-example {
border-left: 0 !important;
border-right: 4px solid #27ae60 !important;
}
html[dir="rtl"] .highlight-box {
border-left: 0 !important;
border-right: 4px solid #ffc107 !important;
}
html[dir="rtl"] ul.undorderList {
padding-right: 0 !important;
padding-left: 0 !important;
}
html[dir="rtl"] ul.undorderList li {
padding-right: 30px !important;
padding-left: 0 !important;
}
html[dir="rtl"] ul.undorderList li:before {
right: 0 !important;
left: auto !important;
}
/* ============================================================
11. Pricing page
============================================================ */
html[dir="rtl"] .pricing-packages,
html[dir="rtl"] .card-pricing,
html[dir="rtl"] .promo-text,
html[dir="rtl"] .features,
html[dir="rtl"] .features li,
html[dir="rtl"] .package-title,
html[dir="rtl"] .price,
html[dir="rtl"] .discount {
direction: rtl;
}
html[dir="rtl"] .pricing-packages .row {
direction: rtl;
}
html[dir="rtl"] .card-pricing,
html[dir="rtl"] .features li {
text-align: right;
}
html[dir="rtl"] .pricing-heading,
html[dir="rtl"] .offer,
html[dir="rtl"] .tagline,
html[dir="rtl"] .subheading,
html[dir="rtl"] .toggle-switches {
text-align: center !important;
}
html[dir="rtl"] .features {
padding-right: 0 !important;
padding-left: 0 !important;
}
html[dir="rtl"] .features li i {
margin-left: 8px;
margin-right: 0;
}
html[dir="rtl"] .card-pricing.silver .recommended-badge {
right: auto !important;
left: 10px !important;
}
/* ============================================================
12. Campaign page / chat flow
============================================================ */
html[dir="rtl"] .compaign_setup,
html[dir="rtl"] .step-indicators,
html[dir="rtl"] .step-main,
html[dir="rtl"] .accordion-item,
html[dir="rtl"] .accordion-header,
html[dir="rtl"] .accordion-body,
html[dir="rtl"] .chat-box,
html[dir="rtl"] .chat-bubble,
html[dir="rtl"] .option-container,
html[dir="rtl"] .campaign-step-wrapper,
html[dir="rtl"] .campaign-preview,
html[dir="rtl"] .dup2-panel,
html[dir="rtl"] .dup2-section,
html[dir="rtl"] .dup2-bubble,
html[dir="rtl"] .dup2-boost-card,
html[dir="rtl"] .dup2-summary-card,
html[dir="rtl"] .dup-rail,
html[dir="rtl"] .modal-body,
html[dir="rtl"] .modal-header,
html[dir="rtl"] .modal-footer {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .step-box::after {
right: 100%;
left: auto;
}
html[dir="rtl"] .chat-bubble.user {
margin-left: 0 !important;
margin-right: auto !important;
}
html[dir="rtl"] .chat-bubble.bot {
margin-right: 0 !important;
margin-left: auto !important;
}
html[dir="rtl"] .option-btn {
margin-left: .5rem !important;
margin-right: 0 !important;
}
html[dir="rtl"] .dup2-search-shell,
html[dir="rtl"] .dup2-location-bar,
html[dir="rtl"] .dup2-section-actions,
html[dir="rtl"] .dup2-chip-box,
html[dir="rtl"] .dup2-suggestions {
direction: rtl;
text-align: right;
}
html[dir="rtl"] #dupBehaviorResults,
html[dir="rtl"] #dupTikTokLocationResults {
left: 0 !important;
right: 0 !important;
}
html[dir="rtl"] .toast-container.end-0 {
right: auto !important;
left: 0 !important;
}
html[dir="rtl"] .mapboxgl-ctrl-top-left,
html[dir="rtl"] .maplibregl-ctrl-top-left {
left: auto !important;
right: 10px !important;
}
/* ============================================================
13. Footer
============================================================ */
html[dir="rtl"] footer,
html[dir="rtl"] .inr_ftr,
html[dir="rtl"] .footer_logo,
html[dir="rtl"] .Service_footer,
html[dir="rtl"] .copyright_sec,
html[dir="rtl"] .main_copyright,
html[dir="rtl"] .copy-write,
html[dir="rtl"] .term-sec {
direction: rtl;
text-align: right;
}
html[dir="rtl"] footer .row,
html[dir="rtl"] .main_copyright {
direction: rtl;
}
/* html[dir="rtl"] .footer_logo a,
html[dir="rtl"] .footer_logo p {
text-align: right;
} */
html[dir="rtl"] .social-bar {
justify-content: flex-start;
direction: rtl;
}
html[dir="rtl"] .term-sec ul,
html[dir="rtl"] .Service_footer ul {
padding-right: 0 !important;
padding-left: 0 !important;
}
html[dir="rtl"] .term-sec ul {
direction: rtl;
}
/* ============================================================
14. Arrows / icons
============================================================ */
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .ti-arrow-right,
html[dir="rtl"] .ti-chevron-right {
transform: rotate(180deg);
}
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .ti-arrow-left,
html[dir="rtl"] .ti-chevron-left {
transform: rotate(180deg);
}
/* ============================================================
15. Mobile fixes
============================================================ */
@media (max-width: 991.98px) {
html[dir="rtl"] div#navbarNav {
right: auto !important;
left: 0 !important;
text-align: right;
}
html[dir="rtl"] .dropdown-mega {
left: auto !important;
right: -125px !important;
transform: translateX(4%) !important;
}
html[dir="rtl"] .damage-product {
margin-right: 100px;
margin-left: 0;
}
html[dir="rtl"] .get_started ul {
justify-content: flex-start;
}
html[dir="rtl"] .monitor-col {
flex: 0 0 48%;
max-width: 48%;
}
}
@media (max-width: 768px) {
html[dir="rtl"] .inr_bnr_lft,
html[dir="rtl"] .inr_bnr_lft h1,
html[dir="rtl"] .inr_bnr_lft h3,
html[dir="rtl"] .inr_bnr_lft p,
html[dir="rtl"] .less_effort,
html[dir="rtl"] .try_free {
text-align: center !important;
}
html[dir="rtl"] .free_forever ul {
justify-content: center;
}
html[dir="rtl"] .main_compaign {
flex-direction: column;
}
html[dir="rtl"] .solutions-hero .text-right,
html[dir="rtl"] .privacy-hero .text-right {
text-align: center !important;
}
html[dir="rtl"] .solutions-hero .col-md-6:first-child,
html[dir="rtl"] .privacy-hero .col-md-6:first-child {
text-align: center !important;
}
html[dir="rtl"] .integration-heading,
html[dir="rtl"] .integration-title {
text-align: center !important;
}
html[dir="rtl"] .privacy-inner {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
html[dir="rtl"] .main_copyright,
html[dir="rtl"] .copy-write,
html[dir="rtl"] .term-sec,
html[dir="rtl"] .footer_logo,
html[dir="rtl"] .Service_footer {
text-align: center !important;
}
html[dir="rtl"] .social-bar,
html[dir="rtl"] .term-sec ul {
justify-content: center;
}
html[dir="rtl"] .work-box,
html[dir="rtl"] .work-content {
text-align: center !important;
}
html[dir="rtl"] .work-content ul {
text-align: right !important;
display: inline-block;
}
}
@media (max-width: 575.98px) {
html[dir="rtl"] .monitor-col {
flex: 0 0 100%;
max-width: 100%;
}
html[dir="rtl"] .custom-container,
html[dir="rtl"] .cta-section {
padding: 70px 18px !important;
border-radius: 60% 60% 0 0;
}
html[dir="rtl"] .main-text {
font-size: 24px !important;
line-height: 32px;
}
html[dir="rtl"] .pricing-heading {
font-size: 22px;
}
html[dir="rtl"] .dropdown-mega {
right: -125px !important;
}
}
/* ===== Included from pirsumify-header-footer-rtl-fix.css ===== */
/* ============================================================
Pirsumify Header + Footer RTL Fix
Add this at the END of public/assets/universal/css/rtl.css
It fixes Hebrew/Arabic header, footer and Solutions submenu alignment.
============================================================ */
html[dir="rtl"] .main_nav {
direction: rtl;
}
/* Header layout: logo on right, menu beside it, actions/profile on left */
html[dir="rtl"] .main-inr-hdr {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-direction: row-reverse !important;
gap: 24px !important;
width: 100% !important;
}
/* logo + nav block */
html[dir="rtl"] .logo-hdr {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-direction: row-reverse !important;
gap: 55px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
direction: rtl !important;
}
html[dir="rtl"] .main-inr-hdr .logo-hdr .logo {
min-width: 200px !important;
max-width: 200px !important;
margin: 0 !important;
text-align: right !important;
}
html[dir="rtl"] .main-inr-hdr .logo-hdr .logo a,
html[dir="rtl"] .main-inr-hdr .logo-hdr .logo img {
display: block !important;
}
/* Nav should stay clean and not push logo/action out of place */
html[dir="rtl"] .mainheader-wrapper {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex: 1 1 auto !important;
min-width: 0 !important;
direction: rtl !important;
}
html[dir="rtl"] .mainheader-wrapper .navbar {
width: auto !important;
padding: 0 !important;
direction: rtl !important;
}
html[dir="rtl"] #navbarNav {
direction: rtl !important;
}
html[dir="rtl"] .navbar-nav {
display: flex !important;
align-items: center !important;
flex-direction: row !important;
gap: 28px !important;
padding: 0 !important;
margin: 0 !important;
direction: rtl !important;
}
html[dir="rtl"] .navbar-nav .nav-item {
position: relative !important;
padding: 0 !important;
margin: 0 !important;
}
html[dir="rtl"] .navbar-nav .nav-link {
direction: rtl !important;
text-align: center !important;
white-space: nowrap !important;
padding: 10px 0 !important;
}
/* Keep actions/profile button on the left side */
html[dir="rtl"] .get_started {
flex: 0 0 auto !important;
margin-right: 0 !important;
margin-left: 0 !important;
direction: ltr !important;
}
html[dir="rtl"] .get_started > ul {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-direction: row !important;
gap: 18px !important;
padding: 0 !important;
margin: 0 !important;
direction: ltr !important;
}
html[dir="rtl"] .get_started li {
margin: 0 !important;
}
/* Globe selector */
html[dir="rtl"] .language-selector {
direction: rtl !important;
}
html[dir="rtl"] .language-dropdown {
right: auto !important;
left: 0 !important;
text-align: right !important;
}
html[dir="rtl"] .language-dropdown a {
direction: rtl !important;
text-align: right !important;
}
html[dir="rtl"] .language-dropdown .flag {
margin-right: 0 !important;
margin-left: 10px !important;
}
html[dir="rtl"] .language-dropdown .selected-icon {
margin-left: 0 !important;
margin-right: auto !important;
}
/* Desktop Solutions submenu */
html[dir="rtl"] .nav-item:hover .dropdown-mega {
display: block !important;
}
html[dir="rtl"] .dropdown-mega {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
transform: none !important;
width: auto !important;
min-width: 720px !important;
max-width: 760px !important;
padding: 12px 0 !important;
z-index: 9999 !important;
direction: rtl !important;
}
/* html[dir="rtl"] .damage-product {
display: flex !important;
align-items: stretch !important;
justify-content: center !important;
flex-direction: row-reverse !important;
gap: 16px !important;
min-width: 720px !important;
max-width: 760px !important;
width: auto !important;
margin: 0 !important;
padding: 18px !important;
direction: rtl !important;
text-align: center !important;
}
*/
html[dir="rtl"] .product-item {
width: 260px !important;
min-width: 200px !important;
text-align: center !important;
direction: rtl !important;
}
html[dir="rtl"] .product-item h6,
html[dir="rtl"] .product-item p {
text-align: center !important;
}
/* Header dropdown/profile */
html[dir="rtl"] .custom-dropdown-menu,
html[dir="rtl"] .dropdown-menu {
direction: rtl !important;
text-align: right !important;
}
html[dir="rtl"] .dropdown-menu-end {
left: 0 !important;
right: auto !important;
}
/* Footer layout: logo/details right, company center, use case left */
html[dir="rtl"] footer {
direction: rtl !important;
text-align: right !important;
}
html[dir="rtl"] footer .inr_ftr .row {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
direction: rtl !important;
}
html[dir="rtl"] footer .inr_ftr .row > .col-md-6 {
order: 1 !important;
text-align: right !important;
}
html[dir="rtl"] footer .inr_ftr .row > .Service_footer:nth-of-type(2) {
order: 2 !important;
text-align: right !important;
}
html[dir="rtl"] footer .inr_ftr .row > .Service_footer:nth-of-type(3) {
order: 3 !important;
text-align: right !important;
}
html[dir="rtl"] .footer_logo,
html[dir="rtl"] .footer_logo p,
html[dir="rtl"] .social-section,
html[dir="rtl"] .Service_footer,
html[dir="rtl"] .Service_footer h5,
html[dir="rtl"] .Service_footer ul,
html[dir="rtl"] .Service_footer li {
direction: rtl !important;
text-align: right !important;
}
html[dir="rtl"] .footer_logo a,
html[dir="rtl"] .footer_logo img {
display: inline-block !important;
}
html[dir="rtl"] .social-bar {
direction: rtl !important;
justify-content: flex-start !important;
flex-direction: row !important;
}
html[dir="rtl"] .social-section div[style] p {
text-align: right !important;
direction: rtl !important;
}
html[dir="rtl"] .social-section a[style] {
direction: rtl !important;
}
html[dir="rtl"] .Service_footer ul,
html[dir="rtl"] .term-sec ul {
padding: 0 !important;
margin: 0 !important;
}
/* Bottom copyright: copyright right, policy links left */
html[dir="rtl"] .main_copyright {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
direction: rtl !important;
}
html[dir="rtl"] .copy-write {
order: 1 !important;
text-align: right !important;
}
html[dir="rtl"] .term-sec {
order: 2 !important;
text-align: left !important;
}
html[dir="rtl"] .term-sec ul {
display: flex !important;
flex-direction: row-reverse !important;
justify-content: flex-start !important;
gap: 28px !important;
direction: rtl !important;
}
/* Mobile header */
@media (max-width: 991.98px) {
html[dir="rtl"] .main-inr-hdr {
flex-direction: row-reverse !important;
gap: 12px !important;
}
html[dir="rtl"] .logo-hdr {
gap: 12px !important;
flex: 1 1 auto !important;
}
html[dir="rtl"] .main-inr-hdr .logo-hdr .logo {
min-width: 150px !important;
max-width: 150px !important;
}
html[dir="rtl"] .mainheader-wrapper {
justify-content: flex-start !important;
}
html[dir="rtl"] .navbar-toggler {
margin: 0 !important;
}
html[dir="rtl"] div#navbarNav {
position: absolute !important;
top: 46px !important;
right: auto !important;
left: 0 !important;
width: 250px !important;
max-width: 250px !important;
min-width: 180px !important;
background: #ffffff !important;
z-index: 9999 !important;
border: 1px solid #cccccc69 !important;
border-radius: 8px !important;
padding: 10px !important;
}
html[dir="rtl"] .navbar-nav {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
html[dir="rtl"] .navbar-nav .nav-link {
text-align: right !important;
padding: 10px 12px !important;
}
html[dir="rtl"] .dropdown-mega.mobile-visible {
display: block !important;
position: static !important;
min-width: auto !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
transform: none !important;
}
html[dir="rtl"] .damage-product {
min-width: auto !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 10px !important;
flex-direction: column !important;
}
html[dir="rtl"] .product-item {
width: 100% !important;
min-width: 100% !important;
}
html[dir="rtl"] .get_started > ul {
gap: 8px !important;
}
}
/* Mobile footer */
@media (max-width: 767.98px) {
html[dir="rtl"] footer .inr_ftr .row {
flex-direction: column !important;
text-align: center !important;
}
html[dir="rtl"] .footer_logo,
html[dir="rtl"] .footer_logo p,
html[dir="rtl"] .social-section,
html[dir="rtl"] .Service_footer,
html[dir="rtl"] .Service_footer h5,
html[dir="rtl"] .Service_footer ul,
html[dir="rtl"] .Service_footer li {
text-align: center !important;
}
html[dir="rtl"] .social-bar {
justify-content: center !important;
}
html[dir="rtl"] .main_copyright {
flex-direction: column-reverse !important;
gap: 14px !important;
text-align: center !important;
}
html[dir="rtl"] .copy-write,
html[dir="rtl"] .term-sec {
text-align: center !important;
}
html[dir="rtl"] .term-sec ul {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 18px !important;
}
}
/* ============================================================
Final high-priority overrides for Hebrew / Arabic
Keep this block at the bottom
============================================================ */
/* Prevent horizontal page overflow caused by RTL absolute dropdowns */
html[dir="rtl"],
html[dir="rtl"] body {
overflow-x: hidden;
}
/* Header final structure */
html[dir="rtl"] header .main_nav .main-inr-hdr {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-direction: row-reverse !important;
width: 100% !important;
}
html[dir="rtl"] header .logo-hdr {
display: flex !important;
align-items: center !important;
flex-direction: row-reverse !important;
justify-content: flex-start !important;
gap: 50px !important;
flex: 1 1 auto !important;
}
html[dir="rtl"] header .mainheader-wrapper {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex: 1 1 auto !important;
}
html[dir="rtl"] header .navbar-nav {
flex-direction: row !important;
align-items: center !important;
gap: 28px !important;
}
html[dir="rtl"] header .get_started {
flex: 0 0 auto !important;
direction: ltr !important;
}
html[dir="rtl"] header .get_started ul {
flex-direction: row !important;
align-items: center !important;
gap: 18px !important;
direction: ltr !important;
}
/* Header nav text */
html[dir="rtl"] header .navbar-nav .nav-link {
text-align: center !important;
direction: rtl !important;
}
/* Desktop submenu final alignment */
html[dir="rtl"] header .nav-item {
position: relative !important;
}
html[dir="rtl"] header .nav-item:hover .dropdown-mega {
display: block !important;
}
html[dir="rtl"] header .dropdown-mega {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
transform: none !important;
width: auto !important;
min-width: 730px !important;
max-width: 760px !important;
z-index: 99999 !important;
}
html[dir="rtl"] header .damage-product {
display: block !important;
flex-direction: row-reverse !important;
justify-content: center !important;
align-items: stretch !important;
min-width: 720px !important;
max-width: 760px !important;
width: auto !important;
margin: 0 !important;
padding: 18px !important;
}
html[dir="rtl"] header .product-item,
html[dir="rtl"] header .product-item h6,
html[dir="rtl"] header .product-item p {
text-align: center !important;
}
/* Footer final layout */
html[dir="rtl"] footer .inr_ftr .row {
direction: rtl !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
}
html[dir="rtl"] footer .footer_logo,
html[dir="rtl"] footer .footer_logo p,
html[dir="rtl"] footer .social-section,
html[dir="rtl"] footer .Service_footer,
html[dir="rtl"] footer .Service_footer h5,
html[dir="rtl"] footer .Service_footer ul,
html[dir="rtl"] footer .Service_footer li {
text-align: right !important;
direction: rtl !important;
}
html[dir="rtl"] footer .social-bar {
justify-content: flex-start !important;
flex-direction: row !important;
}
html[dir="rtl"] footer .main_copyright {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
direction: rtl !important;
}
html[dir="rtl"] footer .copy-write {
text-align: right !important;
}
html[dir="rtl"] footer .term-sec {
text-align: left !important;
}
html[dir="rtl"] footer .term-sec ul {
display: flex !important;
flex-direction: row-reverse !important;
gap: 28px !important;
justify-content: flex-start !important;
}
/* Inner page hero title alignment */
html[dir="rtl"] .solutions-hero h1,
html[dir="rtl"] .privacy-hero h1 {
text-align: right !important;
}
/* Breadcrumb alignment */
html[dir="rtl"] .breadcrumb {
justify-content: flex-start !important;
}
/* Mobile */
@media (max-width: 991.98px) {
html[dir="rtl"] header .logo-hdr {
gap: 12px !important;
}
html[dir="rtl"] header .navbar-nav {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
html[dir="rtl"] header div#navbarNav {
position: absolute !important;
top: 46px !important;
left: -46px !important;
right: auto !important;
width: 250px !important;
max-width: 250px !important;
z-index: 99999 !important;
background: #fff !important;
border: 1px solid #cccccc69 !important;
border-radius: 8px !important;
padding: 10px !important;
}
html[dir="rtl"] header .navbar-nav .nav-link {
text-align: right !important;
padding: 10px 12px !important;
}
html[dir="rtl"] header .dropdown-mega.mobile-visible {
display: block !important;
position: static !important;
min-width: auto !important;
max-width: 100% !important;
width: 100% !important;
transform: none !important;
padding: 0 !important;
}
html[dir="rtl"] header .damage-product {
min-width: auto !important;
max-width: 100% !important;
width: 100% !important;
flex-direction: column !important;
padding: 10px !important;
}
html[dir="rtl"] header .product-item {
width: 100% !important;
min-width: 100% !important;
}
}
@media (max-width: 767.98px) {
html[dir="rtl"] footer .inr_ftr .row {
flex-direction: column !important;
}
html[dir="rtl"] footer .footer_logo,
html[dir="rtl"] footer .footer_logo p,
html[dir="rtl"] footer .social-section,
html[dir="rtl"] footer .Service_footer,
html[dir="rtl"] footer .Service_footer h5,
html[dir="rtl"] footer .Service_footer ul,
html[dir="rtl"] footer .Service_footer li {
text-align: center !important;
}
html[dir="rtl"] footer .social-bar {
justify-content: center !important;
}
html[dir="rtl"] footer .main_copyright {
flex-direction: column-reverse !important;
gap: 14px !important;
}
html[dir="rtl"] footer .copy-write,
html[dir="rtl"] footer .term-sec {
text-align: center !important;
}
html[dir="rtl"] footer .term-sec ul {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 18px !important;
}
}
html[dir="rtl"] footer .footer_logo,
html[dir="rtl"] footer .footer_logo p,
html[dir="rtl"] footer .social-section,
html[dir="rtl"] footer .social-section p {
direction: rtl !important;
text-align: center !important;
}
html[dir="rtl"] footer .social-bar {
justify-content: center !important;
}
html[dir="rtl"] footer .social-section a[style] {
direction: rtl !important;
text-align: center !important;
}
html[dir="rtl"] #reviewSummary .longsubmtbtn {
left: 9px;
right: auto;
}
html[dir="rtl"] #reviewSummary .longsubmtbtn {
right: auto;
left: 9px;
}
html[dir="rtl"] .selectmultiapi .submitspacebtn {
right: auto;
left: 1px;
top: 1px !important;
}
html[dir="rtl"] .text-muted.edit-btn
{
text-align: left !important;
}
html[dir="rtl"] .maplibregl-ctrl-top-right {
left: 9px;
right: auto;
}
html[dir="rtl"] #dupBehaviorsSaveBtn{
top: 3px;
right: auto;
left: 3px
}
html[dir="rtl"] #dupInterestsSaveBtn{
top: 0px;
right: auto;
left: 3px
}
html[dir="rtl"] .dup2-panel .dup2-search-input{
padding: 10px;
}
html[dir="rtl"] .text-muted{
margin-top: 0px;
}
/* ============================================================
FINAL RTL HEADER ALIGNMENT FIX
Hebrew / Arabic:
- Header starts from the RIGHT
- Logo and header action buttons stay on the RIGHT side
- Menu/language follows in RTL order
This is CSS only.
============================================================ */
html[dir="rtl"] header .main_nav,
html[dir="rtl"] header .main-inr-hdr,
html[dir="rtl"] header .logo-hdr,
html[dir="rtl"] header .mainheader-wrapper,
html[dir="rtl"] header .get_started {
direction: rtl !important;
}
/* Main row */
html[dir="rtl"] header .main-inr-hdr {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-direction: row !important;
gap: 22px !important;
width: 100% !important;
}
/* Buttons/sign-in/profile on the visual right */
html[dir="rtl"] header .get_started {
order: 1 !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Logo + menu block after buttons */
html[dir="rtl"] header .logo-hdr {
order: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-direction: row !important;
gap: 34px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Logo stays on the right inside the group */
html[dir="rtl"] header .logo-hdr .logo {
order: 1 !important;
flex: 0 0 auto !important;
min-width: 190px !important;
max-width: 210px !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
}
html[dir="rtl"] header .logo-hdr .logo a,
html[dir="rtl"] header .logo-hdr .logo img {
display: block !important;
}
/* Language + nav after logo */
html[dir="rtl"] header .mainheader-wrapper {
order: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex: 1 1 auto !important;
min-width: 0 !important;
gap: 18px !important;
}
/* Header buttons list */
html[dir="rtl"] header .get_started > ul {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-direction: row !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
direction: rtl !important;
}
html[dir="rtl"] header .get_started li,
html[dir="rtl"] header .get_started .get_btn,
html[dir="rtl"] header .drop-wrap {
margin: 0 !important;
padding: 0 !important;
}
/* Navbar */
html[dir="rtl"] header .navbar {
width: auto !important;
padding: 0 !important;
margin: 0 !important;
direction: rtl !important;
}
html[dir="rtl"] header #navbarNav {
direction: rtl !important;
}
html[dir="rtl"] header .navbar-nav {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-direction: row !important;
gap: 26px !important;
margin: 0 !important;
padding: 0 !important;
direction: rtl !important;
}
html[dir="rtl"] header .navbar-nav .nav-item {
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
html[dir="rtl"] header .navbar-nav .nav-link {
white-space: nowrap !important;
text-align: center !important;
direction: rtl !important;
padding: 10px 0 !important;
}
/* Language selector */
html[dir="rtl"] header .language-selector {
position: relative !important;
right: auto !important;
left: auto !important;
top: auto !important;
flex: 0 0 auto !important;
direction: rtl !important;
}
html[dir="rtl"] header .language-dropdown {
right: 0 !important;
left: auto !important;
direction: rtl !important;
text-align: right !important;
}
html[dir="rtl"] header .language-dropdown a {
direction: rtl !important;
text-align: right !important;
}
/* Solutions submenu */
html[dir="rtl"] header .dropdown-mega {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
transform: none !important;
min-width: 842px !important;
max-width: 1155px !important;
width: 100% !important;
z-index: 99999 !important;
direction: rtl !important;
}
html[dir="rtl"] header .damage-product {
display: block !important;
align-items: stretch !important;
justify-content: center !important;
flex-direction: row !important;
gap: 16px !important;
min-width: 730px !important;
max-width: 835px !important;
width: auto !important;
margin: 0 !important;
padding: 18px !important;
direction: rtl !important;
}
html[dir="rtl"] header .product-item,
html[dir="rtl"] header .product-item h6,
html[dir="rtl"] header .product-item p {
text-align: center !important;
direction: rtl !important;
}
/* Profile dropdown */
html[dir="rtl"] header .custom-dropdown-menu,
html[dir="rtl"] header .dropdown-menu {
direction: rtl !important;
text-align: right !important;
}
html[dir="rtl"] header .dropdown-menu-end {
right: 0 !important;
left: auto !important;
}
/* Mobile */
@media (max-width: 991.98px) {
html[dir="rtl"] header .main-inr-hdr {
gap: 12px !important;
justify-content: space-between !important;
}
html[dir="rtl"] header .get_started {
order: 1 !important;
}
html[dir="rtl"] header .logo-hdr {
order: 2 !important;
gap: 14px !important;
flex: 1 1 auto !important;
}
html[dir="rtl"] header .logo-hdr .logo {
min-width: 140px !important;
max-width: 160px !important;
}
html[dir="rtl"] header .mainheader-wrapper {
justify-content: flex-start !important;
flex: 0 0 auto !important;
}
html[dir="rtl"] header .navbar-toggler {
margin: 0 !important;
}
html[dir="rtl"] header div#navbarNav {
position: absolute !important;
top: 46px !important;
right: 0 !important;
left: auto !important;
width: 250px !important;
max-width: 250px !important;
background: #fff !important;
z-index: 99999 !important;
border: 1px solid #cccccc69 !important;
border-radius: 8px !important;
padding: 10px !important;
}
html[dir="rtl"] header .navbar-nav {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
html[dir="rtl"] header .navbar-nav .nav-link {
text-align: right !important;
padding: 10px 12px !important;
}
html[dir="rtl"] header .dropdown-mega.mobile-visible {
display: block !important;
position: static !important;
min-width: auto !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
transform: none !important;
}
html[dir="rtl"] header .damage-product {
min-width: auto !important;
max-width: 100% !important;
width: 100% !important;
flex-direction: column !important;
padding: 10px !important;
}
html[dir="rtl"] header .product-item {
width: 100% !important;
min-width: 100% !important;
}
}
/* ============================================================
MOBILE RTL HEADER PATCH ONLY
Hebrew / Arabic mobile header:
- Logo on right
- Globe + hamburger on left
- Sign In / Get Started links stay clean and aligned on right
Add this at the very bottom of rtl.css
============================================================ */
@media (max-width: 991.98px) {
html[dir="rtl"] header .main-inr-hdr {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
flex-direction: row !important;
width: 100% !important;
gap: 10px !important;
}
html[dir="rtl"] header .logo-hdr {
order: 1 !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-direction: row !important;
gap: 10px !important;
}
html[dir="rtl"] header .logo-hdr .logo {
order: 1 !important;
margin: 0 !important;
min-width: 150px !important;
max-width: 170px !important;
text-align: right !important;
}
html[dir="rtl"] header .logo-hdr .logo img {
max-width: 160px !important;
height: auto !important;
}
html[dir="rtl"] header .mainheader-wrapper {
order: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-direction: row-reverse !important;
gap: 8px !important;
width: auto !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
html[dir="rtl"] header .language-selector {
position: relative !important;
right: auto !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
}
html[dir="rtl"] header .language-toggle {
white-space: nowrap !important;
}
html[dir="rtl"] header .navbar {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
html[dir="rtl"] header .navbar-toggler {
margin: 0 !important;
padding: 6px 8px !important;
}
html[dir="rtl"] header .get_started {
order: 2 !important;
width: 100% !important;
margin: 8px 0 0 0 !important;
padding: 0 !important;
direction: rtl !important;
}
html[dir="rtl"] header .get_started > ul {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-direction: row !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
direction: rtl !important;
list-style: none !important;
}
html[dir="rtl"] header .get_started li,
html[dir="rtl"] header .get_started .get_btn {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
max-width: none !important;
white-space: nowrap !important;
}
html[dir="rtl"] header .get_started li a,
html[dir="rtl"] header .get_started .get_btn a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
text-align: center !important;
min-width: auto !important;
width: auto !important;
}
html[dir="rtl"] header .get_started .get_btn a {
padding: 10px 18px !important;
}
html[dir="rtl"] header div#navbarNav {
top: 46px !important;
right: auto !important;
left: 0 !important;
}
}
@media (max-width: 575.98px) {
html[dir="rtl"] header .logo-hdr .logo {
min-width: 135px !important;
max-width: 150px !important;
}
html[dir="rtl"] header .logo-hdr .logo img {
max-width: 145px !important;
}
html[dir="rtl"] header .get_started > ul {
justify-content: center !important;
gap: 10px !important;
}
html[dir="rtl"] header .get_started li a,
html[dir="rtl"] header .get_started .get_btn a {
font-size: 14px !important;
}
}
/* Add this to rtl.css */
html[dir="rtl"] .linkbuttoncss {
right: auto;
left: 0;
}
#leadFormsList > select.form-select {
padding: 0 30px;
}