.hero-banner{width:100%;min-height:500px;background-image:var(--variable-bg-mobile-image);background-position:100% 100%;background-repeat:no-repeat;background-size:cover;display:flex;align-items:center}
.hero-banner .hero-banner-content{max-width:80pc;width:calc(100% - 2rem) !important;margin:0 auto;position:relative}
.hero-banner .hero-banner-text{color:#fff;position:relative;z-index:99}
.bannerTextCenterAlign .hero-banner .hero-banner-text{margin:auto;text-align:center}
.textGradient .hero-banner .hero-banner-text{padding:80px 20px}
.textGradient .hero-banner .hero-banner-content{max-width:70pc}
.textGradient .hero-banner .hero-banner-content:before{content:'';width:100%;height:100%;position:absolute;background:var(--variable-textGradient-color);z-index:1;opacity:.8}
.hero-banner h1{color:var(--variable-txt-color);font-family:"Druk";font-size:80px !important;letter-spacing:2.5px;line-height:70px}
.titleFontakkuratFont .hero-banner h1{font-family:"Akkurat Pro";font-size:40px !important;letter-spacing:0;line-height:1em}
.hero-banner .pt-4{color:var(--variable-desc-color);padding:16px 0}
.hero-banner .pershing-btn{color:var(--variable-ctaButton-color);border:2px solid;margin:16px 0;display:flex;gap:5px;width:fit-content}
.hero-banner .material-icons{font-size:18px}
.hero-banner p{margin:0}
.hero-banner a{text-decoration:none;display:flex;width:fit-content}
.bannerTextCenterAlign .hero-banner a{margin:auto}
.hero-banner .pershing-btn:hover,.hero-banner .pershing-btn:hover::after{color:#000;background-color:#fff;border:2px solid transparent}
@media(min-width:768px){.hero-banner{background-image:var(--variable-bg-desktop-image);min-height:720px}
.hero-banner .no-desc{padding-top:24px}
.hero-banner .hero-banner-text{width:83.33%}
.hero-banner h1{font-size:100px !important;line-height:100px}
.titleFontakkuratFont .hero-banner h1{font-size:60px !important;line-height:1em}
.hero-banner .pt-4{padding:16px 0 16px 0 !important}
}
@media(min-width:1024px){.textGradient .hero-banner .hero-banner-content{max-width:60pc}
.hero-banner .hero-banner-text{width:50%}
.textGradient .hero-banner .hero-banner-text{width:65%}
.textGradient.titleFontakkuratFont .hero-banner .hero-banner-text{width:80%}
.hero-banner h1{font-size:100px !important}
.titleFontakkuratFont .hero-banner h1{font-size:60px !important;line-height:1em}
}
@media(min-width:1440px){.textGradient .hero-banner .hero-banner-content{max-width:70pc}
}