@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

html, body {
    height: 100%;
    width: 100%;
    font-family: 'Poppins', sans-serif;
}
.navbar {
    padding: 0.6rem;
    padding-bottom: 0;
}
.navbar-nav li{
    padding-right: 20px;
    color: white;
}
.nav-link {
    font-size: 0.95em !important;
}
.dropdown-menu {
     background-color: #000000;
    color: aquamarine;
}

.navbar .dropdown-menu {
  background-color: #000000;
}

/* and this styles the dropdwon trigger link, when open */
.navbar .dropdown.show a {
  background-color: #000000;
color: white;
}
.carousel-inner img {
    width: 100%;
    height: 100%;
}
.carousel-item {
    transition: all 0.5s ease !important;
}
.carousel-caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-caption h1 {
    font-size: 500%;
    text-transform: uppercase;
    text-shadow: 1px 1px 15px #000;
}

.carousel-caption h3 {
    font-size: 200%;
    font-weight: 500;
    text-shadow: 1px 1px 10px #000;
    padding-bottom: 1rem;
}
.carousel-credit{
    width:100%;
    height:100%;
}
.container-fluid {
  border-radius: 0.1em;
  padding-left: 2em;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.container-footer {
    border-radius: 0.1em;
    padding: 2em;
}

.btn-primary {
    background-color: #000000;
    border: 1px solid #000000;
}
.btn-primary:hover {
    background-color: #000000;
    border: 1px solid #000000;
}
.recent-credits img {
    width: 100%;
    height: 100%;
}
.jumbotron{
    padding: 1rem;
    border-radius: 0;
}
.padding{
    padding-bottom: 2rem;
}
.welcome{
    width:100%;
    margin: 0 auto;
    padding-top: 2rem;
}
.welcome hr{
    border-top: 2px solid #b4b4b4;
    width: 95%;
    margin-top: .3rem;
    margin-bottom: 1rem;
}
.fa-code{
    color: #E54D26;
}
.fa-bold{
    color: #563D7C;
}
.fa-film {
    color: #216af;
}
.fa-code, .fa-bold, .fa-film{
    font-size: 4em;
    margin: 1rem;
}
.social a{
    font-size: 4.5em;
    padding: 3rem;
}
.fa-facebook {
    color: #3b5998;
}
.fa-twitter{
    color: #00aced;
}
.fa-instagram{
	color: #EA4D05;
}
.fa-facebook:hover,
.fa-twitter:hover,
.fa-instagram:hover,
.fa-x-twitter:hover{
    color: #d5d5d5;
}

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: pointer;
  background: #000000;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 100% 20px;
}

.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hovereffect:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  overflow: hidden;
  padding: 0.5em 0;
  background-color: transparent;
}

.hovereffect h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}

.hovereffect:hover h2:after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect a, .hovereffect p {
  color: #FFF;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
}

.hovereffect:hover a, .hovereffect:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
footer {
    background-color: #f1f1f1;
    color: #3F3F3F;
    padding-top: 2rem;
}
hr.light{
    border-top: 1px solid #d5d5d5;
    width: 75%;
    margin-top: .8rem;
    margin-bottom: 1rem;
}

hr.light-100 {
    border-top: 1px solid #d5d5d5;
    width: 100%;
    margin-top: .8rem;
    margin-bottom: 1rem;
}
/*---Media Queries --*/
@media (max-width: 992px) {
    .social a{
        font-size: 4em;
        padding: 2rem;
    }
}
@media (max-width: 768px) {
.carousel-caption {
    top: 35%;
}

.carousel-caption h1 {
    font-size: 250%;
}

.carousel-caption h3 {
    font-size: 140%;
    font-weight: 400;
    padding-bottom: .2rem;
}
.carousel-caption {
    font-size: 95%;
    padding: 8px 14px 14px;
}
.display-4{
    font-size: 200%;
}
.social a{
    font-size: 2.5em;
    padding: 1.2rem;
}
}
@media (max-width: 576px) {
.carousel-caption {
    top: 40%;
}

.carousel-caption h1 {
    font-size: 150%;
}

.carousel-caption h3 {
    font-size: 110%;
    font-weight: 400;
    padding-bottom: .2rem;
}
.carousel-caption {
    font-size: 90%;
    padding: 4px 8px;
}
.display-4{
    font-size: 160%;
}
.social a{
    font-size: 2em;
    padding: .7rem;
}
}

/*---Firefox Bug Fix --*/
.carousel-item {
  transition: transform 0.5s ease;
  backface-visibility: visible;
}
.carousel-credits {
  transition: transform 2s ease;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* ============================================================
   HERO SLIDER — background only
   Fills the space around/behind the video with black so there's
   no gap showing the page's default white before the poster wall
   begins. This does NOT change the video's size, crop or height —
   purely a background-color fix.
   ============================================================ */
#slides.carousel,
#slides .carousel-inner,
#slides .carousel-item{
  background:#000;
}

