/* ......................lexend font family ............................ */

@font-face {
  font-family: 'Lexend-Bold';
  src: url('../fonts/Lexend-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Lexend-Regular';
  src: url('../fonts/Lexend-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Lexend-SemiBold';
  src: url('../fonts/Lexend-SemiBold.ttf') format('truetype');
}

/* ......................lexend font family end ............................ */





body{
  margin: 0;
  padding: 0;
  background-color: #000;
}

p{
  font-family: "Lexend-Regular";
}

.slick-track {
  scroll-behavior: smooth;
}



.logo img{
  height: unset!important;
  width: 190px!important;
  margin-bottom: 15px;
}

.sidenav {
    height: 100%;
    width: 60px;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    background-color: #000;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 10px;
    box-shadow: 0px 0px 5px 0px #313131;
  }

  .sidenav a {
    padding: 8px 8px 8px 14px;
    text-decoration: none;
    font-size: 20px;
    color: #757575;
    display: block;

    transition: 0.3s;
    display: flex;
    align-items: center;
    width: 215px;
   font-family: "Lexend-Regular";
    margin-bottom: 20px;
    margin-left: 5px;
    position: relative;
    border-radius: 7px;
  }

  .sidenav .active:before {
    /* content: ""; */
    position: absolute;
    left: 3px;
    height: 100%;
    width: 40px;
    background-color: #3f3b48;
    border-radius: 7px;
    top: 0;
}

  .sidenav a i {
    margin-right: 25px;
    z-index: 9;
  }

  .sidenav a:hover {
    color: #f1f1f1;
  }

  .sidenav a:hover img{
    filter: brightness(9);
    border-bottom: 2px solid #ff0000;
    padding-bottom: 5px;
  }

  .sidenav .active img{
    filter: brightness(9)!important;
    border-bottom: 2px solid #ff0000;
    padding-bottom: 2px;
}

.sidenav .active {
  color: #fff;
  
}

.sideIcn:hover{
  background-color: unset!important;
}


.sideIcn i {
  font-size: 45px;
  color: #f22a2a!important;
  transition:0.5s;
  margin-left: 8px;
}

.sideIcn{
  padding-left: 3px!important;
}

.sidenav:hover .sideIcn i{
  transform: rotate(-90deg);
  transition:0.5s;
}

.timeSlider .slick-dots{
  width: auto!important;
  left: 50%;
  transform: translatex(-50%);
}



  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }

  #main {
    transition: margin-left .5s;
    padding: 16px;
  }

  .sidenav img {
   z-index:9;
   margin-right: 25px;
   width: 22px;
   padding-bottom: 0;
   border-bottom: 2px solid transparent;
  }

  .main-cont {
    background-color: #000;
    margin-left: 60px;
min-height: 83vh;
  
  }

  .credentials-form{
    min-width: 550px;
    max-width: 550px;
    /* margin: 50px auto; */
    /* position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%); 
    background-color:#272525;*/
    padding: 20px;
    border-radius: 20px;
   /* box-shadow: 0px 0px 5px 2px #5e5858;
     margin-left: 25px!important; */
  }
  
  
  
  .registerForm{
   /* margin-left: auto!important; */
  }

  .credentials-form .logo img{
    margin-bottom: 10px;
  }
  

  .credentials-form p{
    font-size: 1.1rem;
  }

  .credentials-form h2{
    font-family: "Lexend-Regular";
    font-size: 22px;
    color:#fff;
  }
  .btn-default{
    background-color: #fff!important;
    color: #000;
    font-family: "Lexend-Regular";
    border-radius: 5px!important;
    font-size: 1.1rem;
    padding: 8px 0px;

  }


 

  .account-form .f-btn{
    background-color: #777777!important;
    border-color: #777777!important;
    font-size: 22px;
  }

  .account-form .f-btn:hover{
    background-color: #4df088!important;
    border-color: #4df088!important;
  }

  .cred-form label{
    font-size: 1.1rem;
  }
  


  .slideContentBox .btn{
    width: 200px;
    margin-right: 10px;
    font-size: 20px;
  }

  .slideContentBox .btn:focus{
    color: #fff!important;
  }

  .slideContentBox .btn:active{
    color: #fff!important;
  }

  
 .singleSlideBox .whiteBtn button:focus{
    color: #000!important;
  }

 .singleSlideBox .whiteBtn button:active{
    color: #000!important;
  }

  .singleSlideBox .whiteBtn button:hover{
    color: #fff!important;
  }


  



  .bg-btn{
    width: 200px;
  }

  .f-btn{
    width: 100%;
  }

  .btn-default:hover{
   border-color: #f22a2a;
   background-color:#f22a2a!important;
   color:#fff;
   
  }

  .cred-form input{
    background-color: #3f3b48;
    border-color:#3f3b48;
    height:58px;
    color: #fff!important;
    font-family: "Lexend-Regular";
    font-size: 1.1rem;
  }
  .cred-form input:focus{
    background-color: #3f3b48 !important;
  }

  .cred-form input::placeholder{
    color: #9e9c9c !important;
  }

  .cred-form input.btn{
    color:#fff!important;
  }

  .cred-form input.btn:hover{
    color:#fff!important;
  }

  label{
    font-family: "Lexend-Regular";
  }

