section.pay-sec .brightdiv {
  background: #fff;
  display: flex;
  flex-wrap: nowrap;
  width: 410px;
  justify-content: space-between;
  padding: 6px 3px 6px 6px;
  border-radius: 10px;
  margin-bottom: 20px;

  .brightleft {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 15px;

    .lefttitle {
      font-weight: 500;
      font-size: 22px;
      font-family: var(--font-body-family);
      color: #073a83;
    }

    & p {
      font-weight: 400;
      font-family: var(--font-body-family);
      font-size: 14px;
      width: 100%;

      & a {
        color: #d42e20;
      }
    }
  }

  .brightright {
    background: #00c28c;
    border-radius: 10px;
    display: flex;
    min-width: 148px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    text-align: center;

    & p {
      color: #fff;
      font-size: 14px;
      margin: 0 !important;
      Span {
        color: #fff;
        text-decoration: none;
      }
    }
  }
}

/* after pay styles */
section.pay-sec .brightdiv.vis-afterpay-sec .brightleft {
  font-size: 0;
}

section.pay-sec .brightdiv.vis-afterpay-sec .brightright {
  background: transparent !important;
  border-radius: 0;
  min-height: inherit;
  display: flex;
  flex-wrap: nowrap;
  min-width: 287px;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  gap: 5px;
}

section.pay-sec .brightdiv.vis-afterpay-sec .brightright .brighte_div {
  background: #00c28c;
  border-radius: 10px;
  padding: 10px 10px 4px 10px;
}

section.pay-sec .brightdiv.vis-afterpay-sec .brightright .brighte_div a {
  font-size: 14px;
  color: #fff;
  text-decoration: underline;
}

section.pay-sec .brightdiv.vis-afterpay-sec {
  width: 560px;
}

