@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap'); 


:root {
    --background-color: #F7F7F7;
    --primary-color: #000;
    --secondary-color: #16537e;
    --secondary-color-extra: #4283b1;
    --en-font: "Inter", sans-serif;
    --bn-font: "Ubuntu Sans", sans-serif;
    --bg: #f9fafb;
    --card: #fff;
    --line: #e5e7eb;
    --text: #111827;
    --muted: #6b7280;
    --brand: #16a34a;
    --brand-soft: #dcfce7;
}


/*==== COMMON CSS START ====*/
body {
    font-family:var(--en-font);
    font-size: 15px;
    overflow-x: hidden;
    line-height: 1.5;
   
    background: var(--background-color);
}
p {
    margin: 0;
    color: #000;
    padding: 0;
}

button,
button:focus,
button:active {
    outline: none !important;
    box-shadow: 0 0 !important;
}

form input::placeholder {
    font-size: 15px;
    color: #888;
    text-align: left !important;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    list-style: none;
}

a,
a:hover,
a,
a:hover,
a:focus {
    color: #000;
    text-decoration: none;
    outline-offset: 0;
    outline: 0;
    transition: 0.35s all;
    cursor: pointer;
};

button,
button:focus,
button:active {
    text-decoration: none;
    border: 0;
    outline: 0;
}

.form-control, .form-control:focus, input, input:focus {
    outline: 0;
    border: 1px solid #ddd;
    box-shadow: 0 0 !important;
    border-radius: 0;
}

.parsley-errors-list {
    color: var(--secondary-color);
}

.parsley-error {
    border: 1px solid var(--secondary-color) !important;
}

img {
    max-width: 100%;
    height: 100%;
}

button {
    padding: 0;
    border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     font-family:var(--en-font);
    margin: 0;
}

svg {
    height: 16px;
    width: 16px;
}

.cursor {
    cursor: pointer;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.container {
    max-width: 1200px;
}

/* font face */
@font-face {
    font-family: "Bornomala Font";
    src: url("../fonts/Bornomala-Regular.ttf");
    src: url("../fonts/Bornomala-Regular.ttf?#iefix") format("embedded-opentype"),
        url("../fonts/Bornomala-Regular.ttf") format("woff2"),
        url("../fonts/Bornomala-Regular.ttf") format("woff"),
        url("../fonts/Bornomala-Regular.ttf") format("truetype"),
        url("../fonts/Bornomala-Regular.ttf") format("svg");
}

/*==== COMMON CSS END ====  */

/*==== SHOP BANNER CSS START ====*/
marquee.newsticker-color p {
    font-family: 'Bornomala Font';
    font-size: 16px;
}
/*  .index-news-line {*/
/*    display: block !important;*/
/*}*/
.head-multi-shop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f5f5f5;
}

.head-multi-shop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    padding: 16px;
    margin-top: 44px;
}

.head-multi-shop img {
    margin-right: 10px;
    padding-right: 14px;
    margin-top: 14px;
}
.shop-img img {
    height: 100px;
    width: auto !important;
}

.shop-button a {
    font-size: 16px;
    font-weight: 700;
    padding-right: 6px;
}

.shop-banner-slider .owl-item {
    padding: 0px 12px;
    /* margin-right: 0px !important; */
    margin-top: -19px;
}
.banner_area {
    display: grid;
    grid-template-columns: 69% 30%;
    gap: 15px;
    margin-top: 15px;
    align-items: stretch;
}
.creer_banner_details h3 {
    margin: 10px 0;
}
.wsit_resent {
    font-size: 12px;
}

.banner_right_area {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 15px;
    min-height: 0;
}
.shop-button i {
    height: 26px;
    width: 26px;
    background: var(--secondary-color);
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-size: 15px;
    color: #fff;
}

.shop-button {
    margin-top: 15px;
}

.shop-des h5 {
    font-weight: 300;
}

.shop-des strong {
    font-weight: 600;
}
.shop-item {
    margin-bottom: 16px;
    height: 145px;
    background: #f5f5f5;
}
.shop-item:hover {
    border-color: #fff;
    box-shadow: 0.5px 0.33px 15px 5px rgba(11, 28, 42, .15);
    z-index: 1;
}
.order_amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin: 0;
}


/*==== SHOP BANNER CSS END ====*/
.image_nav_btn {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.image_nav_btn i {
    background: var(--secondary-color-extra);
    color: #fff;
    width: 100%;
    height: 25px;
    /* border-radius: 50px; */
    font-size: 17px;
    text-align: center;
    line-height: 25px;
}


/*==== COUPON CSS START ====  */
.checkout-shopping {
    padding-right: 8px;
    position: sticky;
    top: 0;
}
button.checkout_btn {
    background: var(--secondary-color);
    width: 100%;
    border-radius: 5px;
    color: #fff;
    padding: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}
button.checkout_btn span {
    margin-right: 10px;
}
.checkout__submit p {
    color: #fff;
    font-size: 12px !important;
}
p.con_total {
    font-weight: 600;
}
.items__header_center {
    margin: 0 auto;
}
.coupon-section {
    background: #CBD2D5;
    padding: 10px 0;
    margin: 0;
    border-radius: 0;
}

.coupon-code p {
    font-size: 16px;
    text-align: center;
}

.coupon-code span {
    margin: 0 4px;
}

.coupon-code button {
    background: transparent;
}

.coupon-code span {
    text-transform: uppercase;
    text-decoration: underline;
    margin: 0 5px;
}

.coupon-section .btn-close {
    padding: 13px 18px;
    font-size: 12px;
}

/*==== COUPON CSS END ====  */

/*==== HEADER CSS START ====  */
.header-top {
    background: rgba(0, 119, 204, 0.97);
    display: flex;
    height: 50px;
    align-items: center;
}

.header-left span {
    margin-right: 15px;
    color: #fff;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
}

.header-left span a {
    color: #fff;
}

.header-left ul li a {
    margin: 0 5px;
}

.header-left ul {
    display: inline-block;
}

.header-right {
    text-align: right;
}

.header-right span ul {
    display: flex;
    justify-content: flex-end;
    column-gap: 4px;
}

.header-right a {
    color: #ffffffcc;
    border: 2px solid;
    font-size: 16px;
    border-radius: 5px;
    transition: 0.3s all;
    border-color: hsla(0, 0%, 100%, 0.5);
    height: 30px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-right a:hover {
    background: blue;
    border: 1px solid blue;
}

.header-left {
    font-size: 15px;
    height: 100%;
    display: flex;
    align-items: center;
}
.logo-area {
    padding: 10px 0;
    background: #34507e !important;
}
li.page-cat.offer__cat a {
    color: #000000;
}
/*.main-header {*/
/*    background: linear-gradient(to bottom, #02026a 32%, #42b5fb 105%);*/
/*}*/

.main-logo {
    height: 46px;
    text-align: center;
}

.main-logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.main-logo img {
    width: auto;
    height: 100%;
    margin-top: 0;
    object-fit: contain !important;
}

.sticky.is-sticky {
    background: #222;
    z-index: 9999;
    border-bottom: 1px solid #ddd;
}

.logo-header {
    display: grid;
    grid-template-columns: 20% 44% 27% 8%;
    gap: 9px;
    align-items: center;
    justify-content: center;
}
.offers__data h5 {
    font-size: 15px;
    font-weight: 400;
}
.offers__data p {
    font-size: 10px;
}
.offers__data {
    text-align: left;
}
.offers__icon.margin__left {
    margin-left: 27px;
}
.offers__item {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}

.all__offer__btn {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.main-search {
    margin: 9px 0 8px;
    position: relative;
    padding-left: 11px;
}

.search_result {
    position: relative;
}

.search_product {
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 99;
    top: 0;
    max-height: 600px;
    overflow-y: scroll;
    padding: 20px;
}

.search_product img {
    width: 50px;
    height: 50px;
    margin-top: 6px;
    border-radius: 5px;
}

.search_product li {
    width: 100%;
    display: grid;
    grid-template-columns: 65px auto;
    grid-gap: 15px;
    padding: 5px 15px;
    border-bottom: 1px solid #ddd;
    transition: 0.35s all;
}

.search_product ul li:hover {
    background: #f1f1f1;
}

.search_content .price {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 16px;
}
.search_content.price del {
    color: #999;
    font-weight: 400;
    font-size: 14px;
}

.mobile-show {
    display: none !important;
}

.mobile-header {
    display: none;
}

.mobile-categories ul li {
    display: block;
    z-index: 99999;
    width: 100%;
    height: auto;
}

.mobile-categories {
    position: fixed;
    z-index: 99999;
    background: #fff;
    top: 0;
    width: 85%;
    transition: 0.35s all;
    left: -100px;
    visibility: hidden;
    opacity: 0;
    height: 100%;
}

.mobile-categories.active {
    left: 0;
    visibility: visible;
    opacity: 1;
}

.mobile-search input {
    width: 87% !important;
}
.main-search form input {
    width: 88% !important;
    padding-left: 15px;
}
.mobile-search button {
    width: 12% !important;
}
.search_content .price del {
    color: #999;
    font-weight: 400;
    font-size: 14px;
}

.main-search form {
    height: 45px;
    border: 1px solid var(--secondary-color);
    width: 100%;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
}

.main-search form button {
    height: 96%;
    width: 12%;
    background: #55b9ff;
    right: 0;
    border-radius: 0px 5px 5px 0px;
    position: absolute;
}



.main-search form button svg {
    height: 20px;
    width: 35px;
    color: #fff !important;
    margin-top: -6px;
}

.mobile-nav li a {
    text-transform: capitalize;
    padding: 8px 15px;
    display: block;
    border-bottom: 1px solid #ddd;
}

.mobile-menu .nav li button.active {
    border-radius: 0;
    color: var(--secondary-color);
}

.main-search.mobile-search {
    margin: 0;
    padding: 0;
}

.main-search.mobile-search form {
    border: 1px solid #ddd;
}

.mobile-menu .nav li {
    width: 50%;
    float: left;
}

.mobile-menu .nav li button {
    margin: 0;
    padding: 12px 0;
    display: block;
    width: 100%;
    color: #222;
}

.header-list-items {
    text-align: right;
    margin: 5px 0;
}

.header-list-items ul {
    margin-top: 3px;
    display: flex;
    justify-content: end;
    align-items: center;
}

.for_order a i {
    font-size: 18px !important;
}
li.for_order a svg {
    height: 33px;
    width: 28px;
    color: #fff;
}
.header-list-items ul li {
    margin: 0 8px;
}

.header-list-items ul li a {
    display: inline-block;
}

.header-list-items ul li p {
    display: inline-block;
    text-align: center;
    position: relative;
    font-size: 15px;
    font-weight: normal;
}

.hover-data-more {
    position: absolute;
    width: 200px;
    z-index: 99;
    background: white;
    right: 0;
}
.hover-data-more ul {
    display: grid;
    text-align: left;
    margin: 0;
    padding: 0;
    justify-content: left;
}
li.more_items {
    border-bottom: 1px solid #ddd;
}

li.more_items a {
    padding: 7px;
}
li.more_items a i {
    color: #6a6363;
}
li.for_order.more__data__relative {
    position: relative;
}
li.more_items {
    margin: 0;
    padding: 0;
    width: 100%;
}
.hover-data-more{
    opacity:0;
    visibility:hidden;
    transition:0.3s all;
    top:53px;
}
li.for_order.more__data__relative:hover .hover-data-more{
    opacity:1;
    visibility:visible;
     top:40px;
}

li.more_items a i {
    color: #6d6666 !important;
    font-size: 12px !important;
    margin-right: 10px;
}


.margin-shopping {
    margin-right: 10px;
}

.header-list-items ul li i {
    font-size: 20px;
    color: #ffffff;
}
.cart-svg {
    height: 22px;
    width: 22px;
}

.header-list-items ul li span {
    position: absolute;
    top: -8px;
    right: -12px;
    background: red;
    color: #fff;
    height: 18px;
    width: 18px;
    line-height: 18px;
    font-size: 12px;
    border-radius: 50px;
}
.hover-des {
    position: absolute;
    font-size: 12px;
    margin-left: 0px;
    top: 65px;
    background: #515151;
    color: #fff;
    padding: 8px 8px;
    visibility: hidden;
    opacity: 0;
    border-radius: 7px;
    transition: 0.34s all ease;
}

.header-list-items li :hover .hover-des {
    visibility: visible;
    opacity: 1;
    transition: 0.34s all ease;
}

.for_order:hover .hover-des {
    visibility: visible;
    opacity: 1;
    transition: 0.34s all ease;
}

#cart-qty {
    position: relative;
}

.cshort-summary {
    position: absolute;
    top: 55px;
    width: 390px;
    right: 0;
    max-height: 500px;
    z-index: 999;
    background: #fff;
    padding: 10px;
    box-shadow: 0px 0px 5px 1px #ddd;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: 0.35s all;
    overflow: scroll;
}

.go_cart, .go_cart:hover {
    background: var(--secondary-color);
    width: 100%;
    color: #fff;
    border-radius: 5px;
    padding: 10px 0;
    margin-top: 5px;
    display: block;
    text-align: center;
    font-weight: 600;
}

#cart-qty:hover .cshort-summary {
    top: 45px;
    opacity: 1;
    visibility: visible;
}

.cshort-summary ul li p {
    font-size: 15px;
    font-weight: 600;
    display: block;
    text-align: left;
}

.cshort-summary img {
    width: 45px;
    height: 45px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px;
}

.cshort-summary ul {
    display: grid;
    grid-template-columns: 15% 45% 20% 20%;
    margin: 5px 0;
}

.cshort-summary .cart_remove {
    margin-left: 5px;
}

.cshort-summary ul li {
    display: block;
    text-align: left;
    margin: 5px 0;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.cshort-summary .remove-cart, .cshort-summary .remove-cart:focus {
    height: 25px;
    width: 25px;
    line-height: 20px;
}
.catagory_menu {
    position: relative;
}

.main-menu {
    position: relative;
    height: 42px;
}
.main-menu ul li {
    display: inline-block !important;
    text-align: left;
}
.main-menu ul li a {
    text-transform: capitalize;
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #f6f6f6;
    margin: 0 5px;
    padding: 8px 0;
}
.offers__data {
    text-align: left;
    color: #fff;
}
.offers__data p {
    font-size: 10px;
    color: #fff;
}
.main-menu li i {
    color: #000000;
    position: absolute;
    right: -13px;
    top: 19px;
    font-size: 14px;
}
a.main_cat_relative {
    position: relative;
}

.cat-scroll-wrapper {
    padding: 2px 0;
    border-radius: 4px;
    position: relative;
}


.cat-scroll-wrapper::-webkit-scrollbar {
    display: none;
}
.menu-area {
    background: #2576ae !important;
    padding: 0px 0;
}

.menu-area-inner {
    position: relative;
}
.cat-scroll-inner {
    display: flex;
    white-space: nowrap;
    scroll-behavior: smooth;
    gap: 10px;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.cat-scroll-inner::-webkit-scrollbar {
    display: none;  /* Chrome, Safari */
}


.cat-scroll-inner li a {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
}

.cat-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #fff;
    background: rgba(0,0,0,0.3);
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 5;
    user-select: none;
}

.cat-nav-btn.left {
    left:-85px;
}

.cat-nav-btn.right {
    right: -85px;
}
.cat-nav-btn:hover {
    background: rgba(255,255,255,0.4);
}

.mega-menu-container {
    position: relative;
}
.mega_menu ul {
    margin-bottom: 30px;
}

.mega_menu {
    position: absolute;
    /* width: 100%; */
    background: #f7f7f7;
    left: 0;
    top: 50;
    padding: 30px;
    z-index: 9999;
    border: 1px solid #ddd;
    transition: 0.35s all;
    visibility: hidden;
    opacity: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: left;
    height: 445px;
    overflow-y: auto;
    gap: 0 8px;
    white-space: normal;
}
.main-menu ul li:hover .mega_menu {
    top: 48px;
    visibility: visible;
    opacity: 1;
    left: 0;
}

.mega_menu ul li {
    display: block;
}

.mega_menu ul li a.cat-title {
    font-size: 16px;
    color: #004b7b;
}

.mega_menu ul li a {
    padding: 0 0;
    width: 170px;
    text-transform: capitalize;
    font-size: 13px;
    font-weight: 400;
    color: #313131;
    margin: 4px 0 !important;
    display: block !important;
}

.cat-title {
    font-weight: 600 !important;
}

.main-menu ul li a:hover {
    color: #e09e53;
    font-size: 20px;
    margin-top: -4px;
    font-weight: 700;
}
li.cat_bar {
    padding: 12px;
    border-radius: 6px;
    background: var(--secondary-color);
    width: 270px;
    margin-right: 10px;
}
li.cat_bar a {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}
li.cat_bar span {
    padding: 0 26px;
    font-weight: 600;
}
li.cat_bar i {
    padding: 0px 15px;
}
li.page-cat {
    margin-right: 20px;
    font-size: 15px;
    font-weight: 700;
}
li.page-cat:last-child {
    margin-right: 0;
}

.master-menu {
    background: #ffff;
}

/*==== HEADER CSS END ====  */
/*==== BEST DEALS CSS START ===*/
.best-saller-head {
    margin-top: 50px;
    border-radius: 20px;
    display: flex;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 14px;
    margin-bottom: 20px;
    justify-content: space-between;
}

li.best-saller a {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    padding-left: 40px;
}
.best-saller-left {
    color: var(--secondary-color);
}
.best-saller-left h5{
    font-size: 22px;
    font-weight: 700;
}

.deals_product_inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    overflow: hidden;
    padding: 0px;
}
.button-products {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #ddd;
    padding: 8px 0px;
}
.special-product-name {
    margin-top: 20px;
    margin-bottom: -20px;
}
.special-product-price p {
    font-size: 22px;
    padding: 16px 0px;
    color: #dc3545;
    text-align: center;
    margin-top: 23px;
    font-weight: 700;
}
.special-product-name a {
    color: var(--secondary-color);
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
}
.special-offer-bottom h4 {
    padding-bottom: 16px;
}
a.view_more_btn {
    text-align: center;
    float: center;
    background: var(--secondary-color);
    text-transform: capitalize;
    font-size: 15px;
    padding: 10px 15px;
    color: #fff;
    font-family:var(--en-font);
}
a.view_more_btn:hover {
    color: #222 !important;
    transition: 0.34s all ease;
}
.btn-view {
    text-align: center;
}

.section-bg {
    background-color: var(--secondary-color);
    /* background: linear-gradient(141.11deg, rgb(73, 119, 238) 0%, rgb(255 255 255) 100%); */
    padding: 15px;
    border-radius: 5px;
}

.section-bg .section-title h3 a {
    color: #fff;
}

.section-bg .section-title a {
    color: #fff;
}
/*==== BEST DEALS CSS END ===*/

/*==== CATEGORY SECTION CSS START ====  */

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    margin-top: 25px;
}

.section-title h3 {
    text-transform: uppercase;
    font-size: 20px;
}

a.view_all:hover {
    color: var(--primary-color);
}

.front-category ul li a {
    color: #555;
    padding: 5px 8px;
    display: inline-block;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    transition: 0.35s all;
    margin-right: 5px;
}

.front-category ul li a:hover {
    background: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
}

.custom_paginate {
    margin-top: 25px;
}

