.wow {
    visibility: hidden;
}

@-webkit-keyframes fade_top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fade_top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fade_top {
    -webkit-animation-name: fade_top;
    animation-name: fade_top;
}

.swiper-pagination-progressbar {
    background: rgb(0 0 0 / 3%);
}

@-webkit-keyframes slide_left {
    0% {
        left: 0%;
    }

    100% {
        left: -30%;
    }
}

@keyframes slide_left {
    0% {
        left: 0%;
    }

    100% {
        left: -30%;
    }
}

.slide_left {
    -webkit-animation-name: slide_left;
    animation-name: slide_left;
}

@-webkit-keyframes slide_right {
    0% {
        right: 0%;
    }

    100% {
        right: -30%;
    }
}

@keyframes slide_right {
    0% {
        right: 0%;
    }

    100% {
        right: -30%;
    }
}

.slide_right {
    -webkit-animation-name: slide_right;
    animation-name: slide_right;
}


@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2'),
        url('../fonts/poppins/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins-Black';
    src: url('../fonts/poppins/Poppins-Black.woff2') format('woff2'),
        url('../fonts/poppins/Poppins-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins-Bold';
    src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2'),
        url('../fonts/poppins/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins-Light';
    src: url('../fonts/poppins/Poppins-Light.woff2') format('woff2'),
        url('../fonts/poppins/Poppins-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins-Medium';
    src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2'),
        url('../fonts/poppins/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins-Regular';
    src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/poppins/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



:root {
    /* colors */
    --primary-color: #333333;
    --secondary-color: #60b246;
    --orange-color: #FF5200;
    --white-color: #FFFFFF;
    --pure-black-color: #231f1f;
    --highlight-color: #e1e4e8;
    --background-smoke: #F1F0F5;
    --background-gray: #F1F0F5;
    --secondary-highlight-color: #0366D6;
    /* font-sizes */
    --banner-title-font-size: 4.5rem;
    --section-title-font-size: 2.375rem;
    --section-subtitle-font-size: 2rem;
    --paragraph-font-size: 1.5rem;
    --content-font-size: 1.15rem;
    --link-font-size: 1rem;
    /* font-families */
    --light-font-family: "Poppins-Light";
    --regular-font-family: "Poppins-Regular";
    --medium-font-family: "Poppins-Medium";
    --semibold-font-family: "Poppins-SemiBold";
    --bold-font-family: "Poppins-Bold";
    --black-font-family: "Poppins-Black";
    /* other */
    --common-transition: all 0.6s ease;
    --web-border-radius: 0.625rem;
    --mobile-border-radius: 0.6rem;
    --common-gap-size: 1rem;
    --small-gap-size: 1.5rem;
    --medium-gap-size: 3rem;
    --big-gap-size: 6rem;
}

/* Custom scrollbar for Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
    width: 4px;
    /* Width of the vertical scrollbar */
    height: 4px;
    /* Height of the horizontal scrollbar */
}

/* Remove the up/down arrow buttons on the scrollbar */
::-webkit-scrollbar-button {
    display: none;
}

/* The scrollbar track (background of the scrollbar) */
::-webkit-scrollbar-track {
    background-color: transparent;
    /* Transparent background */
}

/* The draggable part of the scrollbar (thumb) */
::-webkit-scrollbar-thumb {
    background-color: #60b246;
    /* Color of the scrollbar thumb */
    border-radius: 2px;
    /* Rounded corners */
}

/* Scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #08928d;
    /* Darker color when hovered */
}

/* Custom scrollbar for Firefox */
* {
    scrollbar-width: thin;
    /* Thin scrollbar */
    scrollbar-color: #60b246 transparent;
    /* Thumb color and track color */
}


.semibold-fonts {
    font-family: var(--semibold-font-family);
}

.bold-fonts {
    font-family: var(--bold-font-family) !important;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: var(--regular-font-family);
    color: var(--primary-color);
}

html {
    height: auto;
    font-size: 16px;
    scroll-behavior: smooth;
}

* {
    line-height: 1.2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    line-height: 1.2;
    width: 100%;
}


body.no-scroll-body {
    overflow-y: hidden;
    padding-right: 11px;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    background-color: transparent;
    color: unset;
    outline: none;
    text-decoration: none;
    -webkit-transition: all ease-in-out 0.4s;
    -moz-transition: all ease-in-out 0.4s;
    -ms-transition: all ease-in-out 0.4s;
    -o-transition: all ease-in-out 0.4s;
    transition: all ease-in-out 0.4s;
}

a:focus,
a:hover {
    outline: 0;
    text-decoration: unset;
    color: unset;
}

img {
    max-width: 100%;
    transition: var(--common-transition);
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
}

.relative {
    position: relative;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.text-center {
    text-align: center;
}

.p0 {
    padding: 0 !important;
}


.main-container-fluid {
    width: 95%;
    margin: 0 auto;
}

.main-container {
    width: 85%;
    margin: 0 auto;
}


.mini-container {
    width: 65%;
    margin: 0 auto;
}

.content_accordian_active,
.content_accordian {
    display: none;
}

.section-padding {
    padding: 8rem 0;
}

.section-padding-small {
    padding: 2rem 0;
}

.hover-enable {
    display: none;
}

.hover-disable {
    display: inline-block;
}

.mobile-image {
    display: none;
}

.web-image {
    display: block;
}

div:focus-visible,
img:focus-visible,
button:focus-visible {
    outline: none;
    border: none;
}

/* 
body.no-scroll-body {
    overflow-y: hidden;
    padding-right: 11px;
    width: calc(100% - 11px);
} */

.visible-tab-mobile {
    display: none !important;
}

.hide-tab-mobile {
    display: block !important;
}


.inner-flex {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.inner-flex.inner-flex-small {
    gap: var(--small-gap-size);
}

.inner-flex.inner-flex-smallest {
    gap: 0.25rem;
}

.inner-flex.inner-flex-medium {
    gap: var(--medium-gap-size);
}

.inner-flex.inner-flex-big {
    gap: var(--big-gap-size);
}

.big-gap {
    gap: var(--big-gap-size) !important;
}

.inner-flex.inner-flex-large {
    gap: 10rem;
}

.inner-flex.inner-flex-common {
    gap: var(--common-gap-size);
}

.inner-flex.inner-flex-center {
    text-align: center;
    align-items: center;
}

.white-color {
    color: var(--white-color) !important;
}

.black-color {
    color: var(--pure-black-color) !important;
}

.highlight-color {
    color: var(--highlight-color) !important;
}

.secondary-color {
    color: var(--secondary-color) !important;
}

.secondary-highlight-color {
    color: var(--secondary-highlight-color) !important;
}

/* fonts css */

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
}

.banner-title h1,
.banner-title h1 span,
.banner-title h2,
.banner-title h2 span {
    font-size: var(--banner-title-font-size);
    font-family: var(--bold-font-family);
}

.banner-title h1 span,
.banner-title h2 span {
    color: var(--secondary-color);
}

.section-title h1,
.section-title h1 span,
.section-title h2,
.section-title h2 span {
    font-size: var(--section-title-font-size);
    font-family: var(--semibold-font-family);
}

.section-title h1 span,
.section-title h2 span {
    color: var(--secondary-color);
}

.section-content p,
.section-content p span {
    font-size: var(--content-font-size);
    line-height: 1.5;
}

.flex-row-normal .section-content span,
.flex-row-normal.section-content span {
    font-size: var(--paragraph-font-size);
    line-height: 1.5;
}

.section-content p span {
    color: var(--secondary-color);
}


.section-paragraph p,
.section-paragraph p span {
    font-size: var(--paragraph-font-size);
    line-height: 1.5;
}

.section-paragraph p span {
    color: var(--secondary-color);
}


.section-text p,
.section-text span,
.section-text p span {
    font-size: 1rem !important;
    line-height: 1.25;
}

.section-text p span {
    color: var(--secondary-color);
}

.section-subtitle h4,
.section-subtitle h4 span {
    font-size: var(--section-subtitle-font-size);
    font-family: var(--semibold-font-family);
    color: var(--primary-color);
}

.section-subtitle h4 span {
    color: var(--secondary-color);
}

.smallest-font p {
    font-size: 0.85rem;
}

.link-font-size a p,
.link-font-size a p span.material-symbols-outlined,
.link-font-size p {
    font-size: var(--link-font-size);
}

.foodboss-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    transition: var(--common-transition);
    border-radius: 0.5rem;
    width: fit-content;
    justify-content: center;
}

.foodboss-button p,
.foodboss-button span {
    line-height: 1 !important;
}

.button-style-primary {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
}

.button-style-primary span,
.button-style-primary p {
    color: var(--white-color);
    transition: var(--common-transition);
    font-size: 1.15rem;
}

.button-style-primary:hover {
    border: 1px solid var(--primary-color);
    background-color: transparent;
    transition: var(--common-transition);
}

.button-style-primary:hover span,
.button-style-primary:hover p {
    color: var(--primary-color);
    transition: var(--common-transition);
}

.button-style-orange {
    border: 1px solid var(--orange-color);
    padding: 1.25rem 1.25rem;
    background-color: var(--orange-color);
}

.button-style-orange span,
.button-style-orange p {
    color: var(--white-color);
    transition: var(--common-transition);
    font-size: 1.15rem;
}

.button-style-orange:hover {
    border: 1px solid var(--orange-color);
    background-color: transparent;
    transition: var(--common-transition);
}

.button-style-orange:hover span,
.button-style-orange:hover p {
    color: var(--orange-color);
    transition: var(--common-transition);
}

.button-style-secondary {
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
}

.button-style-secondary span,
.button-style-secondary p {
    color: var(--white-color);
    transition: var(--common-transition);
    font-size: 1.15rem;
}

.button-style-secondary:hover {
    border: 1px solid var(--secondary-color);
    background-color: transparent;
    transition: var(--common-transition);
}

.button-style-secondary:hover span,
.button-style-secondary:hover p {
    color: var(--secondary-color);
    transition: var(--common-transition);
}

.button-style-white {
    border: 1px solid var(--white-color);
    background-color: var(--white-color);
}

.button-style-white span,
.button-style-white p {
    color: var(--primary-color);
    transition: var(--common-transition);
    font-size: 1.15rem;
}

.button-style-white:hover {
    border: 1px solid var(--white-color);
    background-color: transparent;
    transition: var(--common-transition);
}

.button-style-white:hover span,
.button-style-white:hover p {
    color: var(--white-color);
    transition: var(--common-transition);
}


/* CSS STarts here */


.header-wrapper {
    position: fixed;
    background-color: var(--white-color);
    padding: 1rem 0;
    transition: var(--common-transition);
    top: 0rem;
    border-bottom: 0px solid var(--primary-color);
    left: 0;
    width: 100%;
    z-index: 99999;
}

.header-wrapper.webmenu_hidden {
    top: -100%;
}

/* .header-wrapper.black-header {
	background-color: transparent;
	border-bottom: 0px solid transparent;
} */

.header-flex {
    display: flex;
    justify-content: space-between;
    gap: var(--small-gap-size);
    align-items: center;
}

.header-links-ul ul {
    display: flex;
    align-items: center;
    gap: var(--medium-gap-size);
}

.header-links-ul ul li a,
.header-links-ul ul li span,
.header-links-ul ul li p {
    color: var(--primary-color);
}

.header-links-ul ul li a {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--primary-color);
}

.header-logo {
    width: 5.5rem;
}

.header-logo.header-logo-shimmer {
    height: 3rem;
    /* border-radius: 50%; */
    overflow: hidden;
}

.shimer-block {
    display: none;
    background-repeat: no-repeat;
    animation: shimmer 2s infinite linear;
    background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
    background-size: 1000px 100%;
}

.shimer-block.shimer-visible {
    display: block;
}

.woshimer-block {
    display: none;
}

.woshimer-block.shimer-disable {
    display: block;
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.offer-strip-icon {
    width: 1rem;
}

.header-top-strip {
    background: #F5F5F5;
    padding: 0rem 0rem 0 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: var(--medium-gap-size);
    align-items: center;
}

.location-div-header-strip,
.offer-strip-header {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.location-div-header-strip .link-font-size span,
.offer-strip-header .link-font-size span {
    color: var(--secondary-color) !important;
    text-decoration: underline;
    font-family: var(--semibold-font-family);
    text-transform: uppercase;
}

.header-strip-button {
    background: var(--secondary-color);
    padding: 0.75rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.header-stip-icon-btn {
    width: 1.5rem;
    position: relative;
}

.header-stip-icon-btn::after {
    position: absolute;
    content: "";
    height: 80%;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    background-color: #FFFFFF50;
    right: -1rem;
}

.header-stip-icon-btn:last-child::after {
    content: none;
}

.header-links-ul ul li {
    position: relative;
}

.active-link-header::after {
    content: "";
    width: 140%;
    height: 160%;
    background-color: var(--secondary-color);
    border-radius: 2.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header-links-ul ul li.active-link-header p {
    position: relative;
    z-index: 3;
    color: var(--white-color);
}

.nav-toggle {
    cursor: pointer;
    display: none;
}

.mob-link-font-size {
    display: none;
}

.mobile-navigation-wrapper {
    display: none;
}



.form-input-icon.form-input-icon-left {
    left: 1rem;
}

.form-title-label {
    margin-bottom: 0.5rem;
}

.form-input-icon.form-input-icon-right {
    right: 1rem;
}



.form-control-foodboss {
    padding: 1rem 2rem 1rem 3.5rem;
    border: 1px solid var(--highlight-color);
    resize: none;
    background-color: var(--white-color);
    margin: 0 !important;
    outline: none;
    line-height: 1;
    font-size: 1rem;
    width: 100%;
    font-family: var(--medium-font-family);
    border-radius: 0.5rem;
}

.form-control-foodboss.form-control-foodboss-login {
    padding: 1rem 2rem 1rem 4.5rem;
}

.form-control-foodboss.form-control-foodboss-search {
    padding: 1rem 3.5rem 1rem 2rem;
}

.form-input-icon {
    height: 24px;
    width: 24px;
    font-size: 24px;
    line-height: 24px;
    position: absolute;
    top: 1rem;
    transform: unset;
}

.form-input-icon.form-input-icon-search {
    right: 1rem;
}

.form-control-foodboss:focus,
.form-control-foodboss:focus-visible {
    border-color: var(--primary-color);
}




/* Home Page CSS Started */

.home-banner-section {
    border: 1px solid #DEDEDE;
    padding-left: 4rem;
    width: 100%;
    background-color: var(--background-gray);
    border-radius: 1.5rem;
    /* margin-top: 1.5rem; */
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    overflow: hidden;
}

.location-form-home {
    width: 50%;
}


#home-page-wrapper-food-boss {
    padding: 1.5rem 0 4rem 0;
}


#food-boss-home-section-2 {
    background-image: url(../images/home/about-us-vector.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    /* background-size: contain; */
}

.about-image-food-boss-home {
    width: 60%;
    margin-left: auto;
    align-items: end;
    margin-top: 4rem;
}

.section-content-home-about {
    width: 60%;
}

.loop-text {
    padding: 3rem 0rem;
    /* background: var(--background-gray); */
}

.marquee {
    height: 100px;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
    margin-bottom: 0rem;
    border-bottom: 1px solid var(--coffee);
    border-top: 1px solid var(--coffee);
    background: transparent;
}


.marquee .marquee-1 {
    position: absolute;
    width: max-content;
    height: auto;
    overflow: hidden;
    top: 50%;
    transform: translateY(-50%);
    animation: marquee 25s linear infinite;
}

.align-flex-center {
    align-items: center;
}

.aic {
    align-items: center;
}

.row-flex {
    display: flex;
    gap: 1rem;
}

@keyframes marquee {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}

.testimonial-swiper-wrapper .swiper-container {
    padding: 4rem 9rem 0 9rem;
}

.testimonial-swiper-card {
    padding: 1.5rem;
    background-color: var(--background-gray);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    gap: var(--small-gap-size);
}

.testimonial-card-header {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap-size);
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.testimonial-card-img {
    border-radius: 50%;
    overflow: hidden;
    width: 5rem;
}

.star-ratings {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    align-items: center;
}

.quote-sign-testimonials {
    width: 5rem;
    opacity: 0.2;
}

.content-testimonial-div {
    min-height: 35vh;
    text-align: left;
    margin: 1.5rem 0;
}

.testimonials-name-info-flex {
    padding-left: 1rem;
    border-left: 1px solid #DEDEDE;
    text-align: left;
    gap: 0.25rem;
}

.swiper-button-prev.swiper-button-prev-testimonials span.material-symbols-outlined,
.swiper-button-next.swiper-button-next-testimonials span.material-symbols-outlined {
    font-size: 1.5rem;
    color: var(--white-color);
}

.swiper-button-prev.swiper-button-prev-testimonials,
.swiper-button-next.swiper-button-next-testimonials {
    position: relative;
    width: 3rem;
    height: 3rem;
    top: unset;
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    left: unset;
    right: unset;
    transform: unset;
    margin: unset;
    background-image: unset;
    background-size: unset;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.testimonial-row-flex {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    gap: var(--small-gap-size);
    align-items: center;
}

.swiper-testimonial-flex {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap-size);
    align-items: center;
}


#food-boss-home-section-3 {
    background-color: var(--primary-color);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
    grid-template-areas: 'one one two three''one one four five';
}

.gallery-grid>div {
    border-radius: 0.75rem;
    overflow: hidden;
}

.gallery-grid>div:nth-child(1) {
    grid-area: one;
}

.gallery-grid>div:nth-child(2) {
    grid-area: two;
}

.gallery-grid>div:nth-child(3) {
    grid-area: three;
}

.gallery-grid>div:nth-child(4) {
    grid-area: four;
}

.gallery-grid>div:nth-child(5) {
    grid-area: five;
}

.gallery-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--primary-color);
    opacity: 0.75;
    visibility: hidden;
    /* transition: var(--common-transition); */
}

.gallery-click-home:hover .gallery-overlay {
    visibility: visible;
    /* transition: var(--common-transition); */
}

.gallery-zoom-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.gallery-click-home:hover .gallery-zoom-btn {
    opacity: 1;
    visibility: visible;
}

.fancybox-container {
    z-index: 999999999999 !important;
}

.fancybox-container * {
    color: var(--white-color) !important;
}


.view-all-btn-gallery {
    width: fit-content;
    margin-left: auto;
    margin-top: 2.5rem;
}

.categories-card-grid-home {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--small-gap-size);
    margin-top: var(--medium-gap-size);
    row-gap: var(--medium-gap-size);
}

.categories-card-home {
    background-color: var(--background-gray);
    border: 1px solid #DEDEDE;
    border-radius: 0.75rem;
    overflow: hidden;
}

.categories-card-home:hover {
    border-color: var(--secondary-color);
}

.categories-card-home>div:nth-child(2) {
    padding: 1rem;
}

.footer-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 4rem 0;
    gap: var(--medium-gap-size);
    align-items: start;
}

