/* ==========================================
   GLOBAL VARIABLES
========================================== */
 
:root {
 
    --primary: #C60001;
    --primary-dark: #980000;
 
    --dark: #222222;
    --text: #666666;
 
    --border: #ECECEC;
 
    --bg: #F7F7F7;
 
    --white: #ffffff;
 
    --radius: 14px;
 
    --shadow: 0 15px 40px rgba(0, 0, 0, .08);
 
}

.catalog-breadcrumb {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 420px;
}
 
/* ==========================================
   HERO
========================================== */
 
.catalog-hero {
 
    display: flex;
 
    justify-content: space-between;
 
    align-items: flex-end;
 
    gap: 40px;
 
    margin-bottom: 40px;
 
}
 
.catalog-hero-content {
 
    flex: 1;
 
}
 
.catalog-hero h1 {
 
    font-size: 52px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    text-align: center;
 
}
 
.catalog-hero p {
 
    max-width: 700px;
 
    font-size: 18px;
 
    color: var(--text);
 
    line-height: 1.8;
 
}
 
.catalog-btn {
 
    display: inline-flex;
 
    align-items: center;
 
    justify-content: center;
 
    height: 56px;
 
    padding: 0 30px;
 
    background: var(--primary);
 
    color: #fff;
 
    text-decoration: none;
 
    border-radius: 50px;
 
    font-weight: 600;
 
    transition: .35s;
 
    white-space: nowrap;
 
}
 
.catalog-btn:hover {
 
    background: var(--primary-dark);
 
    transform: translateY(-2px);
 
    color: #fff;
 
}
 
/* ==========================================
   SEARCH
========================================== */
 
.catalog-search-wrapper {
 
    margin: 40px 10px 30px 10px;
 
}
 
.catalog-search-box {
 
    display: flex;
 
    align-items: center;
 
    background: #fff;
 
    border-radius: 60px;
 
    box-shadow: var(--shadow);
 
    overflow: hidden;
 
}
 
.catalog-search-icon {
 
    width: 70px;
 
    text-align: center;
 
    font-size: 22px;
 
}
 
.catalog-search-box input {
 
    flex: 1;
 
    height: 64px;
 
    border: none;
 
    outline: none;
 
    font-size: 16px;
 
    background: none;
 
}
 
.catalog-search-box button {
 
    width: 160px;
 
    min-width: 160px;
 
    height: 64px;
 
    border: none;
 
    background: var(--primary);
 
    color: #fff;
 
    font-size: 16px;
 
    cursor: pointer;
 
    font-weight: 600;
 
    transition: .3s;
 
}
 
.catalog-search-box button:hover {
 
    background: var(--primary-dark);
 
}
 
/* ==========================================
   POPULAR
========================================== */
 
.catalog-popular {
 
    display: flex;
 
    align-items: center;
 
    gap: 12px;
 
    flex-wrap: wrap;
 
    margin-bottom: 45px;
 
}
 
.catalog-popular span {
 
    font-weight: 700;
 
}
 
.catalog-popular a {
 
    background: #fff;
 
    padding: 10px 18px;
 
    border-radius: 30px;
 
    color: #555;
 
    text-decoration: none;
 
    transition: .3s;
 
    box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
 
}
 
.catalog-popular a:hover {
 
    background: var(--primary);
 
    color: #fff;
 
}
 
/* ==========================================
   LAYOUT
========================================== */
 
.catalog-layout {
 
    display: flex;
 
    align-items: flex-start;
 
    gap: 35px;
 
}
 
/* ==========================================
   SIDEBAR
========================================== */
 
.catalog-sidebar {
 
    width: 310px;
    min-width: 310px;
 
    background: #fff;
 
    border-radius: 18px;
 
    box-shadow: var(--shadow);
 
    overflow: hidden;
 
    position: sticky;
 
    top: 35px;
 
}
 
.catalog-sidebar h3 {
 
    margin: 0;
 
    padding: 22px 25px;
 
    background: #fafafa;
 
    border-bottom: 1px solid var(--border);
 
    font-size: 22px;
 
    color: var(--dark);
 
}
 
/* Category */
 
.catalog-category {
 
    border-bottom: 1px solid #f2f2f2;
 
}
 
.catalog-category:last-child {
 
    border-bottom: none;
 
}
 
.catalog-category-title {
 
    display: flex;
 
    justify-content: space-between;
 
    align-items: center;
 
    cursor: pointer;
 
    padding: 18px 22px;
 
    font-size: 16px;
 
    font-weight: 600;
 
    transition: .35s;
 
    color: #333;
 
    user-select: none;
 
}
 
