:root {
  /** clips bottom starting down the left side 75% down
      and working across to the right side, ending 100%
      down by the time it gets to the right side. 
  **/
  --clip-polygon-01: 
    0% 75%,
    10% 80%,
    20% 85%,
    30% 88%,
    40% 91%,
    50% 94%,
    60% 96%,
    70% 97.5%,
    80% 99%,
    90% 99.5%,
    100% 100%,
    100% 0%,
    0% 0%;
    /** clips bottom starting down the left side 90% down
      and working across to the right side, ending 100%
      down around the middle horizonatally. 
  **/
    --clip-polygon-02: 
    0% 90%,
    10% 92%,
    20% 94%,
    30% 96%,
    40% 98%,
    50% 100%,
    100% 100%,
    100% 0%,
    0% 0%;

/** Rounded bottom **/
  --clip-polygon-rounded-botom-01: 
    0% 90%,
    10% 92%,
    20% 94%,
    30% 96%,
    40% 98%,
    50% 100%,
    60% 98%,
    70% 96%,
    80% 94%,
    90% 92%,
    100% 90%,
    100% 0%,
    0% 0%;
}
/* angle down 20% from left to right top and bottom */
.diagonal-20-down {
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}
/* angle up 20% from left to right top and bottom */
.diagonal-20-up {
  clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0 100%);
}
/* cut bottom left with curve */
.bottom-left-curve {
  clip-path: ellipse(100% 75% at 88% 34%);
}
/* cut bottom right with curve */
.bottom-right-curve {
  clip-path: ellipse(100% 75% at 20% 30%);
}

/** border options **/
.br-border-1 {
  border: 1px solid rgb(var(--br-color-thistle));
}
.br-border-2 {
  border: 2px solid rgb(var(--br-color-thistle));
}
.br-border-3 {
  border: 3px solid rgb(var(--br-color-thistle));
}
.br-border-4 {
  border: 4px solid rgb(var(--br-color-thistle));
}
.br-border-5 {
  border: 5px solid rgb(var(--br-color-thistle));
}


.swoosh-text {
  padding: 1rem;
  line-height: 1.4;
  display: inline-block;
  position: relative;
}

/** 3% black overlay on content/block **/
.overlay-3 {
  position: absolute; /* Positions the overlay relative to the container */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black background */
  z-index: 1; /* Ensures the overlay is on top of other non-positioned elements */
  opacity: 1;
  display: flex; /* Centers content if any */
  justify-content: center;
  align-items: center;
}
/** Center content and 20px margins ***/
.br-center-sm {  
  width:100%;
  max-width: var(--br-scalable-max-width-small);
  margin: 40px auto;
}

.br-center-med { 
  width:100%; 
  max-width: var(--br-scalable-max-width-medium);
  margin: 40px auto;
}

.br-center-lg { 
  width:100%; 
  max-width: var(--br-scalable-max-width-large);
  margin: 40px auto;
}