* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--body-bg-color) !important;
    font-family: var(--font-family-2) !important;
}

p {
    font-size: 16px;
    color: var(--paragraph-color);
    margin-bottom: 0 !important;
}

h1,
h2,
h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0 !important;
}

a {
    text-decoration: none !important;
    color: var(--text-white) !important;
}

ul {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

li {
    list-style: none !important;
}

/******************* header section styling start *******************/
.top_header {
    width: 100%;
    padding: 10px 0;
    background-image: url("../images/home_img/top_header/top_header_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 2;
}

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

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

.top_icons_flex {
    display: flex;
    gap: 10px;
}

.top_icons_flex .top_icons {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--circle-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.top_icons_flex .top_icons:hover {
    transform: translateY(-4px);
}

.top_icons_flex .top_icons img {
    width: 15px;
}

.top_icons_flex .top_icons .facebook {
    width: 10px;
}

.link_flex {
    display: flex;
    gap: 10px;
}

.link_flex p {
    font-size: 16px;
    font-weight: 700 !important;
    color: var(--text-white);
}

.link_flex .signIn {
    color: var(--text-color-2) !important;
}

.link_flex .line {
    color: var(--paragraph-color);
}

header {
    width: 100%;
    background: var(--header-bg-color);
    padding: 20px 0;
    position: sticky;
    top: 0px;
    z-index: 99;
}

.header_flex {
    display: flex;
    gap: 2%;
    align-items: center;
    justify-content: space-between;
}

.navbar_flex {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: space-between;
}

.navbar_flex nav ul {
    display: flex;
    gap: 14px;
    align-items: center;
}

.navbar_flex nav ul li .navActive {
    position: relative;
}

#categoryBtn {
    position: relative;
    cursor: pointer;
    transition: 0.3s ease;
    display: flex;
    gap: 3px;
    align-items: center;
}

#categoryBtn::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 10px;
    background: var(--bg-color);
    transition: width 0.3s ease;
}

#categoryBtn.active {
    color: var(--text-color-2) !important;
}

#categoryBtn.active::after {
    width: 65%;
}

#categoryBtn:hover {
    color: var(--text-color-2) !important;
}


.navbar_flex nav ul li a::after {
    position: absolute;
    content: "";
    bottom: -3px;
    left: 0;
    width: 0%;
    height: 2px;
    border-radius: 10px;
    background: var(--bg-color);
    transition: width 0.3s ease;
}

.navbar_flex nav ul li a.navActive::after {
    width: 65%;
}

.navbar_flex nav ul li a.navActive {
    color: var(--text-color-2) !important;
    transition: color 0.3s ease;
}


.navbar_flex nav ul li {
    cursor: pointer;
}

.navbar_flex nav ul li,
.navbar_flex nav ul li a {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color) !important;
    position: relative;
    transition: all 0.3s ease;
}

.navbar_flex nav ul li a:hover {
    color: var(--text-color-2) !important;
}

.category_product_section {
    position: relative;
}

.category_product {
    position: absolute;
    top: 56px;
    left: -250px;
    width: 700px;
    height: fit-content;
    padding: 20px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background: var(--body-bg-color);
    display: none;
    overflow: hidden;
    transform: translateY(-10px) scale(0.98);
}

.category_product * {
    position: relative;
    z-index: 2;
}

.category_product::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
    pointer-events: none;
}

#categoryBtn i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.category_product.show {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    transform: translateY(0) scale(1);
}

#categoryBtn.active i {
    transform: rotate(180deg);
}

.category_product_box {
    padding: 10px;
    background: var(--category-box-bg-color);
    height: 160px;
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.4s ease;
}

.category_product_box:hover {
    box-shadow:
        6px 0px 12px rgba(227, 200, 124, 0.30),
        0px 4px 12px rgba(227, 200, 124, 0.30),
        0px -4px 12px rgba(227, 200, 124, 0.20);
}

.category_product_box:hover img {
    transform: scale(1.08) translateY(-5px);
}

.category_product_box img {
    width: 100%;
    margin: 0 auto;
    height: 115px;
    transition: all 0.4s ease;
}

.category_product_box h2 {
    font-size: 14px;
    height: 30px;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase !important;
    color: var(--text-color);
}

.search_wrapper {
    width: 17%;
    position: relative;
    display: inline-block;
}

.search_box {
    width: 100%;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 6px;
    display: flex;
    gap: 5px;
    align-items: center;
    position: relative;
}

.search_box .input_search {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-color);
}

.search_box i {
    color: var(--text-color);
}

.search_box input::placeholder {
    color: var(--text-color);
}

.search_model_box {
    width: 230px;
    max-height: 150px;
    overflow-y: auto;
    padding: 10px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background: #0c291f;
    position: absolute;
    right: -40px;
    top: 65px;
    display: none;
}


.search_model_box::-webkit-scrollbar {
    width: 4px;
}

.search_model_box::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.search_model_box::-webkit-scrollbar-track {
    background: transparent;
}

.no_result {
    padding: 10px;
    text-align: center;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
}


.search_model_box.searchActive {
    display: block;
}

.search_img {
    width: 40px;
    height: 40px;
    background: var(--category-box-bg-color);
    border-radius: 4px;
}

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

