/* the component override */

[data-options-tv-model],
[data-options-tv-price],
[data-options-tv-img],
[data-options-info],
[data-options-table-promo],
[data-options-table-total],
[data-options-table-info] {
  display: none !important;

  &.show {
    display: flex !important;
  }
}

.container {
  width: 100%;
  flex-direction: column;
}

.heading {
  &.main-heading {
    font-weight: 700;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: #000000;
  }

  &.sub-heading {
    font-family: Roboto;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    margin-top: 9px;
  }
}

.inner-menu {
  display: flex;
  max-width: 861px;
  width: 100%;
  padding: 4px 5px;
  background-color: #f6f6f6;
  border-radius: 16px !important;
  margin-top: 32px;

  & .sub-menu-container .menu-button {
    max-width: 281px;

    @media screen and (max-width: 768px) {
      max-width: 108px;
    }
  }
}

.pricing-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-width: 670px;

  @media screen and (max-width: 768px) {
    margin-top: 22px;
    margin-left: -25px;
    margin-right: -40px;
  }

  & .note-container {
    font-family: "Roboto";
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: left;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;

    @media screen and (max-width: 768px) {
      margin-left: 11px;
      margin-right: 11px;
    }

    & .note-container-child {
      max-width: 670px;
      width: 100%;
    }

    & ol {
      font-family: "Roboto";
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0%;
      list-style-position: inside;
      padding-left: 0;

      @media screen and (max-width: 768px) {}

      & ol li {
        padding-left: 0;
        margin-left: 0;
      }
    }
  }
}

.table-container {
  & .table-row:nth-child(1) {
    border-color: #1300b2 !important;
    border-top-right-radius: 16px !important;
    border-top-left-radius: 16px !important;
    overflow: hidden;
    border-bottom-color: #1300b2;
  }

  & .text-orange {
    color: #ff5e00 !important;
  }
}

