/* link style-all.css file */

/* variables */
:root{
    /* 1vw ~= 19px */
    --bg-menu: rgb(255, 255, 81);
    --hero-font-size: 3.15vw;       /* 60px */
    --h1-font-size: 3.8vw;      /* 80px in large screen */
    --h2-font-size: 2vw;
    --p-font-size: 1.1vw;      /* 20px */
    --marquee-text-size: 2vw;   /* 38px */
    --btn-font-size: 1.3vw;     /* 1.5rem */
    --location-font-size: 2.5vw;  /* 3rem */
    --card-h3-font-size: 1.3vw;
    --p-letter-spacing: 0.26vw;    /* 5px */
    --p-letter-spacing-large: 1.1vw;       /* 20px */
    --wh-letter-spacing: 1px;
    --tb-padding-small: 1vw;      /* 20px */
    --lr-padding-small: 3.6vw;       /* 70px */
    --tb-padding-large: 2vw;       /* 40px */
    --lr-padding-large: 6.6vw;       /* 120px */
    --p-line-height: 1.6vw;      /* 30px */
    --border-black: 1px solid #000;
    --border-white: 1px solid #dfdfdf;
    /* --bg-hover-card: rgba(144, 238, 144, .6); */
    --bg-hover-card: rgb(255, 255, 255);
}
/* animations */
@keyframes marquee-anim {
    0%{
        /* transform: translate3d(0, 0, 0); */
        transform: translate(0, 0);
    }
    100%{
        /* transform: translate3d(-50%, 0, 0); */
        transform: translate(-50%, 0);
    }
}
@keyframes card-in {
    from{width: 0px; height: 0px;}
    to{width: 200px; height: 200px;}
}
@keyframes card-out {
    from{width: 200px; height: 200px;}
    to{width: 0px; height: 0px;}
}
@keyframes preloaderLogoAnim {
    0%{transform: scale(1);}
    50%{transform: scale(1.2);}
    100%{transform: scale(1);}
}


/* preloader */
#preloader{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
#preloader>img{
    width: 20%;
    animation: preloaderLogoAnim 1.5s ease-in-out infinite;
}

/* Header, nav bar */
/* header is styled in style-all.css file */

/* hero section */
.section-logo{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
#lottie-bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    transform: translate3d(0,0,0);
    text-align: center;
    opacity: 1;
}
#lottie-bg-mobile{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 1;
}
/* .bg-image{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
}
.bg-image img{
    width: 100%;
    filter: blur(4px);
} */
.logo-image{
    width: 25%;
}
.logo-image img{
    width: 100%;
}
.logo-text{
    text-transform: uppercase;
    letter-spacing: var(--p-letter-spacing);
    padding-top: 1rem;
    font-size: var(--hero-font-size);
    font-weight: 900;
    text-align: center;
}
.logo-text #xtra-letter-space{
    letter-spacing: var(--p-letter-spacing-large);
}

/* scrolling text */
.bold{
    font-weight: 900;
}
.thin{
    font-weight: 200;
}
.container-marquee{
    max-width: 100%;
    overflow: hidden;
    font-size: var(--marquee-text-size);
}
.wrapper-marquee{
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    text-transform: uppercase;
    animation: marquee-anim 25s linear infinite;
}
.wrapper-marquee:hover{
    animation-play-state: paused;
}
.wrapper-marquee p{
    display: inline-block;
}
.wrapper-marquee p span{
    margin-right: 30px;
}