.infinite-pagination {
    display: block !important;
    width: 100%;
    margin-top: 25px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.infinite-pagination nav {
    width: 100%;
}

.infinite-pagination nav > div:last-child {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.infinite-pagination .pagination {
    flex-wrap: nowrap;
    justify-content: flex-end;
    width: max-content;
    min-width: max-content;
    margin: 0 0 4px auto;
}

.infinite-pagination nav p {
    margin: 0;
    white-space: nowrap;
}

.infinite-scroll-sentinel {
    width: 100%;
    height: 1px;
}

.infinite-scroll-status {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #6c757d;
    font-size: 13px;
    text-align: center;
}

.infinite-scroll-status.has-error {
    color: #b42318;
    cursor: pointer;
}

.infinite-scroll-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #d9e2e8;
    border-top-color: var(--secondary-color);
    border-radius: 50%;
    animation: infinite-scroll-spin .7s linear infinite;
}

@keyframes infinite-scroll-spin {
    to {
        transform: rotate(360deg);
    }
}

/*==== CATEGORY SECTION CSS END ====  */

/*==== SELLERPIXER SLIDER CSS START ====  */

.banner-right-item {
    overflow: hidden;
    height: auto;
    min-height: 0;
    border-radius: 5px;
    clip-path: inset(0 round 5px);
    isolation: isolate;
}

.banner-right-item a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

.banner-right-item img {
    transition: 0.35s all;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.banner-right-item:hover.banner-right-item img {
    transform: scale(1.1);
}

.banner-right .item-1 {
    margin-bottom: 25px;
}

/*==== SELLERPIXER SLIDER CSS END ====  */
/*==== SLIDER CSS START ====  */
.main-slider {
    position: relative;
    z-index: -1;
}

.slider-section .offset-sm-3 {
    padding-left: 0;
}

.home-slider-container {
    width: 100%;
    height: auto;
    margin-top: 0;
}

.main_slider {
    padding: 0;
}

.main_slider .owl-stage-outer {
    border-radius: 6px;
    overflow: hidden;
    clip-path: inset(0 round 6px);
    isolation: isolate;
    transform: translateZ(0);
}

.main_slider .owl-nav button span {
    font-size: 30px;
}
.main_slider .owl-dots {
   position: absolute;
   top: 90%;
   transform: translate(-81%, -50%);
   left: 50%;
}
/*.main_slider .owl-dots .owl-dot span {
   width: 40px;
   height: 5px;
   margin: 5px 7px;
   background: red;
   display: block !important;
   -webkit-backface-visibility: visible;
   transition: opacity 0.2s ease;
   border-radius: 30px;
}*/
.main_slider .owl-dots {
    position: absolute;
    transform: translate(-81%, -50%);
    left: 55%;
    top: 103%;
}
.main_slider .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--secondary-color);
    width: 40px;
    height: 5px;
    transition: 0.35s all ease;
}
.main_slider .owl-dots .owl-dot span {
    width: 40px;
    height: 5px;
    background: #222;
    transition: 0.35s all ease;
}

.main_slider .owl-dots.disabled, .main_slider .owl-nav.disabled {
    display: block;
}

.main_slider .owl-nav button {
    height: 40px;
    width: 35px;
    background: var(--secondary-color) !important;
    transition: 0.35s all;
}

.main_slider .owl-nav button:hover {
    background: #E74B2C !important;
    color: #fff;
}

.main_slider .owl-prev {
    position: absolute;
    left: -10px;
    visibility: hidden;
    opacity: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
    transition: 0.35s all;
}

.main_slider .owl-next {
    position: absolute;
    right: -10px;
    visibility: hidden;
    opacity: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
    transition: 0.35s all;
}

.main_slider:hover.main_slider .owl-prev {
    left: 10px;
    visibility: visible;
    opacity: 1;
}

.main_slider:hover.main_slider .owl-next {
    right: 10px;
    visibility: visible;
    opacity: 1;
}



.slider-item {
    width: 100%;
    height: auto;
    aspect-ratio: 2.18 / 1;
    border-radius: 6px;
    overflow: hidden;
    clip-path: inset(0 round 6px);
    isolation: isolate;
}
.slider-item a {
    display: block;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}
.items__header_lefts p span {
    margin-left: 6px;
}
.slider-item img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.slider-des {
    padding-left: 40px;
}

.slider-des h5 {
    color: #0062bd;
    font-weight: 600;
    font-size: 16px;
    margin-top: 58px;
    margin-bottom: 25px;
}

.slider-des h4 {
    font-size: 23px;
    font-weight: 300;
    padding-right: 19px;
    color: #5c5c5c;
    line-height: 47px;
    margin-bottom: 20px;
}

.slider-des a {
    background: var(--secondary-color);
    padding: 10px 35px;
    font-size: 20px;
    border-radius: 11px;
}

/*==== SLIDER CSS END ====  */

/*====== COMPANY SERVICE START ===== */
.company-all-service {
    background: #f2f2f2;
    padding: 15px;
    margin-top: 10px;
}
.company-all-rules {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}
.company-rule {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #8b5e1f;
}
.company-rule i {
    font-size: 18px;
    color: #28a745;
    margin-right: 8px;
}
.separator {
    border-left: 2px solid #ccc;
    height: 20px;
    margin: auto;
}

/*====== COMPANY SERVICE END ===== */


/*==== FRONT CATEGORY  CSS START ====  */
.home-category {
    padding: 15px 0;
}

.category-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.category-title h3 {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    color: #222;
}
.brand__img_wist {
    height: 65px !important;
}

.cat-img {
    width: 100%;
    margin: 0 auto;
    background: white;
    padding: 15px;
    border-radius: 3px;
    aspect-ratio: 1;
}

.cat-img img {
    height: 100%;
    object-fit: contain;
    width: 100%;
    transition: 0.35s all;
}

/*.cat-item:hover .cat-img img {*/
/*    transform: scale(1.1);*/
/*}*/
.breadcrumb {
    margin: 0;
    background: white;
    padding: 5px 10px;
    border: 1px solid #f1eaea;
    margin-top: 10px;
}

.breadcrumb i {
    color: #949494;
    padding: 0px 5px;
    font-size: 10px;
}
h4.quick__links {
    font-size: 17px;
    margin-left: 16px;
    position: relative;
    color: #045c2e;
}
h4.quick__links::after {
    height: 2px;
    width: 43px;
    background: #00a751;
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    border-radius: 5px;
}
.cat-name {
    text-align: center;
    padding: 5px 0;
    text-transform: capitalize;
    font-size: 15px;
}

.category-product.no-product {
    display: block;
    text-align: center;
    padding: 100px 0;
}

.no-found img {
    width: 150px;
}

/*==== FRONT CATEGORY  CSS END ====  */

/*==== FOOTER  CSS START ====  */
.scrolltop {
    position: fixed;
    right: 34px !important;
    bottom: 10px !important;
    width: 40px !important;
    background: var(--secondary-color) !important;
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 50% !important;
    text-align: center !important;
    color: #ffff !important;
    font-size: 24px !important;
    cursor: pointer;
    z-index: 99;
}

.footer-gap {
    margin: 15px 0;
    overflow: hidden;
}

footer {
    padding-bottom: 0 !important;
}

.section-title-right ul li a {
    text-transform: capitalize;
    margin-left: 10px;
    cursor: pointer;
}

.footer-menu ul li a {
    color: #aeaeae !important;
    margin: 8px 0;
    display: block;
    transition: 0.35s all;
}

.footer-top {
    padding: 50px 0;
    background: #141414;
}

.footer-about {
    padding-right: 70px;
}

.footer-about p {
    text-align: left;
    margin: 5px 0;
    color: #e3e3e3;
    font-size: 16px;
}

.footer-about h3 {
    font-size: 16px;
    font-weight: bold;
    color: #dee5e5;
    margin: 10px 0;
}

.footer-about ul li a {
    display: block;
    height: 35px;
    line-height: 35px;
    width: 35px;
    border-radius: 50px;
    margin: 0 2px;
    text-align: center;
    color: #fff;
}

.footer-menu ul li a:hover {
    color: var(--secondary-color);
    margin-left: 2px !important;
}

.footer-about a {
    display: block;
    color: #fff;
}

.footer-about a img {
    height: auto;
    width: 160px;
    object-fit: contain;
}

.footer-menu .title {
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    font-size: 15px;
}

.footer-menu .title a:hover {
    margin-left: 0 !important;
}

.footer-menu ul li {
    display: block;
}

.social_link {
    text-align: center;
    margin-top: -10px;
    display: flex;
    justify-content: center;
}

.social_link li {
    display: inline-block;
}

.social_link li a {
    background: var(--secondary-color);
    height: 35px;
    width: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 5px;
    color: #fff !important;
    margin: 10px 2px !important;
    margin-bottom: 0 !important;
}

.delivery-partner {
    text-align: center;
}

.social_link li a:hover {
    background: var(--primary-color);
}

.footer-bottom {
    background: #010101;
    padding: 10px 0;
}

.copyright p {
    text-align: center;
    color: #a0a0a0;
}

/*==== FOOTER CSS END ====  */

/*==== FOOTER FIXED MENU START ====  */

.footer_nav {
    display: none;
    text-align: center;
    padding: 3px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: var(--secondary-color);
    z-index: 99;
    /* border-top: 1px solid #ddd; */
}

.footer_nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.footer_nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}


.footer_nav ul li a span {
    display: block;
    font-weight: 800;
}

.footer_nav ul li {
    position: relative;
}

.footer_nav ul li i {
    font-size: 21px;
    width: 35px;
    height: 35px;
    padding: 9px;
    border-radius: 7px;
}

.item_count {
    position: absolute;
    top: -5px;
    right: 25px;
    background: var(--secondary-color);
    width: 15px;
    height: 15px;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    border-radius: 50px;
}

/*==== FOOTER FIXED MENU END ====  */
/*==== SPECIAL OFFER CSS DESIGN START ====*/
.special-offer:hover {
    border-color: #fff;
    box-shadow: 0.5px 0.33px 15px 5px rgba(11, 28, 42, .15);
    z-index: 1;
}

.special-offer-bottom:hover {
    border-color: #fff;
    box-shadow: 0.5px 0.33px 15px 5px rgba(11, 28, 42, .15);
    z-index: 1;
}
.special-offer-bottom img {
    height: 390px;
}
.special-offer {
    text-align: center;
}

.special-offer-bottom {
    text-align: center;
}

.special-offer {
    border: 2px solid var(--secondary-color);
    border-radius: 20px;
    padding: 30px;
    position: relative;
}

.special-offer-bottom {
    border: 2px solid var(--secondary-color);
    border-radius: 20px;
    padding: 30px;
    position: relative;
}

.specialoffer-item a.special-image-link {
    width: 100%;
    display: block;
    aspect-ratio: 1;
    margin: 25px 0px;
}
.specialoffer-item a.special-image-link img {
    object-fit: cover;
}

.special-product-name a {
    color: #0062bd;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
}

.special-product-price h5 {
    font-size: 30px;
    padding: 16px 0px;
    color: #525050;
    margin-top: 15px;
}
.special-product-price del {
    color: var(--primary-color);
    font-size: 26px;
}

.special-product-price p {
    font-size: 22px;
    padding: 16px 0px;
    color: #dc3545;
    text-align: center;
    margin-top: 23px;
    font-weight: 700;
}

.special-product-price span {
    color: #9e9090 !important;
}

.special-counter h6 {
    margin-bottom: 17px;
    margin-top: 17px;
    font-size: 16px;
    color: #4a4646;
}

.deal-stock {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.stock-sold {
    text-align: left;
    margin-bottom: 5px;
}

.stock-available {
    text-align: end;
    margin-bottom: 5px;
}

.product_sliders {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
}
.product_slider_category {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 2px 13px;
}

section.special-feature {
    padding-top: 47px;
    margin-bottom: 20px;
}
.timer_inner {
    display: flex;
    justify-content: center;
    background-color: var(--secondary-color);
    padding-top: 16px;
    border-radius: 5px;
    padding-bottom: 16px;
}

.timer_inner .syotimer__body {
    display: flex;
    grid-gap: 5px;
}

.timer_inner .syotimer-cell {
    width: 60px;
    text-align: center;
    background: #d2dde0;
    color: #222;
    border-radius: 5px;
    font-size: 21px;
    padding: 10px;
    font-weight: 900;
}
.flipper {
    color: var(--secondary-color) !important;
    font-size: 30px !important;
}

.flipper-digit:after {
    height: 0px;
    background: var(--secondary-color);
}

.flipper-group label {
    font-size: 40%;
}
ul#pills-tab {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-pills .nav-link {
    background: 0 0;
    border: 0;
    border-radius: 0px;
    font-size: 18px;
    font-weight: 500;
    padding: 0 0 6px 0;
    margin: 0px 18px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background: #f7f7f7;
    color: var(--secondary-color);
}

.nav-pills .nav-link.active::after {
    border-bottom: 0;
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    height: 0.5px;
    background: var(--secondary-color);
    width: 100%;
    transition: all 0.2s ease;
    transform: translateX(-50%);
}

.nav-pills .nav-link.active::before {
    position: absolute;
    content: "";
    left: 50%;
    background: var(--primary-color);
    bottom: -9px;
    transform: translateX(-50%);
    height: 8px;
    width: 15px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.nav-link {
    color: #000000;
    position: relative;

}

.nav-link:hover::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    height: 0.5px;
    background: var(--secondary-color);
    width: 35px;
    z-index: -1;
    transform: translateX(-50%);
}

.nav-link:focus, .nav-link:hover {
    color: #000000
}

.border_bottoms {
    border-bottom: 1px solid #ddd;
}

/*==== SPECIAL OFFER CSS DESIGN END ====*/
/* ==== FEATURE PRODUCT CSS CODE START ==== */
.feature-price p {
    font-size: 16px;
    font-weight: 600;
    padding-left: 10px;
}

.show-product {
    display: grid;
    grid-template-columns: 25% 75%;
    padding: 4px;
    /* border: 1px solid; */
    margin-bottom: 26px;
}

.feature-header {
    position: relative;
}

.feature-header h5 {
    border-bottom: 2px solid #ddd;
    margin-bottom: 25px;
    padding-bottom: 12px;
    font-size: 24px;
}

.feature-header::before {
    content: '';
    border: 2px solid var(--secondary-color);
    height: px;
    width: 107px;
    position: absolute;
    bottom: 0;
}
.details-ratting-wrap i {
    font-size: 10px;
    color: #ff770b;
    font-weight: 600;
}

.product_note{
    display:flex ;
   
}

.spro_name a {
    color: #4c4c4c;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    transition: 0.34s all ease;
}

.spro_name a:hover {
    color: var(--primary-color);
    transition: 0.34s all ease;
    font-weight: 600;
}

.shop-item {
    margin-bottom: 16px;
    height: 145px;
    background: #f5f5f5;
}
.feature-img img {
    height: 70px;
    margin-top: 7px;
    padding-right: 3px;
}
.spro_name {
    text-align: left;
    font-weight: 400;
    padding-bottom: 5px;
    transition: all .2s ease;
    background: white;
    height: 42px;
    margin-bottom: 7px;
    overflow: hidden;
    padding: 0 10px;
}
.details-ratting-wrap.mreview_pro {
    color: #dc3545;
}
section.multi-products {
    background: #fff;
    padding-top: 25px;
}
.big-feature-img img {
    padding-top: 17px;
    width:100%;
}
/* ==== FEATURE PRODUCT CSS CODE END ==== */
/*==== NEWS LETTER CSS CODE START ====*/
.newsletter {
    background: var(--secondary-color);
}

.newsletter-logo img {
    height: 33px;
    margin-top: 16px;
}

.footer-head {
    display: grid;
    grid-template-columns: 30% 30% 40%;
}

.newslater-section {
    display: grid;
    grid-template-columns: 10% 90%;
}

.newsletter-title {
    margin-top: 19px;
    font-size: 24px;
    color: #fff !important;
}

.neswletter-des {
    margin-top: 25px;
    color: #fff !important ;
}

.footer-newsletter .newsletter-marketing-text {
    margin-left: 25px;
    font-size: 1.071em;
}

.footer-search form {
    height: 51px;
    margin: 0 auto;
    margin-top: 0px;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 20px;
}

.footer-search form input {
    height: 100%;
    padding: 7px 27px;
    font-size: 14px !important;
    background: #fff;
    width: 80%;
    float: left;
    border-radius: 5px 0 0 5px;
}

.footer-search form input::placeholder {
    color: rgb(19, 12, 12);
    font-size: 14px;
}

.footer-search form button {
    height: 100%;
    float: left;
    font-size: 18px;
    font-weight: 500;
    background: #333e48 !important;
    width: 20%;
    /* margin-left: -111px; */
    border-radius: 0px;
}

.footer-search form button {
    color: #222 !important;
}

.footer-search a {
    color: #fff;
}
ul.social_links li {
    display: inline-block;
    margin-right: 15px;
    font-size: 20px;
}
ul.social_links {
    padding-top: 10px;
    margin-bottom: -8px;
}
/*==== NEWS LETTER CSS CODE END ====*/
/*==== DETAILS CSS START ====  */
.indicator_thumb.thumb_slider .owl-nav .owl-prev {
    background: var(--secondary-color) !important;
    left: -2px;
    top: 24px;
    height: 25px !important;
    width: 25px !important;
    font-size: 19px !important;
    position: absolute;
}
.indicator_thumb.thumb_slider .owl-nav .owl-next {
    background: var(--secondary-color) !important;
    right: -2px;
    top: 24px;
    height: 25px !important;
    width: 25px !important;
    font-size: 19px !important;
    position: absolute;
}

img.un_login_img {
    height: 343px;
}

.product-section {
    padding: 30px 0;
}
.details-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}
.details-banner-item img {
    height: auto;
    border-radius: 10px;
}
.details-banner-item {
    margin-top: 10px;
}

.warranty p {
    font-size: 14px;
    color: red;
    padding-top: 10px;
    font-weight: 600;
}

.country p {
    font-size: 15px;
    color: #0EC344;
    padding-top: 10px;
    font-weight: 600;
}

.product-cart .name {
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
}
small.btn_space {
    width: 3px !important;
}
.product__details__grid {
    display: grid;
    grid-template-columns: 20% 78%;
    gap: 2%;
}

.details-price {
    font-size: 30px;
    color: var(--secondary-color-extra);
    margin: 1px 0 0px 0;
    font-weight: 700;
}
.details-price del {
    color: #8f8f8f;
    margin: 5px 0;
    font-size: 17px;
    font-weight: 400;
    margin-left: 10px;
}
.cat-item:hover img {
    transform: scale(1.2);
}

.details_slider {
    border: 1px solid #ddd;
    border-radius: 5px;
    height: 505px;
    overflow: hidden;
}

.indicator_thumb {
    position: relative;
}

.indicator_thumb.thumb_slider .owl-nav button {
    background: var(--secondary-color) !important;
    margin: 5px 2px;
}

.indicator_thumb {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
    margin: 0 0 10px 0;
}

.indicator-item {
    border: 1px solid #ddd;
    border-radius: 0px;
    overflow: hidden;
    height: 105px;
}

.indicator-item img {
    width: 100%;
    object-fit: contain;
}

.dimage_item img {
    height: 505px;
    object-fit: contain;
}

.color_inner {
    display: flex;
}

.color-title {
    margin-bottom: 5px;
    margin-top: 6px;
    font-weight: 600;
}

.size_inner {
    display: flex;
}

.pro_unig label {
    font-weight: 600;
    margin-bottom: 10px;
}

.pro_brand p {
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 7px;
    margin-top: 10px;
    display: flex;
}
.pro_brands p {
    font-weight: 600;
    color: #000;
}

.qty-cart .quantity {
    position: relative;
    border: 2px solid #d1e4f1;
    height: 42px;
    overflow: hidden;
    width: 130px;
    border-radius: 5px;
}

.quantity input {
    position: relative;
    text-align: center;
    font-size: 16px;
    height: 35px;
    width: 100%;
    pointer-events: none;
    font-weight: 500;
    color: #4F6FB6;
    border: none;
}

