/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

@font-face {
    font-family: myFont;
    src: url("../fonts/cream_cake.otf");
    /* src: url("../fonts/AlexBrush-Regular.ttf"); */
    /* src: url("../fonts/Painted-Brush.ttf"); */
    /* src: url("../fonts/silentbrush.otf"); */

    /* performance issues with these fonts */
    /* src: url("../fonts/Baguette.ttf"); */
}

html {
    scroll-behavior: smooth;
}

@media (prefers-color-scheme: dark) {
    /* Dark theme styles go here */

    /*=============== VARIABLES CSS ===============*/
    :root {
        /*========== Colors ==========*/
        /*Color mode HSL(hue, saturation, lightness)*/
        --white-color: hsl(0, 0%, 100%);
        --black-color: hsl(0, 0%, 0%);
        --primary: coral;
        --primary-dark: hsl(16, 100%, 10%);
        /* --primary: hsl(258, 100%, 50%); */
        /* --secondary: hsl(258, 100%, 90%); */
        --secondary: hsl(16, 100%, 77%);
        --secondary-dark: hsl(16, 80%, 55%);

        /*========== Font and typography ==========*/
        /*.5rem = 8px | 1rem = 16px ...*/
        --body-font: "Poppins", sans-serif;
        --h1-font-size: 2rem;
        --normal-font-size: 1rem;
        --small-font-size: .813rem;

        /* remove tap-highlight for Chrome Android */
        -webkit-tap-highlight-color: transparent;
    }

    /* Custom scrollbar styles */
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: hsla(0, 0%, 45%, 0.15);
    }

    ::-webkit-scrollbar-thumb {
        background-color: hsl(16, 0%, 45%);
        border-radius: 20px;
        border: 3px solid black;
        /* Adjust to match textarea background */
        z-index: 0;
        cursor: default;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: hsl(16, 90%, 56%);
    }

    /* ******************************************************** */

    /* Custom text selection colors */
    ::-moz-selection {
        background: var(--secondary-dark);
        /* Background color for selected text */
        color: black;
        /* Text color for selected text */
    }

    ::selection {
        background: var(--secondary-dark);
        /* Background color for selected text */
        color: black;
        /* Text color for selected text */
    }

    ::-moz-selection {
        background: var(--secondary-dark);
        /* Background color for selected text (for Firefox) */
        color: black;
        /* Text color for selected text (for Firefox) */
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:active,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px black inset;
        /* Change 'white' to your desired background color */
        box-shadow: 0 0 0px 1000px black inset;
        /* Change 'white' to your desired background color */
        -webkit-text-fill-color: hsl(16, 100%, 77%);
        /* Change text color if needed */
        font-style: italic;
        /* font-weight: bold; */
        transition: background-color 0s 600000s, color 0s 600000s !important;
    }

    /* ******************************************************** */


    /*=============== BASE ===============*/
    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        margin: 0;

        font-family: "Poppins", "sans-serif";

        -webkit-transition: all ease 0.2s 0s;
        -o-transition: all ease 0.2s 0s;
        transition: all ease 0.2s 0s;

        --text_primary_color: coral;
        --text_primary_light: hsl(16, 100%, 76%);
    }

    label {
        margin: 0;
    }

    body {

        font-family: var(--body-font);
        background-color: black;
        color: white;
    }

    /* ******************************************** */
    .global-rest-name {
        font-family: myFont;
        font-size: 2rem;
        font-weight: lighter;
        text-align: center;
        color: white;
        margin: 10px;
    }

    @keyframes placeHolderShimmer {
        0% {
            background-position: 80% 0
        }

        100% {
            background-position: -40% 0
        }
    }

    .animated-background {
        animation-duration: 1.5s;
        /* animation-delay: 500ms; */
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-name: placeHolderShimmer;
        animation-timing-function: ease;
        /* background: transparent;/= */
        background: linear-gradient(to right, #eeeeee00 0%, hsla(16, 100%, 46%, 0.3) 18%, #eeeeee00 30%);
        background-size: 500% auto;
        background-position: 80% 0;
    }

    /* ******************************************** */

    /* -*-*-*-*-*-*-*-*-*-*-*- Toast */

    .toast-notif {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        position: fixed;
        top: -30%;
        left: 50%;
        -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: coral;
        color: black;
        font-weight: bold;
        text-align: center;
        padding: 10px 20px;
        border-radius: 20px;
        -webkit-transition: top 0.5s ease-in-out;
        -o-transition: top 0.5s ease-in-out;
        transition: top 0.5s ease-in-out;
        z-index: 2002;
    }

    .toast-notif p {
        font-size: 0.85rem;
    }

    .toast-notif.showToast {
        top: 5%;
    }

    /* // Small devices (landscape phones, 576px and down) */
    @media (max-width: 576px) {
        .toast-notif {
            font-size: 0.85rem;
        }

        .toast-notif p {
            font-size: 0.75rem;
        }
    }

    /* // Medium devices (tablets, 768px and down) */
    @media (max-width: 768px) {}

    /* // Large devices (desktops, 992px and down) */
    @media (max-width: 992px) {}

    /* // Extra large devices (large desktops, 1200px and down) */
    @media (max-width: 1200px) {}

    /* -*-*-*-*-*-*-*-*-*-*-*-*-*-*- */

    .restMenu-body {
        position: relative;
        width: 100%;
        /* height: 100vh; */
        /* top: 50px; */
        margin-top: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

    }

    .restMenu-container {
        /* position: absolute; */
        width: 100%;
        max-width: 992px;
        height: 100%;
        top: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 20px;

        background-color: black;
        color: white;
    }

    .restMenu-container .restMenu-Hero {
        width: 100%;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 12px;
    }

    .restMenu-container .restMenu-Hero .hero-img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        background-position: 50%;
        background-image: url("../img/fresh-salad-with-vegetables-and-fruits.webp");
        background-repeat: no-repeat;
        background-size: cover;
        aspect-ratio: 16/5;
    }

    .restMenu-container .restMenu-Hero h1 {
        font-size: 5rem;
        font-family: myFont;
        font-weight: normal;
        text-transform: capitalize;
    }


    /***********************************************************************************************/

    .search-container {
        width: 100%;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        /* position: fixed; */
    }

    .search-container .search-inputs {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 12px;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
    }

    .search-container .search-inputs .search-box {
        position: relative;
        display: inherit;
        width: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .search-container .search-inputs .search-box input {
        height: 50px;
        width: 100%;
        padding-left: 50px;
        background: transparent;
        border-radius: 35px;
        border: 2px solid rgba(255, 255, 255, 0.473);
        color: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        outline: none;
        /* Remove default focus outline */
        font-size: unset;
    }

    .search-container .search-inputs .search-box #searchIcon {
        -webkit-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
        line-height: normal;
    }

    /* Style when input is focused */
    .search-container .search-inputs .search-box input:focus {
        border-color: white;
        /* Change border color to white when focused */
    }

    .search-container .search-inputs .search-box input:focus~#searchIcon {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        scale: 1.2;
    }


    /* Change placeholder color to white */
    .search-container .search-inputs .search-box input::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.481);
    }

    .search-container .search-inputs .search-box input::-moz-placeholder {
        color: rgba(255, 255, 255, 0.481);
    }

    .search-container .search-inputs .search-box input:-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.481);
    }

    .search-container .search-inputs .search-box input::-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.481);
    }

    .search-container .search-inputs .search-box input::placeholder {
        color: rgba(255, 255, 255, 0.481);
    }

    .search-container .search-inputs .search-box i {
        /* align-items: center; */
        position: absolute;
        z-index: 1;
        margin-left: 20px;
        color: white;
        font-size: 1.2rem;
    }

    /* Style the dropdown container */
    .sort-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        left: 0;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        margin-left: 10px;
    }

    /* Style the dropdown button */
    .dropbtn {
        background-color: transparent;
        border: none;
        outline: none !important;
        cursor: pointer;
        padding: 10px;
        font-size: 16px;
        white-space: nowrap;
        color: white;
    }

    /* Style the dropdown content (hidden by default) */
    .dropdown-content {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border-radius: 10px;
        position: absolute;
        background: rgba(255, 255, 255, 1);
        min-width: 160px;
        -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        visibility: hidden;
        opacity: 0;
        top: 100%;
        /* transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s; */
    }

    .dropdown-content .dropdown-content-option {
        position: relative;
        margin: 5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Hide the default radio buttons */
    .dropdown-content input[type="radio"] {
        display: none;
    }

    /* Style the custom radio buttons */
    .dropdown-content label {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
        background-color: white;
        border-radius: 10px;
        -webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s;
        transition: background-color 0.3s, -webkit-box-shadow 0.3s;
        -o-transition: background-color 0.3s, box-shadow 0.3s;
        transition: background-color 0.3s, box-shadow 0.3s;
        transition: background-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
        cursor: pointer;
        display: block;
    }

    .dropdown-content label:hover {
        background-color: var(--text_primary_light);
    }

    .dropdown-content input[type="radio"]:checked+label {
        background-color: var(--text_primary_color);
        -webkit-box-shadow: 0px 0px 2px 0.5px lightgray;
        box-shadow: 0px 0px 2px 0.5px lightgray;
    }

    /* Text styling */
    .dropdown-content label {
        margin: 0;
        color: black;
    }



    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
        /* display: block; */
        visibility: visible;
        top: 0px;
        opacity: 1;
    }

    /* Style the label */
    .sort-container .sortOptions-label {
        text-decoration: none !important;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

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

    .search-sort-container {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    i.ri-arrow-drop-down-line {
        font-size: 1.75rem;
        cursor: pointer;
    }

    /* ********************************************************************************************** */


    /* // Small devices (landscape phones, 576px and down) */
    @media (max-width: 576px) {
        .restMenu-container .restMenu-Hero h1 {
            font-size: 2.2rem;
        }

        .restMenu-container {
            padding: 5px;
        }
    }

    /* // Medium devices (tablets, 768px and down) */
    @media (min-width: 577px) and (max-width: 768px) {
        .restMenu-container .restMenu-Hero h1 {
            font-size: 3rem;
        }
    }

    /* // Large devices (desktops, 992px and down) */
    @media (max-width: 992px) {}

    /* // Extra large devices (large desktops, 1200px and down) */
    @media (max-width: 1200px) {}


    /* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */

    .nav-cart-btn {
        font-size: 1.3rem;
        z-index: 3000;
        position: fixed;
        top: 17.5px;
        right: 25px;
        width: 40px;
        aspect-ratio: 1 / 1;
        background-color: transparent;
        color: var(--text_primary_color);
        border: none;
        /* outline: 1px solid var(--text_primary_color); */
        border-radius: 50%;
        padding: 8px;
    }

    .nav-cart-btn:active,
    .nav-cart-btn:focus {
        border: none !important;
        outline: none !important;
    }

    .nav-cart-btn:hover {
        color: chocolate
    }

    .nav-cart-btn p {
        display: none;
        /*flex*/
        font-size: 0.75rem;
        position: absolute;
        height: 20px;
        aspect-ratio: 1 / 1;
        top: 0;
        right: 0;
        background: var(--text_primary_color);
        border: 1px solid;
        color: black;
        border-radius: 50%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}


/* ===================================== Light Theme ===================================== */

@media (prefers-color-scheme: light) {
    /* Light theme styles go here */

    /*=============== VARIABLES CSS ===============*/
    :root {
        /*========== Colors ==========*/
        /*Color mode HSL(hue, saturation, lightness)*/
        --white-color: hsl(0, 0%, 100%);
        --black-color: hsl(0, 0%, 0%);
        --primary: coral;
        --primary-dark: hsl(16, 100%, 10%);
        /* --primary: hsl(258, 100%, 50%); */
        /* --secondary: hsl(258, 100%, 90%); */
        --secondary: hsl(16, 100%, 77%);
        --secondary-dark: hsl(16, 80%, 55%);

        /*========== Font and typography ==========*/
        /*.5rem = 8px | 1rem = 16px ...*/
        --body-font: "Poppins", sans-serif;
        --h1-font-size: 2rem;
        --normal-font-size: 1rem;
        --small-font-size: .813rem;

        /* remove tap-highlight for Chrome Android */
        -webkit-tap-highlight-color: transparent;
    }

    /* Custom scrollbar styles */
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: hsla(0, 0%, 45%, 0.15);
    }

    ::-webkit-scrollbar-thumb {
        background-color: hsl(16, 0%, 45%);
        border-radius: 20px;
        border: 3px solid rgba(255, 255, 255, 0.844);
        /* Adjust to match textarea background */
        z-index: 0;
        cursor: default;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: hsl(16, 90%, 56%);
    }

    /* ******************************************************** */

    /* Custom text selection colors */
    ::-moz-selection {
        background: var(--secondary-dark);
        /* Background color for selected text */
        color: black;
        /* Text color for selected text */
    }

    ::selection {
        background: var(--secondary-dark);
        /* Background color for selected text */
        color: black;
        /* Text color for selected text */
    }

    ::-moz-selection {
        background: var(--secondary-dark);
        /* Background color for selected text (for Firefox) */
        color: black;
        /* Text color for selected text (for Firefox) */
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:active,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px white inset;
        box-shadow: 0 0 0px 1000px white inset;
        -webkit-text-fill-color: hsl(16, 100%, 77%);
        font-style: italic;
        /* font-weight: bold; */
        transition: background-color 0s 600000s, color 0s 600000s !important;
    }

    /* Change placeholder color to white */
    ::-webkit-input-placeholder {
        color: hsla(0, 0%, 50%, 1);
    }

    ::-moz-placeholder {
        color: hsla(0, 0%, 50%, 1);
    }

    :-ms-input-placeholder {
        color: hsla(0, 0%, 50%, 1);
    }

    ::-ms-input-placeholder {
        color: hsla(0, 0%, 50%, 1);
    }

    ::placeholder {
        color: hsla(0, 0%, 50%, 1);
        opacity: 0.5;
    }

    /* ******************************************************** */


    /*=============== BASE ===============*/
    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        margin: 0;

        font-family: "Poppins", "sans-serif";

        -webkit-transition: all ease 0.2s 0s;
        -o-transition: all ease 0.2s 0s;
        transition: all ease 0.2s 0s;

        --text_primary_color: coral;
        --text_primary_light: hsl(16, 100%, 76%);
    }

    label {
        margin: 0;
    }

    body {

        font-family: var(--body-font);
        background-color: white;
        color: black;
    }

    /* ******************************************** */
    .global-rest-name {
        font-family: myFont;
        font-size: 2rem;
        font-weight: lighter;
        text-align: center;
        margin: 10px;
    }

    @keyframes placeHolderShimmer {
        0% {
            background-position: 80% 0
        }

        100% {
            background-position: -40% 0
        }
    }

    .animated-background {
        animation-duration: 1.5s;
        /* animation-delay: 500ms; */
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-name: placeHolderShimmer;
        animation-timing-function: ease;
        /* background: transparent;/= */
        background: linear-gradient(to right, #eeeeee00 0%, hsla(16, 100%, 46%, 0.3) 18%, #eeeeee00 30%);
        background-size: 500% auto;
        background-position: 80% 0;
    }

    /* ******************************************** */

    /* -*-*-*-*-*-*-*-*-*-*-*- Toast */

    .toast-notif {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        position: fixed;
        top: -30%;
        left: 50%;
        -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: coral;
        color: black;
        font-weight: bold;
        text-align: center;
        padding: 10px 20px;
        border-radius: 20px;
        -webkit-transition: top 0.5s ease-in-out;
        -o-transition: top 0.5s ease-in-out;
        transition: top 0.5s ease-in-out;
        z-index: 2002;
    }

    .toast-notif p {
        font-size: 0.85rem;
    }

    .toast-notif.showToast {
        top: 5%;
    }

    /* // Small devices (landscape phones, 576px and down) */
    @media (max-width: 576px) {
        .toast-notif {
            font-size: 0.85rem;
        }

        .toast-notif p {
            font-size: 0.75rem;
        }
    }

    /* // Medium devices (tablets, 768px and down) */
    @media (max-width: 768px) {}

    /* // Large devices (desktops, 992px and down) */
    @media (max-width: 992px) {}

    /* // Extra large devices (large desktops, 1200px and down) */
    @media (max-width: 1200px) {}

    /* -*-*-*-*-*-*-*-*-*-*-*-*-*-*- */

    .restMenu-body {
        position: relative;
        width: 100%;
        min-height: 100vh;
        top: 0;
        margin-top: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

    }

    .restMenu-container {
        /* position: absolute; */
        width: 100%;
        max-width: 992px;
        height: 100%;
        top: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 20px;

        /* background-color: black;
        color: white; */
    }

    .restMenu-container .restMenu-Hero {
        width: 100%;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 12px;
    }

    .restMenu-container .restMenu-Hero .hero-img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        background-position: 50%;
        background-image: url("../img/fresh-salad-with-vegetables-and-fruits.webp");
        background-repeat: no-repeat;
        background-size: cover;
        aspect-ratio: 16/5;
    }

    .restMenu-container .restMenu-Hero h1 {
        font-size: 5rem;
        font-family: myFont;
        font-weight: normal;
        text-transform: capitalize;
    }


    /***********************************************************************************************/

    .search-container {
        width: 100%;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        /* position: fixed; */
    }

    .search-container .search-inputs {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 12px;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
    }

    .search-container .search-inputs .search-box {
        position: relative;
        display: inherit;
        width: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .search-container .search-inputs .search-box input {
        height: 50px;
        width: 100%;
        padding-left: 50px;
        background: hsla(0, 0%, 50%, 0.1);
        border-radius: 35px;
        border: none;
        color: black;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        outline: none;
        /* Remove default focus outline */
        font-size: unset;
    }

    .search-container .search-inputs .search-box #searchIcon {
        -webkit-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
        line-height: normal;
    }

    /* Style when input is focused */
    .search-container .search-inputs .search-box input:focus {
        /* border-color: coral; */
    }

    .search-container .search-inputs .search-box input:focus~#searchIcon {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        scale: 1.2;
    }

    .search-container .search-inputs .search-box i {
        /* align-items: center; */
        position: absolute;
        z-index: 1;
        margin-left: 20px;
        color: coral;
        font-size: 1.2rem;
    }

    /* Style the dropdown container */
    .sort-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        left: 0;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        margin-left: 10px;
    }

    /* Style the dropdown button */
    .dropbtn {
        background-color: transparent;
        border: none;
        outline: none !important;
        cursor: pointer;
        padding: 10px;
        font-size: 16px;
        white-space: nowrap;
    }

    /* Style the dropdown content (hidden by default) */
    .dropdown-content {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border-radius: 10px;
        position: absolute;
        background: rgba(255, 255, 255, 1);
        min-width: 160px;
        -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        visibility: hidden;
        opacity: 0;
        top: 100%;
        /* transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s; */
    }

    .dropdown-content .dropdown-content-option {
        position: relative;
        margin: 5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Hide the default radio buttons */
    .dropdown-content input[type="radio"] {
        display: none;
    }

    /* Style the custom radio buttons */
    .dropdown-content label {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
        background-color: white;
        border-radius: 10px;
        -webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s;
        transition: background-color 0.3s, -webkit-box-shadow 0.3s;
        -o-transition: background-color 0.3s, box-shadow 0.3s;
        transition: background-color 0.3s, box-shadow 0.3s;
        transition: background-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
        cursor: pointer;
        display: block;
    }

    .dropdown-content label:hover {
        background-color: var(--text_primary_light);
    }

    .dropdown-content input[type="radio"]:checked+label {
        background-color: var(--text_primary_color);
        -webkit-box-shadow: 0px 0px 2px 0.5px lightgray;
        box-shadow: 0px 0px 2px 0.5px lightgray;
    }

    /* Text styling */
    .dropdown-content label {
        margin: 0;
        color: black;
    }



    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
        /* display: block; */
        visibility: visible;
        top: 0px;
        opacity: 1;
    }

    /* Style the label */
    .sort-container .sortOptions-label {
        text-decoration: none !important;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

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

    .search-sort-container {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    i.ri-arrow-drop-down-line {
        font-size: 1.75rem;
        cursor: pointer;
    }

    /* ********************************************************************************************** */


    /* // Small devices (landscape phones, 576px and down) */
    @media (max-width: 576px) {
        .restMenu-container .restMenu-Hero h1 {
            font-size: 2.2rem;
        }

        .restMenu-container {
            padding: 5px;
        }
    }

    /* // Medium devices (tablets, 768px and down) */
    @media (min-width: 577px) and (max-width: 768px) {
        .restMenu-container .restMenu-Hero h1 {
            font-size: 3rem;
        }
    }

    /* // Large devices (desktops, 992px and down) */
    @media (max-width: 992px) {}

    /* // Extra large devices (large desktops, 1200px and down) */
    @media (max-width: 1200px) {}


    /* -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */

    .nav-cart-btn {
        font-size: 1.3rem;
        z-index: 3000;
        position: fixed;
        top: 17.5px;
        right: 25px;
        width: 40px;
        aspect-ratio: 1 / 1;
        background-color: transparent;
        color: var(--text_primary_color);
        border: none;
        /* outline: 1px solid var(--text_primary_color); */
        border-radius: 50%;
        padding: 8px;
    }

    .nav-cart-btn:active,
    .nav-cart-btn:focus {
        border: none !important;
        outline: none !important;
    }

    .nav-cart-btn:hover {
        color: chocolate
    }

    .nav-cart-btn p {
        display: none;
        /*flex*/
        font-size: 0.75rem;
        position: absolute;
        height: 20px;
        aspect-ratio: 1 / 1;
        top: 0;
        right: 0;
        background: var(--text_primary_color);
        border: 1px solid;
        color: black;
        border-radius: 50%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}