/* ============================================================
   Mudale LP — Polish Layer v5
   Mobile typography + spacing fixes, restore Trustindex header,
   testimonial section heading visibility, hero centering.
   Loads AFTER polish-v1, v2, v3-mobile, v4-fixes.
   ============================================================ */

/* ---------------------------------------------------------- */
/* 1. UNDO over-aggressive Trustindex hiding from v4          */
/* v4 hid anything matching [class*="branding"] which killed  */
/* the Trustindex header (Google logo + rating + stars).      */
/* Keep ONLY footer/powered/watermark hidden.                 */
/* ---------------------------------------------------------- */
.ti-widget .ti-header,
.ti-widget [class*="-header"]:not([class*="footer"]),
.ti-widget .ti-rating,
.ti-widget .ti-rating-text,
.ti-widget .ti-stars,
.ti-widget .ti-rating-box,
.ti-widget .ti-name,
.ti-widget .ti-logo,
.ti-widget .ti-widget-container > div:first-child,
.ti-header img,
.ti-rating-text {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
}

/* Hard re-hide ONLY the watermark + powered footer */
.ti-widget .ti-footer,
.ti-widget [class*="ti-footer"],
.ti-widget .ti-watermark,
.ti-widget [class*="ti-powered"],
.ti-widget a[href*="trustindex"] {
  display: none !important;
}

/* ---------------------------------------------------------- */
/* 2. Inject a visible heading above the Trustindex widget    */
/* The .mudale-reviews-heading element is created by JS.      */
/* ---------------------------------------------------------- */
.mudale-reviews-heading {
  text-align: center;
  font-family: var(--mudale-font, "Noto Sans Hebrew", sans-serif);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  color: #0f172a;
  margin: 0 auto 18px;
  padding: 14px 16px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mudale-reviews-heading__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-bottom: 12px;
}

.mudale-reviews-heading__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background: #6ec1e4;
  border-radius: 2px;
}