.quantity .minus {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    height: 48px;
    line-height: 50px;
    width: 40px;
    text-align: center;
    font-size: 40px;
    cursor: pointer;
    background-color: #E5F2FB;
}

.quantity .plus {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 48px;
    line-height: 50px;
    width: 40px;
    text-align: center;
    font-size: 26px;
    cursor: pointer;
    background-color: #E5F2FB;
}
.order_now_btn, .order_now_btn:disabled {
    font-size: 13px;
    color: #fff;
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    border-radius: 3px;
    margin-left: 5px;
    height: 42px;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    font-weight: 600;
}
.order_now_btn:hover,
.order_now_btn:active {
    color: white !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    outline: 0;
    color: #fff !important;
}

.add_cart_btn, .add_cart_btn:disabled {
    color: #fff;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 0;
    height: 42px;
    border-radius: 5px !important;
    font-size: 13px;
    font-weight: 600;
}
.single_product {
    display: flex;
    align-items: center;
    gap: 5px;
}

.details__wish {
    width: 47px !important;
    height: 42px !important;
    margin: 9px 0 0 5px;
}
.pro_brand.stock {
    margin-top: 20px;
}

.call_now_btn {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0EC344;
    border: 0;
}

.call_now_btn i {
    margin-right: 11px;
    font-size: 28px;
}

.add_cart_btn:hover,
.add_cart_btn:active {
    color: #fff !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.delivery_details tr td {
    color: #222 !important;
}

.pro_details_area {
    background: #fff;
    padding: 40px 0;
}

.details-tab .nav-link {
    background: #F7F7F7;
    color: #222;
    margin-right: 5px;
    border: 1px solid #ddd;
    border-radius: 0;
    border-top: 2px solid #ddd;
    border-bottom: 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
}

.details-tab .nav-link.active {
    border-top: 2px solid var(--primary-color);
}

.details-tab .tab-content {
    border: 1px solid #ddd;
}

.details-tab .nav-tabs {
    border: 0;
}

.description {
    padding: 30px;
}

.description img {
    width: 100% !important;
}

.description ul {
    margin-left: 12px;
}

.description ul li a {
    padding: 6px 20px;
    display: inline-block;
    box-shadow: 0px 0px 3px #ddd;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
}

.description ul li.active a,
.description ul li:hover a {
    background-color: #0a3a66;
    color: #fff;
}

.review-inner {
    padding: 30px;
}

.review-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.review-btn {
    text-align: right;
}

.review-btn button {
    background: #03A6E5;
    color: #fff;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 16px;
    text-transform: capitalize;
}

.review-title h4 {
    font-weight: 600;
    font-size: 19px;
    margin-bottom: 5px;
}

.product-ratting {
    display: none;
}

.product-ratting i {
    color: #FF7E22;
    font-size: 12px;
}

.review-card {
    background: #f1f1f1;
    padding: 15px;
    border-radius: 5px;
    position: relative;
    margin: 10px 0;
}

.review_star {
    color: #FF7E22;
    margin-bottom: 7px;
}

.details-action-box .empty-content {
    padding: 50px 0;
    text-align: center;
}

.details-action-box .empty-content i {
    font-size: 3rem;
    height: 80px;
    width: 80px;
    text-align: center;
    line-height: 80px;
    background-color: var(--secondary-color)33;
    border-radius: 50%;
    color: var(--secondary-color);
}

p.empty-text {
    text-align: center;
}

.empty-review {
    padding: 50px 0;
    text-align: center;
    border-top: 1px solid #ddd;
    margin-top: 15px;
}

.empty-review i {
    height: 80px;
    width: 80px;
    line-height: 80px;
    background: #00aef033;
    font-size: 30px;
    border-radius: 50px;
    color: #00aef0;
}
.modal-content input, .modal-content input:focus {
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
}
.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
}

.rating>label {
    display: inline-block;
    position: relative;
    width: 28px;
    font-weight: 600;
    color: #009e60;
}

.rating label {
    font-size: 20px !important;
    cursor: pointer !important;
}

textarea#message-text {
    border: 2px solid;
    border-color: #009e60;
    max-width: 450px;
}

.rating>label.active:before,
.rating>label.active~label:before,
.rating>label:hover:before,
.rating>label:hover~label:before {
    content: "\2605";
    position: absolute;
    color: #009e60;
}

.rating input {
    display: none;
}

button.details-review-button {
    min-width: 126px;
    background: #0f821d;
    margin-top: 10px;
    padding: 7px;
    color: white;
    font-size: 14px;
    text-align: center;
    border-radius: 3px;
}

.page-title h5 {
    font-weight: 600;
    font-size: 18px;
}

.pro_vide h2 {
    font-size: 18px;
    margin-bottom: 15px;
}

.pro_vide {
    border: 1px solid #ddd;
    padding: 15px;
    margin-top: 25px;
    position: sticky;
    top: 140px;
}

.details_right {
    padding: 0px 20px;
}

.details-ratting-wrapper {
    margin-bottom: 10px;
}

.details-ratting-wrapper i {
    color: #FFDF00;
}

.details-ratting-wrapper i.far.fa-star {
    color: #959595;
}

.all-reviews-button {
    text-decoration: underline;
    margin-left: 20px;
}

.related-product-section {
    background: #fff;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.related-title {
    margin-bottom: 20px;
}

.related-title h5 {
    font-weight: 600;
    font-size: 18px;
    text-transform: uppercase;
}

/*==== DETAILS CSS END ====  */

/*====  CATEGORY CSS START ====  */
.page_title p {
    color: #000000;
    font-weight: 600;
    font-size: 18px;
}

.page_title {
    margin-bottom: 25px;
}

.cust_according_body ul li {
    display: block !important;
}

.cust_according_body ul li a {
    display: block !important;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

.cust_according_body ul li:hover a {
    background-color: var(--secondary-color)38;
}

.subcategory-filter-label {
    display: flex;
    column-gap: 10px;
    padding: 5px 10px;
    cursor: pointer;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 600;
}

.subcategory-filter-list p {
    color: #555;
}

.subcategory-filter-label:hover {
    background-color: var(--secondary-color)38;
}

.subcategory-filter-label input {
    position: relative;
    border: 2px solid var(--secondary-color);
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 .6em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    appearance: none;
    opacity: .5;
    margin-top: 3px;
}

.subcategory-filter-label input[type=checkbox]:checked {
    background-color: var(--secondary-color);
    opacity: 1;
}

.subcategory-filter-label input[type=checkbox]:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 6px;
    height: 11px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    margin: -1px -2px 0 0px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
}

.filter-price-inputs {
    display: flex;
    justify-content: space-between;
}

p.min-price input {
    width: 70px;
}

p.max-price input {
    width: 70px;
}

.ui-slider-horizontal .ui-slider-range {
    background-color: var(--secondary-color);
}

.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 {
    border-radius: 50px;
}

.cust_according_body {
    padding: 10px 0;
}

.slider-box {
    padding: 10px 25px;
}


/*====  CATEGORY CSS END ====  */




/*=== WISTLIST AND COMPARE CSS START ===*/
.wish-compare-inner button {
    font-size: 16px;
}
/*.product_item:hover .wish-compare {*/
/*    visibility: visible;*/
/*    z-index: 99;*/
/*    opacity: 1;*/
/*    scale: 1;*/
/*    transition: 0.34s all ease;*/
/*}*/
.product_item_inner {
    position: relative; 
    overflow: hidden;   
     border-bottom: 0;
    transition: 0.35s all;
}

.wish-compare {
    position: absolute;
    top: 10px;
    right: -80px; 
    z-index: 9;
    opacity: 0; 
    visibility: hidden;
    transform: scale(0.9); 
    transition: all 0.34s ease;
    border-radius: 10px 0 0 10px;
}
.quick-view {
    position: absolute;
    right: 7px;
    top: 150px;
    z-index: 9;
    cursor: pointer;
    transition: 0.3s all;
}
td.compare-cart svg {
    height: 30px;
    background: var(--primary-color);
    width: 30px;
    padding: 7px;
    border-radius: 50%;
}
.compare_store {
    background: #fff;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    line-height: 35px;
    color: #222;
    border: 1px solid #222;
}


a.quick_view i {
    /* background: #00a751; */
    padding: 5px 4px;
    text-align: center;
    align-items: center;
    color: var(--secondary-color);
    border-radius: 5px;
    font-weight: 700;
    z-index: 11;
}
.wishlist_store {
    background: var(--secondary-color-extra);
    border-radius: 5px;
    height: 35px;
    width: 43px;
    line-height: 33px;
    color: #ffffff;
    margin-top: 0px;
}
.wishlist_store_ex {
    background: var(--secondary-color-extra);
    border-radius: 5px;
    height: 35px;
    width: 43px;
    line-height: 33px;
    color: #ffffff;
    margin-top: 0px;
}

.cart_btns a {
    font-size: 20px;
}
.cart_btns {
    background: #fff;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    line-height: 35px;
    color: #222 !important;
    cursor: pointer;
    border: 1px solid #222;
    text-align: center;
}
.cart_btns i {
    color: #222;
    text-align: center;
    font-size: 16px;
}


/*=== WISTLIST AND COMPARE CSS END ===*/

/*====  QUICK VIEW CSS START ====  */
#page-overlay {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    z-index: 9999;
}

#custom-modal {
    display: none;
}

.modal-view {
    position: fixed;
    width: 1000px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 99999;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.closes-modal {
    position: absolute;
    right: -10px;
    top: -13px;
    background: #ddd;
    height: 35px;
    width: 35px;
    border-radius: 50px;
    font-size: 18px;
}

.quick-view-inner {
    overflow: hidden;
    position:relative;
}

.quick-view-inner img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 25px;
    height: 25px;
    margin: 0;
    border-radius: 0px;
}

.quick-product .name {
    text-transform: capitalize;
    font-size: 25px;
    font-weight: 700;
    color: #444;
    margin-bottom: 5px;
}

/*====  QUICK VIEW CSS END ====  */

.sec_title {
    margin-bottom: 10px;
}

.section-title-header {
    border-bottom: 1px solid #ececec;
    padding-bottom: 10px;
}

.section-title-header .section-title-name {
    font-size: 20px;
    font-weight: 600;
     font-family:var(--en-font);
    padding-bottom: 10px;
    position: relative;
    bottom: -2px;
    text-transform: capitalize;
}

li.see_more_btn {
    text-align: end;
}

li.recent_pro {
    font-size: 15px;
}

.sec_title i {
    font-size: 10px;
    margin-left: 5px;
}

/*====  LOADING SPINNER CSS END ====  */
#loading {
    position: fixed;
    left: 50%;
    top: 0;
    z-index: 9999;
    display: none;
    background: rgba(255, 255, 255, 0.5);
    height: 100%;
    width: 100%;
    transform: translate(-50%);
    text-align: center;
}

.custom-loader {
    width: 50px;
    height: 50px;
    --c: radial-gradient(farthest-side, var(--secondary-color) 92%, #0000);
    background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    animation: s7 0.5s infinite;
    position: fixed;
    top: 50%;
    left: 50%;
}

@keyframes s7 {
    to {
        transform: rotate(0.5turn);
    }
}

/*====   LOADING SPINNER CSS END ====  */

/*====   WISHLIST MODAL CSS START ====  */
#custom-modal .title {
    font-weight: 600;
    font-size: 20px;
    color: #555;
    text-align: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
}

.wishlist-modal .quantity {
    font-weight: 500;
    color: #777;
}

.wishlist-modal {
    margin-top: 25px;
}

.wishlist-modal .name {
    text-align: left;
    margin: 0;
}

.wishlist-modal .price {
    color: var(--secondary-color);
    font-size: 26px;
    font-weight: 600;
    margin: 12px 0;
}

.continue-confirm {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 15px;
    margin-top: 15px;
}

.continue-btn {
    background: #ddd;
    border-radius: 5px;
    padding: 10px 0px;
    text-transform: uppercase;
    color: #666;
    font-weight: 600;
    transition: 0.35s all;
}

.confirm-btn {
    background: var(--secondary-color);
    border-radius: 5px;
    padding: 10px 0px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    display: block;
    text-align: center;
    cursor: pointer;
    transition: 0.35s all;
}

.continue-btn:hover,
.confirm-btn:hover {
    background: var(--secondary-color);
    color: #fff;
}

/*====   WISHLIST MODAL CSS END ====  */

/*====   WISHLIST CSS START ====  */
.vcart-inner {
    background: #f5f7f9;
    padding: 20px 25px;
    border-radius: 5px;
}

.vcart-content img {
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50px;
    background: #fff;
    padding: 1px;
}

.cart_name {
    max-width: 185px;
}

.cart-title h4 {
    font-weight: 600;
    padding: 5px 10px;
    text-align: center;
}

.vcart-content table th {
    color: #666;
}

.vcart-content table td {
    font-size: 15px;
}

.remove-cart, .remove-cart:focus {
    background: #e5e5e5;
    border-radius: 50px;
    height: 30px;
    width: 30px;
    text-align: center;
    outline: 0;
}

.remove-cart .feather {
    color: #fff;
}

.wcart-btn, .wcart-btn:focus {
    background: var(--secondary-color);
    color: #fff;
    height: 30px;
    width: 30px;
    border-radius: 50px;
    outline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addcartbutton:hover{
    color:#fff;
}
button.cart-button.added-btn {
    background-color: var(--secondary-color-extra) !important;
}
/*==== WISHLIST CSS END ====  */

/*====  CART CSS START ====  */
.pro__qty.qty-cart.vcart-qty {
    display: flex;
    justify-content: end;
}

.vcart-qty .quantity {
    height: 35px;
    width: 96px;
    border: 2px solid #d1e4f1;
    margin-top: 0 !important;
    /* margin-right: 2px; */
}
.vcart-qty .quantity .minus {
    left: 0;
    height: 100%;
    width: 30px;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #E5F2FB;
    color: #4F6FB6;
}

.vcart-qty .quantity .plus {
    right: 0;
    height: 100%;
    line-height: 33px;
    width: 30px;
    background: #E5F2FB;
    font-size: 20px;
    color: #4F6FB6;
}
.cart-summary {
    background: #f5f7f9;
    padding: 15px;
    border-radius: 5px;
}

.cart-summary h5 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.cshort-summary p strong {
    font-size: 15px;
    display: block;
    margin: 8px 0;
}

.cart-summary table td {
    padding: 10px 0 !important;
    text-transform: capitalize;
    font-size: 15px;
}

.cart-summary table td:last-child {
    text-align: right;
}

.couponcode-section {
    padding-bottom: 55px;
}

.coupon-btn {
    background: var(--secondary-color);
    color: #ffff;
}

a.header-coupon {
    font-weight: 700;
}

img.coupon-image {
    height: 242px;
    width: 100%;
}

.coupon-form {
    margin-top: 25px;
}

.coupon-form form {
    display: inline-block;
    width: 300px;
}

.coupon-form form input {
    width: 80%;
    float: left;
    height: 38px;
    border: 1px solid #ddd;
    border-radius: 5px 0px 0px 5px;
    padding: 0 10px;
    text-transform: capitalize;
}

.coupon-form form input {
    width: 80%;
    float: left;
    height: 38px;
    border: 1px solid #ddd;
    border-radius: 5px 0px 0px 5px;
}

.coupon-form form button {
    width: 20%;
    background: var(--secondary-color);
    color: #fff;
    height: 38px;
    border-radius: 0px 5px 5px 0px;
}

/*====  CART CSS END ====  */

/*====  LOGIN CSS START ====  */
.auth-section input, .auth-section input:focus {
    border: 1px solid #ddd;
    height: 42px;
}

.register-now.no-account a {
    text-align: center;
    color: var(--secondary-color);
}

.form-content form .form-group {
    position: relative;
}

.form-content form label {
    font-size: 14px;
    font-weight: 600;
}

.no-account p {
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
}

.form-content {
    background: #fff;
    border-radius: 30px;
    margin: 25px 0;
    border: 1px solid #ddd;
    overflow: hidden;
    padding: 40px;
}

.form-content form {
    padding: 0 15px;
}

.auth-title {
    font-size: 25px;
    /* border-bottom: 1px solid var(--secondary-color); */
    font-weight: 700;
    text-align: center;
    margin-bottom: 7px;
    color: #00a751;
    text-transform: uppercase;
    padding: 10px 15px;
    /* background: var(--secondary-color); */
}
button.submit-btn {
    display: block;
    width: 100%;
    text-transform: uppercase;
    padding: 12px 0;
    background: var(--secondary-color)!important;
    color: #fff;
    font-weight: 600;
    border-radius: 5px;
}

.resend_otp .feather {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}



/*====  LOGIN CSS END ====  */

/*====  BRAND CSS START ====  */

.brand-section {
    position: relative;
}

.brand-item {
    height: 65px;
    border-radius: 5px;
    background: #fff;
}

.brand-item img {
    transition: 0.35s all;
    padding: 15px;
    /* border-radius: 50%; */
    object-fit: contain;
}



/*====  BRAND CSS END ====  */

/*====  PROFILE CSS START ====  */
.customer-sidebar {
    background-color: #fff;
    padding: 10px;
    height: 100%;
}

.btn-grad {background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5  51%, #00d2ff  100%)}
.btn-grad {
    margin: 10px;
    padding: 7px 20px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
   /* width: 65%;
    margin: 0 auto;*/
}
.reseller span{
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.btn-grad:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}
.reseller-code button {
    background: transparent;
    color: #fff;
    font-size: 17px;
    padding-left: 12px;
}
.customer-auth {
    display: grid;
    grid-template-columns: 60px auto;
    grid-gap: 10px;
    background: #f5f7f9;
    padding: 10px;
    border-radius: 5px;
}
.customer-profile {
    width: 35px;
    height: 35px;
    border-radius: 50px;
    border: 2px solid #212529;
}

.customer-img img {
    border-radius: 50px;
    width: 100%;
    height: auto;
    margin-top: 10px;
}

.customer-section {
    padding: 20px 0;
    background: #fff;
}

.sidebar-menu {
    background: #f5f7f9;
    margin: 15px 0;
    border-radius: 5px;
}

.sidebar-menu ul li {
    display: block;
}
.sidebar-cus-type p {
    color: #7600E3;
}
.balance-btn {
    margin-top: 10px;
    /* margin: 10px; */
    padding: 5px 20px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
}
.balance-btn {
    background-image: linear-gradient(to right, #83a4d4 0%, #b6fbff 51%, #83a4d4 100%);
}
.balance-btn:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}
.sidebar-cus-type a {
    font-size: 16px;
    font-weight: 600;
}
.aff-grad {background-image: linear-gradient(to right, #283048 0%, #859398  51%, #283048  100%)}

.aff-grad {
    text-align: center;
    text-transform: capitalize;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    border-radius: 4px;
    display: block;
}
.aff-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }
.aff-grad p {
    color: #fff !important;
    font-size: 15px;
    padding: 10px 0;
    font-weight: 700;
    
}



.customer-content {
    background: #fff;
    padding: 15px;
    border-radius: 5px;
}

.backend_img {
    height: 80px;
    width: 80px;
    border-radius: 50px;
}

.account-title {
    margin-bottom: 15px;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    text-align: left;
    font-weight: 600;
}

.invoice_btn,
.invoice_btn:focus {
    background: var(--secondary-color);
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 5px;
}

.sidebar-menu li a.active {
    color: var(--secondary-color);
}

/*====  PROFILE CSS END ====  */
.user_data {
    display: flex;
    gap: 25px;
}
.user_data i {
    font-size: 20px;
    color: #999;
}

.payment_option {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr !important;
}

/*====  CHECKOUT CSS START ====  */

.text-left img {
    height: 30px;
    width: 30px;
}

.cartlist span {
    height: 20px;
    width: 20px;
    border-radius: 50px;
}

.chheckout-section {
    padding: 10px 0;
}
.cartlist .text-left {
    text-align: left;
}

.checkout-shipping label {
    font-size: 15px;
    font-weight: 600;
    color: #555;
}

a.check-wapp.check-btn {
    background: #00D757;
    padding: 4px 9px;
    border-radius: 4px;
    margin-left: 41px;
    line-height: 35px;
}

.check-wapp i {
    background: #00D757;
    padding: 10px;
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
}

.check-position i {
    position: absolute;
    background: #00D757;
    padding: 9px;
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    transform: translateX(-394%);
}

.checkout-shipping input,
.checkout-shipping input:focus,
.checkout-shipping select,
.checkout-shipping select:focus {
    border: 1px solid #ddd;
    height: 40px;
}

.payment-methods {
    display: flex;
    gap: 15px;
}

.payment-methods .p_bkash label {
    display: inline-flex;
    align-items: center;
}

.payment-methods .p_bkash label img {
    width: 78px;
    height: auto;
    max-height: 38px;
    object-fit: contain;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    height: 40px !important;
}

#select2-district-container {
    line-height: 40px;
}

.select2-results li {
    display: block;
}

.checkout-shipping .form-check-input {
    height: 14px !important;
}

.checkout-shipping form i {
    margin-right: 5px;
}


.order_place {
    background: var(--secondary-color);
    display: block;
    width: 85%;
    border-radius: 5px;
    padding: 10px 0;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    margin-top: 15px;
    transition: 0.35s all;
    margin: 0 auto;
    margin-top: 15px;
}

.order_place:hover {
    background: var(--secondary-color);
}

.text-center {
    text-align: center!important;
    margin: 10px 0;
}
.login_slider_area{
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:4px;
}

section.brade__cum {
    background: #e5e7eb;
    color: gray;
    padding: 15px 0;
}
p.brade_text {
    color: gray;
}
p.brade_text a{
    color: gray;
}
p.brade_text a:hover{
    color: blue;
    text-decoration: underline;
}
p.brade_text i{
    font-size: 11px;
}
section.checkout__top_sec {
    padding: 9px 0;
    border-bottom: 1px solid #ddd;
    background: #f3f4f6;
}
section.checkout__top_sec p {
    font-size: 18px;
    font-weight: 600;
    background: #f3f4f6;
}
p.checkout__after::after {
    content: "";
    background: #000;
    width: 100%;
    height: 4px;
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
}
p.checkout__after{
  position: relative;
  padding-bottom: 3px;
}
.main__check_sec {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 3px;
}
.main__title__checkout p {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    border-bottom: 4px dashed #000;
    width: 50%;
    margin: 0 auto;
    padding-bottom: 7px;
    margin-bottom: 28px;
}
p.shipping__header {
    font-weight: bold;
    font-size: 18px;
    border-bottom: 4px dashed #ddd;
    width: 25%;
    padding-bottom: 3px;
    margin-bottom: 10px;
}
p.card__title {
    font-size: 18px;
    font-weight: 900;
    padding-bottom: 10px;
    
}
.cardss {
    border-radius: 5px;
}
.items__header {
    display: flex;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
    padding: 4px;
    border-radius: 5px;
    background: #dff3fc;
}
.items__header_shopping p {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary-color);
}
.items__header_shopping i {
    font-size: 20px;
    margin-top: 3px;
    color: var(--secondary-color-extra);
}
.items__header_left i {
    background: var(--secondary-color-extra);
    padding: 6px;
    margin-right: 10px;
    border-radius: 5px;
}
.items__header p {
    color: var(--secondary-color);
    font-size: 18px;
    font-weight: 700;
}
.items__header_shopping {
    display: flex;
    gap: 20px;
    padding: 8px;
    align-items: center;
}
.main__items_image {
     height: 84px; 
    width: 84px;
    border-radius: 10px;
    position: relative;
    /* margin-right: 13px; */
}
.details_discount p {
    left: 142px !important;
}
.quick_quantity {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 20px;
}

.discount__checkout {
    position: absolute;
    top: 3px;
    left: 3px;
}
.discount__checkout p {
    background: var(--secondary-color);
    color: #fff;
    font-size: 10px;
    padding: 2px;
    border-radius: 3px;
}
.flash__discount {
    position: absolute;
    top: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}
.flash__discount .discount-area {
    position: absolute;
   
    font-size: 9px;
}
p.price__item del {
    color: #999;
    font-weight: 500;
    margin-right: 4px;
}
.card-bodys {
    background: white;
    padding: 0px 5px;
    border-radius: 5px;
}
.pro___size__color p {
    font-size: 10px;
    color: #888;
    line-height: 15px;
}

p.price__item {
    font-weight: 700;
    font-size: 12px;
}
p.item__delete a {
    text-decoration: underline;
    cursor: pointer;
    color: #a29999;
}
.main__items_prices {
    text-align: right;
    font-weight: 600;
}
.delete_sec {
    display: grid;
    align-items: anchor-center;
    text-align: right;
}

.delete_sec.cart_item_actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.cart_item_actions .item__delete {
    margin: 0;
}

.copy-product-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #6f7f88;
    line-height: 1;
    cursor: pointer;
}

