html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow-x: hidden;
  /* overflow-y:scroll; */
}

@font-face {
  font-family: 'Product Sans Medium'; /* Choose a suitable name for your font */
  src: url('./fonts/FontsFree-Net-ProductSans-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  overflow: visible;
  font-family: "Noto Color Emoji", "Segoe UI Emoji", sans-serif;
}

.bg {
  height: 100%;
  width: 100%;
  /* overflow-y:scroll; */
}

header {
  background-color: #fff;
  position: fixed;
  top: 0;
  transition: box-shadow 0.2s ease-in-out;
  width: 100%;
  z-index: 3;
  margin: 0;
  z-index: 100;
}

.nav-mobile {
  display: flex;
  padding-bottom: 0.2rem;
}

.logo img {
  width: 3.146rem;
}

.mobile-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0.3rem 0.21rem 0 auto;
}

.mobile-buttons button {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 0.2rem;
}

.mobile-buttons img {
  width: 0.3938rem;
  height: 0.3994rem;
}

.mobile-buttons .user-img {
  width: 0.64rem;
  height: 0.64rem;
}

.app-info {
  display: flex;
  padding: 0.6rem 0.45rem 0.1rem;
  /* column-gap: 0.55rem;
  -webkit-gap: 0.55rem; */
}

.app-info > *:not(:last-child) {
  margin-right: 0.55rem;
}

.app-image img {
  background: no-repeat;
  background-size: cover;
  margin-left: 0.02rem;
}

.app-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.app-image {
  width: 1.44rem;
  height: 1.44rem;
  margin-left: 0.02rem;
  background: url("./img/cp-h5.png") no-repeat center center;
  background-size: cover;
}

.app-title {
  color: #000;
  font-family: "Google Sans",Roboto,Arial,sans-serif;
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  width: 3rem;
  margin: 0;
  padding-bottom: 0.45rem;
  padding-top: 0.05rem;
}

.hidden {
  display: none;
}

.ellipsis {
  margin: 0;
  text-decoration: none;
}

.dev-title {
  height: 0.34rem;
  width: auto;
  color: #01875F;
  font-family: "Google Sans",Roboto,Arial,sans-serif;
  font-size: 0.32rem;
  line-height: 0.26rem;
  font-style: normal;
  font-weight: 500;
  text-align: left !important;
  margin: 0.1rem 0.02rem 0;
}

.app-slogan {
  height: 0.24rem;
  width: 2.8rem;
  color: #5f6368;
  font-family: Product Sans, sans-serif;
  font-size: 0.18rem;
  font-style: normal;
  font-weight: 400;
  line-height: 0;
  text-align: left !important;
  margin: 0 0.02rem;
}

.app-info-2 {
  display: flex;
  padding-bottom: 0.65rem;
  padding-top: 0.46rem;
  justify-content: space-evenly;
  /* gap: 0.5rem;
    padding-left: 0.58rem; */
}

.rating-text-1 {
  color: #202124;
  font-family: Product Sans Medium, sans-serif;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 500;
  line-height: 0.5rem;
  margin: 0;
  text-align: center;
}

.rating-text-2 {
  color: #5f6368;
  font-family: Roboto, sans-serif;
  font-size: 0.226rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  text-align: center;
}

.column {
  /* width: 28%;
  padding: 0.3rem 0 0.3rem 0.3rem; */
  display: flex;
  flex-direction: column;
  margin-left: 0;
}

.column img {
  display: block;
  margin: auto;
  width: 0.4rem;
}

.divider {
  width: 0.02rem;
  background-color: #d9d9d9;
  margin: 0.2rem 0;
}

.two-row-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.row {
  display: flex;
  justify-content: center;
  margin-bottom: 0.4rem;
}

.long-button {
  width: 6.46rem;
  height: 0.8rem;
  background-color: #008a5d;
  color: #ffffff;
  border: none;
  border-radius: 0.08rem;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.32rem;
  font-family: SF Pro, sans-serif;
  font-weight: 500;
}

.long-button:focus {
  outline: none;
}

.long-button:active {
  outline: none;
}

.share-button {
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  margin-right: 0.4rem;
}

.wishlist-button {
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
}

.share-button img {
  width: 0.3938rem;
  height: 0.3994rem;
}

.wishlist-button img {
  width: 0.3938rem;
  height: 0.3994rem;
}

.share-button span {
  color: #01875F;
  font-family: Product Sans;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-left: 0.2rem;
}

