body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

p {
  font-weight: 300;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
}

/* Thumbnail container */
.video-thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #000;
  overflow: hidden;
  border-radius: 0.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Subtle hover animation */
.video-thumbnail:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Easy On Hold–style play button (approx. brand colors) */
/* Easy On Hold–style play button */
.play-button-eoh {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, #ffffff, #ff7a1a);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  transform: translate(-50%, -50%);  /* center from top-50 / start-50 */
}

/* SVG play triangle */
.play-icon-eoh {
  width: 44px;
  height: 44px;
  fill: #002d5c; /* deep blue */
}

/* Hover state for play button */
.video-thumbnail:hover .play-button-eoh {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  background: radial-gradient(circle at 30% 30%, #ffffff, #ff8b2e);
}

/* Modal video fade-in animation */
.modal-video-animate {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.modal-video-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.video-overlay-click {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: pointer;
}

/* Optional caption styling tweak */
.modal-video-caption {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navigation */
.navbar {
  min-height: 72px; /* or whatever matches your design */
}
.navbar-brand img {
  display: block;
}