@font-face {
    font-family: net;
    src: url(../fonts/NetflixSans_W_Blk.woff2);
}
@font-face {
    font-family: netli;
    src: url(../fonts/NetflixLight.woff2);
}

:root{
    --txtcolor: rgb(255, 255, 255);
    --bgblackLite: rgba(0, 0, 0, 0.366);
    --bgblackDark: rgba(0, 0, 0, 0.803);
    --netred: #C11119;
    scroll-behavior: smooth;
}

*{
    margin: 0;
    padding: 0;;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

body{
    overflow-x: hidden;
    background-color: var(--bgblackDark);
    position: relative;
}

a,button{
    cursor: pointer;
}

.main {
    height: 100vh;
    width: 100%;
    position: relative;
    background-image: linear-gradient(rgb(0, 0, 0), rgb(21, 5, 5), rgb(26, 1, 1));
    overflow: hidden;
    background-attachment: fixed;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
  
    animation-name: vanish;
    animation-duration: 8.1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    font-family: netli;
    animation-timing-function: linear;
    opacity: 1;
    transform-origin: center;
  }
  
@keyframes vanish {
    0% {
      top: 0vh;
    }
    80%{
      opacity: 1;
    }
    95% {
      top: 0vh;
      opacity: 0;
    }
    100% {
      opacity: 0;
      top: -100vh;
    }
  }
  
  .main .hello h2:nth-child(1) {
    position: absolute;
    top: 29%;
    left: 36%;
    font-size: 7.4vh;
    color: transparent;
    /* background-image: linear-gradient(red, rgb(108, 207, 108), rgb(68, 67, 67)); */
    background-clip: text;
  
    animation: hello 5.5s forwards 2s;
    animation-timing-function: linear;
  }
  
  @keyframes hello {
    0% {
      left: 30%;
      opacity: 0;
    }
    70% {
      background-image: linear-gradient(
        rgb(178, 118, 224),
        rgba(237, 238, 238, 0.96),
        rgb(232, 233, 234)
      );
      opacity: 0;
    }
    80% {
      background-image: linear-gradient(
        rgba(144, 152, 166, 0.6),
        rgb(178, 118, 224),
        rgba(232, 233, 234, 0.54)
      );
    }
    90% {
      background-image: linear-gradient(
        rgb(238, 255, 254),
        rgba(111, 118, 130, 0.5),
        rgba(178, 118, 224, 0.695)
      );
    }
    100% {
      background-image: linear-gradient(
        rgb(238, 255, 254),
        rgba(144, 152, 166, 0.6),
        rgb(178, 118, 224)
      );
      left: 39.2%;
      opacity: 1;
    }
  }
  
  .main .hello h2:nth-child(2) {
    display: flex;
    position: absolute;
    left: 37.7%;
    top: 41.5%;
    font-size: 15.6vh;
    letter-spacing: 3px;
    visibility: hidden;
  
    animation: world 8.4s forwards 1 2s;
    animation-timing-function: linear;
  }
  
  @keyframes world {
    0% {
      transform: scale(2);
      visibility: hidden;
    }
    68% {
      visibility: hidden;
    }
    75% {
      top: 5%;
      color: aliceblue;
      visibility: visible;
      transform: rotate(-130deg) scale(3);
    }
    80% {
      /* top: 5%; */
      visibility: visible;
      /* transform: rotate(-50deg) scale(3); */
    }
    /* 85%{
          top: 20%;
      } */
    90% {
      transform: rotate(10deg);
      visibility: visible;
    }
    94% {
      top: 43.5%;
    }
    100% {
      top: 40.5%;
      transform: scale(1);
      transform: rotate(0deg);
      visibility: visible;
      color: antiquewhite;
    }
  }
  
  .main .hello h2 .box {
    height: 20vh;
    width: 35vh;
  }
  
  .main .one {
    width: 31vh;
    height: 31vh;
    border: 0.75vh solid var(--netred);
    position: absolute;
    /* top: calc(50% - 15.5vh);; */
    top: 105%;
    left: calc(50% - 16.5vh);
    border-radius: 50%;
  
    animation-name: rings;
    animation-iteration-count: 1;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-fill-mode: forwards;
  }
  
  @keyframes rings {
    0% {
      top: 105%;
      display: none;
    }
    10% {
      top: 95%;
      transform: rotateX(80deg);
      transform: rotatey(80deg);
    }
    20% {
      top: 85%;
      transform: rotateX(-200deg);
      transform: rotatey(230deg);
    }
    30% {
      top: 75%;
      /* transform: rotatey(-300deg); */
      transform: rotateX(280deg);
    }
    40% {
      transform: rotatey(100deg);
      top: 65%;
      transform: rotateX(70deg);
    }
    59% {
      border: 0.75vh solid var(--netred);
    }
    60% {
      top: calc(50% - 15.5vh);
      /* border: 20px groove rgb(216, 175, 49); */
      border: 20px solid var(--netred);
      transform: scale(1);
    }
  
    70% {
      top: calc(50% - 15.5vh);
      transform: scale(3);
    }
    76% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    86% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    93% {
      top: calc(50% - 15.5vh);
      /* transform: scale(7); */
    }
    100% {
      top: calc(50% - 15.5vh);
      /* transform: scale(0.25); */
      transform: scale(15);
      /* border: 8px solid var(--netred); */
      border: 0.79vh solid var(--netred);
    }
  }
  
  .main .two {
    width: 31vh;
    height: 31vh;
    border: 5px solid var(--netred);
    position: absolute;
    /* top: calc(50% - 15.5vh);; */
    top: 105%;
    left: calc(50% - 16.5vh);
    border-radius: 50%;
  
    animation-name: rings1;
    animation-iteration-count: 1;
    animation-duration: 5.2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
  }
  
  @keyframes rings1 {
    0% {
      top: 105%;
      display: none;
    }
    10% {
      top: 95%;
      transform: rotateX(80deg);
      transform: rotatey(80deg);
    }
    20% {
      top: 85%;
      transform: rotateX(-200deg);
      transform: rotatey(230deg);
    }
    30% {
      top: 75%;
      transform: rotatey(-300deg);
      transform: rotateX(280deg);
    }
    40% {
      transform: rotatey(100deg);
      top: 65%;
      transform: rotateX(70deg);
    }
    59% {
      border: 0.75vh solid var(--netred);
    }
    60% {
      top: calc(50% - 15.5vh);
      /* border: 20px groove rgb(216, 175, 49); */
      border: 20px solid var(--netred);
      transform: scale(1);
    }
  
    70% {
      top: calc(50% - 15.5vh);
      transform: scale(3);
    }
    76% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    86% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    93% {
      top: calc(50% - 15.5vh);
      /* transform: scale(7); */
    }
    100% {
      top: calc(50% - 15.5vh);
      /* transform: scale(0.3); */
      transform: scale(15);

      /* border: 8px solid var(--netred); */
      border: 0.79vh solid var(--netred);
    }
  }
  
  .main .three {
    width: 31vh;
    height: 31vh;
    border: 5px solid var(--netred);
    position: absolute;
    /* top: calc(50% - 15.5vh);; */
    top: 105%;
    left: calc(50% - 16.5vh);
    border-radius: 50%;
  
    animation-name: rings2;
    animation-iteration-count: 1;
    animation-duration: 5.4s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
  }
  
  @keyframes rings2 {
    0% {
      top: 105%;
      display: none;
    }
    10% {
      top: 95%;
      transform: rotateX(80deg);
      transform: rotatey(80deg);
    }
    20% {
      top: 85%;
      transform: rotateX(-200deg);
      transform: rotatey(230deg);
    }
    30% {
      top: 75%;
      transform: rotatey(-300deg);
      transform: rotateX(280deg);
    }
    40% {
      transform: rotatey(100deg);
      top: 65%;
      transform: rotateX(70deg);
    }
    59% {
      border: 0.75vh solid var(--netred);
    }
    60% {
      top: calc(50% - 15.5vh);
      /* border: 20px groove rgb(216, 175, 49); */
      border: 20px solid var(--netred);

      transform: scale(1);
    }
  
    /* 70%{
          top: calc(50% - 15.5vh);;
          transform: scale(3);
      }
      80%{
          top: calc(50% - 15.5vh);;
          transform: scale(15);
      }
      90%{
          top: calc(50% - 15.5vh);;
          transform: scale(7);
      } */
    76% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    86% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    93% {
      top: calc(50% - 15.5vh);
      /* transform: scale(7); */
    }
    100% {
      top: calc(50% - 15.5vh);
      /* transform: scale(0.35); */
      transform: scale(15);
      /* border: 6.6px solid var(--netred); */
      border: 0.79vh solid var(--netred);
    }
  }
  
  .main .four {
    width: 31vh;
    height: 31vh;
    border: 5px solid var(--netred);
    position: absolute;
    /* top: calc(50% - 15.5vh);; */
    top: 105%;
  
    left: calc(50% - 16.5vh);
    border-radius: 50%;
  
    animation-name: rings3;
    animation-iteration-count: 1;
    animation-duration: 5.6s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
  }
  
  @keyframes rings3 {
    0% {
      top: 105%;
      display: none;
    }
    10% {
      top: 95%;
      transform: rotateX(-180deg);
      transform: rotatey(-80deg);
    }
    20% {
      top: 85%;
      transform: rotateX(280deg);
      transform: rotatey(130deg);
    }
    30% {
      top: 75%;
      transform: rotateX(-90deg);
      transform: rotatey(300deg);
    }
    40% {
      transform: rotateX(270deg);
      /* transform: rotatey(-300deg); */
      top: 65%;
    }
    59% {
      border: 0.75vh solid var(--netred);
    }
    60% {
      top: calc(50% - 15.5vh);
      transform: scale(1);
      /* border: 20px groove rgb(216, 175, 49); */
      border: 20px solid var(--netred);

    }
  
    70% {
      top: calc(50% - 15.5vh);
      transform: scale(3);
    }
    76% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    86% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    93% {
      top: calc(50% - 15.5vh);
      /* transform: scale(7); */
    }
    100% {
      top: calc(50% - 15.5vh);
      /* transform: scale(0.4); */
      transform: scale(15);
      border: 6px solid var(--netred);
      border: 0.78vh solid var(--netred);
    }
  }
  
  .main .five {
    width: 31vh;
    height: 31vh;
    border: 5px solid var(--netred);
    position: absolute;
    /* top: calc(50% - 15.5vh);; */
    top: 105%;
    left: calc(50% - 16.5vh);
    border-radius: 50%;
    /* border-bottom: 5px solid black; */
  
    animation-name: rings4;
    animation-iteration-count: 1;
    animation-duration: 5.8s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
  }
  
  @keyframes rings4 {
    0% {
      top: 105%;
      display: none;
    }
    10% {
      top: 95%;
      /* transform: rotatex(300deg); 
          */
      transform: rotatex(80deg);
      transform: rotatey(20deg);
    }
    15% {
      transform: rotatex(80deg);
    }
    20% {
      top: 85%;
      /* transform: rotatex(160deg); */
  
      transform: rotatex(80deg);
      transform: rotatey(40deg);
    }
    30% {
      top: 75%;
      transform: rotatex(80deg);
  
      /* transform: rotatex(100deg); */
      transform: rotatey(60deg);
    }
    40% {
      /* transform: rotatex(80deg); */
      transform: rotatex(80deg);
      /* transform: rotatey(80deg); */
      top: 65%;
    }
    59% {
      border: 0.75vh solid var(--netred);
    }
    60% {
      /* transform: rotate(0deg); */
      top: calc(50% - 15.5vh);
      transform: scale(1);
      /* border: 20px groove rgb(216, 175, 49); */
      border: 20px solid var(--netred);

    }
  
    70% {
      top: calc(50% - 15.5vh);
      transform: scale(4);
    }
    76% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    86% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    93% {
      top: calc(50% - 15.5vh);
      /* transform: scale(7); */
    }
    100% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
      /* transform: scale(0.45); */
      /* border: 5.8px solid var(--netred); */
      border: 0.77vh solid var(--netred);
    }
  }
  
  .main .six {
    width: 31vh;
    height: 31vh;
    border: 5px solid var(--netred);
    position: absolute;
    /* top: calc(50% - 15.5vh);; */
    top: 105%;
    left: calc(50% - 16.5vh);
    border-radius: 50%;
    /* border-bottom: 5px solid black; */
  
    animation-name: rings5;
    animation-iteration-count: 1;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
  }
  
  @keyframes rings5 {
    0% {
      top: 105%;
      display: none;
    }
    10% {
      top: 95%;
      /* transform: rotatex(300deg); 
          */
      transform: rotatex(80deg);
      transform: rotatey(20deg);
    }
    15% {
      transform: rotatex(80deg);
    }
    20% {
      top: 85%;
      /* transform: rotatex(160deg); */
  
      transform: rotatex(20deg);
      transform: rotatey(40deg);
    }
    30% {
      top: 75%;
      transform: rotatex(85deg);
  
      /* transform: rotatex(100deg); */
      transform: rotatey(60deg);
    }
    40% {
      /* transform: rotatex(80deg); */
      transform: rotatex(80deg);
      transform: rotatey(5deg);
      top: 65%;
    }
    59% {
      border: 0.75vh solid var(--netred);
    }
    60% {
      /* transform: rotate(0deg); */
      top: calc(50% - 15.5vh);
      transform: scale(1);
      /* border: 20px groove rgb(216, 175, 49); */
      border: 20px solid var(--netred);
    }
  
    70% {
      top: calc(50% - 15.5vh);
      transform: scale(4);
    }
    76% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    86% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    93% {
      top: calc(50% - 15.5vh);
      /* transform: scale(7); */
    }
    100% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
      /* transform: scale(0.5); */
      /* border: 5.4px solid var(--netred); */
      border: 0.76vh solid var(--netred);
    }
  }
  
  /* 7 */
  .main .seven {
    width: 31vh;
    height: 31vh;
    border: 5px solid var(--netred);
    position: absolute;
    /* top: calc(50% - 15.5vh);; */
    top: 105%;
    left: calc(50% - 16.5vh);
    border-radius: 50%;
    /* border-bottom: 5px solid black; */
  
    animation-name: rings6;
    animation-iteration-count: 1;
    animation-duration: 6.2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
  }
  
  @keyframes rings6 {
    0% {
      top: 105%;
      display: none;
    }
    10% {
      top: 95%;
      /* transform: rotatex(300deg); 
          */
      transform: rotatex(80deg);
      transform: rotatey(20deg);
    }
    15% {
      transform: rotatex(80deg);
    }
    20% {
      top: 85%;
      /* transform: rotatex(160deg); */
  
      transform: rotatex(80deg);
      transform: rotatey(40deg);
    }
    30% {
      top: 75%;
      transform: rotatex(80deg);
  
      /* transform: rotatex(100deg); */
      transform: rotatey(60deg);
    }
    40% {
      /* transform: rotatex(80deg); */
      transform: rotatex(80deg);
      /* transform: rotatey(80deg); */
      top: 65%;
    }
    59% {
      border: 0.75vh solid var(--netred);
    }
    60% {
      /* transform: rotate(0deg); */
      top: calc(50% - 15.5vh);
      transform: scale(1);
      /* border: 20px groove rgb(216, 175, 49); */
      border: 20px solid var(--netred);
    }
  
    70% {
      top: calc(50% - 15.5vh);
      transform: scale(4);
    }
    76% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    86% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    93% {
      top: calc(50% - 15.5vh);
      /* transform: scale(7); */
    }
    100% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
      /* transform: scale(0.55); */
      border: 0.75vh solid var(--netred);
    }
  }
  
  /* 8 */
  .main .eight {
    width: 31vh;
    height: 31vh;
    border: 5px solid var(--netred);
    position: absolute;
    /* top: calc(50% - 15.5vh);; */
    top: 105%;
    left: calc(50% - 16.5vh);
    border-radius: 50%;
    /* border-bottom: 5px solid black; */
  
    animation-name: rings7;
    animation-iteration-count: 1;
    animation-duration: 6.4s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
  }
  
  @keyframes rings7 {
    0% {
      top: 105%;
      display: none;
    }
    10% {
      top: 95%;
      /* transform: rotatex(300deg); 
          */
      transform: rotatex(80deg);
      transform: rotatey(20deg);
    }
    15% {
      transform: rotatex(80deg);
    }
    20% {
      top: 85%;
      /* transform: rotatex(160deg); */
  
      transform: rotatex(80deg);
      transform: rotatey(40deg);
    }
    30% {
      top: 75%;
      transform: rotatex(80deg);
  
      /* transform: rotatex(100deg); */
      transform: rotatey(60deg);
    }
    40% {
      /* transform: rotatex(80deg); */
      transform: rotatex(80deg);
      /* transform: rotatey(80deg); */
      top: 65%;
    }
    59% {
      border: 0.75vh solid var(--netred);
    }
    60% {
      /* transform: rotate(0deg); */
      top: calc(50% - 15.5vh);
      transform: scale(1);
      /* border: 20px groove rgb(216, 175, 49); */
      border: 20px solid var(--netred);
    }
  
    70% {
      top: calc(50% - 15.5vh);
      transform: scale(4);
    }
    76% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    86% {
      top: calc(50% - 15.5vh);
      transform: scale(15);
    }
    93% {
      top: calc(50% - 15.5vh);
      /* transform: scale(7); */
    }
    100% {
      top: calc(50% - 15.5vh);
      /* transform: scale(0.6); */
      transform: scale(15);

      /* border: 0.75vh solid var(--netred); */
      border: 0.75vh solid ridge var(--netred);
    }
  }