.card-container {
  width: 100%;
  max-width: 1040px;

  & .card-top {
    display: flex;
    padding: 24px 39px 34px 24px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    justify-content: center;

    & .details-group {
      display: flex;
      flex: 1;
      flex-direction: row;
      justify-content: space-between;

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

  & .card-bottom {
    border-top: none !important;
    background-color: #ff7e33;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    max-height: 100px;
    padding: 25px 35px 24px 95px;
    position: relative;
    display: flex;
    height: 100%;
    overflow: hidden;
    flex-direction: row;
    justify-content: space-between;

    @media screen and (max-width: 768px) {
      flex-direction: column;
      max-height: 201px;
      padding-left: 69px;
    }

    & .existing-customer-decoration {
      height: 100%;
      position: absolute;
      left: 0px;
      top: 0px;

      @media screen and (max-width: 768px) {
        max-width: 51px;
      }
    }
  }
}

.group-row {
  display: flex;
  flex-direction: column;

  & p:nth-child(1) {
    font-weight: 500;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0%;
    color: white;
    @media screen and (max-width: 768px) {
      margin-bottom: 15px;
    }
  }

  & p:nth-child(2) {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: white;

    @media screen and (max-width: 768px) {
      margin-top: 10px;
      margin-bottom: 15px;
    }
  }
}

.item-preview {
  display: flex;
  flex-direction: column;

  & img {
    margin-top: 22px;
  }

  & .item-model {
    font-family: Roboto;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-top: 18px;
  }

  & .item-price {
    font-family: Roboto;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #4d4d4d;
    margin-top: 6px;
  }

  & .item-more-info {
    margin-top: 15px;
    background-color: unset;
    font-family: Roboto;
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    display: flex;
  }

  & .item-more-info::after {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'><path d='M1.31734 10.8125C1.00161 10.8125 0.734375 10.7031 0.515625 10.4844C0.296875 10.2656 0.1875 9.99839 0.1875 9.68266V1.31734C0.1875 1.00161 0.296875 0.734375 0.515625 0.515625C0.734375 0.296875 1.00161 0.1875 1.31734 0.1875H5.25953V1.125H1.31734C1.26922 1.125 1.22516 1.14505 1.18516 1.18516C1.14505 1.22516 1.125 1.26922 1.125 1.31734V9.68266C1.125 9.73078 1.14505 9.77484 1.18516 9.81484C1.22516 9.85495 1.26922 9.875 1.31734 9.875H9.68266C9.73078 9.875 9.77484 9.85495 9.81484 9.81484C9.85495 9.77484 9.875 9.73078 9.875 9.68266V5.74047H10.8125V9.68266C10.8125 9.99839 10.7031 10.2656 10.4844 10.4844C10.2656 10.7031 9.99839 10.8125 9.68266 10.8125H1.31734ZM4.07453 7.58406L3.41594 6.92547L9.21641 1.125H6.75V0.1875H10.8125V4.25H9.875V1.78359L4.07453 7.58406Z' fill='%234D4D4D'/></svg>");
    display: flex;
    margin-left: 5px;
  }
}

#info-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 42px;

  @media screen and (max-width: 768px) {
    gap: 24px;
  }

  & .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Soft drop shadow */
    border-radius: 16px !important;
    overflow: hidden;
    display: flex;
    max-width: 509px;
    height: 268px;
    width: 100%;
    padding-bottom: 21px;
    justify-content: flex-end;
    border: none;
    background-repeat: no-repeat;
    background-position: calc(50% + 5px) center;

    &:nth-child(2) {
      margin-top: 30px;

      @media screen and (max-width: 768px) {
        margin-top: unset;
      }
    }

    &:nth-child(3) {
      margin-top: -10px;

      @media screen and (max-width: 768px) {
        margin-top: unset;
      }
    }

    &:nth-child(4) {
      margin-top: 20px;

      @media screen and (max-width: 768px) {
        margin-top: unset;
      }
    }

    @media screen and (max-width: 768px) {
      height: 190px;
    }

    & .card-text-container {
      z-index: 1;
      max-height: 180px;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      justify-content: center;

      & p:nth-child(1) {
        margin-left: 31px;
        font-weight: 700;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0%;

        @media screen and (max-width: 768px) {
          margin-top: 95px;
          font-weight: 700;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0%;
        }
      }

      & p:nth-child(2) {
        margin-top: 8px;
        margin-left: 31px;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0%;
        max-width: 300px;

        @media screen and (max-width: 768px) {
          margin-top: 1px;
          max-width: 226px;
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
          letter-spacing: 0%;
        }
      }
    }

    & .icon {
      z-index: 999;
      background-repeat: no-repeat;
      height: 56px;
      width: 56px;
      top: 24px;
      left: 24px;
      position: absolute;

      @media screen and (max-width: 768px) {
        height: 40px;
        width: 40px;
        top: 16px;
        left: 16px;
      }
    }
  }

  & .bg-1 {
    background-image: url("https://unifi.com.my/sites/default/files/page/assets/revamp/microsite/devicefiesta/card/card1/bg-1.png");
    background-size: 100% auto;

    & .icon {
      /* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'><circle cx='20' cy='20' r='20' fill='%23F1F0FF'/><path d='M15.1875 21.6771C17.8567 19.1337 21.4332 19.1337 24.1024 21.6771' stroke='%231800E7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/><path d='M28.5715 17.9342C27.4359 16.8191 26.1745 15.9586 24.8721 15.3264C21.5297 13.7284 17.7864 13.7284 14.4206 15.3264C13.1182 15.9586 11.8773 16.8191 10.7212 17.9342' stroke='%231800E7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/><path d='M19.6357 26.4717H19.6533' stroke='%231800E7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); */
    }
  }

  & .bg-2 {
    background-image: url("https://unifi.com.my/sites/default/files/page/assets/revamp/microsite/devicefiesta/card/card2/bg-2.png");
    background-size: 100% auto;

    & .icon {
      /* background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none'><circle cx='28' cy='28' r='28' fill='%23F1F0FF'/><path d='M24.0695 42.7412C16.7067 42.7412 15.2324 41.2655 15.2324 35.3607V20.5953C15.2324 14.6905 16.7045 13.2148 22.5952 13.2148H31.4322C37.3228 13.2148 38.7949 14.6905 38.7949 20.5953V25.0245' stroke='%231800E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M30.6387 18.5859H25.2012' stroke='%231800E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M39.5062 31.67L37.1868 29.4716C36.4772 28.799 35.5187 28.4258 34.5126 28.4258H30.7891C28.5238 28.4258 27.0137 29.8572 27.0137 32.0042V39.1631C27.0137 41.3102 28.5238 42.7416 30.7891 42.7416H36.832C39.0972 42.7416 40.6074 41.3102 40.6074 39.1631V34.2025C40.6074 33.2428 40.2072 32.3344 39.504 31.6679L39.5062 31.67Z' stroke='%231800E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M34.0815 32.9023H31.7271C31.126 32.9023 30.6387 33.3835 30.6387 33.977V36.3014C30.6387 36.8949 31.126 37.376 31.7271 37.376H34.0815C34.6826 37.376 35.1699 36.8949 35.1699 36.3014V33.977C35.1699 33.3835 34.6826 32.9023 34.0815 32.9023Z' stroke='%231800E7' stroke-width='2'/></svg>"); */
    }
  }

  & .bg-3 {
    background-image: url("https://unifi.com.my/sites/default/files/page/assets/revamp/microsite/devicefiesta/card/card3/bg-3.png");
    background-size: 100% auto;

    & .icon {
      /* background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none'><circle cx='28' cy='28' r='28' fill='%23F1F0FF'/><g clip-path='url(%23clip0_2636_5730)'><path d='M38.9784 15.9062H16.0215C13.7422 15.9062 11.8945 17.779 11.8945 20.0892V33.8874C11.8945 36.1976 13.7422 38.0704 16.0215 38.0704H38.9784C41.2577 38.0704 43.1054 36.1976 43.1054 33.8874V20.0892C43.1054 17.779 41.2577 15.9062 38.9784 15.9062Z' stroke='%231800E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M29.7025 25.7511L26.4343 23.8389C25.3389 23.1982 23.9712 23.9981 23.9712 25.2796V29.106C23.9712 30.3874 25.3389 31.1874 26.4343 30.5466L29.7025 28.6345C30.7978 27.9937 30.7978 26.3919 29.7025 25.7511Z' stroke='%231800E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M21.3809 41.0938H33.6187' stroke='%231800E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></g><defs><clipPath id='clip0_2636_5730'><rect width='33' height='27' fill='white' transform='translate(11 15)'/></clipPath></defs></svg>"); */
    }
  }

  & .bg-4 {
    background-image: url("https://unifi.com.my/sites/default/files/page/assets/revamp/microsite/devicefiesta/card/card4/bg-4.png");
    background-size: 100% auto;

    & .icon {
      /* background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none'><circle cx='28' cy='28' r='28' fill='%23F1F0FF'/><path d='M14 29H41' stroke='%231800E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M20.2159 14H35.7698C40.7532 14 42 15.2296 42 20.1299V28.87C42 33.7844 40.7532 34.9999 35.7841 34.9999H20.2159C15.2468 35.014 14 33.7844 14 28.8841V20.1299C14 15.2296 15.2468 14 20.2159 14Z' stroke='%231800E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M28 35V42' stroke='%231800E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M22 42H34' stroke='%231800E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); */
    }
  }
}

