.split-icon-block {
position: relative;
overflow: hidden;
}
.split-icon-block .split-text-content h2 {
line-height: 1.1;
letter-spacing: -0.02em;
}
.split-icon-block .split-text-content p {
line-height: 1.6;
}
.split-icon-block .cta-button {
position: relative;
overflow: hidden;
}
.split-icon-block .split-graphic-container {
position: relative;
}
.split-icon-block .split-graphic-container .split-circle {
position: relative;
transition: all 0.3s ease;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.split-icon-block .split-graphic-container .split-circle .split-icon-center {
position: relative;
z-index: 2;
}
.split-icon-block .split-graphic-container .split-circle .split-icon-center svg {
height: 100%;
width: 100%;
transition: all 0.3s ease;
}
.split-icon-block .split-graphic-container .split-circle .split-icon-center .absolute {
animation: pulse 2s infinite;
}
.split-icon-block .split-graphic-container .split-circle .split-curved-texts {
animation: rotateText 20s linear infinite;
transform-origin: center center;
}
.split-icon-block .split-graphic-container .split-circle .split-curved-texts svg {
width: 100%;
height: 100%;
}
@media (max-width: 1024px) {
.split-icon-block .split-graphic-container .split-circle {
width: 280px;
height: 280px;
}
}
@media (max-width: 768px) {
.split-icon-block .split-graphic-container .split-circle {
width: 240px;
height: 240px;
}
.split-icon-block .split-text-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 2rem;
}
}
@media (max-width: 480px) {
.split-icon-block .split-graphic-container .split-circle {
width: 200px;
height: 200px;
}
}
.split-icon-block.animate-in .split-text-content {
animation: slideInLeft 0.8s ease-out;
}
.split-icon-block.animate-in .split-graphic-container {
animation: slideInRight 0.8s ease-out;
}
@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes rotateText {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}