.reward_purchase_section{
  background: #fff;
  padding:40px 50px;

  & .purchase_section_wrapper{
    width:100%;
    margin:0 auto;
    max-width: 1200px;
  }

  & .purchase_detail_items{
    display: flex;
    flex-wrap: wrap;
    gap:100px 30px;
    align-items: center;
    text-align: center;

    & .purchase_detail_item{
      &:nth-child(5),
      &:nth-child(4),
      &:nth-child(3){
        flex-basis:calc(33.3% - 20px);
      }
      flex-basis: calc(50% - 15px);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap:30px;
      align-self: stretch;
      align-items: center;

      & img{
        max-width: 100%;
        width:auto;
        object-fit: contain;
        cursor: pointer;
      }

      & a{
        max-width: 400px;
        margin: 0 auto;
      }

      & p{
        margin: 0px 0;
        color: #4d4d4d;
        font-family: var(--font-body-family);
        font-size: 20px;
        font-style: normal;
        font-weight: var(--font-body-weight);
        line-height: 24px;
        letter-spacing: 0;
        margin:0 auto;
        max-width:240px;
        width:100%;

        @media(max-width:767px){
          font-size: 16px;
          line-height: 20px;
        }
      }
    }

    @media(max-width:767px){
      gap:20px;

      & .purchase_detail_item{
        flex-basis: 100% !important;
        gap:20px;

        & img{
          max-height: 200px;
        }
      }
    }
  }

  & .purchase_detail_information{
    & h2{
      margin: 0 0 40px;
      text-align: center;
      color: #036;
      font-family: var(--font-heading-family);
      font-size: 34px;
      font-style: normal;
      font-weight: var(--font-heading-weight);
      line-height: 36px;

      @media (max-width: 767px) {
        font-size: 26px;
        line-height: 28px;
        margin: 0 0 20px;
      }
    }

    & h3{
      text-align: center;
      margin:0 auto 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      color: #036;
      font-family: var(--font-heading-family);
      font-size: 22px;
      font-style: normal;
      font-weight: var(--font-heading-weight);
      line-height: 26px;
      letter-spacing: 0;
      gap:10px;

      @media(max-width:767px){
        font-size: 20px;
        line-height: 24px;
        margin:0 auto 20px;
        display: inline-flex;
        flex-wrap: wrap;

        & img{
          width: 50px;
          height: auto;
        }
      }
    }

    & h4{
      margin:0 0 60px;
      transition: var(--duration-default);
      color: #036;
      font-family: var(--font-heading-family);
      font-size: 20px;
      font-style: normal;
      font-weight: var(--font-heading-weight);
      line-height: 22px;
      text-align: center;

      @media(max-width:767px){
        font-size: 18px;
        line-height: 26px;
        margin:0 0 30px;
      }
    }
  }

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

.reward_hero_section{
  background: #ececec;

  & .reward_hero_image{
    line-height: 0;

    & img{
      max-width: 100%;
      height: auto;
    }

    & img.mobile_tab_img{
      display:none;
    }

    @media(max-width:1200px){
      & img.mobile_tab_img{
        display:block;
      }
      & img.dektop_img{
        display:none;
      }
    }
  }

  & .reward_hero_wrapper{
    position: relative;

    & .right_content{
      position: absolute;
      width:23%;
      bottom:40px;
      right:40px;
      text-align: center;

      @media(min-width:1400px) and (max-width:1700px){
        width:24%;
      }

      @media(min-width:1200px) and (max-width:1399px){
        width:24%;
        bottom:20px;
        right:20px;
      }

      @media(min-width:768px) and (max-width:1200px){
        position: relative;
        width: 100%;
        bottom: unset;
        right: unset;
        padding:40px 50px;
        background: #fff;
      }

      @media(max-width:767px){
        position: relative;
        width: 100%;
        bottom: unset;
        right: unset;
        padding:20px 20px;
        background: #fff;
      }

      & > h1{
        color: #036;
        font-family: var(--font-heading-family);
        font-weight: var(--font-heading-weight);
        font-size: 34px;
        font-style: normal;
        text-transform:uppercase;
        line-height: 36px;
        margin: 0 0;

        & strong{
          font-family: var(--font-heading-family);
          font-weight: var(--font-heading-weight);
          text-transform: uppercase;
          display: inline-block;
          margin-top: 10px;
        }

        @media (max-width: 767px) {
          font-size: 26px;
          line-height: 28px;
        }
      }

      & > a{
        color: #036;
        text-align: center;
        font-family: var(--font-button-family);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--font-button-weight);
        line-height: 18px;
        text-decoration: none;
        border-radius: 200px;
        background: #fcbf2c !important;
        border: 2px solid #fcbf2c !important;
        display: inline-flex;
        padding: 14px 20px;
        justify-content: center;
        align-items: center;
        min-width: 120px;
        text-transform: uppercase;
        margin:40px auto;

        @media(max-width:767px){
          margin:20px auto;
        }

        &:hover{
          background: #e6ae07 !important;
          border: 2px solid #e6ae07 !important;
        }
      }

      & div p{
        margin: 0 0;
        color: #333;
        font-family: var(--font-body-family);
        font-size: 20px;
        font-style: normal;
        font-weight: var(--font-body-weight);
        line-height: 22px;
        text-align: center;

        @media(max-width:767px){
          font-size: 18px;
          line-height: 26px;
        }

        & a{
          color: #333;
          font-family: var(--font-body-family);
          font-size: 20px;
          font-style: normal;
          font-weight: var(--font-body-weight);
          line-height: 22px;
          text-decoration: underline;

          @media(max-width:767px){
            font-size: 18px;
            line-height: 26px;
          }
        }
      }
    }
  }
}