.footer-powered-by {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.footer-end-line {
    display: flex;
    flex-direction: row;
    gap: var(--medium-gap-size);
    padding: 1.5rem 0;
    border-top: 1px solid var(--primary-color);
    margin-top: 2.5rem;
    align-items: center;
    justify-content: space-between;
}

.footer-powered-by a {
    font-family: var(--semibold-font-family);
}

.footer-powered-by a:hover {
    color: #f75b2b;
    font-family: var(--semibold-font-family);
}

.footer-logo {
    width: 8.5rem;
}

.row-flex-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    line-height: 1 !important;
}

.row-flex-footer p {
    line-height: 1 !important;
}

.language-padding {
    padding-left: 4rem;
}

.footer-grid-wrapper a,
.footer-grid-wrapper a p {
    width: fit-content;
    display: block;
}

.footer-grid-wrapper a:hover p,
.footer-grid-wrapper a:hover {
    color: var(--secondary-color) !important;
}

.header-links-ul {
    display: flex;
    flex-direction: row;
    gap: var(--medium-gap-size);
    align-items: center;
}


#shop-page-wrapper-food-boss {
    padding-top: 0 !important;
}

.shop-banner-relative {
    padding: var(--medium-gap-size);
    background-image: url(../images/banners/coffee_blog_cutlivos_coffee.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.top-banner-buttons-flex {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap-size);
    margin-top: var(--medium-gap-size);
}

.top-banner-buttons-flex .button-style-primary {
    background-color: var(--primary-color) !important;
}

.top-banner-buttons-flex .button-style-primary p {
    color: var(--white-color) !important;
}

.top-banner-buttons-flex .button-style-secondary {
    background-color: var(--secondary-color) !important;
}

.top-banner-buttons-flex .button-style-secondary p {
    color: var(--white-color) !important;
}

.shop-banner-card {
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.6);
    width: fit-content;
    backdrop-filter: blur(5px);
}

