/* Hebrew + RTL layer on top of the Unifex template. Layout, colours and spacing come from main.css. */

:root {
  /* Phudu (condensed display) -> Karantina, Instrument Sans -> Heebo */
  --heading-font: "Karantina", "Phudu", sans-serif;
  --body-font: "Heebo", "Instrument Sans", sans-serif;
}

body {
  font-family: var(--body-font);
}

/* Hebrew never gets negative letter-spacing */
h1, h2, h3, h4, h5, h6,
.font-heading {
  letter-spacing: 0;
}

/* the signature logo is an SVG with no intrinsic size */
.header-three-logo img,
.twoffcanvas__logo img {
  height: 46px;
  width: auto;
  max-width: 200px;
}

/* tag pills: the dot sits at the start (right) in RTL, so the wide padding moves with it */
.portfolio-list ul li a,
.portfolio-two-list ul li a {
  padding: 6px 40px 6px 20px;
  padding-block: 6px;
  padding-inline: 40px 20px;
}

/* the template's service images are capsule-shaped PNGs; ours are screenshots, so shape them the same */
.service-three-thumb img {
  border-radius: 999px;
  width: 100%;
  max-width: 552px;
  aspect-ratio: 552 / 257;
  object-fit: cover;
}

/* marquees keep the template's left-to-right motion; Hebrew words still read right to left inside */
.marquee_left,
.marquee_right,
.brand-three-area .marquee,
.brand-three-area [class*="marquee"] {
  direction: ltr;
}

/* the giant words stay on one line like the template's English words; israel.js sizes them to width */
.banner-three-title,
.footer-three-bottom-title {
  white-space: nowrap;
}

/* phone fields default to LTR in browsers; keep the placeholder on the right like the other fields */
input[type="tel"] {
  text-align: right;
}

/* ScrollSmoother used to clip the page sideways; with Lenis the page clips itself.
   (the hero's decorative line image is wider than the screen on purpose) */
html,
body,
#smooth-wrapper,
#smooth-content {
  overflow-x: clip;
}

/* brand accent: everything that was the template's lime is now the same orange as the buttons' dot */
:root {
  --main-h: 19;
  --main-s: 100%;
  --main-l: 50%;
}
/* on an orange button the orange hover dot would vanish, so it fills black there */
.bg-main-600 > .tw-hover-btn-circle-dot {
  background-color: hsl(var(--black)) !important;
}

/* the about circle button shows an icon instead of a number, so it is scaled down to let "קביעת שיחה" lead */
.about-three-counter .tw-btn-circle-icon i {
  font-size: 0.55em;
  display: block;
  margin-bottom: 0.15em;
}