.elvtd-graph-wrapper {
  padding: 0 20px;
  margin: 0 auto;
}

.graph.mobile {
  display: none;
}
.elvtd-graph-wrapper {
  padding: 0 20px;
  margin: 0 auto;
  .heading-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
    @media (max-width: 767px) {
      gap: 24px;
    }
    p {
      font-weight: 400;
      font-size: 25px;
      line-height: 1.2;
      text-align: center;
      margin: 0;
      max-width: 1000px;
      @media (max-width: 767px) {
        font-size: 16px;
      }
    }
    h3 {
      font-weight: 300;
      font-size: 44px;
      line-height: 100%;
      letter-spacing: -1px;
      text-align: center;
      margin-top: 40px;
      margin-bottom: 0;
      @media (max-width: 767px) {
        font-size: 24px;
        margin-top: 20px;
      }
    }
    .inner-text-column-wrapper{
      display: flex;
    gap: 20px;
    font-size: 1.3em;
    letter-spacing: 0px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.5em;
    @media(max-width:900px){
      flex-direction:column;
    }
    .inner-text-column{
      width:50%;
       @media(max-width:900px){
        width:100%;
       }
    }
    }
  }

  .button-wrapper.graph {
    margin-top: 80px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;

    @media (max-width: 1024px) {
      margin-top: 40px;
    }
  }
  .elvtd-graph-with-dots {
    width: 100%;
    position: relative;
    img {
      padding-top: 60px;

      @media (max-width: 1440px) {
        padding-top: 40px;
      }

      @media (max-width: 1280px) {
        padding-top: 35px;
      }

      @media (max-width: 767px) {
        padding-top: 20px;
      }
    }

    .dot-circular-div {
      position: absolute;
      max-width: 40px;
      min-width: 30px;
      min-height: 30px;
      max-height: 40px;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;

      .default-icon,
      dot-icon {
        width: 100%;
        height: 100%;
        min-height: 28px;
        display: block;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-image: url("/cdn/shop/files/more-blue.svg?v=1750471656");
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
      }

      .dot-icon {
        width: 100%;
        height: 100%;
        display: block;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-image: url("/cdn/shop/files/more-blue.svg?v=1750471656");
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
        display: block !important;
        opacity: 0;
      }

      &.active {
        background: #fff;

        .info-container {
          display: block;
          z-index: 2;
          @media (max-width: 767px) {
            display: none;
          }
        }

        .default-icon {
          opacity: 0;
          min-height: unset;
        }

        .dot-icon {
          min-height: 28px;
          opacity: 1;
        }
      }
    }

    .info-container {
      color: black;
      background: #fff;
      border-radius: 4px;
      padding: 10px;
      font-size: 0.8em;
      min-width: 300px;
      position: absolute;
      display: none;
      text-align: left;
      width: fit-content;
      p {
        margin: 0;
      }

      &.active {
        display: block;
        @media (max-width: 767px) {
          display: none;
        }
        &.mobile {
          @media (min-width: 768px) {
            display: none;
          }
        }
      }

      &.mobile {
        &.active {
          @media (max-width: 767px) {
            left: 0;
            width: calc(100vw - 40px);
            top: 0;
            display: block;
          }
        }
      }

      .close-info-mobile {
        position: absolute;
        top: 4px;
        right: 6px;
        background: none;
        border: none;

        font-size: 20px;
        cursor: pointer;
        z-index: 4;
      }

      .info-container.mobile {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        overflow-y: auto;
      }

      @media (max-width: 767px) {
        .dot-circular-div {
        }

        .graph {
          display: none;
          &.mobile {
            display: block;
          }
        }
      }
    }
  }
  .post-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1026px;
    margin: 80px auto 0;
    h3 {
      font-weight: 400;
      font-size: 32px;
      line-height: 1.2;
      text-align: center;
      margin: 0;
      @media (max-width: 767px) {
        font-size: 24px;
      }
    }
    p {
      font-weight: 300;
      font-size: 25px;
      line-height: 1.2;
      letter-spacing: 0;
      text-align: center;
      margin: 0;
      @media (max-width: 767px) {
        font-size: 16px;
      }
    }
  }
}