header{
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 99999;
}

header nav{
    max-width: 1920px;
    padding: 0 150px;
    display: flex;
    justify-content: space-between;
    height: 120px;
    align-items: center;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    background-color: rgba(11, 11, 11, 0.019);
    background-color: rgba(0, 0, 0, 0.055);
    margin: 0 auto;
}

header nav .nav-left{
    width: 330px;
    height: 100%;
    display: flex;
    align-items: center;
    /* border: 2px solid green; */
}

header nav .nav-left a{
    color: var(--netred);
    font-size: 36px;
    letter-spacing: 2px;
    font-family: net, sans-serif;
    text-transform: uppercase;
    text-shadow: 0px 0px 2px rgb(255, 255, 255);
    animation: pulse 1s linear  infinite alternate;
    padding: 4px 10px 4px 1px;
    position: relative;
}

header nav .nav-left a img{
    position: absolute;
    right: -60px;
    top: -10px;
}

@keyframes pulse {
   
    from{
        text-shadow: 0px 0px 3px rgb(0, 0, 0);
    }
    to{
        text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.781);

    }
}

header nav div{
    width: 200px;
}
header nav .nav-right{
    display: flex;
    justify-content: space-between;
    font-family: netli, sans-serif;
}

header nav .nav-right a{
    background-color: var(--netred);
    color: var(--txtcolor);
    padding: 8px 15px;
    border-radius: 5px;
}