/* ============================================================
   RECENT CREDITS — Poster Wall
   Auto-scrolling, alternating-direction poster columns (some
   drift up, some drift down) for a classy "film reel" feel.
   Pure CSS animation — no dependency on the videos/cards above.
   Swap image paths in index.html for your own posters; this
   file doesn't need to change when you do.

   Loop distance: each column's animation scrolls by --loop-h,
   a pixel value measured and set by the script in index.html
   (the exact height of one copy of that column's posters, plus
   the gap before its clone). Using a measured pixel value instead
   of a guessed percentage is what keeps the loop glitch-free.
   ============================================================ */

.poster-wall{
  position:relative;
  overflow:hidden;
  background:#0b0b0c;
  opacity:0;
  transition:opacity .6s ease;
}
.poster-wall.is-ready{ opacity:1; }

.poster-wall::before,
.poster-wall::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:90px;
  z-index:3;
  pointer-events:none;
}
.poster-wall::before{
  top:0;
  background:linear-gradient(to bottom, #0b0b0c, rgba(11,11,12,0));
}
.poster-wall::after{
  bottom:0;
  background:linear-gradient(to top, #0b0b0c, rgba(11,11,12,0));
}

.poster-wall-inner{
  display:flex;
  gap:14px;
  padding:0 14px;
  height:560px;
}

.poster-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}

.poster-col img{
  display:block;
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  flex-shrink:0;
  transition:transform .35s ease;
}
.poster-wall:hover .poster-col img:hover{
  transform:scale(1.035);
}

/* Animation stays paused until the wall is marked "ready" — i.e.
   until the script has measured --loop-h and duplicated the
   posters. That way it never starts against the wrong distance. */
.poster-col{
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-play-state:paused;
}
.poster-wall.is-ready .poster-col{
  animation-play-state:running;
}
.poster-col-up{ animation-name:posterUp; }
.poster-col-down{ animation-name:posterDown; }

/* Speed control: lower seconds = faster movement, higher = slower.
   Each column has its own duration for a natural, non-robotic feel. */
.poster-col:nth-child(1){ animation-duration:46s; }
.poster-col:nth-child(2){ animation-duration:58s; }
.poster-col:nth-child(3){ animation-duration:50s; }
.poster-col:nth-child(4){ animation-duration:40s; }
.poster-col:nth-child(5){ animation-duration:54s; }

@keyframes posterUp{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(0, calc(-1 * var(--loop-h, 50%)), 0); }
}
@keyframes posterDown{
  from{ transform:translate3d(0, calc(-1 * var(--loop-h, 50%)), 0); }
  to{ transform:translate3d(0,0,0); }
}

.poster-wall:hover .poster-col{
  animation-play-state:paused;
}

@media (prefers-reduced-motion: reduce){
  .poster-col{ animation:none !important; }
}

@media (max-width: 991px){
  .poster-wall-inner{ height:440px; }
  .poster-col:nth-child(5){ display:none; }
}
@media (max-width: 640px){
  .poster-wall-inner{ height:360px; gap:10px; padding:0 10px; }
  .poster-col:nth-child(4){ display:none; }
  .poster-col img{ border-radius:10px; }
}

/* ============================================================
   WELCOME SECTION + CARDS — premium redesign
   Scoped only to the "Casting Comes First" welcome section and
   the card grids beneath it. Nothing else on the page (nav, hero,
   footer, fonts, colours) is touched. No copy, links, image or
   video paths are altered.
   ============================================================ */

:root{
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --radius:24px;
  --ease:cubic-bezier(.22,1,.36,1);
}

.container-fluid.padding:first-of-type{
  max-width:1100px;
  margin:0 auto;
  padding:100px 24px 60px !important;
  text-align:center;
}
h2.display-4{
  font-size:clamp(34px,5vw,52px);
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:24px;
}
h2.display-4 + hr{ display:none; }
.lead{
  font-size:19px;
  color:var(--ink-soft);
  line-height:1.6;
}
.lead i{ color:var(--ink); font-style:italic; }

.container-fluid.padding{
  max-width:1320px;
  margin:0 auto;
  padding:0 24px 30px !important;
}
.row.padding, .row.justify-content-center.align-items-start.padding{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  align-items:start;
  gap:32px;
  padding:0 !important;
  margin:0 0 30px;
}
.row.padding > div, .row.justify-content-center.align-items-start.padding > div{
  width:auto;
  max-width:none;
  flex:none;
  padding:0;
}

.card{
  border:1px solid rgba(0,0,0,0.06);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fafafa;
  box-shadow:0 2px 6px rgba(0,0,0,0.04);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 40px 70px -24px rgba(0,0,0,0.22), 0 8px 18px rgba(0,0,0,0.06);
}
.card video{
  display:block;
  width:100%;
  height:340px;
  object-fit:cover;
  object-position:center 25%;
  transition:transform .6s var(--ease);
}
.card:hover video{
  transform:scale(1.06);
}
.card-body{
  padding:28px 26px 34px;
}
.card-title{
  position:relative;
  font-size:19px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-align:left !important;
  margin-bottom:20px;
  padding-bottom:14px;
}
.card-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:28px;
  height:2px;
  background:var(--ink);
  opacity:.16;
}
.card-body p{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.65;
  margin-bottom:11px;
  text-align:left;
}
.card-body p:last-child{ margin-bottom:0; }
.card-body a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
}

@media (max-width: 991px){
  .row.padding, .row.justify-content-center.align-items-start.padding{
    grid-template-columns:1fr;
  }
}

/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/