@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Luckiest+Guy&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
:root{
    --primary-color:#0F5A34;
    --secondary-color:#083F2C;
    --accent-color:#aee450;

    --background-color:#F5F8F5;
    --surface-color:#FFFFFF;

    --danger-color : #ff004c;
    --danger-hover-color : #d6144e;

    --text-color:#1A1A1A;
    --text-muted:#6B7280;

    --border-color:#E5E7EB;
    --hover-color:#0C4A2B;
    --font2 :  "Luckiest Guy", cursive;;

}

body{
    font-family: "Inter", sans-serif;
    background: linear-gradient(292deg, #2e873d, #47791b);
}
p{
    margin-bottom: 15px;
}
.light-op-text{
    opacity: .8;
}
img{
    width: 100%;
}
.brand-logo-sm {
    max-width: 40px;
}
a{
    text-decoration: none;
}

.bck-success{
    background: var(--primary-color);
}
.bck-warning{
    background: var(--accent-color);
}
.bck-light{
    background: var(--background-color);
}
input:hover,select:hover,textarea:hover,button:hover,.btn:hover, input:focus, select:focus, textarea:focus, button:focus,.btn:focus{
    box-shadow: none !important;
}
.name{
    color: var(--surface-color);
    font-size: 14px;
    text-transform: capitalize;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 16px;
}
#location {
    color: var(--accent-color);
    font-size: 14px;
    text-transform: capitalize;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    padding-right: 20px !important;
    background-image: none;
    position: relative;
}
#location::after{
    content: '\F285';
    font-family: "Bootstrap-icons";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
#main-content {
    max-width: 576px;
    width: 100%;
    height: 100%;
    margin: auto;
    background: var(--background-color);
    max-height: 100vh;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
.screen-view {
    padding-bottom: 50px;
}
.cart-icon{
    color: var(--primary-color);
    position: relative;
    width: 40px;
    height: 40px;
    background: var(--surface-color);
    color: var(--primary-color);
    padding: 1px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    cursor: pointer;
}
.total_items {
    font-size: 14px;
    position: absolute;
    background: var(--accent-color);
    color: var(--text-color);
    width: 10px;
    height: 19px;
    top: 0px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    right: 0;
}
header{
    position: sticky;
    top: 0;
    z-index: 1;
}
.top-profile {
    background:var(--primary-color);
    padding: 20px 0px;
    height: 100%;
    border-radius: 0px 0px 20px 20px;
    margin-bottom: 15px;
    position: sticky;
    top: 0;
}
.csfield {
    padding: 12px;
    border-radius: 50px;
    background-color: var(--surface-color);
    font-size: 14px;
}
.csfield::placeholder{
    color: var(--text-muted);
}
#searchtext{
    color: var(--text-muted);
    background-color: var(--surface-color);
    border-right-width: 0px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
#searchbox:hover,#searchbox:focus{
    border-color: var(--border-color);
}
.offerlogo {
    border: 1px solid var(--border-color);
    border-radius: 14px;
}
.food-tabs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    border: none;
}

.food-tabs::-webkit-scrollbar{
    display: none;
}
.food-tabs button{
    background-color: transparent !important;
    border: none !important;
}
.food-tabs button img{
    width: 60px;
    height: 60px;
    object-fit: contain;
    padding: 10px;
    border-radius: 100px;
    border: 1px solid var(--border-color);
    background-color: var(--surface-color);
    transition: all 400ms linear;
}
.food-tabs button span{
    font-size: 14px;
    font-weight: 600;
    background-color: var(--background-color);
    color: var(--text-muted);
    opacity: .7;
}
.food-tabs button.active, .food-tabs button:focus,.food-tabs button:hover, .food-tabs li,.food-tabs li:hover, .food-tabs li:focus{
    background-color: transparent !important;
    border: none !important;
}
.food-tabs button.active img, .food-tabs button:hover img{
    border-color: var(--primary-color);
    transition: all 400ms linear;

}
.food-tabs button.active span{
    opacity: 1;
    color: var(--primary-color);
}
.all-items .item-list-box:last-child{
    border-bottom: none !important;
}
.all-items .addcardplus{
    width: 40px;
    height: 40px;
}
.all-items .addcardplus:hover{
    background-color: var(--primary-color);
    color: var(--accent-color);
}
.all-items .item-list-box img.rounded {
    max-width: 80px;
    max-height: 75px;
    min-width: 80px;
    min-height: 75px;
    object-fit: cover;
    object-position: center;
}
.all-items .item-list-box:last-child(){
    border-bottom: none;
}
.item-list-box .qty-box button{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.item-list-box small.text-muted{
    max-width: 150px;
    font-size: 13px;
    font-style: italic;
    opacity: .8;
    margin-right: 10px;
}
#main-footer {
    background: var(--primary-color);
    box-shadow: 0px -14px 14px rgb(246 246 246);
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 5px 15px;
    max-width: 576px;
}
.footer-links {
    display: flex;
    flex-direction: column;
}
.footer-tabs {
    display: flex;
    justify-content: space-between;
}
.text-warning {
    color: var(--accent-color) !important;
}
.footer-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--border-color);
}
.footer-links:hover, .footer-links.active, .footer-links:focus{
    color: var(--accent-color);
}
.footer-links i {
    font-size: 16px;
}
.footer-links .menu-title {
    font-size: 13px;
    font-weight: 400;
}
.items-content-lists .tab-pane {
    max-height: 61vh;
    overflow: auto;
    padding-bottom: 120px;
}

