/* fontawesome cdn link */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

/* google font cdn link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
   --main-color:#ffdd95;
   --black:#222;
   --light-black:#1a1a1a;
   --bg-color:#0d0d0d;
   --white:#fff;
   --light-white:#e0e0e0;
   --blue:#007aff;
   --Capri:#00bbff;
   --red:#ff0000;
}

*{
   box-sizing: border-box;
   padding: 0; margin: 0;
   text-decoration: none;
   outline: none; border: none;
   text-transform: capitalize;
   transition: .2s all linear;
   font-family: "Poppins", sans-serif;
}

html{
    filter: brightness(1.03);
   font-size: 62.5%;
   scroll-padding-top: 7rem;
   scroll-behavior: smooth;
   overflow-x: hidden;
}

::-webkit-scrollbar{
   width: .8rem;
}

::-webkit-scrollbar-thumb{
   background-color: #ffdd95;
}

::-webkit-scrollbar-track{
    background: transparent;
}

section{
   padding: 1.4rem;
   margin: 0 auto;
   /*max-width: 1200px;*/
}

.profile-btn i{
  font-size: 26px;
  cursor: pointer;
  color: #fff;
}


.btn{
   display: inline-block;
  /* margin-top: 1rem;*/
   padding: .6rem 1.6rem;
   font-size: 1.8rem;
   color: #0d0d0d;
   background-color: #ffdd95;
   border-radius: 1rem;
   cursor: pointer;
}

.btn:hover{
   background-color: #fff;
}

.btn i{
   margin-right: .5rem;
}

.ptn{
   display: inline-block;
  /* margin-top: 1rem;*/
   padding: .6rem 1.6rem;
   font-size: 1.8rem;
   color: #0d0d0d;
   background-color: #ffdd95;
   border-radius: 1rem;
   cursor: pointer;
}

.ptn i{
   margin-right: .5rem;
}

.vtn{
   margin-bottom: 20rem;
   border: .1rem solid #070606;
   display: block;
   margin-top: 15rem;
   padding: .6rem 1.6rem;
   font-size: 1.8rem;
   color: rgb(255 255 255);
   background-color: #ff0000;
   border-radius: 1rem;
}

.hbtn{
   display: inline-block;
  /* margin-top: 1rem;*/
   padding: .6rem 1.6rem;
   font-size: 1.8rem;
   color: #0d0d0d;
   background-color: #ffdd95;
   border-radius: 1rem;
   cursor: pointer;
}

.hbtn:hover{
   background-color: #fff;
}

.heading{
   font-size: 3rem;
   /*margin-bottom: 1rem;*/
   color: #00bbff;
}

.header{
   position: sticky;
   top: 0; left: 0; right: 0;
   z-index: 1000;
}

.header.active{
   background-color: rgba(0,0,0,.8);
}

.header .flex{
   border-bottom: .1rem solid #ffdd95cf;
   border-top: .1rem solid #ffdd95cf;
   border-radius: 1rem;
   background: #000000;
   /*background: #000000e8;*/
   display: flex;
   align-items: center;
}

#menu-btn{
   font-size: 2.5rem;
   color: #ffdd95;
   margin-right: 1rem;
   cursor: pointer;
}

.logo {
   position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
}

.fm {
   position: absolute;
   top: -3px;       /* ↑ FM ko upar le jata hai */
   right: -20px;     /* → right corner me shift */
   font-size: 10px;
   color: #ffdd95;
   /*opacity: 0.7;*/
   font-weight: 600;
   letter-spacing: 1px;
}


.header .flex .logo{
   margin-right: auto;
}

.header .flex .logo a{
   font-size: 2.5rem;
   color: #fff;
   font-weight: bold;
   font-style: italic;
}

