@font-face {
    font-family: Roboto;
    src: url(../../../new-fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: RobotoSlab;
    src: url(../../../new-fonts/RobotoSlab.ttf);
}

@font-face {
    font-family: inter;
    src: url(../../../new-fonts/Inter.ttf);
}

/* custom scrollbar */
/* ::-webkit-scrollbar {
    width: 8px;
    height: 10px;
    background: #c3cec991;
 }
 ::-webkit-scrollbar-thumb {
    background: linear-gradient(#D40029,#D40029);
    border-radius: 10px;
 } */
.spinner-border {
    width: 3rem;
    display: none;
    height: 3rem;
    border: 0.4rem solid rgba(255, 0, 0, 0.2);
    /* Light red */
    border-top: 0.4rem solid red;
    /* Darker red for animation */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.white-space-nowrap {
    white-space: nowrap;
}
.order-btn {
    color: #fff;
    background: #D40029;
    font-size: 14px;
    text-transform: capitalize;
    border-radius: 4px;
    padding: 10px 16px;
}

/* Keyframes for the spinning animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

html {
    scroll-behavior: smooth;
}
body {
    overflow: auto;
    min-width: 400px;
    scroll-behavior: smooth;
}
.fs-12 {
    font-size: 12px;
}
:root {
    --prime-red: #D40029;
    /* --white: #ffffff; */
}

.text-nowrap {
    white-space: nowrap;
}

.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}

.allpage {
    padding: 2vw 11vw;
    margin-top: 210px;
    max-width: 1920px;
    /* padding-right: 200px; */
    /* padding-left: 200px; */
    margin-left: auto;
    margin-right: auto;
}

* {
    font-family: Roboto;
    line-height: 140%;
}

::placeholder {
    color: #828282;
    font-family: inter !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.breadcrumb {
    background: #fff;
}

/* a:hover {
    color: #fff;
     text-decoration: none;
} */
/* nested menu */
.fixed-section {
    position: absolute;
    top: 18px;
    left: 100%;
    min-width: fit-content;
    transform: translate(0%, 0%);
    padding: 10px;
    background-color: #fff;
    height: 28vw;
    overflow-y: scroll;
    width: auto;
    display: none;
}

.fixed-section img {
    /* height: auto;
    width: 100%; */
    height: 100%;
    width: auto;
    max-width: 250px;
}

.shop_list {
    position: relative;
    align-self: center;
}

/* .shop_list:hover .parent {
    display: block;
} */
.sub_shop_list {
    position: relative;
    padding: 10px;
    display: block;
    border: 2px solid;
    background-color: rgb(211, 210, 210);
    list-style: none;
    /* overflow: visible; */
    height: 100px;
    /* overflow-y: scroll; */

}

.brands-list p,
.all-brands-link {
    color: #D40029 !important;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 700 !important;
    display: block;
    width: 100%;
    margin-top: 10px;
}

.shop_list:hover .parent {
    /* display: block; */
}

.parent {
    margin-top: 18px;
    /* border: 2px solid; */
    /* min-width: max-content; */
    display: flex;
    flex-direction: row;
    background-color: #fff;
    padding: 10px;
    width: 22vw;
    overflow-y: scroll;
    height: 28vw;
    display: none;
}

/*
.navbar-nav {
    height:40px;
    gap: 40px;
} */
.brands-imgs-menu {
    width: 100%;
    flex-wrap: wrap;
}

.brands-imgs-menu a {
    flex: 0 0 auto;
    width: 30%;
    margin-bottom: 10px;
}

.brands-imgs-menu div {
    width: calc((100% / 3) - 20px);
}

.brands-imgs-menu img {
    width: 100%;
    height: auto;
}

.brands-container-menu {
    min-width: fit-content !important;
}

.brands-list {
    display: flex;
    flex-wrap: wrap;
    /* height: fit-content !important; */
}

.brands-list>li {
    margin: 10px !important;
    border: 1px solid #fff;
    padding: 10px 15px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brands-list>li:hover {
    border-radius: 50% !important;
    border: 1px solid rgb(217, 217, 217);
    background-color: #fff !important;
}

/* second */
.nesteddropdown-menu {
    position: absolute;
    top: 18px;
    left: 100%;
    /* min-width: max-content; */
    transform: translate(0%, 0%);
    /* border: 2px solid; */
    background-color: #fff;
    height: 28vw;
    /* overflow: scroll; */
    width: 22vw;
    display: none;
}

.nesteddropdown-menu ul {
    padding: 10px;
}

.shop_li:hover .nesteddropdown-menu {
    /* display: block; */
}

.nesteddropdown-menu>ul {
    overflow-y: scroll;
    height: 28vw;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding: 0px;
}

/* third */
.subnesteddropdown-menu {
    position: absolute;
    top: 0px;
    left: 100%;
    /* min-width: max-content; */
    transform: translate(0%, 0%);
    /* border: 2px solid; */
    background-color: #fff;
    height: 28vw;
    overflow-y: scroll;
    width: 22vw;
    display: none;
}

.brands-li {
    display: inline;
}

.brands-li a {
    display: inline !important;
}

.nestedshop_li:hover .subnesteddropdown-menu {
    display: block;
}

.shop_li:hover .fixed-section {
    display: block;
}

.active-lay {
    display: block;
}

.overlaythree {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: -13;
}

.overlay-location {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: -13;
}

.content-block {
    display: none;
}

.content-block.active-lay {
    display: block;
}

.all-nested-main {
    position: absolute;
    right: -5vw;
    top: 36px;
}

.all-nested-main li {
    padding: 10px;
    color: #000;
    font-weight: 600;
    font-family: Roboto;
    font-size: 14px;
}

.all-nested-main a {
    color: #000;
    font-weight: 600;
    font-family: Roboto;
    font-size: 14px;
    white-space: wrap;
}

.all-nested-main li:hover {
    background: rgb(217, 217, 217);
    border-radius: 5px;
}

/* limit text */
.limit-one-line {
    line-height: 1.2;
    height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.limit-two-lines {
    line-height: 1.2;
    height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

svg {
    margin-left: 6px;
}

.dropdown-toggle::after {
    display: none;
}

.redhead-container {
    background-color: #D40029;
}

.deliver-Section-container {
    background-color: #EFEFEF;
}

.redhead {
    background-color: #D40029;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 18px;
    padding: 9px 11vw;
    max-width: 1920px;
    /* padding-right: 200px; */
    /* padding-left: 200px; */
    margin-left: auto;
    margin-right: auto;
}

.ad-mobile {
    display: none;
    max-height: 150px;
}

.adv-mobile {
    background: var(--prime-red);
    display: flex;
    align-items: center;
}

.link {
    color: #FFF !important;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #fff;

}

#locationDiv {
    position: relative;
    background: #fff;
    border-radius: 10px 10px 0px 0;
    padding: 10px;
    cursor: pointer;
}

.location-options {
    z-index: 18;
    top: 57px;
}

.branch-options {
    padding: 10px;
}

.branch-options li {
    border-radius: 5px;
    font-weight: 500;
    padding: 7px 20px;
    width: 100%;
    font-size: 14px;
    color: #000;
}

.branch-options li:hover {
    background: rgb(217, 217, 217);
}

.search-result,
.location-options {
    background: #fff;
    width: 100%;
    /* padding: 10px 0px 10px 10px; */
    border-radius: 0 0 5px 5px;
    position: absolute;
    left: 0;
    max-height: 350px;
    overflow-x: auto;
    display: none;
    top: 50px;
}

.search-result {
    background: #fff;
    width: 100%;
    /* padding: 10px 0px 10px 10px; */
    border-radius: 0 0 5px 5px;
    position: absolute;
    left: 0;
    max-height: 350px;
    overflow-x: auto;
    display: none;
    top: 30px;
}

.search-result p:hover {
    background: #2021241a;
}

.search-result h6,
.location-options h6 {
    color: #737373;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-transform: capitalize;
}

.search-result p {
    padding: 10px;
    color: #070707;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    margin: 0;
    border-radius: 10px;
    /* margin-right: 10px; */
}

.search-result h6::after,
.location-options h6::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #C9C9C9;
    position: absolute;
    top: 50%;
    max-width: -webkit-fill-available;
    margin-left: 10px;
}

.result-header {
    position: relative;
    padding-left: 10px;
}

/* navbar */
.border-header {
    border-bottom: 1px solid #BFBFBF;
    background: #fff;
}

.main_navbar {
    position: fixed;
    z-index: 999999;
    width: 100%;
    background-color: #fffffff7;
    top: 0px;
}

.navbar {
    padding: 0px 11vw;
    background-color: #fffffff7;
    max-width: 1920px;
    /* padding-right: 200px; */
    /* padding-left: 200px; */
    margin-left: auto;
    margin-right: auto;
}

.container-fluid {
    padding: 0px;
}

.navbar-brand {
    /* width: 10vw; */
    min-width: 100px;
    height: 75px;
    /* height: 6.1vw; */
    min-height: 55px;
    max-height: 120px;
    text-align: center;
}

.navbar-toggler-icon {
    width: 4.5vw;
    height: 4.5vw;
    min-width: 30px;
    min-height: 30px;
}

.navbar-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    padding: 0px 10px !important;
    /* padding-bottom: 20px !important; */
}

/* .offcanvas-header {
    align-items: start;
} */
.offcanvas-header .btn-close {
    width: 20px;
    height: 20px;
    font-size: 20px;
    padding: calc(var(--bs-offcanvas-padding-y) * 1.5) calc(var(--bs-offcanvas-padding-x) * 0.7);
}

.navbar-toggler {
    font-size: 26px;
    padding: 0;
}

.offcanvas.offcanvas-end {
    left: 0px !important;
}

.navbar-toggler,
.btn-close:focus-visible {
    border: 0px !important;
    outline: none !important;
}

.navbar-toggler:focus,
.btn-close:focus {
    box-shadow: none !important;
}

.navbar>.container,
.navbar>.container-fluid,
.navbar>.container-lg,
.navbar>.container-md,
.navbar>.container-sm,
.navbar>.container-xl,
.navbar>.container-xxl {
    justify-content: start;
}

/* .nav-link {

} */
.container-fluid {
    display: flex;
    align-items: stretch !important;
}

.offcanvas-start {
    height: 100%;
}

.dropdownmenu {
    height: 100%;
    align-items: center;
    justify-content: center;
    /* padding-bottom: 1.2vw !important; */
}

.navbar-nav,
.nav-item {
    height: 100%;
}

.dropdownmenu .nav-link {
    color: #0F0F0F;
    font-size: 16px;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 5px;
    height: 100%;
}

.dropdownmenu .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: auto;
}

.dropdownmenu .nav-link {
    padding: 5px 15px !important;
    height: max-content !important;
    white-space: nowrap;
}

.shop_list:hover {
    background-color: #D9D9D9;
}

.dropdownmenu li:hover a.nav-link {
    background-color: #D9D9D9;
}

.submenu-two {
    display: none;
    position: absolute;
    background: #fff;
    left: 100%;
    top: -10px;
    width: max-content;
    max-height: 300px;
    overflow: auto;
}

.submenu-there {
    display: none;
    position: absolute;
    background: #fff;
    left: 178%;
    top: -10px;
    width: max-content;
    max-height: 300px;
    overflow: auto;
}

.dropdown-submenu:hover .submenu-two {
    display: block;
}

.dropdown-submenu:hover .submenu-there {
    display: block;
}

.submenu {
    padding: 10px 14px;
    background-color: #fff;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: max-content;
    /* opacity: 0; */
    position: absolute;
    transform: translate(0px, 100%);
    bottom: 0;
    left: 0px;
    visibility: hidden;
    z-index: 12;
    max-height: 28vw;
    overflow-y: auto;
    width: max-content;
    z-index: 11111;
    /* overflow-x: hidden; */

}

li .submenu:first-child {
    min-width: 500px !important;
}

.submenu2 {
    /* padding:  10px 14px;  */
    padding: 0px;
    background-color: #fff;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    opacity: 0;
    display: none;
    /* position: absolute; */
    /* transform: translate(100%, 50%); */
    /* bottom: -50%; */
    /* left: 0px; */
    /* visibility: hidden; */
    z-index: 12;
}

.submenu2>li {
    padding: 0px !important;
}

.dropdown-submenu a,
.all-nested-main a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 60px; */
}

/* li:hover  .submenu {
    opacity: 1;
    visibility: visible;
    z-index: 11111;
}
.dropdown-submenu:hover  .submenu2 {
    opacity: 1;
    display: block;
} */

/* mobile navbar */
.mega-mobile {
    display: none !important;
    position: relative;
}

.main-menu-mobile,
.submenu-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
    /* max-height: 100vh;
   overflow-y: auto; */
}

.main-menu-mobile {
    transform: translateX(0);
    transition: transform 0.2s ease-in-out;
    justify-content: start;
    padding: 0 !important;
}

.submenu-body {
    transform: translateX(100%);
    transition: transform 0.2s ease-in-out;
    display: none;
}

.submenu-body.active {
    display: block;
    transform: translateX(0);
    transition: transform 0.2s ease-in-out;
}

.submenu-body a {
    color: #000;
}

.mo-third-level {
    z-index: 2;
    /* Ensures the third level is above the second */
}

.back-btn {
    /* display: none; */
    margin: 10px 0;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 500;
    color: #000;
}

.back-btn img {
    margin-right: 5px;
}

.offcanvas-title {
    max-width: 25%;
    max-height: 100%;
}

.mega-mobile .nav-item {
    justify-content: flex-start;
    display: block;
    width: 100%;
}

.link-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu-logo {
    display: block;
    height: 40px;
    max-width: 100%;
}

.submenu-title {
    color: #D40029;
    font-size: 14px;
    text-transform: capitalize;
    margin-left: 20px;
    font-weight: 600;
}

.offcanvas-header {
    align-items: center;
    margin: 0 20px;
    padding: 20px 0;
    border-bottom: 1px solid #BFBFBF;
    margin-bottom: 20px;
}

.main-menu-mobile .nav-link {
    border-radius: 0 !important;
    padding: 10px 15px !important;
}

.shop-levels .nav-link {
    padding-left: 30px !important;
    font-weight: 400;
}

.shop-levels {
    padding-bottom: 10px;
}

.shop-levels-title {
    padding: 5px 15px;
    color: #0F0F0F;
    font-size: 16px;
    font-weight: 600;
}

.main-menu-mobile .submenu-link {
    padding: 5px 15px;
}

.main-menu-mobile .submenu-link:hover {
    background-color: #D9D9D9 !important;
}

.submenu-item {
    padding: 10px 15px 10px 30px;
    text-transform: capitalize;
}

.submenu-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.submenu-item:hover {
    background: #D9D9D9 !important;
}

.menu-divider {
    width: 90%;
    margin: auto;
    height: 1px;
    background: #BFBFBF;
}
.lang-btn{
    background-color: var(--prime-red);
    color: #fff;
    width: 100%;
    border-radius: 0 !important;
    font-size: 16px;
    font-weight: 500;
 }
 .lang-btn:hover{
    background-color: var(--prime-red);
    color: #fff;
 }
/* body */
.modal_sigin {
    position: absolute;
    top: 100%;
    right: 0px;
    transform: translate(0px, 4%);
    /* height: 60.5%; */
    z-index: 9999999;
    width: 30vw;
    max-width: 487px;
    min-width: max-content;
    white-space: nowrap;
    background-color: #fff;
    display: none;
    /* position: absolute; */
    /* bottom: 0; */
}
.mobile_modal_sigin {
    position: fixed;
    top: 0%;
    right: 0px;
    height: 100%;
    z-index: 9999999;
    width: 35vw;
    max-width: 487px;
    min-width: max-content;
    white-space: nowrap;
    background-color: #fff;
    display: none;
}
#notificationBadge {
    min-height: 20px;
    min-width: 20px;
    width: max-content;
    height: max-content;
    background: var(--prime-red);
    left: 22px !important;
    opacity: 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: 100;
    top: 3.5px !important;
}
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    border-color: unset !important;
    border: 0px !important;
}

.modal_sigin_header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #474444;
    flex-direction: column;
    color: #fff;
    padding: 10px 10px 10px 51px;
}

.modal_sigin_body {
    padding: 30px 30px 30px 51px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 73px;
    background-color: #fff;
}

.modal_sigin_body>.modal_sigin_content {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 27px;
}

.modal_sigin_body a {
    color: rgba(18, 18, 18, 0.93) !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.modal_sigin_header>span {
    width: 100%;
    text-align: start;
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
}

.modal_sigin_header .modal_sigin_close ,
.modal_sigin_header .mobile_modal_sigin_close {
    color: #fff;
    width: 100%;
    text-align: end;
    cursor: pointer;
}

.submenu li:hover {
    background: rgb(217, 217, 217);
}

.submenu a {
    text-decoration: none;
    color: #000;
    font-weight: 600;
}

.submenu li {
    border-radius: 5px;
    font-weight: 500;
    padding: 7px 20px;
    width: 100%;
    font-size: 14px;
}

/* .submenu a:hover {
    background-color: #eae8e8b3;
} */

/* .nav-link:hover {

} */
/* location */
.location_head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 19px 11vw;
    gap: 18px;
    background-color: #fffffff7;
    max-width: 1920px;
    /* padding-right: 200px; */
    /* padding-left: 200px; */
    margin-left: auto;
    margin-right: auto;
}

.gap_location {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}

