/* -------------- BOX 2 -------------- */
#scroll_movies{
    position: relative;
    background-image: url("/images/img_banners/banner_secondary1.jpg");
    background-size: cover;
    background-position: center;
  }
  #scroll_movies::after{
    content: "";
    position: absolute;
    background-image: url("/images/img_banners/banner_secondary2.jpg");
    background-size: cover;
    background-position: center;
  
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .movie_card{
    cursor: pointer;
  }
  #scroll_movies::after{
    content: "";
    position: absolute;
    background: #100e17;
    opacity: .95;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  #scroll_movies_box{
    z-index: 1;
    gap: .8em;
  }
  #scroll_movies_box>div>.movie_card>.movie_poster{
    width: 18em;
    border-radius: .5em;
  }

  #scroll_movie__options>div{
    gap: 1em;
  }
  #scroll_movie__options-item1{
    gap: 1em;
  }
  #scroll_movie__options-item1>li{
    border-radius: 3.125em;
    background: #20212b;
    font-size: .75em;
    font-weight: 600;
    color: #e3dfdf;
    border: .125em solid #2d303d;
    padding: 1em 2em;
    cursor: pointer;
    transition: .45s;
  }
  #scroll_movie__options-item1>li:hover{
    border-color: var(--yellow);
    background-color: var(--yellow);
    color: #2d303d;
  }
  #scroll_movie__options-item2>li>.oc__right{
    border-radius: 0em 3em 3em 0em;
    background: #20212b;
    font-size: .75em;
    font-weight: 600;
    color: #e3dfdf;
    border: .125em solid #2d303d;
    padding: 1.3em 1.5em;
  }
  #scroll_movie__options-item2>li>.oc__left{
    border-radius: 3em 0em 0em 3em;
    background: #20212b;
    font-size: .75em;
    font-weight: 600;
    color: #e3dfdf;
    border: .125em solid #2d303d;
    padding: 1.3em 1.5em;
  }
  #scroll_movie__options-item2>li>i{
    transition: .45s;
    cursor: pointer;
  }
  #scroll_movie__options-item2>li>i:hover{
    border-color: var(--yellow);
    background-color: var(--yellow);
    color: #2d303d;
  }

  #scroll_movies_box>h5{
    color: var(--yellow);
    line-height: 1;
    font-size: .9em;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    margin-bottom: .75em;
    letter-spacing: .0625em;
  }

  #scroll_movie__options>h2{
    font-size: 2.5em;
    font-weight: 700;
  }

 .movie_card__rating{
    gap: 1em;
  }

  .movie_card__rating>span{
    gap: .5em;
  }

  @media (0px <= width <= 630px) {
    #scroll_movie__options, #scroll_movies_box, #scroll_movie__options>div{
      text-align: center;
      justify-content: center;
      gap: 1.5em;
    }
  }