section.pay-sec .brightdiv.vis-afterpay-sec .afterpay_div {
  width: 148px;
  border-radius: 10px;
  overflow: hidden;
  background: #b2fce5;
  padding: 10px;
  height: 84px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

section.pay-sec .brightdiv.vis-afterpay-sec .afterpay_div img {
  max-width: 120px;
}

section.pay-sec .brightdiv.vis-afterpay-sec .afterpay_div span {
  width: 100%;
  position: relative;
  font-size: 14px;
  padding: 0;
  text-align: center;
  display: block;
  color: #000;
  line-height: 1.2;
}
/*  NEW CSS  */
.pay-sec {
  .inbanner-content {
    & .heading-50 {
      font-size: 48px;
      margin-bottom: 0;
    }
  }
  .banner-key-points-wrapper {
    border-radius: 10px;
    padding: 10px;
  }
  .btnlist {
    margin: 20px 0;
  }
}
/* PAYE AFTER BUY  */
.ctent-img:has(.vis-afterpay-sec) {
  position: relative;
  top: inherit;
  .vis-afterpay-sec {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px;
    position: absolute;
    top: 50%;
    border-radius: 10px;
    right: 0;
    max-width: 155px;
    margin-right: -65px;
    box-shadow: 0 2px 3px 2px rgb(0 0 0 / 6%);
    transform: translateY(-50%);
    justify-content: center;
    text-align: center;
    align-items: center;
    align-content: center;
    gap: 10px;
    & .buy-title {
      font-weight: 500;
      font-size: 20px;
      font-family: var(--font-body-family);
      color: #073a83;
      padding: 0 5px;
      line-height: 1.2;
      margin-bottom: 0px;
    }
    & .brighte_div {
      background: #00c28c;
      border-radius: 10px;
      padding: 10px 10px;
      width: 100%;
      & p,
      a {
        color: #fff;
        font-size: 14px;
        margin: 0 !important;
        & span {
          text-decoration: none;
          color: var(--white);
          font-size: 14px;
        }
      }
      & a {
        text-decoration: underline;
        &:hover {
          color: var(--theme);
        }
      }
    }
    & .afterpay_div {
      width: 148px;
      border-radius: 10px;
      overflow: hidden;
      background: #b2fce5;
      padding: 10px;
      height: 84px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      width: 100%;
      & span {
        width: 100%;
        position: relative;
        font-size: 14px;
        padding: 0;
        text-align: center;
        display: block;
        color: #000;
        line-height: 1.2;
      }
    }
  }
}

/* RESPONIVE  */
@media (max-width: 1599px) {
  .pay-sec {
    .inbanner-content {
      & .heading-50 {
        font-size: 44px;
        margin-bottom: 0;
      }
    }
  }
}
@media (max-width: 1439px) {
  .pay-sec {
    .inbanner-content {
      & .heading-50 {
        font-size: 40px;
        margin-bottom: 0;
      }
    }
  }
  .ctent-img:has(.vis-afterpay-sec) {
    .vis-afterpay-sec {
      margin-right: -40px;
    }
  }
}
@media (max-width: 1199px) {
  .ctent-img:has(.vis-afterpay-sec) {
    .vis-afterpay-sec {
      max-width: 150px;
      margin-right: -20px;
    }
  }
}

@media screen and (max-width: 992px) {
  .pay-sec {
    .inbanner-content {
      & .heading-50 {
        font-size: 36px;
        margin-bottom: 0;
      }
    }
  }

  section.sub_area_banner.banner-afterpay .olhmban_wrap {
    padding-bottom: 180px;
  }

  section.sub_area_banner.banner-afterpay.pay-sec .brightdiv .brightleft {
    padding: 5px 14px;
  }

  section.sub_area_banner.banner-afterpay.pay-sec .brightdiv {
    bottom: 90px;
  }

  section.sub_area_banner.banner-afterpay.pay-sec .olhmban_wrap .banner_n_img {
    margin: 0 0 10px 0;
  }

  section.sub_area_banner.banner-afterpay.pay-sec
    .ol_hmbanner
    .banner_btngrp
    li:first-child {
    margin-bottom: 10px;
  }
  .ctent-img:has(.vis-afterpay-sec) {
    margin-bottom: 0 !important;
    .vis-afterpay-sec {
      position: relative;
      transform: none;
      right: 15px;
      left: 15px;
      max-width: calc(100% - 30px);
      margin: -40px 0 0;
      top: inherit;
      flex-direction: row;
      & .info-div {
        flex: 1;
      }
      & .brighte_div,
      & .afterpay_div {
        width: 33.33%;
        min-height: 94px;
      }
      & .afterpay_div > img {
        max-width: 100px;
      }
    }
  }
  .buy-pay-wrap {
    & .brighte_div {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      align-content: center;
    }
  }
}

@media screen and (max-width: 768px) {
  .pay-sec {
    .inbanner-content {
      & .heading-50 {
        font-size: 30px;
        margin-bottom: 0;
      }
    }
  }
  section.pay-sec .brightdiv {
    .brightleft {
      padding: 5px 10px;
    }
  }
  section.pay-sec .brightdiv .brightleft p {
    font-size: 12px;
  }

  section.pay-sec .brightdiv .brightleft .lefttitle {
    font-size: 18px;
  }

  section.pay-sec .brightdiv {
    width: 330px;
  }

  section.pay-sec .brightdiv .brightright {
    min-width: 125px;
    padding: 5px 8px;
    border-radius: 5px;
  }
  section.pay-sec.sub_area_banner .olhmban_wrap {
    padding-bottom: 100px !important;
  }

  section.pay-sec .brightdiv.vis-afterpay-sec {
    width: 100%;
  }

  .sub_area_banner .js_hmbanner .slick-dots {
    display: none !important;
  }
  .pay-sec .banner-key-points-wrapper {
    grid-row-gap: 5px;
  }
  .pay-sec .banner-key-points-wrapper .key-item span {
    margin-top: 0;
  }
}

@media screen and (max-width: 576px) {
  .pay-sec {
    .banner-key-points-wrapper {
      padding: 5px 10px;
    }
  }

  .pay-sec {
    .inbanner-content {
      & .heading-50 {
        font-size: 24px;
      }
    }
  }
  section.sub_area_banner.banner-afterpay.pay-sec .brightdiv {
    bottom: 90px;
    flex-wrap: wrap;
    width: 310px;
    justify-content: center;
    text-align: center;
  }

  section.sub_area_banner.banner-afterpay.pay-sec
    .brightdiv
    .brightleft
    .lefttitle {
    width: 100%;
  }

  .sub_area_banner .js_hmbanner .slick-dots {
    display: block !important;
  }

  section.sub_area_banner.banner-afterpay.pay-sec .olhmban_wrap {
    padding-bottom: 140px !important;
  }

  section.sub_area_banner.banner-afterpay.pay-sec .brightdiv .brightleft {
    justify-content: center;
  }

  section.sub_area_banner.banner-afterpay.pay-sec .brightdiv .brightleft {
    padding: 0px 14px 5px 14px;
  }

  section.pay-sec .brightdiv {
    padding: 5px;
    align-items: center;
  }
  section.pay-sec .brightdiv.vis-afterpay-sec .afterpay_div {
    width: 120px;
    padding: 5px;
    height: auto;
  }
  section.pay-sec .brightdiv.vis-afterpay-sec .afterpay_div img {
    max-width: 100px;
  }
  section.pay-sec .brightdiv {
    .brightleft {
      padding: 5px 5px;
    }
  }
  section.pay-sec .brightdiv.vis-afterpay-sec .brightright .brighte_div {
    padding: 5px 10px;
  }
  .inner-banner.hlg-banner.pay-sec.banner-afterpay {
    min-height: 450px;
  }
  .inner-banner.pay-sec.banner-afterpay:has(:not(.hlg-banner))
    .inbanner-col-left,
  .inner-banner.pay-sec.banner-afterpay:has(:not(.hlg-banner))
    .inbanner-col-right {
    height: 450px;
  }
  section.pay-sec .brightdiv.vis-afterpay-sec {
    width: 100%;
    text-align: center;
    flex-wrap: wrap;
    max-width: max-content;
    min-width: fit-content;
    flex-direction: column;
    .brightleft {
      padding: 5px 5px;
      width: 100%;
    }
    .brightright {
      min-width: 100%;
    }
  }
  section.pay-sec .brightdiv {
    .brightleft {
      padding: 5px 5px;
    }
  }
  section.pay-sec .brightdiv {
    width: 100%;
  }
  .ctent-img:has(.vis-afterpay-sec) {
    & .vis-afterpay-sec {
      & .info-div {
        flex: 0 100%;
      }
    }
  }
  .ctent-img:has(.vis-afterpay-sec) {
    & .vis-afterpay-sec {
      & .brighte_div,
      & .afterpay_div {
        width: 48%;
      }
      & .buy-title {
        font-size: 18px;
        padding: 0;
      }
    }
  }
  .vis-afterpay-sec.buy-pay-wrap {
    & .info-div {
      flex: 0 48% !important;
    }
  }
}