.title_loc {
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.gap_location .nav-link {
    display: flex;
    align-items: center;
    gap: 18px;
}

.title_loc li {
    color: #4F4F4F;
}

.smalltitle_loc {
    color: rgba(18, 18, 18, 0.74);
    font-weight: 400;
}

.title_locdiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.title_locdiv li {
    list-style: none;
}
.heart-container {
    position: relative;
    display: inline-block;
}

.heart-container .bi-heart-fill {
    display: none;
    color: rgb(173, 173, 173);
    /* Color when filled */
    transition: color 0.3s ease-in-out;
    /* Smooth transition */
    font-size: 20px;
}

.heart-container .bi-heart {
    color: #000;
    font-size: 20px;
}

.heart-container:hover .bi-heart {
    display: none;
}

.heart-container:hover .bi-heart-fill {
    display: inline;
}

.smalltitle_loc>span {
    color: rgba(5, 129, 11, 0.74);
}

.bi-cart3 {
    color: #222;
    font-size: 22px;
    font-weight: 900;
    transform: translate(0, 0) !important;
}

.lang {
    font-weight: 600;
    font-size: 18px;
    margin-right: 15px;
    font-family: Roboto;
    color: #000;
    cursor: pointer;
}

.location_head,
.navbar {
    /* border-bottom: 1px solid #BFBFBF; */
}

/* search */
body.no-scroll {
    overflow: hidden;
}

.searchbar-container {
    display: flex;
    align-items: center;
    width: 30%;
}

.searchbar {
    min-width: 150px !important;
    height: 40px;
    padding: 7px 10px;
    border-radius: 8px;
    background-color: rgba(18, 18, 18, 0.14);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05) inset;
    margin-bottom: 0;
}

.search-container {
    position: relative;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: -13;
}

.overlay2 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1000;
}

.searchbar {
    position: relative;
    z-index: 1000;
}

.formInput:focus~.overlay {
    display: block;
}

.insidesearch {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.searchbutton {
    height: 100%;
    border: 0px;
    background-color: transparent;
    padding: 0px;

}

.searchinput {
    background-color: transparent;
    padding: 0px;
    border: 0px;
}

.form-control:focus,
.form-control:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}


.cart-counter {
    position: relative;
}

.cart-counter div {
    position: absolute;
    min-height: 20px;
    min-width: 20px;
    width: max-content;
    height: max-content;
    background: var(--prime-red);
    right: -8px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    top: -8px;
    /* font-weight: bold; */
    padding: 2px 2px
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    padding: .375rem .75rem;
    background-position: top calc(.375em + .1875rem) left calc(.375em + .1875rem) !important;
}

.formInput:focus,
input:focus,
.form-select:focus {
    box-shadow: unset !important;
    /* border: 2px solid #828282; */
}

.styled-select {
    width: 100%;
    position: relative;
    /* margin: 10px 0; */
}

.selecticon {
    position: absolute;
    top: 20px;
    right: .75rem;
    transform: translate(0%, -50%);
    pointer-events: none;
}

.form-select {
    --bs-form-select-bg-img: none;
    height: 100%;
}

.form-select option {
    font-size: 16px;
    color: #000;
    padding: 10px;
}

.bi-heart {
    color: #D9D9D9;
}

.bi-heart-fill {
    color: red;
}

.searchinput:focus {
    box-shadow: none;
}

/* content */
.mobile-icon {
    display: none;
}
.mobile-icon li {
    list-style: none;
}
.mobile-icon img {
    width: 30px;
    height: 30px;
}

.homepage {
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: relative;
}

.head-mainadv {
    padding-top: 1vw;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: #F0EFEF;
    position: relative;
    /* height: 11vw; */

}

.head-mainadv::before {
    content: " ";
    background-color: #fff;
    width: 100%;
    height: 3.5vw;
    position: absolute;
    top: 0px;
    z-index: 2;
}

.imgadv>.mainadvimg {
    max-height: 10vw;
}

.imgadv {
    /* max-height: 18vw; */
    min-height: 100%;
    /* width: 100%; */
    /* height: 15vw; */
}

.title-mainadv {
    /* background-color: #D40029; */

    position: relative;
    /* background-image: url("images/post1-1.svg"); */
    /* padding-top: 2.5vw !important; */
    gap: 6px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* padding-top: 3vw; */
}

.title-mainadv>img {
    position: absolute;
    height: 100%;
}

.title-mainadvcontent {
    padding: 2.5vw 1.7vw 0.5px 1.7vw !important;
    z-index: 11;
}

.bigmainadv_title {
    color: #FFF;
    /* font-size: 37px; */
    font-size: 2.5vw;
    font-weight: 600;
}

.smalladv_title {
    /* font-size: 19px; */
    font-size: 1.3vw;
    font-weight: 700;
    color: #F5F5F5;
    /* justify-content: space-between; */
    gap: 15%;
    display: flex;
    width: 100%;
    align-items: center;
}

.smalladv_title>a {
    /* font-size: 14px; */
    font-size: 1vw;
    font-weight: 500;
    text-decoration: underline !important;
    color: #F5F5F5;
    padding: 0px 2.5vw;
}

.smalladv_title-mo {
    background: #000;
}

.imgadv {
    position: relative;
    z-index: 5;
    align-self: stretch;
}