.catalog-category-title:hover {
 
    background: #fafafa;
 
    color: var(--primary);
 
}
 
/* Active state */
 
.catalog-category.active {
 
    border-left: 4px solid var(--primary);
 
    background: #FFF6F6;
 
    box-shadow: inset 0 0 0 1px #F7D8D8;
 
}
 
.catalog-category.active .catalog-category-title {
 
    color: var(--primary);
 
}
 
/* Arrow */
 
.catalog-arrow {
 
    width: 26px;
 
    height: 26px;
 
    border-radius: 50%;
 
    display: flex;
 
    align-items: center;
 
    justify-content: center;
 
    transition: .35s;
 
    font-size: 12px;
 
    color: #999;
 
}
 
.catalog-category.active .catalog-arrow {
 
    transform: rotate(90deg);
 
    background: var(--primary);
 
    color: #fff;
 
}
 
/* Subcategories */
 
.catalog-subcategories {
 
    display: none;
 
    flex-direction: column;
 
    background: #fcfcfc;
 
    padding: 0 0 18px;
 
}
 
.catalog-category.active .catalog-subcategories {
 
    display: flex;
 
}
 
.catalog-subcategories a {
 
    position: relative;
 
    text-decoration: none;
 
    color: #666;
 
    padding: 12px 28px 12px 45px;
 
    transition: .3s;
 
    font-size: 15px;
 
}
 
.catalog-subcategories a::before {
 
    content: "";
 
    position: absolute;
 
    left: 25px;
 
    top: 50%;
 
    width: 6px;
 
    height: 6px;
 
    border-radius: 50%;
 
    background: #ccc;
 
    transform: translateY(-50%);
 
    transition: .3s;
 
}
 
.catalog-subcategories a:hover {
 
    color: var(--primary);
 
    background: #fff;
 
}
 
.catalog-subcategories a:hover::before {
 
    background: var(--primary);
 
}
 
.catalog-subcategories a.active {
 
    color: var(--primary);
 
    font-weight: 600;
 
}
 
.catalog-subcategories a.active::before {
 
    background: var(--primary);
 
}
 
/* Help Box */
 
.catalog-help {
 
    margin: 22px;
 
    border-radius: 16px;
 
    overflow: hidden;
 
    background: linear-gradient(135deg, var(--primary), #8E0000);
 
    color: #fff;
 
    text-align: center;
 
    padding: 25px;
 
}
 
.catalog-help h4 {
 
    margin: 0 0 12px;
 
    color: #fff;
 
    font-size: 22px;
 
}
 
.catalog-help p {
 
    opacity: .9;
 
    margin-bottom: 20px;
 
    line-height: 1.6;
 
}
 
.catalog-help a {
 
    display: inline-flex;
 
    align-items: center;
 
    justify-content: center;
 
    width: 100%;
 
    height: 46px;
 
    border-radius: 40px;
 
    background: #fff;
 
    color: var(--primary);
 
    text-decoration: none;
 
    font-weight: 700;
 
    transition: .35s;
 
}
 
.catalog-help a:hover {
 
    transform: translateY(-2px);
 
    background: #f3f3f3;
 
}
 
/* ==========================================
   PRODUCTS AREA
========================================== */
 
.catalog-products {
 
    flex: 1;
 
}
 
/* ==========================================
   TOOLBAR / FILTERS
========================================== */
 
.catalog-toolbar {
 
    display: flex;
 
    justify-content: space-between;
 
    align-items: center;
 
    flex-wrap: wrap;
 
    gap: 20px;
 
    background: #fff;
 
    padding: 22px 28px;
 
    border-radius: 18px;
 
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
 
    margin-bottom: 35px;
 
}
 
.catalog-toolbar-left h2 {
 
    margin: 0;
 
    font-size: 30px;
 
    color: #222;
 
}
 
.catalog-toolbar-left p,
.catalog-result-count {
 
    margin-top: 8px;
 
    color: #777;
 
    font-size: 14px;
 
}
 
.catalog-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}
 
.catalog-search-small {
 
    width: 220px !important;
    max-width: 220px;
    height: 46px;
 
    border: 1px solid #ddd;
 
    border-radius: 40px;
 
    padding: 0 20px;
 
    outline: none;
 
    transition: .3s;
 
}
 
.catalog-search-small:focus {
 
    border-color: var(--primary);
 
}
 
.catalog-select {
 
    width: 150px !important;
    max-width: 150px;
    height: 46px;
 
    padding: 0 18px;
 
    border-radius: 40px;
 
    border: 1px solid #ddd;
 
    cursor: pointer;
 
    background: #fff;
 
}
 
