/* Background Pattern */
.pattern-bg {
  background-color: #111827;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
  background-size: 40px 40px;
}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Hover animation */
.hover\:scale-105 {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Video iframes */
iframe, video {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  border: none;
}

/* Slider settings */
#reel-slider, #youtube-slider {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

#reel-slider > div,
#youtube-slider > div {
  flex: 0 0 300px; /* fixed base width */
  max-width: 90%; /* responsive on small screens */
  height: auto;   /* let the card height adjust */
  aspect-ratio: 9/16; /* keeps vertical video shape */
}

/* Navigation buttons */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 1.5rem;
  padding: 0.4rem 0.8rem;
  border-radius: 9999px;
  cursor: pointer;
  z-index: 20;
  transition: background 0.2s;
}
.slider-btn:hover {
  background: rgba(59, 130, 246, 0.8); /* blue-500 */
}