@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap");

:root {
   --white: #fff;
   --lite: #DBDBDB;
   --ultra-lite: #F9F9F9;
   --gray: #BCBCBC;
   --mint: #56878B;
   --red: #060505;
   --dark-green: #4B7621;
   --mid-dark: #7D7D7D;
   --dark: #303030;
   --black: #000000;
}


* {
   font-family: 'Almarai', sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
}

html[dir="ltr"] *:not(input) {
   text-transform: capitalize;
}

html {
   overflow-x: hidden;
   scroll-behavior: smooth;
}

body {
   overflow-y: hidden;
   padding: 0 !important;
   background: #FAFAFA !important;
   direction: rtl;
}

html[dir="ltr"] body {
   direction: ltr;
}

html[dir='rtl'] [type=email],
html[dir='rtl'] [type=number],
html[dir='rtl'] [type=tel],
html[dir='rtl'] [type=url] {
   direction: rtl;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   vertical-align: middle;
   background: transparent;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
   display: block;
}

ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

a {
   text-decoration: none;
}

p {
   font-size: 16px;
   /* color: var(--mid-dark); */
}

.Stars {
   --percent: calc(var(--rating) / 5 * 100%);
   font-size: 25px;
}

.Stars::before {
   content: "★★★★★";
   background: linear-gradient(-90deg, #FFC107 var(--percent), #E6E6E6 var(--percent));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

#loading {
   position: fixed;
   top: 0;
   inset-inline-end: 0;
   width: 100%;
   height: 100%;
   z-index: 999999;
   background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
}


.loader {
   position: relative;
   width: 150px;
   letter-spacing: 2px;
   display: inline-block;
   box-sizing: border-box;
   animation: floating 1s ease-out infinite alternate;
}

.loader::after {
   content: '';
   width: 80%;
   height: 20px;
   background: rgba(0, 0, 0, 0.424);
   position: absolute;
   inset-inline-end: 10%;
   top: 110%;
   filter: blur(4px);
   border-radius: 50%;
   box-sizing: border-box;
   animation: animloader 1s ease-out infinite alternate;
}

@keyframes floating {
   0% {
      transform: translateY(0);
   }

   100% {
      transform: translateY(-25px);
      -webkit-transform: translateY(-25px);
      -moz-transform: translateY(-25px);
      -ms-transform: translateY(-25px);
      -o-transform: translateY(-25px);
   }
}

@keyframes animloader {
   0% {
      transform: scale(0.8);
   }

   100% {
      transform: scale(1.2);
   }
}

iframe {
   width: 100%;
   border: 0;
   height: 100%;
}

.dropdown-menu {
   background-clip: none;
}

.dropdown-item:focus {
   background-color: var(--light-orange);
}

.dropdown-item:hover {
   color: var(--dark);
   background-color: #ff54164b;
}

.main-btn {
   background: var(--mint) !important;
   color: var(--white) !important;
   border-radius: 10px;
   width: 100%;
   font-weight: 500;
   text-align: center;
   padding: .4rem;
}

.form-label {
   font-size: 14px;
   margin-bottom: 0.5rem;
   color: var(--dark);
   font-weight: 700;
}

.form-label span {
   color: var(--red);
   font-size: 20px;
   font-weight: 800;
}

.form-control {
   border: 1px solid var(--lite);
   padding: 10px 15px;
   background-color: var(--white);
   color: var(--mid-dark);
}

.form-control:focus {
   border: 1px solid var(--lite);
   box-shadow: none;
}

.form-control+svg {
   position: absolute;
   inset-inline-start: 15px;
   bottom: 15px;
   color: var(--lite);
}

.form-select,
.form-select:focus {
   padding: .375rem .75rem .375rem 2.25rem;
   font-size: 0.8rem;
   font-weight: 400;
   line-height: 1.3;
   background-position: end .75rem center;
   box-shadow: none;
   outline: 0;
}

.form-select {
   font-size: 1.1rem;
   border: 1px solid var(--lite);
   padding: 10px 15px;
   background-color: var(--white);
   color: var(--mid-dark);
   background-position: start 0.75rem center;
}

.form-select:focus {
   font-size: 1.1rem;
   padding: 10px 15px;
   background-color: var(--white);
   color: var(--mid-dark);
   border: 1px solid var(--mint);
   box-shadow: white;
   background-position: start 0.75rem center;
}

/* .form-check {
   display: block;
   min-height: 1.5rem;
   padding-inline-end: 0;
   margin-bottom: 0.125rem;
   margin-inline-start: 2rem;
} */

.form-check {
   display: flex;
   align-items: center;
   gap: 6px;
   min-height: 1.5rem;
   padding-inline-start: 0;
   margin-bottom: 0.125rem;
   margin-inline-start: 2rem;
}

.form-check .form-check-input {
   margin-inline-end: 0em;
   background-color: var(--ultra-lite);
}

.form-check-input,
.form-check-input:focus {
   float: unset !important;
   margin-inline-end: 0;
   width: 1.4em;
   height: 1.4em;
   box-shadow: none;
}

.form-check-input[type=radio] {
   border-radius: 5px !important;
}

.form-check-input:checked[type=radio],
.accordion-item .form-check-input:checked[type=checkbox] {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.663' height='37.45' viewBox='0 0 29.663 37.45'%3E%3Cg id='svgexport-6_-_2022-09-12T102525.689' data-name='svgexport-6 - 2022-09-12T102525.689' transform='translate(-4 -0.936)'%3E%3Cpath id='Path_82' data-name='Path 82' d='M12.041,14.133l-1.748,1.748L15.8,21.389l8.6-8.6-1.748-1.748L15.8,17.894Z' transform='translate(1.485 2.385)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
   background-repeat: no-repeat no-repeat;
   background-position: center center;
   background-size: cover;
   border: 1px solid #8CBF48;
   background-color: #8CBF48;
}

textarea {
   resize: none;
}

::selection {
   color: #fff;
   background-color: var(--mint);
}

::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: var(--lite);
}

:-ms-input-placeholder {
   /* Internet Explorer 10-11 */
   color: var(--lite);
}

::-ms-input-placeholder {
   /* Microsoft Edge */
   color: var(--lite);
}

.pagination {
   align-items: center;
   gap: 1rem !important;
}