.header .flex .search-form{
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header .flex .search-form .search-bar{
   background-color: #1a1a1a;
   border-radius: .5rem;
   padding: 1rem 1.5rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   width: 50rem;
}

.header .flex .search-form .search-bar input{
   width: 100%;
   background: none;
   font-size: 1.8rem;
   color: #fff;
}

.header .flex .search-form .search-bar input::-webkit-search-cancel-button{
   appearance: none;
}

.header .flex .search-form .search-bar label{
   font-size: 2rem;
   color: #fff;
   cursor: pointer;
}

.header .flex .search-form a{
   display: block;
   font-size: 2rem;
   text-align: center;
   height: 4rem;
   width: 4.5rem;
   line-height: 4rem;
   border-radius: .5rem;
   color: #fff;
   background-color: #1a1a1a;
}

.header .flex .search-form a:hover{
   background-color: #ffdd95;
   color: #222;
}

.header .flex .search-form .search-bar label:hover{
   color: #ffdd95;
}

.header .btn{
   margin-top: 0;
   margin-left: auto;
}

#search-toggler{
   height: 3.5rem; 
   width: 4.5rem;
   line-height: 3.5rem;
   font-size: 2rem;
   color: #fff;
   background-color: #1a1a1a;
   border-radius: .5rem;
   margin-left: 1rem;
   text-align: center;
   display: none;
}

.side-bar{
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
   z-index: 1100;
   background: rgba(0,0,0,.3);
   display: none;
}

.side-bar.active{
   display: block;
}

.side-bar .navbar{
   height: 100%;
   width: 25rem;
   background-color: rgb(0 0 0);
   padding: 3rem;
   overflow-y: scroll;
   animation: slide-in .2s cubic-bezier(.32,.85,.21,1.26);
}

@keyframes slide-in {
   from{
      opacity: 0;
      transform: translateX(-10rem);
   }
   to{
      opacity: 1;
      transform: translateX(0);
   }
}

.side-bar .navbar #close-btn{
   margin-bottom: 2rem;
   padding: 1rem 2rem;
   border: .1rem solid #555;
   border-radius: 5rem;
   display: inline-block;
   color: #fff;
   cursor: pointer;
   font-size: 1.8rem;
}

.side-bar .navbar #close-btn:hover{
   background-color: #fff;
   color: #222;
}

.side-bar .navbar #close-btn i{
   margin-right: .5rem;
}

.side-bar .navbar #close-btn:hover i{
   margin-right: 1rem;
}

.side-bar .navbar a{
   border-radius: .5rem;
   border: .1rem solid rgb(255 255 255 / 27%);
   text-align: center;
   display: block;
   margin-block: .5rem;
   padding: 1rem;
   /*padding: .6rem 0;*/
   font-size: 1.8rem;
   color: #ffdd95
}

.side-bar .navbar a:hover{
   color: #fff;
}

.side-bar .navbar .title{
   background-color: #1a1a1a;
   color: #fff;
   font-size: 2rem;
   border-radius: .5rem;
   padding: .8rem 0;
   text-align: center;
   margin: 1rem 0;
}

.side-bar .navbar .row{
   column-count: 2;
   column-gap: 2rem;
}

.auth-box{
  border: .2rem solid #00bbff;
  border-right: .2rem solid #ffdd95cf;
  border-radius: 1rem;
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#1a1a1a;
  padding:20px;
  width:300px;
  box-shadow:0 0 10px rgba(0,0,0,0.3);
  z-index:999;
}

.auth-box form{
   max-width: 50rem;
   margin: 0 auto;
   border-radius: .5rem;
   text-align: center;
   background-color: #1a1a1a;
}

.auth-box h3{
   font-size: 3rem;
   text-transform: uppercase;
   color: #fff;
}

.auth-box input{
  border: .2rem solid #00bbff;
  border-radius: 1rem;
  width:100%;
  padding:10px;
  margin:6px 0;
}

.auth-box p{
   font-size: 1.8rem;
   color: #e0e0e0;
}

.auth-box span{
  color:#ffdd95;
  cursor:pointer;
}

.auth-box button{
   margin-bottom: .5rem;
   display: inline-block;
   margin-top: 1rem;
   padding: .6rem 1.6rem;
   font-size: 1.8rem;
   color: #0d0d0d;
   background-color: #ffdd95;
   border-radius: 1rem;
   cursor: pointer;
}

.hero .slide {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
}

.hero .slide img {
   margin-top: .5rem;
   border-radius:1rem;
   border: .1rem solid #00bbff;
   /*border-radius: 2rem;
   padding: 1.4rem;*/
   width: 100%;
   height: 98%;
   object-fit: fill; /* ya contain agar crop nahi chahiye */
   object-position: center;
}

