@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
}

body {
    background: #f2f2f2;
    cursor: auto !important;
}

/* container size */
.container {
    max-width: 100%;
    margin: auto;
    padding: 0px 4px;
}

/* Scroll */
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #949494;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

@media (min-width: 767px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 640px) {
    .container {
        max-width: 90%;
    }
}

:root {
    --color-1: #000000;
    --color-2: #ff9801;
    --color-3: #ffffff;
    --color-4: #f7e2c3;
    --color-5: #fee2e2;
    --color-6: #991b1b;
    --color-7: #3bb000;
    --color-8: #5b5b5b;
}

a {
    color: var(--color-1);
    text-decoration: none;
}

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

h1,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
cite,
code,
del,
dfn,
img,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
dd,
dl,
dt,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
figure,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 100%;
    line-height: 1;
    font-family: inherit;
}

.yellow-clr {
    color: var(--color-2) !important;
}

/* HEADER MIAN */
.header-main {
    box-shadow:
        0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: var(--color-3);
    z-index: 99999;
}

/* TOPBAR--------------------------------------------------------------------------------------------- */
.topbar {
    background-color: var(--color-1);
    padding: 10px 0px;
}

.topbar li,
.topbar a {
    color: var(--color-3);
}

.topbar .left img {
    height: 20px;
    width: 20px;
    object-fit: contain;
    cursor: pointer;
}

.topbar .left li {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
}

.topbar .right ul {
    gap: 10px;
}

.topbar .right ul li {
    display: flex;
    align-items: center;
}

.topbar .right ul li a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.topbar .right ul li img {
    height: 25px;
    width: 26px;
    object-fit: contain;
}

/* HEADER ------------------------------------------------------------------------------------------------ */
header {
    padding: 5px 0px;
}

header .inner {
    display: flex;
    flex-flow: row;
    width: 100%;
    justify-content: space-between;
}

header .inner .logo img {
    height: 42px;
}

header .inner .logo a {
    padding: 5px 0px 0px;
    display: inline-block;
}

header .inner .right-menu {
    gap: 10px;
    padding: 0px;
    align-items: center;
    display: flex;
    flex-flow: row;
    /* width: 100%; */
}

header .inner .search {
    padding: 5px 10px;
}

header .inner .search .search-inner {
    /* padding: 0px 10px 10px 10px; */
    background-color: var(--color-3);
}

@media (min-width: 768px) {
    header .inner .search .search-inner {
        padding: 0;
        position: relative;
    }

    header .inner .search .search-inner input {
        transition-property: box-shadow;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 0.15s;
    }
}

header .inner .search .search-inner input {
    border-color: rgb(219, 214, 221) !important;
    height: 42px;
    font-size: 13px;
    width: 100%;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--color-3);
    border-radius: 5px;
    outline: 2px solid transparent;
    outline-offset: 2px;
    padding: 10px 40px 10px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid;
}

header .inner .search .search-inner .icon {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0px;
    cursor: pointer;
}

header .inner .search .search-inner input:focus {
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
}

header .inner .right-menu .link_items img {
    height: 52px;
    width: 28px;
    object-fit: contain;
}

header .inner .right-menu .link_items a {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    font-size: 13px;
}

header .inner .right-menu .login-btn a {
    padding: 10px;
    height: 42px;
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    text-align: center;
    border: 1px solid var(--color-1);
    font-size: 14px;
    gap: 16px;
    position: relative;
    cursor: pointer;
}

header .inner .right-menu .cart a img {
    height: 35px;
    width: 35px;
    object-fit: contain;
}

header .inner .right-menu .cart span {
    position: absolute;
    top: -8px;
    right: -4px;
    height: 16px;
    width: 16px;
    background-color: var(--color-6);
    color: var(--color-3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: 10px;
    line-height: 1;
}

/* main content */
.mega-menu {
    position: sticky;
    top: 120px;
    left: 0px;
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
    background-color: var(--color-3);
    padding: 15px 0px 15px 0px;
    border-radius: 8px;
    z-index: 9999;
}

.mega-menu ul {
    max-height: 650px;
}

.mega-menu ul.main_ul {
    overflow-y: scroll;
}

/* .mega-menu ul::-webkit-scrollbar {
    display: none;
} */

.mega-menu ul li{
    padding: 0px 5px;
}
.mega-menu ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 5px 15px;
    /* border-start-start-radius: 1.5rem;
    border-end-start-radius: 1.5rem; */
    border-radius: 4px;
    font-size: 13px;
    height: 40px;
}

.mega-menu ul li:hover a {
    background-color: var(--color-4);
}

.mega-menu ul li a img {
    height: 30px;
    width: 30px;
    padding: 5px;
    object-fit: contain;
    border-radius: 100px;
    background-color: var(--color-3);
}

.all-categories {
    margin-top: 0.5rem;
    margin-right: 20px;
}

.all-categories a {
    color: var(--color-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.025em;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: 0.125rem;
    display: block;
    transition: 0.3s;
}

.all-categories a:hover {
    background-color: var(--color-2);
    color: var(--color-3);
}

.mega-menu ul li ul.menu-dropdown {
    position: absolute;
    top: 0px;
    left: 100%;
    background-color: var(--color-4);
    height: 100%;
    width: 100%;
    padding: 15px 5px 15px 5px;
    display: none;
    border-radius: 8px;
}

.mega-menu ul.main_ul li.dropdown-link:hover ul.menu-dropdown {
    display: block;
}

.mega-menu ul li ul.menu-dropdown a {
    padding: 10px 15px;
    height: 40px;
}

.mega-menu ul li ul.menu-dropdown li:hover a {
    background-color: var(--color-3);
}

.mega-menu ul li ul.menu-dropdown ul {
    position: absolute;
    top: 0px;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--color-3);
    padding: 15px;
    display: none;
}

.mega-menu ul.main_ul li.dropdown-link ul.menu-dropdown li:hover ul {
    display: block;
}