.pagination * {
   color: #B1B1B1;
}

.pagination .currunt {
   border-bottom: 2px solid;
}

html[dir='ltr'] [class*='bi-chevron']::before,
html[dir='ltr'] [class*='fa-chevron'] {
   transform: rotate(180deg);
}

img {
   width: 100%;
}

.btn,
.btn:focus,
.btn-close,
.btn-close:focus {
   outline: none;
   box-shadow: none;
}

::-webkit-scrollbar {
   width: 0.8rem;
}

::-webkit-scrollbar-track {
   background-color: var(--lite);
}

::-webkit-scrollbar-thumb {
   background-color: var(--mint);
   border-radius: 0px;
}

.nice-select-container {
   display: flex;
   flex-direction: column;
}

.nice-select .option {
   text-align: start;
}

.nice-select {
   font-size: 1.1rem;
   padding: 0 15px 10px;
   height: 49px;
   border: 0px solid var(--white);
   background-color: transparent;
   color: var(--mid-dark);
   /* width: 100%; */
   text-align: start !important;
}

.nice-select.open {
   border: 1px solid var(--orange);
}

.nice-select .current {
   float: inline-start;
}

.nice-select:after {
   inset-inline-start: unset;
   inset-inline-end: 12px;
   top: 50%;
}

.iti__country-name,
.iti__flag-box {
   margin-left: 10px;
   display: inline-block;
}

.iti {
   margin-bottom: 1.5rem;
   width: 100%;
}

#scroll-top {
   position: fixed;
   bottom: 60px;
   inset-inline-start: 60px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   color: var(--white);
   background-color: var(--mint);
   font-size: 24px;
   line-height: 2px;
   vertical-align: middle;
   z-index: 1000;
   display: flex;
   visibility: hidden;
   justify-content: center;
   align-items: center;
   filter: drop-shadow(2px 4px 6px #00000020);
   transition: all 0.3s;
}

#scroll-top.show {
   visibility: visible;
}

.mint {
   color: var(--mint);
}

.title {
   font-weight: bold;
   font-size: 1.4rem;
   position: relative;
   color: #353535;
   padding-inline-start: .6rem;
}

.title::before {
   content: '';
   width: 3px;
   height: 100%;
   border-radius: 4px;
   position: absolute;
   inset-inline-start: 0;
   background-color: #353535;
   display: block;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
}

.title-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 3rem;
}

.title-link a {
   font-size: 16px;
   font-weight: bold;
   color: #56878B;
   margin-inline-start: 0px;
   transition: all 0.3s;
}

.title-link a>i {
   margin-inline-start: 2px;
   font-weight: bold;
   color: #56878B;
}

.title-link a:hover {
   color: var(--dark-sky-blue);
}

.link {
   position: absolute;
   inset: 0;
   z-index: 2;
}


/* -------- top nav -------- */

.top-nav {
   padding: 0;
   background: #BED7D9;
}

.top-nav .right {
   display: flex;
   color: gray;
}

.top-nav .right li {
   margin-inline-end: 1rem;
}

.top-nav .left {
   display: flex;
   gap: 15px;
   align-items: center;
}

.top-nav li .current,
.top-nav li,
.top-nav li a {
   font-size: 14px;
   color: #353535;
   /*line-height: 0;*/
   font-weight: normal;
}

.top-nav li .current {
   width: auto;
   float: unset !important;
}

.top-nav li .nice-select {
   padding: 0;
   padding-inline-end: 14px;
}

.top-nav li .nice-select::after {
   inset-inline-end: 1px;
   inset-inline-start: unset;
   top: calc(50% - 2px);
}

/* -------- middle nav -------- */

.middle-nav .logo {
   width: 110px;
}

.middle-nav {
   padding: .5rem 0;
   border-bottom: 1px solid #d9d9d9;
}

.middle-nav .nice-select {
   display: flex;
   align-items: center;
   padding: 0px 10px;
   padding-inline-start: 50px;
   border-inline-end: 1px solid #ccc;
   border-radius: 0;
}

.middle-nav .nice-select:after {
   inset-inline-start: 22px;
   inset-inline-end: unset;
   top: 50%;
   border-bottom: 2px solid #fff;
   border-inline-start: 2px solid #fff;
}

.middle-nav .nice-select::before {
   content: '';
   position: absolute;
   inset-inline-start: 12px;
   inset-inline-end: unset;
   top: 50%;
   transform: translateY(-50%);
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--mint);
}

.middle-nav .search-box {
   width: 80%;
   margin: auto;
   /*overflow: hidden;*/
   display: flex;
   align-self: center;
   height: 50px;
   border: 1px solid #D6D6D6;
   border-radius: 50px;
   position: relative;
   background: #F8F8F8;
}

.middle-nav .search-box select {
   padding-inline-start: .5rem;
}

.middle-nav .search-box i {
   position: absolute;
   inset-inline-start: 15px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 16px;
   color: #BFBFBF;
}

.middle-nav .search-box input {
   width: 100%;
   height: 100%;
   padding: 10px;
   font-size: 16px;
   border-radius: 0px;
   background: transparent;
}

.middle-nav .search-box input::placeholder {
   color: #BFBFBF;
}

.middle-nav .search-box button {
   position: absolute;
   inset-inline-end: 0px;
   top: 0px;
   background: #F8F8F8;
   color: #fff;
   padding: 1px 30px;
   height: 48px;
   font-size: 16px;
   border-radius: 40px;
}

/* -------- bottom nav -------- */

.bottom-nav .navbar-toggler {
   padding: 0 !important;
   border: unset !important;
}

.bottom-nav {
   padding: .75rem 0;
}

.bottom-nav .nav-links {
   display: flex;
   align-items: center;
   justify-content: center;
}

.bottom-nav .nav-links>li>a {
   color: var(--dark);
   font-size: 18px;
   font-weight: 400;
   padding: 10px 25px;
   padding-inline-start: 0;
   white-space: nowrap;
   position: relative;
   transition: all 0.3s;
}

.bottom-nav .nav-links>li:hover a {
   color: var(--mint);
}

.bottom-nav .nav-links>li>a.active {
   color: var(--mint);
   font-weight: 600;
}

