@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

:root{
    --color:#171717;
    --red:#fa0202;
    --white:white;
}


.carousel-inner{
    width:100%;
    height:80vh;
    position: relative;
    z-index: 0 !important;
}
.carousel-item img{
    width:100%;
    height:80vh;
    object-fit: cover;
} 
.carousel-caption{
    position: absolute;
    top:32%;
    z-index: 4 !important;
}
.carousel-caption h1{
    font-size:65px;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 800;
    
}
.carousel-caption h4{
    font-size:20px;
    font-family:"poppins";
}
.over-colour {
    background: linear-gradient(331deg, rgba(22, 22, 22, 0.662) 100%, rgba(21, 21, 21, 0.605) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.movie-name{

   display: flex;
   justify-content: space-between;
   width:100%;
   height:auto;
   padding: 8%;
   background: rgb(80,8,8);
   background: linear-gradient(270deg, rgba(80,8,8,1) 7%, rgba(0,0,0,0.9612219887955182) 46%);

}
.movie-name-1{
    width:47%;
    height: auto;
    position: relative;
}
.movie-name-1 img{
    width:100%;
    height:auto;
    object-fit:contain;  
}

 .over-colour-1 {
    position: absolute;
    z-index:2;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity:0%;
    background: rgb(122,17,17);
    background: linear-gradient(270deg, rgba(122,17,17,0) 28%, rgba(0,0,0,0.9612219887955182) 66%);
} 
.movie-name-1 h4{
    color: white;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight:700;
    margin-bottom:20px;
}
.movie-name-1 p{
    color: white;
    font-family: 'opensans',Arial,sans-serif;
}

.gallery-topic{
    text-align: center;
    color: #fa0202;
    font-family: 'opensans';
    font-weight:700;
    margin-top:50px;
    margin-bottom:30px;

 }
 .gallery-picture{
    margin-top:50px;
    margin-bottom:80px;
}
.mb-3 img{
    width:100%;
    height:280px;
    object-fit: cover;
}











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

   
.carousel-inner{
    width:100%;
    height:auto;
    position: relative;
    z-index: 0 !important;
}
.carousel-item img{
    width:100%;
    height:50vh;
    object-fit: cover;
} 
.carousel-caption{
    position: absolute;
    top:25%;
    z-index: 4 !important;
}
.carousel-caption h1{
    font-size:40px;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 800;
    
}
.over-colour {
    background: linear-gradient(331deg, rgba(22, 22, 22, 0.662) 100%, rgba(21, 21, 21, 0.605) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.movie-name{

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:100%;
    height:auto;
    padding: 8%;
    background: rgb(80,8,8);
    background: linear-gradient(270deg, rgba(80,8,8,1) 7%, rgba(0,0,0,0.9612219887955182) 46%);
 
 }
 .movie-name-1{
     width:100%;
     height: auto;
     position: relative;
 }
 .movie-name-1 img{
     width:100%;
     height:100%;
 }
 
 .over-colour-1 {
     position: absolute;
     z-index:2;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity:0%;
     background: rgb(122,17,17);
     background: linear-gradient(270deg, rgba(122,17,17,0) 28%, rgba(0,0,0,0.9612219887955182) 66%);
 }
 .movie-name-1 h4{
     color: white;
     font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700;
 }
 .movie-name-1 p{
     color: white;
     font-family: 'opensans',Arial,sans-serif;
 }
 
 




}
@media screen and (min-width:321px) and (max-width:375px){

  
.carousel-inner{
    width:100%;
    height:auto;
    position: relative;
    z-index: 0 !important;
}
.carousel-item img{
    width:100%;
    height:50vh;
    object-fit: cover;
} 
.carousel-caption{
    position: absolute;
    top:25%;
    z-index: 4 !important;
}
.carousel-caption h1{
    font-size:50px;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 800;
    
}
.over-colour {
    background: linear-gradient(331deg, rgba(22, 22, 22, 0.662) 100%, rgba(21, 21, 21, 0.605) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.movie-name{

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:100%;
    height:auto;
    padding: 8%;
    background: rgb(80,8,8);
    background: linear-gradient(270deg, rgba(80,8,8,1) 7%, rgba(0,0,0,0.9612219887955182) 46%);
 
 }
 .movie-name-1{
     width:100%;
     height: auto;
     position: relative;
 }
 .movie-name-1 img{
     width:100%;
     height:100%;
 }
 
 .over-colour-1 {
     position: absolute;
     z-index:2;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity:0%;
     background: rgb(122,17,17);
     background: linear-gradient(270deg, rgba(122,17,17,0) 28%, rgba(0,0,0,0.9612219887955182) 66%);
 }
 .movie-name-1 h4{
     color: white;
     font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700;
     font-size:25px;
 }
 .movie-name-1 p{
     color: white;
     font-family: 'opensans',Arial,sans-serif;
 }
 
 



}

@media screen and (min-width:376px) and (max-width:425px){

    
.carousel-inner{
    width:100%;
    height:auto;
    position: relative;
    z-index: 0 !important;
}
.carousel-item img{
    width:100%;
    height:50vh;
    object-fit: cover;
} 
.carousel-caption{
    position: absolute;
    top:25%;
    z-index: 4 !important;
}
.carousel-caption h1{
    font-size:50px;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 800;
    
}
.over-colour {
    background: linear-gradient(331deg, rgba(22, 22, 22, 0.662) 100%, rgba(21, 21, 21, 0.605) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.movie-name{

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:100%;
    height:auto;
    padding: 8%;
    background: rgb(80,8,8);
    background: linear-gradient(270deg, rgba(80,8,8,1) 7%, rgba(0,0,0,0.9612219887955182) 46%);
 
 }
 .movie-name-1{
     width:100%;
     height: auto;
     position: relative;
 }
 .movie-name-1 img{
     width:100%;
     height:100%;
 }
 
 .over-colour-1 {
     position: absolute;
     z-index:2;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity:0%;
     background: rgb(122,17,17);
     background: linear-gradient(270deg, rgba(122,17,17,0) 28%, rgba(0,0,0,0.9612219887955182) 66%);
 }
 .movie-name-1 h4{
     color: white;
     font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700;
     font-size:25px;
 }
 .movie-name-1 p{
     color: white;
     font-family: 'opensans',Arial,sans-serif;
 }
 
 



}

@media screen and (min-width:426px) and (max-width:600px){

     
.carousel-inner{
    width:100%;
    height:auto;
    position: relative;
    z-index: 0 !important;
}
.carousel-item img{
    width:100%;
    height:50vh;
    object-fit: cover;
} 
.carousel-caption{
    position: absolute;
    top:30%;
    z-index: 4 !important;
}
.carousel-caption h1{
    font-size:50px;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 800;
    
}
.over-colour {
    background: linear-gradient(331deg, rgba(22, 22, 22, 0.662) 100%, rgba(21, 21, 21, 0.605) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.movie-name{

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:100%;
    height:auto;
    padding: 8%;
    background: rgb(80,8,8);
    background: linear-gradient(270deg, rgba(80,8,8,1) 7%, rgba(0,0,0,0.9612219887955182) 46%);
 
 }
 .movie-name-1{
     width:100%;
     height: auto;
     position: relative;
 }
 .movie-name-1 img{
     width:100%;
     height:100%;
 }
 
 .over-colour-1 {
     position: absolute;
     z-index:2;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity:0%;
     background: rgb(122,17,17);
     background: linear-gradient(270deg, rgba(122,17,17,0) 28%, rgba(0,0,0,0.9612219887955182) 66%);
 }
 .movie-name-1 h4{
     color: white;
     font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700;
     font-size:25px;
 }
 .movie-name-1 p{
     color: white;
     font-family: 'opensans',Arial,sans-serif;
 }
 
 



}

@media screen and (min-width:601px) and (max-width:768px){

     
.carousel-inner{
    width:100%;
    height:auto;
    position: relative;
    z-index: 0 !important;
}
.carousel-item img{
    width:100%;
    height:50vh;
    object-fit: cover;
} 
.carousel-caption{
    position: absolute;
    top:30%;
    z-index: 4 !important;
}
.carousel-caption h1{
    font-size:50px;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 800;
    
}
.over-colour {
    background: linear-gradient(331deg, rgba(22, 22, 22, 0.662) 100%, rgba(21, 21, 21, 0.605) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.movie-name{

    display: flex;
    flex-direction:column;
    justify-content: space-between;
    width:100%;
    height:auto;
    padding:7%;
    background: rgb(80,8,8);
    background: linear-gradient(270deg, rgba(80,8,8,1) 7%, rgba(0,0,0,0.9612219887955182) 46%);
 
 }
 .movie-name-1{
     width:100%;
     height: auto;
     position: relative;
 }
 .movie-name-1 img{
     width:100%;
     height:100%;
     
 }
 
 .over-colour-1 {
     position: absolute;
     z-index:2;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity:0%;
     background: rgb(122,17,17);
     background: linear-gradient(270deg, rgba(122,17,17,0) 28%, rgba(0,0,0,0.9612219887955182) 66%);
 }
 .movie-name-1 h4{
     color: white;
     font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700;
     font-size:25px;
 }
 .movie-name-1 p{
     color: white;
     font-family: 'opensans',Arial,sans-serif;
 }
 
 







}

@media screen and (min-width:769px) and (max-width:900px){

     
.carousel-inner{
    width:100%;
    height:auto;
    position: relative;
    z-index: 0 !important;
}
.carousel-item img{
    width:100%;
    height:50vh;
    object-fit: cover;
} 
.carousel-caption{
    position: absolute;
    top:30%;
    z-index: 4 !important;
}
.carousel-caption h1{
    font-size:50px;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 800;
    
}
.over-colour {
    background: linear-gradient(331deg, rgba(22, 22, 22, 0.662) 100%, rgba(21, 21, 21, 0.605) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.movie-name{

    display: flex;
    flex-direction:column;
    justify-content: space-between;
    width:100%;
    height:auto;
    padding: 8%;
    background: rgb(80,8,8);
    background: linear-gradient(270deg, rgba(80,8,8,1) 7%, rgba(0,0,0,0.9612219887955182) 46%);
 
 }
 .movie-name-1{
     width:100%;
     height: auto;
     position: relative;
 }
 .movie-name-1 img{
     width:100%;
     height:100%;
     
 }
 
 .over-colour-1 {
     position: absolute;
     z-index:2;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity:0%;
     background: rgb(122,17,17);
     background: linear-gradient(270deg, rgba(122,17,17,0) 28%, rgba(0,0,0,0.9612219887955182) 66%);
 }
 .movie-name-1 h4{
     color: white;
     font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700;
     font-size:25px;
 }
 .movie-name-1 p{
     color: white;
     font-family: 'opensans',Arial,sans-serif;
 }
 
 










}

@media screen and (min-width:901px) and (max-width:992px){

   
     
.carousel-inner{
    width:100%;
    height:auto;
    position: relative;
    z-index: 0 !important;
}
.carousel-item img{
    width:100%;
    height:60vh;
    object-fit: cover;
} 
.carousel-caption{
    position: absolute;
    top:30%;
    z-index: 4 !important;
}
.carousel-caption h1{
    font-size:50px;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 800;
    
}
.over-colour {
    background: linear-gradient(331deg, rgba(22, 22, 22, 0.662) 100%, rgba(21, 21, 21, 0.605) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.movie-name{

    display: flex;
    flex-direction:row;
    justify-content: space-between;
    width:100%;
    height:auto;
    padding: 8%;
    background: rgb(80,8,8);
    background: linear-gradient(270deg, rgba(80,8,8,1) 7%, rgba(0,0,0,0.9612219887955182) 46%);
 
 }
 .movie-name-1{
     width:100%;
     height: auto;
     position: relative;
 }
 .movie-name-1 img{
     width:100%;
     height:100%;
     
 }
 
 .over-colour-1 {
     position: absolute;
     z-index:2;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity:0%;
     background: rgb(122,17,17);
     background: linear-gradient(270deg, rgba(122,17,17,0) 28%, rgba(0,0,0,0.9612219887955182) 66%);
 }
 .movie-name-1 h4{
     color: white;
     font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
     font-weight:700;
     font-size:25px;
 }
 .movie-name-1 p{
     color: white;
     font-family: 'opensans',Arial,sans-serif;
 }
 
 









}