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

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

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



@font-face {
    font-family: WrestleMania;
    src: url(../fonts/WRESTLEMANIA.ttf);
}
@font-face {
    font-family: Carvale;
    src: url(../fonts/Carnevalee_Freakshow.ttf);
}

:root{
    --quartz : #515945;
    --cordovan: #894242;
    --vintage_red: #831113;
    --almond: #EBD4CC;
    --bg-color: #131313;

}

*{
    margin: 0;
    padding: 0;
}

body{
    margin: 0;
    padding: 0;
    background-color: #131313;
    font-family: 'Poppins', sans-serif;
    color: white;
    overflow-x: hidden;
    /* background-image: url(../../assets/theate-bg.jpg); */
}


h1{
    /* font-family: Carvale; */
    /* font-family: 'Taviraj', serif; */
    font-family: 'Libre Baskerville', serif;
    color: var(--vintage_red);
    font-size: 5.2rem;
    /* animation: reveal 1s linear; */
 
}
h2{
    /* font-family: Carvale; */
    font-family: 'Taviraj', serif;
    font-size: 4.2rem;
    color: var(--vintage_red);
    font-weight: bolder;

}

p{
    display: block !important;
    /* animation: reveal 1s linear; */
    /* text-align: justify; */
    line-height: 1.8rem;
    font-size: 1em;

}

.btn-primary:focus,.btn-primary:active {
    outline: none !important;
    box-shadow: none;
    background-color: var(--vintage_red);
 }


.btn-primary{
    background-color: var(--vintage_red);
    color: white;
    border-color: var(--vintage_red);
}
.btn-primary:disabled{
    background-color: grey;
    color: white;
    border-color: grey;
}

.bg-danger{
    background-color: var(--vintage_red);
    color: white;
    border-color: var(--vintage_red);

}

.btn-primary:hover{
    background-color: var(--cordovan);
    color: white;
    border-color: var(--cordovan);
}

.nav-brand-img{
    /* max-width: 10%; */
    width: 220px;
    height: auto;

}



/* Navigation Bar  */
/* .index-navbar{
    padding: 0.8rem 0;
    background-color: transparent !important;
    border: none !important;
    transition: top 0.3s;



} */
.navbar{
    /* background-color: var(--vintage_red); */
    background-color: black;
    /* padding: 1rem 0; */
    /* border: 4px var(--vintage_red) solid; */
    transition: top 0.3s;
}


.navbar-nav  .nav-item a{
    /* color: white; */
    color: var(--almond);
    font-size: 1.2vw;
    font-weight: bold;
}

.navbar-nav .nav-item{
    padding: 0 0.4rem;
}

.navbar-nav .nav-item .nav-link:hover{
    color: var(--almond);
    border-bottom: 1px aliceblue solid;
}

.navbar-toggler:focus{
    border: none;
    outline: unset;
    box-shadow: none;
}

.accordion .accordion-button{
    border: none;
    outline: unset;
    box-shadow: none;

}

.accordion .accordion-item{
    margin-bottom: 2rem;
}

/* Header  */

.hero-image{
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
    background: url('../../assets/header-img.webp');
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-image::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.hero-content{
    position: relative;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90vh;
    margin: 0 auto;
}

.hero-content-inner h1{
    margin-bottom: 20px;
    color: white;
}

.hero-content-inner p{
    width: 85%;
    margin: 0 auto;
    line-height: 30px;
}
.hero-content-inner button{
    width: 200px;
    height: 70px;
    margin-top: 24px;
    background-color: var(--vintage_red);
    color: white;
    font-weight: bold;
    border: 2px red solid;
    border-radius: 5px;
}

.hero-content-inner button:hover{
    width: 200px;
    height: 70px;
    margin-top: 24px;
    background-color: var(--cordovan);
    color: white;
    font-weight: bold;
    border: 2px red solid;
    border-radius: 5px;
}
/* header{
    background-image: url(../../assets/header-img.jpg);
    object-fit: cover;
    height: 100vh;
} */

.welcome-section{
    margin-top: 5%;
}

.welcome-section h1{
    font-size: 6.2rem;
    /* color: var(--almond); */
    color: white;
}


/* About us  */





/* Gallery  */

#gallery{
    margin-top: 5%;
}

#carouselGallery{
    height: 90vh;
}

#carouselGallery .carousel-inner {
    height: 100%;  /* Set the height to 100% to fill the carousel container */
  }
  
#carouselGallery.carousel-item {
    height: 100%;  /* Set the height to 100% to fill the carousel container */
  }
  
#carouselGallery  .carousel-item img {
    object-fit: contain; /* Preserve the aspect ratio of the images while filling the slide */
    height: 100%; /* Set the height to 100% to fill the slide */
    width: 100%; /* Set the width to 100% to fill the slide */
}
/* Carousel */



/*About us */

.aboutus p{
    text-align: justify;
    font-size: 1.2rem;
    line-height: 2.5rem;


}

/* Services  */

/* Offers */
#offer{
    /* background-image: url(../../assets/vintage-back.jpg); */
    /* object-fit: cover; */
    background: rgb(0,0,0);
    background: linear-gradient(142deg, rgba(0,0,0,1) 0%, rgba(111,8,12,1) 47%, rgba(222,6,6,1) 100%);
}

