/* Imported Google Font: 'Figtree' */
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

* {
  box-sizing: border-box;
}

body {
  max-width: 105%;
  max-height: 100%;
  color: #fff;
  font-family: "Figtree", sans-serif;
  background-color: #000;
  overflow-x: hidden;
}

/* Styling the parallax background photo */

.content {
  background-color: #000;
  margin: 0 -10px -10px -10px;
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  max-width: 105%;
}

/* Responsive Navigation Bar */
.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

.topnav a:not(.symbol-div, .icon) {
  padding: 15px 40px;
  font-size: 24px;
}

.topnav a:not(.active) {
  margin-left: -4px;
}

.topnav img {
  max-width: 50px;
}

/* Centering some links in the nav bar */
.topnav-centered {
  flex-grow: 1;
  text-align: center;
}

.topnav-centered a {
  color: #fff;
  text-decoration: none;
  padding: 15px 40px;
}

.topnav-right a:not(.icon) {
  text-decoration: none;
  padding: 10px 30px;
}

.topnav .icon {
  color: #fff;
  display: none;
  padding: 10px 20px;
  font-size: 24px;
}

.topnav a:not(:first-child, .icon):hover,
.topnav a.active {
  background-image: linear-gradient(180deg,
      rgba(229, 9, 20, 0.53) 0%,
      rgba(229, 9, 20, 0) 100%);
}

#netflix-symbol {
  margin-left: 24px;
  max-width: 210px;
  padding: 0;
}


/* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 820px) {
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.signin-btn {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 820px) {
  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive a.icon {
    font-size: 24px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    margin: 0;
    text-align: center;
    font-size: 17px;
  }

  .topnav.responsive div.topnav-centered {
    max-width: fit-content;
    margin-left: 24px;
    margin-right: -40px;
  }

  .topnav.responsive div.topnav-centered a {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .topnav.responsive img#netflix-symbol {
    max-width: 100px;
    position: absolute;
    left: 0;
    top: 0;
  }

  #netflix-symbol {
    max-width: 105px;
  }

  /* Makes sign in button and active nav link non visible on smaller screens */
  .topnav a.signin-btn,
  .topnav a.active:not(.topnav.responsive a.active) {
    display: none;
  }
}

/* Styling the scroll to top button */
#to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: 2px solid white;
  background-color: transparent;
  color: white;
  cursor: pointer;
  padding: 12px 14px 15px 14px;
  border-radius: 40px;
  font-size: 24px;
}

#to-top:hover {
  background-color: #555;
}

/* Styling the hero section */
.hero {
  margin-bottom: 80px;
  margin-left: 17px;
}

#glory-logo {
  margin-left: -31px;
  max-width: 617px;
  display: block;
  filter: invert(1);
}

header {
  text-align: justify;
  margin-left: 30px;
}

.banner {
  display: block;
  max-width: fit-content;
}

.banner h1 {
  font-size: 40px;
  display: block;
  font-weight: 600;
  margin: 0;
}

.banner p {
  width: 550px;
  font-size: 24px;
  font-weight: 400;
  word-spacing: -1.6px;
  margin-bottom: 17px;
}

/* Call to action button: 'Watch Now'*/

.cta-button {
  background: #f8961e;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.cta-button:hover {
  background: #f8961e;
  color: #fff;
  font-size: 1rem;
  padding: 0.7rem 1.2rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

/* Styling for YouTube trailer */
.trailer {
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  display: block;
  background-color: transparent;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  
}


/* Using a grid to overlap the trailer, image below and carousel for smooth gradient */
.image-stack {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
}

.image-stack__item--top {
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 1;
}

.image-stack__item--bottom {
  grid-column: 1 / -1;
  grid-row: 1;
  padding-top: 57%;
  margin-bottom: -1%;
}

.image-stack__item--bottom2 {
  grid-column: 1 / -1;
  grid-row: 2;
}

#bg-image-2 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Media queries for main body content */

@media screen and (max-width: 820px) {
  html {
    overscroll-behavior: none;
  }

  /* Styling the parallax background photo */

  .content::before {
    /*     height: 100%; */
    /*     position: relative; */
    background: url(https://photos.hancinema.net/photos/fullsizephoto1603240.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow-x: hidden;
  }

  .hero {
    margin-bottom: 40px;
    margin-left: 7px;
  }

  #glory-logo {
    margin-left: -25px;
    max-width: 308px;
  }

  header {
    margin-left: 24px;
    margin-right: 24px;
  }

  .banner {
    max-width: 100%;
  }

  .banner h1 {
    max-width: 100%;
    font-size: 26px;
  }

  .banner p {
    width: 300px;
    font-size: 17px;
    margin-right: 24px;
    word-spacing: -1.9px;
  }

  .cta-button {
    font-size: 17px;
    padding: 10px 15px;
  }

  /* Styling for YouTube trailer */
  .trailer {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    display: block;
    background-color: transparent;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }

  .container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 62.5%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }

  .trailer-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 90%;
    height: 100%;
  }

  .trailer h2 {
    font-size: 2rem;
  }

  .trailer-title {
    font-size: 2rem;
  }
}

@media screen and (max-width: 896px) {

  /* Using a grid to overlap the trailer, image below and carousel for smooth gradient */
  .image-stack {
    display: grid;
    position: relative;
    grid-template-columns: repeat(12, 1fr);
  }

  .image-stack__item--top {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 1;
  }

  .image-stack__item--bottom {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-top: 100%;
    margin-bottom: -2%;
  }

  .image-stack__item--bottom2 {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #bg-image-2 {
    display: block;
    width: 125%;
    margin-left: -30px;
    /* height: 100%; */
    object-fit: cover;
    overflow: hidden;
  }
}

