@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&family=Hind:wght@500&family=Mukta:wght@200;300;400;500;600;700;800&display=swap");

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  text-transform: capitalize;
  /* cursor: none; */
  font-family: "Mukta", sans-serif;
}

body {
  background: linear-gradient(#000000, #4b4a59);
  /* overflow-x: hidden; */

}
#cursor {
  position  : absolute;
  z-index   : 10000;
  width     : 40px;
  height    : 40px;
  background: transparent url(cursors/normal.gif) 0 0 no-repeat;
}

.into {
  height: 100vh;
  width: 100%;
  /* background: linear-gradient(to right black, to left transparent); */
  background-size: cover;
  background-position: center;
  position: relative;

  /* background: url(./home/v1.mp4); */
}

video {
  position: absolute;
  right: 0;
  bottom: 0;
  height: auto;
  width: 100%;
  z-index: -9999;
  /* opacity: 0.8; */
  aspect-ratio: 16/9;
}


.welcome{
  height: 100vh;
  background: linear-gradient(to right, #030303 2%, #00000000 10%, transparent 11%);
  background-size: 200% auto;
  /* backdrop-filter: blur(5px); */
  color:  white;
  width: 80vh;
  padding-left: 10vh ;
  padding-top: 30vh;
  position: absolute;
  top: 0;
  z-index: 0;
}
.welcome h4{
  color: #DADF6B;
}
.welcome  a{
  text-decoration: none;
  color: #ffffff;
}
.welcome p{
  color: #CCCCCC;
}
.welcome span:hover {
  /* text-shadow: 0 0 10px #fff700; */
  animation: aglow 0.1s infinite alternate ease-out;
}
@keyframes aglow {
  100% {
    text-shadow:
    0 0 5px #fff700, 0 0 10px #fff700,
    0 0 20px #fff700, 0 0 40px #fff700;
  }
}


.nav {
  height: 8vh;
  width: 100%;
  
}
.welcome2{
  padding-top: 100vh;
  height: 10vh;
  width: 100%;
  background: linear-gradient(to top, #0A0A0C 2%, #00000000 10%, transparent 11%);

}

.navbar {
  height: 8vh;
  width: 70vh;
  margin: auto;
}

.navbar ul {
  padding: 1vh;
}

.navbar ul li {
  display: inline;
  padding: 3vh;
}

.navbar ul li a {
  text-decoration: none;
  color: #ffffff;
}

.navbar ul li :hover {
  color: #be6bbd;
}

/* banner */
.ban {
  width: 98%;
  height: 100vh;
  margin: auto;
  background-image: url(./intopage/ib1.jpg);
  border-radius: 20px;
}

.banrap {
  width: 100%;
  height: 100vh;
  margin: auto;
  border-radius: 20px;
  padding-top: 10vh;
  background: linear-gradient(to right, #131314, transparent);
}

.content {
  margin: auto;
  width: 95%;
  padding-right: 90vh;
}

.searchbox input {
  padding: 4px;
  font-size: 2rem;
  outline: none;
  border-radius: 10px;
  background-color: #ffffff;
}

.searchbox i {
  font-size: 5vh;
  background: #dbe06a;
  border-radius: 6px;
  padding: 14px;
}

.content p {
  font-size: 19px;
  padding-top: 6vh;
  color: aliceblue;
}
/* 
.content button {
  margin-top: 6vh;
}

.content button {
  padding: 3vh;
  font-size: 19px;
  border-radius: 20px;
  background: #dfe464;
}

.content button a {
  text-decoration: none;
} */
/* CSS */
.button-49,
.button-49:after {
  width: 150px;
  height: 76px;
  line-height: 78px;
  font-size: 20px;
  font-family: "Bebas Neue", sans-serif;
  background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
  border: 0;
  color: #fff;
  letter-spacing: 3px;
  box-shadow: 6px 0px 0px #dbe165;
  outline: transparent;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 5vh;
}

.button-49:after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);

  content: "Wacth Now";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 3%,
    #00e6f6 3%,
    #00e6f6 5%,
    #ff013c 5%
  );
  text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
  clip-path: var(--slice-0);
}

.button-49:hover:after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

@media (min-width: 768px) {
  .button-49,
  .button-49:after {
    width: 200px;
    height: 86px;
    line-height: 88px;
  }
}
/* middle */
.mid1 {
  height: 12vh;
}

.midrap {
  padding-top: 3vh;
  width: 90%;
  height: 12vh;
  margin: auto;
  display: grid;
  grid-template-columns: 20% min-content min-content min-content min-content;
  grid-column-gap: 5px;
}