header nav .nav-right select{
    color: var(--txtcolor);
    background-color: rgba(13, 13, 13, 0.596);
    border: 1px ridge var(--txtcolor);
    border-radius: 6px;
    /* padding: 6px 0; */
    text-align: center;
    width: 100px;
    font-size: 16px;
    height: 40px;
    cursor: pointer;
}

header nav .nav-right select option{
    text-align: center;
    color: rgba(0, 0, 0, 0.923);
    background-color: rgba(245, 245, 245, 0.933);
}


.login{
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: #ffffff3e;
    z-index: 99999;
    display: flex;
    place-items: center;
   place-content: center;
   transform: scale(0);
   transition: transform .8s;
}

.login .login-form {
    /* border: 2px solid red; */
    height: 410px;
    width: 400px;
    /* display: flex;
    justify-content: center; */
    /* align-items: center; */
    border-radius: 9px;
    box-shadow: inset 1px 1px 6px white;
    background-color: var(--bgblackDark);
    position: relative;
    backdrop-filter: blur(2px);
    transition: all 1s;
}

.login .login-form .fa-xmark{
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    color: var(--txtcolor);
    cursor: pointer;
    padding: 4px;
}

.eye-box {
    width: 30vh;
    height: 30vh;
    display: flex;
    position: absolute;
    left: calc(50% - 15vh);
    /* top: calc(40% - 15vh); */
    justify-content: center;
    align-items: center;
    transition: all 1s;
    /* border: 2px solid green; */
  }
  
  .eye-box .eye1 {
      position: absolute;
      height: 11vh;
      width: 11.2vh;
      left: 17.5%;
      border: 2px solid black;
      background-color: rgb(255, 250, 250);
      border-radius: 50%;
    transform: perspective(500px) rotate3d(-8, 8, 8, -25deg);
    transform: scale(1);
    transition: transform 1s;
    overflow: hidden;
}
.eye-box .eye-lid {
    /* content: ""; */
    background-color: #c91f27;
    /* background-color: var(--netred); */
    height: 110%;
    width: 110%;
    z-index: 2;
    position: absolute;
    top: -120%;
    transition: all .6s;
    border-bottom: 6px groove black;
}