/* styling for all sections and it's containers, wrappers */
.section{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 3rem;
}
.container-in{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-top: var(--border-black);
}
.wrapper-in{
    width: 30%;
    padding: var(--tb-padding-large) var(--p-line-height);
    border-left: var(--border-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.container-in .wrapper-in:last-child{
    border-right: var(--border-black);
}
.wrapper-in h1{
    font-size: var(--h1-font-size);
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
}
.wrapper-in h2{
    font-size: var(--h2-font-size);
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
}
.wrapper-in p{
    font-size: var(--p-font-size);
    letter-spacing: var(--p-letter-spacing);
    text-align: center;
}
.wrapper-in > img{
    width: 100%;
}
.wrapper-image{
    width: 100%;
    padding-top: var(--marquee-text-size);
}
.wrapper-image img{
    width: 100%;
}
.h1-white-heading{
    font-size: var(--h1-font-size);
    font-weight: 900;
    color: #DFDFDF;
    text-align: center;
}


/* black background button */
.btn-black{
    display: block;
    font-size: var(--btn-font-size);
    text-align: center;
    margin: 2rem 0px 1.5rem;
}
.btn-black a{
    display: inline-block;
    background-color: #000;
    border-radius: 25px;
    padding: 0.5rem 3rem;
    color: #fff;
    text-decoration: none;
}

/* carousel container */
.container-carousel{
    display: none;
}

/* menu section */
.container-section-menu{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    height: 42vh;
}
.container-section-menu::-webkit-scrollbar{
    display: none;
}
.container-section-menu .menu-img-container{
    padding: 1.9rem;
    width: 12.5%;
    flex-shrink: 0;
    position: relative;
}
.menu-img-container img{
    width: 100%;
}
.menu-img-container > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 35%;
    left: 30%;
    z-index: 10;
    background-color: var(--bg-hover-card);
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    animation: card-out 300ms forwards;
    opacity: 0;
    transition: all .5s;
}
.menu-img-container:hover > div{
    animation: card-in 500ms forwards;
    opacity: 1;
}
.menu-img-container > div h3{
    font-size: var(--card-h3-font-size);
    text-align: center;
    word-spacing: 100vw;
    margin: 0px;
}
.menu-desc{
    text-align: center;
    font-size: var(--p-font-size);
    letter-spacing: var(--p-letter-spacing);
}
.menu-desc > span{
    font-weight: 900;
}

/* table booking section */
.container-table-booking{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.table-img{
    width: 22%;
    padding: 4rem 3rem;
}
.table-img img{
    width: 100%;
}

/* live music section */
.container-live-music > .wrapper-in > img{
    width: 100%;
}

/* events section */

/* our story section */
.container-content{
    width: 100%;
    padding: var(--tb-padding-small) var(--lr-padding-small);
}
.content-wh h1{
    font-size: var(--h1-font-size);
    font-weight: 900;
    color: #DFDFDF;
}
.content-wh p{
    font-size: var(--p-font-size);
    padding: var(--tb-padding-large) var(--lr-padding-large);
    line-height: var(--p-line-height);
    letter-spacing: var(--wh-letter-spacing);
    text-indent: 50px;
    text-align: justify;
}

/* Join us section */
#join-us>.container-in{
    height: 50vh;
}


/* AM groups section */


/* section location */
.container-location{
    width: 100%;
    display: flex;
    flex-direction: row;
    border: var(--border-black);
}
.contact-form{
    width: 50%;
    /* padding: 50px; */
    padding: 2.7rem;
    border-right: var(--border-black);
}
.contact-form form{
    display: flex;
    flex-direction: column;
}
form input, form textarea{
    color: #000;
    background-color: #DFDFDF;
    padding: 15px 20px;
    font-size: var(--marquee-text-size);
    font-weight: normal;
    border: none;
    margin-bottom: 20px;
    font-family: sans-serif;
    resize: none;
    outline: none;
}
input::placeholder, textarea::placeholder{
    color: #000;
    font-family: sans-serif;
    font-weight: 900;
}
input[type = "submit"]{
    background-color: #000;
    color: #DFDFDF;
    cursor: pointer;
}
.container-google-map{
    width: 50%;
    padding: 2.5rem 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.container-google-map div{
    width: 80%;
    height: 62%;
}
.container-google-map div iframe{
    width: 100%;
    height: 100%;
}
.container-google-map p{
    text-align: center;
    font-size: var(--location-font-size);
    text-transform: uppercase;
    letter-spacing: var(--p-letter-spacing);
}

/* footer is in style-all.css file */

/* media queries */
/* media queries for mobile */
@media screen and  (min-width: 320px) and (max-width: 768px) {
    :root{
        --bg-menu: rgb(255, 81, 81);
        --hero-font-size: 5vw;
        --h1-font-size: 9vw;
        --h2-font-size: 4.5vw;
        --p-font-size: 3.6vw;
        --marquee-text-size: 5vw;   
        --btn-font-size: 4vw;     
        --location-font-size: 4vw;  
        --card-h3-font-size: 3.5vw;
        --p-letter-spacing: 0.52vw;   
        --p-letter-spacing-large: 1.1vw;       
        --lr-padding-small: 6vw;     
        --p-line-height: 4.5vw;      
    }
    /* animations */
    @keyframes card-in {
        from{width: 0px; height: 0px;}
        to{width: 100px; height: 100px;}
    }
    @keyframes card-out {
        from{width: 100px; height: 100px;}
        to{width: 0px; height: 0px;}
    }

    /* preloader */
    #preloader>img{
        width: 40%;
    }
    /* Header, nav bar styled in style-all.css file */
    /* hero section */
    .logo-image{
        width: 50%;
    }
    #lottie-bg{
        display: none;
    }
    #lottie-bg-mobile{
        display: block;
    }
    /* .bg-image{
        display: block;
    } */
    /* menu section */
    .container-section-menu{
        height: 32vh;
    }
    .container-section-menu .menu-img-container{
        padding: 1.2rem;
        width: 35%;
    }
    .menu-img-container > div{
        width: 100px;
        height: 100px;
        top: 35%;
        left: 30%;
    }
    .menu-desc{
        padding: 0 var(--lr-padding-large);
    }
    /* book a table section */
    .table-img{
        width: 35%;
        padding: 1rem;
    }
    /*styling carousel sections*/
    .section > .container-in{
        display: none;
    }
    .container-carousel{
        width: 100%;
        height: 70vh;
        overflow: hidden;
        display: block;
        border-top: var(--border-black);
    }
    /* .container-carousel>ol{
        background-image: linear-gradient(to bottom,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
        bottom: 0px;
    }*/
    .container-carousel>.carousel-control.left, .container-carousel>.carousel-control.right{
        background-image: none;
    } 
    .container-carousel .container-in{
        width: 90%;
        height: 100%;
        margin: auto;
        display: block;
        border: none;
    }
    .container-carousel .container-in .wrapper-in{
        width: 100%;
        height: 100%;
        border: none;
        border-left: var(--border-black);
        border-right: var(--border-black);
    }
    .container-carousel .container-in .wrapper-in.active, .carousel-inner>.next.left, .carousel-inner>.prev.right {
        display: flex;
    }
    .wrapper-in.active .wrapper-image, .carousel-inner>.next.left .wrapper-image, .carousel-inner>.prev.right .wrapper-image {
        width: 80%;
    }
    .wrapper-in.active .wrapper-image img, .carousel-inner>.next.left .wrapper-image img, .carousel-inner>.prev.right .wrapper-image img {
        width: 100%;
    }
    /* live music section */
    /* gallery section */
    #am-gallery-carousel{
        height: auto;
    }
    /* location section  */
    .container-location{
        flex-direction: column;
        border: none;
    }
    .contact-form{
        width: 100%;
        padding: 2.2rem;
        border-right: none;
        border-top: var(--border-black);
    }
    form input, form textarea{
        padding: 7px 14px;
        font-size: var(--p-line-height);
        margin-bottom: 10px;
    }
    .container-google-map{
        width: 100%;
        padding: 1rem 0px;
        /* border-top: var(--border-black); */
    }
    .container-google-map div{
        width: 80%;
        height: 300px;
    }
    .container-google-map p{
        padding: 1.2rem 2.5rem;
    }
}
/* end media queries for mobile */


/* media queries for tablet */
@media screen and  (min-width: 769px) and (max-width: 1024px) {
    :root{
        --bg-menu: rgb(81, 255, 90);
    }
    .table-img{
        width: 26%;
        padding: 2rem;
    }
}
/* end media queries for tablet */


/* media queries for laptop */
@media screen and  (min-width: 1025px) and (max-width: 1440px) {
    :root{
        --bg-menu: rgb(81, 151, 255);
    }
    .table-img{
        width: 25%;
        padding: 2rem;
    }
}
/* end media queries for laptop */