.menu a.logo img.down {
  max-width: 125px;
  width: 100%;
}

#sticky-header .menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#sticky-header .menu > a.logo {
  float: none;
  padding: 0;
}

#sticky-header .menu > ul {
  margin: 0;
  flex: 1 1 auto;
}

#sticky-header .menu > .donate-btn-header {
  margin: 0;
  flex: 0 0 auto;
}
.slider_text_inner p {
    white-space: pre-line;
}
/* Slider hero CTA — layered-gradient pill with a periodic shimmer sweep and
   a subtle occasional vertical "tap" to draw the eye. Adapted from a common
   commerce-CTA pattern: two pseudo-elements stack as base-gradient + hover
   darken-overlay, the inner span hosts a third pseudo-element that slides
   across the surface every few seconds as a soft light streak.
   The wrapping <span> is supplied by the slider partial so this rule needs
   no markup change beyond that. */
.slider_button.d-flex .button > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* "Liquid" surface — brand blue painted on the anchor itself, with a
     subtle top-down lightness gradient and inset highlight + shadow to
     give the pill a glossy, domed look (light at the top, slight depth at
     the bottom) without changing the perceived colour. Falls back to the
     flat brand blue under the gradient stops so older browsers still
     render the right colour. */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0) 48%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    #0c5adb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 0 10px 16px -6px rgba(255, 255, 255, 0.18),
    inset 0 -8px 14px -8px rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  isolation: isolate;
  animation: sliderCtaTap 9s ease-in-out infinite;
}

/* Neutralize the base theme's `.button a:before` so its width: 0% / skew
   transform don't leak in. We don't need it — the background is on the
   anchor now and hover darkening is handled by `::after`. */
.slider_button.d-flex .button > a::before {
  display: none;
}

/* Hover darken-overlay — translucent black that fades in on hover, so the
   pressed state feels like the same blue surface, just dimmed (no
   chromatic shift). */
.slider_button.d-flex .button > a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 0;
  pointer-events: none;
}

.slider_button.d-flex .button > a:hover::after {
  opacity: 1;
}

/* Text wrapper — sits above the gradient pseudos and hosts the shimmer. */
.slider_button.d-flex .button > a > span {
  position: relative;
  z-index: 1;
  display: inline-block;
}

/* Shimmer streak — narrower / softer than before. Travels right → left
   across the surface on a periodic loop. The zero-width bar means only
   the box-shadow's blur is visible, producing a subtle light streak. */
.slider_button.d-flex .button > a > span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 4rem);
  width: 0;
  height: 2.5rem;
  /* Crystal/glassy tint — cool white, kept thin but with enough opacity to
     read clearly as a refracted light pass without going back to the
     painted-white look. */
  background: rgba(220, 232, 248, 0.22);
  box-shadow: 0 0 14px 4px rgba(220, 232, 248, 0.42);
  transform: translateY(-50%) rotate(28deg);
  pointer-events: none;
  animation: sliderCtaShimmer 5s linear infinite;
}

/* Right → left sweep: holds off-screen-right, slides across, holds
   off-screen-left for the rest of the cycle. */
@keyframes sliderCtaShimmer {
  0%, 35% {
    left: calc(100% + 4rem);
  }
  55%, 100% {
    left: -5rem;
  }
}

/* Vertical tap — quick 6px hop near the end of the cycle, idle the rest
   of the time. Spaced at 9s so it doesn't dominate attention. */
@keyframes sliderCtaTap {
  0%, 86%, 92%, 100% {
    transform: translateY(0);
  }
  88% {
    transform: translateY(-6px);
  }
  90% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slider_button.d-flex .button > a {
    animation: none;
  }
  .slider_button.d-flex .button > a > span::before {
    display: none;
  }
}

/* Consultation form inputs — pin the text color so it stays readable
   regardless of focus state. The base theme only set color on :focus
   (style.css:9330) — on blur the color reverted to whatever the cascade
   provides, which on dark-background sections ends up white-on-white. */
.odoo_contact_section .form_box input,
.odoo_contact_section .form_box textarea,
.odoo_contact_section .form_box select,
.odoo_contact_section .form_box input::placeholder,
.odoo_contact_section .form_box textarea::placeholder {
  color: #495057;
}

.odoo_contact_section .form_box input::placeholder,
.odoo_contact_section .form_box textarea::placeholder {
  color: #6c757d;
}

/* Home consultation: keep the blue odoo_section band's colour but drop the
   deep bottom padding (it was sized for a single overlapping card). It now
   reads as a clean header above the two-column style_three contact layout.
   The extra .consultation-band class outscopes the base .pt-70.pb-100 rule. */
/* Deep bottom padding so the form card can overlap up into the band while the
   band's heading text stays clear above it. */
