/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1764139935
Updated: 2025-11-26 06:52:15
*/

:root{
  --kb-scale-end: 1.45;
  --kb-panY-end:  -120px;
  --vw: calc(100vw - (100vw - 100%));
}

/* -------------------------------------------------------
   GLOBAL: stop horizontal scroll everywhere (safe)
------------------------------------------------------- */
html, body, #page, .site{
  width: 100%;
  max-width: var(--vw);
  overflow-x: clip !important;
}
@supports not (overflow-x: clip){
  html, body, #page, .site{ overflow-x: hidden !important; }
}

/* Elementor rows/inners must be allowed to shrink & never push wider */
.elementor,
.elementor .elementor-section,
.elementor .elementor-container,
.elementor .e-con,
.elementor .e-con-inner{
  box-sizing: border-box;
  min-width: 0 !important;
  max-width: var(--vw) !important;
  overflow-x: clip !important;
}

/* Motion-effects wrappers sometimes overflow horizontally */
.elementor .elementor-motion-effects-parent,
.elementor .elementor-motion-effects-container{
  overflow-x: clip !important;
}

/* Media/widgets should never exceed their parent width */
img, picture, video, iframe,
.elementor .elementor-widget-container{
  max-width: 100% !important;
}

/* -------------------------------------------------------
   SCROLLYTELLING – single sticky stage + stacked bgs
------------------------------------------------------- */
.pin-wrap{ position: relative; }

.pin-wrap .pin-stage{
  position: sticky;
  top: 0;
  left: 0; right: 0;
  width: auto;
  height: 100vh;
  z-index: 0;
  overflow-y: visible;
  overflow-x: clip;
}
@supports (-webkit-touch-callout:none){
  .pin-wrap .pin-stage{ position: -webkit-sticky; height: 100svh; }
}

.pin-wrap .pin-stage .pin-bg{
  position: absolute; inset: 0;
  pointer-events: none;
  transform-origin: center;
  --scale: 1; --tx: 0px; --ty: 0px; --alpha: 0;
  transform: translate3d(var(--tx), var(--ty), 0) scale(var(--scale));
  opacity: var(--alpha);
  will-change: transform, opacity;
}
.pin-wrap .pin-stage .pin-bg img,
.pin-wrap .pin-stage .pin-bg > picture,
.pin-wrap .pin-stage .pin-bg > img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pin-wrap .pin-stage .pin-bg:first-child{ --alpha: 1; }

/* -------------------------------------------------------
   COPY COLUMN(S)
------------------------------------------------------- */
.pin-wrap .pin-copies{
  position: relative; z-index: 2; display: block;
}

.pin-wrap .pin-copy{
  position: relative;
  margin-inline: auto;
  width: clamp(520px, 56ch, 70vw);
  max-width: 860px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  min-height: 200vh;
  padding-block: 16vh 18vh;
}

@media (min-width: 768px){
  .pin-wrap .pin-left  { transform: translateX(-6vw); }
  .pin-wrap .pin-right { transform: translateX( 6vw); }
}