.eye-box .eye1 .eye-ball {
    height: 5.8vh;
    width: 6.3vh;
    border-radius: 50%;
    background-color: rgb(27, 25, 25);
    position: fixed;
    top: calc(50% - 2.9vh);
    left: calc(50% - 3.55vh);
    transition: scale .3s;
    transform-origin: center;
  }
  
  .eye-box .eye-ball .eye-shine {
    height: 3vh;
    width: 2.4vh;
    border-radius: 50%;
    position: absolute;
    background-color: rgba(255, 250, 250, 0.871);
    top: 70%;
    left: 55%;
    
  }
  
  .eye-box .eye1 .heart {
    position: absolute;
    text-align: center;
    width: 100%;
    transform: scale(0);
    top: 20%;
  }
  .eye-box .eye2 .heart2 {
    position: absolute;
    text-align: center;
    transform: scale(0);
    top: 23%;
  }
  
  .eye-box .eye2 {
    position: absolute;
    left: 45%;
    height: 12vh;
    width: 11.8vh;
    background-color: rgb(255, 250, 250);
    border: 2px solid black;
    border-radius: 50%;
    transform: perspective(500px) rotate3d(-8, 8, 8, -25deg);
    overflow: hidden;
  
  }
  
  .eye-box .eye2 .eye-ball2 {
    height: 6.8vh;
    width: 7.3vh;
    border-radius: 50%;
    background-color: rgb(27, 25, 25);
    position: fixed;
    top: calc(50% - 3.4vh);
    left: calc(50% - 7.3vh / 2);
    transition: scale .3s;
    transform-origin: center;
  }
  
  .eye-box .eye2 .eye-ball2 .eye-shine2 {
    height: 3.6vh;
    width: 3.1vh;
    border-radius: 50%;
    position: absolute;
    /* background-color: rgb(255, 250, 250); */
    background-color: rgba(255, 250, 250, 0.871);
    top: 65%;
    left: 45%;
  }
  