.mega-menu ul li ul.menu-dropdown ul li h4 {
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--color-2);
    font-weight: 600;
}

.mega-menu ul li ul.menu-dropdown ul li a {
    font-size: 14px;
    padding: 0px;
    width: 100%;
    height: 24px;
    transition: 0.3s;
}

.mega-menu ul li ul.menu-dropdown ul li a:hover {
    color: var(--color-2);
}

.title h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--color-1);
}

.main-menu .content-box .products .slide-btn .swiper-button-prev::after,
.main-menu .content-box .products .slide-btn .swiper-button-next::after {
    display: none;
}

.main-menu .content-box .products .slide-btn .swiper-button-prev,
.main-menu .content-box .products .slide-btn .swiper-button-next {
    cursor: pointer;
    height: 32px;
    width: 32px;
    border: 1px solid var(--color-8);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: 0.3s;
    margin-top: 0px;
}

.main-menu .content-box .products .slide-btn .swiper-button-prev:hover,
.main-menu .content-box .products .slide-btn .swiper-button-next:hover {
    border: 1px solid var(--color-2);
}

.main-menu .content-box .products .item {
    position: relative;
    background-color: var(--color-3);
    padding: 16px;
    border: 1px solid var(--color-4);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main-menu .content-box .products .item .ship {
    position: absolute;
    top: 0px;
    left: 0px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 1;
    left: 5px;
    top: 5px;
    background-color: var(--color-5);
    font-size: 11px;
    padding: 4px;
    border-radius: 4px;
    color: var(--color-6);
}

.main-menu .content-box .products .item .ship img {
    height: 15px;
    width: 13px;
    object-fit: contain;
}

.main-menu .content-box .products .item .image {
    padding: 30px 20px 5px 20px;
}

.main-menu .content-box .products .item h5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    height: 37px;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-1);
    font-weight: 500;
}

.main-menu .content-box .products .item .left span {
    color: var(--color-2);
    font-size: 12px;
}

.main-menu .content-box .products .item .left p {
    color: var(--color-8);
    font-size: 12px;
}

.main-menu .content-box .products .item .right {
    color: var(--color-1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: normal;
}

.main-menu .content-box .products .item .right:hover {
    text-decoration: underline;
}

.main-menu .content-box .products .item .price-pack {
    height: 20px;
    font-size: 14px;
    color: var(--color-8);
}

.main-menu .content-box .products .item .price {
    color: var(--color-1);
    font-weight: 600;
}

.main-menu .content-box .products .item .price del {
    color: var(--color-8);
    font-weight: 400;
}

.main-menu .content-box .products .item .price span {
    color: var(--color-7);
    font-weight: 400;
    font-size: 10px;
    padding: 1px 6px;
    border: 1px dashed var(--color-7);
    border-radius: 4px;
}

.main-menu .content-box .products .item .bottom-btn {
    margin-top: 20px;
}

.main-menu .content-box .products .item .cart-btn {
    border: 1px solid var(--color-2);
    color: var(--color-2);
    padding: 8px 5px;
    border-radius: 4px;
    font-size: 13px;
    background-color: transparent;
}

.main-menu .content-box .products .item .buy-btn {
    background-color: var(--color-1);
    color: var(--color-3);
    padding: 8px 5px;
    border-radius: 4px;
    font-size: 13px;
}

.main-menu .content-box .products .item button:hover {
    background-color: var(--color-2);
    color: var(--color-3);
}

.categopries .box-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}

.categopries .box-content .box {
    background-color: var(--color-3);
    border-radius: 5px;
    padding: 15px;
    color: var(--color-1);
}

.categopries .box-content .box h4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    height: 37px;
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 18px;
    color: var(--color-1);
    font-weight: 500;
}
.categopries .box-content .box .price-pack{
    height: 20px;
    font-size: 14px;
    color: var(--color-8);
}
.categopries .box-content .box .price{
    color: var(--color-1);
    font-weight: 600;
}
.categopries .box-content .box .price del{
    color: var(--color-8);
    font-weight: 400;
}
.categopries .box-content .box  .bottom-btn {
    margin-top: 20px;
}
.categopries .box-content .box  .cart-btn {
    border: 1px solid var(--color-2);
    color: var(--color-2);
    padding: 8px 5px;
    border-radius: 4px;
    font-size: 13px;
    background-color: transparent;
}
.categopries .box-content .box  .buy-btn {
    background-color: var(--color-1);
    color: var(--color-3);
    padding: 8px 5px;
    border-radius: 4px;
    font-size: 13px;
}
.categopries .box-content .box  button:hover {
    background-color: var(--color-2);
    color: var(--color-3);
}

.categopries .box-content .box ul {
    margin-bottom: 24px;
}

.categopries .box-content .box ul li {
    margin-bottom: 5px;
}

.categopries .box-content .box ul li a {
    color: var(--color-1);
    transition: 0.3s;
}

.categopries .box-content .box ul li a:hover {
    color: var(--color-2);
}

.categopries .box-content .box .see-all {
    color: var(--color-2);
}

.categopries .title .view-all {
    font-weight: 600;
    text-decoration: underline;
    color: var(--color-2);
}

.testmonials .title,
.about-us .title {
    margin-bottom: 20px;
}

.testmonials .title h2,
.about-us .title h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-2);
    margin-bottom: 15px;
    text-align: center;
}

.testmonials .title p,
.about-us .title p {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-8);
    text-align: center;
}

.testmonials .testmonial-slide .review {
    background-color: var(--color-3);
    border: 1px solid var(--color-4);
    padding: 15px;
    height: 320px;
}

.testmonials .testmonial-slide .review .top {
    gap: 10px;
}

.testmonials .testmonial-slide .review .image img {
    height: 70px;
    width: 70px;
    object-fit: contain;
}

.testmonials .testmonial-slide .review .text {
    width: 80%;
}

.testmonials .testmonial-slide .review .text h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-1);
}

.testmonials .testmonial-slide .review .text span {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-8);
}