.mbox:hover  {
  transform: translateY(-10px);
  transition: transform 0.3s ease;
}
.mbox1 {
  display: grid;
  grid-template-rows: auto auto;
  font-size: 22px;
}
.mbox1 h5 {
  color: #d7e065;
  padding-left: 1vh;
  margin-top: -2vh;
}
.mbox1 h6 {
  color: white;
  padding-left: 4vh;
}

.mbox21 {
  background: #098bd1;
  font-size: 22px;
  border-radius: 20px;
  /* padding: 1vh; */
  padding-left: 2vh;
  padding-top: 1px;
  height: 6vh;
  width: 18vh;
  color: #ffffff;
}

.mbox22 {
  background: #3a3a3a;
  font-size: 22px;
  border-radius: 20px;
  /* padding: 5vh; */
  color: #ffffff;
  padding-left: 2vh;
  padding-top: 1px;
  height: 6vh;
  width: 18vh;
}

.mbox23 {
  background: #4f7dd8;
  font-size: 22px;
  border-radius: 20px;
  /* padding: 5vh; */
  color: #ffffff;
  padding-left: 2vh;
  padding-top: 1px;
  height: 6vh;
  width: 18vh;
}

.mbox24 {
  background: #a2df48;
  font-size: 22px;
  border-radius: 20px;
  /* padding: 5vh; */
  color: #ffffff;
  padding-left: 2vh;
  padding-top: 1px;
  height: 6vh;
  width: 8vh;
}

/* middle2 */
.mid2 {
  height: 155vh;
}

.mid2rap {
  width: 90%;
  height: 100vh;
  margin: auto;
  display: grid;
  grid-template-columns: 70% 30%;
  grid-column-gap: 4px;
}