.search_box_flex {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.search_box_flex h2 {
    font-size: 15px;
    color: var(--text-color) !important;
    font-weight: 600;
}

.search_box_flex a img {
    width: 22px;
}

.cart_wrapper {
    position: relative;
}

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

.cart_img {
    position: relative;
    cursor: pointer;
}

.cart_circle {
    position: absolute;
    top: -6px;
    right: -5px;
    width: 20px;
    height: 20px;
    background: #FF3D3A;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.right_cart_flex .cart_content p {
    color: var(--text-color) !important;
}

.right_cart_flex .cart_content span {
    font-weight: 600;
    color: var(--text-color) !important;
}

.shoping_cart_box {
    width: 350px;
    padding: 15px 10px;
    background: var(--body-bg-color);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    position: absolute;
    top: 67px;
    right: 0px;
    transition: all 0.4s ease;
    display: none;
}

.shoping_cart_box.shoping_cart_active {
    display: block;
}

.shoping_cart_box h1 {
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 14px;
    color: var(--text-white) !important;
    border-bottom: 1px solid #A1A1A1;
}

.shoping_main_cart {
    display: flex;
    gap: 60px;
    flex-direction: column;
    justify-content: space-between;
}

.shoping_cart_flex {
    display: flex;
    gap: 15px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    max-height: 285px;
    overflow-y: hidden;
    scroll-behavior: smooth;
}

.shoping_cart_flex.scroll {
    overflow-y: auto;
}

.shoping_cart_flex.scroll::-webkit-scrollbar {
    width: 6px;
}

.shoping_cart_flex.scroll::-webkit-scrollbar-track {
    background: #C0C0C0;
    border-radius: 10px;
}

.shoping_cart_flex.scroll::-webkit-scrollbar-thumb {
    background: var(--bg-color) !important;
    border-radius: 10px;
}

.cart_box {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.shoping_img {
    width: 80px;
    height: 70px;
    padding: 6px;
    background: var(--category-box-bg-color);
    border-radius: 6px;
}

.shoping_img img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.cart_details p {
    color: var(--text-color-2);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 2px !important;
}

.cart_details h4 {
    font-size: 15px;
    width: 170px;
    text-wrap: wrap;
    color: var(--text-white) !important;
    margin-bottom: 2px !important;
}

.cart_details span {
    color: var(--text-white) !important;
    font-size: 14px;
}

.cart_details .cart_price {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-white) !important;
}

.cart_details .cart_price span {
    font-weight: 500;
    text-decoration: line-through;
    color: var(--paragraph-color) !important;
}

.cart_item_close {
    width: 25px;
    height: 25px;
    background: #FF3D3ACC;
    color: var(--text-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cart_item_close i {
    font-size: 14px;
}

.cart_bottom_flex {
    display: flex;
    gap: 10px;
    flex-direction: column;
    margin-top: 50px;
}

.shoping_cart_flex .data_found {
    font-size: 20px;
    font-weight: 500;
}

.offcanvas-header .close_button,
.offcanvas-header .offcanvas-title {
    color: var(--text-color) !important;
}

.close_button {
    filter: invert(1) brightness(200%);
}


.price_flex {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.price_flex .total {
    color: var(--text-white) !important;
    font-size: 18px;
    font-weight: 600;
}

.price_flex .total_price {
    color: var(--text-white) !important;
    font-size: 18px;
    font-weight: 600;
}

.viewcart_btn,
.checkout_btn {
    background: #C2A45B;
    color: var(--text-white) !important;
    border: none;
    border-radius: 6px;
    padding: 8px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}

.viewcart_btn {
    background: var(--button-bg-color) !important;
    color: var(--text-color-2) !important;
}

.viewcart_btn:hover {
    background: #051a1380;
}

.checkout_btn:hover {
    background: #a1894b;
}


.user_icon,
.cart_icon,
.bars_icon {
    display: none;
}

/************* Hero section styling start *************/
.hero_section .item {
    width: 100%;
    height: 480px;
    padding: 0 !important;
}

.hero_section .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero_section .owl-dots {
    position: absolute;
    bottom: 28px;
    text-align: center;
    width: 100%;
}

.hero_section .owl-dots .owl-dot span {
    width: 25px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    display: inline-block;
    margin: 0 4px;
    border-radius: 10px;
    transition: 0.3s ease;
}

.hero_section .owl-dots .owl-dot.active span {
    background: #fff;
    width: 35px;
}

.hero_section .owl-carousel .owl-nav,
.hero_section .owl-carousel .owl-dots {
    display: none !important;
}


/************* featured section styling start *************/
.feature_section {
    width: 100%;
    padding: 40px 0;
}

.featured {
    width: 100%;
    background: var(--section-bg-color);
    padding: 20px 10px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.feature_icon_flex {
    display: flex;
    gap: 16px;
    align-items: center;
}

.feature_icon_flex .content h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-white) !important;
    margin-bottom: 4px !important;
}

.feature_icon_flex .content p {
    font-size: 15px !important;
}


/************* Our Category section styling start *************/
.category_section {
    width: 100%;
    padding: 40px 0;
    background: var(--category-bg-color);
}

.same_title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color) !important;
    text-align: center;
    font-family: var(--font-family) !important;
}

.category_flex {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 40px;
    place-content: center;
}

.category_box {
    width: 100%;
    height: 280px;
    padding: 10px 20px;
    background: var(--category-box-bg-color);
    border-radius: 6px;
    transition: all 0.4s ease;
}

.category_box:hover {
    box-shadow:
        6px 0px 12px rgba(227, 200, 124, 0.30),
        0px 6px 12px rgba(227, 200, 124, 0.30),
        0px -6px 12px rgba(227, 200, 124, 0.20);
}

.category_box:hover img {
    transform: scale(1.08) translateY(-5px);
}


.category_box img {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.category_box h2 {
    font-size: 18px !important;
    text-align: center;
    font-weight: 600;
    color: var(--text-white) !important;
    height: 30px;
}

/************* Feature & New Product section styling start *************/
.newProduct_section {
    width: 100%;
    padding: 40px 0;
}

.button_flex {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 30px;
}

.button_flex .product_button {
    background: transparent;
    border: 1.5px dashed var(--border-color-2);
    padding: 8px 25px;
    border-radius: 20px;
    color: var(--paragraph-color);
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.button_flex .btnActive {
    background: var(--bg-color);
    color: var(--text-white);
    border: 1.5px solid transparent;
}

.button_flex .product_button:hover {
    background: var(--bg-color);
    color: var(--text-white);
    border: 1.5px solid transparent;
}

.feature_product_flex {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.feature_product_flex .feature_product_box .img_box {
    width: 100%;
    height: 250px;
    background: var(--category-box-bg-color);
    padding: 20px;
    border-radius: 6px;
    position: relative;
    transition: all 0.3s ease;
}

.img_box:hover {
    box-shadow:
        6px 0px 12px rgba(227, 200, 124, 0.30),
        0px 6px 12px rgba(227, 200, 124, 0.30),
        0px -6px 12px rgba(227, 200, 124, 0.20);
}

.feature_product_box .img_box:hover img {
    transform: scale(1.08) translateY(-5px);
}

.feature_product_flex .feature_product_box .img_box img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: all 0.3s ease;
}

.feature_product_flex .feature_product_box .img_box .bg_img {
    width: 35%;
    background-image: url("../images/feature_product/ractangle.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    padding: 2px 0;
    color: var(--text-white);
    text-transform: uppercase;
}

.content_box {
    margin-top: 6px;
    margin-bottom: 10px;
}

.content_box .title {
    color: var(--text-color-2);
    font-weight: 600;
    margin-bottom: 6px !important;
    display: block;
}

.content_box .name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 6px !important;
}

.content_box .price {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px !important;
    color: var(--text-white);
}

.content_box .price span {
    font-weight: 500;
    color: var(--paragraph-color);
    text-decoration: line-through;
}

.content_box .View_btn {
    background: var(--button-bg-color);
    color: var(--text-color-2) !important;
    border: none;
    padding: 10px 26px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.content_box .View_btn:hover {
    background: #061813;
}

.feature_product_flex .owl-nav button {
    background: #10382A !important;
    border-radius: 50% !important;
    color: #fff !important;
    width: 40px;
    height: 40px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 20px !important;
}

.feature_product_flex .owl-nav {
    position: absolute;
    top: 40%;
    width: 100%;
    display: flex !important;
    justify-content: space-between !important;
}

/************* News Latter section styling start *************/
.news_latter_section {
    width: 100%;
    padding-bottom: 30px;
}

.news_latter {
    width: 100%;
    padding: 50px 40px;
    background: var(--button-bg-color);
    border-radius: 8px;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.news_latter h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--text-color) !important;
}

.input_flex {
    display: flex;
}

.news_latter input {
    width: 100%;
    background: var(--section-bg-color);
    border: none;
    outline: none;
    padding: 16px 26px;
    padding-right: 60px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    color: var(--text-color);
}

.news_latter input::placeholder {
    color: var(--text-color);
}

.news_latter button {
    background: var(--bg-color);
    padding: 0 20px;
    border: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    color: var(--text-white);
    font-size: 18px;
    font-weight: 600;
}

/************* Premium section styling start *************/
.Premium_section {
    width: 100%;
    padding: 20px 0;
}

.premium_flex {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.premium_flex h3 {
    font-size: 26px;
    color: var(--text-color);
    margin-bottom: 14px !important;
}

.premium_img {
    width: 100%;
    height: 400px;
}

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

.same_banner_section {
    width: 100%;
    height: 200px;
    background-image: url("../images/same_banner_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.same_banner_section h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--text-color) !important;
}

.same_banner_section p {
    text-align: center;
    font-size: 18px;
    color: #EAEAEC !important;
}

/************ contact section styling start ************/
.contact_section {
    width: 100%;
    padding: 40px 0px;
}

.contact_flex {
    display: flex;
    gap: 40px;
    /* flex-wrap: wrap; */
}

.contact_left {
    width: 30%;
    min-width: 280px;
    background: var(--section-bg-color);
    padding: 30px;
    border-radius: 10px;
}

.info_box {
    /* height: 150px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 1.5px solid #A1A1A1;
    padding: 50px 0;
}

.info_box:last-child {
    border-bottom: none;
}

.info_box i {
    font-size: 26px;
    margin-bottom: 10px;
    display: block;
    color: #f4c46d;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--category-box-bg-color);
}

.info_box a:hover {
    text-decoration: underline !important;
}

.contact_right {
    width: 65%;
    min-width: 300px;
}

.contact_right h3 {
    margin-bottom: 10px !important;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-white) !important;
}

.error {
    color: #ff6b6b;
    font-size: 13px;
    display: block;
    /* position: absolute; */
}


.form_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.form_group label {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-white) !important;
    margin-bottom: 5px !important;
}

.form_group label span {
    font-size: 20px;
    color: #FF3E3D !important;
}

textarea,
.contact_input {
    background: var(--category-box-bg-color);
    color: var(--text-color);
    border: 1.5px solid var(--border-color-2) !important;
    position: relative;
}

textarea::placeholder,
.contact_input::placeholder {
    color: var(--text-color);
    font-weight: 500;
}

.contact_input,
textarea {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: none;
    outline: none;
}

textarea {
    height: 100px;
    margin-top: 15px;
}

.captcha_flex {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

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

.captcha_img_flex .refresh {
    cursor: pointer;
}

.send_btn {
    width: 35%;
    background: #C2A45B;
    color: var(--text-white) !important;
    font-weight: 600;
    padding: 12px 0px;
    border-radius: 6px;
    border: none;
    margin-top: 30px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.send_btn:hover {
    background: #907a41;
}

.map_sectopn {
    width: 100%;
    height: 500px;
}

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


/********** wholesaler section styling start **********/
.wholesaler_section {
    padding: 30px 0;
}

.wholesaler_box {
    width: 45%;
    margin: 0 auto;
    height: fit-content;
    background: var(--header-bg-color);
    padding: 40px;
    border-radius: 20px;
    color: #fff;
}

.wholesaler_box h2 {
    text-align: center;
    margin-bottom: 25px !important;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color) !important;
}

.form_group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

.form_group label {
    margin-bottom: 6px !important;
    font-size: 16px;
}

.form_group input {
    padding: 12px;
    border: 1px solid #ffffff40;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    outline: none;
}

.form_group input {
    background: var(--category-box-bg-color);
    color: var(--text-color);
    border: 1.5px solid var(--border-color-2) !important;
    position: relative;
}

.form_group input::placeholder {
    color: var(--text-color);
    font-weight: 600;
}

.check_label {
    display: block;
    margin: 12px 0 8px 0;
    font-size: 16px;
    font-weight: 500;
}

.checkbox_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
    margin-bottom: 20px;
}

.checkbox_grid label {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.checkbox_grid input {
    accent-color: #c7a869;
}

.submit_btn {
    width: 100%;
    padding: 14px;
    background: #C2A45B;
    color: var(--text-white) !important;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.submit_btn:hover {
    background: #907a41;
}

@media (max-width: 900px) {
    .wholesaler_box {
        width: 100%;
        padding: 25px;
    }
}


/************** COAs section styling start **************/
.coas_section {
    width: 100%;
    padding: 40px 0;
}

.coas_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.coas_text {
    margin-bottom: 30px !important;
    text-align: center;
}

.coas_text h2 {
    margin-bottom: 14px !important;
}


.coas_flex {
    width: 95%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px !important;
}

.coas_box {
    width: 100%;
    padding: 10px;
    background: var(--category-box-bg-color);
    border-radius: 6px;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
}

.left .title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px !important;
}

.left .blue {
    color: var(--text-color-2) !important;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px !important;
}

.left .batch {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color) !important;
}

.left_text_flex {
    display: flex;
    gap: 20px;
}

.calendar {
    display: flex;
    gap: 6px;
    align-items: center;
}

.calendar img {
    width: 15px;
}

.calendar span {
    color: var(--text-color) !important;
    font-size: 18px;
    font-weight: 500;
}

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

.right img {
    width: 35%;
    margin: 0 auto;
}

.right .pdf_btn {
    color: var(--text-color-2) !important;
    background: var(--button-bg-color);
    border: none;
    padding: 6px 20px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.right .pdf_btn:hover {
    background: #05140f;
}


/************* about section styling start *************/
.about_section {
    width: 100%;
    padding: 40px 0;
}

.about_flex {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
}

.about_left h2 {
    text-align: left !important;
    margin-bottom: 20px !important;
}

.highlight {
    color: var(--text-white) !important;
    font-weight: 600;
}

.about_left p {
    text-align: justify;
    margin-bottom: 16px !important;
}

.about_left p:last-child {
    margin-bottom: 0 !important;
}

.about_right {
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

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

/*********** Not Found section styling start ***********/
.notFound_section {
    width: 100%;
    padding: 40px 0;
}

.not_found_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.not_found_container img {
    width: 30%;
    height: 100%;
    margin-bottom: 30px;
}

.not_found_container h1 {
    font-size: 40px;
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: 10px !important;
}

.not_found_container p {
    font-size: 18px;
    font-weight: 600;
}


/************ checkout section styling start ************/
.checkout_section {
    width: 100%;
    padding: 40px 0;
}

.checkout_wrapper {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.billing_box,
.order_summary {
    background: var(--category-bg-color);
    padding: 20px;
    border-radius: 12px;
    width: 100%;
    color: #fff;
}

.order_summary {
    max-width: 350px;
}

.billing_box h2 {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color) !important;
}

.check_form_grid {
    margin-top: 20px;
}

.chech_flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.form_group_check.full {
    grid-column: span 2;
}

label {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.form_group_check label span {
    color: #FF3E3D;
}

.form_group_check .check_input,
.form_group_check select {
    margin-bottom: 10px;
}

.promo_box .check_input,
.form_group_check .check_input,
.form_group_check select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 4px;
    border: 1.5px solid transparent !important;
    background: var(--category-box-bg-color);
    color: #fff;
}

.promo_box .check_input:focus,
.form_group_check .check_input:focus,
.form_group_check select:focus {
    border: 1.5px solid var(--border-color) !important;
}

input::placeholder {
    color: #b8d0c8;
}

.order_summary h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-white) !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.cart_items {
    border-bottom: 1px solid #244c3f;
    padding-bottom: 16px;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

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

.cart_item img {
    width: 60px;
    height: 50px;
    padding: 6px;
    background: var(--category-box-bg-color);
    border-radius: 6px;
    object-fit: fill;
}

.cart_item p {
    flex: 1;
    margin-left: 10px;
    font-size: 15px;
    color: var(--text-white) !important;
    font-weight: 400;
}

.cart_item span {
    color: var(--text-white) !important;
    font-weight: 400;
}

/* Promo Box */
.promo_box input {
    margin: 10px 0;
}

.promo_box label {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
}

.promo_box_flex {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.promo_box_flex i {
    transition: all 0.3s ease;
}

.promo_box_flex.promo_active i {
    transform: rotate(180deg);
}

.promo_fields {
    display: block;
}

.promo_fields.promo_active {
    display: none;
}

.apply_btn {
    width: 50%;
    padding: 10px;
    border: none;
    background: #0B2E2380;
    color: var(--text-color-2);
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.apply_btn:hover {
    background: #071f1780;
}

/* Price Box */
.price_box {
    background: #2E4A3D80;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.price_row {
    display: flex;
    justify-content: space-between;
      padding-bottom: 10px;
  }

.price_row:last-child {
    border: none;
    padding-bottom: 0px;
}

.price_row p {
    font-size: 17px;
    color: var(--text-white) !important;
    font-weight: 400;
}

.total span {
    font-size: 18px;
    font-weight: 600;
}

/* Place Order Button */
.place_order_btn {
    font-size: 18px;
    font-weight: 700;
    padding: 10px 40px;
    background: #C2A45B;
    color: var(--text-white);
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px !important;
    transition: all 0.3s ease;
}

.place_order_btn:hover {
    background: #a1894b;
}


/************ view cart section styling start ************/
.viewcart_section {
    width: 100%;
    padding: 40px 0;
}

.cart_wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
 
}

.left_cart,
.right_cart {
    background: var(--section-bg-color);
    border-radius: 10px;
    padding: 25px;
}

.left_cart {
    width: 68%;
}

.right_cart {
    width: 30%;
}

.right_cart h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px !important;
}

.cart_table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.cart_table th {
    text-align: left;
    padding-bottom: 12px;
    font-size: 16px;
    color: var(--text-white);
    border-bottom: 1px solid var(--border-color);
}

.cart_table td {
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    text-align: center;
}

.product_info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-white) !important;
}

.product_info img {
    width: 60px;
    height: 50px;
    padding: 6px;
    background: var(--category-box-bg-color);
    border-radius: 6px;
    object-fit: fill;
}

.remove_btn {
    color: #ff5f5f;
    font-size: 18px;
    cursor: pointer;
}

.cart_buttons {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.return_btn {
    background: #0B2E2380;
    padding: 12px 20px;
    border-radius: 8px;
    color: var(--text-color-2) !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.return_btn:hover {
    background: #061c1580;
}

.home_btn {
    background: #2D493C;
    padding: 12px 20px;
    border-radius: 8px;
    color: var(--text-color-2) !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.home_btn:hover {
    background: #274235;
}

/* RIGHT SIDE TOTAL BOX */
.right_cart h3 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
}

.total_box {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding-top: 15px;
    margin-bottom: 30px;
}

.total_row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    color: var(--text-white);
}

.total_amount {
    color: #fff;
    
}

.pro_checkout_btn {
    width: 100%;
    padding: 15px;
    background: #c7a256;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
}


/********* product section styling start *********/
.product_section {
    width: 100%;
    padding: 40px 0;
}

.main_product_flex {
    display: flex;
    gap: 30px;
}

.product_left {
    width: 30%;
    padding: 20px;
    background: var(--category-box-bg-color);
    border-radius: 6px;
}


.filter_box {
    margin-bottom: 20px;
}

.toggle_filter {
    display: none;
}

.filter_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--text-color) !important;
}

.toggle_filter:checked+.filter_header i {
    transform: rotate(-90deg);
}

.filter_header h3 {
    font-size: 18px;
    font-weight: 600;
}

.filter_header i {
    transition: 0.3s;
}

.filter_content {
    margin-top: 15px;
    max-height: 1000px;
    overflow: hidden;
    transition: .3s ease;
}

.toggle_filter:checked~.filter_content {
    max-height: 0;
    overflow: hidden;
}

.filter_header i {
    transition: .3s ease;
}

.checkbox_item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.checkbox_item input {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    background: transparent;
    transition: 0.2s linear;
}

.checkbox_item input:checked::after {
    content: "✓";
    color: #fff;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    font-weight: bold;
}

.checkbox_item input:checked {
    background: #63B150;
    border-color: #63B150;
}

.checkbox_item input:checked+span {
    color: #63B150 !important;
    font-weight: 700;
}

.checkbox_item span {
    color: var(--text-color) !important;
}

.product_left hr {
    background: var(--border-color);
}

.toggle_price {
    display: none;
}

.price-range-slider {
    width: 100%;
    float: left;
    max-height: 500px;
    transition: .3s ease;
}

.toggle_price:checked~.price-range-slider {
    max-height: 0;
    overflow: hidden;
}

.filter_header i {
    transition: .3s ease;
}

.toggle_price:checked+.filter_header i {
    transform: rotate(-90deg);
}

.price-range-slider input {
    width: 100%;
    background: none;
    color: var(--text-white) !important;
    font-size: 16px;
    font-weight: initial;
    box-shadow: none;
    border: none;
    margin-top: 20px;
}

.range-bar .ui-slider-handle+span {
    background: #63B150 !important;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1em !important;
    height: 1em !important;
    border-radius: 50% !important;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 2px solid var(--text-white) !important;
    background: #63B150 !important;
}

.ui-widget-header {
    border: 1px solid #dddddd;
    background: #63B150 !important;
    color: #333333;
    font-weight: bold;
}

.range-bar .ui-slider-handle+span {
    background: #06b9c0;
}

.range-value {
    margin: 0;
    color: var(--text-white) !important;
    margin-bottom: 30px !important;
}

.ui-slider-horizontal {
    height: 0.3em !important;
}

.filters_button_flex button {
    width: 135px;
    border: none;
    padding: 10px 0;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.filters_button_flex .filter {
    background: var(--category-bg-color) !important;
    color: var(--text-color) !important;
    font-style: 18px;
    font-weight: 600;
}

.filters_button_flex .filter:hover {
    background: #0b251c !important;
}

.filters_button_flex .reset_filter {
    background: var(--bg-color) !important;
    color: var(--text-white) !important;
    font-style: 18px;
    font-weight: 600;
    margin-left: 5px;
}

.filters_button_flex .reset_filter:hover {
    background: #c2a75c !important;
}

.product_right {
    width: 70%;
}

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

.product_top_flex p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-white) !important;
}

.filter_flex {
    display: flex;
    gap: 6px;
    align-items: center;
}

.filter_flex select {
    background: transparent;
    border: 1.5px solid #2E4A3D !important;
    color: var(--paragraph-color);
    padding: 4px;
    border-radius: 4px;
    font-size: 14px !important;
}

.filter_flex select option {
    padding: 2px 6px !important;
    background: var(--category-box-bg-color) !important;
}

.filter_flex select option:hover {
    background: #63B150 !important;
}

.product_main_flex {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 20px;
}

.product_box.hide {
    display: none;
}

.product_box_img {
    width: 100%;
    height: 230px;
    padding-top: 16px;
    background: var(--category-box-bg-color);
    position: relative;
    transition: all 0.3s ease;
}

.product_box_img:hover {
    box-shadow:
        6px 0px 12px rgba(227, 200, 124, 0.30),
        0px 6px 12px rgba(227, 200, 124, 0.30),
        0px -6px 12px rgba(227, 200, 124, 0.20);
}

.product_box_img:hover img {
    transform: scale(1.08) translateY(-5px);
}

.product_box_img img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    margin-left: auto;
    transition: all 0.3s ease;
}

.product_bg_new {
    width: 35%;
    background-image: url("../images/feature_product/ractangle.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    padding: 2px 0;
    color: var(--text-white);
    text-transform: uppercase;
}

.precent {
    width: fit-content;
    background: #EFD33D;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
    position: absolute;
    top: 5px;
    right: 5px;
}

.view_product {
    margin-top: 40px;
    border: none;
    background: var(--bg-color);
    color: var(--text-white);
    width: 130px;
    padding: 8px 0;
    border-radius: 4px;
    font-weight: 500;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/************ Sign In section styling start ************/
.signIn_section {
    width: 100%;
    padding: 40px 0;
}

.login_box {
    width: 50%;
    margin: 0 auto;
    background: var(--header-bg-color);
    padding: 40px;
    border-radius: 18px;
    color: #fff;
}

.logo_area {
    text-align: center;
    margin-bottom: 20px;
}

.sign_form label {
    font-size: 14px;
    font-weight: 600;
    margin-top: 15px;
    display: block;
}

.sign_form label span {
    color: #ff5555;
}

.password_group #confirmPassword,
.password_group #password,
.sign_form input {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color-2);
    background: var(--category-box-bg-color);
    color: white;
    margin-top: 5px;
}

.password_group {
    position: relative;
}

.password_group i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
}

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

.captcha_img {
    width: 100px;
    height: 40px;
    border-radius: 4px;
}

.reload_icon {
    cursor: pointer;
    font-size: 20px;
}

.options_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
}

