@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200&display=swap');

/* ============================================================
   CATEGORY SIDEBAR STYLES
   ============================================================ */
.product-layout-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

#cat-sidebar {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid rgba(204,204,204,0.35);
    border-radius: 8px;
    margin: 20px 0 20px 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    position: sticky;
    top: 100px;
    align-self: flex-start;
    overflow: hidden;
}

.cat-sidebar-inner {
    padding: 0;
}

.cat-sidebar-title {
    background: #636465;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 14px 18px;
    margin: 0;
    border-radius: 7px 7px 0 0;
}

.cat-sidebar-icon {
    margin-right: 6px;
    opacity: 0.85;
}

.cat-sidebar-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.cat-sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #444;
    border-left: 3px solid transparent;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-sidebar-item:hover {
    background: rgba(99,100,101,0.07);
    color: #222;
    border-left-color: #999;
}

.cat-sidebar-item.active {
    background: rgba(99,100,101,0.1);
    color: #1a1a1a;
    border-left-color: #636465;
    font-weight: 700;
}

.cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #636465;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.18s;
}

.cat-sidebar-item.active .cat-dot,
.cat-sidebar-item:hover .cat-dot {
    opacity: 1;
}

.cat-count {
    margin-left: auto;
    font-size: 0.75rem;
    color: #888;
    font-weight: 400;
    flex-shrink: 0;
}

#az-content.product_view_list {
    flex: 1;
    min-width: 0;
}

/* Responsive: collapse sidebar on mobile */
@media (max-width: 768px) {
    .product-layout-wrap {
        flex-direction: column;
    }
    #cat-sidebar {
        width: 100%;
        min-width: unset;
        position: static;
        margin: 0 0 16px 0;
    }
    .cat-sidebar-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 12px;
    }
    .cat-sidebar-item {
        border: 1px solid rgba(13,110,253,0.25);
        border-left: 1px solid rgba(13,110,253,0.25) !important;
        border-radius: 20px;
        padding: 5px 14px;
        font-size: 0.8rem;
    }
    .cat-sidebar-item.active {
        background: #0d6efd;
        color: #fff;
        border-color: #0d6efd !important;
    }
    .cat-sidebar-item.active .cat-dot { background: #fff; }
}

/* ============================================================ */

