.product-counter-section {
  width: 100%;
  padding: 45px 15px;
  direction: rtl;
}

.counter-header {
  text-align: center;
  margin-bottom: 50px;
}

.counter-header {
  margin: 0;
  font-size: 32px;
  font-weight: bold;
  color: #470f84;
}

.counter-header p {
  margin-top: 12px;
  color: #777;
  font-size: 15px;
  text-align: center;
}

.counter-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 35px 0 60px;
}

.counter-scroll::-webkit-scrollbar {
  height: 6px;
}

.counter-scroll::-webkit-scrollbar-thumb {
  background: #470f84;
  border-radius: 20px;
}

.counter-list {
  display: flex;

  flex-wrap: nowrap;

  justify-content: center;

  align-items: center;

  gap: 35px;

  width: max-content;

  margin: auto;
}

.counter-card {
  width: 220px;

  min-width: 220px;

  height: 230px;

  position: relative;

  padding-top: 55px;

  border-radius: 25px;

  background: linear-gradient(135deg, var(--c1), var(--c2));

  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s ease,
    opacity 0.5s ease;

  opacity: 0;

  transform: translateY(40px) scale(0.92);
}

.counter-card.show {
  opacity: 1;

  transform: translateY(0) scale(1);
}

.counter-card:hover {
  transform: translateY(-12px) scale(1.02);

  box-shadow: 0 20px 45px var(--shadow);
}

.counter-card:before {
  height: 240px;
  content: "";

  position: absolute;

  inset: 5px;

  background: #fff;

  border-radius: 18px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

  z-index: 0;
}

.counter-icon {
  position: absolute;

  top: -25px;

  left: 50%;

  transform: translateX(-50%);

  width: 78px;

  height: 62px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 120px;

  background: linear-gradient(135deg, var(--c1), var(--c2));

  color: #fff;

  font-size: 35px;

  z-index: 3;

  transition: 0.35s ease;
}

.counter-card:hover .counter-icon {
  transform: translateX(-50%) scale(1.12) rotate(8deg);
}

.counter-icon i {
  display: block;

  line-height: 1;
}

.counter-content {
  position: relative;

  z-index: 2;

  text-align: center;
}

.counter-number {
  margin-top: 10px;

  font-size: 40px;

  font-weight: bold;

  color: var(--c1);

  direction: ltr;
}

.counter-title {
  margin-top: 8px;

  font-size: 18px;

  font-weight: bold;

  color: #444;

  white-space: nowrap;
}

.counter-label {
  margin-top: 5px;

  font-size: 13px;

  color: #999;
}

/* Progress */

.counter-progress {
  width: 75%;

  height: 6px;

  background: #eee;

  border-radius: 20px;

  overflow: hidden;

  margin: 15px auto 0;
}

.counter-progress span {
  display: block;

  height: 100%;

  width: 0;

  border-radius: 20px;

  background: linear-gradient(90deg, var(--c1), var(--c2));

  transition: width 0.2s linear;
}

/* ==========================
   رنگ ها + Glow
========================== */


.purple {
  --c1: #470f84;
  --c2: #8c65b9;
  --shadow: rgba(71, 15, 132, 0.45);
}

.blue {
  --c1: #1565c0;
  --c2: #64b5f6;
  --shadow: rgba(21, 101, 192, 0.45);
}

.green {
  --c1: #00897b;
  --c2: #4db6ac;
  --shadow: rgba(0, 137, 123, 0.45);
}

.orange {
  --c1: #ef6c00;
  --c2: #ffb74d;
  --shadow: rgba(239, 108, 0, 0.45);
}

.pink {
  --c1: #ad1457;
  --c2: #ce93d8;
  --shadow: rgba(173, 20, 87, 0.45);
}

.teal {
  --c1: #00695c;
  --c2: #26a69a;
  --shadow: rgba(0, 105, 92, 0.45);
}

.cyan {
  --c1: #00838f;
  --c2: #4dd0e1;
  --shadow: rgba(0, 131, 143, 0.45);
}

.ruby {
  --c1: #b71c1c;
  --c2: #ef5350;
  --shadow: rgba(183, 28, 28, 0.45);
}

.gold {
  --c1: #f57f17;
  --c2: #ffd54f;
  --shadow: rgba(245, 127, 23, 0.45);
}

.violet {
  --c1: #4a148c;
  --c2: #ab47bc;
  --shadow: rgba(74, 20, 140, 0.45);
}

.sky {
  --c1: #0277bd;
  --c2: #81d4fa;
  --shadow: rgba(2, 119, 189, 0.45);
}

.lime {
  --c1: #558b2f;
  --c2: #aed581;
  --shadow: rgba(85, 139, 47, 0.45);
}

.silver {
  --c1: #455a64;
  --c2: #90a4ae;
  --shadow: rgba(69, 90, 100, 0.45);
}

.coral {
  --c1: #e64a19;
  --c2: #ff8a65;
  --shadow: rgba(230, 74, 25, 0.45);
}

.magenta {
  --c1: #880e4f;
  --c2: #ec407a;
  --shadow: rgba(136, 14, 79, 0.45);
}

@media (max-width: 900px) {
  .counter-list {
    justify-content: flex-start;

    margin-right: 15px;
  }

  .counter-card {
    width: 190px;

    min-width: 190px;
  }
}