* {
    font-family: 'Montserrat', sans-serif;
}

/* declare variable  */
:root {
    --color-warning: #FFB401
}

.marker {
  position: relative;
  padding-left: 20px;
}

.marker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #007bff; /* Bootstrap blue */
}


.tick {
  position: relative;
  padding-left: 24px; /* Space for the tick */
}

.tick::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 12px;
  border-right: 2px solid #28a745; /* Bootstrap success green */
  border-bottom: 2px solid #28a745;
}


.verified {
  position: relative;
  padding-left: 28px; /* Adjust spacing for the icon */
}

.verified::before {
  content: '✔';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #4CAF50; /* Green */
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
}


.btn-shine {
  position: relative;
  overflow: hidden;
  background-color: #F05742; /* Tailwind's blue-600 */
  color: white;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
}

.btn-shine::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: rotate(25deg);
  animation: shine 4s linear infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(25deg);
  }
  100% {
    transform: translateX(100%) rotate(25deg);
  }
}