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

:root {
   --white: #fff;
   --lite: #DBDBDB;
   --ultra-lite: #F9F9F9;
   --gray: #BCBCBC;
   --main: #245091;
   --secondary: #EFD33D;
   --border: #E4E7E9;
   --mainOp: 36, 80, 145;
   --red: #EE5858;
   --mid-dark: #929FA5;
   --dark: #303030;
   --black: #000000;
}

* {
   font-family: 'Almarai', sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
   transition: .4s all;
   -webkit-transition: .4s all;
   -moz-transition: .4s all;
   -ms-transition: .4s all;
   -o-transition: .4s all;
}

.bi::before {
   line-height: 1.8;
}

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

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

body {
   overflow-y: hidden;
   padding: 0 !important;
   background: var(--white) !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;
   color: inherit;
}

p {
   font-size: 16px;
}

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

.Stars::before {
   content: "★★★★★";
   background: linear-gradient(-90deg, #FA8232 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;
   gap: 1rem;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.logo-spinner-wrapper {
   position: relative;
   width: 120px;
   height: 120px;
}

.spinner {
   width: 100%;
   height: 100%;
   border: 5px solid #eee;
   border-top: 5px solid var(--main);
   border-radius: 50%;
   animation: spin 2s linear infinite;
}

.center-logo {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 60px;
}

.name-animation {
   text-transform: uppercase;
   font-size: 4rem;
   text-align: center;
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   margin: 0;
   background: white;
   position: relative;
   color: #afafaf;
}

.name-animation:before {
   content: attr(data-text);
   position: absolute;
   background: var(--main);
   -webkit-background-clip: text;
   color: transparent;
   background-size: 100% 90%;
   line-height: 0.9;
   clip-path: ellipse(120px 120px at -2.54% -9.25%);
   animation: swing 4s infinite;
   animation-direction: alternate;
   -webkit-animation: swing 4s infinite;
}

@keyframes swing {
   0% {
      -webkit-clip-path: ellipse(120px 120px at -2.54% -9.25%);
      clip-path: ellipse(120px 120px at -2.54% -9.25%);
   }

   50% {
      -webkit-clip-path: ellipse(120px 120px at 49.66% 64.36%);
      clip-path: ellipse(120px 120px at 49.66% 64.36%);

   }

   100% {
      -webkit-clip-path: ellipse(120px 120px at 102.62% -1.61%);
      clip-path: ellipse(120px 120px at 102.62% -1.61%);
   }
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

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

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

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


.main-btn,
.main-outline-btn {
   display: inline-block;
   background: var(--main) !important;
   color: var(--white) !important;
   border: 1px solid var(--main) !important;
   border-radius: 6px;
   font-weight: 500;
   max-width: 100%;
   min-width: 150px;
   text-align: center;
   padding: .625rem;
   max-height: 49px;
   -webkit-border-radius: 6px;
}

.main-outline-btn {
   background: transparent !important;
   color: var(--main) !important;
}

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

.form-label span {
   color: var(--main);
   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(--main);
   box-shadow: white;
   background-position: start 0.75rem center;
}

textarea {
   resize: none;
}

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

::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(--main);
   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);
   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%;
}

.owl-carousel .owl-stage-outer {
   padding: 10px 1px;
   margin: -10px 0;
}

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

.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(--main);
   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;
}

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

.title-link {
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 2.4rem;
   flex-wrap: wrap;
}

.section-cta-title {
   color: var(--main);
   font-size: 1.2rem;
   margin-bottom: .65rem;
}

.section-subtitle {
   font-weight: bold;
   font-size: 1.2rem;
   position: relative;
}

.title-link a {
   font-size: 16px;
   font-weight: bold;
   color: var(--main);
   margin-inline-start: 0px;
   transition: all 0.3s;
}

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

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

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

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

/* ---------------------------------- */
/*  1. Top Bar Styles  */
/* ---------------------------------- */

.top-bar {
   padding: 0.5rem 0;
   background: var(--main);
   color: var(--white);
   border-bottom: 1px solid #ddddddb0;
}

.top-bar .welcome-text {
   font-size: 14px;
   margin: 0;
}

.top-bar .language-switcher .nice-select {
   padding: 0 18px;
   height: unset;
}

/* ---------------------------------- */
/*  2. Mid Bar Styles  */
/* ---------------------------------- */

.mid-bar {
   background-color: var(--main);
   border-bottom: 1px solid #ddd;
}

.mid-bar .primary-nav .navbar-toggler {
   border: none;
   padding: 0;
}

.mid-bar .nav-links {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   align-items: center;
   gap: 1rem;
}

.mid-bar .nav-links>li>a {
   font-size: 16px;
   color: var(--white);
   text-decoration: none;
   transition: color 0.2s;
   padding: 1.2rem 0;
}

.mid-bar .nav-links>li>a.active {
   font-weight: 600;
}

.category-dropdown {
   position: static;
}

.category-dropdown .dropdown-menu {
   display: none;
   position: absolute;
   top: 100%;
   inset-inline-start: 0;
   z-index: 2000;
   width: 85vw;
   gap: 1.5rem
}

.category-dropdown .dropdown-item {
   padding: .5rem;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
}

