@font-face {
    font-family: FontContentLight;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local("Lato Light"),local("Lato-Light"),url(https://cdn.hashtagloyalty.com/order-app-fonts/lato-v16-latin-300.woff2) format("woff2") url(https://cdn.hashtagloyalty.com/order-app-fonts/lato-v16-latin-300.woff) format("woff")
}

@font-face {
    font-family: FontContent;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Lato Regular"),local("Lato-Regular"),url(https://cdn.hashtagloyalty.com/order-app-fonts/lato-v16-latin-regular.woff2) format("woff2"),url(https://cdn.hashtagloyalty.com/order-app-fonts/lato-v16-latin-regular.woff) format("woff")
}

@font-face {
    font-family: FontSubHeading;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Lato Bold"),local("Lato-Bold"),url(https://cdn.hashtagloyalty.com/order-app-fonts/lato-v16-latin-700.woff2) format("woff2"),url(https://cdn.hashtagloyalty.com/order-app-fonts/lato-v16-latin-700.woff) format("woff")
}

@font-face {
    font-family: FontHeading;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local("Lato Black"),local("Lato-Black"),url(https://cdn.hashtagloyalty.com/order-app-fonts/lato-v16-latin-900.woff2) format("woff2"),url(https://cdn.hashtagloyalty.com/order-app-fonts/lato-v16-latin-900.woff) format("woff")
}
body{
    overflow: hidden;
}
    .bottom-5 {
      bottom: 5% !important
    }

    .start-5 {
        left: 5%!important
    }
    #category-menu{
      border-right: 1px solid rgb(232, 232, 232);
      position: sticky;
      /* top: 70px;
      width: 250px; */
      height: 100%;
      flex-shrink: 0;
      max-height: calc(100vh - 90px);
      overflow: hidden auto;
    }
    .category-list, #category-menu a {
        justify-content: flex-end;
        text-align: right;
        margin-bottom: 25px;
        padding: 0 30px 0 0;
        cursor: pointer;
    }
    .category-list.active, #category-menu .active {
        font-weight: bold;
        color: #4DAF56;
        border-right: 3px solid #4DAF56;
    }
    
    .text-theme {
        font-weight: bold;
        color: #4DAF56;
    }

    /*.card-body {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .card-img-top {
            width: 100%;
            height: auto;
        }
        .add-button {
            margin-top: 10px;
        }
        .icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }*/
    .headline--sm {
        font-size: 14px;
    }
    .headline {
        font-family: FontHeading;
        
    }
    .headline__subcat {
      font-family: FontContent;
      font-weight: 800;
      color: #626a88;
  }
    .card-title{

        font-size: 18px;
      font-family: FontSubHeading;
    }
    .card-text{
        font-size: 14px;
        color: #4f4f4f;
        line-height: 22px;
        font-family: FontContent;
        word-break: break-word;
        margin-top: 8px;
    }
    .item-title{
        font-family: FontHeading;
        font-size: 12px;
    }
    .item-desc{
        font-family: FontContent;
        font-size: 12px;
    }


    .card-img-top {
            width: 100%;
            height: auto;
        }
        .btn-add {
          position: relative;
          z-index: 1;
          top: -10px;
          padding-left:20%;
          padding-right:20%;
            left: 50%;
            transform: translateX(-50%);
            
            z-index: 10; /* Ensure the button is above the image */
          
        }
        .more {
            display: none;
        }
        .bg-theme{
           background-color : #4DAF56 !important; 
          --bs-btn-color: #fff;
          --bs-btn-bg: #4DAF56;
          --bs-btn-border-color: #4DAF56;
          --bs-btn-hover-color: #fff;
          --bs-btn-hover-bg: #4DAF56;
          --bs-btn-hover-border-color: #4DAF56;
        }
        .btn-outline-theme {
            --bs-btn-color: #4DAF56;
            --bs-btn-border-color: #4DAF56;
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: #4DAF56;
            --bs-btn-hover-border-color: #4DAF56;
            --bs-btn-focus-shadow-rgb: 25, 135, 84;
            --bs-btn-active-color: #fff;
            --bs-btn-active-bg: #4DAF56;
            --bs-btn-active-border-color: #4DAF56;
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            --bs-btn-disabled-color: #4DAF56;
            --bs-btn-disabled-bg: transparent;
            --bs-btn-disabled-border-color: #4DAF56;
            --bs-gradient: none;
        }
        .btn-add:hover {
            color: white;
            background-color: #198754 !important;
            border-color: #198754  !important;
        }
        .underline-hover {
            text-decoration: none; /* Remove underline by default */
        }

        .underline-hover:hover {
            text-decoration: underline; /* Add underline on hover */
        }
        .offcanvas-body {
            height: calc(100vh - 130px); /* Adjust the body height, minus the header and footer height */
            overflow-y: auto; /* Enable vertical scrolling */
            margin-bottom: 5%;
          }
        
          .offcanvas-footer {
            position: sticky;
            bottom: 0;
            background-color: #f8f9fa; /* Optional: background for the footer */
          }

        #placeorder:disabled,
        #placeorder[disabled]{
        border: 1px solid #999999 !important;
        background-color: #cccccc !important;
        color: #666666 !important;
        }

        
        .scrollspy-example {
            position: relative;
            /* height: calc(100vh - 130px);  */
            /* Adjust the body height, minus the header and footer height */
            height: calc(100vh - 100px - 100px);
            /* Optional: for scrolling content */
            overflow-y: auto;
            margin-top: .5rem;
            /* overflow: auto; */
            /* bottom: 10%; */
        }

        /* Desktop Styles (default) */
        header {
            height: 80px;
            flex-shrink: 0;
        }
        
        footer {
            height: 90px;
            flex-shrink: 0;
        }

        /* Custom style to position the button at the bottom center */
        .floating-btn {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000; /* Ensures the button is on top of other elements */
        }

        /* Bottom drawer style */
        .bottom-list {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
            padding: 20px;
            display: none;
            z-index: 999;
        }

        .desktopcategory-menu{
            display: block;
        }
        .mobcategory-menu{
            display: none;
        }
        .prodimg{
            object-fit: contain;
            height: 100px !important;
        }
        /* Mobile Styles */
        @media only screen and (max-width: 768px) {
            body{
                overflow-y: scroll;
            }
            header {
                height: auto; /* Smaller header for mobile */
            }

            .mainfooter {
                height: 120px; /* Smaller footer for mobile */
            }
            .cartfooter{
                max-height : 200px;
                height : auto;
            }
            .scrollspy-example {
                height: auto; /* Smaller footer for mobile */
                margin: 5%;
                margin-bottom: 40%;
            }
            .cartbody {
                height: auto; /* Smaller footer for mobile */
                margin-bottom: 45% !important;
                /* margin: 5%; */
            }

            /* Custom style to position the button at the bottom center */
            .floating-btn {
                /* position: fixed;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 1000;  */
                
                z-index: 4;
                left: 50%;
                position: fixed;
                background: #272727;
                box-shadow: 0 3.54545px 3.54545px #32324714, 0 3.54545px 7.09091px #3232470f;
                border-radius: 26.5909px;
                border: 1px solid #fff;
                color: #fff;
                align-items: center;
                justify-content: center;
                bottom: 122px;
                width: 120px;
                height: 40px;
                font-size: 12px;
                letter-spacing: .06px;
                font-family: FontHeading;
            }
            /* Bottom drawer style */
            .bottom-list {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                background-color: #fff;
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
                padding: 20px;
                display: none;
                z-index: 999;
            }
            #categoryModal{
                top : 30%;
            }
            /* Make the modal body scrollable */
            #categoryModal .modal-body {
                max-height: 300px; /* Fixed height for the modal body */
                overflow-y: auto;  /* Enable vertical scrolling */
            }
            .catlink{
                cursor: pointer;
            }
            .desktopcategory-menu{
                display: none;
            }
            .mobcategory-menu{
                display: block;
            }
        }


        /* Styles for screens larger than 768px */
        @media only screen and (min-width: 769px) {
            body{
                overflow-y: scroll;
            }
            .cartbody {
                height: auto; 
                margin-bottom: 5% !important;
              
            }
        }

        /* Style for error message text */
.state-error {
    color: red; /* Change to desired error color */
    /*font-size: 0.875em;*/
    /*margin-top: 5px;*/
}
.state-error .form-control{
    border-color: red; /* Highlight the border */
}