/* ==========================================
   HEBEI HENGGUAN CHEMICAL - Main Stylesheet
   ========================================== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font:14px/1.6 "Microsoft YaHei",Arial,sans-serif; color:#333; background:#f5f5f5; }
a { color:#1a5276; text-decoration:none; }
a:hover { color:#e74c3c; }
img { max-width:100%; height:auto; }
.clearfix:after { content:""; display:table; clear:both; }
.wrap { width:1200px; margin:0 auto; }

/* Top Bar */
.topbar { background:#1a3c5e; padding:15px 0; }
.logo { float:left; }
.logo img { height:50px; }
.toplinks { float:right; padding-top:15px; }
.toplinks a { color:#fff; margin-left:25px; font-size:14px; text-transform:uppercase; letter-spacing:0.5px; }
.toplinks a:hover { color:#f39c12; }

/* Banner Slider */
.banner { height:400px; overflow:hidden; position:relative; background:#1a3c5e; }
.banner-slider { position:relative; height:100%; }
.banner-slide { position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; animation:bannerFade 25s infinite; }
.banner-slide:nth-child(1) { animation-delay:0s; }
.banner-slide:nth-child(2) { animation-delay:5s; }
.banner-slide:nth-child(3) { animation-delay:10s; }
.banner-slide:nth-child(4) { animation-delay:15s; }
.banner-slide:nth-child(5) { animation-delay:20s; }
@keyframes bannerFade {
  0%, 16% { opacity:1; }
  20%, 96% { opacity:0; }
  100% { opacity:1; }
}

/* Main */
.main { padding:40px 0; }

/* Content Layout */
.content-wrap { padding:30px 0; }
.content-main { float:left; width:870px; min-height:400px; }
.sidebar { float:right; width:300px; }

/* Section Title */
.section-title { font-size:24px; color:#1a3c5e; border-bottom:3px solid #2e86c1; padding-bottom:10px; margin-bottom:25px; }

/* Product Grid */
.product-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.product-card { background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08); transition:transform 0.3s, box-shadow 0.3s; }
.product-card:hover { transform:translateY(-3px); box-shadow:0 4px 16px rgba(0,0,0,0.15); }
.product-card a { display:block; }
.product-img { height:180px; display:flex; align-items:center; justify-content:center; background:#f0f4f8; overflow:hidden; }
.product-img img { width:100%; height:100%; object-fit:cover; }
.no-image { color:#999; font-size:14px; }
.no-image.large { font-size:24px; height:300px; display:flex; align-items:center; justify-content:center; background:#f0f4f8; }
.product-card h3 { padding:12px 15px; font-size:14px; color:#333; text-align:center; }

/* Home Sections */
.home-section { margin-bottom:40px; }
.home-two-col { margin-bottom:40px; }
.home-about { float:left; width:570px; }
.home-news { float:right; width:570px; }
.about-content p { margin-bottom:15px; line-height:1.8; }
.about-content .btn { display:inline-block; padding:8px 25px; background:#1a5276; color:#fff; border-radius:4px; margin-top:10px; }
.about-content .btn:hover { background:#2e86c1; }

/* News List */
.news-list { list-style:none; }
.news-list li { padding:12px 0; border-bottom:1px dashed #ddd; }
.news-list li:last-child { border:none; }
.news-date { color:#999; font-size:12px; margin-right:15px; }
.news-list-full { list-style:none; }
.news-list-full li { padding:15px 0; border-bottom:1px solid #eee; }
.news-list-full .news-date { display:block; margin-bottom:5px; }
.news-excerpt { color:#666; font-size:13px; margin-top:5px; }
.news-meta { color:#999; font-size:13px; margin:10px 0 20px; }

/* Sidebar */
.sidebar-box { background:#fff; border-radius:6px; padding:20px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.sidebar-box h4 { font-size:16px; color:#1a3c5e; border-bottom:2px solid #2e86c1; padding-bottom:10px; margin-bottom:15px; }
.cat-list { list-style:none; }
.cat-list li { padding:8px 0; border-bottom:1px solid #f0f0f0; }
.cat-list li:last-child { border:none; }
.cat-list a { color:#555; display:block; }
.cat-list a:hover { color:#1a5276; padding-left:5px; transition:0.2s; }
.contact-info p { margin-bottom:8px; font-size:13px; color:#666; }
.contact-info { padding:15px 0; }

/* Breadcrumb */
.breadcrumb { font-size:13px; color:#999; margin-bottom:20px; padding:10px 15px; background:#fff; border-radius:4px; }
.breadcrumb a { color:#1a5276; }
.breadcrumb span { color:#333; }

/* Page Content */
.page-content { background:#fff; padding:25px; border-radius:6px; line-height:1.8; }
.page-content h3 { margin:20px 0 10px; color:#1a3c5e; }
.page-content ul { margin:10px 0 10px 20px; }
.page-content li { margin:5px 0; }
.about-img { width:100%; max-height:350px; object-fit:cover; border-radius:6px; margin-bottom:20px; }

/* Product Detail */
.product-detail { background:#fff; padding:30px; border-radius:6px; }
.product-detail-img { float:left; width:350px; margin-right:30px; }
.product-detail-img img { width:100%; border-radius:6px; }
.product-detail-info { overflow:hidden; }
.product-detail-info h1 { font-size:22px; color:#1a3c5e; margin-bottom:10px; }
.product-detail-info .subtitle { color:#666; font-size:15px; margin-bottom:20px; }
.product-content { margin-top:20px; line-height:1.8; }

/* Contact */
.contact-wrap { background:#fff; padding:30px; border-radius:6px; }
.contact-form { float:left; width:55%; padding-right:30px; border-right:1px solid #eee; }
.contact-detail { float:right; width:40%; }
.contact-form h3, .contact-detail h3 { font-size:18px; color:#1a3c5e; margin-bottom:20px; }
.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:5px; font-weight:bold; color:#555; }
.form-group input, .form-group textarea { width:100%; padding:10px; border:1px solid #ddd; border-radius:4px; font-family:inherit; font-size:14px; }
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:#2e86c1; }
.btn { display:inline-block; padding:8px 25px; border:none; border-radius:4px; cursor:pointer; font-size:14px; transition:0.3s; }
.btn-primary { background:#1a5276; color:#fff; }
.btn-primary:hover { background:#2e86c1; }
.success-msg { background:#d4edda; color:#155724; padding:15px 20px; border-radius:6px; margin-bottom:20px; }

/* Pagination */
.pagination { text-align:center; margin-top:30px; }
.pagination a, .pagination span { display:inline-block; padding:8px 14px; margin:0 3px; border-radius:4px; background:#fff; border:1px solid #ddd; }
.pagination .current { background:#1a5276; color:#fff; border-color:#1a5276; }
.pagination a:hover { background:#e8f0fe; }

/* Empty */
.empty { color:#999; padding:30px 0; text-align:center; }

/* Footer */
.footer { background:#1a3c5e; color:#bdc3c7; padding:40px 0 0; margin-top:40px; }
.footer-col { float:left; width:33.33%; padding:0 20px; margin-bottom:30px; }
.footer-col h4 { color:#fff; font-size:16px; margin-bottom:15px; padding-bottom:10px; border-bottom:2px solid #2e86c1; display:inline-block; }
.footer-col ul { list-style:none; }
.footer-col li { padding:5px 0; }
.footer-col a { color:#bdc3c7; }
.footer-col a:hover { color:#f39c12; }
.footer-col p { margin-bottom:8px; font-size:13px; }
.footer-bottom { clear:both; text-align:center; padding:15px 0; border-top:1px solid rgba(255,255,255,0.1); font-size:12px; }
.footer-bottom a { color:#bdc3c7; }

/* Responsive */
@media (max-width:1240px) {
  .wrap { width:100%; padding:0 20px; }
  .content-main { width:100%; float:none; }
  .sidebar { width:100%; float:none; margin-top:30px; }
  .product-grid { grid-template-columns:repeat(3, 1fr); }
  .home-about, .home-news { width:100%; float:none; margin-bottom:30px; }
  .contact-form, .contact-detail { width:100%; float:none; padding:0; border:none; }
  .contact-detail { margin-top:30px; }
  .product-detail-img { float:none; width:100%; margin:0 0 20px; }
  .footer-col { width:100%; float:none; margin-bottom:20px; }
}
@media (max-width:768px) {
  .logo { float:none; text-align:center; }
  .toplinks { float:none; text-align:center; padding-top:10px; }
  .toplinks a { margin:0 10px; font-size:12px; }
  .product-grid { grid-template-columns:repeat(2, 1fr); }
  .banner { height:250px; }
}