/* === HuaTai Peptides - Exact Clone CSS === */
:root {
  --themeColor1: rgba(8,55,97,1);
  --themeColor2: rgba(0,0,0,1);
  --themeColor3: rgba(255,255,255,1);
  --themeColor5: rgba(26,109,235,1);
  --accent: #1a6deb;
  --accent2: #2980b9;
}

/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:62.5%;scroll-behavior:smooth}
@media(min-width:1281px){html{font-size:58.59375%}}
@media(min-width:1441px){html{font-size:60.9375%}}
@media(min-width:1681px){html{font-size:62.5%}}
@media(min-width:1981px){html{font-size:68.75%}}
@media(min-width:2561px){html{font-size:78.125%}}
body{font-family:"Microsoft YaHei","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;color:#333;line-height:1.6;overflow-x:hidden;font-size:1.4rem}
a{text-decoration:none;color:inherit;transition:.3s}
img{max-width:100%;height:auto}
ul,ol{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ========= HEADER ========= */
#site-header{position:fixed;top:0;left:0;right:0;z-index:2999;background:rgb(255,255,255);box-shadow:0 2px 10px rgba(0,0,0,.06);transition:background-color .3s ease}
.header-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:80px}
.logo a{display:flex;align-items:center}
.logo img{height:50px;width:auto}
.logo-text{font-size:2rem;font-weight:700;color:var(--themeColor1)}
.main-nav{flex:1;display:flex;justify-content:center}
.main-nav ul{list-style:none;display:flex;gap:0}
.main-nav li{position:relative}
.main-nav a{padding:0 25px;display:flex;align-items:center;height:80px;font-size:1.6rem;font-weight:500;color:#333;transition:.2s;border-bottom:3px solid transparent}
.main-nav a:hover,.main-nav a.active{color:var(--accent);border-bottom-color:var(--accent)}
.main-nav .submenu{position:absolute;top:100%;left:0;background:#fff;min-width:220px;box-shadow:0 8px 25px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s;z-index:100;border-top:2px solid var(--accent)}
.main-nav li:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu li a{padding:12px 20px;font-size:1.4rem;border-bottom:1px solid #f5f5f5;height:auto;border-left:none;border-right:none;border-bottom:1px solid #f5f5f5}
.submenu li a:hover{background:#f0f5ff;color:var(--accent)}
.header-right{display:flex;align-items:center;gap:15px}
.btn-quote{background:var(--accent);color:#fff!important;padding:10px 28px;border-radius:25px;font-weight:600;font-size:1.4rem;transition:.2s}
.btn-quote:hover{background:#0d5cc9;transform:translateY(-1px)}
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px}
.mobile-toggle span{display:block;width:25px;height:3px;background:#333;margin:5px 0;border-radius:2px;transition:.3s}
body{padding-top:80px}

/* ========= HERO SLIDER ========= */
.hero-slider{position:relative;height:600px;overflow:hidden}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.slide.active{opacity:1}
.slide-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}
.slide-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.35)}
.slide-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 20px;height:100%;display:flex;flex-direction:column;justify-content:center}
.slide-content h1{font-size:4.2rem;color:#fff;max-width:700px;line-height:1.25;margin-bottom:20px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.slide-content p{font-size:2rem;color:rgba(255,255,255,.9);max-width:600px;margin-bottom:35px;text-shadow:0 1px 5px rgba(0,0,0,.2)}
.slide-content .btn-primary{background:var(--accent)!important;color:#fff!important;padding:8px 22px!important;border-radius:20px!important;font-weight:600!important;font-size:1.2rem!important;display:inline-block!important;border:none!important;cursor:pointer!important;transition:.2s!important}
.slide-content .btn-primary:hover{background:#0d5cc9;transform:translateY(-2px)}
.slider-dots{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:10}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;transition:.3s}
.dot.active,.dot:hover{background:#fff}

/* ========= SECTIONS ========= */
.section{padding:80px 0}
.section-header{text-align:center;margin-bottom:50px}
.section-header h2{font-size:3.4rem;color:#222;margin-bottom:12px;font-weight:700}
.section-header h2 span{color:var(--accent)}
.section-header p{color:#777;font-size:1.6rem;max-width:600px;margin:0 auto}

/* ========= POPULAR PRODUCTS ========= */
.popular-products{background:#f8f9fa}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.product-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 15px rgba(0,0,0,.06);transition:.3s;text-align:center}
.product-card:hover{transform:translateY(-5px);box-shadow:0 10px 35px rgba(0,0,0,.12)}
.product-card a{display:block;padding:20px}
.product-img{height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:15px}
.product-img img{max-height:180px;width:auto;object-fit:contain;transition:.3s}
.product-card:hover .product-img img{transform:scale(1.05)}
.product-info h3{font-size:1.5rem;color:#333;margin-bottom:8px;font-weight:600}
.view-more{color:var(--accent);font-size:1.3rem;font-weight:500;display:inline-block;margin-top:5px}
.section-footer{text-align:center;margin-top:40px}
.btn-primary{background:var(--accent);color:#fff;padding:12px 32px;border-radius:4px;font-weight:600;display:inline-block;border:none;cursor:pointer;transition:.2s;text-align:center;font-size:1.4rem}
.btn-primary:hover{background:#0d5cc9;color:#fff}
.btn-outline{border:2px solid var(--accent);color:var(--accent);padding:12px 32px;border-radius:4px;font-weight:600;display:inline-block;transition:.2s;font-size:1.4rem}
.btn-outline:hover{background:var(--accent);color:#fff}

/* ========= COMPANY INTRO ========= */
.company-intro{background:#fff}
.intro-layout{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.intro-image img{width:100%;border-radius:8px}
.intro-text .stat-item{padding:20px 0;border-bottom:1px solid #f0f0f0}
.intro-text .stat-item:last-child{border-bottom:none}
.intro-text .stat-item h3{font-size:1.8rem;color:#222;margin-bottom:8px;font-weight:600}
.intro-text .stat-item h3 .num{color:var(--accent);font-size:2.4rem;margin-right:5px}
.intro-text .stat-item p{color:#666;font-size:1.4rem;line-height:1.8}

/* ========= WORKSHOP ========= */
.workshop-section{background:#f8f9fa}
.workshop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.workshop-grid .gallery-item{overflow:hidden;border-radius:6px;position:relative}
.workshop-grid .gallery-item img{width:100%;height:250px;object-fit:cover;transition:.5s}
.workshop-grid .gallery-item:hover img{transform:scale(1.08)}

/* ========= NEWS UPDATES ========= */
.news-section{background:#fff}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.news-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 15px rgba(0,0,0,.06);transition:.3s}
.news-card:hover{transform:translateY(-5px);box-shadow:0 10px 35px rgba(0,0,0,.12)}
.news-card a{display:block}
.news-img{height:220px;overflow:hidden}
.news-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.news-card:hover .news-img img{transform:scale(1.05)}
.news-info{padding:20px}
.news-info h3{font-size:1.5rem;color:#333;margin-bottom:8px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-info p{color:#888;font-size:1.3rem;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.read-more{color:var(--accent);font-size:1.3rem;font-weight:500}

/* ========= TESTIMONIALS ========= */
.testimonials-section{background:#f0f5ff}
.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.testimonial-card{background:#fff;padding:35px;border-radius:10px;box-shadow:0 2px 15px rgba(0,0,0,.05);display:flex;gap:20px;align-items:flex-start}
.testimonial-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;flex-shrink:0}
.testimonial-content{flex:1}
.quote{font-size:1.5rem;color:#555;line-height:1.8;font-style:italic;margin-bottom:15px;position:relative;padding-left:20px;border-left:3px solid var(--accent)}
.author{font-weight:600;color:#333;font-size:1.4rem}

/* ========= STATS BAR ========= */
.stats-bar{background:var(--themeColor1);padding:50px 0}
.stats-flex{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px}
.stats-item{text-align:center;color:#fff}
.stats-item .num{display:block;font-size:4.2rem;font-weight:700;color:var(--accent)}
.stats-item .label{font-size:1.4rem;opacity:.8;margin-top:5px}

/* ========= PAGE BANNER ========= */
.page-banner{background:linear-gradient(135deg,var(--themeColor1),#16213e);padding:60px 0 40px;text-align:center;margin-top:80px}
.page-banner h1{color:#fff;font-size:3.6rem;margin-bottom:10px}
.page-banner .breadcrumb{color:rgba(255,255,255,.7);margin-bottom:15px;font-size:1.4rem}
.page-banner .breadcrumb a{color:rgba(255,255,255,.7)}
.page-banner .breadcrumb a:hover{color:#fff}
.page-banner .banner-subtitle{color:rgba(255,255,255,.8);font-size:1.8rem}

/* ========= ABOUT PAGE ========= */
.about-intro{background:#f8f9fa}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.stat-card{background:#fff;padding:35px 25px;border-radius:10px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:.3s}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.1)}
.stat-icon{font-size:4.8rem;margin-bottom:15px}
.stat-card h3{font-size:1.8rem;color:#222;margin-bottom:12px}
.stat-card p{color:#666;font-size:1.4rem;line-height:1.7}
.cta-section{background:var(--accent);padding:60px 0;text-align:center}
.cta-box h2{color:#fff;font-size:3.2rem;margin-bottom:15px}
.cta-box p{color:rgba(255,255,255,.9);font-size:1.6rem;margin-bottom:25px}
.cta-box .btn-primary{background:#fff;color:var(--accent)}
.cta-box .btn-primary:hover{background:#f8f8f8}
.culture-section{background:#fff}
.culture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.culture-card{background:#f8f9fa;padding:30px;border-radius:10px;text-align:center}
.culture-card h3{color:var(--accent);font-size:2rem;margin-bottom:15px}
.culture-card p{color:#555;font-size:1.5rem;line-height:1.7}

/* ========= PRODUCTS PAGE ========= */
.products-layout{display:grid;grid-template-columns:250px 1fr;gap:30px}
.products-sidebar{position:sticky;top:100px;align-self:start}
.products-sidebar h3{font-size:1.8rem;color:#333;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid var(--accent)}
.products-sidebar ul{list-style:none;margin-bottom:30px}
.products-sidebar li a{display:block;padding:10px 15px;color:#555;border-bottom:1px solid #f0f0f0;transition:.2s;font-size:1.5rem}
.products-sidebar li a:hover,.products-sidebar li a.active{color:var(--accent);background:#f0f5ff;border-left:3px solid var(--accent)}
.sidebar-contact{background:#f8f9fa;padding:20px;border-radius:8px}
.sidebar-contact h4{margin-bottom:10px;color:#333;font-size:1.6rem}
.sidebar-contact p{font-size:1.4rem;color:#555;margin-bottom:8px}
.sidebar-contact .btn-primary{width:100%;margin-top:10px;text-align:center}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px}
.page-link{padding:8px 16px;border:1px solid #ddd;border-radius:4px;color:#555;transition:.2s;font-size:1.4rem}
.page-link:hover,.page-link.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ========= PRODUCT DETAIL ========= */
.product-detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.product-detail-img{border-radius:10px;overflow:hidden;background:#f8f8f8;display:flex;align-items:center;justify-content:center}
.product-detail-img img{width:100%;height:auto}
.product-detail-info h1{font-size:2.8rem;color:#222;margin-bottom:15px}
.product-meta{margin-bottom:20px}
.product-meta .category{background:#f0f0f0;padding:5px 15px;border-radius:20px;font-size:1.3rem;color:#666}
.product-desc{color:#555;font-size:1.6rem;margin-bottom:20px;line-height:1.8}
.product-content{color:#555;font-size:1.5rem;line-height:1.8;margin-bottom:25px}
.product-actions{display:flex;gap:15px}
.related-products{background:#f8f9fa}

/* ========= NEWS DETAIL ========= */
.news-detail-layout{display:grid;grid-template-columns:1fr 300px;gap:40px}
.news-article h1{font-size:2.8rem;color:#222;margin-bottom:15px;line-height:1.4}
.article-meta{color:#999;font-size:1.4rem;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee}
.article-image{margin-bottom:25px;border-radius:8px;overflow:hidden}
.article-image img{width:100%}
.article-content{color:#555;font-size:1.6rem;line-height:1.9}
.article-content p{margin-bottom:15px}
.news-sidebar{position:sticky;top:100px;align-self:start}
.news-sidebar h3{font-size:1.8rem;color:#333;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid var(--accent)}
.news-sidebar ul{list-style:none;margin-bottom:20px}
.news-sidebar li{margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #f0f0f0}
.news-sidebar li a h4{font-size:1.4rem;color:#333;line-height:1.5;margin-bottom:5px}
.news-sidebar li a span{font-size:1.2rem;color:#999}
.news-sidebar li a:hover h4{color:var(--accent)}

/* ========= CONTACT PAGE ========= */
.contact-intro{text-align:center;max-width:800px;margin:0 auto 40px}
.contact-intro p{font-size:1.6rem;color:#555;line-height:1.8}
.contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:50px}
.contact-card{background:#fff;padding:30px 20px;border-radius:10px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:.3s;border-top:3px solid var(--accent)}
.contact-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.12)}
.card-icon{font-size:4rem;margin-bottom:15px}
.contact-card h3{font-size:1.6rem;color:#333;margin-bottom:8px}
.contact-card p{color:#666;font-size:1.4rem}
.alert-success{background:#d4edda;color:#155724;padding:15px;border-radius:8px;margin-bottom:30px;text-align:center}
.contact-form-box{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:#f8f9fa;padding:40px;border-radius:10px;margin-bottom:40px}
.form-left h2{font-size:2.8rem;color:#222;margin-bottom:10px}
.form-left p{color:#666;font-size:1.5rem}
.contact-form .form-group{margin-bottom:15px}
.contact-form input,.contact-form textarea{width:100%;padding:14px;border:1px solid #ddd;border-radius:6px;font-size:1.5rem;transition:.2s;font-family:inherit}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-info-bar{display:flex;justify-content:space-around;padding:25px;background:#222;color:#fff;border-radius:8px}
.info-item{font-size:1.4rem}
.info-item strong{font-size:1.6rem}

/* ========= SUB PAGES BANNER ========= */
.page-banner-sub{position:relative;height:280px;overflow:hidden;display:flex;align-items:center}
.page-banner-sub .banner-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}
.page-banner-sub .banner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5)}
.page-banner-sub .container{position:relative;z-index:2}
.page-banner-sub .breadcrumb{color:rgba(255,255,255,.8);font-size:1.4rem;margin-bottom:10px}
.page-banner-sub .breadcrumb a{color:rgba(255,255,255,.8)}
.page-banner-sub .breadcrumb a:hover{color:#fff}
.page-banner-sub h1{color:#fff;font-size:3.6rem}

/* ========= PRODUCTS PAGE - EXACT 4-COL GRID ========= */
.products-page-exact{background:#fff}
.products-with-sidebar{display:grid;grid-template-columns:220px 1fr;gap:25px}
.products-sidebar{position:sticky;top:100px;align-self:start}
.sidebar-box{background:#fff;padding:18px;border:1px solid #eee;border-radius:4px;margin-bottom:15px}
.sidebar-box h3{font-size:1.5rem;color:#333;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--accent);font-weight:700}
.sidebar-box ul{list-style:none}
.sidebar-box li a{display:block;padding:9px 10px;color:#555;border-bottom:1px solid #f5f5f5;transition:.2s;font-size:1.35rem}
.sidebar-box li a:hover,.sidebar-box li a.active{color:var(--accent);background:#f0f5ff;border-left:3px solid var(--accent);padding-left:7px}
.sidebar-contact-box p{font-size:1.3rem;color:#666;margin-bottom:6px;line-height:1.5}
.product-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.product-grid-item{border:1px solid #eee;border-radius:4px;overflow:hidden;transition:.3s;text-align:center}
.product-grid-item:hover{box-shadow:0 5px 20px rgba(0,0,0,.1);transform:translateY(-3px)}
.product-grid-item a{display:block}
.product-grid-img{width:100%;padding-top:100%;position:relative;overflow:hidden;background:#f8f8f8}
.product-grid-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:.5s}
.product-grid-item:hover .product-grid-img img{transform:scale(1.05)}
.product-grid-name{padding:10px 8px 4px}
.product-grid-name p{font-size:1.35rem;color:#333;font-weight:600;line-height:1.3}
.product-grid-btn{padding:0 8px 12px}
.btn-details{display:inline-block;padding:5px 18px;border:1px solid var(--accent);color:var(--accent);border-radius:3px;font-size:1.2rem;transition:.2s}
.btn-details:hover{background:var(--accent);color:#fff}
@media(max-width:960px){.products-with-sidebar{grid-template-columns:1fr}.product-grid-4{grid-template-columns:repeat(2,1fr)}}

/* Pagination - exact match */
.pagination-exact{margin-top:40px;text-align:center}
.pagination-exact ul{list-style:none;display:flex;justify-content:center;gap:5px}
.pagination-exact li a{display:inline-block;padding:8px 14px;border:1px solid #ddd;color:#666;font-size:1.4rem;border-radius:3px;transition:.2s}
.pagination-exact li a:hover{border-color:#2196f3;color:#2196f3}
.pagination-exact li a.active{background:#2196f3;color:#fff;border-color:#2196f3}

/* ========= NEWS PAGE ========= */
.news-page{background:#f5f5f5}
.news-list{display:flex;flex-direction:column;gap:20px}
.news-list-item{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.06);transition:.3s}
.news-list-item:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(0,0,0,.1)}
.news-list-item a{display:flex;align-items:center;gap:25px;padding:20px}
.news-list-img{width:200px;height:150px;flex-shrink:0;overflow:hidden;border-radius:4px}
.news-list-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.news-list-item:hover .news-list-img img{transform:scale(1.05)}
.news-list-info{flex:1}
.news-list-info h3{font-size:1.6rem;color:#333;margin-bottom:10px;line-height:1.5;font-weight:600}
.news-list-info .read-more{color:var(--accent);font-size:1.3rem;font-weight:500}

/* ========= CONTACT PAGE ========= */
.contact-page{background:#fff}
.contact-hero{text-align:center;max-width:800px;margin:0 auto 50px}
.contact-hero h2{font-size:3.2rem;color:#222;margin-bottom:8px}
.contact-hero .subtitle{font-size:1.6rem;color:var(--accent);margin-bottom:15px}
.contact-hero .desc{font-size:1.5rem;color:#666;line-height:1.8}
.contact-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-bottom:50px}
.contact-info-col{display:flex;flex-direction:column;gap:20px}
.contact-info-card{display:flex;align-items:center;gap:20px;padding:20px;background:#f8f9fa;border-radius:8px;transition:.3s}
.contact-info-card:hover{box-shadow:0 4px 15px rgba(0,0,0,.08)}
.contact-icon{width:50px;height:50px;object-fit:contain}
.contact-info-text h4{font-size:1.5rem;color:#333;margin-bottom:4px}
.contact-info-text p{font-size:1.4rem;color:#666}
.contact-form-col{background:#f8f9fa;padding:30px;border-radius:8px}
.form-desc{color:#666;font-size:1.4rem;margin-bottom:20px}
.contact-form .form-group{margin-bottom:15px}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.contact-form input,.contact-form textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:5px;font-size:1.4rem;transition:.2s;font-family:inherit;background:#fff}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}
.contact-form textarea{resize:vertical;min-height:100px}
.contact-bottom-bar{display:flex;justify-content:space-around;padding:20px;background:#222;color:#fff;border-radius:6px}
.bottom-item{font-size:1.4rem}
.bottom-item strong{font-size:1.5rem}

@media(max-width:960px){
  .products-layout{grid-template-columns:1fr}
  .products-grid-col2{grid-template-columns:1fr}
  .news-list-item a{flex-direction:column}
  .news-list-img{width:100%;height:200px}
  .contact-main-grid{grid-template-columns:1fr}
  .contact-bottom-bar{flex-direction:column;gap:10px;text-align:center}
}

/* ========= ABOUT PAGE - EXACT CLONE ========= */
.page-banner-about{position:relative;height:350px;overflow:hidden;display:flex;align-items:center}
.page-banner-about .banner-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}
.page-banner-about .banner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5)}
.page-banner-about .container{position:relative;z-index:2}
.page-banner-about h1{color:#fff;font-size:4rem;margin-bottom:10px}
.page-banner-about .breadcrumb{color:rgba(255,255,255,.8);font-size:1.4rem}
.page-banner-about .breadcrumb a{color:rgba(255,255,255,.8)}
.page-banner-about .breadcrumb a:hover{color:#fff}

.about-company-intro{background:#fff}
.about-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:stretch}
.about-intro-text{padding-right:20px}
.about-intro-text .section-header h2{font-size:3rem;color:#222;margin-bottom:8px}
.about-intro-text .section-header h2 span{color:var(--accent)}
.about-intro-text .section-header p{color:#777;font-size:1.5rem}
.intro-block{margin-bottom:25px}
.intro-block h3{font-size:1.7rem;color:#222;margin-bottom:8px;font-weight:700}
.intro-block p{color:#666;font-size:1.4rem;line-height:1.8}
.about-intro-image{display:flex;align-items:stretch}
.about-intro-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}

.culture-carousel-section{background:#f8f9fa}
.culture-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.culture-card-item{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:.3s}
.culture-card-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.1)}
.culture-card-img{height:180px;overflow:hidden}
.culture-card-img img{width:100%;height:100%;object-fit:cover}
.culture-card-body{padding:25px;text-align:center}
.culture-card-body h3{font-size:1.8rem;color:#222;margin-bottom:10px}
.culture-card-body p{color:#666;font-size:1.4rem;line-height:1.7}

.stats-number-section{background:#fff;padding:60px 0}
.stats-number-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stats-number-item{text-align:center;padding:30px 15px;border:1px solid #eee;border-radius:8px;transition:.3s}
.stats-number-item:hover{border-color:var(--accent);box-shadow:0 4px 15px rgba(26,109,235,.1)}
.stats-icon{font-size:3.5rem;margin-bottom:12px}
.stats-num{font-size:3.2rem;font-weight:700;color:var(--accent);margin-bottom:8px}
.stats-num .unit{font-size:1.6rem;color:#666;margin-left:3px}
.stats-label{color:#888;font-size:1.3rem}

@media(max-width:960px){
  .about-intro-grid{grid-template-columns:1fr}
  .culture-cards{grid-template-columns:1fr}
  .stats-number-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .stats-number-grid{grid-template-columns:1fr}
}

/* ========= SIDEBAR FLOATING ========= */
.sidebar-floating{position:fixed;right:0;bottom:28%;z-index:3000;display:flex;flex-direction:column;gap:0}
.sidebar-floating a{width:50px;height:50px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;transition:.3s;border-radius:0}
.sidebar-floating a:first-child{border-radius:8px 0 0 0}
.sidebar-floating a:last-child{border-radius:0 0 0 8px}
.sidebar-floating a.whatsapp-btn{background:#25d366}
.sidebar-floating a.email-btn{background:var(--accent)}
.sidebar-floating a.top-btn{background:#666}
.sidebar-floating a:hover{opacity:.85;transform:scale(1.05)}

/* ========= FOOTER ========= */
#site-footer{background:rgb(35,35,35);color:#bbb;padding:60px 0 0}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:40px}
.footer-col h3{color:#fff;font-size:1.8rem;margin-bottom:20px}
.footer-col p{font-size:1.4rem;line-height:1.8}
.footer-col .footer-logo{height:40px;margin-bottom:15px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:10px}
.footer-col ul li a{color:#bbb;font-size:1.4rem}
.footer-col ul li a:hover{color:var(--accent)}
.contact-info li{font-size:1.4rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px;margin-top:40px;border-top:1px solid #444;font-size:1.3rem;color:#888}
.footer-bottom a{color:#888}
.footer-bottom a:hover{color:var(--accent)}

/* ========= ERROR PAGE ========= */
.error-page{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center}
.error-page h1{font-size:12rem;color:var(--accent);margin-bottom:10px}
.error-page p{font-size:2.4rem;color:#666;margin-bottom:30px}

/* ========= RESPONSIVE ========= */
@media(max-width:960px){
  .main-nav{display:none}
  .main-nav.open{position:absolute;top:80px;left:0;width:100%;background:#fff;box-shadow:0 8px 25px rgba(0,0,0,.1);z-index:999}
  .main-nav.open ul{display:flex;flex-direction:column;padding:20px}
  .main-nav.open a{height:auto;padding:12px 20px}
  .mobile-toggle{display:block}
  .hero-slider{height:400px}
  .slide-content h1{font-size:2.8rem}
  .slide-content p{font-size:1.6rem}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .stats-row,.culture-grid{grid-template-columns:1fr}
  .testimonials-grid{grid-template-columns:1fr}
  .products-layout{grid-template-columns:1fr}
  .product-detail-layout,.news-detail-layout{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:repeat(2,1fr)}
  .contact-form-box{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .intro-layout{grid-template-columns:1fr}
  .workshop-grid{grid-template-columns:repeat(2,1fr)}
  .stats-flex{flex-direction:column;align-items:center}
  .contact-info-bar{flex-direction:column;gap:10px;text-align:center}
}
@media(max-width:480px){
  .products-grid,.news-grid{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
  .hero-slider{height:350px}
  .slide-content h1{font-size:2.2rem}
  .workshop-grid{grid-template-columns:1fr}
}