/* Certificate Page Styles */

/* Banner */
.zs-cert-banner-wrap { position: relative; width: 100%; overflow: hidden; display: block; line-height: 0; font-size: 0; }
.zs-cert-banner-img { width: 100%; height: auto; object-fit: cover; display: block; }
.zs-cert-banner-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; background: linear-gradient(to right, rgba(8, 46, 133, 0.7), transparent); line-height: 1.5; font-size: 16px; }
.zs-cert-banner-content .zs-container { width: 100%; }
.zs-cert-banner-text { max-width: 560px; color: var(--color-white); }
.zs-cert-banner-title { font-size: 46px; font-weight: bold; margin-bottom: 10px; animation: fadeInRight 1s ease-out; color: var(--color-white); }
.zs-cert-banner-desc p { font-size: 16px; line-height: 1.6; }

/* Breadcrumbs */
.zs-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-white); font-size: 14px; margin-top: 30px; }
.zs-breadcrumbs a { color: var(--color-white); text-decoration: none; }
.zs-breadcrumbs a:hover { color: var(--color-main); }
.zs-breadcrumb-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 5px; }
.zs-breadcrumbs .active { color: var(--color-white); }

/* Certifications Section */
.zs-certifications { padding: 60px 0; }
.zs-cert-header { display: flex; align-items: center; margin-bottom: 30px; }
.zs-cert-line { display: inline-block; width: 10px; height: 40px; background: var(--color-main); margin-right: 20px; }
.zs-cert-header h2 { font-size: 32px; color: var(--color-title); font-weight: bold; }

.zs-cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.zs-cert-grid-item { display: block; overflow: hidden; transition: transform 0.3s ease; }
.zs-cert-grid-item:hover { transform: translateY(-5px); }
.zs-cert-img-wrap { width: 100%; aspect-ratio: 32 / 45.2; overflow: hidden; border: 1px solid #eee; }
.zs-cert-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.zs-cert-grid-item:hover .zs-cert-img-wrap img { transform: scale(1.05); }

/* Animations */
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Lightbox Modal */
.zs-lightbox-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.zs-lightbox-modal.active { opacity: 1; visibility: visible; }
.zs-lightbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); cursor: pointer; }
.zs-lightbox-content { position: relative; max-width: 90%; max-height: 90vh; z-index: 10000; }
.zs-lightbox-content img { max-width: 100%; max-height: 90vh; display: block; border-radius: 4px; box-shadow: 0 5px 25px rgba(0,0,0,0.5); }
.zs-lightbox-close { position: absolute; top: -40px; right: -40px; color: white; font-size: 40px; cursor: pointer; transition: color 0.3s; line-height: 1; }
.zs-lightbox-close:hover { color: var(--color-main); }

/* Responsive adjustments */
@media (max-width: 992px) {
  .zs-cert-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .zs-cert-banner-title { font-size: 36px; }
}

@media (max-width: 768px) {
  .zs-cert-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .zs-cert-banner-content { background: rgba(8, 46, 133, 0.5); justify-content: center; text-align: center; }
  .zs-cert-banner-text { max-width: 100%; }
  .zs-breadcrumbs { justify-content: center; margin-top: 20px; }
  .zs-cert-banner-title { font-size: 28px; }
  .zs-cert-banner-desc p { font-size: 14px; }
  .zs-cert-header h2 { font-size: 24px; }
  .zs-cert-line { height: 30px; margin-right: 15px; }
  .zs-certifications { padding: 40px 0; }
}

@media (max-width: 576px) {
  .zs-cert-grid { grid-template-columns: 1fr; gap: 20px; }
  .zs-cert-banner-wrap { aspect-ratio: auto; min-height: 300px; }
  .zs-cert-banner-img { height: 100%; position: absolute; top: 0; left: 0; }
  .zs-lightbox-close { top: -35px; right: 0; }
}