.elementor-kit-34{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-2956dbd:#13131A;--e-global-color-b8f5c80:#22A7F4;--e-global-color-1b861c0:#FFFFFF;--e-global-color-10c30d9:#171923;--e-global-color-52719b9:#2C384D;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-34 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== MOBILE UX OPTIMIZATION - Khaelyon Trading ===== */

/* --- HERO SECTION: Stack to single column on mobile --- */
@media (max-width: 767px) {

  /* Hero: override grid → single column */
  #hero-section {
    display: flex !important;
    flex-direction: column !important;
    padding: 30px 20px 40px !important;
    gap: 32px !important;
    min-height: auto !important;
  }

  /* Hero text elements: full width, centered */
  #hero-section .elementor-element-7767eee7,
  #hero-section .elementor-element-657f49fb,
  #hero-section .elementor-element-3a0cbf60,
  #hero-section .elementor-element-19cb38e {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Hero form: full width */
  #hero-section .elementor-element-7eb0207 {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100% !important;
    position: static !important;
  }

  /* Hide app image on mobile for cleaner look */
  #hero-section .elementor-element-19cb38e {
    display: none !important;
  }

  /* Hero H1 font size */
  #hero-section .elementor-element-7767eee7 h1,
  #hero-section .elementor-element-7767eee7 h2 {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }

  /* Hero H2 subheading */
  #hero-section .elementor-element-657f49fb h2,
  #hero-section .elementor-element-657f49fb h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  /* Hero description text */
  #hero-section .elementor-element-3a0cbf60 p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    opacity: 0.85;
  }

  /* Fix form card on mobile */
  #hero-section .elementor-element-7eb0207 .ff-el-group input,
  #hero-section .elementor-element-7eb0207 .ff-el-group select {
    height: 52px !important;
    font-size: 16px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
  }

  /* Register Now button */
  #hero-section .ff-btn-submit {
    height: 54px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    letter-spacing: 0.5px !important;
  }

  /* --- HEADER: Fix nav on mobile --- */
  .site-header,
  header.elementor-location-header {
    padding: 0 16px !important;
  }

  /* SIGN UP button in header - smaller on mobile */
  .elementor-location-header .hw-button,
  .elementor-location-header a.elementor-button {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }

  /* --- SECTIONS: padding handled per-section --- */

  /* About Us section */
  .elementor-element .elementor-widget-image img {
    border-radius: 12px !important;
  }

  /* --- CARDS: Investment Solutions, Who We Work With --- */
  .elementor-widget-container .hw-card,
  .elementor-element [class*="card"] {
    border-radius: 16px !important;
    padding: 24px 20px !important;
  }

  /* --- TYPOGRAPHY: Scale down headings globally on mobile --- */
  h1 { font-size: clamp(28px, 8vw, 42px) !important; }
  h2 { font-size: clamp(22px, 6vw, 32px) !important; }
  h3 { font-size: clamp(18px, 5vw, 24px) !important; }

  /* --- BUTTONS: Ensure touch-friendly size (44px min) --- */
  .elementor-button,
  .hw-button,
  button,
  input[type="submit"] {
    min-height: 44px !important;
    border-radius: 10px !important;
  }

  /* Full-width CTA buttons on mobile */
  .e-con > .elementor-widget-button .elementor-button,
  .elementor-section > .elementor-container .elementor-button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* --- FORM FIELDS: Prevent zoom on iOS (font-size >= 16px) --- */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* --- TESTIMONIALS / CAROUSEL: Fix overflow --- */
  .elementor-widget-carousel .swiper-wrapper,
  .elementor-widget-reviews .swiper-wrapper {
    padding-bottom: 8px !important;
  }

  /* --- FOOTER: Stack footer links --- */
  footer .elementor-widget-nav-menu ul {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
  }

  /* --- PROGRESS BARS: readable on mobile --- */
  .elementor-progress-bar {
    height: 10px !important;
    border-radius: 6px !important;
  }

  /* --- TICKER / CRYPTO BAR: smoother on mobile --- */
  .elementor-widget-text-editor marquee,
  .crypto-ticker {
    font-size: 12px !important;
  }

  /* --- SPACING FIX: Remove excessive section gaps --- */
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* ===== TABLET (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Hero on tablet: still 2 columns but with better spacing */
  #hero-section {
    grid-template-columns: 50% 50% !important;
    padding: 60px 40px !important;
    gap: 30px !important;
  }

  /* Scale headings for tablet */
  h1 { font-size: clamp(30px, 5vw, 48px) !important; }
  h2 { font-size: clamp(22px, 4vw, 34px) !important; }

  /* Ensure buttons are tablet-friendly */
  .elementor-button,
  .hw-button {
    min-height: 48px !important;
  }
}

