.elementor-kit-6{--e-global-color-primary:#2F2F3D;--e-global-color-secondary:#000000;--e-global-color-text:#2D2D3D;--e-global-color-accent:#804D83;--e-global-color-b8f1d7c:#CA8813;--e-global-color-215d9f9:#FFA800;--e-global-color-3f8f04d:#FFFFFF;--e-global-color-ee7c7b2:#8E238C;--e-global-typography-primary-font-family:"lato";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"lato";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Engravers";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Binjay";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:"lato", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.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);}@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 *//* Target your right container (keep both if you like) */
.elementor-element[data-id="168c498"],
.pillows-overlay {
  --float: 20px;     /* how far to bob */
  --dur: 3.8s;       /* speed */
  --bleed: -20px;     /* extra overscan; make this >= --float */
  /* set these only if you previously used X/Y positioning */
  --x: 850px;        /* starting X from Elementor (optional) */
  --y: 100px;        /* starting Y from Elementor (optional) */

  position: relative;
  overflow: hidden;  /* keep overscan hidden around edges */
}

/* Oversized ::before so its edges never show while moving */
.elementor-element[data-id="168c498"]::before,
.pillows-overlay::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--bleed));
  right: calc(-1 * var(--bleed));
  bottom: calc(-1 * var(--bleed));
  left: calc(-1 * var(--bleed));

  /* keep the SAME visual baseline even though the box is larger */
  background-position: calc(var(--x) + var(--bleed)) calc(var(--y) + var(--bleed)) !important;

  will-change: transform;
  animation: pillows-float var(--dur)
             cubic-bezier(0.45, 0.05, 0.55, 0.95)
             infinite;
  transform: translateZ(0); /* nudge GPU compositing */
}

/* Smooth float (GPU) */
@keyframes pillows-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(calc(-1 * var(--float))); }
  100% { transform: translateY(0); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .elementor-element[data-id="168c498"]::before,
  .pillows-overlay::before {
    animation: none !important;
    transform: none !important;
  }
}
/* ======================================
   FLOATY IMAGE EFFECT (for .floaty-img)
   ====================================== */

.floaty-img img {
  display: block;
  will-change: transform;
  animation: floaty-motion 3.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  transform: translateZ(0); /* ensure GPU compositing */
}

/* Optional: control the amount of float & speed via CSS vars */
.floaty-img {
  --float-amount: 20px;   /* how high it floats */
  --float-speed: 3.8s;    /* animation duration */
}

.floaty-img img {
  animation-duration: var(--float-speed);
}

/* Keyframes for smooth up–down float */
@keyframes floaty-motion {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(calc(-1 * var(--float-amount))); }
  100% { transform: translateY(0); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .floaty-img img {
    animation: none !important;
    transform: none !important;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Engravers';
	font-display: auto;
	src: url('https://slumberland.co.za/wp-content/uploads/2025/08/Engravers-Gothic-BT-Font.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Binjay';
	font-display: auto;
	src: url('https://slumberland.co.za/wp-content/uploads/2025/08/Binjay.ttf') format('truetype');
}
/* End Custom Fonts CSS */