@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  font-family: "Nunito Sans", sans-serif;
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

.shadow-none {
  box-shadow: none !important;
}

html,
body {
  overflow-x: hidden;
}

.wrapper {
  display: grid;
  grid-template-columns: 30vw 50vw;
  justify-content: center;
  overflow: hidden;
}

.description-image ol li {
  list-style: auto;
}

.description-image ul li {
  list-style: disc;
}

.image-box {
  display: grid;
  grid-template-columns: 65px auto;
}

@media (max-width: 1400px) {
  .wrapper {
    grid-template-columns: 35vw 55vw;
  }

  .information-box,
  .Description-Box {
    width: 90vw;
  }
}

@media (max-width: 1200px) {

  .information-box,
  .Description-Box {
    width: 95vw;
  }

  .wrapper {
    grid-template-columns: 37.5vw 57.5vw;
  }
}

@media (max-width: 1030px) {
  .Action-Box-Parent {
    width: 95%;
  }

  .Action-Box {
    width: 100%;
  }

  .Action-Box button {
    width: 50%;
  }

  .wrapper {
    grid-template-columns: 40vw 60vw;
  }
}

@media (max-width: 950px) {
  .wrapper {
    grid-template-columns: 50vw 50vw;
  }
}

@media (max-width: 950px) and (min-width: 780px) {
  .price-box {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 780px) {
  .mySwiper {
    display: none;
  }

  .wrapper {
    grid-template-columns: 95vw;
  }

  .image-box {
    grid-template-columns: 100%;
    height: 300px;
  }

  .image-box img,
  .image-box video {
    width: 100%;
    height: 300px;
  }

  .Action-Box-Parent {
    width: 100%;
  }

  .Action-Box {
    justify-content: center;
  }

  .Action-Box button {
    width: 180px;
  }
}

@media (max-width: 510px) {
  .price-box {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 400px) {
  .price-box .CurrentPrice {
    font-size: 1.4rem;
  }
}

@media (max-width: 365px) {
  .DiscountPercentage {
    font-size: 0.6rem;
    padding: 4px;
  }

  .price-box .CurrentPrice {
    font-size: 1rem;
  }

  .discountvalue {
    font-size: 0.9rem;
  }
}

.mySwiper .swiper-slide-thumb-active img {
  border-radius: 4px;
}

.mySwiper .swiper-slide-thumb-active {
  border: 2px solid #ff007f;
  padding: 2px;
  transition: 0.05s;
}

.mySwiper {
  z-index: 10;
  background-color: white;
  padding: 0 5px;
}

.discountvalue {
  text-decoration: line-through;
  text-decoration-color: #ff007f;
  -webkit-text-decoration-color: #ff007f;
}

.share-link-box {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 108%;
  top: 50%;
  width: 300px;
  gap: 10px;
  background-color: white;
  box-shadow: 0 0 10px rgba(255, 0, 128, 0.1);
  border-radius: 20px;
  padding: 20px;
  transform: scale(0);
}

.share-link-box.active {
  transform: translateY(-50%) scale(1);
}

.share-wishlist {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}

#npm-install-copy-button {
  padding-right: 40px;
}

.ShareBtn {
  transition: 0.4s;
}

.ShareBtn.active {
  transform: rotate(180deg);
}

@media (max-width: 500px) {
  .share-link-box.active {
    top: 100%;
    right: 50%;
    transform: translateY(0%);
    width: 270px;
  }
}

.tab-button.active {
  transition: 1s;
  background-color: #FF1493;
  color: white;
}

.tab-content {
  display: none;
  padding: 20px;
}

.tab-content.active {
  display: block;
}


@media (max-width: 1030px) {
  .order-detail-container {
    margin-bottom: 5.5rem;
  }
}

@media (max-width:380px) {
  .tab-button {
    font-size: 12px;
    padding: 0.5rem 0;
  }
}

.Description-Box img {
  border-radius: 16px;
  margin-top: 12px;
}