/* --------------------------
   PREMIUM CERTIFICATE UI (White Background)
---------------------------*/

:root{
  --primary:#4f46e5;        
  --secondary:#7c3aed;      
  --accent:#3b82f6;         
  --glass:rgba(255,255,255,0.55);
  --glass-border:rgba(0,0,0,0.08);
  --card-radius:18px;
  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto;
  --shadow-lg:0 18px 40px rgba(0,0,0,0.10);
  --shadow-md:0 10px 25px rgba(0,0,0,0.06);
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--font);
  background:#ffffff;     /* WHITE BACKGROUND */
  color:#111;
  overflow-x:hidden;
}

/* --------------------------
   NAVBAR
---------------------------*/
.navbar.bg-gradient{
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  padding:14px 0;
  box-shadow:0 8px 28px rgba(0,0,0,0.18);
}

.nav-link{
  color:#f1f5f9!important;
  font-weight:500;
  transition:0.3s;
}
.nav-link:hover{
  color:white!important;
  transform:translateY(-2px);
}

/* Brand Badge */
.brand-badge{
  width:48px;height:48px;border-radius:12px;
  background:rgba(255,255,255,0.22);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:white;font-size:1.1rem;
  box-shadow:var(--shadow-md);
}

/* --------------------------
   HERO SECTION
---------------------------*/
.hero-section{
  padding:70px 0 45px;
  text-align:center;
}

.hero-card{
  background:var(--glass);
  padding:40px;
  border-radius:22px;
  border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);
  max-width:850px;
  margin:auto;
  box-shadow:var(--shadow-lg);
}

.hero-card h1{
  font-size:2.5rem;
  font-weight:800;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  -webkit-background-clip:text;
  color:transparent;
}

/* --------------------------
   CERTIFICATE CARD
---------------------------*/
.cert-card{
  background:white;
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:0.3s ease;
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.06);
 
}

.cert-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 48px rgba(0,0,0,0.14);
}

.cert-thumb{
  width:100%;
  height:230px;
  object-fit:cover;
  background:#f8fafc;
}

/* Text body */
.cert-body{padding:16px 18px;}
.cert-title{
  font-size:1.08rem;
  font-weight:700;
  color:#1e293b;
}
.cert-sub{
  font-size:0.88rem;
  color:#64748b;
  margin-top:6px;
}

/* --------------------------
   TAGS
---------------------------*/
.tag{
  background:#f1f5f9;
  padding:4px 12px;
  border-radius:999px;
  font-size:0.78rem;
  color:#1e293b;
  border:1px solid rgba(0,0,0,0.08);
  margin-right:6px;
}

/* Active filter button */
#tagButtons .btn.active{
  background:var(--primary);
  color:white;
  border:none;
}

/* --------------------------
   MODAL VIEWER
---------------------------*/
.modal-content{
  background:white;
  padding:0;
  border-radius:16px;
  border:none;
  box-shadow:var(--shadow-lg);
}

#viewerContent img, #viewerContent iframe{
  width:100%;
  height:100%;
  border-radius:16px;
}

/* --------------------------
   LOAD MORE BTN
---------------------------*/
#loadMoreBtn{
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  color:white;
  padding:12px 32px;
  font-weight:600;
  border-radius:999px;
  border:none;
  box-shadow:var(--shadow-md);
  transition:0.3s;
  background-image: url(https://i.pinimg.com/1200x/c7/e5/c3/c7e5c30ad1210439d29e3cc5d1ad5d58.jpg);
}

#loadMoreBtn:hover{
  transform:translateY(-3px);
  opacity:0.92;
}

/* --------------------------
   RESPONSIVE
---------------------------*/
@media(max-width:768px){
  .hero-card h1{font-size:2rem;}
  .cert-thumb{height:170px;}
}