/* Fonts are no longer @import-ed here. Heebo is loaded once from _Head.cshtml as
   a <link>, which the browser can fetch in parallel with this stylesheet — an
   @import is discovered only after this file has downloaded and parsed, so it
   serialised the request and delayed first paint. --font-base is declared there
   too; the fallback in each rule below keeps this file usable on its own. */

html {
  font-size: 14px;
}



h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-base, 'Heebo', system-ui, sans-serif);
    font-weight: 500;
    margin-top: 0px;
}

.h1, h1 {
    font-size: 1.2rem;
}


.h2, h2 {
    font-size: 1.1rem;
}

.h3, h3{
    font-size: 1.05rem;
}

h5 {
    font-size: 0.9rem;
}

body {
    font-family: var(--font-base, 'Heebo', system-ui, sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #040404;
}

.row {
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
}

ul, ol {
    margin: 0px;
    padding: 0px;
}

ul {
    list-style-type: none;
}

a {
    color: #444;
    text-decoration: none;
}

    a:hover {
        color: #000;
    }

button, a, .icon {
    transition: background-color 0.3s ease-in-out;
}

img {
    max-width: 100%;
}

input, select, textarea, .form-control {
    font-size: 14px;
}


.zap {
    max-width: 60px;
    height: auto;
    margin-top: 6px;
}

.azrieli {
    max-width: 110px;
    height: auto;
    margin-top: 7px;
}

.priority {
    max-width: 100px;
    height: auto;
    margin-top: 10px;
}

.sap {
    max-width: 70px;
    height: auto;
    margin-top: 10px;
}

.nagish {
    max-width: 30px;
    height: auto;
    margin-top: 5px;
}

.contact {
    color: #fff;
    width: 30px;
    height: auto;
}

.phone {
    color: #fff;
    width: 30px;
    height: auto;
    font-size: 20px;
}

.icons {
    display: inline-flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;
    text-align: center;
}


.widecommerce_button {
    position: fixed;
    z-index: 999999;
    font-size: 22px;
    top: 80VH !important;
    left: 10px;
    background: none !important;
    border: 0 !important
}

.btn-get-started {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    transition: .5s;
    margin: 10px;
    color: #fff;
    background: #f86d22;
}


@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ── Hero slider (.cd-hero) — shared size/fit fix (applies to ALL themes) ──
   The bundled hero library (herob2c.css) hard-codes 2.3rem headings / 2.2rem
   body text, sized for short white-over-image captions. With the site's long
   Hebrew marketing copy that overflows the hero box and collides with the tab
   bar + video. Re-scale to a responsive, self-contained fit here so every
   template inherits it. Colour + font remain per-theme in each theme.css. */
.cd-hero__content h2 {
  font-size: clamp(1.6rem, 2.4vw, 2rem) !important;
  line-height: 1.18 !important;
}
.cd-hero__content p {
  font-size: clamp(1rem, 1.45vw, 1.15rem) !important;
  line-height: 1.5 !important;
}

/* ── Homepage content support (theme-agnostic; loaded by EVERY template) ───
   Layout/behaviour classes the CMS homepage HTML relies on — video lightbox,
   customer-logos row, spacing utilities, hero slide-nav tweaks. Authored once
   in Lumen; centralised here so Default, Modern and Aurora render the homepage
   correctly too, with no per-theme drift. Colours here are content-fixed: the
   features band is always .bg-white, so its text stays dark in every theme. */

/* spacing / float utilities */
.float-left  { float: left; }
.float-right { float: right; }
.mar-right20 { margin-right: 5px; }
.mar-top20   { margin-top: 20px; }
.mar-top10   { margin-top: 10px; }
.mar-bot10   { margin-bottom: 10px; }
.clear       { clear: both; }

/* Features band is always white → force dark, legible text in every theme */
.section.bg-white { color: #0f172a; }
.section .text-bold, .section.bg-white .text-bold { color: #0c294e; font-weight: 600; text-align: justify; }
.section.bg-white p, .section.bg-white li { color: #334155; }

/* Hero slide-nav tabs */
.cd-hero__nav .cd-selected a:hover { background-color: transparent; }
.cd-hero__nav .cd-selected a { color: #ff5500; }
@media only screen and (min-width: 768px) {
  .cd-hero__nav a { padding-top: 30px; font-size: 1rem; }
}
@media only screen and (max-width: 768px) {
  .cd-hero__nav a { display: block; position: relative; padding-top: 35px; font-size: .7rem; font-weight: 300; color: #cdcdcd; transition: background-color .2s; }
}

/* Video-lightbox launcher buttons (absolute /assets path works from any theme) */
.play-bt  { position: absolute; width: 40px; height: 40px; background: url('/assets/play-32.png')  no-repeat 5px; top: 210px; left: -210px; z-index: 99; cursor: pointer; }
.pause-bt { position: absolute; width: 40px; height: 40px; background: url('/assets/pause-36.png') no-repeat 5px; bottom: 55px; left: 75px; z-index: 99; cursor: pointer; }
.mute-bt  { position: absolute; width: 40px; height: 40px; background: url('/assets/audio-32.png') no-repeat 5px; bottom: 55px; left: 25px; z-index: 99; cursor: pointer; }
.mute-bt.stop { background: url('/assets/mute-32.png') no-repeat 5px; }
@media only screen and (max-width: 600px) { .play-bt { top: 200px; left: 44%; z-index: 999999; } }

/* Video-lightbox modal */
#fade  { display: none; position: fixed; inset: 0; width: 100%; height: 100%; background: #000; z-index: 1001; opacity: .8; }
#light { display: none; position: absolute; top: 35%; left: 50%; width: 100%; max-width: 600px; max-height: 360px; margin-left: -300px; margin-top: -180px; border: 2px solid #fff; background: #cdcdcd; z-index: 1002; overflow: visible; }
#boxclose { position: absolute; right: 5px; top: 5px; cursor: pointer; color: #fff; border: 1px solid #AEAEAE; border-radius: 10px; background: #222; font-size: 31px; font-weight: bold; line-height: 0; padding: 13px 5px; z-index: 1000000; opacity: .9; }
.boxclose:before { content: "\00d7"; }
#fade:hover ~ #boxclose { display: none; }

/* Customer-logos row (marquee keyframes intentionally omitted — static row) */
.container .slider { white-space: nowrap; }
.container .slider .logos { width: 96%; display: inline-block; margin: 0; }
.container .slider .logos img { width: calc(100% / 9); }
@media (max-width: 767px) {
  .container .slider .logos { width: 100%; }
  .container .slider .logos img { width: calc(100% / 4); }
}

/* ── Top Navigation (wsmenu) accessibility: keyboard-focus parity ───────────
   Every bundled TopMenu layout reveals its .sub-menu / .wsmegamenu ONLY via
   CSS :hover (opacity/visibility/transform) — there is no keyboard equivalent
   in any of the 13 vendor stylesheets, so Tab-only users cannot open (or even
   reach) a single dropdown/mega item today: WCAG 2.1.1 Keyboard failure.
   These rules force the same visible state whenever focus is inside the item
   (:focus-within bubbles like hover, so it also auto-closes when focus moves
   on — no JS required for the show/hide itself). !important guarantees this
   wins regardless of which layout's own CSS is loaded. */
.wsmenu .wsmenu-list > li:focus-within > ul.sub-menu,
.wsmenu .wsmenu-list > li:focus-within > .wsmegamenu,
.wsmenu .wsmenu-list > li > ul.sub-menu > li:focus-within > ul.sub-menu,
.wsmenu .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li:focus-within > ul.sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
/* ── RTL form controls ───────────────────────────────────────────────────────
   Only the LTR bootstrap.min.css is loaded (there is no bootstrap.rtl.css in the
   bundle), so .form-check keeps its physical `padding-left` and left-floated
   input. Inside an RTL form that leaves the radio/checkbox pinned to the far left
   while its label sits right-aligned at the opposite edge — they read as unrelated.
   Mirroring the two physical properties puts the control back beside its label.
   Scoped to [dir="rtl"] so LTR pages are untouched. */
[dir="rtl"] .form-check {
  padding-left: 0;
  padding-right: 1.5em;
}
[dir="rtl"] .form-check .form-check-input {
  float: right;
  margin-left: 0;
  margin-right: -1.5em;
}

/* ── Discovery wizard ────────────────────────────────────────────────────────
   Steps are laid out by the shared form renderer; these only cover the chrome. */
.wc-wizard fieldset.wc-step { border: 0; padding: 0; margin: 0; }
.wc-wizard .wc-wizard-bar { transition: width .25s ease; }
.wc-wizard .wc-field.was-validated .form-check-input:invalid,
.wc-wizard .wc-field.was-validated .form-control:invalid { border-color: var(--bs-danger, #dc3545); }