.category-dropdown .nav-tabs {
   min-width: max-content;
   display: flex;
   gap: 1rem;
   flex-direction: column;
   padding: 1.75rem 0rem;
   border: unset;
}

.category-dropdown .nav-tabs .nav-link {
   border: unset !important;
   color: var(--black);
   display: flex;
   width: 100%;
   gap: 4rem;
   padding: .5rem .85rem;
   align-items: center;
   justify-content: space-between;
   font-weight: bold;
}

.category-dropdown .nav-tabs .nav-link.active {
   color: var(--main);
   background: rgba(var(--mainOp), .14);
   border-radius: 4px !important;
   -webkit-border-radius: 4px !important;
   -moz-border-radius: 4px !important;
   -ms-border-radius: 4px !important;
   -o-border-radius: 4px !important;
}

.category-dropdown .dropdown-item:hover {
   background-color: rgba(var(--mainOp), .15);
}

.category-dropdown:hover .dropdown-menu,
.category-dropdown:focus-within .dropdown-menu {
   display: flex;
}

.category-dropdown .dropdown-menu {
   pointer-events: auto;
}

.category-dropdown .dropdown-menu .tab-content ul {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 2rem 1rem;
}

.category-dropdown .dropdown-menu ul li a {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 10px;
   font-weight: bold;
}

.category-dropdown .dropdown-menu ul img {
    width: 50%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.arrow-icon {
   transition: transform 0.2s ease;
}

.category-dropdown:hover .arrow-icon::before,
.category-dropdown:focus-within .arrow-icon::before {
   transform: rotate(180deg);
}

.mid-bar .nice-select {
   padding: 0;
   padding-inline-end: 14px;
   height: unset;
}

.top-bar .nice-select .current,
.mid-bar .nice-select .current {
   font-weight: normal;
   color: var(--white);
   font-size: 16px;
}

.top-bar .nice-select::after,
.mid-bar .nice-select::after {
   inset-inline-end: 1px;
   inset-inline-start: unset;
   top: 50%;
   border-color: var(--white);
}

.mid-bar .contact-info a {
   text-decoration: none;
   color: var(--white);
   font-size: 14px;
   display: flex;
   gap: 8px;
   align-items: center;
}

.mid-bar .contact-info .phone-icon {
   padding-inline-start: .5rem;
   position: relative;
}

.mid-bar .contact-info .phone-icon::before {
   content: '';
   position: absolute;
   top: 25%;
   height: 50%;
   inset-inline-start: 0;
   width: 1px;
   display: block;
   border-inline-start: 1px solid #ccc !important;
}

/* ---------------------------------- */
/*  3. Bottom Bar Styles  */
/* ---------------------------------- */
.bottom-bar {
   padding: 0.5rem 0;
   /* border-bottom: 1px solid #d9d9d9; */
   background-color: #fefefe;
}

.logo img {
   width: 65px;
}

.logo span {
   color: #2C2750;
   font-weight: 500;
   font-size: 22px;
}

.bottom-bar .search-box {
   display: flex;
   align-items: center;
   flex: 1;
   max-width: 500px;
   height: 44px;
   border: 1px solid #D6D6D6;
   border-radius: 50px;
   position: relative;
   margin: 0 1rem;
}

.bottom-bar .nice-select {
   display: flex;
   align-items: center;
   padding: 0px 18px;
   padding-inline-end: 30px;
   border-radius: 0;
}

.bottom-bar .nice-select .current {
   color: var(--black);
   font-weight: 500;
}

.bottom-bar .nice-select:after {
   top: 50%;
   border-bottom: 2px solid var(--black);
   border-inline-start: 2px solid var(--black);
}

.bottom-bar .search-box .nice-select::before {
   content: '';
   position: absolute;
   top: 25%;
   height: 40%;
   inset-inline-end: 0;
   width: 1px;
   display: block;
   border-inline-start: 1px solid #F1F1F1 !important;
}

.bottom-bar .search-box input {
   width: 100%;
   height: 100%;
   padding: 0 12px 0 40px;
   font-size: 16px;
   border: none;
   background: transparent;
   outline: none;
}

.bottom-bar .search-box button {
   position: absolute;
   inset-inline-end: 0;
   top: 0;
   background: transparent;
   padding: 0 24px;
   height: 100%;
   font-size: 16px;
   border: none;
   border-radius: 0 40px 40px 0;
   cursor: pointer;
}

.bottom-bar .search-box i {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 16px;
   color: var(--main);
}

.bottom-bar .auth {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   align-items: center;
   gap: 1rem;
}

/* .bottom-bar .auth .dropdown::after{
   content: "";
   position: absolute;
   bottom: 0;
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 13.9px 8px 0 8px;
   border-color: #FF4532 transparent transparent transparent;
   transform: rotate(0deg);
} */
.bottom-bar .auth .dropdown-menu{
   border: none;
   box-shadow: 0px 4px 5px 0px #0000002b;
   margin-top: 8px !important;
}
.bottom-bar .auth .dropdown-menu a{
   font-size: 14px;
}
/* .bottom-bar .auth .dropdown-menu */
.bottom-bar .auth> li> a {
   position: relative;
   display: flex;
   width: 40px;
   height: 40px;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--white);
   color: var(--main);
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   font-size: 18px;
   transition: transform 0.2s;
}