.inpIcon{
  position: relative;
}

.inpIcon input{
  padding-left: 50px;
}

.inpIcon input:-webkit-autofill{
  -webkit-text-fill-color: #fff!important;
}


.inpIcon i{
  position: absolute;
  top: 53%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 16px;
}

.inpIcon .inIcn
{
  top: 0;
    background: #3f3b48;
    height: 100%;
    position: absolute;
    width: 40px;
    border-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0px 0px 5px 0px #161616;
}

  .theme-txt{
    color: #757575;
  }

  .theme-txt:hover{
color: #4df088;
  }

  .top-slider{
    position: relative;
  }

  .top-slider img{
    width: 100%;
    height: 700px;
    object-fit: cover;
   
  }

  .carousel-item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, #000000 0%, #000000 15%, rgba(83, 100, 141, 0) 100%);
    z-index: 9;
}


.carousel-indicators [data-bs-target] {
  width: 14px!important;
  height: 14px!important;
  margin-right: 7px!important;
  margin-left: 7px!important;
  background-color: #686868!important;
  opacity: 1!important;
}

.carousel-indicators .active {
  background-color: #fff!important;
}


.carousel-item:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 14%;
  bottom: 0;
  background: linear-gradient(to top, #000000, transparent);
  z-index: 1;
}

.carousel-indicators {
  bottom: 380px;
  z-index: 999;
}

.slideContentBox {
  position: absolute;
  top: 38px;
  width: 50%;
  /* padding-left: 20px; */
  z-index: 99;
  left: 40px;
}

.slideContentBox p{
  font-size: 24px;
}

.slideTitle {
  color: #fff;
  text-transform: uppercase;
  font-size: 6rem;
  letter-spacing: 1px;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Lexend-SemiBold";
  margin-bottom: 0;
  margin-top: 16px;
}

.slideDescription {
  color: #e4e4e4;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 115px;
  margin-bottom: 50px !important;
  margin-top: 0 !important;
}

.slider {
  width: 100%;
  margin: 15px auto;
}

.slick-slide {
margin: 0px 0px;
}

.multiItemSlider .slick-slide {
margin: 0px 15px;
}

.slick-slide img {
width: 100%;
}

.slick-prev:before,
.slick-next:before {
color: black;
}




.item-slider{
  z-index: 9;
 
  /* padding-left: 30px; */
}

.multiItemSlider{
  margin-top: -365px;
  overflow: hidden;
}



.thumbnail_img {
  border-radius: 5px;
  /* margin: 0 10px; */
  width: 100%;
  height: 200px;
  position: relative;
  transition: transform .2s;
  border: 2px solid transparent;
}

.thumbnail_img::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #00000000;
}

.thumbnail_img:hover::before {
  content: "";
  /* background: #0000006b !important; */
}

.thumbnail_img img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
 
}


.thumbTitle {
  color: #fff;
  font-size: 20px;
  font-family: "Lexend-Regular";
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 0;
  text-transform: uppercase;
}

.thumbnail_img:hover {
  border: 2px solid #f22a2a;
  transition: 0.6s;
  transform: scale(1.1);
  z-index: 9;
}
.thumbnail_img:hover .thumbnailBx {
  opacity: 1;
  transition: 0.6s;
}

