@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

*{
font-family: 'Poppins', sans-serif;
margin: 0 auto;
padding: 0;
scroll-behavior: smooth;
box-sizing: border-box;
scroll-padding-top: 2rem;
}

:root{
--main-color: #ffb43a;
--hover-color: hsl(37, 94%, 57%);
--body-color: #1e1e2a;
--container-color: #2d2e37;
--text-color: #fcfeff;
}

a{
text-decoration: none;
}

li{
list-style: none;
}

img{
width: 100% ;
}

body{
background: var(--body-color);
color:  var(--text-color);
}

.container{
/* border: solid 1px red ; */
max-width: 1018px;
margin: auto;
width: 100%;
}

.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--body-color);
z-index: 100;
}

.bx{
cursor: pointer;
}

.nav{
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
}

.logo{

font-size: 1.4rem;
color: var(--text-color);
font-weight: 600;
text-transform: uppercase;
margin: 0 auto 0 0 ;
}

.logo span{
color: var(--main-color);
}

.search-box{
max-width: 240px ;
width: 100% ;
display: flex;
align-items: center;
position: relative;
left: 280px;
column-gap: 0.7rem;
padding: 8px 15px;
border-radius: 4rem;
background: var(--container-color);
margin-right: 1rem;
}

.search-box .bx:hover{
color: var(--main-color);
}

.search-box .bx{
font-size: 1.1rem;
}

#search-input{
width: 100%;
border: none;
outline: none;
color: var(--text-color);
background: transparent;
font-size: 0.938rem;
}

.user{
position: relative;
left: 130px;
/* border: solid 1px red ; */
display: flex;
}

.user-img{
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
object-position: center;
}

.navbar{
/* border: solid 1px red ; */
position: fixed;
top: 30%;
transform: rotateY(-50%);
left: 18px;
display: flex;
flex-direction: column;
row-gap: 2.1rem;
}

.nav-link{
display: flex;
flex-direction: column;
align-items: center;
color: #b7b7b7;
}

.nav-link:hover,.nav-active{
color: var(--text-color);
transition: 0.3s all linear;
transform: scale(1.1);
}

.nav-link .bx{
font-size: 1.6rem;
}

.nav-link-title{
font-size: 0.7rem;
}

section{
padding: 3rem 0 2rem;
}

.home{
position: relative;
min-height: 470px;
display: flex;
align-items: center;
margin-top: 5rem !important;
border-radius: 0.5rem;
}

.home-img{
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
object-fit: cover;
border-radius: 0.5rem;
}

.home-text{
position: relative;
right: 350px;
}

.home-title{
font-size: 2rem;
font-weight: 600;
}

.home-text p{
font-size: 0.938rem;
margin: 10px 0 20px;
color: var(--main-color);
}

.watch-btn{
display: flex;
align-items: center;
color: var(--text-color);
/* position: relative;
right: 50px; */
}

.watch-btn .bx{
position: relative;
right: 30px;
font-size: 21px;
background: var(--main-color);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.watch-btn .bx:hover{
background-color: var(--hover-color);
}

.watch-btn span{
font-size: 1rem;
font-weight: 400;
position: relative;
right: 85px;
}

.heading{
display: flex;
justify-content: space-between;
align-items: center;
background: var(--container-color);
padding: 8px 14px;
border: 1px solid hsl(200 100% 99% / 5%);
margin-bottom: 2rem;
}

.heading-title{
font-size: 1.2rem;
font-weight: 500;
}

.movie-box{
position: relative;
width: 100%;
/* height: 380px; */
overflow: hidden;
/* border:  solid 1px red; */
}

.movie-box-img{
width: 100%;
height: 100%;
object-fit: cover;
}

.movie-box .box-text{
position: absolute;
bottom: 0;
left:  0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 14px;
background: linear-gradient(8deg,  hsl(240 17% 14% / 74%) 14%, hsl(240 17% 14% / 14%) 44% );
overflow: hidden;
}

.movie-title{
font-size: 1.1rem;
font-weight: 500;
}

.movie-type{
position: relative;
/* right: 80px; */
font-size: 0.938rem;
font-weight: 500;
}

.swiper-btn{
display: flex;
}

.swiper-button-next, .swiper-button-prev{
position: static !important ;
margin:  0 0 0 10px !important ; 
}

.swiper-button-next::after,
.swiper-button-prev::after{
color: var(--text-color);
font-size: 28px !important ;
font-weight: 700;
position: relative;
left: 140px ;
}

.play-btn{
position: absolute;
bottom: 1.1rem;
right: 2.2rem;
}

.movie-title{
position: relative;
right: 10px;
}

.movie-type{
position: relative;
right: 10px;
}

.movies .heading{
padding: 10px 14px;
}

.movies-content{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(227px, 1fr));
gap: 1.5rem;
}

.movies-content .movie-box:hover .movie-box-img{
transform: scale(1.1);
transition: 0.5s;
}

.next-page{
display: flex;
align-items: center;
justify-content: center;
margin-top: 2.5rem;
}

.next-btn{
background: var(--main-color);
padding: 12px 20px;
color: var(--text-color);
font-weight: 500;
}

.next-btn:hover{
background-color: var(--hover-color);
transition: 03s all linear;
}

.copyright{
text-align: center;
padding: 20px;
}

.play-container{
position: relative;
min-height: 540px;
margin-top: 5rem !important;
}

.play-img{
position: absolute;
width:  100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: -1;
}