.copy-product-link:hover,
.copy-product-link:focus {
    color: var(--secondary-color);
}
.pro___name p {
    font-weight: 400;
    font-size: 13px;
}
.label_qty {
    font-weight: 500;
    font-size: 12px;
    margin-right: 5px;
}
.shopping-cart-head h4 {
    font-size: 18px;
    margin-left: 14px;
}

.items__headers {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    
}
.items__header_lefts p {
    font-weight: 500;
}
.items__header_rights p {
    font-weight: 500;
}
.items__total__right p {
    font-weight: 800;
    font-size: 16px;
}
.items__charges {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-weight: 800;
}
.count_red p {
    color: red;
}
.items__total p {
    color: #1a56c2 !important;
    font-size: 16px;
    font-weight: 800;
}
.items__total {
    display: flex;
    justify-content: space-between;
    color: #1a56c2;
    font-weight: 600;
    border-top: 2px solid #f6f2f2;
}
.form-check-input:checked {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.form-check-input:checked {
    background-color: #000000 !important;
    border-color: #000000 !important;
}
.areas:checked {
    background-color: #000000 !important;
    border-color: #000000 !important;
}
.payment-methods label {
    font-weight: 600;
    font-size:17px;
}
.pament__note {
    background: #e5e7eb;
    padding: 12px;
    border-radius: 5px;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 4px;
}

.coupon_sec {
    display: flex;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 11px;
    border: 1px solid #dff3fc;
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
}
.coupon_sec input {
    /*background: #e5e7eb;*/
}
.coupon_sec input:focus {
    background: #e5e7eb;
}
p#coupon_btn {
    color: white;
    background: var(--secondary-color);
    font-size: 12px;
    padding: 0px 18px;
    line-height: 35px;
    margin-left: -5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
}
p#affilite_btn {
    color: white;
    background: var(--secondary-color);
    font-size: 12px;
    padding: 0px 18px;
    line-height: 35px;
    margin-left: -5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
}
p#coupon_remove {
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    padding: 0px 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.coupon_sec input::placeholder {
    line-height: 21px;
    color: #999999;
    font-size: 14px;
}

.main__checkout {
    display: flex;
    justify-content: space-around;
}
.cat-item p {
    text-align: center;
}

/*====  CHECKOUT CSS END ====  */
/*=== Extra CHECKOUT CSS START === */
.extra-ship-pro {
    border-left: 2px dashed #c6c6c6;
    border-right: 2px dashed #c6c6c6;
    border-bottom: 2px dashed #c6c6c6;
    padding: 25px;
}
/*=== Extra CHECKOUT CSS END === */

/*====  CONTACT CSS START ====  */
.contact-section {
    padding: 15px 0;
    background: #fff;
    margin-bottom: 10px;
}

.contact-form input,
.contact-form input:focus,
.contact-form textarea,
.contact-form textarea:focus {
    border: 1px solid #ddd;
    border-radius: 0;
}

.contact-form label {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 15px;
}

.social-media.footer-about {
    text-align: left;
    margin-top: 20px;
}

.social-media.footer-about li a {
    text-align: center;
}

.social-media.footer-about h6 {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 15px;
}

/*====  CONTACT CSS END ====  */


/*====  ALL CATEGORY CSS START ====  */
.filter_btn, .filter_close {
    display: none;
}

.category-sliders {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
}
.brand-sliders{
     display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-gap: 10px;
}
.category-sliders-top{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap:10px;
}

/* Listing pages: keep every top-category image card perfectly square. */
.responsive-listing-page .category-sliders,
.responsive-listing-page .category-sliders-top {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.responsive-listing-page .cat-img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.responsive-listing-page .cat-img > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.responsive-listing-page .cat-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cat-item.hidden {
    display: none;
}
.more-category {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 10px;
}

.category-thumb {
    background: #f1f1f1;
    text-align: center;
    padding: 25px 15px;
    border-radius: 5px;
}

.category-thumb img {
    width: 24px;
}

.all-category {
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-gap: 15px;
}

.category-thumb p {
    text-align: center;
    text-transform: uppercase;
    margin-top: 10px;
}

.menu-more {
    color: var(--secondary-color) !important;
    font-weight: 600;
}

.menu-more i {
    color: var(--secondary-color) !important;
    font-weight: 600;
}

/*====  ALL CATEGORY CSS END ====  */

/*====  TOPBAR CSS START === */
.top-bar {
    border-bottom: 2px solid rgba(0, 0, 0, 0.075);
}
.main-topbar {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 10px 0px;
}

.topbar-right {
    text-align: end;
}

.right-border {
    border-right: 1px solid #222;
    padding: 0px 20px;
}

.topbar-left a {
    color: #29323a;
}

.topbar-right i {
    padding: 0px 10px;
}

.topbar-right li a {
    font-size: 13px;
    color: #29323a;
}

/*====  TOPBAR CSS END ==== */

.page-description ul li {
    display: list-item;
    list-style: initial;
}

.page-description ul {
    padding-left: 20px;
}

.front-view-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px 50px;
}

.front-view-image {
    margin-bottom: 15px;
}

.front-view-image a {
    display: block;
}

.front-view-image a img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    transform: translateY(0px);
    transition: all 0.3s ease;
}

.front-view-item:hover .front-view-image a img {
    transform: translateY(-20px);
}