.wishlist-button span {
  color: #01875F;
  font-family: Product Sans;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-left: 0.2rem;
}

.icon-with-text {
  display: flex;
  padding: 0.15rem 0 0.85rem 0.4rem;
}

.icon-with-text img {
  width: 0.32rem;
  height: 0.32rem;
}

.icon-with-text span {
  color: #5f6368;
  font-family: Product Sans, sans-serif;
  font-size: 0.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 0.24rem;
  padding-left: 0.14rem;
  padding-top: 0.04rem;
  font-weight: 400;
}

.swiper-container {
  margin: 0.4rem 0.2rem;
  overflow: hidden;
  padding-left: 0.18rem;
  padding-right: 0.2rem;
  /* width: 6.5rem; */
  /* height: 3.8rem; */
}

.swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}

.swiper-slide {
  width: 100%;
  flex-shrink: 0;
}

.swiper-slide img {
  width: 2.5rem;
  height: auto;
  border-radius: 0.16rem;
}

.app-content {
  padding: 0.01rem 0.5rem;
}

.with-arrow {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
}

.image-button {
  border: none;
  background-color: transparent;
  margin-right: 0;
}

.app-content h2 {
  color: #202124;
  font-family: Product Sans Medium;
  font-size: 0.36rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0.1rem 0 0.15rem;
}

.app-content h5 {
  color: #000;
  font-family: Product Sans Medium, sans-serif;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: left !important;
  margin: 0 0 0.1rem 0;
}

.description {
  margin: 0;
}

.margin {
  letter-spacing: 0.011rem;
  padding-right: 0.6rem;
}

.jili-desc {
  /* width: 6.25rem;
height: 1.36rem; 
/* margin-bottom: -0.33rem; */
  margin: 0;
  letter-spacing: 0.011rem;
  padding-bottom: 0.3rem;
  padding-right: 0.6rem;
}

.jili-desc span {
 line-height: 0.1rem;
}

.ds {
  margin-top: 0.5rem !important;
  font-weight: 500 !important;
}

.app-content p {
  color: #5f6368;
  font-family: Roboto, sans-serif;
  font-size: 0.26rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: left !important;
}

.app-content h3 {
  color: #000;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.app-content .highlight {
  font-weight: 500;
  margin: 0.2rem 0 0;
  color: #000;
  font-family: Product Sans Medium, sans-serif;
  font-size: 0.25rem;
}

.app-content .updated strong {
  font-family: Product Sans Medium, sans-serif;
  font-size: 0.28rem;
  line-height: 0.4rem;
  color: #202124;
  font-weight: 500;
}

.app-content .updated span {
  display: block;
  font-weight: 400;
  margin-top: -0.05rem;
  color: #5f6368;
  font-size: 0.28rem;
}

.buttons {
  display: flex;
  margin-top: 0.56rem;
  flex-wrap: wrap;
  gap: 0.32rem 0.24rem;
}

