.hero-slider{width:100vw;min-height:90dvh;margin-top:80px;position:relative;overflow:hidden}.hero-slider img{width:100%;height:100%}.hero-slider.fade .hero-bg,.hero-slider.fade .hero-content{opacity:0;transform:translate(-20px)}.hero-bg{width:100%;height:100%;transition:opacity .45s,transform .45s;position:absolute;inset:0}.hero-gradient{background:linear-gradient(90deg,#0e0e0ee6 28%,#00000080 55%,#0000001a 75%);position:absolute;inset:0}.hero-content{color:#fff;z-index:2;max-width:620px;transition:opacity .45s,transform .45s;position:absolute;bottom:20%;left:6%}.hero-badge{color:#fff;text-transform:capitalize;margin:10px 0;font-size:1.5rem;display:block}.hero-content h1{text-transform:capitalize;margin:.8rem 0;font-size:3rem}.hero-content p{color:#ccc;max-width:90%;font-size:1rem}.hero-actions{gap:.8rem;margin-top:1.2rem;display:flex}.hero-btn{border-radius:6px;justify-content:center;align-items:center;gap:10px;padding:.65rem 1.4rem;font-weight:500;text-decoration:none;display:flex}.hero-btn.primary{background:var(--background-btns);border:1px solid var(--outline-btns);color:var(--color-btns)}.hero-btn.ghost{color:#fff;background:#ffffff26;padding-top:15px}.hero-arrow{color:#fff;cursor:pointer;z-index:3;opacity:1;background:#00000080;border:none;height:fit-content;position:absolute;top:50%;transform:translateY(-50%)}.hero-arrow.left{left:1rem}.hero-arrow.right{right:1rem}.hero-bottom-fade{background:linear-gradient(to bottom, #0000 0%, #0006 40%, var(--background) 70%, var(--background) 100%);z-index:1;pointer-events:none;height:140px;position:absolute;bottom:0;left:0;right:0}.hero-dots{z-index:5;gap:8px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.hero-dot{background:var(--dots);cursor:pointer;border:none;border-radius:4px;width:10px;height:7px;transition:all .3s}.hero-dot.active{background:var(--active);width:30px;transform:scale(1.25)}@media (max-width:768px){.hero-dots{bottom:16px}.hero-dot{width:8px;height:8px}.hero-slider{height:20vh}.hero-content{max-width:90%;bottom:12%}.hero-content h1{font-size:2rem}}