@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Pacifico&display=swap');

/* General Styling */
*{
    margin: 0px;
    padding: 0px;
    transition: .5s ease-in-out;
    color: rgb(190, 190, 190) !important;
    text-decoration: none !important;
    /* font-family: 'Dancing Script', cursive; */
    /* font-family: 'Pacifico', cursive; */
    font-family: 'Roboto Slab', serif;
    list-style: none;
    user-select: none;
}
/* * p, * a, * p span, * a span{
    font-size: large;
} */
* span{
    color: rgb(249, 32, 86) !important;
}
*::-webkit-scrollbar{
    width: 3px;
    height: 3px;
}
*::-webkit-scrollbar-thumb{
    background-color: rgb(249, 32, 86);
}
* button a{
    color: rgb(249, 32, 86) !important;
}
body{
    overflow-x: hidden;
}
embed{
    height: 80vh;
    display: none;
}
select{
    background: none !important;
    border: none;
    border-bottom: 1px solid rgb(249, 32, 86) !important;
    outline: none !important;
    box-shadow: none !important;
    color: rgb(100, 100, 100) !important;
}
select:focus{
    color: rgb(190, 190, 190) !important;
    border-bottom: 1px solid rgb(190, 190, 190) !important;
}
.content * li{
    list-style: circle !important;
}
.books{
    overflow-x: scroll;
}
.book img{
    max-height: 40vh;
    cursor: pointer;
}
.info{
    display: none;
}

/* Header Styles */
header{
    background-color: rgba(0, 0, 0, .8);
}
#navbarNav::-webkit-scrollbar{
    height: 0px;
}
.navbar-brand{
    margin-right: 15%;
}
nav * li{
    flex: 1;
    text-align: start;
    transition: .2s;
    cursor: pointer;
}
/* nav * li:hover a{
    color: rgb(249, 32, 86) !important;
} */
nav * li span{
    border-bottom: 2px solid rgb(249, 32, 86);
    border-width: 0px;
    color: rgb(190, 190, 190) !important;
}
nav * li:hover span{
    border-width: 2px !important;
    color: rgb(249, 32, 86) !important;
}

/* First Picture Styles */
.mainpic{
    height: 100vh;
    background-repeat: no-repeat;
    background-image: url(pics/carousel_pic2.jpg);
    background-size: cover;
    background-position: bottom;
    background-blend-mode: darken;
    background-color: rgba(0, 0, 0, .7);
}
.mainpic2{
    height: 100vh;
    background-repeat: no-repeat;
    background-image: url(pics/leon-contreras-69BlmJ1m5Do-unsplash.jpg);
    background-size: cover;
    background-position: bottom;
    /* background-blend-mode: darken;
    background-color: rgba(0, 0, 0, .7); */
}
.parallax_pics{
    width: 99vw;
    height: 100vh;
    position: absolute;
    pointer-events: none;
}
.parallax_pics img{
    position: absolute;
    transition: 0s !important;
    object-fit: cover;
}
.parallax_pics img:nth-child(1){
    top: 15vh;
    left: 15vw;
}
.parallax_pics img:nth-child(2){
    top: 10vh;
    left: 85vw;
}
.parallax_pics img:nth-child(3){
    top: 70vh;
    left: 50vw;
}
.parallax_pics img:nth-child(4){
    top: 35vh;
    left: 38vw;
}
.parallax_pics img:nth-child(5){
    top: 80vh;
    left: 3vw;
}
.parallax_pics img:nth-child(6){
    top: 60vh;
    left: 85vw;
}
* button{
    background: none;
    border: none;
    outline: none;
    border-left: 1px solid rgb(249, 32, 86);
    color: rgb(249, 32, 86) !important;
}
.mainpic h1{
    font-size: 60px;
}

/* About Styles */
.about{
    background-color: rgb(10, 10, 10);
    max-height: 90vh;
    overflow-y: hidden;
}
.about .stack .box{
    height: 40vh;
    border-radius: 10px;
    border: 4px solid rgb(249, 32, 86);
}
.about .stack .box:nth-child(2){
    transform: translate(10vw, -30vh);
}
.slider-container{
    width: 100%;
    max-height: 80vh;
    /* overflow: hidden; */
    cursor: grab;
    transition: transform 0.3s ease-out;
}
.slide{
    transform: translateX(0);
}
.grabbing{
    cursor: grabbing;
}
.grabbing .slide{
    transform: scale(0.9);
}
.grab .slide{
    transform: scale(1.0);
}