.view-cart-bar{
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 500px;
    width: 100%;
    background: var(--accent-color);
    color: var(--text-color);
    padding: 12px 0;
    border-radius: 10px;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}
.view-cart-bar a.btn{
    font-size: 14px;
    font-weight: 400;
}
.view-cart-bar a.btn:hover{
    background-color: var(--text-color);
    color: var(--surface-color);
}
.circle_box {
    width: 40px;
    max-width: 40px;
    padding: 0px !important;
    height: 40px;
    max-height: 40px;
}
::-webkit-scrollbar{
    display: none;
}
.cartScreen {
    padding-bottom: 100px;
    height: 100%;
    max-height: 70vh;
    overflow: auto;
}
i.bi.bi-map.input-icon {
    top: 25px;
}

.gmaillogo.me-2 {
    max-width: 21px;
}

.input-group-custom{
    margin-bottom:18px;
}

.input-group-custom label{
    font-size:13px;
    font-weight:500;
    margin-bottom:6px;
    display:block;
}

.input-wrapper{
    position:relative;
}

.input-wrapper input,
.input-wrapper textarea{
    width:100%;
    padding:12px 40px 12px 40px;
    border-radius:5px;
    border:1px solid #e2e2e2;
    outline:none;
    font-size:14px;
}

.input-wrapper textarea{
    resize:none;
    height:80px;
}

.input-wrapper input:focus,
.input-wrapper textarea:focus{
    border-color:#000;
}

.input-icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#888;
}

.toggle-password{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#888;
}
.loginbtnT{
    width: 100%;
}
.splashlogo {
    max-width: 250px;
    margin: 0px auto;
    display: block;
}
.taglines {
    font-size: clamp(1.5000rem, 0.6477rem + 3.4091vw, 1.8750rem);
    text-align: center;
    font-weight: 400;
    font-family:  var(--font2);
    color: var(--accent-color);
    margin: 10px 0px 20px;
    padding: 0px 10px;
}
.taglines span{
    color: white;
    fill-opacity: 0;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px white;
}
.loginpage #main-content{
    background: linear-gradient(176deg, #0F5A34, #406010);
    padding: 20px;
    position: relative;
}
.loginpage #main-content:before{
    content: '';
    background: url('../imgs/bg-app.jpg');
    background-size: 170%;
    background-position: center;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    opacity: .05;
    filter: invert(1);
}
.btn{
    padding: 10px 15px;
}
.btn-success{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-success:hover{
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--text-color);
}
.btn.btn-danger.w-100 {
    background: var(--danger-color);
    border-color: var(--danger-color);
}
.btn.btn-danger:hover{
    background: var(--danger-hover-color);
    border-color: var(--danger-hover-color);
}
.loginpage .screen-view {
    position: absolute;
    width: 90%;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    /* background: radial-gradient(#0d512f 0%, transparent 130%); */
    padding: 20px;
    animation: fadeUp 0.6s ease-out forwards;
    -webkit-animation: fadeUp 0.6s ease-out forwards;
}
.loginSocialMediaBtn a {
    background: white;
    color: black;
}
.loginSocialMediaBtn a:hover, .loginSocialMediaBtn a:focus{
    background-color: var(--background-color);
    border-color: #000;
    color: black;
}
.loginbtnT {
    background: var(--accent-color) !important;
    color: var(--text-color);
    font-weight: 500;
    border-color: var(--accent-color) !important;
}
.divider_or {
    margin: 20px 0px;
    border-color: white;
    border-style: dashed;
    border-width: 1px;
}

