@import url('https://fonts.googleapis.com/css2?family=Fira+Sans: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&family=Roboto:wght@100&family=Yanone+Kaffeesatz:wght@200;300;400;500&display=swap');

:root{
--red: #ff1a1a;
}
*{
  font-family: 'Yanone Kaffeesatz',sans-serif;
  margin: 0;padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
  transition: all .3s cubic-bezier(.16,.8.62,1.52);
  text-transform: capitalize;
  font-weight: normal;
  cursor:pointer;
}

*::selection{
 background: var(--red);
 color: #fff;
}









html{
 font-size: 62.5%;
 overflow-x: hidden;
}
body{
 overflow-x: hidden;
}

html::webkit-scrollbar{
 width: 1.3rem;
}
html::webkit-scrollbar-track{
background: #000;
}
html::webkit-scrollbar-thumb{
 background: var(--red);
}

section
{
 min-height: 100vh;
 padding: 0 7%;
 padding: 11rem;
}

.heading
{
 text-align: center;
 color: var(--red);
 text-transform:uppercase;
 font-size: 4rem;
}

.heading span 
{
 color: #666;
}

header{
 position:fixed;
 top: 2.5rem;
 left: 50%;
 transform:translateX(-50%);
 width: 93%;
 z-index:1000;
 background: #fff;
 box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding:2rem 3rem;
 border-radius: .5rem;
}

header .logo
{
color: #333;
font-size:2.5rem;
}
header .logo span
{
 color: var(--red);
}

header .navbar ul 
{
 display: flex;
 align-items: center;
 justify-content: center;
 list-style: none;
}
header .navbar ul li
{
  margin-left: 3rem;
}
header .navbar ul li a
{
 font-size: 2rem;
 color: #333;
}
header .navbar ul li a.active,
header .navbar ul li a:hover
{
 color: var(--red);
}

#menu
{
font-size:3rem;
color: #666;
cursor: pointer;
display: none;
}

.home
{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
background:linear-gradient(rgba(0, 0, 0,.8),rgba(0, 0, 0,.8)),
no-repeat;
background-image: url(../images/bg1.jpg);

background-size:cover;
background-position: center;
background-attachment: fixed;

}
.home .image{
 flex: 1 1 30rem;

}
.home .image img{
width:85%;
 transition: .5s;
}
.home .image img:hover
{
  transform: scale(1.03);
}
.home .content{
 flex: 1 1 40rem;
 padding: 4rem 0;
}
.home .content h3{
color: var(--red);
font-size: 4rem;
padding-bottom: 1rem;
}


.home .content h1{
color:#fff;
font-size:7rem;
}

.home .content p{
color:#aquamarine;
font-weight:400;
font-size:2.8rem;
padding: 1rem 0;
}

.home button
{
display: inline-block;
padding: .7rem 4rem;

width:18rem;
height: 5rem;
 color: #fff;
 background: var(--red);
 padding-top: 1rem;
 margin-top: 1rem;
}
.home button a 
{
  color: #fff;
  font-size:2.8rem;
}
.home button:hover
{
 transform: scale(1.02);
}
.btn
{
display: inline-block;
padding: .7rem 4rem;
font-size: 2rem;
 color: #fff;
 background: var(--red);
 padding-top: 1rem;
 margin-top: 1rem;
}
.btn:hover
{
 transform: scale(1.02);
}
.gallery{
  background: #f0f0f0;
}

.gallery .box-container{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

.gallery .box-container .box 
{
 flex: 1 1 30rem;
 height: 40rem;
 overflow: hidden;
 background: #333;
 text-align: center;
 padding: 2rem;
 margin: 2rem;
 border-radius: .5rem;
 position: relative;
 transition: .5s;
}

.gallery .box-container .box img 
{
height: 100%;
object-fit: cover;
transition: .5s;
}

.gallery .box-container .box .info
{
position: absolute;
bottom: -120%; left: 50%;
transform: translateX(-50%);
width: 80%;
background: #fff;
padding: 2rem;
border: .3rem solid var(--red);
border-radius: .5rem;
transition: .5s;
}
.gallery .box-container .box:hover .info
{
  bottom: 2rem;
}
.gallery .box-container .box:hover 
{
background: #000;
}

.gallery .box-container .box:hover img
{
  transform: scale(1.09);
}

.gallery .box-container .box .info h3
{
 background: var(--red);
 color: #fff;
 border-radius: .5rem;
 margin: 0 5rem;
 margin-top: -3.7rem;
 padding: .5rem 2rem;
 font-size: 2.5rem;
}

.gallery .box-container .box .info p
{
 font-size: 2rem;
 padding: .5rem;
 color: #666;
 padding-top:2rem ;
}

.about 
{
  background: #eee ;
  padding-bottom:3rem;
}
.about .row 
{
 display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.about .row .image 
{
 flex:1 1 40rem;
 padding: 2rem 0;
 text-align:center;
}
.about .row .image img 
{
 height: 50rem;
 transition: .5s;
}
.about .row .image img:hover
{
  transform: scale(1.1);
}
.about .row .content
{
 flex:1 1 40rem;
 
}
.about .row .content h3
{
 font-size: 5.5rem;
 color: #333;
 
}
.about .row .content h3 span
{
 color: var(--red);
}

.about .row .content p
{
 font-size: 2.3rem;
 color: #666;
 padding: 1rem 0;
}



/*slider starts*/


.slider-box {
    width     : 80%;
    max-height: 70vh;
    position  : relative;
    overflow  : hidden;
    margin    : auto;
    
}

#slider {
    width     : 100%;
    display   : inline-flex;
    transition: 0.7s;
}

#slider img {
    width:100%;
    border-radius: 1%;
}