.odoo_section.consultation-band.pt-70.pb-100 {
  padding: 81px 0 160px;
}

/* The קבעו פגישת ייעוץ heading moved into the blue band, below the section
   title and just above where the form card overlaps. */
.consult-form-heading {
  margin-top: 22px;
}
.consult-form-heading h3 {
  font-size: 26px;
  font-weight: 800;
}
.consult-form-heading p {
  opacity: 0.85;
  font-size: 16px;
}

/* Home consultation form card: compact white card pulled up to overlap the blue
   band. Tighten the theme's heavy 70px padding so it doesn't feel oversized. */
.consultation-form {
  position: relative;
  z-index: 2;
  margin-top: -110px;
}
.consultation-form .appointment_form_inner {
  padding: 45px 45px 40px;
}

/* Home consultation form: single hardcoded intro line at the top of the white
   form card (comment #1 — replaces the former two-line consult-form-heading).
   To be migrated to a managed Umbraco property. */
.consultation-form .quote_intro {
  margin-bottom: 26px;
  text-align: center;
}
.consultation-form .quote_intro p {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #061a40;
}

/* Single-line contact bar (phone | email | location) below the form. */
.consult-contact-bar {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  margin-top: 40px;
  padding: 18px 30px;
}
.consult-contact-bar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 0;
}
.consult-contact-bar li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 35px;
  font-size: 16px;
  color: #333;
}
.consult-contact-bar li:not(:last-child) {
  border-inline-end: 1px solid #e6e6e6;
}
.consult-contact-bar li i {
  color: #0c5adb;
  font-size: 20px;
}
.consult-contact-bar li a {
  color: #333;
  transition: 0.3s;
}
.consult-contact-bar li a:hover {
  color: #0c5adb;
}
.consult-contact-bar .bar-social {
  gap: 12px;
}
.consult-contact-bar .bar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1f4ff;
  color: #0c5adb;
}
.consult-contact-bar .bar-social a:hover {
  background: #0c5adb;
  color: #fff;
}
.consult-contact-bar .bar-social i {
  font-size: 15px;
}
@media (max-width: 575px) {
  .odoo_section.consultation-band.pt-70.pb-100 {
    padding: 70px 0 130px;
  }
  .consultation-form {
    margin-top: -85px;
  }
  .consultation-form .appointment_form_inner {
    padding: 30px 22px 26px;
  }
  .consult-form-heading h3 {
    font-size: 22px;
  }
  .consult-contact-bar ul {
    flex-direction: column;
  }
  .consult-contact-bar li {
    padding: 0;
  }
  .consult-contact-bar li:not(:last-child) {
    border-inline-end: 0;
  }
}

/* style_three contact column: align each address row's circle icon with its
   text (the theme left them as inline elements, which overlapped in RTL). */
.style_three .contact_address_company ul li {
  display: flex;
  align-items: center;
}
.style_three .contact_address_company ul li i {
  flex: 0 0 auto;
}

/* style_three contact column: social icons under the address block. */
.style_three .contact_social_icon ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 10px;
}
.style_three .contact_social_icon ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f1f4ff;
  color: #0c5adb;
  font-size: 16px;
  transition: 0.3s;
}
.style_three .contact_social_icon ul li a:hover {
  background: #0c5adb;
  color: #fff;
}
.style_three .contact_from_box .quote_btn button {
  width: 100%;
}

/* Service dropdown — the theme only styled input/textarea inside the contact
   areas, leaving the select with default browser chrome (wrong height/border).
   Match it to the text inputs and draw a custom arrow. */
.style_three .form_box select,
.main_contact_area .form_box select,
.appointment_form .form_box select,
.contact_sm_area .form_box select,
.quote_wrapper .form_box select {
  width: 100%;
  height: 50px;
  padding: 6px 40px 6px 20px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  color: #495057;
  cursor: pointer;
  transition: 0.5s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.style_three .form_box select:focus,
.main_contact_area .form_box select:focus,
.appointment_form .form_box select:focus,
.contact_sm_area .form_box select:focus,
.quote_wrapper .form_box select:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Contact-us form: validation + status + loading styles.
   Field errors: red inline message + red border on the invalid input.
   Status box: green panel on success, red panel on error.
   Submit button: disabled while in-flight + an inline spinner via pseudo. */
.quote_wrapper input.is-invalid,
.quote_wrapper textarea.is-invalid,
.quote_wrapper select.is-invalid,
.contact_sm_area input.is-invalid,
.contact_sm_area textarea.is-invalid,
.contact_sm_area select.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.18);
}

.quote_wrapper .field-error,
.contact_sm_area .field-error {
  display: block;
  visibility: hidden;
  min-height: 1.1em;
  margin-top: 6px;
  color: #dc3545;
  font-size: 13px;
  line-height: 1.3;
}

