@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//xyy.cn/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=7.3.4") format("woff2");
}

.wd-popup.wd-promo-popup{
	background-color:#111111;
	background-image: url(https://xyy.cn/wp-content/uploads/2021/07/promo-popup.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}

.page-title-default{
	background-color:#0a0a0a;
	background-image: none;
	background-size:cover;
	background-position:center center;
}

.footer-container{
	background-color:rgb(15,15,15);
	background-image: none;
}

:root{
--wd-text-font:"Lato", Arial, Helvetica, sans-serif;
--wd-text-font-weight:400;
--wd-text-color:#777777;
--wd-text-font-size:14px;
}
:root{
--wd-title-font:"Roboto", Arial, Helvetica, sans-serif;
--wd-title-font-weight:500;
--wd-title-color:#242424;
}
:root{
--wd-entities-title-font:"Roboto", Arial, Helvetica, sans-serif;
--wd-entities-title-font-weight:400;
--wd-entities-title-color:#333333;
--wd-entities-title-color-hover:rgb(51 51 51 / 65%);
}
:root{
--wd-alternative-font:"Lato", Arial, Helvetica, sans-serif;
}
:root{
--wd-widget-title-font:"Roboto", Arial, Helvetica, sans-serif;
--wd-widget-title-font-weight:500;
--wd-widget-title-transform:uppercase;
--wd-widget-title-color:#333;
--wd-widget-title-font-size:16px;
}
:root{
--wd-header-el-font:"Lato", Arial, Helvetica, sans-serif;
--wd-header-el-font-weight:700;
--wd-header-el-transform:uppercase;
--wd-header-el-font-size:13px;
}
:root{
--wd-primary-color:rgb(190,161,99);
}
:root{
--wd-alternative-color:#fbbc34;
}
:root{
--wd-link-color:#333333;
--wd-link-color-hover:#242424;
}
:root{
--btn-default-bgcolor:#f7f7f7;
}
:root{
--btn-default-bgcolor-hover:#efefef;
}
:root{
--btn-accented-bgcolor:rgb(190,161,99);
}
:root{
--btn-accented-bgcolor-hover:rgb(173,141,74);
}
:root{
--notices-success-bg:#459647;
}
:root{
--notices-success-color:#fff;
}
:root{
--notices-warning-bg:#E0B252;
}
:root{
--notices-warning-color:#fff;
}

	:root{
					
			
							--wd-form-brd-radius: 0px;
					
					--wd-form-brd-width: 2px;
		
					--btn-default-color: #333;
		
					--btn-default-color-hover: #333;
		
					--btn-accented-color: #fff;
		
					--btn-accented-color-hover: #fff;
		
									--btn-default-brd-radius: 0px;
				--btn-default-box-shadow: none;
				--btn-default-box-shadow-hover: none;
				--btn-default-box-shadow-active: none;
				--btn-default-bottom: 0px;
			
			
			
					
					
							--btn-accented-bottom-active: -1px;
				--btn-accented-brd-radius: 0px;
				--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
				--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
			
			
					
							
					--wd-brd-radius: 0px;
		
			}

	
	
			:root{
			--wd-container-w: 1444px;
		}
	
			@media (min-width: 1444px) {
			[data-vc-full-width]:not([data-vc-stretch-content]),
			:is(.vc_section, .vc_row).wd-section-stretch {
				padding-left: calc((100vw - 1444px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
				padding-right: calc((100vw - 1444px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
			}
		}
	
			div.wd-popup.popup-quick-view {
			max-width: 920px;
		}
	
	
	
	
			.woodmart-woocommerce-layered-nav .wd-scroll-content {
			max-height: 223px;
		}
	
	
/* --- Base Styles & Variables --- */
:root {
    --primary-color: #D2010D; /* Your Brand Red */
    --primary-dark: #a9010b;
    --primary-light: #f7e0e2; /* Lighter shade for subtle backgrounds */
    --secondary-color: #2c3e50; /* Deep Blue-Gray for contrast */
    --text-color: #333333;
    --text-color-light: #666666;
    --bg-light: #f8f9fa; /* Lighter background for sections */
    --bg-dark: #222222;
    --white: #ffffff;
    --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.12);
    --transition-speed: 0.3s ease-in-out;
}
html {
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}
/* --- Utilities --- */
.container {
    width: 100%;
   
    margin: 0 auto;
    padding: 20px 0; /* Adjusted padding */
}
.text-center {
    text-align: center;
}
/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--secondary-color);
    margin-bottom: 20px;
    font-weight: 700;
}

h1 { font-size: 3.2rem; line-height: 1.2; }
h2 { font-size: 2.5rem; line-height: 1.3; }
h3 { font-size: 1.9rem; }
h4 { font-size: 1.4rem; }
p {
    margin-bottom: 15px;
    font-size: 1rem;
    color: var(--text-color-light);
}

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

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 50px; /* More modern rounded buttons */
    font-weight: 600;
    text-align: center;
    transition: all var(--transition-speed);
    text-decoration: none;
    font-size: 1rem;
    border: 2px solid transparent;
	margin-top:15px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    text-decoration: none;
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    text-decoration: none;
}
/* --- Hero Section --- */
#hero, #page-hero {
    background-size: cover;
    background-position: center center;
    color: var(--white);
    padding: 120px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    overflow: hidden; /* For parallax effect */
}


#hero::before, #page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Darker overlay for better text contrast */
    z-index: 0;
}

