*
{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
:root
{
    --main-color : #212529;
    --second-color : #f9f6f6;
}
body
{
    background-color: var(--main-color);
}

                        /* NAVBAR */
nav
{
    background-color: black;
    display: flex;
    position: fixed;
    top: 0;
    left: -317.96875px;
    height: 100vh;
    z-index: 999;
}
.nav-info-1 p,i
{
    color: var(--second-color);
    font-size: 20px;
}
.nav-info-1
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;

}
.nav-info-2
{
    background-color: var(--second-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;

}
.nav-info-1 .text-caption
{
    max-width: 270px;
}
.nav-info-1 .text-caption p
{
    color: #999999;
}
ul
{
    list-style-type: none;
    padding-left: 0;
}
ul li
{
    padding-block: 10px;
    position :relative;
    top: 100%;
    opacity: 0;
}
.nav-info-1 ul li p
{
    color: var(--second-color);
    cursor: pointer;
    font-size: 22px;
}
.nav-info-1 li p:hover
{
    color: #ff655c;
}
.nav-info-2 i
{
    color: var(--main-color);
}
.nav-info-1 i:hover
{
    color: #ff655c;
}

                        /* Card Movie */
.cards 
{
    position: relative;
    padding: 0;
    overflow: hidden;
}
.cards .info-card
{
    padding: 10px;
    overflow: hidden;
}
.cards .caption-card
{
    display: flex;
    align-items: center;
    background-color:  rgb(255 255 255 / 70%);
    position: absolute;
    left: 0;
    top: 100%;
    height: 100%;
    transition: top 1s;
    overflow: hidden;
}
.cards:hover .caption-card
{
    top: 0;
    transition-duration: 1s;
}
                            /* Contact US  */
.contact .inputs input
{
    border: none;
    border-bottom: 3px solid rgba(255, 255, 255, 0.774) ;
    color: #fff;
    background-color: transparent;
    padding: 10px;
    font-size: 20px;
}
input:focus-visible 
{
    outline: solid 4px #80bdff67;
}
.contact input::placeholder
{
    text-align: center;
}
                    /* Search */
.search .inputs input
{
    border: none;
    border-bottom: 3px solid rgba(255, 255, 255, 0.774) ;
    color: #fff;
    background-color: transparent;
    padding: 10px;
    font-size: 20px;
}
.search input::placeholder
{
    text-align: center;
}
.form-control
{
    border-radius: 0;
}
                /* Genral */
section
{
    margin: 80px 0px ;
}
i
{
    cursor: pointer;
}
                    /* Loading document */
.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: var(--second-color);
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}
.screen
{
    background-color: var(--main-color);
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}