/* Public homepage section artwork: wash = Artwork color, SVG = original illustration. */
.hsb-on {
  --hsb-wash: var(--hsb-artwork, color-mix(in srgb, var(--tx-primary, #00bbe8) 18%, #fff));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none;
  background-color: var(--hsb-wash);
  border-bottom: 1px solid color-mix(in srgb, var(--tx-primary, #00bbe8) 16%, #d5e1e8);
}

.hsb-on:nth-child(odd of .hsb-on) {
  --hsb-wash: color-mix(in srgb, var(--hsb-artwork, #eaf5f2) 70%, #c3d7e4);
}

.hsb-on:nth-child(even of .hsb-on) {
  --hsb-wash: color-mix(in srgb, var(--hsb-artwork, #eaf5f2) 45%, #fff);
}

.hsb-on.hsb-tone-dark {
  --hsb-wash: color-mix(in srgb, var(--hsb-artwork, #eaf5f2) 70%, #c3d7e4);
}

.hsb-on.hsb-tone-light {
  --hsb-wash: color-mix(in srgb, var(--hsb-artwork, #eaf5f2) 45%, #fff);
}

.hsb-on.bgwhite,
.umrah__section.hsb-on,
.hotel_section.hsb-on,
.place-section.hsb-on,
.featured-sec-eleven.hsb-on,
.why-choose-nine.hsb-on,
.blog-sec-two.hsb-on {
  background-image: none;
  background-color: var(--hsb-wash);
}

.hsb-on::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--tx-primary, #00bbe8);
  opacity: var(--hsb-opacity, 0.7);
  -webkit-mask-image: var(--hsb-art);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  -webkit-mask-size: 100% auto;
  mask-image: var(--hsb-art);
  mask-repeat: no-repeat;
  mask-position: center top;
  mask-size: 100% auto;
}

.hsb-on > .container,
.hsb-on > .container-fluid {
  position: relative;
  z-index: 1;
}

.hsb-on[data-hsb="flight"] {
  --hsb-art: url("/assets/img/section-art/flight.svg");
}

.hsb-on[data-hsb="hotel"] {
  --hsb-art: url("/assets/img/section-art/hotel.svg");
}

.hsb-on[data-hsb="holiday"] {
  --hsb-art: url("/assets/img/section-art/holiday.svg");
}

.hsb-on[data-hsb="umrah"] {
  --hsb-art: url("/assets/img/section-art/umrah.svg");
}

.hsb-on[data-hsb="faq"] {
  --hsb-art: url("/assets/img/section-art/faq.svg");
}

.hsb-on[data-hsb="trending"] {
  --hsb-art: url("/assets/img/section-art/trending.svg");
}

.hsb-on[data-hsb="why-choose-us"] {
  --hsb-art: url("/assets/img/section-art/why-choose-us.svg");
}

.hsb-on[data-hsb="blog"] {
  --hsb-art: url("/assets/img/section-art/blog.svg");
}

[data-hsb="flight"],
[data-hsb="trending"] {
  --hsb-icon: url("/assets/img/section-art/motifs/airplane.svg");
}

[data-hsb="hotel"] {
  --hsb-icon: url("/assets/img/section-art/motifs/hotel.svg");
}

[data-hsb="holiday"] {
  --hsb-icon: url("/assets/img/section-art/motifs/palmtree.svg");
}

[data-hsb="umrah"] {
  --hsb-icon: url("/assets/img/section-art/motifs/mosque.svg");
}

[data-hsb="faq"] {
  --hsb-icon: url("/assets/img/section-art/motifs/geometry.svg");
}

[data-hsb="why-choose-us"] {
  --hsb-icon: url("/assets/img/section-art/motifs/shield.svg");
}

[data-hsb="blog"] {
  --hsb-icon: url("/assets/img/section-art/motifs/journal.svg");
}

.faq-section.hsb-on {
  background-image: none;
}

.faq-section.hsb-on .faq-sec {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hsb-heading-icon::before {
  content: "";
  display: block;
  width: 152px;
  height: 48px;
  margin: 0 auto 12px;
  background-color: var(--tx-primary, #00bbe8);
  opacity: 0.9;
  -webkit-mask-image:
    linear-gradient(#000, #000),
    linear-gradient(#000, #000),
    var(--hsb-icon);
  -webkit-mask-size: 28px 1.5px, 28px 1.5px, 40px 40px;
  -webkit-mask-position: left center, right center, center;
  -webkit-mask-repeat: no-repeat;
  mask-image:
    linear-gradient(#000, #000),
    linear-gradient(#000, #000),
    var(--hsb-icon);
  mask-size: 28px 1.5px, 28px 1.5px, 40px 40px;
  mask-position: left center, right center, center;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

@media (max-width: 640px) {
  .hsb-on::before {
    -webkit-mask-size: auto 100%;
    -webkit-mask-position: right top;
    mask-size: auto 100%;
    mask-position: right top;
    opacity: calc(var(--hsb-opacity, 0.7) * 0.85);
  }

  .hsb-heading-icon::before {
    width: 120px;
    height: 40px;
    margin-bottom: 8px;
    -webkit-mask-size: 20px 1.5px, 20px 1.5px, 32px 32px;
    mask-size: 20px 1.5px, 20px 1.5px, 32px 32px;
  }
}