.remember {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.remember p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color) !important;
}

.remember input {
    width: 15px;
}

.forgot {
    color: var(--text-color-2) !important;
}

.login_btn {
    width: 100%;
    padding: 12px;
    background: #C2A45B;
    border: none;
    border-radius: 8px;
    margin-top: 10px;
    cursor: pointer;
    color: var(--text-white) !important;
    font-weight: 600;
}

.signup_text {
    text-align: center;
    margin-top: 15px;
}

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

.signup_text a {
    color: var(--text-color-2) !important;
    font-weight: 600;
}

/******** product details section styling start ********/
.product_detail_section {
    width: 100%;
    padding: 40px 0;
}

.product_detail_flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.left_images {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
}

.thumbs_box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.arrow_up,
.arrow_down {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.thumbs_list {
    width: 500px !important;
    display: flex !important;
    gap: 10px;
}

.item {
    width: 88px;
    height: 88px;
    object-fit: cover;
    background: var(--category-box-bg-color);
    padding: 5px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
}

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

.thumb.thumbActive {
    border-color: var(--border-color);
}

.main_image_box {
    width: 100%;
    height: 450px;
    background: var(--category-box-bg-color);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main_image_box .main_image {
    width: 80%;
    height: 100%;
    object-fit: fill;
}

.right_details {
    color: #fff;
}

.category {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-white) !important;
}

.category span {
    color: #d3b56a;
}

.product_title {
    font-size: 30px;
    font-weight: 700;
    margin: 10px 0 !important;
}

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

.new_price {
    color: #fff;
    font-size: 22px !important;
    font-weight: 600;
}

.detail_old_price {
    font-size: 22px;
    text-decoration: line-through;
    color: var(--paragraph-color) !important;
}

.discount {
    background: #EFD33D;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
}

.inclusive_text {
    margin-top: 5px;
    font-size: 16px;
    color: #63B150 !important;
    font-weight: 600;
}

.right_details hr {
    border: 1px solid var(--border-color);
}


.description h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-color) !important;
}

