/** @format */

.banner {
  margin-bottom: var(--py-section);
  /*padding-top: 35px;*/
  width: 100%;
  position: relative;
  z-index: 1;
  background: url('../../assets/images/banner-overlay2.png') center top no-repeat;

}

@media (max-width: 768px) {
.banner {
	padding-top: 60px;
	}
}

.banner:before {
  z-index: -1;
  height: 1600px;
  width: 600px;
  content: '';
  position: absolute;
  top: 80px;
  right: 0;
  opacity: 0.56;
  pointer-events: none;
  /*background: url("../../assets/images/hero-overlay.png") right top no-repeat;*/
  /*background-size: 470px auto;*/
}

/* Only apply the background style when the viewport is 768px wide or wider */
@media (min-width: 768px) {
  .banner:before  {
    background: url('../../assets/images/hero-overlay.png') right top no-repeat;
    background-size: 470px auto;
  }
}

.banner.is-normal:before,
.banner.is-beehive:before {
  bottom: 0;
  opacity: 1;
}

@media (min-width: 768px) {
  .banner.is-normal:before {
    background: url('../../assets/images/banner-overlay.webp') left top no-repeat;
    background-size: 120% auto;
  }
}

@media (min-width: 768px) {
  .banner.is-beehive:before {
    height: 310px;
    top: auto;
    background: url('../../assets/images/banner-overlay2.png') left top no-repeat;
    background-size: 120% auto;
  }
}

.banner-inner {
  width: 100%;
}

.banner-title {
  z-index: 1;
  font-size: 45px;
  font-weight: 700;
  position: relative;
  line-height: 1.1;
  padding-bottom: 6px;
}

.banner-title + .banner-title {
  margin-top: -6px;
}

.banner-content {
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
}

.banner-content p {
  margin-bottom: 0;
}

.banner-content .h4 {
  font-size: 16px;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

.banner-content .h3 {
  z-index: 1;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  margin-top: 10px;
  margin-bottom: 20px;
  line-height: 1.6;
}

.banner-image {
  width: 100%;
}

.banner-holder {
  display: flex;
  position: relative;
  align-items: flex-end;
  margin-right: -80px;
}

.banner-holder img {
  width: 100%;
  border-radius: 14px;
  border: 3px solid var(--color-white);
}

.banner-mobile {
  width: 21.6%;
  position: relative;
  margin-right: -15.6%;
}

.banner-mobile img {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.25);
}

.banner-desktop {
  flex: 1;
  padding-bottom: 3%;
}

.banner-desktop img {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
}

.banner.is-large .banner-mobile {
  width: 21.5%;
  margin-right: -15.5%;
}

.banner.is-dark {
  color: var(--color-white);
  padding-top: var(--py-section);
  padding-bottom: var(--py-section);
  background: linear-gradient(to right, rgba(31, 181, 218, 1) 0%, rgba(71, 30, 152, 1) 50%);
}

.banner.is-dark .h3,
.banner.is-dark .h4,
.banner.is-dark .blue-title {
  color: inherit;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}

.banner.is-no-image:before {
  display: none;
}

.banner.is-no-image .banner-content {
  width: 100%;
  text-align: center;
}

.banner.is-centered-image .banner-inner {
  flex-direction: column;
  align-items: center;
}

.banner.is-centered-image:before {
  display: none;
}

.banner.is-centered-image .banner-holder {
  margin-right: 0;
}

.banner.is-centered-image .banner-content {
  width: 100%;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .banner:before {
    width: 1000px;
    right: 50%;
    background-size: 1000px auto;
    top: -90px;
    margin-right: -920px;
  }

  .banner.is-normal:before {
    margin-right: -800px;
    background-size: 1000px auto;
    bottom: auto;
  }

  .banner.is-beehive:before {
    margin-right: -1100px;
    top: 100px;
    width: 1280px;
    right: 50%;
    background-size: 1280px auto;
    height: 630px;
  }

  .banner-title {
    font-size: 70px;
  }

  .banner-inner {
    display: flex;
    justify-content: space-between;
  }

  .banner-content {
    padding-bottom: 0;
    text-align: left;
    padding-top: 15px;
  }

  .banner-content {
    width: calc(67% - 20px);
  }

  .banner-content .h3 {
    font-size: 22px;
    margin-top: 15px;
  }

  .banner-image {
    width: calc(33% - 20px);
  }

  .banner.is-centered-image .banner-image {
    width: auto;
  }

  .banner-holder img {
    border-width: 6px;
    border-radius: 20px;
    max-width: 80%;
  }

  .banner.banner.is-centered-image .banner-holder img {
    max-width: 100%;
  }

  .banner-holder {
    margin-right: -152px;
  }

  .banner.is-large .banner-content {
    width: calc(60% - 20px);
  }

  .banner.is-large .banner-image {
    width: calc(40% - 20px);
  }

  .banner.is-custom .banner-content {
    width: auto;
    flex: 1;
  }

  .banner.is-custom .banner-image {
    max-width: 500px;
    width: auto;
  }
}

@media only screen and (min-width: 1025px) {
  .banner-title {
    font-size: 70px;
  }
}

@media only screen and (min-width: 1280px) {
  .banner:before {
    top: -190px;
    margin-right: -1150px;
  }
}

@media only screen and (min-width: 1500px) {
  .banner.is-large {
    padding-right: calc((100% - 1440px) / 2);
    padding-left: calc((100% - 1440px) / 2);
  }
}
@media only screen and (min-width: 1280px) {
		.banner-content h1 {
		font-size: 64px;
	}
}