.button-component{padding:10px 0}.button-component__container{margin:0 auto;max-width:1400px;width:100%}.button-component__buttons{align-items:center;display:flex;flex-wrap:wrap;gap:15px;&.align-left{justify-content:flex-start}&.align-center{justify-content:center}&.align-right{justify-content:flex-end}}.button-component .button{border:none;border-radius:8px;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:600;padding:14px 32px;text-align:center;text-decoration:none;transition:all .3s ease;&:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-2px)}}.button-component .button--teal{background-color:var(--pq-teal);border:2px solid var(--pq-teal);color:#fff;&:hover{background-color:#00adb5}}.button-component .button--teal-outline{background-color:#fff;border:2px solid var(--pq-teal);color:var(--pq-teal);&:hover{background-color:var(--pq-teal);color:#fff}}.button-component .button--blue{background-color:var(--pq-blue);border:2px solid var(--pq-blue);color:#fff;&:hover{background-color:#05222f}}.button-component .button--blue-outline{background-color:#fff;border:2px solid var(--pq-blue);color:var(--pq-blue);&:hover{background-color:var(--pq-blue);color:#fff}}.button-component .button--orange{background-color:var(--pq-orange);border:2px solid var(--pq-orange);color:#fff;&:hover{background-color:#e6a229}}.button-component .button--orange-outline{background-color:#fff;border:2px solid var(--pq-orange);color:var(--pq-orange);&:hover{background-color:var(--pq-orange);color:#fff}}.button-component .button--green{background-color:var(--pq-green);border:2px solid var(--pq-green);color:#fff;&:hover{background-color:#78b325}}.button-component .button--green-outline{background-color:#fff;border:2px solid var(--pq-green);color:var(--pq-green);&:hover{background-color:var(--pq-green);color:#fff}}.button-component .button--red{background-color:var(--pq-red);border:2px solid var(--pq-red);color:#fff;&:hover{background-color:#d12a20}}.button-component .button--red-outline{background-color:#fff;border:2px solid var(--pq-red);color:var(--pq-red);&:hover{background-color:var(--pq-red);color:#fff}}@media (max-width:576px){.button-component .button{font-size:1rem;padding:12px 24px;width:100%}.button-component__buttons{flex-direction:column;width:100%}}