/* Spacer for Phase 3 positioning */
#phase3-spacer {
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}
/* Ensure sliders remain visible in Container 3 during phase 3 */
.lmr-fully-expanded .lmr-container .elementor-widget-image-carousel,
.lmr-fully-expanded .lmr-container .elementor-image-carousel-wrapper,
.lmr-fully-expanded .lmr-container .elementor-image-carousel,
.lmr-fully-expanded .lmr-container .swiper,
.lmr-fully-expanded .lmr-container .swiper-wrapper,
.lmr-fully-expanded .lmr-container .swiper-slide {
  opacity: 1 !important;
  visibility: visible !important;
  height: 100% !important;
}

/* Keep images visible inside the slider */
.lmr-fully-expanded .lmr-container .swiper-slide img,
.lmr-fully-expanded .lmr-container .swiper-slide figure,
.lmr-fully-expanded .lmr-container .swiper-slide-image {
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Special styling for Container 3 in phase 3 */
.phase-3-container {
  background-color: transparent !important; 
  overflow: hidden !important;
}

/* Keep content visible, but make backgrounds transparent */
.phase-3-container * {
  background-color: transparent !important;
}

/* Important: Keep the mask element in the phase-3-container visible */
.phase-3-container .lmr-mask-container {
  visibility: hidden !important; /* Hide the mask but keep other content visible */
}

.phase-3-container .lmr-content {
  opacity: 1 !important; /* Keep content visible */
}

/* Hide any pseudo-elements that might have background colors */
.phase-3-container::before,
.phase-3-container::after {
  display: none !important;
}
/* Special styling for Container 4 in Phase 3 */
.content-after-mask.in-phase-3 {
  background-color: inherit !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
}
/* 
   Logo Mask Reveal - Completely Fixed Implementation
   Container 4 stays fixed until mask expansion completes
*/

/* ======== CORE LAYOUT STRUCTURE ======== */
/* Main isolation container */
.lmr-isolation {
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
  z-index: 9 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Container with fixed height - main element that goes sticky */
.lmr-container {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  will-change: transform, position !important;
  transition: none !important; /* No transitions to avoid jumps */
  background-color: white !important;
}

/* Sticky state - active during expansion */
.lmr-container.is-sticky {
  position: fixed !important;
  top: 60px !important; /* Match header height */
  left: 0 !important;
  width: 100% !important;
  z-index: 998 !important;
}

/* Combined container for SVG and content */
.lmr-combined-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Create a background shield to prevent any color from showing through gaps */
.lmr-combined-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 0;
}

/* Content container (slider or image) */
.lmr-content {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

/* Mask container for SVG */
.lmr-mask-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease-out !important;
  backface-visibility: hidden !important;
  will-change: opacity, transform !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: transparent !important;
  isolation: isolate !important;
  -webkit-backface-visibility: hidden !important;
}

/* Placeholder during sticky mode */
.lmr-placeholder {
  display: none;
  width: 100%;
  background-color: transparent !important;
}

/* Content below placeholder */
.lmr-content-below-placeholder {
  display: none;
  width: 100%;
  background-color: transparent;
}

/* ======== CONTENT BELOW HANDLING ======== */
/* Fixed state for content below */
.lmr-content-fixed {
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  z-index: 997 !important;
  transition: none !important; /* No transitions to avoid jumps */
  margin: 0 !important;
  padding-top: 0 !important;
  max-width: 100% !important;
  background-color: inherit !important; /* Ensure background color is preserved */
}

/* Specific fix for .content-after-mask */
.content-after-mask {
  will-change: transform, position !important;
  transition: none !important; /* No transitions to avoid jumps */
  /* Ensure no background bleed-through */
  background-color: inherit !important;
}

/* When content is fixed, force white background - stronger rule */
.content-after-mask.lmr-content-fixed {
  background-color: white !important;
}

/* Also fix background for Elementor containers */
.e-con.lmr-content-fixed,
.e-con-boxed.lmr-content-fixed,
.e-con-full.lmr-content-fixed {
  background-color: white !important;
}

/* Preserve white backgrounds during mask expansion */
.lmr-expanding ~ .content-after-mask,
.lmr-expanding ~ .e-con,
.lmr-expanding ~ .e-con-full,
.lmr-expanding ~ .e-con-boxed {
  background-color: inherit !important;
}

/* Ensure the content mask doesn't affect containers below */
.lmr-mask-container {
  isolation: isolate !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

/* ======== SVG MASK ELEMENTS ======== */
/* SVG element */
.lmr-mask-container svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Logo paths with correct transform origin */
[id^="logo-paths-"] {
  transform-origin: center center !important;
  transform-box: fill-box !important;
  will-change: transform !important;
}

/* ======== FULLY EXPANDED STATE ======== */
/* Basic styles for Phase 3 */
.lmr-fully-expanded .lmr-container {
  position: relative !important; /* Use relative position for natural document flow */
  left: 0 !important;
  width: 100% !important;
  z-index: 5 !important; /* Better z-index management */
  transform: none !important;
  transition: none !important;
  background-color: transparent !important; /* Hide blue background */
  overflow: hidden !important; /* Ensure nothing shows outside the container */
  top: 0 !important; /* Reset top to ensure natural document flow */
  height: auto !important; /* Allow natural height */
  visibility: visible !important; /* Force visibility */
  margin: 0 !important; /* Reset margins */
  padding: 0 !important; /* Reset padding */
}

/* Keep the combined container visible but transparent */
.lmr-fully-expanded .lmr-container .lmr-combined-container {
  background-color: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make sure content remains visible */
.lmr-fully-expanded .lmr-content {
  opacity: 1 !important;
  background-color: transparent !important;
  visibility: visible !important;
}

/* Only hide the mask color overlay */
.lmr-fully-expanded .lmr-combined-container::before {
  opacity: 0 !important;
  background-color: transparent !important;
}

/* Hide mask completely in Phase 3 */
.lmr-fully-expanded .lmr-mask-container {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
  z-index: -10 !important;
}

/* Basic styles for content after mask in Phase 3 */
.lmr-fully-expanded ~ .content-after-mask {
  position: absolute !important; /* Keep absolute position for Container 4 */
  left: 0 !important;
  z-index: 1 !important;
  margin: 0 !important;
  width: 100% !important;
  background-color: white !important;
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* Elementor containers in Phase 3 */
.lmr-fully-expanded ~ .e-con,
.lmr-fully-expanded ~ .e-con-full,
.lmr-fully-expanded ~ .e-con-boxed {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 1 !important;
  background-color: white !important;
  transition: none !important;
  animation: none !important;
}

/* ======== ELEMENTOR SPECIFIC FIXES ======== */
/* Fix for Elementor containers */
.e-con-full.lmr-content-fixed, 
.e-con-boxed.lmr-content-fixed,
.e-con.lmr-content-fixed {
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}

/* Elementor containers must have full height */
.lmr-elementor-slider-container > div,
.lmr-elementor-slider-container .elementor,
.lmr-elementor-slider-container .e-con {
  height: 100% !important;
}

/* Enhance slider containers to remove any padding */
.lmr-elementor-slider-container,
.lmr-rev-slider-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.lmr-elementor-slider-container > div,
.lmr-elementor-slider-container .elementor,
.lmr-elementor-slider-container .e-con,
.lmr-elementor-slider-container .elementor-section-wrap,
.lmr-elementor-slider-container .elementor-container,
.lmr-elementor-slider-container .elementor-column,
.lmr-elementor-slider-container .elementor-widget-wrap,
.lmr-elementor-slider-container .elementor-widget {
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

/* ======== SLIDER SPECIFIC FIXES ======== */
/* Elementor Image Carousel */
.elementor-widget.elementor-widget-image-carousel {
  height: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

.elementor-widget-container {
  height: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

.elementor-image-carousel-wrapper {
  height: 100% !important;
  width: 100% !important;
}

/* Swiper elements */
.swiper-container,
.swiper {
  height: 100% !important;
  width: 100% !important;
}

.swiper-wrapper {
  height: 100% !important;
  transition-duration: 400ms !important;
}

.swiper-slide {
  height: 100% !important;
  transition: transform 400ms ease !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Images in slides */
.swiper-slide img,
.swiper-slide figure,
.swiper-slide-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Navigation elements - ensure they're visible */
.elementor-swiper-button {
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: absolute !important;
  color: white !important;
  font-size: 30px !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-shadow: 0 0 3px rgba(0,0,0,0.5) !important;
}

.swiper-pagination,
.swiper-pagination-bullets {
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ======== REVOLUTION SLIDER FIXES ======== */
/* Revolution Slider elements */
.rev_slider_wrapper,
.rev_slider {
  height: 100% !important;
  max-height: none !important;
  width: 100% !important;
}

/* RevSlider navigation */
.tp-leftarrow,
.tp-rightarrow,
.tp-bullets {
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ======== FIXES FOR SLIDER REVOLUTION 7 ======== */
sr7-module {
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  overflow: visible !important;
}

sr7-adjuster,
sr7-content,
sr7-carousel {
  height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: visible !important;
}

sr7-module-bg {
  background-color: transparent !important;
  opacity: 0 !important;
}

/* Improved SR7 slide handling for the mask reveal */
sr7-slide {
  height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important; /* Ensure ALL slides are visible */
  transform: none !important; /* Disable transforms completely */
  overflow: visible !important;
}

/* Force images and backgrounds to be visible */
sr7-slide sr7-mask,
sr7-slide sr7-bg {
  height: 100% !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: visible !important;
}

/* Canvas rendering fixes */
sr7-slide sr7-bg canvas {
  height: 100% !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force slide transforms to none */
sr7-slide[style*="transform:"] {
  transform: none !important;
}

sr7-arrow,
sr7-bullets {
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: absolute !important;
}

/* Additional fixes for Revolution Slider 7 inside mask reveal */
.lmr-rev-slider-container sr7-module {
  cursor: default !important;
  overflow: visible !important;
}

/* Ensure transitions are visible through mask */
.lmr-mask-container + sr7-slide {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* Prevent animation transforms from breaking layout */
sr7-carousel[style*="transform:"] {
  transform: none !important;
}

/* ======== PHASE-SPECIFIC STYLES ======== */
/* Body class during expansion phase */
body.lmr-expansion-active {
  overflow-x: hidden !important; /* Prevent horizontal scrolling during transitions */
}

/* Expanding state */
.lmr-expanding .lmr-mask-container {
  z-index: 100 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out !important;
}

/* Transition state - during phase changes */
.lmr-transitioning .lmr-container {
  transition: top 0.25s ease-out, margin-top 0.25s ease-out !important;
}

.lmr-transitioning .lmr-content-below-placeholder {
  transition: height 0.25s ease-out !important;
}

.lmr-transitioning .content-after-mask,
.lmr-transitioning.content-after-mask {
  transition: top 0.25s ease-out, position 0.15s ease-out !important;
}

/* Specific transition adjustments for scroll direction */
.lmr-scrolling-up.lmr-transitioning .lmr-container {
  transition: top 0.15s ease-in, margin-top 0.15s ease-in !important; /* Faster when scrolling up */
}

.lmr-scrolling-down.lmr-transitioning .lmr-container {
  transition: top 0.25s ease-out, margin-top 0.25s ease-out !important; /* Smoother when scrolling down */
}

/* Ensure fixed position during transitions */
.lmr-transitioning .lmr-container.is-sticky {
  position: fixed !important;
  top: 60px !important; /* Match header height */
}

/* Scroll direction specific transitions */
.lmr-scrolling-up .lmr-mask-container {
  transition-timing-function: ease-in !important;
  transition-duration: 0.15s !important; /* Faster transition when scrolling up */
}

.lmr-scrolling-down .lmr-mask-container {
  transition-timing-function: ease-out !important;
  transition-duration: 0.3s !important; /* Slower fade when scrolling down */
}

/* Improve mask transition when scrolling up in Phase 2 */
body.lmr-scrolling-up [data-logo-phase="2"] .lmr-mask-container {
  opacity: 1 !important; /* Always fully visible when scrolling up */
  visibility: visible !important;
  display: block !important;
}

/* Specific styling for transitions */
body.lmr-transitioning .lmr-mask-container {
  transition: transform 0.15s linear, opacity 0.2s ease-in-out !important;
}

/* SVG logo paths transition */
[id^="logo-paths-"] {
  transition: transform 0.05s linear !important;
}

/* Ease the mask opacity transition */
.lmr-mask-container {
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.2s ease-out !important;
  will-change: opacity, visibility, transform !important;
}

/* Ensure smooth transitions between phase 3 and phase 2 when scrolling up */
.lmr-fully-expanded.lmr-transitioning .lmr-container {
  transition: margin-top 0.25s ease-in-out !important;
}

/* Smooth transition when returning to expanding state from fully expanded */
.lmr-expanding.lmr-transitioning .lmr-container {
  transition: position 0.25s ease-out, margin-top 0.25s ease-out !important;
}

/* Fully expanded state */
.lmr-fully-expanded + .lmr-content-below-placeholder {
  display: none !important; /* Hide placeholder in Phase 3 */
  height: 0 !important; /* Height will be set dynamically by JS */
  transition: height 0.2s ease-out !important;
  background-color: white !important;
  position: relative !important;
}

/* Style for containers in normal document flow during phase 3 */
.lmr-fully-expanded ~ .content-after-mask {
  position: relative !important;
  z-index: 1 !important;
  transition: none !important;
  background-color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fix for Elementor containers specifically in phase 2 and 3 */
.lmr-expanding ~ .e-con,
.lmr-expanding ~ .e-con-full,
.lmr-expanding ~ .e-con-boxed {
  z-index: 997 !important;
}

/* Smooth transition in phase 3 */
.lmr-fully-expanded ~ .e-con,
.lmr-fully-expanded ~ .e-con-full,
.lmr-fully-expanded ~ .e-con-boxed {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin-top: 0 !important;
  z-index: 1 !important;
}

/* Special handling for scrolling back to the top */
.lmr-scrolling-up .content-after-mask:not(.lmr-content-fixed) {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  transition: none !important;
}

/* Ensure all elements are properly reset at the top */
.lmr-scrolling-up:not(.lmr-expanding):not(.lmr-fully-expanded) .lmr-container {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin-top: 0 !important;
  transition: none !important;
  background-color: white !important;
}

/* Force content below to return to normal flow */
.lmr-scrolling-up:not(.lmr-expanding):not(.lmr-fully-expanded) ~ .content-after-mask {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  z-index: auto !important;
  background-color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Fix for container backgrounds not being preserved when position fixed is removed */
.content-after-mask {
  background-color: inherit !important;
}

/* Hidden overflow to prevent any gaps during transition */
.lmr-transitioning .lmr-isolation {
  overflow: hidden !important;
}

/* Ensure the slider doesn't show purple in Phase 1 or when scrolling back up */
.lmr-scrolling-up:not(.lmr-expanding):not(.lmr-fully-expanded) .lmr-container {
  background-color: white !important;
}

/* Disable transitions during the critical phase change */
.lmr-transitioning.lmr-fully-expanded .lmr-container,
.lmr-transitioning.lmr-fully-expanded ~ .content-after-mask,
.lmr-transitioning.lmr-fully-expanded + .lmr-content-below-placeholder {
  transition: none !important;
  animation: none !important;
}

/* Prevent any animations in Elementor that might interfere */
.lmr-fully-expanded ~ .e-con,
.lmr-fully-expanded ~ .e-con-full,
.lmr-fully-expanded ~ .e-con-boxed {
  transition: none !important;
  animation: none !important;
}

/* Ensure placeholder has no transitions */
.lmr-content-below-placeholder {
  transition: none !important;
  animation: none !important;
}

/* Prevent white flash during Phase 2 to Phase 1 transition */
.lmr-scrolling-up.lmr-expanding .lmr-container {
  animation: none !important;
  transition: none !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  will-change: position !important;
}

/* Prevent any flash or jump when transitioning back to normal flow */
.lmr-scrolling-up:not(.lmr-fully-expanded):not(.lmr-expanding) .lmr-container {
  transition: none !important;
  animation: none !important;
}

/* Ensure mask is fully opaque when returning to Phase 1 */
.lmr-scrolling-up .lmr-mask-container {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

/* Ensure smooth transform transitions for the mask scale */
[id^="logo-paths-"] {
  will-change: transform !important;
  transform-origin: center center !important;
  transform-box: fill-box !important;
  transition: transform 0.1s linear !important; /* Slightly faster transition for responsiveness */
}

/* Make transitions snappier when scrolling up to Phase 2 */
body.lmr-scrolling-up.lmr-transitioning [id^="logo-paths-"] {
  transition: transform 0.05s linear !important; /* Even faster when actively transitioning */
}

/* Fix for Safari/iOS rendering */
.lmr-container {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

/* Use absolute positioning during transitions to prevent flash */
.lmr-transitioning.lmr-scrolling-up .lmr-isolation {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

/* Style for the temporary clone during scrolling back up */
[id^="temp-clone-"] {
  will-change: opacity !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  transition: opacity 0.3s ease-out !important;
  pointer-events: none !important;
}

/* Prevent flickering during transition from Phase 2 to Phase 1 */
.lmr-scrolling-up .lmr-container,
.lmr-scrolling-up .content-after-mask {
  will-change: opacity, transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Additional fixes for edge cases */
body:not(.lmr-expansion-active) .lmr-container {
  transition: none !important;
}

/* Force hardware acceleration during transitions */
.lmr-transitioning.lmr-scrolling-up,
.lmr-transitioning.lmr-scrolling-up * {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Prevent any hidden whitespace during phase transitions */
html, body {
  background-color: #fff !important;
  scroll-behavior: auto !important; /* Override any smooth scroll settings during transition */
}

/* Ensure the slider SVG mask doesn't flicker */
.lmr-mask-container svg {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Transition overlay styling - updated for smooth scrolling */
[id^="lmr-transition-overlay-"] {
  pointer-events: none !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  will-change: opacity !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  z-index: 9999 !important;
  background-color: #fff !important;
  transition: opacity 0.4s ease-out !important;
}

/* Ensure overlay covers everything */
[id^="lmr-transition-overlay-"] * {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Ensure mask is visible in overlay */
[id^="lmr-transition-overlay-"] .lmr-mask-container {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* Hide any transitions during the overlay period */
body:has([id^="lmr-transition-overlay-"]) .lmr-container,
body:has([id^="lmr-transition-overlay-"]) .content-after-mask {
  transition: none !important;
}

/* Fix for Firefox which doesn't support :has */
.lmr-transition-active .lmr-container,
.lmr-transition-active .content-after-mask {
  transition: none !important;
}

/* Fix for any edge cases with position:fixed elements */
@media screen {
  .lmr-scrolling-up:not(.lmr-expanding):not(.lmr-fully-expanded) {
    z-index: auto !important;
  }
  
  /* Ensure the transition overlay is above everything */
  [id^="lmr-transition-overlay-"] {
    z-index: 99999 !important; 
  }
  
  /* Additional fix for mobile view to ensure all content is visible */
  body.lmr-mobile-view .lmr-isolation,
  body.lmr-mobile-view .lmr-container,
  body.lmr-mobile-view .lmr-combined-container,
  body.lmr-mobile-view .lmr-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Fix spacing between slider and content */
  body.lmr-mobile-view .lmr-isolation + *,
  body.lmr-mobile-view .content-after-mask {
    margin-top: 20px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Active transition class for body - no scroll jank */
body.lmr-transition-active {
  overscroll-behavior: none !important; /* Prevent bounce effects during transition */
}

/* Prevent scrollbar jumpiness during transition */
body.lmr-transition-active {
  overflow-y: scroll !important; /* Maintain scrollbar width even during transition */
}

/* Add minimal width to scrollbar to avoid layout shifts */
::-webkit-scrollbar {
  width: 10px !important; /* Consistent width */
}


/* Mobile fixes for positioning issues */
@media only screen and (max-width: 767px) {
  /* Fixed mobile positioning for all elements */
  #home-third-section,
  .content-after-mask,
  div.content-after-mask,
  .lmr-isolation + div,
  .lmr-isolation + section,
  .lmr-isolation + * {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 20px !important;
    z-index: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    background-color: inherit !important;
  }
  
  /* Force the slider to render with proper height */
  .lmr-isolation {
    margin-bottom: 0 !important;
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
  }
  
  /* Ensure normal document flow */
  .lmr-isolation,
  .lmr-container,
  .lmr-combined-container {
    position: relative !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 1 !important;
  }
  
  /* Force all placeholder elements to be collapsed */
  .lmr-placeholder,
  .lmr-content-below-placeholder,
  [id^="placeholder-content-below-"] {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
  
  /* Ensure mask properly displays on mobile */
  .lmr-isolation:not(.lmr-fully-expanded) .lmr-mask-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Disable all transition effects on mobile */
  .lmr-isolation *,
  .lmr-container *,
  .content-after-mask,
  .lmr-content-below-placeholder {
    transition: none !important;
    animation: none !important;
  }
  
  /* Override any fixed positioning classes */
  .lmr-content-fixed,
  .is-sticky,
  .elementor-sticky--active {
    position: static !important;
  }
  
  /* Fix for any overlaying content */
  body.lmr-expansion-active,
  body.lmr-transitioning,
  body.lmr-scrolling-up,
  body.lmr-scrolling-down {
    overflow: visible !important;
  }
  
  /* MOBILE-ONLY SLIDER - COMPLETELY DISABLE PLUGIN EFFECTS */
  .mobile-only-slider .lmr-isolation,
  .mobile-only-slider.lmr-isolation {
    position: static !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto !important;
    padding: 0 !important;
    z-index: 1 !important;
    background-color: inherit !important;
  }
  
  .mobile-only-slider .lmr-container,
  .mobile-only-slider.lmr-container {
    position: static !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background-color: inherit !important;
    transform: none !important;
    transition: none !important;
    margin: 0 !important;
    padding: 0 !important;
    will-change: auto !important;
  }
  
  /* Completely disable mask container for mobile-only slider */
  .mobile-only-slider .lmr-mask-container,
  .mobile-only-slider.lmr-mask-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -999 !important;
    height: 0 !important;
  }
  
  /* Force mobile-only slider to normal document flow */
  .mobile-only-slider .lmr-combined-container,
  .mobile-only-slider.lmr-combined-container {
    position: relative !important;
    height: auto !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio by default */
    margin: 0 !important;
    background-color: inherit !important;
  }
  
  /* Ensure content displays properly */
  .mobile-only-slider .lmr-content,
  .mobile-only-slider.lmr-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    background-color: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Force slider to render properly */
  .mobile-only-slider .elementor-widget-image-carousel,
  .mobile-only-slider .elementor-image-carousel-wrapper,
  .mobile-only-slider .swiper,
  .mobile-only-slider .swiper-container,
  .mobile-only-slider .swiper-wrapper,
  .mobile-only-slider .swiper-slide {
    position: relative !important;
    overflow: visible !important;
    height: 100% !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }
  
  /* NEW: ENHANCED FIXES FOR SHORTCODE IN MOBILE-ONLY SLIDER */
  /* Fix for the background-color in the shortcode context */
  .elementor-element.elementor-element-ba1a7bf.e-con-full.mobile-only-slider {
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }
  
  /* Fix child elements background */
  .elementor-element.mobile-only-slider * {
    background-color: transparent !important;
  }
  
  /* Fix the e-flex issue */
  .mobile-only-slider.e-flex {
    display: block !important;
    flex-direction: unset !important;
  }
  
  /* Fix shortcode container */
  .mobile-only-slider .elementor-widget-shortcode .elementor-widget-container,
  .mobile-only-slider .elementor-widget-shortcode .elementor-shortcode {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }
  
  /* Ensure content inside shortcode is visible */
  .mobile-only-slider .elementor-shortcode .lmr-isolation,
  .mobile-only-slider .elementor-shortcode .lmr-container,
  .mobile-only-slider .elementor-shortcode .lmr-content {
    background-color: transparent !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Fix the pagination and navigation for shortcode context */
  .mobile-only-slider .elementor-shortcode .swiper-pagination,
  .mobile-only-slider .elementor-shortcode .elementor-swiper-button {
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Ensure white background for slider content */
  .mobile-only-slider .elementor-shortcode .lmr-content,
  .mobile-only-slider .elementor-shortcode .swiper-slide {
    background-color: #ffffff !important;
  }
  
  /* Override any remaining purple/colored backgrounds */
  .mobile-only-slider .elementor-element.e-flex,
  .mobile-only-slider.e-con-full,
  .mobile-only-slider.elementor-element {
    background: none !important;
    background-color: transparent !important;
  }
}