.shop-banner-header {
    width: 5rem;
}

.shop-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--medium-gap-size);
    grid-template-areas: 'categories-shop categories-shop menuitems-shop menuitems-shop menuitems-shop menuitems-shop ';
}

.shop-grid-wrapper>div:nth-child(1) {
    grid-area: categories-shop;
    height: fit-content;
    position: sticky;
    top: 8rem;
}

.shop-grid-wrapper>div:nth-child(2) {
    grid-area: menuitems-shop;
}

.shop-grid-wrapper>div:nth-child(3) {
    grid-area: carts-shop;
    height: fit-content;
    position: sticky;
    top: 8.5rem;
}

.shop-list-cards {
    background-color: var(--white-color);
    border: 1px solid #DEDEDE;
    border-radius: 0.75rem;
    overflow: hidden;
}

.shop-list-cards .shop-list-cards-header {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    gap: var(--small-gap-size);
    align-items: center;
    background-color: var(--primary-color);
}

.shop-list-cards .shop-list-cards-body {
    padding: 1rem;
    background-color: var(--white-color);
}

.shop-list-menu-category-header {
    padding: 1rem;
    border-bottom: 2px solid var(--primary-color);
}

.shop-list-cards .shop-list-cards-body.shop-list-cards-body-menu-list {
    padding: 1rem 0 0 0;
}