#hero .container, #page-hero .container {
    position: relative;
    z-index: 1;
    padding-top: 20px;
    padding-bottom: 20px;
}

#hero h1, #page-hero h1 {
    font-size: 4rem;
    margin-bottom: 25px;
    color: var(--white);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
}
#hero p, #page-hero p {
    font-size: 1.4rem;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}


/* --- General Section Styling --- */
section {
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden; /* For animations */
}

section h2 {
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}
section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--primary-color);
    margin: 15px auto 0;
    border-radius: 2px;
}
section p.lead { /* For introductory paragraphs */
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 50px;
}

/* --- Grid & Flex Layouts --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.content-two-col {
    display: flex;
    flex-direction: column; /* Default to column for mobile */
    gap: 50px;
    text-align: left;
    align-items: center;
}
.content-two-col .text-content, .content-two-col .image-content {
    flex: 1; /* Allow items to grow */
}
.content-two-col .image-content img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: var(--shadow-medium);
    transition: transform var(--transition-speed);
}
.content-two-col .image-content img:hover {
    transform: scale(1.02);
}
.content-two-col ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}
.content-two-col ul li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 1.05rem;
    color: var(--text-color);
}
.content-two-col ul li img {
    height: 20px;
    width: 20px;
    margin-right: 15px;
    flex-shrink: 0;
    filter: invert(10%) sepia(90%) saturate(600%) hue-rotate(330deg) brightness(80%); /* Make check icons primary color */
}


/* --- Card Styles (for overview, services, products, benefits etc.) --- */
.card {
    background-color: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
    transition: all var(--transition-speed);
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 100%; /* Ensure cards are same height in a row */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
}

.card img {
    height: 70px; /* Icon size */
    margin-bottom: 25px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1)); /* Soft shadow for icons */
}
.card h3 {
    color: var(--secondary-color);
    font-size: 1.6rem;
    margin-bottom: 15px;
}
.card p {
    color: var(--text-color-light);
    font-size: 0.95rem;
}

/* Product Card Specifics */
.product-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
    filter: none; /* Remove filter for actual images */
}
.product-card h3 {
    font-size: 1.35rem;
    color: var(--primary-color); /* Highlight product names */
}

/* --- Certifications & Awards --- */
.cert-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
}
.cert-logos img {
    height: 90px;
    max-width: 180px;
    object-fit: contain;
    transition: transform var(--transition-speed);
}
.cert-logos img:hover {
    transform: scale(1.08);
}