.description p {
    color: var(--text-color) !important;
}

.package_section h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px !important;
    color: var(--text-white) !important;
}

.pack_buttons {
    display: flex;
    gap: 10px;
}

.pack_btn {
    padding: 8px 14px;
    background: var(--category-box-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 6px;
    cursor: pointer;
}

.pack_btn:hover {
    background: #d3b56a;
    color: var(--text-white) !important;
    border: 1px solid transparent;
}

.pack_btn.packActive {
    background: #d3b56a;
    color: var(--text-white) !important;
    border: 1px solid transparent;
}


.cart_row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.qty_box {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 8px 15px;
    border-radius: 30px;
    border: 1.5px solid var(--category-bg-color);
}

.qty_btn {
    background: var(--category-box-bg-color);
    border: none;
    color: #fff;
    font-size: 20px !important;
    font-weight: 700;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.qty_btn:hover {
    background: #0B2E23;
}

.qty_input {
    width: 35px;
    text-align: center;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    outline: none;
}

.cart_btn {
    background: #0B2E23;
    color: var(--text-color-2);
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
}

#toast {
    position: fixed;
    top: 80px;
    right: 10px;
    background: var(--bg-color);
    color: #fff;
    padding: 14px 22px;
    border-radius: 8px;
    font-size: 16px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.4s ease;
    z-index: 9999;
}

/* Show toast */
#toast.show {
    opacity: 1;
    transform: translateY(0);
}


