/*
in summary, we have the base shape which are YELLOW by default, listed below
1) .upper-half
2) .lower-Half
3) .line

then if we want to adjust their color and z-indez, we use
1) class="{name} blue" 
2) class="{name} backward" 
2) class="{name} blue backward" 
*/
.upper-half {
  border-top-right-radius: 25rem;
}
.upper-half-right {
  float: right;
  border-top-left-radius: 25rem;
}

.lower-half {
  border-bottom-right-radius: 25rem;
}
.lower-half-right {
  float: right;
  border-bottom-left-radius: 25rem;
}

.line, .membership-shape-line-right, .membership-shape-line, .line-right {
  position: relative;
  top: 1rem;
  left: 0;
  height: 1rem;
  width: 9rem;
  border-radius: 0rem 25rem 25rem 0rem;
  background-color: #f09221;
}
.line-right {
  float: right;
  border-radius: 25rem 0rem 0rem 25rem;
}

.big-line {
  width: 40%;
  height: 25rem;
}

.membership-shape {
  position: relative;
  background-color: #005da6;
  z-index: -1;
}
.membership-shape-half-left, .membership-shape-half-right {
  position: absolute;
  top: 0;
  width: 300px;
  height: 1156px;
  background-color: #005da6;
}
@media (max-width: 576.95px) {
  .membership-shape-half-left, .membership-shape-half-right {
    height: 100em;
  }
}
.membership-shape-half-left {
  left: 0;
  border-top-right-radius: 160px;
}
@media (min-width: 1200px) and (max-width: 1920.95px) {
  .membership-shape-half-left {
    border-top-right-radius: 160px;
  }
}
@media (min-width: 992px) and (max-width: 1219.95px) {
  .membership-shape-half-left {
    border-top-right-radius: 120px;
  }
}
.membership-shape-half-right {
  right: 0;
  border-top-left-radius: 160px;
}
@media (min-width: 1200px) and (max-width: 1920.95px) {
  .membership-shape-half-right {
    border-top-left-radius: 160px;
  }
}
@media (min-width: 992px) and (max-width: 1219.95px) {
  .membership-shape-half-right {
    border-top-left-radius: 120px;
  }
}
.membership-shape-line {
  width: 112px !important;
  top: 0.5rem;
  float: left;
}
.membership-shape-line-right {
  width: 112px !important;
  top: 0.5rem;
  float: right;
  border-radius: 25rem 0rem 0rem 25rem;
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #32CC54;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}