.cert-list {
    text-align: left;
    max-width: 900px;
    margin: 50px auto;
}
.cert-list ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
.cert-list li {
    background-color: var(--white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    color: var(--text-color);
    transition: background-color var(--transition-speed);
}
.cert-list li:hover {
    background-color: var(--primary-light);
}
.cert-list li img { /* check_icon */
    height: 22px;
    width: 22px;
    margin-right: 15px;
    flex-shrink: 0;
    filter: invert(10%) sepia(90%) saturate(600%) hue-rotate(330deg) brightness(80%); /* Make check icons primary color */
}

/* --- Brand Logos --- */
.brand-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
}
.brand-logos img {
    height: 70px;
    max-width: 200px;
    object-fit: contain;
    filter: grayscale(80%) opacity(70%); /* Subtle grayscale for non-primary brands */
    transition: all var(--transition-speed);
}
.brand-logos img:hover {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.05);
}


/* --- Contact Form --- */
#contact-info-section .contact-details {
    text-align: left;
}
#contact-info-section .detail-item {
    display: flex;
    align-items: flex-start; /* Align icon and text top */
    margin-bottom: 30px;
}
#contact-info-section .detail-item img {
    height: 35px;
    width: 35px;
    margin-right: 20px;
    flex-shrink: 0;
    filter: invert(10%) sepia(90%) saturate(600%) hue-rotate(330deg) brightness(80%); /* Primary color icons */
}
#contact-info-section .detail-item h4 {
    margin-bottom: 5px;
    color: var(--primary-color);
    font-size: 1.5rem;
}
#contact-info-section .detail-item p {
    margin-bottom: 0;
    color: var(--text-color-light);
    line-height: 1.4;
}

.contact-form {
    background-color: var(--white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: var(--shadow-medium);
    text-align: left;
}

.contact-form .form-group {
    margin-bottom: 25px;
}

.contact-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--secondary-color);
    font-size: 1.05rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
    outline: none;
}
.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}
.contact-form button {
    width: auto;
    padding: 15px 40px;
    font-size: 1.1rem;
    cursor: pointer;
}

#map-section .map-embed {
    margin-top: 50px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}
#map-section iframe {
    width: 100%;
    height: 500px;
    border: 0;
}


/* --- Footer --- */
footer {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 60px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    text-align: left;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: var(--white);
    margin-bottom: 25px;
    font-size: 1.3rem;
}

.footer-col p, .footer-col ul li a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}
.footer-col ul li {
    margin-bottom: 12px;
}
.footer-col ul li a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.social-links {
    margin-top: 25px;
    display: flex;
    gap: 18px;
}
.social-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}
.social-links a:hover {
    background-color: var(--primary-color);
    transform: translateY(-3px);
}
.social-links img {
    height: 20px;
    width: 20px;
    filter: invert(1); /* Make icons white */
}


.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    margin-top: 40px;
}
.footer-bottom p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}


/* --- Animations (using intersection observer or scroll events in JS) --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Specific animations for different elements */
.card.animate-on-scroll {
    transition-delay: var(--delay); /* Use JS to set delay */
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.6rem; }

    #hero h1, #page-hero h1 { font-size: 3.2rem; }
    #hero p, #page-hero p { font-size: 1.2rem; }

    nav ul li {
        margin-left: 20px;
    }
    .container {
        padding: 30px 0;
    }
    section {
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        gap: 15px;
    }
    nav {
        width: 100%;
        margin-top: 15px;
    }
    nav ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 20px;
    }
    nav ul li {
        margin-left: 0;
    }
    .language-selector {
        margin-top: 10px;
    }

    #hero h1, #page-hero h1 { font-size: 2.5rem; }
    #hero p, #page-hero p { font-size: 1rem; }
    #hero .btn { padding: 10px 25px; font-size: 0.95rem; }

    .grid-container {
        grid-template-columns: 1fr;
    }
    .content-two-col {
        flex-direction: column;
        gap: 30px;
    }
    .content-two-col .text-content, .content-two-col .image-content {
        width: 100%;
    }
    .content-two-col.reverse-order {
        flex-direction: column; /* Ensure it stays column on mobile even if reversed */
    }

    .cert-logos, .brand-logos {
        gap: 20px;
    }
    .cert-logos img, .brand-logos img {
        height: 60px;
        max-width: 45%;
    }

    #contact-info-section .detail-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    #contact-info-section .detail-item img {
        margin-right: 0;
        margin-bottom: 10px;
    }
    #contact-info-section .detail-item h4 {
        margin-left: 0;
    }
    #contact-info-section .detail-item p {
        margin-left: 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .social-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }
    section { padding: 40px 0; }
    .container { padding: 20px 0; }

    #hero h1, #page-hero h1 { font-size: 2rem; }
    #hero p, #page-hero p { font-size: 0.9rem; }

    .logo img { height: 45px; }
    nav ul {
      
        gap: 10px;
    }
    nav ul li a {
        font-size: 0.95rem;
    }

    .card { padding: 25px; }
    .card img { height: 50px; margin-bottom: 20px; }
    .card h3 { font-size: 1.4rem; }
    .card p { font-size: 0.9rem; }

    .btn { padding: 10px 20px; font-size: 0.9rem; }
}

