/* Homepage specific styles */
.hero{height:60vh;min-height:420px;background-size:cover;background-position:center;display:flex;align-items:center;position:relative}
.hero .overlay{background:linear-gradient(180deg,rgba(3,6,12,0.35),rgba(3,6,12,0.15));width:100%;padding:56px 20px}
.hero h1{color:#fff;font-size:2.4rem;margin:0 0 12px}
.hero p{color:rgba(255,255,255,0.9);font-size:1.05rem;margin:0 0 18px}
.kv-icons{display:flex;gap:18px;margin-top:22px}
.kv{background:rgba(255,255,255,0.72);padding:18px;border-radius:12px;flex:1;box-shadow:0 8px 20px rgba(11,85,107,0.04);text-align:center}
.kv h3{margin:8px 0 4px;font-size:1.25rem;color:var(--accent)}

/* Counters */
.counters{display:flex;gap:18px;flex-wrap:wrap}
.counter{flex:1;background:#fff;padding:16px;border-radius:8px;text-align:center}
[data-target]{
  display:block;
  font-size:2.2rem;
  font-weight:800;
  color:var(--accent);
  margin-top:6px;
}

@media (max-width:900px){
  .kv-icons{flex-direction:column}
  .kv{width:76%;margin:0 auto}
  .hero{height:48vh}
  .hero h1{margin-top:0}
  .hero .btn-primary{display:block;width:max-content;margin:16px auto 0}
}

@media (max-width:480px){
  .hero .overlay{padding:28px 14px}
  .hero h1{font-size:1.6rem}
}


/* Mobile hero spacing: push content down under fixed header */
@media (max-width:640px){
  .hero{height:auto;min-height:0}
  /* By the Numbers: 2 columns on mobile */
  .counters{display:grid;grid-template-columns:repeat(2,1fr)}
  /* Hide hero arrow controls on small mobile screens only */
  .hero-arrow{display:none!important}
}

/* Hero carousel styles */
.hero-carousel{position:absolute;inset:0;overflow:hidden;border-bottom-left-radius:0;border-bottom-right-radius:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 0.7s ease,transform 0.7s ease;will-change:opacity,transform}
.hero-slide.active{opacity:1;z-index:0}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.35);color:#fff;border:0;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:26px;z-index:5}
.hero-arrow:hover{background:rgba(0,0,0,0.55)}
.hero-arrow-left{left:28px}
.hero-arrow-right{right:28px}

/* On mobile show mobile slides only; on desktop show pc slides only via JS too, but add CSS fallback */
.hero-slide[data-device="mobile"]{display:none}
@media (max-width:900px){
  .hero-slide[data-device="pc"]{display:none}
  .hero-slide[data-device="mobile"]{display:block}
}

/* Ensure overlay is above carousel */
.hero .overlay{position:relative;z-index:10}

/* Popular Products grid: 4 columns desktop, 2 on mobile */
.popular-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:900px){
  .popular-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .popular-grid{grid-template-columns:repeat(2,1fr)}
}

/* Make sure popular-grid product titles match product-card styling */
.popular-grid .product-card { text-decoration: none; color: inherit; display: block; }
.popular-grid .product-card .info { text-align: center; padding-top: 6px; }
.popular-grid .product-card .info h4 { margin: 0; color: #000; font-weight: 700; font-size: 0.95rem; text-decoration: none; }

/* Category header with title and More link (homepage) */
.category-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0;
  margin-top: 0;
}

.category-header h2 {
  margin: 0;
  font-size: 1.5rem;
}



@media (max-width: 768px) {
  .category-header h2 { font-size: 1.25rem; }
  .more-link { font-size: 1rem; }
}

.d_title {
  font-weight: 700;
  font-size: 1.2rem;
}

.hero_title {
  font-weight: 700;
  font-size: 1.2rem;
}
.index-service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:40px}
/* Ensure individual service links don't inherit the grid gap: stack image + info tightly */
.index-service-grid > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  gap: 6px; /* small gap between image and title */
}
.index-service-grid > a img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.index-service-grid > a .info {
  padding-top: 0; /* remove any extra internal padding */
  margin-top: 0;
}

/* Uppercase the titles and secondary titles inside the Our Services block */
.index-service-grid > a .info h4,
.index-service-grid > a .info .small {
  text-transform: uppercase;
}

/* Exhibition grid (used on About and Homepage) - 4 columns on desktop, 2 on smaller screens */
.exhibition-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:768px){
  .exhibition-grid{grid-template-columns:repeat(2,1fr)}
}