.login .login-form form{
    height: 200px;
    width: 100%;
    /* border: 2px solid black ; */
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 0 20px 0;
    transition: all 1s;
}

.login .login-form form input{
    width: 80%;
    height: 40px;
    border-radius: 6px;
    padding: 5px 15px;
    border: none;
    border-bottom: 2px  solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--txtcolor);
    font-family: netli;
    /* background-color: transparent; */

}

.login .login-form form button{
    width: 50%;
    height: 34px;
    border-radius: 6px;
    border: none;
    background-color:var(--netred);
    color: var(--txtcolor);
}

.login .login-form form button a{
    padding: 15px 40px;
    color: white;
}

/* header end banner start */

.banner-sec{
    /* background-image: url(../img/back.jpg); */
    background-image: url(../img/back-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    overflow-x: hidden;
    background-attachment: fixed;
    position: relative;
}

.banner-sec::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: black;
    z-index: 9;
    animation: banner 1.3s forwards linear 6.6s 1;
}

@keyframes banner {
    from{
        background-color: black;
        z-index: 9;
    }
    to{
        background-color: rgba(0, 0, 0, 0.607);
    z-index: 1;

    }
}

.banner-sec .banner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1920px;
  padding: 0 100px;
  gap: 25px;
  height: 100vh;
  color: var(--txtcolor);
  margin: 0 auto;
}

