:root {
   --light-purple: rgb(252,237,237);
   --slider-purple: #9775df75;
   --btn-purple: rgb(150, 0, 255);
   --mid-green: rgb(96, 244, 244);
   --dark-green: rgb(5, 126, 126);
   --light-green: rgb(229, 253, 249);
   --ld-text : #f8f4f3;
   --dd-text:black;
   --header-color:#e2574e;
--set-filter: invert(100%);
--drop-down:rgb(246,215,210);
--image-invert:invert(0);
}

.darkmode{
   --light-purple:rgb(7,0,16);
   --ld-text:black;
   --dd-text:#f8f4f3;
   --header-color:#a60a2b;
   --set-filter: invert(100%);
   --drop-down:#273142;
   --image-invert:invert(100%);
}

@font-face {
   font-family: "Shabnam";
   src: url("../fonts/Shabnam.woff2") format("woff2"),
        url("../fonts/Shabnam.woff") format("woff"),
        url("../fonts/Shabnam.ttf") format("truetype");
}


* {
   padding: 0;
   margin: 0;
   list-style: none;
   text-decoration: none;
   box-sizing: border-box;
}
body {
   font-family: "Shabnam";
   transition: all .7s ease-in-out;
}

.dot{
   position: absolute; 
   top: 4px;
    right: -10px;
}

.cursor-p{
   cursor: pointer;
}
.dd-text{
   color: var(--dd-text) !important;
}
.invert-color{
filter: var(--image-invert) !important;
}
.dropdown {
   position: relative;
   display: inline-block;
}
.dropbtn {
   background-color:transparent ;
   color: white;
   padding: 10px 20px;
   font-size: 16px;
   border: none;
   cursor: pointer;
}
.dropdown-content {
   display: none;
   position: absolute;
   background-color: var(--drop-down);
   min-width: 200px;
   box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
   z-index: 20;
}
.dropdown-content a {
   color: var(--dd-text);
   padding: 12px 16px;
   text-decoration: none;
   display: block;
}
.dropdown-content a:hover {
   background-color: var();
}
.dropdown:hover .dropdown-content {
   display: block;
}

.dot2{
   position: absolute;
   right: 10px;
   top: 12px;
}


ul.menu {
   list-style: none;
   padding: 0;
}
li.menu-item {
   cursor: pointer;
   padding: 10px;
   width: 150px;
   text-align: center;
   margin-bottom: 5px;
   background: none;
   color: inherit;
}
ul.submenu {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-in-out;
   padding: 0;
   margin: 0;
}
li.submenu-item {
   padding: 8px;
   text-align: center;
}
li.submenu-item a {
   text-decoration: none;
   color: inherit;
}

nav .sidebar li:hover {
   background-color: transparent !important;

}
nav .sidebar li{
   color: var(--dd-text) !important;
   text-align:right !important;
}
.dot3{
   position: absolute;
   top: 0;
   right: 0;
}
#search-message1{
   color: red;
   font-size: 13px;
  position: absolute;
  top: 60px;
  right: 10px;
   transition: .5s all ease-in-out;
}
.mode-button{
   border: none;
   padding: .8em 2em;
   background-color: var(--primary-color);
   color: white;
   border-radius: 4px;
   font: inherit;
   text-transform: uppercase;
   font-weight: 500;
   cursor: pointer;
 }
.set-inset{
   box-shadow: inset 1px 1px 4px var(--header-color);
}


.set-filter{
   filter: var(--set-filter);
}

#theme-switch{
   height: 50px;
   width: 50px;
   padding: 0;
 
 /*  background-color: var(--light-purple);*/
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 2px;
   right: 100px;
 }
#theme-switch svg{
   filter: invert(100%);
 }
 #theme-switch svg:last-child{
   display: none;
 }
 .darkmode #theme-switch svg:first-child{
   display: none;
 }
 .darkmode #theme-switch svg:last-child{
   display: block;
 }
 #submenu1, #submenu2 {
   padding-right: 5px !important;
}
#inputTag {
   display: none;
}

.back-side{
   background-color: var(--light-purple) !important;
}

nav {
   width: 100%;
   height: 60px;
   background-color: #fff;
   position: relative;
}
.light-mc{
color:var(--ld-text);

}
.dark-mc{
   color: var(--dd-text);
}

