:root{--header-desktop-height: 141.95px}.how-it-works-hero{position:relative;overflow:hidden}@media (max-width: 1023px){.how-it-works-hero{padding-block:5rem!important}}@media (min-width: 1024px){.how-it-works-hero{height:calc(100vh - var(--header-desktop-height));display:grid;place-items:center}}.how-it-works-hero .hero-background-svg{position:absolute;bottom:0;right:0;width:50%;height:70%}.how-it-works-hero .hero-container{position:relative;z-index:1}.how-it-works-hero .hero-content-wrapper{display:flex;flex-direction:column;gap:3rem}@media screen and (min-width: 1024px){.how-it-works-hero .hero-content-wrapper{flex-direction:row;align-items:center;gap:8rem}}.how-it-works-hero .hero-text-container{flex:1;display:flex;flex-direction:column;gap:1.5rem}@media screen and (min-width: 1024px){.how-it-works-hero .hero-text-container{max-width:50%}}.how-it-works-hero .hero-title{font-size:clamp(2.2rem,2.1505vw + 1.5118rem,4.2rem);font-family:Bricolage Grotesque,sans-serif;font-weight:500;line-height:1.2;margin:0;color:var(--deep-blue)}.how-it-works-hero .hero-title p{margin:0}.how-it-works-hero .hero-text p{color:var(--deep-blue);font-size:clamp(1.6rem,.2151vw + 1.5312rem,1.8rem);font-weight:400;line-height:normal}.how-it-works-hero .button-container{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}.how-it-works-hero .button-group{display:flex;flex-direction:column;align-items:center;gap:.5rem}.how-it-works-hero .button-headline{font-size:14px;font-weight:500;color:var(--deep-blue);text-align:left;width:100%;opacity:.8;margin:0}.how-it-works-hero .hero-button{align-self:flex-start;display:inline-block;padding:1rem 1.8rem;font-weight:600;font-size:clamp(1.6rem,.4167vw + 1.4667rem,2rem);text-decoration:none;border-radius:10px;transition:all .3s ease;text-align:center;min-width:160px;text-wrap:balance}@media (min-width: 1024px){.how-it-works-hero .hero-button{min-width:305px}}.how-it-works-hero .hero-button.primary{background-color:var(--pacific-blue);color:#fff}.how-it-works-hero .hero-button.primary:hover{opacity:.9}.how-it-works-hero .hero-button.secondary{background-color:#fff;color:var(--pacific-blue);border:2px solid var(--pacific-blue)}.how-it-works-hero .hero-button.secondary:hover{opacity:.9}.how-it-works-hero .hero-media-container{flex:1;display:flex;flex-direction:column;gap:2rem;position:relative}@media screen and (min-width: 1024px){.how-it-works-hero .hero-media-container{max-width:50%}}.how-it-works-hero .media-wrapper{position:relative;width:100%;border-radius:11px;overflow:hidden}.how-it-works-hero .video-container-with-play{position:relative;cursor:pointer}.how-it-works-hero .play-button-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#0000001a;border-radius:8px;transition:all .3s ease}.how-it-works-hero .play-button-overlay:hover{background-color:#0000004d}.how-it-works-hero .play-button-overlay:hover .play-icon{transform:scale(1.1)}.how-it-works-hero .play-icon{transition:transform .3s ease;filter:drop-shadow(0px 4px 10px rgba(0,0,0,.2));width:80px;height:auto}@media screen and (max-width: 1023px){.how-it-works-hero .play-icon{width:60px}}.how-it-works-hero .hero-video-element,.how-it-works-hero .hero-cover-image,.how-it-works-hero .hero-placeholder{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.how-it-works-hero .extra-image-container{position:absolute;bottom:0;right:0;opacity:1;transition:opacity .26s ease;z-index:0}.how-it-works-hero .extra-image-container.hidden-badge{opacity:0;z-index:-1}@media (min-width: 1024px){.how-it-works-hero .extra-image-container{bottom:-120px}}.how-it-works-hero .hero-extra-image{max-width:200px;height:auto}@media screen and (max-width: 1023px){.how-it-works-hero .hero-extra-image{max-width:150px}}@media screen and (max-width: 1023px){.how-it-works-hero .hero-content-wrapper{gap:4rem}.how-it-works-hero .hero-text-container{text-align:center}.how-it-works-hero .hero-title{font-size:28px}.how-it-works-hero .hero-text p{font-size:16px}.how-it-works-hero .hero-button{width:100%;max-width:280px}.how-it-works-hero .button-headline{font-size:14px}}@media screen and (max-width: 767px){.how-it-works-hero .hero-title{font-size:24px}.how-it-works-hero .hero-text p{font-size:15px}.how-it-works-hero .hero-button{padding:1rem 2rem;font-size:15px}}
/*# sourceMappingURL=/cdn/shop/t/27/assets/how-it-works-hero.css.map */