.hero-banner{position:relative;display:flex;overflow:hidden;width:100%;height:var(--hero-height-desktop, 100vh);max-height:var(--hero-max-height-desktop, 1080px);margin-top:var(--hero-spacing-top, 0);margin-bottom:var(--hero-spacing-bottom, 0)}.hero-banner--full-width{width:100vw;margin-left:calc(-50vw + 50%)}.hero-banner__media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.hero-banner__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}.hero-banner--parallax .hero-banner__media{overflow:hidden}.hero-banner--parallax .hero-banner__img{will-change:transform;transform:translateZ(0) scale(1.1)}.hero-banner__placeholder{width:100%;height:100%;background-color:#1e293b;display:flex;align-items:center;justify-content:center}.hero-banner__placeholder-svg{width:60%;max-width:600px;opacity:.15}.hero-banner__overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-color:var(--hero-overlay-color, #000);opacity:var(--hero-overlay-opacity, .3);pointer-events:none}.hero-banner__gradient{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.hero-banner__gradient--bottom{background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.2) 40%,transparent 70%)}.hero-banner__gradient--top{background:linear-gradient(to bottom,rgba(0,0,0,.65) 0%,rgba(0,0,0,.2) 40%,transparent 70%)}.hero-banner__gradient--left{background:linear-gradient(to right,rgba(0,0,0,.65) 0%,rgba(0,0,0,.2) 40%,transparent 70%)}.hero-banner__gradient--right{background:linear-gradient(to left,rgba(0,0,0,.65) 0%,rgba(0,0,0,.2) 40%,transparent 70%)}.hero-banner__gradient--center{background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.5) 100%)}.hero-banner__container{position:relative;z-index:3;display:flex;width:100%;height:100%;padding:60px 40px;box-sizing:border-box}.hero-banner--align-left .hero-banner__container{justify-content:flex-start}.hero-banner--align-center .hero-banner__container{justify-content:center}.hero-banner--align-right .hero-banner__container{justify-content:flex-end}.hero-banner--valign-top .hero-banner__container{align-items:flex-start}.hero-banner--valign-center .hero-banner__container{align-items:center}.hero-banner--valign-bottom .hero-banner__container{align-items:flex-end}.hero-banner__content{display:flex;flex-direction:column;gap:var(--hero-content-gap, 16px);max-width:var(--hero-content-width, 800px);width:100%}.hero-banner__content--text-left{text-align:left;align-items:flex-start}.hero-banner__content--text-center{text-align:center;align-items:center}.hero-banner__content--text-right{text-align:right;align-items:flex-end}.hero-banner__subtitle{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--hero-heading-color, #fff);opacity:.85;background:#ffffff1a;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:6px 18px;border-radius:50px;border:1px solid rgba(255,255,255,.15)}.hero-banner__heading{font-size:var(--hero-heading-size-desktop, 64px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--hero-heading-color, #fff);margin:0;text-wrap:balance}.hero-banner__subheading{font-size:var(--hero-subheading-size-desktop, 18px);font-weight:400;line-height:1.6;color:var(--hero-subheading-color, rgba(255, 255, 255, .8));max-width:600px}.hero-banner__content--text-center .hero-banner__subheading{margin-left:auto;margin-right:auto}.hero-banner__subheading p{margin:0}.hero-banner__buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}.hero-banner__content--text-center .hero-banner__buttons{justify-content:center}.hero-banner__content--text-right .hero-banner__buttons{justify-content:flex-end}.hero-banner__btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;font-size:var(--hero-btn-size-desktop, 16px);font-weight:600;line-height:1;text-decoration:none;border-radius:var(--hero-btn-border-radius, 6px);transition:all .35s cubic-bezier(.25,.46,.45,.94);cursor:pointer;white-space:nowrap;position:relative;overflow:hidden}.hero-banner__btn--primary{background-color:var(--hero-btn-bg, #fff);color:var(--hero-btn-text, #000);border:2px solid var(--hero-btn-bg, #fff)}.hero-banner__btn--primary:hover,.hero-banner__btn--primary:focus-visible{background-color:var(--hero-btn-bg-hover, #f59e0b);color:var(--hero-btn-text-hover, #fff);border-color:var(--hero-btn-bg-hover, #f59e0b);transform:translateY(-2px);box-shadow:0 8px 25px #00000040}.hero-banner__btn--secondary{background-color:var(--hero-btn2-bg, transparent);color:var(--hero-btn2-text, #fff);border:2px solid var(--hero-btn2-text, #fff)}.hero-banner__btn--secondary:hover,.hero-banner__btn--secondary:focus-visible{background-color:var(--hero-btn2-bg-hover, #fff);color:var(--hero-btn2-text-hover, #000);border-color:var(--hero-btn2-bg-hover, #fff);transform:translateY(-2px);box-shadow:0 8px 25px #00000040}.hero-banner__btn-arrow{width:18px;height:18px;transition:transform .3s ease;flex-shrink:0}.hero-banner__btn:hover .hero-banner__btn-arrow{transform:translate(4px)}.hero-banner__btn:focus-visible{outline:3px solid #fff;outline-offset:3px}.hero-banner__scroll-indicator{position:absolute;bottom:28px;left:50%;transform:translate(-50%);z-index:5;display:flex;flex-direction:column;align-items:center}.hero-banner__scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,rgba(255,255,255,.6),transparent);animation:hero-scroll-pulse 2s ease-in-out infinite;position:relative}.hero-banner__scroll-line:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:3px;height:3px;border-radius:50%;background:#fff;animation:hero-scroll-dot 2s ease-in-out infinite}@keyframes hero-scroll-pulse{0%,to{opacity:.4}50%{opacity:1}}@keyframes hero-scroll-dot{0%{top:0;opacity:1}to{top:100%;opacity:0}}.hero-anim--fade-up{animation:heroFadeUp .8s cubic-bezier(.25,.46,.45,.94) both}.hero-anim--fade-down{animation:heroFadeDown .8s cubic-bezier(.25,.46,.45,.94) both}.hero-anim--fade-in{animation:heroFadeIn 1s ease both}.hero-anim--scale-in{animation:heroScaleIn 1s cubic-bezier(.25,.46,.45,.94) both}.hero-banner__subtitle.hero-anim--fade-up,.hero-banner__subtitle.hero-anim--fade-down,.hero-banner__subtitle.hero-anim--fade-in{animation-delay:.1s}.hero-banner__heading.hero-anim--fade-up,.hero-banner__heading.hero-anim--fade-down,.hero-banner__heading.hero-anim--fade-in,.hero-banner__heading.hero-anim--scale-in{animation-delay:.3s}.hero-banner__subheading.hero-anim--fade-up,.hero-banner__subheading.hero-anim--fade-in{animation-delay:.5s}.hero-banner__buttons.hero-anim--fade-up,.hero-banner__buttons.hero-anim--fade-in{animation-delay:.7s}@keyframes heroFadeUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes heroFadeDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes heroFadeIn{0%{opacity:0}to{opacity:1}}@keyframes heroScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.hero-anim--fade-up,.hero-anim--fade-down,.hero-anim--fade-in,.hero-anim--scale-in{animation:none!important}.hero-banner--parallax .hero-banner__img{transform:none!important}.hero-banner__scroll-line,.hero-banner__scroll-line:before{animation:none!important}}@media screen and (max-width:989px){.hero-banner__container{padding:48px 32px}.hero-banner__heading{font-size:calc(var(--hero-heading-size-desktop, 64px) * .75)}.hero-banner__btn{padding:12px 28px}}@media screen and (max-width:749px){.hero-banner{height:var(--hero-height-mobile, 100vh);max-height:var(--hero-max-height-mobile, 900px)}.hero-banner__container{padding:40px 20px}.hero-banner__heading{font-size:var(--hero-heading-size-mobile, 36px)}.hero-banner__subheading{font-size:var(--hero-subheading-size-mobile, 14px)}.hero-banner__subtitle{font-size:11px;padding:5px 14px;letter-spacing:.15em}.hero-banner__btn{font-size:var(--hero-btn-size-mobile, 14px);padding:12px 24px;width:100%;justify-content:center}.hero-banner__buttons{flex-direction:column;width:100%;gap:10px}.hero-banner__scroll-indicator{bottom:20px}.hero-banner__scroll-line{height:36px}.hero-banner__content--text-left .hero-banner__buttons,.hero-banner__content--text-right .hero-banner__buttons{align-items:stretch}}@media screen and (max-width:374px){.hero-banner__heading{font-size:calc(var(--hero-heading-size-mobile, 36px) * .85)}.hero-banner__container{padding:32px 16px}}.hero-banner .page-width{max-width:1400px;margin:0 auto;width:100%}
/*# sourceMappingURL=/cdn/shop/t/10/assets/section-hero-banner.css.map */