.hero_section {
  overflow: hidden;
  position: relative;
  box-sizing: border-box;

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

    .image {
      height: 100%;

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

      &::before {
        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;
        width: 100%;
      }
    }
  }

  .hero-content {
    display: grid;
    grid-template-columns: 58% 38%;
    gap: 4%;
    color: var(--color-white);
    /* height: calc(100% - 112px); */
    min-height: 600px;
    padding-bottom: 50px;
    padding-top: 100px;
    z-index: 1;
    position: relative;

    .h_title {
      margin-bottom: 2.1875rem;
      margin-top: 0;
      text-align: start;

      .alert-heading {
        color: var(--color-white);
        margin: 0;
      }
    }

    .subtext {
      color: var(--color-white);
      font-size: 2rem;
      font-weight: 300;
      letter-spacing: 0;
      line-height: 42px;
      margin: 0;
      text-align: left;
      padding: 0;
    }

    .box1 {
      -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-end;
      /* max-width: 677px; */

      .h_title {
        margin-bottom: 0;

        .alert-heading {
          color: var(--color-white);
          font-size: 48px;
          font-weight: 300;
          letter-spacing: 0;
          line-height: 52px;
          margin-bottom: 2.1875rem;
          text-align: start;
        }
      }

      .subtext {
        color: var(--color-white);
        font-size: 32px;
        font-weight: 300;
        letter-spacing: 0;
        line-height: 42px;
      }

      .white-box {
        background-color: var(--color-white);
        border-radius: 4px;
        -webkit-box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
        color: var(--color-black);
        margin-top: 32px;
        padding: 27px 44px;

        .h_title {
          .alert-heading {
            font-size: 1.5rem;
            font-weight: inherit;
            letter-spacing: 0;
            line-height: 40px;
            color: var(--color-black);
            margin: 0;
          }
        }

        .col-container {
          display: flex;
          flex-wrap: wrap;
          gap: 32px;
          box-sizing: border-box;

          .left {
            flex-shrink: 1;
            width: calc(50% - 16px);

            .item-list {
              margin-top: 16px;
              margin-bottom: 16px;

              .field__items {
                font-size: 1rem;
                list-style: none;
                margin-bottom: 1rem;
                margin-top: 1rem;
                padding-inline-start: 0;
                margin: 0;
                padding: 0;

                .field__item {
                  font-weight: 400;
                  display: flex;
                  /* letter-spacing: 0.25px; */
                  margin-bottom: 1rem;

                  position: relative;

                  &::before {
                    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%2300D764' fill-rule='evenodd' d='M18.14 6.65c.39.33.47.89.2 1.31l-.07.1-7.7 9.17c-.36.43-1 .47-1.42.12l-.09-.09-3.3-3.67a.997.997 0 0 1 .07-1.41c.38-.34.95-.34 1.32-.01l.09.09 2.53 2.81 6.96-8.29c.36-.43.99-.48 1.41-.13Z'/%3E%3C/svg%3E");
                    height: 30px;
                    margin-top: -4px;
                    width: 30px;
                    background-repeat: no-repeat;
                    padding-left: 20px;
                    content: " ";
                    display: inline-block;
                  }
                }
              }
            }

            .rating-box {
              position: relative;
              width: auto;
              max-width: none;
              padding-top: 32px;
              display: flex;
              flex-wrap: wrap;
              align-items: center;

              .rating_logo {
                max-width: 152px;
                width: 152px;
                flex: 0 0 100%;
              }

              .review-stars__stars {
                display: flex;
                gap: 2px;
                margin-left: 16px;
                align-items: center;
              }

              .review-stars__star {
                width: 24px;
                height: 24px;
              }

              .review-stars__star .filled-path {
                fill: var(--color-primary);
              }

              .review-stars__star path {
                transition: fill 0.3s;
              }

              .review-stars {
                display: flex;
                align-items: center;
                flex: 1 1 auto;
              }

              .review-rating {
                color: var(--color-text-dark);
                font-size: 1.5rem;
                font-weight: 500;
                letter-spacing: 0;
                line-height: 32px;
              }

            }
          }

          .right {
            flex-shrink: 1;
            width: calc(50% - 16px);
            display: flex;
            flex-direction: column;
            gap: 32px;
            justify-content: end;

            .rating-box__reviews-link {
              display: inline-block;
              text-align: center;
              color: var(--color-primary);
              font-size: 0.875rem;
              font-weight: 500;
              text-decoration: none;
              white-space: nowrap;
              margin-top: auto;
              &:hover {
                text-decoration: underline;
              }
            }

            .telefono {
              font-size: 1rem;
              text-align: center;

              span {
                font-size: 1.25rem;
                font-weight: 300;
                letter-spacing: 0.36px;
                line-height: 20px;

                a {
                  overflow-wrap: break-word;
                  color: var(--color-red);
                  cursor: pointer;
                }
              }
            }

            .botones {
              display: flex;
              -ms-flex-direction: column;
              flex-direction: column;
              gap: 16px;

              .field__item {
                width: 100%;

                .cta_button {
                  display: block;

                  .button {
                    width: 100%;
                  }
                }

                .btn-red-background {
                  white-space: normal;
                  width: 100%;
                }
              }

              .field--name-field-cta-2 {
                .field__item {
                  margin: 0;
                }
              }
            }
          }
        }

        .hero_box {
          .col-container {
            .right {
              justify-content: start;
              margin-top: 16px;
            }
          }
        }
      }
    }

    .box2 {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;

      .sticky-discount {
        background-color: var(--color-white);
        border-radius: 4px;
        -webkit-box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
        color: var(--color-black);
        padding: 16px;
        width: 384px;

        .sticky-columns {
          align-items: flex-start;
          display: -ms-flexbox;
          display: flex;
          gap: 12px;

          .left {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: 8px;
            color: var(--color-red);
            font-size: 2.5rem;
            font-weight: 500;
            letter-spacing: 0;
            line-height: 56px;

            p {
              color: var(--color-red);
              font-size: 40px;
              font-weight: 500;
              letter-spacing: 0;
              line-height: 56px;
            }
          }

          .right {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            margin-bottom: 8px;

            .h_title {
              color: var(--color-red);
              font-size: 1.25rem;
              font-weight: 500;
              letter-spacing: 0;
              line-height: 32px;
              margin-bottom: 0;
            }

            .subtext {
              color: var(----color-gray-darker3);
              font-size: 1rem;
              font-weight: 300;
              letter-spacing: 0;
              line-height: 28px;
            }

            .promo-link {
              display: flex;
              align-items: center;

              a {
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                align-items: center;
                border-radius: 4px;
                font-weight: 700;
                gap: 8px;
                justify-content: center;
                letter-spacing: 1px;
                text-align: center;
                text-transform: uppercase;
              }
            }
          }
        }
      }
    }

    .audio {
      .container__general {
        padding: 0;
      }

      .podcast-player {
        width: auto;
        margin: 0;

        .cta_buttons {
          .field__item {
            .btn-transparent-link {
              padding-left: 0;
            }

            .btn-red-background {
              white-space: normal;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .hero_section {
    .container-img {
      .image {
        &::before {
          background: linear-gradient(to right, rgba(0, 0, 0, 0.5), 75%, rgba(0, 0, 0, 0));
        }
      }
    }

    .hero-content {
      grid-template-columns: 100%;
      gap: 27px;

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

        .subtext {
          font-size: 1.25rem;
        }

        .white-box {
          .col-container {
            flex-direction: column;

            .left {
              width: 100%;
            }

            .right {
              width: 100%;

              .botones {
                flex-direction: column-reverse;
              }

              .cta_button {
                .button {
                  width: 100%;
                }
              }
            }
          }
        }
      }

      .box2 {
        .sticky-discount {
          width: 100%;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .hero_section {
    .container-img {
      height: 45%;
    }

    .hero-content {
      .box1 {
        .white-box {
          margin-top: 0;

          .h_title {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}