/* ------------------------------------------------------
   COMPONENTS — BenCode Studio
   Global UI elements used across the entire website
   ------------------------------------------------------ */

/* ------------------------------------------------------
   Typography
------------------------------------------------------ */

h1, h2, h3, h4 {
  color: var(--dark);
}

p {
  color: #444;
  line-height: 1.6;
}

/* ------------------------------------------------------
   Cards & Shadows
------------------------------------------------------ */

.card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* ------------------------------------------------------
   Project Info Blocks
------------------------------------------------------ */

.project-info {
  padding: 20px;
}

.project-info h3 {
  margin: 0 0 5px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #2c1840;
}

.project-info p {
  color: #666;
}

/* ------------------------------------------------------
   Testimonial Rating
------------------------------------------------------ */

.testimonial-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
}

.testimonial-rating .star,
.rating-stars .star {
  font-size: 20px;
  color: #c4c4c4;
  border: none;
  background: transparent;
  padding: 0 2px;
}

.testimonial-rating .star.filled,
.rating-stars .star.active {
  color: #6a1b9a;
}

.testimonial-rating .rating-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #6a1b9a;
}

/* ------------------------------------------------------
   Utility Classes
------------------------------------------------------ */

.text-center {
  text-align: center;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.hidden {
  display: none !important;
}

/* ------------------------------------------------------
   Animations (simple fade)
------------------------------------------------------ */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ------------------------------------------------------
   Scroll Reveal Utility
------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}