.hero .slide .content {
   position: absolute;
   bottom: 2rem;
   /* left: 2rem;*/
   z-index: 10;
}

.hero .slide .content span{
   font-weight: 500;
   font-size: 1.5rem;
   color:#ff0000;
   /*text-transform: uppercase;*/
   padding: .2rem .3rem;
   border-radius: .5rem;
   background-color: rgb(255 255 255);
   border: .1rem solid #00bbff;
}

.hero .slide .content h3{
   margin-top: .5rem;
   margin-bottom: 1.5rem;
   font-size: clamp(2rem, 5rem, 7rem);
   line-height: 1.2;
   max-width: 50rem;
   color: #00ff99;
}

.hero .slide .content .flex{
   display: flex;
   gap: 1.5rem;
}

.hero .slide .content .flex p{
   font-size: 1.8rem;
   color: #e0e0e0;
}

.hero .slide .content .flex p i{
   padding-right: .8rem;
   color: #fff;
}
/*
.hero .slide .content .buttons{
   margin: 2rem 0;
}*/

.hero .slide .content .buttons a:last-child{
   padding: 1.3rem;
   border-radius: 10rem;
   background-color: #ff0000;
   color: #fff;
   font-size: 1.2rem;
}

.hero .slide .content .buttons a:last-child i{
   margin-left: .5rem;
}

.hero .slide .content .buttons a:last-child:hover{
   color: #ffdd95;
}

.hero .slide .content .description{
   font-size: 1.8rem;
   color: #e0e0e0;
   line-height: 1.8;
   max-width: 50rem;
}

/*
.hero .swiper-pagination-bullests{
   bottom: 3rem;
}

.hero .swiper-pagination-bullest{
   height: 1.5rem;
   width: 1.5rem;
   background-color: #fff;
   opacity: .5;
   margin-bottom: 1rem;
}

.hero .swiper-pagination-bullest-active{
   background-color: #ffdd95;
   opacity: 1;
}
*/

.popular-header{
   border-top: .1rem solid #ffdd95cc;
   padding: .5rem;
   border-radius: .5rem;
   background-color: #1a1a1a;
   border-bottom: .1rem solid #ffdd95cc;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 2rem;
}

.popular-nav{
   display: flex;
   gap: .5rem;
}

.popular-nav .swiper-button-prev,
.popular-nav .swiper-button-next{
   position: static;
   width: 35px;
   height: 35px;
   background: #444;
   border-radius: 50%;
}

.popular-nav .swiper-button-prev::after,
.popular-nav .swiper-button-next::after{
   font-size: 14px;
   color: #fff;
}

.trending .posts-container{
   background-color: rgba(0, 0, 0, .8);
   display: block;
   margin: 0;
   overflow-x: hidden;
}

.trending .posts-container .post{
   border-radius: 1rem;
   background: #222;
   /*margin-bottom: .3rem;*/
   width: 20rem;
}

/* latest release */
.latest-header{
   border-top: .1rem solid #ffdd95cc;
   padding: .5rem;
   border-radius: .5rem;
   background-color: #1a1a1a;
   border-bottom: .1rem solid #ffdd95cc;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 2rem;
}

.latest-nav{
   display: flex;
   gap: .5rem;
}

.latest-nav .swiper-button-prev,
.latest-nav .swiper-button-next{
   position: static;
   width: 35px;
   height: 35px;
   background: #444;
   border-radius: 50%;
}

.latest-nav .swiper-button-prev::after,
.latest-nav .swiper-button-next::after{
   font-size: 14px;
   color: #fff;
}

/* adult */
.adult-header{
   border-top: .1rem solid #ffdd95cc;
   padding: .5rem;
   border-radius: .5rem;
   background-color: #1a1a1a;
   border-bottom: .1rem solid #ffdd95cc;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 2rem;
}

.adult-nav{
   display: flex;
   gap: .5rem;
}

.adult-nav .swiper-button-prev,
.adult-nav .swiper-button-next{
   position: static;
   width: 35px;
   height: 35px;
   background: #444;
   border-radius: 50%;
}

.adult-nav .swiper-button-prev::after,
.adult-nav .swiper-button-next::after{
   font-size: 14px;
   color: #fff;
}

