.product-detail-top {
  width: 100%;
  padding: 80px 60px;
  display: flex;
  align-items: start;
  gap: 50px;
}

.product-image-preview {
  width: 50%;
  height: 100%;
}

.main-preview-image {
  width: 100%;
  height: 650px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-preview-image img {
  /* width: 100%;
  height: 100%; */
  border-radius: inherit;
}

.preview-carousel {
  padding: 0 80px;
  height: 120px;
  margin-top: 20px;
}

.swiper {
  width: 100%;
  height: 100%;
}

.mini-preview-image {
  width: 100%;
  height: 80%;
  border-radius: 10px;
}

.mini-preview-image img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.active-mini-preview {
  border: 2px solid var(--yellowColor);
}

.product-information {
  width: 50%;
  height: 100%;
  padding-right: 80px;
}

.name-rating-fav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-name {
  font-family: var(--mtnRegular);
  font-size: 40px;
  color: var(--textColor);
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
}

.product-rating p {
  font-family: var(--mtnRegular);
  color: var(--textColor);
  font-size: 18px;
}

.product-rating span {
  color: var(--grayColor);
  margin-left: 5px;
  font-family: var(--mtnRegular);
}

.fav {
  background-color: var(--yellowColor);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
}

.fav:hover {
  cursor: pointer;
}

.product-cost {
  font-size: 50px;
  margin: 5px;
  color: #000000;
  font-family: var(--mtnRegular);
}

.product-by {
  background-color: #FFCC0020;
  padding: 20px;
  border-radius: 20px;
}

.profile-pic-wrapper {
  width: 100px;
  height: 100px;
  background-image: url('../../../assets/images/Star-six.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-pic-wrapper .vendor-logo {
  width: 70%;
  height: 70%;
  border-radius: 50%;
}

.vendor-logo img {
  width: 100%;
  height: 100%;
  border: 2px solid var(--whiteColor);
  filter: drop-shadow(0px 51px 20px rgba(0, 0, 0, 0.01)) drop-shadow(0px 29px 17px rgba(0, 0, 0, 0.05)) drop-shadow(0px 13px 13px rgba(0, 0, 0, 0.09)) drop-shadow(0px 3px 7px rgba(0, 0, 0, 0.1));
  border-radius: inherit;
}

.vendor-details {
  display: flex;
  align-items: center;
  gap: 20px;
}

.product-by .title {
  font-family: var(--mtnBold);
  color: var(--textColor);
  font-size: 20px;
  margin-bottom: 10px;
}

.product-owner-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.product-owner-name {
  font-family: var(--mtnRegular);
  color: #000000;
  font-size: 25px;
}

.product-owner-link a {
  color: var(--blueColor);
  font-family: var(--mtnBold);
  font-size: 16px;
}

.product-description,
.stock-quantity {
  font-family: var(--mtnRegular);
  color: var(--textColor);
  font-size: 16px;
  padding: 20px 0;
}

.stock-quantity {
  color: var(--redColor);
  padding: 0;
}

.product-colors {
  display: flex;
  align-items: center;
  padding: 20px 0;
  gap: 10px;
}

.product-colors p {
  font-family: var(--mtnRegular);
  font-size: 20px;
  color: var(--textColor);
}

.product-color {
  display: flex;
  gap: 10px;
}

.product-color div {
  width: 18px;
  height: 18px;
  border-radius: 50px;
}

.product-color .blue {
  background-color: var(--blueColor);
}

.product-color .green {
  background-color: #00B698;
}

.product-color .white {
  background-color: var(--whiteColor);
  border: 1px solid var(--grayColor);
}

.product-color .black {
  background-color: var(--textColor);
}

.size-quantity-filter {
  display: flex;
  justify-content: space-between;
}

.size-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.size-filter p,
.quantity-opt p {
  font-family: var(--mtnRegular);
  font-size: 22px;
  color: var(--textColor);
}

.size-dropdown {
  /* border: none; */
  padding: 8px 45px 8px 8px;
  -webkit-appearance: none;
  border-color: var(--grayColor);
  appearance: none;
  background-image: url('../../../assets/icons/arrow-down-gray.svg');
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: calc(100% - 16px) center;
  border-radius: 6px;
  font-family: var(--proximaRegular);
  color: var(--grayColor);
  font-size: 18px;
  background-color: transparent;
}

.size-dropdown:focus {
  outline: none;
}

.quantity-opt {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quanity-adjuster div {
  border: 1px solid var(--grayColor);
  padding: 10px 12px;
}

.quanity-adjuster {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quanity-adjuster p {
  font-size: 18px;
  font-family: var(--mtnRegular);
  padding: 0 5px;
  color: var(--grayColor);
}

.quanity-adjuster div:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.quanity-adjuster div:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.quanity-adjuster div:first-child:hover,
.quanity-adjuster div:last-child:hover {
  cursor: pointer;
}

.cart-buy-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
  border-bottom: 1px solid var(--grayColor);
}

.cart-buy-btn div {
  display: flex;
  align-items: center;
  border: 1px solid var(--blueColor);
  padding: 20px 45px;
  gap: 15px;
  border-radius: 15px;
}

.cart-buy-btn div:hover {
  cursor: pointer;
}

.cart-buy-btn div p {
  font-family: var(--mtnRegular);
  color: var(--blueColor);
  font-size: 18px;
}

.buy-btn {
  background-color: var(--blueColor);
}

.buy-btn p {
  color: var(--whiteColor) !important;
}

.grab-offer {
  background-color: var(--yellowColor);
}

.grab-offer p {
  color: var(--blueColor) !important;
}

.media-icons {
  display: flex;
  align-items: center;
  padding: 25px 0;
  gap: 15px;
}

.media-icons p {
  font-family: var(--mtnRegular);
  color: var(--textColor);
  font-size: 20px;
}

.media-icons div {
  display: flex;
  align-items: center;
  gap: 25px;
}

.media-icons div svg:hover {
  cursor: pointer;
}

.about-product-title {
  font-size: 45px;
  color: #000000;
  font-family: var(--proximaSemibold);
  padding: 20px 40px 30px 40px;
}

.about-product-selection {
  display: flex;
  align-items: center;
  background-color: var(--yellowColor);
  padding: 20px 40px;
  border-radius: 10px;
  margin: 0 40px;
  gap: 50px;
}

.about-product-selection p {
  font-family: var(--mtnRegular);
  font-size: 20px;
  color: var(--textColor);
}

.about-product-selection p:hover {
  cursor: pointer;
}

.about-product-selection .active-tab {
  background-color: var(--blueColor);
  color: var(--yellowColor);
  padding: 8px 20px;
  border-radius: 50px;
}

.tabcontent {
  padding: 50px 40px;
}

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

.reviw-form {
  width: 30%;
  height: 100%;
}

.review-form-title {
  font-family: var(--mtnRegular);
  color: #000000;
  font-size: 20px;
}

.review-form-stars {
  padding: 25px 0;
}

.review-form-stars p {
  font-family: var(--mtnRegular);
  color: var(--blueColor);
  font-size: 16px;
}

.review-form-stars div {
  padding: 8px 0;
  display: flex;
  gap: 10px;
}

.review-form-stars div svg {
  color: #D9D9D9;
}

.review-form-stars div svg:hover {
  cursor: pointer;
}

.form-field label {
  font-family: var(--mtnRegular);
  font-size: 20px;
  color: var(--textColor);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 30px 0;
}

.form-field label span {
  color: var(--redColor);
}

.form-input {
  background-color: transparent;
  border: 1px solid var(--grayColor);
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  flex-grow: 1;
  border-radius: 5px;
  padding: 0px 10px;
}

.form-input input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  font-family: var(--mtnRegular);
  font-size: 15px;
}

.form-input input:focus {
  outline: none;
}

.long-form-input {
  height: 153px !important;
  align-items: start;
  padding: 10px;
}

.form-input textarea {
  width: 100%;
  height: 100%;
  resize: none;
  background-color: transparent;
  border: none;
  font-family: var(--mtnRegular);
  font-size: 15px;
}

.form-input textarea:focus {
  outline: none;
}

.form-input select {
  border: none;
  background-color: transparent;
  margin-right: 5px;
  color: var(--grayColor);
}

.form-input select:focus {
  outline: none;
}

.registration-btn {
  margin-top: 45px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 4px;
  font-family: 'MTN Brighter Sans Bold';
  color: var(--whiteColor);
  background-color: var(--blueColor);
  font-size: 20px;
}

.registration-btn:hover {
  cursor: pointer;
}


.top-review {
  display: flex;
  justify-content: space-between;
  gap: 150px;
}

.reviw-contents {
  width: 60%;
  height: 100%;
}

.total-review p:first-child {
  font-size: 45px;
  font-family: var(--proximaSemibold);
  color: var(--textColor);
}

.total-review div {
  display: flex;
  gap: 20px;
  margin: 5px 0 10px 0;
}

.total-review p:last-child {
  font-family: var(--mtnRegular);
  color: var(--textColor);
  font-size: 18px;
}

.rating-message {
  padding: 25px 0;
  border-bottom: 1px solid var(--grayColor);
}

.rating {
  display: flex;
  align-items: center;
}

.rating-progress {
  height: 13px;
  width: 100%;
  background-color: #D9D9D9;
  border-radius: 50px;
  margin: 0 12px;
}

.rating-progress-level {
  height: 100%;
  width: 80%;
  background-color: var(--yellowColor);
  border-radius: inherit;
}

.rating svg {
  margin-left: 5px;
}

.rating p {
  font-family: var(--mtnRegular);
  color: var(--textColor);
  font-size: 20px;
}

.ratings {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  /* background-color: red; */
}

.review-numbers {
  font-family: var(--mtnBold);
  font-size: 25px;
  color: var(--textColor);
  margin: 50px 0;
  border-bottom: 1px solid var(--grayColor);
}

.rater-profile-pic {
  width: 60px;
  height: 60px;
  background-color: var(--grayColor);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pic-name {
  display: flex;
  align-items: center;
  gap: 15px;
}

.rater-profile-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rater-profile-name {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rater-profile-name p {
  font-family: var(--mtnRegular);
  color: var(--textColor);
  font-size: 18px;
}

.rater-profile-name div {
  display: flex;
  gap: 8px;
}

.rating-time {
  font-family: var(--mtnRegular);
  color: var(--grayColor);
  font-size: 15px;
}

.rater-profile-message {
  padding-top: 10px;
  padding-right: 50px;
}

.rater-profile-message p {
  font-size: 20px;
  font-family: var(--mtnRegular);
  color: #40404060;
}

.shop-profile-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0 80px 0;
}

.shop-profile-pagination div {
  border: 1px solid var(--grayColor);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-profile-pagination div:hover {
  cursor: pointer;
}

.shop-profile-pagination div p {
  font-size: 19px;
  font-family: var(--proximaRegular);
  color: var(--grayColor);
}

.shop-profile-pagination .active-pagination {
  background-color: var(--blueColor);
  border-color: var(--blueColor);
}

.shop-profile-pagination .active-pagination p {
  color: var(--whiteColor);
}

.discount-cost {
  border: 1px solid var(--yellowColor);
  border-radius: 10px;
  margin: 10px 0;
}

.discount-cost-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--yellowColor);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  padding: 4px 15px;
}

.discount-cost-top p {
  font-family: var(--mtnRegular);
  color: var(--textColor);
  font-size: 15px;
}

.discount-cost-top p span {
  font-family: var(--mtnBold);
}

.discount-cost-bottom {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.discount-cost-bottom p:first-child {
  font-size: 30px;
  font-family: var(--mtnRegular);
}

.discount-cost-bottom p:last-child {
  font-size: 20px;
  font-family: var(--mtnRegular);
  text-decoration: line-through;
  color: var(--textColor);
}

.product-des-h1 {
  color: var(--textColor);
  font-size: 30px;
  font-family: var(--mtnBold);
  margin-bottom: 20px;
}

.product-des-con {
  font-family: var(--mtnRegular);
  font-size: 18px;
  color: var(--textColor);
}

.product-des-h3 {
  font-size: 25px;
  color: var(--textColor);
  font-family: var(--mtnBold);
  margin-top: 30px;
}

.product-features {
  margin-left: 30px;
  margin-top: 5px;
}

.similar-product {
  margin-top: 5px;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product-features li {
  font-size: 18px;
  font-family: var(--mtnRegular);
  color: var(--textColor);
}

@media (max-width: 1080px) {
  .product-detail-top {
    flex-direction: column;
  }

  .product-image-preview,
  .product-information {
    width: 100%;
  }

  .product-information {
    padding-right: 0px;
  }
}

@media (max-width: 950px) {
  .top-review {
    gap: 30px;
  }
}

@media (max-width: 750px) {
  .review-tabcontent {
    flex-direction: column;
    gap: 80px;
  }

  .reviw-form,
  .reviw-contents {
    width: 100%;
  }
}

@media (max-width: 550px) {
  .tabcontent {
    padding: 50px 20px;
  }

  .cart-modal {
    width: 90%;
    padding: 10px 10px;
  }

  .cart-modal-btn {
    font-size: 16px;
  }

  .cart-modal-btns {
    flex-direction: column-reverse;
  }

  .cart-item-price {
    font-size: 16px;
  }

  .product-detail-top {
    padding: 40px 20px;
  }

  .preview-carousel {
    padding: 0;
  }

  .about-product-title {
    padding: 10px 20px 20px 20px;
  }

  .about-product-selection {
    margin: 0 20px;
    padding: 20px 10px;
    gap: 10px;
  }

  .about-product-selection p {
    font-size: 16px;
  }

  .main-preview-image {
    height: 450px;
  }

  .size-quantity-filter {
    flex-direction: column;
    gap: 20px;
  }

  .previewSwiper {
    width: 100%;
  }
}

@media (max-width: 445px) {
  .cart-buy-btn div {
    padding: 20px 25px;
  }

  .mini-preview-image {
    height: 60%;
  }

  .main-preview-image {
    height: 350px;
  }

  .about-product-selection p {
    font-size: 12px;
  }

}