.testmonials .testmonial-slide .review p {
    font-size: 14px;
    line-height: 25px;
    color: var(--color-1);
    -webkit-line-clamp: 8;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.about-us {
    background-color: var(--color-3);
    margin: 0px 0px 20px;
    padding: 10px 10px 40px;
}

.about-us .youtube-video {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.about-us .youtube-video .inner {
    border-radius: 0.375rem;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us .youtube-video .inner iframe {
    height: 100%;
    width: 100%;
}

.our-details .inner {
    padding: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 25;
    background-color: var(--color-3);
}

.our-details .inner.show {
    -webkit-line-clamp: inherit;
}

.our-details h3 {
    color: var(--color-1);
    font-weight: 600;
    font-size: 15px;
    line-height: normal;
    margin: 12px 0px;
}

.our-details p {
    margin-bottom: 10px;
    line-height: 20px;
    font-size: 14px;
    color: var(--color-8);
}

.our-details ol {
    padding-left: 20px;
}

.our-details ol li a {
    text-decoration: underline;
    color: var(--color-2);
    line-height: 20px;
    font-size: 14px;
}

.our-details .show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
}

.our-details .show-more button {
    border: 1px solid rgb(223, 223, 223);
    border-radius: 12px;
    background-color: var(--color-3);
    padding: 8px 25px;
    display: inline-block;
    font-size: 16px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.all_link {
    margin: 40px 0px;
}

.all_link h4 {
    font-size: 16px;
    font-weight: 700;
    margin-top: 15px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.all_link ul {
    /* display: flex;
    align-items: center;
    flex-wrap: wrap; */
}

.all_link ul li {
    font-size: 14px;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}

.all_link ul li::after {
    content: "|";
    margin-left: 5px;
    margin-right: 5px;
    color: var(--color-8);
}

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

.all_link ul li a {
    color: var(--color-8);
}

.all_link ul li a:hover {
    color: var(--color-2);
}

.experience-industrialestores {
    background-color: var(--color-1);
    padding: 40px 0px;
}

.experience-industrialestores .content {
    gap: 10px;
    margin-bottom: 15px;
}

.experience-industrialestores .content:last-child {
    margin-bottom: 0px;
}

.experience-industrialestores .content .left img {
    height: 50px;
    width: 50px;
    object-fit: contain;
}

.experience-industrialestores .content h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-3);
    margin-bottom: 4px;
}

.experience-industrialestores .content p {
    font-size: 14px;
    color: var(--color-3);
    line-height: 18px;
}

.experience-industrialestores .content p span {
    font-size: 15px;
    font-weight: 300;
}

footer {
    padding: 40px 0px;
    background-color: var(--color-4);
}

footer h4 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--color-2);
}

footer ul {
    list-style: disc;
    padding-left: 15px;
}

footer ul li a {
    color: var(--color-1);
    transition: 0.3s;
    line-height: 20px;
}

footer ul li a:hover {
    color: var(--color-2);
}

footer .news-letter {
    background-color: var(--color-3);
    padding: 15px;
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
    text-align: center;
    border-radius: 6px;
}

footer .news-letter h3 {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-8);
}

footer .news-letter .input {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    padding: 6px 6px 6px 10px;
    background-color: #f4f6f8;
}

footer .news-letter .input input {
    height: 44px;
    font-size: 13px;
    width: 100%;
    padding: 10px;
    border-radius: 24px;
    outline: none;
    border: none;
    padding-right: 120px;
}