.mudale-reviews-heading__google {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.mudale-reviews-heading__google .g-b { color: #4285F4; }
.mudale-reviews-heading__google .g-r { color: #EA4335; }
.mudale-reviews-heading__google .g-y { color: #FBBC05; }
.mudale-reviews-heading__google .g-g { color: #34A853; }

.mudale-reviews-heading__stars {
  font-size: 22px;
  color: #FBBC05;
  letter-spacing: 1px;
  line-height: 1;
}

.mudale-reviews-heading__sub {
  font-size: 15px;
  color: #475569;
  font-weight: 500;
}

@media (max-width: 767px) {
  .mudale-reviews-heading {
    font-size: 22px;
    padding: 10px 12px 4px;
  }
  .mudale-reviews-heading__stars { font-size: 20px; }
  .mudale-reviews-heading__sub { font-size: 13px; }
}

/* ---------------------------------------------------------- */
/* 3. Testimonial section heading "לקוחות מספרים" on blue bg  */
/* v4 set color #0f172a which is invisible on blue.           */
/* This section uses a deep blue/purple bg → force WHITE.     */
/* Detect by parent column having a saturated-blue bg.        */
/* ---------------------------------------------------------- */
.elementor-section[style*="rgb(0"],
.elementor-section[style*="rgb(28,"],
.elementor-section[style*="background-color: #0"],
.elementor-section[style*="background-color: #1"],
.elementor-section[style*="background-color: #2"],
.elementor-element[style*="background-color: rgb(0"],
.elementor-element[style*="background-color: rgb(28,"],
.elementor-element.elementor-element-7827dd27 {
  /* Marker selectors only — actual rule below */
}

/* Hard override: if the heading sits inside the blue-purple
   testimonial section, force white + larger size. */
.elementor-element.elementor-element-7827dd27 .elementor-heading-title,
.elementor-element[class*="7827dd27"] .elementor-heading-title {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 3.6vw, 38px) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.elementor-element.elementor-element-7827dd27 .elementor-heading-title::after,
.elementor-element[class*="7827dd27"] .elementor-heading-title::after {
  background: #6ec1e4 !important;
  width: 64px !important;
  height: 4px !important;
}

/* The OTHER "לקוחות מספרים" (above the WhatsApp screenshot
   carousel) sits on a light/transparent bg — slate-900 was OK. */
.elementor-element.elementor-element-72b15013 .elementor-heading-title {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 3.6vw, 38px) !important;
}

/* ---------------------------------------------------------- */
/* 4. HERO — center text + enlarge main headline on mobile    */
/* The hero is one Elementor section/column. On mobile we     */
/* center everything and bump font sizes.                     */
/* ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* Center every text element inside the hero card */
  .elementor-section.elementor-top-section:first-of-type,
  .elementor-section.elementor-top-section:first-of-type .elementor-widget-heading,
  .elementor-section.elementor-top-section:first-of-type .elementor-widget-text-editor,
  .elementor-section.elementor-top-section:first-of-type .elementor-widget-heading .elementor-heading-title,
  .elementor-section.elementor-top-section:first-of-type p {
    text-align: center !important;
  }

  /* H1 — the main "מודל'ה – הובלת דירה קטנה כמו גדולים" */
  .elementor-section.elementor-top-section:first-of-type h1.elementor-heading-title,
  .elementor-section.elementor-top-section:first-of-type h2.elementor-heading-title,
  .elementor-widget-heading h1.elementor-heading-title,
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(26px, 7.5vw, 36px) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }

  /* H3 sub-headlines — "למה לסחוב לבד, מה אתה שוורצנגר?" */
  .elementor-widget-heading h3.elementor-heading-title,
  .elementor-widget-heading h4.elementor-heading-title {
    font-size: clamp(20px, 5.6vw, 26px) !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  /* Body copy / text-editor — bigger + more readable */
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor div {
    font-size: 16px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  /* CTA buttons — full-width, comfortable touch target */
  .elementor-widget-button .elementor-button {
    font-size: 17px !important;
    padding: 14px 22px !important;
    min-height: 52px !important;
    line-height: 1.2 !important;
  }

  /* Tighten the hero section padding */
  .elementor-section.elementor-top-section:first-of-type {
    padding-top: 24px !important;
    padding-bottom: 32px !important;
  }
}

/* ---------------------------------------------------------- */
/* 5. Better mobile typography overall (text size + spacing)  */
/* ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* Default body baseline */
  body, body p, body li {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  /* Section-headings throughout */
  h1.elementor-heading-title { font-size: clamp(24px, 7vw, 32px) !important; }
  h2.elementor-heading-title { font-size: clamp(22px, 6.4vw, 30px) !important; }
  h3.elementor-heading-title { font-size: clamp(20px, 5.6vw, 26px) !important; }
  h4.elementor-heading-title { font-size: clamp(18px, 5vw, 22px) !important; }

  /* Section vertical breathing room */
  .elementor-section.elementor-section-boxed > .elementor-container,
  .e-con-boxed {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* Counters — keep numbers prominent but body legible */
  .elementor-counter-number-wrapper {
    font-size: 36px !important;
  }
  .elementor-counter-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}

/* ---------------------------------------------------------- */
/* 6. Mobile reviews — make TI cards size to viewport         */
/* The marquee item width of min(360px, 86vw) was correct,    */
/* but inner content needed padding adjustments.              */
/* ---------------------------------------------------------- */
@media (max-width: 767px) {
  .mudale-marquee__item,
  .ti-widget .ti-review-item {
    width: min(320px, 84vw) !important;
    min-height: 180px !important;
  }
  .ti-widget .ti-review-item,
  .ti-widget .ti-inner {
    padding: 18px 18px !important;
  }
  .ti-widget .ti-review-content {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }
  .ti-widget .ti-name {
    font-size: 14px !important;
  }
  .mudale-marquee__track {
    gap: 14px !important;
    animation-duration: 50s !important;
  }
  /* If TI header is rendered, give it some headroom */
  .ti-widget .ti-header {
    margin-bottom: 14px !important;
  }
}

/* ---------------------------------------------------------- */
/* 7. Black-circle counter artifact (the page shows a black   */
/* circle in the middle counter slot). Force visibility of    */
/* the icon-list / counter icon background.                   */
/* ---------------------------------------------------------- */
.elementor-counter .elementor-counter-number-wrapper {
  background: transparent !important;
  color: inherit !important;
}

/* Counter wrappers should not have huge dark blobs */
.elementor-icon-wrapper svg,
.elementor-icon svg {
  background: transparent !important;
}

/* ============================================================
   POLISH v5 — Targeted overrides for correctly-identified IDs
   ============================================================ */

/* HERO main headline: .elementor-headline (animated-headline widget)
   This is the REAL main "מודל'ה – הובלת דירה קטנה כמו גדולים".
   Must be the biggest, boldest, centered.                       */
.elementor-element.elementor-element-7c4fe05e,
.elementor-element-7c4fe05e .elementor-headline,
.elementor-element-7c4fe05e .elementor-headline-dynamic-wrapper {
  text-align: center !important;
}

.elementor-element-7c4fe05e h1.elementor-headline {
  font-size: clamp(28px, 5.2vw, 56px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  .elementor-element-7c4fe05e h1.elementor-headline {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.2 !important;
    padding: 0 8px !important;
  }
}

/* Hero column container — center every child element */
.elementor-element.elementor-element-7a0c3b65,
.elementor-element-7a0c3b65 > .elementor-widget,
.elementor-element-7a0c3b65 h1,
.elementor-element-7a0c3b65 h2,
.elementor-element-7a0c3b65 h3,
.elementor-element-7a0c3b65 p {
  text-align: center !important;
}

/* TESTIMONIAL section heading (blue gradient bg) — element 4b7e73f0
   WHITE text with cyan underline.                              */
.elementor-element.elementor-element-4b7e73f0,
.elementor-element-4b7e73f0 .elementor-heading-title {
  text-align: center !important;
}

.elementor-element-4b7e73f0 .elementor-heading-title,
.elementor-element-4b7e73f0 h2 {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 4vw, 40px) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
}

.elementor-element-4b7e73f0 .elementor-heading-title::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 64px !important;
  height: 4px !important;
  background: #6ec1e4 !important;
  border-radius: 2px !important;
  display: block !important;
}

/* IMAGE CAROUSEL section heading (blue gradient bg) — 7827dd27
   Also white text.                                              */
.elementor-element.elementor-element-7827dd27 .elementor-heading-title,
.elementor-element-7827dd27 h2 {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 4vw, 40px) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
}

.elementor-element-7827dd27 .elementor-heading-title::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 64px !important;
  height: 4px !important;
  background: #6ec1e4 !important;
  border-radius: 2px !important;
  display: block !important;
}

.elementor-element.elementor-element-7827dd27,
.elementor-element.elementor-element-4b7e73f0 {
  text-align: center !important;
}

/* Marquee item width — high-specificity to beat Trustindex's
   inline 3280px width.                                          */
html body .mudale-marquee .mudale-marquee__item,
html body .mudale-marquee__track .mudale-marquee__item.ti-review-item {
  max-width: 84vw !important;
}

/* Mobile: even tighter padding on hero */
@media (max-width: 767px) {
  .elementor-element-7a0c3b65 {
    padding: 24px 16px 32px !important;
  }
  .elementor-widget-text-editor h3 {
    font-size: clamp(20px, 5.4vw, 24px) !important;
    margin: 8px 0 !important;
  }
}

/* ----------------------------------------------------------
   Force visibility for Elementor `elementor-invisible` widgets
   When the fade-in animation JS doesn't fire, these elements
   stay at opacity 0. Make them fully visible regardless.
   ---------------------------------------------------------- */
.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  animation-fill-mode: both !important;
}

.elementor-element.elementor-invisible.elementor-widget-heading,
.elementor-element.elementor-invisible.elementor-widget-text-editor,
.elementor-element.elementor-invisible.elementor-widget-animated-headline,
.elementor-element.elementor-invisible.elementor-widget-button,
.elementor-element.elementor-invisible.elementor-widget-image-carousel,
.elementor-element.elementor-invisible.elementor-widget-testimonial-carousel {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Counter widget — same problem */
.elementor-element.elementor-invisible.elementor-widget-counter {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------- */
/* 9. Icon-box headings ("שירות מיידי וכיפי", "מחיר נגיש",   */
/*    etc.) — Elementor default was a faded light teal that  */
/*    has poor contrast on white. Use a darker brand color.  */
/* ---------------------------------------------------------- */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title span,
.elementor-widget-icon-box h3.elementor-icon-box-title,
.elementor-widget-icon-box h2.elementor-icon-box-title {
  color: #1a3a6c !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.elementor-widget-icon-box .elementor-icon-box-description {
  color: #2d3a4f !important;
  font-size: clamp(15px, 1.6vw, 17px) !important;
  line-height: 1.55 !important;
}

/* The icon itself — keep the cyan but bump saturation a hair */
.elementor-widget-icon-box .elementor-icon svg {
  fill: #54a6e4 !important;
}

/* ---------------------------------------------------------- */
/* 10. VIDEO widget (element 5718aab5) — when the autoplay   */
/*     fails (codec / mobile policy) the <video> shows as a  */
/*     solid black rounded rectangle. Add a poster fallback  */
/*     using an existing webp, and hide the inner <video>     */
/*     element if it errors out.                              */
/* ---------------------------------------------------------- */
.elementor-element.elementor-widget-video .e-hosted-video,
.elementor-element.elementor-widget-video .elementor-wrapper {
  background-image: url("/wp-content/uploads/2025/04/WhatsApp-Image-2025-04-17-at-22.38.16.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #1a3a6c !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* Keep the video itself transparent so the poster shows through
   when paused. When the video DOES play it'll cover the poster. */
.elementor-element.elementor-widget-video video.elementor-video {
  background: transparent !important;
  object-fit: cover !important;
}

/* If a browser shows the broken-media icon area (error 4 etc),
   ensure no jarring black square — round the corners + clip. */
.elementor-element.elementor-widget-video video.elementor-video {
  border-radius: 22px !important;
}

/* ---------------------------------------------------------- */
/* 11. Animated headline (element 7c4fe05e) — Elementor's     */
/*     dynamic rotating widget renders TWO <span> states. If  */
/*     the rotate-text JS doesn't initialize fast enough,     */
/*     both spans show at full opacity, producing overlapping */
/*     ghost text. Force the inactive span hidden by default. */
/* ---------------------------------------------------------- */
.elementor-headline-dynamic-wrapper {
  display: inline-block !important;
  position: relative !important;
}

.elementor-headline-dynamic-text {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .25s ease !important;
}

.elementor-headline-dynamic-text.elementor-headline-text-active {
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================ */
/* 12. PAGE BACKGROUND — keep it clean white. Sections that     */
/*     want a colored bg should set it on themselves, not       */
/*     bleed from the body/html.                                */
/* ============================================================ */
html, body {
  background: #ffffff !important;
}

/* ============================================================ */
/* 13. REMOVE the faded hand-with-phone backdrop on the         */
/*     testimonial section (element 7a0c3b65) and on the        */
/*     carousel container (556cbe50). The user wants a clean    */
/*     section with no bleeding background image.               */
/* ============================================================ */
.elementor-element.elementor-element-7a0c3b65 {
  background-image: none !important;
  background: #ffffff !important;
}

.elementor-element.elementor-element-556cbe50 {
  background-image: none !important;
  background: #ffffff !important;
}

/* Phone-carousel section heading "לקוחות מספרים" — needs to be
   readable on whatever bg renders (now mostly washed light bg,
   so use dark navy with a soft white halo for legibility).      */
html body .elementor-element.elementor-element-7827dd27 .elementor-heading-title,
html body .elementor-element.elementor-element-7827dd27 h2,
html body .elementor-element.elementor-element-20e774c0 .elementor-heading-title,
html body .elementor-element.elementor-element-20e774c0 h2 {
  color: #1a3a6c !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 6px rgba(255, 255, 255, 0.5) !important;
  font-weight: 900 !important;
  text-align: center !important;
}

/* Style the phone image carousel itself — clean radius on the     */
/*  active slide image, hide the swiper nav arrows clutter.         */
.elementor-element-1a385f53 .swiper-slide-image {
  border-radius: 22px !important;
  box-shadow: 0 12px 32px rgba(20, 30, 60, 0.10) !important;
  overflow: hidden !important;
}

.elementor-element-1a385f53 .elementor-swiper-button {
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  box-shadow: 0 2px 8px rgba(20, 30, 60, 0.15) !important;
}

.elementor-element-1a385f53 .elementor-swiper-button svg {
  fill: #1a3a6c !important;
}

/* The "faded backdrop" the user saw on the phone carousel was the
   PREV/NEXT slides showing partially next to the active slide. The
   widget is set to slides_to_show=1 but the swiper-wrapper extends
   beyond the active slide. Solution: hide all non-active slides,
   center the active one, and constrain its width to the image.   */
.elementor-element-1a385f53 .elementor-image-carousel-wrapper {
  max-width: 600px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

.elementor-element-1a385f53 .swiper-slide:not(.swiper-slide-active) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.elementor-element-1a385f53 .swiper-slide-active {
  opacity: 1 !important;
  visibility: visible !important;
}

.elementor-element-1a385f53 .swiper-slide {
  width: 600px !important;
  max-width: 100% !important;
}

.elementor-element-1a385f53 .swiper-slide-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.elementor-element-1a385f53 .swiper-slide-image {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Removed the white-nuke override on 20e774c0 — keep the gradient. */

/* ============================================================ */
/* 14. INNER CARDS (NOT section backgrounds) — radius rule.     */
/*     Per user: backgrounds stay square; ONLY inner content    */
/*     boxes get rounded corners. The "what you'll get"         */
/*     feature cards (elements 2b132d15, 4ccae72b, 1a2ab7ae,    */
/*     527e0df, a6a2434, 3e525b8) sit inside the purple section */
/*     and need rounding + clean shadow + tighter padding.      */
/* ============================================================ */
.elementor-element.elementor-element-2b132d15,
.elementor-element.elementor-element-4ccae72b,
.elementor-element.elementor-element-1a2ab7ae,
.elementor-element.elementor-element-527e0df,
.elementor-element.elementor-element-a6a2434,
.elementor-element.elementor-element-3e525b8 {
  background-color: #ffffff !important;
  background-image: none !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px 0 rgba(20, 30, 60, 0.10) !important;
  padding: 22px 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(20, 30, 60, 0.06) !important;
}

.elementor-element.elementor-element-2b132d15 h2,
.elementor-element.elementor-element-4ccae72b h2,
.elementor-element.elementor-element-1a2ab7ae h2,
.elementor-element.elementor-element-527e0df h2,
.elementor-element.elementor-element-a6a2434 h2,
.elementor-element.elementor-element-3e525b8 h2 {
  color: #1a3a6c !important;
  font-size: clamp(15px, 1.4vw, 18px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* ============================================================ */
/* 15. GOOGLE REVIEWS WIDGET (Trustindex) — full polish pass.   */
/* ============================================================ */

/* 15a. Card — keep radius + softer shadow. */
html body .ti-widget .ti-review-item,
html body .elementor-widget-trustindex .ti-review-item,
html body div.ti-review-item {
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgba(20, 30, 60, 0.08), 0 1px 3px rgba(20, 30, 60, 0.05) !important;
  border: 1px solid rgba(20, 30, 60, 0.06) !important;
  padding: 18px !important;
  overflow: hidden !important;
}

/* 15b. RTL header layout — AVATAR on the right (user's primary
       ask), Google badge next to it, name/date on the left.
       Use plain row + RTL direction; lower `order` = rightmost. */
html body .ti-widget .ti-review-item .ti-review-header,
html body div.ti-review-item .ti-review-header,
html body .ti-review-item > .ti-inner > .ti-review-header {
  display: flex !important;
  direction: rtl !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  position: relative !important;
}

/* Avatar TOP-RIGHT corner (first in RTL row = rightmost) */
.ti-review-item .ti-profile-img {
  position: static !important;
  order: 1 !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  margin: 0 !important;
}

/* Name + date IMMEDIATELY LEFT of avatar */
.ti-review-item .ti-profile-details {
  order: 2 !important;
  flex: 0 0 auto !important;
  text-align: right !important;
  margin: 0 !important;
  padding: 0 4px !important;
  min-width: 0 !important;
}

/* Google "G" insignia pinned to TOP-LEFT corner via auto margin */
.ti-review-item .ti-platform-icon {
  position: static !important;
  order: 3 !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  margin: 0 0 0 auto !important;   /* push to LEFT end of row */
  align-self: flex-start !important;
}

.ti-review-item .ti-platform-icon img {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

.ti-review-item .ti-profile-img img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* (profile-details rule is set above near the avatar — this is just a no-op
   to preserve the structure of the file.) */
.ti-review-item .ti-profile-details.__noop {}

.ti-review-item .ti-name {
  font-weight: 700 !important;
  color: #1a3a6c !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
  text-align: right !important;
}

.ti-review-item .ti-date {
  font-size: 12px !important;
  color: #6b7a8f !important;
  line-height: 1.2 !important;
}

/* 15c. Stars — packed against the RIGHT edge of the card in RTL.
       Use RTL row + flex-start (start = right side in RTL). */
html body .ti-widget .ti-review-item .ti-stars,
html body div.ti-review-item .ti-stars,
html body .ti-review-item span.ti-stars {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;   /* start = RIGHT in RTL */
  align-items: center !important;
  gap: 2px !important;
  margin: 10px 0 12px 0 !important;
  text-align: right !important;
  width: 100% !important;
  direction: rtl !important;
}

/* Push the verified-platform check to the LEFT of the stars
   (so visual order in RTL is: [stars on right] ... [check on left]). */
html body .ti-widget .ti-review-item .ti-stars .ti-verified-review,
html body div.ti-review-item .ti-stars .ti-verified-review {
  margin-right: 8px !important;
  margin-left: 0 !important;
  order: 99 !important;
}

/* Force the entire review CONTENT region to right-align in RTL */
html body .ti-widget .ti-review-item .ti-inner {
  direction: rtl !important;
  text-align: right !important;
}

.ti-review-item .ti-stars .ti-star {
  width: 16px !important;
  height: 16px !important;
}

.ti-review-item .ti-verified-review {
  margin-right: 6px !important;
  margin-left: 0 !important;
}

/* 15d. Review text — RTL aligned, readable. */
.ti-review-item .ti-review-text-container,
.ti-review-item .ti-review-content {
  text-align: right !important;
  color: #2d3a4f !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* 15e. Hide Trustindex's prev/next nav arrows and pagination
       controls — we use a marquee instead. NOTE: don't hide
       .ti-controls-line — it's the wrapping container that the
       review cards live inside, not the nav arrows.            */
html body .ti-controls,
html body .ti-next,
html body .ti-prev,
html body .ti-pagination,
html body .ti-widget .ti-controls-pagination,
html body .swiper-pagination,
html body .swiper-button-next,
html body .swiper-button-prev,
html body .ti-widget [class*="-pagination"],
html body .ti-widget [class*="-control"],
html body .ti-widget [class*="-next"],
html body .ti-widget [class*="-prev"],
html body .ti-widget button[aria-label*="הבאה"],
html body .ti-widget button[aria-label*="קודמת"],
html body .ti-widget button[aria-label*="Next"],
html body .ti-widget button[aria-label*="Prev"],
html body .ti-widget .splide__arrows,
html body .ti-widget .splide__pagination,
html body .ti-widget .glide__arrows,
html body .ti-widget .glide__bullets,
html body .ti-widget [role="navigation"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 15f. Even fade gradient on BOTH edges of the marquee so the
       leftmost card isn't visibly chopped while the right is
       clean. */
.mudale-marquee,
.ti-widget .ti-reviews-container-wrapper {
  position: relative !important;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  ) !important;
}

/* 15g. Hide disclaimer footer + tooltip clutter + the lingering
       fade-container box (the empty white rounded rectangle that
       used to sit at the bottom-right of the carousel). */
html body .ti-widget .ti-disclaimer,
html body .ti-widget .ti-verified-tooltip,
html body .ti-widget .ti-tooltip,
html body .ti-widget .ti-fade-container,
html body .ti-widget .ti-footer,
html body .ti-widget .ti-footer-grid,
html body .ti-widget .ti-rating-box,
html body .ti-widget .ti-verified-by,
html body .ti-widget .ti-verified-by-row,
html body .ti-widget .ti-info-icon,
html body .ti-widget .ti-read-more {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* 15h. Trustindex section — white bg, no shape artifacts. */
.elementor-widget-trustindex,
.elementor-widget-trustindex .elementor-widget-container,
.ti-widget {
  background: #ffffff !important;
  border-radius: 0 !important;
}

/* ============================================================ */
/* 16. ROUND-2 polish pass — all the items from the last review */
/* ============================================================ */

/* --- Feature cards: restore RAISED look + readable text ---- */
html body .elementor-element.elementor-element-2b132d15,
html body .elementor-element.elementor-element-4ccae72b,
html body .elementor-element.elementor-element-1a2ab7ae,
html body .elementor-element.elementor-element-527e0df,
html body .elementor-element.elementor-element-a6a2434,
html body .elementor-element.elementor-element-3e525b8 {
  background: #ffffff !important;
  background-image: none !important;
  border-radius: 18px !important;
  box-shadow:
    0 12px 28px rgba(20, 30, 60, 0.18),
    0 4px 8px rgba(20, 30, 60, 0.08) !important;
  padding: 26px 22px !important;
  margin: 10px !important;
  border: 1px solid rgba(20, 30, 60, 0.08) !important;
}

html body .elementor-element-2b132d15 h2,
html body .elementor-element-4ccae72b h2,
html body .elementor-element-1a2ab7ae h2,
html body .elementor-element-527e0df h2,
html body .elementor-element-a6a2434 h2,
html body .elementor-element-3e525b8 h2,
html body .elementor-element-2b132d15 .elementor-heading-title,
html body .elementor-element-4ccae72b .elementor-heading-title,
html body .elementor-element-1a2ab7ae .elementor-heading-title,
html body .elementor-element-527e0df .elementor-heading-title,
html body .elementor-element-a6a2434 .elementor-heading-title,
html body .elementor-element-3e525b8 .elementor-heading-title {
  color: #1a3a6c !important;
  font-size: clamp(16px, 1.6vw, 19px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  text-align: center !important;
  font-family: 'Polin', 'Noto Sans Hebrew', system-ui, sans-serif !important;
}

/* The grid that holds the cards — give it vertical breathing
   room so shadows aren't clipped at section boundaries */
html body .elementor-element-a61f78a,
html body .elementor-element-e1e8090 {
  padding: 18px 8px !important;
  gap: 8px !important;
}

/* --- Reviews: marquee gap + vertical room for shadow ------- */
html body .mudale-marquee,
html body .ti-widget .ti-reviews-container-wrapper {
  padding: 24px 0 36px !important;
  overflow: visible !important;
}

html body .ti-review-item,
html body .mudale-marquee__item {
  margin: 6px 12px !important;
}

/* --- Square all section corners (no rounded section bgs) -- */
html body section,
html body .elementor-section,
html body .elementor-top-section,
html body .elementor-element.e-con-boxed,
html body .elementor-element.e-parent,
html body .elementor-element[data-element_type="container"] {
  border-radius: 0 !important;
}

/* Explicitly square the light-blue / gradient sections users
   pointed at (the section right after the reviews and the next
   blue band).                                                 */
html body .elementor-element.elementor-element-7a0c3b65,
html body .elementor-element.elementor-element-556cbe50,
html body .elementor-element.elementor-element-20e774c0,
html body .elementor-element.elementor-element-6d7e17d7 {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* --- Icon-list ("💡 למה דווקא מודלה?") — bright readable text
       on the dark-blue section. Bold white + dark shadow halo so
       it actually pops against the gradient.                     */
html body .elementor-widget-icon-list .elementor-icon-list-text {
  font-family: 'Polin', 'Noto Sans Hebrew', system-ui, sans-serif !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: clamp(16px, 1.5vw, 18px) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.5 !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.35) !important;
  opacity: 1 !important;
}

html body .elementor-widget-icon-list .elementor-icon-list-icon svg,
html body .elementor-widget-icon-list .elementor-icon-list-icon i {
  color: #ffd34d !important;
  fill: #ffd34d !important;
}

html body .elementor-widget-icon-list .elementor-icon-list-item {
  padding: 8px 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* The "💡 למה דווקא מודלה?" heading itself — keep it white but
   make sure it's bright + has a halo for legibility on blue.    */
html body .elementor-element h2.elementor-heading-title {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Heading "💡 למה דווקא מודל'ה?" specifically — ensure it pops */
html body h2.elementor-heading-title,
html body .elementor-widget-heading h2 {
  /* Whatever color the section sets stays; we just guarantee
     visibility against animated-in elements */
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- HARDEN elementor-invisible so animations never leave
       widgets stuck transparent during page settle / scroll */
html body .elementor-invisible,
html body .elementor-element.elementor-invisible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation-fill-mode: both !important;
}

html body .elementor-invisible *,
html body .elementor-element.elementor-invisible * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- ONLY the fridge-guy image widget (291ca5c6) gets fit-to-     */
/*     container. The hero decoration image (44ac8b1e) and other    */
/*     image widgets keep their original Elementor sizing or this   */
/*     rule will balloon them to natural pixel dimensions.          */
html body .elementor-element.elementor-element-291ca5c6,
html body .elementor-element.elementor-element-291ca5c6 .elementor-widget-container {
  overflow: visible !important;
}

html body .elementor-element.elementor-element-291ca5c6 img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* --- HIDE the OLD image-carousel widget (1a385f53) and any
   surrounding leftover carousel containers. Belt + suspenders
   for the JS replacement.                                    */
html body .elementor-element.elementor-element-1a385f53,
html body .elementor-widget-image-carousel,
html body .elementor-element.elementor-element-1a385f53 .swiper,
html body .elementor-element.elementor-element-1a385f53 .swiper-wrapper,
html body .elementor-element.elementor-element-1a385f53 .elementor-image-carousel-wrapper,
/* The OLD STATIC masonry gallery (element e1334e6) — replaced by */
/* the new skewed-columns marquee. Hide all variants of it.       */
html body .elementor-element.elementor-element-e1334e6,
html body .elementor-widget-gallery,
html body .elementor-element[data-widget_type="gallery.default"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ============================================================ */
/* 17. NUKE border-radius on every section / container layer    */
/*     so no gradient strip shows curved top corners. Inner     */
/*     cards (review cards, feature cards, gallery items, video)*/
/*     keep their radius because they're targeted with their    */
/*     own !important rules above.                              */
/* ============================================================ */
html body section,
html body .elementor-section,
html body .elementor-top-section,
html body .elementor-inner-section,
html body .elementor-container,
html body .elementor-row,
html body .elementor-column,
html body .elementor-widget-wrap,
html body .elementor-element.e-con,
html body .elementor-element.e-con-boxed,
html body .elementor-element.e-con-full,
html body .elementor-element.e-flex,
html body .elementor-element.e-parent,
html body .elementor-element.e-child,
html body .elementor-element[data-element_type="container"],
html body .elementor-element[data-element_type="section"],
html body .e-con-inner,
html body .elementor-element {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* But KEEP the radius we want on the inner card-level elements. */
html body .ti-review-item,
html body .mudale-marquee__item,
html body .mudale-gallery__item,
html body .elementor-element.elementor-element-2b132d15,
html body .elementor-element.elementor-element-4ccae72b,
html body .elementor-element.elementor-element-1a2ab7ae,
html body .elementor-element.elementor-element-527e0df,
html body .elementor-element.elementor-element-a6a2434,
html body .elementor-element.elementor-element-3e525b8 {
  border-radius: 18px !important;
}

/* Some Elementor sections add SVG shape dividers (curved waves
   at the top/bottom of a section). Hide them so no section has
   a curved silhouette. */
html body .elementor-shape,
html body .elementor-shape-top,
html body .elementor-shape-bottom {
  display: none !important;
}

/* ============================================================ */
/* 18. NUCLEAR border-radius=0 on EVERYTHING, then re-grant      */
/*     radius only to the inner card-level elements. This wins   */
/*     over inline styles when class specificity falls short.    */
/* ============================================================ */
html body * {
  border-radius: 0 !important;
}

/* Re-grant radius on the inner cards we actually want rounded */
html body .ti-review-item,
html body .mudale-marquee__item,
html body .mudale-gallery__item,
html body .elementor-element.elementor-element-2b132d15,
html body .elementor-element.elementor-element-4ccae72b,
html body .elementor-element.elementor-element-1a2ab7ae,
html body .elementor-element.elementor-element-527e0df,
html body .elementor-element.elementor-element-a6a2434,
html body .elementor-element.elementor-element-3e525b8 {
  border-radius: 18px !important;
}

html body .mudale-gallery__item {
  border-radius: 14px !important;
}

/* Buttons + WhatsApp floating action keep their pill shape */
html body .elementor-button,
html body a.elementor-button-link,
html body .elementor-widget-button a,
html body button.elementor-button,
html body [class*="whatsapp"][class*="float"],
html body .elementor-element[class*="button"] a {
  border-radius: 999px !important;
}

/* Avatar circles stay round */
html body .ti-review-item .ti-profile-img img,
html body .ti-review-item .ti-profile-img {
  border-radius: 50% !important;
}

/* Icon-box CIRCLE icons stay CIRCULAR (the "השירות שלנו כולל"
   section uses .elementor-shape-circle on its icon containers
   — our nuclear * { border-radius: 0 } broke them). */
html body .elementor-icon,
html body .elementor-icon-box-icon,
html body .elementor-widget-icon-box .elementor-icon,
html body .elementor-view-stacked .elementor-icon,
html body .elementor-shape-circle .elementor-icon,
html body .elementor-shape-circle.elementor-widget-icon-box .elementor-icon,
html body .elementor-shape-circle.elementor-widget-icon-box .elementor-icon-box-icon,
html body .elementor-widget-icon-box.elementor-shape-circle .elementor-icon-wrapper,
html body .elementor-counter-number-wrapper {
  border-radius: 50% !important;
}

/* Profile/avatar pictures elsewhere */
html body .ti-profile-img,
html body .ti-profile-img img,
html body img[class*="avatar"],
html body .elementor-image-box-img img.elementor-rounded {
  border-radius: 50% !important;
}

/* The hero CTA "yallah" button uses a different shape — keep round */
html body .elementor-element-410364a a,
html body .elementor-element-aa30bce a {
  border-radius: 999px !important;
}

/* ============================================================ */
/* 19. ROUND-3 polish — footer credit, hero head overlap,        */
/*     mobile H1 overflow, button beautification                 */
/* ============================================================ */

/* --- Footer credit: thin, centered, one line, link styled ---- */
html body .mudale-footer-credit {
  padding: 12px 16px !important;
  margin: 0 !important;
}
html body .mudale-footer-credit > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}
html body .mudale-footer-credit .mudale-footer-credit__line {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Polin', 'Noto Sans Hebrew', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #6b7a8f !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
}
html body .mudale-footer-credit__heart {
  display: inline-block !important;
  font-size: 12px !important;
  vertical-align: middle !important;
  margin: 0 2px !important;
}
html body .mudale-footer-credit__link {
  color: #1a3a6c !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 1px dotted rgba(26, 58, 108, 0.45) !important;
  transition: color .15s ease, border-color .15s ease !important;
}
html body .mudale-footer-credit__link:hover {
  color: #2750a0 !important;
  border-bottom-color: #2750a0 !important;
}
html body .mudale-footer-credit__a11y {
  color: #6b7a8f !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
html body .mudale-footer-credit__a11y:hover {
  color: #1a3a6c !important;
}

/* Zero out the surrounding parent container's padding so footer
   sits tight to the bottom of the page (no huge empty space).
   Elementor uses CSS custom properties for boxed-container padding
   (--padding-block-start, --padding-block-end, etc.) so we have to
   override THOSE plus the regular padding shorthand.              */
html body .elementor-element-90aa069,
html body .elementor-element-90aa069 .e-con-inner,
html body .elementor-element-6c6f86a,
html body .elementor-element-6c6f86a .e-con-inner {
  padding: 4px 12px !important;
  --padding-block-start: 4px !important;
  --padding-block-end: 4px !important;
  --padding-inline-start: 12px !important;
  --padding-inline-end: 12px !important;
  --padding-top: 4px !important;
  --padding-bottom: 4px !important;
  --container-default-padding-top: 4px !important;
  --container-default-padding-bottom: 4px !important;
  min-height: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  --gap: 0 !important;
  --row-gap: 0 !important;
}

/* The .elementor-widget-container wrapping the footer text */
html body .elementor-element.elementor-element-581f2232,
html body .elementor-element.elementor-element-581f2232 .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}

/* NUCLEAR footer wrapper override — Elementor's media-query CSS
   sets 36px padding-top/bottom on .e-con-boxed > .e-con-inner that
   keeps winning specificity battles. We use class-duplication
   (`.e-con-inner.e-con-inner`) and a type-selector chain to win.
   We also explicitly set the wrapper height so even if the inner
   somehow grows, the wrapper stays tight.                        */
html body div.elementor-element[data-id="90aa069"],
html body div.elementor-element.elementor-element-90aa069 {
  padding-block: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

html body div[data-id="90aa069"] > .e-con-inner.e-con-inner,
html body div.elementor-element-90aa069 > div.e-con-inner.e-con-inner,
html body div.elementor-element-90aa069 > div.e-con-inner {
  padding-block: 4px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-inline: 12px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  min-height: 0 !important;
  --padding-block-start: 4px !important;
  --padding-block-end: 4px !important;
}

/* And just to be triple-safe, target via @media exactly like
   Elementor does so our rule lives in the same cascade context. */
@media (max-width: 767px) {
  html body div[data-id="90aa069"],
  html body div[data-id="90aa069"] > .e-con-inner,
  html body div.elementor-element-90aa069 > div.e-con-inner.e-con-inner {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-block: 4px !important;
    --padding-block-start: 4px !important;
    --padding-block-end: 4px !important;
    min-height: 0 !important;
  }
}

/* Hide the trailing empty containers that are just whitespace
   stubs left behind from removed widgets / Elementor defaults. */
html body .elementor-element.elementor-element-6c6f86a,
html body .elementor-element.elementor-element-7f9788a {
  display: none !important;
}

/* Hide any e-parent / e-child container whose ONLY child is an
   empty .e-con-inner — these are leftover stubs from removed
   widgets and they create huge dead vertical space.            */
html body .e-con.e-parent:empty,
html body .e-con.e-parent > .e-con-inner:empty {
  display: none !important;
}

/* The gallery section's bottom padding was 80px; trim it so the
   footer doesn't sit miles below the last gallery image.        */
html body .mudale-gallery-section {
  padding-bottom: 8px !important;
  padding-top: 32px !important;
  margin-bottom: 0 !important;
}

html body .mudale-gallery {
  margin-bottom: 0 !important;
}

/* Tight footer wrapper — just a few pixels of breathing room. */
html body .mudale-footer-credit,
html body .mudale-footer-credit .elementor-widget-container {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin: 0 !important;
}

/* Kill trailing whitespace on the LAST container in the page  */
html body .e-con.e-parent:last-child,
html body main > .elementor > section:last-child,
html body main > .elementor > div:last-child {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* --- Hero "head" image (44ac8b1e): pull it DOWN so it partially
       overlaps the top of the blue hero container, instead of
       floating above with a gap.                                 */
html body .elementor-element.elementor-element-44ac8b1e {
  margin-bottom: -56px !important;
  z-index: 5 !important;
  position: relative !important;
  text-align: center !important;
}

html body .elementor-element.elementor-element-44ac8b1e img {
  max-width: 140px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
  filter: drop-shadow(0 6px 16px rgba(20, 30, 60, 0.25)) !important;
}

/* Tighter top spacing on the hero so the image sits right on it */
html body .elementor-element.elementor-element-44ac8b1e + * {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 767px) {
  html body .elementor-element.elementor-element-44ac8b1e {
    margin-bottom: -42px !important;
  }
  html body .elementor-element.elementor-element-44ac8b1e img {
    max-width: 110px !important;
  }
}

/* --- MOBILE H1 overflow fix: shrink + tighter line-height,
       add safe horizontal padding so glyphs don't kiss edges    */
@media (max-width: 767px) {
  html body .elementor-element-7c4fe05e h1.elementor-headline {
    font-size: clamp(22px, 6.4vw, 32px) !important;
    line-height: 1.15 !important;
    padding: 0 14px !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  html body .elementor-element-7c4fe05e {
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow: hidden !important;
  }
  html body .elementor-element-7c4fe05e .elementor-headline-dynamic-wrapper,
  html body .elementor-element-7c4fe05e .elementor-headline-dynamic-text {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* --- BUTTON design polish: prettier hover, shadow, hierarchy --- */
html body .elementor-element-410364a a,
html body .elementor-element-aa30bce a {
  padding: 14px 28px !important;
  font-weight: 700 !important;
  font-size: clamp(15px, 1.7vw, 18px) !important;
  letter-spacing: 0.01em !important;
  box-shadow:
    0 8px 20px rgba(20, 30, 60, 0.20),
    0 2px 4px rgba(20, 30, 60, 0.10) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

html body .elementor-element-410364a a:hover,
html body .elementor-element-aa30bce a:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 12px 28px rgba(20, 30, 60, 0.26),
    0 3px 6px rgba(20, 30, 60, 0.12) !important;
  filter: brightness(1.04) !important;
}

html body .elementor-element-410364a a:active,
html body .elementor-element-aa30bce a:active {
  transform: translateY(0) !important;
}

/* Primary CTA (WhatsApp) gradient + icon polish */
html body .elementor-element-410364a a {
  background: linear-gradient(135deg, #21c45c 0%, #16a34a 100%) !important;
  color: #ffffff !important;
}

/* Secondary CTA (phone) translucent over the hero */
html body .elementor-element-aa30bce a {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

html body .elementor-element-aa30bce a:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.70) !important;
}

html body .elementor-element-410364a a svg,
html body .elementor-element-aa30bce a svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

/* --- SEO description block (split into headline + sub) ---- */
html body .mudale-seo-block {
  max-width: 920px !important;
  margin: 8px auto !important;
  padding: 16px 18px !important;
  text-align: center !important;
}
html body .mudale-seo-block__title {
  font-family: 'Polin', 'Noto Sans Hebrew', system-ui, sans-serif !important;
  font-size: clamp(22px, 2.6vw, 30px) !important;
  font-weight: 900 !important;
  color: #1a3a6c !important;
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
}
html body .mudale-seo-block__sub {
  font-family: 'Polin', 'Noto Sans Hebrew', system-ui, sans-serif !important;
  font-size: clamp(14px, 1.4vw, 17px) !important;
  font-weight: 500 !important;
  color: #4a5d7a !important;
  line-height: 1.55 !important;
  margin: 0 auto !important;
  max-width: 720px !important;
}

@media (max-width: 767px) {
  html body .mudale-seo-block {
    padding: 14px 14px !important;
  }
  html body .mudale-seo-block__title {
    font-size: 20px !important;
  }
  html body .mudale-seo-block__sub {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================ */
/* 20. "מה תקבלו" FEATURE CARDS — liveliness pass.              */
/*     Even gaps + staggered fade-up + hover lift + CSS doodles. */
/* ============================================================ */

/* Make the wrapping parent a relative positioning context so we
   can scatter decorative doodles inside it. */
html body .elementor-element-a61f78a,
html body .elementor-element-e1e8090 {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 16px !important;          /* equal gap row + column */
  row-gap: 16px !important;
  column-gap: 16px !important;
  padding: 12px 8px !important;
  overflow: visible !important;
}

/* Force same width per card so they line up evenly */
html body .elementor-element.elementor-element-2b132d15,
html body .elementor-element.elementor-element-4ccae72b,
html body .elementor-element.elementor-element-1a2ab7ae,
html body .elementor-element.elementor-element-527e0df,
html body .elementor-element.elementor-element-a6a2434,
html body .elementor-element.elementor-element-3e525b8 {
  flex: 1 1 calc(33.333% - 16px) !important;
  min-width: 220px !important;
  max-width: 360px !important;
  margin: 0 !important;
  position: relative !important;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  animation: mudale-card-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  will-change: transform, opacity;
  transition:
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Staggered entrance — each card a beat later than the last */
html body .elementor-element.elementor-element-2b132d15 { animation-delay: 0.05s; }
html body .elementor-element.elementor-element-4ccae72b { animation-delay: 0.15s; }
html body .elementor-element.elementor-element-1a2ab7ae { animation-delay: 0.25s; }
html body .elementor-element.elementor-element-527e0df  { animation-delay: 0.35s; }
html body .elementor-element.elementor-element-a6a2434  { animation-delay: 0.45s; }
html body .elementor-element.elementor-element-3e525b8  { animation-delay: 0.55s; }

@keyframes mudale-card-in {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translateY(-3px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Decorative pop on hover — lift + rotate a hair + shadow grows */
html body .elementor-element.elementor-element-2b132d15:hover,
html body .elementor-element.elementor-element-4ccae72b:hover,
html body .elementor-element.elementor-element-1a2ab7ae:hover,
html body .elementor-element.elementor-element-527e0df:hover,
html body .elementor-element.elementor-element-a6a2434:hover,
html body .elementor-element.elementor-element-3e525b8:hover {
  transform: translateY(-4px) rotate(-0.5deg) !important;
  box-shadow:
    0 20px 36px rgba(20, 30, 60, 0.22),
    0 6px 12px rgba(20, 30, 60, 0.10) !important;
}

/* Tiny corner accent dot (a "check" hint) on every card */
html body .elementor-element.elementor-element-2b132d15::before,
html body .elementor-element.elementor-element-4ccae72b::before,
html body .elementor-element.elementor-element-1a2ab7ae::before,
html body .elementor-element.elementor-element-527e0df::before,
html body .elementor-element.elementor-element-a6a2434::before,
html body .elementor-element.elementor-element-3e525b8::before {
  content: "" !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #21c45c 0%, #16a34a 100%) !important;
  box-shadow: 0 0 0 3px rgba(33, 196, 92, 0.18) !important;
  animation: mudale-pulse 2.4s ease-in-out infinite;
  pointer-events: none !important;
}

@keyframes mudale-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(33, 196, 92, 0.18);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(33, 196, 92, 0.08);
  }
}

/* CSS doodles: scatter soft pastel shapes in the parent container
   bg using ::before / ::after on the parent. */
html body .elementor-element-a61f78a::before,
html body .elementor-element-a61f78a::after,
html body .elementor-element-e1e8090::before,
html body .elementor-element-e1e8090::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  opacity: 0.6 !important;
  filter: blur(1px) !important;
}

html body .elementor-element-a61f78a::before {
  top: -20px;
  right: -30px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(33, 196, 92, 0.18) 0%, transparent 70%);
  animation: mudale-float-a 9s ease-in-out infinite;
}

html body .elementor-element-a61f78a::after {
  bottom: -25px;
  left: -20px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(84, 166, 228, 0.20) 0%, transparent 70%);
  animation: mudale-float-b 11s ease-in-out infinite;
}

html body .elementor-element-e1e8090::before {
  top: -30px;
  left: 25%;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255, 211, 77, 0.25) 0%, transparent 70%);
  animation: mudale-float-c 8s ease-in-out infinite;
}

html body .elementor-element-e1e8090::after {
  bottom: -15px;
  right: 15%;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(165, 130, 240, 0.20) 0%, transparent 70%);
  animation: mudale-float-d 13s ease-in-out infinite;
}

@keyframes mudale-float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-8px, 12px) scale(1.08); }
}
@keyframes mudale-float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(10px, -8px) scale(0.92); }
}
@keyframes mudale-float-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(15px, 10px) scale(1.05); }
}
@keyframes mudale-float-d {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-12px, -10px) scale(0.95); }
}

/* Stack cards 1-per-row on mobile with even gaps */
@media (max-width: 767px) {
  html body .elementor-element-a61f78a,
  html body .elementor-element-e1e8090 {
    flex-direction: column !important;
    gap: 14px !important;
    padding: 8px 12px !important;
  }
  html body .elementor-element.elementor-element-2b132d15,
  html body .elementor-element.elementor-element-4ccae72b,
  html body .elementor-element.elementor-element-1a2ab7ae,
  html body .elementor-element.elementor-element-527e0df,
  html body .elementor-element.elementor-element-a6a2434,
  html body .elementor-element.elementor-element-3e525b8 {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Honour reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  html body .elementor-element.elementor-element-2b132d15,
  html body .elementor-element.elementor-element-4ccae72b,
  html body .elementor-element.elementor-element-1a2ab7ae,
  html body .elementor-element.elementor-element-527e0df,
  html body .elementor-element.elementor-element-a6a2434,
  html body .elementor-element.elementor-element-3e525b8 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html body .elementor-element-a61f78a::before,
  html body .elementor-element-a61f78a::after,
  html body .elementor-element-e1e8090::before,
  html body .elementor-element-e1e8090::after,
  html body .elementor-element.elementor-element-2b132d15::before,
  html body .elementor-element.elementor-element-3e525b8::before {
    animation: none !important;
  }
}