#offer h2{
    color: white;
}

#offer h4{
    font-weight: bolder;
}


/*Booking */
#carouselAutoplaying img{
    width: 100%;
    height: 30vh;
    max-height: 30vh;
    object-fit: contain;
  
  
}

.custom-card{
    border: 2px var(--vintage_red) solid;
}
/*Booking */


/* Thearter Details  */
.available-slots{
    margin-bottom: 2rem;
}

.available-slots .form-check{
    padding: 0;
 }
/* Venue Details Checkbox */

#booking_details .card .card-body .custom-radio label{
    cursor: pointer;
    margin: 0.2rem;
}
  
#booking_details .card .card-body .custom-radio .form-check-input{
  display: none;
}


  
#booking_details .card .card-body .custom-radio label{
  position: relative;
  display: inline-block;
  border: 2px solid #00ab41 ;
  color: #00ab41;
  font-weight: bolder;
  padding: 4px 5px;
  border-radius: 5px;
  /* width: 10rem; */
  /* width: 10rem; */
  /* max-width: 10rem; */
  text-align: center;
}
  

  #booking_details .card .card-body .custom-radio
  :checked ~ label{
    background: #00ab41;
    color: white;
    
  
  }
  
  #booking_details .card .card-body .form-check
  :disabled ~ label{
    border: 2px solid grey   ;
    background-color: grey;
    cursor: not-allowed;
    color: white;
    
  
}


/* Services  */
#service .cards-wrapper {
    display: flex;
    justify-content: center;
  }
  #service .card img {
    max-width: 100%;
    max-height: 100%;
    /* height: 11em; */
  }
  #service .card {
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: none;
    border-radius: 0;
    background-color: black;
    width: 90%;
    height: 30rem;

  }
  #service .carousel-inner {
    padding: 1em;
  }
  #service .carousel-control-prev,
  #service .carousel-control-next {
    background-color: #e1e1e1;
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
  }
  @media (min-width: 768px) {
    .service-card img {
      height: 11em;
    }
  }
/* End of Services  */

  



/* Thearter Details  */


/* Contact Us  */

#contact-us{
    background: rgb(0,0,0);
    background: linear-gradient(142deg, rgba(0,0,0,1) 0%, rgba(111,8,12,1) 47%, rgba(222,6,6,1) 100%);

}
/* Contact Us  */



/*FAQ*/
#accordionFlush h2{
    font-family: 'Montserrat';
}


/* footer  */

footer{
    background-color: black;
    color: white;
    margin: 0;
}

footer h5{
    padding-bottom: 1.5em;
}

/* @media screen and (min-width:576px) {
    #services .carousel-inner{
        display: flex;
    }

    #services .carousel-item{
        display: block;
        margin-right: 0;
        flex: 0 0 calc(100%/3);
    }

    #services .image-wrapper{
        /* height: 10em; 
        height: 16vw;
    
    }
}
 */




@media (max-width: 768px) {

    body{
        overflow-x: hidden ;
    }

    #terms h2{
        font-size: 2.5em;
    }

    #terms p{
        text-align: justify !important;
    }

    #booking_details .card .card-body .custom-radio label{
        margin: 1rem 0;
        min-width: 60vw;
        width: 60vw;
    }

    .available-slots{
        flex-direction: column;
    }

    #services .card .card-body{
       height: auto;
    }

    #contact-us .map-section iframe{
        margin-top: 2rem;
        width: 100%;
    }

    #carouselGallery{
        height: auto;
    }

    /* Services */
    #service .card{

        margin-bottom: 2rem;
        height: auto;
        width: 100%;
        /* margin: 1.5em; */

    }

    .spacer{
        display: none;
    }

    .hero-content{
        width: 100%;
    }

    .hero-content-inner h1{
        font-size: 32px;
    }
    .hero-content-inner p{
        width: 100%;
        padding: 0 2rem;
        margin: 0;
    }

    .navbar-nav  .nav-item a{
        /* color: white; */
        font-size: 1.2rem;
        /* font-weight: bold; */
    }
}

/* Whatsapp Icon */
.whatsapp-icon{
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 1.2em;
    z-index: 1000;
}
.whatsapp-icon button{
    font-size: 2.5rem;
}


/* ======================================== FAQ.php ====================================================*/
.bg-custom{
    background-color: var(--vintage_red) !important;
}
/* ======================================== FAQ.php ====================================================*/

/* ======================================== Theaters.php ====================================================*/

#theater-body{
    background: rgb(0,0,0);
    background: linear-gradient(142deg, rgba(0,0,0,1) 0%, rgba(111,8,12,1) 47%, rgba(222,6,6,1) 100%);
}

.theater-section .card{
    background-color: black;

}

.theater-section .card img{
    max-width: 100%;
    background-size: cover;
    padding: 0;
    
}

#glimpse p{
    line-height: 2.5rem;
}

/* ======================================== Theaters.php ====================================================*/



/* ======================================== Theaters_Details.php ====================================================*/

#booking_card .card{
    background-color: black;
    /* background-color: #485461;
    background-image: linear-gradient(315deg, #485461 0%, #28313b 74%); */

}



/* ======================================== Terms & Condition.php ====================================================*/

#terms p{

    line-height: 2.2em  ;

}

#ordered-list li {
    padding: 10px 0;
}