.body01 {
    background: url(../images/menu-bg-01.jpg); 
}

.stepped-border {
  --border-color: #d51f2a;
  --border-size: 8px;
  --corner-step: 16px;

  position: relative;
  box-sizing: border-box;
  padding: 32px;

  border: var(--border-size) solid var(--border-color);
}

/* Top-left and top-right stepped details */
.stepped-border::before {
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  pointer-events: none;

  background:
    /* top-left upper step */
    linear-gradient(var(--border-color), var(--border-color))
      var(--corner-step) 0 / calc(100% - (var(--corner-step) * 2)) var(--border-size) no-repeat,

    /* top-left lower step */
    linear-gradient(var(--border-color), var(--border-color))
      0 var(--corner-step) / var(--border-size)
      calc(100% - (var(--corner-step) * 2)) no-repeat,

    /* top-right lower step */
    linear-gradient(var(--border-color), var(--border-color))
      100% var(--corner-step) / var(--border-size)
      calc(100% - (var(--corner-step) * 2)) no-repeat,

    /* bottom-left upper step */
    linear-gradient(var(--border-color), var(--border-color))
      0 calc(100% - var(--corner-step)) / var(--border-size)
      calc(100% - (var(--corner-step) * 2)) no-repeat,

    /* bottom-right upper step */
    linear-gradient(var(--border-color), var(--border-color))
      100% calc(100% - var(--corner-step)) / var(--border-size)
      calc(100% - (var(--corner-step) * 2)) no-repeat,

    /* bottom-left lower step */
    linear-gradient(var(--border-color), var(--border-color))
      var(--corner-step) 100% / calc(100% - (var(--corner-step) * 2)) var(--border-size) no-repeat;
}

/* Creates the short horizontal/vertical corner extensions */
.stepped-border::after {
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  pointer-events: none;

  background:
    linear-gradient(var(--border-color), var(--border-color))
      0 0 / var(--corner-step) var(--border-size) no-repeat,
    linear-gradient(var(--border-color), var(--border-color))
      0 0 / var(--border-size) var(--corner-step) no-repeat,
    linear-gradient(var(--border-color), var(--border-color))
      100% 0 / var(--corner-step) var(--border-size) no-repeat,
    linear-gradient(var(--border-color), var(--border-color))
      100% 0 / var(--border-size) var(--corner-step) no-repeat,
    linear-gradient(var(--border-color), var(--border-color))
      0 100% / var(--corner-step) var(--border-size) no-repeat,
    linear-gradient(var(--border-color), var(--border-color))
      0 100% / var(--border-size) var(--corner-step) no-repeat,
    linear-gradient(var(--border-color), var(--border-color))
      100% 100% / var(--corner-step) var(--border-size) no-repeat,
    linear-gradient(var(--border-color), var(--border-color))
      100% 100% / var(--border-size) var(--corner-step) no-repeat;
}

/* Optional Bootstrap-friendly helper */
.stepped-border.w-100 {
  width: 100%;
}