/* Protelino promo banner -- injected at the top of every page (see inject-banner.py) */
@font-face{font-family:"PB Outfit";src:url("/protelino-banner/outfit-variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--pb-h:68px}
@media (max-width:767px){:root{--pb-h:76px}}

.pb{position:relative;z-index:1000;display:block;height:var(--pb-h);overflow:hidden;text-decoration:none!important;
  font-family:"PB Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff!important;
  background:
    radial-gradient(520px 180px at 12% 0%,rgba(94,234,212,.35),transparent 70%),
    radial-gradient(460px 160px at 92% 100%,rgba(251,191,36,.20),transparent 70%),
    linear-gradient(100deg,#042f2b 0%,#0f766e 55%,#0d9488 100%);
  box-shadow:0 2px 14px rgba(4,47,43,.35);border-bottom:1px solid rgba(255,255,255,.12)}
.pb:hover,.pb:focus{color:#fff!important;text-decoration:none!important}
.pb:focus-visible{outline:3px solid #fbbf24;outline-offset:-3px}
.pb *{box-sizing:border-box}
.pb__in{height:100%;max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:16px}

.pb__logo{flex:none;width:46px;height:46px;border-radius:12px;background:#fff;padding:0;overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.28),0 0 0 2px rgba(255,255,255,.35);transition:transform .25s ease}
.pb__logo img{display:block;width:100%;height:100%;object-fit:cover}
.pb:hover .pb__logo{transform:rotate(-6deg) scale(1.06)}

.pb__txt{min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.2}
.pb__title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:.2px}
.pb__new{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#451a03;
  background:linear-gradient(135deg,#fde68a,#fbbf24);padding:3px 9px;border-radius:20px}
.pb__sub{font-size:14.5px;font-weight:400;color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb__sub b{font-weight:600;color:#fff}

.pb__btn{flex:none;display:inline-flex;align-items:center;gap:8px;margin-left:8px;background:#fff;color:#0f766e;
  font-weight:700;font-size:15px;padding:10px 20px;border-radius:40px;box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .2s ease,box-shadow .2s ease,gap .2s ease}
.pb__btn svg{width:16px;height:16px;transition:transform .2s ease}
.pb:hover .pb__btn{transform:translateY(-1px);box-shadow:0 7px 18px rgba(0,0,0,.3)}
.pb:hover .pb__btn svg{transform:translateX(3px)}

/* sit the template's absolutely-positioned header under the banner instead of on top of it */
.header-area{top:var(--pb-h)!important}

@media (max-width:991px){.pb__sub .pb__more{display:none}}
@media (max-width:767px){
  .pb__in{padding:0 14px;gap:12px;justify-content:flex-start}
  .pb__logo{width:44px;height:44px;border-radius:11px}
  .pb__title{font-size:16.5px}
  .pb__new{display:none}
  .pb__sub{font-size:13px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pb__txt{flex:1}
  .pb__btn{margin-left:0;width:40px;height:40px;padding:0;justify-content:center}
  .pb__btn span{display:none}
  .pb__btn svg{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){.pb *{transition:none!important}}