/* All scrollbars on the site */
/* For Chrome, Edge, Safari, Opera */
::-webkit-scrollbar {
  width: 20px;
  /* vertical scrollbar thickness */
  height: 20px;
  /* horizontal scrollbar thickness */
}
::-webkit-scrollbar-thumb {
  background: #187A8B;
  border-radius: 10px;
  border: 3px solid #e0e6e8;
}
::-webkit-scrollbar-track {
  background: #e0e6e8;
  border-radius: 10px;
}
/* For Firefox */
html {
  scrollbar-width: auto !important;
  /* 'auto' is default, 'thin' is thinner; 'auto' gives normal/thick */
  scrollbar-color: #187A8B #e0e6e8;
}
#title {
  background-color: #ffffcc;
}
.text-after-edge {
  font-size: 18px !important;
}
.a-CardView-subTitle:not(first-child) {
  margin: var(--ut-cv-subtitle-margin, 0.25rem 0 0);
  font-size: large;
  font: bolder;
}
/* Add this to your Page CSS Inline */
.a-CardView-items--grid {
  gap: 1rem;
  padding: 1rem;
}
.a-CardView-item {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: none;
}
.a-CardView-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.a-CardView {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.a-CardView::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.7s;
}
.a-CardView-item:hover .a-CardView::before {
  left: 100%;
}
/* Individual Card Colors - Different for each card */
.a-CardView-item[data-id="0"] .a-CardView {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.a-CardView-item[data-id="1"] .a-CardView {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}
.a-CardView-item[data-id="2"] .a-CardView {
  background: linear-gradient(135deg, #3810e8 0%, #00a5fe 100%);
  color: white;
}
.a-CardView-item[data-id="3"] .a-CardView {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: #2d3748;
}
.a-CardView-item[data-id="4"] .a-CardView {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: #2d3748;
}
.a-CardView-item[data-id="5"] .a-CardView {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #2d3748;
}
.a-CardView-item[data-id="6"] .a-CardView {
  background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
  color: #2d3748;
}
/* Added from 7 to 19 */
.a-CardView-item[data-id="7"] .a-CardView {
  background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
  color: #2d3748;
}
.a-CardView-item[data-id="8"] .a-CardView {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  color: #2d3748;
}
.a-CardView-item[data-id="9"] .a-CardView {
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
  color: #2d3748;
}
.a-CardView-item[data-id="10"] .a-CardView {
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  color: #2d3748;
}
.a-CardView-item[data-id="11"] .a-CardView {
  background: linear-gradient(135deg, #96fbc4 0%, #f9f586 100%);
  color: #2d3748;
}
.a-CardView-item[data-id="12"] .a-CardView {
  background: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%);
  color: white;
}
.a-CardView-item[data-id="13"] .a-CardView {
  background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);
  color: white;
}
.a-CardView-item[data-id="14"] .a-CardView {
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
  color: white;
}
.a-CardView-item[data-id="15"] .a-CardView {
  background: linear-gradient(135deg, #fbd3e9 0%, #bb377d 100%);
  color: white;
}
.a-CardView-item[data-id="16"] .a-CardView {
  background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
  color: white;
}
.a-CardView-item[data-id="17"] .a-CardView {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #2d3748;
}
.a-CardView-item[data-id="18"] .a-CardView {
  background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
  color: white;
}
.a-CardView-item[data-id="19"] .a-CardView {
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  color: #2d3748;
}
/* Card Title Styling */
.a-CardView-title.card-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  text-align: center;
  color: inherit !important;
}
/* Header Body Alignment */
.a-CardView-headerBody {
  text-align: center;
  padding: 1.5rem 1rem 1rem;
}
/* Main Number Styling */
.a-CardView-headerBody h1 {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  margin: 0.5rem 0 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
/* Remove the inline color and apply consistent styling */
.a-CardView-headerBody h1 span {
  color: inherit !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
/* Body Content Styling */
.a-CardView-body {
  padding: 0 1rem 1.5rem !important;
  text-align: center;
}
.a-CardView-mainContent {
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.95rem !important;
  color: inherit !important;
  opacity: 0.95;
}
.a-CardView-subContent {
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  color: inherit !important;
  opacity: 0.85;
}
/* Specific text colors for dark background cards */
.a-CardView-item[data-id="0"] .a-CardView-mainContent,
.a-CardView-item[data-id="0"] .a-CardView-subContent,
.a-CardView-item[data-id="1"] .a-CardView-mainContent,
.a-CardView-item[data-id="1"] .a-CardView-subContent,
.a-CardView-item[data-id="2"] .a-CardView-mainContent,
.a-CardView-item[data-id="2"] .a-CardView-subContent {
  color: white !important;
}
/* Responsive design */
@media (max-width: 768px) {
  .a-CardView-items--grid {
    grid-template-columns: 1fr !important;
  }
  .a-CardView-headerBody h1 {
    font-size: 2rem !important;
  }
  .a-CardView-title.card-title {
    font-size: 1.1rem !important;
  }
}