.block-hero {
  position: relative;
}

@media (min-width: 768px) {
  .block-hero {
    padding: 72px 0 62px 0 !important;
  }
}

@media (min-width: 768px) {
  .block-hero.center-alignment .container {
    max-width: 1250px;
  }
}

.block-hero.text-rotator {
  transition: height 0.3s ease;
}

@media (max-width: 400px) {
  .block-hero.text-rotator {
    min-height: 570px;
  }
}

@media screen and (min-width: 400px) and (max-width: 425px) {
  .block-hero.text-rotator {
    min-height: 575px;
  }
}

@media screen and (min-width: 425px) and (max-width: 450px) {
  .block-hero.text-rotator {
    min-height: 570px;
  }
}

@media screen and (min-width: 450px) and (max-width: 475px) {
  .block-hero.text-rotator {
    min-height: 565px;
  }
}

@media screen and (min-width: 475px) and (max-width: 500px) {
  .block-hero.text-rotator {
    min-height: 560px;
  }
}

@media screen and (min-width: 500px) and (max-width: 525px) {
  .block-hero.text-rotator {
    min-height: 555px;
  }
}

@media screen and (min-width: 525px) and (max-width: 550px) {
  .block-hero.text-rotator {
    min-height: 550px;
  }
}

@media screen and (min-width: 550px) and (max-width: 575px) {
  .block-hero.text-rotator {
    min-height: 545px;
  }
}

@media screen and (min-width: 575px) and (max-width: 600px) {
  .block-hero.text-rotator {
    min-height: 540px;
  }
}

.block-hero.center-alignment .content {
  text-align: center;
}

.block-hero .container {
  position: relative;
}

/* Image Container Starts */
.block-hero.bg-image .image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.block-hero.bg-icon .image-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.block-hero.bg-image .image-gradient,
.block-hero.bg-icon .image-gradient {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(60, 45, 237);
  background: linear-gradient(
    135deg,
    rgba(60, 45, 237, 1) 0%,
    rgba(130, 58, 182, 1) 50%,
    rgba(224, 71, 113, 1) 100%
  );
  mix-blend-mode: multiply;
  z-index: 1;
}

.block-hero.bg-image .image-gradient {
  left: 0;
}

.block-hero.bg-icon .image-gradient {
  right: 0;
}

.block-hero.bg-image .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.block-hero.bg-image .image img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}

.block-hero.bg-icon .image {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: all ease 0.3s;
  z-index: 1;
}
@media (min-width: 768px) {
  .block-hero.bg-icon .image {
    top: 10px;
    width: 50%;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1800px) {
  .block-hero.bg-icon .image {
    width: 42.5%;
  }
}

@media (min-width: 1800px) {
  .block-hero.bg-icon .image {
    width: 35%;
  }
}

.block-hero.bg-icon .image img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.085;
}

/* Background Color Starts */

.block-hero.bg-purple {
  background-color: #6c4ede;
}

.block-hero.bg-magenta {
  background-color: #fc4c5d;
}

.block-hero.bg-dark-grey {
  background-color: #4b4e67;
}

/* Content Area Starts */
.block-hero .content {
  padding: 3.88em 0;
  z-index: 1;
}

@media (min-width: 768px) {
  .block-hero .content {
    padding: 2.5em 0;
  }
}

.block-hero .content {
  color: #ffffff;
}

/* Heading Starts */

.block-hero .content h1 {
  margin: 20px 0;
  display: block;
}

@media (min-width: 768px) {
  .block-hero .content h1 {
    margin: 40px 0;
  }
}

.block-hero .content h1 span {
  display: block;
  transition: all ease 0.3s;
}

.block-hero .content p.small-heading {
  margin: 0;
  text-transform: uppercase;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.block-hero .content h1 .first-line-heading {
  position: relative;
  font-size: 40px;
  font-family: "adobe-caslon-pro";
  font-weight: 400;
  z-index: 2;
}

.block-hero .content h1 .second-line-heading {
  position: relative;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 900;
  z-index: 2;
}

@media (min-width: 768px) {
  .block-hero .content p.small-heading {
    font-size: 18px;
    font-weight: 600;
  }

  .block-hero .content h1 .first-line-heading {
    font-size: 68px;
  }

  .block-hero .content h1 .second-line-heading {
    font-size: 68px;
    line-height: 1.25;
  }
}

.block-hero .content .second-line-heading.toggle {
  display: none;
}

.block-hero .content .second-line-heading.toggle.active {
  display: block;
}

/* Hero Text Underline Starts */
.block-hero .hero-underline-container {
  position: relative;
  width: 60%;
  height: 100%;
}

.block-hero .hero-underline-container .hero-underline {
  position: relative;
  top: -5px;
  left: -0.5em;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  z-index: 0;
}

@media (min-width: 768px) {
  .block-hero .hero-underline-container .hero-underline {
    top: -10px;
  }
}

/* Body Starts */
.block-hero .content .body-copy p {
  font-size: 16px;
}

@media (min-width: 768px) {
  .block-hero.bg-image.left-alignment .content .body-copy,
  .block-hero.bg-icon.left-alignment .content .body-copy {
    width: 75%;
  }

  .block-hero.center-alignment .content .body-copy {
    margin: 0 auto;
    width: 80%;
  }
  .block-hero .content .body-copy p {
    font-size: 24px;
    line-height: 36px;
  }
}