.bottom-bar .auth li i::before {
   line-height: 1.8;
}

.bottom-bar .auth li a:hover {
   transform: translateY(-4px);
   -webkit-transform: translateY(-4px);
   -moz-transform: translateY(-4px);
   -ms-transform: translateY(-4px);
   -o-transform: translateY(-4px);
}

.bottom-bar .auth li a .cart-num {
   border: 1.4px solid var(--main);
   background: var(--white);
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   font-size: 14px;
   line-height: normal;
   position: absolute;
   top: 1px;
   inset-inline-start: -4px;
}

/* ---------------------------------- */
/*   Hero section Styles  */
/* ---------------------------------- */
.heroSec {
   background: var(--main);
   padding-block: 4rem 6rem;
   position: relative;
   overflow: hidden;
}

.heroSec .hero-content span {
   display: inline-block;
   position: relative;
   padding-inline-start: 2.85rem;
}

.heroSec .hero-content span::before {
   content: '';
   display: block;
   width: 2.25rem;
   height: 1px;
   background: var(--white);
   position: absolute;
   top: 50%;
   inset-inline-start: 0;
}

.heroSec h1 {
   font-size: 1.65rem;
   font-weight: 500;

}

.heroSec .hero-content .main-btn {
   background: var(--white) !important;
   color: var(--main) !important;
   margin-top: 1.75rem;
}

.heroSec .overlay {
   position: absolute;
   inset: 0;
   top: 0;
   bottom: -1rem;
}

.heroSec .overlay img {
   height: 110%;
}

.heroSec svg {
   position: absolute;
   bottom: -1px;
   width: 100%;
   height: auto;
   z-index: 34;
   right: 0;
   left: 0;
}

.heroSec .owl-dots {
   line-height: 4;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   margin-top: 3rem;
   margin-bottom: -3rem;
}

.heroSec .owl-carousel button.owl-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border-top: none;
   border-bottom: none;
   background: #FFFFFF46;
   box-shadow: 0px 3px 6px #00000029;
}

.heroSec .owl-carousel button.owl-dot.active {
   width: 30px;
   height: 10px;
   border-radius: 25px;
   background: var(--white);
}

/* ---------------------------------- */
/*  breadcrumb Styles  */
/* ---------------------------------- */
.breadcrumb-wrapper {
   background: url('../images/banner-bredcumb.png');
   background-size: cover;
   padding: 3rem 0;
   margin-bottom: 3rem;
}

.breadcrumb {
   font-weight: 500;
}

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

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

/* ---------------------------------- */
/*  carousel Styles  */
/* ---------------------------------- */
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
   position: absolute;
   top: 50%;
   background: var(--main);
   color: var(--white);
   width: 36px;
   height: 36px;
   inset-inline-start: -14px;
   transform: translateY(-50%);
   border-radius: 10px;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

.owl-carousel .owl-nav button.owl-next {
   inset-inline-start: unset;
   inset-inline-end: -14px;
}

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

/* card */
.card {
   background: var(--white);
   border-radius: 4px;
   height: 100%;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   transition: .5s;
   border: 1px solid var(--border);
   overflow: hidden;
}

.card:hover {
   transform: translateY(-6px);
   -webkit-transform: translateY(-6px);
   -moz-transform: translateY(-6px);
   -ms-transform: translateY(-6px);
   -o-transform: translateY(-6px);
}

.card .badges {
   display: flex;
   gap: 4px;
   position: absolute;
   z-index: 2;
   top: 8px;
   inset-inline-start: 8px;
}

.card .badges .badge {
   padding: 6px 8px;
   border-radius: 2px !important;
   -webkit-border-radius: 2px !important;
   -moz-border-radius: 2px !important;
   -ms-border-radius: 2px !important;
   -o-border-radius: 2px !important;
   color: var(--white);
   font-weight: 500;
}

.card .badges .badge.discount {
   background: #EFD33D;
   color: #191C1F;
}

.card .badges .badge.hot {
   background: #EE5858;
}

.card .badges .badge.sold-out {
   background: #929FA5;
}

.card .product-action {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   background: #00000033;
   position: absolute;
   inset: 0;
   padding: 10px;
   opacity: 0;
}

.card .product-action button,
.card .product-action a {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
   z-index: 8;
   color: var(--main);
   position: relative;
   background: var(--white);
}

.card .product-action button:hover,
.card .product-action a:hover {
   background: var(--main);
   color: var(--white);
}

.card:hover .product-action {
   opacity: 1;
}

.card .card-img-top {
   position: relative;
   overflow: hidden;
   padding : .5rem;
}

.card .card-img-top img {
   object-fit: contain;
   margin: auto;
   text-align: center;
   aspect-ratio: 6 / 5;
   aspect-ratio: 8 / 5;
}

.card:hover .card-img-top img {
   transform: scale(1.05);
   -webkit-transform: scale(1.05);
   -moz-transform: scale(1.05);
   -ms-transform: scale(1.05);
   -o-transform: scale(1.05);
}

.card-title {
   font-weight: 500;
   font-size: .85rem;
}

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

.old-price {
   text-decoration: line-through;
   color: #A7A7A7;
   font-weight: normal;
}

