.hero_service {
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 40px;

  .container-img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    box-sizing: border-box;

    img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }

    &::before {
      height: calc(100% - 112px);
      background: linear-gradient(to right, rgba(0, 0, 0, 0.5), 50%, rgba(0, 0, 0, 0));
      bottom: 0;
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      background-image: url(../../images/hero-service/lib-service.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: block;
      left: calc(50% - 20rem);
      width: 758px;
    }

    &::after {
      background-color: var(--color-red);
      bottom: 0;
      content: " ";
      height: 100%;
      left: 0;
      position: absolute;
      width: calc(50% - 20rem);
    }
  }

  .hero_content {
    color: var(--color-white);
    display: flex;
    gap: 27px;
    /* height: calc(100% - 112px); */
    min-height: 600px;
    padding-bottom: 50px;
    z-index: 1;
    padding-top: 100px;
    max-width: 73.125rem;
    position: relative;
    padding-left: 24px;
    padding-right: 24px;
    margin-left: auto;
    margin-right: auto;

    .text-wrapper {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      justify-content: flex-start;
      max-width: 677px;
      margin-bottom: 24px;
      width: 400px;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      gap: 32px;
      justify-content: flex-start;

      .mini_title {
        p {
          font-weight: 500;
          text-transform: uppercase;
          font-size: .875rem;
          margin: 0;
        }
      }

      .h_title {
        margin: 0;

        .alert-heading {
          color: var(--color-white);
          font-size: 3rem;
          font-weight: 300;
          letter-spacing: 0;
          line-height: 60px;
          text-align: start;
        }
      }

      .subtext {
        margin: 0;
        text-align: start;
        padding: 0;

        p {
          color: var(--color-white);
          font-size: 1.5rem;
          font-weight: 300;
          letter-spacing: 0;
          line-height: 32px;
        }
      }
    }
  }
}


@media (max-width: 1024px) {
  .hero_service {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    /* background: var(--color-red); */

    .hero_content {
      max-width: 970px;
      padding-left: 24px;
      padding-right: 24px;
      margin-left: auto;
      margin-right: auto;
    }

    .container-img {
      position: relative;
      display: flex;

      &::before {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), 75%, rgba(0, 0, 0, 0));
        aspect-ratio: 193 / 105;
        background: url(../../images/hero-service/mobile-service.svg) no-repeat 50%;
        content: " ";
        display: block;
        height: 105px;
        left: 0;
        right: inherit;
        top: -57px;
        width: 190px;
        z-index: 1;
      }

      &::after {
        margin-top: -2px;
        min-height: 236px;
        background-color: var(--color-red);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        clip-path: polygon(0 90px, 0px 0, 100% 0, 100% 0, 0 122%);
        width: calc(70% - 11rem);
      }

      picture {
        width: 100%;
      }

      img {
        max-height: 234px;
        width: 100%;
      }
    }

    .hero_content {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      background: var(--color-red);
      justify-content: center;
      margin: 0;
      min-height: -webkit-fit-content;
      min-height: -moz-fit-content;
      min-height: fit-content;
      padding: 24px 16px 24px;
      width: 100%;
      /* max-width: 970px; */
      /* padding-left: 24px;
      padding-right: 24px; */
      /* margin-left: auto;
      margin-right: auto; */

      .text-wrapper {
        margin-bottom: 24px;
        width: 400px;
        max-width: 100%;

        .h_title {
          .alert-heading {
            font-size: 2rem;
            line-height: 40px;
          }
        }

        .subtext {
          p {
            font-size: 1.25rem;
            line-height: 28px;
          }
        }
      }
    }

    .hero_content:not(:has(.subtext)) {
      padding: 24px 16px 0px;
    }
  }
}