.header-color{
   background-color: var(--header-color);
}
.light-mb{
   background-color: #f8f4f3f0;
}

nav label {
   width: 26px;
   height: 100%;
   display: block;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-right: 10px;
   cursor: pointer;
   position: relative;
   z-index: 3;

}

nav label span {
   display: inline-block;
   width: 120%;
   height: 4px;
   background-color: #000b;
   position: relative;
   border-radius: 10px;
   transition: 0.4s;
}

nav label span.top {
   top: -3px;
}

nav label span.bottom {
   top: 3px;
}

nav .sidebar {
   width: 60%;
   height: 100vh;
   position: absolute;
   top: 0;
   right: 0;
   background-color: #fff;
   padding-top: 60px;
   transform: translateX(100%);
   transition: 0.4s;
}

nav .sidebar li {
   text-align: center;
   margin-bottom: 1px;
   color: #000;
   cursor: pointer;
   transition: 0.3s;
   padding: 8px 0;
}

nav .sidebar li:hover {
   background-color: silver;
}

#inputTag:checked~ul {
   transform: translateX(0);
}

#inputTag:checked~label span {
   background-color:  var(--header-color) !important ;
   margin-right: 10px !important;
}

#inputTag:checked~label span.middel {
   opacity: 0;
}

#inputTag:checked~label span.top {
   transform: rotate(-45deg);
   top: 4px;
}

#inputTag:checked~label span.bottom {
   transform: rotate(45deg);
   top: -4px;
}

body {
   background-color: var(--light-purple);
   overflow-x: hidden;
}


.move {
   float: left;
   position: absolute;
   left: 20px;
   top: 12.5px;
}
.bebas-neue-regular {
   font-family: "Bebas Neue", sans-serif;
   font-weight: bolder;
   font-style: normal;
   color: white;
   font-size: 20px;
 }

.search-bar-container {
   display: flex;
   align-items: center;
   background-color: transparent;
   padding: 5px;
   width: 260px;
   height: 40px;
   border-radius: 10px;
   margin: 10px 0 10px 10px;
   position: absolute;
   top: -3px;
   right: 50px;
   transition: width 0.6s;
   z-index: 10;
}

.mein {
   position: relative !important;
}

.magnifier,
.magnifier2 {
   width: 25px;
   cursor: pointer;
   position: absolute;
   right: 20px;
}

.mic-icon {
   width: 30px;
   position: absolute;
   left: 10px;
   transition: width 0.2s;
   transition-delay: 0.3s;
}

.input {
   font-size: 18px;
   background-color: var(--light-purple);
   border: none;
   margin: 10px 50px;
   width: 100%;
   outline: none;
   color: #666;

   border-radius: 5px;
   transition: width 0.3s;
   transition-delay: 0.3s;
}

.active.search-bar-container,
.search-bar-container2 {
   width: 50px;
   position: absolute;
   top: -3px;
   right: 50px;
}

.active .input,
.active2 .input2 {
   width: 0;
}

.active .mic-icon,
.active2 .mic-icon {
   width: 0;
}

.nav-options {
   display: flex;
   justify-content: space-between;
   align-items: center;
   align-content: center;
   width: 60%;
}

.nav-options li {

   position: relative;
}

.down-icon {
   font-size: 10px;
   transition: all .3s ease-in;
}

.po-re {
   position: relative;
}

.nav-options li:hover .down-icon {
   rotate: 180deg;
   transition: all .3s ease-in;
}

.option-subset {
   opacity: 0;
   display: none;
   background-color: white;
   justify-content: center;
   align-items: center;
   transition: all .5s ease-in;
}

.nav-options li:hover .option-subset {
   opacity: 1;
   transition: all .5s ease-in;
   display: flex;
}

.ul-subsets {
   position: absolute;
   top: 35px;
   right: 0px;
   display: flex;
   background-color:  var(--ld-text) ;
   padding: 10px;
   border-radius: 5px;
   transition: all .3s ease-in;
}

.ul-subsets li {
   padding: 5px;
   color: var(--dd-text);
   margin: 0;
   padding: 10px 40px;
   transition: all .3s ease-in;
}

.ul-subsets li:hover {
   background-color: var(--light-purple);
   transition: all .3s ease-in;
}

a {
   text-decoration: none;
}

.hamb {
   z-index: 100 !important;
}

.sidebar {
   z-index: 30 !important;



}

