/* width */
body::-webkit-scrollbar {
    width: 8px;
    height: 20px;
}

/* Track */
body::-webkit-scrollbar-track {
    background: rgba(10, 9, 8, 1);
}

/* Handle */
body::-webkit-scrollbar-thumb {
    background: rgb(73, 17, 28);
    background: radial-gradient(circle, rgba(73, 17, 28, 1) 22%, rgba(10, 9, 8, 1) 60%);
    transition: all 1s ease;
}

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
    background: rgb(73, 17, 28);
    background: radial-gradient(circle, rgba(73, 17, 28, 1) 22%, rgba(10, 9, 8, 1) 60%);
    transition: all 1s ease;
}

.toogle-menu-btn {
    display: none;
}

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

    .food-dish .dish-item {
        width: 79%;
    }

    .hero-text h1 {
        font-size: 80px !important;
    }

    .hero-text h5 {
        font-size: 22px !important;
        transform: skew(0deg) !important;
        letter-spacing: 2px !important;
    }

    .hero-section .mybtns {
        padding: 10px 15px;
        font-size: 15px !important;
    }

    /* About Us Section */

    .about-section>div {
        align-items: start !important;

    }

    .second-para {
        font-size: 22px !important;
        line-height: 32px !important;
        letter-spacing: 1px;
    }

    .about-section .about-section .mybtns {
        border: 1px solid var(--vt-secondColor);
        color: #202020;
        padding: 6px 30px !important;
    }

    /* discover section */
    .discover-test .mybtns {
        padding: 11px 40px;
    }

    #Discover-Your-Taste {
        margin: 25px 0px !important;
        padding: 100px 50px !important;
        clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%) !important;
    }

    .discover-test {
        padding: 0px !important;
        max-width: 100% !important;
    }

    /* gallery */
    .gallery {
        gap: 10px !important;
    }

    .gallery-card a {
        height: 200px !important;
        width: 200px !important;
    }

    /* footer */
    .footer-box {
        flex-direction: column;
    }

    .location-info,
    .timings {
        width: 100% !important;
    }

    .more-info-footer {
        text-align: center;
    }

    p {
        font-size: 14px !important;
    }
}

@media only screen and (max-width: 992px) {
    .menu-box .menu {
        flex-direction: column;
    }

    .menu-box {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0px;
        background-color: var(--vt-mainColor);
        flex-direction: column !important;
        z-index: 99;
    }

    .nav-link.active::after {
        content: none;
        height: unset !important;
        width: unset !important;
    }

    .user-btns .navbar-nav {
        flex-direction: row !important;
        justify-content: center !important;
    }

    .navbar-nav {
        flex-direction: column !important;
    }

    .toogle-menu-btn {
        display: block !important;
    }

    .navbar,
    .menu {
        align-items: start !important;
    }

    .user-btns {
        width: 100%;
        background-color: var(--vt-secondColor);
        padding: 6px 0px;
        border-top: 1px solid var(--vt-lightBorder);
        border-bottom: 1px solid var(--vt-lightBorder);
    }

    .user-btns li {
        /* height: 40px; */
        /* width: 40px; */
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--vt-mainColor);
        padding: 0px 10px;
        border-radius: 5px;
    }

    .user-btns li>a,
    .user-btns li>a i {
        padding: 0px !important;
        font-size: 26px !important;
    }

    .user-btns li>a i {
        margin-top: 1px !important;
    }

    .cart {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .cart i {
        background-color: unset !important;
        padding: unset !important;
        border-radius: unset !important;
    }

    .cart-badge {
        position: relative !important;
        background-color: var(--vt-titleColor1);
        color: var(--vt-black-text);
        font-size: 12px;
        /* height: 25px; */
        /* width: 25px; */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: unset !important;
        top: unset !important;
        right: unset !important;
        border-radius: 5px !important;
        padding: 0px 10px !important;
    }

    /* hero Section */
    .food-dish {
        max-width: 320px !important;
    }

    .hero-responsive {
        flex-direction: column-reverse;
    }

    .hero-responsive>div {
        width: 100% !important;
    }

    .hero-text h1 {
        margin-top: 20px;
        font-size: 55px !important;
    }

    /* aboutUs */
    #about-us-section {
        margin-top: 20px !important;
    }

    /* food menu  */
    .card-body {
        flex-direction: column;
    }

    .card-text-action.ps-5 {
        padding: 10px !important;
        padding-top: 30px !important;
    }

    .card-image {
        max-width: 100% !important;
        border-radius: 5px 5px 0px 0px !important;
    }

    .price-box {
        top: 0 !important;
        left: 50% !important;

    }

    .menu-items .card-text {
        font-size: 13px !important;
    }

    /* filter Menu  */
    .menu-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .for-menukeys {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 15;
    }

    .filterButton {
        display: block !important;
    }

    .menu-title h2 {
        margin: 0 !important;
    }

    .for-menukeys ul.list-group {
        flex-direction: column !important;
        background-color: var(--vt-whiteBg) !important;
        gap: 0 !important;
        box-shadow: 0px 0px 6px -2px var(--vt-mainColor);
    }

    .for-menukeys ul.list-group li {
        border-radius: 0px !important;
        padding: 10px 20px !important;
    }

    .list-group-item::after {
        border-radius: 0px !important;
    }

    .menu-actions {
        flex-direction: row !important;
    }
}






@media only screen and (max-width: 768px) {
    nav.container {
        max-width: 100% !important;
    }

    /* about Us */
    .about-section .img-box {
        max-width: 200px !important;
    }

    .about-section .boximage {
        justify-content: center;
    }

    .boximage .img-box:last-child img {
        top: 0px !important;
        left: 0px !important;
        border: 5px solid var(--vt-borderColor);
        box-shadow: 20px 20px 0px var(--vt-secondColor);
    }

    .about-section .boximage {
        height: fit-content !important;
    }

    /* decover sec */
    #Discover-Your-Taste {
        padding: 100px 15px !important;
    }

    .second-para {
        font-size: 16px !important;
        line-height: 23px !important;
        letter-spacing: 1px;
    }

    /* search */
    .for-Search>div {
        max-width: 100% !important;
    }

    /* gallery */
    .gallery-card a {
        height: 150px !important;
        width: 150px !important;
    }

    h2.gallery-title::after,
    h2.gallery-title::before {
        width: 100px !important;
        height: 19px !important;
    }

    h2.gallery-title::before {
        transform: translate(-50%, -50%) !important;
    }

    h2.gallery-title::after {
        transform: translate(55%, -50%) !important;
    }

    .gallery {
        gap: 5px !important;
    }

    #gallery-section .container {
        padding-top: 0px !important;
    }

    /* boook table */
    .booktable-form,
    .booktTable-img,
    .booktable-form {
        width: 100% !important;
    }

    /* Testimonial-section */
    #Testimonial-section .item {
        padding: 0 !important;
    }

    /* login stuff */
    .add-padd {
        padding: 20px 0px !important;
    }

}

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

    .timing-list {
        flex-direction: column !important;
    }

    #footer .list-group-item {
        width: 100% !important;
    }


}

@media only screen and (max-width: 426px) {}

/* @media only screen and (max-width: 600px) {

} */