.front-view-title a {
    display: block;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.category-banner-products {
    border-top: 1px dashed #ccc;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 7px;
    background: #fff;
}

.home-page-section-title-box {
    margin-bottom: 10px;
}

.home-page-section-title-box h3 {
    font-size: 30px;
    margin-top: 0;
    text-transform: capitalize;
    font-weight: 600;
}

.view-all-button-box.pull-right {
    float: right;
}

a.custom-button {
    border: 1px solid transparent;
    padding: 5px 15px;
    border-radius: 5px;
    color: #000;
    font-weight: 500;
    box-shadow: 0 0.275rem 0.75rem -0.0625rem rgb(11 15 25 / 6%), 0 0.125rem 0.4rem -0.0625rem rgb(11 15 25 / 3%) !important;
    display: inline-block;
    position: relative;
    background: transparent;
    transition: color 0.1s linear 0.05s;
    text-decoration: none;
}

.product-item-box {
    box-shadow: 0 2px 10px -1px rgb(0 0 0 / 12%);
    border-radius: 15px;
    background: #fff;
    margin-bottom: 15px;
}

.product-img-outer-box {
    position: relative;
    overflow: hidden;
}

.product-img-outer-box a {
    border-radius: 10px 10px 0px 0px;
}

.product-img-outer-box a img {
    transform: scale(1);
    transition: all 0.5s ease-out;
    object-fit: contain;
    background: #fff;
    width: 100%;
}

.product-img-outer-box a:hover img {
    transform: scale(1.1);
    transition: all 0.5s ease-out;
}

.product-desc-main-box {
    padding: 5px;
    text-align: center;
}

.product-title-box h4 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.product-title-box h4 a {
    font-size: 14px;
}

.product-price-box h4 {
    font-weight: bold !important;
    font-size: 14px;
    color: #b70053;
    font-family: var(--font);
}

.product-inner button.owl-prev,
.related-product-section button.owl-prev,
.product-inner button.owl-next,
.related-product-section button.owl-next {
    top: 50%;
    position: absolute;
    display: inline-block;
    transform: translateY(-50%);
}

.product-inner button.owl-prev i,
.related-product-section button.owl-prev i,
.product-inner button.owl-next i,
.related-product-section button.owl-next i {
    width: 35px;
    height: 35px;
    background-color: #ddd;
    border-radius: 50%;
    line-height: 35px;
    text-align: center;
    transform: scale(1);
    transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.product-inner button.owl-prev:hover i,
.related-product-section button.owl-prev:hover i,
.product-inner button.owl-next:hover i,
.related-product-section button.owl-next:hover i {
    background-color: var(--secondary-color);
    border-radius: 50%;
    line-height: 35px;
    text-align: center;
    transform: scale(1.3);
    color: #fff;
}

.product-inner button.owl-prev,
.related-product-section button.owl-prev {
    left: 0;
}

.related-product-section button.owl-prev {
    left: -40px;
}

.product-inner button.owl-next,
.related-product-section button.owl-next {
    right: 0;
}

.related-product-section button.owl-next {
    right: -40px;
}

section.product-inner {
    border-top: 1px dashed #ccc;
    padding-top: 20px;
    padding-bottom: 20px;
}

.section-title-left h4 {
    font-size: 30px;
}

.product-img-outer-box a {
    position: relative;
    overflow: hidden;
    height: 260px;
    display: block;
}

.product-inner .product-img-outer-box a {
    height: 290px;
}

.category-banner-products .product-img-outer-box a {
    position: relative;
    overflow: hidden;
    height: auto;
    display: block;
}

.slide-img-box {
    border-radius: 10px;
    overflow: hidden;
}

.category-img-banner {
    margin-bottom: 15px;
}

.category-img-banner a {
    display: block;
    overflow: hidden;
}

.category-img-banner a img {
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: 15px;
}

.category-img-banner:hover a img {
    transform: scale(0.95);
}

.category-main-section {
    border-top: 1px dashed #ccc;
    padding: 20px 0;
}

.menu-logo a {
    display: block;
    height: 100%;
}

.campaign-item a {
    display: block;
    width: 100%;
    height: 420px;
    overflow: hidden;
    position: relative;
}

.campaign-item a img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.campaign-main-section {
    border-top: 1px dashed #ccc;
    padding: 25px 5px;
}

.qty-cart .add-to-cart {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 15px;
    background: #087bce;
    border-radius: 0;
    color: #fff;
    height: 48px;
    width: 160px;
}

.section-meta-description {
    background-color: #fff;
    box-shadow: 0px 0px 10px #ddd;
    padding: 40px;
    border-radius: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/*=== Websolution IT ==== */

.sec_title H2 {
    font-size: 17px;
    margin-bottom: 15px;
    font-weight: 600;
}

.category-breadcrumb a {
    font-size: 16px;
    color: #666666b3;
    font-weight: 400;
}

.category-breadcrumb span {
    color: #666666b3 !important;
}
.view-buttons-wrapper a.active {
    background: var(--secondary-color);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
}
a#gridViewBtn {
    white-space: nowrap;
}
.view-buttons-wrapper a.active span{
    color:#fff !important;
}
.view-buttons-wrapper a.active i{
    color:#fff !important;
}



.category-breadcrumb strong {
    font-size: 16px;
}

.category-product {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
    overflow: hidden;
}

.search-grid {
    grid-template-columns: repeat(2, 1fr);
}

.category-product.list-items {
    grid-template-columns: repeat(1, 1fr);
}
.category-product.list-items .pro_btn {
    padding: 0px 0px;
    margin-top: 15px;
}
.category-product.list-items .pro_name {
    padding: 0 0px;
}

.category-product.list-items .product_item_inner {
    display: flex;
}

.category-product.list-items .product_item_inner .pro_img {
    height: 260px;
    flex: 0 0 260px;
}

.category-product.list-items .flash-discount {
    justify-content: flex-start;
}
.category-product.list-items .pro_des {
    text-align: left;
    margin-top: 12px !important;
    flex: 1 1 auto;
    margin-left: 30px;
    padding-bottom: 20px;
}

.category-product.list-items .quick-view {
    left: 230px;
    bottom: -30px;
}

.category-product.list-items .pro_type_area {
    justify-content: flex-start;
}

.category-product.list-items .pro_price p {
    text-align: left;
}

.category-product.list-items .product_item_inner:hover .quick-view {
    left: 230px;
    bottom: 30px;
}

.category-product.list-items.pro_name {
    height: 45px;
    line-height: 50px;
    display: block;
    padding: 0 5px;
    overflow: hidden;
}

.category-products {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}
.wist_item {
    position: relative;
}
.product_item:hover .product_item_inner {
    border-color: var(--secondary-color);
}

.product_item {
    position: relative;
    border: 1px solid #ddd;
    transition: 0.35s all;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.pro_name {
    height: 43px;
    line-height: 20px;
    line-clamp: 2 !important;
    display: block;
    padding: 0 5px;
    overflow: hidden;
}
.pro_type_area {
    display: flex;
    justify-content: center;
    gap: 10px;
    height: 18px;
}
.pro_type_area p {
    color: #756d6d;
    font-size: 12px;
}
.pro_name a {
    color: #000;
    font-size: 15px;
    text-transform: capitalize;
}
.pro_img {
    height: 225px;
    position: relative;
    overflow: hidden;
}

.pro_img>a {
    display: block;
    height: 100%;
}

.pro_img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    transition: 0.35s all;
}

.img-secondary {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.product_item_inner:hover .img-primary {
    opacity: 0;
}

.product_item_inner:hover .img-secondary {
    opacity: 1;
}

.pro_des {
    text-align: center;
}

.pro_price {
    margin-bottom: 5px;
}

.pro_price p {
    color: var(--secondary-color);
    font-weight: 500;
    margin-top: 5px;
    text-align: center;
}

i.fa-regular.fa-trash-can.trash_icon {
    font-size: 15px;
    color: var(--secondary-color);
}

i.fa-regular.fa-trash-can.trash_icon:hover {
    color: red;

}

.pro_btn form {
    text-align: center;
}

.pro_btn {
    display: flex;
    gap: 2px;
    padding: 0px 15px;
    padding-bottom: 15px;
}
 .category-product.list-items .list_btn .cart_btn {
    width: 30% !important;
}
.cart_btn {
    width: 100%;
    overflow: hidden;
    height: 35px;
}

.pro_code_area {
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pro_code_area p {
    font-size: 12px;
    line-height: 12px;
}

.pro_code_area p span {
    color: var(--secondary-color);
    font-weight: 600;
    cursor: pointer;
}

.main__data__quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cart_btn a, .cart_btn button {
    background: var(--secondary-color);
    width: 100%;
    display: block;
    height: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    transition: all .5s ease;
    padding: 6px 0;
    border-radius: 5px !important;
    gap: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product_item .sort_dis {
    display: none;
    margin-bottom: 10px;
}

.category-product.list-items .product_item .sort_dis {
    display: block;
}


.number_sent_btn{
    background:var(--secondary-color);
    color:#fff;
}
.number_sent_btn:hover{
      background:var(--secondary-color-extra);  
      color:#fff;
}


.cart_btn a:hover, .cart_btn button:hover {
    background: var(--secondary-color-extra);
}
.sort_dis ul {
    margin: 0;
    padding-left: 24px;
    list-style-position: outside;
}
.sort_dis ul li {
    display: list-item;
    list-style-type: disc;
    list-style-position: outside !important;
    line-height: 22px;
    color: #434141;
}
.main__details__btn {
}
.product_item_inner .pro_brand {
    margin-top: 13px;
}
.product_item_inner .pro_brand {
    display: none;
}
.category-product.list-items .pro_brand {
    display: block;
}
.brand__img {
    height: 40px !important;
    width: 74px;
    object-fit: contain;
    padding: 7px;
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
    border-radius: 3px;
}

.brand_img_area {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sort_dis p {
    font-weight: 700;
    font-size: 17px;
    margin-top: 17px;
    margin-bottom: 5px;
}
.pro_price del {
    color: #ff0000;
    margin-right: 5px;
    font-size: 14px;
    font-weight: 400;
}
.discount p {
    position: absolute;
    top: 5px;
    background: var(--secondary-color);
    height: 25px;
    width: 40px;
    border-radius: 5px;
    left: 6px;
    z-index: 9;
    color: #fff;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.save-amount-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    color: #fff;
    background: #e67e22;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.flash-discount + .save-amount-badge {
    right: 6px;
    left: auto;
}

.price-saving-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 5px 0 8px;
}

.discount-percent-badge,
.inline-save-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.discount-percent-badge {
    background: var(--secondary-color);
}

.inline-save-badge {
    background: #e67e22;
}
.flash-discount img {
    width: 120px !important;
}
.flash-discount {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    width: 100%;
}
.discount-area {
    position: absolute;
}
.discount-area p {
    color: #fff;
    margin-top: 1px;
    margin-left: 6px;
}
.main_slider .owl-dots .owl-dot span {
    width: 40px;
    height: 5px;
    background: #222;
    transition: 0.35s all ease;
    display: none;
}
.search_content .price del{
    color:#ff000;
}



.pro_name a:hover {
    color: var(--primary-color);
}

.success-img {
    text-align: center;
}

.success-img img {
    width: 320px;
}

.success-title h2 {
    color: #000000;
    text-align: center;
    font-weight: 600;
    font-size: 26px;
    margin-bottom: 45px;
}

.success-table {
    background: #f3f3f3;
    padding: 15px;
}

/* Order-success overview uses the same visual language as the order view page. */
.customer-section:has(.success-img) {
    min-height: 100vh;
    padding: 26px 0 55px;
    background: #f4f7fb;
}

.customer-section:has(.success-img) .container {
    max-width: 940px;
}

.customer-section:has(.success-img) .col-sm-8 {
    width: 100%;
}

.customer-section:has(.success-img) .success-img {
    padding: 20px 20px 4px;
}

.customer-section:has(.success-img) .success-img img {
    width: min(320px, 72vw);
    height: auto;
    object-fit: contain;
}

.customer-section:has(.success-img) .success-title {
    margin-bottom: 22px;
    padding: 0 22px 22px;
    border-bottom: 1px solid #e4ebf1;
}

.customer-section:has(.success-img) .success-title h2 {
    max-width: 780px;
    margin: 0 auto;
    color: #17212b;
    font-size: 25px;
    font-weight: 750;
    line-height: 1.35;
}

.customer-section:has(.success-img) h5 {
    margin: 18px 0 10px !important;
    color: #27313b;
    font-size: 18px;
    font-weight: 750;
}

.customer-section:has(.success-img) .success-table {
    overflow: hidden;
    padding: 0;
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: 13px;
    box-shadow: 0 6px 20px rgba(20, 42, 74, .06);
}

.customer-section:has(.success-img) .success-table > h6 {
    margin: 0 !important;
    padding: 15px 18px;
    border-bottom: 1px solid #edf1f4;
    font-size: 16px;
    font-weight: 750;
}

.customer-section:has(.success-img) .success-table .table {
    margin: 0;
}

.customer-section:has(.success-img) .success-table .table + .table {
    border-top: 10px solid #f4f7fb;
}

.customer-section:has(.success-img) .success-table th,
.customer-section:has(.success-img) .success-table td {
    padding: 12px 15px;
    vertical-align: middle;
    background: #fff;
    border-color: #edf1f4;
}

.customer-section:has(.success-img) .success-table p {
    color: #718094;
    font-size: 12px;
}

.customer-section:has(.success-img) .success-table strong {
    color: #27313b;
    font-size: 13px;
}

.customer-section:has(.success-img) > .container a.btn-primary {
    min-height: 42px;
    padding: 10px 20px;
    background: var(--secondary-color);
    border: 0;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
}

.order-success-page + .customer-section { display: none; }
.order-success-page .order-success-hero { overflow: hidden; margin-bottom: 18px; text-align: center; }
.order-success-page .success-title h1 { max-width: 780px; margin: 0 auto; color: #17212b; font-size: 25px; font-weight: 750; line-height: 1.35; }
.order-success-page .success-title p { margin-top: 9px; color: #718094; font-size: 13px; }
.order-success-page .success-title p strong { color: var(--secondary-color); }
.order-success-overview { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); gap: 18px; align-items: start; }
.order-success-main, .order-success-side { display: grid; min-width: 0; gap: 14px; }
.order-success-summary-title { margin: -13px -17px 8px; }
.order-success-home { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; color: #fff; background: var(--secondary-color); border-radius: 8px; font-size: 13px; font-weight: 700; }
.order-success-home:hover { color: #fff; background: var(--secondary-color-extra); }

/* Product details: hierarchy breadcrumb and horizontal square thumbnail rail. */
.main-details-page .site-breadcrumb {
    width: 100%;
    min-height: 42px;
    flex-wrap: wrap;
    row-gap: 5px;
    padding: 8px 10px;
    background: #fafaf7;
    border-color: #ebece8;
}
.main-details-page .site-breadcrumb > a,
.main-details-page .site-breadcrumb > strong { color: #7d8792; font-family: var(--en-font); font-size: 13px; font-weight: 500; line-height: 1.4; }
.main-details-page .site-breadcrumb > a > i { color: #7d8792; }
.main-details-page .site-breadcrumb > a + span { border-top-color: #a3abb3; border-right-color: #a3abb3; }
.main-details-page .site-breadcrumb > strong { min-width: 140px; flex: 1 1 180px; overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
.main-details-page .product__details__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.main-details-page .details_slider { grid-column: 1; grid-row: 1; }
.main-details-page .details-thumb-wrapper { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; width: 100%; align-items: stretch; }
.main-details-page .details-thumb-wrapper.has-navigation { grid-template-columns: 30px minmax(0, 1fr) 30px; }
.main-details-page .details-thumb-wrapper .indicator_thumb { display: flex; width: 100%; max-width: none; max-height: none; gap: 8px; margin: 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; white-space: normal; }
.main-details-page .details-thumb-wrapper .indicator_thumb::-webkit-scrollbar { display: none; }
.main-details-page .details-thumb-wrapper .indicator-item { min-width: calc((100% - 24px) / 4); max-width: calc((100% - 24px) / 4); height: auto; flex: 0 0 calc((100% - 24px) / 4); padding: 4px; aspect-ratio: 1 / 1; border: 1px solid #dde3e8; border-radius: 5px; }
.main-details-page .details-thumb-wrapper .indicator-item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.main-details-page .details-thumb-wrapper .indicator-item p { height: 16px; overflow: hidden; font-size: 9px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
.main-details-page .details-thumb-wrapper .indicator-item:has(p) img { height: calc(100% - 16px); }
.main-details-page .details-thumb-wrapper .image_nav_btn { display: flex; width: 30px; height: 100%; align-items: center; justify-content: center; margin: 0; }
.main-details-page .details-thumb-wrapper .image_nav_btn i { display: flex; width: 30px; height: 100%; align-items: center; justify-content: center; color: #fff; background: var(--secondary-color-extra); border-radius: 5px; }

section.createpage-section {
    padding: 50px 0;
    background: #fff;
    margin-bottom: 10px;
}

button.owl-next {
    font-size: 30px !important;
    width: 29px;
    height: 29px;
    line-height: 10px !important;
    text-align: center !important;
    border-radius: 50%;
    color: white !important;
}

button.owl-prev {
    font-size: 30px !important;
    width: 29px;
    height: 29px;
    line-height: 10px !important;
    text-align: center !important;
    border-radius: 50%;
    color: white !important;
}

section.slider-section .row .col-sm-2 {
    width: 200px;
}

form.sort-form .form-select,
form.sort-form .form-select:focus {
    border: 1px solid #ddd;
    border-radius: 0;
}

.sorting-section {
    margin-bottom: 20px;
}

.listing-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 24px;
}

.listing-toolbar .category-breadcrumb {
    width: 100%;
    margin: 0;
}

.listing-toolbar-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.listing-toolbar .showing-data {
    display: flex;
    min-width: max-content;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    text-align: center;
}

.listing-toolbar .page-sort {
    width: clamp(220px, 23vw, 330px);
    height: 38px;
    padding: 0;
}

.listing-toolbar .sort-form,
.listing-toolbar .form-select {
    width: 100%;
    height: 100%;
    margin: 0;
}

.responsive-listing-page .sorting-section:not(.listing-toolbar) > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 24px;
    margin: 0;
}

.responsive-listing-page .sorting-section:not(.listing-toolbar) > .row > [class*="col-sm-"] {
    width: auto;
    max-width: none;
    padding: 0;
}

.responsive-listing-page .sorting-section:not(.listing-toolbar) .page-sort {
    display: flex;
    height: 100%;
    align-items: stretch;
    gap: 14px;
    padding: 0;
}

.responsive-listing-page .sorting-section:not(.listing-toolbar) .sort-result-count {
    min-width: max-content;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: transparent;
    border: 0;
    text-align: center;
}

.listing-toolbar .showing-data span,
.responsive-listing-page .sort-result-count span {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
}

.responsive-listing-page .sorting-section:not(.listing-toolbar) .showing-data:not(.sort-result-count) {
    display: none;
}

.responsive-listing-page .sorting-section:not(.listing-toolbar) > .row > [class*="col-sm-"]:last-child > .row {
    display: block;
    margin: 0;
}

.responsive-listing-page .sorting-section:not(.listing-toolbar) > .row > [class*="col-sm-"]:last-child > .row > [class*="col-sm-"] {
    width: 100%;
    padding: 0;
}

.responsive-listing-page .sorting-section:not(.listing-toolbar) .sort-form {
    width: clamp(220px, 23vw, 330px);
}

.showing-data {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.showing-data span {
    font-size: 16px;
    display: block;
    text-align: right;
}

.category-breadcrumb {
    column-gap: 8px;
    background: white;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #ededed;
    margin-bottom: 10px;

}
.category-breadcrumb i {
    color: #949494;
    margin-top: 5px;
}

/* One breadcrumb language across every frontend page: Home > current name. */
.category-breadcrumb:not(.justify-content-between) {
    min-height: 38px;
    flex-wrap: nowrap;
    margin-top: 0px;
}

.category-breadcrumb:not(.justify-content-between) > a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.category-breadcrumb:not(.justify-content-between) > a > i {
    margin-top: 0;
}

.category-breadcrumb:not(.justify-content-between) > a + span {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    overflow: hidden;
    font-size: 0;
    border-top: 2px solid #9ca3af;
    border-right: 2px solid #9ca3af;
    transform: rotate(45deg);
}

.category-breadcrumb:not(.justify-content-between) > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
}

.site-breadcrumb {
    margin-bottom: 10px;
}

.responsive-listing-page .category-breadcrumb.justify-content-between {
    align-items: center !important;
}

.responsive-listing-page .category-breadcrumb.justify-content-between > h3 {
    margin: 0;
}

.responsive-listing-page .category-breadcrumb.justify-content-between > .view-wrapper {
    margin-left: auto;
}

.breadcrumb ul li a {
    color: #666666b3;
    font-size: 13px;
  
    text-transform: capitalize;
}

.breadcrumb ul li span {
    color: #666666b3;
}

.register-now.no-account {
    background: #fff;
    padding: 0 10px 15px 10px;
}

.comn_sec {
    padding: 20px 0;
}

.checkout-coupon-form {
    padding: 10px;
    background-color: var(--secondary-color);
}

.checkout-coupon-form .coupon {
    display: flex;
    border: 1px solid;
    border-color: #ddd;
    border-radius: 50px;
    overflow: hidden;
    background-color: #fff;
    height: 45px;
    padding: 5px;
}

.fixed_whats a {
    width: 42px;
    height: 42px;
    background: #00D757;
    text-align: center;
    line-height: 42px;
    font-size: 25px;
    position: fixed;
    bottom: 55px;
    right: 34px;
    border-radius: 50px;
    color: #fff;
    z-index: 999;
}

.contact-form {
    background: #eaeaea;
    padding: 10px;
    border-radius: 5px;
}

.cont_item {
    text-align: center;
}

.cont_item a {
    font-size: 15px;
    font-weight: 600;
}

.cont_item {
    text-align: center;
    margin-bottom: 15px;
}

.copyright p a {
    color: #000;
}

/* ====Color Size Details Css ====*/
.selector {
    position: relative;
    width: 100%;
    background-color: inherit;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    flex-wrap: wrap;
    row-gap: 10px;
}

.size-container {
    margin-bottom: 12px;
}

.selector-item {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.selector-item_radio {
    appearance: none;
    display: none;
}

.color_inner .selector .selector-item label {
    cursor: pointer;
}

.selector-item label {
    border: 1px solid #ddd;
}

.color_inner .selector-item label span img {
    width: 220px;
    height: 20px;
    opacity: 0;
}

.color_inner .selector-item input[type="radio"]:checked+label span img {
    opacity: 1;
}

.selector-item_label {
    position: relative;
    height: 100%;
    width: 100%;
    text-align: center;
    border-radius: 0;
    line-height: 30px;
    font-weight: 600;
    transition-duration: .5s;
    transition-property: transform, color, box-shadow;
    transform: none;
    margin: 0;
    padding: 0px 8px;
    color: #000;
}

.selector-item_radio:checked+.selector-item_label, .selector-item_label:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    cursor: pointer;
}

.color_size {
    display: flex;
    justify-content: center;
    padding: 5px;
}

.color_size span {
    padding: 5px;
}

.syotimer-cell__unit {
    display: none;
}

.timer_inner {
    display: flex;
    justify-content: space-around;
}

.timer_inner .syotimer__body {
    display: flex;
    grid-gap: 5px;
}

.timer_inner .syotimer-cell {
    width: 38px;
    text-align: center;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    padding: 10px;
    font-weight: 600;
}

a.forget-link {
    display: block;
    text-align: right;
    margin-bottom: 15px;
}

.cart_details .card-header {
    padding: 10px 15px;
    background: #f5f7f9;
}

.cart_btn.order_button a {
    background: var(--secondary-color);
    color: #fff;
    width: 60%;
    padding: 6px 0px;
    font-size: 15px;
    text-transform: uppercase;
    display: block;
    width: 100%;
    transition: all .5s ease;
}

.cart_btn.order_button a:hover {
    background: var(--secondary-color);
}

.desktop_hide {
    display: none;
}

.details-product {
    background: #fff;
    padding: 15px 30px 30px 30px;
    margin: 6px 0;
}

.description ul li {
    display: block;
}

.description ul li {
    display: block;
    display: list-item;
    list-style-position: inside;
    list-style-type: square;
    font-size: 16px;
    line-height: 30px;
}

.sidebar-menu {
    background: #FFF;
    margin: 0;
    border-radius: 5px;
}

.sidebar-menu ul li {
    display: block;
    position: relative;
}

.sidebar-menu li a {
    padding: 10px 15px;
    font-size: 15px;
    line-height: 21px;
    position: relative;
    text-transform: capitalize;
    font-weight: 500;
    border: 1px solid #e2e2e2;
    align-items: center;
    display: flex;
    gap: 11px;
}
.nav-second-level li a {
    background-color: #f3ebeb87 !important;
  
}
.sidebar-menu ul li a img {
    width: 20px;
    height: auto;
    margin-right: 5px;
}

.sidebar-menu li a i {
    position: absolute;
    right: 12px;
    font-size: 12px;
    top: 18px;
}

.sidebar-submenu {
    position: absolute;
    right: -110%;
    top: 0;
    width: 100%;
    background: #fff;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
    transition: 0.35s all;
}

.sidebar-menu ul li {
    display: block;
    position: relative;
}

.sidebar-submenu>li {
    position: relative !important;
}

.sidebar-childmenu {
    position: absolute;
    right: -100%;
    background: #fff;
    width: 100%;
    border-left: 1px solid #ddd;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
}

.sidebar-menu ul li:hover>a {
    background-color: #e1fff7;
    color: #e50113;
}

.sidebar-menu ul li:hover .sidebar-submenu {
    visibility: visible;
    opacity: 1;
    left: 100%;
}

.sidebar-submenu>li:hover .sidebar-childmenu {
    visibility: visible;
    opacity: 1;
    right: -100%;
}

.col-sm-3.hidetosm {
    padding-right: 0;
}

.track_btn a {
    display: inline-block;
    text-align: center;
    position: relative;
    font-size: 15px;
    font-weight: normal;
}

.track_btn a i {
    font-size: 16px !important;
}

.track_info ul li {
    display: block;
    line-height: 30px;
}

.track_info ul li span {
    width: 80px;
    display: inline-block;
    text-align: right;
    margin-right: 12px;
    font-weight: 600;
}

table.table.table-bordered.tracktable {
    margin-bottom: 0;
}

.tracktable thead {
    background: var(--secondary-color);
    color: #fff;
}

td.tfoot_bg {
    background: #f5f5f5;
    text-align: right;
}

/*==== FOOTER  CSS START ====  */

.comn_sec {
    padding: 20px 0;
}

.cmn_menu ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.cmn_menu ul li {
    position: relative;

}

.cmn_menu ul li:after {
    content: "";
    position: absolute;
    right: -15px;
    top: 6px;
    width: 1px;
    height: 10px;
    background: #000;
}

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

.cmn_menu ul li a {
    transition: all .5s ease;
}

.cmn_menu ul li a:hover {
    color: #FB5533;
}

.contact-form {
    background: #eaeaea;
    padding: 10px;
    border-radius: 5px;
}

.cont_item {
    text-align: center;
}

.cont_item a {
    font-size: 15px;
    font-weight: 600;
}

.cont_item {
    text-align: center;
    margin-bottom: 15px;
}

.copyright p a {
    color: var(--secondary-color);
}

.checkout-coupon-form .btn-theme, .checkout-coupon-form .btn-theme:focus {
    background-color: var(--secondary-color);
    color: #fff;
    border-radius: 50px;
    padding: 1px 30px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}

.cart_btn.order_button a {
    background: #ED145B;
    text-transform: capitalize;
}

i.fab.fa-facebook-f.icon0 {
    line-height: 14px;
    font-size: 14px;
    margin-top: 7px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: #0866FF;
    color: #fff;
}

i.fa-brands.fa-youtube.icon1 {
    color: red;
    font-size: 25px;
    margin-left: -8px;
}

i.fa-brands.fa-whatsapp.icon2 {
    line-height: 14px;
    font-size: 14px;
    margin-top: 7px;
    height: 30px;
    width: 30px;
    border-radius: 7px;
    background: #42C152;
    color: #fff;
}

i.fa-solid.fa-phone.icon3 {
    color: blue;
    margin-top: 2px;
    font-size: 23px;
}

/*==== FOOTER CSS END ====  */
/*=============CATEGORY SLIDER START==========*/
.slider-items img {
    height: 350px;
    width:100%;
    margin-bottom:15px;
}
.main-index-page {
    display: flex;
    width:100%;
    gap:10px;
}
.index-menu {
    width: 20%;
}
.index-slider {
    width: 100%;
}

/*.index-right-slider {*/
/*    width: 28%;*/
/*}*/

/*=============CATEGORY SLIDER END==========*/

/*RIGHT SLIDER START*/
.banner-right .owl-nav button span {
    font-size: 30px;
}

.banner-right .owl-nav button {
    height: 40px;
    width: 35px;
    background: var(--secondary-color) !important;
    transition: 0.35s all;
}

.banner-right .owl-nav button:hover {
    background: #E74B2C !important;
    color: #fff;
}

.banner-right .owl-prev {
    position: absolute;
    left: -10px;
    visibility: hidden;
    opacity: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
    transition: 0.35s all;
}

.banner-right .owl-next {
    position: absolute;
    right: -10px;
    visibility: hidden;
    opacity: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
    transition: 0.35s all;
}

.banner-right:hover.banner-right .owl-prev {
    left: 10px;
    visibility: visible;
    opacity: 1;
}

.banner-right:hover.banner-right .owl-next {
    right: 10px;
    visibility: visible;
    opacity: 1;
}

.banner-right.owl-dots button {
    background: #222;
    height: 10px;
    width: 10px;
}

.banner-right .owl-dots button {
    height: 12px;
    width: 12px;
    background: #444;
    margin: 0 4px;
    border-radius: 50%;
}

.banner-right .owl-dots {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
}

.banner-right .owl-dots button.active {
    background: #FCB800;
}

/*RIGHT SLIDER END*/

/*===== NEWS STICKER START=======*/
.news-section {
    
    padding-bottom: 8px;
}

.headline-wrapper {
    background: #fff;
    align-items: center;
    display: flex;
    height: 40px;
}
.Newsletter a {
    border: none;
    width: auto;
    margin-right: 8px;
}
.Newsletter a:hover {
    background: none;
    border: none;
}
li.Newsletter i {
    margin-right: 2px !important;
    font-size: 10px;
}
.headline-inner {
    margin-top: 12px;
}
.news-headline.mobile {
    display: none;
}
/*===== NEWS STICKER END=======*/
/*========BANNER OFFER START=====*/
.offer-area{
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 20px;
    justify-content: center;
   
}
.offer-details-banner {
    margin: 0 auto;
    margin-top: 3%;
}
.offer-details-banner img{
    height: auto;
    width: 100%;
}

.offer-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.offer-card:hover {
    transform: scale(1.05);
}

.offer-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.offer-details {
    padding: 15px;
    text-align: center;
}

.offer-date,
.offer-location {
    font-size: 14px;
    color: #555;
    margin: 5px 0;
}

.offer-details h3 {
    font-size: 18px;
    color: #333;
    margin: 10px 0;
}

.offer-details p {
    font-size: 14px;
    color: #666;
}

a.offer-show {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;
}
.top-offer-subtitle {
    background-color: #ffd2d2;
    margin-bottom: 20px;
    border-radius: 12px;
    padding: 45px 10px;
}

a.offer-show :hover {
    background-color: #0056b3;
}
p.d-banner-title {
    margin-top: 10px !important;
    padding-bottom: 14px;
    height: 75px;
}
/*========BANNER OFFER END=====*/

/* Offers index: fluid cards, uncropped media and consistent content rhythm. */
.banner-offer {
    padding: 20px 0 30px;
}

.banner-offer .offer-area {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    align-items: stretch;
}

.banner-offer .offer-card {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    margin: 0;
}

.banner-offer .offer-card > a:first-child {
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 9;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8f9fa;
}

.banner-offer .offer-card > a:first-child img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.banner-offer .offer-details {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px;
}

.banner-offer .offer-details .offer-date,
.banner-offer .offer-details .offer-location,
.banner-offer .offer-details h3,
.banner-offer .offer-details .d-banner-title {
    height: auto;
    margin: 0 !important;
    padding: 0;
    line-height: 1.4;
}

.banner-offer .offer-details .offer-date {
    width: 100%;
    padding-bottom: 9px;
    border-bottom: 1px solid #ddd;
}

.banner-offer .offer-details .offer-location {
    margin-top: 5px !important;
}

.banner-offer .offer-details .offer-show {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 8px 16px;
}

  .mobile-menu {
        display: none;
    }
    .mobile-search {
        display: none;
    }

    .mobile-filter-toggle {
        display: none;
    }
    
    .customer-content .form-control {
           border:1px solid #dee2e6 !important;
    }
    
    /*====  Fixed cart ====  */

.navigation {
    border: 0;
    height: 100%;
    width: 390px;
    background-color: #fff;
    color: #000;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: -100%;
    transition: right 0.5s ease-in-out;
    box-shadow: -4px 3px 16px -4px rgba(0, 0, 0, 0.75);
}

/* open হলে slide হয়ে আসবে */
.navigation.cartTable.open {
    right: 0 !important;
}

.pro-subtotal-area {

    text-align: right;
}
.navigation .toggle-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none;
    height: 76px;
    width: 72px;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: fixed;
    top: 70%;
    right: 1px;
    border-radius: 10px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.navigation.cartTable.open {
    right: 0 !important;
}
.navigation .toggle-wrapper span {
    width: 100%;
    text-align: center;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    transition: right 0.25s;
    background: #34507E;
}
.toggle-wrapper .show img {
	height: 18px;
	margin-top: 5px;
}
.toggle-wrapper i {
    padding: 10px;
    font-size: 20px;
    position: absolute;
    text-align: center;
    color: #fff !important;
    transform: translatex(-21px);
}
.navigation .toggle-wrapper .show p {
    height: 22px;
    line-height: 20px;
    font-size: 11px;
    text-align: center;
    color: #fff;
    margin-top: 5px;
    font-weight: 700;
}
.toggle-price {
    background: #E09E53;
    color: #fff!important;
}
.cart-product {
    z-index: 99999;
    position: relative;
    background: #fff;
}
.shopping-cart-head {
    background: #131921;
    color: #fff;
    text-align: left;
    
    overflow: hidden;
    margin-top: -3px;
    margin-left: -1px;
}
.shopping-cart-head {
    background: var(--secondary-color);
    color: #fff;
    text-align: left;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}
.cart-item-count {
    width: 70%;
    float: left;
}
.cart-item-count p {
    display: inline-block;
    color: #fff;
}
.close-cart-icon {
    float: right;
    width: 30%;
    text-align: right;
}
.close-cart-icon a {

    padding: 4px 14px;
    font-size: 27px;
    display: inline-block;
    cursor: pointer;
    color: #fff;
}
.main__items_sidebar {
    display: grid;
    grid-template-columns: 25% 45% 30%;
    padding: 2px 3px;
}
.checkout_product_inner {
    display: grid;
    grid-template-columns: 15% 65% 20% !important;
}
.cart_product_inner {
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
    display: flex;
    background: #fff;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #eeeff2;
    border-radius: 6px;
}
.main__items {
    margin-bottom: 0px;
    border-radius: 3px;
    padding-inline: 10px;
    padding-block: 10px;
    border-bottom: 1px solid #eeeff2;
    flex-direction: column;
}
.pro___name {
    height: 36px;
    overflow: hidden;
}
p.item__count {
    font-size: 12px;
}
p.bar_subtotal {
    font-weight: 700;
}
a.order_now__bar {
    margin-right: 13px;
}
.flash__discount img {
    width: 78%;
}

.checkout_pro_name p {
    max-width: 100% !important;
}
.main__items_sidebar .pro___name p {
    font-size: 12px;
    font-weight: 500;
    color: #111827;
    max-width: 240px;
    text-decoration: none;
}
.main__items_image .table_img {
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    padding: 5px;
    object-fit: contain;
}
.pro___size__color {
    margin-top: 4px;
}

h6.brand__name {
    color: var(--secondary-color);
    font-size: 10px;
    margin-bottom: 2px;
}
.cart__area {
    height: 85vh;
    background: #ffffff;
    overflow-y: scroll;
    padding: 10px;
    scroll-behavior: smooth;
    
}
.product__optional__item {
    display: flex;
    gap: 10px;
}
.cart-product-item {
    border-bottom: 1px solid #ddd;
    padding-bottom: 0px;
    width: 100%;
    display: block;
    overflow: hidden;
}
.pos-option {
    width: 10%;
    float: left;
    margin-left: 18px;
}
.pos-option {
    width: 6%;
    float: left;
    text-align: left;
}
.pos-increment button {
    background: transparent;
}
.pos-increment i {
    color: #888;
    cursor: pointer;
}
.cart-product-item .posimage {
    width: 17%;
    float: left;
    text-align: left;
    margin-top: 12px;
}
.cart-product-item .posimage img {
    width: 100%;
}
.cart-product-item .cart-text {
    width: 40%;
    float: left;
    text-align: left;
    padding-left: 10px;
    margin-top: 12px;
}
.cart-product-item .cart-title span {
    color: #000;
    font-size: 14px;
    font-weight: 600;
}
.cart-price {
    width: 15%;
    float: left;
    margin-top: 15px;
}
.cart-price p {
    color: #222;
    font-size: 12px;
    text-align: center;
}
.cart-remove a {
    color: red;
    margin-top: 5px;
}.cart-remove a:hover{
       color: red;
}

.cart-empty {
    height: 400px;
}
.cart-empty img {
    object-fit: contain;
}

.side_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--secondary-color);
    padding: 5px 10px;
    border-radius: 5px;
}
li.side_bar_area {
    display: flex;
    gap: 10px;
     align-items: center;
}
.side_bar a  {
    color: #fff;
}
.side_bar a p  {
    color: #fff;
}
.side_bar_area i {
    background-color: var(--secondary-color-extra);
    color: #fff;
    padding: 10px;
    border-radius: 4px;
}

.wishlist_store.active {
    background: red;
    border: 1px solid red;
}

.add_address button {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    padding: 7px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
}
.customer-address-items.active {
    color: #ed145b;
    background-color: #fde1ea;
    border-color: #ed145b;
}
.add_address {
    margin-bottom: 7px;
}
.unavail_products h5 {
    padding: 10px;
    background: #fde3e3;
    color: #d10000;
    font-size: 14px;
    border-radius: 5px;
}
.stock_out {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
}
.stock_out_bar {
    gap: 4px !important;
}
.order_note_area {
    margin: 10px;
    background: #fefdeb;
    border: 2px solid #f2f7ee !important;
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1) !important;
}
.address_title.order-note-header p {
    color: var(--secondary-color-extra);
}
.address_btn {
    background: transparent;
    color: #000;
}
.address_btn a {
    background: transparent;
    color: #000 !important;
}
.address_title.order-note-header i {
    font-size: 13px;
}
.stock_out_bar p {
    font-size: 11px;
}
.address_title {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.stock_out span i {
    background: #e1dada;
    padding: 5px;
    color: var(--secondary-color-extra);
    border-radius: 4px;
}
.stock_out p {
    background: #fde3e3;
    color: #d10000;
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid #999;
}

.stock_out_img {
    position: absolute;
    top: 0;
    background: #fbdada87;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.stock_out_img p {
    margin-top: 39%;
    text-align: center;
    background: #fff;
    display: inline-block;
    margin-left: 10%;
    padding: 2px;
 
}
.customer-address-items {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    height: 80px;
    border: 1px solid #e3e3e3;
    background-color: #FAFAFA;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 5px;
    padding: 5px 15px 5px 40px;
}
.customer-address-items .icon {
    position: absolute;
    left: 12px;
}
.customer-address-items .left {
    flex: 1 1 auto;
}
.customer-address-items .left p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
}
.customer-address-items .right {
    min-width: 20%;
}
.customer-address-items .right button {
    background: #ed145b;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 3px;
    position: relative;
    z-index: 999;
}

.customer-address-items .right button {
    background: #ed145b;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 3px;
    position: relative;
    z-index: 999;
}

.add_address a {
    width: 96%;
    display: block;
    font-size: 16px;
    text-align: center;
    border: 1px solid #ddd;
    margin: 0 auto;
    margin-top: 9px;
    padding: 5px 0;
}

/*============order process Time Line css ==================*/


.address-create-modal{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000000a1;
    z-index: 99999;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.address-back-button {
    width: 50% !important;
}
.address-back-button {
    display: flex;
    padding: 10px;
    gap: 10px;
    background-color: #fff;
    width: 480px;
}
.address-back-button button {
    background: no-repeat;
    cursor: pointer;
    width: 30px;
}
.address-back-button span {
    font-size: 16px;
    font-weight: 600;
}
.address-modal-box {
    padding: 0 25px 25px 25px !important;
    max-width: 50% !important;
    height: auto !important;
    background-color: #fff;
}
.address-submit-button button {
    background-color: green;
    color: #fff;
    width: 100%;
    height: 45px;
    border-radius: 10px;
}

.address-modal-box input, select {
    border: 1px solid #ddd;
    border-radius: 0;
    outline: 1px;
}
.checkout-delivery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
.address-create-modal.active {
    height: 100%;
}
/*============order process Time Line css ==================*/
.timeline {
  position: relative;
}
.t-item {
  display: grid;
  grid-template-columns: 100px 28px 1fr;
  column-gap: 16px;
  position: relative;
  padding: 12px 0;
}
.t-meta {
  text-align: right;
}
.t-date {
  font-weight: 600;
  font-size: 13px;
  color: #374151;
}
.t-time {
  font-size: 12px;
  color: var(--muted);
}
.t-line {
  position: relative;
}
.t-line::before {
  content: "";
  position: absolute;
  left: 13px;
  top: -20px;
  bottom: -20px;
  width: 2px;
  background: var(--line);
}
.t-dot {
    position: absolute;
    left: 122px;
    top: 14px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line);
    z-index: 2;
}
.t-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  display: block;
  margin: auto;
  margin-top: 2px;
}
.t-body .t-title {
  margin: 0;
  text-transform: capitalize;
  font-size: 16px;
  font-weight: 600;
}
.t-body .t-desc {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* States */
.t-item.is-done .t-line::before {
  background: var(--brand);
}
.t-item.is-done .t-dot {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.t-item.is-done .t-dot::after {
  background: var(--brand);
}
.t-item.is-current .t-dot {
  border-color: var(--brand);
  animation: pulse 1.5s infinite;
}
.t-item.is-current .t-dot::after {
  background: var(--brand);
}
.t-item.is-current .t-title {
  color: var(--brand);
}
.t-item.is-pending .t-dot {
  border-color: #d1d5db;
}
.offers__icon i {
    color: #ffffff;
}

.t-item.is-pending .t-dot::after {
  background: #d1d5db;
}
.t-item.is-pending .t-title {
  color: #6b7280;
}
.product_note p {
    color: #aca4a4;
    font-size: 11px;
    margin-top: 25px;
    margin-bottom: 15px;
    font-family: 'Bornomala Font', sans-serif;
}

.view-buttons-wrapper {
    display: flex;
    gap: 16px;
}
.mobile-quantity {
    display: grid;
    grid-template-columns: 25% 75%;
    margin-top: 10px;
}
/* First & last item line fix */
.timeline .t-item:first-child .t-line::before {
  top: 14px;
}
.timeline .t-item:last-child .t-line::before {
  bottom: 14px;
}
.first-nav, .second-nav, .third-nav { list-style: none; margin: 0; padding: 0; }
.row-flex { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.toggle-btn {
  border: 0; background: transparent; cursor: pointer; padding: 6px; line-height: 1;
}
.toggle-btn .fa { transition: transform .2s ease; }
.toggle-btn .fa.rotated { transform: rotate(180deg); }

.side_cat_img { width: 20px; height: 20px; object-fit: cover; margin-right: 8px; }
.menu-category-name, .menu-subcategory-name, .menu-childcategory-name { display: inline-flex; align-items: center; }


/* Pulse Animation */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(22, 163, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
  }
}
 /* Delivery Slot Section */
..dalivery_time_section {
    border-radius: 1px;
    overflow: hidden;
    margin-bottom: 10px;
}

.dalivery_time_section label {
  display: block;
  background: #3a6d6d;
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  padding: 15px 0;
  margin: 0;
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}

.checkout-box-item {
  background: #f9fdfc;
}

.checkout-delivery-wrapper {
    border-radius: 3px;
    background: #fff;
    border: 1px solid #dff3fc;
}

.checkout-delivery-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px;
    padding: 3px;
}

.checkout-delivery-item {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
}


.checkout-delivery-item select.form-control {
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    border-radius: 3px;
    padding: 5px 5px;
    color: #000;
    background-color: #fff;
    transition: all 0.3s ease;
}

.checkout-delivery-item select.form-control:focus {
  outline: none;
  border-color: #285c5c;
  box-shadow: 0 0 5px rgba(42, 102, 102, 0.4);
}


.checkout-delivery-wrapper label {
    display: block;
    background: #25aae2;
    color: #1e3d3d;
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    padding: 3px 15px;
    border-radius: 3px 3px 0px 0px;
}

.dalivery_time_section {
    margin-bottom: 10px;
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
}

select.form-control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #3a6d6d 50%), 
                    linear-gradient(135deg, #3a6d6d 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), 
                      calc(100% - 15px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

  .checkout-delivery-item {
    width: 100%;
  }
.date-item-title {
    display: flex;
    justify-content: space-around;
    background-color: #dff3fc;
    font-weight: 600;
    font-size: 13px;
    padding: 2px 0;
}

  .dalivery_time_section label {
    font-size: 15px;
}
.order-note-body p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #4b4b4d;
}
.all__address h4 {
    color: #4b4b4d;
    font-size: 19px;
}
.order-note-section {
    overflow: hidden;
    margin-bottom: 5px;
    border: 1px solid #faf4f4;
    border-radius: 3px;
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
}
.order-adress-body {
    padding: 5px 8px !important;
}
.order-note-header {
    background-color: #dff3fc;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 3px 0;
    color: var(--secondary-color-extra);
}

.loyalty_inner {
    padding: 2px 20px !important;
    font-size: 12px;
}
.rede__btn {
    text-align: right;

}
button.redeem_btn {
    background: var(--secondary-color);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 3px 7px;
    border-radius: 5px;
    margin: 0px 10px 5px 0px;
}
.order__title.order-note-section {
    margin-top: 10px;
}
.order__title .order-note-header {
    background-color: #f3c619 !important;
}
.copon__area {
    margin-bottom: 10px;
}
.copon__area h5 {
    color: #f79218;
    font-size: 12px;
    font-weight: 600;
}
.order-note-body {
    padding: 5px;
}
.order__submit {
    background: transparent;
    color: #ffff;
}
.order-note-textarea {
    width: 100%;
    height: 30px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    text-align: center;
    color: #777;
    font-weight: 500;
    resize: none;
}

.order-note-textarea::placeholder {
  color: #bbb;
  font-style: italic;
}

.payment_method {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.payment-methods label span {
    font-weight: 600;
    font-size: 14px;
}
.payment-methods input[type=radio] {
    border-radius: 100% !important;
}
.delivery-header_icon {
    display: flex;
    align-items: center;
    gap: 10px;
}
span.header_icon i {
    background: #e53935;
    color: #fff;
    padding: 3px;
    border-radius: 100px;
}
span.title {
    font-size: 14px;
}
.sticky-element {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
span.header_icon_regular i {
    background: #388e3c;
    color: #fff;
    padding: 3px;
    border-radius: 100px;
}
.all__address p {
    font-size: 12px;
}
.order__sumary {
   
    padding: 7px;
    /*margin-top: 15px;*/
    border-radius: 10px;
}
.modal_policy {
    font-size: 15px;
    margin-top: 20px;
    line-height: 27px;
}
.modal_policy a {
    color: var(--secondary-color);
    font-weight: 500;
}
.modal_phone {
    font-size: 20px;
    font-weight: 500;
}
.modal__login {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.resend_otp {
    margin-top: 20px;
    text-align: center;
}
.modal_close_btn {
    position: absolute;
    right: 15px;
    top: 11px;
    z-index: 999;
}
.social-login hr {
    border: none;
    border-top: 2px solid #242424;
}

.google-btn {
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
}

.google-btn img {
  width: 20px;
  height: 20px;
}

.google-btn:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}
 .modal-content {
    border-radius: 15px;
    overflow: hidden;
  }
  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
 
    .login-modal .modal-content {
      border-radius: 15px;
      overflow: hidden;
    }
    .login-left {
      background-color: #f8f9fa;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      padding: 30px;
    }
    .login-left img {
      width: 150px;
      margin-bottom: 15px;
    }
    .login-left h5 {
      font-weight: 600;
      margin-top: 10px;
    }
    .login-right {
      padding: 40px;
    }
    .login-right h4 {
      font-weight: 700;
      margin-bottom: 20px;
    }
    .otp-timer {
      background: #000;
      color: #fff;
      border: none;
      padding: 8px 20px;
      border-radius: 6px;
      margin-right: 10px;
    }
    .btn-login {
      background: #325b52;
      color: white;
      border: none;
      padding: 8px 25px;
      border-radius: 6px;
    }
    .btn-login:hover {
      background: #21433c;
    }
    .social-login button {
      margin-right: 10px;
    }
    
    /*login slider*/
    .ordering-process {
    background: #fff;
}
.ordering-slider .owl-dots {
    margin-top: 15px;
}
.ordering-slider .owl-dot span {
    width: 8px;
    height: 8px;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    margin-right: 7px;
}

.ordering-slider .owl-dot.active span {
    background: var(--secondary-color);
    width: 15px;
    height: 8px;
    border-radius: 10px;
}

.ordering-slider .owl-item img {
    max-width: 200px;
    margin: 0 auto;
}
.owl-carousel .owl-stage-outer {
    overflow: hidden;
}



/* Address Book Css Start*/
.cust_info_inner {
    /* display: grid; */
    display: flex;
    justify-content: space-between;
    background: var(--secondary-color);
    border-radius: 10px 10px 0 0;
    padding: 20px;
}


.cust_info_body {
    border: 1px solid;
    border-color: #ddd;
    border-top: none;
    border-radius: 0 0 15px 15px;
    min-height: 100vh;
    background-color: #fff;
}

.cust_icon {
    text-align: center;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 15px;
}

.cust_icon svg {
    height: 25px;
    width: 25px;
}

.cust_icon i {
    width: 35px;
    height: 35px;
    text-align: center;
    color: #fbfbfb;
    line-height: 35px;
    border-radius: 50%;
    font-size: 16px;
    background-color: var(--primary-color);
}

.cust_info_text {
    margin-top: 0px;
}

.cust_info_text h3 {
    font-size: 22px;
    margin-bottom: 0;
    color: #fff;
}

.cprofile-details {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 20px 15px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-radius: 6px;
}

.sp-label {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
}

.green-shadow {
    border: 1px solid;
    border-color: #ced4da;
}

.green-shadow::placeholder {
    color: #ddd;
}

.edit-submit-btn {
    color: #fff !important;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    padding: 7px 30px;
}

.order-table-body table thead tr th {
    white-space: nowrap;
    border-bottom: none;
    background-color: #fbfbfb;
    border: 1px solid #adadad;
    border-bottom-color: black;
}

.table> :not(:last-child)> :last-child>* {
    border-bottom-color: #ddd;
}

.address-item-wrapper {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
}
.cust_info_text p {
    color: #fff;
}

.address-item {
    display: grid;
    grid-template-columns: 90% 10%;
    border: 1px solid;
    border-radius: 12px;
    background-color: #fff;
    position: relative;
    padding: 10px;
    border-color: #828282;
    gap: 10px;
    align-items: center;
}
.address-item.active, .address-item:hover {
    border-color: var(--primary-color);
    background-color: #dee6ef;
}

.address-item .active-checkbox {
    flex: 0 0 50px;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    width: 50px;
}

.address-item .addresses {
    flex: 1 1 auto;
}

.address-item .addresses .item strong.bold {
    font-weight: 700;
    color: #000;
    font-size: 1rem;
}

.address-title-label {
    position: absolute;
    top: -1px;
    left: -1px;
    background-color: orange;
    border-radius: 5px;
    padding: 2px 15px;
}

.address-title-label span {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

span.address-radio-span {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
}

.active-checkbox [type="radio"]:checked+.address-radio-span::before,
.active-checkbox [type="radio"]:not(:checked)+.address-radio-span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border: 1px solid #828282;
    border-radius: 100%;
    background: #fff;
}

.active-checkbox [type="radio"]:checked+.address-radio-span:after,
.active-checkbox [type="radio"]:not(:checked)+.address-radio-span:after {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background-color: #828282;
}

.active-checkbox [type="radio"]:checked+.address-radio-span:after {
    background: var(--primary-color);

}

.active-checkbox [type="radio"]:checked+.address-radio-span:before {
    border-color: var(--primary-color);
}

.address-item .action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.address-item .action button {
    display: inline-block;
    font-weight: 600;
    font-size: 16px;
    min-width: 30px;
    background-color: transparent;
    color: #828282;
}

.address-item.active .action button.edit-address {
    color: var(--primary-color);
}

.address-item.active .action button.delete-address {
    color: var(--primary-color);
}

.address-book-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.address-book-header button {
    display: flex;
    align-items: center;
    background: none;
    /* border: 2px solid; */
    color: #000000;
    background: #fff;
    padding: 9px;
    padding-right: 15px;
    border-radius: 5px;
    column-gap: 10px;
}

.address-book-header .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    border-radius: 50%;
    position: relative;
    width: 28px;
    height: 28px;
}

.address-book-header .icon span {
    display: inline-block;
    background-color: #ddd;
    position: absolute;
}

.address-book-header .icon span:first-child {
    height: 15px;
    width: 1px;
}

.address-book-header .icon span:last-child {
    width: 15px;
    height: 1px;
}

.address-book-header .title p {
    font-size: 14px;
    color: #000;
    margin: 0;
    font-weight: 600;
}
.address-type.active {
  background-color: #198754 !important;
  color: #fff !important;
}


button#loginBtn {
    width: 100%;
    padding: 10px;
    background: var(--secondary-color);
    border: none;
}

button#timerBtn {
    /* padding: 8px  48px; */
    width: 100%;
    padding: 10px;
    background: #141726;
    border: none;
}
.address-item input, .select_addresss input:focus {
    height: 20px !important;
    width: 20px !important;
    border: 1px solid #fff;
}
.address-item:checked {
    background-color: var(--secondary-color) !important;
    border-color: #000 !important;
    height: 20px;
    width: 20px;
}
.address-card {
  transition: all 0.2s ease;
  cursor: pointer;
}
.address-card:hover {
  border-color: #198754;
  box-shadow: 0 0 6px rgba(25, 135, 84, 0.3);
}
.address-card.active {
  border: 2px solid #198754;
  background-color: #f5fff8;
  box-shadow: 0 0 8px rgba(25, 135, 84, 0.4);
}
.addressSelect {
  transition: 0.2s;
  cursor: pointer;
}
.address-item:hover {
  border-color: #198754;
  box-shadow: 0 0 6px rgba(25, 135, 84, 0.3);
}
.address-item.active {
  border: 2px solid #198754;
  background-color: #f5fff8;
}

/* css free shipping*/
.delivery-section {
  max-width: 360px;
  border-radius: 10px;
 
}

.cart_details {
    background: #fff;
}
.checkout-shipping {
    padding: 0 8px 0 0px;
}
.delivery-option {
    border-radius: 10px;
    padding: 5px;
    transition: 0.3s;
}


.delivery-option.free .delivery-header {
  background: #e53935;
  color: #fff;
}

.delivery-option.regular .delivery-header {
  background: #388e3c;
  color: #fff;
}
.delivery-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 15px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 15px;
    gap: 8px;
}
.delivery-charge {
    text-align: center;
    margin-top: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #929397;
    font-weight: 600;
    font-size: 13px;
}
.delivery-info i {
    color: var(--secondary-color);
    font-size: 17px;
}

.delivery-info {
    background: #f8f9fd;
    color: #bbbcbe;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cost-breakdown {
  color: red;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  margin-top: 10px;
}

.order-saving-box {
    background: #fff4f8;
    border: 1.5px solid #f3f3f3;
    border-radius: 8px;
    text-align: center;
    max-width: 360px;
    margin: 0px auto;
    margin-bottom: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
.saving-text {
    color: #1a2fa0;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    background: #dff3fc;
    border-radius: 3px;
}
p.cashback {
    color: red;
    font-size: 22px;
    margin: 0;
    font-weight: 600;
}

.saving-text .amount {
  font-weight: 700;
}

.saving_area {
    padding: 5px;
}
.cashback-text {
    color: #ed1922;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}


/*nav item css scroll*/




.thumb_slider .owl-item {
    transform: rotate(-90deg);
}


.indicator_thumb {
    max-height: 443px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/*.indicator_thumb::-webkit-scrollbar {*/
    display: none;  /* Chrome, Safari */
/*}*/
.image_nav_btn i{
    
}

.indicator-item {
    text-align: center;
    padding: 5px 0;
}

.indicator-item img {
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
    /* border: 2px solid #ddd; */
    cursor: pointer;
}


.main_slider .owl-dots {
    margin-top: 15px;
}
.main_slider .owl-dot span {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
}
.main_slider .owl-dot.active span {
    background: #00b894;
}

.main__items_prices {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.main__items_data {
    margin-left: 10px;
}
.proCheckout {
    padding: 18px;
    padding-right: 26px;
    position: fixed;
    width: 390px;
    bottom: 0;
    background: #fff;
    z-index: 999;
}

/* Cart sidebar: keep the page fixed and scroll only the cart items. */
body:has(.navigation.cartTable.open) {
    overflow: hidden;
}

.navigation.cartTable {
    overflow: hidden;
    border: 0;
}

.navigation.cartTable.open {
    box-shadow: -4px 3px 16px -4px rgba(0, 0, 0, 0.75);
}

.cartnavigation::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.38);
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.cartnavigation:has(.navigation.cartTable.open)::before {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.navigation.cartTable .cart-product {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
}

.navigation.cartTable .shopping-cart-head,
.navigation.cartTable .proCheckout {
    flex: 0 0 auto;
}

.navigation.cartTable .cart__area {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 100px;
    overscroll-behavior: contain;
}

.navigation.cartTable .proCheckout {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
}
.unavail_products {
    margin: 10px 0;
}
div#phoneSection ::placeholder {
    color: #999;
}
.cart__area img {
    height: 100%;
    object-fit: contain;
}

/*popup section css*/

.popup__section {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.main__popup_data {
    position: relative;
    width: auto;
    height: auto;
    max-width: 90%;
    animation: popupFadeIn 0.5s ease-in-out;
}

@keyframes popupFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.popup__close {
    position: absolute;
    top: 5px;
    right: 12px;
    /* background: none; */
    border: none;
    font-size: 30px;
    color: #333;
    cursor: pointer;
    z-index: 10000;
    transition: color 0.3s;
    background: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 34px;
    box-shadow: 1px 3px 15px #ddd;
    padding-bottom: 4px;
}
.main__popup_data img {
    width: 100%;
    height: 100%;
    display: block;
}


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

.wsit_stock_out_area {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
}
.wsit_stock_out_area h5 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50%;
    background: #cd6570;
    padding: 3px;
    color: #fff;
}
.wsit_detais_code p {
    font-size: 13px !important;
     margin: 7px 0px;
}
.wsit_detais_size {
    margin-bottom: 7px;
}
.wsit_detais_size p {
    font-size: 14px !important;
    font-weight: 600;
    margin: 1px 0px;
}
.stock_out_inner {
    background: #f27f20;
    display: inline-flex;
    height: 42px;
    min-height: 42px;
    padding: 0 30px;
    margin: 0;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    min-width: 250px;
    text-align: center;
}
.stock_out_inner p {
    color: #fff;
    font-weight: 600;
    margin: 0;
    line-height: 1;
}


/*================*/
div#wishlist {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
}

/* Card Container */
.offer-card {
    width: 360px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease;
}

.offer-card:hover {
    transform: translateY(-4px);
}

/* Image */
.offer-image img {
    width: 100%;
    display: block;
}

/* Meta Section */
.offer-meta {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    font-size: 13px;
    color: #555;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Content */
.offer-content {
    padding: 18px 16px 40px 16px;
    text-align: center;
}

.offer-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1f2937;
}

.offer-desc {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
}

/* CTA */
.btn-primary {
    background: #3b5bfd;
    color: #ffffff;
    border: none;
    padding: 10px 22px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-primary:hover {
    background: #2f49d1;
    color: #fff;
}

.offer-wrapper {
  max-width: 420px;
  background: #fff;
  margin: auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Header */
.offer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  font-size: 14px;
}

.timer span {
  background: #ff3b3b;
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  margin: 0 2px;
}

/* Banner */
.offer-banner {
  display: flex;
  background: linear-gradient(135deg, #0a4dbf, #0e77da);
  color: #fff;
}

.offer-banner .left {
  padding: 20px;
  width: 60%;
}

.offer-banner .right {
  width: 40%;
  display: flex;
  align-items: flex-end;
}

.geyser {
    width: 100%;
    /*height: 250px;*/
    object-fit: cover;
}



.price {
  font-size: 28px;
  font-weight: bold;
  margin: 10px 0;
}

.badges {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.badges div {
  background: rgba(255,255,255,0.15);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
}

/* Details */
.offer-wrapper .offer-details {
    padding: 20px;
    text-align: left;
}

.offer-date {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    padding-top: 0;
}

.offer-details h3 {
  margin-top: 0;
}

.offer-details ul {
  padding-left: 18px;
}

.desc {
  margin: 10px 0;
  color: #444;
}

.footer-link {
  margin-top: 15px;
  font-size: 13px;
  color: #666;
}

/* Reusable banner for dynamic and static product-listing pages */
.listing-page-banner {
  width: 100%;
  margin: 0 0 18px;
  overflow: hidden;
  line-height: 0;
}

.listing-page-banner a {
  display: block;
}

.listing-page-banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Customer account dashboard */
.account-dashboard { padding: 28px 0 45px; background: #f4f7fb; }
.account-dashboard-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.account-dashboard-sidebar { position: sticky; top: 15px; }
.account-dashboard-sidebar .customer-sidebar { max-height: calc(100vh - 30px); padding: 0; overflow-y: auto; border: 1px solid #e7ecf2; border-radius: 14px; box-shadow: 0 8px 30px rgba(20, 42, 74, .06); }
.account-dashboard-main { min-width: 0; }
.account-welcome-card { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 26px 30px; color: #fff; background: linear-gradient(125deg, #123f60 0%, var(--secondary-color) 58%, #4283b1 100%); border-radius: 16px; box-shadow: 0 14px 35px rgba(22, 83, 126, .2); }
.account-welcome-profile { display: flex; min-width: 0; align-items: center; gap: 18px; }
.account-avatar { display: flex; width: 78px; height: 78px; flex: 0 0 78px; align-items: center; justify-content: center; overflow: hidden; color: var(--secondary-color); background: #fff; border: 4px solid rgba(255,255,255,.3); border-radius: 50%; font-size: 30px; font-weight: 800; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-eyebrow { display: block; margin-bottom: 2px; color: #cfe9fb; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.account-welcome-card h1 { color: #fff; font-size: clamp(23px, 2.2vw, 32px); font-weight: 750; }
.account-welcome-card p { margin-top: 4px; color: rgba(255,255,255,.78); }
.account-primary-action { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 9px 17px; color: var(--secondary-color); background: #fff; border-radius: 9px; font-weight: 700; }
.account-primary-action:hover { color: #fff; background: var(--secondary-color-extra); }
.account-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.account-stat-card { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 17px; background: #fff; border: 1px solid #e8edf3; border-radius: 13px; box-shadow: 0 5px 20px rgba(20, 42, 74, .045); }
.account-stat-card:hover { color: #000; border-color: #b9d5e8; transform: translateY(-2px); }
.account-stat-card > span:last-child { min-width: 0; }
.account-stat-card small { display: block; overflow: hidden; color: #718096; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.account-stat-card strong { display: block; margin-top: 2px; color: #17212b; font-size: 21px; line-height: 1.2; }
.account-stat-icon { display: inline-flex; width: 43px; height: 43px; flex: 0 0 43px; align-items: center; justify-content: center; border-radius: 11px; font-size: 17px; }
.account-stat-icon--blue { color: #1674b6; background: #e8f4fc; }.account-stat-icon--green { color: #15803d; background: #eaf8ef; }.account-stat-icon--orange { color: #d97706; background: #fff4df; }.account-stat-icon--purple { color: #7c3aed; background: #f2ecff; }
.account-content-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 18px; }
.account-panel { background: #fff; border: 1px solid #e7ecf2; border-radius: 14px; box-shadow: 0 6px 25px rgba(20, 42, 74, .045); }
.account-panel-head { display: flex; min-height: 73px; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 20px; border-bottom: 1px solid #edf1f5; }
.account-panel-head span { display: block; color: #8391a2; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.account-panel-head h2 { margin-top: 2px; color: #17212b; font-size: 18px; font-weight: 750; }
.account-panel-head > a { color: var(--secondary-color); font-size: 13px; font-weight: 700; }
.account-info-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 5px 20px 16px; }
.account-info-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; padding: 15px 5px; border-bottom: 1px solid #f0f3f6; }
.account-info-item--wide { grid-column: 1 / -1; border-bottom: 0; }
.account-info-item > i { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: var(--secondary-color); background: #edf6fc; border-radius: 9px; }
.account-info-item small, .account-order-row small { display: block; color: #8a96a5; font-size: 11px; }
.account-info-item strong { display: block; overflow: hidden; color: #2b3540; font-size: 13px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.account-action-list { padding: 8px 14px 14px; }
.account-action-list > a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 6px; border-bottom: 1px solid #f0f3f6; }
.account-action-list > a:last-child { border-bottom: 0; }
.account-action-list > a > i { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: var(--secondary-color); background: #edf6fc; border-radius: 9px; }
.account-action-list strong, .account-action-list small { display: block; }.account-action-list strong { font-size: 13px; }.account-action-list small { color: #8a96a5; font-size: 11px; }.account-action-list b { color: #9aa6b2; font-size: 22px; font-weight: 400; }
.account-orders-panel { margin-top: 18px; }
.account-order-list { padding: 4px 18px 12px; }
.account-order-row { display: grid; grid-template-columns: 42px minmax(110px, 1.3fr) 1fr 1fr auto 15px; gap: 13px; align-items: center; padding: 13px 3px; border-bottom: 1px solid #edf1f5; }
.account-order-row:last-child { border-bottom: 0; }.account-order-row strong { display: block; color: #2c3640; font-size: 13px; }.account-order-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; color: var(--secondary-color); background: #edf6fc; border-radius: 10px; }.account-order-status { padding: 5px 10px; color: #17663a; background: #eaf8ef; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }.account-order-row > i { color: #9aa6b2; font-size: 11px; }
.account-empty-state { padding: 35px 15px; text-align: center; }.account-empty-state > i { color: #b8c5d1; font-size: 35px; }.account-empty-state h3 { margin-top: 10px; font-size: 17px; }.account-empty-state p { color: #8793a0; }.account-empty-state a { display: inline-block; margin-top: 12px; padding: 8px 15px; color: #fff; background: var(--secondary-color); border-radius: 7px; }

/* Unified customer panel and order experience */
.customer-panel-page { padding: 26px 0 45px; background: #f4f7fb; }
.customer-panel-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.customer-panel-sidebar { position: sticky; top: 15px; }
.customer-panel-sidebar .customer-sidebar { max-height: calc(100vh - 30px); padding: 0; overflow-y: auto; border: 1px solid #e5ebf1; border-radius: 14px; box-shadow: 0 8px 28px rgba(20,42,74,.06); }
.customer-panel-main { min-width: 0; }
.customer-page-heading { display: flex; min-height: 58px; align-items: center; gap: 14px; margin-bottom: 14px; }
.customer-page-heading > a { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; background: #fff; border: 1px solid #e1e8ee; border-radius: 50%; box-shadow: 0 4px 12px rgba(20,42,74,.06); }
.customer-page-heading span { display: block; color: #8491a0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.customer-page-heading h1 { margin-top: 1px; color: #17212b; font-size: 25px; font-weight: 750; }
.customer-order-tabs { display: flex; flex-wrap: nowrap; gap: 7px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.customer-order-tabs::-webkit-scrollbar { display: none; }
.customer-order-tabs li { flex: 0 0 auto; }
.customer-order-tabs button { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 7px 16px; color: #687789; background: transparent; border-radius: 30px; font-weight: 650; }
.customer-order-tabs button span { display: inline-flex; min-width: 21px; height: 21px; align-items: center; justify-content: center; background: rgba(0,0,0,.055); border-radius: 20px; font-size: 10px; }
.customer-order-tabs button.active { color: #fff; background: var(--secondary-color); }
.customer-order-tabs button.active span { background: rgba(255,255,255,.2); }
.customer-order-cards { display: grid; gap: 13px; }
.customer-order-card { overflow: hidden; background: #fff; border: 1px solid #e3e9ef; border-radius: 13px; box-shadow: 0 5px 18px rgba(20,42,74,.05); }
.customer-order-card > header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 16px; border-bottom: 1px solid #edf1f4; }
.customer-order-card header small { margin-right: 5px; color: #718094; }.customer-order-card header strong { font-size: 15px; }
.order-delivery-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; color: #087c75; background: #e6f6f4; border-radius: 20px; font-size: 11px; font-weight: 650; }
.customer-order-address { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-bottom: 1px solid #edf1f4; }
.customer-order-address > i { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; color: #fff; background: #0e8a83; border-radius: 8px; }
.customer-order-address strong, .customer-order-address span { display: block; }.customer-order-address strong { color: #27313b; font-size: 13px; }.customer-order-address span { color: #657386; font-size: 12px; }.customer-order-address p { margin-top: 3px; color: #4f5c69; font-size: 12px; line-height: 1.45; }
.customer-order-meta { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 15px; padding: 13px 16px 8px; }
.customer-order-meta > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.customer-order-meta span { color: #667487; font-size: 12px; }.customer-order-meta strong { color: #25303a; font-size: 12px; text-align: right; }
.order-status { display: inline-flex; padding: 4px 8px; color: #17663a !important; background: #e9f8ee; border-radius: 5px; }.order-status--danger { color: #fff !important; background: #f36d73; }.order-status--info { color: #176479 !important; background: #e7f4f7; }
.customer-order-view { display: flex; min-height: 40px; align-items: center; justify-content: center; margin: 6px 16px 14px; color: #087c75; background: #e8f2f4; border-radius: 7px; font-size: 13px; font-weight: 750; }.customer-order-view:hover { color: #fff; background: #087c75; }
.customer-panel-card { background: #fff; border: 1px solid #e3e9ef; border-radius: 13px; box-shadow: 0 6px 20px rgba(20,42,74,.06); }
.order-view-grid { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(390px, 1.1fr); gap: 18px; align-items: start; }
.order-timeline-card { padding-bottom: 14px; }
.customer-card-title { padding: 15px 18px; border-bottom: 1px solid #edf1f4; }.customer-card-title > span { display: block; color: #8592a1; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.customer-card-title h2 { margin-top: 2px; font-size: 17px; font-weight: 750; }
.customer-order-timeline { padding: 13px 18px; }
.order-timeline-item { position: relative; display: grid; grid-template-columns: 70px 28px minmax(0, 1fr); gap: 10px; min-height: 88px; }
.order-timeline-item:not(:last-child)::after { position: absolute; top: 29px; bottom: -2px; left: 83px; width: 2px; background: #dbe3ea; content: ''; }
.order-timeline-date { padding-top: 2px; }.order-timeline-date strong, .order-timeline-date span { display: block; color: #718094; font-size: 11px; }.order-timeline-date strong { font-weight: 700; }
.order-timeline-marker { position: relative; z-index: 2; display: inline-flex; width: 23px; height: 23px; align-items: center; justify-content: center; color: #fff; background: #c7d0d9; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #dbe3ea; font-size: 8px; }
.order-timeline-item.is-done .order-timeline-marker, .order-timeline-item.is-current .order-timeline-marker { background: #13a075; box-shadow: 0 0 0 1px #13a075; }.order-timeline-item.is-current .order-timeline-marker { animation: pulse 1.5s infinite; }.order-timeline-item.is-done:not(:last-child)::after { background: #13a075; }
.order-timeline-item h3 { color: #27313b; font-size: 14px; font-weight: 750; }.order-timeline-item p { margin-top: 3px; color: #788596; font-size: 11px; line-height: 1.45; }
.order-view-details { display: grid; gap: 12px; }
.order-help-card { padding: 14px; text-align: center; }.order-help-card p { color: #8895a4; font-size: 11px; }.order-help-card strong { color: #27313b; font-size: 13px; }.order-help-card a { color: #087c75; }
.order-delivery-person { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 11px; align-items: center; padding: 12px 15px; }.order-delivery-person img { width: 48px; height: 48px; object-fit: cover; border: 1px solid #e3e9ef; border-radius: 50%; }.order-delivery-person small, .order-delivery-person strong, .order-delivery-person a { display: block; }.order-delivery-person small { color: #8895a4; font-size: 10px; text-transform: uppercase; }.order-delivery-person strong { color: #27313b; font-size: 13px; }.order-delivery-person a { color: #087c75; font-size: 11px; }
.order-product-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 15px; border-bottom: 1px solid #edf1f4; }.order-product-row:last-child { border-bottom: 0; }.order-product-row img { width: 60px; height: 60px; padding: 4px; object-fit: contain; border: 1px solid #e3e9ef; border-radius: 8px; }.order-product-row strong, .order-product-row small { display: block; }.order-product-row strong { color: #27313b; font-size: 12px; }.order-product-row small { margin-top: 2px; color: #83909f; font-size: 10px; }.order-product-row b { color: #27313b; font-size: 12px; white-space: nowrap; }
.order-product-brand-code { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
.order-product-brand-code > span { color: #83909f; }
.copy-order-product-code { display: inline-flex; align-items: center; gap: 5px; padding: 1px 5px; color: var(--secondary-color); background: #edf6fc; border: 0; border-radius: 4px; font-size: 10px; line-height: 1.5; }
.copy-order-product-code:hover { color: #fff; background: var(--secondary-color); }
.copy-order-product-code i { font-size: 10px; }
.order-product-unit-price { display: flex !important; flex-wrap: wrap; align-items: center; gap: 5px; }
.order-product-unit-price del { color: #9aa3ad; font-size: 10px; }

/* Product-card cart states: light before adding, deep after adding. */
.product_item .cart_btn .addcartbutton {
    color: #fff;
    background: var(--secondary-color-extra);
    border-color: var(--secondary-color-extra);
    transition: background-color .2s ease, border-color .2s ease;
}
.product_item .cart_btn .addcartbutton:hover {
    color: #fff;
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}
.product_item .cart_btn .cart-button.added-btn,
.product_item .cart_btn .cart-button.added-btn:disabled {
    color: #fff;
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    opacity: 1;
}
.order-shipping-body { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 15px 18px; }.order-shipping-body > i { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: #718094; background: #edf1f4; border-radius: 8px; }.order-shipping-body strong, .order-shipping-body span { display: block; }.order-shipping-body strong { font-size: 13px; }.order-shipping-body span, .order-shipping-body p { color: #718094; font-size: 11px; }
.order-saving-message { padding: 14px; color: #087c75; background: #edfff8; border: 1px dashed #ccefe1; border-radius: 10px; font-size: 12px; font-weight: 650; }.order-saving-message i { margin-right: 6px; color: #f59e42; }
.order-summary-card { padding: 13px 17px; }.order-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 6px 0; color: #556271; font-size: 12px; }.order-summary-row strong { color: #27313b; text-align: right; }.order-summary-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid #e5ebf0; font-size: 14px; }.order-invoice-button { display: flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; color: #fff; background: var(--secondary-color); border-radius: 7px; font-size: 12px; font-weight: 700; }.order-invoice-button:hover { color: #fff; background: var(--secondary-color-extra); }

/* Existing customer screens inherit the same card/form finish. */
.customer-section:not(.account-dashboard):not(.customer-panel-page) { background: #f4f7fb; }
.customer-section:not(.account-dashboard):not(.customer-panel-page) .customer-content { border: 1px solid #e5ebf1; border-radius: 13px; box-shadow: 0 7px 25px rgba(20,42,74,.055); }
.customer-section .account-title { color: #27313b; font-size: 19px; font-weight: 750; }
.customer-section .customer-content label { margin-bottom: 6px; color: #4a5664; font-size: 12px; font-weight: 650; }
.customer-section .customer-content .form-control { min-height: 42px; border-color: #dfe6ec !important; border-radius: 7px; }

/* Shipping address modal */
.address-form-modal .modal-dialog { width: min(94vw, 500px); max-width: 500px; }
.address-form-modal .modal-content { overflow: hidden; background: #f7f9fb; border: 0; border-radius: 16px; box-shadow: 0 20px 55px rgba(20,42,74,.2); }
.address-form-modal .modal-header { position: relative; min-height: 60px; justify-content: flex-start; gap: 12px; padding: 12px 18px; background: #fff; border-bottom: 1px solid #edf1f4; }
.address-form-modal .modal-title { color: #17212b; font-size: 19px; font-weight: 750; }
.address-modal-back { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: transparent; border-radius: 50%; font-size: 17px; }
.address-modal-back:hover { background: #eef3f6; }
.address-form-modal .btn-close { position: absolute; right: 16px; opacity: .45; }
.address-form-modal .modal-body { padding: 14px; }
.address-form-card { padding: 19px; background: #fff; border: 1px solid #e4e9ee; border-radius: 12px; box-shadow: 0 5px 20px rgba(20,42,74,.07); }
.address-form-group { margin-bottom: 14px; }
.address-form-group .form-label { display: block; margin-bottom: 6px; color: #27313b; font-size: 12px; font-weight: 650; }
.address-form-group .form-label em, .profile-field label em { color: #ef4444; font-style: normal; }
.address-form-group .form-control, .address-form-group .form-select { width: 100%; min-height: 46px; padding: 10px 13px; color: #27313b; background-color: #fff; border: 1px solid #dfe5eb; border-radius: 8px; font-size: 13px; }
.address-form-group textarea.form-control { min-height: 68px; resize: vertical; }
.address-form-group .form-control:focus, .address-form-group .form-select:focus { border-color: #15857e; box-shadow: 0 0 0 3px rgba(21,133,126,.09) !important; }
.address-form-group .form-control::placeholder { color: #9aa6b3; font-size: 12px; }
.address-type-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.address-type-options .address-type { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 6px; color: #718094; background: #fff; border: 1px solid #dfe5eb; border-radius: 8px; font-size: 12px; font-weight: 650; }
.address-type-options .address-type.active { color: #087c75; background: #eefaf8; border-color: #087c75; }
.address-default-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 3px 2px 14px; color: #27313b; font-size: 12px; cursor: pointer; }
.address-default-row input { position: absolute; opacity: 0; pointer-events: none; }
.address-default-row i { position: relative; width: 47px; height: 26px; flex: 0 0 47px; background: #cbd2d9; border-radius: 30px; transition: .25s; }
.address-default-row i::after { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.15); content: ''; transition: .25s; }
.address-default-row input:checked + i { background: #10877f; }.address-default-row input:checked + i::after { transform: translateX(21px); }
.address-form-submit button { width: 100%; min-height: 45px; color: #fff; background: #10877f; border-radius: 8px; font-size: 13px; font-weight: 750; }
.address-form-submit button:hover { background: #086d67; }.address-form-submit button:disabled { opacity: .55; cursor: not-allowed; }

/* Profile edit */
.profile-edit-shell { display: grid; gap: 15px; }
.profile-photo-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; }
.profile-photo-preview { position: relative; width: 82px; height: 82px; flex: 0 0 82px; }
.profile-photo-preview > img { width: 100%; height: 100%; object-fit: cover; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #dfe6ec, 0 5px 16px rgba(20,42,74,.12); }
.profile-photo-preview > label { position: absolute; right: -1px; bottom: 2px; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: #fff; background: var(--secondary-color); border: 2px solid #fff; border-radius: 50%; cursor: pointer; font-size: 11px; }
.profile-photo-card h2 { color: #27313b; font-size: 17px; font-weight: 750; }.profile-photo-card p { margin: 3px 0 8px; color: #8491a0; font-size: 11px; }.profile-photo-button { display: inline-block; padding: 6px 10px; color: var(--secondary-color); background: #edf6fc; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; }
.profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; padding: 18px; }
.profile-field--wide { grid-column: 1 / -1; }
.profile-field label { display: block; margin-bottom: 6px; color: #4b5866; font-size: 12px; font-weight: 650; }
.profile-field .form-control { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #dfe6ec; border-radius: 8px; font-size: 13px; }
.profile-field textarea.form-control { min-height: 82px; resize: vertical; }.profile-field .form-control:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(22,83,126,.08) !important; }.profile-field .form-control[readonly] { color: #7c8997; background: #f1f4f6; }.profile-field > small { display: block; margin-top: 4px; color: #919daa; font-size: 10px; }
.profile-form-actions { position: sticky; bottom: 8px; display: flex; z-index: 3; align-items: center; justify-content: flex-end; gap: 9px; padding: 11px; background: rgba(255,255,255,.94); border: 1px solid #e3e9ef; border-radius: 11px; box-shadow: 0 8px 25px rgba(20,42,74,.1); backdrop-filter: blur(8px); }.profile-form-actions a, .profile-form-actions button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 8px 17px; border-radius: 7px; font-size: 12px; font-weight: 700; }.profile-form-actions a { color: #667487; background: #f0f3f6; }.profile-form-actions button { color: #fff; background: var(--secondary-color); }

/* Polished customer sidebar */
.customer-sidebar { overflow: hidden; background: #fff; }
.customer-sidebar .customer-auth { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; padding: 17px 15px; background: linear-gradient(145deg, #f7fbfe, #eef5fa); border-bottom: 1px solid #e0e8ef; }
.customer-sidebar .customer-img { width: 54px; height: 54px; overflow: hidden; background: #dce4eb; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 3px 12px rgba(20,42,74,.12); }
.customer-sidebar .customer-img img { width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 50%; }
.customer-sidebar .customer-name { min-width: 0; }.customer-sidebar .customer-name h6 { overflow: hidden; color: #1f2933; font-size: 15px; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; }.customer-sidebar .sidebar-cus-type p { margin: 2px 0 0 !important; color: var(--secondary-color); font-size: 11px; font-weight: 650; }
.customer-sidebar .balance-btn { display: inline-flex; margin-top: 6px; padding: 3px 8px; background: #fff; border-radius: 20px; box-shadow: none; }.customer-sidebar .balance-btn a { color: var(--secondary-color); font-size: 10px; }
.customer-sidebar .sidebar-menu { margin: 0; padding: 7px; background: #fff; border-radius: 0; }
.customer-sidebar .sidebar-menu > ul { display: grid; gap: 3px; }
.customer-sidebar .sidebar-menu ul li { margin: 0; border: 0; }
.customer-sidebar .sidebar-menu > ul > li > form { margin: 0; }
.customer-sidebar .sidebar-menu > ul > li > a, .customer-sidebar .sidebar-menu > ul > li .customer-sidebar-link { display: flex; min-height: 42px; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; color: #3e4a57; background: transparent; border: 0; border-radius: 8px; font-size: 12px; font-weight: 600; text-align: left; }
.customer-sidebar .sidebar-menu > ul > li > a:hover, .customer-sidebar .sidebar-menu > ul > li > a.active, .customer-sidebar .sidebar-menu > ul > li .customer-sidebar-link:hover { color: var(--secondary-color); background: #edf6fc; }
.customer-sidebar .sidebar-menu > ul > li > a > svg, .customer-sidebar .sidebar-menu > ul > li > a > i:first-child, .customer-sidebar .sidebar-menu > ul > li .customer-sidebar-link > svg, .customer-sidebar .sidebar-menu > ul > li .customer-sidebar-link > i:first-child { position: static; width: 17px; height: 17px; flex: 0 0 17px; color: currentColor; font-size: 14px; }
.customer-sidebar .sidebar-menu > ul > li > a > .fa-angle-down { top: auto; right: 11px; margin-left: auto; color: #98a4b1; font-size: 10px; transition: transform .2s; }
.customer-sidebar .sidebar-menu > ul > li > a[aria-expanded="true"] > .fa-angle-down { transform: rotate(180deg); }
.customer-sidebar .nav-second-level { margin: 2px 0 5px 27px; padding: 4px; background: #f7f9fb !important; border-left: 2px solid #dceaf3; border-radius: 0 7px 7px 0; }
.customer-sidebar .nav-second-level li a { min-height: 34px; padding: 7px 9px; color: #647180; background: transparent !important; border: 0; border-radius: 6px; font-size: 11px; font-weight: 550; }
.customer-sidebar .nav-second-level li a:hover, .customer-sidebar .nav-second-level li a.active { color: var(--secondary-color); background: #eaf3f9 !important; }
.customer-sidebar .nav-second-level li a svg { width: 13px; height: 13px; }
.customer-sidebar .reseller-code { margin: 5px 4px 8px; padding: 7px 9px; border-radius: 7px; font-size: 10px; }
.customer-mobile-toolbar, .customer-mobile-drawer, .customer-mobile-overlay { display: none; }

/* Sidebar follows its full content height; no nested desktop scrollbar. */
.account-dashboard-sidebar,
.customer-panel-sidebar {
    position: static;
}

.account-dashboard-sidebar .customer-sidebar,
.customer-panel-sidebar .customer-sidebar {
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
}

.customer-sidebar .nav-second-level li a {
    min-height: 38px;
    font-size: 13px;
    line-height: 1.35;
}

/* Homepage top categories: stable square cards with automatic columns. */
.home-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    align-items: start;
}

.home-category-grid .cat-item {
    min-width: 0;
}

.home-category-grid .cat-img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.home-category-grid .cat-img > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.home-category-grid .cat-img img {
    width: 100%;
    height: 100% !important;
    object-fit: contain;
}

/* Home hero: left slider and two right banners share one exact height. */
@media only screen and (min-width: 992px) {
    .slider-section .banner_area {
        aspect-ratio: 3.16 / 1;
        align-items: stretch;
    }

    .slider-section .banner_main_area,
    .slider-section .main-index-page,
    .slider-section .index-slider,
    .slider-section .home-slider-container,
    .slider-section .main_slider,
    .slider-section .main_slider .owl-stage-outer,
    .slider-section .main_slider .owl-stage,
    .slider-section .main_slider .owl-item,
    .slider-section .slider-item,
    .slider-section .slider-item > a,
    .slider-section .banner_right_area {
        height: 100% !important;
        min-height: 0;
    }

    .slider-section .slider-item {
        aspect-ratio: auto;
    }

    .slider-section .slider-item img,
    .slider-section .banner-right-item img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
    }

    .slider-section .banner_right_area {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .slider-section .banner-right-item {
        width: 100%;
        height: 100% !important;
        min-height: 0;
    }
}