body {display: grid;background: #fff;}.mydiv {margin-top: 50px;margin-bottom: 50px}.cross {font-size: 10px}.padding-0 {padding-right: 5px;padding-left: 5px}.img-style {margin-left: -11px;box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);border-radius: 5px;max-width: 104% !important}.m-t-20 {margin-top: 20px}.bbb_background {background-color: #E0E0E0 !important}.ribbon {width: 150px;height: 150px;overflow: hidden;position: absolute}.ribbon span {position: absolute;display: block;width: 34px;border-radius: 50%;padding: 8px 0;background-color: #3498db;box-shadow: 0 5px 10px rgba(0, 0, 0, .1);color: #fff;font: 100 18px/1 'Lato', sans-serif;text-shadow: 0 1px 1px rgba(0, 0, 0, .2);text-transform: uppercase;text-align: center}.ribbon-top-right {top: -10px;right: -10px}.ribbon-top-right::before,.ribbon-top-right::after {border-top-color: transparent;border-right-color: transparent}.ribbon-top-right::before {top: 0;left: 17px}.ribbon-top-right::after {bottom: 17px;right: 0}.sold_stars i {color: orange}.ribbon-top-right span {right: 17px;top: 17px}div {display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}.bbb_deals_featured {width: 100%}.bbb_deals {width: 100%;margin-right: 7%;padding-top: 80px;padding-left: 25px;padding-right: 25px;padding-bottom: 34px;box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);border-radius: 5px;margin-top: 0px}.bbb_deals_title {position: absolute;top: 10px;left: 22px;font-size: 18px;font-weight: 500;color: #000000}.bbb_deals_slider_container {width: 100%}.bbb_deals_item {width: 100% !important}.bbb_deals_image {width: 100%}.bbb_deals_image img {width: 100%}.bbb_deals_content {margin-top: 33px}.bbb_deals_item_category a {font-size: 14px;font-weight: 400;color: rgba(0, 0, 0, 0.5)}.bbb_deals_item_price_a {font-size: 14px;font-weight: 400;color: rgba(0, 0, 0, 0.6)}.bbb_deals_item_price_a strike {color: red}.bbb_deals_item_name {font-size: 24px;font-weight: 400;color: #000000}.bbb_deals_item_price {font-size: 24px;font-weight: 500;color: #6d6e73}.available {margin-top: 19px}.available_title {font-size: 16px;color: rgba(0, 0, 0, 0.5);font-weight: 400}.available_title span {font-weight: 700}@media only screen and (max-width: 991px) {.bbb_deals {  width: 100%;  margin-right: 0px}}@media only screen and (max-width: 575px) {.bbb_deals {  padding-left: 15px;  padding-right: 15px}.bbb_deals_title {  left: 15px;  font-size: 16px}.bbb_deals_slider_nav_container {  right: 5px}.bbb_deals_item_name,.bbb_deals_item_price {  font-size: 20px}}/* CSS for the A-Z tabs *//* CSS for the container box */.success {color: #00ff00;}.error-msg {color: #ff0000;}a.nav-link.has-arrow.collapsed {margin: 10px;line-height: 0;padding: 0;margin: 0;height: 30px;}li.nav-item {border-top: 0px solid;}/*h1.logo.me-left {  margin: 30px;}h1.logo.me-auto {  margin: 30px auto;  text-align: center;}*/.card-footer {margin: 20px 0 0 0;display: grid;align-items: center;min-height: 150px;}.card.float-left {margin: 5px;min-height: 400px;}.card-inner-box {min-height: 100px;}p.card-text.mx-bottom.hd {font-size: 1.1rem;color: #ffffff;border: 0 !important;padding: 5px 0 5px 0 !important;line-height: 1.2rem;font-weight: 800;text-transform: uppercase;text-align: center;background: #0d6efd;border-radius: 5px;margin-bottom: 30px !important;min-height: 50px;display: grid;align-items: center;}
.card_box {
    width: 100%;
    text-align: center;
    height: 150px;
    overflow: hidden;
    padding: 10px;
}
img.card-img-top {
    height: auto;
    max-height: 110px;
    margin: 15px auto;
    width: auto;
    max-width: 90%;
    transform: scale(1.2);
    transition: all 0.3s ease-in-out;
}
.card.float-left:hover img.card-img-top {
    transform: scale(1.3);
}
.card-img-single {
    transform: scale(0.9);
    transition: all 0.3s ease-in-out;
}
.card-img-single:hover {
    transform: scale(1.05);
}
.float-left {float: left;}.clearfix:after {content: "";display: block;clear: both;}.card-body {text-align: left;}.card-body b,.card-body strong {font-weight: 800;font-size: .875em;margin: 0 5px 0 0;}a.btn.btn-primary.btn-lg {font-size: 0.8rem;font-weight: 600;text-align: center;margin: auto;}.card-body b.pro-val {font-weight: 800;color: #776e8d;}
#az-container, .single-product-info {margin: 0 auto;font-weight: 600;padding: 50px 10px 20px;background-color: rgb(100 99 99 / 5%);border: 1px solid rgb(204 204 204 / 17%); border-top: 2px solid rgb(204 204 204 / 32%) !important; border-radius: 0px;overflow: hidden;}/* CSS for the A-Z tabs */#az-tabs {display: flex;justify-content: center;align-items: center;margin-bottom: 20px;overflow-x: auto;/* Add this line to enable horizontal scrolling */}#az-tabs span {padding: 10px 14px;margin-right: 0px;font-size: 16px;cursor: pointer;background-color: #fff;border: 1px solid rgb(204 204 204 / 42%);border-radius: 0px;transition: background-color 0.3s ease;}#az-tabs span:hover {background-color: rgb(55 67 142 / 2%); color: #37438e; border-bottom: 4px solid #37438e !important;}
#az-tabs span.active {background-color: #37438e;border-bottom: 4px solid #37438e !important; color: #fff;}/* CSS for the content area */
#az-content, .product-image-wrap {padding: 20px 10px;}#az-content p {font-size: 15px;max-height: 40px; overflow: hidden; margin: 0;padding: 8px 0; border-bottom: 1px dashed rgb(204 204 204 / 45%);}.listing-tabs {display: flex;justify-content: center;margin-bottom: 20px;display: none;}.listing-tabs .tab {cursor: pointer;padding: 10px 20px;margin-right: 10px;background-color: #eaeaea;border-radius: 5px;font-weight: bold;}.listing-tabs .tab.active {background-color: #fff;}.listing-content {padding: 20px;border: 1px solid #ccc;border-radius: 5px;}.listing-content p {margin-bottom: 10px;}
.center-text{text-align: center;}
.single-product-head {
text-align: center;
background: #0d6efd;
padding: 20px;
border-radius: 100px;
color: white;
font-weight: 800;}
.cat-but {
margin: 10px;
min-height: 40px!important;
}.site-logo{display: flex;justify-content: center;align-items: center;margin: 20px;overflow-x: auto;}
img.card-img-single {
margin: auto;
min-width: 360px;
max-width: 80%;
height: auto;
min-height: 160px;
border: 1px solid #cccccc;
display: flex;
border-radius: 50px 0;
padding: 20px 0;
}
.single-product-box .float-left:nth-child(1) {
    position: relative;
}
.single-product-box .float-left:nth-child(1)::after {
    background-image: url(../images/logo-watermark.png);
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    text-align: center;
    display: block;
    margin: 0 auto;
    position: absolute;
    z-index: 1;
    top: 34%;
    left: 33%;
    background-size: cover;
    width: 165px;
    height: 50px;
}
.related-products .card.float-left::after,
.product_view_list .card.float-left::after {
    position: relative;
}
.related-products .card.float-left::after,
.product_view_list .card.float-left::after {
    background-image: url(../images/logo-watermark.png);
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    text-align: center;
    display: block;
    margin: 0 auto;
    position: absolute;
    z-index: 1;
    top: 16%;
    left: 70px;
    background-size: cover;
    width: 110px;
    height: 32px;
}
.product_view_list .card.float-left.cat-but::after {
    display: none;
}
h2.product-name {
font-weight: 800;
margin-bottom: 20px;
}.single-product-btn {
margin: 10px auto!important;
}
.single-product-box {
padding: 30px 0;
margin: 30px 0;
border-bottom: 1px solid #d2d2d2;
}
.single-product-inf {
margin: 30px;
padding: 50px;
}
.single-product-inf b {
    padding: 0 20px 0 20px;
    font-size: 16px;
    width: auto;
    display: inline-block;
}
p.card-text.mx-bottom.hd {
    background: #727376;
    padding: 5px 10px !important;
    text-transform: capitalize;
    line-height: 24px;
    margin-bottom: 15px !important;
    border-radius: 2px;
    min-height: 60px;
}
p.card-text.mx-bottom.hd b {
    font-weight: 600;
    color: #fff !important;
}
p.card-text.mx-bottom.hd.sinhd {
    background: rgb(0 0 0 / 3%);
    text-align: left;
    padding-left: 10px !important;
}
p.card-text.mx-bottom.hd.sinhd b {
    font-weight: 600;
    color: #3b3a3a !important;
    text-align: center;
}
.card-inner-box p.card-text.mx-bottom b {
    font-weight: 600;    
}
.card-inner-box p.card-text.mx-bottom b:first-child {
    color: #141570;
}
.card-inner-box p.card-text.mx-bottom b:last-child {
    color: #444;
}
.related-products h2 {
    text-align: center;
    font-weight: 800;
    font-size: 26px;
}
.btn.view-details-btn {
    background: #fff;
    color: #37438e;
    border: 1px solid #37438e;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px !important;
}
.btn.view-details-btn:hover,
.btn.view-details-btn:focus {
    background: #37438e;
    color: #fff;
    box-shadow: none;
}
form#enquiry-form {
    margin: 30px 0 0 0;
    padding: 10px;
    background: #ececec;
    border-radius: 10px;
    position: relative;
}
form#enquiry-form h2 {
    color: #555;
    text-align: center;
    margin: 10px 0 30px 0;
}
#enquiry-form {
  display: none;
}
button#enquiry-button {
    margin: 30px 0 0 0;
}

