.main-wrapper {
  background: #f4f6f8;
}

.head-text h1 {
  /* font-weight: 600; */
  color: #1e293b;
}

.counter-wrapper {
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  background: #f2f6ff;
  box-shadow: 0 8px 24px rgba(43, 104, 226, 0.2);
}

.counter-wrapper h2 {
  font-weight: 500;
  color: #334155;
}

.input-container input[type="text"] {
  background-color: white;
  outline: none;
  border: 1px solid #2b68e2;
  border-radius: 6px;
  caret-color: #2b68e2;
  color: #1e293b;
}

.clear-icon {
  top: 56%;
  right: 8px;
  transform: translateY(-50%);
}

.counter-section .counter {
  text-align: center;
  border: 1px solid #2b68e2;
  border-radius: 6px;
  padding: 10px;
  background-color: #ccddff;
  width: 100%;
  font-weight: 600;
  color: #2b45bb;
}

.note {
  color: #5a606b;
  font-weight: 600;
}