/* Helper for primary color in rgba for box-shadow */
body {
    --primary-color-rgb: 210, 1, 13; /* For use in rgba() functions */
}
/* --- New & Modified CSS for enhanced image content --- */

/* Hero Section specific background image */
#hero {
    /* The background-image is now set inline in HTML for flexibility.
       Keep general parallax settings here. */
    background-attachment: fixed;
    background-position: center top; /* Adjusted for potentially taller hero image */
}
/* Ensure overlay is still present */
#hero::before {
    background: rgba(0, 0, 0, 0.65); /* Slightly darker for more pop */
}

/* About Us Intro Section */
#about-us-intro .text-content h2 {
    margin-bottom: 25px;
}
#about-us-intro .text-content h2::after {
    margin: 15px 0 0; /* Align underline to left for text-left content */
}
#about-us-intro .image-content {
    /* On desktop, this will be left or right based on content-two-col */
    order: 1; /* Default order if no reverse-order class */
}
/* This is already handled by .content-two-col .image-content img */

/* Services & Products Card Image Adjustments */
/* Make images in services cards more prominent and clickable to detail page */
#services .card img {
    height: 150px; /* Larger image for service cards */
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
    filter: none; /* Ensure no icon filter is applied to actual images */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Product Card has its own specific image size already */
.product-card img {
    height: 200px; /* Consistent height for product images */
}
.product-card .btn {
    margin-top: 20px; /* Space between text and button */
}


/* New: Image Gallery Section */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: var(--shadow-medium);
    transition: transform var(--transition-speed);
}
.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-item img {
    width: 100%;
    height: 250px; /* Fixed height for gallery images */
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.gallery-item:hover img {
    transform: scale(1.08); /* Zoom effect on hover */
}

.gallery-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(var(--primary-color-rgb), 0.8); /* Primary color overlay */
    color: var(--white);
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    transform: translateY(100%); /* Start hidden below */
    transition: transform 0.4s ease-out;
    text-align: center;
}
.gallery-item:hover .overlay {
    transform: translateY(0); /* Slide up on hover */
}

/* CTA Section with Background Image */
#cta {
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1; /* Ensure overlay works correctly */
}
#cta::before { /* Overlay for CTA section */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--secondary-color-rgb), 0.7); /* Use a darker secondary color overlay */
    z-index: -1; /* Place behind content */
}
#cta h2, #cta p {
    color: var(--white);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

/* --- Icon Adjustments for Overview & Partnership Cards --- */
#overview .card img, #partnerships .card img {
    height: 60px; /* Slightly smaller icons for these sections */
    margin-bottom: 20px;
}

/* Ensure two-column layout on desktop for content-two-col sections */
@media (min-width: 768px) {
    .content-two-col {
        flex-direction: row; /* Side-by-side on desktop */
        align-items: center;
    }
    .content-two-col > .text-content {
        flex: 1;
        padding-right: 30px; /* Add some spacing */
    }
    .content-two-col > .image-content {
        flex: 1;
        padding-left: 30px; /* Add some spacing */
    }
    .content-two-col.reverse-order > .text-content {
        order: 2;
        padding-right: 0;
        padding-left: 30px;
    }
    .content-two-col.reverse-order > .image-content {
        order: 1;
        padding-left: 0;
        padding-right: 30px;
    }
    #about-us-intro .text-content h2::after {
        margin-left: 0;
    }
}

