/* The same original logo, sized for each tool's own layout. */
.hm-tool-logo {
  --hm-logo-size: 48px;
  display: block !important;
  flex: 0 0 auto !important;
  width: var(--hm-logo-size) !important;
  height: var(--hm-logo-size) !important;
  max-width: none !important;
  padding: 0 !important;
  border: 1px solid rgba(242, 185, 75, .58) !important;
  border-radius: 50% !important;
  background: #07121f !important;
  object-fit: contain !important;
  object-position: center !important;
  box-shadow: 0 4px 14px rgba(7, 18, 31, .18);
}
.hm-tool-logo--hero { --hm-logo-size: 64px; }
.hm-tool-logo--small { --hm-logo-size: 32px; }
.hm-tool-logo--certificate { --hm-logo-size: 78px; }
.hm-head-logo .hm-tool-logo,
.header > .hm-tool-logo { margin-inline: auto; }
[data-hm-tools-offset-header] {
  top: var(--hm-tools-hub-height, 60px) !important;
}
.tool-showcase-image::before {
  content: "";
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(242, 185, 75, .7);
  border-radius: 50%;
  background: #07121f url("https://hazemmousa852-dot.github.io/marjaak-alqanuni/brand/logo-512.png") center / contain no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  pointer-events: none;
}
@media (max-width: 640px) {
  .hm-tool-logo { --hm-logo-size: 42px; }
  .hm-tool-logo--hero { --hm-logo-size: 56px; }
  .hm-tool-logo--small { --hm-logo-size: 32px; }
  .hm-tool-logo--certificate { --hm-logo-size: 78px; }
  .tool-showcase-image::before {
    top: 10px;
    inset-inline-start: 10px;
    width: 38px;
    height: 38px;
  }
}
@media print {
  [data-hm-tools-offset-header] { top: 0 !important; }
  .hm-tool-logo { box-shadow: none; }
}