/* adultery */
.adultery-header{
   border-top: .1rem solid #ffdd95cc;
   padding: .5rem;
   border-radius: .5rem;
   background-color: #1a1a1a;
   border-bottom: .1rem solid #ffdd95cc;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 2rem;
}

.adultery-nav{
   display: flex;
   gap: .5rem;
}

.adultery-nav .swiper-button-prev,
.adultery-nav .swiper-button-next{
   position: static;
   width: 35px;
   height: 35px;
   background: #444;
   border-radius: 50%;
}

.adultery-nav .swiper-button-prev::after,
.adultery-nav .swiper-button-next::after{
   font-size: 14px;
   color: #fff;
}

/* erotic */
.erotic-header{
   border-top: .1rem solid #ffdd95cc;
   padding: .5rem;
   border-radius: .5rem;
   background-color: #1a1a1a;
   border-bottom: .1rem solid #ffdd95cc;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 2rem;
}

.erotic-nav{
   display: flex;
   gap: .5rem;
}

.erotic-nav .swiper-button-prev,
.erotic-nav .swiper-button-next{
   position: static;
   width: 35px;
   height: 35px;
   background: #444;
   border-radius: 50%;
}

.erotic-nav .swiper-button-prev::after,
.erotic-nav .swiper-button-next::after{
   font-size: 14px;
   color: #fff;
}

/* incest */
.incest-header{
   border-top: .1rem solid #ffdd95cc;
   padding: .5rem;
   border-radius: .5rem;
   background-color: #1a1a1a;
   border-bottom: .1rem solid #ffdd95cc;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 2rem;
}

.incest-nav{
   display: flex;
   gap: .5rem;
}

.incest-nav .swiper-button-prev,
.incest-nav .swiper-button-next{
   position: static;
   width: 35px;
   height: 35px;
   background: #444;
   border-radius: 50%;
}

.incest-nav .swiper-button-prev::after,
.incest-nav .swiper-button-next::after{
   font-size: 14px;
   color: #fff;
}

/* lust */
.lust-header{
   border-top: .1rem solid #ffdd95cc;
   padding: .5rem;
   border-radius: .5rem;
   background-color: #1a1a1a;
   border-bottom: .1rem solid #ffdd95cc;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 2rem;
}

.lust-nav{
   display: flex;
   gap: .5rem;
}

.lust-nav .swiper-button-prev,
.lust-nav .swiper-button-next{
   position: static;
   width: 35px;
   height: 35px;
   background: #444;
   border-radius: 50%;
}

.lust-nav .swiper-button-prev::after,
.lust-nav .swiper-button-next::after{
   font-size: 14px;
   color: #fff;
}

/* romance */
.romance-header{
   border-top: .1rem solid #ffdd95cc;
   padding: .5rem;
   border-radius: .5rem;
   background-color: #1a1a1a;
   border-bottom: .1rem solid #ffdd95cc;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 2rem;
}

.romance-nav{
   display: flex;
   gap: .5rem;
}

.romance-nav .swiper-button-prev,
.romance-nav .swiper-button-next{
   position: static;
   width: 35px;
   height: 35px;
   background: #444;
   border-radius: 50%;
}

.romance-nav .swiper-button-prev::after,
.romance-nav .swiper-button-next::after{
   font-size: 14px;
   color: #fff;
}

/*--  heading latest  --*/

.heading-latest{
   background-color: #1a1a1a;
   color: #00bbff;
   border-radius: .5rem;
   font-size: 3rem;
   margin-bottom: 2rem;
   padding: .5rem;
   border: .1rem solid #ffdd95;
}

/*-- posts container --*/

.posts-container{
   border-radius: 1rem;
   border-left: .1rem solid rgba(255, 255, 255, .1);
   border-right: .1rem solid rgba(255, 255, 255, .1);
   display: grid;
   grid-template-columns: repeat(auto-fit, 20rem);
   gap: 2rem;
   align-items: flex-start;
   justify-content: center;
}

.posts-container .post{
   border: .1rem solid #00bbff;
   border-right: .1rem solid #ffdd95cf;
   text-align: center;
   border-radius: .9rem;
   background-color: #222;
   user-select: none;
}

