/**
 * The base file that should be imported by every file.
 * There should be no CSS generation in this or from imported scss files at all!
 */
/**
 * Library
 */
/**
 * Variables and functions
 */
.section-heading {
  position: relative;
  padding-top: 0; }
  @media (min-width: 981px) {
    .section-heading {
      padding-top: 100px;
      padding-bottom: 140px; } }
  .section-heading .container {
    position: relative;
    z-index: 1; }
    @media (min-width: 981px) {
      .section-heading .container .columns {
        display: flex;
        flex-direction: row-reverse;
        gap: 35px; }
        .section-heading .container .columns .column.column-content {
          flex-shrink: 0; } }
    @media (min-width: 981px) and (min-width: 981px) {
      .section-heading .container .columns .column.column-content {
        width: 100%;
        max-width: 460px; } }
    @media (min-width: 981px) and (min-width: 1200px) {
      .section-heading .container .columns .column.column-content {
        max-width: 500px; } }
    @media (min-width: 981px) {
        .section-heading .container .columns .column.column-iv {
          flex-grow: 1; } }
    @media (min-width: 1200px) {
      .section-heading .container .columns {
        gap: 80px; } }
    .section-heading .container .columns .column.column-content {
      position: relative;
      z-index: 1; }
    .section-heading .container .hallmark-image {
      position: absolute;
      top: 15px;
      right: 0;
      z-index: 2;
      max-width: 110px; }
      @media (min-width: 981px) {
        .section-heading .container .hallmark-image {
          top: -60px;
          right: -2vw;
          max-width: 140px; } }
      @media (min-width: 1200px) {
        .section-heading .container .hallmark-image {
          max-width: 180px; } }
    .section-heading .container .image-video {
      display: block;
      position: relative;
      padding-top: 0;
      height: 500px;
      min-height: auto;
      margin: 0 -15px; }
      .section-heading .container .image-video > .img, .section-heading .container .image-video img, .section-heading .container .image-video video, .section-heading .container .image-video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover; }
      @media (min-width: 981px) {
        .section-heading .container .image-video {
          position: relative;
          padding-top: 0;
          height: 100%;
          min-height: auto;
          margin: 0;
          border-radius: 5px;
          overflow: hidden; }
          .section-heading .container .image-video > .img, .section-heading .container .image-video img, .section-heading .container .image-video video, .section-heading .container .image-video iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover; } }
      @media (min-width: 1500px) {
        .section-heading .container .image-video {
          position: relative;
          padding-top: 0;
          height: 100%;
          min-height: 460px; }
          .section-heading .container .image-video > .img, .section-heading .container .image-video img, .section-heading .container .image-video video, .section-heading .container .image-video iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover; } }
      .section-heading .container .image-video img {
        z-index: 1; }
      .section-heading .container .image-video .popup-overlay {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1; }
        .section-heading .container .image-video .popup-overlay:hover .play {
          opacity: 1; }
      .section-heading .container .image-video .play {
        width: 60px;
        height: 60px;
        border-radius: 100%;
        background-color: var(--dark-sand);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        cursor: pointer;
        font-size: 20px;
        transition: ease-in-out 200ms opacity; }
        @media (min-width: 768px) {
          .section-heading .container .image-video .play {
            opacity: 0; } }
        .section-heading .container .image-video .play span {
          position: relative;
          left: 2px; }
          .section-heading .container .image-video .play span::before {
            color: inherit; }
    .section-heading .container .content {
      position: relative;
      margin-top: -90px;
      background-color: var(--dark-blue);
      color: var(--white);
      padding: 40px 30px 30px 30px;
      border-radius: 5px; }
      @media (min-width: 981px) {
        .section-heading .container .content {
          margin-top: 0;
          background-color: transparent;
          padding: 0; } }
      .section-heading .container .content h1, .section-heading .container .content h2 {
        color: var(--dark-sand);
        margin: 0 0 20px 0;
        word-break: break-word; }
        @media (min-width: 981px) {
          .section-heading .container .content h1, .section-heading .container .content h2 {
            font-size: 60px;
            line-height: 60px; } }
      .section-heading .container .content h3 {
        font-family: "Rethink Sans", Helvetica, Arial, sans-serif;
        color: #fff;
        font-size: 50px;
        line-height: 0.75em;
        margin: 0.5em 0; }
        @media (min-width: 981px) {
          .section-heading .container .content h3 {
            font-size: 60px; } }
      .section-heading .container .content p {
        font-family: "Rethink Sans", Helvetica, Arial, sans-serif;
        color: #fff;
        line-height: 1.5em; }
        @media (min-width: 981px) {
          .section-heading .container .content p {
            font-size: 18px;
            max-width: 450px; } }
      .section-heading .container .content .content-btns {
        display: flex;
        align-items: center;
        -moz-column-gap: 15px;
             column-gap: 15px;
        flex-wrap: wrap; }
        @media (min-width: 1200px) {
          .section-heading .container .content .content-btns {
            -moz-column-gap: 24px;
                 column-gap: 24px; } }
        .section-heading .container .content .content-btns .btns-wrapper {
          display: flex;
          gap: 16px;
          flex-direction: column; }
          @media (min-width: 768px) {
            .section-heading .container .content .content-btns .btns-wrapper {
              flex-direction: row; } }
      .section-heading .container .content .content-btn {
        margin-bottom: 0; }
        @media (min-width: 768px) {
          .section-heading .container .content .content-btn {
            max-width: 270px; } }
        .section-heading .container .content .content-btn a {
          display: block;
          width: 100%;
          font-size: 14px; }
      .section-heading .container .content .care-card {
        width: -moz-fit-content;
        width: fit-content; }
        .section-heading .container .content .care-card p {
          color: var(--dark-blue) !important; }
  .section-heading .bg {
    position: absolute;
    top: -150px;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    max-height: 960px; }
    @media (min-width: 981px) {
      .section-heading .bg {
        display: block; } }
    @media (min-width: 1200px) {
      .section-heading .bg {
        top: 0; } }
    .section-heading .bg .shape {
      background-color: var(--dark-blue);
      width: 82%;
      height: 100%;
      -webkit-clip-path: ellipse(67% 100% at 33% 0%);
              clip-path: ellipse(67% 100% at 33% 0%);
      background-image: url("/app/themes/sturdy-domusvaluas/assets/images/hero-overlay.webp");
      background-repeat: no-repeat;
      background-position: left 50%; }
      @media (min-width: 1200px) {
        .section-heading .bg .shape {
          width: 76%; } }
      .section-heading .bg .shape.blue {
        background-color: var(--dark-blue); }
      .section-heading .bg .shape.sand {
        background-color: var(--dark-sand); }

/*# sourceMappingURL=heading.css.map */