/* Grid: tighter, more cinematic spacing */
.capabilities-boxes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  padding-block:10px;
  perspective:1000px; /* slight 3D tilt on hover */
}

/* Card: glass panel with animated halo border */
.cap-box{
  position:relative;
  isolation:isolate;
  border-radius:16px;
  padding:22px 18px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) /* glass skin */;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 10px 24px rgba(2,6,23,.10),
    inset 0 1px 0 rgba(255,255,255,.25);
  transform-style:preserve-3d;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  overflow:hidden;
}

/* Subtle scanline sheen */
.cap-box::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient( to bottom, rgba(255,255,255,.04), rgba(255,255,255,0) );
  pointer-events:none;
  mix-blend-mode:screen;
}

/* Animated chroma border (masked) */
.cap-box::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  background: conic-gradient(
    from 0deg,
    var(--chroma, #7dd3fc) 0deg,
    #a78bfa 90deg,
    #60a5fa 180deg,
    #34d399 270deg,
    var(--chroma, #7dd3fc) 360deg
  );
  filter:blur(10px) saturate(120%);
  opacity:.25;
  z-index:-1;
  animation: spinBorder 6s linear infinite;
  /* Mask so only the rim glows */
  -webkit-mask:
    radial-gradient(closest-side, transparent calc(100% - 3px), #000 100%);
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 100%);
}

@keyframes spinBorder { to { transform: rotate(360deg); } }

/* ===== Capabilities Box Title vs Text ===== */
.cap-box h3 {
  margin: 0 0 14px;            /* more bottom space */
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  position: relative;
}

/* Optional underline accent below heading */
.cap-box h3::after {
  content: "";
  display: block;
  width: 40px;                /* underline length */
  height: 3px;
  border-radius: 2px;
  margin-top: 6px;
  background: var(--chroma, #031016); /* matches category glow */
}

/* Paragraph: lighter, softer contrast */
.cap-box p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
}

/* Icon chip (optional, place an <img> or <svg>) */
.cap-box .chip{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; margin-bottom:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

/* Hover: gentle lift + tilt + brighter glow */
.cap-box:hover{
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow:
    0 18px 40px rgba(2,6,23,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
}
@media (prefers-reduced-motion: reduce){
  .cap-box, .cap-box::before{ animation:none; transition:none; }
}

/* Different accent colors */
.cap-box.manufacturer { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.cap-box.contract { background: linear-gradient(135deg, #f7971e, #ffd200); }
.cap-box.exporters { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.cap-box.nutraceutical { background: linear-gradient(135deg, #667db6, #0082c8); }
.cap-box.ayurvedic { background: linear-gradient(135deg, #56ab2f, #a8e063); }
.cap-box.cosmetic { background: linear-gradient(135deg, #ff6a00, #ee0979); }
.cap-box.private { background: linear-gradient(135deg, #7f00ff, #e100ff); }
.cap-box.thirdparty { background: linear-gradient(135deg, #2e7261, #198a28); }


/* Optional: tighter grid on very wide screens */
@media(min-width:1300px){
  .capabilities-boxes{ grid-template-columns:repeat(4, minmax(260px, 1fr)); }
}


/* Center align section headings */
.container-fluid h2 {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 700;
  color: #07256c;
}

.number-item {
  position: relative;
}

.number-item img {
  border-radius: 6px;
  width: 100%;
  height: auto;
}

/* Ensure all 4 items stay in one row */
.numbers {
  display: flex;
  justify-content: center;
  gap: 20px; /* space between items */
  flex-wrap: nowrap; /* prevent wrapping */
}


.number-item .absolute-tl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.number-item h1,

.number-item h5 {
  color: #fff;
}


.numbers-section{ padding:60px 20px; background: var(--green-1); }

.numbers-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:24px;
}
@media (max-width: 991.98px){ .numbers-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px){ .numbers-grid{ grid-template-columns: 1fr; } }

.number-box {
  background: var(--green-1);   /* soft shade */
  border-radius: 12px;
  padding: 30px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform 0.3s ease;

  /* Center content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;   /* center the text */
  height: 100%;
}

.number-box:hover {
  transform: translateY(-6px);
}

.number-box h1 {
  font-size: 2rem;
  color: #065f46; /* deep green */
  margin-bottom: 10px;
  font-weight: 700;
}

.number-box h5 {
  font-size: 1rem;
  color: #065f46;
  margin: 0;
}