/*
 * kkbc-rtl-fixes-1.css - two more right-to-left fixes (W3, 2026-10-14), for the Hebrew site only. Loaded after kkbc-rtl-1.css
 * (inc/kkbc-rtl.php, only when is_rtl() is true). kkbc-rtl-1.css is not changed. Every selector starts with [dir="rtl"].
 * A later change of this file gets a new file name (kkbc-rtl-fixes-2.css): the CDN keeps a file under its old name.
 *
 * 1. /industry/ slider (#IndustrySlider, owl carousel). template/industry.php does not start owl with rtl:true, so owl lays the
 *    slides out and moves them with left-to-right numbers. In a right-to-left page the browser puts the stage against the RIGHT
 *    edge of .owl-stage-outer, so the left-to-right numbers move it out of sight: on he.kkbc.co.il (1440 wide) the active
 *    slides were at x -6916 and -6422 while the box is at x 20 to 988. The box is empty, and the two arrows (previous on the
 *    right, with ">", next on the left, with "<", from kkbc-rtl-1.css) point to slides that are not there.
 *    Fix: .owl-stage-outer runs left to right as the script expects, and the text of each slide stays right to left.
 *    The buttons are not touched: with the slides moving the owl way, "next" (left, "<") moves the slides to the left and
 *    "previous" (right, ">") moves them to the right, so each arrow points the way the slides move.
 *    Up to 768 px the nav is position: relative with left: 0 and right: 0 (responsive.css:791, :1412). kkbc-rtl-1.css:163 sets
 *    right: -38% (more specific), so the nav moved sideways and the "previous" button was outside the screen (x 403 on a
 *    390 px screen). The two rules at the end of part 1 put left: 0 and right: 0 back.
 * 2. Home page, "our expertise" list (.expertise_area): kkbc-rtl-1.css puts the list on the right, but the picture (a boat, the
 *    subject on the right of the image, the list on the dark left of it in the left-to-right design) still has its subject
 *    on the right, so the list lies over it. Fix: a ::before layer with the same picture, turned over (scaleX(-1)), under the
 *    content (z-index -1, inside the stacking context of .expertise_area: style.css:896 position relative, z-index 1).
 *    The layer has the left-to-right background position, because the turn mirrors it (kkbc-rtl-1.css:484 sets 70% for the
 *    551 to 768 px range; 30% here shows the same part, mirrored). Up to 550 px the section has a plain blue background
 *    (responsive.css:1249, !important), so background-image: inherit gives none there and the layer is empty.
 */

/* ---- 1. /industry/ slider ---- */
[dir="rtl"] .industry_area .industry_right .owl-carousel .owl-stage-outer { direction: ltr; }
[dir="rtl"] .industry_area .industry_right .owl-carousel .owl-item { direction: rtl; }

@media screen and (max-width: 768px) and (min-width: 551px) {
  [dir="rtl"] .industry_area .industry_right .owl-carousel .owl-nav { left: 0; right: 0; } /* responsive.css:791 */
}
@media only screen and (max-width: 550px) {
  [dir="rtl"] .industry_area .industry_right .owl-carousel .owl-nav { left: 0; right: 0; } /* responsive.css:1412 */
}

/* ---- 2. home page, expertise list over its picture ---- */
[dir="rtl"] .expertise_area::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background-image: inherit;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% 0%;
  transform: scaleX(-1);
  pointer-events: none;
}
@media screen and (max-width: 768px) and (min-width: 551px) {
  [dir="rtl"] .expertise_area::before { background-position: 30% 100%; } /* responsive.css:736 */
}