.sidebar li {
   width: 170px;
}


.movie-sec {
   padding-right:  40px;
   display: flex;
   align-items: center;
   align-content: center;
   justify-content: center;
   width: 95%;
   margin-top: 30px;
}

.movie-hover {
   transition: all .2s ease-in;
   position: relative;
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
  

}

.movie-hover h3,
.movie-hover span,
.movie-hover button {
   position: absolute;
   opacity: 0;
   transition: all .2s ease-in;
   right: 60px;
}

.movie-hover h3{
   opacity: 1;
}

.movie-hover h3 {
   top: 20px;
   color: white;
   font-size: 20px;
}

.movie-hover span {
   top: 50px;
   font-size: 10px;
   color: #d1d0d0;
   opacity: 0;
   transition: all .2s ease-in;
}

.movie-hover:hover span,
.movie-hover:hover h3,
.movie-hover:hover button {
   opacity: 1;
   transition: all .2s ease-in;
}

.movie-hover:hover img {
   filter: brightness(0.5);
   transition: all .2s ease-in;

}

.movie-hover img {
   transition: all .2s ease-in;
   border-radius: 15px !important;
padding:0 8.5px !important;
}

.movie-hover button {
   color: var(--mid-green);
   background-color: transparent;
   top: 70px;
   font-size: 10px;
   border-radius: 5px;
   outline: none;
   border: 2px solid var(--mid-green);
   padding: 8px 12px;
}

@media (min-width: 992px) {
   .movie-hover img {
      width: 200px;
   }
}

@media (min-width: 1230px) and (max-width:1245) {
   .movie-hover h3 {
      top: 110px;
      color: black;
   }
   .movie-hover {
      margin-bottom: 30px;
   }
   .movie-hover h3 ,.movie-hover span,.movie-hover button{
      right: 130px;
   }
}


@media (max-width:450px) {
   .movie-hover img {
      width: 100px;
   }

   .movie-hover h3 {
      font-size: 10px;
      right: 20px;
      top: 60px;
      color: black;
   }

   .movie-hover span {
      display: none;
   }

   .movie-hover button {
      right: 20px;
      top: 30px;
      padding: 3px 5px;
   }
}


@media screen and (min-width: 450px) and (max-width: 1225px) {
   .movie-hover img {
      width: 150px;
   }

   .movie-hover h3 {
      font-size: 10px;
      right: 50px;
      top: 90px;
      color: black;
   }

   .movie-hover span {
      display: none;
   }

   .movie-hover button {
      right: 50px;
      top: 30px;
      padding: 3px 5px;
   }
}

@media screen and (min-width: 770px) and (max-width: 1000px) {
   .movie-hover img {
      width: 120px;
   }

   .movie-hover h3 {
      font-size: 10px;
      right: 20px;
      top: 60px;
      color: black;
   }

   .movie-hover span {
      display: none;
   }

   .movie-hover button {
      right: 20px;
      top: 30px;
      padding: 3px 5px;
   }
}
@media (min-width: 1247px) {
   .movie-hover h3 {
     right: 40px;
      top: 120px;
      color: black;
   }
   .movie-hover{
      margin-bottom: 40px;
   }
}
.telegram {
   background-color: #143a7b;
   padding: 10px 50px;
   border-radius: 15px;

}


.footer {
   display: flex;
   align-items: center;
   justify-content: center;
   align-content: center;
   margin-top: 70px;
}

.telegram a {
   color: white;
}

.telegram-info {
   float: left;
   margin: 0 10px;
}

.telegram-info::before {
   content: "";
   background-color: #b9b9b9;
   width: 2px;
   height: 100%;
}

footer{
   position: absolute;
   bottom: 20px;
   width: 100%;
   display: flex;
   justify-content:center;
   align-items: center;
   align-content: center;
}

.footer{
   display: flex;
   justify-content: space-between;
   align-items: center;
   align-content: center;
   width: 100%;
}

.header-sec{
   margin-bottom: 30px;
}


.shiny-circle {
   width: 40px;
   height: 40px;
   border: 1px solid white;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   
   align-items: center;
   justify-content: center;
   background-color: transparent;
   display: none;
}
.sharp-triangle {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-right: 19px solid rgba(246, 244, 244, 0.911);
   position: absolute;

}

.movie-hover:hover .shiny-circle{
   display: flex;
}