.bottom-nav .toggle-side-menu {
   background-color: transparent;
   color: var(--white);
   font-size: 24px;
   width: 50px;
   display: none;
}

.bottom-nav .auth {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

.bottom-nav .auth>li {
   margin: 0px;
}

.bottom-nav .auth>li>a {
   display: flex;
   width: 35px;
   height: 35px;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--mint);
   color: var(--white);
   font-size: 14px;
   font-weight: 400;
   transition: all 0.3s;
}

/* -------- header -------- */
header .parent {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(2, 190px);
   grid-column-gap: 20px;
   grid-row-gap: 15px;
   padding-top: 1rem;
}

header .parent .cat_1 {
   grid-area: 1 / 1 / 3 / 4;
}

header .parent .cat_2 {
   grid-area: 1 / 4 / 2 / 7;
}

header .parent .cat_3 {
   grid-area: 2 / 4 / 2 / 7;
}

header .parent .cat_1 .owl-carousel .owl-dots {
   position: absolute;
   z-index: 3;
   bottom: 10px;
   inset-inline-end: 50%;
   transform: translate(-50%, 0%);
}
html[dir="ltr"] header .parent .cat_1 .owl-carousel .owl-dots{
    transform: translate(50%, 0%);
}

header .parent .cat_1 .owl-carousel button.owl-dot.active {
   opacity: 1;
}

header .parent .cat_1 .owl-carousel button.owl-dot {
   margin: 0 4px;
   width: 12px;
   height: 12px;
   background: var(--mint);
   border-radius: 50%;
   opacity: .5;
}

header .parent .cat_1 *:not(.owl-dots, .owl-dots *) {
   height: 100%;
}

.cat_1 img,
.cat_2 img,
.cat_3 img {
   height: 100%;
   border-radius: 32px;
   object-fit: cover;
}

/* -------- breadcrumb -------- */
.breadcrumb {
   font-weight: 500;
}

.breadcrumb-item a {
   color: #000;
}

.breadcrumb-item.active {
   color: var(--mint);
   font-weight: bold;
}