.indicators {
    position : absolute;
    left     : 50%;
    bottom   : 20px;
    transform: translateX(-50%);
}

.indicators span {
    display      : inline-block;
    width        : 15px;
    height       : 15px;
    border-radius: 50%;
    background   : rgba(255, 255, 255, 0.5);
    cursor       : pointer;
}

.active {
    background: #ffff !important;
}
/*slider ends*/







.movies
{
background-image:url(../images/slid9.jpg);
background-size:cover;
}


.Best
{
 height: 20rem;
 width: 100%;
}
video
{
 width: 100%;
 height: 100%;
}

.movies .heading span
{
  color: #fff;
}

.movies .box-container
{
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 
}


.movies .box-container .box 
{
 flex:1 1 30rem;
 height:40rem;
 width: 10rem;
 overflow: hidden;
 position: relative;
 margin: 2rem;
 
 transition: .5s;
}
.movies .box-container .box img 
{
height: 100%;
width: 100%;
object-fit: cover;
border-radius:2%;

}
.movies .box-container .box:hover
{
  transform: scale(0.9);
  box-shadow:linear-gradient(315deg,#00ccff,#0e1538,#d400d4); 

}
.movies .box-container .box .info
{
 padding: 2rem;
 width: 100%;
 position: absolute;
 bottom: -99%; left:0;
 background: rgba(0, 0, 0, .8);
 transition: .5s;
} 
.movies .box-container .box:hover .info
{
  bottom: 0;
}
.movies .box-container .box .info h3 
{
  font-size: 3rem;
  color: #fff;
  padding-bottom:.5rem ;
}

.movies .box-container .box .info span
{
  font-size: 3rem;
  color: var(--red);
}

.movies .box-container .box .info .stars i 
{
  font-size: 2rem;
  color: orange;
  padding: 1rem .1rem;
}


.movies .box-container .box .info p 
{
  font-size: 2rem;
  color: #ccc;
  padding: .5rem 0;
}


.product
{
 background: #eee;
}

#product .price
{
 color: var(--red);
}
.product .box-container{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

.product .box-container .box
{
margin: 1rem;
padding: 2rem;
background: #fff;
border: .1rem solid rgba(0, 0, 0, .1);
text-align: center;
width: 27rem;
transition: .5s;
}

.product .box-container .box:hover
{
  box-shadow: .7rem 1rem rgba(0, 0, 0, .1);
  transform: scale(1.05);
}
.product .box-container .box img 
{
   margin: 2rem 0;
   height: 17rem;
   transition: .5s;
}
.product .box-container .box img:hover
{
 transform: scale(1.3);
}

.product .box-container .box h3
{
color: #444;
font-size: 3rem;
}


.product .box-container .box p
{
color: #999;
font-size: 2.3rem;
padding: 1rem;
}

.product .box-container .box .price
{
color: #666;
font-size:3rem;
}

.footer
{ 

 text-align: center;
 background: #222;
}
.footer .share
{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 2rem 0;
  
}

.footer .share a 
{
   font-size:2rem;
   color: #ccc;
   padding: 2rem;
   transition: .3s;
}
.footer .share a i 
{
  color: var(--red);
  margin: 1.2rem;
}
.footer .share a:hover
{
   color:#eee;
}


.footer a:hover
{
  transform: scale(1.2);
}

.footer .credit
{
  padding: 2rem 1rem;
  font-size: 3rem;
  color: #fff;
  background: #111;
}
.footer .credit a 
{
  color: var(--red);
  transition: .3s;
}
.footer .credit a:hover
{
 transform: scale(1.2);
}

.scroll-top
{
  position: fixed;
  bottom: 7.5rem;
  right: 2rem;
  z-index: 1000;
  scroll-behavior: smooth;
  display: block;
}
.scroll-top img 
{
 height:7rem;
 filter:drop-shadow(0 .3rem .5rem rgba(0, 0, 0, .2));
}



/*media queries*/
@media (max-width:991px)
{
html{
 font-size: 55%;

}
}
@media (max-width:768px)
{
#menu{
display:block;
}

header .navbar
{
position: fixed;
top: 110%;left: 0;
background: #fff;
width: 100%;
border-radius: .5rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
transform:scaleY(0);
transform-origin:top;
opacity:0;
}
header .navbar ul
{
 flex-flow:column;
 padding:2rem;
}
header .navbar ul li
{
    margin:1rem 0;
    width:100%;
}
header .navbar ul li a
{
display:block;
font-size:2.5rem;
border-bottom:.1rem solid rgba(0, 0, 0, .1);
padding:1.5rem 0;
}
.fa-times
{
 transform: rotate(180deg);
}

header .navbar.nav-toggle{
 transform:scaleY(1);
 opacity: 1;
}

.home .content {
 text-align:center;
}

 .slider-box
 {
  width: 90%;
  height: 90%;
  margin: auto;
 }
 .movies
{
background-image:url(../images/slid12.png);
background-size:cover ;
 width: 100%;
height: 100%;
}
 .Best
{
 height:10rem;
 width: auto;
}
 video
 {
  width:100%;
  height: 90%;
  margin: auto;
 }

}

@media (max-width:400px)
{
html{
 font-size: 50%;

}
section
{
  padding: 0;
  padding-top: 11rem;
}

 .about .row .image img {
  height: auto;
  width: 100%;
 }
 .product .box-container .box 
{
  width: 100%;
}
.movies
{
background-image:url(../images/slid12.png);
background-size:cover;
width: 100%;
height: 100%;
 
}
.Best
{
 height:10rem;
 width: auto;
}
 video
 {
  width:100%;
  height: 90%;
  margin: auto;
 }
 .slider-box
 {
  width: 90%;
  height: 90%;
  margin: auto;
 }
}