.button {
  width: 1.582rem;
  height: 0.6rem;
  border: 0.025rem solid #c2c2c2;
  border-radius: 0.74rem;
  background: rgba(217, 217, 217, 0);
  color: #5f6368;
  font-family: Roboto, sans-serif;
  font-size: 0.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.long2-button {
  width: auto;
  height: 0.6rem;
  border: 0.025rem solid #c2c2c2;
  border-radius: 0.74rem;
  background: rgba(217, 217, 217, 0);
  color: #5f6368;
  font-family: Roboto, sans-serif;
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.long1-button {
  width: 2.48rem;
  height: 0.6rem;
  border: 0.025rem solid #c2c2c2;
  border-radius: 0.74rem;
  background: rgba(217, 217, 217, 0);
  color: #5f6368;
  font-family: Product Sans Medium, sans-serif;
  font-size: 0.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.desktop {
  display: none; /* Hide desktop version on mobile */
}
.mobile {
  display: block; /* Display mobile version */
}

.ds-text {
  color: #5f6368 !important;
  font-family: Roboto, sans-serif !important;
  font-size: 0.28rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  padding-right: 0.3rem;
}

.thirt-party-li {
  width: 5.5rem;
  height: 0.68rem;
}

.image-box {
  width: 6.2rem;
  height: 5.45rem;
  flex-shrink: 0;
  border-radius: 0.16rem;
  border: 0.02rem solid #afb3b9;
  padding: 0.2rem 0 0 0.2rem;
  margin-top: 0.65rem;
}

.image-list {
  list-style-type: none;
  padding: 0;
  /* margin: 0; */
  margin: 8px 2px;
}

.image-list li {
  display: flex;
  align-items: center;
  margin-bottom: 0.2rem;
  padding-top: 0.3rem;
}

.image-list li img {
  width: 0.4rem;
  height: 0.4rem;
  flex-shrink: 0;
  margin-right: 20px;
}

.image-list li span {
  color: #5f6368;
  font-family: Roboto, sans-serif;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 400;
  width: 4.54rem;
}

.smaller-text {
  font-size: 0.22rem !important;
}

.user-comment {
  width: 6.2rem;
  font-size: 0.26rem;
}

.smaller-review {
  font-size: 0.24rem;
  font-weight: 400;
}

.user-comment {
  letter-spacing: 0.002rem;
  font-weight: 400;
  padding-left: 0.05rem;
}

/* .comment-text {
  letter-spacing: 0.007rem;
} */

.underline {
  text-decoration: underline;
}

.left {
  margin-left: 0 !important;
  width: 2rem !important;
}

.details-link {
  width: 1.5rem;
  height: 0.28rem;
  margin: 0.45rem 0.05rem;
}

.details-link a {
  color: #009769;
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-size: 0.24rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.reviews {
  padding: 0.5rem;
}

.user-review {
  padding-top: 0.72rem;
}

.ratings-header {
  margin-bottom: 0.35rem;
}

.ratings-header h2 {
  color: #000;
  font-family: Product Sans Medium, sans-serif;
  font-size: 0.36rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.pill-buttons {
  display: flex;
  flex-direction: column;
  padding-top: 0.35rem;
}

.button-row {
  display: flex;
  margin-bottom: 0.25rem;
}

.transparent-pill {
  border: 0.05rem solid transparent;
  border-radius: 0.6rem;
  padding: 0.16rem 0.32rem;
  margin-right: 0.2rem;
  background-color: transparent;
  transition: all 0.3s ease;
}

.transparent-pill:hover {
  border-color: #007bff;
  background-color: transparent;
  color: #007bff;
}

.transparent-pill.telephone {
  background: #e1f1ed;
  width: 2.1rem;
  height: 0.6rem;
  border-radius: 0.741rem;
  display: flex;
  align-items: center;
}

.transparent-pill.telephone img {
  width: 0.3938rem;
  height: 0.3994rem;
}

.transparent-pill.telephone span {
  color: #005a41;
  font-family: Roboto, sans-serif;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-left: 0.2rem;
}

.transparent-pill.tablet {
  border-radius: 0.741rem;
  width: 2.1rem;
  height: 0.6rem;
  border: 0.01rem solid #aaaeb3;
  background: rgba(217, 217, 217, 0);
  display: flex;
  align-items: center;
}

.transparent-pill.tablet img {
  width: 0.3938rem;
  height: 0.3994rem;
}

.transparent-pill.tablet span {
  color: #5f6368;
  font-family: Roboto, sans-serif;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-left: 0.2rem;
}

.transparent-pill.screen {
  border-radius: 0.741rem;
  width: 2.98rem;
  height: 0.6rem;
  border: 0.01rem solid #aaaeb3;
  background: rgba(217, 217, 217, 0);
  display: flex;
  align-items: center;
}

.transparent-pill.screen img {
  width: 0.3938rem;
  height: 0.3994rem;
}

.transparent-pill.screen span {
  color: #5f6368;
  font-family: Roboto, sans-serif;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-left: 0.2rem;
}

.rating-container {
  display: flex;
  justify-content: space-around;
  margin: 0;
}

.overall-rating {
  width: auto;
  text-align: left;
  padding-top: 0.5rem;
}

.stars {
  font-size: 0;
}

.stars-2 {
  font-size: 0;
  letter-spacing: 0.1rem;
  padding-top: 0.4rem;
  padding-left: 0.1rem;
}

.stars-1 {
  margin-left: 0;
}

.star {
  display: inline-block;
  color: #007c56;
  margin: 0;
  font-size: 11px;
}

.user-star {
  display: inline-block;
  color: #007c56;
  padding-top: 0.1rem;
  letter-spacing: 0.08rem;
  font-size: 0.18rem;
}

.star:last-child {
  color: #efefef;
}

.review-count {
  color: #5F6368;
  font-family: Roboto, sans-serif;
  font-size: 0.22rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 1.74rem;
  height: 0.28rem;
  margin: 0.15rem 0;
}

.overall-rating strong {
  color: #000;
  font-family: "Product Sans Medium";
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.individual-ratings {
  width: 68%;
  padding-top: 0.4rem;
}

.rating {
  margin-bottom: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.label {
  display: block;
  font-size: 0.22rem;
  margin-right: 0.2rem;
  color: #000;
  font-family: Roboto, sans-serif;
  font-size: 0.22rem;
  font-style: normal;
  font-weight: 400;
}

.progress-bar {
  width: 3.92rem;
  background-color: #ddd;
  border-radius: 0.6rem;
}

.progress-5 {
  border-radius: 0.6rem;
  background-color: #007c56;
  width: 2.2rem;
  height: 0.2rem;
}

.progress-4 {
  border-radius: 0.6rem;
  background-color: #007c56;
  width: 0.86em;
  height: 0.2rem;
}

.progress-3 {
  border-radius: 0.6rem;
  background-color: #007c56;
  width: 0.66rem;
  height: 0.2rem;
}

.progress-2 {
  border-radius: 0.6rem;
  background-color: #007c56;
  width: 0.16rem;
  height: 0.2rem;
}

.progress-1 {
  border-radius: 0.6rem;
  background-color: #007c56;
  width: 1.2rem;
  height: 0.2rem;
}

.user-container {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: space-evenly;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-thumbnail {
  position: relative;
  width: 0.6rem;
  height: 0.6rem;
  overflow: hidden;
  margin-right: 0.2rem;
  margin-top: 0.05rem;
}

.user-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbnail-letter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.username {
  margin: 0;
  color: #202124;
  font-family: Roboto, sans-serif;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 3.2rem;
}

.more-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.more-btn svg {
  fill: #5f6368;
  width: 0.08rem;
  height: 0.32rem;
}

.helpful-feedback {
  display: flex;
  align-items: center;
  gap: 15px;
}

.flag-feedback {
  display: flex;
  align-items: center;
}

.flag-feedback p {
  font-weight: 500;
  font-family: Product Sans Medium, sans-serif !important;
  color: #5f6368;
  font-size: 0.24rem;
}

.flag-feedback img {
  width: 0.18rem;
  height: 0.2rem;
  padding-right: 0.15rem;
  height: 0.2rem;
}

.feedback-button {
  border-radius: 0.741rem;
  width: 0.98rem;
  height: 0.44rem;
  border: 0.02rem solid #a7aeb6;
  background: rgba(217, 217, 217, 0);
  margin-right: 0.2rem;
  color: #5f6368;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.button-group {
  display: flex;
  margin-left: 0.25rem;
}

.hori-divider {
  width: 90%;
  height: 0.01rem;
  margin: 0 auto;
  border-top: 0.01rem solid #d9d9d9;
  padding: 0.4rem 0;
}

footer {
  padding: 0.1rem 0.05rem;
}

/* Style the list */
.footer-list {
  list-style: none;
  margin-top: -0.3rem;
  padding-inline-start: 20px;
  padding: 0rem 0.5rem;
}

.bold-text {
  font-weight: 500 !important;
  font-size: 0.28rem !important;
}

.additional-list {
  list-style: none;
  margin-top: -0.9rem;
  padding-inline-start: 20px;
  padding-top: 0.3rem;
}

/* Style the list items */
.footer-list li,
.additional-list li {
  color: #5f6368;
  font-family: Product Sans, sans-serif;
  font-size: 0.26rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-bottom: 0.3rem;
}

/* Style the links within the list */
.footer-list li a,
.additional-list li a {
  text-decoration: none;
  color: #5f6368;
}

/* Optional: Hover effect for links */
.footer-list li a:hover,
.additional-list li a:hover {
  text-decoration: underline;
  color: #000;
}

.vertical-list {
  display: flex;
  flex-direction: column;
  margin-top: -0.25rem;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 0;
}

.item {
  width: auto;
  padding: 0 0.5rem 0.5rem 0.35rem;
  box-sizing: border-box;
  color: #5f6368;
  text-decoration: none;
  font-family: Product Sans, sans-serif;
  font-size: 0.24rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.navbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff; /* White background color */
  border-top: 0.02rem solid #d9d9d9; /* Grey border on top */
  color: #333;
  width: 7.5rem;
  height: 1rem;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-item {
  padding: 0.2rem 0.4rem;
  color: #5f6368;
  text-decoration: none;
  font-family: Product Sans, sans-serif;
  font-size: 0.24rem;
  font-style: normal;
  font-weight: 510;
  line-height: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  margin-top: 0.45rem;
  color: #5f6368;
  font-family: Product Sans, sans-serif;
  font-size: 0.24rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.icon1 {
  background-image: url(./img/icons/controller.svg);
  background-size: 0.5rem;
  background-repeat: no-repeat;
  background-position: center top 6;
}

.icon2 {
  background-image: url(./img/icons/apps.svg);
  background-size: 0.5rem;
  background-repeat: no-repeat;
  background-position: center top 6;
}

.icon3 {
  background-image: url(./img/icons/film.svg);
  background-size: 0.5rem;
  background-repeat: no-repeat;
  background-position: center top 6;
}

.icon4 {
  background-image: url(./img/icons/book.svg);
  background-size: 0.5rem;
  background-repeat: no-repeat;
  background-position: center top 6;
}

.icon5 {
  background-image: url(./img/icons/star.svg);
  background-size: 0.5rem;
  background-repeat: no-repeat;
  background-position: center top 6;
}

.icon6 {
  background-image: url("icon3.png"); /* Replace with your icon path */
  background-size: 20px; /* Adjust icon size */
  background-repeat: no-repeat;
  background-position: 8px center; /* Add left padding for the icon */
}

.container {
  position: relative;
  /* display: flex; */
  justify-content: center;
  /* transform: translate(0%, 10%); */
  width: 7.5rem;
  height: auto;
  margin-bottom: 1rem;
  margin-top: 1.4rem;
  padding-bottom: 1rem;
}

button {
  background-size: contain !important;
  cursor: pointer;
}
.button-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.btn {
  cursor: pointer;
  background-size: contain !important;
}

p {
  color: #5f6368;
  font-family: Roboto, sans-serif;
  font-size: 0.16rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.pc {
  display: none;
}

@media screen and (min-width: 900px) {
  html,
  body {
    padding: 0;
    margin: 0;
    height: 100%;
  }
  /* .h5{
   display: block;
 } */

  .two-row-container {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .app-content .updated strong {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 35px;
    color: #202124;
  }

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

  .left {
    margin-left: 0 !important;
    width: 100px !important;
  }

  .column img {
    margin: 10px auto;
    padding-top: 0;
    width: 20px;
  }

  .green-link {
    color: #009769 !important;
    position: relative;
  }

  .green-link::after {
    content: "";
    position: absolute;
    left: 11;
    bottom: -12px;
    width: 60%;
    height: 3px;
    background-color: #009769;
  }

  .green-link:hover {
    color: #009769;
  }

  .space-grades {
    display: flex;
    gap: 725px;
    align-items: center;
    width: 1200px;
  }

  .right {
    margin: 0;
    margin-right: 2px;
  }

  .min {
    margin-right: -50px;
  }

  .ds {
    margin-top: 10px !important;
    padding-bottom: 5px;
  }

  .image-button {
    margin-right: 0;
  }

  .updated {
    margin: 0 !important;
  }

  .updated span {
    margin: -18px 0 0 !important;
    font-size: 14px !important;
  }

  .user-comment {
    color: #5f6368;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;
    margin-top: 4px;
    margin-bottom: -2px;
  }

  .comment-text {
    letter-spacing: 0;
  }

  .info-icon {
    vertical-align: middle; /* Adjust vertical alignment */
  }

  .mobile-buttons img {
    width: 24px;
    height: auto;
  }

  .image-row {
    width: 390px;
    height: 327px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 35px;
    padding-top: 50px;
    padding-bottom: 15px;
    margin-right: auto;
  }

  .image-row img {
    width: 184px;
    height: 327px;
    object-fit: cover; /* Maintain aspect ratio */
    border-radius: 8px;
  }

  .row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .long-button {
    width: 244px;
    height: 53px;
    border-radius: 4px;
    font-size: 18px;
  }

  .share-button {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    padding-left: 40px;
    margin-right: 0;
  }

  .wishlist-button {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    padding-left: 40px;
  }

  .share-button img {
    width: 20px;
    height: 20px;
  }

  .wishlist-button img {
    width: 20px;
    height: 20px;
  }

  .share-button span {
    font-size: 14px;
    padding-left: 10px;
  }

  .wishlist-button span {
    font-size: 14px;
    padding-left: 10px;
  }

  .icon-with-text {
    display: flex;
    padding-left: 35px;
    padding-top: 0;
    margin-top: -10px;
    padding-bottom: 5px;
    margin-right: auto;
    align-items: center;
  }

  .icon-with-text img {
    width: 20px;
    height: 20px;
    padding-top: 8px;
  }

  .icon-with-text span {
    font-size: 13px;
    padding-left: 10px;
    line-height: 0;
    letter-spacing: 0.5px;
  }

  .app-info-2 {
    display: flex;
    justify-content: flex-start;
    margin-top: -30px;
    padding-top: 25px;
    padding-bottom: 45px;
    padding-left: 0;
    gap: 28px;
  }
  .h5 {
    display: none;
  }

  .about-app {
    padding: 0px 16px 0px 0px;
  }

  .app-content .highlight {
    margin: 25px 0 0;
    font-size: 16px;
  }

  .divider {
    width: 2px;
    background-color: #d9d9d9;
    margin: 15px 0;
  }

  .column {
    width: auto;
    /* padding: 0 15px; */
    margin-left: 0;
  }

  .rating-text-1 {
    font-size: 16px;
    text-align: center;
    line-height: 40px;
  }

  .rating-text-2 {
    font-size: 12px;
    margin-top: -5px;
    font-weight: 400;
  }

  p {
    color: #5f6368;
    font-family: Roboto, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .app-content {
    padding: 0 35px;
    margin-right: auto;
    width: 100%;
  }

  .app-info {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding: 80px 20px 0 20px;
    margin-right: auto;
    gap: 0.7rem;
  }

  .app-details {
    margin-left: 15px;
    margin-top: -35px;
  }

  .app-title {
    color: #202124;
    font-family: "Google Sans",Roboto,Arial,sans-serif;
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    width: 775px;
    padding-bottom: 0;
  }

  .app-image {
    display: block;
    margin: -38px auto;
    /* margin-left: 300px; */
    margin-right: auto;
    width: 240px !important;
    height: 240px !important;
    background: url(./img/web//cp-web.png) no-repeat center center;
    background-size: cover;
  }

  .app-image img {
    width: 240px;
    height: 240px;
  }

  .mobile-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: -7px auto;
    padding-left: 250px;
  }

  .mobile-buttons button {
    margin-left: 10px;
  }

  .dev-title {
    font-size: 16px;
    line-height: 12px;
    width: 180px;
    height: 19px;
    margin: 10px 0;
    padding-bottom: 45px;
  }

  .app-slogan {
    font-size: 13px;
    margin-left: 5px;
    margin-top: -10px;
  }

  .with-arrow {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 0;
    margin-bottom: -14px;
    /* gap: 822px; */
  }

  .app-content h2 {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 30px 0 15px;
    font-family: Product Sans Medium;
  }

  .app-content h5 {
    color: #000;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: left !important;
    margin: 0 0 2px 0;
  }

  .button-group {
    display: flex;
    margin-left: 10px;
  }

  .jili-desc {
    width: 1000px;
    height: 38px;
    font-size: 16px !important;
    line-height: 15px !important;
    letter-spacing: 0;
    margin-bottom: 0;
    padding-right: 0;
    padding-bottom: 25px;
  }

  .app-content p {
    color: #5f6368;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 45px;
    text-align: left !important;
    margin: 0;
  }

  .margin {
    margin: 0.1rem 0 !important;
    letter-spacing: -0.3px;
    padding-right: 0;
  }

  .buttons {
    margin-top: 5px;
    display: flex;
    height: 50px;
    align-items: center;
    padding-bottom: 30px;
    gap: 10px;
  }

  .button {
    width: 79.077px;
    height: 30.272px;
    border-radius: 37.067px;
    border: 1.236px solid #DADCE0;
    background: rgba(217, 217, 217, 0);
    /* margin-right: 15px; */
    font-size: 15px;
  }

  .long2-button {
    width: 190px;
    height: 30.272px;
    border-radius: 37.067px;
    border: 1.236px solid #DADCE0;
    background: rgba(217, 217, 217, 0);
    /* margin-right: 15px; */
    font-size: 16px;
    color: #5f6368;
    font-family: Roboto, sans-serif;
  }

  .long1-button {
    width: 130px;
    height: 30.272px;
    border-radius: 37.067px;
    border: 1.236px solid #DADCE0;
    background: rgba(217, 217, 217, 0);
    /* margin-right: 15px; */
    font-size: 16px;
    color: #5f6368;
    font-family: Product Sans Medium, sans-serif;
  }

  .ds-text {
    font-size: 16px !important;
    margin: 0 !important;
    font-family: Roboto, sans-serif;
    line-height: 20px !important;
    letter-spacing: 0.4px;
    padding-right: 0;
    width: 1100px;
  }

  .mobile {
    display: none; /* Hide mobile version on desktop */
  }
  .desktop {
    display: block; /* Display desktop version */
  }

  .image-box {
    padding: 20px 20px 0;
    width: 1050px;
    height: 252px;
    margin-top: 30px;
    margin-left: 0;
    border-radius: 8px;
    border: 1.236px solid #DADCE0;
  }

  .image-list li span {
    font-size: 16px;
    padding: 0;
    width: 500px;
    line-height: 22px;
  }

  .smaller-text {
    font-size: 12px !important;
  }

  .image-list li {
    height: auto;
    padding-top: 20px;
    margin-bottom: 0;
  }

  .image-list li img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: 20px;
  }

  .thirt-party-li {
    width: 450px;
    height: 38px;
    padding: 0 !important;
  }

  .details-link {
    width: 124px;
    height: 14px;
    margin: 24px 5px;
  }

  .details-link a {
    font-size: 14px;
  }

  .ratings-header {
    margin-bottom: 20px;
    padding-left: 15px;
  }

  .reviews {
    padding: 40px 20px;
    margin-right: auto;
  }

  .button-row {
    margin-bottom: 25px;
  }

  .ratings-header h2 {
    font-size: 20px;
  }

  .pill-buttons {
    display: flex;
    flex-direction: row;
    padding-top: 20px;
  }

  .transparent-pill.telephone span {
    font-size: 14px;
    padding-left: 10px;
    font-weight: 400;
  }

  .transparent-pill {
    border: 2px solid transparent;
    border-radius: 30px;
    padding: 8px 16px;
    margin-right: 10px;
    background-color: transparent;
    transition: all 0.3s ease;
  }

  .transparent-pill.telephone {
    background: #e1f1ed;
    width: 105px;
    height: 30px;
    border-radius: 37px;
    display: flex;
    align-items: center;
  }

  .transparent-pill.telephone img {
    width: 20px;
    height: 20px;
  }

  .transparent-pill.tablet {
    border-radius: 37px;
    width: 105px;
    height: 30px;
    border: 1.236px solid #DADCE0;
    background: rgba(217, 217, 217, 0);
    display: flex;
    align-items: center;
  }

  .transparent-pill.tablet img {
    width: 20px;
    height: 20px;
  }

  .transparent-pill.tablet span {
    font-size: 14px;
    padding-left: 10px;
    font-weight: 400;
  }

  .transparent-pill.screen {
    border-radius: 37px;
    width: 149px;
    height: 30px;
    border: 1.23px solid #DADCE0;
    background: rgba(217, 217, 217, 0);
    display: flex;
    align-items: center;
  }

  .transparent-pill.screen img {
    width: 20px;
    height: 20px;
  }

  .transparent-pill.screen span {
    font-size: 14px;
    padding-left: 10px;
    font-weight: 400;
  }

  .rating-container {
    justify-content: flex-start;
    gap: 30px;
  }

  .rating {
    margin-bottom: 7.5px;
    display: flex;
    justify-content: flex-start;
  }

  .overall-rating {
    width: auto;
    padding-top: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .overall-rating strong {
    font-size: 55px;
  }

  .stars-1 {
    margin-left: -0;
    margin-top: 5px;
  }

  .flag-feedback p {
    font-size: 14px;
  }

  .review-count {
    font-size: 11px;
    width: 85px;
    height: 8px;
    margin: 8px 0;
    letter-spacing: 0.5px;
  }

  .individual-ratings {
    padding-top: 18px;
    width: 80.5%;
  }

  .label {
    font-size: 11px;
    margin-right: 20px;
  }

  .progress-bar {
    width: 1085px;
    height: 10px;
    border-radius: 30px;
  }

  .progress-5 {
    border-radius: 30px;
    background-color: #007c56;
    width: 60%;
    height: 10px;
  }

  .progress-4 {
    border-radius: 30px;
    width: 73.5px;
    height: 10px;
  }

  .progress-3 {
    border-radius: 30px;
    width: 48px;
    height: 10px;
  }

  .progress-2 {
    border-radius: 0.6rem;
    background-color: #007c56;
    width: 18px;
    height: 10px;
  }

  .progress-1 {
    border-radius: 0.6rem;
    background-color: #007c56;
    width: 214px;
    height: 10px;
  }

  .smaller-review {
    font-size: 12px;
  }

  .user-thumbnail {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-top: 3px;
  }

  .user-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .thumbnail-letter {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .username {
    font-size: 15px;
    width: 178px;
    color: #5f6368 !important;
  }

  .stars-2 {
    font-size: 0;
    letter-spacing: 5.5px;
    padding-top: 20px;
    padding-left: 3px;
  }

  .more-btn {
    margin-right: 0;
  }

  .more-btn svg {
    width: 4px;
    height: 16px;
  }

  .feedback-button {
    border-radius: 37px;
    width: 49px;
    height: 22px;
    border: 1px solid #A7AEB6;
    background: rgba(217, 217, 217, 0);
    margin-right: 10px;
    font-size: 11px;
  }

  .user-container {
    gap: 845px;
    justify-content: normal;
  }

  .user-star {
    letter-spacing: 5px;
    padding-top: 5px;
    font-size: 9px;
    margin-left: 2px;
  }

  .user-review {
    padding-top: 45px;
    margin-left: 8px;
  }

  .flag-feedback {
    padding-top: 15px;
  }

  .flag-feedback img {
    width: 9px;
    height: 10px;
    padding-right: 8px;
  }

  footer {
    padding: 10px;
    display: flex;
    flex-direction: column;
    margin-right: auto;
    margin-left: 0;
  }
  .hori-divider {
    width: 80%;
    padding: 10px 0;
    margin: 0 0 0 35px;
    margin-right: auto;
    margin-left: 28px;
  }

  /* Style the list */
  .footer-list {
    list-style: none;
    margin: 0;
    padding: 0rem 0 0 0.05rem;
  }

  .bold-text {
    font-weight: 500 !important;
    font-size: 14px !important;
  }

  .additional-list {
    list-style: none;
    margin: 0;
    padding-inline-start: 200px;
    padding-top: 0;
  }

  /* Style the list items */
  .footer-list li,
  .additional-list li {
    font-size: 12px;
    padding-bottom: 20px;
  }

  /* Style the links within the list */
  .footer-list li a,
  .additional-list li a {
    text-decoration: none;
    color: #5f6368;
  }

  /* Optional: Hover effect for links */
  .footer-list li a:hover,
  .additional-list li a:hover {
    text-decoration: none;
    color: #5f6368;
  }

  .test {
    display: flex;
    margin-left: 10px;
    padding: 0 0 20px;
  }

  .footer-row {
    margin-bottom: 20px;
    display: flex;
    padding-bottom: 50px;
    gap: 30px;
    margin-left: 27px;
    margin-right: auto;
    padding-bottom: 0.2rem;
  }

  .item {
    width: auto;
    margin-top: 20px;
    padding: 0;
    text-decoration: none;
    font-size: 12px;
  }

  .vertical-list {
    display: flex;
    flex-direction: column;
    margin-top: -10px;
  }

  .bg {
    /* background: url(img/web/Background.png) center / 100% 100% no-repeat; */
    /* position: fixed; */
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  header {
    background-color: #fff;
    position: fixed;
    top: 0;
    transition: box-shadow 0.2s ease-in-out;
    width: 100%;
    z-index: 3;
    margin: 0;
    z-index: 100;
  }

  .nav-oPjgQb {
    align-items: center;
    display: flex;
    height: 75px;
    width: 100%;
    margin-left: 90px;
  }

  /* Style for logo */
  .logo img {
    width: 177px;
    height: 40px;
    flex-shrink: 0;
  }

  /* Style for navigation links */
  .nav-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 30px;
    font-weight: 400;
    font-family: Product Sans, sans-serif;
    gap: 12px;
  }
  .nav-links li {
    margin-bottom: 10px; /* Space between each link */
  }
  .nav-links li a {
    display: block;
    text-decoration: none;
    color: #5f6368;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
  }
  .nav-links li a:hover {
    background-color: #ffffff; /* Change the background color for hover effect */
  }

  .container {
    position: relative;
    display: flex;
    justify-content: center;
    width: 1200px;
    height: auto;
    margin: 5% auto -10px 167px;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
  }

  .main-container {
    display: flex;
    justify-content: center;
  }

  .user-comment {
    width: 685px;
    letter-spacing: 0px;
    padding-top: 25px;
    padding-left: 0;
  }

  .mobile-buttons .user-img {
    width: 32px;
    height: 32px;
  }
}