@each $bgcolorMap, $value in $bgcolorMap {
  .bg-#{$bgcolorMap} {
    background-color: #{$value} !important;
  }
}

.bg-light2 {
  background-color: #f5f7ff;
}

[data-bg-src] {
  @include background-content(no-repeat, cover, center center);
}

.bg-fluid {
  @include background-content(no-repeat, 100% 100%, center center);
}

.bg-auto {
  background-size: auto auto;
}

.bg-top-right {
  background-position: top right;
  background-size: auto;
}

.bg-fixed {
  background-attachment: fixed;
}

.bg-box1 {
  --shape-size: 545px;
}

.bg-box-shape1 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--shape-size);
  z-index: -1;
}


.bg-box-shape2 {
  z-index: -1;
  bottom: 0;
  right: 0;
  left: 0;
  background-size: 100% 100%;
  background-position: left bottom;
  height: calc(100% - var(--shape-size));
}


.bg-box-shape3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-height: 685px;
}

.icon-shape1 {
  position:  absolute;
  left: 0%;
  top: 62%;
}

.icon-shape2 {
  position: absolute;
  top: -220px;
  right: 80px;
}

.icon-shape3 {
  position: absolute;
  bottom: -150px;
  left: 100px;

  @include xl {
    display: none;
  }  
}

@include ml {
  .bg-box-shape2 {
    background-size: cover;
    background-position: right top;
  }
}