/* ===== GLOBAL: Button hover animation (already exists, keep) ===== */
.hw-button {
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.hw-button:hover {
  transform: translateY(-4px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hw-button {
    transition: none !important;
  }
}

/* ===== HEADER: Fix SIGN UP button on mobile ===== */
@media (max-width: 767px) {

  /* Hide SIGN UP button in header on mobile - use hamburger only */
  .elementor-element-6d85a552 {
    display: none !important;
  }

  /* Language switcher - smaller */
  .elementor-element-5841b3a {
    display: none !important;
  }

  /* Header container: logo + hamburger only, clean */
  .elementor-location-header .e-con,
  .elementor-location-header .elementor-container {
    padding: 0 16px !important;
  }

  /* Mobile header height */
  .elementor-location-header {
    min-height: 60px !important;
  }

  /* Logo: right size on mobile */
  .elementor-widget-theme-site-logo img {
    max-height: 48px !important;
    width: auto !important;
  }

  /* Hamburger menu icon - make it bigger for touch */
  .elementor-widget-nav-menu .elementor-nav-menu--toggle {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ===== ABOUT US: Stack image above text ===== */
  /* About us section - ensure stacking */
  .elementor-element-7edec824 > .elementor-container,
  .elementor-element-7edec824 > .e-con-inner {
    flex-direction: column !important;
  }

  /* About Us image: full width, reasonable height */
  .elementor-element-7edec824 .elementor-widget-image img {
    width: 100% !important;
    max-height: 250px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  /* ===== OUR INVESTMENT SOLUTIONS section ===== */
  /* Cards already stack, just fix padding */
  .elementor-location-header + * .elementor-widget-container {
    padding: 0 !important;
  }

  /* ===== PROGRESS BARS: better on mobile ===== */
  .elementor-progress-wrapper {
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  /* ===== WHO WE WORK WITH: carousel arrows ===== */
  .swiper-button-prev,
  .swiper-button-next {
    width: 36px !important;
    height: 36px !important;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 16px !important;
  }

  /* ===== TESTIMONIALS: Fix card text overflow ===== */
  .elementor-widget-reviews .swiper-slide,
  .elementor-testimonial-wrapper {
    padding: 20px 16px !important;
  }

  /* ===== CTA SECTION: Newsletter/Contact form ===== */
  /* Input + button stack vertically */
  .elementor-form .elementor-field-group {
    margin-bottom: 12px !important;
  }

  /* ===== FOOTER: Clean up on mobile ===== */
  footer .elementor-widget-nav-menu nav,
  .elementor-location-footer .elementor-widget-nav-menu nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
    justify-content: center !important;
  }

  footer .elementor-location-footer {
    padding: 32px 20px !important;
  }

  /* Footer logo centered */
  .elementor-location-footer .elementor-widget-theme-site-logo {
    text-align: center !important;
    margin-bottom: 16px !important;
  }

  /* Footer copyright centered */
  .elementor-location-footer .elementor-widget-text-editor p {
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  /* ===== GENERAL UX: Smooth scrolling ===== */
  html {
    scroll-behavior: smooth !important;
  }

  /* ===== SECTION HEADINGS: consistent spacing ===== */
  .elementor-widget-heading + .elementor-widget-heading {
    margin-top: -8px !important;
  }

  /* ===== IMAGES: prevent overflow ===== */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ===== CRYPTO TICKER: don't overflow ===== */
  .elementor-location-header [data-id="6e0924e"],
  .elementor-location-header [data-id="402cbc7"] {
    font-size: 11px !important;
    overflow: hidden !important;
  }

  /* ===== SECTION PADDING: tighter on mobile ===== */
  
  
  /* Hero specifically stays compact */
  #hero-section {
    padding-top: 30px !important;
    padding-bottom: 40px !important;
  }
}

/* ===== HEADER: Fix mobile-specific SIGN UP button ===== */
@media (max-width: 767px) {

  /* Hide the mobile Sign Up button too */
  .elementor-element-aa844d9 {
    display: none !important;
  }

  /* Hide language switcher in mobile header */
  .elementor-element-6c13de6 .elementor-element:not([data-id="0d3bb3f"]):not([data-id="649da84"]):not([data-id="99d604e"]) {
    /* Keep only logo and hamburger */
  }

  /* The entire mobile header inner section - hide extra items */
  .elementor-element-6c13de6 {
    padding: 8px 16px !important;
    min-height: 60px !important;
  }

  /* Mobile header: just show logo + hamburger */
  .elementor-element-6c13de6 .elementor-column {
    padding: 0 !important;
  }

  /* Make hamburger menu touch-friendly */
  .elementor-menu-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ===== HERO: Ensure the blue border bar is visible ===== */
  #hero-section .elementor-element-7767eee7::before,
  #hero-section h1::before {
    display: block !important;
  }

  /* ===== FORM: better checkbox appearance ===== */
  #hero-section .ff-el-tc input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin-right: 8px !important;
    cursor: pointer !important;
  }

  #hero-section .ff-el-tc label {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Register Now button - full width, prominent */
  #hero-section .ff-btn-submit,
  #hero-section [type="submit"] {
    width: 100% !important;
    padding: 16px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    letter-spacing: 0.3px !important;
  }

  /* ===== Form card: nicer shadow on mobile ===== */
  #hero-section .elementor-element-7eb0207 > .elementor-widget-container {
    border-radius: 20px !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   MOBILE WIDTH FIX — תיקון רוחב וטקסט אחרי טופס ההרשמה
   ============================================================ */
@media (max-width: 767px) {

  /* 1. CORE FIX: Let every container use full available width
        Remove Elementor's inner max-width constraint */
  .e-con-inner,
  .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 2. Sections get uniform side padding (not both padded twice) */
  .elementor-section > .elementor-container,
  .e-con > .e-con-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* 3. TEXT ALIGNMENT: left-align body text, keep headings centered */
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor div,
  .elementor-text-editor p,
  .elementor-text-editor div {
    text-align: left !important;
    line-height: 1.7 !important;
  }

  /* Icon boxes (Investment Solutions cards) — keep centered */
  .elementor-icon-box-description,
  .elementor-icon-box-title,
  .elementor-icon-box-wrapper {
    text-align: center !important;
  }

  /* Testimonials — centered is fine */
  .elementor-widget-reviews p,
  .elementor-testimonial__text {
    text-align: center !important;
  }

  /* 4. COLUMNS: full width on mobile — EXCLUDE header */
  .elementor-section:not(.elementor-location-header .elementor-section) .elementor-column,
  body:not(.elementor-location-header) .elementor-col-50,
  body:not(.elementor-location-header) .elementor-col-33,
  body:not(.elementor-location-header) .elementor-col-25 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Header columns: keep in row */
  .elementor-location-header .elementor-column {
    width: auto !important;
    flex: 1 !important;
  }

  /* 5. SECTION PADDING: sensible defaults per section */
  .elementor-section,
  .e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 6. IMAGES in sections: full width */
  .elementor-widget-image .elementor-image img,
  .elementor-widget-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 14px !important;
    display: block !important;
  }

  /* 7. BUTTONS in sections: full width, touch-friendly */
  .elementor-widget-button .elementor-button {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  /* 8. Section vertical padding */
  .elementor-section.elementor-section-boxed,
  .e-con[data-element_type="container"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Exception: hero stays compact */
  #hero-section {
    padding: 30px 20px 40px 20px !important;
  }

  /* 9. Progress bars — full width */
  .elementor-progress-wrapper {
    width: 100% !important;
  }

  /* 10. Carousel / Swiper — no overflow cut */
  .swiper-container,
  .swiper-wrapper {
    overflow: visible !important;
  }
  
  .elementor-widget-reviews .swiper-slide,
  .elementor-widget-carousel .swiper-slide {
    width: 85vw !important;
    max-width: 360px !important;
  }
}

/* ============================================================
   MOBILE WIDTH & TEXT FIX — v2 (safe, targeted)
   ============================================================ */
@media (max-width: 767px) {

  /* ---- FIX 1: Remove Elementor inner container max-width ---- */
  /* This is the key — e-con-inner limits to 767px which causes narrow text */
  .elementor-section:not(.elementor-location-header .elementor-section) .e-con-inner,
  .elementor-section:not(.elementor-location-header .elementor-section) .elementor-container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* ---- FIX 2: Text alignment — body paragraphs go left ---- */
  /* (NOT hero which is explicitly centered, NOT icon boxes) */
  .elementor-widget-text-editor .elementor-text-editor p,
  .elementor-widget-text-editor .elementor-text-editor div,
  .elementor-widget-text-editor .elementor-text-editor li {
    text-align: left !important;
    line-height: 1.75 !important;
  }

  /* ---- FIX 3: Content sections — stacking columns ---- */
  /* Only non-header, non-hero sections */
  .elementor-section:not(.elementor-location-header .elementor-section):not(#hero-section .elementor-section) .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* ---- FIX 4: Header stays as-is — force row layout ---- */
  .elementor-location-header .elementor-section,
  .elementor-location-header .elementor-inner-section {
    width: 100% !important;
  }

  .elementor-location-header .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 0 16px !important;
    max-width: 100% !important;
  }

  .elementor-location-header .elementor-column {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* ---- FIX 5: Section vertical padding ---- */
  .elementor-section:not(.elementor-location-header .elementor-section):not(.elementor-location-footer .elementor-section) {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- FIX 6: Images — full width ---- */
  .elementor-section:not(.elementor-location-header .elementor-section) .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 14px !important;
  }

  /* ---- FIX 7: Buttons in sections ---- */
  .elementor-section:not(.elementor-location-header .elementor-section) .elementor-button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
  }
}

/* ============================================================
   HEADER FINAL OVERRIDE — row layout preserved on mobile
   ============================================================ */
@media (max-width: 767px) {

  /* Force header outer section to row */
  .elementor-location-header .elementor-section > .elementor-container,
  .elementor-location-header .elementor-inner-section > .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Header columns — auto width (NOT full width) */
  .elementor-location-header .elementor-column,
  .elementor-location-header .elementor-inner-column {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  /* Logo column stays compact */
  .elementor-location-header [data-id="c5f9aec"],
  .elementor-location-header [data-id="0d3bb3f"] {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Nav/actions column — push to right */
  .elementor-location-header [data-id="9db8a21"],
  .elementor-location-header [data-id="91d64ca"],
  .elementor-location-header [data-id="78b6518"] {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Hamburger menu visible and sized right */
  .elementor-location-header .elementor-menu-toggle,
  .elementor-location-header .e-n-menu-toggle {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================================
   HEADER FINAL FIX — target all header data-ids directly
   ============================================================ */
@media (max-width: 767px) {

  /* Mobile header section row */
  [data-id="6c13de6"] > .elementor-container,
  [data-id="7ca3838f"] > .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 0 !important;
  }

  /* ALL header columns — auto, not 100% */
  [data-id="78b6518"],
  [data-id="c4064b5"],
  [data-id="27abed8"],
  [data-id="62a842b"],
  [data-id="685433ce"],
  [data-id="c5f9aec"],
  [data-id="9db8a21"],
  [data-id="91d64ca"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Logo column */
  [data-id="78b6518"],
  [data-id="c5f9aec"] {
    flex: 0 0 auto !important;
  }

  /* Nav + actions: fill remaining space, push right */
  [data-id="27abed8"],
  [data-id="9db8a21"] {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    display: flex !important;
  }
}/* End custom CSS */