.menu-item-flex-inner {
    padding: 1rem;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--small-gap-size);
}

.menu-item-flex-inner:last-child {
    border-bottom: 0px;
}

.menu-item-flex-inner>div:nth-child(1) {
    width: calc(100% - 20% - 0.75rem);
    flex-basis: calc(100% - 20% - 0.75rem);
}

.menu-item-flex-inner>div:nth-child(2) {
    width: calc(100% - 80% - 0.75rem);
    display: flex;
    justify-content: end;
    flex-basis: calc(100% - 80% - 0.75rem);
    flex-direction: column;
}

.add-cart-shopp-list-btn {
    padding: 0.75rem 2.5rem;
    border: 1px solid #DEDEDE;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white-color);
    border-radius: 0.6rem;
    transition: var(--common-transition);
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
}

.add-cart-shopp-list-btn p,
.add-cart-shopp-list-btn span {
    font-size: 0.85rem !important;
    line-height: 0.85 !important;
    transition: var(--common-transition);
    color: var(--secondary-color);
    text-transform: uppercase;
}

.add-cart-shopp-list-btn:hover {
    background-color: transparent;
    transition: var(--common-transition);
}

.add-cart-shopp-list-btn:hover p,
.add-cart-shopp-list-btn:hover span {
    color: var(--primary-color);
    text-transform: uppercase;
    transition: var(--common-transition);
}

.add-cart-shopp-list-btn-disable {
    opacity: 0.5;
    pointer-events: none;
}

.add-cart-shopp-list-btn.add-cart-shopp-list-btn-disable:hover {
    background-color: var(--primary-color);
    transition: var(--common-transition);
}

.add-cart-shopp-list-btn.add-cart-shopp-list-btn-disable:hover p,
.add-cart-shopp-list-btn.add-cart-shopp-list-btn-disable:hover span {
    color: var(--white-color);
    transition: var(--common-transition);
}

.is_customize {
    font-size: 0.7rem;
    margin-top: 0.25rem;
    text-align: right;
}

.btn-menu-terms {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -1.25rem;
}

.about-image-food-boss-home img {
    mix-blend-mode: multiply;
}

/* #about-us-page-wrapper-food-boss{
    padding-top: 2rem;
} */

#aboutusVideo {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 85lvh;
    border-radius: 0.75rem;
}

.two-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12rem;
    align-items: center;
}


#food-boss-about-us-section-3 {
    background-image: url(../images/about-us/about-cultivos-us-banner.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#food-boss-about-us-section-3 img {
    height: 70vh;
    opacity: 0;
}

#contact-us-page-wrapper-food-boss {
    padding-top: 2rem;
}

.contact-us-banner img {
    height: 65vh;
    border-radius: 0.75rem;
}

.row-flex-contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-us-logo {
    width: 7.5rem;
}

.contact-us-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--medium-gap-size);
}

.contact-us-iframe {
    width: 100%;
    background-repeat: no-repeat;
    animation: shimmer 2s infinite linear;
    background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
    background-size: 1000px 100%;
}

.contact-us-iframe iframe {
    width: 100%;
    height: 50vh;
    background-color: var(--background-gray);
    display: block;
    /* filter: grayscale(1); */
}

.w100 {
    width: 100%;
}

.contact-us-form-wrapper {
    width: 100%;
    padding: var(--small-gap-size);
    border: 1px solid #DEDEDE;
    border-radius: 0.75rem;
}

label.error {
    position: absolute;
    top: -1.5rem;
    right: 0;
    font-size: 0.85rem;
    color: #FF0000;
}

md-toast {
    position: fixed;
}

.login-card-page-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'login-image login-image login-form';
    background-color: var(--white-color);
    border-radius: 1rem;
    overflow: hidden;
}

.login-card-page-wrapper>div:nth-child(1) {
    grid-area: login-image;
}

.login-card-page-wrapper>div:nth-child(2) {
    grid-area: login-form;
}

#food-boss-login-section-1 {
    display: grid;
    place-items: center;
    background-color: var(--background-gray);
    height: 100lvh;
}

.login-card-wrapper>div {
    width: 100%;
}

.login-card-wrapper {
    padding: 4rem;
    display: flex;
    place-items: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.login-logo-div {
    width: 8rem;
}

.form-input-icon-leftegular-fonts {
    font-family: var(--regular-font-family) !important;
    line-height: 1 !important;
    font-size: 1rem;
    position: absolute;
    top: 1.4rem;
    left: 0.8rem;
}

.form-control-foodboss.form-control-foodboss-otp-input {
    padding: 1rem !important;
    text-align: center;
}

.otp-onput-grids {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--small-gap-size);
}

.other-links-otp-div {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 0.5rem;
}

.other-links-otp-div a:hover {
    color: var(--secondary-color);
}

#profile-page-wrapper-food-boss {
    padding-top: 2rem;
}

.active-link-footer p {
    color: var(--secondary-color) !important;
}

.profile-card-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--background-gray);
    border-radius: 1rem;
    overflow: hidden;
}

.update-profile-card {
    padding: 4rem;
}



.profile-picture-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
}

