@charset "UTF-8";
/* CSS styles, Classified script Pro by Evesi.com copyright 2012 - 2024 new version v24 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Source+Sans+Pro:ital,wght@0,400;0,500;0,600;0,700;1,300&display=swap');
* {
margin: 0;
padding: 0 
}

/* Reset styles */
html, body {
     margin: 0!important;
     padding: 0!important;
     height: 100%;
    /* Ensure the body uses the full viewport */
     width: 100%;
     overflow: hidden;
     background-color: #041536!important;
}
 body {
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #041536!important;
     font-size: 18px;

     font-family: 'Source Sans Pro', sans-serif, arial;
font-size: 100%;
font-size: 18px;
font-weight: 500;
color: #fff;
}
h1,h2,h3,h4{
  margin-bottom: 40px;;
}
.button{
  background: #232ed1;
  color: #fff;
  font-weight: 700;
  display: inline-block;
  padding: 6px 20px;
}
.grboxshade{
    position: relative;
    
    z-index: 2;
    
    }
    .grboxshade:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    background: linear-gradient(-171deg, rgba(79,214,176,0.15) 0%, rgba(239,242,246,0.15) 100% )!important;
    -webkit-filter: blur(70px);
    filter: blur(70px) ;
    border-radius: inherit;
    -ms-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
    scale: 125%;
    }
    body.dark .grboxshade:before {
    
    background: linear-gradient(-171deg, rgba(79,214,176,0.35) 0%, rgba(239,242,246,0.35) 100% )!important;
    }
    .grboxshade::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: none;
    border-radius: inherit;
    }
a{
    text-decoration: none ;
    color: inherit;
  }
 .audioon{
     position: fixed;
     top: 30px;
     color: #fff;
     text-shadow: 0 0 4px #000;
     font-size: 2rem;
     z-index: 4233334;
     width: 50px;
     height:50px;
     margin-left: 110px;
}
 .audioon i{
     width: 50px;
     height:50px;
     border-radius:50%;
     text-align:center;
     box-sizing:border-box;
     line-height:50px;
}
 .audioon i.fa-volume-xmark{
     background:rgba(255,255,255,0.25);
}
 .audioon i.fa-volume-high{
     opacity: .05!important 
}
 .playvideo {
     font-size: 4rem;
     color: #fff;
     text-shadow: 0 0 4px #000;
     width: 100%;
     height: 100vh;
     z-index: 424334;
     position: fixed;
     top: 0;
     left: 0;
     box-sizing: border-box;
}
 .playvideo div{
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
}


#box404{
  display: flex;
  align-items: center;
}
#box404 .notfound {
  text-align: center;
  width: 100%;
  border-radius:20px;
  padding: 30px;;
  background-color: #041536!important;
}


/* vid containter */
#catcheck{
 

  position: relative;
  width: 800px;
  max-width:100%;
  height: calc(100vh - env(safe-area-inset-bottom));

  box-sizing:border-box;
}
@media only screen and (max-width: 700px) {
  #catcheck{
      height: calc(var(--vh, 1vh) * 100);
     /* Use custom --vh variable */
 }
}
.shorts-container {
  
  position: relative;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 700px) {
    .shorts-container {
       
   }
}
.shorts-container .short {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease-in-out;
    display:flex;
    justify-content:center;
    align-items:center 
}
.shorts-container .short video,.shorts-container .short img {
    object-fit: cover;
    z-index: 4;
    border: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 97%;
    border-radius:20px!important;
    overflow:hidden;
}
.shorts-container .short img {
    object-fit: contain ;
 
    overflow: hidden;
}
@media only screen and (max-width: 991px) {
   .shorts-container .short video,.shorts-container .short img {
       border-radius: 0!important;
       width: 100%;
       height: 100%!important;
       object-fit: contain ;
      
  }
}
 .shorts-container .short .overlay{
     z-index: 5;
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     display: flex;
     padding-bottom:60px;
     box-sizing:border-box 
}
 .shorts-container .short .overlay .gohome{
     position: fixed;
     top: 30px;
     margin-left:10px;
     color: rgba(255,255,255,0.85);
     text-shadow: 0 0 4px #000;
     font-size: 2rem;
     z-index: 34233332;
     height:50px;
     cursor: pointer;
     line-height:50px;
}
 .shorts-container .short .overlay .desc{
     width: calc(100% - 60px);
     flex-shrink: 0;
     flex-grow: 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 15px;
     box-sizing: border-box;
     color:#fff;
     text-shadow: 0 0 4px #000;
}
 .shorts-container .short .overlay .desc .itit{
     font-weight: 700;
     margin-bottom:20px;
     font-size:1.3rem;
}
 .shorts-container .short .overlay .desc .auth{
     display:flex;
     align-items:center;
     font-weight: 600;
     margin-bottom:15px;
}
 .shorts-container .short .overlay .desc .auth a{
     color: inherit;
     text-align: none;
     margin-right:15px 
}
 .shorts-container .short .overlay .desc .auth .subscribe{
     background:red;
     border-radius:12px;
     font-weight:700;
     font-size:0.925rem;
     padding: 5px 10px;
     cursor: pointer;
}
 .shorts-container .short .overlay .desc .shorttag{
     font-size: 0.8725rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}