.play-text{
position: absolute;
bottom: 0;
left: 0;
width: 100% ;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 40px;
background: linear-gradient(8deg,  hsl(240 17% 14% / 74%) 14%, hsl(240 17% 14% / 14%) 44% );
}

.play-text h2{
font-size: 1.5rem;
font-weight: 600;
}

.rating{
display: flex;
align-items: center;
font-size: 1.1rem;
color: var(--main-color);
margin-top: 4px;
column-gap: 2px;
}

.tags{
display: flex;
align-items: center;
column-gap: 8px;
margin: 1rem 0;
}

a .bx{
position: relative;
left: 24px;
}

.home-text .bx{
position: relative;
left: -35px;
}

.tags span{
background: var(--container-color);
padding: 0 4px;
}

.play-movie{
position: absolute;
bottom: 15rem;
right: 30rem;
display: flex !important ;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: var(--main-color);
font-size: 24px;
animation: animate 2s linear infinite;
}

@keyframes animate{
    0%{
        box-shadow: 0 0 0 rgb(255,180,58,0.7);
    }
    40%{
        box-shadow: 0 0 0  50px rgb(255,193,7,0);
    }
    80%{
        box-shadow: 0 0 0 50px rgb(255,193,7,0);
    }

    100%{
        box-shadow: 0 0 0 rgb(255,193,7,0);
    }
}

.video-container{
position: fixed;
top: 0;
left: 0;
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: hsl(234 10% 20% / 60%);
z-index: 400;
}

.video-container.show-video{
display: flex;
}

.video-box{
position: relative;
width: 82%;
}

.video-box #myvideo{
width: 100%;
aspect-ratio: 16/9;
}

.close-video{
position: absolute;
top: +1rem;
right: 2rem;
font-size: 70px;
color: var(--main-color);
}

.about-movie{
margin-top: 2rem;
}

.mvbx{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 300px;

}

.about-movie h2{
font-size: 1.4rem;
font-weight: 600;
color: var(--main-color);
}

.about-movie p{
max-width: 600px;
font-size: 0.938rem;
margin: 10px 0;
}

.cast-heading{
display: flex;
flex-direction: row;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--main-color);
}

.cast{
display: flex;
flex-direction: row;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px,150px));
gap: 1rem;
}

.cast-img{
width: 150px;
height: 180px;
object-fit: cover;
object-position: center;
}

.top-div{
width: 80%;
height: 550px;
border: solid 0px red ;

}

.top-img{
width: 100%;
height: 550px;
object-fit: cover;
object-position: center;
z-index: -1;
}

.top-like{
color: var(--main-color);
border: solid 0px red ;
position: relative;
bottom: 120px ;
font-size: 21px;
left: 5px;
}

.top-text{
position: relative;
bottom: 120px ;
color: var(--text-color);
border: solid 0px red ;
}

.telegram-link{
background: var(--main-color);
display: flex;
flex-direction: row;
width: 80px;
height: 40px;
border: solid 0px red ;
}

.Tglink{
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 40px ;
border: 0px solid black ;
}

.Tglink a{
top: 2.8px;
position: relative;
right: 25px;
font-size: 30px;
color: var(--text-color);
}

.Instalink{
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 40px ;
border: 0px solid black ;
}

.Instalink a{
position: relative;
right: 21.9px;
top: 2.8px;
font-size: 30px;
color: var(--text-color);
}

@media screen and (max-width: 500px) {

.navbar{
flex-direction: row;
width: 100%;
/* border-top: 1px solid hsl(200 100% 99% / 5%);
background: linear-gradient(8deg, hsl(240 17% 14% / 100%) 5%, hsl(240 17% 14% / 90%) 100% ); */
margin: 0 auto;
position: absolute;
bottom: 15px;
left: 0;
right: 0;
height: 65px;
}

.nav-link .bx {
font-size: 20px;
}

.logo{
font-size: 15px;
position: relative;
left: 28px;
top: 10px;
}

.search-box{
width: 35%;
right: -5px;
position: absolute;
top: 20px;
font-size: 15px;
}

/* .search-box .bx{
font-size: 20px;
} */

.user{
position: absolute;
right: 90px;
top: 20px;
}

.search-box #search-input{
width: 100%;
height: 100%;
font-size: 10px;
}

.swiper-btn{
position: relative;
right: 90px;
}

}





@media screen and (max-width: 500px) {

.navbar{
flex-direction: row;
width: 100%;
/* border-top: 1px solid hsl(200 100% 99% / 5%);
background: linear-gradient(8deg, hsl(240 17% 14% / 100%) 5%, hsl(240 17% 14% / 90%) 100% ); */
margin: 0 auto;
position: absolute;
bottom: 15px;
left: 0;
right: 0;
height: 65px;
}

.nav-link .bx {
font-size: 20px;
}

.logo{
font-size: 15px;
position: relative;
left: 28px;
top: 10px;
}

.search-box{
width: 35%;
right: -5px;
position: absolute;
top: 20px;
font-size: 15px;
}

/* .search-box .bx{
font-size: 20px;
} */

.user{
position: absolute;
right: 90px;
top: 20px;
}

.search-box #search-input{
width: 100%;
height: 100%;
font-size: 10px;
}

.swiper-btn{
position: relative;
right: 90px;
}

.movie-title{

font-size: 15px;

}

.movie-type{

font-size: 12px;

}

.box-text{
max-width: inherit;
}


.home-text{
font-size: 10px;
position: relative;
right: 50px;
font-size: 10px;
top: 120px;
}



}