.slick-list {
  overflow: visible !important;
}
.slider_title_box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  padding-left: 15px;
  padding-right: 10px;
  z-index: 9;
  position: relative;
}
.list_heading {
  color: #fff;
  float: left;
}
.list_heading h1 {
  font-size: 28px;
  font-family: 'Lexend-Bold';
}

.slick-track{
  margin-left: unset!important;
}


.slick-prev {
  left: 30px;
  z-index: 9;
}

.slick-next {
  right: 85px;
  z-index: 9;
}

.slick-prev:before {
  font-family: monospace!important;
  font-size: 95px!important;
  color: #fff!important;
 
}

.slick-next:before {
  font-family: monospace!important;
  font-size: 95px!important;
  color: #fff!important;
  opacity: 1!important;
  
}

.slick-prev:before {
  content: '<';
}

.slick-next:before {
  content: '>';
}
.slick-prev{
  top: 21%!important;
}
.slick-next{
  top: 21%!important;
}


.padL{
  padding-left: 15px;
  padding-right: 15px;
}

.padL .thumbnail_img{
margin-bottom: 60px;
}

.openGrid{
  width: 20%;
}

.thumbGrid h2{
font-size: 28px;
font-family: 'Lexend-Regular';
color: #fff;
}

.searchBox input{
  padding: 15px;
  border-radius: 50px;
  background-color: #757575;
  border-color: transparent;
  color: #fff;
  font-size: 20px;
  padding-right:60px;
}

.searchBox input::placeholder {
  color: #fff!important;
}

.searchBox {
  max-width: 800px;
  margin: 120px auto 20px;
  position:relative;
}
.searchBox i{
position:absolute;
right: 25px;
top: 15px;
font-size: 30px;
color:#fff;
cursor:pointer;
}

.searchBox input:focus{
  background-color:#757575!important;
  color:#fff!important;
  border-color:#f22a2a!important;
  box-shadow:0 0 0 #f22a2a!important;
}


.backBtn{

  background-color: #757575;
    padding: 15px 17px;
    border-radius: 50px;
}
.backBtn i{
  color: #fff;
  font-size: 45px;
  position: relative;
  top: 8px;
  right: 2px;

}

.hardTheme{
  background-color:#f22a2a!important;
  color:#fff;
}

.hardTheme:hover{
  background-color:#a31b1b!important;
 
}

.video-js{
  width: 100%;
  height:100vh;
}

.videoPoster{
  position: relative;
 z-index: 9;
}



.videoPoster:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #000000 0%, #000000 15%, rgba(83, 100, 141, 0) 100%);
  z-index: 9;
}


.videoPoster img{
width: 100%;
height: 100%;
}

.videoJsPlayer{
  position: absolute!important;
  left:0;
  top: 0;
 

}

#my-video{
  /* display: none; */
}

.playerBox {
  top: 3%!important;
}

.playerCont{
  margin-left: 0;
}

.playerTitle{
  font-size: 24px;
  font-family: 'Lexend-Regular';
  padding-left: 10px;
}

.account-form .btn:focus{
  background-color: #4df088!important;
  color:#fff!important;
}

.fa-eye{
  cursor: pointer;
}

.fa-eye-slash{
  cursor: pointer;
}

.page-link{
  color:#ff0000!important;
  margin-left: 3px !important;
  margin-right: 3px!important;
  padding: 10px 15px!important;

}
.page-link:hover {
  background-color: #ff0000;
  border-color: #ff0000;
  color: #fff !important;
}

.wrapper-pagination svg{
  width: 30px;
}

nav p{
  color:#fff;
  margin-top: 15px;
  font-size: 20px;
  position: relative;
  left: -15px;
}

.pagination nav .mobile-hidden{
  display: none;
}

.wrapper-pagination a{
  margin-right: 5px;
  text-decoration: none;
}

.wrapper-pagination .bg-white{
  color: #ff0000!important;
  font-size: 20px;
}

.wrapper-pagination .bg-white:hover{
  color: #ffff!important;
  background-color: #ff0000!important;
  border-color: #ff0000!important;
}

.wrapper-pagination [aria-current="page"] span{
background-color: red!important;
color:#fff!important;
border-color: #ff0000!important;
}