.banner h1{
  z-index: 9;
  font-size: 48px;
  font-family: net, sans-serif;
  color: var(--txtcolor);
}

.banner p{
  z-index: 9;
  font-family: netli, sans-serif;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 1px;
}

.banner p:nth-child(3){
  font-size: 20px;
}

.banner .sign-up{
  z-index: 9;
  width: 600px;
  display: flex;
  gap: 15px;
  justify-content: center;
}

.banner .sign-up input{
  width: 69%;
  padding: 12px 20px;
  border-radius: 3px;
  background-color: var(--bgblackLite);
  border: none;
  outline: 1px solid rgba(229, 228, 228, 0.6);
  color: var(--txtcolor);
  font-size: 18px;
}

.banner .sign-up input::placeholder{
  font-size: 18px;
}

.banner .sign-up button a{
  color: var(--txtcolor);
  padding: 8px 18px;
}

.banner .sign-up button{
  width: 28%;
  font-family: netli, sans-serif;
  font-size: 24px;
  border-radius: 3px;
  border: none;
  padding: 12px 0;
  background-color: var(--netred);
  cursor: pointer;
}

/* sign up end and tv sec start */

.tv-sec{
  margin-top: 10px;
  width: 100vw;
  background-attachment: fixed;
  background-color: rgba(0, 0, 0, 0.893);
  background-repeat: no-repeat;
}

