:root {
--bodyFont: "Satoshi", sans-serif;
--titleFont: "Clash Grotesk", sans-serif;
--primaryColor: #613FE7;
--secondaryColor: #FA83FF;
--secondaryColor2: #6339CD;
--secondaryColor3: #AC643B;
--secondaryColor4: #047F76;
--hoverColor: #FA83FF;
--bodyColor: #606062;
--whiteColor: #FFFFFF;
--blackColor: #000000;
--titleColor: #1D1D1F;
--borderColor: #e2eaf0;
--inputbgColor: #ffffff;
--softbgColor: #F9F9FA;
--transition: 0.4s all ease;
}
.wc-btn-wrapper {
display: inline-block;
}
.btn-text-flip svg,
.wc-btn-wrapper svg {
width: 1em;
height: 1em;
} .wc-btn-group {
display: block;
width: -moz-fit-content;
width: fit-content;
}
.wc-btn-group .wc-btn-play {
color: var(--whiteColor);
fill: var(--whiteColor);
border-radius: 50px;
background-color: var(--primaryColor);
border: 1px solid transparent;
height: 60px;
width: 60px;
display: block;
align-items: center;
justify-content: center;
transition: all 0.5s;
}
.wc-btn-group > *:nth-child(2) {
transform: scale3d(1, 1, 1);
}
.wc-btn-group:hover > *:nth-child(2) {
transform: scale3d(1, 1, 1);
}
.helo--btn {
gap: 5px;
display: inline-flex;
align-items: center;
}
.helo--btn-wrapper svg,
.helo--btn svg {
width: 1em;
height: 1em;
} .wc-btn-wrapper {
display: inline-block;
}
.btn-text-flip svg,
.wc-btn-wrapper svg {
width: 1em;
height: 1em;
}
.btn-text-flip {
perspective: 1000px;
}
.btn-text-flip:hover span {
transform: rotateX(90deg) translateY(-12px);
}
.btn-text-flip span {
position: relative;
display: inline-block;
padding: 0;
color: #121212;
transition: transform 0.3s;
transform-origin: 50% 0;
transform-style: preserve-3d;
}
.btn-text-flip span:before {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
content: attr(data-text);
transition: color 0.3s;
transform: rotateX(-90deg);
transform-origin: 50% 0;
text-align: center;
}
.btn-text-flip {
align-items: center;
}
.wc-btn-group .wc-btn-primary {
background-color: transparent;
padding: 12px 24px;
min-height: 48px;
text-align: center;
text-transform: capitalize;
transition: 0.5s;
font-family: var(--bodyFont);
font-weight: 700;
background-size: 200% auto;
color: var(--whiteColor);
border-radius: 30px;
display: block;
font-size: 16px;
border: 1px solid transparent;
background-image: linear-gradient(to right, #613FE7 0%, #FA83FF 51%, #613FE7 100%);
}
.wc-btn-group .wc-btn-primary i {
margin-left: 6px;
}
.wc-btn-group .wc-btn-primary:hover {
background-position: right center;
background-color: transparent;
}
.wc-btn-group .wc-btn-primary.btn_3 {
background-image: unset;
}