.imgfit {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img {
    max-width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

.imgheight {
    height: 100%;
    width: 100%;
}

.imgauto {
    width: 100%;
    height: auto;
}

.imgwidth {
    width: 100%;
    height: 100%;
}

.maxheight {
    max-width: 100%;
    height: auto;
}
.mx-img {
  max-width: 100%;
  max-height: 100%;
}
.item_cards {
    display: flex;
    align-items: stretch;
    /* flex-wrap: wrap; */
    justify-content: space-between;
}

.img-allauto {
    width: auto;
    height: auto;
}

:root {
    --productsgap: 24px;
}

.products_card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.productLabel {
    color: rgba(66, 66, 66, 0.75);
    font-size: 12px;
    font-weight: 400;
}

.favourite_div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-card {
    display: flex;
    flex-direction: column;
    gap: 23px;
    /* width: calc((100% - (var(--productsgap) * 3)) / 4); */
    height: 100%;
    margin-bottom: 15px;
}

.item-card-swiper {
    display: flex;
    flex-direction: column;
    gap: 23px;
    height: 100%;
    margin-bottom: 15px;
}

.item-card-swiper:hover .item-desc {
    text-decoration: underline;
}

.item-card-swiper:hover .item-title {
    text-decoration: underline;
}

.product_card {
    display: flex;
    flex-direction: column;
    /* gap: 27px; */
    /* width: calc((100% - (var(--productsgap) * 2)) / 3); */
    min-width: 100%;
    /* max-width: 200px; */
    /* height: 100%; */
    position: relative;
    /* max-width: 278px; */
}

/* .product_card .item-img {
   margin-bottom: 27px;
} */
.item-card .item-img,
.longitem-card .item-img {
    text-align: center;
}

.item-img {
    height: 272px !important;
    position: relative;
    text-align: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-img-st {
    height: 272px !important;
}

.tipsitem-card .acevideoicon {
    width: 17%;
    height: 31%;
}

.aceborder {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 33%;
}

.aceicons {
    position: absolute;
    /* width: 141px; */
    width: 34.5%;
    /* height: 58px; */
    height: 24%;
    bottom: 0.5vw;
    left: 0.6vw;
}

.acevideoicon {
    position: absolute;
    width: 9.8%;
    height: 15%;
    bottom: 0.2vw;
    right: 0.3vw;
}

.recitem-img {
    position: relative;
    /* height: 50%; */
}

.item-content {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
    padding: 0px 17px;
}

.item-card:hover .item-title {
    text-decoration: underline;
}

.item-card:hover .item-desc {
    text-decoration: underline;
}

.longitem-card:hover .longitem-title {
    text-decoration: underline;
}

/* .item-title:hover ,.item-desc:hover{
    text-decoration: underline;
} */
.longitem-title {
    color: #000;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.item-title,
.itemlove-title {
    color: #000;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* .longitem-title{
   line-height: 95%;
} */

.itemlove-title {
    font-size: 17px;
}

.item-desc {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    height: 3.7em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.title-adv {
    /* padding: 50px 32px; */
    padding: 1.3vw;
    gap: 1vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* max-width: 30vw; */
    /* width: 100%; */
    /* height: 265px; */
    min-height: 100px;
    min-width: min-content;
    color: #fff;
    /* align-self: stretch; */
}

.title-adv a,
.title-adv span {
    color: #fff;
    text-decoration: underline;
    color: #FFF;
    /* font-size: 14px; */
    font-style: normal;
    font-weight: 500;
    font-size: 1vw;
}

.title-adv span {
    text-decoration: none;
}

.group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-align: start;
    gap: 6px;
}

.head-adv {
    display: flex;
    justify-content: space-between;
    background-color: #333;
    max-height: 300px;
}

.bigadv_title {
    color: #fff;
    font-size: 1.8vw;
    /* font-size: 28.796px; */
    font-weight: 600;
    /* align-self: stretch; */

}

.bigadv_title>span {
    /* font-size: 19.478px; */
    font-size: 1.2vw;
    font-weight: 700;
}

.btn {
    height: 40px;
    padding: 0px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.redhover:hover {
    background-color: #ff002f !important;
}

.newClass {
    height: fit-content !important;
}

.shopButton {
    height: 2.8vw !important;
    color: #D40029 !important;
    padding: 0px 1vw !important;
    background: #fff;
    text-decoration: none !important;
    margin-top: 0.3vw;
    text-align: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1vw;
    width: max-content;
    font-weight: 500;
    min-height: 2vw !important;
    text-transform: uppercase;
}

.shopButton:hover {
    color: #D40029;
    /* box-shadow: 1px 1px 10px 1px gray; */
    background: #f0eeee;
}

:root {
    --longproductsgap: 31px;
}

.longItem_cards {
    /* margin: 20px 0px; */
    display: flex;
    justify-content: start;
    align-items: center;
    /* flex-wrap: wrap; */
    /* gap: var(--longproductsgap); */
}

.TipsItem_cards {
    /* margin: 20px 0px; */
    display: flex;
    justify-content: start;
    align-items: center;
    /* flex-wrap: wrap; */
    gap: var(--longproductsgap);
}


.longitem-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    /* width: calc((100% - (var(--longproductsgap) * 2)) / 3); */
}

.tipsitem-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* width: calc((100% - (var(--longproductsgap) * 3)) / 4); */
}

.tipsitem-card>.item-img {
    /* width: 20.7vw !important; */
    height: 10vw !important;
}

.tipsitem-card:hover .item-img {
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
    transform: scale(1.009, 1.009);
}

.tipsitem-card:hover .item-content {
    text-decoration: underline;
}

.anim-card:hover {
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
    transform: scale(1.009, 1.009);
}

/* h2 {
   color: #000;
   text-align: center;
   font-size: 40px !important;
   font-style: normal;
   font-weight: 600;
   margin: 0px !important;
} */
.section h2 {
    text-align: center;
    color: #000;
    text-align: center;
    font-size: 38px !important;
    font-style: normal;
    font-weight: 600;
}

.section {
    display: flex;
    flex-direction: column;
    gap: 38px;
    margin-top: 24px;
}

/* catergory */
.cate-name{
    color: #000;
}

.cate-name:hover {
    text-decoration: underline;
    color: var(--prime-red);
    cursor: pointer;
}

.cat-title {
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

:root {
    --Catproductsgap: 15px;
}

.catItem_cards {
    /* display: flex;
    flex-wrap: wrap;
    gap: var(--Catproductsgap); */
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow: auto;
    gap: 10px;
}

.catItem_cards::-webkit-scrollbar,
.deliver-Section-container::-webkit-scrollbar {
    /* width: 15px; */
    height: 5px;
    background: #8f8f8f91;
}

.catItem_cards::-webkit-scrollbar-thumb,
.deliver-Section-container::-webkit-scrollbar-thumb {
    background: linear-gradient(#D40029, #D40029);
    border-radius: 10px;
}

/* brands shop */
.number-brands {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.six-brands,
.seven-brands {
    /* display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2%; */
    display: flex;
    /* gap: 2%; */
    justify-content: space-between;
    flex-wrap: wrap;
}

.six-brands a {
    width: calc((100% / 6) - (100px / 6));
}

.seven-brands a {
    width: calc((100% / 7) - (120px / 7));
}

/* stop flex to avoid ios issues */
/* .catitem-card { */
/* width: calc((100% - (var(--Catproductsgap) * 6)) / 7); */
/* display: flex; */
/* justify-content: center; */
/* align-items: center;
    flex-direction: column;
    gap: 5px; */
/* } */
.catitem-card:hover .cat-title {
    text-decoration: underline;
}

.cat-img {
    /* max-width: 145px; */
    /* height: 100%; */
    overflow: hidden;
    /* border-radius: 50%; */
    height: 173px;
    display: flex;
    min-width: 135px;
    justify-content: center;
    margin-bottom: 5px;
}

.salecat {
    background-color: #D40029;
    border-radius: 50%;
    /* width: 75%; */
    /* height: 70%; */
    width: 123px;
    height: 123px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    text-align: center;
    font-size: 40px;
    font-weight: 600;
}

.brand-img {
    /* max-width: 145px; */
    position: relative;
    height: 100%;
    width: 100%;
    margin-bottom: 15px;
    /* height: 10vw; */
}

.brand-img img:first-child {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.brand-img:hover img:first-child {
    -webkit-filter: grayscale(0%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.brand-img:hover .brandOnImg {
    transform: scale(1.2, 1.2) translate(-40%, -40%);
    transition: transform 0.4s ease-in-out;
}

.brand-img .brandOnImg {
    max-width: 50%;
    max-height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* swipper */
.swiper {
    width: 100%;
    height: auto;
    min-height: 200px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    height: 100%;
    /* flex-shrink: 1; */
}

/* to stop swipper effect on style when remove its function */
/* .top-cate-header{
    flex-shrink: 1;
} */
.swiper-slide>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-pagination {
    position: static;
}

.swiper-button-next,
.swiper-button-prev {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background-color: #D40029;
    border-radius: 50%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.50));
    width: 42px;
    height: 42px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 15px;
}

/* rating */
.height-100 {
    height: 100vh;
}

.card {
    width: 380px;
    border: none;
    height: 280px;
}

.ratings {
    margin-right: 10px;
}

.ratings i {
    color: #cecece;
    font-size: 14px !important;
}

.rating-color {
    color: #D40029 !important;
}

.ratevalue {
    color: #333;
    text-align: center;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
}

/* ......... */
.recitem-title {
    color: #333;
    font-size: 14px;
    font-weight: 400;
    text-align: start;
    line-height: 1.2;
    height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* height: 65px; */
}

/* .postrecitem2-content .recitem-title {
    height: 0px !important;
} */
.item2 .recitem-title {
    font-size: 1vw !important;
}

.resp_a {
    color: #D40029 !important;
    font-size: 1vw !important;
    font-weight: 500 !important;
    text-decoration-line: underline !important;
}

.recitem-content,
.recitem2-content {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: start;
    padding: 13px 30px;
    height: 50%;
}

.recitem-content {
    padding: 20px 0px;
}

.postrecitem2-content {
    display: flex;
    flex-direction: column;
    /* gap: 7px; */
    align-items: start;
    padding: 10px 17px;
    /* height: 10vw; */
    border-radius: 0px 0px 7px 7px;
    background: #D9D9D9;
    justify-content: space-between;
    white-space: pre-wrap;

}

.price {
    color: #000;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
}

.oldprice {
    color: #333;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
}

.reco_reward {
    color: #D40029;
    font-size: 14px;
    font-weight: 400;
    text-align: start;
}

.offer {
    position: absolute;
    top: 5px;
    right: 5px;
    max-width: 25%;
}

.swiper-pagination-bullet-active {
    background: #D40029;
}

.recitem2-content {
    border-radius: 0px 0px 7px 7px;
    background: #D9D9D9;
    /* white-space: pre-wrap; */
    /* height: 50%; */
}

.swiper-slide .rec2-card:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    transform: scale(1.008, 1.008);
}

.rec2-card {
    background-color: #D9D9D9;
    border-radius: 9px;
    height: 100%;
    width: 100%;
    overflow: clip;
}

.rec-card {
    padding: 10px;
    width: 100%;
    height: 100%;
    overflow: clip;
}

.rec-card:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    /* padding: 10px; */
}

.red_star {
    background-color: #D40029;
    border-radius: 50%;
    padding: 3px;
    width: 22px;
    height: 22px;
    color: #fff;
    font-size: 14px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* .cat-img > img {
    height: 150px;
} */
.bi-stars::before {
    transform: translate(1px, 1px);
}

.red_title {
    color: #D40029;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.red_link {
    color: #D40029 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration-line: underline !important;
}

.item1 {
    grid-area: bigposter;
}

.item2 {
    grid-area: smallposter;
}

.item3 {
    grid-area: smallposter2;
}

.grid-container a {
    display: contents;
}

.grid-container {
    display: grid;
    grid-template-areas:
        'bigposter smallposter smallposter2';
    grid-template-columns: 2fr 1fr 1fr;
    gap: 15px;
}

.grid-container2 {
    display: grid;
    grid-template-areas: 'bigposter smallposter';
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    align-items: stretch;
}

.item1,
.item2,
.item3 {
    position: relative;
    /* height: 20vw; */
}

.recitem-img>img {
    /* height: 50%; */
    max-height: 10vw;
}

.itemtext,
.itemtext2 {
    position: absolute;
    display: flex;
    flex-direction: column;
    color: #FFF;
    /* font-size: 17px; */
    font-size: 1.2vw;
    font-weight: 600;
    /* white-space: nowrap; */
    width: 90%;
}

.big-title-1 {
    max-width: 45%;
}

.big-title-banner {
    font-size: 30px;
}

.itemtext {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;
}

.itemtext2 {
    width: 75%;
    top: 0;
    left: 0;
    padding: 2vw;
    transform: translate(0%, 0%);
    height: 100%;
    justify-content: space-between;
}

.item1 .itemtext {
    left: 30%;
}

/* .item1 {
    max-height: 160px;
    height: 100%;
} */
.itemtext span:nth-child(2) {
    font-size: 2.2vw;
    text-align: center;
    /* font-size: 26px; */
}

.itemtext2 div:nth-child(2) {
    white-space: wrap;
    /* font-size: 2vw; */
    /* font-size: 31.818px; */
}

.orange_date {
    color: #FFF;
    /* font-size: 16.647px; */
    font-weight: 600;
    border-radius: 14px;
    background: #F36C21;
    padding: 0.2vw 1.1vw;
    text-align: center;
}

.orange {
    color: #F36C21;
}

.redText {
    color: #D40029;
    text-align: center;
    font-size: 32px;
    /* font-size: 2.4vw; */
    font-weight: 600;
    text-transform: uppercase;
}

.logocard_img {
    max-width: 30%;
    height: 100%;
}

.sales-banner {
    max-height: 30px;
}

.advlogo_img {
    /* width: 55px; */
    width: 4vw;
    height: 2.6vw;
}

.buy_card {
    background-color: #EFEFEF;
    /* padding: 2vw 3vw; */
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: 100%;
}

.buy-way {
    /* background-color: #F7F7F7; */
    display: flex;
    align-items: center;
    justify-content: start;

    height: 100%;
    /* padding: 1vw 2vw; */
    font-size: 0.2vw;
    /* width: 40%;  */
    position: relative;
}

.buy-way svg {
    margin: 0px !important;
    /* width: 10vw; */
    /* position: absolute; */
}

.buy-way>div {
    gap: 2vw;
}

.buyway-images {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 30%;
    top: 50%;
    gap: 4vw;
    transform: translate(-30%, -50%);
}

.buyway-images>.logocard_img:first-child {
    /* width: 7vw; */
    height: 3.5vw;
}

.buyway-images>.logocard_img:nth-child(2) {
    width: 12vw;
    /* height: 2vw; */
}

.buy-details {
    /* background-color: #EFEFEF; */
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5vw;
    padding: 1vw 2vw;
}

.buy-text {
    color: #000;
    font-size: 24px;
    /* font-size: 2vw; */
    font-weight: 600;
}

.buy-text span {
    color: #D40029;
}

.purchase {
    color: #333;
    /* font-size: 16px; */
    font-size: 1vw;
    font-weight: 400;
}

.buy-triangle {
    width: 0;
    height: 0;
    border-left: 40px solid #922828;
    /* border-right: 0px solid transparent; */
    border-bottom: 6vw solid transparent;
}

.deliver-Section {
    background-color: #EFEFEF;
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 20px;
    padding: 4vw 8vw;
    flex-wrap: wrap;
    max-width: 1920px;
    /* padding-right: 200px; */
    /* padding-left: 200px; */
    margin-left: auto;
    margin-right: auto;
}

.deliver {
    display: flex;
    align-items: start;
    gap: 10px;
    width: calc((100% - (20px * 3)) / 4);
}

.deliver .red_title {
    font-size: 12px !important;
}

.deliver img {
    width: 4.6vw;
    height: 4vw;
    min-width: 44px;
    min-height: 44px;
}

.delivery-title {
    color: #000;
    font-size: 20px;
    font-weight: 600;
}

.deliver-detail {
    color: #4F4F4F;
    font-size: 16px;
    font-weight: 400;
}

/* footer */
.footer {
    display: flex;
    background-color: #424242;
    flex-wrap: wrap;
    width: 100%;
    color: #F6F6F6;
    padding: 0px 8vw;
    flex-direction: column;
    max-width: 1920px;
    /* padding-right: 200px; */
    /* padding-left: 200px; */
    margin-left: auto;
    margin-right: auto;
}

.footer-container {
    background-color: #424242;
}

.upperfooter {
    display: flex;
    justify-content: center;
    /* flex-wrap: wrap; */
    /* padding: 0px 5vw 20px 5vw; */
}

.form-footer-container {
    display: flex;
    justify-content: space-between;
}

.form-footer-container div {
    display: flex;
    align-items: center;
    width: 30%;
}

.form-footer-container span {
    color: #FFF;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    text-decoration: underline;
}

.form-footer-container p {
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-decoration: none !important;
    margin: 0;
}

.form-footer-container img {
    margin-right: 10px;
}

.form-footer input,
.form-footer a {
    border-radius: 0 !important;
}

.form-footer input {
    padding: 10px !important;
}

.form-footer a {
    padding: 11px !important;
}

.form-footer {
    margin-top: 30px;
    width: 33%;
}

.form-footer .redbtn {
    padding: 11px !important;
    border-radius: 0 !important;
    width: 30%;
}

.footerContent {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    text-align: start;
    /* width: 100%; */
    gap: 50px;
    padding-top: 19px;
}

.footerDiv {
    display: flex;
    align-items: start;
    text-align: start;
    justify-content: start;
    flex-direction: column;
    color: #FFF;
    gap: 10px;
    /* text-align: justify; */
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.footerLogo {
    text-align: end;
    height: 252px;
}

.footerTitle {
    color: #FFF;
    font-family: RobotoSlab;
    font-size: 18px;
    font-weight: 600;
}

.footerDiv a {
    font-size: 14px;
    font-weight: 400;
}

.footerDiv a:hover {
    text-decoration: underline;
}

.copyRight {
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.copyright-clickable span {
    cursor: pointer;
}

.footerunderline {
    padding: 20px 0px 40px 0px;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.footerunderline i {
    font-size: 21px;
}

.footerunderline .bi-youtube {
    font-size: 26px;
}

.bi-youtube::before {
    vertical-align: -0;
}

.terms {
    display: flex;
    gap: 2vw;
    border: 0px !important;
    white-space: nowrap;
    flex-wrap: wrap;
    justify-content: center;
}

.terms>a {
    color: #FFF !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer;
}

.footer-logo-mobile {
    background: var(--prime-red);
    display: none;
    padding: 15px 8vw;
}

/* shipping policy style */
.shipping-policy-title {
    font-size: 42px;
}

.main-content-container {
    padding-top: 2vw;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.main-content {
    /* padding: 2vw 8vw;; */
    /* gap: 16%; */
}

.aside-list-container h6 {
    font-size: 15px;
    color: rgba(25, 25, 25, 0.93);
    font-weight: 600;
    font-family: RobotoSlab;
}

.aside-list-container ul {
    list-style-type: none;
    color: #515151;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
}

.aside-list-container ul li {
    margin: 11px;
}

.aside-list-container a {
    color: #515151;
}

.aside-list-container a:hover {
    text-decoration: underline;
}

.shipping-content h3 {
    color: #333;
    font-family: RobotoSlab;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 1em;
}

.shipping-content p,
ul {
    color: #666;
    font-size: 14px;
}

.shipping-content ul {
    list-style-type: disc;
    margin-left: 20px;
}

/* brands page */
.brands-content-container {
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.all-circle {
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.all-circle p {
    margin: 0;
    color: #515151;
    font-size: 18px;
}

p.all-brands-title {
    color: #333;
    font-family: RobotoSlab;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

.brands-space {
    gap: 3%;
}

.brand-logos {
    height: 6vw;
    padding: 0 5px;
}

.brands-filter {
    background: #E5E5E5;
    padding: 20px;
    gap: 8%;
    align-items: center;
}

.a-z {
    gap: 10px;
    width: 100%;
}

.a-z a {
    text-decoration: none;
    color: #515151;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
}

.legacy-container {
    padding: 0 30px;
    flex-wrap: wrap;
    text-align: center;
    /* justify-content: space-between; */
}

.legacy-container a {
    flex: 0 0 auto;
    width: 19.666667%;
    margin-bottom: 1rem;
    color: #121212;
}

/* About us */
.about-img {
    /* background: url(https://ace.mazayasolutions.dev/theme/images/about.png) no-repeat; */
    background-size: cover;
    /* Changed to cover for better responsiveness */
    height: 55vh;
    background-position: center;
    display: flex;
    margin-bottom: 2vw;
}

.about-container {
    background: rgba(0, 0, 0, 0.60);
    width: 25%;
    /* Adjusted to be more responsive */
    max-width: 600px;
    /* Added max-width for larger screens */
    padding: 20px;
    /* Added padding for better spacing */
    box-sizing: border-box;
    /* Ensures padding is included in width */
    color: #fff;
    /* Ensure text is visible on dark background */
    display: flex;
    align-items: center;
}

.about-container h2 {
    color: #fff;
    font-family: RobotoSlab;
    font-size: 2.5vw;
    font-weight: 600;
    text-align: left;
}

span.single-word {
    display: block;
    font-family: RobotoSlab;
}

.about-text h6 {
    color: rgba(18, 18, 18, 0.93);
    font-size: 20px;
    font-family: Roboto;
    font-weight: 700;
}

.about-text p {
    color: #333;
    font-size: 16px;
    font-weight: 400;
    font-family: Roboto;
    text-align: justify;
}

.about-text p span {
    font-weight: 600;
}

.divider {
    background: #000;
    margin-bottom: 3vw;
}

.stories-title a {
    color: #333;
    text-decoration: underline;
}

.stories-title h3 {
    color: rgba(18, 18, 18, 0.93);
    font-family: RobotoSlab;
    font-size: 32px;
    font-weight: 500;
}

.stories-title p {
    color: #333;
    font-family: Roboto;
    font-size: 12.5px;
    font-weight: 400;
}

/* slidder style */
/* Position the image container (needed to position the left and right arrows) */
.stories-slidder-container {
    position: relative;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

.mySlides video,
.mySlides iframe {
    width: 100%;
    height: 100%;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
    cursor: pointer;
}

/* Next & previous buttons */
.stories-prev,
.stories-next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    background: rgba(0, 0, 0, 0.30);
}

/* Position the "next button" to the right */
.stories-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.stories-prev:hover,
.stories-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Container for image text */
.stories-caption-container {
    /* text-align: center; */
    background: rgba(0, 0, 0, 0.60);
    padding: 25px;
    color: white;
}

.stories-caption-container h6 {
    color: #FFF;
    font-size: 20px;
}

.stories-caption-container p {
    color: #FFF;
    font-size: 12px;
}

/* contact us */
.contact-content-container {
    background: #E5E5E5;
    padding: 5vw 0 1vw 5vw;
    justify-content: space-between;
}

.contact-form-container,
.call-us-container {
    background: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.form-item {
    gap: 18px;
}

.contact-form-container input,
.contact-form-container textarea {
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    background: #FFF;
    padding: 8px 16px;
    width: 100%;
}

.contact-form-container textarea {
    height: 131.428px;
}

.contact-form-container input::placeholder,
.contact-form-container textarea::placeholder {
    color: #515151;
    font-size: 14px;
    text-transform: capitalize;
}

.name-container {
    gap: 18px;
}

.contact-form-container input[type="submit"] {
    border-radius: var(--Number, 5px);
    background: #D40029;
    color: #fff;
    text-transform: capitalize;
    padding: 13px 40px;
    width: 50%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    text-wrap: balance;
}

.contact-form-container h6,
.call-us-container h6 {
    color: #333;
    font-family: RobotoSlab;
    font-size: 18px;
    font-weight: 600;
}

.contact-form-container p,
.call-us-container p {
    color: #333;
    font-size: 12px;
    font-weight: 400;
}

.call-us-container span {
    color: rgba(51, 51, 51, 0.55);
    font-size: 14px;
    font-weight: 400;
}

.cards-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 60%;
}

.contact-main-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    margin: 0;
}

/* store locator page */
.day-short,
.start-time,
.end-time {
    min-width: 28px;
    display: inline-block;
}

/* .start-time{
    min-width: 48px;
} */
.map {
    width: 35%;
    max-height: 250px;
}

.map iframe {
    width: 100%;
    height: 100%;
}

.store-title {
    padding-top: 4vw;
}

.store-container h4,
.store-title h4 {
    color: #000;
    font-family: RobotoSlab;
    font-size: 24px;
    font-weight: 600;
}

.store-details h6 {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    font-family: Roboto;
}

.store-details p {
    color: rgba(18, 18, 18, 0.93);
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

/* .hours p{
    white-space: nowrap;
} */
.hours p:last-child {
    margin-bottom: 10px;
}

.store-card-content {
    gap: 3%;
    /* justify-content: space-around; */
}

.add-phone {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.store-cards {
    flex-wrap: wrap;
    flex-direction: row;
    width: max-content;
    justify-content: center;
    gap: 40px;
    margin-top: 35px;
}

.store-container {
    width: 45%;
}

/* categories page */
.cetagory-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.category-title h1 {
    color: #333;
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
}

.category-aside h3 {
    color: rgba(25, 25, 25, 0.93);
    font-size: 25px;
    font-weight: 400;
    padding-bottom: 20px;
    border-bottom: 1px solid #BFBFBF;
}

.category-aside ul {
    padding-left: 1rem;
}

.category-aside ul a {
    color: #666;
    font-size: 16px;
    font-weight: 500;
    list-style-type: none;
}

.category-aside ul li {
    padding: 10px 5px;
}

.category-aside ul li:hover {
    background-color: #D9D9D9;
    border-radius: 5px;
}

.featured-categories h2,
.tips h2,
.by-brand h2 {
    color: #333;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
}

.featured-categories p,
.tips p,
.by-brand p {
    color: #515151;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 20px;
}

.category-card {
    display: flex;
    flex-direction: column;
}

.category-card>p:first-of-type {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0;
}

.category-card p {
    color: #515151;
    font-size: 14px;
    font-weight: 400;
}

.category-card-row {
    gap: 7%;
}

.shop-bullet {
    border-radius: 72px;
    background: rgba(238, 238, 238, 0.50);
    display: flex;
    align-items: center;
    transition: all .2s;
    text-decoration: none;
    width: 100%;
    padding: 0;
    color: #000;
}

.shop-bullet p {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.img-cont {
    max-width: 100px;
    max-height: 100px;
}

.shop-category-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: clamp(17px, 3vw, 28px);
    column-gap: clamp(15px, 3vw, 20px);
}

.sale-bullet {
    background: #D40029;
}

.sale-bullet p {
    color: #FFF;
}

.brand-img-row {
    gap: 1%;
}

.brand-img-category {
    /* display: block; */
    /* background: url('images/weber-full.png') no-repeat center; */
    /* background-size: cover; */
    /* padding: 20px; */
    position: relative;
}

.brand-imgs-container {
    gap: 0.5vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.img-contain-category {
    height: 12vw;
}

/* .brand-img-small{
    width: 40%;
    height: 12vh;
} */
.brand-img-self {
    position: absolute;
    top: 25%;
    left: 0px;
    width: 30%;
    height: 4vw;
    padding: 0 1vw;
    margin-left: 30px;
}

.brand-img-bg {
    height: 9vw;
}

/* description page */
.description-content {
    display: flex;
    flex-direction: column;
    gap: 8vh;
}

.description-sec-container {
    gap: 2%;
}

.description-sec-video {
    width: 55%;
    position: relative;
    height: 20vw;
}

.description-sec-text {
    width: 45%;
}

.describ-header-text h3 {
    color: #000;
    font-size: 30px;
    font-weight: 600;
}

.describ-header-text p {
    color: #333;
    font-size: 16px;
    font-weight: 400;
}

/* FAQ page */
.arabic-faq {
    text-align: right;
    direction: rtl;
}

.arabic-faq h3 {
    color: #333;
    font-family: RobotoSlab;
    font-size: 26px;
    font-weight: 900;
}

.arabic-faq p,
.arabic-faq ol {
    color: #666;
    font-size: 16px;
    font-weight: 400;
}

.faq-container {
    gap: 16%;
}

/* shop category page */
.category-swiper {
    height: auto;
    padding-bottom: 20px;
    /* gap: 10px; */
}

.cate-title p {
    margin-bottom: 7px;
    color: #333;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

.product-btn {
    display: none;
    position: absolute;
    bottom: -56px;
    z-index: 2;
    width: 100%;
    padding: 20px;
    padding-top: 0px;
    background: #fff;
}

.product_card:hover .product-btn a {
    display: block;
    text-align: center;
    font-size: 14px;
}

.product_card:hover .product-btn {
    display: block;
    box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.3),
        /* right shadow */
        0 5px 5px -5px rgba(0, 0, 0, 0.3);
    /* bottom shadow */
}

.product_card:hover {
    box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.3);
    /* right shadow */
}

.product_card-content {
    padding: 20px;
    text-align: center;
}

.load-more-btn {
    background: var(--prime-red);
    color: #fff;
    padding: 10px 40px;
    border: none;
}

.load-more-container {
    text-align: center;
    margin: 50px 0;
}

.load-more-container p {
    color: #666;
    font-size: 16px;
    font-weight: 400;
}

#topBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: var(--prime-red);
    color: white;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 50%;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.50));
}

.compare-section {
    /* height: 185px; */
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    z-index: 3;
    bottom: 0;
    left: 0;
    padding: 2vw 8vw;
}

.compare-section p {
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    margin-right: 20px;
}

.to-clear {
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
}

.compare-btn {
    color: #000;
    background: #fff;
    font-size: 14px;
    font-weight: bolder;
    padding: 10px 15px;
}

.compare-btn:hover {
    color: #000;
    background: #fff;
}

.compare-imgs {
    display: flex;
    gap: 5%;
    margin-top: 20px;
}

.image-display {
    position: relative;
    margin-top: 20px;
}

.close-btn-compare {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(11px, -15px);
    padding: 0px 10px;
    font-size: 18px;
    background: var(--prime-red);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 23px;
    height: 23px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* line-height: 25px; */
}

/* .close{
  position: absolute;
  right: -15px;
  top: -12%;
  border-radius: 50%;
  padding: 0px 10px;
  background: var(--prime-red);
  font-size: 22px;
} */
.compare-img {
    width: 22%;
    /* height: 112px; */
    aspect-ratio: 1.5 / 1;
    position: relative;
    display: flex;
}

.compare-empty {
    width: 100%;
    height: 100%;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.compare-empty:has(img) {
    background-color: #fff;
}
.compare-acc-btn::after {
    height: 20px !important;
    margin-left: 0 !important;
    border-radius: 0 !important;
    /* background: none !important; */
    color: white !important;
    display: none;
}

.compare-acc-btn {
    position: absolute;
    left: 50%;
    width: 100px;
    top: -2vw;
    background: rgba(0, 0, 0, 0.7) !important;
    padding: 0;
    justify-content: center;
    height: 2vw;
    border-radius: 5px 5px 0 0;
    transform: translate(-50%, 0%);
}

.compare-acc-btn i {
    color: white;
}

.hidden {
    display: none !important;
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
    transition: opacity 0.3s ease-in-out;
}

.image-container .hover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.image-container:hover .hover-image {
    opacity: 1;
}

.image-container:hover .main-image {
    opacity: 0;
}

.star {
    font-size: 24px !important;
    cursor: pointer !important;
    color: #c0bebeee !important;
    width: 15px !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.one,
.two,
.three,
.four,
.five {
    color: var(--prime-red) !important;
}

.bi-heart-fill {
    color: var(--prime-red);
}

.navbar-nav li:hover>ul.dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

/* rotate caret on hover */
.dropdown-menu>li>a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
}




/* signin page*/
.siginLogo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-align: start;
    position: relative;
    /* padding: 0px 2vw; */
}

.signin_Back {
    position: absolute;
    top: 50%;
    left: 5vw;
    transform: translate(0%, -50%);
    color: #333;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

.signin_Back:hover {
    color: #333;
    cursor: pointer;
}

.forget {
    color: #D40029;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    /* 21px */
    text-decoration-line: underline;
    background: none;
    border: none;
    padding: 0;
}

.forget:hover {
    color: var(--prime-red);
}

.siginLogo_img {
    display: flex;
    height: 100px;
    margin-top: 15px;

}

.siginLogo_img>img {
    width: 182px;
}

a {
    text-decoration: none;
}

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

.siginform input::placeholder,
.siginform select::placeholder {
    color: #929090;

    font-size: 14px;
}

.siginform {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 35px 0px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 36vw;
    border-top: 5px solid #D40029;
    gap: 12px;
    margin: 2vw auto;
    /* min-width: 350px */
}

.siginform>div {
    padding: 0px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 12px;
    width: 100%;
}

.form-single {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.siginform>div span {
    color: #333;
    font-size: 12px;
    font-weight: 400;
}

.sigintitle {
    color: #D40029;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.24px;
}

.input {
    height: 47px;
}

.logintitle {
    color: #D40029;
    font-size: 24px;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: -0.24px;
}

.signinparag {
    color: #333;
    font-size: 16px;
    font-weight: 400;
}

.signin_subtitle {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    /* margin: 0; */
}

.or-social {
    color: #D40029;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 16.8px */
    text-transform: capitalize;
    padding: 0px 40px !important;
    background-color: transparent;
    position: relative;
    width: 100% !important;
    margin: 20px auto;
    text-align: center;
}

.or-social::before {
    content: ' ';
    border: 1px solid #BEBEBE;
    position: absolute;
    width: 45%;
    top: 50%;
    right: 0px;
    transform: translate(0%, -50%);
}

.or-social::after {
    content: ' ';
    border: 1px solid #BEBEBE;
    position: absolute;
    width: 45%;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
}

.social-text p {
    color: #8F8F8F;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

.login-social-container {
    margin: 10px;
}

.not-robot-check input {
    width: 18px;
    height: 18px;
}

.not-robot-check label {
    font-size: 16px;
}

/* .form-control {
    height: 47px;
    text-align: start;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    background: #FFF;
    padding: 16px;
} */
/* #PhoneNo {
    width: 165%;
} */

.grayborder {
    width: 100%;
    height: 9px;
    background: #EEE;
}

.sigincheck_label {
    color: #515151;
    font-size: 16px;
    font-weight: 400;
    text-align: start;
}
.checkout-box .form-check {
    padding-inline-start: 25px !important;
}
[dir="rtl"] .checkout-box .form-check .form-check-input {
    right: 0px;
}
.sigincheck_label-last {
    font-size: 12px;
}

.redborder {
    border-radius: 5px;
    border: 2px solid #D40029;
    padding: 20px 30px !important;
    width: 90% !important;
    margin: auto;
}

.redborder ul {
    list-style-type: disc;
    font-size: 12px;
    margin-left: 20px;
}

.redborder ul li {
    padding: 4px;
}

/* .siginform-new > div{
    gap: 0;
} */
.form-check-input:checked {
    background-color: #D40029;
    border-color: #D40029;
}

.form-check-input[type=radio]:checked {
    background-color: #fff;
    border-color: #D40029;
}

.form-check-input[type=checkbox] {
    border-radius: .2em;
}

.loginbutton {
    background: #D40029 !important;
    color: #fff !important;
    font-family: inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    border-radius: 8px;
    width: 100%;
    margin: 20px 0px;
    border: 1px solid #D40029;
    height: 49px;
    padding: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginbutton:hover {
    background: #D40029 !important;
    color: #fff !important;
}

.modal-pass-title p {
    font-size: 12px;
}

.password-modal {
    padding: 20px;
    margin-top: 120px;
}

.password-modal input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.password-modal button {
    font-size: 12px;
    border-radius: 7px;
    padding: 10px;
}

.pass-modal-body {
    padding-top: 0;
}

#submitBtn {
    color: white;
    /* Text color for the button */
    /* Background color when the button is disabled */
    border: none;
    padding: 10px 20px;
    /* Cursor indicates the button is not clickable */
    cursor: not-allowed;
}

/* input:required {
    border: none;
    padding: 10px;
} */
.error-message {
    font-size: 10px;
    color: var(--prime-red);
    margin-left: 20px;
}

input.error {
    border: 2px solid #D40029;
    /* Red border for incomplete fields */
    background: #FEEBE2;
}

.input.error::placeholder {
    color: #D40029;
    /* Changes the placeholder color to red */
}

.password-conditions {
    display: none;
    color: #555;
    font-size: 0.9em;
    margin-top: 5px;
}

.password-conditions p {
    margin: 0;
    padding: 2px 0;
    color: #333;
    font-family: Roboto;
    font-size: 10px;
    font-style: normal;
    font-weight: 300;
}

.condition-icon {
    margin-right: 8px;
    color: #D40029;
    /* Initial color for the icon */
}

.condition-met {
    color: #2AFF40;
    /* Color when condition is met */
}

.ui.fluid.dropdown {
    height: 47px;
}

.ui.search.dropdown>.text {
    top: 3px;
}

.signinbutton,
.borderbutton {
    font-family: inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    border-radius: 8px;
    width: 100%;
    margin: 20px 0px;
    border: 1px solid #D40029;
    height: 49px;
    padding: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signinbutton {
    background-color: #D40029;
    color: #FFF;
}

.borderbutton {
    color: #D40029;
    background-color: #FFF;
    font-weight: 700;
}

.borderbutton:hover {
    color: #D40029;
    /* background-color: rgba(244, 244, 244, 0.949); */
    border: 1px solid #D40029;
}

.loginheads {
    color: #000;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: -0.24px;
    width: 100%;
    margin: 20px 0px 5px 0px;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    color: #fff;
    pointer-events: none;
    background-color: #D1D1D1;
}

.password {
    position: relative;
    width: 100%;
}

.showicon {
    position: absolute;
    color: #D40029;
    top: 25px;
    right: 0;
    transform: translate(-50%, -50%);
    font-family: inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    /* 21px */
    cursor: pointer;
}

.signinfooter {
    background-color: #424242;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 45px;
    gap: 19px;
    text-align: justify;
}

.signinfooter .siginNeed {
    color: #FFF;
    font-family: RobotoSlab;
    font-size: 18px;
    font-weight: 600;
}

.signinfooter .signincontact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4.2vw;
}

.copyRightsignin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.siginPhone {
    cursor: pointer;
}

.siginEmail img {
    height: 20px;
    min-width: 15px;
    margin-bottom: 5px;
}

.siginPhone img {
    width: 26px;
    height: 26px;
    min-width: 15px;
    margin-bottom: 5px;
}

.signinfooter .terms {
    gap: 1.5vw !important;
}

.signinfooter .siginPhone,
.signinfooter .siginEmail {
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.iti {
    width: 100% !important;
}

.breadcrumb li:first-child {
    text-decoration: underline;
}

.breadcrumb-item>a {
    color: #333;
    font-size: 16px;
    font-weight: 400;
}

.accordion-button:not(.collapsed) {
    color: rgba(25, 25, 25, 0.93);
    font-size: 15px;
    font-weight: 600;
    background-color: transparent;
    box-shadow: unset;
    border: 0px;

}

.accordion-item {
    border-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-top: 2px solid rgb(211, 210, 210) !important;
    border: 0px;
}

/* .accordion-button::after  {
    background-color: #D40029;
    height: 5px;
    border-radius: 12px;
    color: #D40029;
} */
.accordion-button.collapsed::after {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    margin-left: auto;
    content: "\2b";
    /* Plus sign */
    font-size: 1.25em;
    /* Adjust size as needed */
    text-align: center;
    transition: transform 0.2s ease-in-out;
    color: #D40029;
    font-weight: bold;
    font-family: 'FontAwesome';
}

.accordion-button::after {
    background-image: none;
    /* Removes any existing background-image */
    content: "+";
    /* Sets default content to '+' */
    font-size: 1.25em;
    /* Adjust size as needed */
    color: #000;
    /* Adjust color as needed */
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
}

/* Changes content to '-' when the accordion item is open */
.accordion-button:not(.collapsed)::after {
    content: "\f068";
    width: 1.25em;
    height: 1.25em;
    color: #D40029;
    font-weight: bold;
    font-size: 1.5em;
    font-family: 'FontAwesome';
}

.accordion-button-product {
    border-bottom: 0px;
}

.accordion-button:focus {
    box-shadow: unset;
}

/* accordion compare to override */
.acc-item-compare {
    /* background-color: rgba(0, 0, 0, 0.7); */
    background: none;
    border-top: none !important;
}

/* product details */
.productdetails {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.prod_det_content {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    width: 60%;
    padding: 40px 31px;
    border: 1px solid rgba(51, 51, 51, 0.20);
    border-radius: 8px;
}

.prod_det_summery {
    width: 37%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.prod_det_summery>div {
    border-radius: 8px;
    border: 1px solid rgba(51, 51, 51, 0.20);
    display: flex;
    flex-direction: column;
    padding: 17px 8px;
    width: 100%;
}

.summery_ptitle {
    color: rgba(18, 18, 18, 0.66);
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0;
}

.summery_price {
    color: rgba(18, 18, 18, 0.93);
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.summery_parag {
    color: rgba(18, 18, 18, 0.93);
    font-size: 12px;
    font-weight: 400;
    /* margin: 0; */
}

.prod_det_title {
    color: rgba(18, 18, 18, 0.93);
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 40px;
    text-align: start;
}

/* product page */
.product-validation {
    font-size: 12px;
    color: #D40029;
    margin: 0;
}

.review-swipper {
    margin-top: 40px;
    margin-bottom: 100px;
}

.review-swipper .rec-card:hover {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.reviews-product-container {
    margin-bottom: 130px;
}

.customer-review h6 {
    color: #000;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

.img-gradient .rating-color {
    -webkit-text-fill-color: #D40029;
}

.img-gradient .ratings i {
    font-size: 22px !important;
}

.rev-num {
    border: 1px solid #000;
    padding: 0px 6px;
    color: #000;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.sm-rev p {
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0;
}

.helpful-review {
    margin-top: 45px;
}

.helpful-review p:first-of-type {
    color: #000;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 0;
    margin-right: 7px;
}

.helpful-review img {
    width: 16px;
}

.review-by {
    align-self: center;
}

.review-by p {
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 7px;
}

.review-by p span {
    color: #616161;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.load-review {
    color: rgba(18, 18, 18, 0.86);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    border-radius: 4px;
    border: 0.5px solid #000;
    background: #fff;
    padding: 10px 20px;
    margin: auto;
}

.load-container {
    position: relative;
}

.top-rev {
    color: rgba(18, 18, 18, 0.86);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-align: right;
    position: absolute;
    right: 25px;
    padding-top: 15px;
    bottom: 0;
}

.btn-hide {
    visibility: hidden;
}

.login-modal .loginheads {
    font-size: 18px;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: white;
    pointer-events: none;
}

.ques-form label {
    margin-bottom: 10px;
}

.ques-form input,
.ques-form textarea {
    border-radius: 4px;
    border: 0.5px solid #333;
}

.ques-mail p {
    color: rgba(18, 18, 18, 0.74) !important;
    font-family: Roboto !important;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400 !important;
}

.question-appear {
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    display: none;
}

.cancel-ques {
    width: fit-content;
    align-self: end;
    margin-top: 20px;
    padding: 10px 64px !important;
    border-radius: 0 !important;
}

.policy-question p {
    color: rgba(18, 18, 18, 0.74) !important;
    font-family: Roboto !important;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400 !important;
}

.policy-question p span {
    text-decoration: underline;
    color: rgba(18, 18, 18, 0.74) !important;
}

.submit-question button {
    padding: 8px 28px !important;
}

.store-add p {
    color: rgba(18, 18, 18, 0.93);
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.store-add button {
    color: rgba(18, 18, 18, 0.66);
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    text-decoration-line: underline;
}

.select-store button {
    width: 94%;
}

.zoomslide {
    overflow: hidden;
    margin: 20px;
    padding: 10px !important;
}

.zoom-text p {
    margin: 0;
    color: #000;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.share-modal {
    margin-top: 300px;
}

.share-modal .modal-content {
    border-top: 4px solid var(--prime-red) !important;
    border-radius: 0;
}

.share-modal .modal-body img {
    width: 30px;
    height: 30px;
}

.share-modal .modal-header {
    border: 0;
}

.share-modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.share-modal-body a {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0 !important;
}

.share-modal-body p {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    color: #000;
}

.share-modal-title {
    color: var(--prime-red);
    font-size: 20px;
    font-weight: 600;
}

.share-modal-body .copy-link a {
    border: 0 !important;
    color: #0d6efd !important;
    text-decoration: underline;
    font-family: 300;
    font-size: 14px !important;
    text-transform: none !important;
}

.share-modal .btn-close {
    background: url('https://ace.mazayasolutions.dev/theme/images/close-brn-bg.svg') no-repeat center;
    background-size: 20px 20px;
    opacity: 1;
}

.save-modal-btn {
    background: var(--prime-red);
    color: #FFF;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    width: 100%;
    border: none;
    border-radius: 5px;
    padding: 12px;
}

.product-card {
    border-radius: 8px;
    border: 1px solid rgba(51, 51, 51, 0.20);
    padding: 17px 8px;
}

.price-card a {
    /* color: #000; */
    border: 1px solid rgba(51, 51, 51, 0.20);
    border-radius: 4px;
    color: #121212;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.return-card p {
    color: #121212;

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    margin: 0;
}

p.return_parag {
    color: rgba(18, 18, 18, 0.74);

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.summery_parag span:first-of-type {
    text-decoration: none;
    color: rgba(18, 18, 18, 0.93);
    font-size: 12px;
    font-weight: 600;
}

.summery_parag span {
    text-decoration: underline;
}

.three-box-container {
    display: flex;
    gap: 2%;
    justify-content: space-between;
}

.three-box-container .box-second,
.three-box-container .box-first {
    /* width: 157px; */
    /* height: 126px; */
    background: rgba(18, 18, 18, 0.07);
    border-radius: 4px;
    padding: 7px !important;
}

.box-first {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}

.box-first {
    cursor: pointer;
    border: 2px solid transparent;
    padding: 10px;
    transition: border 0.3s ease;
}

.box-first.active {
    border: 1px solid #000;
    background-color: #fff;
}

.box-border {
    /* width: 157px; */
    /* height: 126px; */
    background: white !important;
    border: 1px solid #000;
    border-radius: 4px;
    padding: 7px;
}

.green-text {
    color: green;
    margin: 5px;
}

/* calender modal */
.time-slot {
    cursor: pointer;
    padding: 10px;
    margin: 5px 0;
    /* border: 1px solid #ccc; */
    border-radius: 4px;
    text-align: center;
    transition: background-color 0.2s;
    border-radius: 8px;
    background: #F6F7F9;
}

.time-slot:hover {
    background-color: #f1f1f1;
}

.time-slot.selected {
    background-color: #007bff;
    color: white;
}

#timepicker {
    max-height: 260px;
    overflow-x: auto;
}

/* .calender-modal{
    bottom: -33%;
} */
.ui-widget.ui-widget-content {
    border: none;
    width: 100%;
}

.ui-widget-header {
    background: none;
}

.ui-datepicker .ui-datepicker-header {
    border: none;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    background: none;
    border: none;
    width: 85%;
    margin: auto;
    padding: 6px;
    text-align: center;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
    color: #fff;
    border-radius: 5px;
    background: #E1001E;
}

/* .ui-widget-header .ui-icon{
    background-image: url('./images/i-icon.svg');
} */
.ui-datepicker-prev,
.ui-datepicker-next {
    cursor: pointer;
}

.time-slot.selected {
    border: 1.694px solid #E1001E;
    background: #FFE0E4;
    color: #000;
}

.calender-modal .btn-primary {
    background-color: #E1001E;
    border: 1px solid #E1001E;
}

.calender-modal .btn-secondary {
    background-color: #fff;
    border: 1px solid #DCE0E5;
    color: #000;
    padding: 0 12px;
}

#datepicker {
    position: relative;
}

.calender-next {
    position: absolute;
    right: 13px;
    top: 7px;
}

.calender-prev {
    position: absolute;
    left: 13px;
    top: 7px;
}

.calender-prev img,
.calender-next img {
    width: 14px;
    height: 14px;
}

.ui-widget-header .ui-icon {
    background-image: none;
}

.ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
    background: none;
    border: none;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    border: 1px solid #DCE0E5;
    box-shadow: 0px 20.322px 20.322px 0px rgba(255, 255, 255, 0.12), 0px -3.387px 3.387px 0px rgba(48, 48, 48, 0.10);
    border-radius: 8px;
}

.calender-body p {
    color: #14181F;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}

.ui-datepicker th {
    color: #6F7C8E;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.vertical_hr {
    width: 1px;
    padding: 0px !important;
    margin: 0px 12px;
    background-color: #DCE0E5;
    margin-top: 45px;
}

/* .ui-datepicker-prev, .ui-datepicker-next-hover{
    right: 0 !important;
    top: 7px !important;
} */
.calender-trigger label {
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.form-control[readonly] {
    border: none;
    background: #f4f4f412;
    font-size: 12px;
}

#datetimeInput {
    padding: 0;
}

#datetimeInput::placeholder {
    font-size: 12px;
}

#datetimeInput:tit {
    font-size: 12px;
}

/* calender express */
.datepicker-container {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    /* width: 400px; */
}

.flatpickr-calendar {
    font-family: Arial, sans-serif;
}

.flatpickr-day {
    position: relative;
    line-height: 27px;
    border: none !important;
    margin: 3px 0;
    border-radius: 5px;
    padding: 3px;
}

.flatpickr-day.custom-note {
    border: 1px solid #000;
    border-radius: 4px;
    text-align: left;
}

.flatpickr-day.custom-note::after {
    content: attr(data-note);
    position: absolute;
    bottom: -6px;
    left: 65%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #000;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #c80000;
    color: #000;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    background: #c80000;
    border-radius: 50%;
    /* height: 20px; */
    color: #fff;
    fill: #fff;
    /* width: 20px; */
    position: relative;
    display: flex;
}

.flatpickr-current-month {
    width: 100%;
    left: 2.5%;
    color: #c80000;
    font-size: 132%;
}

.flatpickr-calendar {
    padding: 20px;
    width: 357.875px;
    /* top: 22px !important; */
    z-index: 10000000 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #fff;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    margin: 0;
}

.flatpickr-input[readonly] {
    width: 100%;
    border: none;
    font-size: 12px;
    color: rgba(18, 18, 18, 0.93);
    background: none;
}

.flatpickr-input[readonly]::placeholder {
    font-size: 12px;
    font-family: Roboto;
    color: rgba(18, 18, 18, 0.93);
    text-decoration-line: underline;
}

/* .flatpickr-calendar.animate.open{
    top: 100px;
} */
.flatpickr-calendar {
    top: 25px !important;
    right: auto !important;
    left: -240px !important;
    bottom: auto !important;
    margin: 0;
    position: absolute !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: rgba(57, 57, 57, 0.3) !important;
}

.cart-btn-container {
    width: 70%;
}

.cart-btn {
    padding: 22px 60px;
    background: var(--prime-red);
    color: white;
    border-radius: 4px;
    /* width: 70%; */
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    text-wrap: nowrap;
    display: flex;
    text-transform: uppercase;
}

.cart-btn:hover {
    /* padding: 0px 60px; */
    background: var(--prime-red);
    color: white;
    /* border-radius: 4px; */
    /* width: 70%; */
}

.share-btn {
    border-radius: 4px;
    border: 1px solid rgba(51, 51, 51, 0.20);
    padding: 5px 13px;
    text-align: center;
    display: flex;
    align-items: center;
    font-weight: 600;
    gap: 5px;
}

.share-btn:hover {
    border: 1px solid rgba(51, 51, 51, 0.20);
}

.search-ques input {
    background: url('https://ace.mazayasolutions.dev/theme/images/searchbar.svg') no-repeat right;
    border-radius: 6px;
    background: rgba(18, 18, 18, 0.14);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05) inset;
    border: none;
    width: 100%;
    padding: 8px;
}

/* Hide the image when the 'hide-icon' class is added */
.search-ques img.hide-icon {
    display: none;
}

.questions-container {
    display: flex;
    background: #F0F0F0;
    padding: 20px 35px;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    width: 100%;
}

.questions-container p {
    color: #000 !important;
    font-family: Roboto;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 600 !important;
    margin: 0;
}

.search-ques {
    position: relative;
}

.search-ques img {
    position: absolute;
    right: 3%;
    top: 20%;
}

.ques-sign {
    background: #6E6E6E;
    border-radius: 50%;
    padding: 1px 7px;
    color: #fff;
    width: fit-content;
    color: #FFF;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    height: fit-content;
    margin-right: 5px;
    -webkit-text-fill-color: #fff;
}

.answer-container {
    background: #F0F0F0;
    padding: 20px;
}

.answer-container p {
    color: #000 !important;
    font-family: Roboto;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400;
}

.ans-title {
    background: #fff;
    color: #000;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    width: fit-content;
    padding: 20px;
    margin-bottom: 20px;
}

.ans-likes-container button {
    border: 0.1px solid #000;
    background: #fff;
    width: fit-content;
    display: flex;
    align-items: center;
    padding: 5px;
    gap: 5px;
}

.ans-likes-container p {
    color: #666 !important;
    font-family: Roboto;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

.question p {
    color: #000 !important;
    font-family: Roboto;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400;
    margin-top: 3px;
}

.ans-likes-container {
    display: flex;
}

.ques-ans {
    width: 70%;
    margin: 20px auto;
}

.product-card {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    /* max-width: 400px; */
    margin: auto;
    margin-bottom: 20px;
    position: relative;
    height: max-content;
}

.product-card h3 {
    color: rgba(18, 18, 18, 0.93);
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
}

.product-card h3 span {
    color: rgba(51, 51, 51, 0.97);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.product-card p {
    color: rgba(18, 18, 18, 0.93);

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

#dots {
    display: none;
}

/* .expanded{
    height: 220px;
} */
.show-gradient.expanded {
    max-height: max-content;
    -webkit-text-fill-color: rgba(34, 33, 33, 0.93);
    -webkit-mask-image: linear-gradient(to bottom, #000 100%, transparent);
    mask-image: linear-gradient(to bottom, #000 100%, transparent);
}

.show-gradient {
    max-height: 70px;
    overflow: hidden;
    background: -webkit-linear-gradient(90deg, #fff 0%, rgba(18, 18, 18, 0.93) 78.65%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 30px;
}

.show-gradient ul li::before {
    content: '•';
    /* Add a bullet */
    font-size: 1.2em;
    /* Adjust the size if needed */
    margin-right: 10px;
    /* Space between bullet and text */
}

/* .show-gradient img{
    width: 100px;
} */
.img-gradient {
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent);
    mask-image: linear-gradient(to bottom, #000 50%, transparent);
}

.gradient {
    background: linear-gradient(rgb(197 197 197 / 3%) 0%, rgb(241 241 241 / 68%) 28.5%, rgb(47 3 3 / 0%) 100%);
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 100%;
    padding: 20px;
    /* height: 50%; */
}

.gradient ul li {
    color: rgba(18, 18, 18, 0.93);
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.toggle-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    /* background: white; */
    color: #D40029;
    font-size: 14px;
    font-style: normal;
    /* border-radius: 10px; */
    /* bottom: 0;
    position: absolute; */
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    margin: 20px 0;
    gap: 5px;
}

.toggle-btn:hover {
    color: #D40029;
    text-decoration: none;
}

.tabs-scroll a:hover {
    text-decoration: none;
}

/* .fa-solid {
    margin-left: 8px;
} */
.dots,
.more {
    display: inline;
}

.more {
    display: none;
}

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

.more {
    display: none;
}

/* height: 100%; */
.middle {
    margin-top: 10px;
    float: left;
    width: 70%;
}

/* Place text to the right */
.right {
    text-align: right;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The bar container */
.bar-container {
    width: 100%;
    /* background-color: #f1f1f1; */
    text-align: center;
    color: white;
}

/* Individual bars */
.bar-5 {
    height: 36px;
    background-color: var(--prime-red);
}

.bar-4 {
    height: 36px;
    background-color: var(--prime-red);
}

.bar-3 {
    height: 36px;
    background-color: var(--prime-red);
}

.bar-2 {
    height: 36px;
    background-color: var(--prime-red);
}

.bar-1 {
    height: 36px;
    background-color: var(--prime-red);
}

/* .rate-container{
    height: 400px;
} */
.review-btn {
    color: var(--prime-red);
    border: 1px solid var(--prime-red);
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    padding: 14px 35px;
    height: fit-content;
    display: block;
    background: #fff;
}

.review-btn:hover {
    color: var(--prime-red);
    text-decoration: none;
}

.rate-result p {
    display: inline;
    color: #333;

    font-family: Roboto;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
}

.stars-rating {
    text-align: right;
}

.stars-rating i {
    font-size: 10px !important;
}

.rate-result p:first-of-type {
    color: rgba(18, 18, 18, 0.93);

    font-family: Roboto;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
}

.scroll-header {
    display: none;
    width: 100%;
    background: white;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: top 0.3s;
}

.tabs-scroll {
    display: flex;
    gap: 10%;
    border-top: 1px solid #BFBFBF;
    margin-top: 5px;
    padding-top: 20px;
}

.tabs-scroll a {
    color: rgba(18, 18, 18, 0.93);
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

.tabs-scroll a span {
    color: #333;
    text-align: center;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.tabs-scroll a.active {
    border-bottom: 2px solid var(--prime-red);
    /* Highlight active link */
}

.tabs-scroll .ratings i {
    font-size: 12px !important;
}

/* .scroll-img{
    width: 12vw;
} */
.scroll-img img {
    max-width: 241px;
    height: 158px;
}

.scroll-text p:first-of-type {
    color: rgba(18, 18, 18, 0.93);
    font-size: 20px;
    font-weight: 600;
}

.scroll-text p:last-of-type {
    color: #333;
    font-size: 14px;
    font-weight: 400;
}

.scroll-text span {
    text-decoration: underline;
}

.scroll-price {
    text-wrap: nowrap;
}

.scroll-price div:first-of-type {
    color: rgba(18, 18, 18, 0.93);
    font-size: 14px;
    font-weight: 600;
}

.scroll-price .oldprice {
    color: #333;
    font-size: 12px;
    font-weight: 400;
}

.scroll-header .cart-btn-container {
    width: 80%;
}

.three-box-container p {
    color: rgba(18, 18, 18, 0.93);
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    /* margin: 0; */
}

.three-box-container p::first-letter {
    text-transform: capitalize;
}

.three-box-container a::first-letter {
    text-transform: capitalize;
}

.three-box-container a {
    color: rgba(18, 18, 18, 0.93);
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline !important;
}

p.box-title {
    color: rgba(18, 18, 18, 0.93);
    font-size: 12px;
    font-weight: 600;
    /* margin: 0; */
    text-transform: capitalize;
}

.cart-number {
    position: relative;
    max-width: 33%;
}

.cart-number .form-select {
    padding: .375rem 0.25rem .375rem .75rem;
}

.cart-number input {
    height: 47px;
    max-width: 70px;
}

.cart-number select {
    border: 1px solid #BFBFBF;
}

/* Three column layout */
.side {
    float: left;
    width: 15%;
    margin-top: 10px;
    color: #333;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.middle {
    margin-top: 10px;
    float: left;
    width: 70%;
}

/* Place text to the right */
.right {
    text-align: right;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The bar container */
.bar-container {
    width: 100%;
    background-color: #f1f1f1;
    text-align: center;
    color: white;
}

.detail_shop {
    color: #333;
    font-size: 14px;
    font-weight: 400;
}

.detail_shop a {
    color: #333;
    font-size: 14px;
    font-weight: 400;
}

.item_no {
    color: rgba(18, 18, 18, 0.66);
    font-size: 14px;
    font-weight: 400;
}

.ratevalue2 {
    color: #333;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none !important;
}

.slidder_prod_detail .prev,
.slidder_prod_detail .next {
    width: 56px;
    height: 56px;
    background: #fff;
    z-index: 1;
}

.slidder_prod_detail .prev,
.slidder_prod_detail .next:hover {
    color: #000;
    text-decoration: none;
}

.slidder_prod_detail {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
}

.slidder_prod_detail div {
    height: 25vw;
    width: 100%;
    text-align: center;
}

/* Hide the images by default */
.mySlides {
    display: none;
    padding: 50px;
}

.mySlides.active {
    display: block;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
    cursor: pointer;
}

.next-product {
    position: absolute;
    right: 0;
}

.prev-product {
    position: absolute;
    left: 0;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    width: 60px;
    height: 45px;
    color: #333;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 2px solid #333;
    border-radius: 50%;
    user-select: none;
    -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
}

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

.slid_prod_detail_content>div {
    border: 3px solid rgb(202, 202, 202);
    padding: 15px 4px;
    /* height: 50px; */
    border-radius: 7px;
    width: 100px;
    position: relative;
}

.slid_prod_detail_content>div:hover {
    border: 3px solid #D40029;
}

.thumbnail-wrapper {
    position: relative;
    margin: 0 5px;
}

.thumbnail {
    /* width: 80px;
    height: 60px; */
    cursor: pointer;
}

.thumbnail.active .thumbnail-wrapper {
    border: 3px solid #D40029;
}

.slid_prod_detail_content img {
    width: 86px;
    height: 60px;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Container for image text */
.caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}



/* Add a transparency effect for thumnbail images */
.demo {
    opacity: 0.6;
}

.active,
.demo:hover {
    opacity: 1;
}

.productTitle {
    color: #333;
    font-size: 30px;
    font-weight: 400;
}

.filterLabel {
    color: #333;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

.filterdiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 35px 0px;
}

.productcheck_label {
    color: #131313;
    font-size: 16px;
    font-weight: 400;
}

.productcheck_label span {
    color: #121212;
    font-size: 14px;
    font-weight: 400;
    text-decoration-line: underline;
}

.form-check-product .form-check-input[type=checkbox] {
    border-radius: .5em;
}

.products .mySwiper,
.productCategory>div {
    border: 2px solid rgb(202, 202, 202);
    padding: 20px;
}

.productsection_title {
    color: #333 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    text-align: start;
}

.category-stars .stars-rating i {
    font-size: 14px !important;
}

.topcate-container {
    width: 100%;
    height: 100%;
    overflow: clip;
}

.productCatergoryimg {
    height: 100px;
    width: 100%;
}

.productCategory {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.productCategory span {
    color: #000;
}

.productsaccordion {
    border-bottom: 2px solid rgb(211, 210, 210) !important;
}

.assideProduct {
    width: 23%;
    /* max-height: 588px; */
    overflow-y: auto;
    margin-bottom: 30px;
    height: calc(100vh - 200px);
    position: sticky;
    bottom: auto;
    top: 200px;
}

.products {
    width: 73%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.product_card>.recitem-content {
    padding: 0px !important;
}

.product_card>.item-img {
    padding: 10px 20px;
}

.no_show {
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
}

/* cart page */
.store-border {
    border: 1px solid var(--prime-red) !important;
    background-color: var(--prime-red) !important;
    color: #fff !important;
}

.cart-title {
    margin-bottom: 100px;
}

.cart-title h5 {
    color: rgba(18, 18, 18, 0.93);
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
}

.cart-title p {
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    margin-right: 15px;
}

.cart-title a {
    color: #D40029;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    text-decoration-line: underline;
}

.cart-title a i {
    margin-left: 10px;
}

.cart-title a span:first-of-type {
    border-right: 1px solid var(--prime-red);
    /* margin-right: 5px; */
    padding-right: 5px;
    text-decoration: underline;
}

.cart-title a span:last-of-type {
    padding-left: 5px;
    text-decoration: underline;
}

.wish-shopping a {
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

/* .cart-divider{
    background: #BFBFBF;
    height: 1px;
    margin: 1rem 0;
} */
.hidden-location {
    display: none;
}

.show-location {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.toggleDiv a {
    color: #515151;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    background: #FFF;
    padding: 8px 16px;
}

.cart-box-title h6 {
    color: #333;

    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}

.cart-products {
    /* border-bottom: 1px solid #BFBFBF; */
    height: fit-content;
    /* padding-bottom: 1rem ; */
}

.cart-products a i {
    color: #a1a1a1;
}

.cart-products img {
    max-width: 122px;
    height: 80px;
    margin-right: 15px;
}

.cart-products p,
.cart-getit p {
    color: #333;

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    /* display: inline; */
    margin: 0;
}

.cart-getit a {
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    text-decoration-line: underline;
}

p.cart-store-title {
    font-size: 18px;
    margin-top: 10px;
}

p.item-text {
    color: #333;

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.change-store {
    text-align: end;
}

.pickup-radio {
    background: #D9D9D9;
    width: 20%;
    text-align: center;
}

/* Style for the radio button */
input[type="radio"] {
    appearance: none;
    width: 21px;
    height: 21px;
    border: 1px solid #7b7b7b;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    /* margin-top: 25%; */
}

/* Style for the radio button when checked */
input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #D40029;
    /* Change this to your desired color */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.check-left h6 {
    color: rgba(18, 18, 18, 0.93);

    font-family: RobotoSlab;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
}

.check-left img {
    width: 200px;
    height: 200px;
}

.check-left p {
    color: #333;

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

p.check-left-price {
    color: rgba(18, 18, 18, 0.93);

    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.check-left a {
    background: var(--prime-red);
    color: #fff;
    font-family: Roboto;
    font-size: 12px;
    padding: 8px 16px;
}

.reward-box {
    border-radius: 4px;
    border: 1px solid #D40029;
    padding: 15px;
    gap: 10%;
}

.reward-box img {
    width: 163px;
    height: 52px;
}

.reward-box a {
    color: #D40029;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-decoration-line: underline;
    background: none;
}

.reward-box p {
    color: #D40029;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.reward-box ul {
    list-style-type: disc;
}

.reward-box ul li {
    color: #333;

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.check-right p {
    color: #333;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 5px;
}

/* Change border color when the radio button is checked */
input[type="radio"]:checked {
    border-color: #D40029;
    /* Change this to your desired color */
}

.pickup-conrainer {
    border-radius: 4px;
    border: 1px solid rgba(51, 51, 51, 0.20);
    margin-top: 15px;
}

.pickup-text {
    padding: 14px;
}

.pickup-text p:first-of-type {
    font-size: 16px;
}

.pickup-text span {
    color: #CEC288;
}

.pickup-title {
    margin-left: 10px;
}

.pick-home {
    border-radius: 4px;
    border: 1px solid #333;
    padding: 10px 14px;
    opacity: 0.3;
}

.price-cart p {
    color: #333;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    display: inline;
}

.price-cart select {
    display: inline;
}

p.price-title {
    display: block;
    font-size: 14px;
}

.price-cart a {
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-decoration-line: underline;
    display: block;
}

.wishlist a {
    color: #D40029;

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    text-decoration-line: underline;
}

.cart-divider-big {
    height: 9px;
    background: #EEE;
    margin: 2rem 0;
}

.out-stock p {
    color: #D40029;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.out-stock a {
    border-radius: 4px;
    background: #D40029;
    color: white;
    text-align: center;
    padding: 10px 26px;
    display: block;
    margin-top: 10px;
}

p.promo-text {
    color: rgba(18, 18, 18, 0.93);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
}

.check-right a {
    color: #D40029;

    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    text-decoration-line: underline;
}

p.order-text {
    color: rgba(18, 18, 18, 0.93);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
}

p.order-price {
    color: #333;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
}

a.learn-more {
    color: #2D9BD8;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-decoration-line: underline;
}

a.check-out-btn {
    border-radius: 4px;
    background: #D40029;
    color: #FFF;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    display: block;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
}

.check-right {
    width: 30%;
}

.check-left {
    width: 40%;
}

img.reward-right {
    max-width: 112px;
    height: 35px;
    margin-right: 10px;
}

.imgs-payment img {
    /* max-width: 90px; */
    height: 40px;
    margin-bottom: 5px;
}

/* guest or user page */
.check-title h2 {
    color: rgba(18, 18, 18, 0.93);
    font-size: 26px;
    font-weight: 600;
}

.g-u-main {
    width: 60%;
    margin: 2vw auto;
    min-height: calc(100vh - 350px);
}

.track-container {
    width: 75% !important;
    margin: 2vw auto;
}

.g-u-container {
    display: flex;
    justify-content: center;
    gap: 5%;
}

.g-u-container h6 {
    color: #333;
    display: flex;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    margin-top: 19px;
}

p.g-u-text {
    color: rgba(18, 18, 18, 0.74);
}

button.g-u-btn {
    border-radius: 3px;
    background: #D40029;
    color: #FFF;
    border: none;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    padding: 15px 26px;
}

a.g-u-btn {
    border-radius: 3px;
    background: #D40029;
    color: #FFF;

    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    padding: 15px 26px;
}

button.g-u-btn:hover {
    background: #ff002f;
}

a.g-u-forget {
    color: #333;
}

.g-u-show {
    color: #333;
    text-transform: uppercase;
}

.form-control:focus {
    border-color: #333;
}

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

.siginform input::placeholder,
.checkout-box input::placeholder {
    color: #929090;

    font-size: 14px;
}

.checkout-phone {
    width: 70%;
}

.show-secure {
    display: none !important;
}

.iti--allow-dropdown input.iti__tel-input[type=tel] {
    padding-left: 90px !important;
}

/* guset checkout */
.check-radio input {
    margin-top: 19px;
}

.address-text p {
    margin-bottom: 7px !important;
}

.ship-modal p {
    color: rgba(18, 18, 18, 0.67);
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.ship-modal-title {
    color: #333;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
}

.ship-modal-header {
    border-bottom: 0;
    padding: 0;
}

.ship-modal {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ship-modal-main {
    padding: 30px;
}

.points-count {
    border-radius: 4px;
    opacity: var(--sds-size-stroke-border);
    background: #FFD8E0;
    padding: 5px 15px;
}

.points-count p {
    color: #333;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.points-count span {
    opacity: var(--sds-size-stroke-border);
    color: #D40029;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    margin: 0 !important;
}

.redeem-points {
    gap: 10px;
}

.redeem-points p {
    color: #333 !important;
    font-family: Roboto;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 600 !important;
}

.redbtn {
    color: #FFF;

    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    border-radius: 4px;
    opacity: var(--sds-size-stroke-border);
    background: #D40029;
    border: 0;
    padding: 5px 10px;
    text-wrap: nowrap;
}

.checkout-box {
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 12px;
}

.checkout-box p,
.track-order p {
    color: rgba(18, 18, 18, 0.74);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
    margin-left: 10px;
}

.delivery-box {
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.blue-warning {
    border-radius: 4px;
    background: #E6F2F9;
    padding: 10px;
}

.blue-warning a,
.blue-warning p {
    color: #0958B3;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.check-box-img {
    /* border-radius: 8px; */
    border: 1px solid rgb(202, 202, 202);
    padding: 20px 10px;
    width: 89px;
    height: 90px;
    position: relative;
    text-align: center;
}

.check-box-img:hover {
    border: 1px solid var(--prime-red);
}

.edit-cart-check a {
    color: #D40029;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

.check-box-num {
    position: absolute;
    right: -8px;
    top: -9%;
    background: #BFBFBF;
    color: #000;
    font-family: Roboto;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    border-radius: 50%;
    padding: 1px 5px;
    z-index: 1;
}

.secure span {
    color: #D40029;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.credit {
    border-radius: 4px;
    border: 0.5px solid #333;
    padding: 5px 10px;
    background: #FFF;
    position: relative;
}

.credit span {
    color: #333;

    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.check-radio-btn input[type="radio"]:checked {
    border-color: #000;
}

.check-radio-btn input[type="radio"]:checked::before {
    background-color: #000;
}

.check-radio-btn span {
    font-size: 14px;
}

.credit-small span,
.track-order span {
    color: #929090 !important;

    text-overflow: ellipsis;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.credit-small {
    margin-top: 5px;
    /* margin-bottom: 15px; */
    border: none;
    padding: 5px;
}

.credit-small input {
    padding: 2px;
}

.credit-small span {
    position: absolute;
    left: 15px;
    top: 10px;
}

button.place-btn {
    padding: 6px 26px;
    text-align: center;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    width: 40%;
    justify-content: center;
    border: none;
}

a.place-btn {
    padding: 6px 26px;
    text-align: center;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    width: 40%;
    justify-content: center;
    /* font-size: 12px; */
}

.place-order span,
.order-summary span {
    color: #333;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

/* .place-order h6{
    font-size: 24px;
} */
.order-summary {
    height: fit-content;
    position: sticky;
    top: 20px;
}

.order-summary p {
    color: #333;

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

.email-offers {
    margin: 15px 0;
}

button.track-btn {
    padding: 15px 0;
    border: 0;
    font-size: 16px;
}

.track-main {
    margin: 7vw auto;
}

/* track your order */
/* .hh-grayBox {
	background-color: #F8F8F8;
	margin-bottom: 20px;
	padding: 35px;
  margin-top: 20px;
} */
/* .pt45{padding-top:45px;} */
.order-tracking {
    text-align: center;
    width: 20%;
    position: relative;
    display: block;
}

.order-tracking .is-complete {
    display: block;
    position: relative;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    border: 0px solid #AFAFAF;
    background-color: #D9D9D9;
    /* margin: 0 auto; */
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
    z-index: 2;
}

.order-tracking span {
    margin-left: 10px;
}

.order-tracking .is-complete:after {
    display: block;
    position: absolute;
    content: '';
    height: 14px;
    width: 7px;
    top: -2px;
    bottom: 0;
    left: 5px;
    margin: auto 0;
    border: 0px solid #AFAFAF;
    border-width: 0px 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.order-tracking.completed .is-complete {
    border-color: #2FC835;
    border-width: 0px;
    background-color: #2FC835;
}

.order-tracking.completed .is-complete:after {
    border-color: #fff;
    border-width: 0px 3px 3px 0;
    width: 7px;
    left: 11px;
    opacity: 1;
}

.order-tracking p {
    /* color: #A4A4A4; */
    font-size: 16px;
    margin-top: 8px;
    margin-bottom: 0;
    line-height: 20px;
    font-family: Roboto;
    font-weight: 500;
    text-align: start;
    font-weight: bold;
}

.order-tracking p span {
    font-size: 14px;
}

.order-tracking.completed p {
    color: #000;
}

.order-tracking::before {
    content: '';
    display: block;
    height: 9px;
    width: 100%;
    background-color: #D9D9D9;
    top: 13px;
    position: absolute;
    left: calc(-100% + 20px);
    z-index: 0;
}

.order-tracking:first-child:before {
    display: none;
}

.order-tracking.completed:before {
    background-color: #2FC835;
}

.order-color p {
    color: #2FC835 !important;
}

.order-tracking-title {
    display: flex;
    flex-direction: column;
}

.order-tracking-title a {
    width: fit-content;
    align-self: end;
}

.order-tracking-details p {
    color: #4F4F4F;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    margin: 0;
    display: flex;
}

.order-tracking-details p span {
    color: #D40029;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    margin-right: 5px;
}

.track-your-order,
.order-tracking-details {
    padding-top: 0 !important;
    padding-bottom: 1.5rem;
}

.track-your-order h6 {
    color: #D40029;

    font-family: RobotoSlab;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
}

.border-botttom-order {
    border-bottom: 1px solid #BFBFBF;
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.track-sign {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.ship-text p {
    color: #000;
    text-align: center;
    font-family: RobotoSlab;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.ship-text-last p {
    color: #333;

    font-family: RobotoSlab;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.track-your-order,
.order-tracking-details {
    border-radius: 8px;
}

.order-confirm p {
    color: rgba(31, 196, 38, 0.93);

    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
}

.order-confirm img {
    width: 33px;
    height: 31px;
    margin-right: 10px;
}

.coupon {
    content: "";
    clear: both;
    display: table;
    position: relative;
    display: flex;
}

.coupon select {
    position: absolute;
    top: 26%;
    left: 1%;
    border: 0;
    font-size: 12px;
    color: #333;
}

.guest_loyalty {
    padding-left: 55px !important;
}

.coupon input {
    padding: 5px;
    font-size: 16px;
    border: 0.5px solid #333;
    /* float: left; */
    /* width: 70%; */
    border-radius: 4px;
    border-top-right-radius: 0%;
    border-bottom-right-radius: 0%;
}

.coupon-input,
#email-container {
    float: left;
    width: 70%;
}

.coupon a {
    float: left;
    width: 30%;
    padding: 6px;
    background: var(--prime-red);
    color: white !important;
    font-size: 16px;
    /* border: 1px solid grey;
    border-left: none; */
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
    border-top-left-radius: 0%;
    border-bottom-left-radius: 0%;
    height: fit-content;
}

.earn-warning p {
    color: var(--prime-red) !important;
}

.earn-warning img {
    margin-right: 7px;
}

.with-copon p {
    font-weight: 500;
}

.with-copon-border {
    border-bottom: 1px solid #BFBFBF;
    padding-bottom: 12px;
}

.loyality-container p {
    margin-left: 0;
    color: #333;
}

.loyality-container p span {
    margin: 0px 10px;
}

/* shop comparison */
.gradient-row td {
    position: relative;
}

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

.remove-btns a {
    color: #000;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    border-radius: 18px;
    border: 1px solid #000;
    padding: 5px 10px;
}

.remove-btns button {
    background: #000;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    padding: 2px 0px;
    width: 14px;
    height: 15px;
    line-height: 6px;
}

.comparison-table table td {
    border-right: 6px solid #EEEEEEEE;
    padding: 20px;
    width: 320px;
}

.comparison-table table tr {
    border-bottom: 6px solid #EEEEEEEE
        /* Apply bottom border to all rows */
}

.comparison-table table tr:nth-child(-n+4) {
    border-bottom: none;
    /* Remove bottom border for the first 4 rows */
}

.price-comparison {
    color: #000;

    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.reviews-text {
    color: #333;

    text-align: center;
    font-family: Roboto;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
}

.ship-home-text p:first-of-type {
    color: #333;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    margin: 0;
}

.ship-home-text p:last-of-type {
    color: #333;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.product-dets-row {
    text-align: center;
}

.comparison-table {
    overflow: auto;
}

.comparison-table thead {
    height: 30px;
}

.comparison-table thead a {
    cursor: pointer;
}

.tips-service h2 {
    text-align: left;
    font-size: 24px !important;
}

.reward-cover-container {
    /* margin-top: 193px; */
    margin-top: 235px;
    padding-right: 8vw;
    /* max-width: 1920px; */
    /* padding-right: 200px; */
    /* padding-left: 200px; */
    /* margin-left: auto;
    margin-right: auto; */
}

.service {
    color: #fff;
    /* font-family: Jf; */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 16.8px */
    text-transform: uppercase;
    padding: 0px 40px;
    background-color: transparent;
    position: relative;
    width: 100%;
    text-align: center;
    /* margin: auto; */
    margin-top: 30px;
}

.service::before {
    content: ' ';
    border: 1px solid #fff;
    position: absolute;
    width: 45%;
    top: 50%;
    right: 0px;
    transform: translate(0%, -50%);
}

.service::after {
    content: ' ';
    border: 1px solid #fff;
    position: absolute;
    width: 45%;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
}

.reward-join {
    background: #000;
    padding: 30px;
}

a.join-now {
    background: var(--prime-red);
    border: 1px solid var(--prime-red);
    color: #FFF;
    padding: 16px;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
}

a.joined {
    border: 1px solid #FFF;
    color: #FFF;
    padding: 16px;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
}

.reward-cover-text p {
    color: #000;
    font-family: RobotoSlab;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
}

.reward-join p {
    text-align: center;
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin-top: 30px;
}

.ase-reward-logo {
    margin-left: 25%;
}

.reward-circles div {
    display: flex;
    flex-direction: column;
}

.reward-circles {
    margin-bottom: 20px;
}

.reward-circles,
.reward-text {
    justify-content: center;
    gap: 8%;
}

.reward-text {
    margin: 0 13%;
}

.white-bg {
    background: #fff;
    border-radius: 50%;
    width: 112px;
    height: 112px;
    justify-content: center !important;
}

.reward-circles div {
    /* width: 12%;
    height: 112px; */
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.reward-text div {
    width: 25%;
    /* height: 112px; */
    display: flex;
    justify-content: center;
    align-items: start;
}

p.kwd {
    color: #000 !important;
    text-shadow: 2px 1px var(--prime-red);
    font-family: RobotoSlab !important;
    font-size: 30px !important;
    font-style: normal;
    font-weight: 800 !important;
    background: none;
    margin: 0;
}

.rewarding {
    background: var(--prime-red);
    text-align: center;
    /* width: 80%; */
    margin: 50px 8vw;
    padding: 40px;
}

.rewarding h3 {
    color: #FFF;
    font-family: RobotoSlab;
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
}

p.rewarding-sub {
    font-size: 19px;
    width: 60%;
    margin: 10px auto;
}

.rewarding p {
    color: #FFF;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.reward-mobile {
    position: relative;
    padding-left: 65px;
    height: 30vw;
}

.reward-mobile::before {
    content: "";
    height: 87%;
    width: 50%;
    display: block;
    background: #F6F6F6;
    position: absolute;
    bottom: 0;
    z-index: -1;
    left: 0;
    /* background: #F6F6F6;
    padding: 49px;
    padding-right: 0;
    position: relative;
    width: 22%;
    height: 299px;
    margin-right: 6%;
    text-align: center; */
}

.reward-mobile img {
    height: 100%;
    position: relative;
    bottom: 0;
}

.reward-social-container {
    margin: 100px 0;
}

.reward-social {
    height: 30vw;
}

.reward-star {
    background: url('https://ace.mazayasolutions.dev/theme/images/start-bg.png') center;
    background-size: 120% 120%;
    background-repeat: no-repeat;
    padding: 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* gap: 2%; */
}

.reward-star-container {
    background: #F6F6F6;
}

.reward-star h6 {
    color: #D40029;
    text-align: center;
    font-family: Roboto;
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
}

.reward-star p {
    color: #000;
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.reward-text-social {
    margin-right: 5%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.reward-text-social img {
    width: 55%;
}

.app-stores>img {
    width: 90%;
}

.reward-text-social p {
    color: #000;

    font-family: Roboto;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
}

.reward-text-social p span {
    font-weight: 600;
}

.app-stores {
    height: 20%;
    width: 50%;
    gap: 10px;
}

.membership-text {
    text-align: center;
    padding: 100px 50px;
    display: flex;
}

.red-stars-container {
    display: flex;
    flex-direction: column;
    justify-content: normal;
    align-items: baseline;
    gap: 15px;
}

.two-stars {
    display: flex;
    gap: 150px;
    align-items: self-start;
}

/* .two-stars img:first-child{
    margin-top: 20px;
} */
.one-star {
    width: 100%;
    text-align: end;
}

.one-star img {
    margin-right: 20%;
}

.membership-text-center {
    align-self: center;
    width: 60%;
}

.red-stars-container {
    width: 20%;
}

.membership-text h3 {
    color: #000;
    font-family: RobotoSlab;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
}

.membership-text p {
    color: #000;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
}

.head-membership a {
    color: #FFF;
    font-family: Roboto Slab;
    font-size: 33.6px;
    font-style: normal;
    font-weight: 500;
    background: var(--prime-red);
}

a.gold-btn {
    color: #FFF;
    font-family: Roboto Slab;
    font-size: 33.6px;
    font-style: normal;
    font-weight: 500;
    background: url('https://ace.mazayasolutions.dev/theme/images/gold-bg.png');
}

.head-membership {
    border-bottom: 1px solid #000;
}

.table-main-container {
    /* width: 75%; */
    margin: 0 8vw;
    margin-bottom: 50px;
}

/* .reward-table table{
    margin: 0 auto;
    text-align: center;
    border-collapse: separate;
    border-spacing: 5px 0;
    width: 65%;
}
.reward-table table td{
    padding: 20px;
}
.reward-table table tr td:nth-child(1){
    width: 60%;
    text-align: left;
    color: #000;
font-family: RobotoSlab;
font-size: 20px;
font-style: normal;
font-weight: 400;
padding: 0 20px !important;
}
.reward-table table tr:nth-child(odd) {
    background-color: #fff;
}

.reward-table table tr:nth-child(even) {
    background-color: #F7F7F7;
}
table tr:nth-child(odd) td:last-child {
    background-color: #FAF5EA;
} */

/* Style for the last td in even rows */
/* table tr:nth-child(even) td:last-child {
    background-color: #F6EBD9;
}
.reward-table table img{
    width: 30%;
    height: 30%;
} */
/* .shadow-rows{
    box-shadow: 10px 4px 40px 5px rgba(0, 0, 0, 0.25) inset;
} */
/* .reward-table table tr:nth-child(8){
    box-shadow: 10px 4px 40px 5px rgba(0, 0, 0, 0.25) inset;
} */
/* .styled-rows {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    background: #000 !important;
} */
.reward-table-container {
    display: table;
    width: 100%;
}

.reward-table-container div {
    display: table-cell;
    vertical-align: middle;
    border-collapse: separate;
    padding: 10px;
}

.reward-table-container div:first-child {
    width: 60%;
    text-align: left;
}

.odd .gold-star {
    background: #FAF5EA;
}

.even .gold-star {
    background: #F6EBD9;
}

.even .red-star,
.even .table-text {
    background: #F7F7F7;
}

/* .reward-table-main{
    width: 75%;
    margin: 0 auto;
} */
.table-text {
    color: #000;
    border-right: 7px solid white;
    font-family: RobotoSlab;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

.gold-star img,
.red-star img {
    width: 30%;
    height: 30%;
}

.shadow-table {
    border: 10px solid #fff;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
    box-shadow: 4 4px 40px rgba(0, 0, 0, 0.1) inset;
    position: relative;
}

.table-star {
    position: absolute;
    left: -105px;
    top: -30px;
}

.table-star p {
    position: absolute;
    top: 34%;
    font-size: 10px;
    color: #fff;
    margin: 6px;
    right: 21px;
    text-align: center;
    font-family: RobotoSlab;
    font-style: normal;
    font-weight: 500;
}

.table-star img {
    width: 130px;
    height: 130px;
}

.red-star {
    border-right: 7px solid white;
    width: 20%;
}

.gold-star {
    /* border-right: 7px solid white; */
    width: 20%;
}

.reward-join-section {
    /* background: url('images/black-star.png') no-repeat left;
    background-size: 100px 200px; */
    color: #fff;
    position: relative;
}

.reward-join-section img {
    position: absolute;
    /* bottom: 0; */
    /* height: 115%; */
    left: 0;
    width: 80%;
}

.reward-join-container {
    background: var(--prime-red);
    padding: 55px 0px;
    padding-right: 30px;
    position: relative;
}

.reward-join-section p {
    color: #FFF;
    z-index: 2;
    text-align: center;
    font-family: RobotoSlab;
    font-size: 38px;
    font-style: normal;
    font-weight: 800;
    margin: 5px;
    margin-top: 30px;
    width: 52%;
}

.center-join h3 {
    color: #FFF;

    text-align: center;
    font-family: RobotoSlab;
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
}

.center-join p {
    color: #FFF;
    font-family: Roboto;
    font-size: 19.2px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    width: 75%;
    margin: 0 auto;
}

.center-join a {
    color: #D40029;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    border-radius: 8px;
    background: #FFF;
    display: block;
    width: 30%;
    padding: 10px 20px;
    margin: 0 auto;
}

.center-join {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 20px;
}

.reward-terms {
    display: flex;
    flex-direction: column;
    margin: 5% 12%;
}

.reward-terms p {
    color: #000;

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.reward-terms span {
    text-decoration: underline;
}

.black-star-mobile {
    position: absolute;
    top: -76px;
    display: none;
}

.black-star-mobile p {
    position: absolute;
    color: #fff;
    left: 27%;
    top: 56px;
    color: #FFF;
    text-align: center;
    font-family: RobotoSlab;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
}

.benefit-text {
    width: 60%;
}

.benefit-text p {
    color: #000;
    font-family: RobotoSlab;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    margin-top: 20px;
}

.table-btns {
    width: 40%;
    gap: 7px;
}

.table-btns a {
    padding: 10px;
}

.table-btns p {
    color: #000;
    font-family: RobotoSlab;
    font-size: 22px;
    font-style: normal;
    text-align: center;
}

a.benefit-btn {
    color: #000;
    font-family: RobotoSlab;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Default image for desktop view */
/* #product-image {
    content: url('images/acerewards2021_logo_color_wTag 1.svg');
} */
#product-image-mob {
    display: none;
}

img.white-star {
    width: 60%;
}

.white-star-mobile {
    position: absolute;
    right: 0;
    top: -40px;
    display: none;
}

.white-star-sm img {
    width: 35px;
    height: 35px;
}

.black-star-sm img {
    width: 7px;
    height: 7px;
}

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

p.center-join-mobile {
    display: none;
}

/* reward details */
.white-shadow-card {
    border-radius: 10px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 70%;
    margin: 0 auto;
    padding: 25px;
    position: relative;
}

.white-shadow-card h6,
.reward-dets-title {
    color: #333;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    padding-left: 10px;
}

.text-lg {
    color: #515151;
    font-family: Roboto;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
}

.text-md {
    color: #515151;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
}

.text-sm {
    color: #515151;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.reward-dets-img {
    max-width: 400px;
    max-height: 250px;
}

.total-points {
    width: 30%;
}

.white-shadow-card tr {
    border-bottom: 1px solid #BFBFBF;
}

.white-shadow-card tr:last-child {
    border-bottom: none;
}

.white-shadow-card tr:first-child td {
    color: #333;

    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.white-shadow-card table {
    width: 85%;
    margin: 0 auto
}

.white-shadow-card td {
    padding: 30px 0px;
    font-weight: 400;
    color: #333;

    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
}

.reward-dets-title {
    width: 70%;
    margin: 0 auto;
    padding-left: 35px;
}

.reward-dets-stars {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
}

.reward-dets-stars img:first-child {
    width: 21.851px;
    height: 22.195px;
}

.reward-dets-stars img:last-child {
    width: 62.23px;
    height: 63.21px;
}

.reward-stars-bottom img:last-child {
    width: 21.851px;
    height: 22.195px;
}

.reward-stars-bottom img:first-child {
    width: 62.23px;
    height: 63.21px;
}

.reward-stars-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
}

/* WishList */
.main-wish-container {
    padding-top: 2vw;
}

.wish-list-cont h6 {
    color: rgba(25, 25, 25, 0.93);
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

.wish-list-cont a {
    color: #666;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.wish-list-cont a:hover {
    text-decoration: none;
}

.wish-list-cont li {
    padding: 6px 20px;
    margin: 0 !important;
}

.wish-list-cont li:hover {
    border-radius: 5px;
    background: #D9D9D9;
}

.wish-title h3 {
    color: rgba(18, 18, 18, 0.93);
    font-family: Roboto;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    padding: 10px;
}

.wish-title a {
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-decoration-line: underline;
}

.wish-cart-btn button {
    background: var(--prime-red);
    border: 0;
    color: #FFF;
    border-radius: 4px;
    padding: 10px 30px;
}

.wish-products {
    border-top: 1px solid #BFBFBF;
    padding: 30px;
    padding-right: 0;
}

.add-all-wish button {
    border: none;
    text-align: left;
    padding: 15px 20px;
    color: rgba(52, 52, 52, 0.93);
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 20px;
}

h6.watchlist {
    color: #333;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    padding: 10px;
}

.pro-wish-img {
    position: relative;
}

.not-ava-wish {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 90%;
    background: #919191B2;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.remove-wish {
    background: none;
    width: fit-content;
    border: none;
    padding: 0;
    color: #b1b0b0;
}

/* .wish-item{
    gap: 7%;
} */
.wish-item .price-cart,
.wish-item .wish-cart-btn {
    text-wrap: nowrap;
}

/* newsletter */
.newsletter-item {
    display: flex;
    margin-bottom: 50px;
}

.newsletter-item h2 {
    color: #000;
    font-family: Roboto;
    font-size: clamp(30px, 2vw, 24px);
    font-style: normal;
    font-weight: 600;
}

.newsletter-item p {
    color: #333;
    font-family: Roboto;
    font-size: clamp(12px, 2vw, 18px);
    font-style: normal;
    font-weight: 400;
}

.newsletter-img {
    width: 125vw;
    margin-right: 30px;
}

/* review page*/
.review-header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 30px;
    border-bottom: 1px solid #BFBFBF;
    background: #fff;
    z-index: 2;
}

.review-form {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* .review-form div,.review-form input, .review-form textarea{
    width: 100%;
} */
.review-form span {
    color: var(--prime-red);
}

.review-form label {
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.review-form input[type="text"],
.review-form input[type="email"],
.review-form textarea {
    width: 100%;
    padding: 5px;
}

.review-form input::placeholder,
.review-form textarea::placeholder {
    color: #979797;
    font-family: Roboto;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
}

.review-form p {
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

.review-form input[type="checkbox"]+label {
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.review-form input[type="checkbox"] {
    border: 1px solid;
    border-radius: 0;
}

#textcomment {
    color: #333;
    font-family: Roboto;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}

.policy-review p,
#agree {
    color: #666;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.review-form button {
    /* width: 25%; */
    font-size: 14px;
    font-weight: 400;
    border-radius: 0;
    padding: 10px 20px;
}

.review-stars i {
    color: var(--prime-red);
    font-size: 24px !important;
}

.review-stars span {
    margin: 5px;
}

.file-upload-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid black;
    padding: 10px;
}

.file-upload-button {
    background: var(--prime-red);
    padding: 8px 11px !important;
    cursor: pointer;
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    border: none;
}

.file-upload-button img {
    width: 25px;
    height: 25px;
}

.file-upload-input {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.file-upload-wrapper p {
    color: #666;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

/* reset password */
#passmessage {
    color: var(--prime-red);
    font-size: 12px;
}

.resetform {
    gap: 0;
}

.resetform div {
    gap: 0;
}

.resetform-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-reset {
    background: #12AA181A;
    padding: 20px;
    width: fit-content;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#successModal p {
    color: #12AA18;
    font-family: Roboto;
    font-size: 28.784px;
    font-style: normal;
    font-weight: 600;
}

/* chatbot */
.contact-chat-btn {
    position: fixed;
    bottom: 50px;
    right: 32px;
    cursor: pointer;
    border: 0px;
    z-index: 1234567;
    width: 55px;
    height: 55px;
    background: #D40029;
    box-shadow: 0px 3px 6px 0px rgba(212, 0, 41, 0.20);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chats-container {
    display: none;
}

.close-chats {
    /* font-size: 27px; */
    font-weight: 400;
    border-radius: 50%;
    /* height: 50px;
    width: 50px; */
    display: none;
    background: #fff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
    color: #000;
    font-size: 14px;
    font-style: normal;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    right: 32px;
    cursor: pointer;
    border: 0px;
    padding: 10px 15px;
    z-index: 1234567;
}

.whatsapp-btn {
    border-radius: 31px;
    background: #4CAF50;
    position: fixed;
    bottom: 132px;
    right: 32px;
    cursor: pointer;
    border: 0px;
    z-index: 1234567;
    padding: 10px 20px;
    width: 150px;
    height: 50px;
}

.serach_bot {
    border-radius: 31px;
    background: #D40029;
    position: fixed;
    bottom: 75px;
    right: 32px;
    cursor: pointer;
    border: 0px;
    z-index: 1234567;
    padding: 10px 20px;
    width: 150px;
    height: 50px;
}

.search_bot_modal {
    position: fixed;
    bottom: 18px;
    right: 29px;
    /* transform: translate(-50%,-50%); */
    border-radius: 12px;
    background: #F8F9FA;
    width: 25%;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    min-width: 300px;
    display: none;
    z-index: 9999999;
}

.search_bot_modal.active {
    display: block;
    /* Show the modal when active */
}

.modal_title {
    background-color: var(--prime-red);
    border-radius: 12px 12px 0px 0px;
    padding: 10px 15px;

}

.modal_title>div {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    display: flex;
}

.modal_title_text {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    color: #FFF;
    font-style: normal;
}

.modal_title_text>div:first-child {
    font-weight: 700;
    font-size: 16px;
}

.modal_title_text>div:last-child {
    font-weight: 400;
    font-size: 14px;
}

.searchbotimg {
    width: 28px;
    height: 28px;
}

.searchbotimgcard,
.responsebotimgcard {
    align-self: stretch;
    background-color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.responsebotimgcard {
    background-color: #F8F9FA !important;

}

.modal_content {
    position: relative;
    background-color: #F5F5F5;
    border-radius: 12px;
    /* margin: 0px 16px 24px 16px; */
    /* padding: 7px 7px 0px 7px; */
    display: flex;
    flex-direction: column;
    /* gap:12px; */
}

.modal_content_chat {
    max-height: 300px;
    overflow: auto;
    /* padding: 0px 0px 0px 10px; */
    margin-bottom: 5px;
}

.botResponse,
.botRequest {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.botResponse {
    align-items: start;
}

.botRequest {
    align-items: end;
}

.botResponse_content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 7px 0px 7px;
    width: 100%;
}

.responsebot_text,
.requestebot_text {
    /* padding: 10px 15px; */
    color: #061E34;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    max-width: 70%;

}

.responsebot_text {
    background: #E9E9EB;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    margin-bottom: 20px;
}

.responsebot_text div {
    padding: 10px;
}

.responsebot_text hr {
    margin: 0px;
}

.requestebot_text {
    background-color: var(--prime-red);
    color: #fff;
    border-radius: 8px 0px 8px 8px;
}

.botResponse_Date,
.botrequest_Date {
    color: #98A1AE;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin: auto;
}

.closeModal {
    /* font-size: 27px; */
    font-weight: 400;
    border-radius: 50%;
    /* height: 50px;
    width: 50px; */
    padding: 0px;
    /* display: none; */
    background: var(--prime-red);
    box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.30);
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    text-align: center;
    align-items: center;
    justify-content: center;
    /* position: fixed; */
    /* bottom: 50px;
    right: 32px; */
    cursor: pointer;
    border: 0px;
}

.chatbotinput {
    position: relative;
    border: none;
}

.loader {
    width: 26px;
    padding: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--prime-red);
    --_m:
        conic-gradient(#0000 10%, #000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}


.loaderparent {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    display: none;
}

#searchbot_button {
    /* background-color: var(--prime-red); */
    width: max-content !important;
    /* border-radius: 6px; */
    /* color: #fff; */
    /* padding:  5px 7px !important; */
    font-weight: 700;
    /* position: absolute; */
    /* transform: translate(-50%,-50%); */
    top: 50%;
    right: 0px;
    cursor: pointer;
    border: 0px;
    height: max-content !important;
    background: none;
}

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

.chatbot-img {
    align-self: flex-end;
}

.chat-text-sh {
    color: #000;
    font-family: Inter;
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
    border-radius: 15px 15px 15px 0px;
    background: #E9E9EB;
    padding: 10px 20px;
    margin: 10px;
}

#chatbot {
    display: flex;
    background-color: #fff;
    border-top: 2px solid #D40029;
    border-radius: 0px 0px 12px 12px;
    align-items: center;
}

.bot-auto a {
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.bot-auto a::first-letter {
    text-transform: uppercase;
}

.svg-color {
    fill: #D40029;
}

/* history page */
.history-dets p {
    color: #333;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    display: flex;
}

.history-dets p span {
    color: #D40029;
    font-weight: 600;
}

.history-head p {
    color: #333;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.history-quantity {
    color: #333;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    border-radius: 5px;
    border: 1px solid #333;
    width: fit-content;
    padding: 5px 12px;
    margin-left: 12px;
}

.history-card {
    border-radius: 10px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 30px;
    margin-bottom: 20px;
}

.history-btn {
    padding: 16px 30px !important;
    text-wrap: nowrap;
}

.green-money {
    color: #2FC835 !important;
}

.history-title {
    margin-bottom: 30px !important;
}

/* area field */
.custom-icon.dropdown .dropdown.icon {
    display: none;
}

.custom-icon.dropdown .menu:after {
    content: '\f0dd';
    /* Font Awesome unicode for caret-down icon */
    font-family: 'FontAwesome';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.ui.default.dropdown:not(.button)>.text,
.ui.dropdown:not(.button)>.default.text {
    color: rgba(115, 115, 115, .87) !important;
}

.ui.selection.dropdown.error {
    background-color: rgb(255, 230, 230);
    border: 2px solid red;
}

.all-cart-container {
    display: flex;
    align-items: stretch;
}

.all-cart-container>div {
    border-bottom: 1px solid #BFBFBF;
    padding-bottom: 20px;
}

/* knet transaction */
.print-btn {
    background: #D40029;
    border-radius: 5px;
    border: none;
    padding: 10px;
    height: fit-content;
    width: fit-content;
    align-self: end;
}

.print-btn img {
    width: 35px;
    height: 35px;
}

/* dynamic on mobile */
.titles-dynamic {
    font-size: 22px;
    text-align: center;
    padding: 10px;
    padding-bottom: 0;
    font-weight: 600
}

/* notification style */
.notification-menu {
    background-color: #fff;
    z-index: 1001;
    width: clamp(300px,35vw,500px);
    gap: 24px;
    padding: 0px;
    border-radius: 8px;
    border: 0px;
    overflow: auto;
    padding-inline: 2px;
    max-height: 400px;
    min-height: 200px;
}
.notify-header , .notify-list {
    padding: 24px;
}
.notify-list:not(:last-child) {
    border-bottom: 2px solid #dad6d6bd;
}
.notify-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 150%;
    margin-bottom: 0px;
}
.notify-msg-parent {
    text-align: start;
}
.notify_desc {
    font-size: 14px;
    font-weight: 500;
    line-height: 100%;
    margin-bottom: 0px;
}
.notify-title-number {
    background-color: var(--prime-red);
    color: #fff;
    font-size: 10px;
    border-radius: 50%;
    min-width: 20px;
    min-height: 20px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.message-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
}
.message-desc {
    color: #717171;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0px;
}
.not-read {
    background: #fdeeeed6;
    position: relative;
}
li.not-read:before {
    content: " ";
    position: absolute;
    left: 10px;
    top: 28px;
    background-color: var(--prime-red);
    width: 8px;
    height: 8px;
    padding-inline-end: 5px;
    border-radius: 50%;
}
/* end notification style */
[dir=rtl] .phone-input-container input[type="tel"] {
    padding-inline: 93px  50px !important;
}
.order-tracking div p {
    padding-inline: 4px !important;
    text-align: center;
}
[dir=rtl] .modal_sigin {
  left: 0px;
  right: unset;
}
[dir=rtl]  .notification-menu {
    left: 0 !important;
    right: auto !important;
}
[dir=rtl]  li.not-read:before {
   right: 10px;
   left: unset !important;
}
/* responsive */
@media only screen and (min-width: 1500px) and (max-width: 2200px) {
    .search_bot_modal {
        width: 22%;
    }
}

@media screen and (min-width:2000px) {

    /* .item-card {
        width: calc((100% - (var(--productsgap) * 4)) / 5);
    }
    .product_card {
        width: calc((100% - (var(--productsgap) * 3)) / 4);
    }
    .longitem-card {
        width: calc((100% - (var(--longproductsgap) * 3)) / 4);
     }
     .tipsitem-card {
        width: calc((100% - (var(--longproductsgap) * 4)) / 5);
     } */
    .bigadv_title,
    .itemtext span:nth-child(2),
    .bigmainadv_title,
    .itemtext,
    .itemtext2 {
        font-size: 1vw;
    }

    .item1,
    .item2,
    .item3 {
        max-height: 400px;
    }
}

@media screen and (min-width:4000px) {
    .item-card {
        width: calc((100% - (var(--productsgap) * 5)) / 6);
    }

    /* .product_card {
        width: calc((100% - (var(--productsgap) * 4)) / 5);
    } */
    .longitem-card {
        width: calc((100% - (var(--longproductsgap) * 4)) / 5);
    }

    .catitem-card {
        /* width: calc((100% - (var(--Catproductsgap) * 11)) / 12); */
    }

    .tipsitem-card {
        /* width: calc((100% - (var(--longproductsgap) * 5)) / 6); */
    }

}

@media screen and (width:991px) {

    .navbar-nav,
    .nav-item {
        height: max-content;
    }

}

@media screen and (max-width:1770px) {
    .allpage {
        padding: 2vw 6vw;
    }

    .navbar {
        padding: 0 6vw;
    }

    .location_head {
        padding: 15px 6vw;
    }

    .redhead {
        padding: 9px 6vw;
    }
}

@media screen and (max-width:1470px) {

    /* .all-nested-main{
        top: 30px;
    } */
    /* .product_card{
        min-width: 230px;
    } */
    .store-card-content {
        flex-wrap: wrap;
    }

    .map {
        width: 100%;
        margin-bottom: 10px;
    }

    .allpage {
        padding: 2vw 4vw;
    }

    .navbar {
        padding: 0 4vw;
    }

    .location_head {
        padding: 15px 4vw;
    }

    .redhead {
        padding: 9px 4vw;
    }

    .order-container {
        flex-direction: column;
        gap: 25px;
    }

    .order-container .siginform {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .scroll-text p:first-of-type {
        font-size: 14px;
    }

    .scroll-img img {
        /* width: 200px; */
        height: 120px;
    }

    .review-btn {
        padding: 14px;
    }

    .g-u-main {
        width: 70%;
    }

    .reward-star h6 {
        font-size: 26px;
    }

    .reward-star p {
        font-size: 14px;
        margin: 0;
    }

    .reward-join-section p {
        font-size: 30px;
    }

    .text-lg {
        font-size: 22px;
    }

    .text-md {
        font-size: 18px;
    }

    .text-sm {
        font-size: 12px;
    }

    .slidder_prod_detail div {
        height: 30vw;
    }

    .order-tracking p {
        font-size: 14px;
    }

    .cancel-ques {
        padding: 10px 45px !important;
    }

    .store-card-content {
        flex-direction: column;
    }

    .allpage {
        padding: 2vw 3vw;
    }

    .navbar {
        padding: 0 3vw;
    }

    .location_head {
        padding: 15px 3vw;
    }

    .redhead {
        padding: 9px 3vw;
    }
}

@media (max-width: 768px) {

    .scroll-nav,
    .navbar {
        display: block;
        /* Ensure the navbar is visible on mobile */
    }

    .scroll-header {
        display: none;
        /* Initially hidden on mobile too */
    }
}

@media screen and (max-width:991px) {

    .navbar-nav,
    .nav-item {
        height: max-content;
    }

    .deliver {
        width: calc((100% - (20px * 1)) / 2);
    }

    .aside-section {
        width: 100%;
        display: flex;
        align-items: flex-start;
    }

    .aside-section-contact {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .main-content {
        justify-content: center;
        max-width: 90%;
    }

    .aside-list-container ul {
        padding: 0;
    }

    .a-z {
        flex-wrap: wrap;
    }

    .img-contact {
        display: none;
    }

    .cards-container {
        width: 100%;
    }

    .contact-content-container {
        padding: 5vw !important;
    }

    .store-container {
        width: 75%;
    }

    .category-card-row {
        flex-direction: column;
    }

    .brand-img-row {
        flex-direction: column;
        gap: 1vw;
    }

    .brand-imgs-container {
        grid-template-columns: 1fr;
    }

    .img-contain-category {
        height: 35vw;
    }

    .shop-category-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-img-self {
        height: 13vw;
    }

    .brand-img-bg {
        height: 22vw;
    }

    .description-sec-container {
        flex-direction: column;
    }

    .description-sec-video,
    .description-sec-text {
        width: 100%;
    }

    .allpage {
        margin-top: 145px;
    }

    .allpage,
    .navbar {
        padding: 2vW;
    }

    .location_head,
    .redhead {
        display: none;
    }

    .mobile-icon {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
    }

    .mobile-nav {
        justify-content: space-between !important;
    }

    .navbar-brand {
        margin-right: 0 !important;
    }

    .scroll-header {
        display: none;
        /* visibility: hidden; */
    }

    .reward-cover-container {
        padding: 0;
        margin-top: 100px;
    }

    .rewarding {
        margin: 0;
    }

    /* .reward-star h6{
        font-size: 20px;
    }
    .reward-star p{
    font-size: 12px;
    } */
    .two-stars img:first-child {
        display: none;
    }

    .red-stars-container {
        align-items: end;
    }

    .reward-join-section,
    .white-star-container {
        display: none !important;
    }

    .center-join {
        width: 100%;
    }

    .black-star-mobile {
        display: flex;
        align-items: center;
    }

    .center-join h3 {
        font-size: 35px;
    }

    .center-join p {
        font-size: 14px;
    }

    .center-join a {
        border-radius: 0;
    }

    .white-star-mobile {
        display: flex;
        flex-direction: column;
    }

    p.center-join-mobile {
        display: block;
    }

    p.join-text {
        display: none;
    }

    .reward-join-container {
        padding-right: 10px;
        padding-left: 10px;
    }

    .shop_list {
        align-self: self-start;
    }

    .cart-btn-container {
        width: 65%;
    }

    .main-wish-container {
        padding: 35px;
        margin-top: 2vw;
    }

    .newsletter-container {
        margin-top: 60px;
    }

    .newsletter-item {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .newsletter-img {
        width: 90vw;
        margin: 0;
    }

    .review-form {
        margin-top: 100px;
    }

    .order-tracking p {
        font-size: 12px;
    }

    .head-adv {
        max-height: 230px;
    }

    .mega-menu {
        display: none !important;
    }

    .mega-mobile {
        display: block !important;
    }

    .searchbar-container {
        width: 100%;
        margin-top: 8px;
    }

    .search-ques img {
        right: 6%;
    }

    .siginform-new {
        width: 65% !important;
    }

    .siginLogo_img>img {
        width: 120px;
        height: 66px;
    }

    .footer-logo-mobile {
        display: block;
    }

    .footerLogo {
        display: none;
    }

    /* .footerContent{
        width: 100%;
    } */
    .footerContent {
        width: 100%;
    }
}

@media screen and (max-width:950px) {

    /* .item-card {
        width: calc((100% - (var(--productsgap) * 2)) / 3);
    } */
    /* .longitem-card {
        width: calc((100% - (var(--longproductsgap) * 1)) / 2);
     } */
    /* .product_card {
       width: calc((100% - (var(--productsgap) * 1)) / 2);
   } */
    .catitem-card {
        /* width: calc((100% - (var(--Catproductsgap) * 5)) / 6); */
    }

    .tipsitem-card {
        /* width: calc((100% - (var(--longproductsgap) * 2)) / 3); */
    }

    .products-main-container {
        flex-direction: column;
    }

    .products-main-container aside,
    .products-main-container section {
        width: 100%;
    }

    .itemtext span:nth-child(2) {
        /* font-size: 22px; */
    }

    .TipsItem_cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* .grid-container{
        display: block;
    } */
    .grid-container2 {
        display: none;
    }

    .all-cart-container {
        flex-direction: column;
        border-radius: 8px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 10px;
    }

    .check-right,
    .check-left {
        width: 45%;
    }

    .cart-box-title {
        display: none !important;
    }

    .g-u-main {
        width: 75%;
    }

    .place-order-cont {
        flex-direction: column;
    }

    a.place-btn {
        width: 100%;
    }

    .reward-text-social p {
        font-size: 16px;
    }

    .reward-social {
        flex-wrap: wrap;
        height: max-content;
    }

    .reward-mobile {
        flex: 2 0 10%;
        height: 50vw;
    }

    .reward-text-social {
        flex: 2 0 40%;
        justify-content: center;
        margin: 0;
    }

    .app-stores>img {
        width: 40%;
    }

    .reward-star-container {
        flex: 1 0 100%;
    }

    .table-star {
        display: none;
    }

    .reward-star {
        background-size: 55% 120%;
    }

    .f-reward-dts,
    .l-reward-dts {
        flex-direction: column;
    }

    .reward-dets-img {
        align-self: center;
    }

    .slidder_prod_detail div {
        height: 35vw;
    }

    .tipsitem-card>.item-img {
        height: 17vw !important;
    }

    .history-head {
        display: none !important;
    }

    .history-item {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 25px;
    }

    .history-item .cart-products,
    .history-btn-container {
        width: 100%;
    }

    .history-quantity {
        margin-left: 0;
    }

    .history-btn-container {
        text-align: center !important;
    }

    .quan-container {
        text-align: -webkit-center;
    }

    .brand-logos {
        height: 9vw;
    }

    .assideProduct {
        position: static;
        height: 50vh;
    }
}

@media screen and (max-width:750px) {

    /* .item-card {
        width: calc((100% - (var(--productsgap) * 1)) / 2);
    } */
    .product_card {
        width: 100%;
    }

    .shopButton {
        padding: 0px 10px !important;
        font-size: 8px;
        height: 18px !important;
    }

    .bigadv_title {
        font-size: 16px;
        font-weight: 600;
    }

    .title-adv a,
    .title-adv span {
        font-size: 8px;
    }

    .bigadv_title>span {
        font-size: 8px;
    }

    .item-title,
    .longitem-title {
        font-size: 16px;
    }

    .itemlove-title {
        font-size: 12px;
    }

    .item-desc {
        font-size: 10px;
    }

    .catitem-card {
        /* width: calc((100% - (var(--Catproductsgap) * 2)) / 3); */
    }

    .tipsitem-card {
        /* width: calc((100% - (var(--longproductsgap) * 1)) / 2); */
    }

    .prod_det_summery,
    .prod_det_content {
        width: 100% !important;
    }

    .productdetails {
        gap: 30px;
    }

    .catItem_cards {
        /* grid-template-columns: repeat(4, 1fr); */
        /* padding: 15px; */
    }

    .rate-container-box {
        flex-direction: column;
        gap: 10px;
    }

    .review-btn {
        width: fit-content;
    }

    .review-btn-container {
        display: flex;
        justify-content: center;
    }

    .check-right {
        width: 100%;
        padding: 10px;
    }

    .check-left {
        display: none;
    }

    .reward-cover {
        display: none;
    }

    .reward-cover-text {
        width: 100%;
    }

    .ase-reward-logo {
        margin: 0;
    }

    #product-image {
        display: none;
    }

    #product-image-mob {
        display: block;
    }

    .reward-cover-container {
        margin-top: 0px;
    }

    .reward-circles {
        flex-direction: column;
    }

    .normal-cicle {
        flex-direction: row !important;
    }

    .reverse-circle {
        flex-direction: row-reverse !important;
        justify-content: end !important;
    }

    .table-main-container {
        margin-right: 0;
        margin-left: 0;
    }

    .slidder_prod_detail div {
        height: 350px;
    }

    .review-form {
        width: 100%;
        padding: 20px;
    }

    .summit-review {
        display: flex;
        justify-content: center;
    }

    .form-footer-container {
        flex-direction: column;
        gap: 25px;
    }

    .form-footer-container div {
        width: 100%;
    }

    .form-footer {
        width: 100%;
    }

    .buy-text {
        font-size: 18px;
    }

    .head-adv {
        flex-direction: column-reverse;
        max-height: 310px;
    }

    .title-adv,
    .imgadv {
        width: 100%;
    }

    .grid-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .item1 {
        width: 100%;
    }

    .item2,
    .item3 {
        width: calc(50% - 10px);
    }

    .itemtext span:nth-child(2) {
        font-size: 22px;
    }

    .itemtext,
    .itemtext2 {
        font-size: 12px;
    }

    .head-mainadv {
        display: none;
    }

    .ad-mobile {
        display: flex;
    }

    .ad-link {
        display: none;
    }

    .imgadv>.mainadvimg {
        position: absolute;
        bottom: 0;
        max-height: 17vw;
    }

    .bigmainadv_title {
        font-size: 20px;
    }

    .smalladv_title {
        font-size: 10px;
    }

    .smalladv_title>a {
        font-size: 8px;
    }

    .imgadv {
        height: 22vw;
    }

    .products_card {
        grid-template-columns: repeat(2, 1fr);
    }

    .buy_card {
        display: none;
    }

    .compare-acc-btn {
        height: 22px !important;
        top: -21px;
    }

    .footerDiv {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
}

@media screen and (max-width:738px) {
    .allpage {
        /* margin-top: 226px; */
        /* padding: 2vw 0vw; */
    }

    .location_head,
    .navbar {
        padding: 2vw;
    }

    .six-brands a,
    .seven-brands a {
        width: calc((100% / 3) - (40px / 3));
        margin-bottom: 15px;
    }

    .number-brands {
        gap: 0;
    }

    /* .brand-img{
        height: 20vw;
    } */
    .g-u-container {
        flex-direction: column;
        gap: 25px;
    }

    .siginform {
        width: 100%;
    }

    .siginform-new {
        width: 85% !important;
    }

    .show-secure {
        display: flex !important;
    }

    .hide-secure {
        display: none !important;
    }

    .place-order {
        display: none;
    }

    .wish-item {
        /* flex-direction: column; */
        padding: 30px;
    }

    .cart-products {
        margin-bottom: 20px;
        width: 100%;
    }

    .price-cart,
    .wish-cart-btn {
        width: fit-content;
    }

    .qt-price {
        width: auto;
    }

    .resetform {
        width: 70%;
    }

    .number-brands {
        padding: 25px;
    }

    .form-footer {
        width: 100%;
    }

    .reviews-product-container {
        gap: 26px;
        flex-direction: column;
    }

    .review-by {
        align-self: flex-start;
    }

    .purchase {
        font-size: 1.5vw;
    }
}

@media screen and (max-width:600px) {
    .group {
        /* flex-flow: row-reverse; */
        flex-wrap: wrap;

    }

    /* .group > div , .group > a {
       width: 100%;
    } */
    .head-membership a {
        font-size: 18px;
    }

    .table-btns p {
        font-size: 14px;
    }

    .center-join h3 {
        font-size: 25px;
    }

    .center-join p {
        font-size: 12px;
    }

    .reward-star {
        background-size: 100% 120%;
    }

    .load-review {
        margin: 0;
    }

    .cart-title {
        flex-direction: column;
    }

    .salecat {
        width: 100%;
    }

    /* .category-swiper{
        flex-wrap: wrap;
    } */
    .productCategory {
        width: 48%;
    }

    .deliver {
        flex-direction: column;
    }

    .deliver-Section {
        width: max-content;
        overflow: auto;
        flex-wrap: nowrap;
    }

    .deliver-Section-container {
        overflow-y: auto;
        width: auto;
    }

    .productTitle {
        font-size: 24px;
    }
}

@media screen and (max-width:529px) {

    .footerLogo {
        width: 50%;
    }

    .aside-section,
    .aside-section-contact {
        flex-direction: column;
    }

    /* .aside-section-contact{
        align-items: center;
    } */
    /* .aside-section{
        align-items: center;
    } */
    .hours p {
        white-space: wrap;
    }

    .all-points {
        flex-direction: column;
    }

    .total-points {
        width: 100%;
    }

    .white-shadow-card table {
        width: 100%;
    }

    .delivery-title {
        font-size: 18px;
    }

    .deliver-detail {
        font-size: 14px;
    }

    .tipsitem-card>.item-img {
        height: 25vw !important;
    }

    .buy-text {
        font-size: 16px;
    }

    .products_card {
        grid-template-columns: 1fr;
    }

    .cart-products {
        flex-direction: column;
        align-items: center;
    }

    .cart-products img {
        margin-bottom: 15px;
    }

    .section h2 {
        font-size: 26px !important;
    }

    .prod_det_content {
        padding: 17px 8px;
    }

    .compare-img {
        width: 45%;
        height: 132px;
    }

    .compare-imgs {
        flex-wrap: wrap;
        gap: 10%;
    }

    .footerContent {
        gap: 30px;
    }
}

@media screen and (max-width:500px) {

    .longitem-card,
    .item-card,
    .tipsitem-card {
        width: 100%;
    }

    .upperfooter {
        gap: 20px;
    }

    .search-ques img {
        right: 8%;
    }

    .white-shadow-card {
        width: 85%;
        overflow-x: auto;
    }

    .reward-stars-bottom img:first-child,
    .reward-dets-stars img:last-child {
        width: 35.23px;
        height: 62.21px;
    }

    .white-shadow-card h6,
    .reward-dets-title {
        font-size: 20px;
    }
    .track-sign {
        padding: 15px !important;
    }
}

/* Responsive layout - make the columns stack on top of each other instead of next to each other */
@media (max-width: 400px) {

    .side,
    .middle {
        width: 100%;
    }

    .right {
        display: none;
    }
}

@media (min-width: 200px) and (max-width: 500px) {
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* arabic
.rtl{
    direction: rtl;
}
.rtl .title-mainadv > img{
    transform: scale(-1,-1);
} */