.elementor-8553 .elementor-element.elementor-element-5049f53{--display:flex;}body.elementor-page-8553:not(.elementor-motion-effects-element-type-background), body.elementor-page-8553 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}:root{--page-title-display:none;}/* Start custom CSS *//* ============================================
   SUNITA'S HAIR & BEAUTY - ABOUT US PAGE CSS
   Custom page-level styles (Elementor → Page Settings → Custom CSS)
   ============================================ */

/* PINK SCROLLBAR */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #fff8fa;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #fff8fa;
  border-radius: 999px;
  background: rgba(237, 20, 91, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(237, 20, 91, 0.5);
}

html {
  scrollbar-color: rgba(237, 20, 91, 0.3) #fff8fa;
  scrollbar-width: thin;
}

/* LOTUS WATERMARK BACKGROUND */

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 520px;
  height: 520px;
  background-image: url("https://neonsnow.com.au/wp-content/uploads/2026/08/Sunitas-Lotus-scaled.png");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.04;
  pointer-events: none;
  animation: sunita-lotus-drift 28s ease-in-out infinite alternate;
}

body::before {
  top: 8%;
  right: -80px;
  transform: rotate(-12deg);
}

body::after {
  bottom: 12%;
  left: -90px;
  transform: rotate(15deg);
}

@keyframes sunita-lotus-drift {
  0% {
    opacity: 0.04;
    transform: rotate(-12deg) translateY(0);
  }
  50% {
    opacity: 0.06;
  }
  100% {
    opacity: 0.04;
    transform: rotate(-8deg) translateY(-20px);
  }
}

/* GLOBAL PAGE BACKGROUND */

body {
  background: #fffbfd;
}

/* ============================================
   ENTRANCE ANIMATIONS
   Content is visible by default.
   The JS adds .animate-ready to body once loaded,
   which hides elements. Then .is-visible reveals them.
   This guarantees content shows if JS fails.
   ============================================ */

body.animate-ready [data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

body.animate-ready [data-animate="fade-left"] {
  transform: translateX(-30px);
}

body.animate-ready [data-animate="fade-right"] {
  transform: translateX(30px);
}

body.animate-ready [data-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  body.animate-ready [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body::before,
  body::after {
    animation: none;
  }
}/* End custom CSS */