.quote_wrapper .field-error.is-visible,
.contact_sm_area .field-error.is-visible {
  visibility: visible;
}

[data-contact-form-status] {
  margin-top: 16px;
  padding: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  transition: opacity 0.2s ease;
}

[data-contact-form-status]:empty {
  display: none;
}

[data-contact-form-status].success {
  padding: 14px 18px;
  background: #e7f7ee;
  color: #15613a;
  border: 1px solid #b9e8cd;
  box-shadow: 0 4px 14px rgba(21, 97, 58, 0.08);
}

[data-contact-form-status].error {
  padding: 14px 18px;
  background: #fdecee;
  color: #842029;
  border: 1px solid #f5c2c7;
  box-shadow: 0 4px 14px rgba(132, 32, 41, 0.08);
}

.quote_wrapper button[type="submit"].is-loading,
.contact_sm_area button[type="submit"].is-loading {
  position: relative;
  color: transparent !important;
  cursor: progress;
  pointer-events: none;
}

.quote_wrapper button[type="submit"].is-loading::after,
.contact_sm_area button[type="submit"].is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: contactFormSpinner 0.7s linear infinite;
}

@keyframes contactFormSpinner {
  to { transform: rotate(360deg); }
}

/* Contact-us form inputs — pin the text colour so retained values stay readable.
   The base theme (style.css) only sets the input/textarea colour on :focus, so on
   blur (e.g. after a failed submit that keeps the field values) the text reverted to
   white-on-white inside the form card. Mirrors the .odoo_contact_section fix and the
   contact `select` rule above. (issue #6 — "fields disappear after send") */
.contact_sm_area .form_box input,
.contact_sm_area .form_box textarea,
.quote_wrapper .form_box input,
.quote_wrapper .form_box textarea {
  color: #495057;
}

/* Status panel — show a check (success) / alert (error) icon before the message.
   The glyph is an inline SVG painted via `mask` so it inherits the panel's text
   colour (green / red). `gap` + flex lay it out; logical alignment keeps the icon on
   the reading-start side in both LTR and RTL. (issue #6 — "add an icon to the message") */
[data-contact-form-status].success,
[data-contact-form-status].error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

[data-contact-form-status].success::before,
[data-contact-form-status].error::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

[data-contact-form-status].success::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

[data-contact-form-status].error::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}

/* ===== Contact page — standalone form card (Task#16) =====
   The contact page lost its info-cards/image column, leaving a bare full-width
   form. When rendered without an image, _ContactForm.cshtml drops the theme's
   full-width `.cnt_box` and instead centers the form in this self-contained
   card (`.contact-form-card`, col-xl-8). The card gives the form a clear frame,
   generous internal padding and a centered heading so the page reads balanced
   and professional in both he (RTL) and en at every breakpoint. */
.contact_sm_area--standalone {
  background: #f6f8fc;
}

.contact_sm_area--standalone .contact-form-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(6, 26, 64, 0.1);
  padding: 50px 50px 45px;
}

/* Centered heading + intro, with breathing room before the fields. */
.contact_sm_area--standalone .contact_sm_title {
  margin-bottom: 12px;
}

.contact_sm_area--standalone .contact_sm_title h2 {
  margin-bottom: 12px;
}

.contact_sm_area--standalone .contact_sm_title p {
  max-width: 560px;
  margin-inline: auto;
  color: #5b6577;
}

/* Tablet / mobile — relax the card padding so fields aren't cramped. */
@media (max-width: 767px) {
  .contact_sm_area--standalone {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .contact_sm_area--standalone .contact-form-card {
    padding: 32px 22px 28px;
    border-radius: 10px;
  }
}

.flaticon-umbraco:before,
.flaticon-umbraco::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-image: url("/content/assets/images/umbraco-icon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-family: inherit;
}

.slider-with-controls {
  position: relative;
}

.slider-autoplay-toggle {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 20;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(12, 90, 219, 0.55);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.18s ease;
}

.slider-autoplay-toggle:hover,
.slider-autoplay-toggle:focus-visible {
  background: rgba(12, 90, 219, 0.85);
  border-color: #fff;
  transform: scale(1.06);
  outline: none;
}

.slider-autoplay-toggle__icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  pointer-events: none;
}

.slider-autoplay-toggle__icon--play {
  display: none;
  margin-inline-start: 2px;
}

.slider-autoplay-toggle.is-paused .slider-autoplay-toggle__icon--pause {
  display: none;
}

.slider-autoplay-toggle.is-paused .slider-autoplay-toggle__icon--play {
  display: inline-block;
}