footer .news-letter .input button {
    position: absolute;
    top: 5px;
    right: 4px;
    font-size: 13px;
    height: 34px;
    line-height: 1;
    border-radius: 100px;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
    background-color: var(--color-1);
    color: var(--color-3);
    display: flex;
    padding: 12px 15px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

footer .news-letter .input button:hover {
    background-color: var(--color-2);
}

footer .news-letter p {
    font-size: 13px;
    color: var(--color-8);
    margin-top: 10px;
}

.copyiright {
    padding: 20px 0px;
    background-color: var(--color-3);
}

.copyiright p {
    color: var(--color-8);
    font-size: 13px;
}

.copyiright img {
    height: 20px;
    object-fit: contain;
}


@media (max-width: 1199px) {
    .mega-menu ul.main_ul li.dropdown-link ul.menu-dropdown {
        display: none !important;
    }

    .mega-menu {
        position: static;
        display: flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
        padding: 0px;
        border-radius: 0.125rem;
    }

    .mega-menu ul.main_ul {
        overflow-x: scroll;
        display: flex;
        justify-content: start;
        white-space: nowrap;
    }

    .all-categories {
        margin: 0px;
    }

    .all-categories a {
        color: var(--color-3);
        padding: 15px;
        background: var(--color-2);
    }

    .mega-menu ul li a {
        padding: 0px 5px;
        border-radius: 1.5rem;
    }
}

@media (max-width: 991px) {
    .experience-industrialestores .content {
        text-align: start !important;
    }

    header .inner {
        display: flex;
        flex-flow: wrap;
        width: 100%;
        justify-content: space-between;
    }

    header .inner .logo {
        order: 0;
    }

    header .inner .search {
        order: 2;
        padding: 5px 0px;
    }

    header .inner .right-menu {
        order: 1;
        gap: 10px;
        padding: 0px;
        align-items: center;
        display: flex;
        flex-flow: row;
        width: auto;
    }

    .topbar .right {
        display: none !important;
    }

    header .inner .right-menu .link_items {
        display: none;
    }
}

@media (max-width: 767px) {
    .categopries .box-content {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .categopries .box-content {
        grid-template-columns: 1fr 1fr;
    }
    .categopries .box-content .box  .bottom-btn {
        flex-wrap: wrap;
    }
    .copyiright img {
        width: 100%;
    }

    .mega-menu ul li a {
        flex-wrap: wrap;
        padding: 0px 5px;
        border-radius: 1.5rem;
        height: auto;
        justify-content: center;
        padding: 10px;
        font-size: 10px;
        gap: 4px;
        background: var(--color-4);
        border-radius: 0.125rem;
    }

    .mega-menu {
        gap: 0px;
    }

    .all-categories a {
        color: var(--color-3);
        padding: 15px;
        background: var(--color-2);
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 425px) {
    .main-menu .content-box .products .item .bottom-btn {
        flex-wrap: wrap;
    }

    .main-menu .content-box .products .item .price span {
        display: none;
    }

    .main-menu .content-box .products .item .right {
        color: var(--color-1);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        white-space: nowrap;
        text-align: start !important;
        padding-left: 8px;
    }
}


/* cart */
.inner-page-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 0px;
}
.inner-page-top .left,
.inner-page-top .right{
    width: 100px;
}
.inner-page-top .left svg{
    fill: var(--color-8);
}
.inner-page-top .open-tab ul{
    display: flex;
    align-items: center;
    gap: 20px;
}
.inner-page-top .open-tab ul li{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #BCBCBC;
}
.inner-page-top .open-tab ul hr{
    width: 50px;
}
.inner-page-top .open-tab ul li svg{
    stroke: #BCBCBC;
}
.inner-page-top .open-tab ul li.active{
    color: var(--color-1);
}
.inner-page-top .open-tab ul li.active svg{
    stroke: var(--color-1);
}
.inner-page-top .open-tab ul li.success{
    color: var(--color-7);
}
.inner-page-top .open-tab ul li.success svg{
    stroke: var(--color-3);
    fill: var(--color-7);
}
input[type=number] {
    -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.my-cart .content{
    position: relative;
    padding: 10px 30px 10px 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    box-shadow: 1px 2px 5px 2px rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--color-3);
}
.my-cart .content .close-btn{
    position: absolute;
    top: 10px;
    right: 10px;
}
.my-cart .content .close-btn button{
    background: transparent;
    border: none;
    cursor: pointer;
}
.my-cart .content .close-btn button svg path{
    fill: var(--color-8);
}
.my-cart .content .close-btn button:hover svg path{
    fill: var(--color-6);
}
.my-cart .content .image{
    min-width: 100px;
    height: 100px;
    object-fit: cover;
}
.my-cart .content .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.my-cart .content .text{
    display: flex;
    align-items: start;
    gap: 15px;
    flex-direction: column;
}
.my-cart .content .text h5 a{
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1);
}
.my-cart .content .text .price{
    display: flex;
    align-items: center;
    gap: 5px;
}
.my-cart .content .text .price span{
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1);
}
.my-cart .content .text .price del{
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1);
}
.quantity{
    display: flex;
    align-items: center;
    gap: 5px;
}
.quantity input{
    width: 50px;
    height: 30px;
    border-radius: 6px;
    border: none;
    text-align: center;
    outline: none;
}
.quantity button{
    width: 30px;
    height: 30px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    background: var(--color-1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.quantity button svg line{
    stroke: var(--color-3);
}
.quantity button:hover{
    background: var(--color-1);
}

.main-menu .banner-slide .image a img {
    height: 370px;
    object-fit: cover;
}

.cart-right {
    position: sticky;
    top: 120px;
    z-index: 9999;
}
.cart-right .inner{
    box-shadow: 1px 2px 5px 2px rgba(0,0,0,.1);
    background-color: var(--color-3);
    padding: 15px 15px;
    margin-bottom: 15px;
}
.cart-right .inner.red{
    border: 1px solid #ecc3c3;
}
.cart-right .inner:last-child{
    margin-bottom: 0px;
}
.cart-right .inner h3{
    font-size: 16px;
    font-weight: 600;
    color: var(--color-1);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.cart-right .inner h3 svg{
    stroke: var(--color-1);
}
.cart-right .inner h3 span{
    font-weight: 400;
}
.cart-right .inner .form-group{
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}
.cart-right .inner .form-group input{
    width: 100%;
    height: 40px;
    border-radius: 6px;
    border: none;
    outline: none;
    padding: 10px 68px 10px 10px;
    border: 1px solid #bcbcbc;
}   
.cart-right .inner .form-group button{
    width: auto;
    height: 30px;
    border-radius: 6px;
    border: none;
    outline: none;
    background: var(--color-1);
    color: var(--color-3);
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 10px;
    font-size: 12px;
    transition: 0.3s;
}
.cart-right .inner .form-group button:hover{
    background: var(--color-2);
}
.cart-right .inner p{
    font-size: 14px;
    font-weight: 400;
    color: var(--color-8);
    margin-bottom: 0px;
    margin-top: 10px;
}
.cart-right .inner .selling-price{
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    padding: 15px 0px;
}
.cart-right .inner .selling-price .main-price{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}
.cart-right .inner .selling-price .main-price:last-child{
    margin-bottom: 0px;
}
.cart-right .inner .selling-price .main-price p{
    font-size: 14px;
    font-weight: 400;
    color: var(--color-1);
    margin-top: 0px;
}
.cart-right .inner .total-price{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 15px;
}
.cart-right .inner .total-price p{
    font-size: 14px;
    color: var(--color-1);
    margin-top: 0px;
}
.cart-right .login-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-radius: 6px;
    border: none;
    outline: none;
    background: var(--color-1);
    color: var(--color-3);
    cursor: pointer;
    padding: 10px;
    font-size: 12px;
    transition: 0.3s;
    white-space: nowrap;
    justify-content: center;
    background-color: var(--color-1);
    cursor: pointer;
    color: var(--color-3);
    margin: 0px 0px 15px;
}
.cart-right .login-btn:hover{
    background-color: var(--color-2);
}
@media (max-width: 767px) {
    .inner-page-top .open-tab ul hr {
        width: 24px;
    }
}
@media (max-width: 575px) {
    .inner-page-top {
        justify-content: center;
    }
    .inner-page-top .left, .inner-page-top .right {
        display: none;
    }
    .inner-page-top .open-tab ul {
        gap: 4px;
    }
    .inner-page-top .open-tab ul li {
        font-size: 12px;
    }
}


.address-form form .input-group label {
    font-size: 12px;
    color: var(--color-8);
    margin-bottom: 5px;
}
.address-form form .input-group input {
    width: 100%;
    height: 40px;
    border-radius: 6px !important;
    border: none;
    outline: none;
    padding: 10px;
    border: 1px solid #bcbcbc;
}
.address-form form .input-group button {
    width: auto;
    height: 40px;
    border-radius: 6px;
    border: none;
    outline: none;
    background: var(--color-1);
    color: var(--color-3);
    cursor: pointer;
    padding: 10px;
    font-size: 12px;
    transition: 0.3s;
    white-space: nowrap;
    justify-content: center;
    background-color: var(--color-1);
    cursor: pointer;
    color: var(--color-3);
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.address-form form .form-inner{
    display: flex;
    align-items: center;
    gap: 24px;
}
.address-form form .form-inner .form-check{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px;
}
.address-form form .form-inner .form-check input{
    width: 16px;
    height: 16px;
    border-radius: 6px;
    border: 1px solid #bcbcbc;
    accent-color: var(--color-1);
}
.address-form form .form-inner .form-check input:checked{
    background-color: var(--color-1);
    border-color: var(--color-1);
}
.address-form form .form-inner .form-check input:checked + label{
    color: var(--color-1);
}
.address-form form .form-inner .form-check label{
    font-size: 12px;
    color: var(--color-8);
}
.address-form form ul{
    display: flex;
    align-items: center;
    gap: 10px;
}
.address-form form ul li{
    font-size: 12px;
    color: var(--color-8);
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #bcbcbc;
    transition: 0.3s;
}
.address-form form ul li.active{
    color: var(--color-2);
    border-color: var(--color-2);
}   
.address-form .continue-btn{
    width: auto;
    height: 40px;
    border-radius: 6px;
    border: none;
    outline: none;
    background: var(--color-1);
    color: var(--color-3);
    cursor: pointer;
    padding: 10px 16px;
    font-size: 12px;
    transition: 0.3s;
    white-space: nowrap;
    justify-content: center;
    background-color: var(--color-1);
    cursor: pointer;
    color: var(--color-3);
}
.address-form .continue-btn:hover{
    background-color: var(--color-2);
}

.profile-menu .left-content ul li{
    margin-bottom: 4px;
    border-bottom: 1px solid #bcbcbc;
    padding-bottom: 4px;
}   
.profile-menu .left-content ul li:last-child{
    margin-bottom: 0px;
    border-bottom: none;
    padding-bottom: 0px;
}
.profile-menu .left-content ul li a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--color-3);
    border-radius: 6px;
    overflow: hidden;
}
.profile-menu .left-content ul li.active a{
    background: var(--color-1);
    color: var(--color-3);
}
.profile-menu .left-content ul li.active a img,
.profile-menu .left-content ul li:hover a img{
    filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(317deg) brightness(115%) contrast(100%);
}
.profile-menu .left-content ul li:hover a{
    background: var(--color-1);
    color: var(--color-3);
}
.profile-menu .left-content ul li a img{
    height: 24px;
    width: 24px;
    object-fit: contain;
}
.profile-menu{
    margin-top: 30px;
}
.profile-menu .right-content .content h3{
    font-size: 16px;
    font-weight: 600;
    color: var(--color-1);
    margin-bottom: 15px;
}
.profile-menu .right-content .content .information h4{
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1);
    margin-bottom: 5px;
}
.profile-menu .right-content .content .information p{
    font-size: 14px;
    font-weight: 400;
    color: var(--color-1);
    margin-bottom: 0px;
}
.profile-menu .right-content .content .information .profile-item{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 24px;
}
.profile-menu .right-content .content .information .profile-item .icon{
    height: 40px;
    width: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-menu .right-content .content .edit-btn{
    width: auto;
    height: 40px;
    border-radius: 6px;
    border: none;
    outline: none;
    background: var(--color-1);
    color: var(--color-3);
    cursor: pointer;
    padding: 10px 16px;
    font-size: 12px;
    transition: 0.3s;
    white-space: nowrap;
    justify-content: center;
    background-color: var(--color-1);
    cursor: pointer;
    color: var(--color-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.empty-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}
.empty-cart img{
    width: 200px;
}
.empty-cart h4{
    font-size: 20px;
    font-weight: 600;
    color: var(--color-1);
}
.empty-cart p{
    font-size: 14px;
    font-weight: 400;
    color: var(--color-1);
}
.empty-cart .btn{
    width: auto;
    height: 40px;
    border-radius: 6px;
    border: none;
    outline: none;
    background: var(--color-1);
    color: var(--color-3);
    cursor: pointer;
    padding: 10px 16px;
    font-size: 12px;
    transition: 0.3s;
    white-space: nowrap;
    justify-content: center;
    background-color: var(--color-1);
    cursor: pointer;
    color: var(--color-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-menu .right-content .content .address-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 200px;
    padding: 10px;
    border: 1px dashed var(--color-1);
    /* margin-bottom: 40px; */
    color: var(--color-1);
    gap: 15px;
}
.profile-menu .right-content .content .address-btn svg {
    width: 53px;
    height: 53px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.profile-menu .right-content .content .address-btn svg circle{
    fill: var(--color-1);    
}
.profile-menu .right-content .content .address-btn p {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-1);
    margin-top: 0px;
}




/* .product-details .product-image .image-gallery {
    flex: 1 1 400px;
} */
.product-details .product-image .image-gallery img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--color-3);
}
.product-details .product-image .thumbnails {
    display: flex;
    margin-top: 10px;
    gap: 10px;
}
.product-details .product-image .thumbnails img {
    width: 60px;
    height: 60px;
    padding: 4px;
    object-fit: contain;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 4px;
}
.product-details .product-image .thumbnails img.active{
    border-color: var(--color-2);
}
.product-details .product-image .thumbnails img:hover{
    border-color: var(--color-8);
}
  /* Lightbox Styles */
#lightbox {
    display: none;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}

#lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

#lightbox .lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 24px;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-1);
    cursor: pointer;
    background-color: var(--color-3);
    border-radius: 4px;
}

#lightbox.active {
    display: flex;
}

.breadcrumbs{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* flex-wrap: wrap; */
    border-bottom: 1px solid #ccc;
}
.breadcrumbs .left{
    overflow: hidden;
}
.breadcrumbs .left .overflow-breadcrumbs{
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 10px;
}
/* .breadcrumbs .left .overflow-breadcrumbs::-webkit-scrollbar {
    display: none;
} */
.breadcrumbs .left .overflow-breadcrumbs ul{
    font-size: 13px;
    gap: 5px;
    flex-wrap: nowrap;
    display: flex;
    align-items: center;
}
.breadcrumbs .left .overflow-breadcrumbs ul li{
    font-size: 13px;
    text-decoration-line: none;
    color: rgb(48 47 47);
    font-weight: 400;
    white-space: nowrap;
}
.breadcrumbs .right .share a{
    font-size: 13px;
    color: var(--color-1);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-details .product-content .custom-select-wrapper {
    position: relative;
    max-width: 250px;
    min-width: 150px;
    user-select: none;
}

.product-details .product-content .custom-select {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    cursor: pointer;
    position: relative;
}

div#result {
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid rgb(219, 214, 221);
    border-top: none;
    border-radius: 0px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    max-height: 55vh;
    min-height: 328px;
    overflow-y: scroll;
    overflow-x: hidden;
    display: none;
}
div#result ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
div#result ul li img {
    height: 60px;
    width: 60px;
    object-fit: contain;
}
div#result ul li a{
    display: flex;
    align-items: center;
    gap: 10px;
    /* flex-wrap: wrap; */
}
div#result ul li a h4{
    color: var(--color-2);
    margin-bottom: 8px;
}
div#result ul li a span{
    color: var(--color-1);
}
div#result ul li a span del{
    color: var(--color-8);
}