.posts-container .post .image{
   position: relative;
   height: 30rem;
   border-radius: .5rem;
   overflow: hidden;
}

.posts-container .post .image img{
   border-radius: .8rem;
   height: 100%;
   width: 100%;
   object-fit: fill;
}

.posts-container .post .image::before{
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   /*background: linear-gradient(rgba(13,13,13,.8), transparent, rgba(13,13,13,.8));*/
   transition: .2s linear;
}

.posts-container .post .image:hover::before{
   opacity: 0;
}

.posts-container .post .image .type{
   border-top-left-radius: .8rem;
   position: absolute;
   top: 0; left: 0;
   background-color:#00ff99;
   color: #222;
   border-bottom-right-radius: .5rem;
   padding: .1rem .5rem;
   font-size: 1.5rem;
}

.posts-container .post .image .caption{
   position: absolute;
   bottom: 0; right: 0;
   background-color: #ffdd95;
   color: #222;
   border-top-left-radius: .5rem;
   padding: .1rem .5rem;
   font-size: 1.5rem;
}

.posts-container .post h3{
   margin: 1rem 0;
   font-weight: normal;
}

.posts-container .post h3 a{
   border-bottom: .1rem solid #fff;
   padding: .1rem;
   margin-top: -.9rem;
   height: 5.5rem;
   border-radius: 1rem;
   background-color: rgba(13, 13, 13, .8);
   text-align: center;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   /*width: 20rem;*/
   /*white-space: nowrap;*/
   color: #fff;
   font-size: 1.8rem;
}

.posts-container .post h3 a:hover{
   color: #ffdd95;
}

.posts-container .post .info span{
   font-size: 1.6rem;
   color: #e0e0e0;
}

.posts-container .post .info span i{
   margin-right: .5rem;
}

.posts-container .post .info span:last-child{
   margin-right: 1rem;
   margin-left: 1rem;
}

/*---all post button----*/
.vbtn{   
   border: .1rem solid #00bbff;
   margin: 1rem;
   padding: .6rem 1.6rem;
   font-size: 1.8rem;
   color: #00ff99;
   background-color: #1a1a1a;
   border-radius: 1rem;
}

.latest .button {
   border-top: .1rem solid #ffdd95;
   border-radius: .5rem;
   margin-top: 3rem;
   text-align: center;
   border-bottom: .1rem solid #ffdd95;
}

/*------+++++++++-------*/

.anime-details .row{
   display: flex;
   gap: 1rem;
   padding: 2rem;
   border-radius: .5rem;
   background-color: #1a1a1a;
   flex-direction: column;
   align-items: center;
}

.anime-details .row .image{
   width: 20rem;
}

.anime-details .row .image img{
   height: 30rem;
   width: 20rem;
   object-fit: fill;
   border-radius: .5rem;
}

.anime-details .row .image .ratings{
   background-color: #222;
   /*padding: .8rem 1rem;
   margin: 1rem 0;*/
   border-radius: .5rem;
   /*text-align: center;*/
}

.anime-details .row .image .ratings p{
   letter-spacing: 1.5px;
   color: #fff;
   margin-bottom: .5rem;
   margin-left: 4rem;
}

.anime-details .row .ratings p span{
   margin-left: .5rem;
   font-size: 1.8rem;
   color: #ffdd95;
}

.anime-details .row .image .ratings i{
   letter-spacing: 3px;
   color: yellow;
}

.anime-details .row .image .buttons .btn{
   width: 100%;
   text-align: center;
}

.anime-details .row .image .buttons .btn:last-child{
   background: crimson;
   color: #fff;
}

.anime-details .row .image .buttons .btn:last-child:hover{
   background-color: #fff;
   color: #222;
}

.anime-details .row .content .title{
   margin-bottom: .7rem;
   text-align: center;
   font-size: 2.2rem;
   color: #fff;
}

.anime-details .row .content .synopsis{
   font-size: 1.6rem;
   color: #e0e0e0;
   /*padding: 1rem 0;
   line-height: 1.8;*/
}

.anime-details .row .content .flex{
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   padding: 1rem 0;
}

.anime-details .row .content .flex p{
   flex: 1 1 30rem;
   font-size: 1.8rem;
   color: #e0e0e0;
}