/* -------- category -------- */
.box {
   background: linear-gradient(#ECF2E7, #ECF2E7 50%, #f2f5f6 50%, var(--mint));
   background-size: 100% 200%;
   transition: .5s;
   -webkit-transition: .5s;
   -moz-transition: .5s;
   -ms-transition: .5s;
   -o-transition: .5s;
   border-radius: 14px;
   padding-top: 0;
   position: relative;
   aspect-ratio: 3 / 2;
   text-align: center;
   -webkit-border-radius: 14px;
   -moz-border-radius: 14px;
   -ms-border-radius: 14px;
   -o-border-radius: 14px;
}

.box:hover {
   background-position: 100% 100%;
}

.box img {
   width: clamp(50%, 85px, 60%);
   margin-top: -1rem;
}

.box+p {
   color: #183544;
   font-size: 1.2rem;
   font-weight: 500;
   text-align: center;
   padding-top: .5rem;
}

/* -------- product card -------- */
.product {
   height: 100%;
}

.product .card {
   background: var(--white);
   border: unset;
   border-radius: 12px;
   height: 100%;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
   padding: 12px;
   padding-top: 10px;
   text-align: center;
   transition: .5s;
}

.product .card:hover {
   transform: translateY(-10px);
}

.discount {
   position: absolute;
   z-index: 2;
   background: #353535 !important;
   width: 48px;
   padding: 7px;
   border-radius: 4px !important;
   -webkit-border-radius: 4px !important;
   -moz-border-radius: 4px !important;
   -ms-border-radius: 4px !important;
   -o-border-radius: 4px !important;
}

.fav {
   position: absolute;
   inset-inline-end: 0;
   top: 0;
   transform: translate(-40%, -45%);
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #FAFAFA;
   display: flex;
   align-items: center;
   justify-content: center;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   -webkit-transform: translate(-40%, -45%);
   -moz-transform: translate(-40%, -45%);
   -ms-transform: translate(-40%, -45%);
   -o-transform: translate(-40%, -45%);
   z-index: 3;
}

html[dir="ltr"] .fav {
   transform: translate(40%, -45%);
   -webkit-transform: translate(40%, -45%);
   -moz-transform: translate(40%, -45%);
   -ms-transform: translate(40%, -45%);
   -o-transform: translate(40%, -45%);
}

.fav i {
   background: #BED7D9;
   color: var(--mint);
   width: 35px;
   height: 35px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

/*.sold_out{*/
/*    top: 1em;*/
/*    inset-inline-start: -5em;*/
/*    color: #fff;*/
/*    display: block;*/
/*    position: absolute;*/
/*    text-align: center;*/
/*    text-decoration: none;*/
/*    letter-spacing: .06em;*/
/*    background-color: #A00;*/
/*    padding: 0.5em 5em 0.4em 5em;*/
/*    text-shadow: 0 0 0.75em #444;*/
/*    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);*/
/*    font: bold 16px / 1.2em Arial, Sans-Serif;*/
/*    -webkit-text-shadow: 0 0 0.75em #444;*/
/*    -webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);*/
/*    -webkit-transform: rotate(45deg) scale(0.75, 1);*/
/*    z-index: 10;*/
/*}*/
/*html[dir="ltr"] .sold_out{*/
/*    -webkit-transform: rotate(-45deg) scale(0.75, 1);*/
/*}*/
/*.sold_out:before {*/
/*    content: '';*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    position: absolute;*/
/*    margin: -0.3em -5em;*/
/*    transform: scale(0.7);*/
/*    -webkit-transform: scale(0.7);*/
/*    border: 2px rgba(255, 255, 255, 0.7) dashed;*/
/*}*/

.sold_out {
   top: 50%;
   inset-inline-end: 8%;
   inset-inline-start: 8%;
   display: block;
   position: absolute;
   text-align: center;
   text-decoration: none;
   background-color: #fff;
   padding: 0.5em 0;
   color: var(--mint);
   border: 2px solid var(--mint);
   font-weight: bold;
   border-radius: 5px;
   z-index: 10;
}

.card-img-top {
   object-fit: contain;
   text-align: center;
   padding: .4rem 0;
}

.product .card .card-img-top {
   position: relative;
   overflow: hidden;
   mix-blend-mode: darken;
}

/*.card-img-top img {*/
/*   object-fit: contain;*/
/*   width: 58% !important;*/
/*   margin: auto;*/
/*   text-align: center;*/
/*   aspect-ratio: 5 / 8;*/
/*}*/

.card-img-top img {
   object-fit: cover;
   margin: auto;
   text-align: center;
   aspect-ratio: 2 / 3;
}

.card-cat,
.card-cat+span {
   color: #B7B7B7;
}

.card-price {
   color: var(--mint);
   font-weight: bold;
   font-size: 16px;
}

.old-price {
   text-decoration: line-through;
   color: #818181;
}

.card-footer {
   position: relative;
   margin-top: .85rem;
   margin-bottom: -36px;
   border-radius: 10px !important;
   background-color: var(--mint) !important;
   padding: 0 !important;
   z-index: 3;
}

.card-footer button {
   background-color: transparent;
   color: #fff;
   display: block;
   width: 100%;
   padding: 6px;
}


.mostSale {
   background: var(--white);
}

.mostSale .card {
   background: #FAFAFA;
}

.mostSale .card .fav {
   background: var(--white);
}

.suggest .title-link {
   margin-bottom: 1rem;
}

.suggest .product .card {
   margin: 2rem 0rem 0rem 0rem;
}

.suggest .owl-carousel .owl-stage {
   display: flex;
}

.suggest .product {
   padding-bottom: 4rem;
}

/* -------- discover Offer -------- */
.discoverOffer {
   /*background: url(../images/overhead-view-dried-tea-herbs-isolated-white-backdrop.png);*/
   border-radius: 20px;
   padding: 7rem 2rem;
   background-repeat: round !important;
   background-size: cover !important;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
}

html[dir='ltr'] .discoverOffer {
   background: url('../images/bg-en.png') !important;
   background-size: cover !important;
}

.getOffer h5 {
   color: var(--mint);
   margin-bottom: 1.1rem;
}

.getOffer h5,
.getOffer p {
   font-weight: bold;
}

.discoverOffer h3 {
   color: var(--mint);
   font-weight: 700;
   margin-bottom: 1.5rem;
}


.discoverOffer .main-btn {
   padding-block: .75rem;
}



/* -------- features -------- */
.feature {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.feature .f_img {
   background: var(--white);
   width: 50px;
   height: 50px;
   padding: 10px;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   text-align: center;
}

.feature .f_img img {
   width: 24px;
}


/* -------- subscribe email -------- */
.subscribe,
.features {
   color: var(--white);
   background: var(--mint);
   margin-bottom: 2rem;
}

.subscribe_btn {
   color: var(--mint);
   font-weight: 500;
}


.discover-info {
   position: absolute;
   width: 50%;
   top: calc(50% + 20px);
   inset-inline-start: 50%;
   text-align: center;
   transform: translate(50%, -50%);
}

.discover-info img {
   width: 170px;
}

.discover-info h3 {
   color: var(--mint);
   margin-top: .75rem;
   margin-bottom: 2rem;
}

.discover-info .main-btn {
   padding: .75rem 2rem;
}

/* -------- footer -------- */
footer h5 {
   color: #132A36;
   font-size: 1rem;
   font-weight: bold;
   margin-bottom: 1rem;
}

footer li a {
   color: #858585 !important;
   display: inline-block;
   margin-bottom: .9rem;
}

.logo img {
   width: 100px;
   margin-bottom: .5rem;
}

.logo p {
   font: 15px Almarai;
   line-height: 1.4;
   letter-spacing: 0px;
   color: #858585;
   text-transform: capitalize;
}

.social_share {
   position: relative;
}

.social-links::before {
   content: '\f0d8';
   inset-inline-end: 11px;
   top: -14px;
   z-index: 1;
   color: #fff;
   font-family: fontAwesome;
   position: absolute;
}

.social-links {
   position: absolute;
   z-index: 2;
   bottom: -10px;
   transform: translateY(100%);
   inset-inline-end: 0px;
   background: #fff;
   padding: 12px 16px;
   border-radius: 8px;
   display: none;
}

.social-links ul {
   display: flex;
   gap: 9px;
}

.product_details .option #social-links ul a:hover {
   background: var(--mint);
   color: #fff;
   border-color: var(--mint);
}

.social-icons {
   display: flex;
   gap: 5px;
   margin-top: .5rem;
}

.social-icons a {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--mint);
   background: #00572D10;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   transition: .5s;
   -webkit-transition: .5s;
   -moz-transition: .5s;
   -ms-transition: .5s;
   -o-transition: .5s;
}

.social-icons a:hover {
   background: var(--mint);
   color: #fff;
}

.span-2 {
   columns: 2;
}

.rights {
   position: relative;
   background: #BED7D9;
   color: var(--mint);
   font-weight: bold;
   text-align: center;
   padding: .5rem;
}



/* --------== intro page ==-------- */
.intro {
   height: calc(100vh - 49px);
   background-image: url(../images/spa-still-life-with-natural-elements.png);
   background-size: cover;
   background-position: center;
}

.intro .overlay {
   background-color: #0000005e;
   width: 100%;
   height: 100%;
   color: #fff;
   display: flex;
   align-items: center;
}

.intro .overlay .choose {
   text-align: center;
   width: 50%;
   margin: auto;
}

.intro .overlay .form-check {
   margin-inline: 2rem !important;
   padding-inline: 0 !important;
}

.intro .overlay input+label {
   width: 100%;
   padding: .6rem 1rem;
   text-align: center;
   border-radius: 10px;
   background: var(--white);
   color: var(--black);
   font-weight: bold;
   cursor: pointer;
}

.intro .overlay input:checked+label {
   background: var(--mint);
   color: var(--white);
}

/* --------== product details page ==-------- */
.product_details .p_img {
   height: 100%;
   border: 1px solid #CECECE;
   border-radius: 22px;
   position: relative;
}

.product_details .p_img .discount {
   inset-inline-start: 1rem;
   position: absolute;
   top: 1rem;
}

.product_details .p_img img {
   height: 100%;
   border-radius: 22px;
   object-fit: cover;
}

.product_details .card-title {
   font-size: 1.2rem;
   margin-bottom: .4rem;
}

.product_details hr {
   color: #B7B7B7;
   margin: 1.5rem 0;
}

.product_details .p_price {
   display: flex;
   align-items: center;
   gap: .8rem;
   padding: .75rem 0;
}

.product_details .p_price .old {
   text-decoration: line-through;
   color: #7B7B7B;
}

.current {
   font-weight: bold;
   color: var(--mint);
   font-size: 18px;
}

.product_details p {
   color: #B7B7B7;
   margin-top: .65rem;
   line-height: 1.4;
}

.product_details .option {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

.product_details .option button,
.product_details .option a {
   display: flex;
   width: 35px;
   height: 35px;
   align-items: center;
   justify-content: center;
   border: 1px solid #BEBDBD;
   border-radius: 50%;
   background: transparent;
   color: #BEBDBD;
   font-size: 14px;
   font-weight: 400;
   transition: all 0.3s;
}

.product_details .option .bi-heart-fill {
   color: var(--mint);
}

.product_details .option i {
   line-height: 0;
}

.product_details .option .toggleFav.added {
   color: var(--mint);
}

.product_details .check_radio .form-check {
   margin-inline: 0rem !important;
   padding-inline: 0 !important;
}

.product_details .check_radio input {
   display: none;
}

.product_details .check_radio input+label {
   padding: .2rem 1.1rem;
   text-align: center;
   border-radius: 6px;
   background: transparent;
   color: var(--mint);
   font-weight: bold;
   cursor: pointer;
   border: 1px solid #dbdbdbb6;
}

.product_details .check_radio input:checked+label {
   background: var(--mint);
   color: var(--white);
}

.product_details .nav-tabs {
   width: max-content;
   padding-inline-end: 8rem;
   margin: 2rem 0;
   gap: 3rem;
}

.product_details .nav-tabs .nav-link {
   color: var(--black);
   font-size: large;
   border: unset;
}

.product_details .nav-tabs .nav-link.active {
   color: var(--mint);
   font-weight: bold;
   background: transparent;
   border-bottom: 2px solid var(--mint);
}

.product_details #desc p {
   color: #B7B7B7;
}


.user-comment-container {
   margin-bottom: 1rem;
}

.user-comment {
   display: flex;
   margin-bottom: .5rem;
}

.user-comment .avatar img {
   width: 50px;
   border-radius: 50%;
}

.description-comments .comment-details {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.comment-details p {
   color: #B7B7B7;
   font-size: 14px;
   margin-top: .4rem;
}

.comment {
   color: #858585;
   font-size: 15px;
}

.your-comment {
   display: flex;
   gap: 1rem;
   flex-direction: column;
}

.your-comment textarea {
   background-color: var(--white);
   border-radius: 5px;
   padding: 15px;
   font-size: 15px;
}

/* --------== login page ==-------- */
.login .form-control {
   border: 1px solid #F5F5F5;
   padding: .575rem .75rem;
}

.login .input-group-text {
   background: #fff;
   color: var(--mint);
   border: 1px solid #F5F5F5;
}

.login .form-control::placeholder {
   color: #AEAEAE;
   font-size: 14px;
}

.login .form-check-input[type=checkbox] {
   border-color: #B7B7B7 !important;
   width: 1.1em;
   height: 1.1em;
}

.login .form-check-input:checked[type=checkbox] {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.663' height='37.45' viewBox='0 0 29.663 37.45'%3E%3Cg id='svgexport-6_-_2022-09-12T102525.689' data-name='svgexport-6 - 2022-09-12T102525.689' transform='translate(-4 -0.936)'%3E%3Cpath id='Path_82' data-name='Path 82' d='M12.041,14.133l-1.748,1.748L15.8,21.389l8.6-8.6-1.748-1.748L15.8,17.894Z' transform='translate(1.485 2.385)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
   background-repeat: no-repeat no-repeat;
   background-position: center center;
   background-size: cover;
   border: 1px solid #8CBF48 !important;
   background-color: #8CBF48;
}

.login .notes,
.login .notes a {
   color: #AEAEAE !important;
   font-size: 14px;
}

.login .verify {
   display: flex;
   justify-content: space-between;
}

.login .verify input {
   margin: 0.5rem;
   text-align: center;
   font-size: 20px;
   border: solid 1px rgb(238, 236, 236);
   outline: none;
   height: 40px;
   width: 65px;
   transition: all 0.2s ease-in-out;
   border-radius: 3px;
   margin-bottom: 2rem;
}

.login .verify input::selection {
   background: transparent;
}

.login .verify {
   direction: ltr;
}

.pass {
   cursor: pointer;
   position: absolute;
   top: 0;
   inset-inline-end: 10px;
   color: #838383;
   transform: translate(0, 50%);
}


/* --------== contact page ==-------- */
.contact-data .contact-info {
   background: #FFFFFF 0% 0% no-repeat padding-box;
   border: 1px solid #E1E1E1;
   border-radius: 10px;
   text-align: center;
   padding: 1rem;
   height: 100%;
}

.contact-data .contact-info h5 {
   color: #2A2A2A;
   font-weight: bold;
}

.contact-data img {
   width: 22px;
   margin: 20px 0;
}

.contact-data h4 {
   color: #2D2D2D;
   width: fit-content;
   margin: 0 auto;
   padding-bottom: 1.5rem;
   position: relative;
}

.contact-data h4::after {
   content: '';
   position: absolute;
   bottom: 0;
   inset-inline-end: 50%;
   width: 50px;
   transform: translateX(-50%);
   height: 2px;
   border-radius: 5px;
   background: var(--mint);
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -o-transform: translateX(-50%);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
}

.phone-num {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

.contact-data .form-control,
.contact-data textarea {
   background: transparent;
   border: 1px solid #E9E9E9;
   border-radius: 5px;
}

.contact-data .form-control:focus,
.contact-data textarea:focus {
   border-color: var(--mint);
}

.contact-data textarea {
   width: 100%;
   padding: 19px 30px;
}

.contact .map {
   overflow: hidden;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
}

.contact .map iframe {
   height: 300px;
   margin-bottom: 3rem;
}


/* --------== cart page ==-------- */

#wizard {
   padding: 0px;
   width: 100%;
   min-width: 300px;
}

#wizard .tab {
   display: none;
}

#wizard h1 {
   text-align: center;
}