.profile-picture {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    /* Default color if no image is set */
    border: 2px solid #fff;
}

.edit-icon-container {
    position: absolute;
    top: 5px;
    left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-icon {
    cursor: pointer;
    background-color: #fff;
    border-radius: 50%;
    padding: 5px;
    font-size: 24px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#profilePictureInput {
    display: none;
}

input[disabled] {
    opacity: 0.85;
    cursor: not-allowed !important;
}

.profile-banner-image img {
    height: 100%;
}

.add-address-card {
    padding: var(--small-gap-size);
    border-radius: 0.5rem;
    border: 1px solid #DEDEDE;
}

.add-address-card-wrapper-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'one two two';
    gap: var(--medium-gap-size);
    align-items: start;
}

.add-address-card-wrapper-grid>div:nth-child(1) {
    grid-area: one;
}

.add-address-card-wrapper-grid>div:nth-child(2) {
    grid-area: two;
}

.add-detail-address-card {
    padding: var(--small-gap-size);
    border-radius: 0.5rem;
    border: 1px solid #DEDEDE;
}

.address-list-address-page-wrapper {
    padding: var(--small-gap-size);
    border-radius: 0.5rem;
    border: 1px solid #DEDEDE;
}

.address-50-input {
    width: calc(100% / 2 - 0.75rem);
    flex-basis: calc(100% / 2 - 0.75rem);
}

.flex-row-wrap-small {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap-size);
    flex-wrap: wrap;
    align-items: start;
}

.radio-buttons-wrapper-add-address {
    /* width: 100%;
    flex-basis: 100%; */
    display: flex;
    align-items: center;
    gap: var(--small-gap-size);
}

.radio-btn-add-addresss {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    width: fit-content;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--background-gray);
    gap: 0.5rem;
}

.radio-btn-add-addresss.selected-radio {
    background-color: var(--secondary-color);
}

.radio-btn-add-addresss.selected-radio p,
.radio-btn-add-addresss.selected-radio span {
    color: var(--white-color) !important;
}

.checkbox-buttons-wrapper-add-address,
.submit-button-add-address-location {
    width: 100%;
    flex-basis: 100%;
}

.manage-address-header {
    padding-bottom: var(--small-gap-size);
    border-bottom: 1px solid #DEDEDE;
}

.flex-row-normal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.flex-row-normal.flex-row-normal-small-gap {
    gap: 1rem;
}

.padd-left-equalizer {
    padding-left: 2rem;
}

.small-action-btns {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-gray);
    flex-direction: row;
    cursor: pointer;
    line-height: 1;
    border-radius: 0.25rem;
    gap: 0.5rem;
}

.small-action-btns p {
    font-size: 1rem;
    line-height: 1;
}

.small-action-btns span {
    font-size: 1.15rem !important;
    line-height: 1 !important;
}

.small-action-btns-edit:hover {
    background-color: #0366D623;
}

.small-action-btns-edit:hover p,
.small-action-btns-edit:hover span {
    color: #0366D6;
}

.small-action-btns-delete:hover {
    background-color: #60b24623;
}

.small-action-btns-delete:hover p,
.small-action-btns-delete:hover span {
    color: #60b246;
}

.pt15 {
    padding-top: 1.5rem;
}

.saved-address-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--small-gap-size);
}

.saved-address-card {
    padding: var(--small-gap-size);
    border: 1px solid #DEDEDE;
    border-radius: 0.5rem;
}

.saved-address-card .inner-flex {
    height: 100%;
}

.saved-address-card .inner-flex>div:last-child {
    margin-top: auto;
}

.new-address-add-button {
    width: fit-content;
    margin-left: auto;
}

.select-map-location {
    width: 100%;
    height: 30vh;
    background-color: var(--background-gray);
}

.select-map-location iframe {
    display: block;
    height: 100%;
    width: 100%;
}

.highlighted p {
    font-family: var(--bold-font-family);
}


.customization-popup-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(2px);
    z-index: 9999999;
    opacity: 0;
    visibility: hidden;
    transition: var(--common-transition);
}

.customization-popup-overlay.customization-popup-overlay-active {
    opacity: 1;
    visibility: visible;
    transition: var(--common-transition);
}

.customization-popup-wrapper {
    width: 60vw;
    height: fit-content;
    max-height: 90vh;
    background-color: var(--white-color);
    z-index: 999999999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    display: none;
    overflow: hidden;
    justify-content: space-between;
}

.customization-popup-wrapper.customization-popup-wrapper-active {
    display: block;
}

.customization-popup-wrapper-header {
    padding: var(--small-gap-size);
    display: flex;
    justify-content: space-between;
    gap: var(--small-gap-size);
    align-items: start;
    border-bottom: 1px solid var(--primary-color);
    background: var(--primary-color);
}

.customization-popup-wrapper-footer {
    padding: var(--small-gap-size);
    display: flex;
    justify-content: space-between;
    gap: var(--small-gap-size);
    align-items: center;
    border-top: 1px solid #DEDEDE;
}

.customization-popup-wrapper-body {
    height: 60vh;
    max-height: 60vh;
    overflow-y: scroll;
}

.section-content-flex {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

.customization-list-card {
    padding: var(--small-gap-size);
    border-bottom: 1px solid #DEDEDE;
}

.customization-title-flex {
    display: flex;
    align-items: center;
    gap: var(--small-gap-size);
    justify-content: space-between;
}

.customization-title-label {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--primary-color);
    color: var(--white-color);
    font-size: 0.7rem;
    border-radius: 0.25rem;
    background-color: var(--primary-color);
    line-height: 1;
}


.customization-title-label.customization-title-label-light {
    border: 1px solid #DEDEDE;
    color: var(--primary-color);
    background-color: #DEDEDE;
}

.custom-radio-wrapper {
    display: flex;
    align-items: end;
    margin: 8px 0;
    gap: 1rem;
    /* justify-content: space-between; */
}

.custom-checkbox-wrapper {
    display: flex;
    align-items: end;
    margin: 8px 0;
    gap: 1rem;
    /* justify-content: space-between; */
}

.custom-radio-wrapper input[type=checkbox],
.custom-checkbox-wrapper input[type=checkbox],
.custom-radio-wrapper input[type=radio],
.custom-checkbox-wrapper input[type=radio] {
    margin-left: auto;
}

.custom-radio {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid black;
    border-radius: 50%;
    position: relative;
    outline: none;
    cursor: pointer;
    margin-right: 8px;
    /* Space between radio button and label */
}

.custom-radio:checked::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-radio+label {
    cursor: pointer;
    padding-left: 0.5rem;
    transform: translateY(1px);
}

input[type=checkbox]:focus,
input[type=radio]:focus {
    outline: unset !important;
    outline: unset !important;
    outline-offset: unset !important;
}

.customization-list-ul-li {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--small-gap-size);
    row-gap: 0.5rem;
}