.instruction{
    border-radius: 10px;
    background: rgb(10, 10, 10);
    animation: spling 1s infinite;
}
@keyframes spling {
    0%{
        background: rgb(10, 10, 10);
    }
    10%{
        background: linear-gradient(to right, rgb(10, 10, 10), rgb(10, 10, 10), rgb(30, 30, 30), rgb(10, 10, 10), rgb(10, 10, 10));
    }
    20%{
        background: linear-gradient(to right, rgb(10, 10, 10), rgb(30, 30, 30), rgb(10, 10, 10), rgb(30, 30, 30), rgb(10, 10, 10));
    }
    30%{
        background: linear-gradient(to right, rgb(30, 30, 30), rgb(10, 10, 10), rgb(10, 10, 10), rgb(10, 10, 10), rgb(30, 30, 30));
    }
    40%{
        background: rgb(10, 10, 10);
    }
}

/* events styles */
.events{
    background-color: rgb(15, 15, 15);
}
.eventNav{
    overflow-x: scroll;
    position: sticky;
    z-index: 1500;
    top: 0;
    background: rgb(5, 5, 5);
}
.category_row{
    overflow-x: hidden;
}
.category{
    min-width: fit-content;
}
.cont{
    border-radius: 10px;
    width: fit-content;
}
.cont h3 a{
    cursor: pointer;
    color: white !important;
}
.calendar{
    overflow-x: scroll;
}
.calendar::-webkit-scrollbar{
    height: 0px;
}
.calendar * span{
    background-color: rgb(15, 15, 15);
    cursor: pointer;
}
.calendar * .days{
    transform: translateY(-29px);
}
.calendar * .days span{
    color: rgb(249, 32, 86) !important;
}
.calendar * .days span:hover{
    color: whitesmoke !important;
}
.content{
    height: fit-content !important;
}

/* Payment */
#payment_form *{
    color: rgb(20, 20, 20) !important;
}
.bookimg *{
    color: rgb(20, 20, 20) !important;
}
.bookimg * .col-4{
    background-color: #eee;
}
.bookimg * .col-4:nth-child(odd){
    background-color: #ddd;
}
.bookimg * .col-4:nth-child(1){
    border-radius: 10px 0px 0px 10px;
}
.bookimg * .col-4:nth-child(3){
    border-radius: 0px 10px 10px 0px;
}

/* Gallery Styles */
.gallery{
    background: rgb(20, 20, 20);
}
.search{
    /* border: 1px solid rgb(249, 32, 86); */
    border-radius: 25px;
    overflow: hidden;
    background: rgb(249, 32, 86);
}
.search input{
    background: rgb(25, 25, 25) !important;
    border: none !important;
    outline: none;
}
.image_cont{
    overflow: hidden;
}
.image_cont img{
    transition: 4s;
}
.image_cont img:hover{
    transform: scale(1.3);
}
.image_cont .banner{
    position: absolute;
    margin-top: -90px;
    filter: opacity(0%);
    max-width: 48vw !important;
}
.banner h3{
    text-transform: capitalize !important;
}
.image_cont:hover .banner{
    filter: opacity(100%);
}

/* Footer styles */
footer{
    background: rgb(25, 25, 25);
}
footer * input, footer * textarea{
    background: none !important;
    border: none !important;
    outline: none !important;
    border-bottom: 1px solid rgb(249, 32, 86) !important;
}
footer * input:focus, footer * textarea:focus{
    border-bottom: 1px solid rgb(190, 190, 190) !important;
}
footer .feedback{
    border-right: 1px solid rgb(190, 190, 190);
}

footer * li a{
    color: rgb(100, 100, 100) !important;
}
footer * ul:hover li a{
    color: rgb(190, 190, 190) !important;
}
footer * li{
    list-style: circle;
}





@media screen and (max-width:767px) {
    .mainpic h1{
        font-size: 45px;
    }
    .about{
        height: fit-content !important;
    }
    .about .text{
        transform: translateY(-5vh) !important;
    }
    footer{
        background: rgb(10, 10, 10);
    }
    footer .feedback{
        border-right: none !important;
        border-bottom: 1px solid rgb(190, 190, 190);
    }
    .gallery{
        background-image: url(pics/carousel_pic2.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        background-blend-mode: darken;
        background-color: rgba(0,0,0,.8);
        height: 70vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .image_cont .banner{
        position: absolute;
        filter: opacity(0%);
        max-width: 48vw !important;
        font-size: 10px !important;
        background-color: whitesmoke !important;
    }
    .image_cont .banner h3{
        color: black !important;
        text-align: start !important;
    }
    .image_cont:hover{
        border: 2px solid whitesmoke;
        border-radius: 10px;
    }
    .image_cont .banner{
        transition: 2s;
    }
    .image_cont:hover .banner{
        filter: opacity(100%);
        position: sticky !important;
        margin-top: 0px !important;
    }
    .circle{
        width: 30px !important;
    }
}