@import "tailwindcss";


@keyframes rotateOnce {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes scalePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);

  }
}



* {
  font-family: "Inter", sans-serif;
  /* box-sizing: border-box; */
}

/* ~~~~~~~~share-style~~~~~~~~~~~ */
/* .primary-btn {
  @apply cursor-pointer items-center gap-3 px-4 py-3 font-semibold text-white rounded-full text-[1.2vw] bg-[linear-gradient(30deg, #F7E93F_0%, #FB09B4_51%, #9100F8_100%)] hover: scale-105 transition-transform duration-400 shadow-lg
} */

.hide {
  display: none;
}

.hero {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.hero-container {
  position: relative;
  align-items: center;
  justify-content: center;
}

.hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  justify-content: center;
  background-position: center;
}

.img-box {
  width: 22vw;
  max-width: 350px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;

}

.middle-img {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-img {
  width: 30%;
  max-width: 110px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotateOnce 2s linear;
}

.badge {
  position: absolute;
  top: 3%;
  right: 5%;

  padding: 2% 4%;
  border-radius: 10%;
  background: #00FF88;
  color: #1A0B2E;

  border-radius: 40px;
  font-weight: bold;
  animation: scalePulse 1.5s ease-in-out infinite;
}


.hero-content {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 550px;
}

/* ~~~~~~~~~~~~about content~~~~~~~~~~~~~` */

.about {
  /* background-color: #1A0B2E; */
  padding-bottom: 100px;
}

/* .about-content {
  max-width: 1200px;
  margin: 0 auto;
} */

.about-rating,
.quality-container {
  width: 73%;
  max-width: 1200px;
  margin: 0 auto;

}

.review-item {
  ;
}

.about-content {
  max-width: 800px;
  margin: 0 auto;
}

.review-item {
  justify-content: space-between;
  align-items: center;
}

.review-item h3 {
  /* font-weight: bold;
  font-size: 48px; */
}

/* ~~~~~~~~~feature-section~~~~~~~~~ */
.quality {
  /* background-color: #230E3D; */
  padding-top: 100px;
  background-color: #230E3D;


}

.quality-box>* {
  gap: 10px;
  border-radius: 40px;
  background-color: #351165;
  padding: 40px;
}

.quality-box {
  gap: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.side-bar {
  height: 480px;
  grid-row: span 2;
  grid-column: span 1;

}

.long-layout {
  max-width: 790px;
  height: 225px;
  grid-row: span 1;
  grid-column: span 2;

}


@media screen and (max-width: 576px) {
  .badge {
    position: absolute;
    top: 3%;
    right: 5%;
    font-size: 10px;
    padding: 1% 2%;

  }

  .hero-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 550px;
  }
    .quality-box {
      gap: 30px;
      display: flex;
    flex-direction: column;
}