html[data-domain] .at-hero3-sec .at-hr3-shape2,
html[data-domain] .at-hero3-sec .at-hr3-shape2-right {
  background-image: var(--hero-shape2, url('https://cdn.4hosting.net/4notify.net/assets/images/shape7.webp'));
}

html[data-domain] .at-hero3-sec .at-hr3-shape3,
html[data-domain] .at-hero3-sec .at-hr3-shape3-right {
  background-image: var(--hero-shape3, url('https://cdn.4hosting.net/4notify.net/assets/images/shape8.webp'));
}

html[data-domain="4appointments.net"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape2.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape14.webp');
}
html[data-domain="4appointments.net"] .at-hero3-sec { background-color: #3a0e2a; }

html[data-domain="4b2b.com"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape7.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape8.webp');
}
html[data-domain="4b2b.com"] .at-hero3-sec { background-color: #01042f; }

html[data-domain="4contracts.eu"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape19.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape7.webp');
}
html[data-domain="4contracts.eu"] .at-hero3-sec { background-color: #fff5f5; }

html[data-domain="4database.net"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape8.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape13.webp');
}
html[data-domain="4database.net"] .at-hero3-sec { background-color: #fdf8f0; }

html[data-domain="4invoices.com"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape7.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape19.webp');
}
html[data-domain="4invoices.com"] .at-hero3-sec { background-color: #0c1e3a; }

html[data-domain="4marketingonline.com"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape18.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape13.webp');
}
html[data-domain="4marketingonline.com"] .at-hero3-sec { background-color: #f9fafb; }

html[data-domain="4myprojects.net"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape7.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape19.webp');
}
html[data-domain="4myprojects.net"] .at-hero3-sec { background-color: #f5f3ff; }

html[data-domain="4mystaff.net"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape7.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape18.webp');
}
html[data-domain="4mystaff.net"] .at-hero3-sec { background-color: #0e3a3a; }

html[data-domain="4notify.net"],
html[data-domain="4notify.com"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape13.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape14.webp');
}
html[data-domain="4notify.net"] .at-hero3-sec,
html[data-domain="4notify.com"] .at-hero3-sec { background-color: #2a0e14; }

html[data-domain="4softcrm.com"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape2.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape19.webp');
}
html[data-domain="4softcrm.com"] .at-hero3-sec { background-color: #fffdf5; }

html[data-domain="4softerp.com"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape14.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape7.webp');
}
html[data-domain="4softerp.com"] .at-hero3-sec { background-color: #eff6ff; }

html[data-domain="4softhr.com"] {
  --hero-shape2: url('https://cdn.4hosting.net/4notify.net/assets/images/shape14.webp');
  --hero-shape3: url('https://cdn.4hosting.net/4notify.net/assets/images/shape18.webp');
}
html[data-domain="4softhr.com"] .at-hero3-sec { background-color: #f0fdf4; }

/* NotifyHero dashboard mockup — responsive */
.notify-hero-mockup-col {
  padding-top: 24px;
}
.notify-hero-mockup-wrapper {
  margin-left: 0;
  transform: none;
  transform-origin: top left;
  max-width: 100%;
}
@media (min-width: 992px) {
  .notify-hero-mockup-col {
    padding-top: 122px;
  }
  .notify-hero-mockup-wrapper {
    margin-left: -80px;
    transform: scale(0.86);
  }
}