@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

header.theme-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 100000;
    position: fixed; 
    box-shadow: 1px 1px 6px 1px #5353531c;
} 

.policyBox {
    margin-top: 110px;
    padding: 50px 0;
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

button.main-product-discount-btn.dark {
    background: black;
}

span.custNameAbbrev {
    width: 30px;
    height: 30px;
    display: flex;
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    background: var(--primary-color);
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

img.header-logo {
    max-width: 130px;
    cursor: pointer;
    max-height: 40px;
    width: auto;
}

.policyMain {
    margin-top: 30px;
}

h3.policyHeadText {
    font-size: 23px;
}

p.policyDate {
    font-size: 15px;
    color: #747474;
}

.policyBox {
color: black;    
}

.policyBox.dark {
color: white;    
}

.policyBox.dark p{
color: white;    
}

.policyBox.dark h1{
color: white;    
}

.policyBox.dark h2{
color: white;    
}

.policyBox.dark h3{
color: white;    
}

.policyBox.dark h4{
color: white;    
}

.policyBox.dark h5{
color: white;    
}

.policyBox.dark h6{
color: white;    
}

.policyBox.dark b{
color: white;    
}

.policyBox.dark span{
color: white;    
}

.policyBox.dark div{
color: white;    
}

.orderTable tbody tr:last-child {
    border-bottom: 0;
}


.orderTableContainer {
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(0,0,0,0.08);
    overflow-x: auto;
}

span.outOfStock {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: solid 1px var(--primary-color);
    color: var(--primary-color);
    gap: 7px;
    border-radius: 5px;
    cursor: not-allowed;
    font-size: 15px;
}

/* Table base styling */
.orderTable {
    width: 100%;
    border-collapse: collapse;
    font-family: "Inter", sans-serif;
}

.orderTable thead {
    background: #f6f8fa;
}

.orderTable thead th {
    padding: 14px 12px;
    font-size: 14px;
    text-align: left;
    font-weight: 600;
    color: #444;
    border-bottom: 1px solid #e2e8f0;
}

.orderTable thead th {
border-bottom: 1px solid #3e3e3e;    
}

.orderTable tbody tr {
    border-bottom: 1px solid #f1f1f1;
    transition: background 0.2s ease;
}

.orderTable tbody tr.dark {
border-bottom: 1px solid #464646;    
}

.orderTable tbody tr:hover {
    background: #f9fafb;
}

i.vewInvoice {
    font-size: 18px;
    color: #585858;
    cursor: pointer;
}

i.vewInvoice.dark {
    color: white;
}

.orderTable tbody tr.dark:nth-child(even) {
    background-color: #3e3e3e;
}

.orderTable td {
    padding: 12px;
    font-size: 14px;
    color: #333;
    min-width: 100px;
}

.orderTable td.prods {
min-width: 300px;
}

.orderTable tbody tr:nth-child(even) {
    background-color: #f7f7f7; /* Light gray background */
}

/* Status Badges */
.orderStatus {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.orderStatus.pending {
    background: #fff5cc;
    color: #b28704;
}

.orderStatus.processing {
    background: #fff5cc;
    color: #b28704;
}

.orderStatus.completed {
    background: #d1fadf;
    color: #0f8a3b;
}

.orderStatus.cancelled {
    background: #fde2e1;
    color: #b42318;
}


:root{
  --switch-width: 56px;
  --switch-height: 30px;
  --switch-radius: 999px;
  --track-bg: #e6e7ea;
  --track-bg-active: #4f46e5; /* active color */
  --ball-size: 24px;
  --transition-speed: 220ms;
  --text-color:#333;
  --gap: 10px;
}



.checkoutCheckboxLabel {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    gap: 5px;
}

/* hide original checkbox but keep accessibility */
.checkoutCheckboxLabel input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* circle box */
.deliveryCheckboxSpan {
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #b8b8b8;
  display: inline-block;
  transition: 0.2s;
  background: 0;
  position: relative;
}



/* checked state */
.checkoutCheckboxLabel input:checked + .deliveryCheckboxSpan {
  background: var(--primary-color);  /* nice purple, change to your theme */
  border-color: var(--primary-color);
}

/* checkmark (very simple) */
.deliveryCheckboxSpan::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--text-color);
  border-bottom: 2px solid var(--text-color);
  left: 4px;
  top: 5px;
  transform: rotate(-45deg);
  opacity: 0;
  transition: 0.2s;
}

/* show checkmark when checked */
.checkoutCheckboxLabel input:checked + .deliveryCheckboxSpan::after {
  opacity: 1;
}


.checkoutCheckboxLabel input:checked + .deliveryCheckboxSpan.dark {
    background: black;
    border-color: black;
}

label.checkoutCheckboxLabel.dark:hover {
    background: #282828;
}

.deliveryCheckboxSpan.dark::after {
 border-left: 2px solid var(--text-color);
  border-bottom: 2px solid var(--text-color);   
}







.pageNavigationDiv {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    gap: 20px;
}

button.navPageBtn {
    width: 35px;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 35px;
    padding: 0 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 19px;
    border: 0;
    background: var(--primary-color);
    color: var(--text-color);
    justify-content: center;
}

button.navPageBtn.prev {
    border: solid 2px var(--primary-color);
    color: var(--primary-color);
    background: 0;
}

button.navPageBtn.nex {
    border: solid 2px var(--primary-color);
    color: var(--text-color);
    background: var(--primary-color);
}

.navPageCountBox {
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 50px;
    background: #ececec;
}

span.navPageCount {
    border-radius: 50px;
    display: flex;
    height: 30px;
    width: 30px;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: #7c7c7c;
}

span.navPageCount.active {
    background: var(--primary-color);
    color: var(--text-color);
}


.campaign-slide-box {
    opacity: 0.8;             /* hidden by default */
    transition: opacity 1s; /* fade effect */
}

.campaign-slide-box.active {
    opacity: 1; 
    width: 420px;
    height: 230px;/* visible slide */
}


i.closeCamp {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 7px;
    border-radius: 50px;
    background: #ffffffa1;
    color: black;
    cursor: pointer;
}

i.closeCamp:hover {
background: white;   
}


.campaignPopupBox {
    width: calc(100% - 30px);
    max-width: 800px;
    position: relative;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 80%;
}

img.campPopupImg {
    width: 100%;
    height: 100%;
}

.track-order-progress-div {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
}

/* Line between first and last step */
.track-order-progress-div::before {
    content: "";
    position: absolute;
    top: 15px; /* aligns with the dots */
    left: 0;
    right: 0;
    height: 3px;
    background: #d1d5db;
    z-index: 1;

    /* shrink the line so it starts from center of first dot */
    width: calc(100% - 40px); 
    left: 50%;
    transform: translateX(-50%);
}


/* Dots */
.orderPoint {
width: 30px;
    height: 30px;
    border-radius: 50px;
    background: white;
    position: relative;
    border: solid #30e430 1px;
}

.track-order-products-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

/* Completed dot */
.order-step.completed .orderPoint {
    background: #4ade80;
}








.track-container {
    background: white;
    color: black;
    width: auto;
    max-width: 800px;
    padding: 35px 25px;
    border-radius: 28px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
}

img.track-order-product-img {
    width: 40px;
    border-radius: 10px;
}

.title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 25px;
}

/* Progress Bar */
.progress-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
}

.progress-line {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 3px;
    background: #4b5563;
    z-index: 1;
}

.step {
    text-align: center;
    width: 25%;
    z-index: 2;
}

.step p {
    margin-top: 10px;
    font-size: 13px;
    color: #9ca3af;
}

.circle {
    width: 16px;
    height: 16px;
    background: #374151;
    border-radius: 50%;
    margin: 0 auto;
}

.step.completed .circle {
    background: #fff;
}

.step.active .circle {
    background: #60a5fa;
}

.step.active p {
    color: #fff;
}

/* Order Card */
.order-card {
    background: #f1f1f1;
    padding: 22px;
    border-radius: 20px;
    margin-bottom: 25px;
}

.product {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
    gap: 10px;
}

