:root {
  --primary-color: #1b3b6b;
  --dark-bg: #222;
  --text-white: #fff;
  --text-gray: #ccc;
  --accent-color: #3d7bd6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"SimSun","宋体",serif;color:#222;background:#fff}
h1,h2,h3,h4,h5,h6{font-weight:400}
a{text-decoration:none;color:#1b3b6b}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #e8e8e8}
.header-wrap{display:flex;align-items:center;justify-content:space-between;height:140px}
.logo{display:flex;align-items:center;gap:12px;color:#1b3b6b}
.logo-mark{font-size:30px;background:linear-gradient(135deg,#1b3b6b,#3d7bd6);-webkit-background-clip:text;color:transparent}
.logo-img{max-height:80px;width:auto;max-width:240px;display:block}
.logo-cn,.logo-en{white-space:nowrap}
.logo-cn{letter-spacing:2px}
.logo-en{letter-spacing:1px}
.c-yellow{color:#f1c40f}
.c-green{color:#2ecc71}
.c-purple{color:#8e44ad}
.c-red{color:#e74c3c}
.site-header .container{max-width:100%;padding-left:0;padding-right:0}
.site-nav{margin-left:auto;margin-right:12px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:28px}
.site-nav a{padding:12px 4px;display:block;color:#000;font-family:"Microsoft YaHei","SimHei",sans-serif}
.has-sub > a{display:flex;align-items:center;gap:6px}
.has-sub > a:after{content:"";display:block;width:6px;height:6px;border-right:1px solid #666;border-bottom:1px solid #666;transform:rotate(45deg);transition:transform .2s ease;margin-top:-4px}
.has-sub:hover > a:after,.has-sub.open > a:after{transform:rotate(-135deg);margin-top:2px}
.lang{opacity:.7}
.nav-toggle{display:none;border:1px solid #ddd;background:#fff;border-radius:6px;padding:8px 10px}
.has-sub{position:relative}
.has-sub .sub{position:absolute;top:100%;left:0;background:#fff;border:1px solid #eee;box-shadow:0 6px 16px rgba(0,0,0,.08);min-width:180px;display:block;visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .25s ease-in-out,transform .25s ease-in-out;pointer-events:none}
.has-sub.open .sub{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}
.sub li a{padding:10px 14px}
.sub li{opacity:0;transform:translateY(-6px);transition:opacity .25s ease-in-out,transform .25s ease-in-out}
.has-sub.open .sub li{opacity:1;transform:translateY(0)}
.has-sub.open .sub li:nth-child(1){transition-delay:0s}
.has-sub.open .sub li:nth-child(2){transition-delay:.08s}
.has-sub.open .sub li:nth-child(3){transition-delay:.16s}
.has-sub.open .sub li:nth-child(4){transition-delay:.24s}
.has-sub.open .sub li:nth-child(5){transition-delay:.32s}
.has-sub.open .sub li:nth-child(6){transition-delay:.40s}
.hero{height:320px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.hero-inner{background:rgba(0,0,0,.35);color:#fff;padding:28px 32px;border-radius:10px;text-align:center}
.hero-inner h1{margin:0 0 6px;font-size:28px}
.breadcrumb{margin:0;font-size:12px;opacity:.9}
.hero-carousel{position:relative;height:600px;overflow:hidden}
.carousel-track{height:100%;position:relative}
.carousel-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:100% 100%;background-position:center;opacity:0;transition:opacity .6s ease-in-out;display:flex;align-items:center;justify-content:center}
.carousel-slide.active{opacity:1;z-index:1}
.carousel-prev,.carousel-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.3);color:#fff;border:none;padding:12px 16px;cursor:pointer;font-size:20px;z-index:2;border-radius:4px;transition:background .3s}
.carousel-prev:hover,.carousel-next:hover{background:rgba(0,0,0,.6)}
.carousel-prev{left:20px}
.carousel-next{right:20px}
.carousel-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:2}
.carousel-dots .dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.5);border:none;padding:0;cursor:pointer;transition:background .3s}
.carousel-dots .dot.active{background:#fff}
section{padding:48px 0}
.contact-hero{background-size:100% 100%;background-position:center;background-repeat:no-repeat;padding:100px 0 0;margin-top:60px}
.contact-hero .split-title h2{color:#fff}
.contact-hero .split-title:before,.contact-hero .split-title:after{background:rgba(255,255,255,0.8)}
.contact-title{text-align:center;color:#fff;margin-bottom:20px}
.contact-title h2{margin:0;font-size:24px}
.contact-title:before,.contact-title:after{content:"";display:inline-block;width:60px;height:1px;background:rgba(255,255,255,.85);vertical-align:middle;margin:0 12px}
.article{margin-top:40px}
.section-title{text-align:center;margin-bottom:22px}
.section-title h2{font-size:22px;font-weight:400}
.split-title{display:flex;align-items:center;gap:12px;justify-content:center;margin:28px 0 34px}
.split-title h2{font-size:36px;margin:0;color:#000;font-weight:700;font-family:"SimSun","宋体",serif}
.split-title:before,.split-title:after{content:"";display:block;height:2px;background:#ddd;width:60px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{border:1px solid #eaeaea;border-radius:10px;overflow:hidden;background:#fff}
.card .thumb{width:100%;height:auto;aspect-ratio:1/1;background:#f4f6f8;display:flex;align-items:center;justify-content:center}
.news-card .thumb{aspect-ratio:3/2}
.card .thumb img{height:100%;width:100%;object-fit:cover}
.card .content{padding:12px 14px}
.card .title{font-weight:400;text-align:center}
.product-detail{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;margin:40px 0}
.product-gallery img{width:100%;border-radius:10px}
.product-info h2{margin-top:0;margin-bottom:12px}
.product-specs{list-style:none;margin:18px 0 0;padding:0}
.product-specs li{padding:6px 0;border-bottom:1px dashed #e0e0e0;font-size:14px}
.product-specs span{display:inline-block;min-width:90px;color:#666}
.about-hero{height:600px;position:relative;display:flex;align-items:center;margin-top:100px;overflow:hidden}
.about-hero,.about-bg-split,.about-layout,.about-content,.about-bg-split .bg-item{transition:all .3s ease}
.about-bg-split{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;z-index:0}
.about-bg-split .bg-item{flex:1;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}
.about-hero:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right, rgba(0,40,80,0) 0%, rgba(0,40,80,0) 50%, rgba(0,40,80,0.6) 50%, rgba(0,40,80,0.6) 100%);z-index:1;pointer-events:none}
.about-layout{position:relative;z-index:2;display:flex;justify-content:flex-end;width:100%}
.about-content{width:50%;color:#fff;padding-left:40px}
.about-title h2{font-size:36px;margin:0 0 16px;color:#fff;font-weight:700}
.about-title .line{width:240px;height:2px;background:#ddd;margin-bottom:30px}
.about-text p{line-height:1.5;font-size:1em;margin-bottom:20px;text-align:justify;color:rgba(255,255,255,0.9);text-indent: 2em}
.tabs{display:flex;flex-wrap:wrap;gap:0;justify-content:flex-end;margin:50px 0 15px}
.tab-pane{padding-top:10px}
.tabs a{border:1px solid #e8e8e8;background:#fff;color:#666;border-radius:0;padding:14px 40px;font-size:15px;transition:all .3s;margin-left:-1px}
.tabs a:hover{background:#f9f9f9;color:#1b3b6b}
.tabs a.active{background:#1b3b6b;color:#fff;border-color:#1b3b6b;position:relative;z-index:1}
.text-box{background:none;border-radius:10px;padding:22px;color:#333;line-height:1.8}
.richtext{font-family:"Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
.richtext h1,.richtext h2,.richtext h3,.richtext h4,.richtext h5,.richtext h6{font-weight:initial}
.richtext strong,.richtext b{font-weight:bolder}
.richtext img{max-width:100%;height:auto;display:block;margin:10px 0}
.richtext table{width:100%;border-collapse:collapse;margin:16px 0}
.richtext th,.richtext td{border:1px solid #e0e0e0;padding:8px 12px}
.richtext thead th{background:#f5f7fb}
.richtext caption{caption-side:top;margin-bottom:8px;font-weight:400}
.side-layout{display:grid;grid-template-columns:260px 1fr;gap:24px}
.side{border:1px solid #eaeaea;border-radius:10px;background:none}
.side h4{margin:0;padding:14px 16px;border-bottom:1px solid #eee}
.side ul{list-style:none;margin:0;padding:10px}
.side li a{display:block;padding:10px 12px;border-radius:6px}
.side li a:hover{background:#f5f7fb}
.side li a.active{color:#1b3b6b;font-weight:700;background:#f5f7fb}
.grid-empty{grid-column:1/-1;text-align:center;color:#999}
.footer-icp{display:flex;align-items:center;gap:20px;color:#fff;margin-top:5px}
.footer-police{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:#fff}
.footer-police img{width:20px;height:20px}
.news-list{display:grid;grid-template-columns:1fr;gap:18px}
.news-item{display:grid;grid-template-columns:260px 1fr;gap:18px;border:1px solid #eee;border-radius:10px;overflow:hidden}
.news-item img{height:180px;width:100%;object-fit:cover}
.news-item .meta{padding:12px}
.cta-center{text-align:center;margin-top:20px}
.contact-card{display:grid;grid-template-columns:1.2fr 1fr;gap:0;align-items:stretch;border-radius:0;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);max-width:1000px;margin:0 auto}
.contact-image img{width:100%;height:100%;object-fit:cover;display:block}
.contact-info{padding:40px;background:#fff;color:#333;display:flex;flex-direction:column;justify-content:center}
.contact-content .sub-label{font-size:14px;color:#666;margin-bottom:12px}
.contact-content .company-name{font-size:24px;color:#000;margin-bottom:24px;font-weight:400}
.contact-list{display:flex;flex-direction:column;gap:12px}
.contact-list .item{font-size:14px;color:#333;line-height:1.6}
.site-footer{background:#0f1c33;color:#cbd4e6;padding:26px 0}
.footer-icp a{color:#fff}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.footer-nav{text-align:right}
.footer-nav a{margin-left:14px;color:#cbd4e6}
.social a{margin-right:10px;color:#cbd4e6}

@media(max-width:1200px){

  /* footer */
  .footer-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-icp{justify-content:center;align-items:center;flex-direction:column;gap:10px}
  .footer-nav{text-align:center;margin-top:14px;display:flex;justify-content:center;flex-wrap:wrap}
  .footer-nav a{margin-left:0;margin-right:14px}
}


@media(max-width:1024px){
  .container { max-width: 960px; }
  .grid{grid-template-columns:repeat(3,1fr)}
  .side-layout{grid-template-columns:220px 1fr}
  
  /* Tablet Header Optimization */
  .header-wrap { height: 100px; }
  /* .logo-img { max-height: 80px; } */
  .site-nav ul { gap: 18px; }
  .site-nav a { padding: 10px 6px; font-size: 15px; }
  
  /* Tablet Hero & Banner */
  .hero { height: 260px; }
  .hero-carousel { height: 400px; }
  .about-hero{height:auto;align-items:stretch;flex-direction:column;gap:32px}
  .about-hero:before{display:none}
  .about-bg-split{position:relative;top:auto;left:auto;height:auto;flex-direction:column;width:100%}
  .about-bg-split .bg-item{flex:none;width:100%}
  .about-bg-split .bg-item.left{aspect-ratio:16/9;min-height:220px}
  .about-bg-split .bg-item.right{display:none}
  .about-layout{justify-content:flex-start;flex-direction:column;gap:32px;width:100%}
  .about-content{width:100%;padding:24px;background:rgba(0,40,80,0.88)}
  .about-title h2{font-size:30px}
  .about-title .line{width:160px;margin-bottom:20px}
  .about-text p{font-size:1.05rem;line-height:1.75}
  
  /* Tablet Content */
  .contact-card { max-width: 90%; }
  .news-item { grid-template-columns: 220px 1fr; }
  .news-item img { height: 160px; }

  
}

@media(max-width:991px){
  .header-wrap{height:auto;padding:10px 0}
  .nav-toggle{display:block}
  .site-nav{display:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:flex-start;padding:10px}
  .hero{height:220px}
  .hero-carousel{height:300px}
  .carousel-prev,.carousel-next{padding:8px 12px;font-size:16px}
  .grid{grid-template-columns:repeat(2,1fr); gap: 10px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .about-bg-split .bg-item.left{min-height:180px}
  .about-content{padding:20px}
  .news-item{grid-template-columns:1fr}
  .product-detail{grid-template-columns:1fr}
  .contact-card{grid-template-columns:1fr}
  .tabs{justify-content:center;margin-top:30px}
  .tabs a{padding:10px 20px;flex:1;text-align:center}

}

@media(max-width:768px){
  
}
@media(max-width:480px){
  .grid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .hero-carousel{height:240px}
}
@media(max-width:414px){
  .hero{height:200px}
  .hero-carousel{height:260px}
}
@media(max-width:320px){
  .hero{height:160px}
}

.site-header a,.site-header button{touch-action:manipulation}

/* News Navigation */
.text-white{color:#fff!important}
.search-empty{text-align:center;padding:40px}
.search-thumb{background:#fff;display:flex;align-items:center;justify-content:center}
.search-thumb img{height:100%;width:100%;object-fit:cover}
.tag-badge{font-size:12px;color:#fff;padding:2px 6px;border-radius:4px;vertical-align:middle;margin-right:6px}
.tag-product{background:#1b3b6b}
.tag-news{background:#3d7bd6}
.tag-page{background:#6b8fb3}
.search-date{color:#999;font-size:13px;margin:5px 0}
.news-nav {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  margin: 30px 0;
  color: #666;
  font-size: 14px;
}
.news-nav .nav-item {
  display: flex;
  gap: 8px;
}
.news-nav a {
  color: #333;
}
.news-nav a:hover {
  color: #1b3b6b;
  text-decoration: underline;
}

/* Recommended News */
.recommend-news {
  margin-top: 40px;
  margin-bottom: 60px; /* Added margin-bottom to increase distance from footer */
}
.recommend-news .sec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 2px solid #1b3b6b;
  padding-bottom: 10px;
}
.recommend-news .sec-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1b3b6b;
}
.recommend-news .more {
  font-size: 13px;
  color: #888;
}
.recommend-news .news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.recommend-news .news-card {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: transform .3s, box-shadow .3s;
}
.recommend-news .news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.recommend-news .news-card .thumb {
  height: 180px;
  overflow: hidden;
  display: block;
}
.recommend-news .news-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.recommend-news .news-card:hover .thumb img {
  transform: scale(1.05);
}
.recommend-news .news-card .content {
  padding: 15px;
}
.recommend-news .news-card h4 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.4;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.recommend-news .news-card .meta {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}
.recommend-news .news-card p {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.6;
  height: 42px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media(max-width: 768px){
  .news-nav {
    flex-direction: column;
    gap: 15px;
  }
  .recommend-news .news-grid {
    grid-template-columns: 1fr;
  }
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
  transition: all 0.3s;
}
.pagination a:hover {
  border-color: #1b3b6b;
  color: #1b3b6b;
}
.pagination .active {
  background: #1b3b6b;
  color: #fff;
  border-color: #1b3b6b;
}
.pagination .disabled {
  color: #ccc;
  pointer-events: none;
}
 /* Search Bar */
.search-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:10px 6px;color:#1b3b6b}
.search-bar{background:#fff;border-top:1px solid #eee;overflow:hidden;height:0;transition:height .3s ease-in-out}
.search-bar.open{height:70px}
.search-bar form{display:flex;align-items:center;height:100%;gap:10px}
.search-bar input{flex:1;padding:10px 14px;border:1px solid #ddd;border-radius:4px;outline:none;font-size:16px}
.search-bar input:focus{border-color:#1b3b6b}
.search-bar button[type="submit"]{background:#1b3b6b;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer}
.search-bar .close-search{background:none;border:none;font-size:24px;color:#666;cursor:pointer;padding:0 10px}

/* New Contact Section */
.contact-section {
  background-color: #fff;
  padding-bottom: 60px;
}

.search-page{margin-bottom:80px}

.contact-card-design {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.cc-left {
  flex: 1;
  min-height: 400px;
  position: relative;
  overflow: hidden;
}

.cc-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.contact-card-design:hover .cc-left img {
  transform: scale(1.05);
}

.cc-right {
  flex: 1;
  background-color: #19254e;
  color: var(--text-white);
  position: relative;
  display: flex;
  flex-direction: column;
}

.cc-header {
  margin-top: 40px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.cc-brand {
  background-color: #fff;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  padding: 12px 50px 12px 30px;
  display: inline-block;
  /* Trapezoid shape */
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  position: relative;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
}

.cc-body {
  padding: 0 25px 40px 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
}

.cc-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
}

.cc-item {
  color: var(--text-gray);
  display: flex;
  align-items: center;
}

.cc-label {
  color: #888;
  min-width: 60px;
  display: inline-block;
}

.cc-qr {
  width: 120px;
  height: 120px;
  background-color: #fff;
  border-radius: 6px;
  flex-shrink: 0;
  margin-left: 20px;
  position: relative;
  padding: 5px; /* Add padding for white border effect */
}

.cc-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Removed placeholder ::after */

/* Responsive */
@media (max-width: 768px) {
  .contact-card-design {
    flex-direction: column;
  }
  .cc-left {
    min-height: 250px;
  }
  .cc-header {
    margin-top: 20px;
  }
  .cc-body {
    padding: 0 20px 30px;
    flex-direction: column;
    gap: 20px;
  }
  .cc-qr {
    margin-left: 0;
    align-self: flex-start;
  }
}

/* Download Table */
.download-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  margin-top: 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
}
.download-table th, .download-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
  color: #555;
  font-size: 14px;
}
.download-table th {
  background-color: #f5f7fb;
  font-weight: 500;
  color: #333;
}
.download-table tr:hover td {
  background-color: #fafafa;
}
.download-table .col-title {
  width: 50%;
}
.download-table .col-size {
  width: 15%;
}
.download-table .col-date {
  width: 20%;
  color: #999;
}
.download-table .col-action {
  width: 15%;
  text-align: right;
}
.btn-download {
  display: inline-block;
  padding: 6px 16px;
  background-color: #1b3b6b;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 13px;
  transition: background-color 0.2s;
}
.btn-download:hover {
  background-color: #3d7bd6;
  color: #fff;
}


/* Homepage News UI Update */
.news-grid .news-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  transition: all 0.3s ease;
}
.news-grid .news-card a {
  display: block;
  text-decoration: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.news-grid .news-card .thumb {
  aspect-ratio: 4/3;
  border-radius: 0;
  overflow: hidden;
  background: #f4f6f8;
}
.news-grid .news-card .thumb img {
  transition: transform 0.5s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-grid .news-card:hover .thumb img {
  transform: scale(1.05);
}
.news-grid .news-card .content {
  background: #fff;
  padding: 24px;
  position: relative;
  transition: background-color 0.3s ease;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
}
.news-grid .news-card .title {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.5;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
  font-weight: 400;
}
.news-grid .news-card .date {
  font-size: 14px;
  color: #999;
  transition: color 0.3s ease;
  margin-top: auto;
}
.news-grid .news-card .arrow-icon {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #1b3b6b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.news-grid .news-card .arrow-icon svg {
  width: 16px;
  height: 16px;
  color: #fff;
  transition: color 0.3s ease;
}

/* News Card Hover State */
.news-grid .news-card:hover .content {
  background-color: #1b3b6b;
}
.news-grid .news-card:hover .title {
  color: #fff;
}
.news-grid .news-card:hover .date {
  color: rgba(255,255,255,0.7);
}
.news-grid .news-card:hover .arrow-icon {
  background-color: #fff;
}
.news-grid .news-card:hover .arrow-icon svg {
  color: #1b3b6b;
}

/* Product Card Customization */
.products-grid .product-card .thumb {
  overflow: hidden;
}
.products-grid .product-card .thumb img {
  transition: transform 0.5s ease;
}
.products-grid .product-card:hover .thumb img {
  transform: scale(1.05);
}

@media (max-width: 767px) {
  .home-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .home-products-grid .product-card {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
  }
  .home-products-grid .product-card .thumb {
    border-radius: 8px; /* Mobile rounded corners */
  }
  .home-products-grid .product-card .content {
    padding: 12px 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .home-products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

@media (min-width: 768px) {
  .home-products-grid .product-card .thumb {
    border-radius: 8px; /* Sync PC style with mobile */
    overflow: hidden;
  }
  /* Sync text box style with mobile (remove borders/shadows/bg) */
  .home-products-grid .product-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .home-products-grid .product-card .content {
    padding: 12px 0;
  }
}