.anime-details .row .content .flex p span{
   color: #fff;
}

.anime-details .row .content .genere{
   display: flex;
   justify-content: center;
   gap: 1rem;
}

.anime-details .row .content .genere a{
   font-size: 1.8rem;
   padding: .5rem 1rem;
   border-radius: .5rem;
   color: #ffdd95;
   border: .1rem solid rgba(255,255,255,.1);
}

.anime-details .row .content .genere a:hover{
   background-color: #ffdd95;
   color: #222;
}

body{
    margin:0; 
    background: #444444;
   /* background:#070606; */
    color:#fff; 
    font-family: sans-serif; 
    /*padding-bottom:110px;*/ 
}

/* Chapter List */
.chapter{
  color: #00ff99;
  display: flex;
  background-color: #070606a1;
  border-radius: .5rem;
  padding: 13px; 
  font-size: 14px; 
  border-block: 1px solid #222;
  cursor:pointer;
  justify-content: space-between;
  align-items: center;
}

.chapter::after {
  width: 35px;
 height: 35px;
 border-radius: 50%;
 display: inline-grid;
 place-items: center;
 background: #070606;
 border: 2px solid #e0e0e0;
 box-shadow: 0 0 0 6px #00000000;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
 content: "▶";
 font-size: 16px;
 color: rgb(255 255 255);
}
.chapter.active{ 
   background:#222; 
}


/* Floating Player */
#playerBar{
  border-radius: 1rem;
  border: .1rem solid #00bbff;
  border-right: .1rem solid #ffdd95cf;
  position:fixed; bottom:-1000px; left:0; width:100%;
  background:#1a1a1a; padding:16px;
  transition:bottom .35s ease;
  box-shadow:0 -3px 10px rgba(0,0,0,.4);
}

.player-details .row{
   border: .1rem solid #00bbff;
   border-right: .1rem solid #ffdd95cf;
   margin-top: 20rem;
   display: flex;
   border-radius: .5rem;
   background-color: #1a1a1a;
   align-content: stretch;
   justify-content: center;
}

.player-details .row .image img{
   border: .1rem solid #00bbff;
   border-right: .1rem solid #ffdd95cf;
   height: 35rem;
   width: 20rem;
   object-fit: fill;
   border-radius: .5rem;
}

.player-top{ display:flex; 
    justify-content:space-between; 
    font-size:10px; 
    margin-top: 15px;
}


.controls{ 
   border: .1rem solid #00bbff;
   border-right: .1rem solid #ffdd95cf;
   display:flex; 
   justify-content:center; 
   align-items:center; 
   gap:40px; 
   margin:8px 0; 
}

.controls button{
   padding-left: .5rem;
   padding-right: .5rem;
   border-radius: 1rem;
   border: .1rem solid #00bbff;
   border-right: .1rem solid #ffdd95cf;
   margin: .7rem;
   background: none;
   color: #ffdd95b0;
   cursor: pointer;
}

input[type="range"]{
  width:100%; height:4px; background:#444; border-radius:3px;
}

.time-line{ 
    display:flex; 
    justify-content:space-between; 
    font-size:12px; 
    margin-top:8px; 
    color:#bbb; 
}

.speed-btn{
   padding: .5rem;
   margin: 6px auto;
   width: fit-content;
   border-radius: 1rem;
   border: .1rem solid #00bbff;
   border-right: .1rem solid #ffdd95cf;
   margin-bottom: 6rem;
   text-align: center;
   margin-top: 6px;
   color: #00bbff;
   cursor: pointer;
   font-size: 13px;
}

.drops{
   color: #ffdd95;
   margin: 1rem 0;
   padding: 1.5rem 2rem;
   border-radius: .5rem;
   background-color: #1a1a1a;
}

.drops p{
   margin-block: 1rem;
   font-size: 1.7rem;
   color: #fff;
}

.drops .flex{
   display: flex;
   flex-wrap: wrap;
   gap: .3rem;
   flex-direction: column;
}

.drops .flex a{
   font-size: 1.8rem;
   border-radius: .5rem;
   padding: .5rem 1rem;
   background-color: #e0e0e0;
   color: #1a1a1a;
}

.drops .flex a:hover{
   background-color: #ffdd95;
}