.midb41 {
  background: linear-gradient(#000000, #4b4a59);
  border-radius: 10px;
  padding: 1vh;
}

.cbar {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 150px;
  color: #cccccc;
}
.boxm4 h3 {
  color: #ffffff;
}
.boxm4 p {
  color: #cccccc;
}

.cbottom {
  padding-top: 1vh;
  padding-left: 1vh;
  display: grid;
  grid-template-columns: min-content auto;
}

.cbottom img {
  height: 8vh;
  border-radius: 100px;
}

.cbottom p {
  padding: 1vh;
  padding-top: 2vh;
}

.midb4 {
  padding: 1vh;
  border-left: 1px solid white;
}

.midb4 h1 {
  color: #ffffff;
}

.midb41 {
  margin-top: 2vh;
}

.midb5 {
  background: linear-gradient(#000000, #4b4a59);
  padding-left: 20vh;
  border-radius: 20px;
  margin-top: 4px;
}
.midb5 h3 a {
  color: white;
  text-decoration: none;
}

.midb5 h3 :hover {
  color: pink;
}
.midb3 h1,
h2 {
  color: #ffffff;
}
.midb3 p {
  color: #cccccc;
}

/* home */

.nav2 {
  height: 70px;
  width: 100%;
  background: transparent;
  z-index: 9999;
  position: absolute;
  position: fixed;
}

.navrap2 {
  height: 70px;
  width: 100%;
  /* border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px; */
  margin: auto;
  padding-top: 2vh;
  padding-left: 2vh;
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  grid-template-columns: min-content min-content 25% 9% max-content max-content min-content  auto;
  grid-column-gap: 12px;
}
/* 
.dropdown {
  display: inline-block;
} */
/* 
.dropdown button {
  background-color: transparent;
  color: black;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  margin-top: 1.5vh;
  font-size: 15px;
  margin-left: 30px;
} */

/* .dropdown a {
  display: block;
  color: black;
  text-decoration: none;
  padding: 10px 15px;
} */
/* 
.dropdown .content {
  display: none;
  position: absolute;
  background: linear-gradient(90deg, rgb(170, 245, 255), rgb(170, 245, 255));

  box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.8);
}

.dropdown:hover .content {
  display: block;
}

.content {
  margin-right: 0px;
  height: 60vh;
}

.dropdown :hover button {
  background-color: hsl(0, 0%, 70%);
}

.dropdown a:hover {
  background: linear-gradient(90deg, rgb(75, 234, 255), rgb(75, 234, 255));
  color: white;
}

.dropdown:hover button {
  box-shadow: 1px 1px 5px hsla(0, 0%, 0%, 0.8);
} */

/* NEw Drop DOwn */
.offcanvas-menu > label {
  /* top: 30px; */
  left: 30px;
  /* position: fixed; */
  width: 40px;
  height: 100%;
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  align-items: center;
  z-index: 9999;
  margin-top: -15px;
}

/* .offcanvas-menu label span,
.offcanvas-menu label span::before,
.offcanvas-menu label span::after {
  content: "";
  position: absolute;
  height: 4px;
  width: 40px;
  background: #b3b3b3;
} */
.offcanvas-menu label span::before {
  transform: translateY(12px);
}
.offcanvas-menu label span::after {
  transform: translateY(-12px);
}
.offcanvas-menu nav {
  position: fixed;
  height: 100%;
  width: 160px;
  left: -350px;
  overflow-x: hidden;
  background: linear-gradient(to right,#000000, #4b4a59,transparent);
  z-index: -9999;
  transition: 0.3s ease;
  /* padding: 40px 30px; */
  padding-top: 14vh;
  padding-left: 6vh;
  top: 0;
}
.offcanvas-menu nav > div {
  display: flex;

  justify-content: space-between;
  align-items: center;
}
.offcanvas-menu nav > div a {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  font-family: "Monoton", cursive;
  background: linear-gradient(-90deg, #49a4ed 30%, #3d00a9 110%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.offcanvas-menu nav > div a i {
  font-size: 4rem;
  background: linear-gradient(120deg, #49a4ed 30%, #3d00a9 110%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.offcanvas-menu nav > div label {
  width: 30px;
  height: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
}
.offcanvas-menu nav > div label span,
.offcanvas-menu nav > div label span:before,
.offcanvas-menu nav > div label span:after {
  background: #4d4d4d;
}
.offcanvas-menu nav > ul {
  margin-top: 30px;
  counter-reset: nav-link-count;
}
.offcanvas-menu nav > ul li {
  cursor: pointer;
  padding: 10px 0;
  transform: translateX(-30px);
  opacity: 0;
  transition: 0.4s ease;
  list-style-type: none;
}
.offcanvas-menu nav > ul li a {
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
  color: #d7e065;
  display: block;
  text-decoration: none;
  height: 4.5vh;
  border-radius: 10px;
  padding: 1vh;
}

.offcanvas-menu nav > ul li :hover {
  color: white;
  border-bottom: 2px solid ;
  border-left: 2px solid ;
}

/* .offcanvas-menu nav > ul li a::before {
  counter-increment: nav-link-count;
  content: counter(nav-link-count);
  display: inline-block;
  padding-right: 5px;
  color: #d7e065;
  vertical-align: middle;
  font-size: 0.8rem;
} */


.offcanvas-menu input[type="checkbox"] {
  display: none;
}
.offcanvas-menu input[type="checkbox"]:checked ~ label {
  opacity: 0;
  pointer-events: none;
}
.offcanvas-menu input[type="checkbox"]:checked ~ nav {
  left: 0;
}
.offcanvas-menu input[type="checkbox"]:checked ~ nav label span {
  background: transparent;
}

.offcanvas-menu input[type="checkbox"]:checked ~ nav ul li {
  opacity: 1;
  transform: translateX(0px);
}

.navlogo img {
  height: 14vh;
  margin-top: -3vh;
}

.searchbox1 {
  background: white;
  border-radius: 6px;
  padding-left: 20px;
  margin-top: 1vh;
}

.search input {
  /* display: flex; */
  width: 250px;
  height: 15px;
  border-radius: 6px;
  padding-left: 3px;
  border: none;
  outline: none;
  /* padding-bottom: -1vh; */
}

.social {
  display: flex;
  margin-top: 6px;
  gap: 5px;
}
.social * {
  /* display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; */
  /* background: #098bd1;
  border-radius: 100px;
  width: 30px;
  height: 30px; */
}

.fb {
  border-radius: 100px;
  background: #6f85d5;
  padding-left: 7px;
  padding-top: 2px;
  width: 30px;
  height: 30px;
}

.tg {
  border-radius: 100px;
  background: #0088cc;
  padding-left: 7px;
  padding-top: 2px;
  width: 30px;
  height: 30px;
}

.twitter {
  border-radius: 100px;
  background: #ff3c1f;
  padding-left: 7px;
  padding-top: 2px;
  width: 30px;
  height: 30px;
}

.watchtogether {
  text-align: center;
  /* margin-top: 12px; */
  /* padding-left: 20px; */
}
.watchtogether a {
  color: #dadf6b;
  text-decoration: none;
}

.Random {
  text-align: center;
  
}

.Random a {
  color: #dadf6b;
  text-decoration: none;
}

.community {
  text-align: center;
  /* margin-top: 2vh; */
  /* padding-left: 2vh; */
}
.community a {
  color: #dadf6b;
  text-decoration: none;
}
/* The Modal (background) */
.login button {
  width: 80px;
  border-radius: 10px;
  height: 50px;
  float: right;
  margin-right: 10px;
  background: #dadf6b;
  /* margin-top: 1vh; */
  /* margin-left: 220px; */
}
.modal-content button{
  float: left;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 9999;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0,);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content */

.modal-content {
  background-color: rgba(0, 0, 0, 0.9);
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 35%;
  color: white;
  /* padding-left: 300px; */
  /* padding-right: 300px; */
}

.modal-content h1 {
  text-align: center;
}

.modal-content h3 {
  font-size: 20px;
}

.modal-content input {
  width: 400px;
  height: 6vh;
  padding-left: 3vh;
}
.modal-content a{
  text-decoration: none;
  color: #00e6f6;
}

.modal-content button {
  width: 60px;
  height: 5vh;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* middle */
.midh {
  width: 50%;
  height: 16vh;
  margin: auto;
}

/* middle1 */
.midh1 {
  height: 60vh;
  width: 100%;
}

.midh1rap {
  height: 50vh;
  width: 100%;
  margin: auto;
  grid-template-rows: min-content auto;
  grid-row-gap: 4px;
}

.midh1rap h2 {
  color: pink;
  font-size: 30px;
  padding-left: 17px;
}

.scroll-container1 {
  height: 46vh;
  background-color: transparent;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
  /* scrollbar-color: pink transparent; */
  scroll-behavior: smooth;
  
}
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 5px ;  */
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  
  background: linear-gradient(#000000,#cccccc,#000000); 
  
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  
  background: linear-gradient(#000000,pink,#000000);
  
  
}

.scroll-container1 ::-webkit-scrollbar {
  scrollbar-color: yellow;
  
}

.scroll-container1 img {
  /* padding: 50px; */
  /* background-color: green; */
  
  transition: transform 0.1s;
  /* width: 200px;
    height: 200px; */
  margin: 0 auto;
  border-radius: 8px;
}

.scroll-container1 :hover {
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.1);
  /* Safari 3-8 */
  transform: scale(1.1);
  /* box-shadow: 0px 10px 20px ; */
}


/* NEW CAROUSEL */
.gallery-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

/* middle2 */
.midh2 {
  height: 12vh;
  margin-bottom: 4vh;
}

.midh2rap {
  padding-top: 3vh;
  width: 96%;
  height: 12vh;
  margin: auto;
  display: grid;
  grid-template-columns: min-content 20% min-content min-content min-content min-content;
  grid-column-gap: 5px;
}

.midh2rap img {
  border-radius: 100px;
  height: 8vh;
  padding-left: 2vh;
  margin-top: -1vh;
}

/* middle3 */
.midh3 {
  height: 40vh;
  width: 100%;
  background: #2b2a3b;
}

.midh3rap {
  height: 40vh;
  width: 96%;
  display: grid;
  grid-template-columns: min-content auto;
  grid-column-gap: 5px;
}

.midh3rap img {
  height: 40vh;
}

.h3box {
  display: grid;
  grid-template-rows: min-content auto;
  grid-row-gap: 9px;
}

.h3box h3 {
  margin-top: 2vh;
  border-radius: 20px;
  padding-left: 2vh;
  margin-right: 127vh;
  background: transparent;
  border: 2px solid pink;
  color: pink;
}

.csec {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.h3box1 {
  background: #94969d;
  width: 40vh;
  height: 28vh;
  padding: 1vh;
  border-radius: 10px;
}

.h3box10 {
  display: grid;
  grid-template-rows: auto auto auto;
}

.h3box101 {
  display: grid;
  grid-template-columns: min-content auto;
  grid-column-gap: 9px;
}

.h3box101 img {
  border-radius: 100px;
  height: 7vh;
}

.h3box101 h4 {
  font-size: 20px;
}

.h3box10 p {
  padding: 1vh;
  font-size: 13px;
}

/* midddle4 */
.midh4 {
  height: 110vh;
  width: 100%;
  padding-top: 4vh;
}

.midh4rap {
  height: 90vh;
  width: 98%;
  padding-left: 20px;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.ta {
  display: grid;
  grid-template-rows: min-content auto auto auto auto auto auto;
  grid-row-gap: 11px;
}

.ta h3 {
  color: pink;
}

.ta1 {
  display: grid;
  grid-template-columns: auto auto;
  width: 250px;
  border-bottom: solid 1px #ffffff;
  border-left: 1px solid  #ffffff;
  border-radius: 10px;
}

.ta1 img {
  width: 64px;
  border-radius: 10px;
}

.details {
  padding: 1vh;
  padding-top: 2vh;
  width: 150px;
  
}

.details p {
  font-size: 19px;
  color: white;
  text-align: left;
}

.lang {
  display: flex;
  grid-template-columns: auto auto;
  grid-column-gap: 0px;
  text-align: center;
  justify-content: start;
}

.cc {
  background: #b0e3af;
  padding: 3px;
  
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  /* padding-left: 2px;
  border-radius: 7px; */
  font-size: 13px;
  width: 8vh;
}

.mic {
  background: #b9e7ff;
  padding: 3px;
  /* padding-left: 3px; */
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  /* border-radius: 7px; */
  font-size: 13px;
  width: 8vh;
}

.ta h2 {
  color: white;
}

/* middle5 */
.midh5 {
  height: 456vh;
  width: 100%;
}

.midh5rap {
  height: 450vh;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto;
}

.lmid5 {
  display: grid;
  grid-template-rows: min-content min-content min-content min-content min-content min-content min-content min-content min-content;
  grid-row-gap: 12px;
}

.lmid5 h2 {
  color: white;
  padding-left: 2vh;
  color: #d0e6a3;
}

.animes {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 7px;
}

.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

/* middle for undo */
/* 
.middle {
    
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.container:hover .image {
    opacity: 0.3;
}

.container:hover .middle {
    opacity: 1;
}

.text {

    background-color: #04AA6D; 
    color: white;
    font-size: 14px;
    padding: 16px 32px;
} */

.container {
  width: 240px;
  height: 340px;
  /* border-radius: 15px; */
  padding: 1.4rem;
  margin: 0.4rem;
  background: white;
  position: relative;
  display: flex;
  align-items: flex-end;
  transition: 0.4s ease-out;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}
.container:hover {
  transform: translateY(5px);
}
.container:hover:before {
  opacity: 1;
}
.container:hover .info {
  opacity: 1;
  transform: translateY(0px);
}
.container:hover img {
  filter: blur(1px);
}
.container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* border-radius: 15px; */
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
  transition: 0.5s;
  opacity: 0;
}
.container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  /* border-radius: 15px; */
}
.info {
  position: relative;
  z-index: 3;
  color: white;
  opacity: 0;
  transform: translateY(30px);
  transition: 0.5s;
}
.info h1 {
  margin: 0px;
}
.info p {
  letter-spacing: 1px;
  font-size: 15px;
  margin-top: 8px;
}

.categories {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 2vh;
}
.schedules {
  height: 70vh;
  width: 99%;
  margin: auto;
  
}
.sdetails {
  display: grid;
  grid-template-columns: 10% auto auto;
  font-size: 20px;
  padding: 1.5vh;
  border-bottom: 2px solid #cccccc;
  border-radius: 10px;
  border-right: 2px solid #cccccc ;
  background: #23232A;
  /* border-left: 2px solid #cccccc; */
}
.sdetails h3 {
  color: #cccccc;
}

.sdetails h4 {
  color: white;
  text-align: left;
}
.sdetails a {
  color: white;
  text-align: left;
  text-decoration: none;
}
.sdetails h5 {
  color: white;
  padding: 5px;
  margin-right: 6vh;
  text-align: right;
}
.sdetails :hover {
  color: pink;
}

.rmid5 {
}
.rmid5rap {
  width: 94%;
  margin: auto;
  display: grid;
  grid-template-rows: min-content auto;
  gap: 6px;
  /* background: #272821; */
  text-align: center;
  margin-bottom: 1vh;
}
.rmid5 h2 {
  color: pink;
  text-align: center;
  padding-bottom: 1vh;
}
.categories {
  display: grid;
  grid-template-columns: auto auto auto;
  background: #272821;
  border-radius: 10px;
  border-left: 1px solid #cccccc;
  border-bottom: 0.1px solid #cccccc;
}
.action {
  /* padding: vh; */
  font-size: 19px;
}
.action h5 {
  padding: 2vh;
  color: #d0e6a3;
}
.action :hover {
  background: #4b4a59;
  /* padding: vh; */
}
.adventure {
  /* padding: vh; */
  font-size: 19px;
}
.adventure h5 {
  padding: 2vh;
  color: #ffbac4;
}
.adventure :hover {
  background: #4b4a59;
  /* padding: vh; */
}
.cars {
  /* padding: vh; */
  font-size: 19px;
}
.cars h5 {
  padding: 2vh;
  color: #fc7764;
}
.cars :hover {
  background: #4b4a59;
  /* padding: vh; */
}
.comedy {
  /* padding: vh; */
  font-size: 19px;
}
.comedy h5 {
  padding: 2vh;
  color: #cca2b4;
}
.comedy :hover {
  background: #4b4a59;
  /* padding: vh; */
}
.demen {
  /* padding: vh; */
  font-size: 19px;
}
.demen h5 {
  padding: 2vh;
  color: #a2ccd8;
}
.demen :hover {
  background: #4b4a59;
  /* padding: vh; */
}
.demons {
  /* padding: vh; */
  font-size: 19px;
}
.demons h5 {
  padding: 2vh;
  color: #d8aa91;
}
.demons :hover {
  background: #4b4a59;
  /* padding: vh; */
}
.drama {
  /* padding: vh; */
  font-size: 19px;
}
.drama h5 {
  padding: 2vh;
  color: #86e3bf;
}
.drama :hover {
  background: #4b4a59;
  /* padding: vh; */
}
.ecchi {
  /* padding: vh; */
  font-size: 19px;
}
.ecchi h5 {
  padding: 2vh;
  color: #d0df99;
}
.ecchi :hover {
  background: #4b4a59;
  /* padding: vh; */
}
.fantasy {
  /* padding: vh; */
  font-size: 19px;
}
.fantasy h5 {
  padding: 2vh;
  color: #b9a1de;
}
.fantasy :hover {
  background: #4b4a59;
  /* padding: vh; */
}
.game {
  /* padding: vh; */
  font-size: 19px;
}
.game h5 {
  padding: 2vh;
  color: #f6887b;
}
.game :hover {
  background: #4b4a59;
  /* padding: vh; */
}
.harem {
  /* padding: vh; */
  font-size: 19px;
}
.harem h5 {
  padding: 2vh;
  color: #ccabda;
}
.harem :hover {
  background: #4b4a59;
  /* padding: vh; */
}
.historic {
  /* padding: vh; */
  font-size: 19px;
}
.historic h5 {
  padding: 2vh;
  color: #9fcad8;
}
.historic :hover {
  background: #4b4a59;
  /* padding: vh; */
}

.t10 {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 2vh;
  border-left: 1px solid #cccccc;
  border-bottom: 0.1px solid #cccccc;
  border-radius: 10px;
  background: #23232A;
}
.t10 a{
  width: 9vh;
}
.t10 img {
  width: 9vh;
}
.t10 h2 {
  padding-top: 2.5vh;
  padding-bottom: 2vh;
}

.posts {
  display: grid;
  grid-template-rows: min-content auto auto auto;
  padding: 2vh;
  background: #23232A;
  border-left: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  border-radius: 7px;
}
.pnav {
  display: grid;
  grid-template-columns: min-content auto auto;
}
.pnav h6 {
  color: #d0a965;
}
.pnav p {
  text-align: right;
  color: white;
}
.posts h4 {
  text-align: left;
  color: #ffffff;
}
.posts h5 {
  text-align: left;
  color: #cccccc;
}
.pfoot {
  display: grid;
  grid-template-columns: min-content min-content;
  grid-column-gap: 5px;
}
.pfoot img {
  border-radius: 100px;
  height: 5vh;
}
.pfoot p {
  color: white;
  padding-top: 1vh;
}

/* footer */

.foot {
  border-top: 1px solid white;
  width: 100%;
  height: 35vh;
}
.foot1rap {
  display: grid;
  grid-template-columns: auto auto;
  padding: 2vh;
}

.fsocial {
  border-left: 1px solid white;
  display: grid;
  grid-template-rows: min-content auto;
  /* grid-row-gap: 10px; */
  padding: 2vh;
}
.fsocial h2 {
  color: white;
}
.fsocial p {
  color: white;
}
.fsocial p span{
  color: #d0df99;
  text-decoration: dashed;
}

/* w2g */
/* middle */
.midw {
  padding-top: 14vh;
  width: 100%;
  background: linear-gradient(#000000, #4b4a59);
  
}
.midwrap {
  width: 97%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
}
.boxw {
  display: grid;
  grid-template-rows: auto auto;
  padding: 1vh;
  width: 310px;
}
.epbg {
  position: absolute;
  height: 147px;
  width: 300px;
  z-index: 1;
  filter: blur(1px);
}
.eps {
  /* background-image: url(./w2g/op.jpg); */
  width: 300px;
  /* filter: blur(1px); */
  z-index: 2;
  position: relative;
}
.eps1 {
  z-index: 1;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
}
.epnav {
  display: grid;
  grid-template-columns: auto auto;
  padding: 1px;
}
.epnav h3 {
  text-align: left;
  color: #fa002a;
}
.epnav h4 {
  text-align: right;
  color: #ff002b;
}
.eps img {
  width: 9vh;
  margin: auto;
}
.eps a {
  
  margin: auto;
}
.eps h3 {
  padding-left: 1vh;
  color: #ff002b;
}
.hostd {
  display: grid;
  grid-template-columns: 27% auto;
  padding: 1px;
  padding-top: 1vh;
}
.hostd img {
  width: 9vh;
  border-radius: 100px;
  margin-top: 2vh;
}
.hostd1 {
  display: grid;
  grid-template-rows: auto min-content min-content;
}
.hostd1 h3 {
  font-size: 15px;
  color: #ff5e00;
}
.hostd1 h4 {
  font-size: 12px;
  color: #cccccc;
}
.hostd1 h5 {
  font-size: 16px;
  color: #ffffff;
}
.foot1 {
  border-top: 1px solid white;
  width: 100%;
  height: 35vh;
  background: linear-gradient(#000000, #4b4a59);
}

/* community */
/* middle */
.midc {
  text-align: center;
  font-size: 30px;
  color: white;
  width: 100%;
  margin-top: -90vh;
}
.midc1rap {
  width: 98%;
  margin: auto;
  display: grid;
  grid-template-columns: 20% auto;
  grid-column-gap: 8px;
}
.lmidc {
  height: 45vh;
  padding: 2px;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  grid-row-gap: 4px;
  /* background: #4d4c5a; */
  border-radius: 10px;
  
}
.lmidc1 {
  height: 45vh;
  padding: 2px;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  grid-row-gap: 4px;
  
  /* background: #4d4c5a; */
  border-radius: 10px;
  /* position: fixed; */
}
.ctype {
  display: grid;
  grid-template-columns: auto auto;
  background: linear-gradient(#000000, #4b4a59,#000000);
  padding: 2px;
  height: 5vh;
  border-radius: 10px;
  color: wheat;
}
.ctype h3 {
  margin-left: 3px;
}
.ctype h4 {
  text-align: right;
  margin-right: 2vh;
  padding-top: 1px;
}
.ctype a{
  text-decoration: none;
  color: wheat;
}
.rmidc0 {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  grid-row-gap: 4px;
}
.rmidc {
  padding: 2px;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  grid-row-gap: 4px;
  background: linear-gradient(#000000, #4b4a59,#000000);
  height: 31vh;
  border-radius: 10px;
}
.cmt {
  display: grid;
  grid-template-columns: 5% auto;
}
.lcmt {
  padding: 6px;
  padding-top: 23px;
  display: grid;
  grid-template-rows: auto auto;
  grid-row-gap: 40px;
  background: #494855;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 30vh;
}
.like {
  height: 40px;
  width: 40px;
  text-align: center;
  border-radius: 100px;
  background: #4d4c5a;
  padding-top: 7px;
}
.like:hover {
  color: blue;
}
.dislike {
  height: 40px;
  width: 40px;
  text-align: center;
  border-radius: 100px;
  background: #4d4c5a;
  padding-top: 7px;
}
.dislike:hover {
  color: red;
}
.rcmt {
  display: grid;
  grid-template-rows: auto auto auto auto;
  padding: 10px;
}
.cmtnav {
  display: grid;
  grid-template-columns: 10% 10%;
}
.cmtnav h4 {
  font-size: 18px;
  color: palevioletred;
}
.cmtnav h5 {
  font-size: 16px;
  padding-top: 2px;
  color: rgb(170, 245, 255);
}
.rcmt h3 {
  font-size: 20px;
  color: white;
}
.rcmt p {
  color: #c1c1c6;
}
.cmtfoot {
  display: grid;
}
.cmtfoot img {
  border-radius: 100px;
  width: 6vh;
}
.cmtfoot h5 {
  color: #4d7aaf;
}

/* anime */
/* op */
.ivideo video {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 120vh;
  width: 100%;
  z-index: -1;
  opacity: 0.8;
  position: fixed;
}

.opcontainer {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0vh;
  left: 0;
  z-index: -1;
  position: fixed;
}
.glass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.16)
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(100px);
  /* border-radius: 20px; */
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.opmiddle {
  width: 90%;

  height: 89vh;
  position: absolute;
  top: 11vh;
  left: 10vh;

  z-index: 1;
  display: grid;
  grid-template-columns: auto 60% auto;
  /* grid-column-gap: 19px; */
  color: white;
}
.opcontent {
  display: grid;
  grid-template-rows: min-content min-content min-content min-content;
  grid-row-gap: 10px;
  padding-top: 25px;
  /* background: #5c5c66; */
  padding: 10px;
}
.opimg img {
  padding-top: 50px;
}
.opmidmid {
  display: grid;
  grid-template-columns: 5.5% min-content min-content min-content;
  grid-column-gap: 4px;
}
.opmidmid1 {
  display: grid;
  grid-template-columns: 20% 30%;
}
.opinfo {
  /* display: grid;
    grid-template-rows: min-content min-content min-content min-content; */
  grid-row-gap: 10px;
  padding-top: 40px;
  /* background: #5c5c66; */
  padding: 10px;
  margin-top: 1vh;
  padding-top: 25px;
  border-left: 1px solid white;
}

/* CSS */
.button-48 {
  border-radius: 20px;

  appearance: none;
  background-color: #ffffff;
  border-width: 0;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-family: Clarkson, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1em;
  margin: 0;
  opacity: 1;
  outline: 0;
  padding: 1.5em 2.2em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-rendering: geometricprecision;
  text-transform: uppercase;
  transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1),
    background-color 100ms cubic-bezier(0.694, 0, 0.335, 1),
    color 100ms cubic-bezier(0.694, 0, 0.335, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  white-space: nowrap;
}

.button-48:before {
  animation: opacityFallbackOut 0.5s step-end forwards;
  backface-visibility: hidden;
  background-color: #ebebeb;
  clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateZ(0);
  transition: clip-path 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
    -webkit-clip-path 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 100%;
}

.button-48:hover:before {
  animation: opacityFallbackIn 0s step-start forwards;
  border-radius: 20px;
  clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
}

.button-48:after {
  /* background-color: #FFFFFF; */
}

.button-48 span {
  z-index: 1;
  position: relative;
}
.pg {
  background: #ffffff;
  border-radius: 6px;
  color: black;
}
.hd {
  background: #ffbade;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
}
.sub {
  background: #b0e3af;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
}
.dub {
  background: #b9e7ff;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
}







/* CSS */
.button-53 {
  background-color: #DADF6B;
  border: 0 solid #E5E7EB;
  box-sizing: border-box;
  color: #000000;
  display: flex;
  font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.75rem;
  padding: .75rem 1.65rem;
  position: relative;
  text-align: center;
  text-decoration: none #000000 solid;
  text-decoration-thickness: auto;
  width: 50%;
  max-width: 460px;
  position: relative;
  cursor: pointer;
  transform: rotate(-2deg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 7vh;
}

.button-53:focus {
  outline: 0;
}

.button-53:after {
  content: '';
  position: absolute;
  border: 1px solid #000000;
  bottom: 4px;
  left: 4px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}

.button-53:hover:after {
  bottom: 2px;
  left: 2px;
}

@media (min-width: 768px) {
  .button-53 {
    padding: .75rem 3rem;
    font-size: 1.25rem;
  }
}







/* premium */
.midp{
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  padding-top: 5vh;
}
.midprap{
  width: 90%;
  height: 100vh;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
   

}
.midprap span {
  color: #fab818;
}
.pbox h5 {
  color: white;
  text-align: start;
  margin-left: 40px;
  
}

.pbox1{
  height: 70vh;
  width: 30%;
  background-color: #141519;
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  

}

.pbox2{
  height: 80vh;
  width: 30%;
  background-color: #141519;
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  

}
.pbox3{
  height: 74vh;
  width: 30%;
  background-color: #141519;
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  

}
.midprap h5{
    text-align: start;
}
.pvideo video{
  position: absolute;
  right: 0;
  bottom: 0;
  height: auto;
  width: 100%;
  z-index: -1;
  opacity: 0.8;
  position: fixed;
  aspect-ratio: 16/9;
}
/* <!-- HTML !-->
<button class="button-85" role="button">Button 85</button> */

/* CSS */
#button-85::after {
  background: #ffc94d;
}
#button-85 {
  color: #000;
}
.button-85 {
  padding: 0.6em 2em;
  margin: 1rem auto;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-85:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}