.device .device-title {
  font-family: "HK-Grostek-Wide";
  font-weight: 700;
  font-size: 36px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  width: 100% !important;
  /* display: flex; */
  display: inline-block;
  width: 100%;
}

#device-card {
  display: flex;
  margin-top: 42px;
  max-width: 1040px;
  width: 100%;
  justify-content: space-between;

  & .btn_holder {
    margin-top: 16px;
    width: 100%;
  }

  @media screen and (max-width: 768px) {
    flex-direction: column;
    max-width: unset;
    justify-content: unset;
    gap: 32px;
  }

  & .device-title {
    font-family: "HK-Grostek-Wide";
    font-weight: 700;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;

    &:after {
      content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><mask id='mask0_2636_5635' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'><rect width='20' height='20' transform='matrix(1 0 0 -1 0 20)' fill='%23D9D9D9'/></mask><g mask='url(%23mask0_2636_5635)'><path d='M9.99967 6.05901C10.1904 6.05901 10.3502 6.12352 10.4793 6.25255C10.6083 6.38158 10.6728 6.54144 10.6728 6.73213C10.6728 6.92283 10.6083 7.08269 10.4793 7.21172C10.3502 7.34061 10.1904 7.40505 9.99967 7.40505C9.80898 7.40505 9.64912 7.34061 9.52009 7.21172C9.39106 7.08269 9.32655 6.92283 9.32655 6.73213C9.32655 6.54144 9.39106 6.38158 9.52009 6.25255C9.64912 6.12352 9.80898 6.05901 9.99967 6.05901ZM9.37467 9.1038H10.6247V14.1038H9.37467V9.1038ZM10.0011 2.08464C8.90613 2.08464 7.8769 2.29241 6.91342 2.70797C5.94995 3.12352 5.1119 3.68748 4.39926 4.39984C3.68662 5.1122 3.12238 5.94991 2.70655 6.91297C2.29085 7.87602 2.08301 8.90498 2.08301 9.99984C2.08301 11.0948 2.29079 12.1241 2.70634 13.0876C3.1219 14.051 3.68586 14.8891 4.39822 15.6017C5.11058 16.3144 5.94829 16.8786 6.91134 17.2944C7.8744 17.7101 8.90335 17.918 9.99822 17.918C11.0932 17.918 12.1225 17.7102 13.0859 17.2946C14.0494 16.8791 14.8875 16.3151 15.6001 15.6028C16.3127 14.8904 16.877 14.0527 17.2928 13.0896C17.7085 12.1266 17.9163 11.0976 17.9163 10.0028C17.9163 8.90776 17.7086 7.87852 17.293 6.91505C16.8775 5.95158 16.3135 5.11352 15.6011 4.40088C14.8888 3.68825 14.0511 3.12401 13.088 2.70818C12.125 2.29248 11.096 2.08464 10.0011 2.08464ZM9.99967 3.33464C11.8608 3.33464 13.4372 3.98047 14.7288 5.27214C16.0205 6.5638 16.6663 8.14019 16.6663 10.0013C16.6663 11.8624 16.0205 13.4388 14.7288 14.7305C13.4372 16.0221 11.8608 16.668 9.99967 16.668C8.13856 16.668 6.56217 16.0221 5.27051 14.7305C3.97884 13.4388 3.33301 11.8624 3.33301 10.0013C3.33301 8.14019 3.97884 6.5638 5.27051 5.27214C6.56217 3.98047 8.13856 3.33464 9.99967 3.33464Z' fill='%231C1B1F'/></g></svg>");
      width: 20px;
      height: 20px;
      padding-left: 5px;
    }
  }

  & .card {
    display: flex;
    max-width: 331px;
    max-height: 573px;
    flex: 1 1 auto;
    padding: 51px 13px 27px 13px;
    border-radius: 0px 64px 16px 16px !important;
    align-items: center;

    @media screen and (max-width: 768px) {
      max-width: unset;
    }

    & .device-img {
      min-width: 247px;
      min-height: 166px;
    }

    & .device-title {
      font-weight: 700;
      font-size: 20px;
      line-height: 28px;
      letter-spacing: 0%;
      text-align: center;
      margin-top: 44px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    & .device-desc {
      font-weight: 400;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: 0%;
      text-align: center;
    }

    & .device-price {
      font-weight: 500;
      font-size: 16px;
      line-height: 16.8px;
      letter-spacing: 0.13px;
      text-align: center;
      margin-top: 42px;

      & span {
        font-weight: 700;
        font-size: 16px;
        line-height: 16.8px;
        letter-spacing: 0.13px;
        text-align: center;
        color: #ff5e00 !important;
      }
    }

    & .device-details {
      display: flex;
      justify-content: space-evenly;
      flex-direction: row;
      margin-top: 20px;
      gap: 0px;

      & .spec {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex: 1;

        & .spec-title {
          font-weight: 400;
          font-size: 12px;
          line-height: 14px;
          letter-spacing: 0%;
          text-align: center;
          margin-top: 17px;
        }
      }
    }
  }
}

