@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');

html[dir="rtl"] body {
    text-align: right;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
}

html[dir="rtl"] .navbar-nav {
    /* margin-right: auto; */
    margin-left: 0 !important;
}

html[dir="rtl"] .navbar.navbar-pill .nav-link {
    margin: 0 0.35rem;
}

html[dir="rtl"] .blog .blog-main {
    padding-left: 1.5rem;
    padding-right: 0;
}

html[dir="rtl"] .blog .blog-post,
html[dir="rtl"] .legal-section,
html[dir="rtl"] .contact-section {
    direction: rtl;
}

html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] span,
html[dir="rtl"] a,
html[dir="rtl"] label,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
}

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"] b,
html[dir="rtl"] strong,
html[dir="rtl"] .btn,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .btn-download-nav {
    font-family: 'Rubik', sans-serif;
    font-weight: 500 !important;
}

html[dir="rtl"] #promotion .download-note,
html[dir="rtl"] #promotion .download-lead {
    text-align: right;
}

html[dir="rtl"] .flying-owl-container {
    margin-left: 2rem;
}

html[dir="rtl"] .balloon-container {
    left: 10px;
    right: initial;
}

html[dir="rtl"] .content-with-balloon {
    padding-right: 2rem;
    padding-left: initial; 
}

html[dir="rtl"] .nav-lang-item {
    margin-left: 50px;
    margin-right: initial;
}

.btn-download-nav {
    margin-right: 30px;
    margin-left: initial;
}

html[dir="rtl"] .legal-section h2, 
html[dir="rtl"] .legal-section h3,
html[dir="rtl"] .legal-section ul {
    text-align: right;
}

html[dir="rtl"] .legal-section ul {
    margin: 0 1.5rem 2rem 0;
    padding: 0;
}

html[dir="rtl"] .legal-section li {
    padding-right: 0.35rem;
}

html[dir="rtl"] .legal-section li::before {
    right: -15px;
    left: auto;
}

/* Keep slider mechanics LTR so translateX math in JS stays correct */
html[dir="rtl"] .testimonials-slider,
html[dir="rtl"] .testimonials-track,
html[dir="rtl"] .blog-snapshots-slider,
html[dir="rtl"] .blog-snapshots-track {
    direction: ltr;
}

/* But keep the visible card content in Hebrew flow */
html[dir="rtl"] .testimonial-slide,
html[dir="rtl"] .blog-snapshot-slide,
html[dir="rtl"] .blog-snapshot-body {
    direction: rtl;
}

/* Flip arrow glyphs in RTL */
html[dir="rtl"] .testimonial-nav.prev::before,
html[dir="rtl"] .blog-snapshot-nav.prev::before {
    content: "›";
}

html[dir="rtl"] .testimonial-nav.next::before,
html[dir="rtl"] .blog-snapshot-nav.next::before {
    content: "‹";
}

.nav-lang-item .lang-toggle-link {
    font-weight: 500 !important;
    letter-spacing: 0.02em;
}

html[dir="rtl"] .lang-dropdown-menu {
    text-align: right;
}

html[dir="rtl"] .navbar.navbar-pill .container {
    direction: ltr;
}
html[dir="rtl"] .navbar-expand-lg .navbar-collapse {
    direction: rtl;
}