.pin-wrap, .pin-wrap .pin-stage, .pin-wrap .pin-copies, .pin-wrap .pin-copy{
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.pin-wrap .pin-copy .elementor-widget,
.pin-wrap .pin-copy .elementor-widget-container{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* -------------------------------------------------------
   BREAKPOINTS (desktop + tablet)
------------------------------------------------------- */
@media (max-width: 1023px){
  .pin-wrap .pin-copy{
    min-width: 0 !important;
    width: calc(100% - 24px) !important;
    max-width: 560px !important;
    min-height: 160vh;
    padding-block: 12vh 14vh;
    margin: 0 auto 8vh auto !important;
    transform: none;
    box-sizing: border-box !important;
  }
  .pin-wrap .pin-stage{ height: 100svh; }
}

@media (min-width: 1024px) and (max-width: 1599px){
  .pin-wrap .pin-copy{
    width: clamp(520px, 56ch, 70vw);
    max-width: 720px;
  }
}

@media (min-width: 1600px){
  .pin-wrap .pin-copy{
    width: clamp(600px, 40vw, 860px);
    max-width: 860px;
  }
}

@media (prefers-reduced-motion: reduce){
  .pin-wrap .pin-stage .pin-bg{ transform: none; }
}

@media (min-width: 768px) and (max-width: 1024px){
  .pin-wrap .pin-copy{
    width: clamp(520px, 72vw, 720px);
    max-width: 720px;
    margin-inline: auto;
  }
  .pin-wrap .pin-left,
  .pin-wrap .pin-right{
    transform: none !important;
  }
}

.pin-wrap .pin-copy{
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

@media (min-width: 768px) and (max-width: 1400px){
  .pin-wrap .pin-copy{
    width: clamp(560px, 72vw, 760px);
    max-width: 760px;
    margin-inline: auto;
  }
  .pin-wrap .pin-left,
  .pin-wrap .pin-right{ transform: none !important; }
}

@media (min-width: 1024px){
  .pin-wrap .pin-copy{ min-width: 520px; }

  .pin-wrap .pin-copies > .pin-copy:nth-last-of-type(-n+2){
    min-width: 560px;
    width: min(72vw, 760px);
    max-width: 760px;
    margin-inline: auto;
    flex: 0 0 auto;
    transform: none;
  }
}

.elementor .elementor-motion-effects-parent,
.elementor .elementor-motion-effects-container{
  max-width: calc(100vw - (100vw - 100%)) !important;
  overflow-x: clip !important;
}

@media (max-width: 1023px){
  .pin-wrap .pin-copy .elementor-heading-title,
  .pin-wrap .pin-copy h1,
  .pin-wrap .pin-copy h2,
  .pin-wrap .pin-copy h3{
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }
  .pin-wrap .pin-copy{
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* =======================================================
   MOBILE (single source of truth)
   - prevents narrow columns (viewport-based width)
   - removes offsets (pin-left/pin-right/m-left/m-right)
   - disables motion-effect transforms in scrolly copy
   - removes Elementor’s crazy per-widget padding (e.g. 13em)
   - adds real inner padding on the white card
======================================================= */
@media (max-width: 1023px){

  /* Use viewport width so Elementor container width can't squeeze us */
  .pin-wrap{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    overflow-x: visible !important;
  }

  .pin-wrap .pin-stage,
  .pin-wrap .pin-copies{
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  .pin-wrap .pin-copies{
    display: block !important;
  }

  /* Panel width (stable) */
  .pin-wrap .pin-copy{
    width: min(calc(100vw - 32px), 560px) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    margin: 0 auto 8vh auto !important;
    box-sizing: border-box !important;

    /* Kill lateral offsets that mess with margins */
    left: auto !important;
    right: auto !important;
    transform: none !important;
    translate: 0 0 !important;

    /* REAL inner spacing (this is what you want) */
    padding: 18px 18px !important;
  }

  /* If Elementor applies the white card background on the container element itself */
  .pin-wrap .pin-copy.elementor-element{
    padding: 18px 18px !important;
    box-sizing: border-box !important;
  }

  /* Remove bad alternation helper classes on mobile */
  .pin-wrap .pin-left,
  .pin-wrap .pin-right,
  .pin-wrap .m-left,
  .pin-wrap .m-right{
    transform: none !important;
    translate: 0 0 !important;
    left: auto !important;
    right: auto !important;
  }

  /* Remove Elementor's per-widget padding that squeezes text */
  .pin-wrap .pin-copy .elementor-element,
  .pin-wrap .pin-copy .elementor-widget,
  .pin-wrap .pin-copy .elementor-widget-container{
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Disable motion-effect transforms inside scrolly copy on mobile */
  .pin-wrap .elementor-motion-effects-parent,
  .pin-wrap .elementor-motion-effects-container,
  .pin-wrap .elementor-motion-effects-element{
    transform: none !important;
    translate: 0 0 !important;
    will-change: auto !important;
  }

  /* Paragraph spacing so padding feels right */
  .pin-wrap .pin-copy p{
    margin: 0 0 0.9em 0 !important;
  }
  .pin-wrap .pin-copy p:last-child{
    margin-bottom: 0 !important;
  }
}