:root{
  --navy:#061a3d;
  --navy-2:#0b2f69;
  --blue:#2475ff;
  --blue-2:#65a8ff;
  --green:#169653;
  --red:#d33c45;
  --gold:#d7af52;
  --ink:#0a214d;
  --muted:#6e7f99;
  --surface:#ffffff;
  --soft:#f4f7fb;
  --line:#dce5f1;
  --certificate:#fbf4e5;
  --shadow:0 24px 70px rgba(2,16,45,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:"Poppins",sans-serif;
  color:#eaf2ff;
  background:
    radial-gradient(circle at 12% 10%,rgba(44,111,255,.22),transparent 26%),
    radial-gradient(circle at 90% 4%,rgba(85,148,255,.14),transparent 22%),
    linear-gradient(135deg,#020d25,#082253 52%,#020b1d);
  overflow-x:hidden;
}

button,input{font:inherit}
button{cursor:pointer}

.ambient-grid{
  position:fixed;
  inset:0;
  opacity:.22;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
}

.shell{
  width:min(1180px,calc(100% - 28px));
  margin-inline:auto;
  position:relative;
  z-index:1;
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(3,16,43,.84);
  backdrop-filter:blur(16px);
}

.header-inner{
  width:min(1240px,calc(100% - 28px));
  min-height:78px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:11px;
  color:#fff;
  text-decoration:none;
}

.brand-mark{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:12px;
  color:#071a3e;
  font-family:Georgia,serif;
  font-size:26px;
  font-weight:900;
  background:linear-gradient(145deg,#f4d78a,#b78323);
  box-shadow:0 8px 24px rgba(218,174,73,.25);
}

.brand-mark.large{width:58px;height:58px;font-size:34px}

.brand-lockup strong,.loader-brand strong{
  display:block;
  font-family:Georgia,serif;
  letter-spacing:1.4px;
  font-size:20px;
}
.brand-lockup small,.loader-brand small{display:block;font-size:14px}

.main-nav{display:flex;gap:26px}
.main-nav a{
  position:relative;
  color:#d4e0f2;
  text-decoration:none;
  font-size:13px;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-13px;
  height:2px;
  transform:scaleX(0);
  background:#4c92ff;
  transition:.2s ease;
}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1)}

.lang-button{
  min-width:66px;height:40px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  color:#fff;
  background:rgba(255,255,255,.05);
}

.hero{
  padding:70px 0 32px;
  text-align:center;
}

.hero-kicker{
  display:inline-block;
  padding:7px 12px;
  border:1px solid rgba(102,161,255,.24);
  border-radius:999px;
  color:#7fb4ff;
  background:rgba(30,87,181,.14);
  font-size:11px;
  font-weight:700;
  letter-spacing:.9px;
  text-transform:uppercase;
  animation:fadeUp .7s ease both;
}

.hero h1{
  max-width:860px;
  margin:18px auto 12px;
  font-size:clamp(34px,6vw,68px);
  line-height:1.05;
  letter-spacing:-2.8px;
  animation:fadeUp .7s .08s ease both;
}

.hero p{
  max-width:720px;
  margin:auto;
  color:#b9c7dc;
  font-size:clamp(14px,1.6vw,18px);
  line-height:1.8;
  animation:fadeUp .7s .16s ease both;
}

.search-card{
  margin-top:30px;
  padding:22px;
  text-align:left;
  border:1px solid rgba(103,155,255,.3);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(14,52,118,.84),rgba(3,18,49,.9));
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
  animation:fadeUp .7s .24s ease both;
}

.search-card label{
  display:block;
  margin:0 0 10px;
  color:#9fc3ff;
  font-size:12px;
  font-weight:700;
}

.search-row{display:flex;gap:12px}

.input-shell{position:relative;flex:1}
.input-shell svg{
  position:absolute;
  left:19px;top:50%;
  width:23px;height:23px;
  transform:translateY(-50%);
  fill:none;stroke:#31558e;stroke-width:2;
}
.input-shell input{
  width:100%;
  height:66px;
  border:0;
  outline:0;
  border-radius:14px;
  padding:0 18px 0 58px;
  color:#09204d;
  background:#fff;
  font-size:15px;
  font-weight:600;
}
.input-shell input:focus{box-shadow:0 0 0 4px rgba(63,137,255,.2)}

