/* ============================================================================ Language toggle button (EN / עב) ========================================================================== */ .lang-toggle { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: 18px; margin-inline-start: 6px; } .lang-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #16a34a; background: transparent; color: #16a34a; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; padding: 0; } .lang-btn:hover { transform: translateY(-1px); } .lang-btn.active { background: #16a34a; color: #fff; } /* On small screens, tuck the toggle in a touch smaller */ @media (max-width: 480px) { .lang-btn { width: 34px; height: 34px; font-size: 12px; } } /* --------------------------------------------------------------------------- Mobile header (<=991px): the toggle now lives directly inside .navbar as a sibling of the logo and the hamburger button (see Header.tsx), so it isn't hidden along with .header-btn on small screens. Without this, space-between on .navbar would float it in the middle of the header, away from the hamburger. Pull it flush against the hamburger instead — on the side the hamburger actually sits on for the current text direction. ------------------------------------------------------------------------- */ @media only screen and (max-width: 991px) { html[dir='ltr'] .navbar > .lang-toggle, html:not([dir='rtl']) .navbar > .lang-toggle { margin-left: auto; margin-right: 16px; } html[dir='rtl'] .navbar > .lang-toggle { margin-right: auto; margin-left: 16px; } /* Give the hamburger button breathing room from the screen edge too, so the toggle + hamburger don't read as one cramped cluster pinned to the corner. */ .navbar-toggle { margin-inline-start: 4px; } } /* ============================================================================ Right-to-left (Hebrew) overrides — only active when The native dir="rtl" attribute already flips inline direction and default text alignment; the rules below fix the bootstrap-based layout bits that don't flip on their own. ========================================================================== */ html[dir='rtl'] body { direction: rtl; text-align: right; /* Heebo carries Hebrew glyphs; falls back to the site font for Latin text */ font-family: 'Heebo', 'Hanken Grotesk', sans-serif; } html[dir='rtl'] .navbar-nav, html[dir='rtl'] ul { padding-right: 0; } /* --------------------------------------------------------------------------- Swiper sliders (hero video slider, testimonials, brand + client logos) are initialised in LTR at page load. If the RTL flip reaches the flex track the active slide is pushed off-screen (the hero video "disappears"). Keep the track itself LTR so Swiper's transforms stay correct, while letting the slide CONTENT flow right-to-left. ------------------------------------------------------------------------- */ html[dir='rtl'] .swiper, html[dir='rtl'] .swiper-wrapper { direction: ltr; } html[dir='rtl'] .swiper-slide { direction: rtl; } /* Hero heading/content stays right-aligned even though the track is LTR */ html[dir='rtl'] .hero-content, html[dir='rtl'] .hero-content .section-title, html[dir='rtl'] .hero-content h1, html[dir='rtl'] .hero-content h3, html[dir='rtl'] .hero-content p { text-align: right; } /* Logo/menu order: .navbar inherits direction:rtl from , which on its own already flips the flex main-axis so the logo (first DOM child) lands on the right and the nav/menu flows to its left — the natural RTL convention. No flex-direction override needed here; adding row-reverse on top of the inherited rtl direction would cancel it back out and strand the logo on the left again. */ /* The gap between the logo and the first nav link comes from a physical margin-left on .nav-menu-wrapper (it sits immediately right of the logo in English). Now that the logo sits on the right in RTL, the wrapper sits immediately LEFT of it, so the gap must move to margin-right instead. */ html[dir='rtl'] .main-menu .nav-menu-wrapper { margin-left: 0; margin-right: 40px; } /* "Why Choose Us" items: dir:rtl already flips the flex main-axis so the icon lands on the right and the content on its left (no row-reverse needed — see navbar note above). But the physical margin-right on .icon-box that creates the gap in LTR then sits on the OUTER edge instead of between the icon and the text, leaving them far apart. Mirror it to margin-left. */ html[dir='rtl'] .why-choose-item .icon-box { margin-right: 0; margin-left: 20px; } /* Contact info items (phone / email cards): same icon-box + margin-right pattern as .why-choose-item above — mirror for the same reason. */ html[dir='rtl'] .contact-info-item .icon-box { margin-right: 0; margin-left: 20px; } /* Footer + content columns: right-align text, flip icon spacing */ html[dir='rtl'] .footer-contact-item { flex-direction: row-reverse; text-align: right; } html[dir='rtl'] .footer-social-links ul, html[dir='rtl'] .footer-links ul { padding-right: 0; } /* Social icon gaps: the physical margin-right on each

creates the gap in LTR because the next icon sits to its right. In RTL the icons flow the other way (next icon sits to the LEFT), so that same margin-right lands on the outer edge instead of between icons, leaving them touching. Mirror it. */ html[dir='rtl'] .footer-social-links ul li { margin-right: 0; margin-left: 10px; } html[dir='rtl'] .footer-social-links ul li:last-child { margin-left: 0; } /* Generic content alignment for headings/paragraphs/lists */ 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'] p, html[dir='rtl'] li, html[dir='rtl'] .section-title, html[dir='rtl'] .about-content, html[dir='rtl'] .service-content { text-align: right; } /* Round stat badges ("10+ Years of experience", "100% Positive feedback"): their own CSS already centers the number/text inside the circle with text-align:center (and flex centering). The generic h1–h6/p right-align rule above has equal selector specificity and loads later, so it was winning and pushing the number off-center. Restore centering here. */ html[dir='rtl'] .experience-counter h3, html[dir='rtl'] .experience-counter p, html[dir='rtl'] .feedback-counter p { text-align: center; } /* Form fields read right-to-left */ html[dir='rtl'] input, html[dir='rtl'] textarea, html[dir='rtl'] select { text-align: right; direction: rtl; } /* Keep intentionally-LTR data (phones, emails, URLs) readable. Excludes .whatsapp-button: that link's OWN stylesheet (inline