.slider_area.slider_area--white-bg .slider_text_inner h1,
.slider_area.slider_area--white-bg .slider_text_inner h2,
.slider_area.slider_area--white-bg .slider_text_inner h5 {
  color: #232323;
}

.slider_area.slider_area--white-bg .slider_text_inner p {
    color: rgb(35, 35, 35);
    white-space: pre-line;
}

.slider_area.slider_area--white-bg .slider_text_inner h1 span,
.slider_area.slider_area--white-bg .slider_text_inner h2 span {
  color: #0c5adb;
}

.slider_area.slider_area--align-left .slider_text_inner,
.slider_area.slider_area--align-center .slider_text_inner,
.slider_area.slider_area--align-right .slider_text_inner {
  --slider-indent: 8%;
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.slider_area.slider_area--align-left .container {
  margin-left: 10%;
  margin-right: auto;
  width: 35%;
}

.slider_area.slider_area--align-right .container {
  margin-left: auto;
  margin-right: 10%;
  width: 35%;
}

.slider_area .slider_content {
  text-align: left;
}

.loader-wrapper,
.loader-wrapper * {
  direction: ltr;
}

.loader-wrapper {
  z-index: 10000;
  opacity: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(190, 192, 198, 0.06), rgba(190, 192, 198, 0.025) 42%, rgba(190, 192, 198, 0.01) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.loaded .loader-wrapper {
  opacity: 0;
}

.loader-wrapper .loder-section {
  background: transparent;
}

.loader {
  position: relative;
  top: 50%;
  left: 50%;
  z-index: 201;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(186px, 22vw, 232px);
  height: clamp(200px, 23.6vw, 249px);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  transform: translate(-50%, -50%);
  transition: top 0.4s 0.5s ease, opacity 0.275s ease;
}

.loader-wrapper .loder-section.left-section,
.loader-wrapper .loder-section.right-section {
  transition: 0.5s 0.7s ease;
}

.loader::before,
.loader::after {
  display: none;
}

.elipaz-loader-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 12px 22px rgba(26, 25, 72, 0.22))
    drop-shadow(0 0 14px rgba(103, 145, 239, 0.18));
}

.elipaz-loader-orbit {
  transform-box: view-box;
  transform-origin: 306.5px 310px;
  will-change: transform;
}

.elipaz-loader-orbit-top {
  animation: elipazLoaderOrbitTop 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.elipaz-loader-orbit-bottom {
  animation: elipazLoaderOrbitBottom 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes elipazLoaderOrbitTop {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }

  15% {
    transform: rotate(0deg) translate(0, -140px);
  }

  85% {
    transform: rotate(360deg) translate(0, -140px);
  }

  100% {
    transform: rotate(360deg) translate(0, 0);
  }
}

@keyframes elipazLoaderOrbitBottom {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }

  15% {
    transform: rotate(0deg) translate(0, 140px);
  }

  85% {
    transform: rotate(360deg) translate(0, 140px);
  }

  100% {
    transform: rotate(360deg) translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .elipaz-loader-orbit-top,
  .elipaz-loader-orbit-bottom {
    animation: none;
  }
}

.umbraco-service-slide {
  background-image: url(assets/images/slider/umbraco-service-slide.png);
}

/* Compact consultation card — same form, no consultant photo. Centered
   single-column variant of the original odoo contact section. */
.odoo_contact_section--compact .quote_wrapper--compact {
  padding: 36px 32px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 38px rgba(12, 32, 80, 0.10);
}

.odoo_contact_section--compact .apointment-form-title {
  margin-bottom: 24px;
}

.odoo_contact_section--compact .apointment-form-title h2 {
  margin-bottom: 8px;
}

@media (max-width: 575px) {
  .odoo_contact_section--compact .quote_wrapper--compact {
    padding: 24px 18px;
  }
}

.tech-icons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 10px 0;
}

.tech-icon-card {
  --tech-accent: #0c5adb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 18px 10px 16px;
  background: #fff;
  border: 1px solid #e8ecf3;
  border-radius: 14px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.tech-icon-card:hover {
  transform: translateY(-3px);
  border-color: var(--tech-accent);
  box-shadow: 0 14px 28px rgba(12, 32, 80, 0.10);
}

.tech-icon-card__icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tech-accent) 10%, #fff);
}

.tech-icon-card__icon svg {
  width: 36px;
  height: 36px;
}

.tech-icon-card__label {
  font-weight: 600;
  font-size: 14px;
  color: #232323;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .tech-icons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .tech-icon-card {
    padding: 14px 8px 12px;
  }
  .tech-icon-card__icon {
    width: 48px;
    height: 48px;
  }
  .tech-icon-card__icon svg {
    width: 32px;
    height: 32px;
  }
}