.shorts-container .short .overlay .desc .catbx span{
  background:#eff2f6;
  border-radius:200px;
  padding:4px 12px;
  font-size:0.825rem;
  font-weight:600 ;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  margin:10px 3px 0 0;
  color:#000;
  text-shadow: none;
  }
 .shorts-container .short .overlay .buttons {
     width: 60px;
     padding: 10px 5px ;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: 20px;
     justify-content: flex-end;
     flex-shrink: 0;
     flex-grow: 0;

}
@media only screen and (min-width: 1080px) {
    .shorts-container .short .overlay .buttons {
        margin-left:70px;;
    }
}
 .shorts-container .short .overlay .buttons button, .shorts-container .short .overlay .buttons .shrtbutton {
     background-color: rgba(0, 0, 0, 0.25);
     border: none;
     padding: 10px;
     margin: 0;;
     border-radius: 50%;
     cursor: pointer;
     width: 50px;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap:wrap;
     box-sizing:border-box;
     text-align:center;
color:#fff;
text-shadow: 0 0 4px #000;
     font-size:1.25rem;
 
     -webkit-transition: background-color .3s ease-in-out;
     -moz-transition: background-color .3s ease-in-out;
     -o-transition: background-color .3s ease-in-out;
     transition: background-color .3s ease-in-out 
}
 .shorts-container .short .overlay .buttons button:hover, .shorts-container .short .overlay .buttons .shrtbutton:hover{
    background-color: rgba(0, 0, 0, 0.45);
}
 .shorts-container .short .overlay .buttons button span, .shorts-container .short .overlay .buttons .shrtbutton span{
     font-size:0.725rem;
     display:block;
     opacity: .6;
     width: 100%;      
}



#loginpop {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background: rgba(14,26,50, 0.25);
    z-index: 999934299;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #lgnpbox::before{
    content: ' ';
    display: block;
    width: 50px;
    height: 3px;
    background: #eff2f6;
    border-radius: 20px;
    position:absolute;
    left:0;
    right:0;
    margin-top: 8px;
    margin-left:auto;
    margin-right:auto;
  }
  body.dark #lgnpbox::before{
    background: rgba(255,255,255,0.25);
  }
  #lgnpbox {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
  }
  body.dark #lgnpbox {
    background: #041536;
  }
  @media only screen and (min-width: 992px) {
    #lgnpbox {
        width: 670px;
        max-width: 100%;
        margin-top:40px;
        margin: 0 auto;
        border-radius: 20px;
        margin-top: 20px;
   }
  }
  @media only screen and (max-width: 991px) {
    #lgnpbox {
        position: absolute;
        width: 100%;
        bottom: 0;
        border-radius: 20px 20px 0 0;
   }
    #lgnpbox #lgpinser{
        max-height: 50vh;
        overflow-y: auto;
        padding-bottom: 80px;
   }
  }
  #lgnpbox .wrapper,#lgnpbox .loginwrapper{
    width: 100%;
  }
  @media only screen and (max-width: 991px) {
    #lgnpbox {
        padding-top: 10px;
   }
  }
  #loginpop .lgnclose{
    text-align: center;
    cursor: pointer;
    text-align: right;
    color:#0c114b;
    font-size: 22px;
    margin-bottom: 0;
    padding: 5px 15px 0 0;
    box-sizing: border-box;
  }
  body.dark #loginpop .lgnclose{
    color:#efefef;
  }
  #loginpop .lgnclose:hover{
    color:#232ed1!important;
  }
  #loginpop .bodyb{
    padding: 20px;
   ;
  }