/* Mark input boxes that gets an error on validation: */
#wizard .required.invalid {
   background-color: #ed1c2393;
}

/* Hide all steps by default: */

#wizard #prevBtn {
   background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.steps-container {
   width: 100%;
   margin: 0 auto 80px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-align: center;
}

#wizard .step {
   border: none;
   color: #2A2A2A;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: fit-content;
}

.step .bi,
.step svg {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #b1b1b120;
   color: #B1B1B1;
   margin-inline-end: 10px;
   font-size: 20px;
}

.complete-order:hover,
.complete-order {
   background: var(--mint);
   color: var(--white);
   width: 250px;
   padding: 6px;
}

.add-address {
   font-weight: bold;
   width: max-content;
   padding-inline: 1rem;
   color: var(--mint);
   border-inline-start: 3px solid var(--mint);
}

.btn .btn-dark {
   width: 250px;
}

.payment-tab small,
.address-tab small {
   padding: 0 20px;
   border-radius: 4px;
   border: 1px solid #DBDBDB;
   width: 100%;
}

.cart .cart-title {
   background: #F6F6F6;
   border: 1px solid #F6F6F6;
   border-radius: 8px;
}

.cart .nice-select,
.cart select {
   font-size: 1.1rem;
   padding: 0px 16px;
   padding-inline-end: 22px;
   line-height: 1.8;
   height: 36px !important;
   border: 1px solid #DBDBDB;
   background-color: white;
}

