@keyframes show-toast{
    0% {bottom: -100%}
    20% {bottom: 100px}
    80% {bottom: 100px}
    100% {bottom: -100%}
}



@media (max-width: 440px) {
    .img-list {
        width: 40vw !important; /* 40% of the viewport width */
        height: 35vw; /* Height relative to viewport width */
        max-width: 18rem; /* Set a maximum width */
        max-height: 14rem; /* Set a maximum height */
        object-fit: cover; /* Ensures the image covers the container */
    }
}
#qr-code-img{
    width: 150px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 1rem; /* Space below the image */
}

.restaurant-count-title {
    font-size: 1.5rem; /* Larger font size for emphasis */
    font-weight: 600; /* Semi-bold text */
    color: #007bff; /* Bright blue color for attention */
    margin-bottom: 20px; /* Space below the title */
    text-transform: capitalize; /* Capitalize the first letter of each word */
    font-style: italic !important; /* Italicize the text */
    border-bottom: 2px solid #007bff; /* Add a bottom border with the same color */
    padding-bottom: 10px; /* Padding below the text */
    font-family: 'Roboto', sans-serif !important; /* Use a modern, clean font */
}





.cart-mobile-only {
    display: none; /* Hidden by default */
}

.cart-above-mobile {
    display: inline; /* Visible on larger screens */
}

@media (max-width: 480px) {
    .cart-mobile-only{
        display: inline;
    }
    .cart-above-mobile{
        display: none;
    }
}
.home-restaurant-img{
    border: 2px solid #ddd; /* Adjust the border color and width as needed */
    border-radius: 10%; /* Apply 10% border-radius */
    padding: 5px; /* Optional: Add padding inside the border if needed */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */

}
body {
        margin: 0; /* Remove default margin */
        overflow-x: hidden; /* Hide horizontal scrollbar */
    }

    .order_complete_circle {
        /* width: 100px;
        height: 100px; */
        /* background-color: #cbd0d5; */
         /* Blue background */
        color: #007bff; /* Orange text color */
        font-size: 1.5rem;
        font-weight: bold;
        /* display: flex; */
        /* justify-content: center; */
        /* align-items: center; */
        /* border-radius: 25%;  */
        /* Makes the div a circle */
        /* text-align: center; */
        margin: 0 auto; /* Centers the circle horizontally */
    }
    

.holder_radius{
    border-radius: 8px;
}

.show-notification{
    position: fixed;
    bottom: 100%;
    right: 20px;
    animation-name: show-toast;
    animation-duration: 7s;
    z-index: 99;
}
.header-content {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Default alignment for larger screens */
}


@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .main-location {
        margin-top: 10px; /* Add some space between the brand name and location input on mobile */
    }
}

.btn{
    padding: 2px 1.75em;
    font-size: 12px;
    cursor: pointer;
}
.brand_name h5 {
    font-family: 'Sansita', sans-serif !important;
    /* font-size: 79.4px !important; */
    font-size: 3rem !important;
    color: #F28500 !important;
    font-weight: bold !important; /* Bold */
    font-style: italic !important; /* Italic */
    margin-top: 5% !important;/* Remove default margin for clean alignment */
    padding: 10px 0 !important; /* Optional padding for visual appeal */
    text-align: center;
     /* Center align (optional) */
    
}
.input-with-icon {
    position: relative;
    width: 100%; /* Adjust width as necessary */
}

.input-with-icon input {
    width: 100%;
    padding-right: 35px; /* Space for the icon on the right */
    box-sizing: border-box;
}

.input-with-icon span {
    position: absolute;
    right: 10px;
    top: 60%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888; /* Icon color */
    height: 25%;
}

.input-with-icon i {
    font-size: 18px; /* Adjust icon size */
}

.logo a {
    text-decoration: none !important;
}

.logo a:hover {
    text-decoration: none !important;
}
.bg-white a {
    text-decoration: none !important;
}
.bg-white a:hover {
    text-decoration: none !important;
}

.brand_name h1 {
    font-family: 'Sansita', sans-serif !important;
    /* font-size: 79.4px !important; */
    font-size: 6rem !important;
    color: #F28500 !important;
    font-weight: bold !important; /* Bold */
    font-style: italic !important; /* Italic */
    margin-top: 5% !important; /* Remove default margin for clean alignment */
    padding: 10px 0 !important; /* Optional padding for visual appeal */
    text-align: center; /* Center align (optional) */
    /* margin-bottom: 5%; */

}

@media (max-width: 1024px) {
    .brand_name h1 {
        margin-bottom: 5% !important; /* Add margin-bottom for smaller screens */
    }
}

/* Media query specifically for mobile devices */
@media (max-width: 768px) {
    .brand_name h1 {
        font-size: 4rem !important; /* Adjust font size for mobile */
        margin-bottom: 5% !important; /* Add margin-bottom for mobile */
    }
}


#navbar_main{
    position: sticky !important;
}
.decrease_cart:hover i,
.add_to_cart:hover i {
    color: black !important;

}

.catName{
border-radius: 0.5rem !important ;
}
.main-search.fancy .field-holder input[type="text"]{
    color: #000000 !important;
}
table> tbody > tr > td{
    border: none !important;
}

#opening_hours select{
    padding: 5px 10px !important;

}
.btn-success.add_hour{
    padding: 7px 15px 7px 15px;
}

.payment-method[type=radio]{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.payment-method[type=radio] + img{
    cursor:pointer;
    padding:5px;
}

.payment-method[type=radio]:checked + img{
    outline: 2px solid #0000ff
}

@media only screen and (max-width: 480px){
    a.get-start-btn{
        display:block;
        margin-top: 15px !important;
        margin-left: 0 !important;
    }
    .main-search-bar{
        padding-top: 100px !important;
        padding-bottom: 50px !important;
        background-position: left !important; 
         /* it can be left or right */
         /* width: 50% !important; */

    }


    .user-dashboard{
        width:100% !important
    }
    .menu-itam-holder .quantity{
        right: 0 !important;
        margin-top: -30px !important;
    }
    .table.opening_hours{
        width: 100% !important;

    }
    .table td{
        padding: 0.5rem !important;
    }

}

table td, table th{
    line-height: 1rem !important;
}