@media screen and (max-width: 1280px) {
  .image-stack__item--bottom {
    margin-top: 8%;
  }
}

@media screen and (max-width: 1024px) {
  .image-stack__item--bottom {
    margin-top: 25%;
  }
}

@media screen and (max-width: 912px) {
  .image-stack__item--bottom {
    margin-top: 35%;
  }
}

@media screen and (max-width: 820px) {
  .image-stack__item--bottom {
    margin-top: 50%;
  }
}

@media screen and (max-width: 768px) {
  .image-stack__item--bottom {
    margin-top: 52%;
  }
}

@media screen and (max-width: 390px) {
  .image-stack__item--bottom {
    margin-top: 109%;
  }
}

@media screen and (max-width: 430px) {
  .image-stack__item--bottom {
    margin-top: 95%;
  }
}

@media screen and (max-width: 414px) {
  .image-stack__item--bottom {
    margin-top: 100%;
  }
}

@media screen and (max-width: 390px) {
  .image-stack__item--bottom {
    margin-top: 106%;
  }
}

@media screen and (max-width: 375px) {
  .image-stack__item--bottom {
    margin-top: 111%;
  }
}

@media screen and (max-width: 360px) {
  .image-stack__item--bottom {
    margin-top: 114%;
  }
}

@media screen and (max-width: 280px) {
  .image-stack__item--bottom {
    margin-top: 150%;
  }
}

/* Carousel Styling */
main * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body main {
  height: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
}

main {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.item {
  width: 200px;
  height: 300px;
  list-style-type: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0 20px 30px rgba(255, 255, 255, 0.3) inset;
  transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;

  &:nth-child(1),
  &:nth-child(2) {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
  }

  &:nth-child(3) {
    left: 50%;
  }

  &:nth-child(4) {
    left: calc(50% + 220px);
  }

  &:nth-child(5) {
    left: calc(50% + 440px);
  }

  &:nth-child(6) {
    left: calc(50% + 660px);
    opacity: 0;
  }
}

.carousel-content {
  width: min(30vw, 400px);
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translateY(-50%);
  font: 400 0.85rem "Figtree", sans-serif;
  color: white;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: none;

  & .title {
    font-family: "Figtree", sans-serif;
    text-transform: uppercase;
  }

  & .description {
    line-height: 1.7;
    margin: 1rem 0 1.5rem;
    font-size: 1.2rem;
    font-weight: 500;
  }

  & button {
    width: fit-content;
    background-color: rgba(0, 0, 0, 0.1);
    color: white;
    border: 2px solid white;
    border-radius: 0.25rem;
    padding: 0.75rem;
    cursor: pointer;
  }
}

.item:nth-of-type(2) .carousel-content {
  display: block;
  animation: show 0.75s ease-in-out 0.3s forwards;
}

@keyframes show {
  0% {
    filter: blur(5px);
    transform: translateY(calc(-50% + 75px));
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.nav {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  user-select: none;

  & .btn {
    background-color: rgba(255, 255, 255, 0.5);
    color: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(0, 0, 0, 0.6);
    margin: 0 0.25rem;
    padding: 0.75rem;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
}

@media (width > 650px) and (width < 820px) {
  .carousel-content {
    & .title {
      font-size: 1rem;
    }

    & .description {
      font-size: 0.9rem;
    }

    & button {
      font-size: 0.7rem;
    }
  }

  .item {
    width: 160px;
    height: 270px;

    &:nth-child(3) {
      left: 50%;
    }

    &:nth-child(4) {
      left: calc(50% + 170px);
    }

    &:nth-child(5) {
      left: calc(50% + 340px);
    }

    &:nth-child(6) {
      left: calc(50% + 510px);
      opacity: 0;
    }
  }
}

@media (width < 650px) {
  .carousel-content {
    & .title {
      font-size: 0.9rem;
    }

    & .description {
      font-size: 0.7rem;
    }

    & button {
      font-size: 0.7rem;
    }
  }

  .item {
    width: 130px;
    height: 220px;

    &:nth-child(3) {
      left: 50%;
    }

    &:nth-child(4) {
      left: calc(50% + 140px);
    }

    &:nth-child(5) {
      left: calc(50% + 280px);
    }

    &:nth-child(6) {
      left: calc(50% + 420px);
      opacity: 0;
    }
  }
}


.hero {
  padding: 3rem;
}

/* footer {
  background: #1A1E25;
  color: #868c96;
} */

footer p {
  padding: 2rem 0;
  text-align: center;
}

footer p img {
  width: 3rem !important;
}

.text-left{
text-align: left;
}
/* VIDEO CSS  */

/* Custom controls container */
.custom-controls {
  position: absolute;
  bottom: 2rem;
  left: 50%; /* Align to the center */
  transform: translateX(-50%); /* Move back to center */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}


.play-pause-btn {
  /* background-color: rgba(0, 0, 0, 0.7); */
  background-color: #f8961e;
  border: 1px solid white;
  color: white;
  font-size: 1rem;
  padding: 1rem;
  cursor: pointer;
  border-radius: 1rem;
}

/* Overlay for the download app message */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  z-index: 2;
  display: none;
  /* Initially hidden */
}

.video-div {
  position: relative;
  width: 100%;
  border: 0.25rem solid #f8961e;
  max-width: 800px;
  height: auto;
  display: block;
  margin: auto;
}


.trailer video {
  width: 100%;
  max-width: 800px;
  height: fit-content;
  display: block;
  margin: auto;
}

/* Hide default video controls */
video::-webkit-media-controls,
video::-moz-media-controls,
video::-ms-media-controls {
  display: none !important;
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}

/* Ensure no controls are shown on any device */
video {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}