/* ==========================================
   PRODUCT GRID
========================================== */
 
.catalog-grid {
 
    display: grid;
 
    grid-template-columns: repeat(3, 1fr);
 
    gap: 32px;
 
}
 
/* Card */
 
.catalog-card {
 
    position: relative;
 
    display: flex;
 
    flex-direction: column;
 
    height: 100%;
 
    background: #fff;
 
    border-radius: 18px;
 
    overflow: hidden;
 
    box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
 
    transition: .35s;
 
    border: 1px solid transparent;
 
    cursor: pointer;
 
}
 
.catalog-card:hover {
 
    transform: translateY(-8px);
 
    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);
 
    border-color: var(--primary);
 
}
 
/* Badge */
 
.catalog-badge {
 
    position: absolute;
 
    top: 18px;
 
    left: 18px;
 
    background: var(--primary);
 
    color: #fff;
 
    padding: 7px 14px;
 
    font-size: 11px;
 
    border-radius: 30px;
 
    font-weight: 700;
 
    z-index: 5;
 
    letter-spacing: .5px;
 
}
 
/* Image */
 
.catalog-image {
 
    height: 210px;
 
    padding: 20px;
 
    background: #fafafa;
 
    display: flex;
 
    align-items: center;
 
    justify-content: center;
 
    overflow: hidden;
 
}
 
.catalog-image img {
 
    width: 100%;
 
    height: 100%;
 
    object-fit: contain;
 
    transition: .45s;
 
}
 
.catalog-card:hover img {
 
    transform: scale(1.08);
 
}
 
/* Body */
 
.catalog-card-body {
 
    flex: 1;
 
    display: flex;
 
    flex-direction: column;
 
    padding: 22px;
 
}
 
.catalog-card-body small {
 
    color: var(--primary);
 
    font-weight: 700;
 
    text-transform: uppercase;
 
    letter-spacing: .5px;
 
}
 
.catalog-card-body h4 {
 
    margin: 12px 0;
 
    font-size: 20px;
 
    color: #222;
 
    line-height: 1.4;
 
}
 
.catalog-card-body p {
 
    color: #777;
 
    margin-bottom: 0;
 
}
 
/* Bottom border animation */
 
.catalog-card::after {
 
    content: "";
 
    position: absolute;
 
    left: 0;
 
    bottom: 0;
 
    width: 0;
 
    height: 4px;
 
    background: var(--primary);
 
    transition: .35s;
 
}
 
.catalog-card:hover::after {
 
    width: 100%;
 
}
 
/* Footer / Buttons */
 
.catalog-card-footer {
 
    display: flex;
 
    gap: 10px;
 
    padding: 0 22px 22px;
 
}
 
.catalog-card-footer button {
 
    flex: 1;
 
    height: 44px;
 
    border: none;
 
    border-radius: 8px;
 
    cursor: pointer;
 
    font-weight: 600;
 
    transition: .3s;
 
}
 
.catalog-card-footer button:first-child {
 
    background: var(--primary);
 
    color: #fff;
 
}
 
.catalog-card-footer button:last-child {
 
    background: #F5F5F5;
 
    color: #333;
 
}
 
.catalog-card-footer button:hover {
 
    transform: translateY(-2px);
 
}
 
/* ==========================================
   PAGINATION
========================================== */
.catalog-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 50px 0px 40px 0px;
    position: relative !important;
    z-index: 1000 !important; 
    pointer-events: auto !important;
}

.catalog-pagination ul.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    flex-wrap: wrap;
    position: relative !important;
    z-index: 99999 !important;
}

.catalog-pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
}

/* Base style for clickable links and non-clickable spans */
.catalog-pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 45px;
    height: 45px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: #eee;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    box-sizing: border-box;
    position: relative !important;
    z-index: 100000 !important;
    pointer-events: auto !important; /* Direct clicks accept karne ke liye */
}

/* Hover state for links */
.catalog-pagination a.page-numbers:hover {
    background: #e2e2e2;
    color: #000;
}