.product-details .product-content .custom-select::after {
    content: '';
    position: absolute;
    top: 54%;
    right: 10px;
    border: 6px solid transparent;
    border-top-color: var(--color-1);
    transform: translateY(-50%);
    pointer-events: none;
}

.product-details .product-content .custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    max-height: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    transition: max-height 0.4s ease-in;
    z-index: 99;
}

.product-details .product-content .custom-options.open {
    max-height: 500px;
    border: 1px solid #ccc;
    border-top: none;
}

.product-details .product-content .custom-option {
    padding: 10px;
    cursor: pointer;
    border-top: 1px solid #eee;
}

.product-details .product-content .custom-option:hover,
.product-details .product-content .custom-option.selected {
    background-color: #f1f1f1;
}

.product-details .product-content h1{
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 4px;
}
.product-details .product-content .brand{
    font-size: 13px;
    font-weight: 400;
    color: var(--color-1);
    margin-bottom: 15px;
}
.product-details .product-content .brand a{
    color: var(--color-2);
}
.product-details .product-content form{
    padding: 10px;
    border: 1px solid rgb(238 238 238);
    border-radius: 4px;
}
.product-details .product-content form p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 16px;
    font-size: 13px;
    margin-bottom: 8px;
}
.product-details .product-content .more{
    text-align: end;
}
.product-details .product-content form .more a{
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    font-size: 12px;
    padding: 5px;
    font-weight: 500;
    border-radius: 4px;
}
.product-details .product-content form .more a:hover{
    background-color: var(--color-1);
    color: var(--color-3);
}
.product-details .product-content .offers{
    margin-bottom: 16px;
}
.product-details .product-content .offers .top,
.features .top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.product-details .product-content .offers .top h2,
.features .top h3{
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-1);
}
.product-details .product-content .offers .top a,
.features .top a{
    font-size: 12px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    transition-duration: .2s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    font-weight: 600;
    border-style: solid;
    border-width: 2px;
    border-radius: 20px;
    border-color: rgb(214 214 214);
}
.product-details .product-content .offers .top a:hover,
.features .top a:hover{
    background-color: var(--color-1);
    color: var(--color-3);
}
.product-details .product-content .offers .bottom{
    height: 100px;
    overflow-y: scroll;
    background-color: var(--color-4);
    padding: 5px;
    border-radius: 2px;
}
.product-details .product-content .offers .bottom .offers-item{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.product-details .product-content .offers .bottom .offers-item .icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-color: var(--color-3);
}
.product-details .product-content .offers .bottom .offers-item .content h3{
    font-weight: 500;
    font-size: 13px;
}
.product-details .product-content .offers .bottom .offers-item .content a{
    font-size: 12px;
    color: var(--color-2);
    text-decoration: underline;
}
.product-details .product-content .offers .bottom .offers-item .content a:hover{
    text-decoration: none;
}

.also-like{
    margin-bottom: 16px;
}
.also-like h3{
    font-weight: 600;
    font-size: 14px;
    color: var(--color-1);
    margin-bottom: 15px;
}
.also-like a {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    gap: 8px;
}
.also-like a img{
    height: 44px;
    width: 44px;
    object-fit: contain;
}

.also-like a h3{
    margin-bottom: 0px;
}
.also-like a p{
    color: var(--color-2);
}


