/* Базові стилі  */
:root{
  --primary-bacground-color:#000000;
  --primary-text-color:#ffffff;
}

body {
  margin: 0;

  font-family: 'Mulish', sans-serif;
  color: var(--primary-text-color);
  font-size: 16px;
  letter-spacing: 0.03em;
  background-color: var(--primary-bacground-color);
}

h1,
h2,
h3,
p,
ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-inline-start: 0;
}

a {
  font-style: normal;
  text-decoration-line: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

button {
  text-decoration: none;
  font-family: inherit;
  border: none;
  cursor: pointer;
  background-color: inherit;
  padding: 0;
  font-size: inherit;
}
img {
  display: block;
  /* width: 100%; */
}
.container{
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.button{
  padding-left:  30px;
  padding-right: 30px;
height: 50px;
 transition: transform 300ms cubic-bezier(.17,.67,.71,.72);
transition: box-shadow 300ms cubic-bezier(.17,.67,.71,.72);


color: var(--primary-text-color);
fill: var(--primary-text-color);
font-weight: 800;

  display: inline-flex;
  align-items: center;

box-shadow: 0px 4px 50px rgba(50, 108, 255, 0.5);

  border-radius: 50px;

background: linear-gradient(316.53deg, #26FFF2 13.2%, #326CFF 71.54%);
}
.button:hover{
transform: scale(1.03);
box-shadow: 0px 0px 20px rgba(44, 176, 249, 0.5);

}
.logo{
  font-size: 40px;
  min-width: 170px;
}
.logo-blue{
font-family: Lemonada;
font-weight: 400;

width: 70px;
height: 70px;

display: inline-flex;
align-items: center;
justify-content: center;

box-sizing: border-box;
border: 4px solid transparent;
border-radius: 15px;
  background: linear-gradient(var(--primary-bacground-color), var(--primary-bacground-color)) padding-box,
 linear-gradient(90deg, rgba(50,108,255,1) 0%, rgba(38,255,242,1) 100%) border-box;
}
.logo-white{
font-family: Poppins;
margin-left: 15px;
}
/* Базові стилі  */
/* стилі хедера */
.page-header{
  height: 100px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.page-header__naigation{
display: flex;
flex-wrap: wrap;
align-items: center;
width:910px ;
justify-content: space-between;
}
.page-header .container{
display: flex;
flex-wrap: wrap;
}
.page-header__functions{
  margin-left: auto;
  display: flex;
align-items: center;
  padding-left: 40px;

}
.page-header__functions__list{
  display: flex;
  gap:75px;
}
.site-nav {
  display: flex;
  gap:53px;
  padding-left: 40px;
}
 .site-nav__link{
   opacity: 0.5;
 }
 .site-nav__link_current{
opacity: 1;
position: relative;
}
.site-nav__link_current::after{
content:'';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 2px;
width: 100%;
border-radius: 50px;
background: rgb(50,108,255);
background: linear-gradient(126deg, rgba(50,108,255,1) 0%, rgba(38,255,242,1) 100%);}
/* стилі хедера */
/* main */
/* hero */
.hero__container{
  display: flex;
   max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
}
.hero__infoList{
  display: flex;
  align-items: center;
  font-weight: 800;
  line-height: 1.6;
  gap: 18px;

  margin-top: 40px;
}
.hero__infoList__item{
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__infoList__item-age{
box-sizing:border-box ;
height: 24px;
width: 60px;
border: 2px solid transparent;
background: linear-gradient(var(--primary-bacground-color), var(--primary-bacground-color)) padding-box,
linear-gradient(150deg, rgba(50,108,255,1) 0%, rgba(38,255,242,1) 100%) border-box;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.hero__infoList__item-rating{
  margin-left: 36px;
}
.hero__rating__star{
  margin-left: 12px;
}
.hero__description{
  margin-top: 25px;
max-width: 507px;
font-size: 18px;
line-height:1.6;
}
.hero__text{
 min-width: 530px;
 z-index: 2;
box-shadow: 100px 0px 100px #000000;
}
.hero__title{
  font-family: Marcellus;
  font-size: 80px;
  line-height: 1.1;
  margin-top: 125px;
}
.hero__buttons{
  display: flex;
  margin-top:  35px; ;
  gap: 30px;
}
.hero__watchButtonIcon{
  margin-right:15px ;
}
.hero__moreInfoButton{
  background: #ffffff;
  color:#323232;
  box-shadow:none;
}
.hero__photo__box{
  background-color: black;
   width:955px; 
   height:765px;
   margin-right: -15px;
   margin-left: -25px;
   /* padding-left: 15px; */

  
}.hero__photo{
max-height: 765px;
   width:925px; 
position: relative; 

 /* transform: translateX(40px); */
 left: 15px;
}
/* hero */
/* trending */
.trending{
display: flex;
flex-direction: column;
gap: 55px;
margin-top: 65px;
}
.trending__list{
  display: flex;
  flex-wrap: wrap;
  gap: 41px;
  margin-top: 40px;
}
.trending__linc{
  display: block;
  border-radius:25px ;
  overflow: hidden;
  transition: box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.trending__photo{
  width: 204px;
  height: 308px;
}
.trending__linc:focus,
 .trending__linc:hover{
box-shadow: 0px 0px 20px rgba(44, 176, 249, 0.5);
}

.trending__button{
  margin-top:55px ;
width: 135px;
}

/* trending */
/* genres */
.genres{
  margin-top: 100px;
}
.genres__list{
  display: flex;
  flex-wrap: wrap;
  gap: 23px;
  margin-top: 40px;
}
.genres__box{
width: 340px;
height: 198px;
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
}
.genres__linc{
    transition: box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
height: 100%;
display: inline-block;
border-radius: 20px;
}
.genres__linc:hover,
.genres__linc:focus{
  box-shadow: 0px 0px 20px rgba(44, 176, 249, 0.5);

}
.genres__svg{
width: 80px;
height: 80px;
}
.genres__box-romance{
background: linear-gradient(109.31deg, #FD093F 2.4%, #F383F1 100%);
}
.genres__box-drama{
  background: linear-gradient(114.5deg, #0FFFDA 2.22%, #3CDB77 68.84%);
}
.genres__box-historical{
  background: linear-gradient(109.31deg, #B936FF 2.4%, #57DEDA 100%);
}
.genres__box-action{
background: linear-gradient(109.31deg, #FD093F 2.4%, #FB1378 2.41%, #FCCB1A 100%);
}
.genres__box-sciFi{
background: linear-gradient(109.31deg, #FF6472 2.4%, #FDA75D 100%);
}
.genres__box-horor{
background: linear-gradient(110.16deg, #13547A 2.37%, #80D0C7 96.77%);
}
.genres__box-comedy{
background: linear-gradient(109.93deg, #FFF77B 2.37%, #FFBF42 50%);
}
.genres__box-documentary{
background: linear-gradient(109.31deg, #1FA2FF 2.4%, #1FA2FF 2.41%, #1F535C 97.46%);
}
/* genres */
/* actors */
.actors{
  margin-top: 70px;
}
.actors__list{
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  margin-top: 40px;
}
.actors__item{
  display: flex;
  flex-direction: column;
  gap:20px ;
  align-items: center;
}
.actors__photo{
  width: 190px;
height: 190px;
border-radius: 50%;
}
/* actors */
/* coming Soon */

.comingSoon__container{
  border-radius: 20px;
  overflow: hidden;
height: 340px;
display: flex;
 margin-top:95px ;
  background: linear-gradient(87.02deg, #0D1A73 29.67%, #000000 70.52%);
box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.1);
}
.comingSoon__linc{
display: flex;
width: 720px;
flex-direction: column;
align-items: center;
justify-content: center;
}

.comingSoon__subtitle{
  margin-top: 30px;
}
.comingSoon__img-bunny{
width: 720px;
margin-left: -25px;
}
.comingSoon__img-year{
  width: 294px;
height: 148px;
}
/* coming Soon */
/* registr */
.register{
  margin-top: 115px;
}
.register__box{
width: 1224px;
height: 270px;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;

backdrop-filter: blur(25px);

border-radius: 47px;

  background-repeat: no-repeat;
  background: linear-gradient(355deg, transparent 58.12%, #FFFFFF 124.09%), url(./images/pexels-anni-roenkae-3109816\ 1-min.jpg);
background-size: cover;
}
.register__title{
font-size: 63px;
line-height: 1;
text-transform: capitalize;

  display: block;
  width: 810px;
height: 128px;
margin-left: 45px;
}
.register__button{
  margin-left: auto;
  margin-right: auto;
}
/* registr */
/* main */
/* footer */
.footer{
  margin-top: 130px;
  padding-top: 70px;
  padding-bottom: 70px;
  background-color:  #101012;
}
.footer__container{
  display: flex;
  flex-wrap: wrap;
  gap: 85px;
}
.footer__lists{
  display: flex;
  flex-wrap: wrap;

  gap: 50px;
}
.footer__list .footer__item:not( :first-child){
margin-top:15px ;
}
/* footer */