/* offers */
.offers {
   background: #FBFBFB;
}

.products-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
   gap: 0rem;
}

.product .card-img-top,
.products-container .product .card {
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -ms-border-radius: 0;
   -o-border-radius: 0;
}

.products-container .product .card:hover {
   transform: translate(0);
   -webkit-transform: translate(0);
   -moz-transform: translate(0);
   -ms-transform: translate(0);
   -o-transform: translate(0);
}

.offers .products-container .product+.product .card {
   border-inline-start: unset;
}

.offers .products-container .product:nth-child(n+6) .card {
   border-top: unset;
}

.products-container .product.featured-card {
   grid-column: 1 / 2;
   grid-row: 1 / span 2;
}

.products-container .product.featured-card .card-img-top img {
   aspect-ratio: 13 / 15;
}

.products-container .product.featured-card .card-description {
   font-size: 14px;
   color: #3A3A3A;
   margin-block: .5rem 0;
}

.featured-product-actions {
   display: flex;
   align-items: center;
   gap: 4px;
}

.featured-product-actions button,
.featured-product-actions a {
   background: rgba(var(--mainOp), .11);
   color: #1D3B83;
   border-radius: 2px;
   height: 100%;
   padding-block: 3px;
   flex-grow: 5;
   text-align: center;
}

.featured-product-actions :nth-child(2) {
   flex-grow: 7;
   background: var(--main);
   color: var(--white);
}

.featured-product-actions span {
   font-size: .87rem;
}

/* special products */
.special-product:has(.banner) {
   display: grid;
   grid-template-columns: 1fr 4fr;
   gap: .5rem;
}

.special-product .banner img {
   aspect-ratio: 4 / 9;
   object-fit: cover;
}

.special-product .products-container {
   gap: .5rem;
}

.special .nav-tabs {
   border: unset;
   gap: 1rem;
}

.special .nav-tabs .nav-link {
   border: unset;
   padding: 0;
   color: #BAB7B4;
}

.special .nav-tabs .nav-link.active {
   color: var(--black);
   font-weight: 500;
}

.banner-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
   gap: 1rem;
}

.banner-grid img {
   max-width: 100%;
   aspect-ratio: 14/7;
   object-fit: cover;
   border-radius: 6px;
}

/* collection */
.collection .card {
   flex-direction: row;
   align-items: center;
}

.collection .card .card-img-top {
   justify-items: center;
   display: flex;
   max-width: 40%;
}

.collection .card .product-action {
   display: none !important;
}

.collection .card .card-img-top img {
   aspect-ratio: 6 / 5;
}

.card .card-title {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.collection .card .Stars {
   display: none;
}

.partners .card .card-img-top img {
   aspect-ratio: 11 / 5;
}

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

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

.subscribe input::placeholder {
   color: #ADAFB0;
}

.subscribe_btn {
   color: var(--main);
   font-weight: 500;
   background: var(--white);
}

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

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

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

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

.social-icons a {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--main);
   background: #00572D10;
   width: 38px;
   height: 38px;
   box-shadow: 0px 3px 6px #00000029;
   border-radius: 8px;
   transition: .5s;
   -webkit-transition: .5s;
   -moz-transition: .5s;
   -ms-transition: .5s;
   -o-transition: .5s;
}

.social-icons a:hover {
   background: var(--main);
   color: var(--white);
   transform: translateY(-4px);
}

.rights {
   position: relative;
   background: var(--main);
   color: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 10px;
   padding: .5rem;
   font-size: 15px;
}

.rights img {
   width: 110px;
}

/* ---------------------------------- */
/*  filter Styles  */
/* ---------------------------------- */
.price-range-slider {
   width: 100%;
   padding-top: .5rem;
   /* float: left;
   padding: 1.5rem 0; */
}

.price-range-slider .range-value {
   margin: 0;
}

.price-range-slider .range-value input {
   width: 100%;
   background: none;
   color: var(--main);
   font-size: 15px;
   font-weight: initial;
   box-shadow: none;
   border: none;
   margin-top: 14px;
}

.price-range-slider .range-bar {
   border: none;
   background: #CEE8FF;
   height: 5px;
   width: 100%;
   margin-left: 8px;
   border-radius: 5px;
}

.price-range-slider .range-bar .ui-slider-range {
   background: var(--main);
       height: 100%;
}

.price-range-slider .range-bar .ui-slider-handle {
   border: none;
   border-radius: 25px;
   background: #fff;
   box-shadow: 0 0 8px 2px #33333340;
   height: 20px;
   width: 4px;
   top: -0.42em;
   cursor: pointer;
   transform: translateX(8px);
}

.price-range-slider .range-bar .ui-slider-handle+span {
   background: var(--main);
}


.selected-filters {
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
}
.selected-filters ul {
   list-style: none;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
}
.selected-filters li {
display: flex
;
    gap: 6px;
    align-items: center;
    margin-bottom: 5px;
    background: rgba(var(--mainOp), .15);
    padding: 6px 16px;
    border-radius: 20px;
    position: relative;
    padding-inline-end: 8px;
    font-size: 14px;
}
.remove-filter-btn {
   width: 18px;
   height: 18px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 11px;
   border-radius: 50%;
   background-color: var(--main);
   color: var(--white);
   border: none;
   cursor: pointer;
   opacity: .5;
}
.remove-filter-btn:hover {
   opacity: 1;
}
#clear-all-filters {
   min-width: max-content;
   width: auto;
   height: fit-content;
   padding-inline: 14px;
   padding-block: 4px;
   margin-bottom: 0;
}

