:root {
  --bs-body-bg: #0b0b0c;
  --bs-body-color: #f4f4f5;
  --bs-primary: #e11d48;
  --bs-primary-rgb: 225, 29, 72;
  --bs-secondary-bg: #18181b;
  --bs-border-color: #27272a;
}

body {
  font-family: 'Manrope', sans-serif;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Dela Gothic One', sans-serif;
  letter-spacing: -0.025em;
}

.film-track {
  display: flex;
  width: max-content;
  animation: marquee 35s linear infinite;
}

.film-track:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.film-edge {
  background: repeating-linear-gradient(90deg, #fff, #fff 10px, transparent 10px, transparent 20px);
  height: 6px;
  opacity: 0.3;
}

/* Hover zoom effect for cards and images */

.card img, .ratio img, .overflow-hidden img, .col img, .col-sm-6 img, .col-lg-4 img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover img, a:hover .ratio img, .ratio:hover img, .col:hover img, .col-sm-6:hover img, .col-lg-4:hover img, .overflow-hidden:hover img {
  transform: scale(1.05);
}