:root{
  --bg:#0b1d46;
  --card:#ffffff;
  --ink:#0d1c47;
  --accent:#1b6ef3;
  --muted:#6b7280;
  --ok-bg:#ecfdf5; --ok-border:#a7f3d0; --ok-ink:#065f46;
  --bad-bg:#fef2f2; --bad-border:#fecaca; --bad-ink:#991b1b;
	--bs-card-border-radius: 1rem; }

.h5 {padding-top: 30px !important;}
.mb-3 {
    margin-bottom: 2rem !important;
}

.btn { border-radius: 2rem !important; padding: 0.6rem 1.4rem; }
/*    .navbar, .dropdown-menu { border-radius: 0 0 1rem 1rem; }*/
.ratio {
	border-radius: 1rem !important;
	overflow: hidden !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.25);
	  }
*{box-sizing:border-box}

/* HEAD STUFF */
div#site-header {
    padding: 0px 40px 0px 40px;
}
	.container-fluid {
    margin-left: 2%;
    margin-right: 2%;
}

section.container.my-5 {
    max-width: 1000px;
}

html, body { min-height: 100%; }
body {
display: flex;
flex-direction: column;
min-height: 100vh;
  margin:0;
  color:#111;
  background-image: linear-gradient(135deg, #0b1d46 0%, #1e3c72 100%);
  background-repeat: no-repeat;       /* don’t tile */
  background-attachment: scroll;      /* default; gradient moves with page */
  background-size: 100% 100%;         /* stretch one gradient across body */
}

.wrap{max-width:900px;margin:40px auto;padding:24px}
.card{
  background:var(--card);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:35px !important;
}

h1,h2{color:var(--ink);margin-top:0}
h1{margin-bottom:6px}
h2{margin-top:24px}
p{line-height:1.6}
ul{line-height:1.6;margin-left:22px}
.note{color:var(--muted);font-size:14px;margin-top:18px}
.btn{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:12px 20px;border-radius:12px;margin-top:24px;font-weight:600;
}
.btn:hover{opacity:.9}

/* FOOT STUFF */
footer.footer.mt-auto.py-3.bg-white.shadow-sm {
    border-radius: 30px 30px 0px 0px;
}

/* Responsive video */
.video-container{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin-top:20px;
  border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* Forms / quiz */
.field{margin:18px 0}
label{display:block;font-weight:600;margin-bottom:6px}
input[type="text"]{
  width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;font-size:16px
}
.q{margin:20px 0;padding:16px;border:1px solid #eef2ff;border-radius:12px}
.q h3{margin:0 0 10px}
.answers{display:grid;gap:10px}
.answers label{display:flex;gap:10px;align-items:flex-start;font-weight:500;cursor:pointer}
.actions{display:flex;gap:12px;margin-top:18px}
button{appearance:none;border:0;border-radius:12px;padding:12px 16px;font-size:16px;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-secondary{background:#e5e7eb;color:#111}

/* Results */
.result{padding:16px;border-radius:12px;margin-top:16px}
.result.pass{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-border)}
.result.fail{background:var(--bad-bg);color:var(--bad-ink);border:1px solid var(--bad-border)}

/* Certificate */
#certWrap{display:none;margin-top:22px}
.certificate{
  width:100%;
  max-width:820px;
  aspect-ratio:1.414/1; /* A4-ish ratio */
  background:#fff;
  border:10px solid #e5e7eb;            /* NEW thicker border */
  outline:1px solid #cbd5e1;            /* subtle second line for a framed look */
  border-radius:12px;
  padding:36px;
  position:relative;
  margin:0 auto;

  /* NEW: center everything nicely */
  display:flex;
  flex-direction:column;
}
.cert-head{
  display:flex;
  justify-content:center;               /* center the logo */
  align-items:center;
  margin-bottom:8px;
}
.cert-body{
  /* NEW: take remaining height and center vertically */
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;                /* true vertical centering */
  text-align:center;
  margin-top:4px;
}
.brand{display:none} /* not used now (logo instead) */
.course{display:none}/* remove subheading line */
.cert-title{font-size:28px;color:#111;font-weight:800;margin:6px 0}
.cert-name{font-size:24px;font-weight:700;margin:6px 0}
.cert-meta{margin-top:14px;color:#374151;max-width:80ch}
.cert-footer{
  /* Keep a little footer area for a signature if wanted */
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.sig img{height:42px;display:block}
.sig .label{font-size:12px;color:#374151;text-align:center;margin-top:6px}
.small{font-size:12px;color:#6b7280}

/* Print certificate only */
@media print{
  body{background:#fff}
  .wrap{margin:0;padding:0}
  .card{box-shadow:none;border:0;padding:0}
  .actions,.note,.site-header{display:none!important}
  #certWrap{display:block!important}
}


/* Certificate logo: keep aspect ratio, centered, not too big */
.certificate .cert-logo{
  display: block;
  margin: 0 auto 0.75rem;   /* center */
  width: auto !important;   /* undo any img { width:100% } */
  height: auto !important;  /* keep aspect ratio */
  max-width: 240px;         /* cap width (tweak to taste) */
  max-height: 70px;         /* cap height (tweak to taste) */
  object-fit: contain;      /* never distort if caps are hit */
}