.filter .input-group-text{
    width: fit-content !important;
    min-width: unset;
    padding: .5rem 17px;
    transform: translateX(4px);
    border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -ms-border-radius: 4px !important;
    -o-border-radius: 4px !important;
}

.filter_products .form-check {
   margin-inline: 0rem !important;
   padding-inline: 0 !important;
   position: relative;
}

.filter_products input {
   /* display: none; */
   opacity: 0;
   position: absolute;
   inset: 0;
}

.filter_products input+label {
    padding: .45rem 1.1rem;
    text-align: center;
    border-radius: 22px;
    background: transparent;
    /* color: var(--main); */
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #dbdbdbb6;
}

.filter_products input:checked+label {
   background: var(--main);
   color: var(--white);
}
/* ---------------------------------- */
/*  single product Styles  */
/* ---------------------------------- */
.sticky-side {
   display: inline-block;
   position: sticky;
   top: 10px;
   height: fit-content;
}

.main-side {
   display: inline-block;
   vertical-align: top;
}

.all {
   width: 100%;
   height: auto;
   display: inline-block;
   position: relative;
}

.all .slider {
   width: auto;
   height: auto;
   overflow: hidden;
   border-radius: 3px;
   border-radius: 10px;
   position: relative;
   border: 1px solid var(--border);
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -ms-border-radius: 8px;
   -o-border-radius: 8px;
}

.all .slider .owl-dots {
   display: none;
}

.all .slider .owl-nav {
   top: 45%;
   width: 94%;
   left: 3%;
   display: flex;
   justify-content: space-between;
   position: absolute;
}

