/* Kindergarten offerings - shape layer fix (content never masked) */
.bd-offering-wrapper.style-one .bd-offering-item {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  overflow: hidden;
}

.bd-offering-wrapper.style-one .bd-offering-item.bg-1 {
  background-color: #4782C8 !important;
}

.bd-offering-wrapper.style-one .bd-offering-item.bg-2 {
  background-color: #EEB83A !important;
}

.bd-offering-wrapper.style-one .bd-offering-item.bg-3 {
  background-color: #77C61F !important;
}

.bd-offering-wrapper.style-one .bd-offering-item.bg-4 {
  background-color: #FF6177 !important;
}

.bd-offering-wrapper.style-one .bd-offering-item:hover.bg-1,
.bd-offering-wrapper.style-one .bd-offering-item:hover.bg-2,
.bd-offering-wrapper.style-one .bd-offering-item:hover.bg-3,
.bd-offering-wrapper.style-one .bd-offering-item:hover.bg-4 {
  background-color: var(--bd-primary) !important;
}

.bd-offering-wrapper.style-one .bd-offering-shape {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: url("offer-bg.webp");
  mask-image: url("offer-bg.webp");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.3s ease-in-out;
}

.bd-offering-wrapper.style-one .bd-offering-item.bg-1 .bd-offering-shape {
  background-color: #4782C8;
}

.bd-offering-wrapper.style-one .bd-offering-item.bg-2 .bd-offering-shape {
  background-color: #EEB83A;
}

.bd-offering-wrapper.style-one .bd-offering-item.bg-3 .bd-offering-shape {
  background-color: #77C61F;
}

.bd-offering-wrapper.style-one .bd-offering-item.bg-4 .bd-offering-shape {
  background-color: #FF6177;
}

.bd-offering-wrapper.style-one .bd-offering-item .content {
  position: relative;
  z-index: 1;
}

.bd-offering-wrapper.style-one .bd-offering-item .thumb {
  z-index: 1;
}

.bd-offering-wrapper.style-one .bd-offering-item:hover.bg-1 .bd-offering-shape,
.bd-offering-wrapper.style-one .bd-offering-item:hover.bg-2 .bd-offering-shape,
.bd-offering-wrapper.style-one .bd-offering-item:hover.bg-3 .bd-offering-shape,
.bd-offering-wrapper.style-one .bd-offering-item:hover.bg-4 .bd-offering-shape {
  background-color: var(--bd-primary);
}

.bd-offering-wrapper.style-one .bd-offering-item:hover .icon {
  background-color: rgba(255, 255, 255, 0.25);
}