/**
 * @file
 * Paragraph Bundle Hero.
 *
 * Filename:     paragraph-bundle-hero.css
 * Website:      https://www.flashwebcenter.com
 * Developer:    Alaa Haddad https://www.alaahaddad.com.
 */
.paragraph--type--hero-bundle .hero-bundle-inner {
  overflow: hidden;
  position: relative;
}

.paragraph--type--hero-bundle .hero-bundle-inner:not(.pb__margin,
.pb__margin_top,
.pb__margin_right,
.pb__margin_bottom,
.pb__margin_left,
.pb__section) {
  width: 100% !important;
  margin-block: 0 !important;
  margin-inline: auto !important;
}

.pb__hero-txt-wrapper-inner * {
  border-color: var(--pb-br);
}

.pb__hero-txt-wrapper-inner h2,
.page-wrapper .pb__hero-txt-wrapper-inner h2 {
  color: var(--pb-tx, var(--r-h1, var(--r-tx)));
}

.pb__hero-txt-wrapper-inner h2:hover,
.page-wrapper .pb__hero-txt-wrapper-inner h2:hover {
  color: var(--pb-tx-h, var(--pb-tx, var(--r-h1), var(--r-tx)));
}

.pb__hero-txt-wrapper-inner p,
.page-wrapper .pb__hero-txt-wrapper-inner p {
  color: var(--pb-tx, var(--r-tx, inherit));
}

.pb__hero-txt-wrapper-inner p:hover,
.page-wrapper .pb__hero-txt-wrapper-inner p:hover {
  color: var(--pb-tx-h, var(--pb-tx), var(--r-tx));
}

.pb__hero-txt-wrapper-inner:hover * {
  border-color: var(--pb-br-h, var(--pb-br), var(--r-br));
}

.pb__hero-txt-wrapper-inner {
  background-color: var(--pb-bg);
}

.pb__hero-txt-wrapper-inner:hover {
  background-color: var(--pb-bg-h, var(--pb-bg));
}

.paragraph--type--hero-bundle .pb__hero-txt-wrapper {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 100%;
  width: 100%;
  overflow-x: auto;
}

.paragraph--type--hero-bundle .pb__hero-txt-wrapper-inner {
  display: grid;
}

.paragraph--type--hero-bundle .pb__hero-txt-wrapper-inner:not(.pb__card_4,
.pb__card_2) {
  margin-block: 0;
  margin-inline: auto;
}

.paragraph--type--hero-bundle .field--name-pb-content-image,
.paragraph--type--hero-bundle .field--name-pb-content-image div,
.paragraph--type--hero-bundle .field--name-pb-content-image div img {
  width: 100%;
}

.paragraph--type--hero-bundle .pb__hero-txt-wrapper > a {
  float: inline-start;
  height: 100%;
  width: 100%;
}

@media (max-width:61.99875rem) {
  .paragraph--type--hero-bundle .pb__hero-txt-wrapper h1 {
    font-size: var(--pb-px28);
  }

  .paragraph--type--hero-bundle .pb__hero-txt-wrapper h2 {
    font-size: var(--pb-px24);
  }

  .paragraph--type--hero-bundle .pb__hero-txt-wrapper h3 {
    font-size: var(--pb-px22);
  }

  .paragraph--type--hero-bundle .pb__hero-txt-wrapper p {
    font-size: var(--pb-px16);
  }

}
