.referral-sec-new {
  .referral-btn {
    border-radius: 24px;
    border: 1.6px solid #53eafd;
    background: linear-gradient(90deg, #155dfc 0%, #00b8db 50%, #155dfc 100%);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 12px;
    margin-bottom: 12px;
    color: #fff;
    text-align: center;
    font-family: "Clash Display";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 133.333% */
  }

  .refer-user-list {
    ul {
      padding-left: 0;
    }
    li {
      margin: 0 0 12px;
      align-items: center;
      list-style: none;
      display: flex;
      padding: 25px 20px;
      gap: 25px;
      position: relative;
      border-radius: 16px;
      border: 1px solid #f0b100;
      background: linear-gradient(
        135deg,
        #2d3150 0%,
        #2a2e4d 7.14%,
        #272c4a 14.29%,
        #252946 21.43%,
        #222743 28.57%,
        #1f2440 35.71%,
        #1d223d 42.86%,
        #1a1f3a 50%,
        #13172d 57.14%,
        #0c1021 64.29%,
        #060816 71.43%,
        #03040b 78.57%,
        #010103 85.71%,
        #000 92.86%,
        #000 100%
      );
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    li::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      margin: auto;
      background-image: url(../update-bot-img/refer-user-box.webp);
      background-position: left;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    li {
      .big-img {
        border-radius: 50%;
        border: 2.214px solid #fff085;
        background: linear-gradient(
          135deg,
          #ffdf20 0%,
          #ff8904 50%,
          #f54900 100%
        );
        box-shadow: 0 15.678px 31.356px -7.525px rgba(0, 0, 0, 0.25);
        height: 50px;
        width: 50px;
        object-fit: cover;
        position: relative;
      }
      .small-img {
        position: absolute;
        border-radius: 50%;
        border: 0.886px solid #fff085;
        background: linear-gradient(135deg, #ffdf20 0%, #d08700 100%);
        box-shadow:
          0 6.271px 9.407px -1.881px rgba(0, 0, 0, 0.1),
          0 2.508px 3.763px -2.508px rgba(0, 0, 0, 0.1);
        padding: 2px 5px;
        height: 25px;
        width: 25px;
        object-fit: contain;
        right: -6px;
        top: -6px;
      }
      .user-detail h4 {
        color: #ffd700;
        font-family: "Clash Display";
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px; /* 155.556% */
        margin-bottom: 0;
      }
      .user-detail p {
        color: #60a5fa;
        font-family: Poppins, "sans-serif";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; /* 142.857% */
        letter-spacing: 0.7px;
        margin-bottom: 0;
      }
    }
    li.blue-outer {
      border: 1px solid #2b7fff;
      background: linear-gradient(
        135deg,
        #2d3150 0%,
        #2a2e4d 7.14%,
        #272c4a 14.29%,
        #252946 21.43%,
        #222743 28.57%,
        #1f2440 35.71%,
        #1d223d 42.86%,
        #1a1f3a 50%,
        #13172d 57.14%,
        #0c1021 64.29%,
        #060816 71.43%,
        #03040b 78.57%,
        #010103 85.71%,
        #000 92.86%,
        #000 100%
      );
      .big-img {
        border: 2.214px solid #0093e6;
        background: linear-gradient(
          135deg,
          #20cbff 0%,
          #20c5e4 50%,
          #7bd5f6 100%
        );
      }
    }
    li.violet-outer {
      border: 1px solid #ad46ff;
      background: linear-gradient(
        135deg,
        #2d3150 0%,
        #2a2e4d 7.14%,
        #272c4a 14.29%,
        #252946 21.43%,
        #222743 28.57%,
        #1f2440 35.71%,
        #1d223d 42.86%,
        #1a1f3a 50%,
        #13172d 57.14%,
        #0c1021 64.29%,
        #060816 71.43%,
        #03040b 78.57%,
        #010103 85.71%,
        #000 92.86%,
        #000 100%
      );
      .big-img {
        border: 2.214px solid #fff085;
        background: linear-gradient(
          135deg,
          #e49ed9 0%,
          #ce59b0 50%,
          #ba36d0 100%
        );
      }
    }
  }
  .invite-task-box {
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
    background: #f5f5f5;
    padding: 16px 45px;
    border-radius: 20px;
    background: url(../update-bot-img/invite-earn-box.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    h4 {
      color: #fff;
      text-align: center;
      font-family: "Clash Display";
      font-size: 32px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      border-bottom: 0.16px solid #fff;
      text-align: center;
      padding-bottom: 14px;
      margin-bottom: 14px;
    }
    .invite-friend-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .refer-friend-box {
      border-radius: 9px;
      background: rgba(0, 147, 230, 0.35);
      padding: 7px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      img {
        height: 20px;
        width: 20px;
      }
      h5 {
        color: #fff;
        font-family: Poppins, "sans-serif";
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-bottom: 0;
      }
    }
  }
  .invite-friend-list {
    ul {
      padding-left: 0;
    }
    li {
      list-style: none;
      position: relative;
    }
    li > div {
      margin: 0 0 18px;
      align-items: center;
      overflow: hidden;
      display: flex;
      padding: 22px 20px;
      gap: 14px;
      position: relative;
      border-radius: 24px;
      border: 2px solid #fdc700;
      background: linear-gradient(
        135deg,
        #2d3150 0%,
        #2a2e4d 7.14%,
        #272c4a 14.29%,
        #252946 21.43%,
        #222743 28.57%,
        #1f2440 35.71%,
        #1d223d 42.86%,
        #1a1f3a 50%,
        #13172d 57.14%,
        #0c1021 64.29%,
        #060816 71.43%,
        #03040b 78.57%,
        #010103 85.71%,
        #000 92.86%,
        #000 100%
      );
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      z-index: 1;
    }
    li > div::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      margin: auto;
      background-image: url(../update-bot-img/invite-friend-box.webp);
      background-position: left;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    li {
      .big-img {
        border-radius: 12px;
        border: 1.618px solid #fff085;
        background: linear-gradient(
          135deg,
          #ffdf20 0%,
          #ff8904 50%,
          #e7000b 100%
        );
        padding: 6px;
        box-shadow: 0 11.459px 22.919px -5.501px rgba(0, 0, 0, 0.25);
        height: 50px;
        width: 50px;
        object-fit: cover;
        position: relative;
      }
      .user-detail h4 {
        color: #fff;
        font-family: "Clash Display";
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 0;
      }
      .user-detail p {
        color: #fff;
        font-family: Poppins, "sans-serif";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-bottom: 0;
        max-width: 300px;
        span {
          color: #0093e6;
        }
      }
    }
    li > div.violet-outer {
      border: 2px solid #c27aff;
      background: linear-gradient(
        135deg,
        #2d3150 0%,
        #2a2e4d 7.14%,
        #272c4a 14.29%,
        #252946 21.43%,
        #222743 28.57%,
        #1f2440 35.71%,
        #1d223d 42.86%,
        #1a1f3a 50%,
        #13172d 57.14%,
        #0c1021 64.29%,
        #060816 71.43%,
        #03040b 78.57%,
        #010103 85.71%,
        #000 92.86%,
        #000 100%
      );

      .big-img {
        border: 1.618px solid #e9d4ff;
        background: linear-gradient(
          135deg,
          #dab2ff 0%,
          #fb64b6 50%,
          #8200db 100%
        );
      }
    }
    li > div.violet-outer::before {
      background-image: url(../update-bot-img/violet-invite-box.webp);
    }
    li::after {
      content: "";
      border-radius: 32px;
      opacity: 0.506;
      background: linear-gradient(90deg, #f0b100 0%, #ff8904 50%, #fb2c36 100%);
      filter: blur(40px);
      position: absolute;
      height: 130%;
      width: 100%;
      left: 0;
      top: -15px;
    }
    li.violet-after::after {
      background: linear-gradient(90deg, #ad46ff 0%, #fb64b6 50%, #ad46ff 100%);
    }
  }
}

@media (max-width: 375px) {
  .referral-sec-new {
    .referral-btn {
      font-size: 20px;
      line-height: 26px;
    }
    .refer-user-list {
      li {
        .user-detail h4 {
          font-size: 16px;
          line-height: 26px;
        }
        .user-detail p {
          font-size: 12px;
          line-height: 18px;
        }
        .big-img {
          height: 45px;
          width: 45px;
        }
        .small-img {
          height: 20px;
          width: 20px;
        }
      }
    }
    .invite-task-box {
      h4 {
        font-size: 28px;
      }
    }
    .invite-friend-list {
      & li {
        .user-detail p {
          font-size: 12px;
        }
        .user-detail h4 {
          font-size: 16px;
        }
        .big-img {
          height: 45px;
          width: 45px;
        }
      }
    }
  }
}

/* ========= daily reward sec =============== */
.reward-new-sec {
  .user-head-reward {
    border-radius: 24px;
    border: 2px solid #53eafd;
    background: linear-gradient(
      135deg,
      #4169e1 0%,
      #3e6fe5 7.14%,
      #3b74ea 14.29%,
      #387aee 21.43%,
      #337ff2 28.57%,
      #2e85f6 35.71%,
      #278afb 42.86%,
      #1e90ff 50%,
      #1a8af8 57.14%,
      #1684f0 64.29%,
      #127ee9 71.43%,
      #0d78e2 78.57%,
      #0872da 85.71%,
      #046cd3 92.86%,
      #06c 100%
    );
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;

    .inner-user {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .inner-user > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .inner-user > div .profile-img img {
      height: 43px;
      margin-right: 10px;
      position: relative;
      width: 43px;
      border-radius: 50%;
      border: 1.898px solid #fff085;
      background: linear-gradient(135deg, #ffdf20 0%, #ff6900 100%);
      box-shadow: 0 16.798px 33.595px -8.063px rgba(0, 0, 0, 0.25);
    }

    .inner-user > div h3 {
      color: #fff;
      font-family: "Clash Display";
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin-bottom: 0;
    }
    .inner-user > div h3 img {
      height: 16px;
    }
    .inner-user > div p {
      color: #fff;
      font-family: "Clash Display";
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: 20px; /* 142.857% */
      margin-bottom: 0;
    }
    .task-head-box {
      border-radius: 16px;
      border: 1.521px solid rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.2);
      box-shadow:
        0 21.539px 26.924px -5.385px rgba(0, 0, 0, 0.1),
        0 8.616px 10.77px -6.462px rgba(0, 0, 0, 0.1);
      padding: 14px 6px;
      h4 {
        color: #fff;
        text-align: center;
        font-family: "Clash Display";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;

        span {
          font-size: 14px;
          font-weight: 700;
          color: #fff;
          margin-left: 5px;
        }
      }
      img {
        height: 15px;
        margin-left: 12px;
        width: 21px;
        object-fit: contain;
      }
    }
  }
  .daily-reward-tab {
    margin-bottom: 24px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    button {
      border-radius: 16px;
      border: 1.412px solid rgba(43, 127, 255, 0.4);
      background: linear-gradient(
        135deg,
        #2a3150 0%,
        #282f4d 20%,
        #252d4a 40%,
        #232a48 60%,
        #202845 80%,
        #1e2642 100%
      );
      box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
      padding: 14px 20px;
      color: #93c5fd;
      text-align: center;
      font-family: "Clash Display";
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      width: 100%;
      line-height: 20px; /* 142.857% */
    }
    button.active {
      border: 1.41px solid #ffdf20;
      background: linear-gradient(90deg, #f0b100 0%, #d08700 50%, #ff6900 100%);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      color: #1a1f3a;
    }
  }
  .gift-para {
    /* background: linear-gradient(180deg, rgba(0, 188, 125, 0.10) 0%, rgba(0, 0, 0, 0.00) 100%); */
    border-radius: 16px;
    border: 1px solid rgba(25, 255, 178, 0.5);
    background: linear-gradient(
      135deg,
      #2a3150 0%,
      #282f4d 20%,
      #252d4a 40%,
      #232a48 60%,
      #202845 80%,
      #1e2642 100%
    );
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 17px 30px;
    color: #fff;
    text-align: center;
    font-family: "Clash Display";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 150% */
    span {
      color: #fdc700;
    }
  }

  .reward-week-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 28px 0;

    .reward-level {
      border-radius: 16px;
      border: 1.412px solid rgba(74, 85, 101, 0.4);
      background: linear-gradient(
        135deg,
        rgba(42, 49, 80, 0.6) 0%,
        rgba(40, 47, 77, 0.6) 20%,
        rgba(37, 45, 74, 0.6) 40%,
        rgba(35, 42, 72, 0.6) 60%,
        rgba(32, 40, 69, 0.6) 80%,
        rgba(30, 38, 66, 0.6) 100%
      );
      box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.1);
      padding: 11px 4px 4px;
      width: 22%;
      text-align: center;
      margin-bottom: 20px;
      
    }
    .reward-level.upcoming-level{
        opacity: 0.8;
    }
    .reward-level-outer.weekly-data .reward-level {
      width: 24%;
      margin: 2%;
    }
    .reward-inner-div {
      position: relative;
      height: auto;
      width: 75%;
      padding-top: 0;
      margin: 0 auto;
      margin-bottom: 0.5rem;
    }

    /* .reward-level img{
  max-height: 45px;
} */
    .reward-level h4 {
      color: #9ca3af;
      color: #fff;
      margin-bottom: 0;
      text-align: center;
      font-family: "Clash Display";
      font-size: 12px;
      font-style: normal;
      font-weight: 600;
      line-height: 16px; /* 133.333% */
    }

    .reward-inner-div {
      position: relative;
      height: auto;
      width: 100%;
      padding-top: 0;
      margin: 0 auto;
      margin-bottom: 0.5rem;
    }

    /* .reward-level-outer.weekly-data .reward-level .reward-inner-div {
    width: 80%;
} */

    .reward-inner-div img {
      width: 54px;
      height: 54px;
      max-height: max-content;
      object-fit: contain;
      border-radius: 13.501px;
      /* padding: 11px 8px 10px;
      border-radius: 13.501px;
      border: 1.192px solid #d1d5dc;
      background: linear-gradient(135deg, #99a1af 0%, #6a7282 100%);
      box-shadow:
        0 8.438px 12.657px -2.531px rgba(0, 0, 0, 0.1),
        0 3.375px 5.063px -3.375px rgba(0, 0, 0, 0.1); */
            padding: 8px ;
    background: transparent;
    border: none;
    box-shadow: none;
    }
    
.reward-level.upcoming-level .reward-inner-div img{
     padding: 11px 8px 10px;
      border: 1.192px solid #d1d5dc;
      background: linear-gradient(135deg, #99a1af 0%, #6a7282 100%);
      box-shadow:
        0 8.438px 12.657px -2.531px rgba(0, 0, 0, 0.1),
        0 3.375px 5.063px -3.375px rgba(0, 0, 0, 0.1);
}

    .reward-inner-div span {
      text-align: center;
      color: #fff;
      text-align: center;
      font-family: "Clash Display";
      font-size: 9px;
      font-style: normal;
      font-weight: 600;
      line-height: 13px; /* 166.667% */
      max-width: 59px;
      width: 100%;
      display: inline-block;
      position: absolute;
      left: 0;
      right: 0;
      top: -28px;
      /* bottom: 0; */
      margin: auto;

      border-radius: 23691300px;
      border: 1.412px solid #99a1af;
      background: linear-gradient(90deg, #4a5565 0%, #6a7282 100%);
      box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
      padding: 5px 7px;
    }
    .complete-level {
      height: 60px !important;
      width: auto;
      object-fit: contain;
      margin-bottom: 0.5rem;
    }
    .reward-level.active {
      border: 1px solid #53eafd;
      background: linear-gradient(
        135deg,
        #2b7fff 0%,
        #00b8db 50%,
        #155dfc 100%
      );
      opacity: 1;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

      .reward-inner-div img {
        border: 1.192px solid #cefafe;
        background: linear-gradient(135deg, #a2f4fd 0%, #00d3f3 100%);
        box-shadow:
          0 8.438px 12.657px -2.531px rgba(0, 0, 0, 0.1),
          0 3.375px 5.063px -3.375px rgba(0, 0, 0, 0.1);
          padding: 11px 8px 10px;
      }
      .reward-inner-div span {
        border: 1.412px solid #ffa2a2;
        background: linear-gradient(90deg, #e7000b 0%, #fb2c36 100%);
        box-shadow:
          0 10px 15px -3px rgba(0, 0, 0, 0.1),
          0 4px 6px -4px rgba(0, 0, 0, 0.1);
      }
      h4 {
        color: #fff;
      }
    }
  }
  .gift-box {
    position: relative;
    img {
      height: 190px;
      width: auto;
    }
  }
  .gift-box::before {
    content: "";
    position: absolute;
    left: -8px;
    top: -8px;
    height: 126%;
    background-image: url(../update-bot-img/gift-box-back.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 105%;
  }
}

@media (max-width: 375px) {
  .reward-new-sec {
    .user-head-reward {
      padding: 26px 12px;
    }
    & .user-head-reward {
      & .inner-user > div h3 {
        font-size: 18px;
      }
    }
    & .user-head-reward {
      & .inner-user > div p {
        font-size: 12px;
      }
    }
    & .user-head-reward {
      & .task-head-box {
        & img {
          margin-left: 8px;
          height: 13px;
        }
      }
    }
    .user-head-reward {
      .inner-user > div .profile-img img {
        height: 36px;
        width: 36px;
      }
    }
    & .daily-reward-tab {
      button {
        padding: 10px;
        border-radius: 12px;
      }
    }
    & .reward-week-outer {
      gap: 8px;
      & .reward-inner-div img {
        height: 50px;
        width: 50px;
        padding: 8px;
      }
    }
    .reward-level.upcoming-level .reward-inner-div img, .reward-level.active .reward-inner-div img{
        padding: 11px 10px 10px;
    }
    & .gift-box {
      img {
        height: 160px;
        width: auto;
      }
    }
    & .reward-week-outer {
      .reward-inner-div span {
        padding: 4px 6px;
        top: -27px;
      }
    }
    & .reward-week-outer {
      .reward-level {
        border-radius: 14px;
      }
    }
    .gift-para {
      padding: 14px 18px;
    }
  }
}