/* Variables */
:root {
    --brown: #AF9164;
    --brown2: #ffecc4;
    --brown3: #d3b37f;
    --dark-brown: #362417;
    --light-brown: #F7F3E3;
    --white: #f9f9f9;
    --black: #04030f;
    --red: #6F1A07;
    --light-blue: #68749e;
    --blue: #405c87;
    --dark-blue: #2e3852;
}

* {
    font-family: 'Poppins', sans-serif;
}

body{
    background-color: var(--white);
}

.navbar-custom{
    background-color: var(--brown2);
}

.navbar-toggler{
    color:--red;
}

.navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2854, 36, 23, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    
}

.logo {
    height: 3rem;
    width: 3rem;
}

.navbar-custom .dropdown-item {
    color: var(--brown);
    transition: 0.2s ease-in-out;
}

.navbar-custom .dropdown-item:hover{
    background-color: var(--white);
    color: var(--red);
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link{
    color: var(--brown);
    transition: 0.3 ease;
}

.navbar-custom .nav-link:hover{
    color: var(--red)
}

div.line{
    border-top: 5px solid var(--brown);
}


ul.dropdown-menu{
    box-shadow: 0 3px 10px #aaa;
}

a{
    color:white;
    text-decoration: none;
}

a.btn{
    color:var(--brown);
    transition: 0.2s;
}

a.btn:hover{
    background-color: var(--brown);
    color: var(--light-brown);
}

.error{
    color: red;
}

a.contact{
    text-decoration: none;
    color: var(--brown2);
}

a.contact-style{
    color: var(--brown);
}

a:hover{
    color:rgba(235, 235, 235, 0.822);
}

.categories-main{
    background-color: var(--brown2);
    color: var(--brown);
}

.category-box{
    /*box-shadow: 0px 2px 5px var(--light-blue);*/
    border-radius: 5px;
    transition: 0.3s ease;
}

.category-box:hover{
    transform: translateY(-20px);
}

.hidden{
    display: none;
}

.description-img{
    height:50%;
    width:50%;
}

.datepicker{
    padding: 2px;
}

.datepicker table tr td{
    padding: 8px 8px;
}

.datepicker table tr td.active{
    color: var(--light-brown)!important;
    background-color: var(--brown)!important;
    background-image: unset!important;
    border-color: unset!important;
}

input[type='submit'] {
    background-color: var(--brown);
    color:var(--light-brown);
    border:none;
}

input[type='submit']:hover{
    background-color: var(--brown3);
    color:var(--dark-brown);
}

.timeslot {
    background-color: var(--brown3);
}

.hero {
    height: 80vh;
}

.hero-image.tumpeng-hero {
    height: 90%;
    background: url("images/tumpeng-hero.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image.kueh-hero{
    background-image: url("images/KUEH.jpg");
    height: 90%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image.bento-hero{
    background-image: url("images/bento.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image.side-hero{
    background-image: url("images/sides-hero.png");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image.chili-hero{
    background-image: url("images/chili-hero.png");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left:30%;
    transform: translate(-30%, -50%);
    color: white;
    font-family: 'Rubik', sans-serif;
}

.big-img {
    width:70%;
    height:90%;
    border-radius: 15px;
}

.big-img-desc {
    width:40%;
    height:90%;
}

.small-img {
    width:100%;
    height: 10rem;;
}

.booking {
    background-color: var(--brown2);
    border-bottom: 1px solid var(--brown3);
}

.card {
    border-radius: 10px;
    
}

.card-body .card-text{
    font-size: 0.9rem;
}

.reveal{
    opacity: 0;
    position: relative;
    transform: translateY(100px);
    transition: 1s ease-in-out;
}

.reveal.active{
    transform: translateY(0);
    opacity: 1;
}

.footer{
    background-color: 
    #5e4723;
    color: var(--brown3);
}

/* Styles for Admin Pages */
a.logout-btn {
    text-decoration:none;
    color: var(--light-blue);
    transition: 0.3s ease;
}

a.logout-btn:hover{
    background-color: var(--blue);
    color: white;
}

a.paging {
    color:black;
    border-radius: 5px;
    transition: 0.3s ease;
}

a.paging:hover {
    background-color: var(--light-blue);
    color:white;
}

a.paging.active{
    background-color: var(--blue);
    color: var(--white);
}

.search-btn{
    transition: 0.3 ease-in-out;
}

.search-btn:hover{
    background-color: #405c87;
    color:white;
}

.show-pw{
    cursor: pointer;
}

.btn-edit {
    background-color: var(--dark-blue);
    color: white;
}

.btn-add {
    background-color: var(--blue);
    color: white;
}

.sub-title {
    color:#888;
}

.sub-title2 {
    color: var(--brown);
}

.title {
    color: var(--brown);
    font-family: 'Vollkorn', serif;
    font-weight: 700;
}

.login-container{
    background-color: white;
    border-radius: 25px;
    box-shadow: 0px 0px 20px #aaa;
}

.login-form input[type='text'], .login-form input[type='password']{
    border: none;
    outline: none;
    border-radius: 25px;
    box-shadow: 0px 0px 10px #ccc;
    max-width:80%;
}

/* Responsive Styles */
@media only screen and (max-width: 800px) {
    .big-img-desc {
        width: 90%;
        height: 100%;
    }

    .index-hero{
        height: 30vh;
    }

    .hero {
        height: 20vh;
    }
    
    .card{
        width: 80%;
    }

    .card-img {
        width:80%;
        height:80%;
        
    }

    .card-body .card-title{
        font-size: 0.9rem;
        font-weight: 700 ;
    }

    .card-body .card-text{
        font-size: 0.7rem;
    }

    .small-img {
        width:70%;
        height:90%;
    }

    .category-box{
        height:125px;
        width:125px;
        margin-bottom: 10px;
    }
}