Your IP : 216.73.217.77
@charset "UTF-8";
:root {
--red: #E93C3C;
--blue: #00749B;
--dark: #160040;
--black: #000000;
--white: #ffffff;
--green: #1AB759;
--gray: #D9DBE9;
--slate: #F7F7FC;
--purple: #b12fad;
--orange: #e86121;
--yellow: #FFB006;
--indigo: #6610f2;
--text: #6E7191;
--focus: #008BBA;
--alert: #FB4E4E;
--primary: #EE1D48;
--secondary: #1F1F39;
--placeholder: #A0A3BD;
--border-gray: #D9DBE9;
--border-slate: #EFF0F6;
--facebook: #3b5998;
--linkedin: #0e76a8;
--twitter: #00acee;
--google: #E60023;
--instagram: #F77737;
--whatsapp: #25D366;
--pinterest: #f0002a;
--youtube: #FF0000;
}
@media (max-width: 991px) {
.content-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.activate {
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.actiavte.active {
background-color: var(--primary);
color: var(--white);
}
.px-12 {
padding-left: 12px;
padding-right: 12px;
}
.mt-24 {
margin-top: 24px;
}
.text-inherit {
text-transform: inherit;
}
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
outline: 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul,
ol {
padding: 0px;
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--secondary);
margin-bottom: 0px;
}
p,
ol,
ul,
li,
dl,
dd,
dt,
span,
figure,
aside,
label {
margin: 0px;
padding: 0px;
}
a,
span {
display: inline-block;
}
html,
body {
color: var(--secondary);
background: var(--white);
direction: ltr;
scroll-behavior: smooth;
}
input,
select,
button,
textarea {
border: none;
outline: none;
background-color: transparent;
}
input:focus,
select:focus,
button:focus,
textarea:focus {
outline: none;
}
.h-0 {
height: 0px;
}
.isolate {
isolation: isolate;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.transition {
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
body {
font-size: 16px;
font-weight: 400;
font-family: "OpenSauceOne", sans-serif;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: var(--text);
}
input::-moz-placeholder,
textarea::-moz-placeholder {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: var(--text);
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: var(--text);
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: var(--text);
}
input::placeholder,
textarea::placeholder {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: var(--text);
}
.form-fieldset {
padding: 20px;
border-radius: 16px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
@media (max-width: 575px) {
.form-fieldset {
padding: 16px;
}
}
.form-legend {
font-size: 22px;
font-weight: 600;
margin-bottom: 18px;
}
.form-group {
margin-bottom: 16px;
position: relative;
}
.form-label {
font-size: 12px;
font-weight: 400;
line-height: 16px;
margin-bottom: 4px;
text-transform: capitalize;
color: var(--secondary);
}
.form-label.required::after {
content: "*";
margin-left: 2px;
font-weight: 700;
color: var(--primary);
}
.form-select,
.form-control {
height: 48px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
padding: 0px 16px;
border-radius: 8px;
color: var(--secondary);
border-color: var(--border-gray);
}
.form-select:focus,
.form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color: var(--primary);
}
.form-check-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.form-check-group label {
padding-left: 8px;
cursor: pointer;
}
.form-checkbox {
--input-size: 16px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
isolation: isolate;
}
.form-checkbox::before {
content: "";
width: var(--input-size);
height: var(--input-size);
border-radius: 4px;
display: inline-block;
background-color: transparent;
border: 1px solid var(--placeholder);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.form-checkbox::after {
content: "✓";
position: absolute;
text-align: center;
font-size: 11px;
inset: 0;
color: transparent;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.form-checkbox:checked::before {
border-color: var(--primary);
background-color: var(--primary);
}
.form-checkbox:checked::after {
color: var(--white);
}
.form-radio {
--input-size: 16px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
isolation: isolate;
}
.form-radio::before {
content: "";
width: var(--input-size);
height: var(--input-size);
border-radius: 50%;
display: inline-block;
background-color: transparent;
border: 2px solid var(--placeholder);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.form-radio::after {
content: "";
position: absolute;
width: calc(var(--input-size) / 2);
height: calc(var(--input-size) / 2);
inset: calc(var(--input-size) / 2 / 2);
border-radius: 50%;
background-color: transparent;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.form-radio:checked::before {
border-color: var(--primary);
}
.form-radio:checked::after {
background-color: var(--primary);
}
.form-number {
width: 100%;
padding: 0px 16px;
border-radius: 8px;
border: 1px solid var(--border-gray);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 12px;
}
.form-number input {
width: 100%;
height: 48px;
}
.form-number-group {
position: relative;
}
.form-number-group button {
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;
height: 48px;
gap: 8px;
}
.form-number-group button img {
width: 16px;
}
.form-number-group button span {
font-size: 14px;
font-weight: 500;
color: var(--secondary);
}
.form-number-group button i {
font-size: 12px;
color: var(--secondary);
}
.form-number-group ul {
position: absolute;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-height: -webkit-fit-content;
min-height: -moz-fit-content;
min-height: fit-content;
max-height: 200px;
overflow-y: auto;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transform: scaleY(0);
transform: scaleY(0);
top: 48px;
left: -12px;
z-index: 3;
padding: 6px;
border-radius: 8px;
background-color: var(--white);
border: 1px solid var(--border-slate);
-webkit-box-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.1);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.form-number-group ul.active {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.form-number-group ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
padding: 4px 25px 4px 7px;
border-radius: 6px;
gap: 8px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.form-number-group ul li:hover {
background-color: var(--slate);
}
.form-number-group ul li img {
width: 14px;
}
.form-number-group ul li span {
font-size: 12px;
font-weight: 500;
color: var(--secondary);
}
.form-alert {
font-size: 12px;
font-weight: 400;
}
.form-alert.red {
color: var(--red);
}
.form-alert.green {
color: var(--green);
}
.form-btn,
.form-btn-inline {
width: 100%;
height: 48px;
font-size: 16px;
font-weight: 700;
line-height: 24px;
border-radius: 30px;
text-transform: capitalize;
cursor: pointer;
color: var(--white);
background-color: var(--primary);
}
.form-btn-inline {
width: auto;
height: auto;
padding: 12px 32px;
}
textarea.form-control {
padding: 15px 15px;
height: 100px;
resize: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.form-uploader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
background-color: var(--white);
position: relative;
border-radius: 8px;
padding: 16px 24px 16px 16px;
gap: 24px;
}
@media (max-width: 575px) {
.form-uploader {
gap: 16px;
padding: 16px;
}
}
.form-uploader::before {
content: "";
position: absolute;
inset: 50%;
width: 100.2%;
height: 102%;
z-index: -1;
border-radius: 8px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 4px dashed var(--border-gray);
}
@media (max-width: 1199px) {
.form-uploader::before {
width: 100.5%;
}
}
@media (max-width: 575px) {
.form-uploader::before {
width: 100.8%;
height: 103%;
}
}
.form-uploader img {
width: 68px;
height: 68px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 8px;
}
@media (max-width: 575px) {
.form-uploader img {
width: 40px;
height: 40px;
}
}
.form-uploader span {
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
font-size: 14px;
font-weight: 600;
}
@media (max-width: 575px) {
.form-uploader span {
font-size: 12px;
}
}
.form-uploader label {
padding: 8px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-transform: capitalize;
cursor: pointer;
color: var(--primary);
border: 1px solid var(--primary);
}
@media (max-width: 575px) {
.form-uploader label {
padding: 5px 15px;
font-size: 12px;
}
}
.badge-text {
font-size: 12px;
font-weight: 400;
line-height: 16px;
padding: 4px 8px;
border-radius: 12px;
text-transform: capitalize;
}
.badge-text.yellow {
color: #E89806;
background-color: #FFF4DA;
}
.badge-text.green {
color: #1AB759;
background-color: #E2FFEE;
}
.badge-text.blue {
color: #008BBA;
background-color: #E2F8FF;
}
.badge-text.red {
color: #E93C3C;
background-color: #FFECEC;
}
.table-responsive {
border-radius: 12px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
.table {
overflow: hidden;
border-radius: 12px;
margin-bottom: 0px;
background-color: var(--white);
}
.table> :not(caption)>*>* {
padding: 16px;
font-size: 12px;
vertical-align: middle;
white-space: nowrap;
color: var(--secondary);
border-color: var(--border-slate);
}
.table tbody tr> :first-child {
font-weight: 600;
}
.table tbody tr:last-child>* {
border: none;
}
.table-primary tr th {
border: none;
font-size: 12px;
font-weight: 600;
text-transform: capitalize;
background-color: #FFE8ED;
color: var(--primary);
}
.table-primary tr th:first-child {
border-top-left-radius: 12px;
}
.table-primary tr th:last-child {
border-top-right-radius: 12px;
}
.table-action {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 12px;
}
.table-action button {
--action-size: 30px;
width: var(--action-size);
height: var(--action-size);
line-height: var(--action-size);
text-align: center;
color: var(--white);
border-radius: 8px;
font-size: 12px;
}
.table-action button.fa-eye {
background-color: var(--focus);
-webkit-box-shadow: 0px 6px 10px rgba(0, 139, 186, 0.24);
box-shadow: 0px 6px 10px rgba(0, 139, 186, 0.24);
}
.table-action button.fa-circle-exclamation {
background-color: var(--alert);
-webkit-box-shadow: 0px 6px 10px rgba(251, 78, 78, 0.24);
box-shadow: 0px 6px 10px rgba(251, 78, 78, 0.24);
}
@media (max-width: 767px) {
table thead {
display: none;
}
}
@media (max-width: 767px) {
table tbody tr {
width: 100%;
display: grid;
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
table tbody tr td {
grid-column: 1/span 6;
padding: 5px 16px !important;
align-self: center;
border: none;
}
table tbody tr td::before {
content: attr(data-title) " : ";
display: inline-block;
min-width: 55px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
}
table tbody tr td:first-child {
padding-top: 20px !important;
}
table tbody tr td:last-child {
padding-bottom: 20px !important;
border-bottom: 1px solid var(--border-slate);
}
}
.fb-btn {
width: 90%;
margin: 0 auto 20px;
padding: 10px 0px;
border-radius: 24px;
letter-spacing: 0.4px;
font-size: 14px;
font-weight: 600;
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;
text-transform: capitalize;
text-align: center;
cursor: pointer;
line-height: 22px;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
color: var(--white);
background-color: var(--primary);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.fb-btn span span {
font-family: sans-serif;
}
.fb-btn:hover {
color: #ffffff;
background-color: rgba(238, 29, 72, 0.9);
-webkit-box-shadow: 0px 8px 18px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 8px 18px 0px rgba(0, 0, 0, 0.12);
}
.fb-btn:focus {
-webkit-box-shadow: 0px 8px 18px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 8px 18px 0px rgba(0, 0, 0, 0.12);
}
.cart-switch-group {
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;
border-radius: 16px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
color: var(--primary);
background-color: #FFE8ED;
}
.cart-switch {
position: relative;
cursor: pointer;
}
.cart-switch-input {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 0;
cursor: pointer;
position: absolute;
}
.cart-switch-input:checked+label {
color: var(--white);
background-color: var(--primary);
}
.cart-switch-label {
padding: 6px 14px;
border-radius: 16px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
text-transform: capitalize;
cursor: pointer;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.section-gap-90 {
margin-bottom: 90px;
}
@media (max-width: 767px) {
.section-gap-90 {
margin-bottom: 50px;
}
}
.section-gap-66 {
margin-bottom: 66px;
}
@media (max-width: 767px) {
.section-gap-66 {
margin-bottom: 16px;
}
}
.section-subtitle {
font-size: 22px;
font-weight: 500;
line-height: 27px;
margin-bottom: 24px;
text-align: center;
display: block;
color: var(--secondary);
}
@media (max-width: 1399px) {
.section-subtitle {
font-size: 22px;
margin-bottom: 12px;
}
}
@media (max-width: 767px) {
.section-subtitle {
font-size: 16px;
line-height: 26px;
margin-bottom: 16px;
}
}
.section-title {
font-size: 48px;
font-weight: 700;
line-height: 59px;
text-align: center;
margin-bottom: 58px;
}
@media (max-width: 1399px) {
.section-title {
font-size: 45px;
line-height: 65px;
margin-bottom: 45px;
}
}
@media (max-width: 767px) {
.section-title {
font-size: 24px;
line-height: 34px;
margin-bottom: 40px;
}
}
.section-title.borderd::after {
content: "";
width: 160px;
height: 5px;
display: block;
border-radius: 5px;
margin: 24px auto 0px;
background-color: var(--primary);
}
@media (max-width: 767px) {
.section-title.borderd::after {
width: 80px;
height: 4px;
margin-top: 14px;
}
}
.cart-counter {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 1px solid var(--border-slate);
border-radius: 6px;
height: 24px;
width: 80px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.cart-counter input {
width: 30px;
height: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
text-align: center;
font-size: 12px;
font-weight: 500;
border-left: 1px solid var(--border-slate);
border-right: 1px solid var(--border-slate);
}
.cart-counter button {
width: 100%;
height: 100%;
font-size: 10px;
cursor: pointer;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.cart-counter button:hover {
color: var(--primary);
}
.thin-scroll {
overflow-y: auto;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.thin-scroll::-webkit-scrollbar {
width: 7px;
background-color: transparent;
}
.thin-scroll::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(110, 113, 145, 0.7);
border: 2px solid var(--white);
}
.pagination-nav {
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;
border: 1px solid var(--border-gray);
border-radius: 8px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
overflow: hidden;
}
.pagination-menu {
--paginate-size: 35px;
text-align: center;
width: var(--paginate-size);
height: var(--paginate-size);
line-height: var(--paginate-size);
border-right: 1px solid var(--border-gray);
color: var(--text);
font-size: 12px;
font-weight: 600;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
@media (max-width: 575px) {
.pagination-menu {
--paginate-size: 30px;
}
}
.pagination-menu:hover {
color: var(--primary);
background-color: rgba(238, 29, 72, 0.1);
}
.pagination-menu.active {
color: var(--primary);
background-color: rgba(238, 29, 72, 0.1);
}
.pagination-menu:last-child {
border-right: none;
}
.pagination-menu.fa-solid {
font-size: 12px;
font-weight: 900;
}
.category-card {
width: 100%;
border-radius: 12px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
display: block;
}
.category-card:hover img {
-webkit-transform: scale(1.05) rotate(3deg);
transform: scale(1.05) rotate(3deg);
}
.category-card img {
width: 100%;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.category-card h4 {
position: absolute;
text-transform: capitalize;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
bottom: 0px;
left: 0px;
width: 100%;
padding: 12px;
font-size: 24px;
font-weight: 500;
line-height: 30px;
color: var(--white);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
background: linear-gradient(92.22deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
}
@media (max-width: 575px) {
.category-card h4 {
font-size: 18px;
padding: 8px 12px;
}
}
.restaurant-card {
width: 100%;
display: block;
border-radius: 12px;
margin-bottom: 24px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.restaurant-card:hover {
-webkit-box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08);
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08);
}
.restaurant-card:hover img {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
.restaurant-card .figure {
display: block;
overflow: hidden;
border-radius: 12px 12px 0px 0px;
}
.restaurant-card img {
width: 100%;
border-radius: 12px 12px 0px 0px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.restaurant-card .content {
padding: 16px 12px 12px;
border-radius: 0px 0px 12px 12px;
border: 1px solid var(--border-gray);
border-top: none;
}
.restaurant-card h4 {
font-size: 18px;
font-weight: 500;
line-height: 24px;
margin-bottom: 12px;
color: var(--dark);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.restaurant-card .ratings {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
margin-bottom: 12px;
gap: 6px;
}
.restaurant-card .ratings svg {
fill: var(--gray);
stroke: var(--gray);
}
.restaurant-card .ratings .active {
fill: var(--yellow);
stroke: var(--yellow);
}
.restaurant-card .ratings span {
font-size: 14px;
font-weight: 300;
line-height: 20px;
margin-left: 3px;
color: var(--secondary);
}
.restaurant-card .location {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
margin-bottom: 12px;
gap: 10px;
}
.restaurant-card .location svg {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.restaurant-card .location span {
font-size: 14px;
font-weight: 300;
line-height: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: var(--secondary);
}
.restaurant-card p {
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-transform: capitalize;
}
.restaurant-card p.on {
color: var(--green);
}
.restaurant-card p.off {
color: var(--red);
}
.product-card-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-template-rows: auto;
gap: 24px;
}
@media (max-width: 1199px) {
.product-card-group {
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
}
.product-card {
border-radius: 8px;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
border: 1px solid var(--border-slate);
}
.product-card-media {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 110px;
height: 100%;
}
.product-card-media img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.product-card-content {
width: 100%;
height: 100%;
padding: 10px 12px 12px;
gap: 8px;
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: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
overflow: hidden;
}
.product-card-title {
font-size: 14px;
font-weight: 600;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
width: inherit;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.product-card-title:hover {
color: var(--primary);
}
.product-card-text {
font-size: 10px;
font-weight: 400;
line-height: 16px;
color: var(--text);
}
.product-card-info {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.product-card-price {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 8px;
}
.product-card-price del {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: var(--text);
}
.product-card-price span {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.product-card-add {
cursor: pointer;
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;
gap: 6px;
padding: 4px 8px;
border-radius: 12px;
background-color: var(--white);
-webkit-box-shadow: 0px 8px 16px rgba(23, 31, 70, 0.08);
box-shadow: 0px 8px 16px rgba(23, 31, 70, 0.08);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.product-card-add:hover {
background-color: var(--primary);
}
.product-card-add:hover span {
color: var(--white);
}
.product-card-add:hover svg {
fill: var(--white);
}
.product-card-add span {
font-size: 12px;
font-weight: 500;
line-height: 16px;
text-transform: capitalize;
color: var(--primary);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.product-card-add svg {
fill: var(--primary);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.booking-card {
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.booking-card-figure {
position: relative;
isolation: isolate;
}
.booking-card-figure img {
width: 100%;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.booking-card-figcaption {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
padding: 12px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background: linear-gradient(92.22deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.booking-card-figcaption dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 8px;
gap: 24px;
}
.booking-card-figcaption dl dt {
font-size: 18px;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: capitalize;
cursor: pointer;
color: var(--white);
}
.booking-card-figcaption dl dd {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
gap: 2px;
padding: 2px 6px;
border-radius: 30px;
background-color: var(--primary);
}
.booking-card-figcaption dl dd i {
font-size: 11px;
color: var(--white);
}
.booking-card-figcaption dl dd span {
font-size: 12px;
font-weight: 500;
color: var(--white);
}
.booking-card-figcaption p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
.booking-card-figcaption p svg {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.booking-card-figcaption p span {
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--white);
}
.booking-card-details {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border: 1px solid var(--border-gray);
border-top: none;
}
.booking-card-details dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 16px;
gap: 12px;
border-bottom: 1px solid var(--border-gray);
}
.booking-card-details dl dd {
font-size: 16px;
text-transform: capitalize;
color: var(--blue);
}
.booking-card-details ul {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-template-rows: auto;
padding: 16px;
}
.booking-card-details ul li {
font-size: 12px;
text-transform: capitalize;
}
.booking-card-details ul li span {
font-size: 14px;
font-weight: 500;
display: block;
text-transform: initial;
}
.auth {
overflow: hidden;
padding: 32px 0px 50px;
}
.auth-content {
border-radius: 12px;
background-color: var(--white);
border: 1px solid var(--border-slate);
}
.auth-banner {
width: 100%;
max-width: 480px;
height: 100vh;
-o-object-fit: cover;
object-fit: cover;
position: fixed;
top: 0px;
right: 0px;
}
@media (max-width: 1199px) {
.auth-banner {
max-width: 400px;
}
}
@media (max-width: 991px) {
.auth-banner {
max-width: 250px;
}
}
@media (max-width: 767px) {
.auth-banner {
display: none;
}
}
.auth-navs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-column-gap: 36px;
-moz-column-gap: 36px;
column-gap: 36px;
padding: 0px 16px;
border-bottom: 1px solid var(--border-slate);
}
.auth-navs .nav-link {
padding: 16px 0px;
line-height: 20px;
font-size: 14px;
font-weight: 500;
position: relative;
text-transform: capitalize;
border-bottom: 2px solid transparent;
color: var(--secondary);
}
.auth-navs .nav-link.active {
color: var(--primary);
border-color: var(--primary);
}
.auth-tabs {
padding: 16px;
}
.auth-header {
padding: 10px 0px 32px;
text-align: center;
}
.auth-header h3 {
line-height: 34px;
margin-bottom: 8px;
font-size: 22px;
font-weight: 600;
text-transform: capitalize;
}
.auth-header p {
line-height: 16px;
font-size: 12px;
font-weight: 300;
}
.auth-divide {
margin: 25px 0px;
position: relative;
text-align: center;
z-index: 1;
}
.auth-divide::after {
position: absolute;
content: "";
z-index: -1;
top: 13px;
left: 0;
width: 100%;
height: 1px;
background-color: var(--border-slate);
}
.auth-divide span {
font-size: 12px;
font-weight: 400;
line-height: 16px;
padding: 0px 12px;
text-transform: capitalize;
color: var(--text);
background-color: var(--white);
}
.auth-sync {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
row-gap: 15px;
-webkit-column-gap: 25px;
-moz-column-gap: 25px;
column-gap: 25px;
}
@media (max-width: 575px) {
.auth-sync {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.auth-sync a {
width: 100%;
height: 48px;
border-radius: 30px;
background-color: var(--slate);
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;
gap: 12px;
}
.auth-sync a img {
width: 24px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.auth-sync a span {
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-transform: capitalize;
color: var(--secondary);
}
.auth-types {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
row-gap: 15px;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
margin-bottom: 24px;
}
.auth-types li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: unset;
-ms-flex-align: unset;
align-items: unset;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8px;
}
.auth-types li input {
accent-color: var(--primary);
cursor: pointer;
}
.auth-types li label {
font-size: 12px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
text-transform: capitalize;
color: var(--secondary);
}
@media (max-width: 991px) {
.cart-flow {
overflow-y: hidden;
}
}
@media (max-width: 991px) {
.cart-sidebar {
position: fixed;
inset: 0;
z-index: 5;
opacity: 0;
visibility: hidden;
background-color: rgba(0, 0, 0, 0.5);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
}
@media (max-width: 991px) {
.cart-sidebar.active {
opacity: 1;
visibility: visible;
}
}
.cart-sidebar.active .cart-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.cart-content {
width: 100%;
max-width: 380px;
position: fixed;
isolation: isolate;
top: 71px;
right: 0px;
-webkit-transform: translateX(105%);
transform: translateX(105%);
background-color: var(--white);
border-left: 1px solid var(--border-slate);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
@media (min-width: 992px) and (max-width: 1100px) {
.cart-content {
max-width: 320px;
}
}
@media (max-width: 991px) {
.cart-content {
top: 0px;
}
}
.cart-content .cart-close {
cursor: pointer;
font-size: 16px;
position: absolute;
top: 20px;
left: -13px;
z-index: 1;
width: 26px;
height: 26px;
line-height: 26px;
border-radius: 50%;
text-align: center;
background-color: var(--white);
color: var(--red);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
@media (min-width: 0px) and (max-width: 400px) {
.cart-content .cart-close {
border: 1px solid var(--border-slate);
line-height: 24px;
left: 20px;
}
}
.cart-content .cart-close:hover {
background-color: var(--red);
border-color: var(--red);
color: var(--white);
}
.cart-empty {
width: 100%;
height: 100vh;
}
.cart-empty h2 {
margin-bottom: 60px;
}
.cart-empty img {
width: 100%;
max-width: 160px;
margin-bottom: 40px;
margin-inline: auto;
display: block;
}
.cart-empty p {
padding: 0px 35px;
text-align: center;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: var(--text);
}
.cart-title {
width: 100%;
padding: 15px;
font-size: 22px;
font-weight: 600;
line-height: 34px;
text-align: center;
text-transform: capitalize;
border-bottom: 1px solid var(--border-slate);
color: var(--blue);
}
.cart-switch-group {
margin-top: 20px;
margin-bottom: 18px;
}
.cart-heading {
font-size: 16px;
font-weight: 500;
text-align: center;
margin-bottom: 18px;
}
.cart-scroll-group {
height: calc(100vh - 215px);
overflow-y: auto;
}
@media (max-width: 991px) {
.cart-scroll-group {
height: calc(100vh - 145px);
}
}
.cart-scroll-group::-webkit-scrollbar {
width: 4px;
background-color: transparent;
}
.cart-scroll-group::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: var(--placeholder);
}
.cart-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 15px;
padding: 12px 16px;
border-top: 1px solid var(--border-slate);
}
.cart-item:last-child {
border-bottom: 1px solid var(--border-slate);
}
.cart-delete {
-ms-flex-negative: 0;
flex-shrink: 0;
margin-top: 2px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
cursor: pointer;
}
.cart-meta-group {
width: 100%;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
overflow: hidden;
}
.cart-meta-group .cart-name {
font-size: 14px;
font-weight: 600;
line-height: 20px;
margin-bottom: 5px;
text-transform: capitalize;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.cart-meta-group .cart-name:hover {
color: var(--primary);
}
.cart-meta-group .cart-size {
font-size: 12px;
font-weight: 400;
line-height: 20px;
margin-bottom: 2px;
text-transform: capitalize;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.cart-meta-group .cart-extra {
font-size: 12px;
font-weight: 400;
line-height: 20px;
text-transform: capitalize;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: var(--text);
}
.cart-action-group .cart-price {
font-size: 12px;
font-weight: 700;
line-height: 20px;
margin-bottom: 5px;
text-align: right;
text-transform: capitalize;
color: var(--primary);
}
.cart-price-group {
padding: 16px 16px 0px;
}
.cart-coupon {
height: 38px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 16px;
}
.cart-coupon input {
width: 100%;
height: 100%;
padding: 0px 16px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border: 1px solid var(--border-gray);
border-right: none;
}
.cart-coupon input::-webkit-input-placeholder {
font-size: 12px;
font-weight: 500;
line-height: 16px;
}
.cart-coupon input::-moz-placeholder {
font-size: 12px;
font-weight: 500;
line-height: 16px;
}
.cart-coupon input:-ms-input-placeholder {
font-size: 12px;
font-weight: 500;
line-height: 16px;
}
.cart-coupon input::-ms-input-placeholder {
font-size: 12px;
font-weight: 500;
line-height: 16px;
}
.cart-coupon input::placeholder {
font-size: 12px;
font-weight: 500;
line-height: 16px;
}
.cart-coupon button {
height: 100%;
font-size: 12px;
font-weight: 500;
line-height: 16px;
padding: 0px 18px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
text-transform: capitalize;
cursor: pointer;
color: var(--white);
background-color: var(--green);
}
.cart-amount-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 12px;
}
.cart-amount-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.cart-amount-item:last-child span {
font-weight: 600;
color: var(--heading);
}
.cart-amount-item span {
font-size: 14px;
text-transform: capitalize;
color: var(--text);
}
.cart-amount-btn-div {
padding: 16px;
}
.cart-amount-btn {
width: 100%;
height: 48px;
font-size: 16px;
font-weight: 700;
line-height: 48px;
border-radius: 30px;
text-align: center;
cursor: pointer;
color: var(--white);
background-color: var(--primary);
}
.product-modal .modal-dialog {
width: 100%;
max-width: 455px;
margin: 30px auto;
}
@media (max-width: 575px) {
.product-modal .modal-dialog {
margin: 10px auto;
padding: 0px 10px;
}
}
.product-modal .modal-content {
border: none;
display: block;
overflow: hidden;
border-radius: 16px;
}
.product-modal-media {
position: relative;
}
.product-modal-media img {
width: 100%;
}
.product-modal-media button {
position: absolute;
cursor: pointer;
top: 16px;
right: 16px;
font-size: 16px;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 50%;
text-align: center;
background-color: var(--white);
color: var(--red);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.product-modal-media button:hover {
color: var(--white);
background-color: var(--red);
}
.product-modal-group {
padding: 24px 16px;
border-top: 1px solid var(--border-slate);
}
.product-modal-title {
font-size: 22px;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 15px;
}
.product-modal-describe {
font-size: 12px;
font-weight: 400;
color: var(--text);
}
.product-modal-subset {
margin-bottom: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.product-modal-subset dt {
font-size: 16px;
font-weight: 600;
text-transform: capitalize;
}
.product-modal-subset dd {
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 500;
text-transform: capitalize;
color: var(--blue);
}
.product-modal-subset dd.require {
background-color: #E2F8FF;
}
.product-modal-subset dd.option {
background-color: transparent;
}
.product-modal-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
}
.product-modal-list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 12px;
}
.product-modal-list li label {
font-size: 14px;
font-weight: 400;
text-transform: capitalize;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
.product-modal-list li span {
font-size: 14px;
font-weight: 500;
}
.product-modal-instruct {
width: 100%;
height: 44px;
padding: 0px 16px;
border-radius: 5px;
border: 1px solid var(--border-gray);
}
.product-modal-instruct::-webkit-input-placeholder {
font-size: 12px;
}
.product-modal-instruct::-moz-placeholder {
font-size: 12px;
}
.product-modal-instruct:-ms-input-placeholder {
font-size: 12px;
}
.product-modal-instruct::-ms-input-placeholder {
font-size: 12px;
}
.product-modal-instruct::placeholder {
font-size: 12px;
}
.product-modal-footer {
padding: 8px 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 24px;
-webkit-box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.16);
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.16);
}
.product-modal-footer .cart-counter {
width: 120px;
height: 38px;
-ms-flex-negative: 0;
flex-shrink: 0;
border-radius: 30px;
background-color: #FFF2F5;
}
.product-modal-footer .cart-counter input {
width: 50px;
font-size: 16px;
}
.product-modal-footer .cart-counter button {
font-size: 14px;
}
.product-modal-footer .cart-btn {
width: 100%;
height: 48px;
border-radius: 30px;
white-space: nowrap;
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;
font-size: 16px;
font-weight: 700;
cursor: pointer;
gap: 12px;
color: var(--white);
background-color: var(--primary);
}
.booking-modal .modal-dialog {
width: 100%;
max-width: 455px;
margin: 30px auto;
}
@media (max-width: 575px) {
.booking-modal .modal-dialog {
margin: 10px auto;
padding: 0px 10px;
}
}
.booking-modal .modal-content {
border: none;
display: block;
overflow: hidden;
border-radius: 16px;
}
.booking-modal-header {
position: relative;
text-align: center;
padding: 16px 16px 0px;
}
.booking-modal-header h3 {
font-size: 22px;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 32px;
}
.booking-modal-header img {
width: 100%;
max-width: 180px;
margin-bottom: 32px;
}
.booking-modal-header button {
position: absolute;
cursor: pointer;
top: 16px;
right: 16px;
font-size: 16px;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 50%;
text-align: center;
background-color: var(--white);
color: var(--red);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
-webkit-box-shadow: 0px 4px 16px rgba(126, 133, 142, 0.16);
box-shadow: 0px 4px 16px rgba(126, 133, 142, 0.16);
}
.booking-modal-header button:hover {
color: var(--white);
background-color: var(--red);
}
.booking-modal-content {
padding: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.booking-modal-group {
position: relative;
}
.booking-modal-select {
padding: 12px 16px;
border-radius: 12px;
background-color: var(--white);
border: 1px solid var(--border-gray);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
}
.booking-modal-select.active i {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.booking-modal-select h4 {
font-size: 14px;
font-weight: 600;
}
.booking-modal-select h4 span {
display: block;
margin-bottom: 8px;
font-size: 12px;
font-weight: 300;
}
.booking-modal-select i {
font-size: 16px;
color: var(--primary);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.booking-modal-option {
padding: 16px;
border-radius: 12px;
position: absolute;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transform: scaleY(0);
transform: scaleY(0);
width: 100%;
top: 66px;
left: 0px;
right: 0px;
z-index: 1;
background-color: var(--white);
-webkit-box-shadow: 0px 4px 16px rgba(126, 133, 142, 0.16);
box-shadow: 0px 4px 16px rgba(126, 133, 142, 0.16);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.booking-modal-option.active {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.booking-modal-option dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 15px;
}
.booking-modal-option dt {
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
}
.booking-modal-option dd.cart-counter {
width: 100px;
height: 30px;
}
.booking-modal-option dd.cart-counter input {
width: 40px;
font-size: 16px;
}
.booking-modal-option dd.cart-counter button {
font-size: 12px;
}
.booking-modal-option dd.date input {
font-size: 14px;
padding: 5px 10px;
border-radius: 8px;
border: 1px solid var(--border-slate);
}
.booking-modal-option .done {
font-size: 14px;
font-weight: 600;
padding: 8px 16px;
border-radius: 8px;
display: block;
cursor: pointer;
margin-left: auto;
text-transform: capitalize;
color: var(--white);
background-color: var(--primary);
}
.booking-modal-time {
padding: 16px;
border-radius: 12px;
background-color: var(--white);
border: 1px solid var(--border-gray);
}
.booking-modal-time h4 {
font-size: 14px;
font-weight: 600;
margin-bottom: 16px;
}
.booking-modal-time ul {
display: grid;
grid-gap: 16px 20px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.booking-modal-time ul li {
width: 100%;
font-size: 14px;
padding: 12px 0px;
border-radius: 8px;
cursor: pointer;
text-align: center;
text-transform: uppercase;
border: 1px solid var(--slate);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.booking-modal-time ul li.enable {
color: var(--heading);
}
.booking-modal-time ul li.disable {
cursor: not-allowed;
color: var(--placeholder);
}
.booking-modal-time ul li.disable.selected {
color: var(--placeholder);
background-color: var(--white);
}
.booking-modal-time ul li.selected {
color: var(--white);
background-color: var(--primary);
}
.booking-modal-footer {
padding: 8px 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 24px;
-webkit-box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.16);
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.16);
}
.booking-modal-footer .cart-btn {
width: 100%;
height: 48px;
border-radius: 30px;
white-space: nowrap;
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;
font-size: 16px;
font-weight: 700;
cursor: pointer;
gap: 12px;
color: var(--white);
background-color: var(--primary);
}
.address-modal .modal-dialog {
width: 100%;
max-width: 515px;
margin: 30px auto;
}
@media (max-width: 575px) {
.address-modal .modal-dialog {
margin: 10px auto;
padding: 0px 10px;
}
}
.address-modal .modal-content {
border: none;
display: block;
overflow: hidden;
padding: 16px;
border-radius: 12px;
}
.address-modal-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 18px;
gap: 15px;
}
.address-modal-header h3 {
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 18px;
font-weight: 600;
text-transform: capitalize;
}
.address-modal-header button {
font-size: 20px;
color: var(--red);
}
.address-modal-search {
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;
gap: 16px;
height: 46px;
border-radius: 8px;
margin-bottom: 16px;
padding: 8px 8px 8px 16px;
background-color: var(--slate);
border: 1px solid var(--slate);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.address-modal-search:focus-within {
background-color: var(--white);
border-color: rgba(238, 29, 72, 0.3);
}
.address-modal-search i {
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 20px;
}
.address-modal-search input {
width: 100%;
height: 100%;
}
.address-modal-search button {
width: 30px;
height: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 16px;
border-radius: 6px;
background-color: var(--primary);
color: var(--white);
}
.address-modal-frame {
width: 100%;
height: 300px;
border-radius: 8px;
margin-bottom: 12px;
}
.address-modal-location {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
margin-bottom: 20px;
gap: 12px;
}
.address-modal-location i {
font-size: 18px;
color: var(--primary);
}
.address-modal-location span {
font-size: 14px;
font-weight: 500;
}
.address-modal-details {
margin-bottom: 20px;
}
.address-modal-details label {
display: block;
font-size: 12px;
margin-bottom: 5px;
}
.address-modal-details input {
width: 100%;
height: 45px;
padding: 0px 16px;
border-radius: 8px;
border: 1px solid var(--border-gray);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.address-modal-details input:focus-within {
border-color: rgba(238, 29, 72, 0.3);
}
.address-modal-label-group {
margin-bottom: 24px;
}
.address-modal-label-title {
font-size: 14px;
font-weight: 600;
text-transform: capitalize;
margin-bottom: 10px;
}
.address-modal-label-navs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
gap: 12px;
}
.address-modal-label-navs button {
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;
font-size: 12px;
font-weight: 600;
text-transform: capitalize;
gap: 8px;
padding: 12px 16px;
border-radius: 8px;
background-color: var(--slate);
border: 1px solid var(--slate);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.address-modal-label-navs button.active {
color: var(--primary);
border-color: var(--primary);
background-color: rgba(238, 29, 72, 0.08);
}
.address-modal-label-input {
width: 100%;
height: 45px;
margin-top: 16px;
padding: 0px 16px;
border-radius: 8px;
border: 1px solid var(--border-gray);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.address-modal-label-input:focus-within {
border-color: rgba(238, 29, 72, 0.3);
}
.shop-modal .modal-dialog {
width: 100%;
max-width: 550px;
margin: 30px auto;
}
@media (max-width: 575px) {
.shop-modal .modal-dialog {
margin: 10px auto;
padding: 0px 10px;
}
}
.shop-modal .modal-content {
border: none;
display: block;
overflow: hidden;
border-radius: 16px;
}
.shop-modal-header {
position: relative;
}
.shop-modal-header img {
width: 100%;
}
.shop-modal-header button {
position: absolute;
cursor: pointer;
top: 16px;
right: 16px;
font-size: 16px;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 50%;
text-align: center;
background-color: var(--white);
color: var(--red);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
-webkit-box-shadow: 0px 4px 16px rgba(126, 133, 142, 0.16);
box-shadow: 0px 4px 16px rgba(126, 133, 142, 0.16);
}
.shop-modal-header button:hover {
color: var(--white);
background-color: var(--red);
}
.shop-modal-meta {
padding: 16px;
}
.shop-modal-meta h3 {
font-size: 22px;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 10px;
}
.shop-modal-meta h4 {
font-size: 12px;
font-weight: 400;
color: var(--text);
margin-bottom: 8px;
}
.shop-modal-meta p {
font-size: 12px;
font-weight: 400;
color: var(--text);
}
.shop-modal .nav-tabs {
border-top: 1px solid var(--border-slate);
border-bottom: 1px solid var(--border-slate);
}
.shop-modal .nav-tabs .nav-link {
margin: 0px 16px;
padding: 10px 0px;
border-radius: 0px;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
position: relative;
isolation: isolate;
border: none;
color: var(--text);
}
.shop-modal .nav-tabs .nav-link::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 3px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.shop-modal .nav-tabs .nav-link.active {
color: var(--heading);
}
.shop-modal .nav-tabs .nav-link.active::after {
background-color: var(--primary);
}
.shop-modal .tab-pane {
padding: 16px;
}
.shop-modal-about {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 24px;
}
.shop-modal-about ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 24px;
}
.shop-modal-about ul li h3 {
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
margin-bottom: 8px;
line-height: 20px;
}
.shop-modal-about ul li p {
font-size: 12px;
font-weight: 400;
}
.shop-modal-about img {
width: 140px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.shop-modal-review {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.shop-modal-review li {
padding: 12px;
border-radius: 8px;
background-color: var(--white);
border: 1px solid #EFF0F6;
}
.shop-modal-review li h3 {
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
text-transform: capitalize;
}
.shop-modal-review li dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 8px;
gap: 12px;
}
.shop-modal-review li dl dt {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0px;
gap: 3px;
}
.shop-modal-review li dl dt i {
font-size: 12px;
color: var(--yellow);
}
.shop-modal-review li dl dd {
font-size: 12px;
font-weight: 400;
margin-bottom: 0px;
}
.shop-modal-review li p {
font-size: 12px;
font-weight: 300;
}
.header {
width: 100%;
background-color: var(--white);
border-bottom: 1px solid var(--border-slate);
}
.header.index {
background-color: #FFF9FA;
}
/* .header.active {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 5;
background-color: var(--white);
-webkit-box-shadow: 0px 12px 25px 0px rgba(0, 0, 0, 0.06);
box-shadow: 0px 12px 25px 0px rgba(0, 0, 0, 0.06);
} */
.header-content {
height: 70px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (max-width: 767px) {
.header-content {
height: 60px;
}
}
.header-logo img {
width: 120px;
}
.header-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 16px;
}
@media (min-width: 0px) and (max-width: 350px) {
.header-group {
gap: 12px;
}
}
.header-cart {
cursor: pointer;
position: relative;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 50%;
text-align: center;
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;
background-color: var(--secondary);
-webkit-box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.25);
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.25);
}
.header-cart sup {
position: absolute;
top: -4px;
right: -4px;
font-size: 8px;
font-weight: 500;
width: 16px;
height: 16px;
line-height: 14px;
border-radius: 50%;
text-align: center;
background-color: var(--primary);
border: 1px solid var(--white);
color: var(--white);
}
.header-auth {
position: relative;
}
.header-auth-btn {
display: none;
}
@media (max-width: 767px) {
.header-auth-btn {
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;
border-radius: 16px;
padding: 0px 7px;
height: 32px;
cursor: pointer;
border: 1px solid var(--border-gray);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.header-auth-btn:hover {
border-color: rgba(238, 29, 72, 0.3);
}
}
.header-auth-navs {
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;
border-radius: 16px;
border: 1px solid var(--border-gray);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
@media (max-width: 767px) {
.header-auth-navs {
position: absolute;
top: 46px;
right: 0px;
z-index: 3;
padding: 6px;
border-radius: 8px;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
border-color: var(--border-slate);
background-color: var(--white);
-webkit-box-shadow: 0px 12px 25px 0px rgba(0, 0, 0, 0.08);
box-shadow: 0px 12px 25px 0px rgba(0, 0, 0, 0.08);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.header-auth-navs.active {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
.header-auth-navs a {
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;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-transform: capitalize;
white-space: nowrap;
gap: 6px;
height: 32px;
padding: 0px 12px;
color: var(--primary);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
@media (max-width: 767px) {
.header-auth-navs a {
width: 100%;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 32px;
padding-left: 8px;
}
}
.header-auth-navs a:hover {
background-color: rgba(238, 29, 72, 0.05);
}
.header-auth-navs a:first-child {
border-top-left-radius: 16px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 16px;
}
@media (max-width: 767px) {
.header-auth-navs a:first-child {
border-radius: 8px;
}
}
.header-auth-navs a:last-child {
border-top-left-radius: 0px;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 0px;
border-left: 1px solid var(--border-gray);
}
@media (max-width: 767px) {
.header-auth-navs a:last-child {
border: none;
border-radius: 8px;
}
}
.header-account,
.header-selection {
position: relative;
}
.header-account-btn,
.header-selection-btn {
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;
border-radius: 16px;
padding: 0px 12px;
height: 32px;
gap: 6px;
cursor: pointer;
border: 1px solid var(--border-gray);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
@media (max-width: 767px) {
.header-account-btn,
.header-selection-btn {
padding: 0px 7px;
}
}
.header-account-btn:hover,
.header-selection-btn:hover {
border-color: rgba(238, 29, 72, 0.3);
}
.header-account-btn img,
.header-selection-btn img {
width: 16px;
height: 16px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.header-account-btn span,
.header-selection-btn span {
line-height: 20px;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
color: var(--secondary);
}
@media (max-width: 767px) {
.header-account-btn span,
.header-selection-btn span {
display: none;
}
}
.header-account-btn i,
.header-selection-btn i {
font-size: 10px;
margin-top: -2px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
@media (max-width: 767px) {
.header-account-btn i,
.header-selection-btn i {
display: none;
}
}
.header-account-btn.active i,
.header-selection-btn.active i {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.header-account-navs,
.header-selection-list {
position: absolute;
top: 50px;
right: 0px;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transform: scaleY(0);
transform: scaleY(0);
z-index: 3;
padding: 8px 6px;
border-radius: 8px;
background-color: var(--white);
border: 1px solid var(--border-slate);
-webkit-box-shadow: 0px 12px 25px 0px rgba(0, 0, 0, 0.08);
box-shadow: 0px 12px 25px 0px rgba(0, 0, 0, 0.08);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
@media (max-width: 767px) {
.header-account-navs,
.header-selection-list {
top: 46px;
}
}
.header-account-navs.active,
.header-selection-list.active {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.header-account-navs a,
.header-account-navs li,
.header-selection-list a,
.header-selection-list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 32px;
padding-left: 8px;
cursor: pointer;
gap: 12px;
border-radius: 8px;
color: var(--secondary);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.header-account-navs a:hover,
.header-account-navs li:hover,
.header-selection-list a:hover,
.header-selection-list li:hover {
background-color: var(--slate);
}
.header-account-navs a i,
.header-account-navs li i,
.header-selection-list a i,
.header-selection-list li i {
font-size: 16px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.header-account-navs a img,
.header-account-navs li img,
.header-selection-list a img,
.header-selection-list li img {
width: 16px;
height: 16px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.header-account-navs a span,
.header-account-navs li span,
.header-selection-list a span,
.header-selection-list li span {
font-size: 14px;
font-weight: 400;
white-space: nowrap;
text-transform: capitalize;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.header-btn {
height: 32px;
padding: 6px 12px;
border-radius: 16px;
background-color: var(--primary);
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;
gap: 6px;
}
@media (max-width: 575px) {
.header-btn {
display: none;
}
}
.header-btn span {
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-transform: capitalize;
color: var(--white);
}
.footer {
padding: 32px 0px 0px;
background-color: #FFF9FA;
}
.footer-logo {
margin-bottom: 32px;
}
.footer-logo img {
width: 120px;
}
.footer-about p {
font-size: 12px;
font-weight: 400;
line-height: 16px;
margin-bottom: 12px;
}
.footer-about nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
}
.footer-about nav a {
font-size: 20px;
color: var(--primary);
}
.footer-title {
font-size: 16px;
font-weight: 600;
line-height: 24px;
margin-bottom: 16px;
}
@media (max-width: 575px) {
.footer-widget {
margin-top: 35px;
}
}
.footer-widget nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.footer-widget nav a {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: var(--secondary);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.footer-widget nav a:hover {
color: var(--primary);
}
@media (max-width: 991px) {
.footer-contact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
margin-top: 35px;
}
}
@media (max-width: 991px) {
.footer-contact .footer-title {
margin-bottom: 0px;
}
}
.footer-contact nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 24px;
gap: 12px;
}
@media (max-width: 991px) {
.footer-contact nav {
margin-bottom: 0px;
}
}
.footer-contact nav img {
height: 40px;
border-radius: 8px;
}
.footer-contact ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.footer-contact ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
}
.footer-contact ul li span {
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
.footer-bottom {
margin-top: 32px;
padding: 16px 0px 14px;
text-align: center;
border-top: 1px solid #FFE8ED;
}
.footer-bottom p {
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: rgba(110, 113, 145, 0.8);
}
.banner {
padding: 15px 0px;
background-color: #FFF9FA;
}
@media (max-width: 991px) {
.banner {
padding: 55px 0px 70px;
}
}
@media (max-width: 767px) {
.banner {
padding: 40px 0px 10px;
}
}
.banner-title {
font-size: 56px;
font-weight: 800;
line-height: 80px;
margin-bottom: 58px;
}
@media (max-width: 1399px) {
.banner-title {
font-size: 45px;
line-height: 65px;
margin-bottom: 45px;
}
}
@media (max-width: 1199px) {
.banner-title {
font-size: 45px;
line-height: 65px;
}
}
@media (max-width: 991px) {
.banner-title {
font-size: 38px;
line-height: 58px;
}
}
@media (max-width: 767px) {
.banner-title {
font-size: 48px;
line-height: 68px;
}
}
@media (max-width: 575px) {
.banner-title {
font-size: 28px;
line-height: 38px;
margin-bottom: 45px;
}
}
.banner-title span {
color: var(--primary);
}
.banner-subtitle {
font-size: 26px;
font-weight: 400;
line-height: 34px;
margin-bottom: 16px;
color: var(--secondary);
}
@media (max-width: 1399px) {
.banner-subtitle {
font-size: 22px;
line-height: 30px;
}
}
@media (max-width: 991px) {
.banner-subtitle {
font-size: 22px;
line-height: 30px;
}
}
@media (max-width: 575px) {
.banner-subtitle {
font-size: 18px;
line-height: 28px;
}
}
.banner-search {
width: 100%;
height: 72px;
padding: 12px;
border-radius: 35px;
background-color: var(--white);
-webkit-box-shadow: 0px 6px 32px rgba(237, 32, 73, 0.06);
box-shadow: 0px 6px 32px rgba(237, 32, 73, 0.06);
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;
gap: 26px;
}
@media (max-width: 575px) {
.banner-search {
height: 56px;
padding: 8px;
gap: 10px;
}
}
.banner-search input {
width: 100%;
height: 100%;
padding: 0px 12px;
}
@media (max-width: 575px) {
.banner-search input {
padding: 0px 8px;
}
}
.banner-search input::-webkit-input-placeholder {
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.banner-search input::-moz-placeholder {
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.banner-search input:-ms-input-placeholder {
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.banner-search input::-ms-input-placeholder {
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.banner-search input::placeholder {
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
@media (max-width: 575px) {
.banner-search input::-webkit-input-placeholder {
font-size: 14px;
line-height: 24px;
}
.banner-search input::-moz-placeholder {
font-size: 14px;
line-height: 24px;
}
.banner-search input:-ms-input-placeholder {
font-size: 14px;
line-height: 24px;
}
.banner-search input::-ms-input-placeholder {
font-size: 14px;
line-height: 24px;
}
.banner-search input::placeholder {
font-size: 14px;
line-height: 24px;
}
}
.banner-search a {
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;
}
.banner-search button {
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 22px;
font-weight: 500;
line-height: 34px;
border-radius: 25px;
padding: 7px 24px;
cursor: pointer;
text-transform: capitalize;
color: var(--white);
background-color: var(--primary);
}
@media (max-width: 575px) {
.banner-search button {
font-size: 14px;
line-height: 24px;
padding: 5px 15px;
}
}
.banner-image img {
width: 100%;
margin-left: 40px;
}
@media (min-width: 0px) and (max-width: 991px) {
.banner-image img {
margin-left: 0px;
}
}
@media (max-width: 767px) {
.banner-image img {
margin-top: 20px;
}
}
.swiper-wrapper{
height: auto;
}
.feature-swiper {
padding-bottom: 90px;
}
.feature-swiper .swiper-slide {
width: 100%;
text-align: center;
}
.feature-swiper .swiper-slide svg {
margin-bottom: 26px;
}
.feature-swiper .swiper-slide h3 {
font-size: 24px;
font-weight: 700;
line-height: 30px;
margin-bottom: 12px;
}
.feature-swiper .swiper-slide p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.feature-swiper .swiper-pagination {
position: absolute;
bottom: 40px;
width: 100%;
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;
gap: 12px;
}
.feature-swiper .swiper-pagination-bullet {
opacity: 1;
width: 8px;
height: 8px;
line-height: 8px;
border-radius: 50%;
text-align: center;
background-color: var(--gray);
}
.feature-swiper .swiper-pagination-bullet-active {
background-color: var(--primary);
}
.app {
padding: 120px 0px;
background-color: #FFF6F5;
overflow: hidden;
}
@media (max-width: 767px) {
.app {
padding: 60px 0px;
}
}
@media (max-width: 575px) {
.app-content {
width: 100%;
text-align: center;
}
}
.app-content h2 {
font-size: 60px;
font-weight: 700;
line-height: 74px;
margin-bottom: 24px;
}
@media (max-width: 1399px) {
.app-content h2 {
font-size: 45px;
line-height: 65px;
}
}
@media (max-width: 1199px) {
.app-content h2 {
font-size: 48px;
line-height: 60px;
}
}
@media (max-width: 991px) {
.app-content h2 {
font-size: 35px;
line-height: 45px;
}
}
@media (max-width: 767px) {
.app-content h2 {
font-size: 25px;
line-height: 35px;
margin-bottom: 15px;
}
}
@media (max-width: 575px) {
.app-content h2 {
font-size: 28px;
line-height: 38px;
}
}
.app-content p {
font-size: 24px;
font-weight: 400;
line-height: 30px;
margin-bottom: 32px;
}
@media (max-width: 1399px) {
.app-content p {
font-size: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 991px) {
.app-content p {
font-size: 18px;
line-height: 28px;
margin-bottom: 25px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.app-content p {
font-size: 16px;
line-height: 26px;
}
}
.app-content nav {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 575px) {
.app-content nav {
margin-bottom: 40px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.app-content nav img {
width: 130px;
}
@media (max-width: 767px) {
.app-content nav img {
width: 100px;
}
}
@media (max-width: 575px) {
.app-content nav img {
width: 110px;
}
}
.app-image {
width: 100%;
height: 100%;
position: relative;
}
@media (max-width: 575px) {
.app-image {
height: 180px;
}
}
.app-image img {
width: 100%;
max-width: 400px;
position: absolute;
bottom: -220px;
right: 0px;
}
@media (max-width: 767px) {
.app-image img {
bottom: -150px;
}
}
@media (max-width: 575px) {
.app-image img {
max-width: 270px;
right: 50%;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
}
.filter-group {
overflow: hidden;
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.filter-swiper {
padding: 32px 0px;
}
.filter-swiper .swiper-slide {
cursor: pointer;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8px;
padding: 8px 13px;
border-radius: 20px;
color: var(--text);
background-color: var(--slate);
}
.filter-swiper .swiper-slide i {
font-size: 16px;
}
.filter-swiper .swiper-slide span {
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-transform: capitalize;
}
.filter-swiper .swiper-slide.active {
color: var(--white);
background-color: var(--primary);
}
.filter-options {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
row-gap: 24px;
}
@media (max-width: 575px) {
.filter-options {
row-gap: 18px;
}
}
.filter-options div:nth-child(1) {
grid-column: 1/5;
}
@media (max-width: 1199px) {
.filter-options div:nth-child(1) {
grid-column: 1/7;
}
}
@media (max-width: 767px) {
.filter-options div:nth-child(1) {
grid-column: 1/13;
}
}
.filter-options div:nth-child(2) {
grid-column: 5/8;
}
@media (max-width: 1199px) {
.filter-options div:nth-child(2) {
grid-column: 7/13;
}
}
@media (max-width: 767px) {
.filter-options div:nth-child(2) {
grid-column: 1/13;
}
}
.filter-options div:nth-child(3) {
grid-column: 8/10;
}
@media (max-width: 1199px) {
.filter-options div:nth-child(3) {
grid-column: 1/5;
}
}
@media (max-width: 575px) {
.filter-options div:nth-child(3) {
grid-column: 1/13;
}
}
.filter-options div:nth-child(4) {
grid-column: 10/12;
}
@media (max-width: 1199px) {
.filter-options div:nth-child(4) {
grid-column: 5/10;
}
}
@media (max-width: 575px) {
.filter-options div:nth-child(4) {
grid-column: 1/13;
}
}
.filter-options div:nth-child(5) {
grid-column: 12/13;
}
@media (max-width: 1199px) {
.filter-options div:nth-child(5) {
grid-column: 10/13;
}
}
@media (max-width: 575px) {
.filter-options div:nth-child(5) {
grid-column: 1/13;
}
}
.filter-search {
width: 100%;
height: 48px;
border-radius: 25px;
background-color: var(--white);
border: 1px solid var(--border-gray);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0px 16px;
gap: 12px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.filter-search:focus-within {
border-color: var(--primary);
}
.filter-search input {
width: 100%;
height: 100%;
}
.filter-search input::-webkit-input-placeholder {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--placeholder);
}
.filter-search input::-moz-placeholder {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--placeholder);
}
.filter-search input:-ms-input-placeholder {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--placeholder);
}
.filter-search input::-ms-input-placeholder {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--placeholder);
}
.filter-search input::placeholder {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--placeholder);
}
.filter-search button {
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 20px;
color: var(--primary);
}
.filter-select {
width: 100%;
height: 40px;
position: relative;
}
.filter-select i {
position: absolute;
cursor: pointer;
top: 16px;
right: 12px;
font-size: 12px;
z-index: 1;
color: var(--primary);
}
.filter-select select {
width: 100%;
height: 100%;
font-size: 16px;
font-weight: 400;
line-height: 24px;
border-radius: 20px;
padding: 0px 36px 0px 12px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-transform: capitalize;
accent-color: var(--primary);
background-color: var(--slate);
}
.filter-button {
width: 100%;
}
.filter-button button {
width: 100%;
height: 40px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
border-radius: 20px;
cursor: pointer;
text-transform: capitalize;
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;
gap: 6px;
color: var(--red);
background-color: #FFEAEA;
}
.filter-button button i {
display: none;
}
@media (max-width: 1199px) {
.filter-button button i {
display: block;
}
}
.filter-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 32px 0px 24px;
gap: 15px;
}
.filter-header h3 {
font-size: 22px;
font-weight: 700;
line-height: 34px;
}
.filter-header button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-transform: capitalize;
cursor: pointer;
font-size: 14px;
font-weight: 500;
gap: 8px;
padding: 8px 13px;
border-radius: 20px;
color: var(--text);
background-color: var(--slate);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.filter-header button.active {
color: var(--red);
background-color: #FFEAEA;
}
.restaurant .row>* {
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.rest-content {
width: 100%;
max-width: 100%;
margin-bottom: 78px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.rest-content .pagination-nav {
margin-top: 50px;
}
.rest-profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 20px;
padding: 16px 0px;
border-bottom: 1px solid var(--border-gray);
}
.rest-media img {
width: 100%;
-webkit-mask-image: url("../../images/mask.svg");
mask-image: url("../../images/mask.svg");
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.rest-name {
font-size: 32px;
font-weight: 700;
margin-bottom: 8px;
text-transform: capitalize;
}
@media (max-width: 575px) {
.rest-name {
font-size: 26px;
}
}
.rest-title {
font-size: 14px;
font-weight: 400;
margin-bottom: 16px;
color: var(--text);
}
.rest-review {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
margin-bottom: 18px;
gap: 5px;
}
.rest-review i {
font-size: 14px;
color: var(--gray);
}
.rest-review i.active {
color: var(--yellow);
}
.rest-review span {
font-size: 14px;
font-weight: 300;
line-height: 20px;
}
.rest-location {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.rest-location span {
font-size: 14px;
font-weight: 300;
line-height: 20px;
}
.rest-btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 16px;
}
.rest-book-btn {
height: 34px;
padding: 10px 14px;
border-radius: 20px;
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;
font-size: 12px;
font-weight: 600;
text-transform: capitalize;
cursor: pointer;
gap: 10px;
color: var(--white);
background-color: var(--primary);
}
.rest-info-btn {
width: 34px;
height: 34px;
line-height: 34px;
border-radius: 50%;
text-align: center;
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;
background-color: #FFE8ED;
cursor: pointer;
}
.rest-voucher {
padding: 16px 0px;
}
.rest-voucher button {
padding: 9px 18px;
border-radius: 30px;
margin-bottom: 12px;
font-size: 12px;
font-weight: 600;
cursor: text;
color: var(--blue);
background-color: #E2F8FF;
}
.rest-voucher p {
font-size: 14px;
font-weight: 300;
line-height: 20px;
}
.rest-menu-wrapper {
position: relative;
background-color: var(--white);
}
.rest-menu-wrapper.active {
position: sticky;
top: 70px;
left: 0px;
width: 100%;
}
@media (max-width: 767px) {
.rest-menu-wrapper.active {
top: 60px;
}
}
.rest-menu-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
border-top: 1px solid var(--border-gray);
border-bottom: 1px solid var(--border-gray);
}
.rest-menu-group .swiper-slide {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 16px 0px;
font-size: 12px;
font-weight: 500;
line-height: 16px;
color: var(--text);
position: relative;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.rest-menu-group .swiper-slide.active {
color: var(--heading);
}
.rest-menu-group .swiper-slide.active::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 4px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background-color: var(--primary);
}
.rest-menu-group .rest-swiper-prev,
.rest-menu-group .rest-swiper-next {
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 12px;
cursor: pointer;
color: var(--text);
background-color: var(--slate);
width: 28px;
height: 28px;
line-height: 28px;
border-radius: 50%;
text-align: center;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.rest-menu-group .rest-swiper-prev:hover,
.rest-menu-group .rest-swiper-next:hover {
color: var(--white);
background-color: var(--primary);
}
.rest-menu-group .swiper-button-disabled {
cursor: not-allowed;
}
.rest-menu-group .swiper-button-disabled:hover {
color: var(--text);
background-color: var(--slate);
}
.product-category-title {
font-size: 22px;
font-weight: 700;
line-height: 34px;
padding: 48px 0px 24px;
}
.booking {
padding: 16px 0px 50px;
}
.booking .container {
max-width: 800px;
}
.booking-paginate {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
gap: 18px;
margin-bottom: 16px;
color: var(--heading);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.booking-paginate:hover {
color: var(--primary);
}
.booking-paginate i {
font-size: 18px;
color: var(--primary);
}
.booking-paginate span {
font-size: 22px;
font-weight: 600;
text-transform: capitalize;
}
.booking-group {
display: grid;
grid-gap: 24px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
@media (min-width: 0px) and (max-width: 650px) {
.booking-group {
display: grid;
grid-gap: 24px;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: auto;
}
}
.booking-fieldset {
width: 100%;
padding: 16px;
border-radius: 12px;
background-color: var(--white);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
@media (min-width: 0px) and (max-width: 650px) {
.booking-fieldset {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
.booking-fieldset legend {
font-size: 16px;
font-weight: 600;
margin-bottom: 20px;
text-transform: capitalize;
color: var(--heading);
}
.checkout {
padding: 16px 0px 50px;
}
.checkout .container {
max-width: 880px;
}
.checkout-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 24px;
}
@media (max-width: 767px) {
.checkout-group {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.checkout-delivery {
width: 455px;
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
@media (max-width: 991px) {
.checkout-delivery {
width: 50%;
}
}
@media (max-width: 767px) {
.checkout-delivery {
width: 100%;
}
}
.checkout-card {
width: 100%;
padding: 16px;
margin-bottom: 24px;
border-radius: 12px;
background-color: var(--white);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
.checkout-card-head {
margin-bottom: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 15px;
}
.checkout-card-head h3 {
font-size: 16px;
font-weight: 600;
text-transform: capitalize;
}
.checkout-card-head button {
gap: 6px;
padding: 6px 12px;
border-radius: 30px;
background-color: #FFE8ED;
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;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.checkout-card-head button:hover {
background-color: var(--primary);
}
.checkout-card-head button:hover svg {
fill: var(--white);
}
.checkout-card-head button:hover span {
color: var(--white);
}
.checkout-card-head button svg {
-ms-flex-negative: 0;
flex-shrink: 0;
fill: var(--primary);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.checkout-card-head button span {
font-size: 12px;
font-weight: 600;
white-space: nowrap;
text-transform: capitalize;
color: var(--primary);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.checkout-fieldset {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
.checkout-label {
--inside-space: 12px;
border-radius: 8px;
padding: var(--inside-space);
background-color: var(--white);
border: 1px solid var(--border-gray);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
cursor: pointer;
position: relative;
isolation: isolate;
gap: 16px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.checkout-label:has(input:checked) {
border-color: var(--primary);
}
.checkout-label input {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.checkout-label dl {
width: 100%;
max-width: 280px;
}
.checkout-label dl dt {
font-size: 14px;
font-weight: 600;
text-transform: capitalize;
margin-bottom: 6px;
color: var(--blue);
}
.checkout-label dl dd {
font-size: 12px;
line-height: 24px;
}
.checkout-label div {
position: absolute;
top: var(--inside-space);
right: var(--inside-space);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: end;
gap: 15px;
}
.checkout-label div button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.checkout-morebtn {
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;
font-size: 12px;
font-weight: 600;
gap: 8px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
text-transform: capitalize;
color: var(--primary);
}
.checkout-summary {
width: 100%;
overflow: hidden;
border-radius: 12px;
background-color: var(--white);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
@media (max-width: 991px) {
.checkout-summary {
width: 50%;
}
}
@media (max-width: 767px) {
.checkout-summary {
width: 100%;
}
}
.checkout-summary-head {
padding: 20px 16px;
text-align: center;
}
.checkout-summary-head h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
text-transform: capitalize;
color: var(--blue);
}
.checkout-summary-head p {
font-size: 12px;
font-weight: 500;
color: var(--text);
}
.checkout-summary-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 16px;
gap: 12px;
border-bottom: 1px solid var(--border-slate);
}
.checkout-summary-item:first-child {
border-top: 1px solid var(--border-slate);
}
.checkout-summary-item h3 {
font-size: 12px;
font-weight: 500;
width: 24px;
height: 24px;
line-height: 24px;
border-radius: 50%;
text-align: center;
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;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-top: 2px;
background-color: var(--secondary);
color: var(--white);
gap: 2px;
}
.checkout-summary-item h3 i {
font-size: 8px;
font-weight: 700;
}
.checkout-summary-item dl {
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
overflow: hidden;
}
.checkout-summary-item dl dt {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: capitalize;
cursor: pointer;
color: var(--primary);
}
.checkout-summary-item dl dd {
font-size: 12px;
}
.checkout-summary-item h4 {
font-size: 12px;
font-weight: 600;
margin-top: 5px;
white-space: nowrap;
text-transform: uppercase;
}
.checkout-summary-price-list {
padding: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.checkout-summary-price-list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 12px;
color: var(--text);
}
.checkout-summary-price-list li:last-child {
font-weight: 600;
color: var(--secondary);
}
.settings {
padding: 24px 0px 50px;
}
.settings-group {
overflow: hidden;
border-radius: 16px;
margin-bottom: 24px;
background-color: var(--white);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
.settings-group.active .settings-navs {
padding: 20px 0px;
display: block;
}
.settings-btn {
width: 100%;
padding: 12px 0px;
color: var(--primary);
background-color: rgba(238, 29, 72, 0.1);
font-size: 12px;
font-weight: 600;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-transform: uppercase;
gap: 6px;
}
@media (max-width: 991px) {
.settings-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.settings-navs {
padding: 20px 0px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
@media (max-width: 991px) {
.settings-navs {
padding: 0px;
display: none;
}
}
.settings-navs a,
.settings-navs button {
gap: 20px;
width: 100%;
padding: 12px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.settings-navs a:hover,
.settings-navs button:hover {
background-color: var(--primary);
}
.settings-navs a:hover svg,
.settings-navs button:hover svg {
stroke: var(--white);
}
.settings-navs a:hover span,
.settings-navs button:hover span {
color: var(--white);
}
.settings-navs a.active,
.settings-navs button.active {
background-color: var(--primary);
}
.settings-navs a.active svg,
.settings-navs button.active svg {
stroke: var(--white);
}
.settings-navs a.active span,
.settings-navs button.active span {
color: var(--white);
}
.settings-navs a svg,
.settings-navs button svg {
stroke: #6E7191;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.settings-navs a span,
.settings-navs button span {
font-size: 16px;
font-weight: 500px;
text-transform: capitalize;
text-align: left;
color: var(--secondary);
}
.settings-title {
font-size: 22px;
font-weight: 600;
text-transform: capitalize;
margin-bottom: 16px;
}
.profile-user {
padding: 24px;
margin-bottom: 24px;
border-radius: 16px;
border: 1px solid var(--border-gray);
}
@media (max-width: 575px) {
.profile-user {
padding: 16px;
}
}
.profile-meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 24px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-slate);
}
@media (max-width: 575px) {
.profile-meta {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
}
.profile-meta img {
width: 84px;
border-radius: 12px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.profile-meta dt {
width: 100%;
font-size: 22px;
font-weight: 600;
text-transform: capitalize;
margin-bottom: 12px;
}
.profile-meta dd {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-column-gap: 56px;
-moz-column-gap: 56px;
column-gap: 56px;
row-gap: 20px;
}
.profile-meta span {
font-size: 14px;
font-weight: 600;
}
.profile-meta small {
display: block;
font-size: 12px;
font-weight: 400;
text-transform: capitalize;
margin-bottom: 2px;
}
.profile-data {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 24px;
}
.profile-data li {
width: 100%;
max-width: 250px;
display: inline-block;
font-size: 14px;
font-weight: 500;
}
@media (max-width: 767px) {
.profile-data li {
max-width: 200px;
}
}
@media (max-width: 575px) {
.profile-data li {
max-width: 100%;
}
}
.profile-data li span {
display: block;
font-size: 12px;
font-weight: 400;
text-transform: capitalize;
margin-bottom: 2px;
}
.order-details-title {
text-transform: capitalize;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
font-size: 22px;
font-weight: 600;
margin-bottom: 16px;
line-height: 34px;
gap: 12px;
}
.order-details {
padding: 16px;
border-radius: 12px;
background-color: var(--white);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
.order-meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 40px;
gap: 10px;
}
@media (max-width: 575px) {
.order-meta {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.order-meta li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
gap: 2px;
}
.order-meta li span {
font-size: 12px;
}
.order-meta li span:first-child {
font-weight: 500;
text-transform: capitalize;
}
.order-meta li a {
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
color: var(--focus) !important;
}
.order-track {
margin-bottom: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.order-track li {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.order-track li:first-child .line::before {
display: none;
}
.order-track li:last-child .line::after {
display: none;
}
.order-track li.tracked.active .line::after {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.order-track li.tracked .line::before,
.order-track li.tracked .line::after {
background-color: var(--primary);
}
.order-track li.tracked .fa-circle-check {
font-size: 16px;
color: var(--white);
background-color: var(--primary);
}
@media (max-width: 575px) {
.order-track li.tracked .fa-circle-check {
font-size: 12px;
}
}
.order-track li .line {
width: 100%;
height: 6px;
position: relative;
}
.order-track li .line::before,
.order-track li .line::after {
content: "";
width: 50%;
display: inline-block;
position: absolute;
top: 0px;
bottom: 0px;
background-color: var(--border-slate);
}
.order-track li .line::before {
left: 0px;
}
.order-track li .line::after {
right: 0px;
}
.order-track li .fa-circle-check {
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 0px;
margin-top: -18px;
margin-bottom: 10px;
position: relative;
background-color: var(--gray);
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
}
@media (max-width: 575px) {
.order-track li .fa-circle-check {
margin-top: -16px;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
text-align: center;
}
}
.order-track li .title {
font-size: 14px;
text-align: center;
white-space: nowrap;
text-transform: capitalize;
}
@media (max-width: 1199px) {
.order-track li .title {
width: 70px;
font-size: 12px;
white-space: pre-wrap;
}
}
@media (max-width: 575px) {
.order-track li .title {
width: 55px;
font-size: 10px;
font-weight: 500;
}
}
.order-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 24px;
margin-bottom: 24px;
}
@media (max-width: 767px) {
.order-group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.order-box {
width: 100%;
padding: 12px;
border-radius: 8px;
border: 1px solid var(--border-slate);
}
.order-box.address .order-box-item b {
width: 65px;
}
.order-box.status .order-box-item b {
width: 120px;
}
.order-box-title {
font-size: 16px;
font-weight: 600;
text-transform: capitalize;
margin-bottom: 16px;
}
.order-box-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 10px;
}
.order-box-item {
font-size: 14px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: center;
gap: 5px;
}
.order-box-item b {
-ms-flex-negative: 0;
flex-shrink: 0;
font-weight: 500;
display: inline-block;
text-transform: capitalize;
color: #59575E;
}
.table-order {
overflow: visible;
}
.table-order tbody tr:nth-child(even) {
background-color: var(--slate);
}
.table-order tbody tr:last-child>*:first-child {
border-left: 1px solid var(--border-slate);
}
.table-order tbody tr:last-child>*:last-child {
border-right: 1px solid var(--border-slate);
}
.table-order tbody tr td {
font-size: 14px;
vertical-align: top;
border-bottom: none;
}
@media (max-width: 767px) {
.table-order tbody tr td {
border: none !important;
border-left: 1px solid var(--border-slate) !important;
border-right: 1px solid var(--border-slate) !important;
}
}
.table-order tbody tr td:first-child {
border-left-width: 1px;
}
.table-order tbody tr td:last-child {
border-right-width: 1px;
}
@media (max-width: 767px) {
.table-order tbody tr td:nth-child(1),
.table-order tbody tr td:nth-child(2) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.table-order tbody tr td:nth-child(1) {
padding-bottom: 12px !important;
}
}
@media (max-width: 767px) {
.table-order tbody tr:first-child td:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-top: 1px solid var(--border-slate) !important;
}
}
@media (max-width: 767px) {
.order-table-item {
width: 100%;
margin-top: -4px;
}
}
.order-table-item dt {
font-weight: 500;
text-transform: capitalize;
white-space: pre-wrap;
margin-bottom: 6px;
}
.order-table-item dd {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-transform: capitalize;
font-weight: 400;
gap: 6px;
}
.order-table-price {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 6px;
}
@media (max-width: 767px) {
.order-table-price {
width: 100%;
margin-top: -4px;
}
}
.order-price-list {
overflow: hidden;
margin-bottom: 40px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-left: 1px solid var(--border-slate);
border-right: 1px solid var(--border-slate);
border-bottom: 1px solid var(--border-slate);
}
.order-price-list li {
padding: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.order-price-list li:first-child {
border-top: 1px solid var(--border-slate);
}
.order-price-list li:nth-child(even) {
background-color: var(--slate);
}
.order-price-list li span {
font-size: 14px;
text-transform: capitalize;
color: #160040;
}
.order-price-list li span:first-child {
font-weight: 500;
}
.order-price-list li:last-child span {
font-weight: 700;
color: var(--primary);
}
.order-btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: end;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px;
}
.order-btns button {
padding: 12px 32px;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
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;
text-transform: capitalize;
color: var(--white);
gap: 10px;
}
.order-btns button.cancel {
background-color: var(--red);
}
.order-btns button.print {
background-color: var(--blue);
}
.terms .container {
max-width: 750px;
padding: 45px 16px;
}
.terms .container h3 {
font-size: 22px;
font-weight: 600;
text-transform: capitalize;
margin-bottom: 32px;
}
.terms .container small {
display: block;
font-size: 12px;
font-style: italic;
margin-bottom: 16px;
}
.terms .container p {
font-size: 12px;
margin-bottom: 32px;
}
.terms .container p span {
margin-top: 16px;
}
.terms .container h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
}