.elementor-kit-48{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--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;font-family:"Oktah Round", Sans-serif;font-weight:500;}.elementor-kit-48 e-page-transition{background-color:#FFBC7D;}.elementor-kit-48 a{font-family:"Oktah Round", Sans-serif;}.elementor-kit-48 h1{font-family:"Oktah Round", Sans-serif;font-weight:700;}.elementor-kit-48 h2{font-family:"Oktah Round", Sans-serif;font-weight:700;}.elementor-kit-48 h3{font-family:"Oktah Round", Sans-serif;font-weight:700;}.elementor-kit-48 h4{font-family:"Oktah Round", Sans-serif;}.elementor-kit-48 h5{font-family:"Oktah Round", Sans-serif;}.elementor-kit-48 h6{font-family:"Oktah Round", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing: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;}@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 *//* GLOBAL: forbid horizontal page scroll + ignore horizontal gestures */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  touch-action: pan-y !important; /* allow vertical only */
  position: relative;
}

/* Elementor wrappers: never let children overflow the viewport width */
.elementor,
.elementor-section,
.elementor-container,
.elementor-widget-wrap {
  max-width: 100vw !important;
  overflow-x: clip; /* modern, safer than hidden */
}

/* IMAGES/IFRAMES safety: never wider than screen */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* OPTIONAL: if any element uses 100vw (which can include scrollbar), normalize it */
*[style*="100vw"] { width: 100% !important; }

.vimi-step {
  opacity: 0.15;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.vimi-step.is-active {
  opacity: 1;
  transform: translateY(0);
}
.vimi-step {
  transform: translateY(12px);
}

/* ============================================================
   1. GLOBAL FIX — allow flex children to shrink & wrap properly
   ============================================================ */

.wheel-section,
.wheel-inner,
.wheel-left,
.wheel-right,
.wheel-container,
.wheel-item {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}


/* ============================================================
   2. LAYOUT: TWO COLUMN SECTION
   ============================================================ */

.wheel-inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;

  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;

  overflow: visible !important;
  position: relative;
}

/* Left column (sticky JS controls pinning) */
.wheel-left {
  flex: 0 0 35%;
  position: relative;
  overflow: visible !important;
}

/* Left content being pinned */
.left-pin {
  position: relative;
}

/* Right column — MUST be allowed to shrink */
.wheel-right {
  flex: 1 1 auto;
  overflow: visible !important;
  min-width: 0 !important; /* THIS IS CRITICAL */
}


/* ============================================================
   3. RIGHT-SIDE WHEEL ITEMS (SCROLLING CARDS)
   ============================================================ */

.wheel-container {
  width: 100%;
  padding: 100px 0;
}

/* Each scrolling card */
.wheel-item {
  width: 100% !important;     /* Fills the right column */
  max-width: 100% !important;


  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);

  /* FIX TEXT WRAPPING */
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;

  /* Default scale/opacity (wheel JS updates these) */
  transform: scale(0.9);
  opacity: 0.3;
  transition: transform 0.15s linear, opacity 0.15s linear;
  will-change: transform, opacity;
}


/* ============================================================
   4. MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .wheel-inner {
    flex-direction: column;
    padding: 0 16px;
  }

  .wheel-left,
  .wheel-right {
    flex: 1 1 100%;
  }

  .left-pin {
    position: static !important;
    top: auto !important;
  }

  .wheel-item {
    margin: 24px 0;
  }
}
/* Header default state: transparent */
.elementor-element-6266fd5, .elementor-element-d21ede1 {
    background-color: transparent;
    transition: background-color 0.25s ease;
}

/* Header after scrolling 50px */
.elementor-element-d21ede1.header-scrolled, .elementor-element-6266fd5.header-scrolled {
    background-image: none !important;
    background-color: #FFFFFF !important;
}

/* Change ALL text inside the header */
.elementor-element-d21ede1.header-scrolled,
.elementor-element-d21ede1.header-scrolled .e-n-menu-title-text, .elementor-element-6266fd5.header-scrolled,
.elementor-element-6266fd5.header-scrolled .e-n-menu-title-text {
    color: #4F96FF !important;
    fill: #4F96FF !important; /* helps SVG icons */

}
.elementor-element-6266fd5.header-scrolled,.elementor-element-d21ede1.header-scrolled {
    background-color: #ffffff !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #DFDCF0 !important;
}
.elementor-element-6266fd5.header-scrolled img,.elementor-element-d21ede1.header-scrolled img {
    filter: brightness(0) saturate(100%) 
            invert(50%) 
            sepia(73%) 
            saturate(3116%) 
            hue-rotate(199deg) 
            brightness(100%) 
            contrast(101%);
}
/* Default: show mobile1, hide mobile2 */
.mobile1 {
  display: flex;
}

.mobile2 {
  display: none;
}

/* Header1 gets white bg + border when scrolled a bit */
.mobile1.header1-scrolled, .elementor-element-9fa823a.header-scrolled {
  background-color: #ffffff !important;
  border-bottom: 1px solid #DFDCF0 !important;
}
.mobile1.header1-scrolled img, .elementor-element-9fa823a.header-scrolled img{
    filter: brightness(0) saturate(100%)
            invert(50%) 
            sepia(73%) 
            saturate(3116%) 
            hue-rotate(199deg) 
            brightness(100%) 
            contrast(101%);
}

/* Normal state (transparent header), restore original logo */
.mobile1 img {
    filter: none;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Oktah Round';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://heyvimi.com/wp-content/uploads/2025/11/Oktah-Round-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Oktah Round';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://heyvimi.com/wp-content/uploads/2025/11/Oktah-Round-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Oktah Round';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://heyvimi.com/wp-content/uploads/2025/11/Oktah-Round-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Oktah Round';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://heyvimi.com/wp-content/uploads/2025/11/Oktah-Round-Bold.woff2') format('woff2');
}
/* End Custom Fonts CSS */