@mixin set-font-fam {
  font-family: var(--global-font-family);
}



.mainContainer {
  font-family: var(--global-font-family);
  height: calc(100vh - 10px);
  margin-top: 4rem;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 2rem;
  // background-color: #ffd9d9;

  .mainInfo {
    min-height: 40vh;
    height: 60vh;
    // padding: 20px;
    display: flex;
    align-items: flex-start;
    background-color: white;
    // border: 1px outset #999;
    // -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
    // -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);

    .productImage {
      // width: 50%;
      height: 100%;
      display: flex;
      align-items: flex-start;

      .carousel {
        width: 90%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;

        img {
          display: block;
        }
      }

      .mainProductImageContainer {
        width: 90%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;


        .mainProductImage {
          border-radius: 20px;
        }
      }
    }

    .separator {
      height: 350px;
      // margin-right: 40px;
      display: inline-block;
      border-right: 2px solid #D9D9D9;
    }

    .productMainInfo {
      // width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;


      .productName {

        font-size: 30px;
        font-weight: bold;
      }



    }
  }

  .additionalInfo {
    height: fit-content;
    padding: 50px;
    max-height: fit-content;
    background: white;
    // border: 1px outset #999;
    // -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
    // -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);


  }
}

.add-wishlist-col {
  background: linear-gradient(90deg, rgb(255 206 245) 0%, rgb(255 52 206) 100%) !important;
  color: white !important;
}

.add-wishlist {
  width: 100%;
  height: 4rem;
  border: 1px solid #dddddd;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  margin-left: 0;
  // background: linear-gradient(90deg, rgb(255, 88, 88) 0%, rgb(255, 181, 78) 100%) !important;
  transition: transform 200ms ease;
  cursor: pointer;
  color: #b8b8b8;
}

.add-wishlist:hover {
  transform: scale(1.02);
}

.add-text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--global-font-family);
  font-size: large;
}

.wishlist {
  width: 20px;
  height: 20px;
  // top: 90px;
  // right: 5%;
  cursor: pointer;
  // position: absolute;
  // transform: translate(-50%, -50%)
}

svg {
  cursor: pointer;
  overflow: visible;
  width: 60px;
  // margin: 20px;
}

svg #heart {
  transform-origin: center;
  animation: animateHeartOut .3s linear forwards;
}

svg #main-circ {
  transform-origin: 29.5px 29.5px;
}

.checkbox {
  display: none;
}

.checkbox:checked+label svg #heart {
  transform: scale(0.2);
  fill: #E2264D;
  animation: animateHeart .3s linear forwards .25s;
}

.checkbox:checked+label svg #main-circ {
  transition: all 2s;
  animation: animateCircle .3s linear forwards;
  opacity: 1;
}

.checkbox:checked+label svg #heartgroup1 {
  opacity: 1;
  transition: .1s all .3s;
}

.checkbox:checked+label svg #heartgroup1 #heart1 {
  transform: scale(0) translate(0, -30px);
  transform-origin: 0 0 0;
  transition: .5s transform .3s;
}

.checkbox:checked+label svg #heartgroup1 #heart2 {
  transform: scale(0) translate(10px, -50px);
  transform-origin: 0 0 0;
  transition: 1.5s transform .3s;
}

.checkbox:checked+label svg #heartgroup2 {
  opacity: 1;
  transition: .1s all .3s;
}

.checkbox:checked+label svg #heartgroup2 #heart1 {
  transform: scale(0) translate(30px, -15px);
  transform-origin: 0 0 0;
  transition: .5s transform .3s;
}

.checkbox:checked+label svg #heartgroup2 #heart2 {
  transform: scale(0) translate(60px, -15px);
  transform-origin: 0 0 0;
  transition: 1.5s transform .3s;
}

.checkbox:checked+label svg #heartgroup3 {
  opacity: 1;
  transition: .1s all .3s;
}

.checkbox:checked+label svg #heartgroup3 #heart1 {
  transform: scale(0) translate(30px, 0px);
  transform-origin: 0 0 0;
  transition: .5s transform .3s;
}

.checkbox:checked+label svg #heartgroup3 #heart2 {
  transform: scale(0) translate(60px, 10px);
  transform-origin: 0 0 0;
  transition: 1.5s transform .3s;
}

.checkbox:checked+label svg #heartgroup4 {
  opacity: 1;
  transition: .1s all .3s;
}

.checkbox:checked+label svg #heartgroup4 #heart1 {
  transform: scale(0) translate(30px, 15px);
  transform-origin: 0 0 0;
  transition: .5s transform .3s;
}

.checkbox:checked+label svg #heartgroup4 #heart2 {
  transform: scale(0) translate(40px, 50px);
  transform-origin: 0 0 0;
  transition: 1.5s transform .3s;
}

.checkbox:checked+label svg #heartgroup5 {
  opacity: 1;
  transition: .1s all .3s;
}