.all .owl-carousel .owl-nav button.owl-next,
.all .owl-carousel .owl-nav button.owl-prev {
   font: inherit;
   width: 40px;
   height: 40px;
   line-height: 5px;
   border: 1px solid var(--main);
   border-radius: 10px;
   font-size: 25px;
   color: var(--white);
   background: var(--main);
   transition: all 0.3s;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

.owl-carousel .owl-nav button:hover {
   border: 1px solid var(--main) !important;
   color: #fff !important;
   background-color: var(--main) !important;
}

.all .slider:hover .left {
   visibility: visible;
   opacity: 1;
   left: 20px;
}

.all .slider:hover .right {
   visibility: visible;
   opacity: 1;
   right: 20px;
}

.all .slider .item-box {
   overflow: hidden;
   width: 100%;
   position: relative;
   background-size: cover;
}

.all .slider .item-box img {
   width: 100%;
   height: 100%;
   aspect-ratio: 11/ 6;
   object-fit: contain;
}

.all .slider .item-box:after {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: absolute;
   content: "";
   display: block;
}

.all .slider .right,
.all .slider .left {
   position: absolute;
   z-index: 1;
   top: 50%;
   left: -20px;
   width: 40px;
   height: 40px;
   cursor: pointer;
   visibility: hidden;
   opacity: 0;
   transition: left ease 0.25s;
   background: url(http://svgshare.com/i/2V9.svg) top left;
   transform: rotate(0deg) translateY(-50%);
   -webkit-transform: rotate(0deg) translateY(-50%);
   -moz-transform: rotate(0deg) translateY(-50%);
   -ms-transform: rotate(0deg) translateY(-50%);
   -o-transform: rotate(0deg) translateY(-50%);
}

.all .slider .right {
   right: -20px;
   transition: right ease 0.25s;
   background: url(http://svgshare.com/i/2V9.svg) top left;
   transform: rotate(180deg) translateY(-50%);
   -webkit-transform: rotate(180deg) translateY(-50%);
   -moz-transform: rotate(180deg) translateY(-50%);
   -ms-transform: rotate(180deg) translateY(-50%);
   -o-transform: rotate(180deg) translateY(-50%);
}

.all .slider .left:hover {
   visibility: visible;
   opacity: 1;
   left: 20px;
   background: url(http://svgshare.com/i/2UW.svg) top left;
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
}

.all .slider .left.nonl {
   left: -20px;
   opacity: 0;
   visibility: hidden;
}

.all .slider .right:hover {
   visibility: visible;
   opacity: 1;
   right: 20px;
   background: url(http://svgshare.com/i/2UW.svg) top left;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}

.all .slider .right.nonr {
   right: -20px;
   opacity: 0;
   visibility: hidden;
}

.all .slider-two {
   width: auto;
   height: auto;
   overflow: hidden;
   position: relative;
   right: 0;
   bottom: 0;
   width: 100%;
   padding: 0;
   z-index: 1;
}

.all .slider-two .owl-nav,
.all .slider-two .owl-dots {
   display: none;
}

.all .slider-two .item {
   transition: all ease 0.25s;
   border-radius: calc(var(--card-raduis) * .5);
   overflow: hidden;
   border: 1px solid var(--border);
   cursor: pointer;
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -ms-border-radius: 8px;
   -o-border-radius: 8px;
}

.all .slider-two .item.active {
   border: solid 1px var(--main);
   padding: 0.5rem;
}

.all .slider-two .owl-stage {
   padding: 15px 0 30px;
}

.all .slider-two .right-t,
.all .slider-two .left-t {
   cursor: pointer;
   position: absolute;
   z-index: 1;
   top: 50%;
   transform: translateY(-50%);
   right: -40px;
   visibility: hidden;
   opacity: 0;
   transition: all ease 0.25s;
   width: 35px;
   height: 35px;
   background-color: #2b2b2b;
   border-radius: 10px;
   line-height: 0;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
}

.all .slider-two .left-t {
   right: calc(100% + 40px);
}

.all .slider-two:hover .right-t,
.all .slider-two:hover .left-t {
   visibility: visible;
   opacity: 1;
   right: 4px;
}

.all .slider-two:hover .left-t {
   right: calc(100% - 42px);
}

.all .slider-two .right-t:hover,
.all .slider-two .left-t:hover {
   background-color: var(--main);
}

.all .slider-two .right-t.nonr-t,
.all .slider-two .left-t.nonl-t {
   right: -40px;
   opacity: 0;
   visibility: hidden;
}

.all .slider-two .left-t.nonl-t {
   right: calc(100% - 60px);
}

.all .slider-two .item img {
   width: 100%;
   height: 100%;
   aspect-ratio: 5 / 4;
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -ms-border-radius: 8px;
   -o-border-radius: 8px;
}

.all .slider-two .right-t i,
.all .slider-two .left-t i {
   font-size: 12px;
   text-align: center;
   vertical-align: sub;
}

.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: end;
   gap: .35rem;
   color: var(--main);
   font-weight: bold;
}

.product_details .p_price .old {
   text-decoration: line-through;
   font-weight: normal;
   color: #6D6D6D;
}

/* شكل الدائرة للـlabel */
.color-swatch {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   border: 1px solid var(--border);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   display: inline-block;
   -webkit-transition: transform 0.2s ease, box-shadow 0.2s ease;
   -moz-transition: transform 0.2s ease, box-shadow 0.2s ease;
   -ms-transition: transform 0.2s ease, box-shadow 0.2s ease;
   -o-transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* تأثير hover */
.color-swatch:hover {
   transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   -o-transform: scale(1.1);
}

/* تعديل شكل alert التقسيط */
.installment-alert {
   background-color: rgba(var(--mainOp), .11);
   border-radius: 4px;
   color: #1b1b1b;
   border: none;
   border-inline-start: 4px solid var(--main);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
}

.installment-alert a {
   color: #0a3176;
   text-decoration: none;
}


/* أزرار الكمية */
.quantity-input .btn {
   padding: 0 0.6rem;
}

/* روابط المفضلة والمقارنة */
.actions a:hover {
   color: #2c2750 !important;
}

.product-action {
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 1rem;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -ms-border-radius: 8px;
   -o-border-radius: 8px;
}

/* أيقونات المشاركة والتوصيل */
.social-share a,
.social-share button {
   background: transparent;
   color: var(--main) !important;
}


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

body:has(.offcanvas.show) .owl-carousel {
   z-index: -1;
}

.product_details .nav-tabs {
   max-width: 100%;
   margin-block: 2rem 1rem;
   border: unset;
   gap: 2rem;
}

.product_details .nav-tabs .nav-link {
   color: #6D6D6D;
   border: unset;
   font-size: 18px;
   padding-inline: unset;
}

.product_details .nav-tabs .nav-link.active {
   color: var(--black);
   font-weight: bold;
   background: transparent;
}

.product_details .tab-pane p {
   color: #3b3b3b;
}

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

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


.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 span {
   font-weight: bold;
   color: var(--main);
}

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

.product_details .comments-count {
   border: 1px solid var(--border);
   border-radius: 4px;
   color: #6D6D6D;
   font-size: 13px;
   padding: 1px .5rem;
}

.green-alert,
.product_details .sub_cat {
   background: #DBFFDB;
   border-radius: 4px;
   color: #1FC157;
   font-size: 14px;
   padding: 3px 10px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   margin: .75rem 0;
   display: inline-block;
}

.product_details .offcanvas .Stars {
   font-size: 22px;
}

.product_details .offcanvas .Stars span {
   font-size: 14px;
   color: #6D6D6D;
}

.product_details .offcanvas .input-group-text {
   background-color: transparent;
   color: #6D6D6D;
   font-size: 15px;
   position: relative;
}

.product_details .offcanvas .input-group-text::after {
   content: '';
   position: absolute;
   height: 18px;
   width: 1px;
   background: #b1b1b1;
   inset-inline-end: 0;

}

.product_details .offcanvas .input-group-text+input {
   border-inline-start: unset !important;
}

ul.plan_list li {
   border-bottom: 1px solid #dfdfdf;
   padding: 12px 0;
}

ul.plan_list li label {
   display: flex;
   align-items: center;
}

ul.plan_list li label input {
   margin-inline-end: 8px;
   accent-color: var(--main);
}

ul.plan_list li span {
   font-size: 15px;
   color: #000;
}

ul.plan_list li span:after {
   content: '/';
   margin: 0 3px;
}

ul.plan_list li span:last-child:after {
   display: none;
}

ul.plan_list li:last-child {
   border: 0;
   padding-bottom: 0;
}

/* --------== login page ==-------- */
.login-form-wrapper {
   background: #F6F6F6;
   padding: 2.5rem;
   border-radius: 16px;
   -webkit-border-radius: 16px;
   -moz-border-radius: 16px;
   -ms-border-radius: 16px;
   -o-border-radius: 16px;
}

.log-by-facebook,
.log-by-google {
   width: 100%;
   padding: .75rem;
   background: #3C5A98;
   color: #fff;
   font-weight: 600;
   border-radius: 5px;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

.log-by-google {
   background: #FCFCFC;
   color: var(--dark);
}

.log-by-facebook img,
.log-by-google img {
   width: 25px
}

.login .form-control {
   border: 1px solid #F5F5F5;
   padding: .719rem .75rem;
}

.login .input-group-text {
   background: #fff;
   color: var(--main);
   border: unset;
   /* border: 1px solid #d89191; */
}

.login label {
   color: #707070;
}

.login .form-check-input[type=checkbox] {
   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 var(--main) !important;
   background-color: var(--main);
}

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

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

.login .verify input {
   margin: 1.75rem 0rem;
   text-align: center;
   font-size: 20px;
   outline: none;
   height: 60px;
   width: 60px;
   transition: all 0.2s ease-in-out;
   border: 1px solid #E2E2E2;
   border-radius: 18px;
   background-color: transparent;
}

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

.login .verify {
   direction: ltr;
}

/* --------== 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: 1.5rem 1rem;
   height: 100%;
}

.contact-data .contact-info i {
   font-size: 28px;
   color: #919191;
}

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

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

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


.profile-data .form-control,
.contact-data .form-control,
.contact-data textarea {
   background: #FCFCFC;
   border: 1px solid var(--border);
   border-radius: 5px;
}


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

.contact-data textarea {
   width: 100%;
   padding: 10px 15px;
}

.contact .map {
   overflow: hidden;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
   height: 100%;
}

.contact .map iframe {
   height: 100%;
   min-height: 300px;
}


/* --------== cart page ==-------- */
.steps-container {
   width: 100%;
   margin: 0 auto 80px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 12rem;
   text-align: center;
}


.steps-container .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;
}

.cart .cart-title {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
}


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


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

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

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

.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 var(--border);
   border-radius: 15px;
}

.order-summary .count-total {
   color: var(--main);
}

.order-summary {
   background: #FCFCFC;
   border: 1px solid var(--border);
   line-height: 2;
   border-radius: 14px;
   -webkit-border-radius: 14px;
   -moz-border-radius: 14px;
   -ms-border-radius: 14px;
   -o-border-radius: 14px;
}

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

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

}

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

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

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

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


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

.arrow-steps .step {
   text-align: center;
   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;
   color: #919191;
}

.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 {
   color: var(--black);
}

.arrow-steps .step.done span:before {
   content: "✔";
   background: var(--main);
   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(--main) !important;
}


/* --------== products page ==-------- */
.filter {
   border: 1px solid var(--border);
   border-radius: 4px;
   padding: 1.5rem;
   /* background: #F8F8F8; */
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
}

.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 .form-check-input, .filter .form-check-input:focus {
    float: unset !important;
   margin-inline-end: 4px;
    width: 1.2em;
    height: 1.2em;
    border-radius: .25em;
    box-shadow: none;
}
.filter .accordion-body ul{
   max-height: 200px;
   overflow: auto;
}

#filter {
   position: fixed;
   top: 50%;
   right: 0;
   color: #fff !important;
   background-color: var(--main);
   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 .nav-link {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #22304A;
   border: 1px solid #ECECEC;
   padding: .5rem 1rem;
   border-radius: 50px 10px 10px 50px;
}

.profile-nav .nav-link.active {
   color: var(--white);
   background: var(--main);
}

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

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

.profile-wrapper {
   border: 1px solid var(--border);
   border-radius: 20px;
   padding: .75rem 2rem;
}

.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: rgba(var(--mainOp), .25);
   color: #fff;
   font-size: x-large;
   border-radius: 50%;
   transition: 0.2s;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
}

.profile .profile-pic {
   min-width: 90px !important;
   width: 90px !important;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   overflow: hidden;
   background-color: transparent !important;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   border: 1px solid var(--border);
}

.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;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   cursor: pointer;
}

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

#change_pic {
   display: none;
}

label {
   margin-bottom: .5rem;
}

.status-tag.pending {
   --status: 77, 77, 79;
}

.status-tag.accepted {
   --status: 16, 117, 187;
}

.status-tag.shipped {
   --status: 245, 136, 31;
}

.status-tag.completed {
   --status: 42, 148, 70;
}

.status-tag.blocked,
.status-tag.cancelled,
.status-tag.declined {
   --status: 200, 16, 47;
}

.status-tag {
   background: rgba(var(--status), 0.07);
   width: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   padding: 6px 12px;
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -ms-border-radius: 8px;
   -o-border-radius: 8px;
   max-width: 136px;
}

.status-tag .status-tag__txt {
   color: rgba(var(--status), 1);
   font-size: 15px;
}

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

.profile .table tr:last-child * {
   border: unset;
}

.profile .table td {
   color: #4D4D4D;
   font-size: 15px;
}

.profile .table td img {
   width: 120px;
}

.profile .table td .product_name {
   display: inline-block;
   max-width: 60%;
}

.del-compare {
   width: fit-content;
   background-color: transparent;
   display: flex;
   align-items: center;
   gap: 6px;
   color: #919191;
}

.profile .compare th,
.profile .compare td {
   vertical-align: top;
}

.profile td,
.profile th {
   padding: 18px 10px !important;
}

.profile .favourite th,
.profile .favourite td {
   padding: 4px 10px !important;
}

.compare.table td .compare-img {
   aspect-ratio: 3 / 2;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #FFFFFF 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #00000029;
   border-radius: 6px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   -ms-border-radius: 6px;
   -o-border-radius: 6px;
   text-align: center;
}

.compare.table td .txt-cut {
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.del-fav {
   color: #FF0000;
   background: #FFD6D6;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   font-size: 20px;
}

/* --------== 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(--main);
   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(--main) !important;
}

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

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


/* -------- media -------- */
@media (max-width: 991.8px) {
   .navbar-collapse {
      position: fixed;
      top: 0;
      bottom: 0%;
      width: 50%;
      inset-inline-end: 0;
      background: var(--main);
      transform: translatex(-100%);
      border-radius: 10px;
      z-index: 9;
      padding: 2rem 1rem;
      box-shadow: 0px 1px 8px #00000054;
   }
   .navbar-toggler {
        padding: 0 !important;
        border: unset !important;
        box-shadow: unset !important;
        filter: brightness(0) invert(1);
        -webkit-filter: brightness(0) invert(1);
    }
    .navbar-toggler.close .navbar-toggler-icon{
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6l18 18M6 24L24 6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px;
    }
    .navbar-collapse li {
        position: relative;
        width: 100%;
        text-align: start;
        padding: .5rem 0;
    }
    .navbar-collapse li:not(:last-child){
        border-bottom: 1px solid #ffffff78;
        
    }
    .mid-bar .nav-links>li>a {
        display: block;
        padding: 0;
    }
    .navbar-collapse .accordion-item,
    .navbar-collapse .accordion-header,
    .navbar-collapse .accordion-button {
        padding: 0 !important;
        background-color: transparent !important;
        color: #fff !important;
        border: unset !important;
    }
    
    .navbar-collapse .accordion-body,
    .navbar-collapse .accordion-item .accordion-item {
        padding: .5rem 0 !important;
    }
    .navbar-collapse .accordion-item .accordion-item .accordion-header{
        border-inline-start : 4px solid #ffffff78 !important;
        padding: .25rem .5rem !important;
    }
    .navbar-collapse .accordion-item .accordion-item .accordion-body{
        padding-top: .5rem;
    }
    
    .category-dropdown {
        display: none !important;
    }
    
    .navbar-collapse {
        overflow: auto;
    }
    
    .bottom-bar .nice-select.open .list {
        inset-inline-end: -50%;
    }
    .mid-bar {
        padding: 10px 0;
    }
   .navbar-collapse.show {
      transform: translatex(0);
      -webkit-transform: translatex(0);
      -moz-transform: translatex(0);
      -ms-transform: translatex(0);
      -o-transform: translatex(0);
   }


   nav .bottom-bar .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;
   }

   .bottom-bar {
      padding: 0.5rem 0 1.4rem 0;
   }

   .bottom-bar .search-box {
      margin: 0;
      order: 1;
      flex-grow: 1;
   }
   
    .navbar-collapse {
        width: 80%;
    }

   .search-box button {
      padding: 1px 22px;
      background: transparent;
   }

   .owl-carousel .owl-nav button.owl-next,
   .owl-carousel .owl-nav button.owl-prev {
      inset-inline-start: -5px;

   }

   .owl-carousel .owl-nav button.owl-next {
      inset-inline-start: unset;
      inset-inline-end: -5px;
   }
   
   .compare-alert-bar {
    font-size: 13px;
   }

   .profile .table td .product_name {
      max-width: 100%;
   }

   .products-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   }

   .products-container .product:nth-child(n+3) .card {
      border-top: unset;
   }

   .collection .card {
      flex-direction: column !important;
   }

   .collection .card .card-img-top {
      justify-items: center;
      display: flex;
      max-width: 100%;
   }

   .collection .card .card-img-top img {
      aspect-ratio: 8 / 5;
   }

   .special-product:has(.banner) {
      display: grid;
      grid-template-columns: unset;
      gap: 1rem;
   }

   .banner-grid {
      grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
   }


   header .parent {
      grid-column-gap: 8px;
      grid-row-gap: 8px;
      grid-template-rows: repeat(2, 100px);
   }

   .span-2 {
      columns: 3;
   }

   .feature {
      width: 100%;
   }

   .filter {
      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 {
      transform: translate(0);
   }

   #filter {
      display: block;
   }

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

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

   .step.active::after,
   .step.finish::after {
      width: 42vw;
      /* 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;
   }
}