/* Define secondary color RGB for use in rgba() */
body {
    --primary-color-rgb: 210, 1, 13;
    --secondary-color-rgb: 44, 62, 80; /* RGB values for #2c3e50 */
}
/* --- Case Studies Specific Styles (for single page layout) --- */

.case-studies-hero {
    background-image: url('../images/case_studies_hero_bg.jpg'); /* General hero for case studies */
}

/* Base styles for individual case study sections */
.case-detail-section {
    padding: 80px 0;
    text-align: center; /* Default center, content-two-col will override */
}
.case-detail-section:nth-child(even) { /* Alternating background for better readability */
    background-color: var(--bg-light);
}

.case-detail-section h2.case-title {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 40px;
    text-align: center;
    position: relative;
    display: inline-block;
}
.case-detail-section h2.case-title::after {
    content: '';
    display: block;
    width: 80px; /* Slightly longer underline for main case title */
    height: 4px;
    background-color: var(--secondary-color);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Case Study Meta Info */
.case-study-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 40px auto; /* Centered margin */
    max-width: 900px; /* Constrain width */
    background-color: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
    text-align: left;
}
.case-study-meta .meta-item h4 {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 5px;
}
.case-study-meta .meta-item p {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 0;
}

/* Image styling within case studies for content-two-col */
.case-detail-section .content-two-col .image-content img {
    height: 350px; /* Consistent height for case study images */
    object-fit: cover;
    width: 100%;
}
/* Ensure two-column layout on desktop for content-two-col sections */
@media (min-width: 768px) {
    .content-two-col {
        flex-direction: row; /* Side-by-side on desktop */
        align-items: center;
    }
    .content-two-col > .text-content {
        flex: 1;
        padding-right: 30px; /* Add some spacing */
    }
    .content-two-col > .image-content {
        flex: 1;
        padding-left: 30px; /* Add some spacing */
    }
    .content-two-col.reverse-order > .text-content {
        order: 2;
        padding-right: 0;
        padding-left: 30px;
    }
    .content-two-col.reverse-order > .image-content {
        order: 1;
        padding-left: 0;
        padding-right: 30px;
    }
}
/* Brazil Page Styles */
.brazil-hero {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/brazil-bg.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0;
    text-align: center;
}