.flipbox_area.top_feature.upper .row.nagative_margin {
  margin-top: -60px;
  z-index: 3;
}

.odoo_contact_section .row.upper {
  margin-top: -140px;
  z-index: 3;
}

.odoo_contact_section {
  position: relative;
  z-index: 2;
}

.whatsapp-contact-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-contact-card .single_contact_address_two_icon .icon {
  background: #25d366;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  animation: whatsappPulse 1.8s infinite;
}

.whatsapp-contact-card .single_contact_address_two_content span {
  color: #25d366;
}

.whatsapp-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.2);
}

@keyframes whatsappPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  }

  70% {
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-chat-button {
  position: fixed;
  left: 24px;
  bottom: 24px;
  /* Must sit above .cookie-bar (z-index: 9990) so the consent banner
     never hides the chat button on first visit. */
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 48px;
  box-shadow: 0 18px 38px rgba(37, 211, 102, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.whatsapp-chat-button:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(37, 211, 102, 0.38);
}

.whatsapp-chat-lottie {
  position: absolute;
  inset: 0;
}

@media (max-width: 767px) {
  .whatsapp-chat-button {
    left: 16px;
    bottom: 16px;
    width: 76px;
    height: 76px;
    font-size: 40px;
  }

  .whatsapp-chat-lottie {
    inset: 0;
  }
}

.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  padding: 18px 0;
  background: rgba(20, 24, 40, 0.96);
  color: #fff;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  transform: translateY(110%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-bar[hidden] {
  display: none;
}

.cookie-bar.is-visible {
  transform: translateY(0);
}

.cookie-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cookie-bar__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #e6e8f1;
}

.cookie-bar__link {
  color: #6791ef;
  text-decoration: underline;
  margin-inline-start: 6px;
}

.cookie-bar__link:hover,
.cookie-bar__link:focus {
  color: #ffffff;
}

.cookie-bar__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cookie-bar__btn--primary {
  background: #0c5adb;
  color: #fff;
}

.cookie-bar__btn--primary:hover,
.cookie-bar__btn--primary:focus {
  background: #084bb8;
}

.cookie-bar__btn--secondary {
  background: transparent;
  color: #e6e8f1;
  border-color: rgba(255, 255, 255, 0.4);
}

.cookie-bar__btn--secondary:hover,
.cookie-bar__btn--secondary:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 575px) {
  .cookie-bar__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cookie-bar__actions {
    justify-content: center;
  }

  .cookie-bar__btn {
    flex: 1 1 auto;
  }
}

.header_top_menu_right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.header_top_menu_right .header_top_menu_icon {
  display: inline-flex;
}

.language-switch {
  --lang-count: 2;
  --lang-active: 0;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.language-switch__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--lang-count));
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transform: translateX(calc(var(--lang-active) * 100%));
  transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

.language-switch__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 1 1 0;
}

.language-switch__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
}

.language-switch__link:hover,
.language-switch__link:focus {
  color: #fff;
  text-decoration: none;
}

.language-switch__option.is-active .language-switch__link {
  color: #0c5adb;
  pointer-events: none;
}

.language-switch__flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  display: block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  flex: 0 0 auto;
}

.language-switch__label {
  line-height: 1;
}

[dir="rtl"] .language-switch__thumb {
  left: auto;
  right: 3px;
  transform: translateX(calc(var(--lang-active) * -100%));
}

.mobile-menu-area {
  position: relative;
}

.mobile-menu-area__logo {
  position: absolute;
  top: 30px;
  left: 14px;
  transform: translateY(-50%);
  z-index: 1000000;
  display: flex;
  align-items: center;
}

[dir="rtl"] .mobile-menu-area__logo {
  left: auto;
  right: 14px;
}

[dir="rtl"] .mean-container a.meanmenu-reveal {
  right: auto;
  left: 0;
  float: left;
}

.mobile-menu-area__logo-link {
  display: inline-flex;
  align-items: center;
}

.mobile-menu-area__logo img {
  display: block;
}

.mean-container .mean-bar::before,
.mean-container .mean-bar::after {
  content: none !important;
  display: none !important;
}

.mobile-menu-area__language {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000000;
}

.mobile-menu-area .language-switch {
  padding: 2px;
}

