/**
* Block Name: hero_about
*/

/* Image and gradient */

section.hero_about .image_wrapper img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 874px;

  /* Apply gradient fade using mask */
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.74) 23.56%,
    rgba(0, 0, 0, 0.53) 50.96%,
    rgba(0, 0, 0, 0.31) 72.12%,
    rgba(0, 0, 0, 0) 89.9%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.74) 23.56%,
    rgba(0, 0, 0, 0.53) 50.96%,
    rgba(0, 0, 0, 0.31) 72.12%,
    rgba(0, 0, 0, 0) 89.9%
  );
  mask-repeat: no-repeat;
  mask-size: cover;
}

section.hero_about .container {
  min-height: 250px;
  display: block;
  bottom: 100px;
  z-index: 101;
}

section.hero_about .container .title_wrapper {
  position: relative;
  z-index: 100;
  bottom: 0;
}

section.hero_about .container .text_wrapper p {
  margin-bottom: 25px;
}
/* Buttons */

section.hero_about .buttons {
  gap: 15px;
}

section.hero_about .buttons a.btn-primary.btn-section {
  padding-right: 14px;
}

section.hero_about .buttons a.btn-primary.btn-section svg {
  transition: transform 200ms ease-in-out;
}

section.hero_about .buttons a.btn-primary.btn-section:hover svg {
  transform: translateY(3px);
}

section.hero_about .buttons a.btn-primary.btn-section::after {
  display: none;
}

@media (max-width: 767px) {
  section.hero_about {
    padding-bottom: 50px;
  }
  section.hero_about .container .title_wrapper {
    bottom: -20px;
  }

  section.hero_about .container {
    bottom: 50px;
  }
}