.track-order-progress-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.order-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.order-step.completed .orderPoint::before {
  content: "✔";
  color: white;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.order-step.completed .orderPoint {
    background: #0ad40a;
}

.orderPoint {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background: white;
    position: relative;
}

.order-id {
font-size: 21px;
    opacity: 1;
    font-weight: 600;
}

.order-step p {
    font-size: 13px;
    font-weight: 500;
    color: #353535;
}

.orderIdBox {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 40px;
}

p.orderDate {
    font-size: 13px;
    color: #7b7b7b;
}

.product {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
}

.icon {
    font-size: 42px;
    margin-right: 15px;
}

.product-name {
    font-size: 18px;
    font-weight: 500;
}

.date {
    font-size: 13px;
    color: #494949;
    font-weight: 500;
}

.shipping {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.ship-label {
    color: #9ca3af;
    margin-bottom: 4px;
    font-size: 14px;
}

.ship-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Button */
.track-btn {
    width: 100%;
    padding: 14px 0;
    background: #1f2937;
    border: none;
    color: white;
    border-radius: 16px;
    font-size: 15px;
    cursor: pointer;
    transition: 0.2s;
}

.track-btn:hover {
    background: #374151;
}



p.main-product-stock-count.dark {
    color: white;
}

.productBody.dark {
    background: black;
}

h4.main-product-variation-title.dark {
    color: white;
}

.productBoardInner2.dark {
    background: #404040;
}

h2.main-product-price.dark {
    color: white;
}

h3.main-product-price.dark {
    color: white;
}

p.main-product-discounted-price.dark {
    color: #d8d8d8;
}

button.mobile-menu-cta-btn {
    width: 300px;
    height: 50px;
    font-size: 15px;
    font-weight: 600;
    border: 0;
    border-radius: 20px;
    background: var(--primary-color);
    color: var(--text-color);
}

button.mobile-menu-cta-btn.dark {
    background: #636363;
    color: white;
}

i.header-menu-icon.dark {
    color: white;
    border: solid 1px white;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  user-select: none;
}

.toggle-input {
  /* hide the native checkbox but keep it accessible */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

div.modal {
    width: 100%;
    height: 100%;
    background: #000000b8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000000;
    backdrop-filter: blur(1px);
}

button:hover {
opacity: 0.7;
cursor: pointer;
}

p.cart-variation {
    font-size: 15px;
    color: #595959;
}

h4.cart-item-price {
    color: black;
    font-size: 17px;
}

h4.cart-item-title {
    font-size: 17px;
    color: black;
}

h3.cartTitle {
    font-size: 21px;
    color: black;
}

img.cart-item-photo {
    width: 150px;
    border-radius: 10px;
}

.cartContainer {
    width: 500px;
    max-width: calc(95% - 40px);
    background: white;
    padding: 20px;
    border-radius: 20px;
    max-height: 80%;
    gap: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

button.cart-checkout-btn:hover {
    opacity: 0.8;
}

div.cart-container-main-data-board {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100% - 40px);
    justify-content: space-between;
}

.cart-item-box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

i.crossModal {
    padding: 10px;
    border-radius: 50px;
    background: #dbdbdb;
    color: black;
    cursor: pointer;
}

.cart-item-details-box {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    justify-content: space-between;
    width: 100%;
}

.urfd-posld {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.cart-action-div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

img.empty-cart-img {
    width: 70px;
    height: 70px;
}

p.cartItemQty {
    font-size: 16px;
    color: #000000;
    font-weight: 400;
}

i.deleteCartItem:hover {
    color: white;
    background: red;
}

span.cart-amount-span {
    width: 100%;
    display: flex
;
    justify-content: space-between;
    border-bottom: solid 1px #cbcbcb;
    border-top: solid 1px #e5e5e5;
    padding: 20px;
}

button.cart-checkout-btn {
    height: 45px;
    width: 250px;
    max-width: calc(90% - 20px);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    background: var(--primary-color);
    color: var(--text-color);
    }

i.crossModal:hover {
    background: var(--primary-color);
    color: var(--text-color);
}

img.cart-item-photo {
    width: 100px;
    border-radius: 10px;
    height: 100px;
    cursor: zoom-in;
}

span.cart-variation-span {
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
}

p.cart-variation::before {
    content: "•";
    margin-right: 6px;
    font-size: 1.2em;
    color: #000;
}

p.main-product-stock-count::before {
    content: "•";
    margin-right: 6px;
    font-size: 1.2em;
    color: green;
}

p.product-box-stock-count::before {
    content: "•";
    margin-right: 2px;
    font-size: 1.2em;
    color: #9f9f9f;
}

.loginInputBox {
    width: calc(100% - 10px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

label.loginEmail {
    color: #5f5f5f;
    font-size: 15px;
}

span.loginInputSpan {
    display: flex;
    gap: 10px;
    padding: 5px 10px;
    border: solid 1px #dadada;
    border-radius: 5px;
    align-items: center;
    width: calc(100% - 20px);
    height: 37px;
}

input:focus {
outline: 0;
}

input.input180 {
    width: 100%;
    height: calc(100% - 10px);
    border: 0;
    font-size: 15px;
    color: black;
    background: none;
}

span.loginInputSpan.dark {
    border: solid 2px white;
    color: white;
}

h4.forgotPassTxt.dark {
    color: white;
}

i.inputIcon.dark {
    color: white;
}

button.loginBtn.dark {
    background: white;
    color: black;
}

b.lnk.dark {
    color: white;
}

p.teussdd.dark {
    color: #d9d9d9;
}

.cartContainer.dark {
    background: #3b3b3b;
}

h3.cartTitle.dark {
    color: white;
}

i.crossModal.dark {
    color: black;
    background: white;
}

label.loginEmail.dark {
    color: white;
}

i.inputIcon {
    font-size: 19px;
    color: #888888;
}

span.forgot-pass-span {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

h4.forgotPassTxt {
    color: var(--primary-color);
    cursor: pointer;
    font-size: 15px;
}

.loginBtnDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}

button.loginBtn {
    height: 45px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    background: var(--primary-color);
    color: var(--text-color);
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.loginBtn:hover {
opacity: 0.7;    
}

p.teussdd {
    color: #989898;
    font-size: 15px;
}

.formBox {
    width: 80%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-height: 100%;
    overflow-y: scroll;
    min-width: 320px;
}

.cart-container-inner-data-board {
    height: calc(100% - 140px);
    overflow-y: scroll;
    display: flex
;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding-bottom: 10px;
}

span.checkoutBtnSpan {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.emptyCart {
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

p.empty-cart-text {
    color: #888888;
    font-size: 16px;
}

.cartC-container-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    padding-bottom: 10px;
    border-bottom: solid 1px #d7d7d7;
}
.toggle-label {
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--track-bg);
  display: inline-block;
  border-radius: var(--switch-radius);
  position: relative;
  transition: background var(--transition-speed) ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
  cursor: pointer;
}

/* the circular ball */
.toggle-ball {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: var(--ball-size);
  height: var(--ball-size);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(16,24,40,0.08);
  transition: transform var(--transition-speed) cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

/* when checked, move ball and change track color */
.toggle-input:checked + .toggle-label {
  background: var(--primary-color);
}

.toggle-input:checked + .toggle-label .toggle-ball {
  transform: translateY(-50%) translateX(calc(var(--switch-width) - var(--ball-size) - 8px));
}

/* optional focus styles for keyboard users */
.toggle-input:focus + .toggle-label {
  box-shadow: 0 0 0 4px rgba(79,70,229,0.12);
}

/* label text */
.toggle-text {
  color: var(--text-color);
  font-size: 14px;
  line-height: 1;
}

/* change the text depending on state using sibling selector */
.toggle-input:not(:checked) ~ .toggle-text { content: ""; }
.toggle-input:checked ~ .toggle-text { content: ""; }

/* If you'd like the text to say On/Off dynamically, use JS.
   Alternatively, pre-render two spans and toggle visibility with CSS:
*/
.toggle-text .on, .toggle-text .off { display: none; }
.toggle-input:checked ~ .toggle-text .on { display: inline; }
.toggle-input:not(:checked) ~ .toggle-text .off { display: inline; }





div.loader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000000000000;
    top: 0;
    left: 0;
    background: #ffffffd9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

span.toTop {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: var(--text-color);
    opacity: 0.7;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
}

span.toTop:hover {
opacity: 1;
}

i.rgth {
    color: #a1a1a1;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.containerLoader {
    width: 33px;
    height: 33px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


.containerLoaderMother {
width: 100%;
height: 200px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

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

.btnLoader {
    width: 15px;
    height: 15px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


.popup {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 18px;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1000000000000;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #error { background: #e74c3c; }
  #success { background: #2cce22; }
  .popup.showw { opacity: 1; }
  .popup.hide { opacity: 0; }
  

.preheader {
    width: 100%;
    height: 40px;
    background: var(--primary-color);
    display: flex;
    gap: 20px;
    color: var(--text-color);
}

span.product-features-span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

p.featuresPoints::before {
    content: "•";
    margin-right: 6px;
    font-size: 1.2em;
}

input.cart-qty-prod {
    height: 20px;
    font-size: 16px;
    padding: 0 7px;
    width: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: 0;
    font-weight: 600;
    color: black;
}

input.cart-qty-prod.dark {
color: white;    
}

p.noSimilarProd {
    color: #a5a5a5;
    font-size: 18px;
}

.delivery-region-option {
    width: calc(100% - 20px);
    display: flex;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
    align-items: center;
    border-bottom: solid 1px #ebebeb;
}

.delivery-region-option:last-child {
border-bottom: 0;    
}

button.selectLocationBtn {
    width: 100%;
    min-height: 45px;
    border: 0;
    border-radius: 5px;
    font-size: 16px;
    color: var(--text-color);
    background: var(--primary-color);
}

.delivery-loc-grp {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
}

span.artificialCheckBox {
    min-width: 19px;
    min-height: 19px;
    display: flex;
    border: solid 1px #c1c1c1;
    border-radius: 5px;
    position: relative;
}


.artificialCheckBox.active {
    border-color: var(--primary-color);
}

   .artificialCheckBox.active::after {
    content: "";
    width: 15px;
    height: 15px;
    background: var(--primary-color);
    border-radius: 5px;
    position: absolute;
    top: 2px;
    left: 2px;
}

button.selectLocationBtn:disabled {
    background: #cecece;
    cursor: not-allowed;
}

.delivery-region-option:hover {
 background: #f8f8f8;   
}

.delivery-region-option.active {
    background: #ebebeb;
}


span.delivery-region-option-span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    max-width: calc(100% - 80px);
}

h2.delivery-region-option-head {
    font-size: 15px;
    color: black;
}

p.delivery-region-option-description {
    color: #4a4a4a;
    font-size: 13px;
    font-weight: 500;
}

h4.delivery-region-price {
    font-size: 15px;
    color: black;
}

span.preheader-span {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    padding-left: 10px;
}

.collectionBoard {
    width: calc(100% - 60px);
    margin-top: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    gap: 40px
}

div.productsBoard {
    width: 100%;
}

.collection-filter-input {
    width: calc(100% - 40px);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    justify-content: flex-start;
}

button.collectSearchBtn {
    height: 55px;
    width: calc(100% - 30px);
    max-width: 250px;
    border: 0;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    background: var(--primary-color);
}

.header-action-span {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 20px;
}

.header-menu-span:hover .header-menu-dropdown {
  display: flex;
}

span.collectionSearchInputSpan {
    width: calc(100% - 20px);
    max-width: 350px;
    min-width: 350px;
    height: 50px;
    border: solid 1px #dcdcdc;
    border-radius: 5px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    justify-content: center;
}

.selectBoard {
    width: calc(100% - 20px);
    position: absolute;
    top: 55px;
    background: white;
    box-shadow: 1px 1px 8px 1px #8080804f;
    border-radius: 10px;
    padding: 10px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    max-height: 300px;
    overflow-y: scroll;
    z-index: 100;
}

span.collectionSearchInputSpan:hover .selectBoard {
display: flex;
}

p.selectOption {
    width: calc(100% - 20px);
    padding: 10px 7px;
    cursor: pointer;
    border-radius: 10px;
    font-size: 15px;
}

p.selectOption:hover {
background: #eeeeff;    
}

i.selectDrpdwnIcon {
    color: #b7b7b7;
    font-size: 19px;
}

input.collectionSearchInput {
    height: calc(90% - 20px);
    width: 100%;
    border: 0;
    color: black;
    font-size: 15px;
    background: 0;
}

input.collectionSearchInput.dark {
    color: white;
}

.collectionSearchInput.dark {
    color: white;
}

button.collectSearchBtn.dark {
    background: #5f5f5f;
}

button.navPageBtn.prev.dark {
    border: solid 2px white;
    color: white;
}

button.navPageBtn.nex.dark {
    background: black;
    border: solid 2px black;
}

.navPageCountBox.dark {
    background: black;
}

span.navPageCount.dark {
    color: white;
}

span.navPageCount.active.dark {
    background: white;
    color: black;
}

.selectBoard.dark {
    background: black;
}

p.selectOption.dark {
    color: white;
}

p.selectOption.dark:hover {
    background: #343434;
}

span.header-swtch-mode {
    display: flex;
    padding: 5px;
    height: 25px;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
    border: 0;
    background: #eeeeee;
}

span.header-swtch-mode i.active {
    background: white;
    border-radius: 50px;
}

span.header-swtch-mode i:hover {
background: #f5f5f5;
    border-radius: 50px;
}

span.header-swtch-mode i {
    font-size: 18px;
    padding: 5px;
    cursor: pointer;
}

.mobile-menu-inner-span:hover .header-menu-dropdown {
display: flex;
}

i.header-menu-icon {
font-size: 20px;
display: none;
}

i.closeMenu {
font-size: 20px;
}

img.mobile-menu-logo {
    height: 40px;
    max-width: 130px;
    width: auto;
}

.notemBox {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

span.navPageCount.activePage {
    background: var(--primary-color);
    color: var(--text-color);
}

.navControlBox {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 50px;
    background: #f2f2f2;
}

.header-menu-dropdown {
    position: fixed;
    top: 100px;
    padding: 15px;
    box-shadow: 1px 1px 5px 2px #3636365c;
    border-radius: 10px;
    background: white;
    width: max-content;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    max-height: 250px;
    overflow-y: scroll;
    flex-wrap: wrap;
    align-content: flex-start;
}

img.categoryBox-categoryImg:hover
 {
    transform: scale(1.2);
}

footer.theme-footer {
    width: 100%;
    background: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    color: var(--text-color);
    margin-top: 60px;
}

div.testimonialBoxes {
    width: 100%;
    display: flex;
    overflow-x: scroll;
    align-items: flex-start;
    gap: 30px;
    padding-bottom: 20px;
}

.testimonialBox.dark {
    background: black;
}

p.testimoniText.dark {
    color: #e3e3e3;
}

h4.testimonia-name.dark {
    color: white;
}

p.testimonia-platform.dark {
    color: #919191;
}

.testimonialBox {
    min-width: 250px;
    max-width: 250px;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    background: #eeeeee;
}

p.testimoniText {
    font-size: 14px;
    color: #585858;
}

.testimonie-user-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

span.testimonia-dp {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: var(--primary-color);
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
}

h4.testimonia-name {
    font-size: 14px;
    color: black;
}

p.testimonia-platform {
    font-size: 12px;
    color: #646464;
}

img.testimonialIcon {
    width: 60px;
    margin-bottom: -20px;
    opacity: 0.7;
}

p.footer-menu-title {
    color: var(--text-color);
    font-size: 17px;
    opacity: 0.6;
}

.footer-inner-about-div {
    min-width: 30%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.footer-socials-div {
    gap: 10px;
    margin-top: 10px;
    align-items: center;
    display: flex;
    color: var(--text-color);
}

.footer-socials-div.dark {
    color: white;
}

.footer-socials-div i {
    cursor: pointer;
    font-size: 20px;
}

span.poweredBy.dark {
    color: white;
    opacity: 1;
    background: #565656;
}

.footer-bottom-div {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: solid 1px var(--text-color);
}

.footer-inner-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 20%;
}

.theme-footer-menu-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

img.whatsAppChat {
    background: white;
    border-radius: 50%;
    padding: 3px;
    position: fixed;
    cursor: pointer;
    z-index: 100000;
    width: 50px;
    height: 50px;
    bottom: 70px;
    right: 20px;
    animation: popPulse 1.8s ease-out infinite;
  box-shadow: 0 0 0 rgba(37, 211, 102, 0.4);
  transition: transform 0.3s;
}


.whatsAppChat:hover {
  transform: scale(1.1);
}

/* infinite pop/pulse effect */
@keyframes popPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.footer-inner-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.footer-top-div {
    width: calc(100% - 40px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 50px;
    gap: 20px;
}

span.news-letter-form {
    display: flex;
    align-items: center;
    border: solid 2px var(--text-color);
    border-radius: 10px;
    padding: 5px;
}

.news-letter-email-input::placeholder {
    color: var(--text-color);
    opacity: 0.4;
}

/* Safari / older browsers support */
.news-letter-email-input::-webkit-input-placeholder {
    color: var(--text-color);
    opacity: 0.4;
}

.news-letter-email-input:-ms-input-placeholder {
    color: var(--text-color);
    opacity: 0.4;
}

.news-letter-email-input::-ms-input-placeholder {
    color: var(--text-color);
    opacity: 0.4;
}

.footer-inner-newsletter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.news_letter_form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

p.footer-subscribe-heads-up {
    font-size: 13px;
    opacity: 0.8;
}

span.preheader-span:hover {
    opacity: 0.8;
}


b.lnk {
    cursor: pointer;
    font-size: 16px;
    color: var(--secondary-color);
}

input.news-letter-email-input:focus {
outline: 0;
border: 0;
}

button.news-letter-subscribe:hover {
opacity: 0.7;
}

p.empty-cart-text.dark {
    color: white;
}

span.cart-amount-span.dark {
    color: white;
}

button.cart-item-count-btn.dark {
    background: black;
    color: white;
}

input.cart-count-input.dark {
    background: none;
    color: white;
}

button.cart-checkout-btn.dark {
    background: white;
    color: black;
}

h4.cart-item-title.dark {
    color: white;
}

h4.cart-item-price.dark {
    color: white;
}

p.cart-variation.dark {
    color: white;
}

p.cart-variation.dark::before{
    color: white;
}

span.poweredBy {
    padding: 10px;
    background: var(--text-color);
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    color: var(--primary-color);
    opacity: 0.8;
}

input.news-letter-email-input {
    min-width: 170px;
    height: 35px;
    border-radius: 10px;
    background: 0;
    border: 0;
    color: var(--text-color);
}

.checkoutBoard {
    width: 100%;
    margin-top: 110px;
    padding: 30px 0;
    background: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.checkoutInnerBoard {
    width: calc(100% - 60px);
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.checkout-inner-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

img.checkout-payment-option-icon {
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.checkout-sumary-box {
    width: calc(100% - 40px);
    padding: 20px;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 1px 1px 13px 1px #80808047;
}

p.order-sumary-subtotal {
    font-size: 14px;
    color: #818181;
}

h4.checkout-order-sumary-data {
    font-size: 15px;
    color: black;
    text-align: right;
}

.checkout-payment-method {
    width: calc(100% - 40px);
    padding: 20px;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 1px 1px 13px 1px #80808047;
}

.checkout-order-coupon-box {
    width: calc(100% - 40px);
    padding: 20px;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    box-shadow: 1px 1px 13px 1px #80808047;
}

.checkout-coupon-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 3px;
}

.checkout-payment-options-box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.payemnt-option-group {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    gap: 20px;
}

.checkout-additional-comment-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

label.checkout-label {
    font-size: 15px;
    color: #727272;
    font-weight: 500;
}

textarea.checkout-textarea {
    width: calc(100% - 20px);
    padding: 10px;
    height: 60px;
    border: solid 1px #c9c9c9;
    border-radius: 5px;
    font-size: 13px;
    font-family: sans-serif;
    color: black;
    background: 0;
}

img.footer-logo {
    max-width: 150px;
    cursor: pointer;
    max-height: 40px;
    width: auto;
    cursor: pointer;
}

label.checkout-label.dark {
    color: white;
}

.checkout-user-info-form.dark {
    background: #2f2f2f;
}

h3.checkout-user-info-title.dark {
    color: white;
}

.checkout-comment-input-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 7px;
}

.checkoutCheckboxLabel:hover {
background: #f3f8fe;    
}

.check-payment-opton {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

h4.checout-payment-option-title {
    font-size: 17px;
    color: black;
}

span.checkout-payment-title-span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

button.checkout-proceed {
    height: 50px;
    width: 100%;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    background: var(--primary-color);
    color: var(--text-color);
    border-radius: 10px;
}

p.checkout-payment-option-description {
    color: #999999;
    font-size: 12px;
    font-weight: 300;
    max-width: 300px;
}

.checkout-sumary-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.orderInfo {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

span.order-info-span {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

span.order-info-span {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: solid 1px #f1f1f1;
}

span.order-info-span:last-child {
border-bottom: 0;    
}

h3.checkout-sumary-head-title {
    font-size: 17px;
    color: black;
}

.chechout-inner-right {
    min-width: 450px;
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 600px;
}

p.footer-bottom-text {
    color: var(--text-color);
    text-align: center;
    opacity: 0.8;
}

p.checkout-coupon-description {
    font-size: 13px;
    color: #929292;
    max-width: 300px;
}

.checkout-coupon-input {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

span.couponInputSpan {
    display: flex;
    align-items: center;
    gap: 10px;
}

input.couponInput {
    min-width: 200px;
    width: 55%;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #dcdcdc;
    padding: 0 10px;
    font-size: 13px;
    color: black;
}


h3.checkout-coupon-head-title {
    font-size: 19px;
    color: black;
}

button.couponBtn {
    height: 40px;
    min-width: 80px;
    width: 40%;
    border: 0;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.paymentBtnBox {
    width: 100%;
}

h3.footer-menu-text {
    cursor: pointer;
    color: var(--text-color);
    font-weight: 400;
    font-size: 16px;
}

h3.footer-menu-text:hover {
opacity: 0.6;    
}

h3.footer-menu-text.dark:hover {
color: white;    
}

.preheader-span-text:hover {
opacity: 0.6;   
}

.preheader-span-text.dark:hover {
color: white;    
}

button.news-letter-subscribe {
    height: 35px;
    padding: 0 20px;
    border-radius: 10px;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--secondary-color);
    color: var(--text-color);
}

img.footer-social-img {
    width: 20px;
    cursor: pointer;
}

img.footer-social-img:hover {
opacity: 0.8;
}

p.header-menu-span:hover {
    color: var(--primary-color);
}

.mainSearchSection {
 width: 100%;
    background: #e8e8ff;
    margin-top: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: max-content;
    max-height: 450px;
}

p.order-sumary-subtotal.dark {
    color: white;
}

h4.checkout-order-sumary-data.dark {
    color: white;
}

.checkoutBoard.dark {
    background: black;
}

.checkout-sumary-box.dark {
    background: #2f2f2f;
}

.checkout-order-coupon-box.dark {
    background: #2f2f2f;
}

.checkout-payment-method.dark {
    background: #2f2f2f;
}

h3.checkout-coupon-head-title.dark {
    color: white;
}

p.checkout-coupon-description.dark {
    color: #d1d1d1;
}

input.couponInput.dark {
    background: 0;
    border: solid 1px white;
    color: white;
}

h4.checout-payment-option-title.dark {
    color: white;
}

button.checkout-proceed.dark {
    background: #494949;
    color: white;
}

p.checkout-payment-option-description.dark {
    color: #c9c9c9;
}

.payemnt-option-group.dark:hover {
    background: #3e3e3e;
}

.checkout-user-info-form {
    width: calc(100% - 40px);
    padding: 30px 20px;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 1px 1px 13px 1px #80808047;
}

input.checkout-input {
    height: calc(90% - 10px);
    width: 100%;
    border: 0;
    color: black;
    font-size: 15px;
    margin-left: 10px;
    background: 0;
}

label.checkout-input-label.dark {
    color: #e8e8e8;
}

span.checkout-input-span.dark {
    border: solid 1px #e2e2e2;
}

i.checkput-nput-icon.dark {
    color: #e7e7e7;
}

h4.checkout-payment-method-title.dark {
    color: #d6d6d6;
}

label.checkout-input-label {
    color: #3e3e3e;
    font-size: 15px;
}

.checkout-input-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 6px;
}

h3.checkout-user-info-title {
    font-size: 18px;
    color: black;
}

span.checkout-input-span {
    display: flex;
    align-items: center;
    gap: 5px;
    width: calc(100% - 20px);
    border: solid 1px #c9c9c9;;
    height: 50px;
    border-radius: 5px;
    padding: 0 10px;
    position: relative;
    justify-content: center;
}

.deliveryMethodBox {
    display: flex;
    align-items: center;
    gap: 5px;
}

.checkout-country-select {
    position: absolute;
    top: 55px;
    width: calc(100% - 40px);
    background: white;
    z-index: 10;
    box-shadow: 1px 1px 5px 2px #45454536;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-height: 400px;
    overflow-y: scroll;
}

h4.checkout-payment-method-title {
    font-size: 16px;
    color: #3d3d3d;
}

.checkout-delivery-method-options-boxes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

textarea.orderNote {
    width: calc(100% - 20px);
    padding: 10px;
    height: 70px;
    border-radius: 5px;
    border: solid 1px #cecece;
    font-size: 13px;
    font-family: sans-serif;
    color: black;
    background: white;
}

textarea.orderNote.dark {
background: 0;    
color: white;
}

input.checkout-input.dark {
    color: white;
}

textarea.checkout-textarea.dark {
    color: white;
}

.checkout-country-select.dark {
    background: black;
}

input.selectSearchInput.dark {
    border: solid 1px white;
    color: white;
    background: 0;
}

p.checkout-country-opetion.dark {
    color: white;
}

p.checkout-country-opetion.dark:hover {
background: #2f2f2f;;    
}

.deliveryContent {
    width: calc(100% - 40px);
    max-width: 500px;
    padding: 20px;
    background: white;
    border-radius: 5px;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 85%;
}

.deliveryInnerBox {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    align-items: center;
    gap: 15px;
    height: 100%;
    max-height: calc(100% - 50px);
    justify-content: space-between;
}

span.taxesSpann {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.select-location-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: 100%;
    overflow-y: scroll;
    gap: 10px;
    height: 100%;
}

.select-country-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: 600px;
    overflow-y: scroll;
}

h2.delivery-region-option-head.dark {
    color: white;
}

p.delivery-region-option-description.dark {
    color: #e8e8e8;
}

p.delivery-arrival-time {
    color: #a7a7a7;
}

h4.delivery-region-price.dark {
    color: white;
}

p.delivery-arrival-time.dark {
    color: #bababa;
}

.delivery-region-option.dark:hover {
    background: #303030;
}

p.delivery-arrival-time {
    color: #9d9d9d;
    font-size: 12px;
    font-weight: 500;
}

p.checkout-country-opetion {
    width: 100%;
    padding: 5px;
    font-size: 15px;
    color: black;
    font-weight: 500;
    cursor: pointer;
    border-radius: 10px;
}

p.checkout-country-opetion:hover {
background: #f1f3ff;;    
}

input.selectSearchInput {
    min-height: 45px;
    width: calc(100% - 20px);
    border: solid 1px #d7d7d7;
    border-radius: 10px;
    padding: 0 10px;
    color: black;
    font-size: 16px;
}

label.selectMethodDeliv {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 5px;
    cursor: pointer;
    justify-content: flex-start;
    gap: 5px;
}

label.selectMethodDeliv input[type="radio"] {
    -webkit-appearance: none; /* remove default style */
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
}

label.selectMethodDeliv input[type="radio"]:checked::after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
}

label.paymenthMethodLabel input[type="radio"] {
    -webkit-appearance: none; /* remove default style */
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
}

label.paymenthMethodLabel input[type="radio"]:checked::after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
}

label.paymenthMethodLabel:hover {
background: #f4f4f4;    
}

.paymentMethodLabel input[type="radio"]:checked + .check-payment-option {
    background: #f4f4f4;
}

label.paymenthMethodLabel {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    gap: 5px;
}


i.checkput-nput-icon {
    font-size: 17px;
    color: #8c8c8c;
}

.paymentOptonsBox {
    width: 100%;
    display: flex
;
    flex-direction: column;
    align-items: flex-start;
}

.checkoutInputDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.pickupLocationsBox {
    width: calc((100% - 25px));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    border: solid 1px #cccccc;
    border-radius: 10px;
    padding: 15px 10px;  
    cursor: pointer;
}

.avalableTimesBo p {
    font-size: 14px;
    color: #5d5d5d;
}

p.pickupLabel {
    font-size: 15px;
    font-weight: 600;
    color: #444444;
}

.avalableTimesBo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.avalableTimeBoard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.pickupLocationsBox.active {
    border-color: var(--primary-color);
}

h4.pickupLocationName {
    font-size: 16px;
    color: black;
}

.pickupGrpp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.pickupTopLeft {
    display: flex;
    align-items: center;
    gap: 10px;
}

p.pickupLocationAddress {
    font-size: 15px;
    color: #5d5d5d;
}

.pickupLocatioTopDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button.couponBtn.dark {
    border: solid 2px black;
    background: black;
    color: white;
}

h3.checkout-sumary-head-title.dark {
    color: white;
}

span.order-info-span.dark {
    border-bottom: solid 1px #4e4e4e;
}

span.order-info-span.dark:last-child {
border-bottom: 0;    
}

.mainSearchBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    position: absolute;
    z-index: 100;
}

img.mainSteImgBackground {
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    filter: brightness(0.2);
    background: #210051;
}

body.body.dark {
    background: #1e1e1e;
}

h1.sectionTitle.dark {
    color: white;
}

h3.product-box-product-title.dark {
    color: white;
}

h4.product-box-product-price.dark {
    color: white;
}

p.product-box-old-price {
    color: #bbbbbb;
}

button.product-box-btn.dark {
    border: solid 2px white;
    color: white;
}


button.product-box-btn.dark:hover {
    border: 0;
    color: black;
    background: white;
}

i.togle.dark {
    color: white;
    background: #ffffff59;
}

h3.shopGreeting {
    font-size: 25px;
    width: 600px;
    text-align: center;
    max-width: calc(95% - 40px);
    font-family: sans-serif;
    color: white;
    font-weight: 500;
}

.homeSearch {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

span.search_input-box {
    width: 500px;
    max-width: calc(95% - 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 10px 15px;
    border: solid 2px white;
    border-radius: 30px;
}


img.slideImg {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.campaign-slide-box {
    min-width: 350px;
    height: 200px;
    position: relative;
    border-radius: 10px;
    cursor: pointer;
}

.capaign-slide {
    width: calc(100% - 60px);
    display: flex;
    gap: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 230px;
    align-items: center;
}

.home_search_input {
    height: 90%;
    width: 100%;
    border: 0;
    outline: 0;
    background: 0;
    font-size: 17px;
    color: white;
}

i.searchIcon {
    padding: 15px;
    border-radius: 20px;
    color: var(--text-color);
    background: var(--primary-color);
    cursor: pointer;
}


.setion {
    width: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 90px;
    gap: 40px;
}

i.togle {
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: var(--text-color);
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    cursor: pointer;
}

.productBox-img-box {
    width: 100%;
    height: 200px;
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    overflow: hidden;
}

.productBox {
    min-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2px;
    gap: 15px;
    padding-bottom: 10px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    max-width: 320px;
    justify-content: space-between;
}

.productBox:hover img.product-box-img {
transform: scale(1.2);    
}

    button.product-box-discount {
    position: absolute;
    top: 5px;
    left: 5px;
    border: 0;
    border-radius: 5px;
    padding: 5px;
    background: var(--primary-color);
    color: var(--text-color);
}

.faqBox.dark {
    border: 0;
}

i#wishList {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 17px;
    padding: 7px;
    background: #ffffff69;
    border-radius: 50px;
    cursor: pointer;
}

.orderTableContainer.dark {
    background: black;
}

thead.dark {
    background: black;
}

.orderTable td.dark {
color: white;
}


.orderTable tbody tr.dark:hover {
    background: #373737;
}

.orderTable thead th.dark {
    color: white;
}

i#wishList.active {
    color: red;
    background: #ff00001f;
}

i.wishList:hover {
background: white;   
}

i.wshList.active {
    color: red;
}

img.product-box-img {
    height: 100%;
    width: 100%;
    background: #ebf5ff;
    border-radius: 10px;
    object-fit: cover;
    transition: transform 0.4s ease-in-out;
    cursor: pointer;
}

.product-box-details-box {
    width: 100%;
    padding-left: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

h3.product-box-product-title {
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    color: black;
}

h4.product-box-product-price {
    font-size: 17px;
    color: black;
}

p.product-box-old-price {
    color: #8f8f8f;
    font-size: 14px;
    text-decoration: line-through;
}

p.product-box-stock-count {
    color: #8d8d8d;
    font-size: 13px;
}

span.product-box-price-box {
    display: flex;
    align-items: center;
    gap: 5px;
} 

i.togle:hover { 
opacity: 0.6;    
} 

i.searchIcon:hover {
    opacity: 0.7;
}


.product-box-btn-div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

button.product-box-btn {
    height: 40px;
    width: 100%;
    border: solid 1px var(--primary-color);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    background: none;
    cursor: pointer;
}

button.product-box-btn:hover {
border: 0;
background: var(--primary-color);
color: var(--text-color);
}

h1.sectionTitle {
font-size: 25px;
    font-family: sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

button.hotBtn {
    border: 0;
    height: 22px;
    padding: 0 7px;
    border-radius: 5px;
    color: white;
    background: red;
}

.faqBox {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 10px 0;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 100%;
}


.questionSpan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  background: #f4f4f4;
}

.questionSpan .arrow {
  border: solid #4b4b4b;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 6px;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.faqBox.active .arrow {
  transform: rotate(-135deg); /* arrow points down when open */
}

.answer {
  max-height: 0;
  font-family: system-ui;
  padding: 0 20px;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faqBox.active .answer {
  max-height: 500px; /* adjust based on content */
  padding: 15px 20px;
  color: #898989;
}

.faqBoxes {
    width: calc(100% - 100px);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 700px;
}

h3.question {
    font-size: 15px;
    color: #585858;
    font-weight: 400;
}

.orderSuccessBody.dark {
    background: #282828;
}

h4.succHead.dark {
    color: white;
}

p.succTxt.dark {
    color: #c9c9c9;
}

.orderSuccessBox.dark {
    background: black;
    box-shadow: none;
}

span.orderDetsSpn.blue.dark {
    border-color: white;
    color: white;
}

span.orderDetsSpn.green.dark {
    border-color: white;
    color: white;
}

span.orderDetsSpn.purple.dark {
    border-color: white;
    color: white;
}

h3.trackHeadTxt.dark {
    color: white;
}

p.trackHeadDesc.dark {
    color: #e5e5e5;
}

button.trackBtn.dark {
    background: black;
    color: white;
}

input.trackOrderInput.dark {
    border: solid 2px white;
    background: 0;
    color: white;
}

.productBoxes {
    width: calc(100% - 40px);
    padding: 0 20px;
    display: grid;
    row-gap: 50px;
    column-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

span.section-header-righttoggle {
    display: flex;
    align-items: center;
    gap: 15px;
}

.questionSpan.dark {
    background: black;
    border: 0;
    outline: 0;
}

h3.question.dark {
    color: #bdbdbd;
}

.productBoardInner1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

img.product-photo {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    cursor: zoom-in;
    object-fit: cover;
    background: white;
}

.productBoard {
    margin-top: 110px;
    width: calc(100% - 60px);
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding-top: 30px;
}

.modalContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    width: calc(100% - 40px);
    max-width: 400px;
}

.modalContentHeader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chechout-vendor-bank-details-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

h3.checkout-vendor-ban-title {
    font-size: 16px;
    color: #252525;
}

.checkout-bank-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

span.checkout-bank-details-span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-bank-transfer-orderamount-box {
    display: flex
;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

span.checkout-transfer-upload-span {
    display: flex
;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border: dashed 1px grey;
    border-radius: 10px;
}

p.checkout-bank-title {
    font-size: 14px;
    color: #767676;
}

h4.checkout-banktransfer-order-amount {
    font-size: 17px;
    color: black;
    font-weight: 600;
}

.orderStatus.completed {
    background: #ecffee;
    color: #04b700;
}

.orderStatus.paid {
    background: #ecffee;
    color: #04b700;
}

.orderStatus.shipped {
    background: #fff5cc;
    color: #b28704;
}

.orderStatus.delivered {
    background: #ecffee;
    color: #04b700;
}

.orderStatus.successful {
    background: #ecffee;
    color: #04b700;
}

.orderStatus.unpaid {
    background: #ffecec;
    color: #ec0303;
}

.orderStatus.returned {
    background: #ffecec;
    color: #ec0303;
}

.orderStatus.canceled {
    background: #ffecec;
    color: #ec0303;
}

.orderStatus::before {
    content: "•";
    margin-right: 6px;
    font-size: 1.2em;
}

h4.checkout-bank-detls {
    font-size: 15px;
    color: black;
}

button.upload-receipt-btn {
    border: 0;
    height: 30px;
    padding: 0 15px;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    background: #007aff;
}

.errorDizz {
    text-align: center;
    padding: 20px;
    background: 0;
    color: red;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

span.header-menu-span.active p {
    color: var(--primary-color);
}

p.receiptFileName {
    font-size: 14px;
    color: #7f7f7f;
}

.checout-bank-detls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.paidBtnDiv {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 10px;
}

i.upload-receipt-icon {
    font-size: 18px;
    color: black;
}

.account-body {
    width: 100%;
    margin-top: 110px;
    padding: 30px 0;
    background: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px
}

.account-page-top-header {
    width: calc(100% - 40px);
    max-width: 1000px;
}

h2.account-page-title {
    color: black;
    font-size: 24px;
}

span.account-nav-span.logout {
    color: red;
}


span.account-nav-span {
    width: calc(100% - 10px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 10px;
    cursor: pointer;
}

h4.account-nav-title {
    font-weight: 500;
    font-size: 15px;
}

div.accountSecBox {
    width: 100%;
    display: flex
;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.accountProfileForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

span.account-input-span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 40%;
    min-width: 250px;
}

input.account-input {
    width: calc(100% - 20px);
    height: 45px;
    padding: 0 10px;
    border-radius: 5px;
    border: solid 1px #d8d8d8;
}

.countriesSelectBoxx {
    position: absolute;
    width: calc(100% - 20px);
    height: auto;
    background: white;
    box-shadow: 1px 1px 8px 2px #8080804f;
    border-radius: 10px;
    padding: 10px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1000;
    gap: 10px;
} 

.countriesSelectBoxx.dark {
    background: #353535;
}

input.searchCountrynput.dark {
    background: 0;
    border: solid 1px white;
}

p.countriesListOption.dark {
    color: white;
}

p.countriesListOption.dark:hover {
background: #2a2a2a;
}

.noMsgBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 200px;
    gap: 15px;
    justify-content: center;
}

p.noMsgs.dark {
    color: #dadada;
}

p.noMsgs {
    font-size: 14px;
    color: #999999;
}

img.noMessagesImg {
    width: 80px;
    height: 80px;
}

p.countriesListOption.dark {
    color: white;
}
p.countriesListOption:hover { 
background: #e9e9e9;
}

p.countriesListOption {
    padding: 5px;
    width: calc(100% - 10px);
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    color: #505050;
}

span.grupSpnn:hover .countriesSelectBoxx {
 display: flex;   
 width: 100%;
}

span.grupSpnn {
position: relative;
width: 100%;
}

.countriesLstBoxx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: 300px;
    overflow-y: scroll;
        width: 100%;
}

input.searchCountrynput {
height: 40px;
    width: calc(100% - 20px);
    border: solid 1px #dadada;
    padding: 0 5px;
    border-radius: 5px;
    color: black;
    font-size: 13px;
}

span.account-input-span.fullwidth {
width: 80%;
    min-width: 530px;
    max-width: 80%; 
}

.InputGrouping {
    display: flex;
    width: 100%;
    gap: 30px;
}

.account-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding-bottom: 15px;
    border-bottom: solid 1px #dcdcdc;
    padding: 20px;
} 

.account-body.dark {
    background: #252525;
}

h2.account-page-title.dark {
    color: white;
}

.account-form-box.dark {
    background: black;
    box-shadow: none;
}

h3.account-header-text.dark {
    color: white;
}

p.account-head-description.dark {
    color: #c8c8c8;
}

label.account-label.dark {
    color: #e0e0e0;
}

input.account-input.dark {
    border: solid 1px white;
    background: 0;
}

button.accountSaveBtn.dark {
    background: #424242;
    color: white;
}

.accountNavBox.dark {
    background: black;
    box-shadow: none;
}

span.account-nav-span.dark {
    color: white;
}

span.account-nav-span.active.dark {
    background: #272727;
    border-left: white solid 2px;
}

span.account-nav-span.dark:hover {
    background: #272727;
}

input.dark {
color: white;
}

h3.account-header-text {
    font-size: 21px;
    color: black;
}

p.account-head-description {
    font-size: 13px;
    color: #8f8f8f;
}

.account-main-data-board {
    width: 100%;
    max-width: 650px;
    display: flex;
    justify-content: center;
    max-height: 400px;
    overflow: scroll;
}

textarea.account-input-address {
    width: calc(100% - 20px);
    height: 95px;
    padding: 10px;
    border-radius: 5px;
    border: solid 1px #d8d8d8;
    background: 0;
    font-family: sans-serif;
}

textarea.account-input-address.dark {
color: white;    
}

.btnControlDiv {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
}

label.account-label {
    font-size: 14px;
    color: #646464;
}

button.accountSaveBtn {
    height: 45px;
    border-radius: 5px;
    padding: 0 20px;
    border: 0;
    background: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wishlistBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
}

.wishBox {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 9px;
    border-radius: 10px;
}

.wishBox:hover {
background: #f0efff;
}

p.wsh-prod-title.dark {
    color: #d8d8d8;
}

p.wishProductPrice.dark {
    color: white;
}

.wishBox.dark:hover {
    background: #333333;
}

.account-header.dark {
    border-bottom: solid 1px #444444;
}

p.wishProductPrice {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1d;
}

p.wsh-prod-title {
    color: #353535;
    font-size: 15px;
}

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

i.wishedIco {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 7px;
    border-radius: 50px;
    color: red;
    background: #ff00001a;
}

.wishDetls {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

img.wishImg {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 5px;
}

span.account-nav-span:hover {
background: #f3f3ff;
    border-radius: 10px;
    }

span.account-nav-span.active {
background: #f0efff;
    border-radius: 10px;
    border-left: solid 2px var(--primary-color);    
}

.account-inner-body {
    display: flex;
    width: calc(100% - 40px);
    max-width: 1000px;
    justify-content: space-between;
    gap: 50px;
}

.accountNavBox {
    width: 30%;
    min-width: 250px;
    background: white;
    border-radius: 10px;
    padding: 10px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: fit-content;
    box-shadow: 1px 1px 13px 1px #80808047;
}

.account-form-box {
    width: 100%;
    padding: 20px;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 1px 1px 13px 1px #80808047;
}

i.checkout-close-modal {
    padding: 5px;
    border-radius: 50px;
    background: #ff000021;
    color: red;
    cursor: pointer;
}

button.cancelPaidBtn {
    height: 40px;
    padding: 0 20px;
    border-radius: 10px;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    color: white;
    background: red;
    cursor: pointer;
    min-width: 100px;
}

h3.modal-checkout-bank-transfer-title {
    font-size: 20px;
    color: black;
}

button.paidBtn {
    height: 40px;
    padding: 0 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: white;
    border: 0;
    border-radius: 10px;
    background: #03bf03;
    min-width: 100px;
}

.checkout-bank-upload-payment {
    display: flex
;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

textarea.main-product-remark-input {
    height: 60px;
    max-width: 300px;
    min-width: 250px;
    border: 0;
    border-radius: 10px;
    background: #eeeeee;
    padding: 10px;
    font-size: 13px;
    font-family: sans-serif;
}

button.enquire-product-via-whatsapp {
    min-width: 260px;
    border: 0;
    width: 100%;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: white;
    background: #1dd31d;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

span.main-product-variation-span {
    position: relative;
    height: 30px;
    min-width: 180px;
    max-width: 200px;
    border: solid 2px #eeeeee;
    border-radius: 10px;
    padding: 5px;
    color: black;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}

.main-product-call-to-action-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.product-photo-box {
    width: 100%;
    height: auto;
    max-height: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

img.product-tumbNail {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    opacity: 0.7;
    background: white;
}

button.add-to-cart-btn:hover {
background: var(--primary-color);
color: var(--text-color);
}

button.enquire-product-via-whatsapp.dark {
    background: black;
    color: white;
}

button.add-to-cart-btn.dark {
    border: solid 2px white;
    color: white;
}

button.buy-now-btn.dark {
    background: black;
    border: black;
    color: white;
}

img.product-tumbNail.dark.active {
border: solid 2px white;    
opacity: 1;
}

img.product-tumbNail.active {
border: solid 2px var(--primary-color);    
opacity: 1;
}


h4.product-description-title.dark {
    color: white;
}

span.product-description-span.dark {
    color: #d0d0d0;
}

p.reviewTxt.dark {
    color: #d0d0d0;
}

p.main-product-stock-count.dark::before {
color: white;
}

.product-tumbnail-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
    cursor: pointer;
}

h2.main-product-price {
    font-size: 21px;
    font-weight: 600;
    color: black;
}

.main-product-count {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

span.main-product-prices-span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-product-right-inner {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.contact-form {
    max-width: calc(100% - 30px);
    width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 30px;
    box-shadow: 1px 1px 11px 3px #80808012;
    border-radius: 20px;
}

span.contact-head {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

h2.contact-form-title {
    font-size: 26px;
    color: black;
}

p.contact-form-description {
    color: #a5a5a5;
}

button.contactBtn {
    height: 45px;
    width: 300px;
    margin-top: 30px;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

textarea.contact-message {
    height: 160px;
    width: calc(100% - 20px);
    border-radius: 5px;
    border: solid 1px #d6d6d6;
    background: 0;
    padding: 10px;
    color: black;
    font-size: 14px;
    font-family: sans-serif;
}

.contactBoard {
    width: calc(100% - 60px);
    margin-top: 110px;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.productBody {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #eeeeee;
    padding-bottom: 50px;
}

.productDescriptionBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
}

span.product-description-span {
    font-size: 15px;
    color: #3d3d3d;
}

p.reviewTxt {
    font-size: 15px;
    color: #565656;
}

h4.product-description-title {
    font-size: 19px;
    color: black;
}

.variationSelect {
    width: calc(100% - 20px);
    background: white;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    box-shadow: 1px 1px 7px 2px #8080803b;
    border-radius: 10px;
    position: absolute;
    top: 45px;
    z-index: 10;
}

.variationSelect.dark {
    background: black;
}

.main-product-variation-input:focus ~ .variationSelect,
.variationSelect:hover {
    display: flex;
}

p.variation-option.dark {
    color: white;
}

p.variation-option.dark:hover {
background: #1a1a1a;
}

span.product-video-tumbnail {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

i.playVideo {
position: absolute;
    font-size: 14px;
    padding: 7px;
    background: #fffffff0;
    border-radius: 50px;
    }

img.product-video-tumbNail {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    opacity: 1;
}

i.playVideo {
    
}

input.main-product-variation-input {
    height: 80%;
    width: 90%;
    border: 0;
    background: 0;
    font-size: 16px;
}

span.main-product-variation-span.dark {
    color: white;
}

input.main-product-variation-input.dark {
    color: white;
}

textarea.main-product-remark-input.dark {
    background: #575757;
    border: solid white;
    color: white;
}

.track-board {
width: calc(100% - 40px);
    max-width: 600px;
    margin-top: 110px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.trackFormBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

input.trackOrderInput {
    width: calc(100% - 20px);
    height: 50px;
    border-radius: 5px;
    border: solid 1px #e0e0e0;
    padding: 0 10px;
}

.faqBox.active .answer.dark {
    color: #e9e9e9;
}

div.track-order-result {
    width: calc(100% - 20px);
    max-width: 800px;
}

button.trackBtn {
    width: 100%;
    max-width: 400px;
    height: 45px;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trackFormHeader {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

h3.trackHeadTxt {
    font-size: 24px;
    color: black;
}

p.trackHeadDesc {
    font-size: 15px;
    color: #808080;
}

p.variation-option {
    cursor: pointer;
    padding: 10px 5px;
    width: calc(100% - 10px);
    border-radius: 10px;
    font-size: 14px;
}

p.variation-option:hover {
background: #efefff;    
}

p.main-product-stock-count {
    font-size: 14px;
    color: green;
}


.main-product-right-top-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.orderSuccessBody {
    width: 100%;
    background: #eeeeee;
    display: flex;
    margin-top: 110px;
    padding: 40px 0;
    align-items: center;
    justify-content: center;
}

.orderSuccessBox {
    padding: 20px;
    border-radius: 10px;
    background: white;
    display: flex;
    gap: 7px;
    flex-direction: column;
    align-items: center;
    box-shadow: 1px 1px 12px 4px #8080802e;
    max-width: calc(100% - 60px);
    margin: 30px 0;
}

span.orderDetsSpn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 45px;
    padding: 0 30px;
    border-radius: 5px;
    cursor: pointer;
    border: solid 2px;
    transition: box-shadow 0.3s ease;
}

.orderDetails {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    flex-direction: row;
    flex-wrap: wrap;
}

img.sussImg {
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background: #35bc351c;
    animation: popPulse 1.8s ease-out infinite;
  box-shadow: 0 0 0 rgba(37, 211, 102, 0.4);
  transition: transform 0.3s;
}

span.orderDetsSpn.blue {
    border-color: #0088ff;
    color: #0088ff;
    background: #0088ff14;
}

span.orderDetsSpn.blue:hover {
    border-color: #0088ff;
    color: white;
    background: #0088ff;
}

span.orderDetsSpn.green:hover {
    background: green;
    color: white;
    border-color: green;
}

span.orderDetsSpn.purple {
    border-color: #7702f7;
    color: #7702f7;
    background: #7702f717;
}

span.orderDetsSpn.purple:hover {
    border-color: #7702f7;
    color: white;
    background: #7702f7;
}

span.orderDetsSpn.green {
    color: green;
    border-color: green;
    background: #11fc110d;
}

span.succssMsgGrp {
    display: flex
;
    flex-direction: column;
    align-items: center;
    margin-top: 4px;
    gap: 5px;
}

h4.succHead {
    font-size: 18px;
    color: black;
}

p.succTxt {
    font-size: 15px;
    color: #828282;
    text-align: center;
}

button.main-product-discount-btn {
    width: auto;
    padding: 0 7px;
    height: 30px;
    border: 0;
    border-radius: 10px;
    background: #1ccc1c;
    color: white;
}

.productBoardInner2 {
    min-width: 300px;
    width: 40%;
    max-width: 500px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: max-content;
    gap: 20px;
    box-shadow: 1px 1px 13px 1px #80808047;
}

h3.main-product-price {
    font-size: 19px;
    color: black;
}

p.main-product-discounted-price {
    color: #9e9e9e;
    text-decoration: line-through;
    font-weight: 300;
    font-size: 15px;
}

p.product-sku-product-page {
    font-size: 14px;
    font-weight: 500;
    color: #878787;
}

button.add-to-cart-btn {
    width: 100%;
    min-width: 130px;
    height: 50px;
    background: 0;
    border: solid 2px var(--primary-color);
    border-radius: 10px;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-product-cta-btn-box {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 260px;
    width: 100%;
}

textarea {
    resize: none;   /* removes the resize handle */
}

textarea:focus {
 outline: 0;   
}

button.buy-now-btn {
    width: 100%;
    min-width: 130px;
    height: 50px;
    background: var(--primary-color);
    border: solid 2px var(--primary-color);
    border-radius: 10px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h4.main-product-variation-title {
    font-size: 16px;
    color: black;
    font-weight: 500;
}

.categoryBoxes {
    display: flex;
    align-items: center;
    gap: 15px;
    width: calc(100% - 40px);
    overflow-x: scroll;
}

.categoryBox {
    width: 300px;
    min-width: 300px;
    height: 300px;
    border-radius: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

img.categoryBox-categoryImg {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    filter: brightness(50%);
}

h4.categorybox-categoryname {
position: absolute;
    color: white;
    z-index: 1;
    font-size: 24px;
    font-weight: 500;
    max-width: 80%;
    text-align: center;
}

.section-header {
    width: calc(100% - 40px);
    display: flex
;
    justify-content: space-between;
}

span.header-menu-dropdown-span {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    border-radius: 10px;
    width: auto;
}

span.header-menu-dropdown-span:hover {
background: #ececfc;    
}

p.header-menu-span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #474747;
    font-size: 15px;
}

img.header-menu-dropdown-img {
width: 25px;
    height: 25px;
    border-radius: 50px;
    background: #eaeaea;
    object-fit: cover;
}
.main-header {
    width: 100%;
    display: flex
;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    min-height: 70px;
    background: white;
}

img.header-currency-img {
    height: 20px;
    width: 20px;
    border-radius: 50px;
}

.cart-item-action-control {
    display: flex;
    align-items: center;
    gap: 20px;
}

span.urir-eopd {
    display: flex;
    align-items: center;
    gap: 10px;
}

button.cart-item-count-btn {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 0;
    font-size: 19px;
    background: #ececec;
    border-radius: 5px;
    color: black;
}

i.deleteCartItem {
    color: red;
    cursor: pointer;
    font-size: 16px;
    padding: 10px;
    border-radius: 50px;
    background: #ffeaea;
}

input.cart-count-input {
    width: 30px;
    text-align: center;
    height: 20px;
        border: 0;
        font-size: 17px;
    font-family: monospace;
}

h2.contact-form-title.dark {
    color: white;
}

p.contact-form-description.dark {
    color: #e3e3e3;
}

span.stock-count {
    display: flex;
    align-items: center;
    border-radius: 5px;
    border: 0;
}

span.header-cart-span {
    position: relative;
    display: flex;
    align-items: center;
}

p.product-sku-product-page.dark {
    color: #dfdfdf;
}

p.featuresPoints {
    font-size: 15px;
    color: #3d3d3d;
}

span.outOfStock.dark {
    color: white;
    border: solid 1px white;
}

p.featuresPoints.dark {
    color: #d0d0d0;
}

button.cartCountBtn {
    background: red;
    color: white;
    border-radius: 50px;
    min-width: 15px;
    min-height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    margin-left: -10px;
    border: solid 2px white;
    font-size: 13px;
}

i.cartIcon {
    font-size: 23px;
    color: #5b5b5b;
}

spa.header-account-span {
    display: flex;
    align-items: center;
}

img.header-account-img {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    cursor: pointer;
}

span.header-cart-span {
    display: flex;
    align-items: center;
    cursor: pointer;
}

span.header-currency-switch-span {
    display: flex;
    align-items: center;
    gap: 2px;
    border: solid 1px #cfcfcf;
    height: 30px;
    padding: 0 5px;
    border-radius: 20px;
    cursor: pointer;
    position: relative;
}

span.header-currency-switch-span:hover .header-menu-dropdown {
display: flex;
}

span.poweredBy:hover {
    opacity: 0.8;
}

div.hide, span.hide, p.hide, i.hide, section.hide, input.hide, select.hide {
display: none;
}


.buy-now-btn.hide, .add-to-cart-btn.hide {
display: none;
}


/*  DARK MODE   */

.preheader.dark {
    background: black;
    color: white;
}

.main-header.dark {
    background: black;
}

button.cartCountBtn.dark {
    border: solid #2d2d2d 2px;
    color: black;
    background: white;
}

i.searchIcon.dark {
    background: black;
    color: white;
}

span.header-currency-switch-span.dark {
    color: white;
}

p.header-menu-span.dark {
    color: white;
}

i.cartIcon.dark {
    color: white;
}

span.header-swtch-mode i.dark:hover {
background: #333333;
    border-radius: 50px;
}

header.theme-header.dark {
    box-shadow: none;
} 

span.header-swtch-mode i.dark {
    color: white;
}

span.header-swtch-mode.dark {
    background: #565656;
}

span.header-swtch-mode i.dark.active {
    background: black;
}

.header-menu-dropdown.dark {
    background: black;
    box-shadow: none;
}

span.header-menu-dropdown-span.dark:hover {
    background: #414141;
}

.mobile-menu-bar.dark {
    background: black;
}

i.closeMenu.dark {
    color: white;
    border: solid 1px white;
}

button.news-letter-subscribe.dark {
    background: #494949;
    color: white;
}

p.footer-bottom-text.dark {
    color: white;
}

b.lnk.dark {
    color: white;
}

p.mobile-menu-text-txx.dark {
    color: white;
}

p.header-menu-dropdown-text.dark {
    color: white;
}

footer.theme-footer.dark {
    background: black;
    color: white;
}

p.footer-menu-title.dark {
    color: white;
}

.footer-bottom-div.dark {
    border-top: solid 1px #9f9f9f;
}

.deliveryContent.dark {
    background: #454545;
}

h3.modal-checkout-bank-transfer-title.dark {
    color: white;
}

label.paymenthMethodLabel.dark:hover {
    background: #232323;
}

i.checkout-close-modal.dark {
    background: black;
    color: white;
}

.delivery-region-option.dark {
    border-bottom: solid 1px #767676;
}

.delivery-region-option.dark.active {
    background: #0000001c;
}

.delivery-region-option.dark:hover {
    background: #5e5e5ebf;
}

input.news-letter-email-input.dark {
    color: white;
}

input.news-letter-email-input.dark::placeholder {
    color: white;
}

span.news-letter-form.dark {
    border: solid 2px white;
}

h3.footer-menu-text.dark {
    color: white;
}

.mainSearchSection.dark {
    background: #2b2b2b;
}




 @media (max-width:900px){ 
.header-menu-div {
display: none;
}     
     
 }
 
 
 
  @media (max-width:900px){ 
     
 .preheader {
    display: none;
}

.orderSuccessBody {
    margin-top: 70px;
}

h3.policyHeadText {
    font-size: 25px;
}

.policyBox {
    margin-top: 70px;
    width: calc(100% - 20px);
    padding: 20px;
}

 .orderTableContainer {
        padding: 16px;
    }

    .orderTable td,
    .orderTable th {
        font-size: 13px;
    }

.accountNavBox {
    width: calc(100% - 100px);
    min-width: calc(100% - 20px);
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
}

.account-page-top-header {
    width: calc(100% - 20px);
}

span.account-input-span.fullwidth {
    min-width: calc(100% - 10px);
}

.InputGrouping {
    flex-direction: column;
}

span.account-input-span {
    width: calc(100% - 10px);
}

.account-body {
    margin-top: 70px;
}

.account-inner-body {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: calc(100% - 20px);
}

.account-form-box {
    max-width: calc(100% - 40px);
}

.checkout-comment-input-box {
    width: calc(100% - 20px);
}

.checkoutBoard {
    margin-top: 70px;
}

.checkoutBoard {
    margin-top: 70px;
}

.checkoutInnerBoard {
    width: calc(100% - 20px);
    flex-direction: column;
    gap: 20px;
}

.collectionBoard {
    margin-top: 70px;
    width: calc(100% - 0px);
}

.collection-filter-input {
    flex-direction: row;
    flex-wrap: wrap;
}

.capaign-slide {
width: calc(100% - 10px);
}


.mainSearchSection {
    margin-top: 70px;
}

.productBoard {
    margin-top: 70px;
    flex-direction: column;
}

h4.product-description-title {
    font-size: 25px;
}

.productBoardInner2 {
    max-width: calc(100% - 50px);
    width: 100%;
}

span.product-description-span {
    font-size: 17px;
}

p.reviewTxt {
    font-size: 17px;
}

i.header-menu-icon {
display: flex;
}

span.header-swtch-mode {
    display: none;
}

span.header-currency-switch-span {
    display: none;
}

span.header-account-span {
    display: none;
}

span.account-nav-span {
    min-width: fit-content;
}

.footer-top-div {
    flex-direction: column;
    gap: 30px;
}

input.news-letter-email-input {
    min-width: 230px;
}

img.footer-social-img {
    width: 25px;
}

i.cartIcon {
    font-size: 29px;
}

.mobile-menu-boxx {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

span.mobile-menu-inner-span {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

span.mobile-menu-inner-span.hide {
    display: none;
}

span.mobile-menu-span-first-cont {
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-modal-img.flag {
border-radius: 50px;
    width: 20px;
    height: 20px;
}


img.whatsAppChat {
width: 50px;
    height: 50px;
    bottom: 70px;
    right: 10px;
}

i.header-menu-icon {
display: flex;
}
     
 }
 
 
 
@media (max-width:500px){ 
.setion {
    width: calc(100% - 20px);
    margin-top: 30px;
}

.deliveryContent {
    padding: 20px 10px;
}

.productBoardInner1 {
width: calc(100% - 20px);
}

.wishBox {
    width: calc(50% - 50px);
}

.wishlistBox {
    justify-content: center;
}

input.couponInput {
    min-width: 250px;
    width: 250px;
}






.checkoutBoard {
    margin-top: 70px;
}

.chechout-inner-right {
    min-width: calc(100% - 0px);
}

span.couponInputSpan {
    flex-direction: column;
    align-items: flex-start;
}

.checkout-inner-left {
gap: 15px
}

.collection-filter-input {
flex-direction: column;
    align-items: center;
}

button.collectSearchBtn {
    width: 350px;
    min-width: 200px;
    max-width: 100%;
}

span.collectionSearchInputSpan {
min-width: 150px;
}

.collectionBoard {
    margin-top: 70px;
}

.contactBoard {
    margin-top: 70px;
}

.track-board {
    margin-top: 70px;
}

.track-board {
    margin-top: 70px;
}

.contactBoard {
    width: calc(100% - 10px);
    padding-top: 20px;
    margin-top: 70px;
}

.productBoard {
    margin-top: 70px;
    width: calc(100% - 10px);
    flex-direction: column;
    padding-top: 10px;
    align-items: center;
}

img.product-photo {
    height: 450px;
}

.productBoardInner2 {
    width: calc(100% - 50px);
    max-width: calc(100% - 50px);
    min-width: calc(100% - 50px);
}

.productBox {
    max-width: min-content;
        min-width: 45%;
}

button.product-box-btn {
    width: 90%;
}

.section-header {
    width: calc(100% - 10px);
}

span.section-header-righttoggle {
    gap: 5px;
}

.categoryBoxes {
    width: calc(100% - 10px);
}


.productBoxes {
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px 10px;
    padding: 0;
    width: 100%;
    justify-content: center;
}   

.faqBoxes {
    width: calc(100% - 20px);
}

.mainSearchSection {
    margin-top: 70px;
}
}