/* Active / Current Page */
.catalog-pagination .page-numbers.current {
    background: var(--primary, #0073aa);
    color: #fff;
    cursor: default;
}

/* Ellipsis (...) */
.catalog-pagination .page-numbers.dots {
    background: transparent;
    cursor: default;
}

/* Overlapping Elementor Container ko click-pass karne ke liye */
.elementor-element-605ca80d {
    pointer-events: none !important;
}
 
/* ==========================================
   TABLET
========================================== */
 
@media(max-width:1024px) {
 
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
 
    .catalog-layout {
        flex-direction: column;
    }
 
    .catalog-sidebar {
        width: 100%;
        min-width: 100%;
        position: relative;
        top: 0;
    }
 
}
 
/* ==========================================
   MOBILE
========================================== */
 
@media(max-width:767px) {
 
    .catalog-hero {
        flex-direction: column;
        align-items: flex-start;
    }
 
    .catalog-search-box {
        flex-direction: column;
        border-radius: 20px;
        padding: 15px;
    }
 
    .catalog-search-box input {
        width: 100%;
        height: 50px;
    }
 
    .catalog-search-box button {
        width: 100%;
        min-width: 100%;
        height: 50px;
        border-radius: 10px;
        margin-top: 10px;
    }
 
    .catalog-search-icon {
        display: none;
    }
 
    .catalog-grid {
        grid-template-columns: 1fr;
    }
 
    .catalog-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
 
    .catalog-toolbar-right {
        width: 100%;
    }
 
    .catalog-search-small,
    .catalog-select {
        width: 100%;
    }
 
}
 
.catalog-card-footer button {
    min-width: 0;
    font-size: 14px;
    padding: 0 8px;
}
 
 
.contact-main-2 {
 
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
 
}
 
.contact-get-in-touch {
 
    background: #f7f9fc;
 
    padding: 45px;
 
    display: flex;
 
    flex-direction: column;
 
    justify-content: center;
 
}
 
.contact-form {
 
    padding: 45px;
 
    background: #fff;
 
}
 
 
.contact-get-in-touch h2,
.contact-form h2 {
 
    font-size: 42px;
 
    font-weight: 700;
 
    margin-bottom: 8px;
 
    color: #111;
 
}
 
.contact-get-in-touch p {
 
    color: #7b7b7b;
 
    line-height: 1.7;
 
    margin-bottom: 35px;
 
}
 
 
.contact-get-in-touch .elementor-icon-box {
 
    padding: 18px 0;
 
}
 
.contact-get-in-touch .elementor-icon {
 
    width: 55px;
 
    height: 55px;
 
    background: #fff;
 
    border-radius: 50%;
 
    display: flex;
 
    align-items: center;
 
    justify-content: center;
 
    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
 
}
 
.contact-get-in-touch .elementor-icon i {
 
    color: #C60001;
 
    font-size: 24px;
 
}
 
.contact-get-in-touch .elementor-icon-box-title {
 
    font-size: 18px;
 
    font-weight: 700;
 
    margin-bottom: 4px;
 
}
 
.contact-get-in-touch .elementor-divider {
 
    margin: 30px 0;
 
    opacity: .25;
 
}
 
.contact-get-in-touch .elementor-social-icon {
 
    width: 42px;
 
    height: 42px;
 
    background: #C60001;
 
    border-radius: 50%;
 
    transition: .3s;
 
}
 
.contact-get-in-touch .elementor-social-icon:hover {
 
    background: #000;
 
    transform: translateY(-3px);
 
}
 
 
.contact-form-cont input,
.contact-form-cont textarea {
 
    border: none !important;
 
    background: #f5f6f8 !important;
 
    border-radius: 8px !important;
 
    padding: 15px 18px !important;
 
    box-shadow: none !important;
 
}
 
.contact-form-cont input:focus,
.contact-form-cont textarea:focus {
 
    background: #fff !important;
 
    border: 1px solid #C60001 !important;
 
    box-shadow: 0 0 0 4px rgba(198, 0, 1, .08);
 
}
 
.contact-form-cont textarea {
 
    min-height: 170px;
 
}
 
.contact-form-cont button,
.contact-form-cont input[type=submit] {
 
    width: 220px;
 
    height: 52px;
 
    border-radius: 30px;
 
    background: #C60001;
 
    font-weight: 600;
 
    transition: .3s;
 
}
 
.contact-form-cont button:hover,
.contact-form-cont input[type=submit]:hover {
 
    background: #000;
 
}
 
/* hubei july industrial and trade co */
 
@media(max-width:992px) {
 
    .main-head-heading {
        font-size: 34px;
    }
 
    .services-cont {
        grid-template-columns: 1fr;
    }
 
    .services-cont-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
 
    .services-cont-box-text {
        text-align: center;
    }
 
}
 
@media(max-width:576px) {
 
    .main-head {
        margin: 50px auto;
    }
 
    .main-head-heading {
        font-size: 28px;
    }
 
    .main-head-desc,
    .main-head-desc-2,
    .description-last {
        font-size: 15px;
    }
 
    .services-cont-box {
        padding: 22px;
    }
 
    .services-cont-box-image {
        width: 80px;
        height: 80px;
    }
 
}
 
p {
    margin-bottom: 0em;
}