.cart .cart-title span {
   width: 25px;
   height: 25px;
   background: var(--mint);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white);
   font-size: 14px;
}

.cart .form-check-input[type=radio] {
   border-radius: 50% !important;
   border-color: var(--mint) !important;
   width: 1.1rem;
   height: 1.1rem;
}

.cart .form-check-input:checked[type=radio] {
   background: white;
   border-width: 5px;
}

.value-output {
   width: 25px;
   text-align: center;
   background: transparent;
}

.remove-product {
   color: #ED1C24 !important;
}

.cart .btn-calc {
   --bs-btn-border-color: 0;
   color: var(--mint);
}

.cart .btn-calc .bi {
   font-size: 22px;
}

.cart-product-item .img-cart {
   border-radius: 18px;
   height: 170px;
   object-fit: cover;
   background: var(--white);
   border: 1px solid #CECECE;
   border-radius: 15px;
}

#wizard .order-summary .count-total {
   color: var(--mint);
}

#wizard .order-summary {
   background: var(--white);
   border: 1px solid #E5E5E5;
   line-height: 2;
   border-radius: 18px;
}

#wizard .step.active,
#wizard .step.finish {
   opacity: 1;
}

#wizard .step.active::after,
#wizard .step.finish::after {
   content: "";
   border: 1px dashed var(--white);
   opacity: 1;
   width: 165px;
   transform: translateX(-15px);
   height: 2px;
   background: var(--mint);
   position: absolute;
   bottom: 45%;
   inset-inline-start: 100%;

}

html[dir='ltr'] #wizard .step.active::after,
html[dir='ltr'] #wizard .step.finish::after {
   width: 115px;
   transform: translateX(15px);
}

#wizard .step.finish .bi,
#wizard .step.active .bi {
   background-color: var(--mint);
   color: var(--white);
}

#wizard .step4.active::after,
#wizard .step4.finish::after {
   width: 0;
}

.result-order .img-checkout-wrapper {
   width: 63%;
   height: 80px;
   border-radius: 15px;
   overflow: hidden;
}

.result-order .img-checkout {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.result-order .form-control,
.result-order .form-control:focus {
   width: 60px;
   padding: 6px 9px;
   background-position: right 35px center;
   margin-bottom: 8px;
}

.bordinbottom {
   width: 80%;
   height: 1px;
   background: #D5D5D5;
   margin: auto;
   margin-bottom: 0.5rem;
}

.cart-address {
   border-radius: 8px;
   margin-top: 1.2rem;
   margin-bottom: 1.5rem;
   line-height: 2;
   border: 1px solid #DBDBDB;
}

.cart-address .text-edit,
.cart-address .bi {
   color: var(--mint);
   background: transparent;
   width: max-content;
}

#s_tab .nice-select,
.profile .nice-select {
   float: unset;
   font-size: 1.1rem;
   padding: 0px 16px;
   padding-inline-end: 22px;
   line-height: 1.8;
   height: 46px !important;
}

#s_tab .nice-select .current,
.profile .nice-select .current {
   font-weight: normal;
   color: unset;
   line-height: 2.4;
   font-size: 18px;
}

#s_tab .nice-select .list,
.profile .nice-select .list {
   width: 100%;
   max-height: 244px;
   overflow-y: auto;
}

html[dir="rtl"] .input-group .form-control {
   border-top-left-radius: .357rem !important;
   border-bottom-left-radius: .357rem !important;
}

html[dir="ltr"] .input-group .form-control {
   border-top-right-radius: .357rem !important;
   border-bottom-right-radius: .357rem !important;
}

.text-delete,
.text-delete .bi {
   background: transparent;
   color: #ff2828;
}

.ordered-success {
   max-width: 100%;
   width: 450px;
}

.credit-img {
   width: 10%;
}

.apply_coupon {
   border: 1px solid var(--mint);
   width: 100%;
   color: var(--mint);
   margin-top: 1rem;
}

/* --------== order tracking page ==-------- */
.arrow-steps {
   display: flex;
}

.arrow-steps .step {
   text-align: center;
   color: var(--black);
   cursor: default;
   margin: 0 3px;
   padding: 10px;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   transition: background-color 0.2s ease;
}

.arrow-steps .step span {
   font-weight: bold;
   position: relative;
}

.arrow-steps .step span::before {
   font-family: "FontAwesome";
   content: '\f253';
   display: inline-flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   background-color: #b1b1b120;
   color: #B1B1B1;
   margin-inline-end: 1rem;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
}

.arrow-steps .step.done span:before {
   content: "✔";
   background: var(--mint);
   color: #fff;
}

.arrow-steps .step:not(:last-child) span::after {
   content: '';
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 100px;
   height: 0px;
   border-top: 2px dashed #BEBEBE;
   color: #BEBEBE;
   margin-inline-start: 1.5rem;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
}

.arrow-steps .step.done span::after {
   border-color: var(--mint) !important;
}

.box-val {
   background: #FFFFFF 0% 0% no-repeat padding-box;
   border: 1px solid #DBDBDB;
   border-radius: 6px;
   padding: .5rem 1.7rem;
}


/* --------== products page ==-------- */
.filter,
.profile-nav {
   border: 1px solid #E5E5E5;
   border-radius: 11px;
   padding: 1.5rem;
   background: #F8F8F8;
}

.filter .accordion-item,
.filter .accordion-button,
.filter .accordion-body {
   padding-inline: 0 !important;
   background: transparent !important;
   outline: unset !important;
   box-shadow: unset !important;
}

.filter .accordion-body {
   padding-top: 0;
}

.filter .form-check {
   margin-bottom: .75rem !important;
}

#filter {
   position: fixed;
   top: 50%;
   right: 0;
   color: #fff !important;
   background-color: var(--mint);
   padding: 0.5rem 1rem;
   border-radius: 5px 0px 0px 5px;
   display: none;
   z-index: 99;
}

