.share-product {
  font-weight: 600;
  font-size: 1vw;
  color: var(--dark-font);
  position: relative;
  gap: 0.7vw;
  justify-content: end !important;
}

button.share-product {
  width: 1.8vw;
  padding: 0;
  border-radius: 0.75vw;
  background: transparent;
  color: #94a3b8;
  font-weight: 500;
  font-size: 0.95vw;
  justify-content: center !important;
  transition: all 0.25s ease-in-out;
}

button.share-product svg {
  width: 1.7vw;
  pointer-events: none;
}

button.share-product svg g {
  transition: all 0.25s ease-in-out;
}

button.share-product svg g {
  stroke: #323232;
}

button.share-product:hover svg g {
  stroke: var(--red) !important;
}

.share-product-opt-window {
  padding: 0.5vw;
  width: 24vw;
  height: 8vw;
  border-radius: 0.65vw;
  box-shadow: 0 0.15vw 0.5vw rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 120%;
  z-index: 2;
  background-color: var(--light-bg);
  transition: all 0.25s ease-in-out;
  opacity: 0 !important;
  visibility: hidden !important;
  gap: 1vw;
  transform: translateX(-2vw);
  justify-content: start !important;
}

.share-product-opt-window.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.current-path {
  padding: 0.5vw 1vw;
  width: 100%;
  height: 36%;
  background: #f1f5f9;
  border-radius: 0.5vw;
  justify-content: end !important;
  gap: 1vw;
  font-size: 0.85vw;
  cursor: pointer;
  color: #323232;
  position: relative;
  overflow: hidden;
}

.current-path p {
  width: 500%;
  text-align: end !important;
  justify-content: end !important;
  align-items: start !important;
  position: absolute;
  left: 3vw;
  font-weight: 300;
}

.current-path p,
.current-path i {
  transition: all 0.25s ease-in-out;
  color: #323232;
}

.current-path.success p,
.current-path.success i {
  color: #09af43 !important;
}

.current-path i {
  font-size: 1vw;
  color: #323232;
}

.share-on-socials {
  padding: 0 0.5vw;
  width: 100%;
  height: 70%;
  gap: 1vw;
  justify-content: end !important;
}

.share-on-socials i {
  font-size: 2vw;
}

.share-on-socials i.fa-telegram {
  color: deepskyblue;
}

.share-on-socials i.fa-whatsapp {
  color: #1aa441;
}

.share-on-socials .fa-facebook {
  color: #0965fe;
}

.share-on-socials .fa-linkedin {
  color: #0277b5;
}
@media (max-width: 450px) {
  .share-product-opt-window {
    padding: 2.3vw;
    width: 62vw;
    height: 19vw;
    border-radius: 2vw;
    box-shadow: 0.8vw 0.35vw 1.5vw rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 120%;
    z-index: 2;
    background-color: var(--light-bg);
    transition: all 0.25s ease-in-out;
    opacity: 0 !important;
    visibility: hidden !important;
    gap: 1vw;
    transform: translateX(-2vw);
    justify-content: start !important;
  }
  .current-path {
    padding: 0.5vw 1vw;
    width: 100%;
    height: 76%;
    background: #f1f5f9;
    border-radius: 1vw;
    justify-content: end !important;
    gap: 3vw;
    font-size: 3.35vw;
    cursor: pointer;
    color: #323232;
    position: relative;
    overflow: hidden;
  }
  .current-path i {
    font-size: 2.9vw;
    color: #323232;
  }
  .current-path p {
    width: 500%;
    text-align: end !important;
    justify-content: end !important;
    align-items: start !important;
    position: absolute;
    left: 4.9vw;
    font-weight: 300;
  }
  .share-on-socials {
    padding: 0 0.5vw;
    width: 100%;
    height: 70%;
    gap: 1vw;
    justify-content: space-between !important;
  }
  .share-on-socials i {
    font-size: 6vw;
  }
}