#eligibility {
  & .heading.main-heading {
    padding-top: 81px;
  }

  & .eligibility-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

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

      & .card-item::nth-last-child {
        margin-bottom: 72px !important;
      }
    }

    & .card-item {
      margin-top: 42px;
      margin-bottom: 79px;
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;

      @media screen and (max-width: 768px) {
        /* margin-bottom:0px;  */
      }

      & .title {
        margin-top: 24px;
        text-align: center;
        font-weight: 500;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: 0%;
      }

      & .img-container {
        display: flex;
        width: 100px;
        height: 100px;

        & img {
          width: 100%;
        }
      }
    }
  }
}

#postpaid-faq {
  margin-top: 35px;

  & .heading.main-heading {
    margin-top: 53px;
    margin-bottom: 51px;
  }
}

#cross-sell-carousel {
  width: 100%;

  & .cross-sell-carousel-item {
    & .carousel-slide {
      background: #fef5ee;
      background-size: contain !important;
      background-position: 100% center !important;
      background-repeat: no-repeat !important;
      padding: 35px;
      border-radius: 16px !important;
      box-shadow: 0px 4px 30px 0px rgba(216, 46, 0, 0.3);
      /* opacity: 0; */
      transition: all 0.3s ease-in;

      @media (max-width: 768px) {
        background: #fef5ee !important;
        padding: 24px;
      }

      & .carousel-slide-content {
        width: 50%;

        @media (max-width: 768px) {
          width: 100%;
        }
      }

      & .promotion-mobile-bg {
        display: none;

        @media (max-width: 768px) {
          display: block;
          width: calc(100% + 48px);
          margin-left: -24px;
          margin-right: -24px;
        }
      }

      & .title {
        font-family: "HK-Grostek-Wide";
        font-weight: 700;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0%;
        vertical-align: middle;
        text-transform: uppercase;
        color: #000000;
      }

      & .description {
        margin-top: 15px;
        font-family: "Roboto";
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
        vertical-align: middle;
      }

      & .component.button-arrow {
        margin-top: 43px;

        @media (max-width: 768px) {
          margin-top: 32px;
          margin-bottom: 36px;
        }
      }

      & .promotion-mobile-bg {
        @media (max-width: 768px) {
          /* margin-left:-24px; */
          margin-bottom: -24px;
          width: 100%;
          width: calc(100% + 48px);
          margin-left: -24px;
          margin-right: -24px;
          & img {
            width: 100%;
            display: block;
          }   
        }
      }
    }
  }
}