.loginbtnT:hover {
    background: var(--background-color) !important;
    color: var(--primary-color);
    border-color: var(--background-color) !important;
}
.footer-links.active {
    border-bottom: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.footer-links.active .menu-icon-ftr i {
    color: var(--accent-color);
}


.footer-links.active .menu-title {
    font-weight: 600;
}
.userProfileImg {
    max-width: 50px;
    border: 1px solid #dfdfdf;
    max-height: 50px;
    object-fit: cover;
    object-position: center;
    min-width: 50px;
    min-height: 50px;
    border-radius: 170px;
    background: #efefef;
}
.btn.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--surface-color);
}
.btn.btn-primary:hover{
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-color);
}
.dropdown-menu.selectAddressDropDown.show {
    background: var(--secondary-color);
    border: none;
    box-shadow: 0px 4px 10px rgba(20, 10, 20, .5);
}
ul.dropdown-menu.selectAddressDropDown.show li a {
    padding: 5px 14px;
    color: #ffffff;
    font-size: 13px;
}
ul.dropdown-menu.selectAddressDropDown.show li a:hover{
    background-color: var(--hover-color);
}
ul.dropdown-menu.selectAddressDropDown.show li a.addnewtext{
   
    color: var(--accent-color) !important;
}
input#itemSearch {
    border-radius: 0px 10px 10px 0px;
}
input#itemSearch:hover,input#itemSearch:focus{
    border-color: #E5E7EB;
}
input[readonly] {
    background: #f5f5f5;
    cursor: not-allowed;
    pointer-events: auto;
}
.title.text-center {
    font-size: 15px;
    padding: 20px;
    max-width: 320px;
    margin: auto;
}
.textlime {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    text-align: center;
}
.orderBag {
    max-width: 110px;
    margin: auto;
}
.order-deatilsone p {
    display: flex;
    justify-content: space-between;
    padding: 10px 0px;
    border-bottom: 1px dashed #dfdfdf;
    margin: 0;
}
.cartScreen.order-place{
    max-height: 90vh;
}
.aboutuscontent{
    height: 100%;
    max-height: 70vh;
    overflow: auto;
}
.aboutuscontent p{
    font-size: 14px;
}
.aboutuscontent .heading{
    font-size: 20px;
    font-weight: 600;
}
.aboutuscontent a{
    background-color: var(--accent-color);
    padding: 8px 12px;
    color: var(--text-color);
}
.aboutuscontent a:hover{
    background-color: var(--text-color);
    color: var(--background-color);
}
.userinfomation {
    background: linear-gradient(45deg, #0f5a34, #0c4126);
    border-radius: 10px;
    padding: 20px;
    position: relative;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.editpoint {
    border: 1px dashed;
    color: #0d4a2b;
}
.editpoint.active, .editpoint:hover{
        background: #ffffff !important;
    border: 1px solid var(--primary-color);
    color: var(--secondary-color) !important;
}
#editProfile:hover,#editProfile.active {
    color: var(--accent-color) !important;
}
.allinfoContent {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    max-width: 576px;
    width: 100%;
    transition: all 400ms linear;
}
.allinfoContentVIEW{
    height: 90%;
    transition: all 400ms linear;
}
.allinformation_content{
    background-color: var(--background-color);
    padding: 20px;
    padding-bottom: 100px;
    max-height: 95vh;
    overflow-y: auto;
    display: none;
}
.offmeals-main-heading{
    font-size: 26px;
    font-weight: 600;
    margin: 10px 0px 20px;
    font-style: italic;
    color: var(--hover-color);

}
.offmeals-description {
    font-size: 14px;
    color: black;
    opacity: .8;
}
.offmeals-section-heading{
    font-size: 20px;
    font-weight: 600;
    margin: 30px 0px 10px;
    color: var(--secondary-color);
}
.slideupper {
    margin: 0 auto;
    display: inline-flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    background: var(--accent-color);
    padding: 7px;
    border-radius: 10px 10px 0px 0px;
    color: var(--text-color);
    cursor: pointer;
}


/* Home Page */
.lgHeader {
    max-width: 250px;
    width: 100%;
}
.custombutton{
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    background: var(--primary-color);
    color: var(--background-color);
}
.custom-darkbtn{
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    background: var(--primary-color);
    color: var(--background-color);
}
.custombutton:hover, .custom-darkbtn:hover{
    background: var(--accent-color);
    color: var(--text-color) !important;
}
.heroone {
    padding: 80px 20px 0px;
    background: linear-gradient(0deg, #fff, #dfdfdf);
}
.app-img {
    max-width: 1000px;
    margin: 20px auto 0px;
}
.sm-para {
    max-width: 500px;
    margin: auto;
    margin-bottom: 30px ;
    display: block;
}

.headingone.text-green {
    font-size: 60px;
    font-weight: 900;
    color: var(--secondary-color);
}
.headingone.text-green span {
    font-weight: 400;
    color: #c0d64b;
}
.herobanner-one {
    max-width: 786px;
    margin: auto;
}
.headlinetop {
    background: #92ffc830;
    border: 1px solid #0f5a34;
    padding: 5px 25px;
    border-radius: 30px;
    border-bottom-width: 4px;
}
.howTiffinStepWork {
    padding: 80px 15px;
    background: var(--surface-color);
}
.namesection {
    font-size: 30px;
    font-weight: 900;
    color: var(--secondary-color);
    margin-bottom: 30px;
}
.cardworks {
    padding: 40px 20px;
    background: #f2f2f2;
    border-radius: 10px;
    margin-bottom: 30px;
}
.cardworks .cardnumber {
    text-align: right;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-flex;
    background: white;
    padding: 10px 20px;
    border: 1px solid #dfdfdf;
    border-radius: 50px;
    margin-left: auto;
    font-size: small;
}
.cardworks .cardtitles {
    font-size: 21px;
    font-weight: 700;
    color: var(--primary-color);
}
.cardInfo {
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 0px;
}
.aboutimages {
    max-width: 380px;
        margin-top: -110px;
}
.aboutusSections {
    background: #e1f5ee;
    padding: 80px 15px 0px;
}
.ordersections {
    padding: 80px 15px;
    background: var(--primary-color);
}
.category-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin-bottom: 30px;
}
.workimg {
    max-width: 90px;
    margin-bottom: 30px;
    padding: 3px;
    border-radius: 50px;
    max-height: 90px;
    width: 100%;
    height: 100%;
    background: #ffffffab;
    overflow: visible;
}
.category-card img{
    max-width: 70px;
    margin-bottom: 20px;
}
.category-card h5 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.simpleContent {
    max-width: 1024px;
    margin: auto;
    background: white;
    min-height: 100vh;
    padding: 30px 20px;
    font-size: 15px;
}
.simpleContent h1 {
    font-size: 30px;
    font-weight: 600;
    background: var(--secondary-color);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    color: white;
}
.simpleContent h2 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}
.food-text p a {
    font-weight: 700;
    color: #ff8924;
    text-transform: capitalize;
}
.blog-card img{
    width: 100%;
    max-height: 200px;
    min-height: 200px;
    object-fit: cover;
    object-position: center;
}
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
@-webkit-keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
@media screen and (max-width:579px) {
    .enitresearch .input-group {
        margin-top: 10px !important;
    }
    .csfield {
        padding: 5px 12px;
    }
    .top-profile {
        padding-bottom: 10px;
        margin-bottom: 5px !important;
    }
    .food-tabs button.nav-link {
        padding: 10px;
    }
    .food-tabs button img {
        width: 40px;
        height: 40px;
        object-fit: contain;
        padding: 5px;
    }
    .food-tabs button span {
        font-size: 12px;
    }
    .tab-content.mt-3.items-content-lists {
        margin-top: 5px !important;
    }
    .item-list-box small.text-muted{
        font-size: 10px;
    }
    .all-items .item-list-box img.rounded {
        max-width: 50px;
        max-height: 50px;
        min-width: 50px;
        min-height: 50px;
        object-fit: cover !important;
        object-position: center;
    }
    .item-list-box h6 {
        font-size: 14px;
    }
    .item-list-box .mt-1.fw-semibold {
        font-size: 14px;
        color: var(--primary-color);
    }
    .loginpage .screen-view{
        width: 100%;
    }
    .headingone.text-green {
        font-size: 30px;
        font-weight: 900;
        color: var(--secondary-color);
        margin-top: 30px;
    }
    .heroone {
        padding: 50px 15px 0px;
        background: #d6e7de;
    }
    .howTiffinStepWork{
        padding: 50px 15px;
    }
    .aboutimages {
        max-width: 380px;
        margin-top: 0;
    }
    .aboutusSections {
        background: #e1f5ee;
        padding: 50px 15px 0px;
    }
    .app-img{
        min-height: 280px;
        object-fit: cover;
    }
}