.section-subtitle {
    color: #D2010D;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.gold-text { color: #f1c40f; }
.bg-dark { background: #2c3e50; color: white; }
.text-white p { color: #ecf0f1; }

.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.brand-tags { margin: 20px 0; }
.brand-tag {
    display: inline-block;
    background: #D2010D;
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
    margin-right: 10px;
    font-weight: bold;
}

.logistics-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}
.feature-item {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}
.feature-item i { font-size: 3rem; color: #D2010D; margin-bottom: 15px; }

/* Product Tag Button */
.product-cta { padding: 40px 0; background: #f0f7ff; border-top: 2px dashed #D2010D; border-bottom: 2px dashed #D2010D; }
.btn-tag {
    display: inline-block;
    padding: 12px 30px;
    background: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 15px;
}

/* Brazil Contact & Socials */
.contact-box {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 50px;
    background: #fff;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 10px;
}
.social-buttons { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.social-btn {
    padding: 12px;
    text-align: center;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    display: block;
}
.whatsapp { background: #25D366; }
.instagram { background: #E1306C; }
.facebook { background: #4267B2; }

@media (max-width: 768px) {
    .grid-2-col, .contact-box, .logistics-features { grid-template-columns: 1fr; }
}

.card.animate-on-scroll{
	    align-items: anchor-center;
    margin-bottom: 20px;
}
section{padding:15px}
.cert-logos img{height:100%}
.btn-secondary:hover{color:white !important}
footer{padding:0 !important}
.btn-primary{color:white !important}
.whb-header{margin:0 !important}


.oempro-text, .oempro-grid, .oempro-card, .oempro-card-title, .oempro-card-text {
    all: unset; 
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.oempro-text {
    display: block;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 35px;
}

.oempro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.oempro-card {
    display: block;
    background-color: #f8f8f8;
    padding: 24px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.oempro-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.oempro-card-title {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #222;
}

.oempro-card-text {
    display: block;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .oempro-text {
        font-size: 15px;
    }
    .oempro-card-title {
        font-size: 16px;
    }
    .oempro-card-text {
        font-size: 14px;
    }
}
.site-logo{max-height:70px !important}

	.row{margin:0 !important}
	nav[class*="-pagination"] ul{display:flex !important}
	.product-tabs-wrapper{display:none }
	
 section h2{
		margin-bottom:20px !important
	}
.wpb_content_element,	section p.lead{
		margin: 10px auto;
	}
	.contact-sales-box{
    margin-top:20px;
}

.contact-sales-box p{
    margin-bottom:10px;
    font-size:15px;
    color:#555;
}

.contact-sales-btn{
    display:inline-block;
    padding:12px 24px;
    background:#D2010D;
    color:#fff;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
}

.contact-sales-btn:hover{
    background:white;
}

img{
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
}

body{
    user-select:none;
}
.hidden-fields-container{display:none}

/* --- 独立样式命名空间：#xyy-case-page --- */
    #xyy-case-page {
      --xyy-red: #D2010D;
      --xyy-dark: #1A1A1A;
      --xyy-gray: #666;
      --xyy-light: #F8F9FA;
      --xyy-white: #FFFFFF;
      font-family: 'Inter', sans-serif;
      color: var(--xyy-dark);
      background-color: var(--xyy-white);
    }

    /* 通用间距与容器 */
    .xyy-section { padding: 90px 0; overflow: hidden; }
    .xyy-container { max-width: 1600px; margin: 0 auto; padding: 0 20px; }
    .xyy-bg-light { background-color: var(--xyy-light); }

    /* 实力感大标题 */
    .xyy-main-h2 { font-size: 2.6rem; font-weight: 800; margin-bottom: 25px; position: relative; letter-spacing: -0.5px; }
    .xyy-main-h2::after { content: ''; display: block; width: 60px; height: 5px; background: var(--xyy-red); margin-top: 15px; }
    .xyy-center .xyy-main-h2::after { margin: 15px auto 0; }
    .xyy-center { text-align: center; }

    /* --- 新模块：全球影响力仪表盘 (代替 Banner) --- */
    .xyy-impact-header {
      padding: 120px 0 60px;
      
      color: white;

    }
    .xyy-impact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
      margin-top: 50px;
    }
    .xyy-impact-stat {
      border-left: 1px solid rgba(255,255,255,0.2);
      padding-left: 25px;
    }
    .xyy-impact-stat h3 {
      font-size: 3.5rem;
      font-weight: 800;
      color: var(--xyy-red);
      line-height: 1;
      margin-bottom: 10px;
    }
    .xyy-impact-stat p {
      font-size: 1.1rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.8;
    }
    .xyy-impact-lead {
      max-width: 900px;
      font-size: 1.3rem;
      line-height: 1.6;
      border-left: 4px solid var(--xyy-red);
      padding-left: 30px;
      margin-top: 40px;
    }

    /* 客户类型卡片 */
    .xyy-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 25px; margin-top: 50px; }
    .xyy-type-card {
      background: white; padding: 45px 30px; border-radius: 4px;
      box-shadow: 0 15px 35px rgba(0,0,0,0.05); transition: 0.3s; border-bottom: 5px solid transparent;
    }
    .xyy-type-card:hover { transform: translateY(-10px); border-bottom-color: var(--xyy-red); }
    .xyy-type-card img { width: 55px; height: 55px; margin-bottom: 25px; }
    .xyy-type-card h3 { font-size: 1.4rem; margin-bottom: 15px; }
    .xyy-type-card p { font-size: 0.95rem; color: var(--xyy-gray); line-height: 1.7; }

    /* 案例详情：Meta数据条 */
    .xyy-meta-bar {
      display: flex; flex-wrap: wrap; background: white; border: 1px solid #e1e1e1;
      border-left: 6px solid var(--xyy-red); margin: 40px 0;
    }
    .xyy-meta-item { flex: 1; min-width: 180px; padding: 20px 25px; border-right: 1px solid #eee; }
    .xyy-meta-item:last-child { border-right: none; }
    .xyy-meta-item label { display: block; font-size: 0.75rem; color: var(--xyy-red); font-weight: 700; text-transform: uppercase; margin-bottom: 5px; }
    .xyy-meta-item span { font-size: 1rem; font-weight: 600; color: var(--xyy-dark); }

    /* 内容行布局 */
    .xyy-row { display: flex; align-items: center; gap: 60px; margin-bottom: 80px; }
    .xyy-row.reverse { flex-direction: row-reverse; }
    .xyy-col-text { flex: 1.2; }
    .xyy-col-img { flex: 0.8; }
    .xyy-col-img img { width: 100%; border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.12); }

    .xyy-row h2 { font-size: 2.2rem; margin-bottom: 20px; color: var(--xyy-dark); }
    .xyy-check-list { list-style: none; margin-top: 25px; }
    .xyy-check-list li { position: relative; padding-left: 30px; margin-bottom: 15px; color: var(--xyy-gray); }
    .xyy-check-list li::before {
      content: '✓'; position: absolute; left: 0; color: var(--xyy-red); font-weight: 900; font-size: 1.2rem;
    }

    /* 解决方案网格 */
    .xyy-sol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 40px; }
    .xyy-sol-card { background: #fdfdfd; border: 1px solid #eee; padding: 25px; transition: 0.3s; }
    .xyy-sol-card:hover { border-color: var(--xyy-red); background: var(--xyy-red); }
    .xyy-sol-card h4 { font-size: 1.1rem; margin-bottom: 10px; }
    .xyy-sol-card:hover h4, .xyy-sol-card:hover p { color: white; }

    /* CTA 区域 */
    .xyy-cta-industrial {
     
      padding: 100px 0; color: white; text-align: center; border-top: 8px solid var(--xyy-red);
    }
    .xyy-cta-industrial h2 { font-size: 2.8rem; font-weight: 800; margin-bottom: 30px; }
    .xyy-cta-industrial .xyy-btn-red {
      background: var(--xyy-red); color: white; padding: 20px 50px; font-weight: 700;
      text-transform: uppercase; border-radius: 0; transition: 0.3s; text-decoration: none; display: inline-block;
    }
    .xyy-cta-industrial .xyy-btn-red:hover { background: white; color: var(--xyy-red); transform: translateY(-5px); }

    /* 兼容性修复：确保原有JS动画生效 */
    .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
    .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

    @media (max-width: 768px) {
      .xyy-row, .xyy-row.reverse { flex-direction: column; gap: 30px; }
      .xyy-main-h2 { font-size: 2rem; }
      .xyy-impact-header { padding: 80px 0 40px; }
      .xyy-impact-stat h3 { font-size: 2.5rem; }
			.xyy-impact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 40px;
      margin-top: 50px;
    }
    }
.vc_custom_1627475847437{padding:0 !important}
.footer-sidebar{padding-block:0 !important}
.main-page-wrapper{margin:0 !important;padding:0 !important}
.page-title{margin-block:0 !important}
.site-content{margin-bottom:0px !important}
.vc_column-inner{padding:0 !important}
.benefits-grid{margin-top:0px !important}
.main-footer{padding:20px !important}
.vc_custom_1773905904190{margin:0 5px}@media (min-width: 1025px) {
	.footer-sidebar {
    padding-block: 0 10px !important;
}.wd-prefooter{display:none}
.about-section{padding:50px !important}
.career-why,.career-benefits{padding:50px !important}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.footer-sidebar {
    padding-block: 40px 10px !important;
}

}

@media (max-width: 576px) {
	.wd-prefooter{display:none}
.whb-header{padding:0 !important}
.page-title{margin-block: 0 !important}
#our-strengths .strength-item{
padding:10px 5px !important}
#our-strengths{padding:0 !important}
#corporate-culture .culture-text {
padding: 0 !important;
text-align: left;
    }
#why-long-term-cooperation{padding:0px !important}
.contact-card{padding:30px 10px !important}

}