#card-package {
  padding-bottom: 150px !important;
}

.component {
  &.table-container {
    & .table-row {
      & .row-item {
        display: flex;
        justify-content: flex-start;
        white-space: wrap;
      }
    }
  }
}

.innerHeroBanner {
  & .container {
    & .hero {
      @media screen and (max-width: 767px) {
        max-width: 100%;
      }
    }
  }
}

#modal-product-model-desc {
  padding-right: unset !important;

  & .modal-lg {
    max-width: 680px;

    @media (max-width: 767px) {
      /* left:-8px */
      margin: unset;
    }
  }

  & [data-dismiss="modal"] {
    z-index: 9999;
  }

  & .modal-body {
    display: flex;
    flex-direction: row;
    padding: 15px 20px 28px 16px !important;

    @media (max-width: 767px) {
      flex-direction: column;
      top: -41px;
      padding: 15px !important;
    }

    & .modal-product-desc-container {
      margin-top: 24px;

      & ul {
        padding-left: 20px;
        flex-direction: column;

        & li {
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          letter-spacing: 0%;
        }
      }
    }

    & .main-img-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 240px;
      height: 206px;
      overflow: hidden;
      margin-bottom: 40px;

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

    & .product-image-wrapper {
      @media (max-width: 767px) {
        display: flex;
        justify-content: center;
        margin-bottom: 17px;
      }
    }

    & .product-image-container {
      max-width: 250px;
      width: 100%;
    }

    & .product-desc-container {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      max-width: 378px;
      margin-left: 36px;
      justify-content: center;

      @media (max-width: 767px) {
        max-width: unset !important;
        margin-left: 0px;
      }

      & .modal-product-desc-name {
        font-family: Roboto;
        font-weight: 700;
        font-size: 18px;
        line-height: 18px;
        letter-spacing: 0%;
        color: #000000;
      }

      & .modal-product-desc-model {
        font-family: Roboto;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0%;
        color: #333333;
        margin-top: 4px;
      }

      & .modal-product-desc-desc {
        font-family: Roboto;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0%;
        color: #000000;
        margin-top: 16px;
      }
    }

    & .custom-slider-wrapper {
      display: flex;
      flex-direction: row;
      height: 80px;

      & .slider-nav {
        width: 100%;
        max-width: 175px;
        height: 80px;
        padding-left: 5px;

        & .thumbs-img-container {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80px;
          height: 80px;
          overflow: hidden;
          /* padding: 13px 5px 5px 1px; */
          background-color: #efefef;
          border-radius: 4px !important;

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

        & .slick-current {
          & .thumbs-img-container {
            border: 1px solid #1300b2;
            border-radius: 4px !important;
            background-color: white;
          }
        }
      }
    }

    & .custom-prev,
    & .custom-next {
      width: 32px !important;
      height: 80px !important;
      background-color: #f6f6f6;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      cursor: pointer;
      user-select: none;
    }

    & .custom-icon-prev {
      content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='18' viewBox='0 0 10 18' fill='none'><path d='M9.53048 15.9698C9.60017 16.0395 9.65544 16.1222 9.69315 16.2132C9.73086 16.3043 9.75028 16.4019 9.75028 16.5004C9.75028 16.599 9.73086 16.6965 9.69315 16.7876C9.65544 16.8786 9.60017 16.9614 9.53048 17.031C9.4608 17.1007 9.37807 17.156 9.28703 17.1937C9.19598 17.2314 9.0984 17.2508 8.99986 17.2508C8.90131 17.2508 8.80373 17.2314 8.71269 17.1937C8.62164 17.156 8.53892 17.1007 8.46923 17.031L0.969232 9.53104C0.8995 9.46139 0.844181 9.37867 0.806438 9.28762C0.768695 9.19657 0.749268 9.09898 0.749268 9.00042C0.749268 8.90186 0.768695 8.80426 0.806438 8.71321C0.844181 8.62216 0.8995 8.53945 0.969232 8.46979L8.46923 0.969792C8.60996 0.829062 8.80083 0.75 8.99986 0.75C9.19888 0.75 9.38975 0.829062 9.53048 0.969792C9.67121 1.11052 9.75028 1.30139 9.75028 1.50042C9.75028 1.69944 9.67121 1.89031 9.53048 2.03104L2.56017 9.00042L9.53048 15.9698Z' fill='%23363636'/></svg>");
      height: 16.5px;
      width: 9px;
    }

    & .custom-icon-next {
      content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='18' viewBox='0 0 10 18' fill='none'><path d='M9.53048 15.9698C9.60017 16.0395 9.65544 16.1222 9.69315 16.2132C9.73086 16.3043 9.75028 16.4019 9.75028 16.5004C9.75028 16.599 9.73086 16.6965 9.69315 16.7876C9.65544 16.8786 9.60017 16.9614 9.53048 17.031C9.4608 17.1007 9.37807 17.156 9.28703 17.1937C9.19598 17.2314 9.0984 17.2508 8.99986 17.2508C8.90131 17.2508 8.80373 17.2314 8.71269 17.1937C8.62164 17.156 8.53892 17.1007 8.46923 17.031L0.969232 9.53104C0.8995 9.46139 0.844181 9.37867 0.806438 9.28762C0.768695 9.19657 0.749268 9.09898 0.749268 9.00042C0.749268 8.90186 0.768695 8.80426 0.806438 8.71321C0.844181 8.62216 0.8995 8.53945 0.969232 8.46979L8.46923 0.969792C8.60996 0.829062 8.80083 0.75 8.99986 0.75C9.19888 0.75 9.38975 0.829062 9.53048 0.969792C9.67121 1.11052 9.75028 1.30139 9.75028 1.50042C9.75028 1.69944 9.67121 1.89031 9.53048 2.03104L2.56017 9.00042L9.53048 15.9698Z' fill='%23363636'/></svg>");
      transform: rotate(180deg);
      height: 16.5px;
      width: 9px;
    }
  }
}

body.modal-open > :not(.modal) {
  /* background: #9a9a9a; */
  background: transparent !important;
}

#faq-accordion .btn.btn-link:not(.collapsed) {
  color: #1800e7 !important;
  &::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_4408_3128)'%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%231800E7'/%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%231800E7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4408_3128'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
  }
}

#faq-accordion .btn.btn-link.collapsed {
  color: black !important;
  &::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_4408_902)'%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%231800E7'/%3E%3Cpath d='M13 5V19H11V5H13Z' fill='%231800E7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4408_902'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important
  }
}