/* ==========================================================================
   Arctic Wolf Notches (Alt) — base styles
   Per-instance color is injected by Elementor via {{WRAPPER}}-scoped
   selectors on the widget class. The base `color` value below is a fallback
   used when the control is left blank; the SVG path uses fill="currentColor"
   so a single `color` property drives both instances of the notch shape.
   Class names (aw-branded-notched-shape) are intentionally distinct from
   the original notch widget (aw-branded-notch) to prevent any cross-widget
   selector matching.
   ========================================================================== */

.aw-branded-notched-shape {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 72px;
  display: block;
  z-index: 5;
  pointer-events: none;

  /* Fallback color; overridden per-instance by Elementor. */
  color: #ffffff;
}


/* =========================
   TOP VERSION
   ========================= */

.aw-branded-notched-shape--top {
  top: 0px;
  transform: translateX(-50%) rotate(180deg);
  transform-origin: center;
}


/* =========================
   BOTTOM VERSION
   ========================= */

.aw-branded-notched-shape--bottom {
  bottom: 0px;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1024px) {

  .aw-branded-notched-shape {
    width: 78%;
    height: 68px;
  }

}


@media (max-width: 767px) {

  .aw-branded-notched-shape {
    width: 88%;
    height: 42px;
  }

}