.filter-header,
.profile-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.75rem;
   padding-bottom: 1.25rem;
   border-bottom: 1px solid #dddddd;
}


#profile_nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   background-color: var(--mint);
   border-radius: 10px;
   color: var(--white);
   padding: .5rem 1rem;
   margin-bottom: 1.5rem;
   font-size: 18px;
}

.profile-nav .nav-link {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #2A2A2A;
   margin-bottom: 1rem;
   font-weight: bold;
}

.profile-nav .nav-link.active {
   color: var(--white);
   background: var(--mint);
   border-radius: 10px;
}

.profile-nav .nav-link i {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: var(--white);
   color: #919191;
}

.profile-nav .nav-link.active i {
   color: var(--mint);
}


.profile .profile-pic-icon {
   position: absolute;
   top: 0%;
   bottom: 0%;
   right: 0%;
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   z-index: 3;
   opacity: 0;
   background-color: #56878b57;
   color: #fff;
   font-size: xx-large;
   border-radius: 0.35rem;
   transition: 0.2s;
}

.profile .profile-pic {
   width: 227px;
   border-radius: 20px;
   overflow: hidden;
   height: 198px;
   margin-bottom: 36px;
   border-radius: 0.5rem;
   background-color: transparent !important;
   border: 1px solid #E5E5E5;
}

.profile .profile-pic img {
   object-fit: cover;
   height: 100%;
}

.profile .profile-pic input {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   z-index: 10;
   opacity: 0;
}

.profile .profile-pic:hover .profile-pic-icon {
   opacity: 1;
}

.profile label {
   margin-bottom: .5rem;
}

.logout {
   color: #ff0000;
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   gap: 10px;
   background-color: transparent;
   font-weight: bold;
   margin-top: 1rem;
   padding-top: 1rem;
   border-top: 1px solid #E8E8E8;
}

.profile .cart .cart-address {
   margin-top: 0;
}

/* --------== about page ==-------- */
.about p {
   line-height: 1.8;
   color: #B7B7B7;
}

.about .about_img {
   position: relative;
   padding-inline-start: 2rem;
}
.about .about_img img {
   filter: drop-shadow(4px 18px 15px #00000040);
   border-radius: 0px 0px 0px 160px;
   -webkit-border-radius: 0px 0px 0px 160px;
   -moz-border-radius: 0px 0px 0px 160px;
   -ms-border-radius: 0px 0px 0px 160px;
   -o-border-radius: 0px 0px 0px 160px;
}

.about .about_img::after {
   content: '';
   background: var(--mint);
   width: calc(100% - 2rem);
   width: calc(100% - 1.6rem);
   height: 100%;
   position: absolute;
   inset-inline-end: 10px;
   top: 10px;
   border-radius: 0px 0px 0px 212px;
   inset-inline-end: 1px;
   top: 13px;
   border-radius: 0px 0px 0px 160px;
   z-index: -1;
}

/* --------== invoice page ==-------- */
.table>:not(caption)>*>* {
   background: transparent;
   text-align: center;
   border-bottom: 1px solid gainsboro;
   padding: 18px 5px;
}

.ordNum,
.ordPrice {
   color: var(--mint) !important;
}

/* --------== terms page ==-------- */

.terms p {
   line-height: 1.8;
   color: #353535;
}

/* --------== blogs page ==-------- */
.articles .item .card {
  border: none;
  background-color: var(--main-color);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 10%);
  transition: all 0.3s;
}

.articles .item .card .card-body {
  padding: 1rem 1rem 2rem;
}

.articles .item .card .card-img-top{
  object-fit: cover;
  text-align: center;
  aspect-ratio: 7 / 4;
  padding: 0;
}

.articles .item .card .card-body .card-title {
  font-size: 20px;
  margin: 1.5rem 0;
}

.articles .item .card .card-title {
  color: var(--mint);
  transition: all 0.3s;
}

.articles .item .card:hover {
  transform: translateY(-10px);
}

.articles .item .card .card-body p {
  font-size: 16px;
  color: var(--mid-dark);
}

.articles .item .card .card-body > ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.articles .item .card .card-body > ul > li {
  padding: 1px 8px;
  display: flex;
  align-items: center;
  font-size: 12px;
  border-left: 1px solid #d2d2d2;
  color: #7a7a7a;
}

.articles .item .card .card-body > ul > li:last-child {
  border-left: 0px solid #d2d2d2;
}

