.hero-button{position:relative;width:100px;height:100px;border:1px solid var(--color-secondary);background-color:transparent;overflow:hidden;transition:width .33s ease-in-out;cursor:pointer}.hero-button:hover{width:360px}.hero-content{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:100%;color:var(--color-secondary);font-size:14px;font-weight:700;z-index:2;width:100%}.hero-text-wrapper{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;flex:1;text-align:center;transition:max-width 0s ease .66s,opacity .33s ease .66s}.hero-button:hover .hero-text-wrapper{max-width:1000px;opacity:1}.hero-icon-left{transform:translateX(12px) rotate(-90deg)}.hero-icon-right{transform:translateX(-12px) rotate(90deg)}.hero-icon-left,.hero-icon-right{display:inline-block;min-width:24px;transition:transform .33s ease .33s,fill .33s ease .66s;fill:var(--color-secondary)}.hero-button:hover .hero-icon-left{transform:translateX(-4px) rotate(-90deg);fill:var(--color-primary)}.hero-button:hover .hero-icon-right{transform:translateX(4px) rotate(90deg);fill:var(--color-primary)}.hero-button:hover .hero-content{color:var(--color-primary)}.hero-background{position:absolute;inset:0;z-index:1;pointer-events:none}.hero-background:after,.hero-background:before{content:"";position:absolute;top:0;bottom:0;width:50%;background-color:var(--color-secondary);transform:scaleX(0);transition:transform .33s ease-in-out .66s;z-index:1}.hero-background:before{left:0;transform-origin:left}.hero-background:after{right:0;transform-origin:right}.hero-button:hover .hero-background:after,.hero-button:hover .hero-background:before{transform:scaleX(1)}@media (max-width:768px){.hero-button{width:unset;height:48px}.hero-button .hero-text-wrapper{max-width:1000px;opacity:1;transition:max-width 0s ease 0s,opacity .33s ease 0s}.hero-button .hero-icon-left{transform:translateX(-4px) rotate(-90deg) scale(.7);fill:var(--color-primary)}.hero-button .hero-icon-right{transform:translateX(4px) rotate(90deg) scale(.7);fill:var(--color-primary)}.hero-button .hero-content{color:var(--color-primary)}.hero-button .hero-background:after,.hero-button .hero-background:before{transform:scaleX(1);transition:transform .33s ease-in-out 0s}}@keyframes arrow-bounce{0%,to{transform:translateY(0)}10%{transform:translateY(6px)}20%{transform:translateY(0)}30%{transform:translateY(4px)}40%{transform:translateY(0)}to{transform:translateY(0)}}.animate-arrow-bounce{animation:arrow-bounce 2.5s ease-in-out infinite}.typewriter{white-space:pre;display:inline-block}.typewriter .cursor{display:inline-block;width:10px;height:260px;vertical-align:bottom;background:linear-gradient(180deg,rgba(45,83,111,.99),#7ca4c0);-webkit-mask:linear-gradient(180deg,#000,#000);mask:linear-gradient(180deg,#000,#000);-webkit-mask-composite:destination-in;mask-composite:intersect;animation:blink 1s steps(1) infinite;margin-left:.05em}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes marquee{0%{transform:translateX(0)}to{transform:translateX(-50%)}}.animate-marquee{display:flex;width:-moz-max-content;width:max-content;animation:marquee 50s linear infinite}.animated-button{width:400px;height:48px;background-color:transparent;overflow:hidden;transition:width .33s ease-in-out;cursor:pointer}.group:hover .animated-button{width:100px}.animated-content{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:100%;color:var(--color-secondary);font-size:14px;z-index:2;width:100%;font-weight:400}.animated-text-wrapper{display:inline-block;max-width:1000px;opacity:1;overflow:hidden;white-space:nowrap;flex:1;text-align:center;transition:max-width 0s ease .66s,opacity .33s ease 0s}.group:hover .animated-button .animated-text-wrapper{max-width:0;opacity:0;transition:max-width 0s ease 0s,opacity .33s ease 0s}.animated-icon-left{transform:translateX(0) rotate(-90deg)}.animated-icon-right{transform:translateX(0) rotate(90deg)}.animated-icon-left,.animated-icon-right{display:inline-block;min-width:24px;transition:transform .33s ease;fill:var(--color-secondary)}.group:hover .animated-button .animated-icon-left{transform:translateX(12px) rotate(-90deg)}.group:hover .animated-button .animated-icon-right{transform:translateX(-12px) rotate(90deg)}.animated-background{position:absolute;inset:0;z-index:1;pointer-events:none}