/* Container + hero */
.cert-container{max-width:1200px;margin:0 auto;padding:0 20px}
.cert-hero{padding:80px 0 60px;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%)}
.cert-hero-title{font-size:48px;font-weight:700;color:#2c3e50;line-height:1.2;margin:0 0 20px}
.cert-hero-sub{font-size:18px;color:#6c757d;max-width:700px;margin:0 auto;line-height:1.6;text-align:center}

/* Section head */
.cert-grid-section{padding:60px 0;background:#fff}
.cert-section-head{text-align:center;margin-bottom:50px}
.cert-section-title{font-size:36px;font-weight:600;color:#2c3e50;margin:0 0 15px}
.cert-section-bar{width:80px;height:4px;background:linear-gradient(45deg,#007bff,#0056b3);margin:0 auto}

/* Grid */
.certs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:40px}
.certificate-item{background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.1);overflow:hidden;transition:transform .3s ease, box-shadow .3s ease;cursor:pointer;outline:none}
.certificate-item:focus,.certificate-item:hover{transform:translateY(-10px);box-shadow:0 15px 40px rgba(0,0,0,.15)}
.cert-thumb{aspect-ratio:3/4;background:#f8f9fa;position:relative;overflow:hidden}
.cert-img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.certificate-item:hover .cert-img{transform:scale(1.05)}
.cert-overlay{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff}
.cert-overlay h3{margin:0;font-size:18px;font-weight:600}

/* Stats */
.cert-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:12px;padding:40px;text-align:center}
.cert-stat .n{font-size:32px;font-weight:700;color:#2c3e50;margin-bottom:5px}
.cert-stat .l{font-size:14px;color:#6c757d}

/* Modal */
.cert-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:10000;align-items:center;justify-content:center;padding:20px}
.cert-frame{width:100%;max-width:900px;height:90vh;border:0;border-radius:8px;background:#fff}
.cert-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#000;cursor:pointer;font-size:24px;line-height:40px}

/* Responsive */
@media (max-width:992px){.certs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){
  .cert-hero{padding:60px 0}
  .cert-hero-title{font-size:32px}
  .cert-section-title{font-size:28px}
  .cert-stats{gap:20px}
}
@media (max-width:600px){.certs-grid{grid-template-columns:1fr}}
@media (max-width:480px){
  .cert-hero{padding:40px 0 30px}
  .cert-grid-section{padding:40px 0}
  .cert-stats{padding:20px}
  .cert-frame{height:80vh}
}
.cert-img{object-fit:contain;background:#fff}
.cert-thumb{display:flex;align-items:center;justify-content:center}
/* Stats card (matches the HTML export look) */
.cert-stats-wrap{padding:0 0 40px}
.cert-stats{
  background:#eef3f7;        /* soft grey like the export */
  border-radius:16px;
  padding:40px 30px;
  text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.06);
}
.cert-stats-title{
  margin:0 0 12px;
  font-size:28px;
  font-weight:700;
  color:#2c3e50;
}
.cert-stats-desc{
  margin:0 auto 24px;
  max-width:900px;
  color:#6c757d;
  line-height:1.7;
  font-size:16px;
}
.cert-stats-row{
  display:flex;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap;
}
.cert-stat .n{
  font-size:40px;
  font-weight:800;
  color:#2c3e50;
  line-height:1;
  margin-bottom:6px;
}
.cert-stat .l{
  font-size:14px;
  color:#6c757d;
}

/* responsive */
@media (max-width:768px){
  .cert-stats{padding:28px 20px}
  .cert-stats-title{font-size:22px}
  .cert-stats-desc{font-size:15px}
  .cert-stats-row{gap:28px}
  .cert-stat .n{font-size:32px}
}