.heart {
      width: 100px;
      height: 100px;
      background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
      background-position: 0 0;
      cursor: pointer;
      transition: background-position 1s steps(28);
      transition-duration: 0s;
     
    }
    .heart.is-active {
        transition-duration: 1s;
        background-position: -2800px 0;
      }
      .addwishlist_mob {
        position: relative;
        right: 20px;
        top: 23%;
        display: flex;
        -webkit-box-align: center;
        box-sizing: border-box;
        -webkit-box-pack: center;
        cursor: pointer;
        border: none;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .spa__img__list .addwishlist {
        position: relative;
        right: 5px;
        top: -125px;
        display: flex;
        -webkit-box-align: end;
        box-sizing: border-box;
        -webkit-box-pack: end;
        cursor: pointer;
        border: none;
        justify-content: end;
        align-items: end;
        text-align: end;
        float: right;
      }
      .spa__img__list .addwishlist::before {
        content: '';
        z-index: 2;
        background: #fff;
      }
      .spa__img__list button {
        border: none;
        background: transparent;
      }
      .addwishlist {
        position: relative;
        right: 10px;
        top: -90%;
        display: flex;
        -webkit-box-align: end;
        box-sizing: border-box;
        -webkit-box-pack: end;
        cursor: pointer;
        border: none;
        justify-content: end;
        align-items: end;
        text-align: end;
        float: right;
    }
    
    .addwishlist2 {
        position: absolute;
        right: 30px;
        top: 5%;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        box-sizing: border-box;
        -webkit-box-pack: center;
        justify-content: center;
        cursor: pointer;
        border: none;
    }
    .addtowish {
        position: relative;
        right: 10px;
        top: -86%;
        display: flex;
        -webkit-box-align: end;
        box-sizing: border-box;
        -webkit-box-pack: end;
        cursor: pointer;
        border: none;
        justify-content: end;
        align-items: end;
        text-align: end;
        float: right;
    }

    .newaddwish {
      position: relative;
      left: 32px;
      top: -510px;
      display: flex;
      -webkit-box-align: end;
      box-sizing: border-box;
      -webkit-box-pack: end;
      cursor: pointer;
      border: none;
      justify-content: end;
      align-items: end;
      text-align: end;
      float: right;
    }
    .card__content button {
      border: none;
      background: transparent;
    }
    
    .categorywish {
      position: relative;
      right: 10px;
      top: -259px;
      display: flex;
      -webkit-box-align: end;
      box-sizing: border-box;
      -webkit-box-pack: end;
      cursor: pointer;
      border: none;
      justify-content: end;
      align-items: end;
      text-align: end;
      float: right;
    }

    .newspawish {
      position: relative;
      right: 10px;
      top: -255px;
      display: flex;
      -webkit-box-align: end;
      box-sizing: border-box;
      -webkit-box-pack: end;
      cursor: pointer;
      border: none;
      justify-content: end;
      align-items: end;
      text-align: end;
      float: right;
    }
    .newaddwish2 {
      position: relative;
      left: 14px;
      top: -432px;
      display: flex;
      -webkit-box-align: end;
      box-sizing: border-box;
      -webkit-box-pack: end;
      cursor: pointer;
      border: none;
      justify-content: end;
      align-items: end;
      text-align: end;
      float: right;
    }
    .mob__card__content button {
      border: none;
      background: transparent;
    }


    /* thumbs like  */

    .like-dislike-container {
      --dark-grey: #5c0c0c;
      --middle-grey: #767676;
      --lightest-grey: linear-gradient(#fafafa,#ebebeb);
      --shadow: 0 5px 15px 0 #00000026;
      --shadow-active: 0 5px 5px 0 #00000026;
      --border-radius-main: 10px;
      --border-radius-icon: 50px;
      position: relative;
      display: flex;
      text-align: center;
      flex-direction: column;
      align-items: center;
      cursor: default;
      color: var(--dark-grey);
      opacity: .9;
      margin: auto;
      font-weight: 600;
      max-width: max-content;
      border-radius: var(--border-radius-main);
      transition: .2s ease all;
    }
    
    
    .like-dislike-container .tool-box {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      top: 0;
      right: 0;
    }
    
    
    
    .like-dislike-container .icons-box {
      display: flex;
    }
    
    .like-dislike-container .icons {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      /* opacity: .6; */
      margin: 0 0.5rem;
      cursor: pointer;
      user-select: none;
      transition: .2s ease all;
    }
    
/*     
    .like-dislike-container .icons .svgs:active {
      opacity: .9;

    } */
    
    .like-dislike-container .icons .btn-label {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 0.5rem;
      cursor: pointer;
      position: relative;
    }
    
    
    .like-dislike-container .icons .svgs {
      width: 2.3rem;
      fill: #b76f5a;
      box-sizing: content-box;
      padding: 10px 10px;
      transition: .2s ease all;
    }
    
    /* Hide the default checkbox */
    .like-dislike-container .icons .input-box {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
    
    .like-dislike-container .icons #icon-like-regular {
      display: block;
    }
    
    .like-dislike-container .icons #icon-like-solid {
      display: none;
    }
    
    .like-dislike-container .icons:hover :is(#icon-like-solid, #icon-like-regular) {
      animation: rotate-icon-like 0.7s ease-in-out both;
    }
    
    .like-dislike-container .icons #like-checkbox:checked ~ #icon-like-regular {
      display: none;
      animation: checked-icon-like 0.5s;
    }
    
    .like-dislike-container .icons #like-checkbox:checked ~ #icon-like-solid {
      display: block;
      animation: checked-icon-like 0.5s;
    }
    
    
    .like-dislike-container .icons .fireworks {
      transform: scale(0.4);
    }
    
    .like-dislike-container .icons #like-checkbox:checked ~ .fireworks > .checked-like-fx {
      position: absolute;
      width: 10px;
      height: 10px;
      right: 40px;
      border-radius: 50%;
      box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
      animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;
      animation-duration: 1.25s, 1.25s, 6.25s;
    }
    
    
    /* Checked Animation */
    @keyframes checked-icon-like {
      0% {
        transform: scale(0);
        opacity: 0;
      }
    
      50% {
        transform: scale(1.2) rotate(-10deg);
      }
    }
    
    @keyframes checked-icon-dislike {
      0% {
        transform: scale(0) rotate(180deg);
        opacity: 0;
      }
    
      50% {
        transform: scale(1.2) rotate(170deg);
      }
    }
    
    /* Fireworks Animation */
    @keyframes fireworks-position {
      0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
      }
    
      20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
      }
    
      40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
      }
    
      60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
      }
    
      80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
      }
    }
    
    @keyframes fireworks-gravity {
      to {
        transform: translateY(200px);
        opacity: 0;
      }
    }
    
    @keyframes fireworks-bang {
      to {
        box-shadow: 114px -107.3333333333px #8800ff, 212px -166.3333333333px #a600ff, 197px -6.3333333333px #ff006a, 179px -329.3333333333px #3300ff, -167px -262.3333333333px #ff0062, 233px 65.6666666667px #ff008c, 81px 42.6666666667px #0051ff, -13px 54.6666666667px #00ff2b, -60px -183.3333333333px #0900ff, 127px -259.3333333333px #ff00e6, 117px -122.3333333333px #00b7ff, 95px 20.6666666667px #ff8000, 115px 1.6666666667px #0004ff, -160px -328.3333333333px #00ff40, 69px -242.3333333333px #000dff, -208px -230.3333333333px #ff0400, 30px -15.3333333333px #e6ff00, 235px -15.3333333333px #fb00ff, 80px -232.3333333333px #d5ff00, 175px -173.3333333333px #00ff3c, -187px -176.3333333333px #aaff00, 4px 26.6666666667px #ff6f00, 227px -106.3333333333px #ff0099, 119px 17.6666666667px #00ffd5, -102px 4.6666666667px #ff0088, -16px -4.3333333333px #00fff7, -201px -310.3333333333px #00ffdd, 64px -181.3333333333px #f700ff, -234px -15.3333333333px #00fffb, -184px -263.3333333333px #aa00ff, 96px -303.3333333333px #0037ff, -139px 10.6666666667px #0026ff, 25px -205.3333333333px #00ff2b, -129px -322.3333333333px #40ff00, -235px -187.3333333333px #26ff00, -136px -237.3333333333px #0091ff, -82px -321.3333333333px #6a00ff, 7px -267.3333333333px #ff00c8, -155px 30.6666666667px #0059ff, -85px -73.3333333333px #6a00ff, 60px -199.3333333333px #55ff00, -9px -289.3333333333px #00ffaa, -208px -167.3333333333px #00ff80, -13px -299.3333333333px #ff0004, 179px -164.3333333333px #ff0044, -112px 12.6666666667px #0051ff, -209px -125.3333333333px #ff00bb, 14px -101.3333333333px #00ff95, -184px -292.3333333333px #ff0099, -26px -168.3333333333px #09ff00, 129px -67.3333333333px #0084ff, -17px -23.3333333333px #0059ff, 129px 34.6666666667px #7300ff, 35px -24.3333333333px #ffd900, -12px -297.3333333333px #ff8400, 129px -156.3333333333px #0dff00, 157px -29.3333333333px #1a00ff, -221px 6.6666666667px #ff0062, 0px -311.3333333333px #ff006a, 155px 50.6666666667px #00ffaa, -71px -318.3333333333px #0073ff;
      }
    }
    /* end here */