.drops .flex a.active{
   background-color: #fff;
}

/* Default arrow hide */
.description-box summary {
   color: white;
   font-size: 1.8rem;
   list-style: none;
   cursor: pointer;
}

/* Chrome ke default arrow remove */
.description-box summary::-webkit-details-marker {
   display: none;
}

/* Close state (➥) */
.description-box summary::before {
   content: "➥ ";
   font-size: 16px;
}

/* Open state (➦) */
.description-box[open] summary::before {
   content: "➦ ";
   padding: .2rem;
   font-size: 18px;
}











.footer{
   background-color: #0d0d0d;
}

.footer .list h3{
   color: #0d0d0d;
   font-size: 3rem;
}

.footer .list p{
   font-size: 1.4rem;
   line-height: 1.6;
   color: #0d0d0d;
   padding: .5rem 0;
}

.footer .list .list-links{
   display: flex;
   flex-wrap: wrap;
   gap: 10rem;
  /* margin: 1rem 0;
   padding-top: 1rem;*/
}

.footer .list .list-links a{
   /*padding: .5rem 1rem;
   font-size: 1.8rem;*/
   color: #0d0d0d;
   background-color: #0d0d0d;
   border-radius: .1rem;
}

.footer .list .list-links a:hover{
   background-color: #ffdd95;
   color: #222;
}

.footer .row{
   display: flex;
   justify-content: space-between;
   padding: 1rem 0;
   align-items: center;
   gap: 2rem;
}

.footer .row .extra-links a{
   margin-right: 1.5rem;
   font-size: 1.8rem;
   color: #e0e0e0;
   display: inline-block;
}

.footer .row .extra-links a:hover{
   color: #fff;
}

.footer .row .share a{
   font-size: 2rem;
   height: 4rem;
   width: 4.5rem;
   line-height: 4rem;
   border-radius: .5rem;
   background-color: #1a1a1a;
   color: #e0e0e0;
   text-align: center;
   margin-left: .5rem;
}

.footer .row .share a:hover{
   background-color: #ffdd95;
   color: #222;
}

.footer .credit{
   text-align: center;
   font-size: 2rem;
   color: #e0e0e0;
   border-top: .1rem solid rgba(255,255,255,.1);
   padding-top: 3rem;
   padding-bottom: 1rem;
   margin-top: 1rem;
}

.footer .credit span{
   color: #ffdd95;
}












/* media queries */

@media (max-width:1200px){

   html{
      font-size: 55%;
   }

}

@media (max-width:991px){

   .footer .list{
      text-align: center;
   }

   .footer .list .list-links{
      justify-content: center;
   }

   .footer .row{
      margin-top: 15rem;
      flex-flow: column;
      text-align: center;
   }

   .footer .row .extra-links a{
      padding: 1rem;
   }

}

@media (max-width:450px){

   html{
       font-size: 50%;
   }

   /*.hero .slide::before{
      background: rgba(0,0,0,.7);
   }*/

   .hero .slide .content h3{
      padding: .5rem 1rem;
      border-radius: 1rem;
      background-color: #000000e0;
      border: .1rem solid #00bbff;
      font-weight: 405;
      font-size: 1.8rem;
     /* letter-spacing: 1px;*/
   }

}



/* 18+ Disclaimer */
#disclaimerOverlay{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.85);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.disclaimerBox{
    max-width:500px;
    background:#1c1c1c;
    color:#fff;
    padding:25px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 0 20px rgba(0,0,0,0.7);
}

.disclaimerBox h2{
    color:#ff4444;
    margin-bottom:15px;
}

.disclaimerBox p{
    font-size:12px;
    /*line-height:1.6;*/
    margin-bottom:10px;
}

.d-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:20px;
}

.ok-btn{
    background:#28a745;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:6px;
    cursor:pointer;
}

.exit-btn{
    background:#dc3545;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:6px;
    cursor:pointer;
}

.ok-btn:hover,
.exit-btn:hover{
    opacity:0.9;
}

.native-ad {
    margin: 20px auto;       /* upar niche thoda space */
    max-width: 100%;         /* screen ke width ke hisaab se fit ho jaye */
    text-align: center;      /* ad center me dikhe */
}