button#enquiry-close {
    display: none;
}
/*button#enquiry-button {
    float: left;
}*/
button#enquiry-close {
    margin: 30px 0 0 0;
    position: absolute;
    right: 0;
    z-index: 1;
    top: 0;
}

#sideNavbarCats .cat-but {
    width: 96% !important;
    float: none!important;
    border: none;
    box-shadow: none;
}
#sideNavbarCats .family-button.btn.btn-primary {
    width: 100%;
    background: none;
    color: #636464;
    font-weight: 500;
    text-align: left;
    border: 1px solid rgb(204 204 204 / 51%);
    border-left: 4px solid rgb(204 204 204 / 51%);
    box-shadow: none;
    border-radius: 1px;
}
#sideNavbarCats .error-info {
    color: #fff200!important;
    border: none;
}
#sideNavbarCats .cat-but .catBtn:hover,
#sideNavbarCats .active {
    background: rgb(55 67 142 / 10%) !important;
    font-weight: 600 !important;
    color: #141570 !important;
    border: 1px solid rgb(20 21 112 / 39%) !important;
    border-left: 4px solid #141570 !important;
}
#sideNavbarCats .btn.error-info {
    width: 96%;
    margin-left: 2%;
    color: #636464 !important;
}
.single-product-inf b:first-child {
    padding: 0;
}
.app-content-area {
    padding: 0px;
}
#sideNavbarCats {
margin: 0;
padding: 0;
height: auto;
overflow-x: hidden;
overflow-y: auto;
text-align: justify;
}
@media (min-width: 992px) and (max-width: 1399px) {
.container.w_80 {
max-width: 94% !important;
width: 94% !important;
}
}
@media (min-width: 1400px) {
.container.w_80 {
max-width: 80% !important;
width: 80% !important;
}
}
#app-content {
    margin-left: 0px !important;
    min-height: 100px !important;
    margin-bottom: 50px !important;
}
.product_view_list .card.cat-but {
    width: auto !important;
    box-shadow: none;
    border-radius: 0px;
    border: none;
    min-width: 23%;
    margin: 5px 1% !important;
    max-width: 23%;
    overflow: hidden;
    white-space: nowrap;
}