.mobile-menu-area .language-switch__link {
  padding: 4px 9px;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.mobile-menu-area .language-switch__flag {
  width: 14px;
  height: 9px;
}

/* ===== Services / Service detail / About-simple (Task#3) ===== */

/* Compact breadcrumb hero — the base .breatcome_area is a tall full-bleed
   banner sized for marketing pages. On the simpler Services / Service detail /
   About pages we want a slimmer header, so the partial adds
   .breatcome_area--compact to shrink the height and vertical padding while
   keeping the background and centering from the base rule. */
.breatcome_area.breatcome_area--compact {
  /* The base .breatcome_area sets a fixed height:500px, which min-height alone
     cannot shrink — override it so the compact header is actually ~half height. */
  height: auto;
  min-height: 110px;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Breadcrumb title is now the page's single <h1> (Task#4 — one H1 per page).
   The base theme only styled .breatcome_title_inner h2 (white, 50px, weight
   700); mirror that onto h1 so the swapped heading keeps the exact same look,
   then drop the trailing margin for the compact header. */
.breatcome_title_inner h1 {
  color: #fff;
  font-size: 50px;
  font-weight: 700;
}

.breatcome_area.breatcome_area--compact .breatcome_title_inner h1 {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .breatcome_area.breatcome_area--compact {
    height: auto;
    min-height: 120px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* Section-title heading parity (Task#4 — one H1 per page). The Services grid
   and Services CTA used to render their section titles as <h1>; they are now
   <h2> so the only <h1> on the page is the breadcrumb header. On desktop the
   base theme sizes a bare .section_main_title h1 via Bootstrap's h1 (2.5rem),
   while a bare .section_main_title h2 falls to the theme's 39px rule — a 1px
   difference. Pin the Services/CTA section-title h2 to 2.5rem on desktop so the
   visual size is unchanged. (Responsive breakpoints already size h1/h2 in pairs
   identically, so no mobile change is needed.) */
.service_area .section_main_title h2,
.call_do_action.bg_color2 .section_main_title h2 {
  font-size: 2.5rem;
  font-weight: 800;
}

/* Services grid — industries-style two-column cards. Give each card a full
   height so the two columns stay even, and align the icon to the top of the
   content next to it. */
.service_area .service_style_seven {
  height: 100%;
  display: flex;
  align-items: flex-start;
}

.service_area .service_style_seven_icon {
  flex: 0 0 auto;
}

.service_area .service_style_seven_content {
  flex: 1 1 auto;
}

/* ===== Branded service-card icons (iconImage) — Task#17 =====
   When a service card carries an `iconImage` (an SVG brand logo) the partials
   render an <img.service-card-icon-img> in place of the font <i>. Size each img
   to sit where its glyph did:
   - Services grid icon (.service_style_seven_icon) ~ the 40px font glyph.
   - Home round badge (.services_style_nine_icon .icon) ~ centered in the 100px
     circle, matching the ~50px glyph. */
.service-card-icon-img {
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
}

.service_area .service_style_seven_icon .service-card-icon-img {
  width: 46px;
  height: 46px;
  margin-top: 10px;
}

.services_style_nine_icon .icon .service-card-icon-img {
  width: 54px;
  height: 54px;
  /* The badge centers the font glyph via line-height:100px; an inline-block img
     keeps its own box, so vertically nudge it onto the circle's centre. */
  margin-top: -6px;
}

/* Services call-to-action band — drop the heavy bottom padding the theme
   leaves for the decorative shape image (we render a single text column). */
.call_do_action.bg_color2.pt-20 {
  padding-bottom: 40px;
}

/* Service-DETAIL CTA band — the dual-button row (WhatsApp + Write-to-us). The
   shared `.call_do_action.bg_color2.pt-20` band has 20px top / 40px bottom, so
   the button row sat ABOVE the band's vertical centre. On the detail band only
   (scoped by the `service-detail-cta` modifier added in _Cta.cshtml) pin top +
   bottom to the same value so the row — already `align-items:center` in its
   flex container — reads vertically centred. The Services-page CTA band keeps
   its original 20/40 padding. (Task#14) */
.call_do_action.bg_color2.pt-20.service-detail-cta {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Service detail body — space the rich-text headings/paragraphs. (The optional
   logo's sizing now lives in the issue-#6 service-detail-logo block below.) */

.dividers-sections .dividers-content h3,
.dividers-sections .dividers-content h4 {
  margin-top: 28px;
}

/* Brand / testimonial sections on the Services page — keep a little breathing
   room above the brand carousel when it follows the testimonials block. */
.brand_area.bg_color2 .single_brand_thumb img {
  max-width: 100%;
  height: auto;
}

/* ===== Service detail body alignment + dividers (Task#10) ===== */

/* The base theme's .dividers-content centers all text and draws a 1px
   border-bottom under every paragraph (the marketing "divider" look). On the
   service-detail body we want clean, RTL-natural rich text with no rules
   between paragraphs: aligned to the logical START, so it reads LEFT in
   LTR/English and RIGHT in RTL/Hebrew (Task#4 reversed the earlier force-left).
   The .service-detail-body modifier (added by _Body.cshtml) scopes these
   overrides so other .dividers-content usages keep the original design. */
.dividers-content.service-detail-body {
  text-align: start;
  margin-bottom: 0;
}

.dividers-content.service-detail-body p {
  border-bottom: none;
  padding: 15px 0;
}

/* Clear any base borders the divider layout adds to headings too. */
.dividers-content.service-detail-body h2,
.dividers-content.service-detail-body h3,
.dividers-content.service-detail-body h4 {
  border-bottom: none;
}

/* ===== Service detail dual CTA: WhatsApp + Write-to-us popup (Task#11) ===== */

/* Two-button CTA row. Aligned to the END (logical) so the buttons sit on the
   RIGHT in LTR/English and flip to the LEFT in RTL/Hebrew automatically — no
   hardcoded left/right here. */
.call_do_action_button.service-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  text-align: end;
}

@media (max-width: 575px) {
  .call_do_action_button.service-cta-buttons {
    justify-content: stretch;
  }

  .call_do_action_button.service-cta-buttons .cta-whatsapp-btn,
  .call_do_action_button.service-cta-buttons .cta-write-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Green WhatsApp button. */
.cta-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: 30px;
  background: #25D366;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-whatsapp-btn:hover,
.cta-whatsapp-btn:focus {
  background: #1da851;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.3);
}

.cta-whatsapp-btn i {
  font-size: 20px;
  line-height: 1;
}

/* "Write to us" button — outlined/secondary so the green WhatsApp action reads
   as primary. */
.cta-write-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 30px;
  background: #1a2b4a;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-write-btn:hover,
.cta-write-btn:focus {
  background: #0f1c33;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 28, 51, 0.25);
}

/* ---- Crystal "shine" sweep on the service-detail CTA buttons (Task#5) -------
   A subtle glossy light streak that sweeps across each button on a loop. The
   ::before is a translucent white diagonal gradient parked off the LEFT edge;
   the keyframes translateX it across to the right and off the RIGHT edge, so on
   LTR/English it reads as left → right. RTL flips the start position and
   direction in style-extended-rtl.css. The pseudo carries no positive z-index,
   so the button's flex children (icon + label) paint above it, and
   pointer-events:none keeps it from intercepting clicks. The buttons already
   transition transform/box-shadow; we add position/overflow so the streak is
   clipped to the pill. */
.cta-whatsapp-btn,
.cta-write-btn {
  position: relative;
  overflow: hidden;
}

.cta-whatsapp-btn::before,
.cta-write-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
  animation: ctaCrystalShine 2.5s ease-in-out infinite;
}

/* LTR sweep: start off the left edge, slide across to off the right edge. */
@keyframes ctaCrystalShine {
  0% {
    transform: translateX(-180%) skewX(-18deg);
  }
  100% {
    transform: translateX(280%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-whatsapp-btn::before,
  .cta-write-btn::before {
    animation: none;
  }
}

/* ---- Modal ---------------------------------------------------------------- */
.cta-modal[hidden] {
  display: none;
}

.cta-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cta-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 33, 0.55);
}

.cta-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
  padding: 32px 28px 28px;
}

.cta-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s ease;
}

.cta-modal__close:hover,
.cta-modal__close:focus {
  color: #111827;
}

.cta-modal__header {
  margin-bottom: 18px;
  padding-right: 28px;
}

.cta-modal__header h3 {
  margin: 0 0 4px;
}

.cta-modal__subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 15px;
}

/* Keep the compact modal form fields full-width and tidy. */
.cta-modal__body .form_box {
  width: 100%;
}

.cta-modal__body .form_box input,
.cta-modal__body .form_box textarea {
  width: 100%;
}

.cta-modal__body .quote_btn .btn {
  width: 100%;
}

/* Prevent background scroll while the modal is open. */
body.cta-modal-open {
  overflow: hidden;
}

/* ===== reCAPTCHA (Task#7) ===== */

/* Hide the reCAPTCHA v3 floating badge (matches Auto.Home's approach). The
   required legal attribution lives in the footer notice below, so Google's
   Terms are satisfied without the badge. */
.grecaptcha-badge {
  visibility: hidden;
}

/* Footer reCAPTCHA legal notice — small, subtle attribution line at the very
   bottom of the footer. */
.footer-recaptcha-notice {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.6;
  /* Issue #6: centre the disclaimer across the full footer width. Direction-
     neutral, so it reads correctly in both LTR (English) and RTL (Hebrew). */
  text-align: center;
}

.footer-recaptcha-notice a {
  color: inherit;
  text-decoration: underline;
}

.footer-recaptcha-notice a:hover,
.footer-recaptcha-notice a:focus {
  opacity: 1;
}

/* ===== Footer — quick-link dash markers (round 5) =============================
   The base style.css draws a thin white horizontal bar via
   `.menu-quick-link-container ul li a:before { content:""; … background:#fff; }`.
   Override it to nothing so no dash appears, and collapse the indent that
   existed to clear the dash's `left:-24px` absolute position.
   Scoped to `.footer-middle` so other `.menu-quick-link-container` usages
   (if any) are not affected. */
.footer-middle .menu-quick-link-container ul li a::before {
  content: none;
  display: none;
}

/* The `ml-4` Bootstrap class on `.menu-quick-link-container` in _Footer.cshtml
   added a left margin to indent the list away from the missing dash. Without the
   dash there is no reason for that gap, so pull the container flush. */
.footer-middle .menu-quick-link-container {
  margin-left: 0 !important;
}

/* ===== Footer — logical-start margin on legal / disclaimer line (round 5) ====
   `.footer-bottom-right-text` renders either the legal links or the fallback
   `footerDisclaimer` text. Apply a logical-property margin so it has breathing
   room on the START side: left in LTR, right in RTL — automatically, with no
   separate RTL override needed. */
.footer-bottom-right-text {
  margin-inline-start: 30px;
}

/* ===== Footer "Services and Contact" (recent posts) — direction-aware split bar ==
   The first item carries the divider ("split bar", `.recent-post-item.active`
   border-bottom). The thumbnail uses Bootstrap `mr-3` (a physical right margin) which
   does NOT flip in RTL, so the item — and the divider that follows its content — sat
   on the wrong side on the Hebrew (RTL) site. Replace the physical margin with a
   logical one so the thumbnail (and the divider) sit on the reading-start side:
   left→right in LTR, right→left in RTL. (issue #6 — "split bar should move right on
   LTR and left on RTL") */
.footer-middle .recent-post-item .recent-post-image.mr-3 {
  margin-right: 0 !important;
  margin-inline-end: 1rem;
}

/* ===== Issue #6 — header menu ==================================================
   (1) Bold the active (current-section) top-level menu item — see the active
       detection in _MainNavigation.cshtml.
   (5) English (LTR) main menu aligns to the LEFT, next to the logo; Hebrew keeps
       the base right-alignment (the RTL sheet leaves .menu > ul as-is). */
#sticky-header .menu > ul > li > a.active,
.mean-nav ul > li > a.active,
.mobile-menu .techno_menu > ul > li > a.active {
  font-weight: 800;
}

html[dir="ltr"] #sticky-header .menu > ul {
  text-align: left;
}

/* ===== Issue #6 — About page body ============================================
   The About page reuses the dividers layout, which centers text and draws a
   border-bottom under every paragraph (the marketing "divider" rules). Per
   issue #6: remove those bottom lines and align the text to the logical start —
   RIGHT in Hebrew (RTL) and LEFT in English (LTR) — mirroring the service-detail
   body. The .about-body modifier (added by _Simple.cshtml) scopes it so other
   .dividers-content usages keep the original design. */
.dividers-content.about-body {
  text-align: start;
  margin-bottom: 0;
}
.dividers-content.about-body p {
  border-bottom: none;
  padding: 15px 0;
}
.dividers-content.about-body h2,
.dividers-content.about-body h3,
.dividers-content.about-body h4 {
  border-bottom: none;
}

/* ===== Issue #6 — service-detail logo ========================================
   On wide screens the optional service logo is pinned (position:absolute) to the
   top inline-END corner — LEFT in Hebrew (RTL), RIGHT in English (LTR) — and taken
   out of the flow so it never reserves space, pads or pushes the title/body text,
   which run full-width underneath it. On mobile it sits in normal flow above the
   title (no overlap on narrow screens). */
.service-detail-body {
  position: relative;
}
.service-detail-body .service-detail-header {
  margin-bottom: 1.5rem;
}
.service-detail-body .service-detail-header h2 {
  margin: 0;
}
.service-detail-body .service_detail_logo {
  margin: 0 0 16px;
}
.service-detail-body .service_detail_logo img {
  /* Explicit height (not height:auto) so viewBox-only SVG logos — which have no
     intrinsic size — render at a real size instead of collapsing to 0x0. */
  height: 56px;
  width: auto;
  max-width: 220px;
}
@media (min-width: 992px) {
  .service-detail-body .service_detail_logo {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 160px;
    height: 56px;
    margin: 0;
    /* Purely decorative + out of flow: never intercept clicks on the text it
       overlays. */
    pointer-events: none;
  }
  /* A definite box + object-fit avoids the 0x0 collapse that viewBox-only SVGs
     hit in a shrink-to-fit absolute box, and keeps any logo ratio undistorted.
     object-position hugs the logo to the OUTER edge (right in LTR; flipped to
     left for RTL in style-extended-rtl.css). */
  .service-detail-body .service_detail_logo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: right center;
  }
}