.customization-list-ul-li.customization-list-ul-li-3grid {
    grid-template-columns: repeat(3, 1fr);
}




.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid black;
    border-radius: 4px;
    /* Rounded corners for a checkbox */
    position: relative;
    outline: none;
    cursor: pointer;
    margin-right: 8px;
    /* Space between checkbox and label */
}

.custom-checkbox:checked::before {
    content: "";
    width: 4px;
    height: 8px;
    border: 2px solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 1px;
    left: 4px;
}

.custom-checkbox+label {
    cursor: pointer;
    padding-left: 0.5rem;
    transform: translateY(3px);
}

.customization-list-card-text-area {
    padding: var(--small-gap-size);
}

.shop-list-card-cart-body {
    padding: var(--small-gap-size);
    height: 45vh;
    max-height: 45vh;
    overflow-y: scroll;
    min-height: 45vh;
    padding-right: calc(1.5rem - 16px);
}

.shop-list-card-cart-footer button.foodboss-button {
    width: 100%;
    border-top-left-radius: 0;
    padding: 1.25rem;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.flex-row-normal.flex-row-normal-justify {
    justify-content: space-between;
    align-items: center;
}

.shop-list-card-cart-total-list {
    padding: var(--small-gap-size);
    border-top: 1px solid #DEDEDE;
}

.text-right-currency {
    text-align: right;
}

.order-cart-card-flex .cart-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.order-cart-card-flex .quantity-controls {
    display: flex;
    justify-content: end;
    align-items: center;
}

.order-cart-card-flex input[type="number"] {
    width: fit-content;
    padding: 0.5rem;
    border: 1px solid var(--background-gray);
    border-radius: 0;
    font-size: 1rem !important;
    line-height: 1 !important;
    font-family: var(--semibold-font-family);
    text-align: center;
    display: block;
    max-width: 3rem;
    height: 2.25rem;
}

.order-cart-card-flex button.quantity-btn {
    background-color: var(--secondary-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 1 !important;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: center;
    height: 2.25rem;
    max-height: 2.25rem;
    align-items: center;
}

.quantity-btn span {
    color: var(--white-color);
    font-size: 1rem !important;
    line-height: 1 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.order-cart-card-flex button.quantity-btn:disabled {
    background-color: #ddd;
    cursor: not-allowed;
}

.order-cart-card-flex {
    display: flex;
    align-items: start;
    gap: var(--small-gap-size);
}

.order-cart-card-flex>div:nth-child(1) {
    width: calc(100% - 30% - 0.75rem);
    flex-basis: calc(100% - 30% - 0.75rem);
}

.order-cart-card-flex>div:nth-child(2) {
    width: calc(100% - 70% - 0.75rem);
    flex-basis: calc(100% - 70% - 0.75rem);
}

.quantity-btn-remove {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.quantity-btn-add {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.section-smallest-link-btn a {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: fit-content;
    transform: translateX(10px);
    margin-top: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.section-smallest-link-btn a:hover {
    color: var(--secondary-color);
}

.gray-color {
    color: #aeaeae !important;
}

.order-cart-shop-page-card {
    padding: var(--small-gap-size) 0;
    border-bottom: 1px solid #DEDEDE;
}

.order-cart-shop-page-card:last-child {
    border-bottom: 0px !important;
}

.left-category-card-title p {
    width: fit-content;
    position: relative;
}

.left-category-card-title.highlighted p::after {
    width: 2.5rem;
    height: 2px;
    left: 105%;
    top: 50%;
    background-color: var(--primary-color);
    transform: translateY(-50%);
    content: "";
    position: absolute;
}

.search-and-menu-bar-mobile-wrapper {
    display: none;
}

.shop-jump-mobile-overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(2px);
    z-index: 9999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease;
}

.shop-jump-mobile-overlay.shop-jump-mobile-overlay-active {
    opacity: 1;
    visibility: visible;
    transition: all 0.6s ease;
}

/* .shop-jump-wrapper-card {
    position: fixed;
    bottom: 12%;
    display: none;
    right: 1rem;
    z-index: 99999999;
    background-color: var(--white-color);
    border-radius: 0.5rem;
    padding: 1.5rem 2rem 1.5rem 1.5rem;
    max-height: 30vh;
    overflow-y: scroll;
    width: 50%;
} */

.shop-jump-wrapper-card.shop-jump-wrapper-card-active {
    display: block;
}

.scrollable-tab-menu.active p {
    font-family: var(--semibold-font-family);
    color: var(--secondary-color);
}

.shop-jump-wrapper-card.shop-jump-wrapper-card-active {
    /* bottom: 8rem; */
    max-height: 50vh;
    padding: 1.5rem 2rem 1.5rem 1.5rem;
    transition: var(--common-transition);
}

.shop-jump-wrapper-card {
    position: fixed;
    bottom: 8rem;
    transition: var(--common-transition);
    display: block;
    right: 1rem;
    z-index: 9999999;
    background-color: var(--primary-color);
    border-radius: 1rem;
    padding: 0 2rem;
    max-height: 0;
    overflow-y: scroll;
    width: 70%;
}

.shop-jump-wrapper-card {
    scrollbar-width: thin;
    /* For Firefox */
    scrollbar-color: transparent transparent;
    /* For Firefox */

    /* For WebKit browsers (Chrome, Safari, etc.) */
    &::-webkit-scrollbar {
        width: 0;
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    &::-webkit-scrollbar-track {
        background-color: transparent;
    }
}

.scrollable-strip-panel-mobile {
    display: none;
}

.checkout-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--small-gap-size);
    grid-template-areas: 'checkout-address checkout-address checkout-details';
}

.checkout-grid-wrapper>div:nth-child(2) {
    height: fit-content;
    grid-area: checkout-address;
    position: sticky;
    top: 4rem;
}

.checkout-grid-wrapper>div:nth-child(3) {
    height: fit-content;
    grid-area: checkout-details;
}

.customization-popup-wrapper-body.customization-popup-wrapper-body-address {
    height: fit-content;
    padding: 2rem 1.5rem;
}

.order-type-dropdown select {
    background-color: transparent;
    color: var(--white-color);
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 0 !important;
    outline: 0 !important;
    padding-right: 2rem;
    cursor: pointer;
    position: relative;
    font-size: 1.15rem;
}

.delivery-type-icon {
    cursor: pointer;
    font-size: 1.35rem !important;
    color: var(--white-color) !important;
    position: absolute;
    right: 0;
    top: 60%;
    transform: translateY(-50%);
}

.address-radio-option {
    display: flex;
    align-items: start;
    gap: 1rem;
    cursor: pointer;
}

.select-address-grid-checkout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--small-gap-size);
}

.a-block-right {
    display: block;
    width: fit-content;
    margin-left: auto;
}


.payment-options {
    display: flex;
    gap: var(--small-gap-size);
}

.payment-option {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--primary-color);
    border-radius: 0.45rem;
    background-color: transparent;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    outline: none;
    text-align: center;
}

.payment-option p {
    margin: 0;
    font-weight: bold;
    margin-right: var(--common-gap-size);
}

.payment-option span {
    font-size: var(--link-font-size);
}

/* Styling for selected button */
.payment-option.selected {
    border-color: var(--secondary-color);
    background-color: var(--secondary-color);
}

.payment-option.selected p,
.payment-option.selected span {
    color: var(--white-color) !important;
}

.tip-box-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--small-gap-size);
    align-items: center;
}