@media (max-width: 399px) {
.product_view_list .card.cat-but {
    width: 96% !important;
}
}
@media (min-width: 400px) and (max-width: 767px) {
.product_view_list .card.cat-but {
    width: 46% !important;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.product_view_list .card.cat-but {
    min-width: 22.6%;
}
}

.product_view_list .card button.btn,
.product_view_list button.btn:disabled {
    background: #fff;
    border: 1px solid rgb(0 0 0 / 7%);
    box-shadow: none;
    color: #444;
    font-weight: 400;
    padding-top: 12px;
    padding-bottom: 8px;
    border-radius: 4px;
    text-transform: capitalize;
    font-size: 17px;
    font-family: 'League Spartan', sans-serif;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
}
.product_view_list .card button.btn:hover,
.product_view_list .card button.btn:focus  {
    background: rgb(255 255 255 / 11%);
    color: #38448f;
    font-weight: 600;
}
.product_view_list button.btn:disabled {
    opacity: 0.9;
    font-weight: 600;
}
.display-flex {
    display: flex;
}
.navbar-vertical {
    width: 18%;
    margin-right: 1%;
}
#az-content {
    width: 100%;
}
.navbar-vertical.navbar.nav-dashboard {
    background: #fff;
    border: 1px solid rgb(204 204 204 / 35%);
    border-radius: 10px;
    padding-bottom: 30px;
    width: 100%;
    display: block;
}
.nav-scroller h3 {
    padding-bottom: 0px !important;
}
.nav-scroller h3 a {
    color: #3064c2 !important;
    font-size: 18px;
}
.admin_main .navbar-vertical.navbar.nav-dashboard.admin_lft {
    background: rgb(0 0 0 / 5%);
}
.admin_main #app-content {
    margin-left: 16.25rem !important;
}

