/**
 * Background Pattern styles
 */

.bg-pattern {
  position: relative;
  overflow: hidden;

  .bg-pattern-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    svg {
      position: absolute; /* Use absolute positioning to allow multiple patterns */
      min-width: 100%;
      min-height: 100%;
      width: 4535px; /* Set explicit width to match SVG's native width */
      height: 1187px; /* Set explicit height to match SVG's native height */
      left: 51%; /* Shift slightly to the right */
      top: 50%;
      transform: translate(-50%, -50%);
      transform-origin: center center;
      object-fit: none;
      object-position: center;
      overflow: visible;
      max-width: none;
    }
  }
}

/* Horizontal flip for background pattern */
.bg-pattern-flip {
  .bg-pattern-wrapper {
    svg {
      transform: translate(-50%, -50%) scaleX(-1);
     left: 45%; /* Shift slightly to the left to compensate for flipping */
    }
  }
}