.buy_btn {
    background: #C2A45B;
    color: var(--text-white);
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
}


.product_desc_section {
    width: 100%;
    padding: 40px 0;
}

.desc_container {
    padding: 30px;
    border-radius: 8px;
    background: var(--category-bg-color);
}

.desc_tabs {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 25px;
}

.desc_tab {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
}

.desc_tab.active_tab {
    color: #ffc957;
    border-bottom: 2px solid #ffc957;
}

.desc_content_flex {
    display: none;
    height: 380px;
}

.desc_content_flex.active_content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}


.desc_left {
    width: 55%;
    color: #d2e4dc;
    font-size: 15px;
    line-height: 1.6;
}

.desc_left_2 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 50vh;
}

.desc_left_2 p {
    color: var(--text-color) !important;
}

.desc_left p {
    margin-bottom: 15px;
    color: var(--text-color) !important;
}

.desc_points li {
    list-style: none;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--text-color) !important;
}

.desc_points i {
    color: #D4B76A;
}

.desc_right {
    width: 450px;
    height: 300px;
    background: var(--category-box-bg-color);
    border-radius: 8px;
}

.desc_right img {
    height: 100%;
    width: 100%;
    object-fit: fill;
}

.desc_bottom_icons {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 25px;
}

.icon_box {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--text-white);
}

.icon_box img {
    width: 35px;
}

.icon_box h4 {
    font-size: 16px;
    margin: 3px 0 !important;
}

.icon_box p {
    font-size: 14px;
    color: #d2e4dc;
}



/********* order confirm section styling start *********/
.order_success_section {
    width: 100%;
    padding: 40px 0;
}

.order_success_flex {
    display: flex;
    gap: 20px;
}

.left_success_box {
    width: 65%;
    height: fit-content;
    background: var(--header-bg-color);
    padding: 40px 20px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
}

.left_success_box h2 {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-color) !important;
    margin-bottom: 10px !important;
}

.success_icon {
    width: 100px;
    height: 100px;
    background: #63B150;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    color: #fff;
}

.success_msg {
    width: 70%;
    margin: auto;
    opacity: 0.9;
    margin-bottom: 40px;
}

.table_wrapper {
    width: 100%;
    background: var(--category-bg-color);
    border-radius: 6px;
    margin-top: 20px;
    overflow-x: auto;
}

.order_table table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
    min-width: 700px;
    overflow-x: auto;
}


.order_table th,
.order_table td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left !important;
}

.product_flex {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product_flex img {
    background: var(--category-box-bg-color);
    padding: 6px;
    width: 60px;
    border-radius: 4px;
}

.right_order_details {
    width: 35%;
    background: var(--category-bg-color);
    padding: 20px 30px;
    border-radius: 12px;
    color: #fff;
}

.right_order_details h3 {
    font-size: 26px;
    color: var(--text-white) !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.order_id {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px !important;
}

.details_group {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.details_group img {
    margin-right: 4px !important;
}

.details_group h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color) !important;
    margin-bottom: 10px;
}

.order_details_flex {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.order_details_flex:last-child {
    margin-bottom: 0 !important;
}



/* Content Section */
.privacy_container,
.terms_container {
    width: 100%;
    padding: 40px 0;
}

.privacy_container h2,
.terms_container h2 {
    margin-top: 40px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color-2) !important;
}

.privacy_container h3,
.terms_container h3 {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color-2) !important;
}

.privacy_container p,
.terms_container p {
    margin-top: 10px;
    line-height: 1.8;
    font-size: 16px;
    color: var(--text-color) !important;
}

.footer_note {
    margin-top: 40px;
    padding-bottom: 60px;
    color: #666;
}

.footer_note p a {
    color: var(--text-color-2) !important;
    text-decoration: underline !important;
}

@media (max-width: 600px) {
    .terms_header h1 {
        font-size: 32px;
    }

    .terms_container h2 {
        font-size: 24px;
    }
}




/******************* Admin Dashboard styling start  *******************/
.dashboard_banner_section {
    width: 100%;
    height: 100px;
    background-image: url("../images/same_banner_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dashboard_banner_section p a,
.dashboard_banner_section p {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-color-2) !important;
}

.dashboard_banner_section p .dash {
    color: var(--text-white) !important;
}

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

.dash_user_circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.dash_user_circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.dash_user_flex p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-white) !important;
}