.wrapper-pagination [aria-disabled="true"] span{
  margin-right: 5px;
  }

  .timeSlider{
    overflow: hidden;
  }

  .timeSlider .video-js::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #00000061;
z-index: 9;

  }

  .mob-bars{
    display: none;
  }

  .timeSlider .slick-dots {
    bottom: 460px!important;
}

.timeSlider .slick-dots li button:before {
   content: ''!important;
  opacity: 1!important;
   background: #686868!important;
}

.timeSlider .slick-dots li.slick-active button:before {
 background: #fff!important;
}

.desktopBack{
  display: none;
}

.playerCont .video-js{
  height: 100vh!important;
}

.vjs-button > .vjs-icon-placeholder:before {
  font-size: 2.9em!important;
}
  
.video-js .vjs-control-bar {
  height: 5em!important;
 }

 .video-js .vjs-time-control {
  font-size: 1.7em!important;
}

.openBtn{
width:40px;
}

.vol-controls {
  position: absolute;
  right: 25px;
  bottom: 42%;
  background: #ffffff38;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999999;
}

.detailSection{
  position: relative;
}

.detailVolControls{

  bottom: 5%!important;
  margin-bottom: 120px;
}

.vol-controls img {
  width: 30px;
  height: unset;
  object-fit: unset;
}

.vol-controls .sound-on{
  display:none;
}

.topPlayControls{
  display: none;
}

/* footer css start */

footer{
  background: #000;
  /* box-shadow: 0px 0px 3px 0px #373636; */
  
}
.topFoot
{
  margin-bottom: 20px;
  border-bottom: 1px solid #1d1d1d;
}

footer .container-fluid{
  padding-left: 0!important;
}

footer ul{
  list-style: none;
  padding-left: 0;
}

footer ul li{
  color:#fff;
  padding: 0 20px;
}

.appUl li{
  padding: 0 5px;
}

footer ul li:hover{
  color:#f22a2a;
  transition:0.2s;
}

.appUl img{
  width: 122px;
}



.sliderMainBx{
position:relative;

}

.playerPause{
  display: none;
}
.custom-player-controls button
{
  background: unset;
    border: none;
}

.custom-player-controls img{
width: 65px;
cursor: pointer;
}

.playerCont .vjs-big-play-button
{
display: none!important;
}

.playerReload{
  display: none;
}

#playPause{
  margin:0 70px;
}

.custom-player-controls {
  position: absolute;
  bottom: unset;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 10px;
  top: 50%;
  z-index: 9;
}
.main-controls-layer
{
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.diffLogo img{
  margin-left: 25px;
  margin-top: 15px;
}

#registerfrm .btn-default:hover{
  background-color: #4df088 !important;
  border-color: #4df088 !important;
}

#loginfrm .btn-default:hover{
  background-color: #4df088 !important;
  border-color: #4df088 !important;
}

.mainCredBox{
    display:flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.menuUl{
  display: none;
}

.video-player_ima-ad-container{
  display: none;
}

.vjs-paused + div .playerPause{
  display: none!important;
}

.vjs-paused + div .playerPlay{
  display: block!important;
}

.vjs-playing + div .playerPlay{
  display: none!important;
}

.vjs-playing + div .playerPause{
  display: block!important;
}

.vjs-subs-caps-button .vjs-lock-showing{
  display: none!important;
}
.vjs-subs-caps-button .vjs-menu-content
{
 display: none!important; 
}

#video-container #video-player {
    position: unset;
}

#ad-container > div{
  height: 100% !important;
  width: 100% !important;
}

#ad-container{
height:100%!important;
}

.vjs-fullscreen-control{
display:none!important;
}

.fullscreenIcon{
       position: absolute;
    right: 5px;
    bottom: 55px;
    z-index: 999;
    cursor: pointer;
    width: 30px;
}

#ad-container iframe{
  width: 100%;
  height: 100%;
}


/* Code added by manoj */ 
a {
  text-decoration: none !important;
}

.vjs-fullscreen .vjs-play-control,
.vjs-fullscreen .vjs-rewind-control,
.vjs-fullscreen .vjs-forward-control {
  display: none !important;
}

/* footer css end */