.primary-button{
  min-width:210px;
  border:0;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,#1768ff,#2d88ff);
  box-shadow:0 14px 34px rgba(36,117,255,.27);
  font-weight:700;
  transition:.2s ease;
}
.primary-button:hover{transform:translateY(-2px);filter:brightness(1.05)}
.primary-button:disabled{opacity:.65;cursor:not-allowed;transform:none}

.search-hint{
  margin:12px 0 0;
  text-align:center;
  color:#b9c7dc;
  font-size:11px;
}

.result-area{padding-bottom:34px}

.result-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:18px;
  color:var(--ink);
  animation:cardIn .5s ease both;
}

.verification-column{
  overflow:hidden;
  border-radius:22px;
  background:#f7f9fc;
  border:1px solid rgba(108,148,210,.34);
  box-shadow:var(--shadow);
}

.success-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.success-left{display:flex;align-items:center;gap:14px}
.success-icon{
  width:54px;height:54px;flex:0 0 54px;
  display:grid;place-items:center;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(145deg,#1aa45d,#087e43);
  box-shadow:0 14px 30px rgba(21,150,83,.22);
  animation:pop .45s ease both;
}
.success-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.5}

.success-banner h2{margin:0 0 3px;color:#0e7c3f;font-size:20px}
.success-banner p{margin:0;color:var(--muted);font-size:12px}
.status-pill{
  padding:8px 13px;
  border-radius:999px;
  color:#06743b;
  background:#dcf8e8;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.status-pill.expired{color:#8a5700;background:#fef3c7}
.status-pill.revoked,.status-pill.invalid{color:#9f1c1c;background:#fee2e2}

.certificate-panel{padding:14px}
.certificate-shell{
  position:relative;
  width:100%;
  aspect-ratio:2048/1448;
  overflow:hidden;
  border:1px solid #dccda9;
  border-radius:14px;
  background:var(--certificate);
  box-shadow:0 15px 38px rgba(18,43,82,.12);
  cursor:zoom-in;
  container-type:inline-size;
}
.certificate-shell img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
}

.dynamic-cover{position:absolute;z-index:2;background:var(--certificate)}
.cover-name{left:18%;top:31.2%;width:64%;height:7.2%}
.cover-license{left:7.2%;top:39.1%;width:42%;height:5.1%}
.cover-program{left:15%;top:50.5%;width:70%;height:8.8%}
.cover-dates{left:28%;top:59.5%;width:44%;height:5.4%}
.cover-accreditation{left:7%;top:65%;width:62%;height:5.5%}
.cover-cpd{left:72%;top:65%;width:24%;height:5.5%}
.cover-serial{left:49%;top:92.6%;width:48%;height:4.7%}

.certificate-text{
  position:absolute;z-index:3;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
  line-height:1.12;
  color:#2d1205;
}
.cert-name{
  left:18%;top:31.2%;width:64%;height:7.2%;
  color:#8b0909;
  font-family:Georgia,"Times New Roman",serif;
  font-size:3.2cqw;
  font-weight:700;
  white-space:nowrap;
}
.cert-license{
  left:7.2%;top:39.1%;width:42%;height:5.1%;
  justify-content:flex-start;
  font-size:1.85cqw;font-weight:800;
  text-transform:uppercase;
}
.cert-program{
  left:15%;top:50.5%;width:70%;height:8.8%;
  font-size:3.65cqw;font-weight:800;
  text-transform:uppercase;
  padding:0 1%;
}
.cert-dates{
  left:28%;top:59.5%;width:44%;height:5.4%;
  font-size:1.8cqw;font-weight:700;
}
.cert-accreditation{
  left:7%;top:65%;width:62%;height:5.5%;
  justify-content:flex-start;
  font-size:1.75cqw;font-weight:700;
}
.cert-cpd{
  left:72%;top:65%;width:24%;height:5.5%;
  justify-content:flex-start;
  font-size:1.75cqw;font-weight:700;
}
.cert-serial{
  left:49%;top:92.6%;width:48%;height:4.7%;
  justify-content:flex-end;
  padding-right:1%;
  font-size:1.55cqw;font-weight:800;
  text-transform:uppercase;
  white-space:nowrap;
}

.action-bar{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:0 14px 14px;
}
.action-button{
  min-height:54px;
  border:1px solid #d7e1ee;
  border-radius:12px;
  color:#12376e;
  background:#fff;
  font-size:12px;
  font-weight:700;
  transition:.18s ease;
}
.action-button:hover{transform:translateY(-1px);background:#eef5ff;border-color:#a8c6f7}

.side-column{display:grid;gap:14px}
.side-card{
  padding:18px;
  border:1px solid rgba(108,148,210,.34);
  border-radius:18px;
  color:var(--ink);
  background:#fff;
  box-shadow:0 16px 42px rgba(2,16,45,.12);
}
.side-card h3{margin:0 0 14px;font-size:14px;color:#082d6d}
.detail-list{display:grid;gap:12px}
.detail-item{display:grid;grid-template-columns:22px 1fr;gap:10px}
.detail-dot{
  width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:7px;
  color:#1b5ebd;
  background:#edf4ff;
  font-size:11px;
}
.detail-item small{display:block;color:#7a899f;font-size:9px}
.detail-item strong{display:block;margin-top:2px;color:#0c2756;font-size:11px;overflow-wrap:anywhere}

.qr-frame{
  width:214px;
  margin:0 auto 10px;
  padding:12px;
  border:1px solid #dbe5f1;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 30px rgba(27,79,155,.1);
}
#qrCode{width:188px;min-height:188px;margin:auto}
#qrCode img,#qrCode canvas{display:block;max-width:100%}
.qr-caption{text-align:center;color:#708098;font-size:10px;line-height:1.5}
.copy-button{
  width:100%;height:42px;
  margin-top:10px;
  border:1px solid #d7e1ee;
  border-radius:10px;
  color:#12376e;
  background:#f8fafc;
  font-size:11px;font-weight:700;
}

.not-found-card{
  display:grid;
  grid-template-columns:360px 1fr;
  overflow:hidden;
  border-radius:22px;
  color:#fff;
  background:linear-gradient(145deg,#082b63,#031530);
  border:1px solid rgba(94,146,241,.28);
  box-shadow:var(--shadow);
  animation:cardIn .5s ease both;
}
.not-found-left{
  padding:30px;
  text-align:center;
  background:linear-gradient(145deg,rgba(13,57,124,.92),rgba(4,22,52,.96));
}
.not-found-icon{
  width:68px;height:68px;
  margin:0 auto 16px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#d83c45;
  box-shadow:0 16px 34px rgba(216,60,69,.25);
  font-size:34px;
}
.not-found-left h2{margin:0 0 10px}
.not-found-left p{margin:0;color:#c2cee0;font-size:12px;line-height:1.7}
.not-found-actions{display:grid;gap:10px;margin-top:20px}
.not-found-actions a,.not-found-actions button{
  min-height:48px;
  border:0;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  font-size:12px;font-weight:700;
}
.whatsapp-button{background:linear-gradient(135deg,#0d8950,#09643c)}
.programs-button{background:linear-gradient(135deg,#1768ff,#2d88ff)}
.search-again-button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)!important}

.not-found-right{
  padding:34px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 80% 20%,rgba(68,133,255,.18),transparent 28%),
    linear-gradient(145deg,#f9fbff,#eef4fb);
  color:var(--ink);
}
.not-found-right h3{margin:0 0 10px;color:#0b2b62;font-size:26px}
.not-found-right p{margin:0;color:#657691;font-size:14px;line-height:1.8}
.early-message{
  margin-top:18px;
  padding:16px;
  border:1px solid #d8e5f7;
  border-radius:14px;
  color:#32547f;
  background:#edf5ff;
  font-size:13px;
  line-height:1.7;
}

.info-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:0 0 50px;
}
.info-strip article{
  display:flex;gap:12px;
  padding:18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:rgba(255,255,255,.04);
}
.info-icon{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  border-radius:10px;
  color:#69a7ff;
  background:rgba(42,112,224,.17);
}
.info-strip h2{margin:0 0 4px;font-size:13px}
.info-strip p{margin:0;color:#aebed4;font-size:10px;line-height:1.6}

.site-footer{
  position:relative;z-index:1;
  border-top:1px solid rgba(255,255,255,.08);
  background:#03132f;
}
.footer-inner{
  width:min(1240px,calc(100% - 28px));
  min-height:74px;margin:auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  color:#9fb0c8;font-size:10px;
}
.footer-inner a{color:#fff;text-decoration:none}

.loading-overlay{
  position:fixed;inset:0;z-index:50;
  display:none;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(1,8,24,.88);
  backdrop-filter:blur(14px);
}
.loading-overlay.show{display:flex}
.loading-panel{
  width:min(430px,94vw);
  padding:30px 26px;
  text-align:center;
  border:1px solid rgba(98,152,255,.25);
  border-radius:24px;
  background:linear-gradient(145deg,#0a3476,#031631);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  animation:cardIn .3s ease both;
}
.loader-brand{
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.loader-brand div{text-align:left}
.loader-orbit{
  width:96px;height:96px;
  margin:24px auto 18px;
  position:relative;
  display:grid;place-items:center;
  border-radius:50%;
}
.loader-orbit::before,.loader-orbit::after{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  border:4px solid transparent;
  border-top-color:#4b9cff;
  animation:spin 1s linear infinite;
}
.loader-orbit::after{
  inset:13px;
  border-top-color:#fff;
  animation-duration:.7s;
  animation-direction:reverse;
}
.loader-orbit span{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#2475ff;
  font-size:21px;font-weight:800;
  box-shadow:0 0 30px rgba(36,117,255,.55);
}
.loading-panel h2{margin:0 0 7px}
.loading-panel p{margin:0;color:#bdcbe0;font-size:12px;line-height:1.7}
.progress-track{
  height:9px;margin:22px 0 12px;
  overflow:hidden;border-radius:999px;background:#143f7a;
}
.progress-track span{
  display:block;width:72%;height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2475ff,#72b1ff);
  animation:progress 1.4s ease-in-out infinite alternate;
}
.loading-steps{display:flex;justify-content:space-between;color:#96a8c4;font-size:9px}

.preview-modal{
  position:fixed;inset:0;z-index:45;
  display:none;align-items:center;justify-content:center;
  padding:12px;
  background:rgba(1,7,20,.94);
  backdrop-filter:blur(10px);
}
.preview-modal.show{display:flex}
.preview-dialog{
  width:min(1500px,99vw);
  max-height:97vh;
  overflow:auto;
  border-radius:16px;
  background:#fff;
  box-shadow:0 35px 120px rgba(0,0,0,.6);
}
.preview-toolbar{
  position:sticky;top:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.preview-toolbar button{
  width:38px;height:36px;
  border:1px solid #d8e2ef;
  border-radius:9px;
  color:#12376e;
  background:#f5f8fc;
}
.modal-canvas{
  min-height:60vh;
  padding:12px;
  overflow:auto;
  background:#e9eef6;
  touch-action:pan-x pan-y pinch-zoom;
}
.modal-canvas .certificate-shell{
  width:min(1400px,100%);
  margin:auto;
  transform-origin:top center;
  cursor:default;
}

.pdf-render-target{
  position:fixed;
  left:-10000px;
  top:0;
  width:2048px;
  height:1448px;
  container-type:inline-size;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px);filter:blur(5px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(16px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes pop{
  0%{transform:scale(.6);opacity:0}
  75%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes progress{from{width:25%}to{width:88%}}

.cert-name.long-text{font-size:2.65cqw}
.cert-program.long-text{font-size:2.95cqw}


/* V9 — Highfield Egypt official wordmark */
.wordmark-lockup{
  min-width:214px;
}

.wordmark{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  color:#fff;
  line-height:1;
  white-space:nowrap;
}

.wordmark strong{
  display:block;
  font-family:Arial,Helvetica,sans-serif;
  font-size:29px;
  font-weight:800;
  letter-spacing:1.9px;
  line-height:.95;
}

.wordmark small{
  display:block;
  margin-top:8px;
  padding-right:2px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:9.2px;
  line-height:1;
}

.loader-wordmark{
  align-items:center;
}

.loader-wordmark strong{
  font-size:31px;
}

.loader-wordmark small{
  padding-right:0;
  margin-left:8px;
}

/* Better headline readability on large screens */
.hero h1{
  max-width:1030px;
  font-size:clamp(38px,5.2vw,66px);
  line-height:1.12;
  letter-spacing:-1.15px;
  word-spacing:2px;
  text-wrap:balance;
}

.hero p{
  max-width:760px;
  letter-spacing:.05px;
}

.search-card{
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
}

@media(min-width:1200px){
  .hero{
    padding-top:72px;
  }

  .hero h1{
    font-size:64px;
    line-height:1.13;
    letter-spacing:-1px;
  }
}


/* =========================================================
   V10 — Verification Results Experience
   ========================================================= */

.result-area:empty{display:none}

.verification-column{
  position:relative;
  isolation:isolate;
}

.verification-column::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%,rgba(36,117,255,.09),transparent 24%),
    radial-gradient(circle at 92% 75%,rgba(22,150,83,.08),transparent 24%);
  z-index:-1;
}

.success-banner{
  position:relative;
  overflow:hidden;
}

.success-banner::after{
  content:"";
  position:absolute;
  top:-80px;
  left:-120px;
  width:260px;
  height:220px;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:successShine 1.4s .25s ease both;
}

.success-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
  color:#7a899f;
  font-size:10px;
}

.verified-time{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.certificate-holder-line{
  margin-top:6px;
  color:#1b3a67;
  font-size:11px;
  font-weight:700;
}

.side-card.highlight-card{
  background:
    radial-gradient(circle at 90% 10%,rgba(36,117,255,.10),transparent 28%),
    #fff;
}

.detail-section-title{
  margin:18px 0 10px;
  padding-top:14px;
  border-top:1px solid #e7edf5;
  color:#557090;
  font-size:9px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.qr-wrap{
  position:relative;
  width:188px;
  height:188px;
  margin:auto;
}

.qr-center-mark{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:46px;
  height:46px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border:5px solid #fff;
  border-radius:13px;
  color:#fff;
  background:#071a3f;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  font-weight:900;
  letter-spacing:.5px;
}

.qr-security-line{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin:10px 0 0;
  color:#17643d;
  font-size:9px;
  font-weight:700;
}

.side-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}

.side-actions button{
  min-height:42px;
  border:1px solid #d7e1ee;
  border-radius:10px;
  color:#12376e;
  background:#f8fafc;
  font-size:10px;
  font-weight:700;
}

.verify-another{
  width:100%;
  min-height:46px;
  margin-top:10px;
  border:0;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(135deg,#0d356f,#1768ff);
  font-size:11px;
  font-weight:800;
}

.action-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.action-button .button-icon{
  font-size:17px;
  line-height:1;
}

.toast{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:100;
  min-width:220px;
  max-width:360px;
  padding:13px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#fff;
  background:#092252;
  box-shadow:0 18px 52px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:.24s ease;
  font-size:12px;
  font-weight:700;
}

.toast.show{
  opacity:1;
  transform:none;
}

.toast.success{background:#087e43}
.toast.error{background:#a32731}

.database-seal{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  padding:11px;
  border:1px solid #dbe8f7;
  border-radius:12px;
  color:#345679;
  background:#f3f8ff;
  font-size:9px;
  line-height:1.5;
}

.database-seal span:first-child{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#fff;
  background:#1768ff;
  font-size:15px;
  font-weight:900;
}

@keyframes successShine{
  from{transform:translateX(-150%) rotate(18deg);opacity:0}
  35%{opacity:.9}
  to{transform:translateX(700%) rotate(18deg);opacity:0}
}