.dashboard-container {
    width: 100%;
    padding: 40px 0;
}

.dashboard_flex {
    display: flex;
    gap: 20px;
    position: relative;
}

.sidebar {
    width: 350px;
    background: var(--category-box-bg-color);
    border-radius: 10px;
    height: auto;
}

.sidebar-title {
    padding: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    color: var(--text-color-2) !important;
}

.menu {
    list-style: none;
    padding: 0;
    margin-top: 16px;
}

.menu li {
    padding: 12px;
    transition: 0.3s;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
    cursor: pointer;
    color: var(--text-white) !important;
    position: relative;
}

.menu li {
    position: relative;
    padding-left: 15px;
    cursor: pointer;
}

.menu li img {
    margin-left: 10px;
}

.menu li::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 100%;
    background: #C2A45B;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.menu li.active_navigation {
    background: #0f2f25;
}

.menu li.active_navigation::after {
    opacity: 1;
}

.menu li:hover {
    background: #0f2f25;
}


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

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

}

.content {
    width: 100%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dash_card {
    background: var(--category-box-bg-color) !important;
    padding: 25px;
    border-radius: 10px;
    position: relative;
    display: block;
    overflow: hidden;
}

.profile-card {
    text-align: center;
    color: var(--text-white) !important;
}

.profile_img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.profile-card h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px !important;
}

.profile-card p {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-white) !important;
}

.edit_profile {
    padding: 8px 40px;
    background: #0B2E23B2;
    border: none;
    border-radius: 20px;
    color: var(--text-color-2);
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.edit_profile:hover {
    background: #072119b2;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-in-out;
    z-index: 90;
}

body.freeze_scroll {
    overflow: hidden;
}

.profile_edit_section {
    width: 420px;
    height: 100vh;
    background: #0f3a2e;
    position: fixed;
    top: 88px;
    right: -450px;
    border-bottom-left-radius: 6px;
    transition: 0.4s ease;
    z-index: 100;
    color: #fff;
}

.profile_edit_section.open_edit_profile {
    right: 0;
}

.overlay_2.open_edit_profile {
    opacity: 1;
    display: block;
}

.overlay.open_edit_profile {
    opacity: 1;
    visibility: visible;
}

.edit_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--category-box-bg-color);
}

.edit_header h3 {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-color) !important;
    padding: 15px;
}

.cancel_btn {
    cursor: pointer;
    color: var(--text-color-2) !important;
    font-weight: 500;
    margin-right: 15px;
}

.profile_area {
    padding: 15px;
}

.profile_img_box {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    border: 3px solid var(--bg-color);
    border-radius: 50%;
    position: relative;
}

.profile_img_box img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 50%;
}

.camra {
    width: 25px;
    height: 25px;
    border: 2px solid var(--circle-bg-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.camra i {
    color: var(--text-color);
    font-size: 14px;
}

.edit_form label {
    font-size: 14px;
    opacity: 0.9;
}

.edit_form textarea,
.edit_form input {
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    border: 1px solid #2f5b4a;
    background: transparent;
    color: var(--text-color) !important;
}

.edit_form textarea {
    height: 75px;
}

/* Button */
.save_btn {
    width: 100%;
    background: #C2A45B;
    border: none;
    padding: 12px;
    color: var(--text-white) !important;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 10px;
}


.overlay_2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(2px);
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 100;
}

.overlay_2_show {
    display: block;
    opacity: 1;
}

.profile_edit_section.show_2 {
    right: 0;
}

.edit_form textarea::placeholder,
.edit_form input::placeholder {
    font-size: 14px;
    color: var(--text-color) !important;
    font-weight: 400;
}


.billing-card {
    color: var(--text-white) !important;
    position: relative;
}

.billing-card .subheading {
    font-size: 18px;
    color: var(--paragraph-color) !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

.billing-card h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px !important;
    color: var(--text-color) !important;
}

.billing-card .evergreen {
    color: var(--text-white) !important;
    margin-bottom: 12px !important;
    font-weight: 500;
}

.email {
    margin: 10px 0;
}

.billing_flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
}

.main_order_history {
    list-style: none;
    cursor: pointer;
    position: relative;
}

.order_dropdown {
    list-style: none;
    padding-left: 20px;
    margin-top: 8px;
    display: none;
    flex-direction: column;
    margin-left: 20px;
}

.order_dropdown li {
    margin-bottom: 0 !important;
}

.order_dropdown li a {
    text-decoration: none;
    color: #444;
    font-size: 14px;
}

.order_dropdown li a:hover {
    color: #000;
}

.show_dropdown {
    display: flex !important;
}

/* Arrow rotate */
.arrow_icon {
    transition: transform 0.3s ease;
}

.rotate_arrow {
    transform: rotate(180deg);
}


/* Table */
.table-card {
    margin-top: 20px;
}

.dash_card h3,
.table-card h3 {
    margin-bottom: 15px !important;
    font-size: 24px;
    font-weight: 500;
    color: var(--text-color) !important;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    background: var(--category-bg-color);
    padding: 12px;
    text-align: left;
    color: var(--text-white);
    font-weight: 400;
}

table td {
    padding: 12px;
    border-bottom: .6px solid #A1A1A1;
    color: var(--text-color);
    font-weight: 400;
}

.view_table {
    color: var(--text-color-2);
    cursor: pointer;
    background: transparent;
    border: none;
}

.view_table:hover {
    text-decoration: underline;
}

.payment_circle_flex {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.payment_circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

.table_circle_active {
    background: #C2A45B;
    color: #fff;
    border: none;
}

.disabled_arrow {
    opacity: 0.4;
    pointer-events: none;
}

.payment_arrow {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.payment_item {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    cursor: pointer;
    user-select: none;
    color: var(--text-white);
}

.title {
    font-size: 20px;
    margin-bottom: 15px;
}

.show_order_table {
    display: block !important;
}

.hide_order_table {
    display: none !important;
}

.order_details_container {
    padding: 30px 16px;
    background: var(--category-box-bg-color) !important;
    border-radius: 6px;
}

.order_details_container .order_title {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-color) !important;
}

.order_detail_flex {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.order_detail_flex button {
    background: transparent;
    border: none;
    color: var(--text-color-2) !important;
    font-weight: 500;
}

.billing_section {
    display: flex;
    background: var(--category-box-bg-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-top: 10px !important;
    overflow-x: auto;
}

.left_box,
.right_box {
    flex: 1;
}

.billing_section .left_box {
    background: transparent !important;
    border-right: 1px solid var(--border-color);
}

.billing_section .right_box {
    background: var(--body-bg-color) !important;
    padding: 10px;
}

.small_heading {
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--text-color) !important;
    text-transform: uppercase;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding: 10px;
}

.order_name {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-white) !important;
}

.order_address {
    line-height: 22px;
    font-size: 15px;
    color: var(--text-color) !important;
    margin: 8px 0 15px 0;
}

.order_label {
    font-size: 16px;
    color: var(--text-white) !important;
    margin-top: 12px;
    letter-spacing: 1px;
}

.order_info {
    font-size: 14px;
    color: var(--text-color) !important;
    margin-bottom: 6px !important;
}

.order_info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.divider {
    width: 2px;
    height: 40px;
    background: var(--text-white);
    margin: 0 20px;
}

.order_value {
    font-size: 15px;
    margin-top: 4px !important;
    color: var(--text-white) !important;
}

.price_box {
    background: #12452F;
    border-radius: 6px;
    padding: 15px 20px;
}

.line_row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #2F5A43;
}

.line_row span {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-white) !important;
}