.tip-box {
    padding: 0.5rem 1rem;
    background-color: transparent;
    border: 1px solid var(--secondary-color);
    text-align: center;
}

.tip-box.selected {
    background-color: var(--secondary-color);
    color: var(--white-color) !important;
}

.promo-apply-flex {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 'promo-input promo-input promo-input promo-input-apply';
}

.promo-apply-flex>div:nth-child(1) {
    grid-area: promo-input;
}

.promo-apply-flex>div:nth-child(1) .form-control-foodboss {
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

.promo-apply-flex>div:nth-child(2) {
    grid-area: promo-input-apply;
    background: var(--primary-color);
    color: #FFF;
    font-size: 1rem;
    font-family: var(--medium-font-family);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.promocodes-flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--small-gap-size);
    justify-content: center;
}

.promocode-icon {
    width: 8rem;
}

.order-placed-successfully-banner {
    width: 100%;
    padding: var(--medium-gap-size);
    background-color: var(--secondary-color);
    border-radius: 1rem;
}

.past-orders-successfully-banner {
    width: 100%;
    padding: var(--medium-gap-size);
    background-color: var(--secondary-color);
    background-image: url(../images/common-banner.jpg);
    border-radius: 1rem;
    background-size: cover;
    background-repeat: no-repeat;
}

.order-placed-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--small-gap-size);
    grid-template-areas: 'order-details order-details order-details-prices';
}

.order-placed-grid-wrapper>div:nth-child(1) {
    height: fit-content;
    grid-area: order-details;
}

.order-placed-grid-wrapper>div:nth-child(2) {
    height: fit-content;
    grid-area: order-details-prices;
}

.shop-list-grid-wrapper-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--small-gap-size);
}

.shop-list-btn-flex {
    display: flex;
    gap: var(--small-gap-size);
    justify-content: end;
    align-items: center;
}

.shop-list-grid-wrapper-inner .inner-flex {
    gap: 0.1rem;
}

.shop-list-grid-wrapper-inner .inner-flex.inner-flex.inner-flex-medium {
    gap: var(--medium-gap-size);
}

.star-ratings-flex {
    display: flex;
    gap: var(--common-gap-size);
    align-items: center;
}

.star-ratings-icon {
    cursor: pointer;
    transition: transform 0.2s;
}

.star-ratings-icon img {
    filter: grayscale(1);
}

.star-ratings-icon-active img {
    filter: brightness(1.2);
}

.star-ratings-icon:hover {
    transform: scale(1.2);
}

.small-action-btns {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    background-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    outline: none !important;
    transition: var(--common-transition);
}

.small-action-btns p,
.small-action-btns span {
    transition: var(--common-transition);
    font-size: 0.85rem;
    line-height: 1;
}

.small-action-btns.small-action-btns-cancel {
    background-color: #FF0000;
    border-color: #FF0000;
    transition: var(--common-transition);
}

.small-action-btns.small-action-btns-cancel:hover {
    background-color: transparent;
    transition: var(--common-transition);
}

.small-action-btns.small-action-btns-cancel:hover p,
.small-action-btns.small-action-btns-cancel:hover span {
    color: #FF0000;
    transition: var(--common-transition);
}

.small-action-btns.small-action-btns-save p,
.small-action-btns.small-action-btns-save span,
.small-action-btns.small-action-btns-cancel p,
.small-action-btns.small-action-btns-cancel span {
    color: var(--white-color);
}

.small-action-btns.small-action-btns-save {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transition: var(--common-transition);
}


.small-action-btns.small-action-btns-save:hover {
    background-color: transparent;
    transition: var(--common-transition);
}

.small-action-btns.small-action-btns-save:hover p,
.small-action-btns.small-action-btns-save:hover span {
    color: var(--secondary-color);
    transition: var(--common-transition);
}

.reviews-action-btn {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap-size);
    align-items: center;
    justify-content: end;
    margin-bottom: var(--small-gap-size);
}


.past-order-wrappers {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap-size);
    align-items: start;
}

.profile-banner-division {
    width: 100%;
    padding: unset;
    background-color: transparent;
    background-image: unset;
    border-radius: unset;
    background-size: cover;
    overflow: hidden;
    background-repeat: no-repeat;
    height: fit-content;
}

.black-overlay-profile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.profile-pic-img {
    width: 5rem;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    overflow: hidden;
}

.profile-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap-size);
    align-items: center;
}

.profile-card-icon span {
    font-size: 1.5rem !important;
    line-height: 1 !important;
}


.profile-link-card>a .section-paragraph p,
.profile-link-card>a .section-paragraph p span {
    font-size: 1.2rem;
    line-height: 1;
}

.profile-link-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-link-card {
    overflow: hidden;
    border-radius: 1rem;
}

.profile-link-card>a {
    padding: var(--small-gap-size);
    border: 1px solid transparent;
    border-radius: 1rem;
    flex-direction: row;
    align-items: center;
}

.profile-link-card:hover {
    background-color: #ffffff4d;
    border-color: #ffffff4d;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.profile-link-card.active {
    border-color: var(--white-color);
    background-color: var(--white-color);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.tab-content-wrapper-profile {
    display: none;
}

.tab-content-wrapper-profile[ng-show] {
    display: block;
    padding: var(--medium-gap-size);
    min-height: 70lvh;
}

.profile-link-card.active span,
.profile-link-card:hover span,
.profile-link-card.active p,
.profile-link-card:hover p {
    color: var(--secondary-color);
}

.faqs-banner {
    width: 100%;
    padding: var(--medium-gap-size);
    background-color: var(--secondary-color);
    border-radius: 1rem;
}

.minus-acc {
    display: none !important;
}

.accordion-block.accordion-block-faq {
    padding: var(--common-gap-size);
    border: 1px solid var(--secondary-color);
    border-radius: 0.75rem;
    overflow: hidden;
}

.accordion_click_faq {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--small-gap-size);
    cursor: pointer;
}

.accordion_click_faq.active .minus-acc {
    display: block !important;
}

.accordion_click_faq.active .plus-acc {
    display: none !important;
}
.accordion_click_profile.accordion_click_profile_Acc  .minus-acc {
    display: none !important;
}
.accordion_click_profile.accordion_click_profile_Acc.active_profile .minus-acc {
    display: block !important;
}

.accordion_click_profile.accordion_click_profile_Acc.active_profile .plus-acc {
    display: none !important;
}

