.custom-scrollbar::-webkit-scrollbar {
  height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background-color: #e2e8f0;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #a0aec0;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #718096;
}
.course-card {
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.regular-card:hover {
  background-color: #1e293b;
  transform: translateY(-0.5rem);
}
.regular-card:hover .card-title,
.regular-card:hover .card-icon-wrapper {
  color: #ffffff;
}
.regular-card:hover .card-icon-circle {
  background-color: #ffffff;
}
.regular-card:hover .card-icon-arrow {
  fill: #1e293b;
}
#login-modal.hidden, #signup-modal.hidden {
  display: none;
}


/* Base: real clamp where supported (Chromium/Safari) */
.card-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-width: 0;              /* if flex child */
	word-break: break-word;    /* guard long tokens */
}

/* Firefox fallback: cap height to 3 lines and fake the … */
@supports not (-webkit-line-clamp: 3) {
	.card-title {
		position: relative;
		max-height: calc(3 * 1lh);              /* 3 lines tall */
		mask-image: linear-gradient(180deg,#000 70%,transparent);
	}
	.card-title::after {
		content: "…";
		position: absolute;
		inset-block-end: 0;
		inset-inline-end: 0;
		padding-inline-start: .25ch;
		background: #fff; /* match your card bg */
	}
}