.features table{
    width: 100%;
}
.features table tr td{
    padding: 10px;
    font-size: 13px;
    color: var(--color-1);
    width: 50%;
}
.features table tr{
    border-bottom: 1px solid #ccc;
}
.features table tr:last-child{
    border-bottom: none;
}
.features .link{
    margin-top: 16px;
}
.features .link a{
    color: var(--color-1);
    text-decoration: underline;
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}
.privacy-categories{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    background-color: var(--color-3);
}
.privacy-categories .items{
    display: flex;
    align-items: center;
    gap: 2px;
    flex-direction: column;
    font-size: 12px;
    color: var(--color-1);
}
.privacy-categories .items img{
    height: 40px;
    width: 40px;
    object-fit: contain;
}
.explore-varriants .product-item{
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    margin-top: 10px;
    background-color: var(--color-3);
}
.explore-varriants .product-item .left{
    display: flex;
    align-items: center;
    gap: 8px;
}
.explore-varriants .product-item .left .image img{
    height: 82px;
    width: 82px;
}
.explore-varriants .product-item .left .ship {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 1;
    left: 5px;
    top: 5px;
    background-color: var(--color-5);
    font-size: 11px;
    padding: 4px;
    border-radius: 4px;
    color: var(--color-6);
}
.explore-varriants .product-item .left .ship img{
    height: 15px;
    width: 13px;
    object-fit: contain;
}
.explore-varriants .product-item .left h5{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: normal;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-1);
    font-weight: 500;
}
.explore-varriants .product-item .left .ream span{
    font-size: 14px;
    color: var(--color-8);
}
.explore-varriants .product-item .left .ream .total{
    color: var(--color-1);
}
.explore-varriants .product-item .right{
    display: flex;
    align-items: end;
    flex-direction: column;
    gap: 20px;
}
.explore-varriants .product-item .right .sku{
    font-size: 12px;
    color: #A9A9A9;
}
.explore-varriants .product-item .right .buttons{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* .explore-varriants .product-item .right .cart-btn{
    border: 1px solid var(--color-2);
    color: var(--color-2);
    padding: 8px 5px;
    border-radius: 4px;
    font-size: 13px;
    background-color: transparent;
} */
.explore-varriants .product-item .right .cart-btn {
    border: 1px solid var(--color-2);
    color: var(--color-2);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    background-color: transparent;
    line-height: 1;
}

.explore-varriants .product-item .right .buy-btn {
    background-color: var(--color-1);
    border: 1px solid var(--color-1);
    color: var(--color-3);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
}

.explore-varriants .product-item .right a:hover {
    background-color: var(--color-2);
    color: var(--color-3);
    border-color: var(--color-2);
}
.explore-varriants h2{
    color: var(--color-2);
    font-size: 16px;
    font-weight: 700;
}



.tabs-product .tab-content {
    display: none;
}
.tabs-product .tab-content.active {
    display: block;
}
.tabs-product {
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 20px;
    background-color: var(--color-3);
}
.tabs-product .tab-buttons{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
.tabs-product .tab-buttons button{
    padding: 10px 24px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.tabs-product .tab-buttons button.active{
    background-color: var(--color-2);
    color: var(--color-3);
}
.tabs-product .tab-content{
    padding: 20px;
}
.tabs-product .tab-content table tr td {
    padding: 10px 0px;
}
.tabs-product .tab-content table tr .left{
    width: 25%;
}
.tabs-product .tab-content table tr .right{
    width: 75%;
}
.tabs-product .tab-content p{
    font-size: 13px;
    line-height: 18px;
}


.product-price .product-card {
    background: #fff;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 20px;
  }

.product-price .buttons .cart-btn {
    border: 1px solid var(--color-2);
    color: var(--color-2);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    background-color: transparent;
    line-height: 1;
}

.product-price .buttons .buy-btn,
.product-price .product-card .download-btn {
    background-color: var(--color-1);
    border: 1px solid var(--color-1);
    color: var(--color-3);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
}

.product-price .buttons a:hover {
    background-color: var(--color-2);
    color: var(--color-3);
    border-color: var(--color-2);
}
.product-price .product-card .tax-info{
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--color-8);
}
.product-price .product-card .price{
    font-size: 20px;
    font-weight: 700;
    gap: 5px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.product-price .product-card .delivery-check .title{
    font-size: 16px;
    font-weight: 600;
    color: var(--color-1);
    margin-bottom: 15px;
}
.product-price .product-card .delivery-check form{
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    margin-bottom: 15px;
}
.product-price .product-card .delivery-check form input{
    width: 100%;
    height: 40px;
    border-radius: 6px;
    border: none;
    outline: none;
    padding: 10px 68px 10px 10px;
    border: 1px solid #bcbcbc;
}
.product-price .product-card .delivery-check form button{
    width: auto;
    height: 30px;
    border-radius: 6px;
    border: none;
    outline: none;
    background: var(--color-1);
    color: var(--color-3);
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 10px;
    font-size: 12px;
    transition: 0.3s;
}
.product-price .product-card .delivery-check form button:hover{
    background-color: var(--color-2);
    color: var(--color-3);
    border-color: var(--color-2);
}

.product-price {
    position: sticky;
    top: 120px;
}
.product-price .product-card .status-box .status-row {
    margin-top: 15px;
}
.product-price .product-card .status-box .status-row:first-child{
    margin-top: 0px;
}
.product-price .product-card .status-box .status-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    text-align: center;
    padding: 5px;
    font-weight: 500;
    font-size: 12px;
}
.product-price .product-card .status-box .status-row span{
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    padding: 5px;
    border-radius: 4px;
    width: 200px;
    background-color: var(--color-7);
    color: var(--color-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.product-price .product-card .status-box .status-row span.white{
    background-color: var(--color-3);
    color: var(--color-1);
}

@media (max-width: 575px) {
    .explore-varriants .product-item {
        align-items: start;
        flex-direction: column;
    }
    .explore-varriants .product-item .right {
        align-items: start;
        gap: 10px;
        width: 100%;
    }
    .product-price .product-card .status-box .status-row {
        grid-template-columns: 1fr;
    }
}




.filter .filter-inner .price-input {
    width: 100%;
    display: flex;
    margin: 0 0 15px;
}
.filter .filter-inner .price-input .field {
    display: flex;
    width: 100%;
    height: 45px;
    align-items: center;
}
.filter .filter-inner .price-input .field input {
    width: 100%;
    height: 40px;
    outline: none;
    font-size: 14px;
    margin-left: 8px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #ccc;
    -moz-appearance: textfield;
}
.filter .filter-inner .price-input input[type="number"]::-webkit-outer-spin-button,
.filter .filter-inner .price-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.filter .filter-inner .price-input .separator {
    width: 130px;
    display: flex;
    font-size: 19px;
    align-items: center;
    justify-content: center;
}
.filter .filter-inner .slider {
    height: 5px;
    position: relative;
    background: var(--color-4);
    border-radius: 5px;
}
.filter .filter-inner .slider .progress {
    height: 100%;
    left: 25%;
    right: 25%;
    position: absolute;
    border-radius: 5px;
    background: var(--color-2);
}
.filter .filter-inner .range-input {
    position: relative;
}
.filter .filter-inner .range-input input {
    position: absolute;
    width: 100%;
    height: 5px;
    top: -5px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.filter .filter-inner .range-input input::-webkit-slider-thumb {
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: var(--color-2);
    pointer-events: auto;
    -webkit-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.filter .filter-inner .range-input input::-moz-range-thumb {
    height: 17px;
    width: 17px;
    border: none;
    border-radius: 50%;
    background: var(--color-2);
    pointer-events: auto;
    -moz-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.filter .filter-inner {
    background: #fff;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 10px;
}

.filter .filter-inner:last-child{
    margin-bottom: 0px;
}
.filter .filter-inner .title{
    font-size: 16px;
    font-weight: 600;
    color: var(--color-1);
    margin-bottom: 10px;
}
.filter .filter-inner ul li{
    margin-bottom: 10px;
}
.filter .filter-inner ul li:last-child{
    margin-bottom: 0px;
}
.filter .filter-inner ul li label{
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.filter .filter-inner ul li label:hover{
    color: var(--color-2);
}
.filter .filter-inner ul li label input[type="checkbox"]{
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #999;
    cursor: pointer;
}

.total-items{
    background-color: var(--color-1);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}
.total-items .left{
    color: var(--color-3);
    font-size: 14px;
}
.total-items .right select{
    color: var(--color-3);
    font-size: 14px;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}
.total-items .right select option{
    color: var(--color-1);
    font-size: 14px;
    background-color: var(--color-3);
}
.product-category{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}
.product-category .items a{
    position: relative;
    background-color: var(--color-3);
    padding: 5px;
    border: 1px solid var(--color-4);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    height: 100%;
    padding: 10px;
    display: block;
}
.product-category .items a .image{
    position: relative;
    margin-bottom: 10px;
}
.product-category .items a .image img{
    width: 100%;
    height: 250px;
    object-fit: contain;
}
.product-category .items a h5{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    height: 37px;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-1);
    font-weight: 500;
    margin-bottom: 10px;
}
.product-category .items a .price{
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}
.product-category .items a .price span{
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1);
}
.product-category .items a .price del{
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1);
}
.product-category .items a .badge{
    background-color: var(--color-2);
    color: var(--color-3);
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    width: 100%;
    transition: 0.3s;
}
.product-category .items a .badge:hover{
    background-color: var(--color-1);
    color: var(--color-3);
}
/* .pagination ul li{
    list-style: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: 0.3s;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}   
.pagination ul li.active{
    background-color: var(--color-2);
    color: var(--color-3);
}
.pagination ul li:hover{
    background-color: var(--color-1);
    color: var(--color-3);
}
.pagination ul li:hover a{
    color: var(--color-3);
} */
.pagination ul li span,
.pagination ul li a {
    height: 30px;
    width: 30px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-1) !important;
    border-radius: 0px;
    background-color: transparent !important;
    border-radius: 4px !important;
}
.pagination ul li.active span{
    background-color: var(--color-2) !important;
    color: var(--color-3) !important;
}
.pagination ul li span:hover,
.pagination ul li a:hover {
    background-color: var(--color-1) !important;
    color: var(--color-3) !important;
}
.pagination ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.page-link:focus{
    box-shadow: none !important;
    outline: none !important;
}
.thanku .content {
    max-width: 670px;
    width: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 1px 2px 5px 2px rgba(0,0,0,.1);
    background-color: var(--color-3);
}
.thanku .content .svg-icon {
    background-color: var(--color-2);
    height: 100px;
    width: 100px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 1px dashed var(--color-2);
    outline-offset: 2px;
}
.thanku .content .svg-icon svg {
    width: 100px;
    height: 100px;
    margin: auto;
    color: var(--color-3);
}
.cart-oops .content .svg-icon svg {
    width: 60px;
    height: 60px;
}
.thanku .content h2 {
    font-size: 42px;
    font-weight: 600;
    color: var(--color-1);
    margin: 15px 0px;
}
.cart-oops .content h2 {
    font-size: 24px;
    margin-bottom: 10px;
}
.thanku .content p {
    color: var(--color-8);
    margin-bottom: 24px;
}

.thanku .content a.button{
    background-color: var(--color-1);
    color: var(--color-3);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
}


/* .profile-menu .right-content .content .address-item{
    margin-bottom: 10px;
} */
.profile-menu .right-content .content .address-item:last-child{
    margin-bottom: 0px;
}

.product-price .product-card .download-btn{
    display: inline-block;
    margin-top: 20px;
}

.blog-main-section .box{
    background-color: var(--color-3);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    height: 100%;
}
.blog-main-section .box .image{
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    margin-bottom: 10px;
}
.blog-main-section .box .image img{
    width: 100%;
}
.blog-main-section .box .content h5{
    font-size: 16px;
    font-weight: 600;
    color: var(--color-1);
    margin-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}
.blog-main-section .box .content p{
    font-size: 14px;
    font-weight: 400;
    color: var(--color-1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 20px;
}

.page-main-title{
    font-size: 24px;
    font-weight: 600;
    color: var(--color-1);
    margin-bottom: 20px;
    text-transform: uppercase;
}
.blogs a .boxs img{
    width: 100%;
    border-radius: 10px;
}
.blogs a .boxs {
    text-align: start !important;
    max-width: 700px;
    margin: 0px auto;
    background-color: var(--color-3);
    padding: 10px;
    border-radius: 10px;
}
.blogs a .boxs h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 10px;
}
.blogs a .boxs p{
    line-height: 20px;
}