.content_accordian_active,
.content_accordian {
    padding-top: 1rem;
}

.accordion_click_faq.active p,
.accordion_click_faq.active span,
.accordion_click_faq:hover p,
.accordion_click_faq:hover span {
    color: var(--secondary-color);
}

.search-bar-mobile {
    margin-bottom: unset;
    width: calc(100% - 75% - 3rem);
    margin-left: auto;
}


.price-striked-shop p {
    text-decoration: line-through;
    opacity: 0.7;
}

.price-bubble {
    padding: 0.25rem;
    background-color: var(--secondary-color);
    -webkit-box-shadow: 5px 5px 0px -3px rgba(0, 0, 0, 1);
    -moz-box-shadow: 5px 5px 0px -3px rgba(0, 0, 0, 1);
    box-shadow: 5px 5px 0px -3px rgba(0, 0, 0, 1);
}

.price-bubble p {
    color: var(--white-color) !important;
    line-height: 1 !important;
}


.ride-future-tip-form {
    padding-top: 1.5rem;
    margin-top: 1rem;
    border-top: 1px dashed #DEDEDE;
}

.flex-row-normal.justify-flex-row {
    justify-content: space-between;
}

.opacity5 {
    opacity: 0.5;
}

.itemImage_Wrap_details img {
    border-radius: 0.5rem;
}

.menu-btn-jump-mobile {
    display: none;
}

.shop-detail-header-wrapper {
    background-color: var(--white-color);
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid #e2e2e2;
}

.shop-detail-header-wrapper .form-input-icon.form-input-icon-left span.material-symbols-outlined {
    font-size: 20px;
}

.shop-detail-header-wrapper .form-input-icon.form-input-icon-left {
    left: 0.5rem;
    width: 20px;
    top: 0.75rem;
    height: 20px;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.shop-detail-header-wrapper .form-control-foodboss {
    padding: 0.5rem 1rem 0.5rem 2.5rem;
}

.shop-header-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--medium-gap-size);
    justify-content: space-between;
}

.footer-bottom-checkout-card-wrapper {
    background-color: var(--white-color);
    position: fixed;
    z-index: 999999;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #e2e2e2;
}

.secondary-icon-color {
    fill: var(--secondary-color);
}

.lh1 {
    line-height: 1 !important;
}

svg {
    display: block;
}

.shop-footer-card-flex {
    display: flex;
    flex-direction: row;
    padding: 1rem var(--small-gap-size);
    gap: var(--small-gap-size);
    align-items: center;
    justify-content: space-between;
}

.cart-details-small-expandable-footer {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    line-height: 1;
    align-items: center;
}

.dblock {
    display: block !important;
}

.checkout-cards-wrapper-footer-bottom {
    width: 65%;
    margin: 0 auto;
    padding: 2rem 0 5rem 0;
    border: 1px solid #e2e2e2;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    position: fixed;
    bottom: 0;
    display: none;
    background: #FFF;
    z-index: 99999;
    left: 50%;
    transform: translateX(-50%);
    transition: var(--common-transition);
}

.checkout-cards-wrapper-footer-bottom.checkout-cards-wrapper-footer-bottom-active {
    display: block;
    transition: var(--common-transition);
}

.checkout-cards-wrapper-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--medium-gap-size);
    padding: 0 1.5rem;
    min-height: 15vh;
    max-height: 45vh;
    overflow-y: auto;
}


.checkout-cards-wrapper-footer-bottom-overlay.checkout-cards-wrapper-footer-bottom-overlay-active {
    opacity: 1;
    visibility: visible;
    transition: var(--common-transition);
}

.checkout-cards-wrapper-footer-bottom-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: var(--common-transition);
}

.footer-bottom-checkout-card-wrapper.footer-bottom-checkout-card-wrapper-active {
    background-color: transparent;
    border-color: transparent;
}

.shop-footer-card-flex.shop-footer-card-flex-active {
    border: 1px solid #e2e2e2;
    background-color: var(--white-color);
}


#checkout-page-wrapper-food-boss {
    background-color: var(--background-gray);
}

.material-symbols-outlined.material-symbols-outlined-white {
    color: var(--white-color);
}

.web-white {
    color: var(--white-color) !important;
}


.country-code-select {
    -webkit-appearance: none;
    appearance: none;
    border: 0px;
    outline: 0px;
    padding: 0;
    cursor: pointer;
    width: min-content;
    font-size: 1rem;
    font-family: var(--medium-font-family);
}

.order-checkout-grid-wrapper-order-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--medium-gap-size);
    align-items: start;
}

.section-text-smallest p {
    font-size: 0.85rem;
    line-height: 1.5;
}

.order-cart-card-flex>div.image-wrapper-card-checkout:nth-child(2) {
    width: calc(100% - 70% - 0.75rem);
    flex-basis: calc(100% - 70% - 0.75rem);
    display: flex;
    align-items: center;
    flex-direction: column;
}

.image-wrapper-card-checkout .itemImage_Wrap_details {
    margin-bottom: -15%;
}

.section-smallest-link-btn a {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: fit-content;
    transform: unset;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.login-popup-wrapper {
    position: fixed;
    width: 40vw;
    height: 100vh;
    padding: var(--medium-gap-size);
    right: -100%;
    z-index: 99999999;
    top: 0;
    background-color: var(--white-color);
    transition: var(--common-transition);
}

.login-popup-wrapper.login-popup-wrapper-active {
    transition: var(--common-transition);
    right: 0;
}

.login-popup-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(2px);
    z-index: 9999999;
    opacity: 0;
    visibility: hidden;
    transition: var(--common-transition);
}

.login-popup-overlay.login-popup-overlay-active {
    opacity: 1;
    visibility: visible;
    transition: var(--common-transition);
}

.primary-color {
    color: var(--primary-color) !important;
}

md-toast {
    z-index: 10588888888888888888888;
}

.login-popup-wrapper-flex {
    width: 50%;
}

.profile-edit-btn {
    margin-left: auto;
}

.profile-tab-wrapper {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: var(--small-gap-size);
    background-color: var(--white-color);
}


.profile-tab-wrapper>div:nth-child(1) {
    width: calc(100% - 80%);
    flex-basis: calc(100% - 80%);
    padding: var(--small-gap-size);
    background: #F1F0F5 !important;
    padding-right: 0;
}

.profile-tab-wrapper>div:nth-child(2) {
    width: calc(100% - 20%);
    flex-basis: calc(100% - 20%);
}

.past-order-wrappers .shop-list-card-cart-body {
    height: fit-content;
    min-height: unset;
    max-height: 45vh;
    overflow-y: scroll;
    padding: 0;
}

.past-order-wrappers .shop-list-cards {
    width: 100%;
    padding: 0;
}

.start-wrapper-past-order-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--small-gap-size);
    padding: var(--small-gap-size);
}

.tab-content-wrapper-profile .saved-address-grid {
    grid-template-columns: repeat(3, 1fr);
}