.checkbox:checked+label svg #heartgroup5 #heart1 {
  transform: scale(0) translate(-10px, 20px);
  transform-origin: 0 0 0;
  transition: .5s transform .3s;
}

.checkbox:checked+label svg #heartgroup5 #heart2 {
  transform: scale(0) translate(-60px, 30px);
  transform-origin: 0 0 0;
  transition: 1.5s transform .3s;
}

.checkbox:checked+label svg #heartgroup6 {
  opacity: 1;
  transition: .1s all .3s;
}

.checkbox:checked+label svg #heartgroup6 #heart1 {
  transform: scale(0) translate(-30px, 0px);
  transform-origin: 0 0 0;
  transition: .5s transform .3s;
}

.checkbox:checked+label svg #heartgroup6 #heart2 {
  transform: scale(0) translate(-60px, -5px);
  transform-origin: 0 0 0;
  transition: 1.5s transform .3s;
}

.checkbox:checked+label svg #heartgroup7 {
  opacity: 1;
  transition: .1s all .3s;
}

.checkbox:checked+label svg #heartgroup7 #heart1 {
  transform: scale(0) translate(-30px, -15px);
  transform-origin: 0 0 0;
  transition: .5s transform .3s;
}

.checkbox:checked+label svg #heartgroup7 #heart2 {
  transform: scale(0) translate(-55px, -30px);
  transform-origin: 0 0 0;
  transition: 1.5s transform .3s;
}

.checkbox:checked+label svg #heartgroup2 {
  opacity: 1;
  transition: .1s opacity .3s;
}

.checkbox:checked+label svg #heartgroup3 {
  opacity: 1;
  transition: .1s opacity .3s;
}

.checkbox:checked+label svg #heartgroup4 {
  opacity: 1;
  transition: .1s opacity .3s;
}

.checkbox:checked+label svg #heartgroup5 {
  opacity: 1;
  transition: .1s opacity .3s;
}

.checkbox:checked+label svg #heartgroup6 {
  opacity: 1;
  transition: .1s opacity .3s;
}

.checkbox:checked+label svg #heartgroup7 {
  opacity: 1;
  transition: .1s opacity .3s;
}

@keyframes animateCircle {
  40% {
    transform: scale(10);
    opacity: 1;
    fill: #DD4688;
  }

  55% {
    transform: scale(11);
    opacity: 1;
    fill: #D46ABF;
  }

  65% {
    transform: scale(12);
    opacity: 1;
    fill: #CC8EF5;
  }

  75% {
    transform: scale(13);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: .5;
  }

  85% {
    transform: scale(17);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: .2;
  }

  95% {
    transform: scale(18);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: .1;
  }

  100% {
    transform: scale(19);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: 0;
  }
}

@keyframes animateHeart {
  0% {
    transform: scale(0.2);
  }

  40% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes animateHeartOut {
  0% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1);
  }
}

.sellerInfo {
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 20px;
    vertical-align: middle;
  }

  .sellerName {
    display: inline;
  }

  border: 1px solid #dddddd;
  border-radius: 0.5rem;
  padding: 1rem 0.5rem;
  margin-bottom: 2rem;
}

.offer {
  margin-bottom: 1rem;
}

.chatBtn {
  width: 50%;
  // height: 30px;
  padding: 1rem 2rem;
  border: none;
  border-radius: 5px;
  background-color: #ff8d54;
  color: white;
  font-size: large;
  background: linear-gradient(90deg, rgb(167, 36, 255) 0%, rgb(255, 88, 88) 100%) !important;
  transition: transform 200ms ease;
}

.offer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.offerBtn {
  width: 48%;
  // height: 30px;
  padding: 1rem 2rem;
  border: none;
  border-radius: 5px;
  background-color: #ff8d54;
  color: white;
  font-size: large;
  background: linear-gradient(90deg, rgb(88 255 206) 0%, rgb(78 207 255) 100%) !important;
  transition: transform 200ms ease;
}

.chatBtn:hover,
.offerBtn:hover {
  transform: scale(1.05);
}

.additionalInfoData {
  // margin-bottom: 30px;
}

.desc,
.mrp,
.productName,
.location,
.postedDate,
.sellerName {
  @include set-font-fam();
}

.mrp {
  font-size: xxx-large;
  font-weight: 900;
}

.desc {
  margin-bottom: 0;
}

.hashtag {
  display: inline-flex;
  width: fit-content;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: #ffebed;
  font-family: var(--global-font-family);
  justify-content: center;
  align-items: center;
  color: black;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  // background: rgb(167, 36, 255) !important;
  // background: linear-gradient(90deg, rgb(173, 50, 255) 0%, rgb(255, 158, 23) 100%) !important;
  font-size: medium;
  transition: transform, opacity 500ms ease;
  cursor: pointer;
}

.hashtag:hover {
  transform: scale(1.05);
  opacity: 0.9;
}