.articles .item .card .card-body > ul > li i {
  margin-left: 5px;
  color: var(--mint);
  line-height: 0;
}
 
 .single-item-page .item-details {
   margin-bottom: 6rem;
 }
 
 .single-item-page .item-details .item-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2rem;
   padding-left: 3rem;
 }
 
 .single-item-page .item-details .item-title h4 {
   font-size: 24px;
   font-weight: 600;
   padding: 0.5rem 1.5rem;
   position: relative;
   color: var(--mint);
 }
 
 .single-item-page .item-details .item-title h4::before {
   content: "";
   width: 5px;
   height: 100%;
   position: absolute;
   top: 0;
   right: 0;
   background: var(--mint);
   border-radius: 5px;
 }
 
 .single-item-page .item-details .item-title span>svg {
   color: var(--mint);
 }
 
 .single-item-page .item-details img {
   border-radius: 15px;
   margin-bottom: 2rem;
   width: 100%;
   object-fit: cover;
   max-height: 400px;
 }
 
 .single-item-page .item-details .article-title ul {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   margin: 1rem 0;
 }
 
 .single-item-page .item-details .article-title>ul>li {
   padding: 1px 1.5rem;
   display: flex;
   align-items: center;
   font-size: 17px;
   border-left: 1px solid var(--lite);
   color: var(--mid-dark);
   font-weight: 500;
   display: flex;
   align-items: center;
 }
 
 .single-item-page .item-details .article-title>ul>li:last-child {
   border-left: 0px solid var(--lite);
 }
 
 .single-item-page .item-details .article-title>ul>li>i {
   margin-left: 10px;
   color: var(--mint);
   line-height: 0;
 }
 
 .single-item-page .item-details .article-title {
   flex-direction: column;
   align-items: flex-start;
 }

 .side-other-items h5 {
   font-size: 26px;
   font-weight: 600;
   color: var(--mid-dark);
 }
 
 .side-other-items .input-box {
   margin: 2rem 0 3rem;
   position: relative;
 }
 
 .side-other-items .input-box input {
   background: var(--ultra-lite);
   padding-left: 60px;
 }
 
 .side-other-items .input-box input:focus {
   background: var(--ultra-lite);
   margin: 2rem 0 3rem;
   border: 1px solid var(--lite);
 }
 
 .side-other-items .input-box button {
   position: absolute;
   top: 1px;
   left: 1px;
   width: 50px;
   height: calc(100% - 2px);
   background: var(--ultra-lite);
   font-size: 22px;
   color: var(--mid-dark);
   border-radius: 5px;
 }
 
 .side-other-items .items-container {
   font-size: 26px;
   font-weight: 600;
   color: var(--main-color);
   margin-bottom: 2rem;
 }
 
 .side-other-items .items-container h4 {
   font-size: 26px;
   font-weight: 600;
   color: var(--mint);
   padding: 0.5rem 1rem;
   position: relative;
   margin-bottom: 2rem;
 }
 
 .side-other-items .items-container h4::before {
   content: "";
   width: 5px;
   height: 100%;
   position: absolute;
   top: 0;
   right: 0;
   background: var(--mint);
   border-radius: 5px;
 }
 
 .side-other-items .items-container .item {
   display: flex;
   align-items: center;
   padding: 1rem;
   background: #fcfcfc;
   color: #000;
   border: 1px solid #e6e6e6;
   border-radius: 10px;
   margin-bottom: 1rem;
   transition: all 0.3s;
 }
 
 .side-other-items .items-container .item:hover {
   background: var(--mint);
 }
 
 .side-other-items .items-container .item:hover p {
   color: #fff !important;
 }
 
 .side-other-items .items-container .item img {
   width: 30%;
   height: 80px;
   margin-left: 1rem;
   border-radius: 10px;
 }
 
 .side-other-items .items-container .item p {
   font-size: 12px;
   font-weight: 400;
   transition: all 0.3s;
 }

/* -------- media -------- */
@media (max-width: 998px) {
   .navbar-collapse {
      position: absolute;
      bottom: 0%;
      background: #fff;
      transform: translateY(100%);
      border-radius: 10px;
      width: 75%;
      z-index: 9;
      padding: 5rem 2rem;
      box-shadow: 0px 1px 8px #00000054;
   }

   nav .bottom-nav .nav-links {
      gap: 1.4rem;
   }

   button:focus:not(:focus-visible) {
      outline: 0;
      box-shadow: unset;
   }
}

@media (max-width: 768px) {
   footer .logo {
      text-align: center;
   }

   .discover-info img {
      width: 135px;
   }

   .discover-info h3 {
      font-size: 1.3rem;
      margin-bottom: 1rem;
   }
}

@media (max-width: 578px) {

   .top-nav {
      padding: .75rem 0;
      background: #BED7D9;
      padding-bottom: 0;
   }
   .top-nav img {
       width: 16px !important;
   }
   .top-nav img+span{
       font-size: 13px;
   }

   .middle-nav .search-box {
      width: 98%;
   }

    .middle-nav .search-box button {
      padding: 1px 22px;
      background: transparent;
   }
   header .parent {
      grid-column-gap: 8px;
      grid-row-gap: 8px;
      grid-template-rows: repeat(2, 100px);
   }

   .span-2 {
      columns: 3;
   }

   .feature {
      width: 100%;
   }

   .fav {
      position: absolute;
      inset-inline-end: 8px;
   }

   .filter,
   .profile-nav {
      display: block;
      width: 400px;
      transform: translate(400px);
      max-width: 80%;
      position: fixed;
      margin-top: 0;
      z-index: 999;
      top: 0;
      right: 0;
      height: 100%;
      border-radius: 0;
      transition: 0.3s;
      background: white;
   }

   .filter.filter-toggle,
   .profile-nav.Pnav-toggle {
      transform: translate(0);
   }

   #filter {
      display: block;
   }

   #wizard .step {
      flex-direction: column;
      gap: 10px;
   }

   .step .bi,
   .step svg {
      margin: 0;
   }

   #wizard .step.active::after,
   #wizard .step.finish::after {
      width: 30px;
      transform: translateX(0px);
      bottom: 67%;
   }

   .complete-order,
   .add-address {
      width: 49.5% !important;
   }

   .intro .overlay .choose {
      width: 80%;
   }

   #scroll-top {
      inset-inline-start: 1rem;
   }

   .cat_1 img,
   .cat_2 img,
   .cat_3 img {
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      -ms-border-radius: 12px;
      -o-border-radius: 12px;
   }

   footer li a,
   .search-box .current {
      font-size: 14px;
   }

   .discoverOffer {
      padding: 3rem 1.5rem;
      padding-inline-end: 5rem;
   }

   .arrow-steps {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
   }

   .arrow-steps .step:not(:last-child) span::after {
      width: 0;
      height: 20px;
      border-inline-start: 2px dashed #BEBEBE;
      position: absolute;
      inset-inline-start: 0;
      bottom: -50px;
   }

   .cart-product-item .img-cart {
      border-radius: 18px;
      height: 131px;
      width: 131px;
   }
}