/* Custom Styles */

/* ------------ Fonts Begin ----------------*/
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
  font-family: 'Neoneon';
  src: url('../../fonts/neoneon-font/Neoneon-3zaD6.otf') format('truetype');
}

body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

.montserrat-regular {
  font-weight: 400;
}

.montserrat-extra-bold {
  font-weight: 800;
}

.antonio-bold {                             
  font-family: "Antonio", sans-serif;
  font-weight: 700;
}

.neoneon {
  font-family: "Neoneon";
}


/* ------------ Fonts End ----------------*/

.team-img {
  height: 400px;          
  object-fit: cover;       /* crop instead of distort */
  object-position: top;
}

.assignment-cover {
  height: 400px;          
  object-fit: cover;       /* crop instead of distort */
  object-position: center;
}

.poster-container {
   height: 400px; 
   overflow: hidden;
}

.poster-img {
  height: 400px;          
  object-fit: cover;
  object-position: center;
  transform: scale(1.1);  /* zoom in more (adjust 1.2–1.5 as needed) */
  transform-origin: center;
  
}

.row {
  justify-content: center;
}

.color-info {
  display: grid;
  grid-template-columns: 1fr auto; /* left = flexible, right = fit content */
  column-gap: 1rem;               /* space between columns */
  width: 260px;                   /* adjust width as needed */
}

.color-info div:nth-child(odd) {
  text-align: left;               /* left column */
}

.color-info div:nth-child(even) {
  text-align: left;              /* right column */
}

.color-name {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  text-align: left;
}

.color-block {
  width: 100%;
  height: 100px;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center; 
  width: fit-content;
  height: 100%;         /* inherit height from flex container */
}

.card-body strong {
  color: #BA0C2F
}

.asset-library ul {
  margin-left: 2rem;
}

.asset-library strong {
  color: #BA0C2F;
}

#asset-library-link {
  color: #BA0C2F;
}




.hero-container p, .hero-container span {
  color: white;
}

.hero-container h4 {
  color: #CCCCCC;
}

.hero-title {
  color: white;
}

nav {
  background-color: white !important;
}

#play-button:hover {
  background-color: #CCCCCC !important;
}

.asset-wrapper {
  position: relative;
  width: 100%;
  height: 400px;          /* ← force the height */
  overflow: hidden;       /* keep image/video contained */
}

.asset-wrapper img,
.asset-wrapper video {
  width: 100%;
  height: 100%;           /* fill the wrapper */
  object-fit: cover;      /* keep crop clean */
}

.asset-wrapper video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease-in-out;
  pointer-events: none; /* avoid hover flicker */
}

/* When JS adds .hovering, video becomes visible */
.asset-wrapper.hovering video {
  opacity: 1;
}

#asset-lib-link {
  color:#BA0C2F;
}

#asset-lib-link:hover {
  color: black;
}

.hovering-cards .card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hovering-cards .card:hover {
  transform: scale(1.04); /* slight enlargement */
}

.asset-link:hover {
  color: black;
}