.custom-marquee {
    padding: 40px 0;
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: var(--spacing);
    animation: marquee var(--speed) linear infinite;
    animation-direction: var(--direction);
}

.custom-marquee:hover .marquee-track {
    animation-play-state: var(--pause);
}

.card {
	padding: 32px;
	
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.04);
	color: #f8fafc;
	box-shadow: 0 18px 60px rgba(15, 23, 42, 0.15);
    min-width: 440px;
  max-width: 440px;
  background: #253545;
  color: #fff;
  padding: 50px 30px;
  border-radius: 12px;
  position: relative;
  border: 2px solid #546677;
}

.card p {
    margin: 0 0 32px;
    font-size: 16px;
    color: #e5e7eb;
}
.card-footer {
	position: absolute;
	bottom: -35px;
	left: 70px;
	padding: 12px;
	border-radius: 8px;
	width: 300px;
	font-size: 14px;
	background: #253545;
	border: 2px solid #546677;
}

.card-footer strong {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
    color: #ffffff;
}

.card-footer {
    font-size: 13px;
    color: #cbd5e1;
}

/* Animation */
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Mobile */
@media (max-width: 767px) {
    .card {
        min-width: 300px;
        padding: 24px;
    }

    .card p {
        font-size: 14px;
    }

    .card-footer {
        left: 24px;
        padding: 14px 16px;
    }

    .marquee-track {
        animation-duration: var(--mobile-speed);
    }
}