.tv-sec:nth-child(3) > .tv{
  /* background-color: red; */
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.tv-sec:nth-child(3) > .tv .tv-content{
  margin-left: 50px;
}



.tv-sec .tv{
  max-width: 1920px;
  margin: 0 auto;
  padding: 40px 150px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  color: var(--txtcolor);
}

.tv-sec .tv .tv-content {
  width: 49%;
  text-align: left;

}

.tv-sec .tv .tv-content h2{
  font-size: 32px;
  font-family: net, sans-serif;
  letter-spacing: 1px;
}

.tv-sec .tv .tv-content h4{
  margin-top: 20px;
  font-family: netli, sans-serif;
  font-size: 20px;
  width: 550px;
  opacity: .7;
}

.tv-sec .tv .tv-img{
  width: 49%;
  text-align: center;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.119), rgba(0, 0, 0, 0.585));
  border-radius: 5px;
  /* box-shadow: inset 1px 3px 0px 1px rgba(255, 255, 255, 0.595); */
}

.tv-sec .tv .tv-img img{
  width: 100%;
  border-radius: 5px;
  backdrop-filter: blur(20px);
  /* aspect-ratio: 3/2; */
  /* box-shadow: inset 5px 5px 50px rgba(255, 255, 255, 0.445); */
  /* box-shadow: 2px 0px 35px 1px rgba(255, 255, 255, 0.445); */
}


.tv-sec .tv .tv-img .movie{
  padding: 40px;
  width: 80%;
}

/* faq section start */

.faq{
  margin-top: 10px;
  width: 100vw;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--bgblackDark);
  color: var(--txtcolor);
  padding: 20px 0 50px 0;
}

.faq .faq-cont{
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 150px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.faq .faq-cont h2{
  padding: 40px 0;
  font-size: 36px;
  font-family: net, sans-serif;
  letter-spacing: 1px;
}

.faq .faq-cont .faq-ques{
  font-family: netli, sans-serif;
  border: 1px ridge var(--txtcolor);
  text-align: left;
  width: 100%;
  padding: 8px 10px;
  position: relative;
  line-height: 30px;
  cursor: pointer;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 16px;
}

.faq .faq-cont .faq-ques p{
  margin-top: 10px;
  padding-right: 40px;
  text-align: justify;
}

.faq .faq-cont .faq-ques .hide{
  display: none;
}

.faq .faq-cont .faq-ques .show{
  display: block;
}

.faq .faq-cont .faq-ques .fa-angle-down{
position: absolute;
right: 15px;
top: 14px;
transition: all .5s;
}

/* footer start */

footer{
  width: 100vw;
  background-color: black;
  padding: 20px 0;
  font-family: netli, sans-serif;
}

footer a{
  color: var(--txtcolor);
  /* text-decoration: underline rgba(255, 255, 255, 0.234); */
  padding: 3px 4px;
  font-size: 15.5px;
  opacity: .6;
  transition: .2s;
  border-bottom: 1px solid transparent;
}

footer a:hover{
  /* text-decoration: underline rgba(255, 255, 255, 0.84); */
  opacity: 1;
  border-bottom: 1px solid var(--netred);
  font-size: 16px;

}

footer nav{
  max-width: 1920px;
  margin: 0 auto;
  /* height: 400px; */
  display: flex;
  justify-content: space-evenly;
  padding: 20px 150px;
  flex-wrap: wrap;
}

footer h4{
  color: var(--txtcolor);
  text-align: left;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 160px;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 400;
}

footer h4 a{
  opacity:.9; 
}

footer nav ul{
  text-align: left;
  width: 24%;
}

footer nav ul li{
  padding: 10px 0;
}