@media (max-width: 767px) {
#app-content {
    min-width: 100% !important;
}
.display-flex.mb_flx {
    display: block !important;
}
.navbar-vertical.navbar.nav-dashboard {
    width: 100%;
    display: block;
    margin: 0px;
    max-width: 100%;
}
#sideNavbarCats .cat-but {
    width: 96% !important;
}
#az-content {
    width: 100%;
    margin-top: 0px;
}
.product_search_bg {
    margin-top: 20px;
}
#az-container, 
.single-product-info {
    padding: 30px 10px;
}
}
.product_view_list .card {
    width: 23% !important;
    box-shadow: 0 0px 6px rgb(0 0 0 / 20%);
    border: none;
    margin: 10px 1% 10px !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
.product_view_list .card {
    width: 48% !important;
    max-width: 48% !important;
    min-width: 48% !important;
}
}
@media (min-width: 1200px) and (max-width: 1699px) {
.product_view_list .card {
    width: 23% !important;
}
}
.card-inner-box.get-enq {
    box-shadow: 0 0px 6px rgb(0 0 0 / 20%);
    padding: 20px;
}
#enquiry-container .btn.btn-primary {
    background: #2a65c1;
    padding: 8px 40px;
    font-weight: bold;
    border-radius: 4px;
}
#enquiry-container .btn.btn-primary:hover,
#enquiry-container .btn.btn-primary:focus {
    background: #fff;
    color: #2a65c1;
    border: 1px solid #2a65c1;
}
.navbar-vertical .navbar-nav .nav-item .nav-link:hover {
    color: #37438e !important;
}
.page-link, .page-link:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.chemical-name {
    margin: 20px;
}
#enquiry-form .mb-4 {
    margin-bottom: 24px !important;
}

.product_view_list .card:hover, 
.product_view_list .card:focus {
    -webkit-box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
    box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
}
.product_view_list .card button.btn, 
.product_view_list button.btn:disabled {
    display: block;
}
.card-inner-box p.card-text.mx-bottom.hd b {
    overflow: hidden;
    display: block;
    width: 100%;
}
.btn:focus-visible {
    background-color: #494848 !important;
    border-color: #494848 !important;
    outline: 0;
    box-shadow: none !important;
}
#enquiry-container .btn.btn-primary:hover, 
#enquiry-container .btn.btn-primary:focus {
    box-shadow: none !important;
}

.single-product-box {
    padding: 0px 0 !important;
}

@media (max-width: 767px) {
.product_view_list .card {
    width: 99% !important;
}
.float-left {
    float: left;
    width: 100%;
}
img.card-img-single {
    min-width: 100% !important;
    max-width: 100% !important;
}
.single-product-box {
    padding: 0px 0 !important;
    margin: 0px 0 30px !important;
}
}

/* MEGA MENU LAYOUT FIX FOR BOOTSTRAP 5 CONFLICTS */
@media (min-width: 992px) {
    .main-menu .main-menu__inner .right,
    .main-menu .main-menu__list,
    .main-menu .main-menu__list > li.has-mega {
        position: static !important;
    }
}