body.elementor-page-136:not(.elementor-motion-effects-element-type-background), body.elementor-page-136 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}/* Start custom CSS *//* --- Sensual background with real-couple photo layers --- */
/* Replace 'couple1.jpg' etc with real absolute URLs on your server/CDN */

:root{
  --red-deep-1: #2a0004;
  --red-deep-2: #60060a;
  --red-deep-3: #8a0f10;
  --overlay-opacity: 0.38; /* 36-40% ~ 0.36 - 0.40; adjust here */
}

html,body{height:100%;margin:0;padding:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;}

.sensual-bg{
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 20px;
  color:#fff;
  /* base gradient (under all photo layers) */
  background: linear-gradient(180deg, var(--red-deep-1) 0%, var(--red-deep-2) 30%, var(--red-deep-3) 60%, #3b0000 100%);
}

/* generic bg photo layer */
.bg-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  filter:grayscale(8%) contrast(0.95) saturate(0.85) blur(0.8px);
  opacity:var(--overlay-opacity);
  mix-blend-mode:overlay; /* try overlay/soft-light for different vibes */
  transform-origin:center;
}

/* specific photo placements: tweak background-position for composition */
.bg-photo-1{
  background-image: url('couple1.jpg');
  background-position: 20% 25%;
  transform: scale(1.04);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 82%); /* subtle crop shape */
}

.bg-photo-2{
  background-image: url('couple2.jpg');
  background-position: 78% 18%;
  transform: scale(1.02) rotate(-2deg);
  opacity: calc(var(--overlay-opacity) - 0.02);
  mix-blend-mode: soft-light;
  clip-path: polygon(0 20%, 100% 6%, 100% 100%, 0 100%);
}

.bg-photo-3{
  background-image: url('couple3.jpg');
  background-position: 50% 70%;
  transform: scale(1.06);
  opacity: calc(var(--overlay-opacity) - 0.03);
  mix-blend-mode: overlay;
  filter:grayscale(12%) contrast(0.9) saturate(0.8) blur(1px);
  clip-path: ellipse(120% 60% at 50% 70%); /* soft vignette crop */
}

/* additional gradient layer on top to push red tone and vignette */
.overlay-gradient{
  z-index:2;
  background:
    radial-gradient(60% 50% at 50% 6%, rgba(255,200,200,0.035) 0%, rgba(0,0,0,0.5) 60%),
    linear-gradient(180deg, rgba(139,15,16,0.12) 0%, rgba(42,0,4,0.25) 55%, rgba(0,0,0,0.6) 100%);
  mix-blend-mode:multiply;
  opacity:1;
}

/* Content sits above the layers */
.content{
  position:relative;
  z-index:6;
  max-width:1100px;
  width:100%;
  text-align:center;
  padding:80px 20px;
  color:#fff;
}

/* small typographic touches */
.logo{font-weight:800;letter-spacing:1px;color:#ffdad6;margin-bottom:18px}
h1{font-size:clamp(28px,5vw,56px);line-height:1.02;margin-bottom:12px;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,0.6)}
p.lead{font-size:18px;color:#ffd6d2;opacity:.95;max-width:900px;margin:0 auto}

/* RESPONSIVE: hide some heavy photos on mobile and reduce opacity */
@media (max-width:1024px){
  .bg-photo-2{display:block; opacity:0.34}
  .bg-photo-3{opacity:0.32}
  :root{--overlay-opacity:0.36}
}

@media (max-width:720px){
  .bg-photo-1,.bg-photo-2{display:none;} /* keep just 1 subtle image on small screens */
  .bg-photo-3{
    display:block;
    opacity:0.30;
    background-position:50% 60%;
    transform:scale(1.1);
    mix-blend-mode:soft-light;
  }
  :root{--overlay-opacity:0.30}
  .content{padding:48px 14px}
}

/* Optional: utility to quickly toggle visibility of photos for A/B testing */
.sensual-bg[data-photos="minimal"] .bg-photo-1,
.sensual-bg[data-photos="minimal"] .bg-photo-2{
  display:none;
}/* End custom CSS */