.total_row {
    border-bottom: none;
    font-size: 18px;
}
.total_row_2 .total{
    font-size: 22px;
}
.total_row .amount{
    width: 85px;
}
 
.total_amount {
    font-size: 18px;
}
.total_amount_2{
    font-size: 20px;
}

.main_order_detail_section {
    display: none;
    transition: all 0.3s ease;
}

.table_card {
    display: block;
    transition: all 0.3s ease;
}

.table_card.hide_table {
    display: none;
    pointer-events: none;
    transition: all 0.3s ease;
}

.main_order_detail_section.show_order_detail_table {
    display: block;
    transition: all 0.3s ease;
}


.order_table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    margin-bottom: 0 !important;
    background: #0D3323;
    border-radius: 8px;
    overflow: hidden;
}

.order_table tbody tr td,
.order_table th {
    background: #143C2D;
    padding: 12px;
    font-size: 14px;
    text-align: left;
    color: #D9D9D9;
}

.order_table td {
    padding: 12px;
    background: var(--category-box-bg-color) !important;
}

.product_img {
    width: 55px;
    height: 55px;
    border-radius: 8px;
}


.change_password_container {
    background-color: var(--category-box-bg-color);
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    color: #e3e3d3;
}

.change_password_container h2 {
    text-align: left !important;
}

.group_inputs_flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.input_group {
    margin-bottom: 10px;
    margin-top: 20px;
}

.input_group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-white);
    font-size: 14px;
}

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

.password_wrapper input::placeholder {
    color: var(--text-color);
    font-size: 14px;
}

.password_group input {
    width: 100%;
    padding: 10px 40px 10px 10px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: #e3e3d3;
}

.password_toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-color);
    font-size: 16px;
}

.change_save_btn {
    width: fit-content;
    background-color: #C2A45B;
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    color: #fff;
    margin-top: 20px;
}

.change_save_btn:hover {
    background-color: #b39550;
}



/* Responsive */
@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column;
    }

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

























/************* footer section styling start *************/
.hh_footer {
    width: 100%;
    background-image: url("../images/footer_icons/footer_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 40px 0px;
    color: #fff;
}

.hh_footer_flex {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}


.hh_logo {
    margin-bottom: 20px;
}

.hh_desc {
    line-height: 1.6;
    color: var(--paragraph-color);
    margin-bottom: 20px;
}

.hh_footer_col h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 25px !important;
    color: var(--paragraph-color) !important;
}

.hh_links_grid {
    display: flex;
    gap: 70px;
}

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

.hh_links_grid ul li {
    margin-bottom: 8px;
}

