.custom-horizontal-accordion-widget {
  width: 100%;
  height: fit-content;

  .horizontal-accordion {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 0px;

    @media (max-width: 768px) {
      flex-direction: column;
    }

    .hz-accordion-block {
      display: flex;
      border: 1px solid #e5e5e5;
      max-height: 750px;
      width: auto;
      transition: 0.3s ease-in-out;

      @media (max-width: 1440px) {
        max-height: 600px;
      }

      @media (max-width: 768px) {
        max-height: none;
        height: fit-content;
        width: 100%;
        flex-direction: column;
      }

      .num-block {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition: 0.3s ease-in-out;
        width: 89px;
        height: 100%;
        border: 1px solid #e5e5e5;
        padding: 11px;

        @media (max-width: 768px) {
          flex-direction: row;
          width: 100%;
          height: fit-content;
          align-items: center;
          gap: 20px;
        }

        .hz-number {
          width: 67px;
          height: 67px;
          border-radius: 4px;
          background-color: #1b66ff;
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 32px;
          font-family: "Open Sans", sans-serif;

          @media (max-width: 768px) {
            width: 40px;
            height: 40px;
            font-size: 24px;
          }
        }

        .vertical-title {
          font-size: 24px;
          font-weight: 700;
          font-family: "Open Sans", sans-serif;
          line-height: 1.1;
          color: hsla(0, 0%, 0%, 1);
          transition: 0.3s ease-in-out;
          transform: rotateZ(-90deg) translateX(35px);
          padding-right: 50px;
          white-space: nowrap;
          text-align: start;
          margin-top: auto;
          opacity: 1;
          transition: 0.3s ease-in-out;
          @media (max-width: 1440px) {
            font-size: 18px;
          }
          @media (max-width: 1280px) {
            font-size: 16px;
          }
          @media (max-width: 768px) {
            font-size: 14px;
            transform: rotateZ(0deg) translateX(0px);
            margin-top: 0;
          }
        }

        .vertical-title-active {
          opacity: 0;
        }

        .faq-icon-wrapper {
          width: 35px;
          height: 35px;
          transition: 0.3s ease-in-out;

          @media (max-width: 1440px) {
            width: 30px;
            height: 30px;
          }
          @media (max-width: 1280px) {
            width: 25px;
            height: 25px;
          }

          svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }

      .num-block-active {
        border: 1px solid transparent;
      }

      .main-content {
        max-width: 0;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        opacity: 0;
        transform: translateX(-20px);
        font-size: 16px;
        font-weight: 300;
        font-family: "Open Sans", sans-serif;
        padding-left: 0;
        padding-block: 54px 40px;
        transition: 0.3s ease-in-out;
        @media (max-width: 1440px) {
          font-size: 16px;
          padding-block: 20px 20px;
        }
        @media (max-width: 768px) {
          font-size: 14px;
          max-width: 100%;
          width: 100%;
          height: 0;
          max-height: 0;
          padding-block: 0;
          padding-inline: 0;
        }

        .title {
          font-size: 32px;
          font-weight: 400;
          font-family: "Open Sans", sans-serif;
          color: #000;
          margin-top: 0;
          margin-bottom: 20px;
        }
        .short-description {
          font-size: 18px;
          font-weight: 400;
          font-family: "Open Sans", sans-serif;
          color: #6d6d6d;
          line-height: 1.4;
          margin-bottom: 40px;
          width: 50%;
          padding-right: 20px;

          @media (max-width: 1440px) {
            font-size: 16px;
            width: 100%;
          }
        }

        .image-wrapper {
          width: 70%;
          height: 410px;
          margin-bottom: 20px;

          @media (max-width: 1440px) {
            height: 250px;
          }
          @media (max-width: 768px) {
            width: 100%;
            height: fit-content;
          }

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

        .button-link {
          border-radius: 12px;
          background-color: #f8c716;
          padding: 12px 20px;
          color: #000;
          font-size: 16px;
          font-weight: 500;
          font-family: "Open Sans", sans-serif;
          width: fit-content;
        }
      }
      /* .main-content {
        max-width: 100% !important;
        width: 100% !important;
      } */

      .active-main-content {
        max-width: 100% !important;
        width: 100% !important;
      }
      .active-main-content-mobile {
        max-height: 100% !important;
        height: 100% !important;
      }
    }

    .accordion-block-active {
      width: 100% !important;
    }
    .accordion-block-active-mobile {
      height: 100% !important;
    }
  }
}

/* Side Block Mobile--------------------------------------------------- */