a { transition: all .2s ease-in-out; }   .bricks-background-primary { position: relative; display: inline-flex; align-items: center; gap: 40px; padding: 8px 10px 8px 18px; font-family: "Dosis", sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; line-height: 1; border: 1px solid var(--red); border-radius: 50px; text-decoration: none; overflow: hidden; z-index: 0; transition: border-color 0.5s ease; } .bricks-background-primary::before { content: ""; position: absolute; inset: 0; border-radius: 50px; background: linear-gradient(114deg, #F8A020 5.98%, #F87D2E 93.62%); transform: translateX(105%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } .bricks-background-primary:hover::before { transform: translateX(0%); } .bricks-background-primary:hover { border-color: #F85E33; }  .outline.bricks-color-primary { position: relative; display: inline-flex; align-items: center; gap: 40px; padding: 8px 10px 8px 18px; font-family: "Dosis", sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; line-height: 1; border: 1px solid #F85E33; border-radius: 50px; text-decoration: none; color: #F85E33; overflow: hidden; z-index: 0; transition: color 0.5s ease; } .outline.bricks-color-primary svg, .outline.bricks-color-primary svg * { fill: #F85E33 !important; } .outline.bricks-color-primary::before { content: ""; position: absolute; inset: 0; border-radius: 50px; background: #F8982E; transform: translateX(105%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } .outline.bricks-color-primary:hover::before { transform: translateX(0%); } .outline.bricks-color-primary:hover { color: #0E1016; } .outline.bricks-color-primary:hover svg, .outline.bricks-color-primary:hover svg * { fill: #0E1016 !important; transition: fill 0.2s ease; }  .bricks-background-secondary { position: relative; display: inline-flex; align-items: center; gap: 40px; padding: 8px 10px 8px 18px; font-family: "Dosis", sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; line-height: 1; border: 1px solid var(--Lime-green, #D7E000); border-radius: 50px; text-decoration: none; color: #0E1016; overflow: hidden; z-index: 0; transition: border-color 0.5s ease; } .bricks-background-secondary::before { content: ""; position: absolute; inset: 0; border-radius: 50px; background: linear-gradient(115deg, var(--Blue, #A9E8F3) 7.24%, #C5EDB0 88.72%); transform: translateX(105%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } .bricks-background-secondary:hover::before { transform: translateX(0%); } .bricks-background-secondary:hover { border-color: var(--Blue, #A9E8F3); }  .outline.bricks-color-secondary { position: relative; display: inline-flex; align-items: center; gap: 40px; padding: 8px 10px 8px 18px; font-family: "Dosis", sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; line-height: 1; border: 1px solid var(--Lime-green, #D7E000); border-radius: 50px; text-decoration: none; color: var(--Lime-green, #D7E000) !important; overflow: hidden; z-index: 0; transition: color 0.5s ease; } .outline.bricks-color-secondary svg, .outline.bricks-color-secondary svg * { fill: #D7E000 !important; } .outline.bricks-color-secondary::before { content: ""; position: absolute; inset: 0; border-radius: 50px; background: var(--Lime-green, #D7E000); transform: translateX(105%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } .outline.bricks-color-secondary:hover::before { transform: translateX(0%); } .outline.bricks-color-secondary:hover { color: #0E1016 !important; } .outline.bricks-color-secondary:hover svg, .outline.bricks-color-secondary:hover svg * { fill: #0E1016 !important; transition: fill 0.2s ease; }  .bricks-background-dark{ position: relative; display: inline-flex; align-items: center; gap: 40px; padding: 8px 10px 8px 18px; font-family: "Dosis", sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; line-height: 1; background: unset; border: 1px solid #0E1016; border-radius: 50px; text-decoration: none; color: #0E1016; overflow: hidden; z-index: 0; transition: color 0.5s ease, border-color 0.5s ease; } .bricks-background-dark::before { content: ""; position: absolute; inset: 0; border-radius: 50px; background: #0E1016; transform: translateX(105%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } .bricks-background-dark:hover::before { transform: translateX(0%); } .bricks-background-dark:hover { color: var(--Lime-green, #D7E000); border-color: #0E1016; } .bricks-background-dark:hover svg, .bricks-background-dark:hover svg * { fill: var(--Lime-green, #D7E000); transition: stroke 0.5s ease, fill 0.5s ease; }