.hh_links_grid a {
    color: var(--paragraph-color) !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.hh_links_grid a:hover {
    color: var(--text-color-2) !important;
    text-decoration: underline !important;
}

.hh_contact_list {
    list-style: none;
    padding: 0;
}

.hh_contact_list li {
    margin-bottom: 14px;
    display: flex;
    gap: 8px;
    align-items: start;
}

.hh_contact_list li img {
    margin-top: 4px;
}

.hh_contact_list li a {
    color: var(--paragraph-color) !important;
}

.hh_contact_list li a:hover {
    color: var(--text-white) !important;
}

.hh_contact_list li:hover img {
    filter: brightness(0) saturate(100%) invert(98%) sepia(9%) saturate(423%) hue-rotate(296deg) brightness(118%) contrast(100%);
}

.hh_copy {
    font-size: 14px;
    margin-top: 25px;
}

.hh_bottom_bar {
    margin-top: 30px;
    padding-top: 16px;
    border-top: 1.5px dashed var(--border-color);
    font-size: 16px;
    color: var(--paragraph-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hh_bottom_bar a:hover {
    text-decoration: underline !important;
}

.hh_bottom_bar a {
    font-size: 16px;
    color: var(--paragraph-color) !important;
}

.mobile_icons {
    display: none;
}

.offcanvas {
    background: var(--body-bg-color) !important;
}

.offcanvas-header {
    border-bottom: 1.5px dashed var(--border-color);
}

.offcanvas_close {
    filter: invert(1);
}


.offcanvas-body ul li {
    margin-bottom: 14px !important;
}

.offcanvas-body ul li a {
    font-weight: 500;
}

.offcanvas-body ul li {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-white) !important;
}

.offcanvas-body ul li:hover {
    color: var(--text-color) !important;
}

nav ul li[data-bs-target="#categoryCanvas"] {
    cursor: pointer;
}

.back_btn {
    background: var(--category-box-bg-color);
    padding: 4px 10px;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-color);
}

.offcanvas-body ul li a:hover {
    color: var(--text-color) !important;
}

.offcanvas-body .follow {
    font-weight: 600;
    color: var(--text-white) !important;
}

.offcanvas-body .media_icon_flex {
    flex-direction: column;
    align-items: start !important;
}

.offcanvas-body .cate {
    color: var(--text-white) !important;
    font-size: 22px;
    font-weight: 700;
}

.offcanvas-body .mobile_category_product {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.offcanvas-body .mobile_category_product .category_product_box {
    width: 175px !important;
    height: 150px !important;
    margin: 0 auto;
}


@media (max-width: 992px) {
    .checkout_wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .order_summary {
        max-width: 100%;
    }

    .left_cart,
    .right_cart {
        width: 100%;
    }
}

@media (max-width:768px) {

    .top_header,
    .navbar_flex {
        display: none;
    }

    .mobile_icons {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .mobile_icons .search_wrapper {
        width: 100%;
        position: relative;
    }

    .mobile_icons .search_model_box {
        width: 100%;
        height: 950PX;
        max-height: 830PX;
        padding: 10px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        background: var(--body-bg-color);
        position: absolute;
        right: 0px;
        top: 74px;
        display: none;
    }

    .no_result {
        padding: 10px;
        text-align: center;
        color: var(--text-color);
        font-size: 30px !important;
        font-weight: 600;
       margin-top: 100px !important;
    }

    .mobile_icons .search_model_box.searchActive {
        display: block;
    }

    .mobile_icons .search_box {
        width: 94% !important;
        padding: 4px 6px !important;
    }

    .user_icon,
    .cart_icon {
        display: block;
    }

    .user_icon a {
        font-weight: 600;
        color: var(--text-color) !important;
    }

    .user_icon a i {
        font-size: 20px;
        color: var(--text-color) !important;
    }

    .cart_icon {
        font-size: 20px;
        color: var(--text-color) !important;
        position: relative;
        cursor: pointer;
    }

    .quantity {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #FF3D3A;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
    }

    .bars_icon {
        display: block;
        margin-right: 0px;
        border: 2px solid var(--text-color) !important;
        background: transparent;
        color: var(--text-color);
        font-size: 20px;
        border-radius: 6px;
        padding: 0 4px;
    }

    .hero_section .item {
        width: 100%;
        height: 250px;
    }

    .featured {
        display: flex !important;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
    }

    .featured::-webkit-scrollbar {
        height: 6px;
    }

    .featured::-webkit-scrollbar-thumb {
        background: var(--bg-color);
        border-radius: 10px;
    }

    .featured>div {
        min-width: 260px;
        flex: 0 0 auto;
        scroll-snap-align: center;
    }

    .checkout_section,
    .hh_footer,
    .category_section,
    .newProduct_section,
    .feature_section {
        padding: 20px 0;
    }

    .news_latter {
        padding: 20px 0px;
        flex-direction: column;
    }

    .premium_flex {
        flex-direction: column;
        gap: 0 !important;
    }

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

    .premium_img img {
        width: 80%;
    }

    .hh_footer_flex {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .feature_product_flex {
        margin-top: 40px !important;
        width: 95% !important;
        margin: 0 auto;
    }

    .news_latter input {
        padding-right: 0px !important;
    }

    .contact_flex {
        display: flex;
        gap: 40px;
        flex-direction: column-reverse;
        align-items: center;
    }

    .form_grid {
        grid-template-columns: 1fr;
    }

    .contact_left,
    .contact_right {
        width: 80%;
    }

    .send_btn {
        width: 50% !important;
    }

    .map_sectopn {
        width: 100%;
        height: 300px;
    }

    .about_flex {
        gap: 20px;
        grid-template-columns: repeat(1, 1fr);
    }

    .chech_flex {
        grid-template-columns: repeat(1, 1fr);
        gap: 5px;
    }

    .same_banner_section {
        height: 150px;
    }

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

    .return_btn,
    .home_btn {
        width: 100%;
        text-align: center;
    }

    .main_product_flex {
        gap: 20px;
        flex-direction: column;
    }

    .product_right,
    .product_left {
        width: 100%;
    }

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

    .desc_content_flex {
        height: auto;
        flex-direction: column;
    }

    .desc_left,
    .desc_right {
        width: 100%;
    }

    .login_box {
        width: 90%;
    }

    .product_detail_flex {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 40px;
    }

    .main_image_box {
        width: 90%;
        height: 400px;
        background: var(--category-box-bg-color);
        border-radius: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .thumbs_box {
        display: flex;
        align-items: center;
        gap: 0px;
    }

    .main_image_box .main_image {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

    .order_success_flex {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

    .right_order_details,
    .left_success_box {
        width: 100%;
    }

    .coas_flex {
        width: 80%;
        grid-template-columns: repeat(1, 1fr);
    }

    .table_wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard_flex {
        flex-direction: column;
    }

    .search_box_flex {
        background: var(--category-box-bg-color);
        padding: 10px;
        border-radius: 4px;
    }

    .search_box_flex h2 {
        font-size: 16px;
        color: var(--text-color) !important;
        font-weight: 600;
    }

    .search_img {
        width: 50px;
        height: 50px;
        background: var(--category-box-bg-color);
        border-radius: 4px;
    }
}

@media (max-width:568px) {
    .category_flex {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash_card {
        padding: 15PX;
    }

    .table_wrapper {
        width: 100%;
        overflow-x: auto;
    }

    .recent_order_table {
        width: 100%;
        border-collapse: collapse;
        min-width: 600px;
    }

    .billing_section .left_box,
    .billing_section .right_box {
        width: 100% !important;
    }

    .billing_section {
        flex-direction: column;
    }

    .coas_flex {
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width:468px) {
    .header_logo {
        width: 110px;
    }

    .hero_section .item {
        width: 100%;
        height: 200px;
    }

    .hh_footer_flex {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }

    .hh_bottom_bar {
        margin-top: 10px;
        flex-direction: column;
        gap: 10px;
    }

    .same_title {
        font-size: 20px;
    }

    .button_flex {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .button_flex::-webkit-scrollbar {
        display: none;
    }

    .product_button {
        flex: 0 0 auto;
    }

    .premium_flex h3 {
        font-size: 22px;
        color: var(--text-color);
        margin-bottom: 14px !important;
    }

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

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

    .category_box img {
        height: 150px;
    }

    .category_box h2 {
        font-size: 14px !important;
        text-align: center;
        font-weight: 600;
        color: var(--text-white) !important;
        height: 35px;
    }

    .news_latter h2 {
        font-size: 20px;
        font-weight: 500;
        color: var(--text-color) !important;
        text-align: center;
    }

    .news_latter {
        padding:30px 16px;
    }

    .contact_right h3 {
        font-size: 24px;
    }

    .same_banner_section h2 {
        font-size: 30px;
    }

    .not_found_container img {
        width: 60%;
        height: 100%;
        margin-bottom: 30px;
    }

    .not_found_container h1 {
        font-size: 30px;
    }

    .not_found_container p {
        font-size: 16px;
    }

    .content_box .name {
        font-size: 14px;
    }

    .left .title {
        font-size: 16px;
    }

    .left_text_flex {
        gap: 0px;
        flex-direction: column;
    }

    .coas_box {
        width: 100%;
        padding: 10px;
        gap: 0px;
    }

    .login_box {
        width: 100%;
    }

    .coas_box {
        gap: 20px;
        align-items: flex-start;
    }

    .coas_flex {
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
    }

    .right .pdf_btn {
        padding: 6px 10px;
    }

    .hh_bottom_bar p {
        text-align: center;
    }

    .success_icon {
        width: 80px;
        height: 80px;
        font-size: 35px;
    }

    .group_inputs_flex,
    .grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .main_image_box {
        width: 100%;
        height: 400px;
        margin: 0;
    }

    .thumbs_list {
        width: 345px !important;
        display: flex !important;
        gap: 10px;
    }

    .item {
        width: 70px;
        height: 75px;
    }

    .captcha_group {
        flex-direction: column;
        align-items: first baseline;
    }

    .wholesaler_box h2 {
        font-size: 20px;
    }

    .check_label {
        font-size: 14px;
    }

    .profile_edit_section {
        width: 100%;
        top: 74px;
    }

    .content_box .price,
    .title {
        font-size: 16px;
    }

    .cart_row,
    .pack_buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .buy_btn,
    .cart_btn,
    .qty_box {
        width: 100%;
        justify-content: space-between;
        text-align: center;
    }

    .product_title {
        font-size: 20px;
    }

    .category {
        font-size: 16px;
    }

    .inclusive_text {
        font-size: 14px;
    }

    .desc_container {
        padding: 15px;
    }

    .desc_tabs {
        gap: 20px;
    }

    .desc_tab {
        font-size: 12px;
    }

    .desc_left p {
        margin-bottom: 15px;
        color: var(--text-color) !important;
        font-size: 14px;
        text-align: justify;
    }

    .same_banner_section h2 {
        font-size: 24px;
    }

    .desc_tab {
        font-size: 14px;
    }

    .desc_bottom_icons {
        display: flex;
        justify-content: center;
        gap: 2px;
        margin-top: 20px;
    }

    .desc_points li {
        font-size: 14px;
    }
}


@media (max-width: 400px) {
    .thumbs_list {
        width: 306px !important;
        display: flex !important;
        gap: 10px;
    }

    .item {
        width: 100%;
        height: 75px;
    }

    .news_latter h2 {
        font-size: 18px;
    }
}

@media (max-width: 300px) {
    .category_flex {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .map_sectopn {
        width: 100%;
        height: 200px;
    }

    .contact_right {
        width: 65%;
        min-width: 100%;
    }

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

    .coas_box {
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .left_success_box h2 {
        font-size: 16px;
    }

    .success_msg {
        width: 100%;
        font-size: 14px;
    }

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

    .mobile_icons .search_model_box {
        right: -75px;
    }

    .thumbs_list {
        width: 310px !important;
        display: flex !important;
        gap: 10px;
    }

    .thumbs_list .item {
        width: 100%;
        height: 80px;
    }

    .thumbs_list {
        width: 245px !important;
        display: flex !important;
        gap: 10px;
    }

    .main_image_box {
        width: 95%;
        height: 300px;
        margin: 0;
    }
}

.search_icon i {
    font-size: 22px;
    color: var(--text-color);
    cursor: pointer;
}

/* Hide by default */
.search_wrapperss {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    background: var(--body-bg-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: top 0.4s ease;
    z-index: 9999;
    padding: 20px;
}

.search_wrapperss.show_search_active {
    top: 0;
}

.close_search {
    position: absolute;
    right: 10px;
    top: 22px;
    font-size: 22px;
    color: var(--text-color);
    cursor: pointer;
    z-index: 10;
}

@media (min-width: 769px) {
    .search_wrapperss {
        display: none !important;
    }
}
@media (max-width: 768px) {
   .content_box {
       text-align: center;
     }
}