* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: white;

  background-image: url(/images/bg-pattern-bottom-desktop.svg);
  background-repeat: no-repeat;
  background-position: bottom;
}
.top-side {
  /* background-image: url(/images/bg-pattern-top-desktop.svg);
  background-repeat: no-repeat;
  background-position: center -50%; */
  display: flex;

  width: 75vw;
  margin: auto;
  height: 50vh;
  /* border: 2px solid black; */
}
.top-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* border: 2px solid red; */
  width: 50%;
}
.top-left p {
  color: hsl(303, 10%, 53%);
}
h1 {
  color: hsl(300, 43%, 22%);
  width: 65%;
  margin-bottom: 0.7rem;
  font-size: 3rem;
}

.top-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  /* border: 2px solid aqua; */
  width: 50%;
}
.star-txt {
  display: flex;
  align-items: center;
  background-color: hsl(300, 24%, 96%);
  gap: 20px;
  padding: 10px;
  width: fit-content;
  height: 40px;
  border-radius: 5px;
  /* border: 2px solid green; */
}
.star {
  display: flex;
  align-items: center;
  gap: 8px;
}

.txt {
  color: hsl(300, 43%, 22%);
  font-weight: bold;
}
.first {
  position: relative;
  left: 120px;
}
.second {
  position: relative;
  left: 150px;
}
.third {
  position: relative;
  left: 230px;
}
.bottom-side {
  display: flex;
  width: 75vw;
  justify-content: space-between;
  margin: auto;
}
.box {
  width: 28%;
  height: 22vh;

  /* border: 2px solid pink; */
  background-color: hsl(300, 43%, 22%);
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  padding: 20px;

  gap: 10px;
  border-radius: 10px;
}
.box-img {
  display: flex;
  gap: 10px;
}
.box img {
  border-radius: 100%;
  width: 40px;
}
.middle {
  margin-top: 13px;
}
.end {
  margin-top: 35px;
}
.buyer {
  color: white;
  font-weight: bold;
}

span {
  color: hsl(333, 80%, 67%);
}
.details {
  color: white;
  padding: 10px;
  font-size: 1rem;
}